Паттерны проектирования и привычки пользователей | Урок 8

Если какой-либо дизайн часто встречается в интернете, это еще не значит, что он хороший. Хороший паттерн проектирования (другими словами, образец дизайна) должен быть и распространенным, и удобным.
Основы UX #8: Паттерны проектирования

← Предыдущий урок

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)

Когда многие дизайнеры сталкиваются с одной и той же сложной задачей (к примеру, меню в мобильном приложении), и кто-то решает ее с особым изяществом (например, скрытое меню на Facebook), и многие дизайнеры перенимают это решение, — это помогает пользователям быстрее “врубиться” в устройство приложения или сайта, ведь они видят подобное решение снова и снова.

Эти общепринятые решения так и называются:

Паттерны проектирования

Если какой-либо дизайн часто встречается в интернете, это еще не значит, что он хороший. Хороший паттерн проектирования (другими словами, образец дизайна) должен быть и распространенным, и удобным.

Некоторые виды дизайна становятся популярными только потому, что позволяют ленивым UI-дизайнерам избегать сложностей. Это все равно, что надевать пакет на голову кому-то страшненькому.

Пример: Кнопка меню на Facebook (так называемая hamburger button — кнопка-гамбургер) — которая служит для вызова скрытого меню в мобильных приложениях — стала появляться и на полноразмерных сайтах, где достаточно места для нормального, не скрытого меню. Конечно, ведь спрятать дурацкое меню гораздо проще, чем спроектировать хорошее.

На деле, многие пользователи даже не заметят скрытое меню и покинут сайт или запутаются.

Это плохо.

Это для ленивых.

Don’t do it, bitch.” — Jesse Pinkman.

Так вот, паттернов проектирования — сотни, и они эволюционируют изо дня в день, следом за девайсами и технологиями. Поэтому я не смогу составить список. Но вот вам хотя бы пара ссылок, на которые стоит обратить внимание:

1) GoodUI — отличный список простых идей с картинками. В большинстве своем, их стоит использовать в дизайне (ну, или хотя бы попробовать).

2) PatternTap — целая библиотека примеров тех частей сайта, которые могут вам понадобиться. Примеры присылаются пользователями. На заметку: Какие-то примеры плохие, какие-то — хорошие, но даже сам процесс просмотра любых примеров даст вам представление о том, что делают и чего не делают другие.

3) The Anatomy of a Perfect Landing Page — эта статья, конечно, не супер-новая, но она все еще актуальна. Следуя перечисленным указаниям, вы сможете быстро создать достаточно общую, но зато эффективную страницу для пользователей, приходящих к вам с поиска — то есть первую страницу, которую они видят. Если вам понравится, рекомендую перейти к Unbounce blog.

4) Mobile Patterns — по аналогии с PatternTap, в этом списке встречаются далеко не идеальные дизайны. Тем не менее, всегда полезно посмотреть на разные дизайны мобильных приложений и понять, что “принято” в этой сфере.

5) Timoa on Pinterest — очень хорошо организованная коллекция UI-элементов; все отсортировано по функциям.

6) Мы пропустили хорошие сайты с паттернами? Дайте мне знать в Twitter.

Завтра я расскажу вам о той части UX-дизайна, которая отличает нас от животных:

Информационная архитектура→

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

Курс «Основы UX»

Посты в категории UX-дизайн

Руководство по дизайну таблиц — 20 нюансов по представлению датасетов в интерфейсах

Анастасия Свеженцева

15 июня 2020

Посты в категории UX-дизайн

Руководство по созданию бодреньких прототипов с GIF-анимацией в Figma

Анастасия Свеженцева

15 июня 2020

Посты в категории UX-дизайн

Как я прокачала навыки продуктового дизайна (ux/ui), работая в техподдержке: с чего лучше начать обучение UX-дизайну

Ольга Жолудова

11 марта 2020