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/ — огромная библиотека паттернов, которая создавалась на основе A/B тестирования
  • UI Patterns — Создатель этой библиотеки Андрес Токсбу, которые были подобраны вручную
  • Web UI Design Patterns — 63 паттерна с кейсами их использования от ребят, которые создали свой сервис для проектирование UXPin
  • Inspired UI — база паттернов для Android, iPhone и iPad, которую легко использовать благодаря простому выпадающему меню
  • pttrns — аккуратно организованная база паттернов, содержащая крутейшие UI-паттерны с 2012 года
  • Mobile UI Design Patterns — электронная книга с 46 наиболее успешными UI-паттернами для мобильных девайсов. Есть подробные объяснения по их использованию вместе с кейсами.

С уважением, автор: Павло Жидких UX/UI Дизайнер