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

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

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

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

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

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

Представники паттернів в Mobile

Navbar
Navbar у більшості випадків має знаходитися внизу екрану, адже це пов’язано з тим, що тягнутися до бургера (котрий, як правило знаходиться з лівого або з правого боку вгорі екрану), якби такий був, незручно.
segmented control
Елемент вибору потрібної опції (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 Дизайнер