Connect with us

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

guidelines

Общие положения | Навигация | Главный экран | Экран списка товаров | Экран карточки товара | Заключение

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

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

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

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

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

Навигация

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

sapato-1
 lamoda-1

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

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

Сценарий в Sapato:

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

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

Сценарий в Lamoda:

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

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

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

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

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

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

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

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

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

Сценарий в Lamoda:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Главный экран Sapato
 Главный экран ЛаМоды

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

  1. Трамплин (Springboard) – Sapato.
  2. Меню списков – Lamoda.
  3. Галерея – Lamoda.
  4. Карусель слайдов – Sapato, Lamoda.
В самом верху располагается карусель слайдов. Элемент спроектирован не совсем удачно. К минусам можно отнести отсутствие индикатора количества страниц слайдов. Пользователь не воспринимает данный элемент как карусель, поэтому акции, скидки и новые коллекции, информация о которых располагается на остальных слайда, останется за кадром.Информационный элемент, который должен обеспечить легкость установления связи между клиентом и клиентским сервисом в сценарии «пользователь хочет позвонить по этому номеру». Такой сценарий используется во многих приложениях и мобильных сайтах. Поэтому пользователь будет ожидать схожее поведение от этого элемента.

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

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

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

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

Список товаров Sapato
Список товаров Lamoda

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

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

Карточка товара Sapato
Карточка товара Lamoda

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

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

Галерея

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

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

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

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

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

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

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

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

Заключение

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

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

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

book3Мобильная разработка. Галерея шаблоновВ данной книге рассмотрены более 70 шаблонов проектирования мобильных приложений и приведено большое количество скриншотов из современных приложений iOS, Android, Blackberry, WebOS, Windows Mobile и Symbian.

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

book2Повышение эффективности интернет-рекламы. Оптимизация целевых страниц для улучшения конверсииВ этой книге – все о том, как превратить ваши целевые страницы в лабораторию, которая в онлайн-режиме поможет выявить, на что на самом деле реагируют посетители (вместо того, чтобы догадываться об их предпочтениях). Здесь нет быстрых или простых рецептов “как повысить конверсию в два счета”, зато есть важные основы трудного, но очень и очень благодарного дела – настройки целевых страниц. book1Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтаАвторы этой книги подробно рассказывают об основах информационной архитектуры, благодаря которой можно создать не только (и не столько) удобный, но и максимально эффективный сайт.Книга”Положить в корзину” – это, по сути, практическое руководство, которое поможет вам разобраться в методах повышения конверсии и успешно применить их на сайте. Мы старались целиком охватить тему убеждения покупателей, но наша главная цель – все-таки конверсия.

 

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

Леонид Боголюбов
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Календарь

ноябрь

16ноя - 18Весь деньVIII Всероссийский форум молодых лидеров YouLead

17ноя - 19Весь деньТИЛТЕХ МЕДХАК

18нояВесь деньDevFest Gorky 2017

24ноя - 26Весь деньWhat the hack?!

25нояВесь деньLadies Code: время технологий

25нояВесь деньSmart Taler 2017

30нояВесь деньSmart Cars & Roads 2017

декабрь

5дек18:30- 22:00Яндекс изнутри: глазами iOS-разработчика

8дек - 9Весь деньКубок СTF России

9дек - 10Весь деньGames Gathering 2017

9декВесь деньЛекционный день по игровой индустрии

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Наш Facebook

X