Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

Сначала мобильные

Люк Вроблевски — предприниматель, бывший директор по дизайну в Яху. Автор двух книг, одна из которых посвящена мобильным приложениям — «Сначала мобильные».

Сначала мобильные!

В Чили есть пустыня Атакама, в некоторых её частях не было дождя уже больше ста лет.В предисловии автор обманул меня и всех читателей, сказав, что книга короткая и без воды. Оказалось не так. Воды в ней столько, что хватит на всю Атакаму. Ниже опишу только важные идеи и советы.

Книга издана в 2012 году. Люк пишет, что «рынок мобильных устройств растёт сумасшедшими темпами». В апреле 2016 года консалтинговая компания АйДиСи выпустила отчёт о том, что за первый квартал 2016 года было продано 334,9 млн смартфонов. Похожие показатели были ровно год назад — тогда было реализовано 334,3 млн. Прирост составил 0,2% — это говорит о том, что рынок начинает стагнировать.

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

На заметку

На экране размером 320 на 480 пикселей нет места для лишних элементов, поэтому дизайнерам необходимо избавляться от избыточных элементов и оставлять только те, которые помогают решить наиболее важные для пользователя задачи — в этом суть подхода «Сначала мобильные».

Всё изменилось 29 июня 2007 года, когда Стив Джобс поднялся на сцену и представил аудитории первый Айфон.

Эпл переизобрела телефон
Эпл переизобрела телефон

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

КПК можно было управлять только через стилус. Элементы на экране маленькие, в спокойной обстановке попасть в них затруднительно. Об использовании на ходу или во время поездки в общественном транспорте и говорить не приходится.

КПК Compaq iPAQ H3760
Пример использования КПК в 2001 году

С появлением айфона у людей появилась возможность удобно пользоваться всеми возможностями смартфона: кроме стандартных звонков и СМС, можно было фотографировать, выходить в интернет и главное — устанавливать на него приложения из специального магазина.

Контекст использования

Мобильность заставляет нас задуматься и ответить на вопрос: «это точно должно отображаться?».

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

Ограничения помогают дизайнерам и разработчикам сосредоточить внимание только на важных деталях продукта.

Стандартный пользователь мобильного приложения — это человек, который находится у себя дома

Место использования влияет на дизайн. Разработчики мобильных приложений представляют пользователя как спешащего куда-то по оживлённой улице бизнесмена, но по результатам опросов это не так. 84% опрошенных людей пользуются мобильными устройствами дома.

Представьте, что у пользователя всего лишь «один глаз и один палец» и вы поймёте, почему дизайн для мобильных устройств должен быть простым.

Книга «Куда следует нажимать»Джош Кларк описал модели в книге
«Куда следует нажимать»
Джош Кларк выделил три основные модели ситуаций, когда человек использует мобильное приложение: «Микрозадачи», «Ориентирование на местности» и «Мне скучно». Использование мобильных устройств обычно предполагает один из следующих видов взаимодействия:

Проектирование и разработка

Книга: Прототипирование«Прототипирование» поможет понять, как создать прототип мобильного приложенияЧто сделать перед тем, как начать разработку?

Определитесь, что считать самым важным. Ответ на поставленный вопрос позволит понять, что должно загружаться и отображаться в первую очередь.

При разработке мобильных приложений, Люк предлагает руководствоваться правилом: контент всегда должен иметь приоритет над навигацией. Сначала это правило мне показалось странным, но потом я понял его, сейчас расскажу.

Контент — король, навигация вторична

Автор пишет, что «многие мобильные сайты, даже Фликр и Бэйскемп начинают диалог с пользователями не с контента, а с элементов навигации». Пользователь должен получить нужную ему информацию как можно быстрее. Поэтому навигация вторична. На экране достаточно вывести простой заголовок, сообщающий, на чей сайт вы зашли, а всю навигацию свести к одному действию: клик по иконке.

Примеры удобно навигации
Примеры удобной навигации на сайтах «Тижорнал», «Виладж» и Медузе

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

Элементы в мобильной версии сайта должны быть большими, чтобы удобно было нажимать пальцем и не промахиваться.

Важное правило мобильных интерфейсов: чем важнее выполняемая задача, тем крупнее должна быть зона касания, — только тогда людям с «одним глазом и одним пальцем» будет удобно пользоваться вашим сайтом или приложением.

Рекомендации

Выбрал девять главных советов, которые стоит учитывать при разработке веб-приложения или мобильной версии сайта.

  1. Эпл рекомендует, чтобы размер зоны нажатия составлял не меньше 44 × 44 пункта.
  2. Сообщите браузерам, что вы потратили время и силы для адаптации сайта под мобильные устройства. Для этого достаточно указать мета-тэг <meta name="viewport" content="width=device-width">
  3. Когда речь идёт о прикосновениях к экрану мобильного устройства, следует придерживаться принципа «чем больше, тем лучше».
  4. Действие отмены или удаления вынесите за пределы зоны комфорта пользователя.
  5. Упростите ввод данных, применяйте типы ввода, атрибуты и маски.
  6. На форме ввода данных полей должно быть как можно меньше. Если нельзя сократить, то разбейте форму на несколько шагов.
  7. Отключайте автоматическое добавление прописных букв (атрибут autocapitalize) при вводе адресов электронной почты, паролей, веб-адресов и других данных, где важен регистр.
  8. В третьей версии ЦСС появились большие возможности для создания красивой анимации, но не стоит ей увлекаться на мобильных устройствах. Анимация может повлиять на производительность и скорость отображения сайта.
  9. В мобильной версии сайта не стоит делать кнопку «Назад», в нативном приложении такая кнопка допустима.

Σ

Книга «Веб-программирование для мобильных устройств»Разработчикам веб-приложений советую прочитать книгу «Веб-программирование для мобильных устройств»Представь, что ты ждёшь поезд. Поезд, который увезёт тебя в будущее. Считаешь, что он вот-вот прибудет к перрону. Слышишь голос дежурного, но он объявляет не о прибытии, а об отправке поезда на следующую станцию.

Рынок мобильных технологий — это локомотив, который уверенно двигается вперёд. Тебе осталось найти открытую дверь вагона и успеть зайти в неё до отправки к следующей точке назначения.

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

Книга будет интересна дизайнерам, разработчикам и менеджерам, у которых мало опыта в создании мобильных продуктов.

°°°

С 4 июля начинаю учиться в Школе мобильного дизайна в «Яндекс». Ближайшие несколько месяцев буду писать про мобильный дизайн и всё, что с ним связано. Если интересна эта тема, подписывайся на обновления блога в фидли или по РСС. Также ссылки на новые заметки появятся в твитере и фэйсбуке.

,

Веду аудиодневник с наблюдениями на темы дизайна, саморазвития и в целом, отношения к жизни.

В четвёртом сезоне экспериментирую с путешествиями во время пандемии и учусь на курсе графического дизайна. Подписывайтесь на подкаст, чтобы не пропустить новые выпуски.

3 комментария

  1. Alex Sirotkin

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

  2. German Tebiev

    Спасибо за заметку! Единственное, хочу указать один момент, где следует поправить. В строке разметки

    кавычки ёлочкой стоит заменить на двойные машинописные.

    P.S. При добавлении комментария у меня автоматически добавилась пара двойных кавычек, не знаю, как от них избавиться.

    • Саша Бизиков

      Спасибо, поправил.

Написать комментарий

Ещё заметки

Вы сможете рисовать через 30 дней

Прошёл курс по рисованию от Марка Кистлера. Прошел я его год назад, но руки не доходили рассказать об этом в блоге. Поэтому исправляюсь.

Точка контакта: презентация

Занялся изучанием дизайна презентаций. Хочу разобраться в том, как передавать смысл в красивой форме. Для начала решил прочитать книгу «Точка контакта: презентация».

Как читать, запоминать и никогда не забывать

Книга помогла ответить на некоторые из моих вопросов. В заметке приведу ответы на них.

Модульные системы в графическом дизайне

Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.

Пиши, сокращай

«Пиши, сокращай» относится к тем книгам, которые забиты практичными советами. В заметке расскажу как она помогла мне найти работу младшим дизайнером.

Культура дизайна

Прочитал книгу Влада Головача — «Культура дизайна». В заметке делаюсь цитатами с интерсными идеями о дизайне.

Правила Джобса

«Правила Джобса» раскрывают принципы, которыми руководствовался Стив Джобс при создании своих продуктов. Принципы помогут взглянуть на свою карьеру, компанию, клиентов и продукцию под другим углом. В заметке кратко описываю основные из них.

Мыслители прошлого: Анаксагор

Меня давно интересовала история древней Греции и биографии людей, которые жили в те времена. В заметке привежу краткую выдержку об Анаксагоре с цитатами из книги и своими комментариями к ним.

Сначала скажите «НЕТ»

Первая книга о переговорах, которую я прочитал. В заметку выписал важные советы из неё.

Яндекс.Книга

В заметке кратко расскажу о чём книга, но лучше самостоятельно прочитать её.

Ремоут

Книга отвечает на основные вопросы, которые ставит перед собой любой сотрудник или руководитель компании, перед тем как перейти на удалённую работу или разрешить своим сотрудникам так работать.

В заметке делюсь пересказом книги и своим опытом удалённой работы.

Наука Побеждать

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

Высказывания Александра Васильевича буду интерпретировать относительно современной жизни и специфики диджитал индустрии.

Сырок

Александров рассказывает о своей жизни, наполненной авантюрами, глупыми ошибками и смешными историями.

Реворк

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

Дизайн — это работа

Перечитал «Дизайн — это работа».

Доставляя счастье

Книга читается легко, как художественная. Тони описывает свою жизнь и приключения, которые он придумывал для себя, чтобы побороть скуку. В заметке делюсь интересными идеями из книги.

Правила прибыльных стартапов

Книга оказалась полезной, но до неё нужно было дорасти. Даже сейчас понимаю, что не дорос до неё, но половину понял. Через год ещё раз прочту.

Становление Стива Джобса

Делюсь впечатлениями и интересными фактами из книги «Становление Стива Джобса»

Прототипирование. Практическое руководство

В книге говорится о том, как с помощью прототипирования решать проблемы в самом начале жизни проекта, экономить время и средства при разработке.

Getting Real

Getting Real — подход для разработки проектов. Он поможет подойти к разработке с другой стороны, где у нас нет времени, больших средств и того, что, как нам кажется, требуется для проекта.

Номер 1

Делюсь впечатлениями от прочтения «Номер 1» Игоря Манна.

Скорочтение на практике

Недавно мне попалась на глаза книга «Скорочтение на практике», которая заставила отложить все остальные книги и взяться за её изучение. Сразу скажу, что до конца не дочитал, в конце заметки расскажу почему.

Дизайн привычных вещей

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

Дизайн для реального мира

«Дизайн для реального мира» не совсем про дизайн как таковой, она скорее о философии дизайна в самом широком смысле этого слова. В процессе чтения нужно всегда помнить, что книга была написана в 1971 году.

Джони Айв — легендарный дизайнер Apple

Советую к прочтению всем, кто интересуется историей великих компаний и историей Apple в частности.

Как стать бизнесменом

Книга не новая, вышла два года назад и некоторая информация уже устарела.

Тем не менее в ней можно найти достаточно много интересных мыслей, особенно если вы начали читать её для того, что бы понять каково это.. быть в бизнесменом.

Миф о многозадачности

Рассказываю об очень короткой, но очень интересной и полезной книге от успешного бизнес-тренера Дэйва Креншоу.

Дизайн – это работа

Прочитал «Дизайн — это работа» и делаюсь интересными мыслями и цитатами из книги.

Я такой как все

Наверно, вы уже читали в моем твиттере о том, что я купил и начал читать книгу Олега Тинькова «Я такой как все». В заметке делюсь впечатлениями от прочтения этой книги.