Почему шаблоны проектирования UX работают и как их использовать

Содержание

• Как пользователи взаимодействуют с шаблонами проектирования
• Выученное поведение
• Условные обозначения универсального дизайна
• 01. Гештальт
• 02. Близость
• 03. Цвет
• 04. Применение эмпатии к шаблонам дизайна пользовательского интерфейса
• Заключение

Интернет существует уже более 20 лет, что дает нам достаточно времени, чтобы обнаруживать проблемы взаимодействия с пользователем - по сути, обнаруживать «пользовательский опыт» вообще - и изобретать решения.

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

Это было несложно. Люди запрограммированы на распознавание закономерностей даже там, где их нет.

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

UX-дизайнеры могут легко воспользоваться тенденциями пользователей к поиску шаблонов. Как люди перемещаются по многим страницам? Как мы указываем, что при нажатии начинается воспроизведение видео?

Ответ кроется в шаблонах проектирования, которые представляют собой многоразовые решения проблем юзабилити. Они также экономят время. Шаблоны - это первое решение, к которому люди обращаются, когда у них нет времени изобретать что-то новое. И, как и во многих решениях типа «это просто работает», шаблоны, как правило, остаются неизменными.

В этом посте мы расскажем о психологии и методах создания успешных шаблонов пользовательского интерфейса.

Как пользователи взаимодействуют с шаблонами проектирования

Первые впечатления имеют решающее значение, поскольку пользователи в течение 10–20 секунд узнают, покинут ли они ваш сайт. Паттерны как можно яснее передают функцию и намерение в рамках этого окна возможностей.

Вот как это работает. Допустим, пользователь хочет выполнить задачу, например, забронировать отель.

Взгляните на возможную серию действий пользователя:

1. Туристический сайт представляет пользователю список возможных мест для проживания.
2. Пользователь нажимает на фотографию очаровательного бунгало. Ничего не произошло. Извлеченный урок: фотографии не дают дополнительной информации о каждом объекте недвижимости.
3. Пользователь продолжает исследовать. Он или она может поискать ссылку «дополнительная информация» или нажать на ночную ставку. На всякий случай они могут попробовать еще раз нажать на фото. Оставленный сам по себе, целеустремленный пользователь будет продолжать нажимать на различные элементы в поисках дополнительной информации о бунгало.
4. Наконец, они нажимают на название отеля (возможно, в виде кнопки или ссылки), и они перенаправляются на страницу с более подробной информацией. Пользователь видит очаровательную атмосферу, но без бесплатного завтрака. Это не соответствует их критериям, поэтому они продолжают поиск.

Теперь вот где начинается закономерность. Узнав, что одну миниатюру фотографии нельзя нажать, но есть название отеля, пользователь теперь точно знает, что делать.

Выученное поведение

Это выученное поведение особенно хорошо получается у людей. Многие факторы влияют на то, как люди учатся, но небольшой опыт имеет большое значение. Это форма инструментального обучения, при котором люди достаточно хорошо помнят результаты прошлого опыта, чтобы изменить свое поведение в будущем.

Не каждый шаблон столь же абсолютен, как пример результатов поиска. Как объясняется в Руководстве по шаблонам веб-интерфейса, идея шаблона заменяет его реализацию.

Например, маркеры могут быть круглыми точками, маленькими квадратами, флажками или забавными волнистыми линиями. Но если объект находится сбоку от строки текста, а их несколько, пользователи понимают, что это функция маркера.

Точно так же ссылки не всегда нужно менять с синего на фиолетовый. Как и в случае с различными форматами маркеров, пользователи понимают, что реальная закономерность состоит в том, что ссылки меняют цвет, чтобы отразить их статус.

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

Условные обозначения универсального дизайна

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

Новостные сайты используют это. Блоги используют это. Amazon делает изображения продуктов в результатах поиска доступными для использования. То же самое с Google и, что более важно, с TripAdvisor, Orbitz и Yelp. Это устоявшаяся модель. Это просто понимают без объяснения причин.

В нашем примере с гостиницей мы нарушили установленную закономерность. Пользователь нажал на миниатюру на нашем сайте, и ничего не произошло. Они были слегка раздражены. Не достаточно, чтобы отогнать их (помните, что они продолжали стучать), но достаточно, чтобы создать плохой прецедент.

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

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

01. Гештальт

Люди рисуют связи между разрозненными фигурами. В 1910 году психолог Макс Вертхаймер наблюдал за мерцающими огнями железнодорожного переезда. Узор создавал иллюзию, что огни движутся по кругу, хотя они просто чередовались с правильным выбором времени.

Вертхаймер вместе со своими коллегами разработал теории зрительного восприятия, которые лежат в основе веб-дизайна. Теории основываются на упрощенной, но классической аксиоме Аристотеля: «Целое больше, чем сумма его частей» применительно к визуальным эффектам.

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

В приведенном выше логотипе, созданном в приложении для создания прототипов UXPin, нет заглавной буквы «H», но наша склонность видеть фигуры там, где их нет, говорит об обратном.

Применение в веб-дизайне: Формы и контуры должны иметь приоритет перед более мелкими деталями. Неважно, насколько увлекательно выглядит кнопка, на которую можно нажимать, если ваши пользователи не знают, что это кнопка. Эти «указатели» помогают предположить функцию (известную как аффорданс).

02. Близость

Люди понимают, что близко расположенные элементы связаны между собой, особенно если они отделены от других групп еще большим пространством. Это также связано с временными и пространственными элементами закона Фиттса.

Этот принцип использует отрицательное пространство, чтобы раздвинуть одни элементы, а другие - ближе друг к другу, чтобы создать очевидные группы, которым не нужны линии или другие индикаторы для написания «это группа», например, наборы полей HTML по умолчанию.

Применение в веб-дизайне: Группировка элементов в разделы жизненно важна для композиции страницы. Боковые панели должны стоять отдельно от основного контента. Разделам в содержании требуется передышка, чтобы обозначить, что они являются разделами. Фотографии, заголовки и описательный текст в результатах поиска должны формировать кластеры, чтобы сформировать отдельные блоки.

Как вы можете видеть справа на приведенном выше рисунке, результаты поиска становятся отдельными элементами, если вы добавляете небольшое пространство, чтобы указать, что «это группа».

03. Цвет

Яркие цвета словно «возвышаются над» прохладными, темными оттенками и оттенками. При добавлении глубины дизайну некоторые приемы более эффективны, чем затемнение элементов фона. Чтобы понять почему, мы разбиваем теорию цвета на три части:

• Контраст: у каждого оттенка цвета есть противоположный набор - «заклятый враг», контраст которого намного больше, чем у любого другого цвета.
• Дополнение: цвета не всегда расходятся. Дополнительные цвета подчеркивают друг друга и раскрывают все лучшее, в отличие от контраста. Это цвета, расположенные рядом друг с другом на цветовом круге, например, фиолетовые дополнения - это синий и розовый.
• Яркость: каждый цвет вызывает определенное настроение: более яркие теплые цвета (красный, оранжевый, желтый), как правило, заряжают энергией пользователя и делают его более бдительным, в то время как более темные прохладные оттенки (зеленый, синий, фиолетовый) имеют тенденцию быть более расслабляющими и спокойными.

Два варианта логотипа, сделанного в UXPin, вызывают два разных чувства. Слева холодные оттенки фона заставляют гештальт-формы выделяться на холсте. Справа теплые цвета более привлекательны и, возможно, интересны. Но они отстают от белой H-образной формы, которая доминирует и определяет сам логотип.

Ничто из этого не воспринимается обычным пользователем. Все, что она хочет, - это забронировать чистую комнату. Самый быстрый способ от поиска до бронирования - использовать уже знакомый им шаблон. Как мы уже упоминали, результаты поиска - гостиницы или другие - имеют установленный формат.

В случае сайта по поиску отелей мы должны предоставить пользователям релевантные результаты поиска, чтобы они могли принять обоснованное решение. Иногда это означает отказ от наших творческих порывов и следование проверенным и скучным процессам. Но это не значит, что мы не можем веселиться.

04. Применение эмпатии к шаблонам дизайна пользовательского интерфейса

Мы можем использовать знакомые шаблоны в наших интересах. Но чтобы сознательно использовать их бессознательные склонности, нам нужно немного сочувствия и много планирования.

Для начала мы должны определить точные проблемы. Это дисциплина сама по себе, и она часто включает такие вопросы, как:

• Какие элементы важнее других?
• Что кликабельно, а что нет?
• Как пользователи узнают, что могут прокручивать страницу для получения дополнительной информации?
• Какой значок я должен использовать для данной задачи?
• Что сообщает пользователям, что функция отключена?
• Как пользователи узнают, когда один раздел заканчивается, а начинается другой?
• Как сказать пользователям: «Наберитесь терпения - это все еще загружается»?

… И другие вопросы о коммуникации, которые задают себе дизайнеры. Но чтобы подойти к этому с сочувствием, мы должны все изменить. Смотрите на вещи с точки зрения пользователя.

• Где я на сайте?
• На что я должен смотреть в первую очередь?
• Куда мне идти дальше?
• Как мне убрать это модальное окно?
• Я должен нажать на это или на то?
• Если на то пошло, что я могу нажать?
• Содержит ли эта страница нужную мне информацию?
• Что я могу игнорировать на этой странице?

Когда мы ищем шаблоны в Интернете, мы ищем проверенные решения, которые помогут пользователям достичь своих целей, будь то выбор отеля, просмотр статей, чтение спортивной статистики, размещение изображений или общение с друзьями.

К счастью, нас окружают узоры. Они настолько распространены, что их легко не заметить. Но они есть. Помимо того, что вы ищите их самостоятельно, к источникам относятся:

1. Шаблоны пользовательского интерфейса - репозиторий образцов со всего Интернета, организованный по темам с полезным описательным текстом.
2. Шаблоны дизайна веб-интерфейса - наша бесплатная электронная книга, содержащая информацию о том, как и почему создаются шаблоны, охватывает текущие тенденции в дизайне пользовательского интерфейса.
3. Убедительные триггеры. Поищите в Интернете достаточно долго, и вы найдете такие жемчужины, как эта статья в Smashing Magazine о психологических и поведенческих моделях.
4. PatternTap - обширная коллекция снимков экрана, организованных с помощью тегов, которые вдохновляют на создание элементов дизайна.

Заключение

Чем больше дизайнеры используют шаблоны, тем больше пользователей понимают их, что делает их более ценными для дизайнеров. Эти взаимные отношения сохраняются с первых дней веб-дизайна. Тенденции приходят и уходят, но лежащие в основе идеи остаются вне времени.

Если вы нашли этот пост полезным, просмотрите бесплатное руководство по шаблонам веб-интерфейса.

Книга написана на основе моего опыта создания веб-сайтов за последние 20 лет. В 104-страничном руководстве объясняется, как выбрать и использовать лучшие шаблоны проектирования с более чем 100 примерами из ESPN, Adobe, AIGA, The Discovery Channel и других.

Слова: Бен Гремиллион

Бен Гремиллион - дизайнер контента в приложении для создания прототипов UXPin, где он пишет для их бесплатной библиотеки электронных книг. Он занимается дизайном и программированием для Интернета почти 20 лет. Он также создает и поддерживает CMS для художников веб-комиксов.

Понравилось это? Попробуйте это...

• Объяснение дизайнерского жаргона: шаблоны веб-дизайна
• UX-портфолио сделано правильно
• Сайты с блестящей типографикой