Принципы UX на примере эвристических постеров


17.05.2021 Время чтения - 6 минут 1158

Десять эвристических принципов для дизайна пользовательского интерфейса (Принципы UX), созданные Якобом Нильсеном и Рольфом Молихом 26 лет назад остаются актуальными и по сей день. NNG решили обновить представление об эвристике, добавив пояснения и примеры.


Читайте нас в Telegram.


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

Определение целей нашего дизайна

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

В дополнение к этому мы сформировали еще 3 дополнительных требования:

  1. Создавайте визуально привлекательные постеры, на которые можно ссылаться. Их дизайн не менее важен, чем содержание. Если постеры выглядят хорошо, значит людям они нравятся, а они, в свою очередь, с большей вероятностью будут делиться ними (что, опять же, помогает в распространении информации и евангелизации эвристики).
  2. Убедитесь, что постеры соответствуют широкому кругу UX-специалистов. Мы хотим убедиться, что постеры будут полезны не только студентам и джуниорам, но и опытным специалистам.
  3. Дизайн плакатов должен быть целостным. Поскольку эвристика – это принципы, которые должны использоваться вместе, мы хотели, чтобы постеры также выглядели целостно и гармонично.

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

Этап 1. Постер с низкой детализацией

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

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

На первом этапе главное — придумать концепт, не затрачивая много времени. Эти нарисованные от руки скетчи достигают данной цели без необходимости быть точными по пикселям.
Digitized low-fidelity wireframes
На первом этапе создания макетов с низкой детализацией мы нарисовали пару разных вариантов. Это дает сосредоточиться на создании визуальной иерархии.

Например, на первых итерациях (первый постер) подписи находились близко к соответствующим изображениям. Однако такое размещение подразумевало, что макет будет варьироваться в зависимости от эвристики, что противоречит одному из наших требований (целостность дизайна). Мы выбрали второй постер, изображенный выше, потому что он согласовывался с эвристикой: имел имя, определение и примеры для планшета/компьютера/телефона.

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

Этап 2: Итерация с высокой детализацией

Как только была выбрана структура постера, мы перешли к созданию его более точной версии.

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

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


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

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

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

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

Мы повторили шаги 2–4 для всех остальных плакатов. И нам не пришлось повторять шаг 1, поскольку визуальная иерархия (и макет) у всех плакатов была одинаковой.

Этап 3: Тестирование контента и визуального дизайна

Мы провели 2 раунда тестирования – один для иллюстраций плакатов, а второй — для общего содержания плакатов и визуального дизайна.

1. Тест на иллюстрацию. Чтобы протестировать каждую отдельную иллюстрацию, мы создали Google-опрос и собрали 15 обычных пользователей с помощью Mechanical Turk. Мы попросили людей рассказать нам, что, по их мнению, представляет каждая иллюстрация (без контекста или текста). На этом шаге было выявлено несколько иллюстраций, которые необходимо было сделать более понятными. Например, мы обнаружили, что иллюстрация с картой торгового центра, используемая на первом постере, требует большего контекста, чтобы люди могли понять, что это вообще такое.

Мы использовали результаты этого теста для улучшения плакатов перед тестированием с участниками UX.

Чтобы сделать иллюстрацию слева более узнаваемой, мы добавили несколько дополнительных контекстных подсказок: мы сделали карту торгового центра в 3D, увеличили отметку «Вы здесь» и добавили человека.

2. Контент-тест визуального дизайна. Для этого теста мы набрали 5 участников-профессионалов UX (все разного культурного происхождения и уровня опыта) и попросили их подумать вслух, просматривая каждый плакат. Мы разделили отзывы на 2 темы: визуальный стиль и содержание. В зависимости от отзывов мы изменили дизайн плакатов.

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

Заключение

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

Итеративный подход к визуальному оформлению постеров позволил:

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

Оригинал.

Читайте также: Как создавать доступные цифровые продукты


Читайте нас в Telegram.