"Mobile first" Люка Вроблевски

Прочитала на днях довольно старую, но, тем не менее, представляющую для меня интерес книгу Люка Вроблевски с категоричным названием "Mobile fist!". Ну или по-русски (а я читала в русском переводе) - "Сначала мобильные!". Основная мысль книги вполне очевидна -  мобильные устройства выходят на первый план, опережая десктопы. И если раньше имело место наращивание мобильной версии сайта на десктопную (принцип постепенной деградации - т.н. "desktop first"), то сейчас ЛВ советует поступать наоборот, а именно - сначала делать мобильный дизайн, а потом постепенно его усложнять, создавая версии для стационарных устройств. В качестве аргуметов ЛВ приводит следующие:

• Голая статистика доказывает, что мобильный интернет растет лавинообразно, а потому нельзя этого не замечать.
• Когда дизайнер располагает малым пространством, ему приходится выделять только самое главное. То есть отметается все ненужное, второстепенное. А потому дизайн становится лаконичнее, а, значит, понятнее. И при переходе к созданию десктопной версии стоит 100 раз подумать, а так ли нужна эта второстепенная информация или она только загромождает пространство?
• Вообще, усложнять всегда легче, чем упрощать. Это правда.
• С технической точки зрения: легче прописать минимальный стили для простого дизайна. А потом при помощи медиа-запросов изменить стили для больших экранов. В случае если сайт будет работать в браузере по каким-либо причинам не воспринимающем медиа-запросы - на всех экранах отобразится дизайн для мобильников (то, что написано без медиа-запросов). Это всегда лучше, чем мелко-мелкий интерфейс предназначенный для десктопа на разрешении в 320px.

В книге приведено очень много интересных статистических данных. Меня, например, заинтересовала серия графиков, показывающая в сравнении, в какое время суток и как продолжительно люди читают статьи с телефона и десктопа. Графики красиво подтвердили жизнь: мобильными устройствами люди пользуются короткие промежутки времени и пики использования приходятся на прогнозируемое время, а именно: раннее утро (это когда мы только проснулись и есть пять минут для короткого чтения), дорога на работу, дорога домой,  а также чтение перед сном. А вот с десктопами ситуация другая - ими пользуются продолжительные промежутки времени и в те часы, когда люди обычно находятся дома или в офисе. ЛВ приводит образное сравнение: те, кто серфит с мобильника - это "ныряльщики", а те, кто  со  стационарного компьютера - "аквалангисты".

"Чтобы найти преступника, нужно думать как преступник". А чтобы разработать хороший дизайн для мобильного приложения, нужно думать как потенциальный пользователь. То есть проникнуться его проблемами и потребностями. ЛВ, ссылаясь на другого автора, называет основные задачи, которые люди обычно стараютмя решить при помощи мобильного интернета:

- "Микрозадачи" (ну, это же правда - кратко ответить на сообщение, уточнить телефон, узнать короткую информацию)

- "Ориентация на местности" (о, да - я до сих пор по Нижнему перемещаюсь с включенной Яндекс.Картой, а что уж и говорить о другом городе)

- "Мне скучно" (ну, тут и говорить нечего - достаточно зайти в обычный городской автобус)

Книга посвящена дизайну. Именно дизайну. Про верстку там только одна глава, последняя. И то в ней практически нет ни одной строчки кода. Поэтому вот какие очевидные и не очень фишки по дизайну остались в моей голове после прочтения:

- Отказ от стандартного построения сайта. Честно говоря, у меня есть неплохой опыт лабания стандартных сайтов под десктоп. Очень стандартных. Откуда проистекает эта шаблонность? Из экономии заказчика и разработчиков. Из того, что заказчик часто хочет "как у конкурента". В общем, старая известная история, которая приводит к тому можно с закрытыми глазами угадать, что за блоки будут на главной сайта и в какой последовательности они будут располагаться.  Тут, конечно, можно долго холиварить как раньше любили, что есть стандартны, нарушать которые - только запутывать пользователя и т.д. и т.п. В общем, в книге ЛВ приводит очень красноречивую картинку. Так что без коментариев.

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

- Вместо уменьшения - увеличение. Предположим, у нас уже есть десктоп (мы выбрали путь "Desktop first"). И нам надо сделать мобильную версию. Задача известная. Интуитивно кажется, что надо как-то экономить пространство, уменьшая элементы интерфейса. Но постойте! Ведь у нас элемент управления - это пальцы! А вы видели мужские пальцы? Тут я отбрасываю пальцы каких-нибудь там музыкантов-художников-программистов. Вы видели мужицкую руку рабочего?  Что-то типа "...сорок пятого размера покупал он сапоги". В общем, в этом случае интуиция по поводу необходимости уменьшать размеры для  мобильника - подводит. Нужно уменьшать не размеры элементов интерфейса, а их количество. И еще можно делать кликабельным не только сам элемент, а еще и какую-то область вокруг. В общем нужно делать все, чтобы свести к минимуму вероятность промаха.

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

- NUI (естественный пользовательский интерфейс). Превращение контента в интерфейс - это когда к минимуму сведено наличие разного рода иконок, кнопочек и т.д. В то же время взаимодействие с контентом построено на стандартном наборе жестов. Да уж, в мою жизнь компьютеры пришли в эпоху WIMP-интерфейсов (это когда диалог с пользователем стоится с помощью иконок, меню, окон и т.д.). И если как пользователь мобильных продуктов я уже привыкла к NUI. То как разработчик интерфейсов мне сложновато избавиться от шаблона "нет кнопочки - нет действия".

- Мобильный ввод. Проектированию форм для ввода информации в книге ЛВ посвящена целая глава. Я бы не сказала, что там для меня было что-то очень новое. Просто в одном месте собраны все фишки и особенности мобильного ввода. Главное при проектировании мобильных форм всегда ориентроваться на пользователя, который управляет легковым автомобилем, набитым мартышками и при этом старается ввести какую-то информацию в свой телефон. И тогда все у вас будет хорошо)))

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