Запомнете тези десет насоки, ако искате да разработите красив, лесен за използване и ориентиран към човека дизайн на потребителски интерфейс.
Уебсайтът е повече от просто колекция от взаимосвързани страници. Това е интерфейс, място, където много неща се сблъскват, взаимодействат и оказват влияние едно върху друго — в този случай онлайн присъствието на човек и компания или индивид. Посетителят ще има опит в резултат на този контакт и вашата работа като уеб дизайнер е да направите това преживяване възможно най-доброто.
И ключът е да имате предвид потребителя си на първо място, преди всичко и през цялото време.
За щастие, въпреки младостта си, уеб дизайнът дължи много на научното изследване на взаимодействието човек-компютър (HCI). И тези десет съвета от изследване на HCI ще ви помогнат да запазите фокуса си върху клиентите ви през целия процес на проектиране.
Дизайнът на интерфейса, който се фокусира върху формата и функцията на интерфейсите, е подмножество от дизайна на потребителското изживяване, който се фокусира върху по-голямата картина: цялото изживяване, а не само интерфейса.
1. Запознайте се с клиентите си.
Преди всичко трябва да имате задълбочено разбиране както за вътрешните, така и за външните си потребители. Да, това изисква задълбочено разбиране на демографските данни, които вашето приложение(я) за анализ може да събира. Но по-важното е, че изисква осъзнаване от какво се нуждаят и какво им пречи да постигнат целите си.
За да се постигне това ниво на емпатия, е необходим повече от задълбочен преглед на данните. Това включва опознаване на посетителите на вашия уебсайт. Това изисква да говорите с тях лице в лице, да ги видите как използват вашия продукт (а може би и други) и да им задавате въпроси от сорта на „Как ви харесва този дизайн?“
Какво искат да постигнат? Какво им пречи да постигнат целите си? Как един уебсайт може да помогне на хората да преодолеят или да се ориентират в тези предизвикателства?
Не се съобразявайте само с това, което вашите потребители искат. Копайте по-дълбоко, за да разберете от какво имат нужда. Желанията в крайна сметка са продукт на неудовлетворени нужди. Ще можете да удовлетворите най-дълбоките нужди на потребителя, като същевременно отговаряте на най-основните му изисквания, ако можете да задоволите най-дълбоките им нужди.
Прозренията, които ще получите от анализирането на данни и взаимодействието с клиентите, ще повлияят на всяко решение, което вземете, от това как хората използват вашия интерфейс до какви видове информация ще наблегнете в този интерфейс.
2. Определете как вашият интерфейс ще се използва от потребителите.
Преди да проектирате интерфейса си, първо трябва да опишете как хората ще го използват. Като се има предвид нарастващото разпространение на базираните на докосване устройства, това е по-спешен проблем, отколкото си мислите.
Хората се ангажират с уебсайтове и приложения по два начина: директно (чрез компонентите на интерфейса на продукта) и индиректно (чрез елементите на интерфейса на продукта) (чрез взаимодействие с елементи на потребителския интерфейс, външни за продукта).
Примери за директни срещи
- Актът на натискане на бутон
- Използване на кредитна карта за извършване на покупка
- Плъзгане и пускане на елемент с върха на пръста
Непреките взаимодействия са тези, които възникват, когато двама или повече души взаимодействат по различен начин.
- Посочване и щракване с мишката
- Използване на ключови инструкции и клавишни комбинации
- Попълване на поле на формуляр с данни
- Рисуване на таблет Wacom
Понякога взаимодействието може да изглежда твърде просто.
Трябва да базирате решенията си на това кои са вашите потребители и какви устройства използват. Ако проектирате за възрастни хора или хора с ограничена физическа сръчност, не трябва да разчитате на плъзгане. Ако проектирате за писатели или програмисти, които предпочитат да взаимодействат с приложения с помощта на клавиатурата, а не с мишката, ще искате да включите всички често срещани клавишни комбинации, за да спестите време.
3. Установете целите си.
Много дейности в уебсайт или приложение имат последствия: натискането на бутон може да доведе до покупка на нещо, изтриване на страница или публикуване на злобен коментар за тортата за рождения ден на баба. И има безпокойство навсякъде, където има последици.
В резултат на това, преди потребителите да щракнат върху този бутон, уверете се, че разбират какво ще се случи. Това може да стане чрез дизайн и/или копие.
Задаване на очаквания чрез дизайн
- Избиране и избиране на бутона, който съответства на планираното действие
- Използване на добре познат символ (като кошче за боклук за бутон за изтриване, знак плюс за добавяне на нещо или лупа за търсене) във връзка с копие.
- Избор на цвят, който има специално значение (зелено за „върви“, червено за „спиране“)
Задаване на очаквания с копие
- Създаване на кратко копие на бутон
- Предоставяне на насочващо/окуражаващо копие в празни фази
- Изпращане на сигнали и искане за потвърждение
Изглежда разумно да попитате хората дали са сигурни за дейности с необратими последици, като например окончателното премахване на нещо.
4. Бъдете готови да правите грешки.
Хората правят грешки, но не трябва да бъдат наказвани за тях (винаги). Можете да помогнете за намаляване на последствията от човешка грешка, като направите едно от двете неща:
- Уверете се, че не правите грешки на първо място.
- Когато възникнат, осигурете средства за защита.
Ще срещнете редица техники за предотвратяване на грешки в електронната търговия и дизайна на формуляри. Бутоните ще бъдат деактивирани, докато не бъдат попълнени всички полета. Формулярът открива кога имейл адрес е въведен погрешно. Изскачащи прозорци питат дали наистина искате да изоставите пазарската си количка (да, Amazon — без значение колко може да навреди на горкото създание).
Очакването на грешки обикновено е по-малко утежняващо, отколкото опитите за отстраняването им след факта. Това се дължи на факта, че се появяват преди фантастичното усещане за успех, което идва с натискането на бутона „Напред“ или „Изпращане“.
Има обаче моменти, когато просто трябва да оставиш нещата да се случват. Описателните съобщения за грешки наистина блестят в този момент.
Когато създавате съобщения за грешка, уверете се, че те постигат две цели:
Опишете проблема. „Ти заяви, че си роден на Марс“, например, който човечеството все още не е колонизирало. Още.“
Опишете как да отстраните проблема. Например „Моля, въведете родно място тук, на Земята“.
Струва си да се спомене, че същата книга може да се използва в ситуации без грешка. Например, ако изтрия нещо по погрешка, но е възстановимо, уведомете ме с ред от текст, който гласи „Винаги можете да възстановите изтритите неща, като отидете в кошчето си и щракнете върху Възстановяване“.
Подходът poka-yoke е начин за предвиждане на потребителски грешки. Poka-yoke е японски термин, който означава „доказателство за грешки“.
5. Дайте незабавна обратна връзка
В реалния свят средата ни дава принос. Това, което казваме, има ефект върху другите (обикновено). Една котка мърка или изсъска в отговор на нашето чесане (в зависимост от нейната капризност и колко сме смучели при почесване на котка).
Твърде често цифровите интерфейси не реагират, оставяйки ни объркани дали да презаредим страницата, да рестартираме лаптопа или просто да го изхвърлим през първия отворен прозорец.
Ако даден уебсайт се зарежда за по-малко от 5 секунди, не показвайте лента за напредък, тъй като това ще направи времето за зареждане да изглежда по-дълго. Вместо това използвайте дизайн, който не предполага напредък, като класическата „въртящо колело на съдбата“ на Mac. Това изобщо не е така. Ако все пак използвате ленти за напредък на сайта си, помислете за използването на някои естетически трикове, за да накарате натоварването да изглежда по-бързо.
6. Обърнете внимание на размера и разположението на елементите.
Законът на Фитс е важна идея във взаимодействието човек-компютър (HCI), която гласи:
Разстоянието и размерът на целта влияят на това колко време е необходимо за нейното придобиване.
Казано по друг начин, колкото по-близо и/или по-голямо е нещо, толкова по-бързо можете да поставите курсора (или пръста) върху него. Това има редица последици за взаимодействието и тактиките за проектиране на потребителски интерфейс, най-важните от които са както следва:
Направете бутоните и другите „цели за щракване“ видими и върху които може да се кликва (като икони и текстови връзки). Това е особено важно, когато става въпрос за шрифтове, менюта и други списъци с връзки, тъй като недостигът на място ще накара потребителите да щракват често върху грешните връзки.
За най-популярните дейности увеличете размера и изпъкналостта на бутоните.
Поставете навигацията по краищата или ъглите на екрана, заедно с други популярни интерактивни визуални компоненти, като ленти за търсене. Този последен метод може да изглежда противоинтуитивен, но работи, защото намалява нуждата от прецизност: потребителят вече няма да се тревожи, че ще пропусне целта си за щракване.
Когато обмисляте местоположението и размера на елемента, имайте предвид модела на взаимодействие. Ако вашият сайт изисква хоризонтално превъртане, а не вертикално, ще трябва да помислите къде и как ще уведомите клиентите за промяната.
7. Когато става въпрос за стандарти, не бъдете мързеливи.
Дизайнерите са склонни да променят дизайна на нещата поради своята креативност, но това не винаги е най-добрата идея.
Защо? Тъй като модифицираната версия на добре познато взаимодействие или интерфейс повишава „когнитивната тежест“, принуждавайки хората да преосмислят вече овладяна техника. Разбира се, имате право да преоткривате колелото толкова пъти, колкото искате, но само ако това подобрява дизайна.
8. Поддържайте вашите потребителски интерфейси възможно най-основни.
Когато се обръщат към простотата, хората често се позовават на изследването на психолога от Харвард Джордж Милър „Магическото число седем, плюс или минус две: Някои ограничения на нашия капацитет за обработка на информация“. Хората могат надеждно да запазят само 5 до 9 неща в краткосрочната си памет, според констатациите. Милър го отхвърли като съвпадение, но изглежда не възпира другите да го споменават.
В резултат на това изглежда следва, че колкото по-просто е нещо, толкова по-лесно е да го запомните в краткосрочен план. В резултат на това сведете до минимум броя на елементите, които потребителят трябва да запомни, за да използва вашия интерфейс бързо и успешно. Това може да бъде опростено чрез нарязване или разделяне на материала на малки, лесно смилаеми парчета.
Тази идея е в съответствие със Закона за запазване на сложността на Tesler, който гласи, че дизайнерите на потребителски интерфейс трябва да направят своите интерфейси възможно най-прости. Това може да доведе до скриване на сложността на приложението зад прост интерфейс, когато е възможно. Добре известен пример за продукт, който не отговаря на този критерий, е Microsoft Word.
Повечето хора използват Word само за няколко неща – например за писане – докато други го използват за различни дейности. Всеки, от друга страна, започва с една и съща версия на Word и един и същ потребителски интерфейс, оставяйки средния Джо — който не е опитен потребител — претоварен от броя на функциите, които определено почти никога няма да използва.
В резултат на това беше разработено прогресивно разкриване, при което разширената функционалност е заровена зад вторични интерфейси. Кратки текстове представят продукт или услуга, преди да насочат посетителите към уебсайт, където могат да научат повече. Това е типично явление на началните страници на уебсайтове. (Това също е страхотна техника за мобилен дизайн, където навигацията винаги е предизвикателство.)
Във връзките и бутоните използвайте пестеливо „научете повече“ и подобни неспецифични термини. Защо? Защото не е ясно за какво ще „научат повече“ клиентите. Хората често търсят връзка в уебсайт, която ще ги отведе до там, където искат да отидат, и надписа „научи повече“ 15 пъти няма да помогне. Това е особено вярно за тези, които използват екранни четци.
9. Направете вземането на решения възможно най-просто.
Голяма част от интернет ни крещи: „банери“ се превръщат в реклама на цял екран. Появяват се моделите, които ни призовават да се абонираме за блогове, които все още не сме чели. Видеозаставките спират напредъка ни, принуждавайки ни да губим представа за времето. Нека дори да не говорим за джаджи, прелистващи полета или подсказки…
Това оказва влияние върху почти всичко, което изграждаме:
- Като цяло, оформления
- Навигационни менюта
- Налични са страници с цени.
- Блог директории
- Емисии със съдържание
Списъкът може да продължи за неопределено време. Но основната истина е, че колкото по-ясни са нашите дизайни, толкова по-бързо и по-лесно е за клиентите да вземат решенията, които искаме. Ето защо целевите страници и имейлите, които не са с бюлетин, трябва да имат само една подканваща фраза.
10. Обърнете специално внимание на информацията.
Въпреки че всички искаме нашите дизайни да бъдат оценявани само въз основа на техните художествени качества, истината е, че оптимизирането на вашия дизайн за постигане на целите му е също толкова важно.
Въпреки че всички искаме нашите дизайни да бъдат оценявани само въз основа на техните художествени качества, истината е, че оптимизирането на вашия дизайн за постигане на целите му е също толкова важно.
Докато потребителските проучвания и тестване могат да ви помогнат да фокусирате вашите дизайнерски решения върху постигането на целта на вашия сайт, данните, събрани след стартирането, са безценни.
В резултат на това настройте проучванията на вашия сайт и ги анализирайте редовно. Има много налични инструменти за анализ, но аз препоръчвам Google Analytics и/или Mixpanel в зависимост от типа на проекта.
Mixpanel се фокусира върху събития, събирайки данни въз основа на това, което посетителите правят на вашия сайт, докато Google Analytics е по-поведенчески, като събира данни като продължителност на сесиите, източници на трафик и други данни. Въпреки че и двете приложения предоставят и двата вида данни, те се отличават в различни области, така че изберете това, което най-добре отговаря на вашите нужди.
И двата инструмента са безплатни за използване за ограничен брой точки от данни. Обменът на API ключове е често срещан начин за Webflow и подобни технологии да направят настройката на анализа лесна.
Научихте основите, така че сега е време да продължите напред.
Сега продължете и проектирайте някои атрактивни и полезни потребителски интерфейси. Освен това, не се колебайте да оставите коментар с най-добрите и най-лошите примери за дизайн на потребителски интерфейс, които сте виждали в дивата природа на интернет.
