(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)
Создание паттернов — это один из важных принципов визуального дизайна. При помощи паттернов можно направить взгляд пользователя на важные элементы дизайна. И как все хорошие правила, паттерны создаются чтобы их нарушали. Поэтому сегодня мы изучим визуальный принцип:
Повторение и разрыв паттерна
Эти уточки создают паттерн. Повторение изменяет наше восприятие.
Мы всегда фокусируемся на том, что разрывает паттерн.
Итак, триумфальное возвращение старых-добрых резиновых уточек!
Человеческий мозг обладает выдающейся способностью улавливать шаблоны и последовательности (мы используем термин “паттерны”). Мы сразу же замечаем, когда что-то в природе случается снова и снова. И не просто замечаем, а начинаем по-другому относиться к этим вещам.
На первой из представленных выше картинок пять одинаковых уточек стоят в ряд. Но мы с вами не видим пятерых отдельных уточек; мы видим ряд уточек. Мы воспринимаем их как группу (или как определенную последовательность), и, если вы живете на Западе, то, вероятно, смотрите на них слева-направо (потому что так мы читаем).
Если бы вместо ряда уточек вам показали меню или список, все происходило бы точно также. Поэтому можем смело предположить, что на опции слева нажимали бы больше, чем на опции справа.
Разрыв паттерна:
На второй картинке перед нами снова пять уточек (они прекрасны, не правда ли?), но на этот раз одна из исполняет сольную партию. Назовем ее Бейонсе.
Это все меняет.
Теперь перед нами — ряд из четырех (завистливых) уточек, и Бейонсе — одна, в центре внимания, такая горячая! Сложно не фокусировать взгляд на Бейонсе, хотя все пять уточек одинаково прекрасны.
Ну а теперь вернемся к примеру с меню. В данном случае, на среднюю опцию кликали бы больше, потому что она цепляет взгляд. А еще она “крадет” внимание у опций слева, поэтому их популярность по сравнению с предыдущим примером снизится (при этом левые опции все равно будут популярнее правых).
Это мощнейшее знание.
Может показаться, что это все просто и очевидно, но стоит только применить этот принцип к дизайну — или, скажем, к постановке танца — и люди начнут замечать важные кнопки, опции или восходящих звезд.
Будьте осторожны: разрыв паттерна может также отвлечь пользователя от других важных вещей. Прежде чем нарушить паттерн, нужно его создать.
Комбинируйте принципы:
Чтобы создать паттерн, выберите соответствующий визуальный вес и цвета. Взгляд пользователя будет скользить от начала и до конца паттерна.
Чтобы разорвать паттерн, просто “удивите” необычным весом или цветом элемента. Пусть кнопка “Зарегистрироваться” будет неожиданного цвета, размера, формы или стиля. А теперь смотрите, как всего за одну ночь “взлетит” количество кликов!
Завтра мы изучим более продвинутую версию этой же идеи:
И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле