11 шагов между вами и идеальным продуктом
Мобильный разработчик Вадим Дробинин написал для «Нетологии» колонку, в которой поделился советами по созданию идеального продукта.
Интерфейсы окружают нас абсолютно везде и, разумеется, бывают удобными и неудобными.
Графические интерфейсы в большинстве своем идиоматические. Вспомните ваше первое знакомство с компьютером: окна, заголовки, кнопки закрытия и раскрывающиеся списки Все эти идиомы необходимо изучать; хорошую идиому достаточно изучить всего один раз.
Как думаете, какой из этих интерфейсов лучше? На какой плите будет проще сварить пельмени, если вы ее впервые видите?
Вам, разумеется, виднее, каким должен быть продукт. Вы вложили в него и время, и деньги, и силы. Но проблема в том, что вы — не пользователь.
Вам никогда не понять той душевной боли, которую испытывает человек, впервые столкнувшийся с непонятными значками на экране. Чтобы облегчить эту боль, обычно нанимают продуктового дизайнера, юзабилити-аналитиков и проектировщиков пользовательских интерфейсов. Давайте посмотрим, можем ли мы что-то сделать сами, за одиннадцать шагов спроектировав мобильное приложение (хотя абсолютно те же принципы можно применять в любой сфере — начиная с веб-сайтов и заканчивая проектированием газовых плит).
Шаг 1. Проанализируйте предметную область
Представим, что мы создаем новое революционное приложение для учета расходов и доходов малого бизнеса.
Что нам нужно для этого узнать? Как минимум — вспомнить азы бухгалтерского учета, отличия между сальдо, кредитом и дебетом, подумать о будущей статистике расходов. Анализ предметной области не должен быть очень обширным, достаточно просто быть в курсе дела.
Шаг 2. Определите целевую аудиторию
Кто является целевой аудиторией продукта? Все ли пользователи мобильных телефонов? Люди, которые часто тратят? Те, кто хочет тратить меньше? Разберитесь с этим сразу, и в будущем не придется в панике подбирать параметры таргетированной рекламы, переделывать функциональность или хоронить свой проект еще на этапе тестирования.
Шаг 3. Выявите группы пользователей
Подумайте, как можно сгруппировать целевую аудиторию. Это может быть деление на корпоративных клиентов и частных пользователей. У разных групп будут различия в их требованиях и необходимых возможностях программы.
Целевую аудиторию финансового трекера можно разделить, например, вот так:
Шаг 4. Для каждой группы выявите характеристики, которые могут повлиять на итоговый дизайн
Задумайтесь, что движет вашими пользователями. Что их беспокоит и как это исправить. Не становитесь жертвой стереотипов: бизнесмену не обязательно показывать расходы с точностью до копеек, а для школьника старших классов еще не так актуальна возможность вести семейный бюджет.
Как думаете, на что повлияют подобные характеристики? Ответ ниже.
Шаг 5. Поймите, какие задачи важны пользователю каждой из групп и как часто он будет их выполнять
Нельзя реализовать всю задуманную функциональность сразу, нельзя разместить на маленьком экране абсолютно все необходимые кнопки. Поэтому очень важно сразу расставить приоритеты.
Из этого можно сделать вывод, что фильтрация статистики явно не будет находиться на основном экране, как и создание нового бюджета.
Шаг 6. Спроектируйте взаимодействие между группами пользователей
В какой-то момент ваши пользователи могут изменять свои роли. Продавец в интернет-магазине может и сам покупать товары, а водитель Uber иногда заказывает такси. Подумайте, где и как вам лучше проложить тропинку, связывающую группы.
Шаг 7. Для каждой группы спроектируйте деятельность конкретного пользователя
Подумайте, какие шаги пользователь будет выполнять внутри системы. Если я зафиксировал свои расходы, то открываю приложение, выбираю опцию «Добавить расходы», указываю сумму, местоположение, категорию и комментарий, а потом выбираю опцию «Отправить».
Важно заметить, что на этом этапе еще нельзя оперировать элементами интерфейса, задумываться о расположении кнопок и так далее. Спроектируйте такую последовательность конкретных шагов для всех доступных задач.
Шаг 8. Упрощайте!
Для всех задач стоит понять, какие шаги можно автоматизировать, а какие пользователь должен выполнить самостоятельно. Ввод имени и фамилии, регистрацию посредством электронной почты и пароля, выбор аватарки и так далее можно заменить на автоматическую авторизацию через Facebook или «ВКонтакте».
Шаг 9. Организуйте экраны
Когда вы окончательно определились с тем, что и на каком этапе сможет делать пользователь, организуйте сами экраны и распределите информацию и функциональные элементы между ними.
Макеты экранов можно сделать в чем угодно. Мои личные фавориты — Sketch и Keynote.
Шаг 10. Оцените пользовательский интерфейс
Тестирование пользовательских интерфейсов — тема для отдельной статьи. Почитайте про карточные сортировки, тестирование ожиданий и «мысленный прогон». Оцените, насколько быстро ваши пользователи находят нужную информацию и радует ли их процесс.
Якоб Нильсен в своей статье «A mathematical model of the finding of usability problems» еще в 1993 году доказал, что 15 тестеров достаточно, чтобы исследовать 99.9% юзабилити-проблем.
Шаг 11. Не забудьте про эстетическую составляющую
Графический дизайнер, как уже можно было догадаться, подключается на самом последнем этапе проектирования. Везунчик.
Заключение
На этом все. Проектирование пользовательских интерфейсов, как и UX/UI-дизайн в целом, теперь не должны вас пугать.
Идите, дети мои. Идите и не грешите.
Мнение автора может не совпадать с мнением редакции. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
Полный текст статьи читайте на Нетология
