Дизайн мобильных приложений: магазины

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

В целях унификации сценариев взаимодействия, расположения элементов пользовательского интерфейса и их набора, компании (Apple, Microsoft, Google) создают специальный набор инструкций, называющийся гайдлайны (guidelines). По ссылкам можно ознакомиться с гайдлайнами для iOS, WindowsPhone, Android.

Но как самому научиться создавать интерфейсы в мобильных приложениях, которые будут удовлетворять нужды пользователей и работа с которыми приносить позитивные эмоции? Здесь весь дьявол кроется в деталях. Вы создаете интерфейс мобильного приложения, используя гайдлайны, но при появлении элементов, которые не лезут в текущий вариант интерфейса, вы просто пихаете в надежде, что будет все круто. Не будет. Определенно не будет. Замечу, что такие ситуации чаще происходят в коммерческих проектах, где есть два всадника апокалипсиса: время и деньги.

Давайте вместе на примере двух рыночных приложений рассмотрим плюсы и минусы построения некоторых экранов таких приложений как Lamoda и Sapato.

Навигация

Хорошая навигация является необходимой вещью. У приложения с хорошей навигацией больше шансов понравиться пользователям, потому что позволяет легче справиться с их задачами.

Рассмотрим плюсы и минусы навигации на примере трех сценариев, которые с большим шансом будут востребованы в такого рода приложениях.

1. На springboard’e (трамплин) выбираю «Одежда».
2. Выбираю «Топы и Футболки».
3. Попадаю на экран списка, где на первом месте женские футболки; возникает вопрос а где мужские футболки? Нажатие на фильтрацию не приносит результатов. Прокручивая список вниз вижу, что мужские начинаются сразу за женскими.

1. В меню списков выбираю «Мужское».
2. Прокручиваю фильтр на раздел «Футболки и поло».
3. Попадаю на экран с результатом моего поискового запроса.

1. На экране карточки товара нажимаем большую кнопку «Избранное».
2. Читаем текст в модальном окне «Пожалуйста, укажите Ваш размер!», нажимаем «Закрыть».
3. Выбираем на экране карточки товара размер товара.
4. Повторно нажимаем большую кнопку «Избранное».
5. Появляется второе модальное окно с текстом «Выбранная Вами модель добавлена в избранное!», нажимаем «Закрыть».

ИТОГ: цель достигается за 5 шагов для новичка в приложение. Пользователь, особенно новичок, от такого получает исключительно негативный опыт, что может сказаться на его отношении к компании в целом.

Сценарий в Sapato (бывалый):

1. Выбираем размер товара на экране карточки товара.
2. Нажимаем большую кнопку «Избранное».
3. В появившемся модальном окне с текстом «Выбранная Вами модель добавлена в избранное!» нажимаем «Закрыть».

1. На экране карточки товара в правой части тулбара нажимаем иконку в форме сердечка. Сразу же на tab bar’e появляется индикатор количества товаров в «Избранном», что также является обратной связью с действием пользователя, которое дает пользователю уверенность в том, что результат достигнут.

1. На главном экране выбираем на springboard’e раздел «Одежда».
2. Из списка выбираем категорию шорты.
3. Нажимаем кнопку «Фильтр».
4. Нажимаем на строчку «Бренд».
5. Видим результат – бренда в магазине нет.

Сценарий в Sapato №2:

1. На главном экране выбираем на springboard’e раздел «Бренды».
2. Много листаем в поисках бренда nike, пока не увидим его отсутствие.

1. На главном экране в правой части тулбара нажимаем иконку лупы.
2. Вводим поисковый запрос «nike».
3. Подтверждаем ввод.
4. На следующем экране нам предлагают выбрать категорию. выбираем мужчинам/одежда.
5. Выставляем фильтр на шорты и проверяем искомую модель.

Сценарий в Lamoda №2:

1. На главном экране в правой части тулбара нажимаем иконку лупы.
2. Вводим поисковый запрос «nike шорты».
3. Подтверждаем ввод.
4. Проверяем искомую модель.

Сценарий в Lamoda №3:

1. На tab bar’e выбираем раздел «Бренды».
2. Выбираем Nike.
3. На следующем экране нам предлагают выбрать категорию. Выбираем мужчинам/одежда.
4. Выставляем фильтр на шорты и проверяем искомую модель.

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

Главный экран

Первый экран, который видит пользователь. Давайте составим список элементов, из которых он состоит:

1. Трамплин (Springboard) – Sapato.
2. Меню списков – Lamoda.
3. Галерея – Lamoda.
4. Карусель слайдов – Sapato, Lamoda.

Экран списка товаров

Рассмотрим только вывод позиций товаров магазина. Их построение представляет наибольший интерес. Sapato использует меню списков, смещая акцент внимания от фотографий к тексту. У Lamoda используется галерея, которая делает акцент на фотографии товара. Подход Lamoda более верный, потому что пользователи выбирают одежду визуально.

Экран карточки товара

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

1. Галерея – Lamoda.
2. Добавление товара в корзину (блок с возможностью выбора размера и кнопка для добавления в корзину) – Sapato, Lamoda.
3. Отзывы, описание, рекомендации компании – Lamoda, Sapato

У Lamoda грамотно построен выбор размера, пользователю предоставляется возможность выбрать в русском и европейском размере, а также прочитать «гид по размерам», если возникнут сомнения. У Sapato отсутствуют любые дополнительные возможности определения размеров и подбора размера.

Кнопка добавления в корзину является Call to action. Поэтому у Sapato она ярко выражена в интерфейсе, призывает пользователя к действию. На карточке товара Lamoda ситуация обратная. Кнопка спрятана. Чтобы ее увидеть, необходимо сперва выбрать размер товара. Совсем не очевидный сценарий для пользователя, потому что он привык видеть иконку корзины, слова «Добавить в корзину». Когда он их не видит, у него возникает ощущение, что сценарий «добавить в корзину» отсутствует на экране карточки товара. Как следствие, кнопка не выполняет своей задачи Call to action.

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

Текстовое описание помогает пользователю узнать дополнительные характеристики товара. Располагать лучше наиболее близко к фотографии самого товара.

Рекомендации компании способны увеличить средний чек магазина. С большим шансом пользователь не пойдет сразу в корзину оформлять покупку, а начнет листать рекомендации и добавить оттуда что-то еще.

Заключение

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

Проявите заботу и внимание к своим пользователям и они вас за это вознаградят.

Рекомендуем прочитать

PARKSIDE — команда проектировщиков, дизайнеров пользовательских интерфейсов, а также консультантов по монетизации и стратегии цифровых продуктов.