Обучение ui/ux дизайну

Мобильный UX-дизайн: страничка продукта

На сегодняшний день 30% покупок онлайн производится при помощи мобильных телефонов. Когда дело доходит до совершения покупок, пользователь хочет, чтобы его опыт был безупречным. В связи с этим просто необходимо помочь ему пройти через все этапы процедуры покупки с наименьшими усилиями с его стороны.

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

В данной статье речь пойдет о страничке продукта и важных элементах, присутствующих на ней: изображение продукта, его описание и кнопка «Добавить в корзину».

Что такое страничка продукта?

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

Мобильный UX-дизайн: страничка продукта

Изображения продукта

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

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

Главное изображение продукта должно быть выше сгиба странички; не заставляйте пользователя прибегать к прокрутке, чтобы просто увидеть изображение продукта.

Мобильный UX-дизайн: страничка продукта

Предоставьте галерею изображений

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

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

К примеру, если вы продаете аудио ресивер, обязательно покажите пользователю все выходы и входы, находящееся на задней панели. Так вы поможете пользователю понять, какими опциями обладает данное устройство.

  • Для оптимального использования галереи применяйте фотографии вместе с выделенными в тексте деталями, которые изображены на фото.
  • Горизонтальная прокрутка изображений продукта
  • Пользователи должны иметь возможность полноценной горизонтальной прокрутки изображений без потребности прокручивать вниз.

Мобильный UX-дизайн: страничка продукта

Исключительно материалы высокого качества

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

  • Графика для Android должна иметь разрешение XHDPI (XXHDPI).
  • Для iOS желательно предоставлять материалы с разрешением @3x для iPhone 6 Plus и в @2x для прочих устройств.

Мобильный UX-дизайн: страничка продукта

Пользователи не должны видеть на изображении пиксели

Нужно добавлять функцию увеличения картинки. Пользователь должен иметь возможность легко увеличивать изображение продукта – с помощью кнопки или двойным кликом. Это в особенности важно для магазинов одежды, поскольку именно там клиенты очень щепетильно относятся ко всем деталям.

Увеличенная картинка также должна иметь высокое качество.

Мобильный UX-дизайн: страничка продукта

Слева: при включении увеличенного режима просмотра пользователи вынуждены смотреть на какую-то определенную часть. Справа: пользователи сами выбирают, какую часть картинки увеличить, с каким масштабом.

Описание продукта

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

Применяйте понятный формат

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

Мобильный UX-дизайн: страничка продукта

Текст должен быть легко читаем

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

При создании дизайна текстовой части в обязательном порядке примите к сведению следующие советы.

Размер шрифта. Чтобы текст было легко читаем, размер шрифта должен быть 11 и больше, а типы применяемых шрифтов должны использоваться единообразно по всему приложению. Правилом для мобильных устройств считается использование 40 символов на строку.

Мобильный UX-дизайн: страничка продукта

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

Инструкция WC3 по обеспечению доступности веб-контента устанавливает минимальные значения контрастности, при котором люди со слабым зрением могут читать текст. Согласно этим рекомендациям, соотношение контрастности между фоном и цветом должно находиться в пределах 1-21, основываясь на интенсивности света или освещенности.

Мобильный UX-дизайн: страничка продукта

Слева: советы по контрастности не выполнены, поэтому текст плохо различим на фоне.

Интервалы. Применительно к маленьким дисплеям вопрос выдержки интервалов является очень важным. Правильно подобранные интервалы обеспечивают удобное чтение.

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

Мобильный UX-дизайн: страничка продукта

Кнопки побуждения к действию (СТА)

Пользователь никогда не должен искать так называемые кнопки СТА.

Первичные кнопки (заказать сейчас, добавить в корзину) должны быть наиболее заметными элементами на страничке, и пользователя должно тянуть к ним. Вторичные кнопки СТА (добавить в список желаний, поделиться) должны находится в непосредственной близости от первичных кнопок.

Мобильный UX-дизайн: страничка продукта

Тест с прищуриванием первичных СТА

Для анализа того, насколько заметна кнопка, можно использовать тест с прищуриванием.

Прищурьтесь так, чтобы изображение странички стало размытым. Выделяется ли ваша кнопка на фоне остальных элементов?

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

Мобильный UX-дизайн: страничка продукта

Пример тестирования с прищуриванием

Прикрепленные кнопки СТА

Хорошая практика – это когда кнопки побуждения к действию выше сгиба странички. Первичные кнопки СТА обязательно должны быть на виду, даже когда пользователь прокручивает страничку вниз. Это дает ему возможность действовать в любое время.

Мобильный UX-дизайн: страничка продукта

Размер нажимаемых элементов достаточно велик

Облегчите пользователю управление – сделайте так, чтобы элементы можно было легко нажимать.

  • Android рекомендует для различных элементов, таких как ярлыки, кнопки, иконки и т.п. применять один размер нажимаемой части, а именно 48dp.
  • iOS же рекомендует 44х44 точки.

Мобильный UX-дизайн: страничка продукта

Воздействие на первичные СТА должно сопровождаться видимой ответной реакцией

Мобильный UX-дизайн: страничка продукта

В случае если после какого-то воздействия, к примеру, добавления в корзину, пользователь не наблюдает ответной реакции, то это его заставляет гадать, сделал ли он все верно.

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

Мобильный UX-дизайн: страничка продукта

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

Заключение

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

перевод

Понравилось? Расскажите друзьям:






Комментарии:

(напишите, что вы думаете об этом)