Люк Вроблевски - Сначала мобильные!

• Название: Сначала мобильные!
• Автор: Люк Вроблевски
• Жанр: Прочая околокомпьтерная литература
• Год: 2012
• ISBN: 978-5-91657-388-6

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

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

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

Издано с разрешения A Book Apart LLC На русском языке публикуется впервые.

Все права защищены.

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

Правовую поддержку издательства обеспечивает юридическая фирма «Вегас-Лекс».

---

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

3 Потенциальные возможности

ЕСТЕСТВЕННЫЕ ОГРАНИЧЕНИЯ мобильных устройств, сетей, а также особенности их использования заставляют при разработке мобильных приложений сосредоточиться на самом важном. Однако, проектируя дизайн для мобильных приложений, следует не просто придерживаться заданных рамок, но и подумать, как эти рамки можно раздвинуть.

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

Как я искал метро

Во время очередной поездки в Лондон я решил наконец посетить некоторые достопримечательности. Я уже бывал в Лондоне и знал, что метро (его еще называют Tube) — это лучший способ передвижения. Оставалось выяснить, какая станция находится ближе всего. Включив ноутбук, я зашел на сайт лондонской транспортной системы (рис. 3.1).

Я быстро нашел ссылку на карту метро и перешел на нужную страницу.

Теперь позвольте мне на минуту прерваться, чтобы продемонстрировать несколько примеров чрезвычайно разумного подхода к юзабилити и информационной архитектуре, характерных для сайта лондонской транспортной системы (рис. 3.2). Яркие ссылки, крупные изображения, поясняющие содержание каждого раздела; кроме того, каждую ссылку сопровождает соответствующая иконка PDF с указанием размера файла, так что вы сразу понимаете, что находится за каждой из них.

Я уверен, что разработчики потратили немало времени, продумывая структуру каждой страницы и определяя принципы навигации по сайту. В результате я легко нашел нужную информацию и загрузил карту метро в формате PDF (рис. 3.3).

А теперь давайте попробуем решить ту же задачу посредством нативного мобильного приложения Nearest Tube. Это приложение использует целый ряд возможностей мобильных устройств, формируя принципиально иной опыт взаимодействия. В основе программы лежит функция определения текущего местонахождения пользователя при помощи систем навигации, цифрового компаса (или магнитометра), видеокамеры и акселерометра.

Система навигации позволяет установить ваше местоположение на карте, цифровой компас определяет, к какой из сторон света вы стоите лицом, а видеокамера позволяет воспроизвести изображение той части города, которая в настоящий момент попадает в поле вашего зрения. Таким образом, чтобы найти ближайшую станцию метро, достаточно просто открыть приложение и посмотреть на экран (рис. 3.4).

На экране вы увидите маркеры, указывающие на ближайшие станции метро, линии, к которым те относятся, и расстояние, на котором вы от них находитесь. Приложение также использует акселерометр (сенсор, измеряющий параметры движения устройства); благодаря ему изображение на экране меняется в зависимости от того, куда направлена камера. Поместите устройство прямо перед собой, и вы увидите детальную информацию о близлежащих станциях; поднимите его чуть выше, и появится информация о более отдаленных станциях (рис. 3.5).

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

Nearest Tube использует функции мобильного устройства (камеру, систему навигации, компас и акселерометр), предлагая целый ряд инноваций для решения достаточно простой задачи. Именно это чаще всего и позволяют делать мобильные устройства: изобретать способы удовлетворения потребностей пользователей, предоставляя им великолепные новые инструменты.

А что же происходит с браузером?

Не все из того, что предлагает приложение Nearest Tube, в настоящее время работает в мобильных веб-браузерах. Половина функций уже реализовано (например, определение местонахождения и ориентация устройства), однако на момент написания этой книги вторая половина (видеокамера и компас) пока была недоступна. Так что, как я говорил выше, для разработки нативных приложений имеются веские причины. Если вы все же склонны считать, что стакан наполовину полон, то современные веб-браузеры мобильных устройств предлагают вам множество интересных возможностей, и чуть ли не ежедневно к ним добавляются новые.

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

Определение местоположения.

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

Но и в большинстве смартфонов функция определения местоположения доступна через веб-браузер. В табл. 3.1 (созданной Рахулом Наиром) приведен краткий обзор технологий, имеющихся в нашем распоряжении.

И хотя местоположение современного мобильного телефона может быть определено по сотовым вышкам, устройства, подобные iPhone, способны делать это при помощи Wi-Fi-маяков.

Wi-Fi-маяки (привязаны к точкам доступа Wi-Fi):

а) работают внутри помещения;

б) не потребляют энергии батарей;

в) способны определить местоположение практически мгновенно.

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

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

Определение местоположения — важная вещь, так как она позволяет мобильным приложениям предоставлять пользователю полезные сведения о близлежащих кинотеатрах или ресторанах, информацию о погоде и пробках, цифровой контент (фотографии и комментарии к ним), оставленные другими пользователями, и многое другое. Текущее местоположение может использоваться для уточнения поисковых запросов или адаптации действий и возможностей под конкретного потребителя (рис. 3.6–3.7).

Итак, возможность точно определить местоположение позволяет создавать новые услуги. Каждые две секунды пользователи мобильных устройств обращаются к сервису Yelp, чтобы связаться с компаниями, предоставляющими необходимые услуги. С помощью мобильного приложения Zillow можно за час просмотреть изображения 20 тысяч домов. Перспективы для подобных сервисов поистине безграничны.

Ориентация устройства / акселерометр.

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

Наиболее простое использование акселерометра — определение того, как мы держим устройство: горизонтально или вертикально (http://bkaprt.com/mf/36). Эта мелочь может существенно повлиять на поведение приложения.

В нативном почтовом приложении Google для Android смена ориентации устройства применяется для увеличения окна ввода текста при создании электронного сообщения. Если устройство перевести в горизонтальное положение, текстовое поле расширяется, занимая всю свободную площадь экрана над клавиатурой, а в правом углу появляется кнопка «Отправить» (рис. 3.8).

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