Базовый Курс UX: Повторение и разрыв паттерна
Урок 14 из 31:
(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Создание паттернов — это один из важных принципов визуального дизайна. При помощи паттернов можно направить взгляд пользователя на важные элементы дизайна. И как все хорошие правила, паттерны создаются чтобы их нарушали. Поэтому сегодня мы изучим визуальный принцип:
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Повторение и разрыв паттерна
Итак, триумфальное возвращение старых-добрых резиновых уточек!
Человеческий мозг обладает выдающейся способностью улавливать шаблоны и последовательности (мы используем термин “паттерны”). Мы сразу же замечаем, когда что-то в природе случается снова и снова. И не просто замечаем, а начинаем по-другому относиться к этим вещам.
На первой из представленных выше картинок пять одинаковых уточек стоят в ряд. Но мы с вами не видим пятерых отдельных уточек; мы видим ряд уточек. Мы воспринимаем их как группу (или как определенную последовательность), и, если вы живете на Западе, то, вероятно, смотрите на них слева-направо (потому что так мы читаем).
Если бы вместо ряда уточек вам показали меню или список, все происходило бы точно также. Поэтому можем смело предположить, что на опции слева нажимали бы больше, чем на опции справа.
Разрыв паттерна:
На второй картинке перед нами снова пять уточек (они прекрасны, не правда ли?), но на этот раз одна из исполняет сольную партию. Назовем ее Бейонсе.
Это все меняет.
Теперь перед нами — ряд из четырех (завистливых) уточек, и Бейонсе — одна, в центре внимания, такая горячая! Сложно не фокусировать взгляд на Бейонсе, хотя все пять уточек одинаково прекрасны.
Ну а теперь вернемся к примеру с меню. В данном случае, на среднюю опцию кликали бы больше, потому что она цепляет взгляд. А еще она “крадет” внимание у опций слева, поэтому их популярность по сравнению с предыдущим примером снизится (при этом левые опции все равно будут популярнее правых).
Это мощнейшее знание.
Может показаться, что это все просто и очевидно, но стоит только применить этот принцип к дизайну — или, скажем, к постановке танца — и люди начнут замечать важные кнопки, опции или восходящих звезд.
Будьте осторожны: разрыв паттерна может также отвлечь пользователя от других важных вещей. Прежде чем нарушить паттерн, нужно его создать.
Комбинируйте принципы:
Чтобы создать паттерн, выберите соответствующий визуальный вес и цвета. Взгляд пользователя будет скользить от начала и до конца паттерна.
Чтобы разорвать паттерн, просто “удивите” необычным весом или цветом элемента. Пусть кнопка “Зарегистрироваться” будет неожиданного цвета, размера, формы или стиля. А теперь смотрите, как всего за одну ночь “взлетит” количество кликов!
Завтра мы изучим более продвинутую версию этой же идеи:
Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле
Мобильное приложение «Заметки о психике» | Mental Notes
Полезный инструмент для встряхивания мозгов. Подкидывает идей как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
