Компютърна поддръжка от Модус 2 ООДКомпютърна поддръжка

+ Компютърна профилактика;
+ Инсталация, конфигуриране;
+ Антивирусна и спам защита;
+ Сервизно обслужване;
+ Архивиране на информацията;
+ Контрол на достъпа;
+ Мрежи - дизайн и конфигуриране;
+ Сървъри - за приложения, файлови, за ел. поща и уеб;
+ ... и много други според вашите конкретни нужди.

Подобрете UX с няколко прости правила за взаимодействие

toptal blog image 1496317055402 a4e381f1c4d8a4e8dcbc1be564069198
от MIKLOS PHILIPS - редактор на блога за дизайн @ TOPTAL

Има тънка разграничителна линия между взаимодействието на потребителя с интерфейса, което работи и това, което е неизползваемо.

Принципите на дизайна на взаимодействието ни помагат да свързваме или разделяме приложението и потребителите.
Добре изпълнения дизайн на взаимодействието играе огромна роля в прилагането на страхотен UX и несъмнено е един от фундаменталните принципи на UX.

“Неизползваем” означава “Аз се махам” независимо колко красиво изглежда дизайна, колко са фантастични анимациите - интерактивния дизайн е един миш-маш и вашия UX e капут. Направете го правилно и ще сте на пътя към един много по добър UX, даже и ако естетиката му куца. С добър дизайн продукта ви ще има много по-голям шанс за успех, което на свой ред допринася за целта на вашия сайт или приложение.

Дизайнът на взаимодействието (IxD) е дефиниран от Асоциацията по Дизайн на взаимодействието, като “структурата и поведението на интерактивните системи”. Дизайнерите на взаимодействието се стремят да създадат смислени отношения между хората от една страна и продуктите и услугите от друга, които тези хора използват, от компютри до мобилни устройства, уреди и други.

“Опитът е критичен, защото той определя колко добре хората помнят своите взаимодействия” Don Norman “Дизайн на ежедневните неща”.

Ако следвате принципите за дизайн на взаимодействието, ще направите добър интерфейс, което от своя страна ще допринесе за потребителското преживяване.

toptal blog image 1496316668276 341d6e9cecc50ca6498ff85fd2acfc86

Интерактвен дизайн на мобилни приложения (от Adam Kalin)

Възможно е всички днешни уреди и технологии да се заменят с нещо напълно различно за една нощ, но заради принципите на добрият дизайн на взаимодействието ние пак ще можем да ги използваме. Тези установени принципи именно мотивират хората, тяхното поведение и как те мислят.
Представете си в една зграда, ако всяка дръжка на всяка врата работеше по различен начин. При една трябва например да натиснете първо навътре, а после надолу, при друга - първо нагоре, вместо надолу, а при трета, трябва да дръпнете 2 пъти и след това надолу - пълна трагедия. Всъщност фразата “завъртам дръжката на вратата” допуска, че има само един начин да го направите. Никой не иска да го бият по главата със “следвай правилата”, но добрия дизайн на взаимодействието разчита на набор от правила, добри практики, стандарти и конвенции за боравене. Това не е скучна наука, те формират основата на IxD  и правят възможно взаимодействието с най-малкото съпротивление. Стандартите за взаимодействие не задушават креативността, те са фундаментални насоки, които помагат на дизайнера да установи база на “използваем и познат дизайн”, от която да направи иновация.

Принципи и добри практики на дизайна на взаимодействието

Добрият дизайн на потребителския интерфейс UI носи пълно удовлетворение, като комбинира основните принципи на дизайна на UI с дизайн, базиран на целите и взаимодействието.
Успешният дизайн на взаимодействието включва прости, ясно дефинирани цели, силни аргументи и интуитивен интерфейс.
В усилието си да поддържа дизайна на взаимодействието лесен, той слага само абсолютния миниум, който е нужен за потребителите, за да решат успешно задачата си.
Нека се потопим в някои от най-важните принципи (това не е пълен списък):

Откриваемост

В общи линии, ако потребителя не може да намери нещо, то не съществува.Трябва да стане кристално ясно какви действия са възможни с UI заедна милисекунда - например като се сложат етикети на иконите. Ненадписаните икони са като да хвърляш камъни на пътя на потребителя, защото те трябва да спрат, за да схванат значението им. Вие прекъсвате потока и не се шокирайте…. потребителите не се интересуват от заучаването на вашия UI.
toptal blog image 1496316703530 5e0fd553ad8710fb36e0b7ffe33831db

За да се елиминира гадаенето, LinkedIn, NPR, и Facebook са надписали техните икони.

Означения

Близко свързано с откриваемостта е ефективното използване на означения което осигурява позволените действия (дадено действие да се приложи към даден обект) да са ясно отразени в потребителския интерфейс. Означенията дават ясна представа, като сигнали и съобщения. Показвайки възможно взаимодействие, те светват зелена лампа на потребителя, които му крещят “Аз съм тук, ти можеш да ме кликнеш, изтеглиш и др.”  Някакво позволено действие може да съществува в потребителскоя интерфейс, но да остане скрито. Когато то няма означение, остава невидимо за потребителя. Пример: може да е “скрито жестово взаимодействие”, което не се открива освен ако потребителя случайно не изтегли (например отляво надясно) и изтрие случайно нещо.

“Позволените действия дефинират какво може да се направи. Означенията определят как хората разбират за тези възможности. Означенията са знаци, възприети сигнали за какво може да се направи с тях. Означенията са с много по-голяма важност за дизайнерите, отколкото са възможните действия.” Don Norman (Norman, 2013)


toptal blog image 1496316716815 6dd6294bdf4c29b359c1298cb6759234

Apple Mail например има скрито възможно действие. Ако използвате Magic Mouse на десктоп, хората може да изтеглят наляво. Това действие е скрито за потребителите, освен ако те не знаят за него, защото няма означение.

Обратна връзка

След означенията, следващият най-важен елемент е обратната връзка. Обратната връзка е изричната информация за извършването на действие. Тя също означава постоянна видимост на състоянието на системата, тоест системата трябва винаги да е сигурна, че:

  • Потребителите са постоянно информирани какво се случва.
  • Има постоянна информация за разултатите от техните действия и текущото състояние на продукта (на системата);
  • Няма объркване в съзнанието на потребителя относно състоянието на продукта, тоест дали изчислява, зарежда, търси, ъплоудва, или някакво друго изменение на състоянието;
  • След като дадено действие е извършено, е лесно да се определи новото състояние.

toptal blog image 1496316728156 2b52c2341ea15a0dfce6850efe60cea9

Тази последователност за качване демонстрира 3 състояния с постоянна обратна връзка: завлачваме документ до икона, процес на качване и потвърждение за успешно качване. (от Jokubas)

Концептуални модели и мислени модели

Добрият дизайн на взаимодействието представя цялата информация, от която потребителя се нуждае за да си създаде добър концептуален модел на системата, като по този начин той я разбира и има чувство за контрол. Концептуалният модел подобрява откриваемостта и оценката на резултатите при използването на системата.

Умствени модели - или когнитивни карти - това са изображения в потребителския ум, които информират за очакването на някакво взаимодействие и как нещо работи в реалния свят. Когнитивните карти са вътрешно изобразяване на нашата физическа действителност, свързана с пространствени връзки. Като използват ефективно този умствен модел на потребителя, дизайнерите на взаимодействието могат да създадат системи, които се възприемат като “интуитивни”.

toptal blog image 1496316934347 b70ab137992cd4c348cf0b76763bedc5

Нагласянето на седалката в Мерцедес е добър пример на дизайн на взаимодействието, който използва умствения модел. Формата на бутоните за управление като седалка, ги правят интуитивно лесни за разбиране и за регулиране.

Дизайнерът изобретява концептуалния модел - модела на дизайна и това е как дизайнера възнамерява устройството или софтуера да работи. Единственият начин да се сподели този модел с потребителя е да се приложи в потребителския интерфейс. Така потребителите взаимодействат  с концептуалния модел и си създават техен собствен умствен модел за това как работи това нещо.
Дизайнерите могат да кажат на потребителите, как са възнамерявали да работи приложението - те трябва да направят и съответно UI, за да предадат това. С други думи, да направят интерфейса лесен за разбиране и за използване. Лошият дизайн на взаимодействието носи риска от създаването на грешен умствен модел в потребителя. Това води до объркване  и грешки на потребителя, защото той се опитва да работи с приложението по начин, по който не е планирал дизайнера.

Съответствия

Съответствията са връзките между управлението и неговия ефект върху света. Принципа на обратната връзка е близък родственик на съответствията, защото 2-та принципа работят заедно за да безпроблемно преживяване. Почти всички артефакти изискват някакво съответствие между контролите и ефекта - в случая с дизайна на интерфейса, това е съответствието  между контролата и резултатната функция.

toptal blog image 1496316946197 ffe07e77ba8ab9d071f15384f2d418fe

Автомобилен дизайн на взаимодействието: Бутоните за регулиране силата на звука са върху волана и използват натурално съответствие: натиснете надясно, за да увеличите или наляво, за да намалите звука и резултата е виден веднага на таблото.

Природно съответствие - да взаимстваме от физически аналогии и от културни стандарти - води до моментално разбиране. Например дизайнерът може да използва пространствена аналогия в интерфейса:
  

  • За да увеличи някаква стойност с плъзгач, да плъзне надясно.
  • За да намали, да плъзне наляво.

Някои природни съответствия са биологични, като универсалния стадарт, например че ако увеличим нивото, това означава повече, а ако намалим нивото - по-малко.

toptal blog image 1496316956329 47d637b34ea0def57b5c23bab21cdbba

Съответствия на познати физически аналогии: лостове и плъзгачи за управление (От Anton Kudin)

Ограничения

Концепцията за дизайн с ограничения е начин как да лимитираме взаимодействието на потребителя, което е възможно в даден момент. Ограниченията на дизайна на взаимодействието помагат на ефикасната работа като дават “Направляващи релси” за потребителите - почти като направляваща ръка, която се появява за да управлява взаимодействието.
Ограниченията в дизайна осигуряват само определени неща да са възможни, или даже само те да са видими, за да насочим потребителя към дадени взаимодействия. Те вземат в предвид размера, пропорцията, ударениято, състоянието и как те работят заедно в хармония и ни помагат в йерархията и следователно да влияят на потребителя. Ограниченията също така подпомагат потребителя и намаляват вероятността да допусне грешка.
Обратното на ограниченията е когато всяка възможност се предлага на потребителя, като го затруднява да реши какво да направи. Това е принципа на избора. Колкото повече опции, толкова по-трудно е да се избере една от тях - ние ставаме обсебени от всички възможности.
Великия дизайн на взаимодействието не слага всяка налична възможност на интерфейса, а го ограничава до това, което е най-важно във всеки момент.

toptal blog image 1496316976900 01e5abf29099397266e4119d054b4ff3

Foursquare използва ограничения в дизайна и да фокусира задачата на потребителя.

Последователност, стандартност и евристичност

Тези три са свързани по между си - братя по модел. За да предотвратим грешки и да направим приложението лесно за учене, жизнено важно е модела на взаимодействието да е последователен. Последователността подобрява интерфейса, общата му използваемост и ефикасността, с която потребителите могат да използват цифровите продукти.
Последователност означава да използваш подобни елементи, да постигнеш подобни цели и да имаш подобни финкции и поведение през цялото време - последователен интерфейс е този, който следва правила, като например използването на същата операция за правене на дадено нещо.

toptal blog image 1496316986784 2948fc20c2bff170e7229c34a9e67945

Менюто “share” във всички приложения на iPad е пример за последователност. То винаги работи по един и същ начин.

Продукти, които се стремят да бъдат много използуваеми, следват добре установени конвенции, стандарти и добри практики и евристичност (широки правила, не някакви специфични написани указания).
Съобразяването с конвенция например може да е начинът, по който е изградена дадена страница. Уеб потребителите използват 69% от тяхното време да гледат лявата половина от страницата и 30% да гледат дясната. Така сайта е много по-вероятно да е успешен, ако следва конвенционалния изглед.
Стандарт би могло да е навигационна лента (елемент който дава навигация и ориентация, която може да се разпознае веднага) или общо навигационно меню, което е в горната част на страницата, както на сайта на BBC.

Образци и заучаване

Колко лесно може един нов потребител да се научи да навигира в един интерфейс? Никой не иска да се учи на нов начин да прави едни и същи неща, освен ако начинът не предлага съществени предимства пред предишния - и все пак сме постоянно затрупвани с нетествани и неконвенционални взаимодействия.
Общоприетите компоненти и модели дават възможност за моментално научаване. Веднъж като сте научили как да използвате лъжица, вие винаги ще знаете как да използвате лъжица. Същото е с карането на колело, пързалянето. Същото важи и за компонентите от потребителския интерфейс, които използваме всеки ден: бутони, текстови полета, падащи менюта, чекбоксове, радио бутони, слайд-шоута, икони, акордеони, полета за търсене и др.

toptal blog image 1496317000401 fb848e0a8ae7948c2ef7569b621ef47b

Библиотеките за потребителски интерфейс използват добре познати стандартни образци като компоненти за форми (от Keynotopia)

Най-добрите дизайни на взаимодействието не се опитват да преоткрият колелото, а използват ефективно и ефикасно образците по нов начин.
Образците не само насърчават обучението, но също така дават приемственост (друг принцип, който дискутирахме по-нагоре), като я използват в синхрон с нагласата на потребителя как би трябвало да работят нещата.

Визуална йерархия и акцент

Хората при взаимодействието си със сайт или с приложение, търсят информация, която е най-отговаряща на тяхното търсене. Визуалната йерархия се отнася за организирането на елементите по начин, който включва важността им. Визуалната йерархия в дизайна  влияе на реда, в който човешкото око възприема това, което вижда. Не на всичко е дадено еднакво “тегло”; редът е създаден от визуалния контраст между обектите в полето на възприятието. Визуалният контраст (акцент) може да се постигне от размер, близост, цвят, наситеност или от тонален контраст между елементите.

toptal blog image 1496317011753 5a7fbd42f79015709e88335d2c63269d

Тези мобилни екрани използват визуална йерархия за да фокусират потребителя върху определени области от екрана и да създадат нива от свързано съдържание. (мобилен набор от Vonn)

Не подценявайте силата на визуалната йерархия. Тя е била използвана много ефективно в най-различни видове дизайн от векове, в архитектурата и в промишления дизайн, както и в печатния дизайн. Вижте например някои страхотни страхотни дизайни на плакати. С използването на тази техника добре в дизайна на взаимодействието, правилните неща изглежда че се появяват в правилното време по правилния начин.

Добрите дизайнери на взаимодействието използват силата на подчертаването за да постигнат успешно “готови за работа” дизайни на интерфейса, които изглежда че работят като добре смазана машина.

Закона на Фитс

Ако искате вярвайте, но този закон идва от ранните изследвания, които са изучавали движението на човешките мускули и концентрация на операторите на телеграфи и ефективността на хората на производствената линия и по-късно е бил адаптиран за взаимодействието човек-компютър. Той гласи “Времето да възприемете дадена цел е функция от разстоянието до тази цел и от размера и”.
В по-лесни понятия - всичко зависи от колко отдалечена и колко голяма е целта и колко близка е целта в сравнение с други цели. По-кратки движения на мишката или докосвания са по-добре - винаги е по-бързо да хванем и да преместим една цел, ако тя е по-близо до началната ни позиция. Свързаните задачи също трябва да са близко една до друга, така че потребителите да не трябва да се разхождат по екрана взаимодействайки си с потребителския интерфейс.
Законът на Фитс може точно да предвиди времето, което ни е нужно да се преместим до дадена цел и да я изберем. Целта може да бъде бутон, падащо меню или някакъв друг интерактивен елемент на екрана. Ако той е твърде далеч, твърде малък или елементите, на които кликаме са твърде близо един до друг, ефективнстта и използваемостта на потребителския интерфейс е доста намалена.

toptal blog image 1496317022334 ac5e8fa8127273ec51f9392cbc93eb66

Големите бутони могат да се уцелят много по-лесно. Ако се възползваме от закона на Фитс, ние можем също така да въведем ограничения, които да предпазят от грешки: забележете например бутона “Cancel”, който е разположен далеч вляво.

Диаграма на Гутенберг, Z и F модели на изглед

Тези модели са приложими в различни ситуации в зависимост от съдържанието и се използват най-често от западната аудитория. Диаграмата на Гутенберг описва главния модел, по който се движат очите, когато гледат равномерно разпределена, хомогенна информация - главно в сайтове с много текст като блогове и новинарски сайтове. Диаграмата на Гутенберг предполага, че неразвитите области изпадат извън следата на четене и получават минимално внимание, освен ако не са подчертани визуално по някакъв начин.

toptal blog image 1496317030017 a53a07fb55913e85df20675f9eb5df56

Диаграмата на Гутенберг показва нормалното поведение на потребителя, познати като гравитация на четенето.

Z моделът следва формата на буквата Z. В някои случаи тя също така се нарича модел Зиг-Заг. Главната разлика с диаграмата на Гутенберг е че Z  диаграмата предполага, че потребителите ще преминат през двете неразработени области. Иначе те ще започнат и ще завършат на едни същи места и ще минат през средата. Както и с Гутенберг, дизайнерът ще разположи най-важната информация по следата на Z.

toptal blog image 1496317037735 6777f77378154bbac3980f79ce6ef6d5

Уебсайта на iZettle оптимизира визуалното възприемане с дизайн по Z модела.

F идва от “бърз” (fast) и се отнася до това как потребителите четат съдържанието. F моделът е бил популяризиран от изледване за движението на окото на NNGroup като са записани повече от 200 потребителя, които четат съдържание в интернет. Изледването показало, че модела за четене на потребителите е доста сходен при много различни видове уебсайтове.

toptal blog image 1496317046634 b67a0c3881e3937d7cd3f028fcac00a6

Изледванията за следенето с очи показват една топлинна диаграма на F модела докато се обхождат страници (от NNGroup).

Защо това е важно? В сайт за електронна търговия например, за да се максимизира ефекта, ние трябва да разположим съдържанието, което е важно, следвайки F диаграмата.

Разпознаване, а не припомняне

Разпознаването се отнася за нашата способност да разпознаем събитие или някаква информация която ни е позната, докато припомнянето е много повече когнитивно бреме, което включва извикването на свързани подробности от паметта. Показвайки на хора неща, които те могат да разпознаят подобрява използваемостта спрямо това да трябва да си ги припомнят отначало.

toptal blog image 1496317055402 a4e381f1c4d8a4e8dcbc1be564069198

Стандартните икони са веднага разпознаваеми.

Например използването на икони в потребителския интерфейс е много важно, защото позволява веднага да разпознаем символ. Процесите в нашия мозък разпознават символи 1000 пъти по-бързо отколкото четене на текст. Ако дизайнера изобрази стандартен знак за предупреждение в някакъв диалог, това предизвиква потребителя веднага да се съсредоточи и да отдели внимание, защото следващото действие може да е деструктивно. Но ако иконата е направена така, че да предизвиква потребителите да си припомнят или да разберат значението   - например вдигната ръка вместо иконата за предупреждение - това намалява ефикасността и използваемостта на потребителския интерфейс.

Естетичен и минималистичен дизайн

“Трябва дълбоко да разбирате същността на един продукт, за да може да се освободите от частите, които не са жизнено важни” - Jonathan Ive.


Това е един от най-предизвикателните принципи, защото е труден. Тенденцията е дизайнерите и продуктовите мениджъри да добавят всяка налична под слънцето опция и да оставят на потребителя да реши коя опция да приеме.Това е мързеливия подход и той прави от продукта една напълно безмислена бъркотия.

toptal blog image 1496317063509 6ef70313665e0b74d2101afa2160fc25

Apple са от дълго време адвокати на естетичния и минималистичния прост  дизайн.

Интерфейсите трябва да се изчистят от ненужните елементи и от съдържанието, което не поддържа целите и задачите на потребителя. Дизайнерите трябва не просто да създават естетичен и хубав за очите потребителски интерфейс, но също така да приоритизират информацията екран по екран в потока на потребителя. С използването на визуална йерархия и с магията на акцента, те трябва да представят само основния и абсолютен минимум от информация, от която се нуждае потребителя, за да реши задачата си.
Микеланджело казва за своята работа: “Аз видях ангел в мрамора и дълбах, докато го освободя.”

toptal blog image 1496317074516 30657b241774a6469c8c6e7a212f4973

От бъркотията към простотата: редизайн на бордна карта от Kelsey Raymond

В дизайна на взаимодействие, минималистичното, естетически привлекателното и простото, изисква дизайнера да разбира какво се случва точно в момента, когато хората ще използват продукта и да се избави от всичко, което не е нужно. Може би най-добрия подход е да се направи задълбочено изследване на потребителите - как ще използват продукта.

Предпазване от грешки

Потребителите често се разсейват докато изпълняват някаква задача, затова ключови за предпазването от неволни грешки са визуалните акценти, предлагането на подсказки и използването на внимателно проектирани ограничения. Една форма на предпазване от грешки, която е известна като  Poka-Yoke - се отнася до прилагането на безопасни механизми, които да предпазят процеса от допускането на грешки.
Един от най-добрите начини да предпазим от грешки е да проектираме по-добър мислен модел. Много потребителски грешки произлизат от дизайнерския модел на интерпретиране на работата на системата, който не съвпада с потребителския умствен модел.
Стандартните правила на дизайна са важни (един от принципите, които споменахме по-горе), защото те помагат на потребителите да разберат какви действия могат да предприемат. Потребителите, които работят с вашия сайт или приложение, са използвали хиляди други сайтове и приложения и очакват общи интерактивни елементи, които да изглеждат и да работят по определен начин. Ситуации с грешки могат да възникнат, когато вашият продукт се отклонява от тези конвенции.

toptal blog image 1496317084670 19a9c50244a1820b6a30769d7926b25a

Предупреждавайте преди грешките да са направени и преди разрушителните действия. По-добър от добре показаните съобщения за грешки е хубавия дизайн, който предпазва от допускането на грешка на първо място. Опитайте се да елиминирате обстоятелствата, когато може да се допусне грешка и проверявайте винаги за такива.

Бъдещето на интерактивния дизайн

Новите устройства, среди и интерфейси ще продължат да се развиват с нови възможности за интерактивност. Контролерите за видео игрите постоянно се развиват, за да предлагат разнообрани начини за управление и непосредствена обратна връзка. Интерфейси с жестов-контрол от тъч-екрани които  поддържат 2D и 3D жестове – например, жестовете на iOS и устройствата с Android, използването на жестове с ръка в тримерно пространство, за да си взаимодействаме с пространства на виртуална реалност, игрови конзоли и устройства от интернет на нещата, които ни позволяват да управляваме нашата действителност.
В случая с проекта на Гугъл Project Soli, може да кажем сбогом на мишката, тракпада и джойстика и да превключим на по-естествените жесто-мимични взаимодействия, като използваме нашата ръка и пръсти, за да контролираме устройствата. В някои случаи - в интерфейсите за разговори например, методите за въвеждане на информация може да се променят от клавиатура към глас. Въпреки това принципа за своевременна и постоянна обратна връзка под някаква форма (глас, осезание или визуално) пак ще е нужен.

toptal blog image 1496317094435 78e004df4fc7ec238453da7cd6660984

Проекта на Гугъл Soli за жестов контрол на интерфейса с използване на пръсти (слайдера илюстрира ефекта).

Принципите на фундаменталния дизайн на взаимодействието ще играят винаги централна роля в дизайна на бъдещите системи. Той  е много важен за дизайнерите, които трябва да се съобразяват с тях. Те са не-трудни и бързи правила, но допринасят за по-добри  и привлекателни продукти и услуги. Точно както успешните филми използват древни техники за разказване, които следват изпитани и истински, доказани от времето структури, принципите на интерактивния дизайн съществуват заради добри причини. Ако правилата се следват, продуктовия дизайнер ще се възползва и ще подобри използваемостта и ще увеличи клиентите на своите продукти.

Източник: Boost Your UX with These Successful Interaction Design Principles