Что произошло
27 января 2010 года Стив Джобс вышел на сцену Yerba Buena Center for the Arts в Сан-Франциско и сел в кресло. Это было необычно: Джобс всегда стоял. Но он представлял устройство, которое используют сидя — откинувшись, расслабленно, с экраном на коленях. iPad.
«Все знают, как пользоваться iPhone, — сказал Джобс. — И вот перед вами большой iPhone. А если серьёзно, есть ли место для чего-то между телефоном и ноутбуком?»
Скептиков было достаточно. Блогеры писали: «большой iPod Touch», «гигантский телефон без телефона», «кому это нужно?» Gizmodo назвал iPad «разочарованием». Аналитики сомневались: зачем отдельное устройство, если есть ноутбук и смартфон?
Рынок ответил цифрами. За первые 28 дней Apple продала миллион iPad. За первый квартал — 3,27 миллиона. За первый год — 14,8 миллиона. К концу 2011 года — более 40 миллионов. Категория «планшет», которой не существовало до 27 января 2010-го, за два года превратилась в рынок стоимостью десятки миллиардов долларов. Samsung, Amazon (Kindle Fire), Google (Nexus) бросились выпускать конкурентов.
iPad не был первым планшетом в истории. Microsoft продвигал Tablet PC с 2001 года: громоздкие устройства на Windows XP со стилусом, тяжёлые, дорогие, неуклюжие. Они провалились. Разница — в том, что Джобс строил не «компьютер с сенсорным экраном», а новый формат взаимодействия. Пальцы вместо стилуса. Интерфейс, спроектированный для касания. Экосистема приложений, унаследованная от iPhone.
Через год — ещё один сдвиг, менее заметный, но не менее значимый. В 2011 году операторы связи в 87 странах мира начали массовое развёртывание 4G LTE (Long-Term Evolution). Средняя скорость — около 100 Мбит/с, в десятки раз быстрее 3G. Пиковая — до 300 Мбит/с. Мобильный интернет сравнялся по скорости с домашним широкополосным подключением.
Контекст эпохи
iPad появился в мире, который уже менялся, но ещё не осознал масштаб перемен.
iPhone (2007) доказал, что мобильный интернет — не компромисс. Люди хотели полноценный веб на телефоне, а не упрощённые WAP-страницы. Но экран iPhone — 3,5 дюйма. Читать статью, смотреть фотографии, работать с таблицей — всё упиралось в размер. Ноутбук решал эту проблему, но ноутбук не возьмёшь в кровать, не будешь держать одной рукой в метро.
iPad занял пустое место между карманом и столом. Экран 9,7 дюйма — достаточно большой для комфортного чтения и просмотра видео, достаточно компактный для дивана и кресла. Мультитач работал так же, как на iPhone: пальцами, без стилуса, без обучения. 140 000 приложений из App Store — с первого дня.
Но iPad сделал кое-что ещё: он разрушил концепцию фиксированного экрана. До iPad дизайнер знал размер: 1024x768 для десктопа, 320x480 для iPhone. Два макета — мобильный и десктопный — покрывали большинство случаев. iPad добавил третий размер — 1024x768, но в горизонтальной и вертикальной ориентации. А потом появились iPad Mini (7,9”), конкуренты с экранами 7”, 8”, 10,1”, 11”. Размер экрана перестал быть константой.
25 мая 2010 года — через четыре месяца после анонса iPad — веб-дизайнер Итан Маркотт опубликовал на A List Apart статью «Responsive Web Design». Три технических столпа: fluid grids (гибкие сетки на процентах вместо пикселей), flexible images (изображения, масштабирующиеся под контейнер) и CSS3 media queries (стили, зависящие от параметров устройства). Один сайт — любой экран. В 2011 году Маркотт выпустил одноимённую книгу, ставшую манифестом нового подхода.
Параллельно Люк Вроблевски — дизайнер, работавший в Yahoo, eBay и Google — сформулировал принцип «Mobile First» (книга вышла в 2011 году). Идея: проектирование начинается с мобильного экрана, а не наоборот. Маленький экран заставляет расставить приоритеты: что действительно важно? Что можно убрать? Десктопная версия — расширение мобильной, а не наоборот. Mobile First перевернул привычный workflow, в котором мобильная версия была «урезанной» десктопной.
4G LTE довершил картину. 3G (2000) дал мобильный интернет, но медленный: загрузка тяжёлой страницы занимала секунды, потоковое видео буферизировалось, веб-приложения тормозили. 4G уничтожил этот разрыв. YouTube на телефоне работал так же, как на ноутбуке. Google Docs открывался за секунду. Видеозвонок через FaceTime или Skype стал нормой, а не техническим подвигом.
Значение для UX
iPad и 4G вместе создали мир, в котором контекст использования стал непредсказуемым — и это изменило проектирование интерфейсов навсегда.
Конец фиксированных макетов. До 2010 года веб-дизайнер мог разумно предположить, что пользователь сидит за столом, смотрит на монитор 1024x768, держит мышь в правой руке. iPad сломал каждое из этих допущений. Пользователь лежит на диване. Держит устройство двумя руками. Переворачивает с горизонтальной ориентации на вертикальную. Масштабирует пальцами. Экран бликует на солнце. Responsive design — не каприз дизайнера, а ответ на реальность, в которой один и тот же сайт открывается на экранах от 3,5 до 27 дюймов.
Тач как основной паттерн. iPhone начал переход, iPad закрепил. Палец — не курсор мыши. Палец закрывает элемент, к которому прикасается. Палец не может «навести» — только нажать. Области касания должны быть достаточно большими (Apple рекомендовала 44x44 точки). Hover-эффекты бессмысленны. Drag-and-drop работает иначе. Жесты — свайп, пинч, долгое нажатие — стали полноценным языком взаимодействия, который нужно было проектировать.
Mobile First как философия. Вроблевски показал, что ограничение мобильного экрана — не проблема, а инструмент проектирования. На маленьком экране невозможно уместить всё — и это заставляет думать о приоритетах. Что пользователь хочет сделать в первую очередь? Какая информация критична? Десктопная версия — надстройка. Этот подход оказался полезным далеко за пределами веба: он изменил мышление о проектировании интерфейсов в целом.
Контент потребляется лёжа. iPad создал сценарий, который раньше был прерогативой книги и журнала: потребление контента в расслабленной позе, одной рукой, без стола и стула. Это изменило требования к типографике (крупнее шрифт, больше межстрочный интервал), навигации (меньше мелких элементов, больше жестов) и даже к тону текста (мобильный контент читается быстрее и более фрагментарно).
4G и ожидания производительности. Когда мобильный интернет стал быстрым, пользователи перестали прощать медленные сайты. Если страница загружается за 3 секунды на 4G — это проблема дизайна, а не сети. Google начал учитывать скорость загрузки в ранжировании поиска. Amazon подсчитал, что каждые 100 миллисекунд задержки стоят 1% продаж. Принцип, обнаруженный ещё в A/B-тесте Google 2000 года (полсекунды задержки — минус 20% запросов), стал универсальным правилом: скорость — это UX.
Экосистемы вместо устройств. iPad показал, что пользователь не привязан к одному устройству. Утром — iPhone в метро, днём — ноутбук на работе, вечером — iPad на диване. Apple iCloud (2011) синхронизировал данные между экранами. Проектировать нужно было не интерфейс для устройства, а опыт для человека, перемещающегося между контекстами.
К 2012 году мобильный трафик составлял 13% мирового веб-трафика. К 2016-му — превысил десктопный. Мир, который iPad и 4G делали возможным в 2010–2011 годах, к середине десятилетия стал нормой. Responsive design, Mobile First, touch-first интерфейсы, performance budgets — всё, что казалось прогрессивной практикой в 2010 году, через пять лет стало базовым требованием.
Связанные статьи
Из серии «История UX»:
- iPhone (2007) — iPhone создал мультитач-революцию. iPad расширил её на новый форм-фактор и создал потребность в responsive design.
- 3G и мобильный интернет (2000) — 3G дал мобильный интернет, 4G LTE сделал его быстрым настолько, что разница с десктопом исчезла.
- A/B-тестирование Google (2000) — полсекунды задержки стоили 20% запросов. С приходом 4G эта закономерность распространилась на мобильный мир.
- Macintosh и WIMP GUI (1984) — Macintosh установил парадигму WIMP (окна, иконки, меню, указатель). iPad заменил указатель пальцем и начал пост-WIMP эру.
- Возвращение Джобса в Apple (1996) — Джобс, вернувшийся в Apple, создал цепочку: iMac, iPod, iPhone, iPad — каждый продукт переопределял категорию.
Из раздела «Фундаментальные концепции»:
- Что такое UX — iPad показал, что пользовательский опыт неотделим от физического контекста: позы, размера экрана, способа ввода.
- Что такое юзабилити — responsive design — это юзабилити в мире, где размер экрана непредсказуем.
- Закон Фиттса — размер области касания на тач-экране — прямое следствие закона Фиттса: чем больше цель, тем быстрее попадание.