Дизайн мобильного приложения
Подготовка макета приложения по доставке лекарств для аптеки DeliVita
О компании
Название приложения DeliVita сложилось из двух частей: Delivery + Vita. Это напоминает пользователям одновременно о сервисе доставки и об аптеках, в названиях которых, либо в названиях лекарств, часто встречается часть Vita.
DeliVita создается, чтобы облегчить пользователю процесс поиска, выбора и заказа лекарств. Особенность приложения — возможность заказать необходимые препараты с доставкой на дом.
К нам обратились, чтобы разработать макеты для мобильного приложения аптеки. В сфере онлайн-заказов лекарств высокая конкуренция, поэтому приложение должно было выгодно отличаться удобством использования, привлекательным внешним видом и расширенным функционалом.
Вводная страница приложения дает понять, что пользователь может найти внутри различные лекарственные препараты. Изображение дает ассоциацию заботы о человеке, окружении его всем необходимым для здоровой жизни. Текст на стартовой странице сразу указывает, что лекарства можно доставить на дом. Кнопка призыва к действию без давления зовет в каталог товаров, мягко приглашает за покупками, что ассоциируется, скорее, с приятным шоппингом, а не с поиском лекарств при болезни.
В основе цветовой гаммы страниц приложения лежат четыре цвета: приглушенный темно-синий, сине-фиолетовый, карминно-розовый и спокойный розовый. Самый темный из них отражает надежность, уверенное спокойствие и высокое качество товаров, более светлый оттенок — комфорт и расположение к пользователю. Карминовые оттенки мягко привлекают к себе внимание и упрощают ориентацию на странице, а розовые тона образуют безопасное пространство вокруг человека на изображении.
Цветовая гамма логотипа мягкая и сдержанная. Благодаря им стартовая страница получилась минималистичной, но при этом не пустой.
Заголовки в приложении написаны шрифтом Nunito Bold, основной текст — Nunito Regular. В них нет сложных элементов, засечек и необычных линий, что исключает сложности при чтении и попытки разобрать название бренда. Текст выглядит простым и понятным и выполняет свою главную задачу: донести информацию до пользователя максимально быстро и не перегружать его восприятие. Поэтому простой удобочитаемый шрифт вызывает большее доверие, чем графика с множеством элементов.
Страница регистрации выполнена в тех же сдержанных тонах. Изображение пользователя, который вводит пароль в приложении в неком закрытом пространстве, ассоциируется с безопасностью персональных данных, а находящийся рядом лист дуба — с экологичностью, природой и здоровьем.
Процесс регистрации выглядит простым и удобным, от пользователя не требуется совершить каких-либо нестандартных или слишком сложных действий.
При переходе на основную страницу приложения перед пользователем открывается возможность совершить любое из самых популярных стартовых действий: строка поиска, основные категории товаров и самые популярные препараты. Для удобства на строку поиска помещена иконка микрофона для голосового набора.
Иконки категорий товаров выполнены в единой цветовой схеме. Минималистичные изображения позволяют не читать название категорий, а сразу понимать, что внутри: лекарства, косметические средства или витамины.
В поле популярных товаров отражается основная информация о продукте: название, изображение упаковки, цена и производитель. Если пользователь знаком с препаратом, ему не обязательно переходить на страницу товара — кнопка добавления в корзину расположена рядом с карточкой товара и выделена цветом.
Нижняя строка меню позволяет быстро перемещаться по страницам приложения, переходя из корзины обратно в каталог и отправляя интересующие товары в избранное. Элементы меню серого цвета, за счет чего не отвлекают на себя внимание пользователя, пока он занят просмотром товаров.
Карточка каждого товара сделана простой и функциональной. На одном и том же экране можно сразу добавить и удалить товар из избранного, выбрать дозировку и количество упаковок и увидеть, как в зависимости от этого меняется цена. Отдельные вкладки об особенностях лекарства позволяют пользователю быстро переключаться между нужными блоками. Поверх информации о препарате скользит кнопка добавления товара в корзину — так пользователю не нужно скроллить вверх или вниз, чтобы заказать нужные товары.
При переходе в корзину внимание в первую очередь привлекает изображение человека с тележкой. Этот образ ассоциируется с неспешной прогулкой по магазинам, когда можно взять все, что хочется, и без проблем довезти до машины — то есть получить на дом.
Описание товаров в корзине повторяет основную информацию: внешний вид упаковки, название, цена, количество упаковок и производитель. Кнопка оформления заказа выделена заметным, но не чересчур ярким красным цветом. На нижней панели меню неброско выделяется кнопка корзины, указывая, на какой странице сейчас находится пользователь.
На странице оформления заказа пользователю предлагают еще раз проверить состав своего заказа. При этом сохранена возможность на этом же этапе добавить или уменьшить количество упаковок в заказе — возвращаться в корзину для этого нет необходимости.
На этой странице пользователь видит одновременно конечную сумму заказа, из чего она складывается и размер скидки. Такая прозрачность повышает доверие к компании.
На странице избранного внимание привлекает изображение. Человек, сидящий в расслабленной позе среди упаковок с лекарствами, отражает состояние спокойствия и комфорта. Это впечатление усиливают листья дуба, выглядывающие из-за банок, которые одновременно напоминают бабочку. Это также ассоциируется с легкостью и дружественностью.
В целом вся логика приложения направлена на доведение пользователя до оформления заказа. К этому шагу он может прийти по любой цепочке из каждого пункта меню.
Логистика приложения разработана с учетом того, чтобы подвести пользователя до создания заказа. К данному действию он может дойти по каждой цепочке из любого пункта меню.
Сообщить об опечатке