Главная страница

Проектирование и дизайн интерфейсов: гайд для тех, кто хочет разобраться

Базовые требования к интерфейсу сформулированы Якобом Нильсеном в виде 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 этапов: предпроектный анализ, представление, прототипирование, дизайн и разработка, аналитика.
  • Тестирование и проверка идей, теорий и решений — непрерывный процесс и начинается с того самого момента, когда у нас появляются первые скетчи и наброски прототипов.
  • Готовый интерфейс тестируется как с привлечением респондентов, так и средствами веб-аналитики на реальных пользователях — по итогам тестов формируется техзадание для его последующей доработки.

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

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 1 оценок, средняя: 3.3 из 5 )

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

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать
Блог
Для заказчиков
Для асессоров
Каталог разработчиков
О сервисе
Партнерская программа
Пресса
Контакты
Сделано с  StudioF1  в Студии F1

AskUsers.ru © Copyright 2015 г.

Регистрация
Буду проводить исследования
Буду тестировать сайты
Необходим для подтверждения регистрации и восстановления пароля

Если у вас уже есть аккаунт, воспользуйтесь формой входа

Восcтановления пароля

Если вы забыли пароль, введите ваш E-Mail.
Контрольная строка для смены пароля, а также ваши регистрационные данные, будут высланы вам по E-Mail.



Если у вас уже есть аккаунт, воспользуйтесь формой входа

Войти в личный кабинет
Забыли свой пароль?

Если у вас ещё нет аккаунта, зарегистрируйтесь прямо сейчас