Как разработать простой пользовательский интерфейс, если у вас сложное решение

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

Что они говорят? Сложные проблемы требуют сложных решений? Это, безусловно, верно при разработке приложений и программного обеспечения.

Но как вы гарантируете, что сложный бэкенд не просачивается во внешний интерфейс?

Сложный пользовательский интерфейс, как правило, является более чем достаточной причиной для того, чтобы многие люди отказались от веб-сайта или мобильного приложения. Однако когда дело доходит до платных или подписанных пользователей, не ожидайте, что кто-то из них согласится на сложный интерфейс вашего программного обеспечения.

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

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

Как разработать простой пользовательский интерфейс для сложного решения

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

Итак, как Flatfile смог добиться этого? Сам по себе процесс загрузки данных может быть сложным — необходимо брать данные из различных источников, типов файлов и пользователей, а затем преобразовывать их в полезные данные внутри приложения. Заставить пользователей подготавливать, проверять и дезинфицировать свои данные во внешнем интерфейсе — тоже непростая задача.

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

1. Выясните цели ваших пользователей, чтобы вы могли разработать пользовательский интерфейс

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

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

Instagram недавно обновил верхний и нижний колонтитулы своего давнего интерфейса. Вот как выглядел заголовок до и после ноября 2020 года:

Более ранний дизайн содержит два символа/действия:

• Значок камеры для съемки или загрузки фотографий.
• Значок Messenger для общения с контактами.

В последнем дизайне все значки повернуты вправо. Сейчас их три:

• Символ плюса для создания постов, историй, роликов и жизней в Instagram.
• Символ сердца для просмотра активности (т. е. публикации, новые подписчики и т. д.).
• Значок Messenger сохраняет тот же дизайн и расположение.

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

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

• Ссылка на ролики в Instagram, функция, которая действует аналогично TikTok (и, возможно, увеличивает зависимость от платформы).
• Ссылка на покупки в Instagram, функция, которая позволяет пользователям делать покупки в популярных магазинах (а не в тех, за которыми они активно следят).

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

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

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

«Цель пользователей Flatfile — беспрепятственный импорт данных своих клиентов. Пользователям Flatfile необходимо перемещать данные из одного программного продукта в другой, и этот процесс должен быть максимально простым, потому что это один из первых продуктов, с которым сталкивается новый клиент, — импорт своих данных».

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

2. Оцените продукты конкурсов, чтобы создать свой MVP

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

Это то, что сделал Flatfile. Wiafe объясняет ценность MVP:

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

Тем не менее, откуда вы знаете, насколько минимальным должен быть пользовательский интерфейс вашего MVP? Потому что есть огромная разница между минимальным и непригодным.

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

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

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

Давайте представим, что вы создаете программное обеспечение платежного шлюза. Вы можете начать с Stripe:

И 2Оформить:

Я удалил все данные с этих панелей и оставил только основные компоненты, навигацию и метки. Какие общие темы мы видим между двумя пользовательскими интерфейсами?

• Панель поиска рядом с центром заголовка,
• Ссылка на настройки пользователя или информацию об учетной записи в правом верхнем углу,
• Выровненная по левому краю панель управления, занимающая от ⅙ до ⅕ страницы,
• Данные представлены в автономных блоках,
• Нейтральные шрифты без засечек, используемые для маркировки,
• Цветовой контраст минимален и существует только на панели инструментов для обозначения выбранных вкладок или для различения наборов данных.

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

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

Одна вещь, которую предлагает Wiafe, — не относиться к вашему MVP строго как к каркасу:

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

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

3. Вводите сложность постепенно и подтверждайте с помощью пользовательского тестирования

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

Вы размещаете заказ в 20:00. Приложение сообщает, что ресторан подтвердил заказ через несколько секунд, и около 8:45 еда будет у вас. В 8:40 вы открываете приложение, чтобы увидеть, где на карте находится курьер, и удивляетесь, почему он не двигается. Или, что еще хуже, почему они движутся в неправильном направлении. Ваш желудок начинает урчать, и вы жалеете, что не взяли заказ сами.

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

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

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

Была ли эта функция абсолютно неотъемлемой частью успеха приложений для доставки? Если это приводит пользователей в бешенство до такой степени, что они сталкиваются с большим количеством жалоб на обслуживание клиентов, возмещением заказов или оттоком пользователей, то нет, это не так.

Вот почему сложность должна вводиться в ваш MVP постепенно и полностью интегрироваться только после того, как пользовательское тестирование подтвердит, что это полезное дополнение.

Как объясняет Виафе:

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

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

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

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

Подведение итогов

Чтобы создать приложение, которое будут использовать ваши клиенты, вы должны на самом деле дать им то, с чем они могут работать, а не что-то, что требует от них обращения в службу поддержки клиентов за помощью каждую неделю. Или это заставляет их задаваться вопросом, почему они используют что-то, что вызывает у них больше стресса и разочарования, чем раньше.

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