10 отличий «мобильных» сайтов от обычных


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

10 Ways Mobile Sites Are Different from Desktop Web Sites

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

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

    Однако, дизайн сайтов для мобильников только начал свое развитие. Якоб Нильсен в 2009 году провел исследование. Результативность посетителей мобильных сайтов (заходили с мобильников) ограничивалась 64% успешных попыток, а посетители десктоп-версии лучше справились с заданием — доля успешных попыток составила 80%. Судя по всему, форм-фактор играет большую роль на результативность пользователей и на их взаимодействие с продуктом, поэтому создавать мобильные версии сайтов надо по-иному.

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

1. Приоритеты

    В отличие от привычного дизайна для мониторов с разрешением около 1024х768, приходится справляться с маленьким экраном в 320*480 и при этом стараться сохранить все богатство впечатлений от полного сайта. Полные сайты содержат много разной информации, а мобильные должны включать только жизненно необходимые функции и информацию, необходимые в данный момент, как в примере сайта Orbitz. В мобильных версиях сайтов весь приоритет должен отдаваться тому контенту, который понадобиться человеку с мобильником в руках. Понимание нужд аудитории сильно влияет на проектирование сайта во всех отношениях.

Картинка 1 — Содержание полной версии Orbitz
Картинка 2 — Содержание мобильной версии Orbitz

2. Вертикальная навигация

    Горизонтальная навигация, как на сайте Urban Outfitters на картинке 3, это широко применяемая система структуризации содержания на сайтах. Посетители сканируют меню слева направо, нажимают на ссылку и переходят на другую страницу. Статья на сайте UIE под названием «The Challange of Moving to Horizontal Navigation» (Проблемы перестройки на горизонтальную навигацию) раскрывает преимущества горизонтальной навигации, расположенной сверху страниц, вместо вертикального меню слева. В случае без вертикального меню посетителям проще фокусироваться на контентной части сайта, тогда как вертикальное меню слева может отвлекать. В 90% просмотренных мною мобильных сайтов используется только вертикальное меню, включая и Urban Fitters на картинке 4.

Картинка 3 — Горизонтальное меню на десктоп-сайте Urban Outfitters
Картинка 4 — Вертикальная навигация на мобильном сайте Urban Outfitters

3. Бары, закладки и гиперссылки

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

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

Картинка 5 — Сайт Kayak с кучей гиперссылок
Картинка 6 — Мобильный сайт Kayak без гиперссылок

4. Текст и графика

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

Картинка 7 — Полный сайт Dell с изображениями
Картинка 8 — Мобильная версия сайта Dell с минимумом графики

5. Контекстуальная
и глобальная навигация

    Полноценные сайты используют разные виды навигации, как сайт Best Buy на рисунке 9. Есть глобальные меню, которые видно на всех страницах, а есть контекстуальные, которые зависят от просматриваемой части сайта. Глобальная навигация используется на мобильных сайтах, а вот контекстуальная нет. Мобильный сайт Best Buy на рисунке 10 показывает типичную мобильную навигацию.

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

Картинка 9 — Разные виды навигации на сайте Best Buy
Картинка 10 — Мобильный сайт Best Buy без контекстуальной навигации

6. Подвалы

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

Картинка 11 — Подвал на сайте Dell
Картинка 12 — Упрощенный подвал на мобильном сайте Dell

7. Хлебные крошки

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

Картинка 13 — Хлебные крошки на Amazon

8. Индикатор прогресса

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

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

Картинка 14 — Индикатор прогресса на Amazon

9. Интеграция с телефоном

    Смартфоны сделаны для общения и звонки являются их основной функцией. Несмотря на все ограничения, которые мобильная платформа накладывает на дизайн сайтов, она открывает возможности, которые нельзя использовать на обычных сайтах. Например, нажав на ссылку телефон может сразу набрать номер и соединить вас с кем-то. Это полезно для магазинов, где можно реализовывать оформление заказа по телефону (см. картинку 15). Уместна и рассылка с сайта текстовых сообщений на мобильник. Обычно, сайты позволяют выбрать номер и сразу звонить на него или посылать SMS, а не заставлять человека вводить номер вручную.

Картинка 15 — На мобильном сайте Best Buy можно сделать заказ по телефону

10. Локализованный
и персонализированный поиск

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

    Многие мобильные устройства могут автоматически определять свое местонахождение и передавать эти данные в интернет, чтобы получить специальные результаты поисков. Такое используется на Best Buy, в поиске ресторанов на Yelp и на Kayak при поиске аэропорта (см. картинку 16).

Картинка 16 — Автоопределение географического местонахождения для поиска аэропортов

Вкратце

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

1. Мобильные сайты включают только самые важные функции и контент, которые необходимы в данный момент человеку.

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

3. Гиперссылки являются характерной чертой интернета. На страницах мобильных сайтов его либо мало, либо вообще не встречается.

4. На больших сайтах используется много графики для разных целей. Мобильные сайты не должны быть нагружены графикой и использовать ее только в навигационных целях.

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

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

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

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

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

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

перевод: Рехимкулов Ринат

Реклама

10 отличий «мобильных» сайтов от обычных: 4 комментария

  1. pressform:

    Мобильные вебсайты — явление временное. Скоро будут и есть телефоны с полными браузерами.

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

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

  2. Эльдар:

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

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s