21 тайни за потребителски интерфейс, които трябва да знаете

Тайни на дизайна на потребителския интерфейс: човек, който гледа лабиринт
(Кредит за изображение: Гети)

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

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



01. Знаете за кого проектирате

Задачи като проучване на потребители, изграждане на тел, тестване и проектиране на информационна архитектура често се разглеждат като отговорност на UX дизайнер, но започваме да виждаме нарастваща комбинация от ролята на UX / UI дизайнер.



Според Invision , „66% от обявите за работа на UX дизайнери изискват умения за потребителски интерфейс“, така че ако е станало важно за UX дизайнерите да разбират визуалния дизайн, марката и типографията, правилно е дизайнерите на UI да се включат или поне да имат основно разбиране за гореспоменатите UX умения.

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



генерирайте CSS

(Кредит за изображение: Гети / Бъдеще)

Ако искате да научите най-новите творчески и практически умения, за да изведете работата на клиента, кариерата или агенцията на следващото ниво, тогава се присъединете към нас на Генериране на CSS , нашата конференция за уеб дизайнери и разработчици. Използвайте специален код за оферта УЕБ ДИЗАЙНЪР2 за 10% отстъпка от билети.

02. Преодолейте парализата на избора

UI design secrets:



Намаляването на опциите от най-високо ниво в мега менюто на Nike ще помогне да се ограничи изборът на парализа за потребителите(Кредит за изображение: Nike)

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

02. Помощ директно със състояния по подразбиране

UI design secrets:

Skyscanner избират състояния по подразбиране позволяват на потребителите да персонализират опциите(Кредит за изображение: Skyscanner)

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

03. Бързо действие с празни състояния

UI design secrets:

Празните състояния на Tidal незабавно откриват музика, която може би никога не сте чували досега(Кредит за изображение: Tidal)

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

04. Неуспешно ласкателно със състояния на грешки

UI design secrets:

Кухненските истории за грешки се извиняват, че не са намерили това, което потребителят иска(Изображение на изображението: Кухненски истории)

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

05. Разбийте избора

UI design secrets

Apple разбива процеса на избор на iPhone на ясни и кратки стъпки(Кредит за изображение: Apple)

Освен че ограничаваме и групираме избора, можем да ги направим и по-малко сложни, като ги разделим на процеси. Човек може да си представи, че списъкът на iPhone XR на Apple е голям матричен списък със стотици продукти с разнообразие от цветове, размери и мрежи. Но на потребителя, който избира нов Apple iPhone XR чрез уебсайта си опростеният интерфейс стъпка по стъпка им позволява да стеснят възможностите си по избор. Ако представяме много опции за конфигуриране, интерфейсът трябва да прави тежко повдигане, а не потребителят.

06. Намалете съпротивлението

UI design secrets:

Интерфейсът на Slack върши тежката работа, а не потребителят(Кредит на изображението: Slack)

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

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

07. Вземете само това, от което се нуждаете

UI design secrets:

Позволете на потребителите да се регистрират с минимална информация и ги оставете да добавят веднъж на борда(Кредит за изображение: LinkedIn)

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

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

08. Дайте усещане за прогресия

UI design secrets:

Pinterest показва напредък към крайната цел да се регистрирате с прост визуален индикатор(Кредит за изображение: Pinterest)

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

09. Обърнете внимание на конвенциите

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

Като се има предвид, че „можете да плъзгате във всяка посока и дори да стискате навън и навън, за да получите достъп до различни екрани“ ( вижте повече за Medium ), има време, което трябва да се инвестира, за да се научат взаимодействията, преди да можете ефективно да използвате приложението.

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

10. Осигурете визуална обратна връзка

UI design secrets:

Навременна обратна връзка от Snackbars на Google(Кредит за изображение: Снек барове)

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

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

11. Използвайте генерирано от потребителите съдържание

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

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

12. Третирайте потребителите като защитници

UI design secrets:

Героят на началната страница на GoPro използва видеоклип, заснет от своите потребители, за да демонстрира силата на продукта(Кредит за изображение: GoPro)

Радвайте потребителите с продукти и услуги е едно, но те могат да бъдат и наши защитници или дори да са част от нашия маркетингов екип. Основният видеоклип на GoPro на началната му страница разполага с кадри, заснети изцяло от клиенти, които са използвали неговата камера HERO7 (вижте най-доброто GoPro сделки за да получите своя GoPro).

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

13. Използвайте изображения, за да насочвате потребителите

UI design secrets:

Линия на виждане, подтикваща регистрация по имейл срещу модели, гледащи в далечината(Кредит за изображение: Слънчеви очила Hut)

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

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

14. Използвайте отрицателното пространство по умни начини

UI design secrets:

На сайта на Dropbox Business има достатъчно място за дишане(Кредит за изображение: Dropbox Business)

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

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

15. Започнете с мобилен телефон

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

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

как да текстурирам в 3ds макс

16. Вземете правилния лиценз за тип

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

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

17. Напишете вашите интерфейси

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

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

18. На борда според случая

UI design secrets:

Приложението на DuoLingo има изряден процес на включване(Кредит за изображение: DuoLingo)

Включването е „процесът на увеличаване на вероятността новите потребители да станат успешни, когато приемат вашия продукт“, според UserOnboard , и като дизайнери на потребителски интерфейс, ние играем ключова роля в решаването как най-добре да представим нашите цифрови продукти и услуги на тези потребители.

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

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

19. Включете разработчиците си

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

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

20. Използва система за проектиране

UI design secrets:

Цялостната система за въглероден дизайн на IBM(Кредит за изображение: IBM)

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

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

21. Почистете дизайнерските файлове

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

Монцо установи, че „от първия .sketch файл, който създадохме в Monzo, сме се погрижили да организираме нашите дизайнерски файлове много добре. И тъй като сме израснали от един дизайнер до екип от 13 души, поддържането на разумна дизайнерска среда наистина се е отплатило. ' Отделянето на време за почистване на нашите дизайнерски файлове чрез именуване на нашите слоеве, монтажни дъски и папки ще улесни много всеки дизайнер (включително бъдещото ни аз) да вземе и да работи по него. Вашите разработчици също ще ви благодарят!

Тази статия първоначално е публикувана в брой 288 от Уеб дизайнер . Купете брой 288 или абонирайте се тук .

Прочетете още: