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

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

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

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

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

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

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

Анализ

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

1. Потребности бизнеса: для чего создается проект, какие бизнес-задачи он должен решать, как будет монетизироваться в дальнейшем.

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

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

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

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

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

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

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

1. Формируем концепцию будущего проекта, продумываем и создаем пользовательские истории.

2. Разрабатываем информационную архитектуру и определяемся с функционалом системы.

3. Продумываем пользовательские сценарии и особенности взаимодействия пользователей с интерфейсом.

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

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

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

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

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

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

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

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

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

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

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

Важно: Почему тестирование — это постоянный и непрерывный процесс, а не разовая акция?

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

Аналитика

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

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

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

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

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

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