Список vs. сетка: секреты юзабилити мобильного интерфейса

22.12.2015 Маркетинг

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

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

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

  • 15 образцовых примеров мобильного веб-дизайна

Перечень vs. Сетка

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

Но пользователь все равно будет надеяться на описание.

Формат просмотра «Сетка» предполагает размещение контента в два и/либо более столбца. В этом случае солидную часть экрана занимают изображения, а текст сведен до минимума. Пользователь ориентируется на картину, делая выбор.Список vs. сетка: секреты юзабилити мобильного интерфейса

Форматы просмотра: слева — перечень, справа — сетка

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

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

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

Слева — сетка: доступно 6 вариантов (пользователям приходится большое количество скроллить, дабы просмотреть целый ассортимент). Справа — перечень: 10 вариантов (пользователям не приходится продолжительно прокручивать контент, но он менее нагляден)

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

Твитнуть цитату

  • Как применять «аккордеон»-меню для мобильной версии лендинга

Перечень предотвращает поспешный выбор

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

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

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

Формат «Сетка»: красочные изображения заставляют пользователя делать поспешный выбор. Формат «Перечень»: текст оказывает помощь сделать осознанный выбор

Сетка — лучшее ответ для изучения изюминок товара

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

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

Но в случае если категория выбрана, изображение товара будет уместно:

Формат «Сетка»: легко разглядеть конкретные подробности товара

  • Изображения как реализовывающий контент

Делаем выводы

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

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

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

Высоких вам конверсий!

По данным: uxmovement.comimage source paramarphoto

Случайные статьи:

Как улучшить юзабилити мобильного приложения


Подборка похожих статей: