Кажется, прошла целая вечность, прежде чем все наконец-то серьезно взялись за создание адаптивных и автономных мобильных интерфейсов для небольших экранов. Существует масса недавно обновленных сайтов, построенных на адаптивном дизайне или другой более подходящей для мобильного интернета верстке. Это важный шаг в развитии мобильного интернета, особенно если учесть, что мобильные устройства уже через год или два могут опередить компьютеры по количеству выходов с них в сеть. Между тем в Индии мобильный интернет-трафик пару месяцев назад уже обогнал трафик, полученный со стационарных компьютеров. К тому же такие компании, как Facebook, понимают важность обслуживания спроса на мобильный интернет, так как 80% их трафика приходит от мобильных устройств, а не от компьютеров.

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

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

Дизайн во имя пользователя

Когда создаешь интерфейс для мобильного интернета, всегда нужно делать упор на условия, в которых он будет использован. Нужно учитывать, где могут находиться пользователи, и чем они заняты в то время, пока они просматривают ваш сайт. Стоит ли пользователь в очереди за продуктами или лежит в гостиной на диване? Подключается ли он к интернету через Wi-Fi, и страницы загружаются быстро, или соединение раздражающе медленное? Держит ли человек свой девайс горизонтально и двумя руками или управляет интерфейсом только правым пальцем большой руки? Об этом нужно думать так же, как о других характеристиках мобильной связи, например, о силе сигнала.

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

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

Почему во время работы над дизайном не нужно думать о недостаточном объеме внимания

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

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

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

Конечно, ежедневно в сети продаются миллионы машин, несмотря на тысячи возможных причин, по которым сделка может быть прервана. Так почему мы должны предполагать, что пользователь, загружающий сайт на телефоне или планшете, будет больше отвлекаться или хуже концентрироваться, и в результате делать другой интерфейс, не как у того, кто пользуется компьютером, чтобы они не захотели купить машину через интернет? Мы и не должны этого делать. Каждые три минуты в Великобритании и каждые 10 минут в США через мобильное приложение сайта eBay продается один автомобиль. Существует предположение, что выгоды и удобства, которые могут предложить пользователям смартфоны и планшеты, скоро выведут мобильные устройства в лидеры платформ для интернет-покупок. Исследования, проведенные сайтом eBay, показывают, что 56% покупателей, у которых есть смартфоны, уверены: их гаджеты делают шоппинг более приятным.

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

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

50 загадок мобильных устройств

Проблема термина «мобильный» состоит в том, что, в лучшем случае, определение устарело, в худшем — термин и вовсе неточный. Что же, в самом деле, означает «мобильный»? Почему ноутбук не является мобильным устройством, когда человек пользуется им, сидя за столом, но становится мобильным, когда кто-то переносит его из одной переговорной в другую? Как вы думаете, как можно использовать новый 20-дюймового планшет (фото 2), чей огромный экран шире, чем у стандартного ноутбука? Традиционное определение «мобильный», которое ассоциировалось с мобильным устройством с меньшим размером экрана и, следовательно, с принципами создания его интерфейса, становится все более и более нечетким, так как размывается граница между размерами экранов компьютера, планшета и телефона.

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

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

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

Не «сначала мобильные», а «только мобильные»

До этих самых пор я говорила о причинах не сокращать контент или функциональность мобильных сайтов только лишь потому, что: 1) у мобильных устройств, по сравнению с компьютером, экран меньше; 2) отличается способ набора; 3) задачи слишком сложные или требуют сосредоточенности. Тем не менее, в рассуждениях о том, какие задачи пользователи предпочитают решать с помощью компьютера или мобильника, часто упускается важный момент. Огромная часть наших пользователей не предпочитают компьютер мобильным устройствам. Так почему же мы лишаем мобильные сайты контента и функциональности, которыми люди могут так и не воспользоваться?

Вот несколько поучительных примеров, демонстрирующих, что все мы живем в мире, который становится исключительно мобильным. Подсчитано, что в мире сегодня 6 млрд. телефонов и только 1.2 млрд. компьютеров. И эта разница будет только увеличиваться, так как повсеместно продажи ПК будут продолжать падать, а продажи планшетов — повышаться. Последние разработки, такие, как «облачные» технологии, сократили время на передачу данных при использовании браузеров. Вместе с более низкой ценой на смартфоны и планшеты и повышенным вниманием, которое разработчики уделяют ширине окна в мини-браузерах, мобильные устройства являются привлекательной альтернативой своим немобильным аналогам. Наконец, в странах с многочисленным населением, таких, как Китай, Индия, Индонезия, а также в Африке, мобильный интернет зачастую становится единственным способом выйти в сеть, так как проводной интернет отсутствует как класс или слишком дорогой.

Мобильный дизайн взрослеет

На заре разработки мобильных приложений было распространено предположение, что пользователи не захотят выполнять с помощью девайсов более сложные или трудозатратные задачи. Nielsen Norman Group заявили в начале 2009 года: «Нужно создавать разные веб-сайты для каждого мобильного устройства: чем меньше экран, тем меньше возможностей, а значит, дизайн должен быть более скромным». NNg опирались на данные, полученные в результате тестирования компьютерных версий веб-сайтов на мобильных устройствах. Тестирование продемонстрировало медленную загрузку страниц и отказ посетителей заниматься такими вещами как шоппинг. NNg даже увидели «мрачное будущее мобильной торговли до тех пор, пока сайты не станут лучше и не заслужат доверие пользователей».

Не обращая внимания на обоснованность рекомендаций, которые Nielsen Norman Group дали в 2009, сегодня мы ушли от крошечного функционала. Невозможно больше предлагать ограниченные функции во имя дизайна, предназначенного для меньшего экрана. Вот что сказал по этому поводу Джереми Кейт, гуру мобильных разработок и автор работы «HTML5 for Designers»:

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

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

Думаем об интернете целостно

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

Освежите знания по информационной архитектуре

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

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

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

Сайт WWF (Всемирного фонда дикой природы), показанный на рисунке 4, — это образец элегантного дизайна, который систематизирует навигацию и контент, исходя из основных целей организации. А заодно и гарантирует, что такие важные для пользователя задачи, как поиск, будут доступны и соответствующим образом сгруппированы, в зависимости от размера экрана. В то время как на большом экране выделяются навигация и поиск, на меньшем экране они разделяются в виде иерархической структуры: в первую очередь показана главная навигация, остальная часть навигационных ссылок и поле поиска находятся в дополнительном окне навигации.

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

Всегда оставляйте ссылку на полную версию сайта

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

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

Многие авиакомпании обзавелись мобильными версиями сайтов совсем недавно. Они уже не полагаются на то, что пользователи скачают собственное приложение компании для того чтобы проверять статус полета и решать другие простые задачи. Хотя, например, British Airways до сих пор не примкнули к этой многочисленной когорте, как видно из рисунков 6 и 7. Если клиенты решили не скачивать приложение, или у них просто нет времени, но они хотят проверять статус полета на своем телефоне, то им придется нелегко.

Придерживайтесь надежных и проверенных методов проектирования

Стивен Хэй, веб-дизайнер, эксперт по развитию и лидер в этом направлении, поделился своими соображениями по поводу сохранения важных элементов на вашем мобильном сайте:

«Меняйте дизайн, как пожелаете. Визуально контент на телефонах выглядит более узким и длинным, и вы должны это учитывать. Размер текста, кнопок и ссылок, размер изображений (файлов)... Есть много вещей, о которых нужно не забыть. Конечно, вы не обязаны иметь анимацию, созданную на Canvas. Конечно, вы хотите использовать некоторые возможности устройств, например, камеру телефона. Это логично и допустимо. Но контент, функциональность или здравый смысл важны на всех платформах, и если вы предоставляете их только для одной, вы совершаете ошибку...».

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

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

И в заключение

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

Оригинал: http://www.uxmatters.com/mt/archives/2013/06/three-reasons-weve-outgrown-mobile-context.php

Ольга Павлова
Совладелец в «Собака Павлова»

Основная идея статьи — не надо кастрировать функционал мобильной версии сайта.

Отличное пожелание. Больше всего ему обрадуются веб-программисты: новые потребности клиентов — новая интересная работа, ура.

Разумеется, вопрос «За чей счет банкет?» остался за кадром. Интересно, что этот банкет действительно довольно дорогой и, кажется, не вполне оправданный: например, относительно небольшая и технологически слаборазвитая компания Google всё никак не может обеспечить пользователям полноценную работу с сервисом GMail через мобильный веб-интерфейс.

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