Особенности проектирования wap-интерфейсов Ярослав Перевалов www.usability.ru Российское отделение ACM SIGCHI Семинар RusCHI 12 (27) 19 октября 2006 г. - презентация

1 Особенности проектирования wap-интерфейсов Ярослав Перевалов Российское отделение ACM SIGCHI Семинар RusCHI 12 (27) 19 октября 2006 г.

2 2 Особенности проектирования wap-интерфейсов 1.Особенности рабочего окружения и условия использования мобильного устройства 2.Особенности оборудования мобильного устройства 3.Общие эргономические требования к ПИ продуктов для мобильных устройств (МУ)

3 3 1.Особенности рабочего окружения и условия использования мобильного устройства A.Пользователь выполняет много задач одновременно B.Цели пользователей C.Экран мобильного устройства редко находится в условиях идеального освещения

4 4 A.Пользователь выполняет много задач одновременно –Пользователь в движении, частые прерывания –Основная функция МУ (коммуникации, мультимедиа и пр.) Рекомендации: –Следует чётко обозначить контекст выполняемой в приложении операции: короткие, но информативные заголовки корректные наименования ссылок и командных кнопок, других объектов –Действия должны носить обратимый характер, программа должна быть терпима к случайным ошибкам пользователя –В интерфейсе не должно быть ничего лишнего, что отвлекало бы внимание пользователя или запутывало бы его в принятии решений. –Структура возможных действий и их последствий должна быть максимально явной и очевидной. –Не следует экономить на памяти пользователя – критическая информация, важная для выполнения задачи, должна быть доступной. 1.Особенности рабочего окружения и условия использования мобильного устройства

5 5 B.Цели пользователей МУ –Отличаются от целей пользователей стационарных устройств (более прямые и связаны с контекстом) –Пользователи не заинтересованы в длинных документах и их тщательном прочтении, рассматривании, изучении Рекомендации: –Следует чётко специфицировать цели, задачи и информационные потребности пользователя продукта, описать среду и условия применения –Объёмную информацию (приемлемую для отображения на больших дисплеях) следует специально форматировать в виде, пригодном для отображения на МУ: выводы и итоговые данные следует помещать в начало страницы ключевые слова и критические данные следует помещать в начало абзаца, в таблицах отображать только самые важные столбцы, итоговые строки выносить в начало таблицы и т.д. 1.Особенности рабочего окружения и условия использования мобильного устройства

6 6 C.Экран МУ редко находится в условиях идеального освещения –ЖК-дисплеи МУ чувствительны к солнечному освещению – теряют контрастность и разглядеть на них текст бывает затруднительно. Рекомендации: –Следует особое внимание уделять соблюдению наивысшего контраста текста: располагать тёмный текст на светлом фоне, или наоборот – светлый текст на тёмном фоне (наивысший контраст даёт отношение чёрный/белый). –Желательно избегать ярких фоновых заливок и использования графических обоев, затрудняющих восприятие текстовой информации. Если всё-таки таковые используются, то следует применять двуцветные шрифты (чёрные символы с белой окантовкой). –По возможности следует применять крупный шрифт или обеспечить пользователя возможностью изменять размер шрифта. 1.Особенности рабочего окружения и условия использования мобильного устройства

7 7 2.Особенности оборудования мобильного устройства A.Малоразмерный экран B.Параметры экранов значительно варьируются C.Малоразмерный кэш и cookies D.Ограниченные возможности ввода E.Пропускная способность и цена трафика

8 8 A.Малоразмерный экран –Большинство мобильных устройств имеет ограниченный размер экрана (128 х 128 пикселей) Рекомендации: –Информация должна быть представлена в сжатом, но информативном виде. –Лишних и второстепенных деталей не должно присутствовать в интерфейсе –Следует использовать принцип «вложенности», т.е. давать информацию порциями, когда каждый информационный элемент может быть более подробно расшифрован на отдельной странице. 2.Особенности оборудования мобильного устройства

9 9 B.Параметры экранов значительно варьируются –У различных устройств экраны разного размера и могут отображать различное количество цветов Рекомендации: –Следует применять вёрстку без привязки к размерам экрана, так, чтобы данные корректно отображались на экранах разного размера –Цветовое оформление должно адекватно отображаться на экранах с различной глубиной цвета, в т.ч. и монохромных –Кодирование цветом допустимо только лишь как вспомогательное, но не основное 2.Особенности оборудования мобильного устройства

10 10 C.Малоразмерный кэш и cookies –Количество информации, отображаемое на одной странице, ограничено –Количество последовательных экранов, сохраняемых в памяти устройства, ограничено –Количество данных о посетителе сайта, которые устройство может запомнить, ограничено Рекомендации: –Страницы с объёмным содержимым (длинные списки и тексты) следует разбивать на несколько страниц –Система навигации должна быть минимальной, но соответствовать текущим потребностям (выполняемой задаче) пользователя –Следует использовать оптимизированный код и небольшие CSS 2.Особенности оборудования мобильного устройства

11 11 D.Ограниченные возможности ввода –Большинство МУ обладают весьма ограниченным набором средств ввода: клавиатура с небольшим количеством клавиш, размер клавиш маленький, чаще всего указательное устройство отсутствует. –Возникают трудности корректного набора длинных адресов с большим количеством знаков препинания, корректного заполнения форм со многими полями и т.п. –Далеко не на всех МУ есть кнопка Back, либо пользователи могут не догадываться о существовании такой возможности. –Пользователь обычно может вводить информацию только одной рукой (иногда только одним-двумя пальцами), т.е. скорость ввода может быть значительно низкой, а ошибки ввода – значительно частыми. Рекомендации : –Следует свести количество нажатий клавиш к минимуму. Например, следует использовать как можно более короткие URI- адреса –Следует избегать полей со свободным пользовательским вводом. Например, следует заменять поля ввода другими контролами, которые не требуют длительного ввода: списками выбора или радиогруппами. –Количество полей, обязательных для заполнения, должно быть сведено к минимуму, необязательные для заполнения поля убрать вообще либо вынести на отдельную страницу. 2.Особенности оборудования мобильного устройства

12 12 D.Ограниченные возможности ввода Рекомендации (продолжение): –Максимальное количество полей в заполняемых пользователем формах должно быть заполнено значениями по умолчанию. –При первом посещении пользователем формы ввода можно заполнить форму наиболее часто употребимыми (вводимыми другими пользователями) значениями по умолчанию. –Если пользователь заполнял уже эту форму, то при повторном её посещении следует восстановить её заполненный вид (опционально – по желанию пользователя). –Если это возможно, следует применять технику автозаполнения/автоподстановки (приложение по нескольким первым введённым символам предлагает пользователю варианты из ранее вводимых значений для подстановки в это поле). –Следует устанавливать по умолчанию режим ввода, язык и формат ввода там, где это уместно –Там, где уместно ограничить набор вводимых символов, следует сделать это. Например, при вводе телефонного номера или указания времени, вряд ли потребуется вводить буквы. –В навигации следует обеспечивать возврат к предыдущему экрану (Back) –Навигационное меню (ссылки на панели глобальной навигации по основным разделам сайта, присутствующей на каждой странице) должно иметь клавиши быстрого перехода (атрибут accesskey) – это даст возможность пользователям устройств без позиционирующих указателей избежать утомительного повторного нажатия навигационных клавиш. 2.Особенности оборудования мобильного устройства

13 13 E.Пропускная способность и цена трафика –Мобильные сети могут быть существенно медленнее сетей стационарных, и часто обладают существенными временными задержками. Это особенно ярко чувствуется на страницах с объёмным содержимым и при быстрых навигационных переходах (листании страниц) –Передача данных стоит денег –Мобильные устройства часто поддерживают только ограниченный набор типов мобильного контента. Как следствие, полученный по ссылке контент может быть такого типа, который не поддерживается мобильным устройством пользователя –Даже если МУ поддерживает закачанный контент, полученный контент может не удовлетворить потребителя – например, большая картинка только частично отображается на экране, или проигрываются не все голоса полифонической мелодии –Страницы могут содержать контент, который не был явно запрошен пользователем, и пользователь не ожидает его получать (это, например, может быть реклама или большие изображения) – такой нежелательный материал снижает юзабилити и повышает цену использования 2.Особенности оборудования мобильного устройства

14 14 E.Пропускная способность и цена трафика (продолжение) Рекомендации: –Следует всеми возможными способами минимизировать объём единомоментно загружаемых страниц (оптимизировать код и изображения, использовать небольшие картинки только там, где это необходимо, разбивать объёмные страницы на несколько страниц, и т.д.) – это позволит повысить скорость реакции системы и цену использования, обусловленную объёмом трафика. –Большие изображения следует предварять миниатюрами с явным указанием размеров и объёма загружаемой картинки. –Ссылки на любой загружаемый мобильный контент следует специфицировать в явном виде (тип, объём, размер, и т.д.). –Реклама должна быть явным образом и единообразно обозначена. 2.Особенности оборудования мобильного устройства

15 15 3.Общие эргономические требования к ПИ продуктов для МУ 1. Выбор способа представления, вида интерфейса в зависимости от типа мобильного устройства 2. Навигация и ссылки 2.1. Панель навигации 2.2. Баланс между широкой и глубокой структурой навигации 2.3. Клавиши доступа (клавиши быстрого перехода) 2.4. Наименования ссылок и их описания 2.5. Image Maps 2.6. Автообновление, перенаправление и размножение окон 2.7. Ссылки на внешние ресурсы 3. Тело страницы: расположение блоков и элементов, информационное содержимое 3.1. Содержимое страницы (контент) 3.2. Объём страницы 3.3. Прокрутка 3.4. Графические изображения, картинки 3.5. Цвет 4. Вёрстка и структурная разметка страниц 4.1. Заголовок окна страницы 4.2. Фреймы 4.3. Таблицы 4.4. Структурная разметка 4.5. Нетекстовые элементы 4.6. Размер изображений 4.7. Единицы измерения объектов 4.8. Листы стилей 4.9. Оптимизация Тип контента Сообщения об ошибках Шрифты 5. Пользовательский ввод 5.1. Табулирование элементов интерфейса 5.2. Метки полей и контролов

16 16 Полное руководство (> 70 рекомендаций): Рекомендации (выжимка): –Вверху контент, навигация – внизу. –Суть контента - наверху –Длинные списки логически разбиваются на более короткие (не более 20 элементов на страницу) –«Всё в одном окне» –Никакого автообновления –Один CSS на страницу –Объём страницы < 25 Кб –Избегайте таблиц и фреймов –Ограничение шрифтового оформления 3.Общие эргономические требования к ПИ продуктов для МУ

17 17 Спасибо за внимание! Ярослав Перевалов Особенности проектирования wap-интерфейсов