Нескучное руководство про интерфейсы, часть вторая

Продолжаем разбираться, как сделать эффективный интерфейс.

В закладки
​Автор оригинальной фотографии — @visuals

Март 2020-го. Паника. Гречка. Туалетная бумага. Интерфейсы. Стоп, почему интерфейсы? Потому что все сейчас сидят дома и используют накопленные запасы гречки и туалетной бумаги. А это значит, что фокус жизни смещается в онлайн. А там балом правят те, у кого хороший сервис и эффективные интерфейсы.

В первой части я рассказал вам о трёх постулатах эффективного интерфейса. Сегодня мы продолжим начатое и поговорим о том, как спроектировать этот самый эффективный интерфейс. Поехали!

Три типа интерфейса

Я выделяю три условных типа интерфейса. У каждого из них свои особенности.

№ 1. Продуктовый тип

Это то, что мы покупаем исключительно ради самого продукта. Word, Excel, какая-нибудь игра — всё относится к этому типу. Главная особенность здесь — потребности пользователя стоят во главе всего. Именно из-за них пользователь и отдаёт свои кровные. Продажа и весь маркетинг происходят вне продукта.

№ 2. Коммерческий тип

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

№ 3. Смешанный тип

Это когда мы даём пользователю что-то бесплатно, а за полный функционал просим отсыпать денег. В общем это то, что принято называть freeware. И тут главная особенность — не переборщить с давлением на пользователя. Иначе ваш продукт будет удалён и забыт.

Прицеливаемся

Независимо от типа интерфейса, в самом начале вам нужно определить глобальные цели пользователя. Например:

  • Быстро связаться с другим человеком (Telegram)
  • Сделать фотографию привлекательнее (Adobe Photoshop)
  • Закупиться туалетной бумагой с доставкой на дом (OZON)

На пути достижения пользователем этой цели и будет стоять наш интерфейс.

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

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

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

Давайте в качестве примера разберём цепочку необходимых действий для покупки товара в интернет магазине лет 15 назад и сейчас.

15 лет назад

  • Нужно зарегистрироваться.
  • Вводим почту.
  • Вводим пароль.
  • Вводим пароль ещё раз.
  • Выбираем контрольный вопрос.
  • Пишем контрольный ответ.
  • Выбираем контрольный вопрос.
  • Пишем контрольный ответ.
  • Выбираем контрольный вопрос.
  • Пишем контрольный ответ.
  • Жмякаем кнопку и ждём письмо с подтверждением.
  • Подтверждаем аккаунт.
  • Добавляем товары в корзину.
  • Оформляем заказ.
  • Вводим кучу данных.
  • Отправляем заказ.
  • Ждём когда нам позвонят, чтобы подтвердить заказ.
  • Ждём сам заказ, не совсем понятно сколько, так как и каких-то точных прогнозов доставки не было.

Наши дни

Я просто размещу тут скриншот уведомления, которое пришло мне в Wildberries.

То есть сейчас достаточно ввести номер телефона, ввести полученный код из SMS — и вы авторизованы. Далее оплачиваем заказ с банковской карты — вот вам и подтверждение заказа. Хотя оно уже и так необязательно. По вашему местоположению определяют адрес и затем вам выдают точную дату доставки. Удобно же!

Лучше один раз увидеть, чем сто раз услышать

Но вернёмся к нашим целям и действиям. Всё это добро нужно преобразовать в нечто графическое. А в идеале — ещё и кликабельное.

И в этом нет ничего сложного. Вы перерабатываете список действий в экраны вашего продукта. На этом этапе важно не тратить время на визуальную составляющую. Сейчас важно продумать весь пользовательский путь до цели. И сделать его максимально удобным.

Мой любимый инструмент для этого — MarvelApp. Там есть и встроенный редактор, в котором вы сможете быстро собрать прототип интерфейса из готовых компонентов, и возможность загрузить свои картинки и сделать кликабельный прототип. Вот как это выглядит.

​Шаг №1. Создаём проект.
​Шаг №2. Добавляем экраны.
Шаг №3. Собираем экран во встроенном редакторе.​
Шаг №4. Переходим в режим создания прототипа.​
Шаг №5. Перелинковываем экраны с помощью кликабельных областей.​
Шаг №6. Тестируем кликабельный прототип.​

Вот и всё. Если вдруг вы не фанат онлайн-сервисов — для этих же целей можете использовать Axure.

Сделал выводы

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

Вот и подошла к концу вторая часть. Ставьте плюсы — для меня это индикатор того, нужны ли здесь подобные материалы. И подписывайтесь, чтобы не пропустить новые статьи. А впереди у нас финальная третья часть, в которой мы разберём, как сделать визуально привлекательный интерфейс, при этом не потратив на это кучу денег. Увидимся!

Постскриптум

Я хочу запустить новую услугу — UI/UX-аудит. На рынке много компаний и специалистов предлагают аудит юзабилити, но мало кто предлагает ещё и визуальный аудит. Я хочу объединить эти две услуги и сделать всё это доступным даже для малого бизнеса.

Формат — скринкаст с разбором, pdf-презентация со всеми рекомендациями и какие-то макеты, если они потребуются. Я хочу собрать несколько кейсов, поэтому мне нужны добровольцы, у которых уже есть прибыльные коммерческие сайты или приложения.

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

Жду ваших заявок в комментариях ниже или на сайте :)

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Евгений Романченко", "author_type": "self", "tags": ["\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","ux"], "comments": 4, "likes": 2, "favorites": 30, "is_advertisement": false, "subsite_label": "design", "id": 113069, "is_wide": false, "is_ugc": true, "date": "Wed, 18 Mar 2020 11:31:36 +0300", "is_special": false }
0
4 комментария
Популярные
По порядку
0

Зачем идти в MarvelApp, если можно в figma

Ответить
0

В основном из-за быстродействия. Прототипы в фигме жутко глючат и тормозят. Ну и в марвеле много полезных фич.

Ответить
0

Почему не Invision? 

Ответить
0

Тут личные предпочтения — я как-то сразу подсел на него. А в целом, Marvel дешевле и проще.

Ответить

Прямой эфир