Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
7 правил юзабилити веб-сайтов, предназначенных для мобильных устройств. Предоставьте пользователям то, что им нужно, в максимально короткий срок.




ПОИСК по сайту


    Полный список статей
/ правил юзабилити веб-сайтов / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Число людей, пользующихся Интернетом с мобильных устройств, сильно увеличилось за последние несколько лет. В Великобритании, например, рынок мобильных телефонов близок к насыщению, и все больше браузеров, устанавливаемых на мобильных устройствах, позволяют просматривать обычные веб-сайты, спроектированные для стандартных компьютеров. Согласно данным 3G.co.uk, 20% всех пользователей мобильных телефонов в Великобритании выходят в Интернет со своих мобильных устройств.

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

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

1. Предоставьте пользователям то, что им нужно, в максимально короткий срок.

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

Yahoo! предоставляет пользователям мобильных телефонов такую возможность при помощи нового мобильного сервиса oneSearchTM. Поиск по ключевому слову "кино" выдает список ближайших кинотеатров, где указаны их адреса и телефоны. Щелкнув ссылку "Call" (Позвонить) рядом с номером телефона, пользователь может позвонить по этому телефону: номер начинает набираться автоматически. Следующим шагом, очевидно, станет возможность перемещаться по интерактивной карте, на которой будут указаны все объекты, найденные при поиске по ключевому слову.

2. Не размещайте все навигационные элементы на каждой странице

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

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

3. Четко выделяйте на экране выбранные пользователем элементы

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

В качестве отрицательного примера рассмотрим мобильный портал O2, где кнопки выделяются недостаточно четко. Кнопка, на которой находится курсор, просто выделяется голубой рамкой; на светло-голубом фоне эта рамка практически неразличима. Пользователям приходится перемещать положение курсора несколько раз влево и вправо, пока они не поймут, где именно находится их курсор. Еще хуже обстоят дела с юзабилити сайта Thomson Local, где при выделении полей всего лишь незначительно увеличивается толщина их границы. Ссылки на этом сайте, напротив, выделяются очень четко: цвет шрифта и фона ссылки изменяется, контрастируя с белым фоном самой страницы.

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

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

На сайте Thomson Local, например, невозможно посмотреть, где именно расположены интересующие пользователя компании, и какие компании расположены в определенной местности. Пользователи часто вводят сокращенные формы слов (например, используют в качестве критерия поиска тип организации), и это приводит к тому, что поиск дает неверные результаты. Так, сайт Odeon для пользователей мобильных устройств предоставляет пользователям две возможности поиска кинотеатра: они могут ввести название кинотеатра в поле поиска или просматривать страницу сайта, чтобы найти нужный кинотеатр. Те, кто использует форму поиска, обычно делают больше ошибок и реже достигают своей цели, чем те, кто просматривает содержимое страниц: обычно пользователи могут найти то, что они искали, всего лишь щелкнув пару ссылок на странице.

5. Показывайте только значимую информацию

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

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

Ссылки в верхней области страниц сайтов BAA и Thomson Local занимают большой объем пространства на экране и затрудняют поиск информации. Ссылки About BAA (О компании BAA), Help (Помощь) и Advertise with us (Веб-мастеру) также не нужны мобильным пользователям.

6. Разместите на странице элементы управления для навигации

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

Мобильный сайт, позволяющий спланировать экскурсию по Лондону, разместил основные ссылки для навигации по сайту – Next page (На следующую), Back to results (Вернуться к результатам) и New journey (Новый маршрут) внизу каждой страницы.

7. Разрабатывайте дизайн страниц так, чтобы обеспечить максимум удобства мобильным пользователям

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

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

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

Краткое резюме

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

(Опубликовано на сайте www.webcredible.co.uk) upa.org.ru/UsabilityBulletin-15.aspx?EntryID=707


Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0369 s.