5.4: Основні принципи UX дизайну

Last updated
Save as PDF

Page ID: 15564

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)

Дизайн, орієнтований на користувача

Хоча це може здатися найбільш очевидним моментом, дивно, як часто користувач забувається в користувальницькому досвіді. Власники бізнесу, маркетологи та веб-розробники часто зосереджуються на створенні веб-платформ, які вони хочуть і вважають найкращими, замість того, щоб дійсно допитувати, що потрібно користувачеві. Часто продуктивність веб-активів порушується, коли процес проектування керується лише внутрішніми потребами бізнесу, наприклад, гарантуючи, що кожен відділ компанії має простір, який він контролює на домашній сторінці за рахунок того, що потрібно користувачеві. При проектуванні для користувача потрібно задати наступні питання:

Хто є користувачем?
Які бажання та потреби користувача від вашої платформи?
Чому користувач дійсно приходить на ваш сайт?

Примітка

Подорож клієнта наведено в розділі «Стратегія та контекст». Це стосується кроків, які робить ваш клієнт під час взаємодії з вашим брендом.

Де користувач, швидше за все, буде у своєму клієнтському подорожі, коли він відвідує ваш сайт?
Які можливості користувача, веб-навички та доступні технології?
Як сайт може полегшити клієнту подорож до конверсії та покупки?
Які функції зробили б досвід користувача простішим і кращим?

Відповіді на ці питання прийдуть з дослідження користувачів, як обговорювалося в розділі Дослідження ринку раніше в цій книзі.

Малюнок\(\PageIndex{1}\): Важливо дати користувачам саме те, що їм потрібно *Адаптовано від XKCD, 2015.*

Звичайно, багато користувачів можуть не знати точно, які їхні бажання і потреби. Робота практикуючого UX - виявити їх за допомогою досліджень та інтерпретувати їх найкращим чином. Майте на увазі знамениту цитату Генрі Форда: «Якби я запитав людей, чого вони хочуть, вони б сказали швидше коней».

(www.goodreads.com)

Мобільні користувачі При обговоренні дизайну, орієнтованого на користувача, все, що ви дізналися про користувальницький контекст повинні бути враховані. Сьогодні більше половини веб-трафіку відбувається з мобільного пристрою, причому користувачі отримують доступ до Інтернету через смартфон або планшет (подумайте з Google, 2016). Це число зростає з кожним роком і, як очікується, складе понад 70% до 2019 року (Інтернет-суспільство, 2015). Тому проектування для мобільних пристроїв повинно бути пріоритетним. Контекст мобільних користувачів впливає на те, як вони використовують свої пристрої. Мобільними користувачами є:

Мета орієнтована. Мобільні користувачі звертаються до своїх мобільних пристроїв, щоб відповісти на питання, швидко перевірити електронну пошту, знайти інформацію або отримати маршрут. Вони часто мають на увазі чітку мету при використанні свого телефону.
Час свідомий. У цьому є два аспекти. З одного боку, мобільні користувачі часто шукають термінову або чутливу до часу інформацію, таку як адреса ресторану, який вони шукають, тому відповіді повинні бути доступні якомога швидше. З іншого боку, мобільний пристрій також часто використовується для вбивства часу або як джерело розваг, таких як читання статей на дивані або гра в ігри під час очікування в черзі, тому вміст також має вирішальне значення. Дослідження користувачів розповість вам, до якої з цих груп потрапляють ваші користувачі і як вам потрібно відповідно структурувати свій сайт.

Примітка

Деякі мобільні користувачі використовують свої телефони для перегляду подібним чином можна було б використовувати настільний комп'ютер. Як ваша аудиторія використовує свої пристрої?

Пошук домінанти. Навіть користувачі, які знають, що шукають, як правило, орієнтуються там за допомогою пошуку, наприклад, вводячи назву бренду в Google, а не заходити на сторінку з закладки або вводити URL-адресу безпосередньо в панелі браузера.
Локально орієнтовані. За даними пошуку Google 30% всіх мобільних пошукових запитів припадає на місцезнаходження (подумайте з Google, 2016). Оскільки мобільні телефони завжди переносяться, користувачі звертаються до них, щоб знайти інформацію про речі в їхньому оточенні від місцевих підприємств до більш докладної інформації про продукт, який вони щойно бачили.

Юзабіліті є особливо складним завданням для мобільних пристроїв. Однією з найбільших проблем є величезна кількість різних категорій пристроїв та моделей, доступних. Звіт OpenSignal від 2014 визначив 18 796 різних мобільних пристроїв Android, під управлінням безлічі операційних систем (Наступна павутина, 2014).

Обмеження мобільних пристроїв створюють додаткові міркування для UX-дизайнера, щоб гарантувати, що відвідувачі мають приємний користувальницький досвід під час відвідування сайту. До таких обмежень належать:

Маленькі екрани. Навіть найбільші смартфони мають екрани у багато разів менше, ніж стандартний ноутбук, а планшети потрапляють десь між ними. Це означає, що користувач має набагато менше вікно, через яке можна сприймати і розуміти веб-сайт, тому може бути важко отримати загальне враження про те, де речі або що важливо.
Складні входи. Мобільні телефони не поставляються з повнорозмірними клавіатурами та мишами, тому вони, як правило, набагато складніше працювати плавно і точно, ніж настільні комп'ютери. Сенсорні екрани тут можуть бути винятком, хоча у них теж є свої підводні камені.
Низька швидкість з'єднання. Багато користувачів мобільних телефонів, особливо в країнах, що розвиваються, знаходяться на повільному інтернет-з'єднанні. Навіть швидкі варіанти, такі як 3G, часто можуть бути більш млявими, ніж настільний еквівалент. Це робить завантаження великих веб-сайтів або зображень повільним і розчаровує і може бути дорогим з точки зору витрат на дані.

Примітка

Один підхід до дизайну ставить «вміст на перше місце». Це означає, що ви повинні вирішити, який вміст надавати на вашому сайті, залежно від того, переглядають його користувачі з мобільного або настільного комп'ютера, а потім адаптувати макет і матеріал до цього пристрою.

Повільне апаратне забезпечення. Іноді повільність походить від самого заліза. Чим елементарніше телефон, тим повільніше його компоненти обробки, швидше за все, роблять простий акт відкриття браузера і завантаження сторінки трудомістким.

Існує три основних підходи до створення контенту, доступного для мобільних пристроїв.

Мобільні веб-сайти (звані mobi сайти)
Рідні та веб-додатки (так звані додатки)
Адаптивні веб-сайти (сайти, які адаптуються під пристрій).

Юзабіліті і умовності

Примітка

Детальніше про це читайте в розділі Веб-розробка та дизайн.

Юзабіліті полягає в тому, щоб зробити цифрові активи, які ми створюємо, простими та інтуїтивними Перефразовуючи Стіва Круга, не змушуйте своїх користувачів думати: вони повинні просто зробити (Krug, 1997−2013).

Один з найважливіших аспектів юзабіліті передбачає дотримання конвенцій, які є просто загальними правилами або способами відображення або структурування речей в Інтернеті. До популярних умовностей відносяться:

Посилання, які сині та підкреслені
Навігаційні меню у верхній або лівій частині веб-сторінки
Логотип у верхньому лівому куті, який пов'язаний, щоб повернути користувача на головну сторінку
Поле пошуку розміщуються у верхній частині сторінки, використовуючи стандартні формулювання, такі як «пошук» або значок лупи.

Примітка

Чи можете ви придумати будь-які інші веб-конвенції? Як вони розвивалися з часом, і наскільки важливо дотримуватися правил?

Переконайтеся, що всі елементи веб-сайту, такі як меню, логотипи, кольори та макет, відрізняються, легко знайти і підтримували узгодженість на всьому сайті. Є деякі ключові «не», коли справа доходить до створення зручного та зручного веб-сайту:

Ніколи не змінюйте розмір вікон або запускайте сайт у спливаючому вікні.
Не використовуйте сторінки входу або сплеску, тобто сторінку, з якою відвідувачі сайту стикаються першими, перш ніж перейти на головну сторінку.
Flash більше не використовується для розробки веб-сайтів. Без допомоги більшість павуків пошукових систем не можуть ефективно сканувати Flash-сайти, і Flash зазвичай не працює на багатьох мобільних пристроях.
Не відволікайте користувачів «ялинками», такими як миготливі зображення, миготливі вогні, автоматичний звук, прокручуваний текст та незвичайні шрифти.

І нарешті, хоча такі принципи стосуються і настільних ПК, вони особливо актуальні для мобільних пристроїв:

Зменшити час завантаження. Намагайтеся зберігати вміст та дії на одній сторінці, оскільки це забезпечує кращу продуктивність, оскільки менше завантажень сторінок. Заохочуйте дослідження, особливо на сенсорних екранах, користувачі люблять переглядати елементи та досліджувати. Це змушує їх відчувати себе під контролем.
Залиште відгук. Переконайтеся, що зрозуміло, коли користувач виконує якусь дію. Цього можна досягти за допомогою анімації та інших візуальних сигналів.

Малюнок\(\PageIndex{2}\): Анімація, що забезпечує зворотний зв'язок з користувачем дії, яку вони запросили *Adapted From Dribble, 2013.*

Примітка

Деякі відзначають зростаючу присутність односторінкових веб-сайтів, особливо для сайтів з обмеженим вмістом і великими зображеннями, що дозволяє сайту завантажуватися швидше. Ознайомтеся з цією статтею, яка містить вказівки щодо того, які типи сайтів слід вибрати для сайтів однієї сторінки: www.webinsation. com/should-i-havea-one-page-website. Такий підхід менш ефективний в країнах, де витрати на дані є непомірними.

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

Корисно розглянути рекомендації щодо юзабіліті, щоб переконатися, що ваш веб-сайт знаходиться на правильному шляху. Stay In Tech надає контрольний список юзабіліті в Інтернеті за адресою https://stayintech.com/info/UX.

Примітка

Мобільні користувачі вважають за краще прокручувати в одному напрямку.

Простота

У UX проектах простіший варіант майже завжди є більш зручним для користувача. Навіть якщо ваша послуга або продукт є складним, ваші веб-портали, що стикаються з клієнтами, не повинні бути. Насправді важливо пам'ятати, що більшість клієнтів хочуть від вас самої основної інформації, наприклад, «Що це?» і «Як це працює?» Простота може означати кілька речей:

Багато порожнього місця. У дизайнерському плані це позначається як негативний або пробіл. Хоча, звичайно, він не повинен бути спеціально білим. Темний текст на світлому тлі читати найпростіше. Загалом, чим ефективніше «дихальна кімната» розміщується між різними елементами сторінки, рядками тексту та зонами сторінки, тим легше користувачеві зрозуміти, де все знаходиться.
Менше варіантів. Дослідження показали, що люди, які стикаються з меншою кількістю вибору, як правило, вибирають швидше і впевнено, і більше задоволені своїм рішенням згодом (Roller, 2010).
Звичайна мова. Якщо ваш веб-сайт не спрямований на вузькоспеціалізовану технічну галузь, зазвичай не потрібно захоплюватися словами, які ви використовуєте. Ясна, проста, добре структурована мова - найкращий варіант при створенні чудового користувальницького досвіду.

Примітка

Детальніше про це читайте в розділі Цифровий копірайтинг

Дотримуючись умовностей. Як ми вже говорили раніше, конвенції є відмінними ярликами для збереження речей простим для користувачів. Немає необхідності винаходити велосипед і намагатися навчити своїх користувачів абсолютно новому способу навігації по веб-сайту.

Малюнок: Домашня сторінка\(\PageIndex{3}\) Fresh Books чистий, простий, привабливий і простий у використанні адаптований *зі скріншота, FreshBooks 2016*

Що стосується мобільних пристроїв, це ще важливіше спростити. Показувати інформацію лише тоді, коли вона потрібна. Хоча ви повинні переконатися, що мобільний актив надає ту саму інформацію, що і настільний еквівалент, це не потрібно представляти в тому ж форматі або обсязі.

Довіра

Довіра відноситься до того, наскільки надійним і законним щось виглядає, і є великою увагою для веб-користувачів при вирішенні використовувати ваш веб-сайт чи ні. Ось деякі підказки, які відвідувачі використовують для визначення довіри до веб-сайту:

Виглядає — це виглядає професійно і красиво?
Видатні номери телефонів та адреси легко знайти - це гарантує відвідувачеві, що за веб-сайтом є реальні люди, і що вони легко доступні.
Інформативне та особисте «Про нас» — деякі клієнти хочуть побачити внутрішню роботу компанії і цікавляться керівником honchos. Подумайте про включення фотографій працівників та профілів, щоб додати особистості на сайт.
Справжні відгуки - відгуки - це чудовий спосіб показати потенційним клієнтам, що ваші поточні клієнти мають сказати про вашу організацію. Довіра є життєво важливою, і це один із способів її заохотити. Відео відгуки можуть бути особливо ефективними, якщо припустити, що ваша аудиторія не стикається з обмеженнями даних.

Малюнок\(\PageIndex{4}\): Справжні відгуки користувачів можуть створити відчуття довіри, як цей приклад від Xero, який включає в себе текстові та відео відгуки *Адаптовані з Скріншот, Xero, 2016.*

Електронна комерція - використання авторитетного каналу продажів допомагає вашим веб-сайтам довіру.
Соціальні медіа - наявність присутності в соціальних мережах часто йде далі до встановлення довіри, ніж відгуки, які могли бути підроблені.
Логотипи асоціацій та нагород - якщо ви належите до будь-яких відповідних галузевих асоціацій або виграли будь-які нагороди. Мало того, що це проходить довгий шлях до встановлення вашого авторитету, але це покаже, що ви знаходитесь у верхній частині вашої гри, на сходинку вище конкуренції.
Посилання на достовірні посилання або схвалення третіх сторін - це спосіб стверджувати свою довіру, не підтягуючи свій власний ріг.
Свіжий, актуальний вміст - розділ новин, який востаннє оновлювався рік тому, означає, що з тих пір нічого не сталося або що ніхто не піклується про те, щоб оновити його.
Ніяких помилок - орфографічні та граматичні помилки є непрофесійними, і хоча переважна більшість читачів може їх не підібрати, той чи інший, хто це зробить, поставить під сумнів ваш авторитет. Це поширюється на биті посилання, несправні інструменти та інтерактивні елементи, які не працюють так, як рекламуються.