Мария Чайкина
Ведущий юзабилити-специалист Ашманов и партнеры
Мобильное приложение для интернет-магазина, продающего товары повседневного или регулярного спроса, – это уже не новшество, а осознанная необходимость. Пользователь предпочтет открыть любимое приложение в телефоне и сделать заказ через него, чем будет мучиться с мобильной версией сайта, которая, хоть и может быть достаточно удобной, все равно будет уступать в скорости работы и удобстве приложению, установленному на смартфоне. А сама компания обыграет конкурентов, если владеет мобильным приложением, так как пользователь скорее сделает заказ через установленное у него приложение, чем будет искать в интернете нужные товары на сайтах конкурентов.
Конечно, мобильное приложение должно быть разработано как минимум под две самые популярные операционные системы iOS и Android. Причем нужно сказать, что делать приложение с одинаковым интерфейсом под обе операционные системы – большая ошибка.
Сегодня мы рассмотрим мобильное приложение под Android от интернет-магазина зоотоваров Petshop.ru. Приложение будем рассматривать как с точки зрения удобства, так и с точки зрения соответствия гайдлайнам приложений под Android – .
Для большинства проблем мы укажем степень критичности:
- Критичная – такая проблема мешает пользователю совершить покупку и может привести к тому, что пользователь удалит приложение.
- Не критичная – вызывает дискомфорт во время пользования приложением, приводит к пустой трате времени, но, скорее всего, не воспрепятствует совершению покупки.
Восстановление пароля
Вероятно, большая часть пользователей, которые устанавливают себе приложение, уже делали заказы в магазине ранее и теперь устанавливают его для упрощения процесса покупки. Поэтому восстановление пароля (который обычно помнит браузер, но не помнит человек) будет одной из самых важных функций приложения, используемых сразу после его установки. По стечению обстоятельств я также являюсь постоянным покупателем товаров в Petshop, поэтому при первом входе в приложение я пыталась авторизоваться под своим логином, однако забыла пароль на вход. Поэтому пришлось воспользоваться восстановлением пароля. К сожалению, это оказалась mission imposible. При восстановлении пароля приложение просит в поле ввода ввести номер телефона или email. На ввод email приложение выдает ошибку, пытаюсь ввести номер телефона, но в поле ввода нет ни одной подсказки о том, в каком формате нужно вводить телефон, с 7 или 8 в начале, с + или без, с тире или без.
Экран восстановления пароля
Ни то, ни другое не срабатывает. Приложение выдает ошибку «Произошла ошибка, попробуйте запрос позже». После нескольких проб количество попыток исчерпывается.
Ошибки на экране восстановления пароля
В попытках восстановить пароль я решила позвонить в компанию. Забавно, но в первую очередь номер телефона я стала искать в боковом меню, а не в блоке кнопками внизу экрана. Возможно, это моя личная особенность, но, кажется, что логичным будет размещение раздела «Контакты» в боковом меню. Поэтому данную проблему с расположением кнопки звонка в компанию можно считать не критичной.
Нижнее меню
Боковое меню
Оператор компании не смог помочь в восстановлении пароля через приложение, после консультации с коллегами он сказал, что функция восстановления пароля пока не работает, и для этого нужно осуществить восстановление пароля через сайт.
Таким образом, одна из основных и необходимых функций приложения не работает. Данная проблема является критичной для успешного функционирования приложения, поэтому ее нужно исправить как можно быстрее. Также рекомендуется добавить подсказку о формате ввода номера телефона.
Пользователь: «Как же восстановить этот пароль? Я уже подождал час и опять ничего не получилось. Удалю-ка я приложение и напишу им комментарий на гугл плей о том, что я думаю обо всем этом»
Регистрация и авторизация
Заполнение формы регистрации не вызывает сложностей, однако дальше пользователя ждут горькие сюрпризы. После нажатия на кнопку «Зарегистрироваться» все поля очищаются и пользователя никак не информируют о результате регистрации. Совершенно непонятно, удалась регистрация или нет. Помимо этого, после регистрации не требуется какого-либо подтверждения по SMS или email (который во время регистрации не спрашивают). Таким образом, пользователь может зарегистрировать чужой телефон. Если человек не понял, удалось зарегистрироваться или нет, то он может попробовать сделать это повторно, в этом случае приложение выводит сообщение «Вы уже зарегистрированы». Если пользователь обратит на него внимание, то, возможно, он догадается о том, что регистрация удалась, или, напротив, может подумать, что кто-то уже зарегистрировал его номер телефона или логин против его воли.
Сообщение о том, что данный пользователь уже зарегистрирован
Пользователь в панике: «Кто пользовался моим логином Пупсик? Кто вводил мой номер телефона? Кто догадался, какой пароль я использую? Кто уже покупал корм Барсику с моего аккаунта? Что мне делать?»
Доставка и оплата
Я, как владелец двух котов, совершаю заказы в Petshop примерно один раз в 2–3 месяца, поэтому не помню условий доставки. Мне стало интересно, сколько стоит доставка продукции из магазина. Как обычно, в первую очередь я стала искать ее в боковом меню. Доставки там не оказалось. Но я была упорным пользователем и продолжила поиски. Ссылка на доставку оказалась в нижней части главного экрана приложения (на странице с каталогом). Если бы я не была столь упорна, то доставку бы, скорее всего, не нашла, так как все разделы каталога, которые мне нужны (разделы про котов), находятся вверху экрана.
Главный экран приложения с каталогом (верхняя часть и низ с прокруткой)
Оказалось, что при заказе от 999 руб. доставка бесплатная и осуществляется 6 дней в неделю. Возможно, не много пользователей будут искать информацию о доставке, но если она им потребуется, то они могут ее не найти, и это может стать для них проблемой. Можно назвать эту проблему не критичной, но стоящей исправления.
Пользователь: «Нет информации о доставке.. хм.. сколько же я платил в прошлый раз за доставку в мою деревню?»
Рекомендуем разместить ссылки «Доставка», «Оплата» и «Мы» в боковом меню.
Основная навигация
В качестве основной панели навигации в приложении работает нижнее меню с основными действиями, так называемый Bottom navigation. По рекомендации Google, все иконки и надписи в этом блоке должны быть одного цвета без вертикальных разделителей, размеры кнопок должны быть одинаковыми. При выделении какого-либо пункта нижнего меню, его значок и надпись выделяются цветом. В приложении Petshop внешний вид нижнего меню отличается от рекомендаций Google. Это не критично для работы приложения, однако при соблюдении рекомендаций гайдлайнов приложение выглядело бы более аккуратно и просто, а активный пункт меню стал бы заметнее.
Нижний навигационный блок приложения (слева) и гайдлайн (справа)
Рекомендация изменить оформление нижнего навигационного блока, выполнив его в соответствии с .
Также можно совсем отказаться от нижнего навигационного блока, так как он занимает много места на экране, и перенести кнопки «Каталог» и «Корзина» в верхнюю строку навигации, расположив их рядом с поиском, а «Магазины» и «Звонок» расположить в боковом меню. Кнопку «Каталог» также можно дополнительно продублировать в боковом меню. Хорошим примером такого интерфейса является интернет-магазин «Утконос» (см. на скриншоте ниже). Для удобного размещения необходимых кнопок в верхней панели приложения нужно отказаться от такого большого логотипа магазина в шапке (большой логотип в шапке приложения излишен). Достаточно размещения логотипа (изображения головы кошки) аналогично тому, как это решено в приложении «Утконос».
Приложение «Утконос» — боковое меню и каталог
Пользователь: «Что-то я запутался, где тут что»
Каталог
В верхнем уровне каталога товары разделены на группы по виду животного. Так как человек пользуется приложением или сайтом регулярно (обычно один раз в 1–3 месяца, заказывая сразу побольше корма и наполнителя для туалета/клетки), то было бы логично, если бы приложение/сайт помнило, какие животные есть у данного пользователя, чтобы не показывать ему лишние категории. Состав животных в квартире обычно меняется крайне редко. Поэтому, например, владельцу двух кошек будет не интересно видеть рекламу для владельцев собак и категории, посвященные другим животным. Например, в каталоге сначала располагается категория «Товары для собак», но у пользователя только кошки, поэтому видеть на первом месте в каталоге товары для собак по меньшей мере неудобно.
Если в приложение зашел владелец птичек, то ему не интересно видеть рекламу корма для кошек
Пользователь: «Барсик, ты будешь есть собачий корм? Уверен, что не хочешь? А ты получше подумай, это твой последний шанс!»
Рекомендуем при первом входе в приложение спрашивать пользователя, какие у него есть животные (вид животного, пол, возраст), также можно спросить об их особенностях (кастрированный, полный, аллергик и т.п.) и их предпочтениях (скорее всего, животным заказывают корм одной и той же марки). Если эту информацию узнать заранее, то пользователь будет, во-первых, быстрее находить то, что ему нужно, во-вторых, получать адресную рекламу (например, про птиц, а не про рыбок) и в-третьих, будет доволен персональным подходом.
Пользователь: «Надо бы в приложении отметить, что бедный Барсик уже не совсем мальчик…»
Также нужно сказать, что владельцы животных часто консервативны в выборе кормов и наполнителей для туалетов животных. Я знаю много людей, которые из месяца в месяц в течение нескольких лет покупают одни и те же корма своим животным. У меня есть только одна знакомая, которая время от времени меняет корм своей кошки, так как у ее животного быстро развивается аллергия на очередной корм, и его приходится менять. Поэтому очень нужной и полезной функцией для пользователей будет возможность добавить товар в избранное. Также будет полезно иметь избранные бренды, так как среди товаров одного бренда пользователи могут выбирать разные товары, например, разные размеры упаковки или «новые вкусы».
Рекомендуем добавить в приложение «Избранное», где будут размещаться любимые товары и бренды покупателя. Возможно, избранное стоит разместить в шапке приложения или на Floating Action Button – плавающей круглой кнопке в правом нижнем углу приложения.
На главном экране каталога, как и на большинстве экранов приложения, используется достаточно мелкий шрифт, применение которого в данном случае не обосновано. Эта проблема не приведет к отказу от работы с приложением, но будет создавать для пользователей неудобства и, возможно, вызывать негативные эмоции.
Пользователь: «Где мой бинокль?»
Шрифт в каталоге и на экранах
В верхнем уровне каталога около названий групп товаров расположены иконки с изображениями типов животных (см. скриншот выше). Здесь они слишком маленькие, так что становятся трудно различимыми. Поэтому мы рекомендуем либо убрать их совсем, либо сделать больше, переработав при этом расположение блоков каталога, например, расположив их сеткой, а не в столбик (однако для этого нужно убрать сверху рекламный баннер).
Пользователь: «Так, в бинокль не видно. Барсик, тащи телескоп»
На главном экране каталога располагается рекламный баннер. Он занимает половину экрана, при этом реклама в нем направлена не на конкретного покупателя (который, например, является владельцем кота), а на всех подряд, однако приложение установлено у конкретного покупателя, который не будет приобретать собачий корм своему коту.
Пользователь: «Барсик, а может, все-таки купим собачий корм? Смотри, какие на него выгодные скидки! Что? Ты мне предлагаешь самому его есть?… ну знаете!»
Мы бы рекомендовали сократить по высоте рекламный баннер, чтобы он занимал меньше места (как это сделано, например, в приложении «Утконос»), и направить рекламу на конкретного покупателя, узнав предварительно, владельцем каких животных он является.
Баннеры приложения Petshop (слева) и Утконос (справа)
Выбор нужного товара
В каждой категории товара представлен фильтр, однако он обладает рядом недоработок. Рассмотрим их подробнее. Многие пользователи обычно заказывают упаковки корма определенного размера и типа. Например, я каждый раз беру две большие десятикилограммовые упаковки сухого корма бренда N. Не так важно, с кроликом он или с курицей, важен размер. В фильтре мне была бы очень полезна возможность выбора размера упаковки, однако такого параметра нет. При попытке выбрать бренд открывается огромное полотно с брендами, представленными в каталоге, при этом кнопка «Готово» фильтра пропадает из зоны видимости, что очень неудобно. Чтобы нажать на нее, нужно прокрутить экран до самого низа. Кнопка «Готово» визуально не соответствует гайдлайнам Google material design. Данные проблемы не дают использовать приложение с комфортом, но являются не критичными.
Фильтр в каталоге. Раскрыт параметр Бренд (справа)
Пользователь скроллит до кнопки «Готово» некоторое время: «Барсик, смотри, какой я уже мускул на большом пальце накачал»
Рекомендуем добавить возможность фильтрации по размеру упаковки и «приклеить» кнопку «Готово» к нижней части экрана (Persistent footer button), изменив ее дизайн на рекомендованный .
Внешний вид Persistent footer button по гайдлайнам
Также стоит изменить дизайн чекбоксов, сделав их по .
Чекбоксы по гайдлайнам Google
После того как пользователь выбирает нужный бренд, в каталоге остаются только интересные ему товары, однако в этот момент он попадает в сложную ситуацию – найти в каталоге упаковку корма в 10 кг становится очень сложно. Каталог разделен на серии кормов с указанием диапазона стоимости, что не дает пользователю понять, какого размера упаковки там представлены. Чтобы найти упаковку нужного объема, пользователю приходится заходить в каждую позицию в надежде там ее найти. Это чрезвычайно неудобно, и он вынужден тратить драгоценное время на поиски. Данная проблема может стать для пользователя критичной, так как он может просто не найти нужный ему товар.
Отфильтрованные товары в каталоге (слева верхняя часть страницы, справа — нижняя)
Также хочется отметить забавный факт – по какой-то причине в отфильтрованном по бренду кошачьего корма каталоге оказывается собачий корм с забавной фразой «для собак с индейкой уткой и еще чем-то». Возможно, это баг или шутка программиста?
Пользователь: «Барсик, тут опять предлагают корм для собак. Может, стоит тебе сделать анализ ДНК, вдруг твой папа был все-таки собакой?»
Карточка товара
На карточке товара ссылка на отзывы выглядит некликабельной. Также в приложении нет возможности добавить свой отзыв.
Карточка группы товаров
Карточка фактически представляет не товар, а группу товаров одного типа, но упаковки разного объема. До этого пользователь может догадаться далеко не сразу, так как обычно в интернет-магазинах разные объемы упаковки – это разные карточки товара. Как было сказано выше, покупателю в этом случае сложно найти нужный корм.
Пользователь: «Я с таким мускулом на большом пальце могу стать чемпионом по бодибилдингу или хотя бы армреслингу»
Рекомендуем после добавления фильтра по размеру упаковки разделить товары на отдельные карточки.
Корзина и оформление заказа
Содержимое корзины представлено слишком мелким шрифтом. По кнопке добавления еще одной единицы товара сложно попасть.
Корзина
При оформлении заказа почему-то не подставляется номер телефона, хотя он указан в аккаунте.
Оформление заказа (не подставляется номер телефона)
При оформлении заказа я не заполнила два поля. При нажатии на кнопку оформления появилось непонятное сообщение, что какие-то поля заполнены неверно (а именно поле «Ночной заказ»). В поле «Ночной заказ» появился восклицательный знак, но было не совсем понятно, что его нужно заполнить. Ведь оно пусто, а в ошибке говорилось о «неверно» заполненных полях (а не о пустых). Кроме того, было довольно сложно понять, что вообще можно вписать в поле с таким нестандартным названием «Ночной заказ». Данная ошибка является критичной, так как может помешать пользователю совершить заказ и привести к деинсталляции приложения.
Пользователь: «Ночной заказ выглядит интригующе…»
Оформление заказа. Ошибка в поле «Ночной заказ»
Внешний вид кнопки «Заказать» не соответствует гайдлайнам Google, поэтому рекомендуем ее .
В аккаунте было 100 накопленных баллов, нигде на этапе заказа не было предложено данные баллы потратить. Как их использовать – непонятно. Ошибку можно назвать критичной, так как она оказывает непосредственное влияние на лояльность клиентов.
Заключение
В целом приложение выглядит довольно интересным и при исправлении наиболее критичных ошибок станет работать эффективнее. Надеемся, что наш обзор поможет вам избежать совершения подобных ошибок. .
Юзабилити-специалист: «Вот обзора и конец, кто читал, тот молодец»