Известно множество подходов к созданию эффективного дизайна веб и мобильных приложений. На наш взгляд, чем проще тем лучше. Потому в статье рассмотрим 4 основных шага в процессе разработки UX дизайна.
Успех проекта, в основном, зависит от его дизайна. Создать более красивый и полезный продукт всегда удается тем, кто работает над дизайном в команде с несколькими специалистами.
Что означает “эффективный дизайн”?
Чтоб создать эффективный дизайн приложения, мы должны понимать, что значит слово “работает”, если речь идет о дизайне приложений.
Дизайн приложения состоит из двух базовых компонентов – UI и UX. Что объединяет эти две составляющие? Ответ – пользователи. Если пользователи счастливы, значит дизайн “работает”.
Что включает в себя процесс создания дизайна приложения?
Создание дизайна приложения скорее похоже на окружность, а не на прямую линию. В нем преобладает цикличность.
Вы должны повторять несколько шагов раз за разом до тех пор, пока ваши пользователи не будут довольны. Этот бесконечный путь и можно назвать термином “UX дизайн“.
Как я могу создать UX дизайн?
Существует уйма подходов, алгоритмов и советов по UX дизайну.
- Одна из лучших американских студий дизайна использует подход, согласно которыму процесс состоит из 5 основных шагов:
- Сопереживание – Узнайте больше о своих клиентах и попробуйте представить себя ан их месте
- Определение – Сформируйте точку зрения на основе потребностей и взглядов клиента
- Воображение – Найдите несколько возможных решений
- Прототипы – Отобразите и презентуйте найденные решения
- Тест – Предоставьте свои прототипы пользователям, чтоб получит отзывПосле тестирования, вам нужно вернуться к этапу Воображение и начать новый круг с этой точки.
- Американский UX дизайнер Пол Херши также выделяет в рабочем процесс 5 этапов:
- Предварительное планирование
- Исследование
- Дизайн
- Контроль качества
- Отзывы
Оба подхода выглядят совсем простыми. Вы можете выбрать абсолютно любой из миллиона предложенных дизайнерами.
Но, так или иначе, все сведется к 4 главным составляющим UX дизайна:
Думайте
(поймите как сделать пользователя счастливым)
1. Проведите анализ покупателей
Кто является целевой аудиторией?
Каковы их интересы, нужды, привычки и образ жизни?
Зачем им нужно приложение вроде вашего?
2. Изучите рынок
Проанализируйте приложения конкурентов. Если вы создаете дизайн приложения, к примеру, для iPhone, но у вас есть конкурент с приложением для обеих платформ, изучите его варианты дизайна и для Android, и для iPhone.
Найдите эффективные и неудачные UX решения, использованные в этом продукте.
Проанализируйте также аудиторию конкурентного продукта – кто они, их потребности, а также выясните, для чего они используют приложения.
3. Проведите интервью с фокус-группами
Попросите дать рекомендации, узнайте, что им нравится и не нравится конкурирующих приложениях, и выясните, что они хотели бы видеть в своем идеальном приложении.
Используйте брифы, опросники и интерактивные мудборды.
Определите бизнес цели вашей целевой группы
Результатом вашего исследования должно стать создание “персонажа” или описание воображаемого пользователя вашего будущего приложения. Вы должны понимать их цели и пожелания. Базируясь на этих данных, вы должны создать историю пользователя. История пользователя – это коротенький сценарий, описывающий то, как именно пользователь взаимодействует с вашим приложением.
Теперь о самом дизайне
Создание
Как только вы собрали всю нужную информацию, можете приступать к макетам.
1. Прежде всего, набросайте черновой вариант структуры и навигации.
2. Создайте карту сайта для будущего приложения, которая отобразит стуктуру и логику продукта.
Пример карты сайта одного из запланированных проектов
3. Теперь, создайте детализированные схемы. Лучше всего их создавать с помощью графический редакторов вроде Sketch или Adobe Illustrator. Добавьте комментарии к каждому экрану и попробуйте отобразить логику настолько детально, насколько это возможно.
После того как схемы готовы, приступайте к созданию интерактивного макета:
- Сохраните все ваши экраны как отдельные фото
- Используйте InVision (или другой сервис) для создания интерактивного прототипа с возможностью переходов
- Продемонстрируйте свои прототипы
- Протестируйте
После того как ваши прототипы были протестированы и утверждены, можете приступать к визуализации:
- Подберите подходящий стиль, используя ранее собранную вами информацию (брифы, муд-борды, пожелания)
- Помните о разработчиках – используйте Zeplin or Avocode, чтоб делиться техническими особенностями проекта
Тест
Чем раньше вы начнете тестировать, тем лучше. Как только у вас появились текстовые схемы, вы можете начать тестировать их на пользователях. Вы должны использовать любую возможность, чтоб получить от них обратную связь. Попросите ваших коллег, родителей, друзей выполнить определенные задания с помощью ваших схем и посмотрите, что из этого получится.
Поделитесь интерактивными прототипами со всеми, кого вы знаете. Позвольте им хорошенько их протестировать. Продолжайте собирать отзывы даже тогда, когда вам кажется, что все идеально. Даже после того, как проект запущен, начинайте собирать аналитику и отзывы пользователей.
И наконец, вернитесь в самое начало: соберите информацию, анализируйте, думайте, создайте список правок. Повторите этапы со схемами, тестированием, дизайном, запуском, тестом, сбором инфо….
снова и снова: но когда же я могу остановиться?
Как много кругов вам нужно пройти, чтоб создать веб дизайн, который работает? Все!
Не существует такого понятия как “финальная версия дизайна”. В вашем продукте всегда есть что-то, что можно улучшить.
Рассматривайте ваш продукт как живое существо: оно должно развиваться, становиться лучше с каждой новой версией.
Можно и нельзя
Не пытайтесь исправить все ошибки за раз. Разработайте шаблон и пытайтесь исправить главные проблемы в более ранней версии. Тестируйте каждую вашу правку сразу же после применения.
Перевод статьи https://yalantis.com/blog/how-to-create-app-design-that-works/
