Как избежать ошибок и сделать рабочее приложение?

13 октября Макс Зайцев, CEO студии Digital Lab, выступал на конференции «Электронная торговля 2023» с темой «Как делать рабочее мобильное приложение. Типичные ошибки UX/UI, UX Writing». Эта тема кажется очень важной и нужной, поэтому мы решили обернуть выступление еще и в статью.

DL.Studio создает креативные игровые механики, сайты и приложения. У нас за плечами огромный опыт разработки и еще больше аудита. Мы часто видим одни и те же ошибки, которые портят взаимодействие с брендом. Хотим поделиться примерами, объяснить на пальцах «хорошо» и «плохо», чтобы вы могли легко избежать таких ошибок в будущем. Материалы собирали из опыта студии силами CEO Digital Lab Макса Зайцева и ведущего дизайнера Славы Толстолыткина.

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

Слава отрисовал нам все интерфейсы с нуля, так что никакой связки с реальными брендами в этой статье не будет!

Неважно, клиент вы, или подрядчик — эти вопросы вам необходимы на первом этапе работ.

1. Что мы хотим?

Изучаем и/или определяем бизнес-задачи.

2. Кто наша аудитория?

Определяем ЦА, с кем мы говорим, для кого делаем продукт.

3. Чего она хочет?

Составляем Customer journey map — маршрут нашего потребителя. Как пользователь попадет на сайт/в приложение, откуда придет, за какими продуктами/услугами, что повлияет на принятие решения и тд.

4. Как мы можем решить все эти задачи?

Определяем разные пути решения бизнес-задач.

Когда ответим на все эти вопросы, сможем нарисовать User flow — последовательность действий, которые пользователь выполняет для достижения своей цели. Он может охватывать как какую-то отдельную фичу, так и весь продукт целиком.

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

И, разумеется, про Tone of voice — язык, на котором бренд разговаривает со своей аудиторией. Этот язык уникален для каждого бренда и является частью его ДНК, поэтому нам важно сохранять его при взаимодействии с пользователем в мобильном приложении.

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

Тут опираемся на 4 правила (или характеристики) вашего текста:

Для наглядности приведем самый простой пример — сообщение об ошибке.

Как сделать так, чтобы продукт, который вы придумали дошел до нужной аудитории и оказался в поле ее зрения?

1. Операционные системы — посмотрите, какие ОС популярны у вашей ЦА и обеспечьте их приоритетную поддержку.

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

3. Доступность — приложение должно оказаться не только в популярных, но и в альтернативных сторах. Например, RuStore или AppGallery.

4. User experience — само собой, очень важно внедрение актуального пользовательского опыта.

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

1. Масштабируемость

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

Дизайн может помочь не потерять пользователя, дав понятную логику и структуру приложения. Визуал тоже должен работать на удержание: от цветов до размера блоков, кнопок и текстов.

Созданный дизайн должен быть масштабируемым — предусматривать возможность будущих изменений и места для них.

2. Консистентность и планирование композиции

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

Упрощает? Конечно, посмотрите сами:

3. Доступность ознакомления с возможностями

Не пугайтесь названия: тут про четкий user flow. Следим за тем, чтобы пользователь сразу же мог ознакомиться с контентом/фичами, которые мы предлагаем ему в рамках приложения. Думаем над удобной навигацией. И про первое соприкосновение — сбор данных, онбординг и мотивацию.

Сейчас покажем на примере.

4. Приоритетность функциональностей и эргономика

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

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

5. Своевременность

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

Посмотрим пример?

6. Принцип достаточного количества

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

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

1. Мобильное приложение — это часть бренда, а не какой-то отдельный продукт.

2. При его создании необходим комплексный осознанный подход.

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

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