Главная > Дизайн для умных > Убираем неважную информацию с первого экрана пониже

Убираем неважную информацию с первого экрана пониже

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

Как улучшить дизайн своего сайта

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


Когда пишешь для интернета, нужно быть кратким. В мобильной сфере это требование еще строже: нужно писать не просто кратко, а очень кратко. Как же стать максимально лаконичным, но донести до пользователя нужную информацию? Сделать нужно так, как на сайте службы «Такси Оптимальное», где вызов такси Житомир осуществляется одним кликом на «Онлайн заказ».

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

Пример: мобильные купоны

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

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

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

Групон скриншот дизайна

Качественно структурированную информацию приводят в верхней части страницы. Новый дизайн остался многослойным, но детализированную информацию выводят не на второстепенную страницу, а в нижней части первой страницы под кнопкой More about this deal.

На ресурсе LivingSocial (конкурент сайта Groupon) дела с дизайном обстоят хуже. Здесь нарушили сразу несколько рекомендаций по юзабилити для мобильных устройств:

LivingSocial скриншот нового мобильного дизайна

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

А мобильные пользователи всегда слишком заняты, чтобы тратить время на поиск информации. Кнопка Buy now на сайте LivingSocial соответствует рекомендациям по удобству обращения с данными элементами на сенсорном экране. Кнопка большая, четкая, и рядом с ней нет никаких элементов, которые пользователь может нечаянно нажать.

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

Первый пользователь о сайте LivingSocial:

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

О сайте Groupon:

Версия, в которой все можно сделать быстро.

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

Второй пользователь о сайте LivingSocial:

Приходится прочитать это все, чтобы понять, в чем суть.

О сайте Groupon:

Мне нравится этот быстрый формат со списками.

Читайте также:

Прокомментируете вышенаписанное?

* обозначены обязательные для заполнения поля