Правила юзабилити

Проектирование и дизайн интерфейсов

Команда AskUsers

Команда AskUsers

Базовые требования к веб интерфейсу сформулированы Якобом Нильсеном в виде 10 универсальных эвристик, которые не теряют своей актуальности с 1990 года, когда они были впервые опубликованы. Впоследствии этот список был доработан, расширен, формализован и лег в основу международного стандарта юзабилити ISO 9241-110.


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

5 этапов создания интерфейса

5 jetapov sozdanija interfejsa.jpg

В зависимости от потребностей клиента и степени готовности проекта мы можем проектировать:

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

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

Анализ

analiz.jpg

По порядку собираем, изучаем и анализируем всю нужную для создания веб интерфейса информацию:

  1. Потребности бизнеса: для чего создается проект, какие бизнес-задачи он должен решать, как будет монетизироваться в дальнейшем.
  2. Потребности аудитории: зачем проект аудитории, чего именно хотят пользователи, какие именно их проблемы и боли решает проект.
  3. Базовые характеристики и уникальные преимущества проекта на уровне идеи: почему именно этот проект может решить задачу лучше, чем конкуренты, что для этого нужно.
  4. Точки соприкосновения: в каком месте интересы аудитории и бизнеса пересекаются — ищем драйверы для создания оптимальных пользовательских сценариев.

Что именно мы изучаем:

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

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

Представление

predstavlenie.png
  1. Формируем концепцию будущего проекта, продумываем и создаем пользовательские истории.
  2. Разрабатываем информационную архитектуру и определяемся с функционалом системы.
  3. Продумываем пользовательские сценарии и особенности взаимодействия пользователей с интерфейсом.

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


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

Прототипирование

Prototipirovanie.jpg

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


Обычно для одного интерфейса разрабатывают несколько равноценных версий. В ходе A/B-тестирований, по результатам интервью и онлайн опросов выбираются решения, которые в большей степени соответствуют бизнес-задачам и потребностям аудитории.


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


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

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

Дизайн и разработка

Dizajn i razrabotka.jpg

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


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



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

Аналитика

Analitika.png

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


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


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

Итоговые выводы

  • Базовые принципы проектирования интерфейсов описаны в эвристиках Нильсена и в стандарте ISO 9241-110.
  • Проектирование осуществляется на трех уровнях: логика, функционал, графическое представление.
  • В процессе можно выделить 5 этапов: предпроектный анализ, представление, прототипирование, дизайн и разработка, аналитика.
  • Тестирование и проверка идей, теорий и решений — непрерывный процесс и начинается с того самого момента, когда у нас появляются первые скетчи и наброски прототипов.
  • Готовый интерфейс тестируется как с привлечением респондентов, так и средствами веб-аналитики на реальных пользователях — по итогам тестов формируется техзадание для его последующей доработки.

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


9481
Читать также