Особенности дизайна мобильных приложений
Андрей Батурин,
Андрей Батурин
Мобильные приложения уже несколько лет как перестали быть прерогативой крупных компаний и брендов. С увеличением мобильного трафика, когда он на равных борется с десктоп-трафиком, а иногда и побеждает его, приложение становится почти таким же обязательным атрибутом бизнеса, как личный сайт или интернет-магазин. Никого уже не удивить собственным приложением у городской службы доставки роллов, у региональной компании такси или сети фитнес-центров. Поэтому актуальность грамотного и современного дизайна выходит на новый уровень.
Зачем нужно мобильное приложение
Мобильное приложение может решать разные задачи, в зависимости от того, для кого оно создается. Обычно их разрабатывают либо для собственных сотрудников, либо для клиентов. Сначала рассмотрим первый случай.
Для сотрудников
Следуя тренду автоматизации бизнеса, вы можете заказать специальное приложение для ваших работников, которое выполняло бы строго определенные функции и учитывало специфику вашего бизнеса. Мобильные версии сайтов зачастую работают недостаточно быстро, да и доступ к ним неудобный — надо открывать браузер на телефоне, вводить адрес сайта. Другое дело — программа, которая расположена сразу в телефоне. Она экономит время сотрудников, а сэкономленное время = сэкономленные деньги для бизнеса.
Каким может быть мобильное приложение для сотрудников:
- чат или мессенджер для внутреннего общения внутри компании; вы будете уверены, что никто посторонний не получит к нему доступ, что сотрудники не тратят время на общение не по работе и с другими людьми;
- каталог товаров и услуг с подробной информацией по каждой позиции и с возможностью сразу делать заказы и оформлять покупки клиентов;
- трекер отслеживания перемещения сотрудников; актуален для курьерских служб, водителей, торговых представителей и т.п.;
Для клиентов
А это уже один из инструментов продаж. Если вы убедите клиента установить приложение, оно может стать намного более эффективным источником прибыли, чем сайт и соцсети.
Если человек зашел на ваш сайт, посмотрел товары, но ничего не купил и просто закрыл страницу, вам его уже будет сложно догнать. Да, можно настроить ретаргетинг, но и это не обязательно принесет результат. Другое дело — мобильное приложение. С его помощью можно регулярно отправлять пользователю персональные push-уведомления с акциями, специальными предложениями и просто напоминаниями о себе. При этом, пользователь видит сообщения не просто где-то там на экране, как в случае с контекстной рекламой, а прямо у себя в телефоне. К тому же, пуш еще может иметь звук и вибрацию.
Как убедить клиента установить приложение:
- пообещать скидку;
- запустить программу лояльности;
- добавить полезный контент или функционал (например, функцию сравнения цены в разных магазинах или поиск на карте ближайшего офиса)
После этого вы можете напрямую продавать товары и услуги. И не только, когда человек сидит за компьютером, как в случае с сайтом, но и когда он гуляет, куда-то едет, ждет в очереди и т.д. Также вы можете собирать подробную статистику о пользователях: их предпочтениях, любимых местах, поисковых запросах и т.д. Эти данные пригодятся при составлении выгодных предложений и акций.
Советы по дизайну мобильных приложений
Однако чтобы мобильное приложение полностью раскрыло свой потенциал для бизнеса, оно должно быть удобным, приятным для глаз и понятным. В этом поможет грамотный дизайн. Составили список советов и правил, которые помогут сделать дизайн эффективным.
На первом же экране покажите главную ценность
Встречают по одежке, поэтому важно с первых же секунд увлечь пользователя и убедить его продолжить пользоваться вашим продуктом. Вынесите на главную страницу свои основные преимущества, которые помогают продавать продукт. Обозначьте ключевые особенности. Текста должно быть немного — минимум воды и максимум пользы.
Также обязательно добавьте конкретный призыв к действию. В идеале на кнопку не стоит добавлять абстрактных призывов — “начать”, “попробовать”. Лучше конкретизируйте их — “выбрать пиццу”, “найти офис” “забронировать столик”, “заказать выезд специалиста” и т.п.
Проще — значит лучше
Не усложняйте дизайн интерфейса многочисленными деталями и элементами, даже если они кажутся вам красивыми. У мобильных устройств, даже у планшетов, не такой большой экран, как у персональных компьютеров и ноутбуков, поэтому на них такие элементы лишь отвлекают внимание, от них рябит в глазах и сложно сфокусироваться на главном. Дизайн должен быть таким, чтобы пользователь совершал минимум действий для достижения своей цели: минимум нажатий на кнопки, минимум прочтений текста и т.п. Креатив это хорошо, но только пока он не мешает пользовательскому опыту.
То же, кстати, касается и функционала. Не нужно нагружать продукт функциями, которые ему не обязательны. Лучше сделайте необходимый минимум, но обеспечьте его бесперебойную работоспособность.
Используйте наработанные приемы
Так сложилось, что пользователи привыкли к определенным правилам в дизайне. Им важно, чтобы привычные кнопки были в привычных местах, чтобы иконки для стандартных функций были везде одинаковыми. Это следует учитывать при разработке дизайна. Зачем изобретать велосипед, если зарекомендовавшие себя приемы и так уже хорошо работают?
Если вы сделаете супер красивый дизайн, но он будет непонятен пользователю, то грош ему цена, поскольку главный критерий качества здесь — не визуальная привлекательность, а удобство использования и положительный пользовательский опыт.
Подстраивайтесь под аудиторию
Желательно знать, кто ваша целевая аудитория, чтобы подстроить под нее дизайн. Учитывайте все параметры, которые знаете: возраст и пол, предпочтения и интересы, наиболее популярные другие сервисы. Зная эти данные, вам будет проще смоделировать путь пользователя и заранее определить его ожидания и пожелания по интерфейсу.
Ответьте для себя на вопрос: зачем пользователь заходит в приложение? Опираясь на ответ, и разрабатывайте дизайн. Условно говоря, если человек заходит, просто чтобы заказать еду на дом, функционал для этого действия должен располагаться сразу на главной странице.
Уделите внимание шрифтам
Тему работы со шрифтами мы подробно разбирали в статье “Как выбрать шрифты для сайта”. Однако шрифты важны не только в стандартных сайтах, но и в интерфейсе сервисов для телефона. В этом случае лучше выбирать шрифты без засечек (это такие черточки на конце букв), поскольку шрифты с засечками чаще применяются в длинных текстах, а такого контента здесь обычно мало.
Шрифт обязательно должен гармонировать с общим дизайном, дополнять его и подчеркивать. Откажитесь от рукописных шрифтов и слишком креативных — используйте простые варианты с хорошо различимыми символами.
Давайте фидбек на действия пользователя
На любое действие в приложении обязательно должна быть какая-нибудь реакция: открытие нового экрана, сообщении об успешном действии, сообщение об ошибке и т.д. Мало что так раздражает, как неизвестность: сработало ли нажатие кнопки, получила ли компания мой заказ? Заранее проработайте над дизайном всех таких экранов, подготовьте всплывающие окна и сообщения об успешном/неуспешном действии.
Синхронизация с сайтом
Если вы не можете разместить весь контент в приложении, и в разных ситуациях перенаправляете посетителя на свой основной сайт, этот переход должен быть комфортным для него. Добиться этого можно схожестью дизайна, чтобы человек, попавший на сайт, не испугался и не подумал, что это какая-то ошибка.
Чтобы этого не произошло, мобильная версия сайта и приложение должны быть похожи: одинаковая цветовая гамма, одинаковое расположение элементов. Также желательно, чтобы такой переход длился не дольше, чем внутренний переход по разделам приложения.
Добавьте эмоций
Чтобы усилить визуальное воздействие на посетителя, добавьте в свой дизайн эмоциональность. Сделать это можно в первую очередь с помощью цветов. Известно, что разные цвета ассоциируются у людей с разными эмоциями. Пользуйтесь этим, чтобы вызвать у посетителей нужные ассоциации. Например, зеленый цвет ассоциируется со здоровьем, экологичностью, спокойствием. Красный — с энергией, активностью, агрессией. Белый и голубой — с технологичностью, инновационностью и т.д. Для этой же цели можно использовать иллюстрации: фотографии и рисунки.
Также для придания эмоций можно добавить в дизайн персонаж компании. Как львенок у Lingualeo или сова у Duolingo.
Тестируйте и еще раз тестируйте
Обязательно тестируйте свой дизайн на разных людях, желательно, максимально приближенных к целевой аудитории. То, что вам кажется удачным решением, у пользователей может вызвать неудобства. Проработайте все допустимые пользовательские сценарии, чтобы избежать ошибок.
Совместимость
Позаботьтесь о том, чтобы мобильное приложение корректно работало на большинстве устройств и версий операционных систем. Если у вас не суперсложный продукт, вполне возможно сделать, чтобы и старые смартфоны его поддерживали. Чем шире совместимость, тем шире охват потенциальных клиентов.
Сокращайте путь пользователей
В идеале любая задача в сервисе должна решаться не более, чем тремя кликами. Если у вас на достижение результата уходит более пяти кликов, значит, ваш дизайн плохой. Хороший дизайн — эргономичный. Это значит, что в нем человек затрачивает минимум усилий для достижения своей цели.
Дайте возможность вернуться назад
У посетителя в любой момент должна быть видна кнопка, возвращающая его на предыдущий экран. Если это нельзя сделать в один клик или такая функция вообще не предусмотрена, человек скорее в раздражении закроет мобильное приложение, чем станет разбираться в его тонкостях.
Подстраивайте тип клавиатуры под вводимые данные
Если вы спрашиваете у человека номер телефона, не нужно ему открывать при нажатии на поле текстовую клавиатуру с одними буквами. Аналогичное работает и наоборот — когда нужно ввести текст, открывайте клавиатуру qwerty.
Подписывайте элементы интерфейса
Чтобы пользователь не запутался, дополнительно подпишите каждую иконку. В противном случае ему будет сложно найти нужную информацию, он будет слепо тыкать на все разделы и раздражаться.
— Разработка дизайна мобильных приложений значительно отличается от дизайна веб-сайтов. Здесь важно учитывать особенности более мелкого экрана и более узкие цели пользователя, который обычно заходит в приложение за одним конкретным действием. В дизайне советуем придерживаться минимализма и тщательно прорабатывать пользовательский путь.
