Щоб довести макет до його найпростішої форми, дизайнерам потрібно спростити його і усунути все, що відволікає від основної мети користувача. Цей процес часто забирає багато часу через масу численних ітерацій та уточнень. Є кілька методів, які я вважаю досить ефективними, коли мова йде про зниження складності робіт: «спочатку мобільні», «послідовне розкриття» та «прогресивне покращення».
Спочатку мобільні
«Mobile first» – це метод, який змушує дизайнерів розглядати питання про те, що є дійсно важливим у продукті або послузі. Обмеження невеликих екранів вимагає від нас усунення будь-яких зайвих елементів або функцій. Додаткові можливості та допоміжні елементи можуть бути вибірково введені в міру збільшення екрану, але вони відсутні за умовчуванням.
Ця стратегія ефективна для спрощення дизайну, оскільки має на увазі, що робота користувача на мобільному екрані відрізняється від складної роботи на великих настільних моніторах. Результатом є дизайн, орієнтований на основні завдання і контент. Він не має зайвих елементів (в ідеалі), а, отже спрощує роботу для користувача.
Приклад методу «Спочатку мобільні»
Новинні сайти вже давно є чудовим прикладом дизайну, орієнтованого на великі монітори. Вони дуже незручні для мобільних користувачів, бо не мають, ні окремої мобільної, ні адаптивної версії сайту. Єдине виключення з цього правила – це TheGuardian.com.
Сайт створено таким чином, що пріоритет надається основній інформації, яка не займає малий екран зайвими елементами. В результаті цього сайтом зручно користуватися на мобільних пристроях, без зміни на окрему мобільну версію, а додатковий контент розкривається на більшому екрані.
Послідовне розкриття
«Progressive Disclosure» – це метод створення дизайну, при якому за умовчуванням відображаються тільки важливі дії або контент, при цьому додаткові функції чи контент доступні та можуть бути розкриті користувачем при необхідності. Результатом є більш вдосконалений інтерфейс, який тримає увагу та допомагає зосередитися за рахунок зменшення зайвих елементів, плутанини та когнітивного навантаження.
Кожного разу, коли ми використовуємо випадаюче меню, акордеон, або перемикач, який показує вміст, прихований за умовчуванням, ми використовуємо послідовне розкриття. Цей метод є надзвичайно корисним для спрощення дизайну, оскільки він дозволяє відкласти менш важливі дії, розширені функції або додатковий контент для вторинного екрану (наприклад, розкриття додаткового меню або контенту).
Приклад послідовного розкриття
Чудовий приклад послідовного розкриття можна знайти на stripe.com: при наведенні миші на будь-який предмет в основний навігації з’явиться меню, яке показує різні посилання у цій категорії. Stripe створив простий інтерфейс, в якому користувачі можуть швидко переглядати і знаходити потрібну інформацію без необхідності копатися у купі контенту.
Прогресивне покращення
«Progressive Enhancement» являє собою метод, який фокусується на доступі до основного контенту і функціональності для всіх користувачів, а потім нашаровує покращення сторінки для більш потужних браузерів і пристроїв. Подібно до методу «спочатку мобільні», прогресивне покращення змушує дизайнерів зосереджуватися на простій роботі користувача із сайтом, яка ускладнюється тільки тоді, коли це необхідно.
Прогресивне покращення може ефективно спростити дизайн, оскільки воно вимагає змін у мисленні: змінити пріоритети та зробити акцент на тому, що має важливе значення під час використання сайту. Це зрушення, яке має тривалий ефект: витрачати більше часу на те, що важливо і менше часу на те, що просто непогано було б мати.
Приклад прогресивного покращення
A Bear’s-Eye View of Yellowstone від National Geographic є чудовим прикладом прогресивного покращення в дії. Розширена інтерактивна робота із сайтом побудована навколо базових елементів: тексту і відео, які розповідають історію про подорож ведмедів через Йеллоустоун.
Цих базових елементів вистачає, щоб адекватно розповісти історію, а додаткові елементи вводяться, коли доступні спеціальні функції навігації та простору. Ці додаткові елементи служать просто для підвищення зручності для користувача – вони не є головними для основного контенту.
Дотримуючись викладених вище методів, можна значно знизити складність дизайну сайту. Результатом буде поліпшений інтерфейс, який дозволяє користувачам зосередитися на головному контенті чи функції. Спробуйте та погляньте, як вони не тільки спростять сайт, але й спростять весь робочий процес зі створення дизайну.
