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

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

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

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

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

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

Майк Монтейро — основатель интерактивной-дизайн студии Mule Design. За время руководства студией он столкнулся с множеством проблем и извлёк из них уроки, которые описал в книге.

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

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

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

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

Автор фото: Джефри Зельдман.

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

Дизайнеру на заметку

Поиск клиента — одна из главных и сложных задач дизайнера.

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

Если вы хотите получать рекомендации от них, то сделайте так, чтобы с вами было приятно общаться и выполненная работа была качественной. При этом, если вас кому-то рекомендовали — это ещё не значит, что нужно принимать заказ.

Неважно откуда пришёл клиент, по рекомендации, по рекламе или из вашего блога — перед тем, как приступить к работе, обговорите с ним все детали. Никогда не работай бесплатно.

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

Деньги

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

Запрашивайте как можно больше, честно предоставляйте качественные услуги и никогда не работайте бесплатно

Звучит красиво, правда? Но в работе сложно следовать правилу. Поможет только практика. С первого раза может не получиться, главное не бросать.

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

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

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

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

Процесс

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

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

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

Критика

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

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

Σ

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

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

Пора заняться делом!