Как создаются качественные интерфейсы мобильных приложений
Хороший интерфейс мобильного приложения — это не только красивый дизайн. По данным UXeria.com 70% всех онлайн-стартапов терпят неудачу из-за плохо проработанного интерфейса своих продуктов. Как разработать хороший интерфейс? Какие ошибки можно совершить при создании визуала? Разбираем в статье.
Что такое интерфейс мобильного приложения и чем он отличается от веб-сервисов
Представьте: вы приходите в салон, чтобы сделать стрижку. Сначала нужно записаться на нужное время у менеджера. Вы обращаетесь к человеку на ресепшене и спрашиваете, когда будет свободен мастер. Но менеджер вас не понимает: молчит или отвечает невпопад, а может, вообще говорит на другом языке. Возможно, это крутой салон, и мастер хорошо знает свое дело, но вы наверняка разозлитесь и уйдете оттуда, так и не записавшись.
В этой ситуации менеджер, посредник между вами и услугой, сработал плохо. Интерфейс приложения — это такой же посредник между пользователем и функциями сервиса.
В общем понимании интерфейс или UI (user interface) — это визуал, внешний вид приложения. Это понятие тесно связано с пользовательским опытом (user experience или UX). Одно невозможно без другого, поэтому интерфейс еще называют UI/UX дизайном. Получается, UI отвечает за облик продукта, а UX — за его логику.
Логика так же важна, как и привлекательные иллюстрации, цвета и анимации. Представьте красивое приложение, в котором много интересных дизайнерских решений. Но структура хромает: например, чтобы зарегистрироваться, нужно ввести много данных на нескольких экранах. Несмотря на визуальную привлекательность, пользователь вряд ли заинтересуется сервисов, если он будет неудобным. UX решает эту проблему и отвечает за простоту, понятность и удобство.
Проработанный и функциональный UI/UX дизайн нужен каждому онлайн-продукту: мобильному и веб-приложению, сайту.
Особенности интерфейса мобильных приложений
Есть большая разница между разработкой веб-интерфейса и интерфейса для мобильных приложений. Вот некоторые из отличий:
Размер экрана. Дизайнеру мобильных интерфейсов нужно уместить всю необходимую информацию на экране длиной 10-12 см. В отличие от десктопа, мобильный дизайн может включать гораздо меньше кнопок, иконок, текста.
Управление. На компьютере человек выполняет действия с помощью мыши, а на смартфоне — только с помощью пальцев. Нужно, чтобы все кнопки были достаточно большими. Также в приложении можно реализовать и других механики — например, смахивание экранов,
Ориентация экрана. Когда человек пользуется приложением, он может развернуть смартфон горизонтально. Многие платформы, например, Tik Tok, не адаптируются при повороте устройства. Но есть программы, где нужно учесть смену ориентации экрана. Например, это стриминговые сервисы. Если бы видео на Youtube или Netflix нельзя было развернуть горизонтально, пользоваться приложением было бы неудобно.
Производительность смартфонов. Множество сервисов борются за внимание и время пользователей, поэтому скорость отклика должна быть очень высокой, а ошибки сведены к минимуму. Во многом это зависит от веса приложения и сложности интерфейса. Тяжелые анимации и 3D-эффекты могут затруднить использование сервиса.
Примеры хорошего и плохого визуала
Чтобы показать особенности разработки интерфейса приложения на практике, мы нашли примеры качественных и неудачных UI/UX дизайнов мобильных сервисов.
В качестве неудачного примера возьмем приложение магазина Леруа Мерлен. Его пользователи недовольны выбором адреса, длинной формой связи, неработающими кнопками. Похожих отзывов на странице сервиса очень много. Помимо этих проблем есть и другие:
Главная страница приложения смотрится скучно и неинтересно. Разделы каталога расположены горизонтально, пользователю нужно листать их вправо. При этом большая часть занята странным блоком «Рекомендуем» из товаров, которые вряд ли заинтересуют человека.
Если провалиться в один из разделов, откроется список подразделов, который раскрывает еще один список. Проматывать это очень неудобно.
Чата с поддержкой в приложении нет. Если у клиента возник вопрос, ему предлагается заполнить длинную форму обращения. Ответ сотрудника при этом приходит на почту. Если пользователь столкнулся с браком, такой сервис разозлит его еще больше.
Все эти недоработки мешают пользователям сделать заказы, вызывают недовольство и увеличивают количество негативных отзывов.
Пример хорошего UI/UX — приложение магазина Hoff.
На главной странице — карусель с баннерами, которые сразу привлекают внимание. Дальше — блок с разделами, которые могут понадобиться пользователю — «Акции», «Магазины». Потом — выгодные предложения от сервиса. Дизайн хорошо выстроен логически и управляет вниманием клиента. Весь интерфейс направлен на то, чтобы показать человеку ассортимент, помочь с выбором и снять все вопросы.
Коммуникация с клиентами налажена гораздо лучше, чем в Леруа Мерлен. В приложении можно отправить обращение или позвонить в поддержку. Экран обращения оформлен чисто и дружелюбно.
Также можно сравнить эти два примера чисто визуально. Оба бренда используют свои цвета, но в приложении Леруа почти нет ярких акцентов. Кнопки выделены серым, разделы в каталоге никак не оформлены. А Hoff использует свой фирменный красный цвет в иконках, разделителях, плашках скидок и кнопках. Поэтому в целом дизайн Hoff смотрится интереснее.
Кто создает интерфейс мобильных приложений?
Созданием визуала занимаются UI/UX дизайнеры. Это специалисты, которые не только хорошо владеют графическими редакторами: они умеют строить пользовательские пути и знают, как сделать сервис интуитивно понятным.
Графические или веб-дизайнеры не смогут справиться с этими задачами. Специалист должен знать основы разработки интерфейсов мобильных приложений, разбираться в специфике разных смартфонов. Также UI/UX дизайнер должен примерно понимать, как происходит дальнейшая разработка и уметь работать в команде с программистами. В последнее время становятся популярны конструкторы мобильных приложений, где любой может создать свою программу быстро и без особых знаний. Есть множество платных и бесплатных конструкторов с разными возможностями. В них можно создать простое приложение с удобным интерфейсом, например, для тестирования идеи. Но если вам нужен функциональный коммерческий проект, лучше обращаться к опытному дизайнеру.
Разработка интерфейса мобильного приложения: как работает команда Q-Digital
У нашей команды создание интерфейса делится на следующие этапы:
- Обсуждение концепции с заказчиком
Сначала мы выясняем, есть ли у заказчика свое представление о дизайне, типографике, цветах и акцентах. Если есть какие-то пожелания, мы стараемся учесть их в дальнейшей работе.
- Исследование рынка
На этом этапе мы смотрим, есть ли у проекта аналоги, насколько они популярны, в чем их фишки. Также мы подбираем качественные референсы, чтобы в работе опираться на лучшие практики.
- Вайрфреймы
Когда концепция ясна, а конкуренты изучены, мы приступаем к созданию вайрфреймов. Это схематичные монохромные изображения будущих экранов с расположением основных элементов и текста. Некоторые дизайнеры набрасывают схемы от руки, мы же пользуемся графическими редакторами — Figma Sketch. Вайрфреймы мы согласовываем с заказчиком: на этом этапе легче внести правки в логику, чем потом. Иногда мы пропускаем этот этап, например, когда нужен редизайн продукта, а не создание с нуля.
- Тест дизайн-концепции
Это небольшая презентация экранов в цвете и с контентом. Дизайнер прорабатывает несколько экранов, чтобы показать заказчику, как все будет выглядеть в итоге. Если на этом этапе все в порядке, двигаемся к детальной проработке всех экранов.
- Реализация дизайн-концепции
Расположение всех элементов и цвета утверждены — команде остается доработать все экраны в заданном стиле. На этом этапе добавляются все иконки, шрифты, логотипы, анимации. Итог работы UI/UX дизайнеров — UI-kit и прототип интерфейса. UI-kit — это набор со всеми элементами и цветами визуала. На него ориентируются верстальщики и программисты в дальнейшей работе.
Дальше макеты экранов передаются разработчикам. Но работа дизайнеров над проектом не заканчивается: они контролируют верстку, отвечают на вопросы коллег, проверяют готовый дизайн.
Интерфейс для Android iOS: есть ли разница?
Дизайны Android и iOS немного различаются. У Google и Apple даже есть отдельные гайдлайны с рекомендациями для дизайнеров. UI/UX дизайнеры должны знать эти различия, чтобы на разных устройствах все элементы интерфейса мобильного приложения отображались корректно. Вот некоторые из этих отличий:
Навигационная панель. У Android основная навигационная панель расположена сверху, а у iOS — снизу. При этом у андроидов есть дополнительный встроенный навигационный инструмент с кнопкой «back», которая позволяет перейти на шаг назад. Чтобы перейти к предыдущему экрану на айфонах, надо свайпнуть слева направо.
Панель поиска. Google советует добавлять поиск к верхней панели навигации. У Apple больше возможностей: можно прикрепить строку поиска рядом с панелью навигации или поместить отдельно в другом подходящем месте.
Контекстное меню. Привычная для андроида механика — выпадающее меню при нажатии на кнопку с тремя точками. Оно должно располагаться наверху.
Вызвать такое меню в iOS можно долгим нажатием на элемент. Иногда оно также прячется за тремя точками, но внизу страницы.
Шрифт. Стандартный шрифт для Android ― Roboto, а для iOS — San Francisco. В Google и Apple утверждают, что с системными шрифтами приложение будет более адаптировано к операционным системам. Но, если везде использовать одни и те же шрифты, платформы будут смотреться одинаково. Чтобы уникализировать сервис, можно использовать стандартный шрифт как основной, а для заголовков взять другой.
Мы описали несколько основных различий интерфейсов двух ОС. Есть еще много нюансов, которые нужно знать UI/UX дизайнер. В Android и iOS различается интерфейс оплаты через NFC, выбор дат, всплывающие окна и другие детали. Каждая из этих деталей должна быть проработана, иначе могут возникнуть ошибки, которые испортят общее впечатление пользователя и помешают ему использовать сервис.
Вывод: уделите интерфейсу максимальное внимание
В любом приложении интерфейс — это первое, что видит пользователь. Еще до использования функций он оценит главный экран. У вашего проекта будет практически единственный шанс понравится. Если что-то пойдет не так, пользователь легко может выбрать аналог вашего продукта из многообразия программ.
Поэтому экономить на этапе разработки интерфейса нежелательно. Если у вас ограничены сроки — например, нужно представить MVP инвесторам через пару месяцев — лучше потом вернуться к доработке визуала и спроектировать все до мелочей. Все ресурсы, которые вы вложите в этот этап, окупятся. Вы повысите шансы вашего приложения стать успешным.
Если у вас остались вопросы или вы ищете команду для разработки приложения, мы вам поможем. В нашем портфолио множество проектов разной сложности, и в каждом из них мы детально прорабатывали интерфейсы. Свяжитесь с нами, и мы покажем вам несколько кейсов, а также расскажем, как будем работать над вашим проектом.