Issuu on Google+


Оглавление

Благодарности ..................................................................................... 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


Mobile usability kak sozdavat idealno udobnuie prilojeniya dlya mob