Команда Головы и руки подготовил материал для vc.ru по разработке мобильного приложения для сервиса iGooods : зачем нужна «скрытая регистрация», как избежать тупиковых пользовательских сценариев и как изменилась идентичность бренда.
iGooods — сервис доставки продуктов на экологичных самокатах от компаний «Метро», «Призма» и «Лента» по магазинным ценам в Санкт-Петербурге.
В 2016 году компания решила выйти на новый рынок с мобильным приложением.
Представители iGooods обратились к нам с задачей создать мобильный продукт, который позволил бы без проблем оформить заказ.
Продукт должен был охватить новую аудиторию и передать философию бренда посредством дизайна.
Тогда мы взяли весь функционал сервиса из веб-версии и адаптировали его под приложения для iOS и Android. Казалось бы, на этом следует поставить точку, ведь что нового можно сказать о том, как разрабатывалось мобильное приложение для веб-сервиса? На самом деле каждая такая разработка включает в себя массу нюансов.
В данном случае мы исходили из принципа дружелюбного интерфейса.
Дружественный интерфейс — это когда все просто, без проблем и максимально удобно: установилось, запустилось, легко привыкнуть.
Все функции, значки, настройки - все видно, не нужно тратить много времени на то, чтобы разобраться.
За тем, что выглядит легко, всегда скрывается сложная и комплексная проработка.
На примере iGooods мы хотим показать, из каких элементов состоит дружелюбный интерфейс и как он может повлиять на работу компании.
Никогда не говорите пользователю «нет»
Никаких тупиковых сценариев
Одним из наших главных принципов при разработке было не дать пользователю заскучать и не завести его в тупик.Этот подход часто называют привлекательным интерфейсом.
Ему подчиняются абсолютно все экраны.
Даже пустые экраны-заглушки типа «Нет описания товара» или «Товара нет в наличии» не являются пустыми и не заходят в тупик.
Мы выходили из таких ситуаций двумя способами: обучали и одновременно объясняли, почему пользователь оказался в тупике, или предлагали альтернативное решение.
Как и на сайтах с хорошей структурой и семантическим ядром, все скрипты построены так, чтобы везде была «связка» экранов.
На пути к цели пользователю всегда предлагается альтернативный осознанный шаг — например, оформление заказа.
Мы тщательно продумывали сценарии работы с приложением, чтобы логика не терялась даже в самых неожиданных из них.
Например, как и любое приложение для доставки, iGooods предлагает доставку по зонам.
Доставка из определенных магазинов в некоторые районы пока недоступна, и это всегда можно увидеть на карте.
Пользователь может выбрать адрес, собрать корзину заказов, а затем внезапно изменить адрес доставки.
Если новый адрес не является частью исходной зоны, вся логика сценария выходит из строя.
Мы нашли простой способ избежать этого.
Нашей задачей было отрезать пути отхода, попросив пользователя трижды подумать, действительно ли он хочет все изменить после этапа сбора корзины.
Сначала он получает совет обратить внимание на изменения: в новом магазине товара может не оказаться, а также есть риск оказаться за пределами зоны доставки, лишив себя возможности оформить заказ.
На каждый случай, когда на этапе совершения покупки что-то меняется, мы подготовили множество советов, как лучше поступить.
Главное – не говорить пользователю «нет» и всегда находить решение проблемы.
Например, если ему все же придется внести изменения и доставка для них не предусмотрена, мы предлагаем вариант самовывоза и ближайшие точки, откуда можно забрать заказ.
Синхронизация
С самого начала была настроена синхронизация сайта и приложения, потому что это сразу решает массу проблем с не выполненными с первого раза заказами.Пользователь может начать собирать корзину на сайте, отвлечься или отойти от компьютера, но вернуться к заказу с другого устройства, в нашем случае с телефона.
Реализовать такой механизм просто: достаточно создать пользователя при первом заполнении корзины.
Тогда его данные будут автоматически вытягиваться из профиля при входе с любого устройства.
Подсказки на всех этапах работы
Когда человек что-то не понимает в работе приложения, он либо пишет в техподдержку, либо, что бывает чаще, удаляет непонятное ПО.Это нормально для пользователя, но нежелательно для компании.
Именно поэтому были введены подсказки.
Мы уже упоминали об отсутствии тупиковых сценариев, но подсказки появляются не только тогда, когда пользователь сам не может понять, что делать дальше.
Они сопровождают человека на всех этапах работы с приложением.
Удалить такое приложение человеку просто не придет в голову из-за его сложности.
Сервисные функции
Ранее мы разрабатывали подобные магазины и приложения для ЗакаЗака И ЛаМода , поэтому они знали, что делать с самого начала.Однако при работе над проектом iGooods нам пришлось гораздо больше времени уделять сценариям, которые бы подходили аудитории именно этого сервиса.
Сознательный дизайн
У iGooods очень ответственная и сознательная целевая аудитория.Эти люди любят читать тексты на этикетках и понимают экологичность продукции и нюансы упаковки.
Поэтому к дизайну пришлось подойти осознанно: от списков мы перешли к плиткам, чтобы каждый товар можно было представить красочным изображением.
При этом мы не отказались от текстов в описаниях.
Каталог с плиткой оказался настоящим испытанием: нам пришлось уйти от списка, но при этом сохранить максимум информации о каждом товаре в каталоге.
В результате мы придумали новый тип динамической карточки товара.
В зависимости от упаковки товара мы ввели несколько видов карточек товара, а также добавили возможность сообщить об ошибке в описании.
Все нововведения в приложении должны быть обоснованы и работать не только по принципу исправления ошибок.
Мы сразу поработали над тем, чтобы приложение развивалось органично и «обучалось» вместе с пользователями.
Динамический фид заказов
Была создана динамическая лента заказов для отслеживания сборки заказов в режиме реального времени.Этот экран чем-то напоминает игру, где вы в любой момент можете заменить один товар на другой.
Дружелюбие сервиса в данной функции достигается за счет push-уведомлений о сборке каждой позиции или общения сборщика с покупателем какого-либо товара.
Если вы заказали желтые помидоры, а в магазине есть только красные, вас спросят, согласны ли вы с заменой — либо в приложении, либо по телефону.
Расширенные возможности обратной связи
Дружественный интерфейс — это когда о пользователе думают заранее.Помимо стандартных форм обратной связи при заказе, есть возможность оставить свой адрес и название товара, которого нет в каталоге.
Уведомление о полученном товаре будет отправлено пользователю на электронную почту.
Такое приложение доступно в самом конце каталога.
В случае с привычной обратной связью также было введено несколько вариантов.
Один инструмент позволяет оставить отзыв об услуге упаковки, второй позволяет написать комментарий и при необходимости прислать фотографии продукции.
Если вам в заказе прислали тухлый овощ, такой отзыв позволит вам получить новую, качественную порцию.
На основании этих отзывов покупатель связывается с покупателями и быстро решает проблему.
Простота и ненавязчивость
Мы подробно описали даже такой простой механизм, как выбор времени доставки, чтобы пользователь мог видеть все возможные варианты.Вы можете выбрать время с точностью до 15 минут, посмотреть, на какое время уже сделано много заказов, и скорректировать свои планы, чтобы не столкнуться со случайной задержкой.
На будущее мы предложили добавить анимацию на экраны, которые сейчас заполнены фотографиями, чтобы привнести ощущение легкости и простоты во все элементы приложения.
Упрощенная регистрация
В любом магазине мобильной связи самые спорные экраны — это формы регистрации.Это те, которые пользователи заполняют неохотно: формы слишком длинные, громоздкие и визуально непривлекательные.
Мы постарались сделать так, чтобы пользователь не захотел закрывать приложение на этом этапе.
Мы разделили регистрацию на два этапа: приветствие и сама форма, состоящая из нескольких простых экранов с подсказками.
Мы представили уникальную графику с анимацией на каждом экране и сократили количество строк ввода до одной на экран, чтобы избежать путаницы клиентов.
Вопрос о том, на каком этапе вводить регистрацию, стоял достаточно остро с самого начала.
Регистрироваться перед просмотром каталога странно, ведь пользователь даже не до конца заинтересован в покупке.
Если создать учетную запись после того, как пользователь добавил все товары в корзину, то теряется логика процесса: человек может временно покинуть сайт, и без регистрации его товары не сохранятся.
Мы предложили ввести «скрытую» регистрацию: при добавлении первого товара в корзину создается некая базовая учетная запись пользователя, а детали можно вводить и добавлять позже.
Дополняем существующую идентичность
Фирменный стиль дополнен новыми иллюстрациями и графикой.Мы не вышли за рамки бренда, но постарались сделать графику более легкой и позитивной.
Каждая деталь стала частью единой системы решения задач клиента.
Элементы подобраны так, чтобы максимально отразить экологичность сервиса и сохранить весь необходимый функционал.
Зеленый цвет использовался для ключевых действий в приложении, бордовый — для выделения важной информации, такой как значки продуктов и добавление в избранное.
Мы сделали цветовую идентификацию по статусу, чтобы информацию можно было прочитать быстрее.
Интерфейс дополнен красочной анимацией.
Краны каталога разработаны с учетом удобной навигации по сервису с использованием таких фильтров, как тип товара, цена, популярность и другие.
Поиск осуществляется сразу по всему каталогу; для удобства мы сделали в нем цветовую идентификацию иконок.
Первые побеги
За время работы мы на стадии прототипирования отрисовали более 70 экранов приложения и продумали максимально удобные сценарии для работы.Мы полностью учли адаптацию сервиса как для платформ iOS, так и для Android. Для финальной версии приложения было создано 130 экранов для всех условий.
Все наши предложения по сценариям пришлись по вкусу аудитории и клиенту: многие из предложенных нами рабочих механизмов постепенно внедряются на сайте iGooods. К каждому товару на сайте теперь можно добавить комментарий — на их основе создатели сервиса будут совершенствовать свой подход. Дружественный интерфейс уже приносит свои плоды на сайте: в веб-сервис вводятся тупиковые сценарии и подсказки, а основной фирменный стиль дополняется простыми и ненавязчивыми дизайнерскими ходами.
За счет появления удобных скриптов и простого рабочего интерфейса ожидается значительный рост заказов – как через веб, так и через мобильную версию.
Мы уже наблюдаем рост числа пользователей iGooods более чем на 50%.
-
Электрон
19 Oct, 24 -
Google Maps Api Снижает Цены В 8 Раз
19 Oct, 24 -
Телеком (Каким Мы Его Знали) Мертв
19 Oct, 24 -
Расчет Clv В Интернет-Магазине
19 Oct, 24 -
20+ Моих Любимых Помощников Angularjs
19 Oct, 24
