Представляю вашему вниманию перевод статьи под названием "A Study of Trends in Mobile Design" от Alexander Dawson. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.
Индустрия веб-дизайна развивается сразу во многих направлениях, но одна ее область повлияла на то, как мы строим сайты, больше чем любая другая. Всплеск количества мобильных устройств, позволяющих выходить в интернет, породил субкультуру пользователей, которые нуждаются в том, чтобы веб-сайты адаптировали под их устройства. Несмотря на то, что веб-дизайн для мобильных устройств все еще находится в зачаточном состоянии (и первичных исследований насчет тенденций в этой области очень мало), нам следует понаблюдать, как развивается этот критичный элемент веб-индустрии, а также следует знать паттерны, которые появились в результате развития этой области.
Цель этой статьи — рассказать вам о методах, которые используются на самых популярных сайтах для того, чтобы предоставить пользователям мобильных устройств удобное и (надеемся) полезное взаимодействие. Среди проанализированных сайтов много известных компаний, например Facebook и Amazon. Мы приготовили для вас настоящий экскурс в мир мобильного веб-дизайна, со статистикой и по-настоящему интересными открытиями.
Что же все-таки это за документ?
Для того, чтобы определить лучшие практики и общие тенденции в постоянно развивающейся области мобильного дизайна, было проведено исследование, направленное на изучение того, как были решены проблемы, связанные с информационной архитектурой и реализацией дизайна на мобильных версиях популярных веб-сайтов. Так как эта работа могла бы охватить любое количество параметров, важно отметить, что в ней нельзя найти ответы на все вопросы, хотя очень вероятно что вы узнаете несколько полезных вещей!
Рис. 1: Мобильная версия стала важным компонентом успешности любого сайта. У Smashing Magazine тоже есть своя мобильная версия.
В своем исследовании мы изучили не только то, какое рассмотренные веб-сайты предоставляют взаимодействие при работе с мобильного устройства, но и то, предоставляют ли они какие-то возможности, недоступные в версии для браузера настольного компьютера, например, мобильное приложение с полезными функциями. Также были изучены (на предмет наличия, сообразности и используемых подходов) некоторые паттерны в разметке, решения в дизайне, уровни программирования и полезные особенности, присущие только мобильным сайтам.
Примечание: не смотря на тщательность всех исследований, при таком большом количестве изучаемых параметров, в работу могли закрасться неточности и нестыковки.
Принципы исследования
Прежде чем представлять вам результаты наших исследований, позвольте рассказать вкратце об оцениваемых параметрах и использованной методологии, чтобы объяснить, как проходило исследование, и как мы получили эти результаты. С этой информацией, вы, возможно, увидите ограничения этого исследования, и если вы достаточно предприимчивы, вы могли бы опубликовать собственное исследование чтобы увидеть, применимы ли результаты нашего исследования в других ситуациях. Было бы интересно почитать нечто подобное!
Рис. 2: Вот так выглядел процесс нашего исследования.
Насчет методологии исследования. Сначала мы выбрали группу сайтов (составленную независимо и не нами). Затем мы выбрали, какие параметры мы будем оценивать. Многие из выбранных параметров никогда раньше не оценивались в таких масштабах (или так тщательно). Для того, чтобы какой-либо параметр попал в наше исследование, он должен был соответствовать определенным критериям. Во-первых, результаты исследования по этому параметру должны были быть интересными (и могли бы повлиять на то, как сообщество видит ситуацию в сфере мобильного дизайна), и во-вторых они должны быть статистически важными (мы не хотим писать очевидные вещи).
Примечание: После проведения исследования мы выбросили из результатов некоторые параметры из-за отсутствия каких-либо полезных выводов. Так, к примеру, произошло с поддержкой альбомной и портретной ориентации при отображении страницы — это оказалось неважным, так как поддержка была у всех сайтов.
Отбор сайтов для исследования
Выбор группы сайтов для анализа, — это, безусловно, критичная часть процесса. Для того, чтобы исключить возможности для необъективности или рассмотрения какой-либо ниши, мы решили использовать 100 первых сайтов из списка Google AdPlanner List. Хотя в списке было 1000 сайтов, мы решили что первой сотни хватит для того,
чтобы получить хорошую выборку и достаточно разносторонние итоговые результаты.
Рис. 3: 1000 самых популярных сайтов в списке Google AdPlanner — объективный источник, используемый в исследовании.
Параметры
Это исследование не имело бы смысла если бы мы не поговорили об оцениваемых параметрах. Мы решили сосредоточиться на двух типах критериев: характеризующих то, как пользователя подводит к мобильной версии сайта, и то, как мобильная версия работает. То, как пользователь направляется к мобильной версии сайта, привлекло наше внимание из-за большого количества существующих подходов. Также было важно посмотреть, учитывают ли исследуемые веб-страницы скорость загрузки на мобильном устройстве, скорость передачи данных в устройство, размер экрана, наличие тач-скрина и так далее.
Рис. 4: Было оценено много параметров, чтобы предоставить вам информативные и полезные выводы.
Поправка на возможные ошибки
Разумеется, в любых исследованиях присутствуют ошибки и предвзятое мнение. Для того чтобы избежать как можно больше проблем такого рода, мы не только использовали независимо составленный список сайтов, но также каждый исследуемый мобильный сайт мы просматривали сначала на десктопе, потом не нескольких мобильных девайсах, а потом прогоняли на эмуляторах, для верности. Это позволило значительно снизить количество ошибок, а повторное испытание каждого сайта в другой день гарантировало, что полученные результаты произошли не из-за того что что-то сломалось.
Рис. 5: Эмуляторы использовались для увеличения количества различных девайсов, применявшихся в исследовании.
Ну, и наконец — результаты
Теперь, когда базовые принципы исследования объяснены, пришло время рассказать о самом интересном — результатах нашего исследования. Приготовьтесь к большому количеству графиков и диаграмм, и к тому, что некоторые результаты могут оказаться действительно удивительными. Мы разделили результаты на отдельные категории и предоставили возможность для разных интерпретаций результатов, но надеемся что полученные сведения будут весьма очевидными. Ну что, приступим?
Метод доступа
В этой части исследования важно было установить, является ли наличие мобильной версии сайта очевидным для пользователя. Когда пользователь посещает веб-сайт, ему нужно знать, поддерживается ли его девайс, или же загрузится обычная версия сайта. Мы определили, происходит ли редирект с основной версии или автоопределение устройства, находится ли мобильная версия на отдельном поддомене, и можно ли перейти на мобильную версию сайта в обычном десктопном браузере.
Рис. 6: Соотношение между количеством сайтов с автоматическим редиректом на мобильную версию сайта и количеством сайтов, где есть только десктопная версия с опциональной поддержкой мобильных устройств.
Рис. 7: Количество сайтов, разместивших мобильную версию на поддомене WWW.
Рис. 8: Количество мобильных сайтов, позволяющих открыть себя в обычном десктопном браузере.
Рис. 9: Если .mobi-версия сайта Amazon работает в браузере PC, то m.amazon.com перенаправляет пользователей PC на основной сайт.
Количество сайтов, автоматически определяющих мобильное устройство и перенаправляющих пользователей на мобильную версию оказалось меньшим, чем мы ожидали (ведь многие полагают, что сначала должна показываться мобильная версия, чтобы убыстрить скорость загрузки). Однако наряду с этим мы заметили одну интересную тенденцию — все сайты кроме одного (answers.com) во время запроса мобильной версии с PC принудительно перенаправляли пользователя на обычную версию без всякой возможности открыть мобильную.
Мобильные домены первого уровня
В следующей части нашего исследования мы пытались определить, как часто в мобильном вебе следуют условностям использования доменов верхнего уровня. Для чистоты эксперимента брались в расчет только поддомены (например m.) и домен верхнего уровня .mobi (а также мобильные версии, расположенные на отдельных сайтах). Так, мобильные версии сайтов, расположенные на сайте в домене WWW внутри вложенной директории (например, /mobile/) в расчет не брались. Эти данные могут показать степень популярности домена .mobi и тенденции использования поддоменов на мобильных сайтах.
Рис.10: Использование мобильных доменов со степенью их популярности.
Рис. 11: Количество сайтов, не имеющих версии сайта, оптимизированной под мобильные устройства.
Рис. 12: Среднее количество поддоменов для одного сайта.
Рис. 13: Поддержка WAP и WML протоколов.
Рис. 14: Процент сайтов, перенаправляющих пользователей на отдельный мобильный домен первого уровня.
Рис. 15: PayPal использует для своих мобильных сайтов домены m., mobile. и .mobi.
Не смотря на то, что на большом количестве сайтов есть какая-либо мобильная версия и некоторые веб-сайты перенаправляли пользователя на мобильный сайт, использование домена .mobi оказалось намного меньшим, чем мы ожидали. Также мы заметили одну необычную тенденцию. В отличии от остальных стран, на Азиатских мобильных сайтах предпочитают использовать поддомен “3g” (вместо популярных в других странах “m” или “mobile”). Стоит также отметить, что только устройствам Apple повезло получить собственные поддомены, такие как “touch” или “i”.
Мобильные приложения
В данной части исследования мы пытались разобраться в том, какое количество сайтов из рассматриваемого списка имеет мобильные приложения под iOS, Android или Blackberry. Результаты обобщены и не разделены по конкретным платформам.
Рис. 16: Количество сайтов, имеющих приложения для мобильных устройств (на любой платформе).
Рис. 17: Процент сайтов, имеющих мобильное приложение, но не имеющих мобильной версии сайта.
Рис. 18: Сайт Internet Movie Database имеет мобильную версию сайта и приложение для iPhone, усовершенствующее еще дальше взаимодействие с мобильного устройства.
Неудивительно, что многие сайты из ТОП-100 имеют приложения для мобильных устройств, ведь эти сервисы достаточно популярны и распространены. Удивительно то, что многие сайты, не располагая мобильной версией (в любой форме), все же предлагают скачать приложение для мобильного устройства. Эта тенденция может свидетельствовать о том, что переход к сервисам, адаптированным под мобильные устройства, в основном происходит в виде появления новых мобильных приложений.
Среднее время загрузки
Здесь мы измерили среднее время загрузки всех сайтов чтобы понять, как в мобильных сервисах учтено ограничение пропускной способности беспроводных сетей и нетерпеливость, характерная среднему пользователю сети. Мы загружали сайты только по Wi-Fi (не используя 3G или EDGE, для уравнивания результатов при использовании эмуляторов устройств). Также мы отключили использование кэша: таким образом результат учитывает время, необходимое на загрузку любых внешних ресурсов.
Рис. 19: Самое высокое, среднее и самое малое время загрузки сайта в условиях «холодной загрузки» без кэша.
Рис. 20: Процент сайтов, которым требуется для загрузки более 10 секунд при использовании Wi-Fi.
Рис. 21: Процент сайтов, которым для загрузки через Wi-Fi достаточно трех секунд и менее.
Рис. 22: У мобильной версии YouTube один из наименьших показателей времени загрузки.
Хотя использование кэша значительно увеличило бы скорость загрузки, согласно результатам, подавляющему большинству мобильных сайтов для загрузки достаточно пяти секунд. В основном у сайтов, требующих для загрузки более 5 секунд, часто задержки происходили из-за медленного отклика сервера, а не из-за передачи информации по сети. Так как пользователи не хотят долго ждать появления на экране искомой информации, скорость загрузки сайта стала критичным параметром.
Вес домашней страницы
Для нас стало очевидным, что кроме скорости загрузки страницы, нужно также измерить вес загружаемых файлов вместе с любыми внешними ресурсами. Так как многие мобильные тарифы имеют серьезное ограничение в скорости и помегабайтная оплата за мобильный трафик по прежнему остается высокой, следует уделить внимание тому, оптимизирован ли сайт для загрузки в мобильном браузере, не является ли объем некэшированных данных таким же большим, как на среднем веб-сайте для десктопных компьютеров.
Рис. 23: Наибольший, средний и наименьший вес среди измеренных сайтов в килобайтах без использования кэша.
Рис. 24: Процент сайтов с общим объемом загружаемых некэшированных данных, превышающим 100 килобайт.
Рис. 25: Процент сайтов с общим объемом загружаемых некэшированных данных, меньшим чем 25 килобайт.
Рис. 26 Сайт Softonic отличился самым крупным весом домашней страницы.
Результаты этого теста очень интересны. В то время как большое количество сайтов (в основном ориентированные на WAP) весят менее 25 килобайт, что кажется приемлемым, значительное количество сайтов, якобы заточенных под мобильные устройства, весят более 100 килобайт, а порой вес домашней страницы почти доходит до 0,5 Мб! А еще нас удивило то, что процент сайтов, весящих 25 Кб и менее, точно совпал с процентом сайтов, весящих 100 Кб и более.
Doctype
При создании веб-сайта одним из первых вопросов становится то, какой язык или какая версия языка лучше подойдет для отображения контента вашего сайта. Религиозные войны насчет HTML и XHTML не утихают, и так как существует множество разновидностей, приспособленных для мобильных устройств (мобильные профили XHTML и WML), мы решили, что статистика использования разных DTD будет весьма полезна читателям. Так, в этой части исследования мы посмотрели, какой Doctype используется на главных страницах мобильных сервисов.
Рис. 27: Распределение языков разметки на мобильных сайтах, включая версии и профили языка.
Рис. 28: Сайты, использующие мобильные профили и сайты, использующие обычные профили.
Рис. 29: Процент сайтов, поддерживающих одновременно и WML, и XHTML.
Рис. 30: Мобильная версия сайта Dailymotion, адаптированная для iPhone — один из немногих веб-сайтов, использующих HTML5.
Результаты исследования наглядно показывают что XHTML пока еще гораздо популярнее HTML (или HTML5). Это может быть от того, что у HTML нет мобильного профиля (ведь мобильный профиль используется в большинстве случаев), хотя стоит отметить, что многие смартфоны поддерживали HTML и XHTML. Процент использования мобильных и десктопных профилей оказались почти равными. А еще, оптимизированная для iPhone версия сайта Facebook оказалась единственным сайтом, где вообще не был указан Doctype!
Проверка кода
Помня о семантической паутине и о важности соблюдения стандартов в нашем деле, мы провели этот тест, по примеру исследования Джефри Зельдмана, в котором он провел большое количество сайтов через простой тест валидации по принципу “прошел — не прошел”. Зельдман взял сайты для исследования из ТОП-100 Alexa, мы — из списка Google AdPlanner. Хотя следование стандартам — это не альфа и омега в разработке сайтов, этот тест был включен в наше исследование, чтобы посмотреть на то, насколько мы приблизились к семантической паутине.
Рис. 31: Количество сайтов, прошедших валидацию с распределением по языкам разметки.
Рис. 32: Процент сайтов, главная страница которых прошла валидацию по указанному DTD.
Рис. 33: MySpace не отличился от большинства и не прошел валидацию.
Исследование основывалось только на главных страницах мобильных версий веб-сайтов, поэтому результаты не такие полные, как могли бы быть. Однако они наглядно показывают внимание, которое уделяется мобильным версиям сайтов. К сожалению, результаты совпадают с результатами исследования Зельдмана: абсолютное большинство сайтов не соответствуют стандартам выбранных DTD.
Все это подчеркивает факт того, что для разработчиков дизайн оказывается приоритетнее оптимизации и качества кода.
Разделение кода
Отделение структуры, стиля и поведений позволяет уменьшить размер файлов (за счет избегания повторения кода и использования кэширования). Также нам показалось важным посмотреть, используются ли на мобильных сайтах CSS3 или jQuery для придания объектам более динамического поведения.
Рис. 34: Процент сайтов, использующих встроенные inline стили, вместо расположения в отдельных файлах.
Рис. 35: Процент сайтов, использующих внешние CSS 2.1 или CSS3.
Рис. 36: Процент сайтов, использующих внешние JS или jQuery.
Рис. 37: В мобильной версии сайта Википедия используется библиотека jQuery.
Хотя все мы предполагали, что в целях ускорения загрузки мобильных страниц, из них уберут стили и поведения элементов, на небольшом количестве сайтов весь код все же был встроен в страницы. Также, только небольшое количество сайтов использует фреймворк jQuery, и такое же малое число сайтов использует media queries в CSS3 для того, чтобы динамически менять размер содержимого. Как и следовало ожидать, число сайтов, использующих HTML5 настолько же мало, насколько мало мало число использующих CSS3.
Шрифты
Типографика — это неотъемлемая часть веба и того, как визуализируется информация. В данной части исследования мы смотрели на то, какие безопасные для использования в вебе гарнитуры и семейства шрифтов применяются на мобильных сайтах. Также мы отметили количество сайтов, полагающихся на шрифт по умолчанию и не указавших последовательность шрифтов, а также сайтов, указавших несколько шрифтов в последовательности. Мы смотрели на шрифты всего контента сайтов, а не только на шрифты заголовков.
Рис. 38: Гарнитуры, стоящие первыми в последовательности.
Рис. 39: Процент мобильных сайтов, в которых не указана последовательность шрифтов (и используется шрифт по умолчанию).
Рис. 40: Количество указанных шрифтов в указанном семействе на каждом сайте.
Рис. 41: Сайт m.naver.com рискует, используя небезопасную для веба гарнитуру.
Результаты исследования нас удивили. В каждом случае, когда указывалось семейство шрифтов, предпочтение отдавалось шрифтам без засечек (и в заголовках, и в тексте). Ни в одном случае не использовался шрифт с засечками, а в некоторых случаях шрифтовая семья не указывалась вообще (возможно, это из-за непоследовательности в наличии разных шрифтов в разных мобильных устройствах). В добавок к этому, на значительном количестве сайтов не были указаны последовательности шрифтов, из-за чего на этих сайтах используются шрифты по умолчанию.
Контрастность в заголовках
С тех пор как экраны мобильных устройств перестали уступать экранам больших компьютеров по количеству цветов и количеству точек на дюйм, у нас появилась возможность использовать любые цвета в качестве основных цветов и цветов фона в заголовках и контенте. Мы решили провести этот тест для того, чтобы определить, насколько часто в заголовках используются разные цвета кроме белого и черного, и насколько часто на мобильных сайтах в фоне используются различные эффекты вроде градиентов.
Рис. 42: Количество цветов, используемых для в качестве основных цветов и цвета фона в заголовке.
Рис. 43: Количество сайтов, использующих черный в основных цветах и белый в качестве цвета фона.
Рис. 44: Процент сайтов, использующих градиенты в фоне шапки.
Рис. 45: В шапке сайта 56.com используется большое количество контрастных цветов.
Как вы, возможно, и ожидали, большинство сайтов в качестве основных цветов используют черный или белый (иногда оттенки серого). Это делается для соблюдения максимальной контрастности на экране маленьких устройств, ради читаемости текста. Другой обнаруженный тренд — использование градиентов в заголовках для добавления в них текстурированного слоя вместо использования одного цвета или большого размера текста.
Контрастность содержимого сайта
Использование цветов в дизайне является главным средством мягко воздействовать на пользователя. Продолжая предыдущий тест, теперь мы рассмотрим какие цвета используются в блоках с контентом. Как и в предыдущем исследовании, учитывалась только заглавная страница сайта — мы рассматривали читаемость текста на фоне сайта.
Рис. 46: Количество цветов, используемых в качестве основных цветов и цветов фона.
Рис. 47: Процент сайтов, использующих черный основной цвет на белом фоне в блоках контента.
Рис. 48: На eBay, как и на большинстве сайтов, используется контраст черного текста на белом фоне.
Предыдущий тест, касающийся заголовков, показал, что для текста в основном используется черный и белый, чтобы получить хороший контраст. Результаты этого теста, как можно было ожидать, также показывают, что в блоках с контентом в основном используется черный и белый. Хотя мы смотрели только на главные страницы мобильных сайтов, результаты явно показывают старание создателей этих сайтов сделать текст легко читаемым.
Обязательная авторизация
Многие сайты требуют от пользователя авторизоваться, прежде чем им откроется полный доступ к сервису. На большинстве сайтов для десктопа неавторизированному пользователю доступна какая-то информация (объяснение возможностей и контакты). Однако нам показалось, что существует такая тенденция, когда пользователь, заходящий на мобильную версию сайта, по задумке создателей, уже должен иметь аккаунт и знать, какие возможности предоставляет сервис, как будто мобильная версия — это просто дополнение к сервису, а не другая версия сервиса, которой могут начать пользоваться новые посетители (и в мобильной версии показана только форма авторизации). Мы решили проверить, существует ли на самом деле такая тенденция.
Рис. 49: Количество сайтов, требующих авторизации перед показом внутренних страниц.
Рис. 50: Faceboоk требует залогиниться перед доступом на сайт.
Результаты этого теста удивляют. Следует считать плохой практику, когда на мобильной версии сайта пользователю показывается форма авторизации и никакого описания сервиса. Однако несколько из 100 самых популярных сайтов поступили именно так!
Переход обратно на полную версию сайта
Следующее исследование касается возможности пользователей мобильной версии перейти на полноценную десктопную версию. Хотя мобильной версии достаточно для большинства, некоторым людям может не понравиться альтернативный интерфейс, а некоторым могут понадобиться возможности, доступные только на основном сайте. Мы также попытались определить общепринятые способы называть ссылку на полную версию (если такая есть).
Рис. 51: Названия ссылки для перехода на основную версию сайта.
Рис. 52: Процент сайтов, не имеющих ссылки перехода на основную версию.
Рис. 53: На сайте Daum.net переход выполняется по клику на ссылку «PC Version».
Некоторые веб-сайты в тексте ссылки на основной сайт использовали общеупотребительные слова вроде “полный сайт” или “десктопная версия”. Нас удивил тот факт, что многие сайты, принудительно отправляющие посетителей на мобильную версию, не предоставляют ссылку на полный сайт (в некоторых случаях к нему даже запрещен доступ). Это, в свою очередь, не давало пользователям возможности использовать некоторые сервисы сайта.
Навигация
Этот тест оценивал то, что многие считают важнейшим элементом веб-сайта. Удачная навигационная структура может означать разницу между удобным интерфейсом и интерфейсом сложным и непонятным. В данном тесте мы рассмотрели четыре общепринятых вида навигационных меню (большинство сайтов используют сразу несколько): текстовые ссылки, ссылки с иконками, ссылки, созданные на картинках и особые меню (к примеру, выпадающие).
Рис. 54: Использование на сайтах навигации в виде текстовых ссылок, иконок или картинок-ссылок.
Рис. 55: Соотношение между навигацией с использованием текстовых ссылок против иконок и картинок-ссылок.
Рис. 56: Процент сайтов, имеющих особые меню (или динамически появляющийся контент).
Рис. 57: Меню выбора страны на мобильной версии сайта HP.
Ссылки, созданные на картинках, оказались довольно популярными и в действительности использовались чаще, чем ссылки с использованием иконок, что было для нас сюрпризом, учитывая, что в мобильных устройствах иконки используются повсеместно для представления приложений и сервисов. Особые меню были также довольно популярны, особенно в случаях с использованием динамически появляющегося контента при скроллинге.
Количество ссылок на главной странице
Маленький экран мобильного устройства — это большая проблема. Возможность потеряться в навигации и других ссылках может ограничить способность пользователя понимать, куда его приведет нажатие на одну из этих ссылок. Если на сайте слишком много (или слишком мало) ссылок, выбор следующего действия может показаться пользователю слишком сложным. Поэтому в следующей части исследования мы оценили количество ссылок на странице.
Рис. 58: Сайты, имеющие малое (1-25), умеренное (26-50), и большое (51+) количество ссылок на заглавной странице.
Рис. 59: Процент сайтов, имеющих большое количество ссылок из-за меню.
Рис. 60: Сайт 2345.com содержит на главной целый вагон ссылок. Хорошо ли это?
Тестирование проводилось только на главных страницах веб-сайтов. По результатам исследований мы выявили, что в мобильных версиях сайтов используется меньше ссылок чем на десктопных версиях. Такая практика соответствует общепринятому мнению, что на меньшем экране следует размещать меньше информации для того, чтобы упростить сайт и избежать ненужного скроллинга.
Количество картинок
Размещение изображений на мобильных сайтах — рискованное дело, так как они весят очень много и увеличивают время загрузки сайта. В данном тесте мы пытались выяснить, сколько картинок размещено на главных страницах исследуемых сайтов.
Рис. 61: Сайты, на главных страницах которых мало (1-5), умеренно (6-10) или много (11+) картинок.
Рис. 62: Сайты, на которых размещено много картинок из-за навигации с использованием иконок.
Рис. 63: Сайты, на которых размещено много картинок из-за навигации, построенной на картинках.
Рис. 64: Мобильная версия русского сайта Mail.ru использует картинки в качестве выделяющих элементов ссылок.
Результаты этого теста подтвердили распространенное предположение о том, что в мобильных версиях сайтов картинок меньше и размеры этих картинок также меньше (что можно объяснить небольшим размером экрана устройства). Это в свою очередь помогает снизить вес сайта и повысить скорость его работы (что отражено в предыдущих тестах). Интересно, что даже сайты, посвященные картинкам (как фотохостинг Flickr), тоже следует этой тенденции.
Области реагирования ссылок
В данном исследовании мы пытались понять насколько велики области реагирования ссылок (размеры области на странице, по которым можно нажать для перехода по ссылке) на рассматриваемых сайтах. Для мобильных устройств с их маленькими тач-скринами есть необходимость использовать области реагирования как можно большего размера, чтобы улучшить удобство и доступность (accesibility). Особенно это актуально для людей с большими пальцами. Размеры области определялись относительно других элементов на странице.
Рис. 65: Средний по сайту размер области реагирования в сравнении с другими сайтами.
Рис. 66: Процент сайтов с большим количеством ссылок и изображений и большой областью реагирования.
Рис. 67: Flickr использует ссылки, созданные на картинках для более наглядного и уверенного клика.
Согласно результатам исследования, значительное количество сайтов используют большие и средние области реагирования (чтобы предотвратить ненамеренный переход по соседней ссылке) — этот тренд особенно прослеживается на сайтах, связанных с изображениями, фотографиями и картинками. Еще один тренд заключается в том, что на русскоязычных и азиатских сайтах область реагирования в основном была маленькой (слова, состоящие из малого количества букв уменьшали области реагирования еще сильнее).
Разделение на блоки
Здесь мы посмотрели на то, как информация на сайтах визуально или физически разбита на блоки. Следует отметить, что на всех рассмотренных мобильных сайтах информация представлена в одной колонке (в том смысле, что нет горизонтальной прокрутки), но отделение ссылок и сегментов информации друг от друга можно использовать для лучшего представления информации. Так как на мобильных веб-сайтах скроллить нужно намного больше, разделение блоков здесь становится критичным для того, чтобы пользователь не терялся в содержимом.
Рис. 68: Количество горизонтальных блоков (колонки или ячейки таблицы) на рассматриваемых сайтах.
Рис. 69: Количество вертикальных блоков (заголовков или разделенных сегментов информации).
Рис. 70: Наибольшее, среднее и наименьшее количество блоков (горизонтальных / вертикальных).
Рис. 71: На сайте Zol информация разделена на блоки при помощи заголовков.
У большинства веб-сайтов не было разделений на горизонтальные блоки (включая ячейки таблиц, навигационные ссылки и другие элементы, расположенные напротив друг друга). Но на некоторых сайтах все же было от двух до восьми элементов, находящихся на одной горизонтальной линии. На большом количестве сайтов присутствовало разделение на горизонтальные блоки, что упрощало чтение.
Прокрутка содержимого
Наше последнее исследование касалось скроллинга на мобильных сайтах. Мы посмотрели на то, сколько пальцев нужно задействовать для прокрутки содержимого (например, при использовании overflow, для прокрутки требуется два пальца), а так же посмотрели, используются ли jQuery, JavaScript и CSS3 для реализации панельных слайдеров (когда панели листаются за определенный интервал, или когда секции контента можно пролистать вручную.
Рис. 72: Процент сайтов, использующих панельную навигацию вместо обычного скроллинга.
Рис. 73: Процент сайтов, использующий поэлементный скроллинг с overflow вместо полностраничной прокрутки.
Рис. 74: Yahoo разделил свой контент на несколько панелей, доступных по клику.
Результаты говорят о том, что прокручиваемые панели почти не используются (что косвенно показывает отсутствие “прикольных” скриптов на большинстве сайтов). Вполне возможно, что такой результат был получен из-за типа веб-сайтов, входящих в Топ-100 (на сайтах-портфолио и других демонстрационных сайтах панельная прокрутка использовалась бы намного чаще). Наряду с общим упрощением дизайна (ни на одном из сайтов не использовался прокручиваемый overflow), использовалась резиновая верстка, призванная упростить прокрутку.
Двигаемся дальше
Хотя использованная выборка и содержала широкий набор различных типов сайтов, нужно заметить, что в разных нишах результаты могли бы быть другими. Например, если бы это исследование проводилось на сайтах-портфолио, результаты были бы другими, т.к. на таких сайтах у пользователей другие нужды, что требует создания другого взаимодействия. Но все-же тенденции, найденные на рассматриваемых сайтах,
относятся и ко многим другим сайтам
Рис. 75: На разных веб-сайтах можно найти разные тенденции, но все-же все они имеют сравнимые сходства.
Для того, чтобы убедиться, что результаты этого исследования были характерны не только для самых популярных веб-сайтов, мы рассмотрели еще 10 сайтов (эти результаты не были включены в документ, т.к. задумывались просто как проверка основных результатов). Среди них были самые разные сайты, но большинство использовало похожие подходы, или немного меняло их из-за специфичных сценариев использования. Так что мы считаем, что выявленные тренды существуют по всему вебу.
Примечание: Нужно также отметить что ряд сайтов из Топ-100 были поддоменами или локализациями других сайтов из списка. Но таких сайтов было слишком мало, чтобы это исказило результаты.
Общие тренды
Общие тренды в мобильном дизайне включали использование скриптов, перенаправляющих пользователей мобильных устройств на мобильную версию сайта вместо того, чтобы предоставить этот выбор самим пользователям (это интересно, т.к. это палка о двух концах с точки зрения юзабилити). Другая устоявшаяся тенденция — использование поддоменов, которые помогают пользователям понять, что они находятся на мобильной версии сайта. Последняя общая тенденция — это неприятный факт, что код совсем немногих сайтов проходит валидацию!
Рис.76: На некоторых сайтах мобильная версия на самом деле автоматически генерируется при помощи инструментов вроде Mobify.
Модели в других типах сайтов
Если бы исследование проводилось на других типах сайтов, графики могли бы выглядеть немного по-другому. Примеры включают больший процент использования CSS3 на сайтах-портфолио, меньшее количество мобильных приложений на корпоративных сайтах маленьких компаний и больший процент сайтов с обязательной авторизацией, если бы исследование концентрировалось на социальных сетях. А на сайтах, ориентированных на контент (например, Smashing Magazine) большой вес страниц является очевидным побочным эффектом.
Рис. 77: Дизайнер Simon Collison на своем сайте использует CSS3 media queries для того, чтобы подстроить дизайн под разные размеры экрана.
Возможные усовершенствования исследования
Наше исследование можно было бы улучшить. Не смотря на то что мы тестировали сайты на большом количестве девайсов, в том числе iPhone 4, Blackberry, телефон Nokia, устройство на Windows Mobile, пара телефонов на Android, можно было бы исследовать совместимость с большим количеством устройств (не беря в расчет эмуляторы). Также можно было бы увеличить точность полученных результатов, испытав больше сайтов (круто было бы расширить количество сайтов до 1000).
Рис. 78: Можно было бы провести дополнительные исследования сайтов в определенных нишах. Например, это могли бы быть сайты новостей, как The Guardian.
Будущее мобильного дизайна
Результаты этого исследования интересны, но, надеемся, они вдохновят вас не только следовать выявленным трендам, но и искать новые. Если интернет — это пока еще подросток, то мобильный веб — это младенец. Это значит, что тренды будут меняться еще стремительней, вместе с исследованиями, которые будут проводиться с целью выяснить, как хорошо удовлетворяются потребности пользователей. Мобильный веб — это индустрия будущего, и мы должны уделять ему много внимания.
То, как мы делаем веб-сайты, меняется из-за появления новых устройств с новыми браузерами и разными размерами экрана, из-за фреймворков, таких как jQuery, из-за развития стандартов, как HTML5 и CSS3, и из-за того, что веб-сервисы постепенно переходят в облака. Хотя в дизайне для мобильных устройств существуют элементарные тренды (как отсутствие горизонтального скролла), следующие несколько лет выдадутся жаркими из-за того, что все больше дизайнеров заинтересуется этой быстро растущей аудиторией.
.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста :)
