Этапы разработки дизайна мобильного приложения

Дизайн для мобильных устройств

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

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

Когда UX/UI-дизайнер работает над проектами для мобильных устройств

Создание приложений

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

Создание адаптивной версии сайта

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

Создание мобильной версии

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

Разберем каждый случай подробнее.

Создание приложений

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

Этапы создания мобильного приложения.

Мы рассмотрим основные этапы в создании мобильного приложения.

1 этап — анализ конкурентов

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

Сопутствующие вопросы при анализе:

2 этап — проектирование user flow

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

Для работы над User flow существует много программ, например: Figma, Miro, Overflow и другие.

Шаги для разработки User flow:

1. Сделайте описание пользователя: его окружение, цель, ожидания, его страхи на пути к цели и мотиваторы, которые сподвигнут продолжать движение.

2. Разработайте план действий по достижению цели, ожидаемый пользователем: точка А (начало), шаги → (1) → (2) → (3) → точка Б (цель). То есть вы определяете точку, с которой все начинается — главный экран. Далее прописываете шаги, которые нужно проделать от главного экрана до конечной цели: перейти в каталог → выбрать товары → добавить в корзину → оплатить заказ (конечная цель). Это нужно для того, чтобы отобразить цельную картину взаимодействия человека с продуктом.

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

3 этап — создание wireframes

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

4 этап — работа над визуальным стилем

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

5 этап — создание дизайна экранов приложения

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

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

6 этап — создание прототипа приложения

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

Рекомендации при создании дизайна приложений

Реакция на нажатие

Каждый кликабельный элемент должен реагировать на нажатие — это может быть вибрация или подсветка.

Появление клавиатуры.

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

Наличие аналога Enter

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

Процесс загрузки

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

Подбор удачного времени для уведомлений

Статистика показывает, что пик нагрузки на мобильные устройства приходится с 18:00 до 22:00. Учитывайте это перед тем, как отправлять push-уведомления. И, уж точно, не стоит этого делать среди ночи или ранним утром, потому что это может нарушить покой пользователя и вызвать желание удалить приложение.

Проектирование с учетом прерывания

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

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

Учет пользовательского опыта

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

Рассмотрим на примере приложений Pinterest, Wildberries, ВКонтакте:

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

Чем отличаются приложения от веб-сайтов?

Взаимодействие с аудиторией

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

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

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

В отличие от приложения сбербанка, где можно переводить деньги, оплачивать услуги, пополнять счет мобильного телефона и прочее:

Проверка личности

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

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

Сложность выполнения задач

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

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

Создание адаптивной версии сайта

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

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

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

Одно из главных преимуществ адаптивного дизайна — общий адрес с основным сайтом, без переадресаций, без поддоменов. Это усиливает позиции сайта при поиске в интернете.

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

Пример десктопной версии сайта:

Создание мобильной версии

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

Как может выглядеть мобильная версия сайта — рассмотрим на примере суши-ресторана «Важная Рыба».

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

Чем отличается мобильная версия от адаптивной?

Многие не видят разницы между адаптивной версией и мобильной. Давайте разбираться.

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

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

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

Например, всемирно известная сеть «ВКонтакте» предлагает и десктопную версию и мобильную. Это одна социальная сеть, но имеет 2 разных адреса, и пользователь сам может выбрать, с какой версии ему зайти.

Десктопная и мобильная версии «ВКонтакте»:

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

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

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

Общие принципы мобильного дизайна

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

Принципы мобильного дизайна:

Простая навигация

Это главный приоритет хорошего интерфейса.

Источник