Разработка пользовательского интерфейса. С чего начинается работа, что важно не упустить

Эта статья предназначена для начинающих дизайнеров, product-менеджеров, которые впервые столкнулись с разработкой интерфейса (сайта, сервиса, приложения, портала и т.д.)
24 ИЮНЯ 2022

Зачем так много внимания к дизайну?

Если вы столкнулись с разработкой интерфейса, то вы скорее всего встречались с аббревиатурами UX/UI. Мы разберем их значение дальше. Но для начала нам важно узнать ответ на вопрос: "зачем столько внимания к дизайну интерфейса?"

За восемь лет, мне много раз приходилось объяснять смысл работы дизайнера. Пользовательский интерфейс - это внешний вид продукта, по другому UI (User Interface). Благодаря ему вы общаетесь с пользователем, доносите ценность продукта, прокладываете путь к нужному функционалу, делаете спец. предложения и м.д. Интерфейс влияет на прибыльность, доверие пользователя к приложению, сервису и т.д.

Сложно делать изменения дизайна интерфейса, когда продукт достиг PMF (Product Market Fit). В таком случае можно столкнуться с проблемами редизайна интерфейса, отрицательными отзывами, пользователи будут негодовать, что исчезли привычные кнопки или изменилась работа с часто используемым функционалом.

К примеру, соцсеть ВКонтакте. Вспомните старый дизайн соцсети. В 2016 году компания впервые выпустила обновленный дизайн на большой группе пользователей и столкнулась с отрицательными отзывами. Аудиторию для теста пришлось сократить и сконцентрировать усилия на доработке дизайна, а главное постепенном введении новинок.

Другие распространенные примеры в сети: Кинопоиск, Авиасейлс, Facebook, Авито и т.д. Компаниям после выпуска обновленного дизайна приходилось возвращать старый интерфейс обратно.

Об ошибках

Разберем частые ошибки на примере проекта, в котором я участвовал. B2B маркетплейс, который продает оптом продукты питания производителей из стран России, Европы и Азии. Целевая аудитория - отели, локальные магазины, небольшие производители. До моего появления в проекте команда сделала редизайн и доработку сервиса. Цель - улучшить метрики, следовать тенденциям моды в дизайне, привлечь новых пользователей за счет нового функционала.

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

Теперь об ошибках, которые совершила команда.

1. Не протестированы гипотезы

Команда решила доработать функционал совершения заказа и минимизировать количество совершаемых ошибок пользователем.

Гипотезы не проверили на пользователях и сразу оформили в задачи.

2. Не разработаны прототипы

Предложенное расположение элементов маркетплейса (кнопки, тексты, карточки товаров, акции и др.),по другому UX (User Experience), сразу передали команде разработки.

Но прототипы следовало сначала протестировать на пользователях, чтобы собрать мнения.

3. Не проведены интервью

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

От гипотезы до запуска

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

1. Анализ, общение с пользователями

На этом этапе появляются дополнительные сложные термины, но полезные в работе над продуктом: User Story, CJM, JTBD, User Flow и CustDev. О них я написал отдельные статьи, но здесь скажу только главную цель их использования.

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

Благодаря глубокому анализу мы начинаем чувствовать продукт, понимать какие изменения могут привести к улучшению метрик.

Также не забываем на этом этапе проводить интервью с пользователями нашего сервиса, выявлять ценности, новые инсайты и т.д.

2. Гипотезы

Анализ помогает нам разработать гипотезы, которые потенциально могут повлиять на ту или иную метрику.

Гипотезы нужно прорабатывать совместно с командой. Это тема требует отдельного изучения. Важно понимать, что у каждого члена команды есть идеи по улучшению продукта. Их следует выносить на обсуждение.

Проводим голосование, чтобы выбрать гипотезы, которые будем проверять на практике.

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

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

Можно найти примеры, когда команды рисуют прототипы от руки, кто-то использует Figma или другие сервисы.

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

4. Интервью

Прототипы нужно проверить на практике. По-другому это называется CustDev, когда мы дополнительно проводим интервью с пользователями. Тема объемная, поэтому я написал отдельную статью.

Благодаря проверке гипотез и дополнительному интервью мы возвращаемся в начало, пока наша идея не будет идеально продуманной.

5. Доработка

Мы проверили наши гипотезы на практике и оценили работоспособность идей. Теперь пройдем круг заново, но уже с выполненными доработками.

Таким образом, это экономит время разработчиков и деньги инвестора перед началом реализации гипотез. Мы концентрируемся только на тех гипотезах, которые максимально полезны для наших пользователей.

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

6. Стилизация или UI

На этом этапе у нас готовы проработанные прототипы проверенных гипотез. Теперь нужно их стилизовать, сделать понятными и привлекательными.

Сначала дизайнер разрабатывает концепции дизайна, чтобы также протестировать их. По собственному опыту, не нужно делать много концепций. Достаточно 3-х вариантов на 3-5 самых важных страницах или экранах сервиса.

Когда концепции протестированы и согласованы, дизайнер переходит к проработке всех страниц или экранов. Затем дизайн полностью тестируется еще раз (но не всегда, это зависит от продукта) и передается разработчикам.

7. Финализация

Далее разработанное тестируется на выделенной группе пользователей. Часто доработки проводятся без привлечения дизайнера. Однако у каждого продукта могут быть свои особенности на этом этапе.

Главное - когда все пользователи будут работать в новом интерфейсе, не забывайте анализировать продукт и следить за метриками.

Специальный бонус

Для тех, кто хочет стать дизайнером или стать экспертом в продуктовой разработке, у меня есть персональная скидка 55% от SkillBox. Переходите по ссылке и выбирайте те курсы, которые вам хочется пройти.

Важно! Чтобы скидка применилась, переходите только по моей ссылке: https://go.redav.online/25aa3dd89f8dccc1