UX/UI Паттерни і їх величезне значення в інтерфейсах

Вступ

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

Яскраві представники паттернів у Web-дизайні:

Бургер, який ми так звикли бачити, хоча багато хто від його вигляду дивуються, до речі, якщо у вас менше 5 пунктів меню, то не варто їх ховати в бургер, це неправильне його використання
Основна і другорядна кнопка. Написана ціла стаття (https://vc.ru/design/58713-7-tochek-rosta-konversii-ili-kak-povysit-klikabelnost-knopok), котра описує, що кнопка залита певним кольором отримує більше кліків за другорядну.
Паттерн вимог до паролю, котрий вказує на мінімальне значення для прийняття його системою.

А також представники паттернів в Mobile:

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

Елемент вибору потрібної опції (segmented control).

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

Чому важливо знати, якомога більше UX/UI паттернів?

Чим більше паттернів ви знаєте, тим легші та дружелюбніші будуть ваші інтерфейси, тим легше користувачам буде на них знаходитися, тим більше продажів, тим більше вас цінуватимуть, як професіонала. Цей ланцюжок можна розвивати ще довго, але думаю сенс ви зрозуміли.
Важливо зрозуміти, що вигадувати який-небудь свій паттерн – це дуже складне завдання і не завжди доцільна. Ось вам банальне пояснення чому цього робити не варто. Припустимо, користувач зайшов на незнайомий йому сайт, а кожен елемент у дизайні потребує часу для його декодування. Чим більше елементів для декодування, тим складніше для користувача, тим відповідно це стає непереборним завданням і сайт закривається, все, ця людина вже ніколи не повернеться. Це звичайно ж приклад у вакуумі і є багато аргументів ЗА ( до прикладу, якщо потрібно викликати wow-ефект і бургер або який-небудь елемент буде лише трохи нагадувати своїх родичів).
Це не погано, коли сайти/інтерфейси/додатки схожі один на одного, це навіть краще, просто потрібно додавати крихітну родзинку, яка виділить ваш дизайн на фоні інших.
У результаті, коли ви будете знати багато паттернів, то буде досить легко оцінити, де люди ідуть і не досягають своєї мети, а де це робиться успішно.

Де ж взяти ці важливі для всіх дизайнерів бібліотеки?

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

  • https://goodui.org/— величезна бібліотека, що створювалася на остові А/В тестування
  • UI Patterns— створив цю бібліотеку Андрес Тобоку. Паттерни цієї бібліотеки були підібрані в ручну, що послужило основою А/В тестування багатьох сайтів
  • Web UI Design Patterns— 63 паттерни з кейсами їхнього використання від хлопців, котрі створили свій сервіс для проектування UXPin
  • Inspired UI— база паттернів для Android, iPhone та iPad, котру легко використовувати завдяки простому випадаючому меню
  • pttrns— акуратно організована база паттернів, що містить найкрутіші UI-паттерни з 2012 року.
  • Mobile UI Design Patterns— електронна книга з 46 найуспішнішими UI-паттернами для мобільних девайсів. Є детальні пояснення по їхньому використанню разом з кейсами.

З повагою, автор: Жидких Павло UX/UI Дизайнер