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

Для кого эта статья:

Данная статья актуальна для заказчиков дизайна и начинающих
дизайнеров.

О чем эта статья:

В статье кратко описываются шаги работы от идеи до релиза.

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

Работы над дизайном интерфейса можно разделить на несколько этапов: Чтобы интерфейс эффективно помогал пользователям добиваться своих целей, он должен обладать следующими характеристиками:
— Сбор требований и анализ;
— Разработка схемы приложения (wireframing);
— Визуальный дизайн;
— Прототипирование;
— Анимация интерфейса;
— Style guide (гид по стилю).

Сбор требований и анализ

Данный этап можно разделить на несколько шагов:
— Заполнение брифа;
— Определение основных функций продукта и анализ конкурентов;
— Составление пользовательских сценариев.

Заполнение брифа

Бриф - анкета с основными вопросами по проекту которая позволит собрать:
— Информацию о бизнесе или деятельности заказчика;
— Первичные сведения о конкурентах;
— сведения о целевой аудитории;
— пожелания по визуальному оформлению и функционалу приложения;
— и т.д.

Определение основных функций продукта и анализ конкурентов

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

Пользовательские сценарии

Когда дизайнер имеет достаточно информации о будущем продукте, необходимо продумать пользовательские сценарии, которые может выполнять пользователь в рамках интерфейса - то как он будет взаимодействовать с интерфейсом. Для этого описываются все шаги которые необходимо предпринять для достижения цели. Например: нажать на кнопку “войти”, авторизоваться, выбрать товар, посмотреть информацию о нём, совершить оформление заказа и т.д. После того как будет составлен список всех шагов для каждой задачи, мы сможем понять насколько быстро и удобно пользователь достигает цели в рамках работы с интерфейсом. После тщательно продуманных пользовательских сценариев можно приступать к работе над вайрфреймами (схематическое отображение страниц).

Разработка схемы приложения (wireframing)

Данный этап позволяет выявить скрытые, на первых этапах, особенности работы приложения и недостатки, что в дальнейшем сэкономит время работы над ним, а соответственно и стоимость. Хорошо продуманный продукт начинается со схемы его структуры, на основе которой создается макет сайта. На данном этапе также продумывается пользовательский интерфейс и функционал сайта. Существуют два типа вайрфреймов:
— low-fidelity wireframes;
— High-fidelity wireframes;

Low-fidelity wireframe

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

High-fidelity wireframe

Результатом данного этапа является схематическое отображение всех страниц с полной детализацией всех блоков с учетом всех отступов и размеров.

Визуальный дизайн

После сбора требований и анализа начинается работа над визуальным дизайном. Обычно презентуются 2-3 концепта. Часто итоговый результат является комбинацией нескольких представленных концепций. На данном этапе объединяются все предыдущие стадии. Прототипы оборачиваются в уникальный визуальный стиль и подход к коммуникации, наполняются контентом и продукт обретает свой финальный вид. Хорошей практикой является командная работа дизайнера и разработчиков, это позволяет получить оптимальный результат для дальнейшей разработки. Работы над визуальным дизайном начинаются с главной страницы. Когда главная страница готова и утверждена найденное визуальное решение тиражируется на остальные страницы и начинается проработка деталей: отрисовка иконок, заказ фото и видеосъемки (в случае необходимости), подготовка контента.

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

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

Анимация интерфейса

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

Style guide

Style Guide - это набор правил который регламентирует использование элементов интерфейса для будущего изменения/расширения проекта. Style Guide важный заключительный этап разработки дизайна интерфейса нового продукта. Гайд должен описывать использование: элементов управления (кнопки, радиобаттоны, чекбоксы…), форм, типографики, отступов между элементами и др.