Создание работающего дизайна во многом зависит от правильного процесса проектирования пользовательского опыта. И не важно, идет ли речь о продукте в целом или о его части.
Не стоит сразу запускать графические редакторы и пытаться сделать красиво. Красиво может и получится, но будет ли продукт работать так, как нужно? Чтобы исключить логические ошибки в приложении и достигнуть максимального взаимопонимания с пользователем, я рекомендую начинать работу с этой дорожной карты.
Пройдя эти шаги один за другим, вы значительно приблизитесь к действительно удобному дизайну.
1. Проанализируйте конкурентов
Чтобы не изобретать колесо — проанализируйте решения ваших конкурентов на рынке. Детально изучите лучших из лучших в своей нише, посмотрите, как они решают задачи и возьмите это себе на заметку.
2. Изучите целевую аудиторию
Поймите, для кого вы разрабатываете продукт. Определите, кто эти люди, какие у них привычки, что их раздражает, а что наоборот — приводит в восторг. Согласитесь, нельзя быть одинаково хорошим для домохозяек и подростков-бунтарей. У всех разное мировоззрение, которое влияет на их поведение.
Обратите особое внимание на возраст пользователя, его социальное положение, доход и стиль жизни. Для примера посмотрите на себя: что влияет на ваше поведение, платежеспособность и образ мысли? Что для вас важно в продукте и почему? Часть пользователей, будучи перфекционистами, скорее выберут более эстетичный продукт, даже в ущерб его функциональности.
3. Создайте персонажей
Метод, конечно, спорный. В то время, как одни поддерживают такой подход, другие выступают против, считая, что это лишняя трата времени. Я отношусь скорее к числу первых. Создав персонажей, вы обобщите и сгруппируйте данные, полученные во втором пункте. Тем самым сэкономите время на разбор неструктурированной информации.
Вкратце метод выглядит так. Вы создаете вымышленных типичных пользователей продукта с присущими им целями, задачами и потребностями. В процессе работы задавайте себе вопрос: будет ли такое решение удобно для пользователя 1? Захочет ли купить продукт пользователь 2?
Пример портрета пользователя
4. Продумайте сценарии использования
Крайне важный пункт для создания действительно удобного и работающего дизайна. Не стоит пренебрегать пользовательскими сценариями, ведь уже на этом этапе вы можете оценить удобство решения, которое сформировалось в вашей голове. Опишите каждый шаг, который придется сделать пользователю, прежде чем он достигнет своей цели. Естественно, чем меньше этих шагов — тем лучше.
Пример пользовательского сценария
5. Обсуждайте решения с командой
Обсудите с командой данные, полученные на прежних этапах. Посмотрите вместе на решения конкурентов. Решите, правильно ли очерчена целевая аудитория и соответствуют ли ей созданные персонажи. Запаситесь стикерами, маркерами, кофе и терпением. У ваших коллег может быть совсем другой взгляд, и это очень даже хорошо. Обсуждайте, спорьте и помните: в споре рождается истина.
6. Создайте предварительный прототип
Подытожьте предыдущие шаги, собрав предварительный прототип. Почему предварительный? Потому что он может еще не раз поменяться в процессе работы.
Не пытайтесь сделать прототип красивым. Добавляя цвета и выдерживая отступы между элементами, вы отвлекаетесь от основной задачи — проработки удобства взаимодействия. Ваши лучшие друзья на этом этапе — скучные серые блоки разных размеров и неаккуратные отступы. Лучше всего воспользоваться блокнотом и карандашом.
7. Создайте интерактивный прототип
Создайте кликабельный прототип вашего будущего дизайна. Помните, я говорил, что предварительный прототип может еще не раз поменяться? Все его изъяны всплывут как раз на этом этапе.
Выберите удобный для себя инструмент. Лично я использую Axure, потому что его возможности практически безграничны. Но существует множество более дешевых и простых в использовании аналогов, таких как Marvel и MockingBot.
8. Создайте предварительный UI
Можно наконец-то открывать графический редактор и рисовать красивый интерфейс. Основывайтесь на ранее полученных данных и не отклоняйтесь от финального варианта вашего интерактивного прототипа. Придерживайтесь фирменного стиля, чтобы не превратить продукт в Франкенштейна. Соблюдайте иерархию цветов и шрифтов. Помните про общую идеологию продукта. Если вы работаете в Sketch — пользуйтесь символами. Они не только помогут сохранить целостность дизайна, но и ускорят работу над UI. Когда не можете определиться, какая кнопка будет работать лучше — красная или зеленая — сделайте несколько вариантов для дальнейшего A/B-тестирования.
9. Помните о гаджетах
Если какая-то функция или приложение полностью может быть перенесено на умные часы или другое устройство — предусмотрите дизайн и для них. Сделайте пользователя вашего приложения счастливее.
Shazam и Evernote отлично справились с задачей и перенесли большую часть функционала на Apple Watch.
10. Проработайте микровзаимодействия
Уделите особое внимание микровзаимодействиям: анимация должна быть осознанная и уместная, а жесты интуитивны и привычны. Все же привыкли обновлять данные в приложении просто потянув пальцем сверху вниз? Или ставить лайк двойным касанием по фото? Придерживайтесь уже известных и привычных жестов. Не заставляйте пользователя думать и разбираться, как и что работает.
11. Контент — всему голова
Все UI-элементы должны подписываться предельно понятно и недвусмысленно. Называйте кнопки и действия привычными словами (если, конечно, у вас не тематическое приложение для узкой аудитории). Также позаботьтесь о мультиязычности продукта. Если большая часть вашей целевой аудитории — китайцы, будет странно не включить этот язык в список поддерживаемых.
12. Подключите метрики
Подключите к продукту инструменты для аналитики всего, что только возможно — данных много не бывает. Вы можете отслеживать прохождение пользователем задуманных вами сценариев, что их прерывает, а что наоборот — помогает достигнуть цели. Google Analytics, Flurry и Fabric помогут отслеживать множество метрик приложения.
13. Тестируйте в процессе…
Если на ранних этапах у вас было несколько гипотез — подготовьтесь к A/B-тестированию, чтобы понять, какое решение работает, а какое еще требует проработки. Зачастую красивые и интересные решения уступают в эффективности простым и очевидным. Хороший пример — глобальный редизайн Instagram.
Ярким примером может послужить Instagram, с их глобальным редизайном. Приложение лишилось пестрости, стало условно черно-белым и во многом упростилось, при этом став заметно удобнее и приятнее.
14. …и перед релизом
Проведите финальное тестирование продукта или отдельного решения перед публичным релизом. Возможно, вы не доглядели то, что заметят ваши коллеги из отдела тестирования. Доработайте известные слабые места перед запуском.
15. Создайте дорожную карту развития вашего продукта
Нельзя достигнуть идеала, к нему можно только стремиться. Составьте план того, как вы будете улучшать свой продукт, используя данные метрик и отзывы пользователей. Постоянно работайте над улучшением определенных решений, проверяйте гипотезы, тестируйте и стремитесь к взаимопониманию с пользователем.
Работа над продуктом требует постоянного анализа, грамотного подхода и соблюдения процесса его создания. По мере обрастания вашего продукта новыми функциями — вы не раз вернетесь к дорожной карте, чтобы пройти этот процесс заново.