Как создать полезный мобильный сайт?

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

Как создать полезный мобильный сайт?

Различия между настольными и мобильными веб-сайтами

Изменения в определении юзабилити обусловлены различиями между мобильными терминалами и традиционными «читателями» информации, такими как ноутбуки или настольные компьютеры. Оказалось, что сжатие страницы или удаление из нее графики должно сопровождаться изменением принципов дизайна, как в плане информационной архитектуры, так и в плане верстки. Согласно исследованиям, проведенным Якобом Нильсеном, почти 1/3 пользователей испытывают проблемы с работой мобильных версий сайтов, в то время как в случае с десктопными сайтами этот показатель составляет всего 15%.

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

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

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

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

Что следует учитывать при разработке мобильного веб-сайта?

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

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

Меню

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

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

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

Контент

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

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

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

Пользовательский опыт

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

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

Резюме

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

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

Разрешение

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

Адаптация к браузеру

В каждой операционной системе сайт может отображаться по-разному. Например, Android имеет собственный браузер контента, но это не исключает возможности использования на нем Opera Mini или Firefox Mobile. По этой причине мобильные веб-сайты следует создавать и тестировать с помощью прогрессивных веб-браузеров, которые часто «самосжимают» страницу до размеров мобильного дисплея. Однако многое зависит и от дизайна конкретного сайта. Например: мобильный сайт onet.pl имеет фиксированную максимальную ширину. Но на маленьком экране он будет меняться и подстраиваться под размер дисплея.

Большие кнопки

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

Пути навигации и пути меню

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

Информационная архитектура

Размещение информации и элементов на мобильном сайте часто подразумевает сведение колонок к единому «потоку» информации. Большинство телефонов имеют вертикальные экраны, поэтому редко уместно использовать более одной колонки контента.

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

Отказ от элементов flash и JavaScript
создает двойную проблему: во-первых, они перегружают передачу, а во-вторых, их не всегда можно будет отобразить. Однако стоит отметить новые тенденции в этом сегменте «интернет-мобильности». Например: до сих пор страницы в Opera Mini загружались только после полной передачи данных на устройство, теперь же они загружаются пакетно — точно так же, как и в настольной версии. Это решение определенно ускоряет — или, по крайней мере, создает такое впечатление — загрузку страниц. Это особенно важно для графики, которая загружается в более низком качестве, что делает ее намного «легче».
Глоссарий
Пользовательский опыт — общий набор впечатлений и ощущений, которые испытывают пользователи при использовании интерактивных продуктов. Позитивный UX обеспечивает сайты, которые привлекательны для пользователей с точки зрения функциональности, эргономики и удобства использования, а пользование ими доставляет им удовольствие, удовлетворяет их потребность в знаниях и/или развлечениях, приносит удовлетворение.
Юзабилити — этот термин относится к проектированию интерактивных продуктов с точки зрения их наилучшей эргономики, функциональности и простоты использования. Веб-сайты, созданные в соответствии с принципами юзабилити, фокусируются на интуитивно понятной навигации, минимизации ошибок, ясности и читаемости контента, простой информационной архитектуре, прозрачности и графической эстетике.