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

Общие положения

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

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

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

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

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

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

Сценарий №1 «Пользователь ищет мужскую футболку».

Сценарий в Sapato:

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

ИТОГ: результат достигнут, но исключительно настойчивостью.

Сценарий в Lamoda:

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

ИТОГ: положительные эмоции, результат достигнут как и ожидалось.

Сценарий №2 «Пользователь хочет отложить футболку в избранное, чтобы спустя какое-то время вернуться к принятию окончательного решения о покупке».

Сценарий в Sapato (новичок):

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

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

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

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

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

Сценарий в Lamoda:

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

ИТОГ: положительные эмоции, результат достигнут как и ожидалось.

Сценарий №3 «Пользователь находится в магазине одежды и хочет через приложение посмотреть наличие данного товара и его стоимость». Например, шорты Nike.

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

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

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

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

ИТОГ: Sapato предоставляет пользователю только на экране выдачи результатов увидеть отсутствие бренда. Данный подход явно вредит пользовательскому опыту.

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

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

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

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

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

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

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

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

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

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

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

В самом верху располагается карусель слайдов. Элемент спроектирован не совсем удачно. К минусам можно отнести отсутствие индикатора количества страниц слайдов. Пользователь не воспринимает данный элемент как карусель, поэтому акции, скидки и новые коллекции, информация о которых располагается на остальных слайда, останется за кадром.Информационный элемент, который должен обеспечить легкость установления связи между клиентом и клиентским сервисом в сценарии «пользователь хочет позвонить по этому номеру». Такой сценарий используется во многих приложениях и мобильных сайтах. Поэтому пользователь будет ожидать схожее поведение от этого элемента.

Честно говоря, возникла сложность в определении данного элемента. Но мы склонны полагать, что это видоизмененный Springboard (трамплин). В стандартном трамплине элементы располагаются плиткой. Трамплин необходим для наглядного расположения входных точек для разных сегментов целевой аудитории. Дополняя сказанное, стоит отметить, что экран айфона в вертикальном положение имеет меньшую рабочую площадь по горизонтали. Поэтому целесообразно было бы расположить элементы трамплина сеткой, не используя горизонтальную прокрутку.

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

Под списком выводится галерея товаров, которые рекомендует компания. Использование данного шаблона (галерея) позволяет пользователю проще просмотреть товары, потому что его внимание акцентировано на сканировании глазами картинок, а не вычитки текста.

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

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

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

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

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

Галерея

В Sapato товар представлен исключительно слайдом с одной фотографией. Рассмотреть внимательно товар пользователь не сможет.

В Lamoda используется галерея с возможностью перелистывания слайдов, которые показывают товар с разных ракурсов. Подход помогает пользователю и потенциальному покупателю определить визуально, насколько товар его устраивает и стоит ли читать информацию о нем ниже.

Добавление товара в корзину

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

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

Отзывы, описание, рекомендации компании

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

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

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

Заключение

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

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