При создании мобильного приложения важную роль играет его дизайн. Именно он цепляет внимание пользователя. Чтобы привлечь и удержать внимание человека, нужно продумать: внешний дизайн, структуру, удобство пользовательского интерфейса (конкретно UX и UI) и другие детали. Разработка дизайна для приложения — это трудоемкий процесс, который часто оказывается сложнее, чем подготовка макета для сайта.
В среднем, дизайн мобильного приложения занимает от недели до 1 месяца. Если в приложении подразумевается множество уникальных экранов, то разработка может длиться более 1-го месяца.
Этапы дизайна приложения
Процесс разработки мобильного приложения состоит из следующих этапов:
- Определение цели, погружение в идею, определение целевой аудитории;
- Проектирование User Flow (переход пользователя от одного сценария действий к следующему);
- Отрисовка прототипов, подготовка набросков того, как будут выглядеть экраны;
- Тестирование набросков(проверяем, насколько они понятны, насколько логичны переходы между экранами);
- Подбор подходящей цветовой гаммы;
- Подготовка дизайн-макета приложения;
- Тестирование на этапе макета (проверяем, насколько понятны экраны);
- Создание интерактивного прототипа и его тестирование. Обычно этот этап нужен, если есть сложные сценарии в приложении, и вы хотите удостовериться, что спроектировали их удобно и понятно для пользователей
- Подготовка макета к разработке (нарезка графики, описание элементов интерфейса и их поведения);
- Проверка верстки, программирования.
После каждого этапа тестирования зачастую приходится что-то доработать или даже в корне переделать. Т.е. происходит откат на предыдущие этапы. Это абсолютно нормально! Ведь таким образом вы устраняете ошибки на этапе дизайна, ещё до того, как за дело взялись разработчики. А это значит, что вы экономите свои ресурсы (время разработчиков и оплату за него).
Принципы дизайна
Мелочей не бывает! И это утверждение про дизайн. Все должно быть продумано: как выглядит экран, если контент не загрузился или загрузилась часть. Как отображается страница, если отключился интернет и т.д.
Детали:
Первое впечатление и обучение пользователя
Onboarding или walktrough — это механизм создания первых впечатлений о приложении у пользователя.
Рекомендуем знакомство пользователя с приложением начинать с onboarding. Он формирует восприятие пользователя к продукту от первого контакта (открытие первого экрана) до момента целевого действия (например, оплаты). Все должно быть максимально легко и комфортно.
Подходов к onboarding много. Наиболее распространённые:
Стартовые экраны.
Один или несколько экранов, которые показываются при первом использовании приложения. Они содержат короткую инструкцию / презентацию, где написано, как пользоваться сервисом (обучение). Предоставляет максимум информации по управлению приложением в сжатом объеме. Все уже привыкли к такому подходу и зачастую пользователи пропускают эти экраны, не вчитавшись в них. Поэтому если делать стартовые экраны, то захватить внимание пользователя нужно с первого экрана!
Реализация онбординга нужна для конкретной задачи. Не применяйте просто красивые картинки. Создайте эту мини-презентацию исходя из поставленных целей и задач. Другими словами, научите пользователя делать то, для чего создано ваше приложение.
Контекстные подсказки
Смысл в том, что подсказки появляются постепенно по мере того, как пользователь проходит сценарий. В проектировании и реализации этот подход может быть сложнее, но выглядит органичнее и пользы несёт больше.
Детали в дизайне приложения
Сделайте акцент на важных кнопках. Например, кнопку «заказать» нужно сделать больше и заметнее, чем кнопку «подробнее», которую можно оставить просто ссылкой.
Задавайте шрифт правильно. Некоторые компании применяют для каждого мобильного приложения разные шрифты. Для пользователя это не всегда удобно. К примеру, в его смартфоне может не оказаться задуманного вами шрифта. Как приложение будет работать в этом случае? Идеально использовать функцию «использовать дефолтный шрифт» (по умолчанию).
Количество действий / переходов в приложении
Оцените, есть ли в приложении лишние действия? Если есть, от них лучше отказаться. Дизайнеры нашей компании, при разработке сайта, приложения или программы, всегда проверяют продукт на наличие лишних действий. Проще говоря, если пользователя можно привести к оформлению заказа в 3-и действия вместо 7-ми, то лучше так и сделать.
Разница между UX и UI дизайном приложений
Фундаментом разработки приложения, программы или сайта, всегда является UX и UI дизайн. Эти две составляющие влияют на весь рабочий процесс в целом.
UX-дизайн (User eXperience, в переводе с англ. «пользовательский опыт») — если образно, то это дорога, которую пройдёт пользователь, чтобы достигнуть своей цели. Здесь важно всё: удобство, красота этой дороги, отсутствие кочек и ям на ней.
Если с удобством и логикой построения экранов все в порядке, то можно переходить к разработке визуальной части мобильного приложения. То есть, к UI-дизайну.
UI-дизайн (User Interface, в переводе с англ. «пользовательский интерфейс») — это уже более детальная проработка каждого экрана. Когда мы поняли, какую хотим сделать дорогу, то подключается UI-дизайн: мы продумываем, какое покрытие этой дороги сделать, какие клумбы посадить, чтобы дорогу украсить.
Довольно сложно провести чёткую грань между UX и UI. UX – это, скорее, более общее и высокоуровневое понятие, которое включает в себя UI-дизайн. Но наверняка есть дизайнеры, которые с нами не согласятся. В нынешних реалиях зачастую компании ищут людей, которые проектируют сразу UX/UI.
На заметку: по нашему опыту, большинство пользователей прекращают использовать приложение еще на этапе знакомства, если UX/UI не доработан и пользователь что-то не понял.
Структура экранов мобильного приложения
Чтобы создать работающее мобильное приложение, дизайнеру нужно изучить его особенности, разобраться в построении структуры и переключении экранов, функциональности. Сейчас индустрия мобильных приложений настолько захватила наш мир, что описать стандартный набор экранов стало сложной задачей. И все же, мы попробуем перечислить основной набор экранов.
Главные экраны и меню
В мобильном приложении главный и меню являются основными экранами. Главный экран проектируется с учетом задумки продукта, его назначения и цели. Он же отправная точка для пользователя. Поэтому, главный экран содержит элементы навигации, по которым можно перейти к разным разделам мобильного приложения.
В 50% мобильных приложений дизайнеры помещают меню на главный экран. При этом, меню может быть 2-х видов: выпадающее меню или его отдельный экран. Из практики нашей компании, при создании мобильного приложения следует ограничить количество действий во взаимодействии пользователя с меню.
В идеале, количество кнопок в меню должно быть не более 7-ми, а остальную информацию сделать в подкатегориях.
Экран входа
Если ваше мобильное приложение предполагает создание учетной записи, то вам нужно учитывать следующее:
Минималистичное оформление экрана входа. Не нужно создавать пользователям излишние трудности с доступом к приложению. Обычно, на экране размещается 2 поля (логин и пароль) и 2 кнопки (войти и регистрация).
Дайте пользователю возможность посмотреть, что за пароль он вводит (открытый/закрытый глазик). Это важно как при создании пароля, так и при дальнейшем входе в приложение.
На заметку: чтобы приложение завоевало сердца вашей целевой аудитории, нужно изучить площадки конкурентов и тренды в дизайне мобильного приложения в конкретной сфере.
Экран электронной коммерции, каталог
Основная цель создания коммерческого проекта — это продажа продуктов, товаров или услуг. Визуальная презентация товара имеет сильное воздействие на принятие решения пользователем. Задача дизайнера — создать каталог компании в мобильном приложении таким образом, чтобы он был максимально удобным и привлекательным для клиента.
Важно правильно рассчитать количество карточек товара (продуктов), которое помещается на один экран. Это зависит от ширины и высоты экрана. Как показать товар — это уже задача маркетинга.
Контрольный экран
Процесс оформления заказа — это последний шаг в совершении целевого действия пользователем. Дизайнер отлично поработал над мобильным приложением и клиент смог дойти до покупки. Теперь важно не отпугнуть его.
Основная часть экрана — это форма оформления покупки, где клиент вводит личные данные для покупки и ее оплаты. Количество требуемой информации зависит от типа интернет-магазина или сервиса. На этом этапе нужно показать, что данные, вводимые пользователем, останутся в безопасности и не будут переданы мошенникам. Для этого нужно оставить убеждающие фразы.
Сама же задача «защита персональных данных» выполняется программистом. Дизайнер готовит макет, как контрольный экран будет выглядеть.
Социальный экран
Лента активности, новостей, событий — это все социальные экраны. Feed (производится «фид»), должен иметь четкую схему сканирования и отображения событий в ленте, которая не будет перегружена лишними деталями.
Контакты и поддержка
Дайте пользователю возможность связаться с вами, если что-то пошло не так. Это могут быть раздел «Контакты» и чат техподдержки. Важно учесть, что ваши клиенты могут предпочитать разные способы связи: кому-то проще написать в чат, а кому-то проще позвонить и задать все интересующие вопросы. Поэтому позаботьтесь о том, чтобы потребности ваших клиентов были удовлетворены: если человек видит, что может с вами связаться, то ему проще вам довериться.
Например, экран «Контакты», по возможности, должен содержать почтовый адрес, номер телефона, email, контакты для месенджеров и т. д.).
На заметку: Для упрощения поиска нужного контакта можно установить маленькую иконку рядом с контактом.
Еще сомневаетесь в том, что дизайн приложения очень важен?