Статьи в блоге Праймсофт

Главная / Блог / Статьи / Информационные / Как правильно разработать UI. Экспресс аудит

Как правильно разработать UI. Экспресс аудит

При разработке приложений и сервисов вы помогаете определенной аудитории решить определенную проблему. Эта идея должна ложиться в основу проектирования и анализа UI-интерфейса любого продукта.

Ваши пользователи платят, заходят в приложение и выполняют определенные задачи. Если они придут в замешательство и не выполнят задачу, то они не вернутся. Если им не удастся достичь своей важной цели с помощью этих задач, то они не вернутся. Запомните: если у вас плохой UI, то вы потеряете деньги. 

Идеальный UI не должен мешать пользователям, пока они успешно выполняют свои задания и достигают целей.

В идеальном мире вы создаете стандартную страничку для продаж, убеждаете людей (собираете предзаказы или по крайней мере общаетесь с потенциальными покупателями), и только затем начинаете создавать свой продукт. В этом случае у вас должны быть ответы на следующие вопросы даже до того, как вы начнете своё приложение – это ваша домашняя работа по маркетингу. 

Концептуально, необходимо ответить на 4 вопроса о продукте:

1. Кто ваш идеальный пользователь (платящий клиент)?
В идеале, вы получить нечто большее, чем социальный портрет: вам нужно выяснить более определенную профессиональную роль и стадию бизнеса/жизни, через которую проходят ваши клиенты. Хорошим фактором является определенная программа, которую они сейчас используют. Они могут обратиться к вашему продукту как к лучшей альтернативе или удобному дополнению. Думайте об обстоятельствах, а не о характеристиках!

Хороший пример: «основатель независимого SaaS бизнеса, который обладает неплохим продуктом и стабильным MRR, хочет расти дальше с email-маркетингом. В настоящее время он использует MailChimp, но недоволен их автоматизацией». 

Плохой пример: «молодой, соображающий в технике парень» (Хотя технически это правда». 

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

Хороший пример: «найти потенциальных клиентов и превратить их в SaaS пользователей, продвигая их по воронке продаж». 

3. Какие основные задачи пользователь выполняет ежедневно, заходя в ваше приложение?
Что ежедневно делает пользователь на пути к своей цели? Перечислите конкретные процессы, процедуры и т.д.  Далее их нужно использовать для создания основы вашего приложения.
Безупречное, оптимизированное выполнение нескольких ключевых задач и отличает плохое приложение от хорошего. Вам потребуется приложить максимум усилий, чтобы сделать эти задачи приятными для пользователя (и задачи обычно приятны, когда они успешно выполняются).

Хороший пример: «создавать и рассылать email-кампании, устанавливать правила автоматизации».

4. С какими объектами работает пользователь?
Любой пользовательский интерфейс в мире упрощает задачи, но отображает он не их – он отображает контент (набор объектов). С какими объектами работает пользователь? Какие субъекты они создают и какими управляют, выполняя свои задачи? 

Хороший пример: «подписчики, email-кампании, правила автоматизации».

Перечислите ваши ключевые экраны

Перечислите ключевые экраны вашего приложения. Эти экраны – наиболее важные. Они помогают достижению целей вашей стратегии. Опустите остальную «сервисную область» вашего приложения: аккаунт, настройки, статистику, аутентификацию и т.д.

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

Составьте юзабилити список для каждого экрана

На идеальном экране должно быть 4 правильных вещи: 
  1. Один большой заголовок
    Где-то наверху вы должны четко обозначить, о чем же этот экран. Это может быть или название самого экрана (Дашборд, Клиенты, Детали продукта) или название объекта, который вы описываете (название продукта, имя клиента и т.д.)
    Одно из самых больших затруднений пользователя – это понять контекст того, что он видит. Большой заголовок определенно решает эту проблему. 

  2. Понятная навигация
    Пользователю должно быть понятно где он сейчас находится и как он может вернуться назад. В вашей области навигации четко определите активный элемент навигации и всегда сопровождайте его дополнительной кнопкой возврата с понятным текстовым описанием. «Вернуться к списку продуктов» гораздо лучше, чем просто «Назад» - становится понятно откуда пользователь пришел (и что случится, если нажать на эту кнопку). 

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

  3. Только один список объектов (или один объект) на экране
    На каждом экране должен находиться только один список объектов или только один объект, который вы описываете. Это сильно упрощает создание веб-приложения, его использование и конвертацию в мобильное приложение в случае необходимости. 

    Вне зависимости от размеров устройства, вы всегда можете использовать вертикальное пространство: это одно из самых беспроигрышных юзабилити решений. Но не смотря на это, есть одно «но» - это работает только в том случае, если контент однородный. 

    Когда пользователь видит заголовок и однородный список объектов, он точно подумает, что это всё, есть на этом экране. Если вы добавите важную информацию куда-то после этого списка, или добавите еще один такой, это могут никогда и не найти!  

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

    Есть конечно исключение из этого правила:
    • cложный софт, используемый на десктопах, где у пользователей традиционно большие мониторы – CRM системы, графические и инженерные приложения и т.д. (почти не используемые «в поле»);
    • наша прекрасная Панель управления или домашний экран (даже если традиционный дашбоард содержит монотонный список меньших элементов он только подтверждает правило);
    • ситуации, где ваш ключевой контент можно перетаскивать между двумя рабочими областями.

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

    Если по-простому, то каждый экран должен иметь одну большую зеленую call-to-action кнопку, которая направит действия пользователей. За ней, конечно, может стоять гораздо больше задач, но они должны быть спрятаны (за меньшими кнопками или встроенными ссылками).

Вопросы для самопроверки

 Возьмите лист бумаги, перечислите ключевые экраны вашего приложения. Для каждого экрана ответьте на 4 вопроса:
  • Какое название этого экрана? Достаточно ли оно большое и заметное?
  • Очевидно ли то, где вы находитесь? Как вы можете вернуться назад?
  • Какие объекты показываются на экране? Список объектов один (или объект один) на экране?
  • Какие задачи выполняет экран? Одна ли задача у вас для него?

Это должно дать вам новый взгляд на вашу программу. 



Источник: AppTractor