UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Швидка оцінка вашого інтерфейсного рішення без залучення цільової аудиторії. Великий гайд
Євген Олексюк
Євген Олексюк

Опубліковано

Швидка оцінка вашого інтерфейсного рішення без залучення цільової аудиторії. Великий гайд

Якщо ви щось вже знаєте про дизайн, то напевне вас не налякати такими словами як: “дизайн процес”, “дизайн-мислення”, “human centered design”, “дивергентно-конвергентний процес”, “double diamond” чи “lean UX”. Ви розумієте навіщо існує певний процес побудови продукту. Процес дуже простий і логічний: він зводиться до спроб та помилок.

Візьмемо такий улюблений всіма Double Diamond. Фактично, в цей процес зашиті всі базові активності, які є і в інших методологіях. І не важливо чим саме ви користуєтесь — Design-Thinking чи Double Diamond, загальний процес однаковий.

Image description

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

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

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

І все на світі треба пережити,
І кожен фініш — це, по суті, старт
Ліна Костенко

Це прям про ваш дизайн-процес. Усі активності треба пережити і кожен спрінт-реліз — це, по суті, старт 😂.

За допомогою таких багаточисельних циклів відбувається робота над продуктом, його покращення. Кожен наступний етап в Double Diamond та кожний наступний спрінт опирається на попередній. Таким чином вибудовується поступальний рух, що спирається на попередні напрацювання.

Але бувають ситуації, коли немає ресурсу на активності (а отже збільшується ризик):

  • наприклад замовник не бачить сенсу в проведенні дослідження;
  • в замовника немає грошей на певні активності;
  • немає доступу до юзерів, доменних експертів, аналітики;
  • проект тільки починається і сформулювати персону ви не можете;
  • ви прийшли на новий (невідомий вам) продукт і терміново треба щось покращувати;
  • продукт зробив півот і все змінилось, а строки горять і треба швидше релізитись знов;
  • до закриття спрінту 27 хвилин, тобто дедлайн горить 🔥

І що робити в такому випадку? Треба дизайнити і терміново завдавати невиправної користі, а ресурсу прям взагалі нема.

Image description

Тут вам станеться в нагоді так звана оцінка юзабіліті БЕЗ КОРИСТУВАЧА! Non-User Usability Evaluation призначена для швидкої оцінки вашого інтерфейсного рішення без залучення цільової аудиторії. Звичайно ж, ніщо не замінить інтервью та тестування, але якщо відштовхнутись від твердження, що всі ми живі люди, то можна спробувати скласти певні правила, які однаково валідні для кожної людини.

Евристики Якоба Нільсена

Це найпопулярніший метод оцінки, про який знає кожен починаючий дизайнер. Остаточний список правил було складено в 2005 році Якобом Нільсеном — доктором наук наукового напрямку людино-комп’ютерної взаємодії Технічного університету Данії в Копенгагені, засновником компанії Nielsen Norman Group, “королем юзабіліті”, “гуру юзабіліті вебсторінок” та новим піонером медіа. Правила почали називати Евристиками через те, що вони є широкими імперичними правилами, валідними для більшості юзерів.

Image description

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

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

Image description

02. Відповідність між системою та реальним світом
Дизайн повинен говорити мовою користувачів.

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

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

Image description

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

Коли людям легко скасувати дію, це сприяє почуттю свободи та впевненості. Виходи дозволяють користувачам зберігати контроль над системою та уникати застрягання та почуття розчарування.

Image description

04. Послідовність та стандарти
Користувачі не повинні задаватися питанням, чи різні слова, ситуації або дії означають те саме. Дотримуйтеся консистентності системи.

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

Image description

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

Розрізняють два типи помилок: промахи та помилки. Промахи — це неусвідомлені помилки, викликані неуважністю. Помилки — це свідомі помилки, викликані невідповідністю ментальної моделі користувача та дизайном.

Image description

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

Короткочасна пам’ять користувачів обмежена. Тож інтерфейси, які сприяють розпізнаванню, зменшують когнітивне навантаження користувачів.

Image description

07. Гнучкість та легкість у користуванні
Прискорювачі — невидимі для ока новачка — часто можуть покращити взаємодію з системою для досвідченого користувача (наприклад, «гарячі» комбінації клавіш). Дозвольте користувачам підлаштувати часті дії для свого комфорту.

Гнучкість процесів дозволить людям обрати той метод взаємодії, який їм підходить.

Image description

08. Естетичність та мінімалістський дизайн
Сторінки та діалогові вікна не повинні містити недоречної та зайвої інформації. Кожна додаткова одиниця інформації конкурує з потрібними одиницями інформації та понижує їхню відносну видимість.

Ця евристика не означає, що ви повинні використовувати лише flat design — вона про те, що ви зосереджуєте увагу користувача на головному. Переконайтеся, що візуальні елементи інтерфейсу відповідають основним цілям юзера.

Image description

09. Допомога користувачеві у розпізнанні, діагностуванні та виправленні помилок
Повідомлення про помилки подавайте простою мовою (без кодів помилок), чітко вказуйте на проблему та пропонуйте конструктивне вирішення.

Ці повідомлення про помилки також повинні бути представлені візуально, щоб користувачі могли їх помітити та розпізнати.

Image description

10. Допомога та документація
Хоч і краще, коли системою можна користуватись без документації, може бути необхідним надати допомогу та документацію.

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

Image description

🤓 На цьому напевне можна і зупинитись, адже Евристики Нільсена знають майже всі, але пропоную розібратись в темі до самого кінця. Тож погнали з бородатим UX-задротом в чудовий світ прагматичності та прискіпливості 😂

8 золотих правил Шнейдермана

Бен Шнейдерман — це американський вчений з інформатики та професор Університету Human-Computer Interaction Lab в Меріленд. Його роботи можна порівняти з іншими сучасними мислителями дизайну, такими як Дон Норман та Якоб Нільсен. В 1986 році в своїй популярній книзі «Проектування інтерфейсу користувача: стратегії ефективної взаємодії людини з комп’ютером» Шнейдерман розкриває свої 8 золотих правил дизайну інтерфейсу:

Image description

01. Прагніть консистентності
Прагніть консистентності, використовуючи знайомі іконки, кольори, ієрархію, call to action та юзер флоу під час розробки однакових та/або схожих ситуацій. Стандартизація способів передачі інформації гарантує, що користувачі зможуть застосовувати розуміння інтерфейсу в вашому продукі, без необхідності навчати юзерів як цим інтерфейсом користуватись. Консистентність відіграє важливу роль, допомагаючи користувачам ознайомитися з вашим продуктом, щоб вони могли легше досягати своїх цілей.

02. Дозвольте досвідченим користувачам використовувати шорткати
Із збільшенням використання інтерфейсу, в юзерів з’являється необхідність швидших методів виконання завдань. Наприклад, як Windows, так і Mac надають користувачам комбінації клавіш для копіювання та вставлення, тому, коли користувач стає більш досвідченим, він може швидше та легше переміщатися в інтерфейсі та виконувати необхідні йому дії.

03. Запропонуйте інформативний зворотній зв’язок
Користувач повинен завжди знати, де він знаходиться і що відбувається. Для кожної дії повинен бути відповідний, зрозумілий відгук протягом прийнятного періоду часу. Гарним прикладом застосування цього правила може бути вказівка користувачеві, на якому етапі процесу він знаходиться. Поганий приклад, який ми часто бачимо, це коли повідомлення про помилку показує код помилки замість зрозумілого та змістовного повідомлення.

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

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

06. Дозвольте легке скасування дій
Дизайнери повинні прагнути запропонувати користувачам очевидні способи змінити свої дії. Ці відміни повинні бути дозволені на різних стадіях процесу. Як зазначає Шнейдерман у своїй книзі:

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

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

Image description

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

Критерії Юзабіліті

Згідно Міжнародної Організації зі Стандартизації [SOURCE: ISO 9241‑210:2010, definition 2.13]:

Юзабіліті — це ступінь, в якому система, продукт або послуга можуть використовуватися певними користувачами для досягнення певних цілей з ефективністю, результативністю та задоволенням у певному контексті використання.

Якщо спростити, то найбільш зрозумілим і широковживаним є визначення юзабіліті від NNGroup: Nielsen Norman Group:

Юзабіліті — це якісний показник, що оцінює, наскільки інтерфейс є простим у використанні.

Image description

Юзабіліті визначається 5 компонентами:

  • Навченість (або здатність до навчання): наскільки легко користувачеві виконувати свої завдання, коли він вперше взаємодіє з інтерфейсом?
  • Ефективність (або результативність): як швидко користувач може виконати завданняв інтерфейсі?
  • Запам’ятовуваність: як швидко користувач відновить навичку взаємодії з інтерфейсом після певного періоду некористування ним?
  • Помилки: скільки помилок користувач робить, наскільки вони серйозні та як легко їх можна виправити?
  • Вдоволеність (або задоволеність): Наскільки юзеру приємно користуватися дизайном? Також важливо памятати про такий атрибут як Утилітарність (або корисність). Саме поєднання Утилітарності та Юзабіліті є важливим.

Утилітарність — визначає чи користувачеві надається потрібний/необхідний функціонал
Юзабіліті — визначає, наскільки легко та приємно використовувати запропонований функціонал
Користь = Утилітарність + Юзабіліті

Враховуючи все вищеперераховане, виділяють 6 основних критеріїв юзабіліті:

01. Дієвість (Effective)
Критерій Дієвості описує наскільки добре система виконує те, що вона повинна робити. Критерій оцінює рішення, яке надає продукт, порівняно з виявленою проблемою. Ціллю критерію є отримання продукту, що здатний вирішити проблему, для якої він був розроблений.

02. Ефективність (Efficient)
Даний критерій описує саме ефективність — як система підтримує користувачів у виконанні завдань. Цей критерій допомагає переконатися, що продукт виконує завдання таким чином, щоб мінімізувати час та інші ресурсовитрати користувача.

Наприклад, мобільний банкінг не повинен бути занадто складним та занадто повільним під час обробки транзакцій користувача.

03. Утилітарність (Utility)
Цей критерій стосується того, наскільки система забезпечує належну функціональність, щоб користувачі могли виконати потрібне їм завдання.

Користувач ніколи не повинен стикатися з ситуацією, коли його флоу обривається і немає жодного варіанту для виконання бажаної дії. Прикладом може бути включення опцій «Назад» і «Далі», щоб користувач міг перейти до попередньої дії.

04. Навченість (Learnability)
Критерій описує наскільки легко засвоїти систему. Коли продукт розроблено, його необхідно оцінити, щоб переконатись що користувач зможе хтось легко навчитися користуватись ним.

Люди щодня стикаються з різними цифровими продуктами, і те, наскільки легко можна навчитися використовувати продукт, свідчить про його зручність.

Image description

05. Запам’ятовуваність (Memorability)
Легкість запамятовування як саме користуватись вашим продуктом є одним з ключовоих критеріїв зручності використання. Він гарантує, що систему можна буде легко використовувати знову і знову, коли користувач вже навчився нею користуватися.

06. Безпечність (Safety)
Цифрові продукти повинні гарантувати безпеку користувача та не завдавати йому шкоди.

Особисті дані користувача повинні бути захищені від неправомірного використання. Всі паролі, контакти, Email адреси, CVV та інша важлива для користувача та приватна інформація обов’язково повинна залишитись конфіденційною. Крім того, безпека продукту також повинна забезпечувати відновлення інформації після збою чи помилок.

Також існує ще 2 додаткових (не основних) критерія:

🥸 Ергономічність (Ergonomics)
Цей критерій є додатковим і його виконання не є обовязковим. Під ергономічністю мається на увазі зручність та ергономічність самого пристрою, за допомогою якого користувач взаємодіятиме з цифровим продуктом. Наприклад, ви розробляєте мобільний застосунок — в такому разі максимально якісний безшовний експірієнс ваш користувач отримає при взаємодії з вашим застосунком через якісний ергономічний дивайс, що відповідає теперішнім вимогам ринку. Погодьтесь, що легше купити нові New Balance через апку на вашому останньому iPhone, аніж через квадратний Alcatel 2014 року виробництва 😂

Image description

🥸 Доступність (Accessibility)
Це окрема тема, з якою треба розбиратись окремо. Але якщо коротко — дизайн повинен бути доступним для всіх людей, в тому числі з певними обмеженнями. Дуже часто аксесабіліті передбачає, що якщо дизайн виконано з урахуванням вимог WCAG, то ним буде легко користуватись не тільки людям з вадами та обмеженнями, а і звичайним користувачам. Уявіть що ви купляєте кроси з прикладу вище ввечері, коли їдете в метро після роботи. Для ваших втомлених очей виконані вимоги з доступності будуть тільки приємним бонусом.

Image description

21 закон UX дизайну

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

Image description

  1. Закон Якоба: Користувачі проводять більшу частину свого часу на інших веб-сайтах, і вважають за краще, щоб ваш сайт працював так само, як інші сайти, які вони вже знають
  2. Закон Фіттса: Час, необхідний досягнення мети, залежить від відстані до мети та її розміру
  3. Закон Хіка: Час, необхідний для прийняття рішення, збільшується зі зростанням кількості та складності наявних варіантів
  4. Закон Міллера: Середньостатистична людина може зберігати у своїй робочій пам’яті лише 7 (±2) елементів
  5. Закон Постеля (Принцип Стійкості): Будьте консервативними в тому, що ви робите, і будьте ліберальні в тому, що ви приймаєте від інших
  6. Правило оцінки на піку та в кінці: Люди судять про свій досвід головним чином на основі того, що вони відчували на його піку чи в кінці, а не за підсумковою сумою або середнім значенням кожного моменту свого досвіду
  7. Ефект естетики в юзабіліті: Користувачі часто сприймають естетично приємний дизайн як дизайн, який зручніший у використанні
  8. Ефект фон Ресторфф: Коли є кілька схожих об’єктів, то швидше за все запам’ятається той, який відрізняється від інших
  9. Закон Теслера (закон збереження складності): В будь-якій системі існує певний ступінь складності, який не можна зменшити
  10. Поріг Доерті: Продуктивність зростає, коли комп’ютер та його користувачі взаємодіють у певному темпі (менше 400 мс), що забезпечує стан, при якому жоден з них не повинен чекати на іншого
  11. Ефект градієнта мети: Тенденція наближення до мети зростає з близькістю мети
  12. Закон загального регіону: Елементи, як правило, сприймаються як групи, якщо вони поділяють область з чітко визначеним кордоном
  13. Закон близькості: Об’єкти, що знаходяться поруч або в безпосередній близькості один від одного, сприймаються користувачем як одна група
  14. Закон Прегнанца: Люди сприймають та інтерпретують складні зображення як найпростішу можливу форму, тому що саме інтерпретація вимагає найменших когнітивних зусиль
  15. Закон подоби: Людське око сприймає схожі елементи як цільну картину, форму або групу, навіть якщо ці елементи розділені
  16. Закон рівномірної пов’язності: Елементи, які є візуально об’єднаними, краще сприймаються як пов’язані, ніж елементи без візуального зв’язку
  17. Бритва Оккама: Серед конкуруючих гіпотез, слід вибрати ту, у якій найменша кількість припущень
  18. Принцип Парето: Для більшості випадків 20% зусиль дають 80% результату
  19. Закон Паркінсона: Будь-яке завдання буде збільшуватися доти, доки не буде витрачено весь доступний для її вирішення час
  20. Ефект серійної позиції: Користувачі схильні найкраще запам’ятовувати перший та останній елементи в серії
  21. Ефект Зейгарник: Користувачі запам’ятовують незавершені або перервані завдання краще, ніж завершені

7 принципів Дона Нормана

Image description

Дон Норман є одним з найбільших апологетів юзабіліті в світі. Він є співзасновником згаданої вище компанії Nielsen Norman Group, директором Лабораторії Дизайну в Каліфорнійському університеті в Сан-Дієго, дослідником, письменником та багато іншого. Більша частина робіт Нормана передбачає пропаганду розробки, орієнтованої на користувача. Так у всесвітньовідомій книзі, яка зараз є мастрідом будьякого дизайнера “The Design of Everyday Things” 1988 року видання, Норман сформулював 7 принципів дизайну:

  1. Аффорданс (Affordance)
  2. Концептуальна модель (Conceptual model)
  3. Обмеження (Constraints)
  4. Досліджуваність (Discoverability)
  5. Зворотній Зв’язок (Feedback)
  6. Мапінг / Картографування (Mapping)
  7. Сигніфікатори (Signifiers)

01. Аффорданс
Аффорданс — це певна дія та/або властивість об’єкта, які допомагають нам визначити його функціонування. Дональд Норман стверджує: «Термін аффорданс стосується відносин між об’єктом та людиною». Наприклад, конструкція дверної ручки пов’язана з її передбачуваною дією; отже, форма слідує за функцією (Louis Sullivan: «Form Follows The Function»).

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

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

02. Концептуальна модель
Концептуальна модель — це просте та корисне пояснення того, як щось працює. Норман пояснює: «Дизайн проектує всю інформацію, необхідну для створення хорошої концептуальної моделі системи, що веде до розуміння та відчуття контролю».

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

Якщо концептуальна модель незрозуміла, це може суперечити нашій ментальній моделі (нашим очікуванням того, як щось має працювати). Так USB, що має конектор у формі трапеції може суперечити очікуванням що вставляти його можна не обома сторонами, а лише одною.

03. Обмеження
Форми з великою кількістю полів, складний лейаут та складні для розуміння описи можуть збільшити когнітивне навантаження та відвокати користувача.

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

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

Фізичні обмеження — зменшують кількість можливих операцій. Наприклад, користувач не може перемістити курсор миші за межі екрана.

Семантичні обмеження — це підказки, де можна виконувати певні дії. Наприклад, розетка означає, куди ми можемо вставити контакти вилки.

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

І, нарешті, логічні обмеження — допомагають визначити альтернативи. Наприклад, скролл вниз по екрану — це те, як ми звикли діяти, щоб бачити решту екрана.

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

Норман описує хорошу досліджуваність так: «можна визначити можливі дії та поточний стан пристрою». Чіткі фокуси (call to action, зображення та текст); візуальна ієрархія (контент структурований та приорітезований); прозора навігація — все це забезпечує хорошу досліджуваність і розуміння дизайну.

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

Інші принципи дизайну з цього переліку, також можуть збільшити досліджуваність і зменшити можливі помилки.

05. Зворотній Зв’язок
Коли користувач взаємодіє з продуктом, йому потрібен зворотний зв’язок, щоб повідомляти про результат його дій. Без будь якої негайної відповіді користувач матиме сумніви, чи відбулась дія і чи мала ця дія якийсь вплив на продукт.

Норман описує зворотній зв’язок як «певний спосіб повідомити вам, що система працює за вашим запитом». За Норманом, зворотній зв’язок повинен бути негайним, інформативним, спланованим та пріоритетним.

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

Також ненав’язливий зворотний зв’язок може повідомити користувачеві, що його дія спрацювала, не перериваючи процес. Наприклад, Twitter відображає невелике анімоване повідомлення внизу екрана для підтвердження успішно виконаного твіту.

06. Мапінг (або Картографування)
Мапінг — це відображення зв’язків між різними елементами та їхні впливи навколо. Наприклад, кнопки на геймпаді вашого PS5 мають певні позначення і відповідають за певні рухи в грі, взаємоповязані між собою та впливають на вашого ігрового персонажа.

Норман пояснює мапінг таким чином: «коли мапінг використовує відповідність між розташуванням та маркуванням елементу керування та самим керованим пристроєм, то дуже легко визначити, як користуватись цим пристроєм».

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

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

Image description

07. Сигніфікатори
Сигніфікатори повідомляють користувачам, де повинна відбуватись дія. Дональд Норман пояснює: «Термін «сигніфікатор» стосується будь-якого візуального, звукового чи іншого помітного знаку, який взаємодіє з людиною».

Наприклад, лейба кнопки повідомляє нам наперед, яка саме дія відбудеться при праємодії з кнопкою. В мультику «Пінгвіни Мадагаскару», арктичне створіння наступає на велику червону кнопку, не помічаючи її дії. Тоді, під час блимання сигналів тривоги, Пінгвін вигукує: «Треба було наклеїти ярлик на цю штуку».

Image description

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

Хоча сигніфікатори пояснюють дії, вони також покладаються на культурний бекграунд користувача. Наприклад, коли Amazon запустився в Індії, частина користувачів заплутались в інтерфейсі, не вірно зчитавши поле пошуку. Тому зважайте на культурні та локальні аспекти вашої цільової аудиторії.

Принципи Брюса Тогняцціні

Брюс “Tog” Тоньяцціні — американський юзабіліті консультант та дизайнер. Він є партнером в Nielsen Norman Group, який спеціалізується на взаємодії людини з комп’ютером. Чотирнадцять років він працював в Apple Computer, потім чотири роки в Sun Microsystems, потім ще чотири роки в WebMD. Брюс Тоньяцціні є автором двох книг: “Tog on Interface” та “Tog on Software Design” та публікує веб-журнал Asktog із слоганом «Interaction Design Solutions for the Real World».

Image description

Тог сформулював принципи, за допомогою яких можна оцінити юзабіліті:

01. Естетика
Принцип: Естетичний дизайн слід залишити тим, хто має освіту та має навички його застосування — графічним/візуальним дизайнерам

Принцип: Мода ніколи не повинна переважати над зручністю використання

Штучне старіння в моді — це перевірений часом і ефективний спосіб продавати все, від одягу до автомобілів. Мода не повинна погіршувати продуктивність користувача: можна здійснити величезні візуальні та навіть поведінкові зміни, які або не зашкодять продуктивності та юзабіліті, або помітно підвищать її.

Принцип: Тестуйте візуальний дизайн так само ретельно, як і UX

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

02. Передчуття (Anticipation)
Принцип: Надайте користувачеві всю інформацію та інструменти, необхідні для кожного кроку процесу

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

Антиципація передбачає розуміння дизайнером як завдання бізнесу, так і бажання користувачів. Це вимагає тестування зручності використання, щоб переконатися, що ціль досягнута.

03. Автономність
Принцип: Комп’ютер та інтерфейс «належать» користувачеві, але це не означає, що порібно відмовитись від правил та обмежень.

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

Принцип: Дозвольте користувачам приймати власні рішення, навіть якщо вони погані або не ефективні.

Автономність означає, що користувачі можуть вирішувати сами, як вони хочуть використовувати інтерфейс. Коли розробники забирають контроль, користувачі можуть розчаруватися та злитися.

Принцип: Надавайте відповідальний контроль.

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

Принцип: Використовуйте механізми статусу, щоб тримати користувачів у курсі що відбувається.

Автономність неможлива за відсутності контролю, а контроль не можливий без надання інформації щодо статусу процесів для належного реагування юзером на зміни.

Принцип: Зберігайте інформацію про статус актуальною та легкою для перегляду.

Користувачі не повинні шукати інформацію про статус, він повинен бути на видноті і завжди доступний юзеру.

Принцип: Переконайтесь, що інформація про статус точна.

Інформація про статус може бути актуальною, але неточною. На момент написання цієї статті, коли користувач оновлював iPhone або iPad до останньої версії програмного забезпечення, з’являвся індикатор прогресу, який показував, що для виконання завдання знадобиться приблизно п’ять хвилин. Насправді цей процес може займати годину або більше. Користувач, якого обманули, не відчуває себе автономним.

04. Колір
04.1. Дальтонізм
Принцип: Кожен раз, коли ви використовуєте колір для передачі інформації в інтерфейсі, ви також повинні використовувати чіткі вторинні підказки, щоб передати інформацію для людей з обмеженнями сприйняття кольорів.

Сьогодні більшість людей мають кольорові дисплеї. Однак приблизно 10% чоловіків і менше 1% жінок мають певну форму дальтонізму. Цей момент треба враховувати в проектуванні інтерфейсу!

Принцип: Тестуйте свій сайт, щоб дізнатися як його бачать люди з дальтонізмом.

Знайдіть час протестувати ваш веб-сайт на сервісах Enably та Colblindor.

04.2. Колір як життєво важливий елемент інтерфейсу
Принцип: Не нехтуйте кольором в інтерфейсі тільки тому, що не всі користувачі можуть їх бачити.

Колір є життєво важливим. Видалення кольорів, які не бачить людина з дальтонізмом, дає для неї стільки ж користі, як вимикання всього зображення для людини, яка повністю не бачить. Для таких користувачів важлива наявність альтернативного набору сигналів.

Принцип: Не видаляйте та не перевантажуйте кольорові підказки в інтерфейсі задля покращення графічної складової дизайну.

Мода та естетика не повинна погіршувати зручність користувача. Це очевидно, але просто нагадуємо.

Image description

05. Консистентність
05.1. Рівні консистентності
Принцип: Дотримуйтесь консистентності згідно необхідного рівня.

Існує кілька рівнів консистентності, згідно яких необхідно впорядковувати дизайн:

  • Консистентність найвищого рівня. Сюди відноситься консистентність платформи та внутрішня консистентність продукту.
  • Кроспродуктова консистентність.
  • Загальний вигляд та відчуття окремої програми. Дизайнер повинен створити добре продуману візуальну мову, сформовану та протестовану. Ці правила поведінки повинні бути повністю переносимі на весь продукт.
  • Візуальні елементи, такі як іконки, символи, кнопки, скролбари тощо. Зовнішній вигляд таких об’єктів потрібно суворо контролювати, щоб люди не витрачали свій час на те, щоб зрозуміти, як користуватись інтерфейсом. Там, де можливо стандартизувати — зробіть це.
  • Невидимі структури. Під невидимими структурами маються на увазі ті елементи, які не знаходяться навидноті. Наприклад скрол в пристроях Apple, який зникає.
  • Інтерпретація поведінки користувача. Зміна звичних паттернів користувача — одна з найгірших речей, які ви можете зробити з ним. Комбінації клавіш, завчені роками жести, хоткеї — будьякі маніпуляції, що змусять юзера змінювати звички — дуже небезпечні.

05.2. Індукована неконсистентність
Принцип: Важливо бути візуально та інтерактивно послідовним.

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

05.3. Послідовність
Принцип: Прагніть до послідовності та неперервності в часі, а не консистентності.

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

05.4. Відповідність очікуванням користувачів
Принцип: «Найважливіша консистентність — це відповідність очікуванням користувачів» — Вільям Бакстон

06. Дефолти (Дії за замовчуванням)
Принцип: За дефолтом текст в полях повинен легко видалятись.

Коли користувач взаємодіє з полем, значення в філді повинно швидко і легко видалятись.

Принцип: Параметри за замовчуванням повинні бути «розумними» та швидко реагувати.

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

Принцип: Змінюйте вираз «за дефолтом» на більш зрозумілий користувачу термін.

В інтерфейсі варто використовувати більш зрозумілі для користувача вирази, тому не бійтесь замінювати вираз «За Дефолтом» на «Повернутися до стандартних налаштувань», «Відновити початкові налаштуваня», тощо.

Принцип: Текстовки та віжуал повинні відображати масштаби реверсії.

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

Image description

07. Досліджуваність
Принцип: Будь-яка спроба приховати складність призведе до її збільшення.

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

Принцип: Якщо користувач не може чогось знайти, значить цього не існує.

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

Принцип: Використовуйте активні нагадування, щоб направляти користувача.

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

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

Повідомлення може мати форму підказки «Чи знаєте ви…», яку ви показуєте під час запуску.

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

Принцип: Не існує жодного винятку щодо видимості.

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

Принцип: За винятком малих вьюпортів, елементи керування не повинні знаходитись в середині області контенту.

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

Принцип: Навчайте користувача жестам за допомогою візуального пояснення.

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

Image description

Принцип: Прагніть балансу

Зараз не 1980 рік і користувачі вже вміють працювати з цифровими пристроями, тож не намагайтесь навчити їх всьому, засипаючи підказками. Зберігайте баланс та вчіть тільки новому.

Image description

Принцип: Завжди тестуйте ваші рішення щодо досліджуваності.

Будьяку помилку можна попередити, якщо провести коротке тестування, тож не нехтуйте тестами.

08. Ефективність користувача
Принцип: Слідкуйте за продуктивністю користувача, а не комп’ютера.

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

Принцип: Займіть користувача.

Щоразу, коли користувач повинен чекати відповіді системи, перш ніж він зможе продовжити, гроші втрачаються. Тож якщо затримки не уникнути, займіть користувача чимось, щоб не відпустити.

Принцип: Щоб максимізувати ефективність бізнесу, потрібно максимізувати ефективність усіх, а не лише ефективність ІТ-відділу.

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

Принцип: Повідомлення про помилки насправді повинні допомогати юзеру!

Повідомлення про помилки повинні:

  • Пояснювати, що трапилось
  • Підказувати користувачеві, що як діяти далі

«Помилка №1264.А38» нічого не розповість користувачеві. Розмовляйте з користувачем користувацькою мовою та допомогайте.

09. Досліджувані інтерфейси
Принцип: Надайте користувачам позначені шляхи та орієнтири на них, а потім дозвольте їм рух.

Підказуйте та контролюйте юзерів, надавайте їм знаки, підказки та допомогу.

Принцип: Інколи потрібно забезпечити проторований шлях.

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

Принцип: Запропонуйте користувачам сигнали для відчуття «дому».

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

Принцип: Зробіть дії зворотними.

Принцип: Завжди дозволяйте «Відмінити».

Принцип: Завжди залишайте юзерам аварійний вихід.

Користувачі ніколи не повинні відчувати себе всередині лабіринту. У них має бути вільний вихід.

Image description

10. Закон Фіттса
Принцип: Час, необхідний досягнення мети, залежить від відстані до мети та її розміру.

Принцип: Час, необхідний досягнення кількох цілей є сумою часу досягнення кожної окремої цілі.

Принцип: Закон Фіттса діє незалежно від типу пристрою чи цілі.

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

Принцип: Об’єкти інтерфейсу можна побачити, почути, відчути чи іншим чином сприйняти.

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

Принцип: Об’єкти інтерфейсу мають стандартний спосіб взаємодії.

Тут все просто — кнопки повинні натискатись, повзунки перетягуватись, тощо.

Принцип: Об’єкти інтерфейсу мають стандартну кінцеву поведінку.

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

Принцип: Об’єкти інтерфейсу повинні бути зрозумілими, самоузгодженими та стабільними.

Принцип: Використовуйте новий об’єкт, якщо ви хочете, щоб користувач взаємодіяв з ним якось по-новому.

Не варто змінювати існуючі в користувачів паттерни, щоб не заплутати їх. В юзерів існують певні очікування щодо звичних елементів. Тож люди звикли що переміщення об’єкту в корзину — видалить його, а натискання на іконку принтера — призведе до друку. Якщо ж ви очікуєте якоїсь нової поведінки юзера, нової взаємодії, то використайте для цього новий об’єкт інтерфейсу, з яким ще не існує паттерна.

12. Скорочення затримки
Використовуйте багатопотоковість, щоб усунути затримку.

Затримки часто можна приховати від користувачів за допомогою методів багатозадачності, дозволяючи їм продовжувати свою роботу, тоді як передача та обчислення відбуваються у фоновому режимі.

Принцип: Зменшіть час затримки для користувача.

Так як часто швидкість Інтернет-з’єднання буває повільним, це може спричинити додаткові натискання юзером кнопок та елементів інтерфейса.

  • Підтверджуйте всі взаємодії візуальним або звуковим відгуком протягом 50 мілісекунд;
  • Обʼєднуйте кілька натискань однієї кнопки чи об’єкта.

Принцип: Інформуйте користувача про затримку.

Принцип: Зробіть початок швидким.

Коли користувач хоче взаємодії з пристроєм (особливо якщо це мобільний пристрій), намагайтесь забезпечити відсутність затримки на початку його взаємодії. Наприклад ви хочете подивитись котра година на ваших Apple Watch — реакція пристрою повинна бути максимальношвидкою і не змушувати її чекати. Початок флоу не повинен мати затримку, інакше це розчарує користувача вже на старті взаємодії!

Image description

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

Принцип: Обмежте компроміси.

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

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

Принцип: Уникайте тестування лише на навченість.

14. Метафори
Принцип: Обирайте метафори, що дозволять користувачам зрозуміти найдрібніші деталі концептуальної моделі.

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

Принцип: «Оживіть» метафори, звертаючись до сприйняття людей — зору, звуку, дотику, тощо.

Принцип: Виходьте за межі буквального тлумачення аналогів у реальному світі.

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

Принцип: Якщо метафора обмежує вас, відмовтеся від неї.

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

15. Захищайте результати роботи користувачів
Принцип: Гарантуйте, що користувачі ніколи не втратять свої напрацювання.

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

16. Читабельність
Принцип: Текст, який необхідно прочитати, повинен мати високий контраст.

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

Принцип: Приорітизуйте текст за допомогою розміру.

Принцип: Меню та кнопки повинні містити спочатку ключове слово(а).

Принцип: Тестуйте всі проекти на вашій найстаршій цільовій аудиторії.

Принцип: Часто існує зворотний зв’язок між «красотою» шрифту та його читабельністю.

Image description

17. Простота
Принцип: Тримайте баланс між простотою встановлення та простотою використання.

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

Принцип: Уникайте «ілюзії простоти».

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

Принцип: Використовуйте Прогресивне Виявлення, щоб вирівняти криву навчання.

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

Принцип: Не спрощуйте за рахунок необхідного.

Не варто обмежувати користувача в функціоналі лише заради досягнення певного рівня простоти. Краще залишити можливість налаштування за юзером.

18. Відстежування станів
Принцип: Намагайтесь трекати та відстежувати стани за необхідності

Наші системи повинні «знати»:

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

Ця інформація допоможе в подальшій взаємодії з юзером.

Принцип: Інформація про стан повинна зберігатися в зашифрованому вигляді на сервері навіть після виходу з системи.

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

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

Ви повинні чітко вказувати у своїй політиці конфіденційності, що ви зберігатимете дані, пояснюючи, чому це в інтересах користувача.

Image description

19. Наглядна навігація
Принцип: Зробіть навігацію видимою.

Більшість користувачів не можуть і не збираються будувати складні ментальні карти, і, як і очікується, вони загубляться або втомляться. Спростіть життя користувачам, організувавши зручну навігацію. Наприклад, ви можете використовувати хлібні крихти:
NN/g Home > AskTog > Interaction Design Section

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

Принцип: обмежте кількість екранів за допомогою оверлеїв.

Розробляючи складні програми, прагніть до мінімальної кількості екранів. Коли користувачеві потрібно виконати підзавдання, відкрийте оверлей, розмір якого менший за весь екран, щоб користувачі могли бачити затемнене зображення головного екрана, яке все ще присутнє у фоновому режимі.

👨‍💻 Брюс Тогняцціні склав прекрасний перелік правил. На мою особисту думку він максимально-повний та розширений поясненнями. Але для його використання, треба бути трошки задротом 😂

Принципи зниження когнітивного навантаження при проектуванні інтерфейса

Когнітивне навантаження — це певні розумові зусилля, необхідні для виконання юзером завдання. Будьяке когнітивне навантаження (а особливо перевантаження) є негативним при взаємодії користувача з інтерфейсом, тож бажано його зменшувати.

Щоб зрозуміти, як зменшити когнітивне навантаження, спочатку потрібно зрозуміти, що його викликає. Загалом, причини когнітивного навантаження можна розділити на три основних фактори:

  1. Завелика кількість варіантів для вибору
  2. Необхідність багато думати, щоб взаємодіяти з інтерфейсом
  3. Неясність інтерфейсу

Кожен із цих факторів потребує пропрацювання та забирає розумові когнітивні ресурси, які насправді не допомагають користувачам зрозуміти вміст.

Image description

Питаннями когнітивного навантаження займався Джон Яблонські і в 2015 році оформив свої відкраиття в Принципи зниження когнітивного навантаження при проектуванні інтерфейса:

01. Уникайте непотрібного
Як завжди в дизайні, менше означає більше. Будь який елемент інтерфейсу, що не допомагає користувачеві, працює проти нього, оскільки юзер повинен обробити його та зберегти в робочій пам’яті разом із речами, які йому допогають. Уникайте зайвих кольорів, зображень, прикрас, тощо. Але важливо памятати: не акцентуйтесь на простоті за рахунок ясності.

02. Використовуйте шаблони проектування
Використовуючи шаблонні рішення в проектуванні, ви говорите з користувачаим знайоми елементами інтерфейсу, які юзери вже бачили раніше і вже розуміють. Це, в свою чергу, зменшує когнітивне навантаження, таким чином дозволяючи їм рухатися правильно та наближатися до досягнення своєї цілі. Щоб краще орієнтуватись в існуючих вже рішеннях дизайну є Design Patterns на CodePen та Blueprint Archives на Codrops.

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

04. Мінімізуйте вибір
Раніше ми вже зробили висновок, що наша робоча пам’ять обмежена. Коли перед вами надто багато варіантів вибору, когнітивне навантаження зростатиме через так званий “параліч прийняття рішень”. Важливо, щоб ми звели до мінімуму вибір, який користувач повинен зробити в будь-який момент, особливо в таких місцях, як навігація, форми та спадаючі меню.

Image description

05. Відображення варіантів як групи
Коли варіанти вибору розділені на окремі групи та приховані, користувачі часто помиляються варіантами, які відображаються як певна група. Це означає, що користувачі, швидше за все, ніколи не знайдуть додаткових варіантів тому що вони не тільки обмежені та недоступні, але й сам вибір все ускладнює не знанням альтернативи. Тому найкраще усунути отримане когнітивне навантаження, завжди показуючи варіанти як групу.

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

07. Використовуйте іконки обережно
Як показали дослідження, використання іконок може збільшити когнітивне навантаження, вимагаючи розумової обробки користувача. Тоді як загальнозрозумілі значки працюють добре (наприклад, друк, закриття, плей, пауза, відповісти, твітнути, шейр в Facebook, тощо), більшість інших значків залежать від розуміння користувача на основі попереднього досвіду (який не є стандартизовний та у кожного користувача відрізняється). Якщо ви вирішили використати в інтерфейсі іконки, найкраще супроводжувати їх текстовими лейбами, щоб передати значення однозначно і без спотворень та когнітивного навантаження.

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

Висновки:

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

  • Евристики Якоба Нільсена;
  • 8 золотих правил Шнейдермана;
  • 6 критеріїв юзабіліті;
  • 21 закон UX дизайну;
  • 7 принципів Дона Нормана;
  • Принципи Брюса Тогняцціні;
  • Принципи проектування для зниження когнітивного навантаження.

Особисто я раджу використовувати або принципи Брюса Тогняцціні (якщо вам стало терпцю з ними розібратись), або легший варіант — зв’язка Евристики Якоба Нільсена + базові закони UX дизайну.

Image description

Сподіваюсь моя маленька статейка виявилась для вас корисною і до нових зустрічей в рубриці #задротствозбородатим 😂❤️🇺🇦

ATTENTION
Більше цікавих статей ви можете почитати на моєму персональному Medium та на XD Community Medium.

Топ коментарі (12)

Згорнути/розгорнути
 
zhmikhov profile image
Yaroslav Zhmykhov • Змінено

Дуже дякую за статтю! Було цікаво) Ще можна використовувати коридорне дослідження.

Згорнути/розгорнути
 
olex_world profile image
Євген Олексюк

дякую за коментар, але задумка була в тому, щоб надати максимальну інформацію щодо валідації дизайну взагалі без залучення людей. Як то кажуть "не піднімаючи жопки від стільця"😂

Згорнути/розгорнути
 
varhal profile image
Varhal

На сайті є купа статей про дослідження, принципи та закони дизайну. Але, в статті це все органічно вписано в контекст та є розуміння як це використовувати на приктиці. Дякую за розгорнуту статтю 🤝

Згорнути/розгорнути
 
dexa profile image
Саша Федорова

Ого, це топ стаття! Але ще не дочитала до кінця)

Згорнути/розгорнути
 
cospl profile image
Андрій Кот

Однозначно до обраних. Матір всіх статей 😂😂

Згорнути/розгорнути
 
marysia_m profile image
Марися

Хороша стаття, дякую вам! Євгене, на початку ви написали про дизайн-мислення та double diamond. Так і не змогла розібратись у різниці цих двох понять, бо думала що вони тотожні. Буду вдячна за ваше експертне пояснення.

Згорнути/розгорнути
 
olex_world profile image
Євген Олексюк

Дякую за ваш комент. Я якраз готую кілька матеріалів задротських (все як ми любимо😂). Один з них буде - порівняння різних методологій.
А якщо коротко по вашому питанню, особисто я не розділяю ДМ та ДД, просто обєднавши все це в один підхід - Дивергентно-конвергентний процес.

Згорнути/розгорнути
 
junki profile image
Mikhail Sokolov

Сподіваюсь моя маленька статейка виявилась для вас корисною і до нових зустрічей в рубриці #задротствозбородатим 😂❤️🇺🇦

Давно шукав упорядковану інформацію, але ви перевершили мої очікування))

Згорнути/розгорнути
 
alex_nosach profile image
Alex Nosach

Я використовую 3 метода: евристики Нільсена, коридорні тести і тестую прототипи на собі! Останнє дуже дієве: лінкуєте протипи і самі проходите весь флоу. Бажано на справжньому девайсі (якщо це мобільний додаток - налаштовуємо розміри під ваш телефон і тестуємо на ньому, якщо сайт - робимо фрейми такого розміру, як ваш девайс і тестуємо на ньому). Цей спосіб дуже дієвий і дає гарний результат, спробуйте!

Згорнути/розгорнути
 
elliah profile image
Ilia ilia

Так, ну якщо бути задротом, то на повну:)

текст в полях
значення в філді

Давайте будемо послідовними, та не будемо використовувати займані слова там, де вони зовсім не потрібні. Та й ще стоять поряд зі звичним та усім зрозумілим синонімом. У цілому доволі титанічна робота була проведена!

Згорнути/розгорнути
 
maxman profile image
Максімич

Топчиик!!

Згорнути/розгорнути
 
alina_pavlova_be72e4f7b73 profile image
Alina Pavlova

Це було мега корисно, дуже дякую за таку детальну статтю👍🔥