Оглавление
Благодарности ..................................................................................... 11
Об авторах ............................................................................................. 13
Предисловие......................................................................................... 15 Особенности мобильной среды ........................................................... 16 Скриншоты в качестве примера ........................................................... 18
1 Исследования: как мы изучали юзабилити.............................. 21 Исследования с ведением дневника .................................................... 23 Тестирование юзабилити ..................................................................... 24 Качественные показатели пользовательской аудитории ...................... 26
2 Мобильная стратегия .................................................................... 31 Юзабилити зависит от категории мобильного устройства ................... 37 Отдельные функции для работы в мобильной среде ............................ 40 Сравнение мобильного и полнофункционального сайта ...................... 42 Сайты, оптимизированные для мобильных устройств .................... 45 Почему стандартные сайты плохо функционируют на мобильных устройствах ............................................................. 46 Мобильный компьютер взыскательнее настольного............................................................ 49 Адаптивный дизайн ........................................................................ 54 Правила юзабилити — все относительно ....................................... 60 Оглавление
7
Мобильные сайты против приложений: близится изменение стратегии ............................................................ 61 Современная стратегия мобильных разработок: прежде всего приложения .............................................................. 61 Мобильные разработки в будущем: прежде всего сайты ................ 63 Когда изменится стратегия мобильных разработок ........................ 68 Дизайн мобильных приложений ........................................................... 70 Мобильные приложения предназначены для нерегулярного использования ....................................................... 70 Половинчатый прогресс: с надеждой на светлое будущее ................... 74
3 Дизайн устройств с небольшим экраном ................................. 79 Нерациональное использование площади мобильного экрана ............ 82 Окантовка....................................................................................... 88 Жесты вместо окантовки ................................................................ 94 Сравнение обобщенных и перегруженных команд.......................... 97 Ситуативное исследование: оптимизация экрана для работы с мобильным устройством ......................................... 101 Набор текста на мобильном устройстве ............................................. 111 Скорость загрузки ............................................................................. 115 Долой преждевременную регистрацию ............................................. 117 Ситуативное исследование: мобильное приложение Wall Street Journal ......................................... 125 Сумбурный экран-заставка .......................................................... 126 Как бренды теряют популярность ................................................. 128 Улучшенный дизайн...................................................................... 130 Новая последовательность работы приложения ........................... 133 В новом году стало лучше ............................................................ 137
4 Контент для мобильной среды .................................................. 141 Мобильный контент — двойная сложность ......................................... 142 Почему трудно читать с мобильного устройства ................................ 144 Отсекайте лишнее ............................................................................. 148 Вода — это плохо ........................................................................ 149 Проверенные старые слова .......................................................... 151 Нужно ли указывать автора мобильного контента ......................... 153 8
Оглавление
Убираем неважную информацию на второстепенные экраны ................................................................ 156 Пример 1. Мобильные купоны ...................................................... 157 Пример 2. Последовательное раскрытие в Wikipedia .................... 159 Перенесение данных: первичная информация и все остальное ............................................................................ 160 Информационная мини-архитектура: структурирование данных по теме ..................................................... 164 Линейная разбивка на страницы? Вряд ли.................................... 165 Сортировка по алфавиту? Уничтожить .......................................... 166 Пример: структурирование по важности....................................... 170 Структура, обусловленная применением ..................................... 172
5 Планшеты и электронные книги ............................................... 175 Юзабилити при работе с iPad ............................................................. 176 Планшеты — устройства для совместного использования............ 180 Для чего используют iPad ............................................................. 181 Тройная опасность ....................................................................... 182 Непоследовательный дизайн ....................................................... 192 Метафора печати ......................................................................... 198 Карточные акулы против веселых роллеров ................................. 200 Неоднозначность перелистывания ............................................... 203 СМН: слишком много навигации .................................................. 205 Экран-заставка и помехи при запуске .......................................... 211 Ориентация .................................................................................. 212 Как улучшить юзабилити .............................................................. 214 Юзабилити Kindle .............................................................................. 215 Kindle: электронная книга ............................................................. 215 Юзабилити Kindle Fire ................................................................... 219
6 Взгляд в будущее ......................................................................... 231 Трансмедийный дизайн для трех экранов .......................................... 232 ПК не уйдут со сцены .................................................................... 233 Третий экран: ТВ .......................................................................... 234 Практика работы в трансмедийной среде..................................... 235 Оглавление
9
Выход из плоскости ........................................................................... 237 Будущее за Гарри Поттерами ............................................................. 240 Магия нового поколения .............................................................. 241 Не обижайте маглов ..................................................................... 242
Приложение. Немного истории ...................................................... 245 Полевое исследование 2000 г. ........................................................... 247 WAP не работает ................................................................................ 248 Дежавю: возвращение в 1994 г. .......................................................... 249 Самое лучшее мобильное приложение: убиваем время ..................... 251
Алфавитный указатель ..................................................................... 252
2 Мобильная стратегия .
Мы начали изучать юзабилити мобильных телефонов в 2009 г., и это был совершенно бесславный опыт и для нас, и для пользователей, и для исследователей. Если говорить о практике использования, то казалось, что машина времени перенесла нас в 1998 г.: сходство между техникой использования мобильного телефона в 2009 г. и стационарного компьютера с выходом в Интернет в 1998 г. было поразительным.
Качественные показатели пользовательской аудитории
31
Крайне низкий коэффициент успешного выполнения был нормой. Работая с сайтами на мобильном телефоне, посетители часто не могли выполнить поставленные задачи.
Скорость загрузки в первую очередь определяла стиль
работы пользователя. Большинство страниц загружалось очень долго, особенно на телефонах поколения до 3G. Скорость просмотра веб-страниц самых совершенных устройств тех лет была гораздо меньше, чем у настольного компьютера. Поэтому посетители неохотно загружали дополнительные страницы и легко отступались.
Прокрутка вызывала крупные проблемы юзабилити.
Люди с трудом управляли сайтами, не оптимизированными для просмотра с мобильных устройств. По сравнению с 1990-ми гг. проблема изменилась: она заключалась уже не в том, что пользователи не прокручивали страницу, а в том, что делали это слишком активно. Им приходилось перемещать микроскопическую область обзора на экране мобильного телефона взад-вперед. В результате человек вскоре переставал понимать, в какой части страницы он находится. Зачастую он пропускал какой-то элемент, даже не замечая его.
На рис. 2.1, а–в продемонстрированы различные этапы медленной загрузки сайта NBC на мобильном устройстве при максимально быстром соединении в сети AT & T. Когда страница загрузилась, было очень сложно понять ее структуру с многочисленными изображениями и ссылками, не увеличивая фрагменты. При масштабировании страницы читать текст было проще, но терялся контекст. Посетителю было сложно понять, какая еще информация есть на сайте. При сужении видимой области человек испытывал проблемы с юзабилити, которые очень напоминали сложности слабовидящих людей (рис. 2.1, г). Использование мобильного телефона ограничивает возможности испытуемого, однако, как мы знаем, большинство разработчиков игнорируют проблемы, связанные с удобством восприятия информации.
Из-за перенасыщенности страниц посетители терялись
и путались на странице. Большинство сайтов, которые мы изучили, не кажутся излишне посещаемыми, так как у современных компьютеров очень большие мониторы,
32
2. Мобильная стратегия
а
б
в
Рис. 2.1. Варианты отображения сайта NBC: а, б — этапы отображения при загрузке на мобильном телефоне; в — увеличение страницы повышает удобство чтения текста, но контекст теряется; г — скриншот сайта сделан на настольном компьютере в браузере с экранной лупой
г
2. Мобильная стратегия
33
но на мобильном устройстве это недопустимо. Часто испытуемых озадачивали огромные изображения или длинные страницы, на которых было невозможно обнаружить нужные элементы.
Непривычный пользовательский интерфейс браузера
ограничивал возможности посетителя. Испытуемые использовали свои устройства недостаточно эффективно, так как плохо понимали графический интерфейс.
Отказы JavaScript и проблемы со сложными типами
медиа (например, видео) доставляли дополнительные неудобства.
Нежелание пользоваться Интернетом на мобильном
устройстве для решения большинства задач было очевидным. Наиболее ярко это проявлялось при совершении покупок, а также при выполнении других действий с кредитными картами и расчетами (рис. 2.2 и 2.3).
Рис. 2.2. Программа Fandango’s для Android позволяет расплачиваться кредитной картой через PayPal (такой способ предпочитают многие посетители) Рис. 2.3. Приложение PayPal для Android оптимизировали для работы на мобильном устройстве: аутентификация путем ввода PIN-кода из четырех знаков, а не пароля
Функция поиска в Сети. Испытуемые прибегали к по
мощи поисковика после простейшей провокации. Обычно это первый инструмент, который используют для решения новой задачи.
Традиционный медиа-дизайн применяли в качестве модели для мобильных сайтов. В 1990-е гг. при дизайне
34
2. Мобильная стратегия
многих ресурсов имитировали верстку хороших печатных публикаций. При этом пользователям было сложно взаимодействовать с сайтом. В 2009 г. мобильные сайты разрабатывали, ориентируясь на настольный компьютер, а такая форма не подходила для работы в мобильной среде. Даже на самых лучших телефонах непросто обеспечивать работу с устройством, поэтому необходим качественный дизайн хотя бы в самом простом варианте.
ПРИМЕЧАНИЕ Некоторым пользователям больше нравится совершать покупки через PayPal по двум причинам: во-первых, не приходится вводить длинные номера кредитных карт; во-вторых, создается впечатление, что транзакция более безопасна, поскольку информацию о кредитной карте не нужно сообщать на сайте.
Примером элемента, который плохо подходит для работы в мобильной среде и просто скопирован из дизайна для настольных компьютеров, может послужить самозацикленная карусель (рис. 2.4). Поскольку экран маленький, посетитель нередко быстро прокручивает его вниз, и карусель оказывается выше области обзора. Автоматическая прокрутка элементов карусели проходит впустую, поскольку человек этого не видит.
Рис. 2.4. Сайт IGN (m.ign.com): карусель в верхней части экрана (а) автоматически переходит к следующему сюжету (б), но пользователи часто ее игнорируют
а
б
Верхние навигационные панели (рис. 2.5) довольно популярны в настольной среде, но их сложно перенести в мобильную версию сайта: возникают проблемы, особенно если на панели слишком много элементов. Дизайнер вынужден либо уменьшить эти элементы (тогда по ним будет сложнее попасть на сенсорном экране; рис. 2.5, а), либо расширять навигационную панель (в этом случае она будет занимать слишком много места на экране; рис. 2.5, б). 2. Мобильная стратегия
35
Рис. 2.5. Верхние навигационные панели на двух сайтах: а — Sports Illustrated (m.si.com); б — Entertainment Weekly (m.ew.com)
а
б
Из года в год результаты наших новых экспериментов подтверждают большинство базовых выводов, которые мы сделали в своей первой работе. В настоящее время пользоваться мобильными телефонами более удобно, поскольку растет количество версий сайтов, оптимизировнных для мобильной среды. Дизайнеры теперь лучше понимают, какие элементы уместны на небольшом экране. Тем не менее качество взаимодействия пользователя с устройством при решении задач на мобильном телефоне по-прежнему оставляет желать лучшего. Итак, перечислим изменения, произошедшие в этой области с 2009 г. Общий коэффициент успешности при выполнении задач медленно растет, особенно в случае с мобильными приложениями.
Пользователи начали активнее работать со своими теле
фонами. С 2009 г. мобильная сфера значительно изменилась. По результатам исследования, которое компания Nielsen провела в мае 2012 г., более половины американцев имеют смартфоны, среди которых доминируют две платформы: iPhone и Android. Хотя экосистема Android характеризуется значительной фрагментацией в обращении находится множество различных моделей телефонов и версий операционной системы, сходство между двумя упомянутыми платформами довольно сильное. Даже если человек меняет телефон раз в два года, новая платформа очень напоминает старую (кроме
36
2. Мобильная стратегия
Алфавитный указатель A–Z
Д
3G 32, 38, 81
Дизайн: адаптивный 54–60, 67
Android 26, 34, 36, 38, 55, 63, 65, 69, 76, 87, 94, 99, 100, 106, 157, 226
интуитивный 121, 182
4.0 (Ice Cream Sandwich) 63, 64–66, 99
итеративный 107–109
Apple App Store 68
оптимизированный 34, 36, 39, 40, 42, 44, 45, 47, 54, 70, 228, 229
iOS 26, 53, 63, 72, 77, 91 iPad 16, 25, 26, 37, 44, 53, 63, 82, 83, 94, 101, 165, 176–189, 195, 198–200, 208–212, 214–215, 218, 222– 224, 226 iPhone 23, 26, 36, 38, 39, 60, 63, 65, 66, 68, 75, 76, 95, 121, 125, 126, 142, 143, 144, 167, 176, 177, 186, 210, 211, 217, 218, 247
трансмедийный 232–233, 235–236
З Закон: Мура 62
JavaScript 34, 37
Нильсена 62, 73
Kindle 48, 98, 215–219
Фиттса 110
Fire 26, 44, 60, 63, 65, 67, 98, 99, 215, 219–227 Kinect 234, 240
И Интерфейс:
Nielsen Norman Group 22, 37, 237, 238, 239
кроссплатформенный 67, 70, 236
PayPal 34, 35
пользовательский 22, 26, 28, 34, 38, 39, 47, 49, 50, 58, 60, 63, 66–71, 80, 82, 86, 96, 97, 101, 106, 107, 123, 126, 129, 133, 137, 176, 182, 183, 187, 200, 205, 214, 226, 234, 235, 236, 239, 247
SEO 151 Twitter 23 WAP 26, 41, 74, 75, 246–251 Windows Phone 38, 63, 76
Информационный запах 86, 87–88, 93, 105, 149 Исследования: клиентские 22
А
с ведением дневника 20, 23–24, 41
Архитектура информационная 48, 52, 53, 56, 61, 173, 205, 250
ситуативное 101–107, 125–126
— мини- 164–173
К Карусель 35, 37, 86, 87, 164, 195, 204–208, 224
В Виджет 65, 66, 80, 194
252
самозацикленная 35 Алфавитный указатель
Клавиатура 37, 50, 81, 226, 233
Full Fitness 170, 171 Google+ 100
виртуальная 111
Hotels.com 190, 191
Кнопки: виртуальные 63–66
How Stuff Works 145, 146
физические 63–66
HSN 148 Instapaper 90, 91
Купон 51, 157–159
JC Penney 25, 69
О
Labor Stats 152
Окантовка 88–91, 94–96, 185
Life 193
Оптимизация поисковая 151 см. также SEO
Lonely Planet 145, 146
Ориентация экрана 54, 201, 202, 212
Martha Stewart Cocktails 183, 184, 201, 212
альбомная 201, 209, 212, 213
Marvel Comics 121, 202
книжная 202, 209
NASA 208 Net-a-porter 113, 162, 163
Очки Google Glasse 237
Notability 189, 190
П
OpenAppMkt 67
Панель навигационная 35, 37, 44, 58, 69, 89, 115, 183, 192, 195, 197, 213
Orchestra 119, 131
Правило 90-9-1 125
Pizza Hut 121–124
Приложения: ABC News 83, 84
Popular Science 94, 195, 196, 198, 223, 224
Adobe Photoshop Express 91, 92
QVC 180
Alfred 176
Recalls.gov 147, 148
Amici’s pizza 120
Rue La La 180
ATT U-verse 205, 206
OSHA Heat Safety Tool 147
Snapguide 131 Star Trek PADD 183, 184
BBC 213
Teavana 147, 171, 172
Best Buy 53, 81
The Collection 185
Clear 95
USA Today 115, 162, 192, 194, 195
CNN 149, 150
Vanity Fear 207, 224, 225
Conde' Nast 98 Epicurious 168, 169, 202
Wall Street Journal 125–127, 130, 132–133, 137, 138
ESPN Score Center 24, 99, 107
Washington Post 156
Financial Times 67, 68, 250
Weather Bug 86, 87
Foodspotting 121
Weather Channel 83, 84, 202 Алфавитный указатель
253
WebMD 162, 163
С
Wolfram Alpha 120
Сайт:
You Are Your Own Gym 170, 171
мобильный 15, 16, 18, 36, 41, 42–45
Zapd 119, 135
настольный 42, 44, 46–49
Zappos 99, 100, 114, 136, 137, 193
Сортировка по алфавиту 166
веб- 37, 62, 69, 71
Стоимость информационного обмена 116, 136, 149
гибридные 69 мобильное 66, 70–74 — веб- 67 нативные 69 эфемерные 71, 72
Т Тачскрин 17 Теория информационно-продовольственная 87, 149
Проблема «толстого пальца» 45, 62, 82, 220
Тестирование A/B 132
Р
Э
Раскрытие последовательное 92–93
Экран сенсорный 17, 38
Разбивка на страницы линейная 165 Реальность: виртуальная 237, 240 дополненная 237–239
Ю Юзабилити тестирование 20, 24–26