Оригінал статті: https://www.interaction-design.org/literature/article/getting-lost-and-found-maps-and-the-mobile-user-experience?utm_source=newsletter&utm_medium=email&utm_content=letter2018-02-06&utm_campaign=subscribers

Можливість використання даних карт і GPS на платформах смартфонів дає розробникам можливість покращити досвід користувача (user experience) щодо своїх продуктів. Однак, щоб карти відобразили найкращий досвід для користувачів, важливо включати ці функції з урахуванням UX. Існують деякі правила, які можна використовувати, щоб збільшити шанси на успіх при використанні даних розташування та карт у мобільних додатках.

Немає сумніву, що смартфон дає користувачам та дизайнерам безліч варіантів, коли йдеться про нові можливості; однією з найпопулярніших є функція GPS (Глобальна система позиціонування – Global Positioning System). GPS може використовуватися для визначення розташування користувача та об’єднуватися з даними карти, щоб дати користувачам можливість знаходити розташування та варіанти доріг до нього.

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

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

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

Аспекти зручності використання при використанні карт у дизайні для мобільних пристрій

Прокрутка і панорамування

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

Протиріччя об’єктів з цільовими розмірами

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

Крапки на картах занадто часто виявляються меншими за цю ціль у 36 x 36 пікселів, що ускладнює приєднання користувача до мети та взаємодію з нею.

Існує також проблема, якщо карта представлена ​​у надто високому рівні; можуть бути знайдені точки об’єктів у тому самому місці на одному екрані. Розрізняти ці точки через торкання – це досвід, що розчаровує. Проблему можна вирішити шляхом використання повідомлень, які дозволяють користувачеві торкатися однієї точки, а потім вибирати зі списку контактів або демонстрацією карти у відповідному збільшенні, щоб всі контакти були окремими і їх можна було розрізнити.

Сенсорні екрани, мережі та інші проблеми

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

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

Контроль жестів

Чим простіше ви розробляєте інтерфейс користувача на карті, тим більша ймовірність того, що ваші позначки (pins) та елементи керування будуть відповідати цьому орієнтиру в 36 x 36 пікселів для правильних точок торкання. Звісно це не означає, що ви не можете пропонувати додаткові функції користувачу карти. Це означає, що вам потрібно буде розглянути жести керування для цієї додаткової інтерактивної функціональності. Ці жести управління можуть бути не одразу очевидними або інтуїтивно зрозумілими користувачу, тому їх потрібно буде застосовувати дуже обережно, щоб внести дійсну користь у user-experience.

Розміщення панелі інструментів

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

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

Допомога і вихід

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

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

Посилання:

Тематичне дослідження щодо впровадження карток з використанням Google-карток – http://www.tnooz.com/article/lessons-for-mobile-app-developers-on-why-google-maps-for-iphone-looks-so-good/

Цікаве дослідження проблем використання даних карт у мобільних додатках – http://www.slideshare.net/fgarofalo/ux-considerations-for-mapping-apps-on-touch-devices

Бред Фрост досліджує адаптивну карту тут – http://bradfrost.com/blog/post/adaptive-maps/

Оригінал статті: https://www.interaction-design.org/literature/article/the-self-generation-effect-how-to-create-more-memorable-user-interfaces

Автор – Еуфемія Вонг (Euphemia Wong)

Дізнайтеся, як удосконалити досвід взаємодії (user experience), включивши ефект самогенерації (self-generation effect) у ваш інтерфейс користувача. Цей ефект пропонується в багатьох налаштуваннях інструментів, вбудованих в продукті, що найбільш широко використовуються. Це явище забезпечує користувачам почуття контролю, оскільки вони налаштовують власні інструменти і функціональні можливості. Adobe Photoshop, Microsoft Word, налаштування ігрового контролера EA Sports та миші серії Logitech MX – це лише мала частина серед багатьох популярних продуктів, які мають ефект самогенерації, відображений у їх дизайнах. Ця стаття навчить вас, як цей ефект застосовується в дизайні інтерфейсу користувача та надасть вам ідеї про те, як включити його у свої власні проекти, переглянувши приклади як з програмного забезпечення/веб, так і фізичних продуктів.

Ефект самогенерації (The Self-Generation Effect)

Ефект самогенерації описує, як краще запам’ятовувати інформацію, коли вона самовідтворюється, замість пасивно поглинати та взаємодіяти з нею. Це явище вивчали різні дослідники когнітивної науки, включаючи Нормана Сламецька і Пітера Графа (1978), воно розглядалося в багатьох вправах з вилученням спогадів (recall exercises), що включають усну інформацію, картинки, а також арифметичні проблеми.

Одна з теорій для ефекту самогенерації – це гіпотеза лексичної активації, яку дослідили вчені-когнітивісти Джон Гардінер і Джеймс Хемптон (1985) (John Gardiner, James Hampton). Вона пояснює, що процес генерації інформації вимагає більшого залучення семантичної пам’яті, аніж простого читання. Гардінер і Хемптон запропонували гіпотезу лексичної активації, засновану на трьох експериментальних результатах, які підтримують їхню теорію. Один експеримент тестував учасників на однорідному наборі буквених біграм – послідовність двох суміжних елементів з рядка букв. У результаті ефективність відтворення спогадів була набагато гіршою при вивченні безглуздих біграм, ніж при вивченні значних відомих абревіатур. Другий експеримент тестував учасників як у цілих, так і на не цілих числах (наприклад, 25 проти 2,5). Результат показав, що ефект самогенерації проявляється у відтворенні цілих чисел, а для не цілих такого немає. У третьому експерименті, вивченому Гардінером і Хемптоном, учасники були випробувані як на знайомих, так і на незнайомих парах слів, що утворюють складові іменники, іменники, що складаються з двох або більше слів. Вони виявили, що ефект самогенерації проявляється тільки тоді, коли учасникам надаються знайомі пари слів (наприклад, чізкейк), а не безглузді незнайомі словосполучення (наприклад, сирний кетчуп).

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

“Якщо ви хочете, щоб було зроблено добре, зробіть це самі” – Наполеон Бонапарт

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

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

4 приклада того, як ефект самогенерації повинен впливати на UX дизайн

Нам вже відомо через наш досвід у школі, що “тестування себе” шляхом формування питань вікторини чи створення флеш-карт – чудовий спосіб запам’ятати все, починаючи з історичних дат та закінчуючи біологічною термінологією. Але як це виглядає в інтерфейсі користувача та дизайні продукту?

1. Робочі області в Adobe Photoshop

Adobe Photoshop, створений великою північноамеріканською комп’ютерною компанією Adobe Systems Incorporated, є чудовим прикладом того, як використання ефекту самогенерації в дизайні інтерфейсу користувача може зробити продукт широко популярним та успішним. Одна з багатьох причин для користувачів любити Photoshop – це гнучкість та ефективність, що створюються за допомогою самогенерованих робочих просторів. Користувачі можуть використовувати цю гнучкість шляхом організації та додавання до робочого простору, а також роблячи речі ефективнішими, зберігаючи їх для майбутнього використання. Таким чином, користувачі краще пам’ятають, де розташовані їх інструменти, що є кращим інтерфейсом користувача, оскільки для користувача при кожному відкритті програми задіяно менше кількості запам’ятовувань та когнітивної розбіжності (cognitive friction).

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

2. панель інструментів в Microsoft Word

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

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

3. Консолі-елементи управління в FIFA, що налаштовуються

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

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

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

4. Кнопки, які настроюються у безпровідній миші Logitech MX Master

Бездротова миша Logitech MX Master від Logitech International S.A. є ще одним добрим прикладом того, як фізичний продукт може бути розроблений для налаштування користувача, щоб забезпечити ефект самогенерації і забезпечити споживачеві більш широкий користувальницький досвід.

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

На закінчення

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

Посилання та де дізнатися більше

Щоб знайти докладнішу інформацію про “Ефект самогенерації: опис феномена” Сламека та Графа (Slamecka та Graf) (1978), дивіться тут:

http://worthylab.tamu.edu/Courses_files/Generation%20Effect%20Slamecka%20%26%20Graf%20(1978).%20JEP-HLM.pdf

Щоб знайти додаткову інформацію про книгу “Семантична пам’ять та ефект генерації: деякі тести гіпотези лексичної активації” Гардинера та Хемптона (1985), дивіться тут:

http://www.staff.city.ac.uk/hampton/PDF%20files/Gardiner&Hampton1985-11-732.pdf

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

https://www.nngroup.com/articles/mobile-subnavigation/

Автор – Ралука Будіу (Raluca Budiu)

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

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

Cisco.com: Для робочого столу застосовують горизонтальну навігаційну панель, що включає головні категорії. Якщо навести курсор мишки, з’являється мега-меню з підкатегоріями другого та третього рівня. Вони розкривають усі основні категорії. Мега меню ділиться на три стовпчики, а внизу містить список вкладок.

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

Дизайнерські цілі

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

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

1. Найменша завантаженість взаємодій: необхідно, щоб користувачі могли дістатися елемента, який їх цікавить, докладаючи мінімум зусиль. Тобто трохи натиснути, прокрутити, і довго не чекати завантаження сторінок.
2. Підтримка стандартного шляху користувача: якщо за одне відвідування сайту користувачеві доводиться переміщатися з однієї сторінки певного розділу у протилежну частину, метою піднавігації буде полегшити це завдання. В іншому випадку, коли більшість відвідувачів буде “жити” в одному розділі сайту (наприклад, у спортивному розділі газети), піднавігацію потрібно фокусувати на підтримку цього шаблону.
3. Можливість знаходження: користувачі не повинні витрачати багато часу, щоб знайти елементи піднавігації. При цьому вони не повинні повторювати вигляд основного меню, щоб відвідувачі їх не плутали.

Види мобільної навігації

Виділяють чотири прості способи розробки дизайну піднавігації для мобільних пристроїв:

• Меню акордеон (або “підменю”) у рамках головного меню (Accordions)
• Меню секцій або розділів (Sequential menus)
• Послідовне меню (Section menus)
• Категоріальні посадкові чи цільові сторінки (Category landing pages)

Меню акордеон

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

Tide.com відображає піднавігацію за допомогою акордеонів

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

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

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

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

Seventhgeneration.com: Колір показує відмінність між головними та нижньорівневими категоріями

Послідовне меню

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

HIV.gov: Вибираючи основну категорію головного меню, ми бачимо не вихідну навігацію, а відповідні підкатегорії. Перейти від одного розділу сайту до іншого можна за допомогою кнопки “Назад”, яка знаходиться у меню.

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

Послідовне меню іноді викликає помилкові дії користувачів, особливо якщо йдеться про телефони на базі Android (або про браузер) – часто людям хочеться натиснути на значок “Назад” або на аналогічну кнопку браузера, через що закривається меню і здійснюється перехід на іншу сторінку , а не повернення в меню найвищого рівня.

Hiv.gov: Якщо на Android-пристрої натиснути на значок “Назад” для переходу вгору по меню, ви переміститеся на сторінку, що була раніше відкрита в браузері. Щоб перейти в меню вищого рівня, потрібно використовувати аналогічну кнопку, яка знаходиться всередині меню.

(Примітка: краще утриматися від відображення меню зверху завантаженого зображення, як показано на малюнку.)

Є сайти, які замість кнопки “Назад” навмисне використовують інший знак для переходів по меню верхнього рівня. Наприклад, у меню сайту Macy відображається спеціальний ланцюжок навігації (“стежка хлібних крихт” – trail of breadcrumbss), що дозволяє користувачам підніматися IA сайтом.

Macys.com: Дане послідовне меню використовує ланцюжок навігації, тому користувачі навряд чи будуть спантеличені або випадково натиснуть кнопку “Назад”, коли здійснять перехід вгору по основній ієрархії. (Але зважте на те, що подібний ланцюжок навігації виглядає досить нестандартно, через що може бути прийнятий відвідувачами як набор основних категорій, які є на сайті).

Показуючи місце розташування відвідувачів послідовні меню можуть викликати в останніх розгубленість. Їм може бути не зрозуміло, що є перехід на інші частини сайту. Візьмемо наприклад сайт Macy – там меню змінюється виходячи з поточної позиції на сторінці. Через це користувач, який зупинився на сторінці “Знайти магазин”, при відкритті меню не виявить чогось вартісного, і ймовірно вирішить, що воно марне або що сайт має збої в роботі.

Macys.com: через послідовне меню відображається поточне розташування користувача. Відвідувач, який відкрив сторінку “Знайти магазин”, не помітить цікавого змісту в меню і може подумати про його непотрібність або якесь пошкодження сайту.

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

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

Послідовне меню відрізняється помірною завантаженістю взаємодії (за наявності 1-2 підрівнів у навігаційній ієрархії) і дає користувачам можливість легко переміщатися по сайту (за умови, що вони вчаться, як це робити), але у той же час воно може призвести до дезорієнтації. Відвідувачі сайту можуть просто не зрозуміти, в якій частині сайту вони знаходяться і як визначити приналежність категорій до різних рівнів IA. Оскільки користувачі зазнають складнощів у розрізненні кнопки “Назад” у послідовних меню та у браузері, краще виключити їх використання у піднавігації.

Меню секцій чи розділів

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

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

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

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

Наведений вище приклад Бі-Бі-Сі добре підходить до названих вище критеріїв.

Breastcancer.org: Основне меню (ліворуч) та меню розділу (праворуч) відображаються за допомогою однакового елемента (значок “Меню”). Відвідувачі можуть не зрозуміти, що різні функції однієї кнопки залежать від розташування, тому вони не натискатимуть на “Меню” для переходу до підкатегорії поточної категорії.

Mayoclinic: Меню розділу та головне меню достатньо відрізняються за зовнішнім виглядом, так що у людей не буде проблем зі плутанням одного з іншим

Категоріальні цільові сторінки

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

Stanford.edu: Для здійснення піднавігації використовуються категоріальні цільові сторінки. Наприклад, у цільової сторінки Admission більше шести інформаційних екранів і посилань до різноманітних підкатегорій.

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

Висновок

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

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

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

Посилання:

Гаррі Хохейзер, Бен Шнейдерман (Harry Hochheiser, Ben Shneiderman). Переваги використання одночасних над послідовними меню як складність завдання. Міжнародний журнал взаємодії людини із комп’ютером, 2009.

Марі Кармен Пуерта Мелгізо, Уті Відья та Геррі ван Остендорп (Mari Carmen Puerta Melguizo, Uti Vidya, і Herre van Oostendorp). Пошук інформації в Інтернеті: вплив типу меню, складність шляху навігації та просторові можливості для збору інформації. Поведінка та інформаційні технології, 2012

Вони висвітлюють підводні камені в роботі дизайнера для того, щоб уникнути і дати нам зрозуміти, як правильно перевести теорії дизайну в рішення, які працюють у реальному світі. Джаред Спул (Jared Spool), американський письменник, дослідник та експерт із зручності використання («usability»), якось сказав: «Хороший дизайн, коли він виконаний правильно, стає невидимим. Тільки коли його зроблено бідно, ми помічаємо його». Що ж, подивімося на п’ять прикладів поганого дизайну і проллємо світло на те, як хороший дизайн може працювати сам на себе. А також зробимо кілька уроків, як ми всі можемо створювати чудовий та невидимий досвід для наших користувачів.

Оригінал статті: https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706

1.Інформаційне перевантаження

Поганий приклад: Дорожні знаки на парковці в Лос-Анджелесі (Los Angeles, далі – LA)

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

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

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

Хороший приклад: Дорожні знаки Ніккі Сільянтенга (Nikki Sylianteng)

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

Варіант, який запропонував Ніккі, зрештою був використаний на парковках ЛА у тестовому режимі.

Одна з причин вдалого дизайну Ніккі – це використання в роботі принципу, що називається “орієнтація на користувача”: дизайнер дає водіям просто зрозуміти коли вони можуть паркуватися. Адже все, що потрібне водіям – це ТАК чи НІ, а саме такий знак їм у цьому легко допоможе.

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

Зараз, коли ви дивитеся на знак, ви знаєте, що паркування у вівторок о 9-й ранку не дозволено.

Бари доводять, як здавалося б – все просто.

Отриманий урок: найкраща практика

• Необхідно розуміти, що саме потрібно вашим користувачам і потім розробити дизайн, що базується на цьому. Це допомагає зменшити інформаційне навантаження.
• У вас є багато інформації для передачі вашим користувачам? Спробуйте візуалізацію замість тексту. Вивчайте більше про візуалізацію даних тут. https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception

2. Прихована навігація

Поганий приклад: LazorOffice.com

Вигаданий у 1998 році Вінсентом Фландерсом з компанії Web Pages That Suck, термін «прихована навігація (далі – СМН)» належить до кейсів, коли призначення посилання невідомо, поки користувач не натисне на це або не наведе курсор миші. Термін «приховане м’ясо» походить від ситуації з подачі їжі до їдалень загальноосвітніх американських шкіл: м’ясо для учнів подавалося так, що зовсім не був зрозумілий його первісний вигляд. Використання у дизайні таких елементів погано впливає на результат, тому що вони знижують зрозумілість навігації загалом. Це додає когнітивного навантаження користувачам, тому що тепер вони повинні здогадатися, як саме пересуватися або який клік веде за собою певну дію.

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

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

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

“Натиснути, щоб дізнатися” – ніколи не було хорошим рішенням для UX (user experience). Швидше за все, ваші користувачі відмовляться від такої навігації та знайдуть альтернативне рішення на сайтах ваших конкурентів.

Хороший приклад: Картки курсів на веб-сайті The Interaction Design Foundation.

Слава Богу, проблеми СМН легко вирішуються. Ключ до рішення – це чітке усвідомлення того, що у вас мають бути гранично ясні мітки на посилання. Просте додавання “Переглянути проєкт”, що з’являється при наведенні курсора миші, набагато покращить зручність користування сторінкою Lazor Office.

Наші картки курсів також не є секретними, як і наші посилання.

Для карток курсів на сайті Interaction Design Foundation, у нас є не тільки “Переглянути курс” на кнопках для ідентифікації дії, що відбудеться. Ми також маємо спливаюче вікно з текстом «Перейти до курсу». Багато веб-сайтів дотримуються такого ж принципу і ви повинні також це зробити, для максимізації зручності користування вашим веб-сайтом.

Отриманий урок: найкращі практики

Завжди ставте позначки на ваші посилання! Повірте, вам не сподобалося б їсти приховане м’ясо. Так само і вашим користувачам зовсім не сподобається кликати на приховані посилання.

3. Створення дизайну, який додає перегради до здійснення дій.

Поганий приклад: iFly50.com

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

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

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

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

Хороший приклад: еластичне прокручування на iOS

Обов’язково потрібно знати, що якщо помірно та з розумом додавати “перешкоди”, то на виході можна отримати чудовий дизайн.

Корпорація Apple має чудовий продукт, який був розроблений для мобільної операційної системи IOS. Цей продукт називається “еластична прокрутка”. Сенс такого прокручування у тому, що коли ви потрапляєте у певне місце або ситуацію (наприклад, наприкінці веб-сторінки), вам стає важче прокручувати сторінку. Тобто, до дії користувача усвідомлено та навмисно додається перешкода.

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

Отриманий урок: найкраща практика

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

4. «Розумний» дизайн: коли зручність використання не має значення

Погано: Bolden.nl

Трапляється, що «розумний» дизайн цілком здатний нашкодити UX. Крім того, самі дизайнери дуже часто роблять свій вибір на користь такого рішення, що робить ситуацію ще небезпечнішою. Прерогатива «розумного» дизайну в тому, що це ті малесенькі графічні чудеса, які приносять нам посмішку. На жаль, не всі люди на планеті Земля – дизайнери. Важливо, що часто «розумні» дизайни не є хорошими. Особливо, коли вони можуть створити складнощі з доступністю, зручністю використання та відкритістю.

Відмінний приклад вищесказаного – голландський сайт розвитку та стратегічного дизайну Bolden:

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

Одразу видно, що це розумний дизайн, адже так? Так, безумовно. Але зрозуміло, що це абсолютно поганий дизайн!

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

Гарний приклад: CultivatedWit.com

Веб-сайт Cultivated Wit`s – це чудовий приклад того, як «розумний» дизайн не повинен впливати на зручність користування.

Домашня сторінка Cultivated Wit відображає зображення сови.

На домашней странице Cultivated Wit вы можете увидеть изображение совы, которое меняется, когда ваша мышь попадает на неё.

На домашній сторінці Cultivated Wit ви можете побачити зображення сови, яке змінюється, коли миша потрапляє на неї.

Сюрприз! Сова моргає вам, коли ви наводите курсор на неї. Зверніть увагу на розумний розподіл білого простору.

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

Різниця між цим дизайном та дизайном Bolden у тому, що сова не є важливою частиною веб-сайту та ніяк не впливає на UX. Тобто нічого не зміниться, якщо раптом користувач не зверне увагу на такий елемент «розумного дизайну».

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

І веб-сайти можуть бути “розумними” без шкоди UX (user experience).

Копія (чітка, яка виділяється на контрасті) створює сенс дотепності. Але, на жаль, це зазнало погіршення зручності використання і не схоже на те, що намагалися досягти Bolden. Є лише одна маленька проблема – це текст Join our email club. Він, без сумніву, повинен бути більш видимим, але якщо брати у цілому, то веб-сайт Cultivated Wit – це чудовий приклад використання розумного дизайну без створення убогого UX.

Отриманий урок: найкраща практика

«Розумні» дизайни повинні бути зроблені настільки просто, наскільки це можливо і/або протестовано на актуальних користувачах. Іноді розумний дизайн може нашкодити зручності використання.

5 надмірна анімація

Поганий приклад: Концепція чека від PayPal на Dribbble

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

Концепція чека для PayPal, яка була розроблена Владиславом Тузіним та розміщена на Dribbble – це приклад, як погано можна використовувати анімацію:

Анімація – гарна, але її дуже багато. Загалом, вона відбирає 3,5 секунди, щоб подивитися деталі транзакції. Поява самого чека могла б бути більш витонченим: це забирало б менше часу, що було б краще для користувача.

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

Хороший приклад: Анімація перевірки у Stripe

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

Stripe використовують анімацію, щоб змусити речі бути швидше, ніж вони є насправді: це забезпечує користувачів своєчасною інформацією (наприклад, «Надіслано»), навіть якщо вони ще не отримали смс-повідомлення. Це допомагає запобігти почуттю фрустрації у користувача та додає впевненості, що смс вже на правильному шляху.

Рейчел Наборс, запрошений експерт з веб-анімації в W3C, пропонує 5 принципів, які необхідно пам’ятати при створенні анімації:

1. Усвідомлена анімація: продумайте кожну анімацію, як створити її.
2. Створення анімації несе в собі понад 12 принципів: 12 принципів роботи з анімацією від Діснея добре працює для фільмів, але ніяк не для веб-сайтів та програм.
3. Користь та необхідність, потім краса: естетика має займати останнє місце, коли йдеться про UX.
4. Зроби її вчетверо швидше: хороша анімація зазвичай ненав’язлива, що означає, що вона “біжить” швидко.
5. Встановіть “kill switch”: для великих анімацій, таких як ефект паралакса, створіть кнопку відмови.

Отриманий урок: найкраща практика:

Завжди робіть вашу анімацію цілеспрямованою: дуже багато може вбити UX продукту. Краса має бути функціональною.

Забери із собою:

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

1. Зрозумійте, що потрібне вашим користувачам, потім передайте цю інформацію.
2. Якщо у вас багато інформації, яку потрібно передати, спробуйте використовувати візуалізацію замість тексту.
3. Завжди ставте мітки на ваші посилання! Користувачам не подобаються потаємні посилання.
4. Уникайте будь-яких перешкод до дій користувача, якщо вони не повинні відмовитись від дій.
5. Протестуйте ваш «розумний» дизайн та використовуйте його обережно.
6. Анімація як прокляття: якщо ви зловживатимете нею, то вона втратить свій вплив.

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