Принцип послідовності та стандартів у UI дизайні

Оригінал статті:https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design

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

Навчитися створювати дизайн з урахуванням послідовності і стандартів та зрозумійте важливість того, щоб включити їх у вашу роботу. Отримані від Якоба Нільсена і Рольфа Моліча (Jakob Nielsen і Rolf Molich) рекомендації по інтерфейсу користувача “Послідовність і стандарти” виявляються в багатьох широко використовуваних продуктах, створених одними з найбільш успішних компаній. Такі продукти, як Adobe Photoshop, випущені ще у 1990-х роках, і Google Gmail, випущені в середині 2000-х років – це лише деякі з найпопулярніших продуктів, які демонструють це важливе правило. Ця стаття розповість, як розпізнавати послідовність і стандарти та пояснить, чому вони важливі в дизайні інтерфейсу користувача (User Interface Design, UI Дизайн).

Дві основні причини для послідовності і стандартів в UI дизайні

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

1. Скорочення навчання

Послідовність обмежує кількість способів дій та операцій, які гарантують те, що користувачам не потрібно вивчати нові матеріали для кожного завдання. Крім того, встановлення норм проєктування, таких як виконання угоди платформи, дозволяє користувачам виконувати нові завдання без необхідності вивчення нового набору інструментів. Це може бути простою концепцією, але є багато прикладів, які демонструють відсутність послідовності в їхніх проєктах. Одним із таких прикладів, який показує цю проблему, є веб-сайт Xfinity від Comcast Corporation, американської медіа-компанії. На їхньому сайті не тільки другорядне меню непослідовно майже кожного разу, коли користувач натискає на іншу сторінку, воно також непослідовно стосовно основного меню. Подивімось та порівняємо три різні сторінки веб-сайту: Домашня сторінка, My Xfinity та ТБ (Homepage, My Xfinity, and TV.).

Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.

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

Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.

Це ТВ-сторінка сайту Xfinity. Що вводить користувача в оману, так це те, як кольори, розташування та стилі шрифтів відрізняються від домашньої сторінки.

Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use

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

2. Усунення плутанини

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

П’ять способів досягнення послідовності у вашій роботі

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

1. Ваш вибір мови

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

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

Коли речі означають те саме або виконують одну і ту ж операцію, вони повинні бути представлені таким же чином, як у випадку з поштовим сервісом Google, Gmail. На основі стилю організації клієнтських поштових додатків теки Gmail позначені як “Вхідні”, “Чернетки”, “Надіслані листи” тощо.

Author/Copyright holder: David Bruce Jr. 2011. Copyright terms and licence: CC BY 2.0

Ярлики тек у версії Gmail 2011 зображають безліч знайомих опцій. Мова, яка використовується для цих тек, показує послідовність, оскільки вона використовує мітки “Вхідні”, “Чернетки” та “Спам” – вони знайомі всім, хто використовував поштові програми в минулому.

2. Застосування елементів інтерфейсу користувача так, як вони спочатку визначені

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

Наприклад, селективні кнопки (radio buttons) використовуються, коли дозволено лише одну опцію. Прапорці (checkboxes) з іншого боку мають використовуватися лише тоді, коли користувачеві дозволено кілька варіантів. Багато в чому ми можемо бачити, як HTML5 витіснив технологію Flash на кінці 2014 року. Однією з причин є, мабуть, простота застосування та простота використання, яку розробники, дизайнери та користувачі можуть отримати в результаті послідовності та стандартів HTML5 у визначенні їх UI елементів.

Селективні кнопки допускають лише один варіант. Тому для вбудованих селективних кнопок HTML розумно поводитись у функціональності так само.

Прапорці допускають більше одного варіанта. Тому для вбудованих прапорців HTML має сенс поводитися у функціональності так само.

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

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

Author/Copyright holder: BBC. Copyright terms and licence: Fair Use.

Розділ BBC Comment показує стрілку вниз для найвищої оцінки і стрілку вгору для найнижчої оцінки. Це відображення є непослідовним та заплутаним для користувачів, оскільки поняття “найвищий” зазвичай є синонімом стрілки вгору, а “нижній” – синонімом стрілки вниз.

3. Використання різних усталених угод при виборі схеми розташування

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

Author/Copyright holder: Microsoft Corporation. Copyright terms and licence: Fair Use.

Author/Copyright holder: Apple Inc. Copyright terms and licence: Fair Use.

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

4. Дизайн для очікувань користувачів

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

Author/Copyright holder: Youtube. Copyright terms and licence: Fair Use.

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

5. Створення послідовних візуальних елементів на вашому сайті

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

Author/Copyright holder: Jan-Alfred Barclay. Behance. Copyright terms and licence: CC BY-NC 4.0

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

Поганий приклад послідовності у виборі кольорів та шрифтів можна побачити у версії мобільного інтерфейсу Google Gmail від 2013 року. Хоча можна посперечатися, що “значення” в даному випадку не відображено, очевидно, що досвід користувача майже завжди погіршується в результаті будь-яких дивних відмінностей у візуальних елементах між екранами.

Author/Copyright holder: Google Inc. Copyright terms and licence: Fair Use

Скріншот мобільного інтерфейсу програми Gmail, коли він був вперше представлений у 2013 році, показує непослідовність у виборі кольорових прямокутників та стилів шрифтів.

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

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

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

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