Базовый Курс UX: Паттерны проектирования

Урок 8 из 31:


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

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


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

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.

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

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

Некоторые виды дизайна становятся популярными только потому, что позволяют ленивым 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-дизайна, которая отличает нас от животных:

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


Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

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

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


Мобильное приложение «Заметки о психике» | Mental Notes

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

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore