Как создаётся дизайн мобильных приложений

Цели, конкуренты и определение функций

Тамара Невская - директор TA Research.

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

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

Определение цели

Как и в любой сфере деятельности перед созданием мобильного приложения следует определиться с целью, а именно ответить на вопрос: "Мы разрабатываем приложение, чтобы что?"

Наиболее популярные цели в данном случае:

Перевод существующих клиентов из веба в приложение. Например, сначала у банков были только личные кабинеты пользователей на сайте. С ростом числа и разнообразия смартфонов и ростом мобильного трафика появилась необходимость создания более удобной площадки, чем мобильная версия сайта. К тому же мобильное приложение обладает практически неиссякаемыми возможностями увеличения LTV и среднего чека, давая банку инструменты для генерирования дешевых лидов на свои продукты среди своих же клиентов. Какая мобильная версия умеет рассылать push-уведомления? Примерно такая же история у сервисов по оказанию услуг, изданий, сервисов по подбору персонала и т.д.
Получение прибыли. Конечно, эту цель преследуют и банки из предыдущего примера, но используются другие механики, к тому же у банка создание мобильного приложения еще и история про лояльность. Получение прибыли, как цель создания мобильного приложения, конкретно в этом пункте про то, каким образом владелец мобильного приложения будет его монетизировать. Наиболее популярные способы: in-app покупки, подписки, реклама сторонних ресурсов/товаров/услуг.
Расширение списка уникальных торговых предложений и конкурентная борьба. Здесь всё логично - у конкурента приложение есть, значит и нам нужно. У нас с конкурентом всё одинаково, но у них нет мобильного приложения. Причем это касается как внешнего рынка, так и внутрикорпоративного.

Список целей можно продолжать, эти три наиболее частые.

Анализ конкурентов

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

Описание пользователей и функций приложения или UX/UI

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

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

добраться из пункта А в пункт Б
провести время с пользой для здоровья
объехать пробку и т.д.

На основе описания этих задач строится структурный функционал приложения, который и отображается в дизайне. Для описания функционала используется подход User Story, то есть описание истории и путей взаимодействия с приложением. Опять же на примере банка и велошеринга. User Story 1 в обоих случаях будет регистрация. User Story 2 – вход зарегистрированного пользователя. User Story 3 – покупка в приложении. Нужно детально описать каждый процесс плюс учесть, чтобы он был максимально простым и удобным. Причем описывать нужно вплоть до расположения кнопок с учетом размера смартфона. Это и есть составляющие UX/UI -дизайна.

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

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

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

Отсутствие лишних деталей и концентрация на основных свойствах продукта

Илья Харченко - главный редактор чешско-российской ИТ-компании «The MASCC».

В один прекрасный момент, человек, ведущий свой бизнес, понимает, что пришло время создать мобильное приложение. Он тщательно все продумал и пришел к выводу, что приложение будет гораздо удобнее, чем сайт, оно будет выполнять определенную функцию и поможет быстрее и лучше реализовывать продукцию или услуги. Главный плюс приложения в том, что оно выстраивает прямую и бесконкурентную связь поставщика услуг с потребителем. Находясь в нем, потребитель не выбирает среди сотен поставщиков услуг, он уже у вас в гостях. Приложение – будто магазин, где выставлены только ваши товары и услуги. Оно гораздо удобнее сайта, ведь требует для входа всего один прямой клик из меню смартфона. Хорошее приложение должно уметь то, чего не может сайт и магазин. Помимо этого, хорошо оптимизированное приложение позволяет быстрее «сёрфить» вкладки с товарами и услугами, а в вопросе оптимизации главнейшую роль играет его дизайн.

В этом деликатном вопросе стоит учесть, что хороший дизайн мобильного приложения – это не впечатляющий своими цветами внешний вид, а целый набор графических решений, непосредственно связанный с функционалом приложения, которые в совокупности помогают приложению реализовывать свою цель. Второй факт, который задает тон дизайну разрабатываемому приложению, гласит, что пользователь уже перепробовал множество разнообразных приложений. Дизайн каких-то ему пришелся по вкусу, а что-то он счел неудобным. Роль играет платформа, для которой создается мобильное приложение. Именно она вырабатывает у пользователя привычку к паттернам – идентично расположенным элементов приложения. На iOS свои паттерны, на Android – другие.

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

Ваш продукт может быть поистине уникален, но успешно реализовывать его вам поможет строгое приложение, которое по своему дизайну и функционалу будет привычно для пользователя. Стив Джобс придерживался мнения, что пользователь должен добираться до нужной ему вкладки или функции в три клика, будь то приложение или устройство. Это стало одним из основных законов для разработчиков, равно как законы Ньютона в физике. А дизайнер Дитер Рамс, который больше занимался именно внешним видом, а не функционалом, утверждает, что хороший дизайн любой вещи – это как можно меньше дизайна. Отсутствие лишних деталей и концентрация на основных свойствах продукта, а в нашем случае это приложение, сделает его полезным и привлекательным.

Сейчас активно развивается такое направление разработки, как UI-дизайн (user interface design), который ставит перед собой задачу «иллюстрировать» функции в понятном виде. UI-дизайн идет бок о бок с графическим и производственным дизайном. Он призван найти золотую середину между красивыми цветами, графикой, стилем и удобством функционала. Ни одна графическая деталь не должна отвлекать пользователя от работы с приложением. UI-дизайнеры выделяют для себя несколько принципов, руководствуясь которыми можно получить грамотно выстроенный интерфейс приложения:

организованность составляющих интерфейса;
единый стиль составляющих интерфейса;
логическая связь между элементами интерфейса.

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

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