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

Чому патерни в дизайні важливі

Для того, щоб зрозуміти, що таке патерн у дизайні користувацької взаємодії, достатньо провести аналогію з об’єктами реального світу. Візерунки, що повторюються, в природі або декоруванні приміщень і одягу чи патерни поведінки людини (звички) мають елементи, що можна передбачити. Так само і в проєктуванні користувацького інтерфейсу існують рішення для типових проблем. Приблизно 99% дизайн-проблем розв’язують за допомогою вже давно придуманих «ЯК».

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

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

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

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

Ще одна невелика ремарка про значення патернів. Пам’ятаєте цей момент, коли ви приходите додому і вмикаєте світло? Я — ні. Ця дія вже настільки налагоджена, що після переміщення вимикача, за інерцією все одно рука буде тягнутися до звичного місця певний час. Так само з вашим дизайном. Немає сенсу зайвий раз ускладнювати життя користувачам. Усі ми вже звикли до хрестика в правому куті модального вікна. Не відволікайте користувача від розв’язання його проблем, якщо тільки ви не поставили це собі на меті. Але і в такій ситуації варто розуміти, «ЩО» і «НАВІЩО».

Заглиблюємося в теорію

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

Патерни поділяють на три рівні організації:

• Контекст (Context).
• Сценарій (потік) (Flow).
• Упровадження (Implementation).

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

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

На нижньому рівні «Впровадження» розв’язують точкові питання, пов’язані з розміщенням елементів на екрані, вибір кольору (червоний — небезпечно, зелений — сприятливо) в межах продукту.

Популярні патерни

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

Патерни навігації (Navigation)

Дозволяють користувачу орієнтуватися в продукті, швидко знаходити те, що потрібно.

Приклади: меню, вкладки, «хлібні крихти».

dribbble.com

Патерни введення (Getting input)

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

Facebook registration form

dribbble.com

Подача контенту (Dealing with data)

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

Меdium

Pinterest

Соціальні (Social)

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

Facebook

Що тепер з цим робити на практиці?

Потрібно перевірити, чи відповідає конкретний шаблон вашим потребам.

1. Проблема. Яку проблему, пов’язану з використанням системи, необхідно вирішити.
2. Ситуація. Що призводить до того, що виникає проблема.
3. Принцип. Патерн базується на більш ніж одному ергономічному принципі.
4. Рішення. Описує тільки сутність проблеми, яку можна вирішити різними способами.
5. Чому. Тому що цей шаблон можна використати для розв’язання проблеми, та як це вплине на зручність використання.
6. Приклад. Приклади вдалого використання шаблону.
7. Впровадження. Як використати цей шаблон щодо поточної проблеми.

Розглянемо на прикладі семи компонентів моделі використання патерну.

В чому полягає проблема?

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

dribbble.com

Що призводить до проблеми?

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

dribbble.com

Який принцип можна застосувати?

Попередження помилок (Я. Нельсон).

dribbble.com

dribbble.com

Як розв’язати проблему?

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

Навіщо розв’язувати цю проблему?

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

Які приклади вирішення подібної проблеми вже існують?

Google використовує підказки, щоб скоротити кількість невірно введених даних.

У калькуляторі використовують лише цифрові символи або маски введення.

dribbble.com

Як впровадити такий шаблон?

Передбачити блокування неприпустимих символів клавіатури, використовувати маски введення.

Післямова

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

Так що всім успіхів у цьому марафоні.

І на додачу кілька ресурсів, які дадуть ще глибше розуміння теми:

1. www.interaction-design.org
2. ui-patterns.com
3. ui-patterns.com

Оригінальна версія статті