§3.Дизайн мобильных приложений
3.1. Макетирование страниц мобильных приложений. Модульные сетки и прототипирование.
Работа дизайнера над мобильным сайтом и приложением начинается с формирования модульной сетки. В мобильной версии т в приложении можно использовать как ту же сетку, что и на десктопном сайте, так и разрабатывать новую. Первый способ дешев, быстр, но не всегда отвечает параметрам устройства. Создание новой модульной сетки может отразиться на целостности образа издания и его узнаваемости, но оптимизировано под мобильные устройства. Если заказчик принял решение использовать адаптивный дизайн, то в рамках самого подхода уже заложены организованные, хорошо масштабируемые типы макетов.
Так как адаптивность связана с бостонной сменой формы страниц, представлять дизайн можно в двух вариантах (и это является принципиальным отличием от традиционного графического дизайна): статичных макетах и вреймфорках.
Статичные макеты, несмотря на привычность, имеют ряд недостатков: число макетов возрастает пропорционально количеству устройств: мобильные, большие и мини-планшеты и т.д.из достоинств – простота создания. Фреймворки, или каркасы – интерактивные прототипы, созданные при помощи специального программного обеспечения31. Они дороже, но позволяют продемонстрировать адаптивность и частично – функциональность.
Известно несколько типов адаптивных макетов (т.н. лейауты):
Резиновый. Удобен и знаком аудитории, представляется готовыми фреймворками. Блоки помещаются во всю ширину экрана мобильного устройства, а при недостатке места – спускаются вниз при помощи вертикальной прокрутки;
Переносной. Сайты с множеством колонок можно верстать при помощи переноса. Сужение ширины дисплея ведет к автоматическому переносу урезанных второстепенных блоков (sidebars) вниз;
Метод переключения. Разработка отдельного лейаута под отдельные гаджеты. Такой метод макетирования сложен и дорог, однако он практически всегда дает отличные результаты. Этот метод верстки макетов, строго говоря, не соотносится философией адаптивности. Переключение чаще применяется при методе RESS;
Панельный метод. Первый из списка, изначально возникший в мобильных приложениях. Элементы навигации могут возникать по требованию пользователя при горизонтальном или вертикальном тапе. Этот вид макетирования экономит место, однако иногда аудитории необходимо время, чтобы обучиться работе с таким интерфейсом.
Верстка макетов веб-страниц осложняется тем, что экраны гаджетов не просто имеют различные размеры, но и по-разному отображают информацию с сервера, оттого отображение блоков выглядит не всегда корректно. Дизайнерам и разработчикам приходится тестировать свои макеты в различных средах и создавать по несколько версий одного и того же сайта и приложения.
Отдельным пунктом стоит упомянуть возможность смены ориентации экрана в мобильных устройствах. То есть дизайн осложняется еще и различными форматами в рамках одного устройства. Здесь возможны два пути: адаптивный макет позволяет подстраиваться под любую – горизонтальную или вертикальную – ориентацию. Другой способ – отказ от смены ориентации, который часто используют при дизайне мобильных приложений. Последний подход может вызвать негативную реакцию у части аудитории, но позволяет существенно экономить на этапе разработки32. Как правило, дизайнеры оставляют вертикальную ориентацию экрана, копируя традиционные формы печатной периодики.
Модульная сетка – один из важнейших краеугольных элементов веб-дизайна. Дизайн при помощи модулей, как оказалось, хорошо работает в пространстве веба и помогает создать гибкий адаптивный продукт. В мобильных версиях популярны прямоугольные блоки равного размера, которые легко перестраиваются и формируют колонки, не внося путаницы и не влияя на стилистику страницы.
Блочная система позволяет использовать технологию «ленивой подгрузки» (lazy loading)33 – прием, когда лента материалов загружается не сразу в полном объеме. Чтобы просмотреть более ранний контент пользователь должен прокрутить страницу вниз. Иными словами, лента может загружаться практически бесконечно. Таким образом, способ потребления информации существенно изменился с приходом цифровых технологий: от кодексного (печатная периодика) до свиткового. В каком-то смысле мы вернулись назад. Однако электронные версии журналов, распространяемые через мобильные приложения, сочетают в себе оба способа чтения: они разворачиваются как по горизонтали, так и по вертикали, а многие из них даже имитируют шум перелистываемых страниц.
3.2. Иллюстрирование мобильных сайтов и приложений: проблема масштабирования.
Подсчитано, что десктопные сайты в среднем состоят на 60% из изобразительных элементов, то есть больше, чем наполовину. Это не только отдельные рисунки и фотографии, но и фон, элементы навигации и прочее. Однако решение показывать на мобильном ресурсе изображения, оптимизированные для большого экрана и быстрого интернет-соединения, чревато долгой загрузкой. Масштабирование изображений для небольших портативных устройств – одна из основных проблем в мобильном веб-дизайне, и она до сих пор вызывает вокруг себя споры. Дизайнеры часто решают этот вопрос, создавая варианты формата одного и того же рисунка под разные экраны. Понятно, что число таких версий ограничено, к тому же, существуют погрешности браузера.
Основная роль изображений в СМИ – иллюстративная. Функции иллюстраций в классическом веб-дизайне и мобильном веб-дизайне практически не отличаются. Иллюстрация (от лат. Illustratio – освещение, наглядное изображение) – изображение, сопровождающее и дополняющее текст (рисунки, гравюры, фотоснимки, репродукции, карты, схемы и т. п.)34.
Выделим некоторые специфические задачи изображения в веб-дизайне:
Графическая основа веб-страницы, часто для отвлечения от технологической стороны (например, т.н. иллюстрации-противоядия, которые заставляют пользователя забыть о том, что они находятся в рамках виртуальной реальности);
Визуальное пояснение процесса и/или объекта (например, журналистского материала в СМИ);
Украшение страницы (декоративная функция не так ярко выражена в мобильном веб-дизайне);
Привлечение аудитории (в нативных приложениях данная функция отсутствует).
С изображениями в мобильном веб-дизайне стараются обращаться аккуратно. Во-первых, изображения достаточно тяжелы – большое количество и высокое качество картинок существенно тормозит загрузку страницы. Безусловно, изображения улучшают понимание информации, однако, существуют и другие способы для решения этой задачи. Для отображения картинки используют свойства CSS (каскадной таблицы стилей) фона и некоторые другие способы снижения нагрузки на систему.
Мобильные приложения имеют ограниченную функциональность, т.е. используются для решения одной и нескольких конкретных задач, поэтому нет смысла переносить туда все функции с официального сайта. Представление информации должно быть ясным, а излишние изображения лишь добавят пестроты и запутают пользователя, поэтому дизайнеры стараются минимизировать их присутствие на экране. С другой стороны, если просмотр и манипуляции с изображениями играют одну из ключевых ролей, необходимо ставить их верстку во главу угла.
Учитывая малый размер экрана, дизайнеры максимально упрощают навигацию. Её функции берут на себя элементы содержания. Изображение также может стать «кнопкой», ведущей пользователя в нужное место.
Немаловажно следить за цветовой гаммой изображений. Слишком резкие цвета мешают восприятию информации с экрана, поэтому, как правило, используются приятная для глаз цветовая палитра и контраст. Иллюстрации могут способствовать удачному представлению информации, а при неграмотной верстке - мешать. Часто дизайнеры предпочитают приглушать цвета на изображении, используют легкое снижение прозрачности, размытие (блюр). Считается, что специалисты предпочитают выбирать контрастные фотографии и рисунки без лишней детализации – её трудно воспроизвести на мобильных устройствах, несмотря на высокую разрешающую способность и широкий динамический диапазон дисплеев на современных устройствах.
В приложениях для СМИ бильд-редакторы стараются выбирать простые для интерпретации изображения. Как правило, это крупное статичное изображения предмета. Ввиду небольших размеров, качественное репортажная фотография, отражающая сложное взаимодействие нескольких лиц, с замысловатой композицией и неоднозначной трактовкой, скорее всего, не подойдет для репрезентации материала. С другой стороны, это справедливо, скорее, для смартфонов и мини-планшетов. Стандартные планшетные компьютеры имеют достаточную площадь экрана для более информативных фотографий, а, как мы уже говорили, будущее сетевых СМИ видят, в основном, за планшетами (во многом для этого они и были изобретены).
Одна из центральных проблем адаптивного дизайна – масштабирование изображений35. Верстка графических интерфейсов осложняется тем, что экраны гаджетов не просто имеют различные размеры (сравните дисплеи смартфонов и планшетных компьютеров в рамках даже одного производителя), но и по-разному отображают информацию с сервера. Мобильные браузеры могут представлять сайт каждый по-своему, оттого сверстанные дизайнером страницы могут искажаться на различных носителях.
Проблема масштабирования изображений в адаптивном дизайне – одна центральных, так как изображение само по себе имеет неадаптивную природу. Для корректного отображения на различных устройствах необходимо свободно масштабировать любой элемент. С простыми иллюстрациями сделать этого несложно, однако фоновые могут искажаться36. Решение данной проблемы лежит на плечах разработчиков, а не дизайнеров, однако последним не стоит забывать о сложностях с версткой фона и обращать внимание на итоговую обрезку изображения.
Другой вопрос, касающийся изображений – какой формат оптимален для дизайна мобильных приложений? Очевидно, что векторные изображения способны масштабироваться без потери качества. Среди векторных форматов наиболее часто встречается SVG, так как он универсален и взаимодействует со всеми популярными графическими редакторами. Однако в СМИ традиционно используется достаточно много фотографий. Так как фотографические изображения имеют растровую природу, их масштабирование вызывает определенные проблемы.
Проблема поиска идеального формата для мобильного дизайна пытаются решить многие телекоммуникационные компании. В частности, корпорация Гугл (Google) недавно ввела новое расширение – WebP, которое сжимается без потерь качества. При этом вес изображения уменьшается в три раза, если взять за образец популярный и, в целом, удобный растровый формат PNG. Для конвертации изображений в WebP дизайнерам предлагают воспользоваться библиотеками JavaScript. Использование данного формата может улучшить пользовательский опыт для мобильных сайтов с большим количеством изображений, к которым относятся многие СМИ.
Помимо работы с форматами, существуют другие способы масштабирования изображения, которыми может воспользоваться дизайнер. Например, голландец Даан Джобсис (Daan Jobsis) предложил одни из способов, который поможет сохранить качество изображения. Если удвоить размер картинки в программе Фотошоп, после сжать его на четверть или чуть менее, а затем восстановить в браузере его первоначальный размер, изображение, во-первых, станет меньше весить, а во-вторых, будет наилучшим образом отображаться на дисплеях с высоким разрешением, так как каждая точка увеличит плотность в два раза.
Медленное и нестабильное интернет-соединение ставит перед дизайнером проблему порядка загрузки изображения. Для удобства пользователей сначала должен отображаться основной контент, а лишь за ним – детали, такие как реклама, сайдбары, виджеты, второстепенные элементы навигации и прочее.
3.3. Типографика в мобильном веб-дизайне.
Печатные средства массовой информации – это, прежде всего, текст. Текст составляет большую часть сайта или приложения и является ключевым элементом любого новостного или аналитического издания. Следовательно, оформлению текстовой информации принято уделять особое внимание. Необходимо не только выбрать подходящий шрифт, но и хорошо владеть приемами типографики. Логотип (на который, вопреки распространенному мнению о его важности, аудитория почти не смотрит, либо смотрит единожды)37, изображения (многие из которых не понятны без подписи), различные дизайнерские приемы – все это бессмысленно улучшать, если текст нечитабелен, неоптимизирован, недоступен для использования.
То, что информация в Интернете на 95% является письменной речью (если мы оставляем за скобками теле- и радиовещание), показал Оливер Райхенштайн (Oliver Reichenstein)38
Попав на страницу, человек воспринимает её в целом, моментально оценивая кегль, длину строки и количество колонок. Если результат ему нравится, он приступит к изучению текстовой информации. Хорошая типографика облегчает понимание текста, грамотная верстка – концентрирует внимание на важных элементах. Основными параметрами, которые нужно учитывать при дизайне пользовательских интерфейсов – разборчивость (хорошо ли различимы графемы, отделены ли друг от друга слова и предложения?) и читаемость (легко воспринимать слова как единый текст).
На разборчивость и читаемость текста напрямую влияет его форматирование. Оптимальная длина строки была установлена экспериментальным путем еще в 1929 году американскими исследователями Тинкером и Патерсоном39. Они выяснили, что при шрифте в 10 английских типографских пунктов (черный текст на белом фоне), наилучшей читаемостью обладает строка в 75-90 мм. При большей длине строки скорость чтения снижалась, так как процесс требовал значительного количества периферических движений глаз. Другими словами, человек теряет начало следующей строки. В десктопных версиях длина строки увеличивается (за образец в веб-дизайне принято брать 65-значную строку), так как растет кегль и расстояние между глазом и текстом.
В случае с мобильной типографикой традиционные 65 знаков строке – слишком большая величина, так как дизайнеры вынуждены увеличивать кегль, чтобы текст был разборчивым в условиях маленького экрана и, возможно, слабой подсветки. В итоге текст выходит за границу браузера. Таким образом, количество знаков в строке уменьшается и зависит от конкретного типа устройства. При расчете этой величины стоит принимать во внимание процент от целого, то есть число символов в разметке. Средняя величина знаков в строке колеблется около 39 знаков – классической длине строки в периодике, и в этом смысле мобильный дизайн ближе к ней, чем к десктопу. Возможно увеличение длины строки до 50 знаков, но это относится уже к частным случаям дизайна и требует качественного тестирования. Верстка страниц в мобильном веб-дизайне принципиально отличается от газетного дизайна тем, что отсутствует многоколоночная верстка.
Типографика может как придать ресурсу индивидуальность, так и сделать сайт или приложение похожим на тысячи других. Часто можно услышать совет, что шрифт необходимо подбирать в соответствии с концепцией и задачами издания: традиционные СМИ должны выбирать традиционные шрифты, более современным и/или нишевым изданиям можно экспериментировать со шрифтами, к примеру, использовать гарнитуры без засечек для основного текста и т.д. Автору данного магистерского исследования такой подход кажется устаревшим – он имел место быть в период смена художественных парадигм, в момент перехода от классики к модерну. Сегодня, когда культурологи уже говорят о смерти постмодерна, делить шрифты на классические и неклассические не следует. По крайней мере, в рамках веб-дизайна. При выборе шрифта для основного текста вполне достаточно руководствоваться принципами качественной типографики:
Кегль. В мобильных версиях и нативных приложениях размер шрифта традиционно больше, чем на экране стационарного компьютера, так как чтение с гаджетов осложнено не только и не столько размерами экрана, сколько контекстом потребления информации: на ходу, в транспорте и т.д40. Оптимальный кегль подбирается в зависимости от шрифта, например, Tahoma требует меньшего кегля, чем Arial. Если говорить о соотношении размеров основного текста и заголовка, то контраст кеглей в мобильном дизайне меньше, чем на десктопе41. Для определения размерного контраста соотношение Фибоначчи может оказаться неоправданно большим.
Стили. Однообразие ухудшает восприятие. Плохо отформатированный текст недолюбливают даже поисковые системы. Необходимо использовать различные начертания, приемы выделения и т.д. Цитаты и врезки визуально разбавляют монотонность страницы и обычно требуют использование другого шрифта. Если на сайте или в приложении есть реклама, её обязательно нужно отделить от журналистского материала при помощи средств типографики. Шрифтовые акценты и нюансы, использованные разумно, работают на улучшение восприятия текста. К тому же, разрешение современных мобильных устройств уже позволяет достаточно точно отображать детали.
Интерлиньяж. Универсального взгляда на величину интерлиньяжа не сформировалось. Одни дизайнеры предполагают, что в мобильном дизайне справедливо правило, пришедшее из бумажной верстки: оптимальное междустрочное расстояние должно быть больше кегля на 10-15%. Другие советуют не ставить во главу угла экономию места и делать текст более разряженным. Таким образом, интерлиньяж становится крупнее кегля на 20% (например, при стандартных 12 пт междустрочный интервал составляет 16 пт). Когда дизайне пытается слишком уменьшить интерлиньяж в целях экономии экранного пространства, пробелы между словами начинают образовывать коридоры. И если в газетном фиксированном дизайне это устраняется на стадии верстки, то в условиях адаптивности практически нереально проследить за всеми возможными версиями расположения текста. Как правило, стандартная величина интерлиньяжа для мобильных устройств - 1,4 em, по мере увеличения экрана её стоит увеличивать. На практике дизайнеры иногда жертвуют оптимальным значением интерлиньяжа для подгонки строки под пиксельную сетку.
Сетка. При верстке текста на веб-странице необходимо использовать сетку для структурирования контента. Желательно, чтобы все страницы интерфейса были сверстаны при помощи единой сетки. Базовая сетка ориентирует дизайнеров дестопных сайтов, но в мобильном дизайне распространена т.н. «х-высота», то есть высота строчной буквы икс42. Она позволяет поместить верхние части букв максимально близко к пикселям, что увеличивает читаемость текста, так как пользователь узнает слово, в первую очередь, по его верхушке.
Выравнивание. В неадаптивном дизайне текст часто выравнивается по левому краю – это улучшает читаемость. Рваный правый край позволяет глазу пользователя цепляться за конец строки и быстрее находить начало следующей. Учитывая расфокусировку внимания пользователей мобильных устройств, это свойство оказывается необходимым – рваный край становится якорем, который позволяет быстрее вернуться к месту, на котором остановился читатель. В адаптивном дизайне принято думать категорией блоков, поэтому выравнивание по формату стало распространенным явлением – так проще переформатировать текст. Однако выравнивание по ширине на мобильном экране чревато большими разрывами между словами, которые отрицательно влияют на распознавание текста. Чтобы избежать негативного пользовательского опыта, в рамках адаптивного дизайна можно применять выравнивание по левому краю со знаками переноса для боле четкого края строк.
Цветовой контраст с фоном. Наилучшей читабельностью обладают тексты, шрифт которых контрастен фону. Сочетание черного и белого для основного массива текста – признанная типографская классика, однако эта цветовая пара не является неизменным каноном. Для выделения элементов навигации оправдано использование различных цветных подложек под надпись. Этот прием особенно любят применять в модельном дизайне, когда блоки вплотную примыкают друг к другу.
Контраст шрифта. Речь идет о соотношении его базовых и дополнительных линий. На ранних устройствах с низкой разрешающей способностью контрастные шрифты отображались некорректно, были неразборчивы. Сейчас ситуация заметно улучшилась, однако дизайнеру все равно придется работать с т.н. «сладкой точкой» – кегль, при котором искажение шрифта из-за встроенного в браузеры антисглаживания минимально43. Сладкая точка позволяет штрихам соответствовать сетке пикселей.
Засечки. Наверное, самый спорный вопрос в современной веб-типографике. Большинство дизайнеров до сих пор склоняется к мнению, что основной текст должен быть набран шрифтом без засечек, а заголовок и подзаголовок – с засечками.
Воздух. Мобильное приложение не позволяет разместить слишком много элементов в пространстве одного экрана – это и не нужно. Чаще всего, если есть возможность пожертвовать изображением в угоду, казалось бы, нефункциональному воздуху, специалисты советуют это делать. Воздух – хороший визуальный прием, который позволяет сделать дизайн ясным и гармоничным. Воздух вокруг интерактивных элементов, к тому же, увеличивает точность попадания по ним пальцем. Необходимо учитывать, что использование пальцев для управления уступает в точности традиционной мышке. Нельзя упускать из виду и поля страниц – это поможет разграничить кромку дисплея и текст.
Разбивка текста на колонки. Данный пункт важен скорее в дизайне сайтов, чем в дизайне приложений. Размер экрана и крупный кегль не позволяют дизайнеру разбивать текст на несколько колонок.
Кернинг, или межбуквенное расстояние. Менять кернинг или трекинг основного текста не нужно, при условии, используется качественный шрифт – эти параметры по умолчанию грамотно отрегулированы шрифтовым дизайнером. Однако в заголовках и в тексте, кегль которого мельче основного, межбуквенное расстояние полезно регулировать. Знаки крупного кегля можно размещать плотнее, знаки мелкого, наоборот, разряжать
Некоторые веб-дизайнеры предлагают рассматривать текст как пользовательский интерфейс44. Проблема заключается в том, что различные устройства и браузеры могут отображать шрифты по-своему, вплоть до искажения их рисунка. Многие веб-дизайнеры консервативны в выборе шрифтов и предпочитают базовые. Они хорошо известны пользователю (Arial, Tahoma, Trebuchet), хотя и немного скучны, однако с точки зрения корректности отображения безопасны – дизайнер может быть уверен, что выбранный шрифт не будет заменен на шрифт по умолчанию ни на одном из устройств..
Низкое разрешение некоторых дисплеев также может мешать восприятию текста, особенно страдают пиксельные и анти-алиасные гарнитуры. Тем не менее, обновление устройств идет такими темпами, что эта проблема в скором времени уже не будет стоять: компании, производящие телефоны и планшеты уже вполне освоили технологию retina и приближаются к 300 точкам на дюйм.
3.4. Навигация в мобильном дизайне
Уменьшенный формат экрана, использование тач-технологий и контекст использования мобильных устройств накладывают отпечаток и на особенности навигации по приложениям и мобильным сайтам. В отличие от изображений и типографики, навигация в мобильном веб-дизайне уже неплохо продумана.
Навигация десктопных сайтов, с одной стороны, сложнее мобильных, с другой – проще. Сложнее из-за большего числа взаимодействующих друг с другом элементов и большего поля страницы; легче тем, что навигационное меню хорошо просматривается, для него можно уделить достаточно места. К тому же, пользователь видит навигационную цепочку, или «хлебные крошки» – дублирующее меню, путь по системе файлов от корневой папки до текущего положения. Как уже говорилось в первом параграфе, одним из важных принципов юзабилити является указание места, где находится в данный момент пользователь. В мобильных приложениях реализовать этот принцип трудно, так как пользователю доступно лишь название текущего раздела. Для того, чтобы указать местоположение, дизайнеры размещают меню внизу страницы (если число ссылок не превышает пяти) или сбоку (при большем количестве элементов, доступ к которым может потребоваться в любой момент), ставят кнопку возврата, обязательно озаглавливают каждую страницу. В идеале структура приложения должна быть такой, чтобы пользователь знал, каков предыдущий экран и могу предугадать, что он увидит на следующем.
3.4.1.Навигационное меню
Расположение меню в веб-дизайне, как правило, горизонтальное. Однако в мобильных версиях чаще встречается вертикальная ориентация, в которой категории меню спрятаны под специальной кнопкой45. Рост числа приложений с боковым меню говорит о том, что такой способ оформления навигации удобен в условиях небольших экранов. Более того, он вмещает в себя больше пунктов. К тому же, сама иконка меню часто рисуется в соответствии с общим стилем страницы. Стандартное горизонтальное меню удобно, но не может содержать более пяти пунктов, в противном случае у пользователей начнутся проблемы с попаданием по кнопкам. Известно, что точность движения пальцев ниже, чем у мыши, и дизайнеры в процессе работы над навигацией должны ориентироваться на большие пальцы.
Навигация меню на адаптивных мобильных сайтах имеет свои особенности. На сегодняшний день придумано несколько решений оформления меню. Приведем наиболее известные схемы навигации, собранные Кевином Лью (Kevin Liew) в одной из своих статей46:
Выпадающий список. Одно из популярных решений. Имеет минус: такое меню нельзя привести к единообразию на всех устройствах и браузерах, так как выпадающий список невозможно стилизовать в CSS. Также возможны искажения структуры в мобильных версиях.
Раскрывающееся меню по CSS. Навигация прячется под кнопкой «меню» либо специальным знаком. При нажатии раскрывается выпадающий список, но уже оформленный при помощь каскадной таблицы стилей. Развернутое меню полностью перекрывает собой содержимое страницы, что позволяет избежать различий в отображении интерфейса браузерами устройств.
Сдвиг содержимого. Метод, широко применяющийся дизайнерами, так как он способен соблюсти единообразие в оформлении графических интерфейсов. Подпункты меню открываются нажатием специальной кнопки, при этом содержимое как бы съезжает вниз, но не закрывает собой все остальное. Достоинство сдвига – в визуализации движения, что упрощает восприятие страницы.
Блочное меню. Вертикальное размещение строк меню в виде блока. Создается при помощи стилей CSS. Если в меню находится много пунктов, пользователь будет вынужден прокручивать вниз, что не всегда удобно. Формирование меню блоками может занять неоправданно много места на экране устройства.
Якорные ссылки в футере. Двойное меню, располагающееся вверху и внизу экрана. Верхние элементы представляют собой ссылки на навигацию в футере. Футер – это элемент сайта, который обычно помещается внизу, но встречается и верхнее и боковое размещение на странице. Обычно в нем содержатся данные об издании либо данной главе. Футер может быть как постоянным (или мертвым), где текст остается неизменным, так и переменным (то есть, тем, который меняется от главы к главе) либо скользящим (таким, который меняется на каждой странице)47.
Боковая панель. Распространенное решение для iOS. Меню располагается в левой части страницы. данный способ пришел социальных сетей, где сейчас успешно реализован.
Всплывающее окно меню. Навигация размещена в попап-модуле (popup – (англ. «возникать, всплывать»). Позволяет индивидуализировать меню.
Круговая навигация. Редко встречающийся тип оформления навигации, когда элементы меню располагаются по кругу. Требует помощи CSS3 и ява-скриптов. Центральная кнопка выполняет функции возврата на предыдущий уровень.
«Вытягивание» меню жестом. Содержимое страницы обновляется благодаря жесту протягивания.
Для оптимизации навигационного меню под мобильные устройства дизайнеры должны проверить, соответствует ли оформление таким требованиям, как:
Небольшое количество кнопок. Если пунктов не хватает, необходимо сгруппировать некоторые из них и создать вложенные списки. Как правило, пользователь ожидает, что кнопки с разворачивающимся меню располагаются в верхней части страницы.
Размер кнопок. Для мобильных сайтов наилучшим решением являются короткие широкие блоки навигации – пользователь должен попадать по кнопкам не прибегая к масштабированию. Считается, что площадь, необходимая для нажатия, примерно равна квадрату 44х44 пикселя.
Минимизация действий. Количество кликов необходимо уменьшать до тех пор, пока это возможно. В идеале весь путь не должен превышать трех нажатий. При этом не стоит забывать о кнопке возврата – одном из основных элементов навигации в мобильных интерфейсах.
Иерархия категорий. Наиболее значимые пункты меню должны располагаться на верхних уровнях и/или вверху страницы. Второстепенные элементы можно найти при помощи прокрутки.
Иерархия страниц. В отличие от десктопных версий, где главная страница действительно является главной и содержит навигацию внутри себя, в мобильном веб-дизайне навигационное меню может замещать саму главную страницу.
3.4.2. Навигация и сенсорное управление
Одно из основных различий между ноутбуками/стационарными компьютерами и мобильными устройствами заключается в способе управления контентом. Сенсорные экраны позволяют обходиться без манипуляторов: мыши, клавиатуры, трекбола. Это удобно, но ухудшает точность попадания по области меню48. Тач-скрины существенно расширили способы взаимодействия компьютера и пользователя, добавив множество паттернов мелкой моторики кисти. Движения пальцами естественнее управления мышью или кнопками, и это позволяет освоить мобильные технологии даже детям в раннем возрасте. Во взаимодействие пользователя и машины вносится эмоциональный компонент.
Разнообразие движений, на которые откликается сенсор, позволяет существенно упростить навигацию. На техническом уровне процесс управления посредством касания происходит так: некоторая последовательность тач-событий объединяется в единую команду, и мы получаем жест. Большинство жестов понятны на интуитивном уровне, например, уменьшение масштаба посредством стягивания краев объекта пальцам до нужного размера.
Необходимо отметить, что управление с множеством точек контакта (мульти-тач-события) доступно не во всех экосистемах. К тому же, дизайнер должен учитывать, что мобильные версии, в отличие от нативных приложений, не откликаются на такие прикосновения. Как правило, управление сайтами осуществляется посредством отдельных нажатий, а не жестов.
Существует строго определенный и конечный список касаний и жестов, которые задействует пользователь. Этот язык универсален для всех устройств. Жесты делятся на навигационные и редактирующие. Основные варианты касаний включают, согласно гайдлайну Touch Gesture Reference Guide49:
Тач-событие
|
Характеристика
|
Управление
|
Нажатие
(Tap)
|
Короткое касание экрана
|
Выбор элемента, ускорение прокрутки
|
Двойное нажатие
(Double tap)
|
Двойное быстрое касание
|
Открыть, масштабировать
|
Перетаскивание
(Drag)
|
Непрерывное движение пальца слева направо
|
Перемещение или удаление элемента
|
Перелистывание
(Flick, swipe)
|
Быстрое смахивание в любом направлении
|
Прокрутка, перелистывание, раскрытие бокового меню
|
Сужение
(Pinch)
|
Свести несколько пальцев в одну точку
|
Уменьшение масштаба
|
Расширение
(Spread)
|
Разведение нескольких пальцев друг от друга
|
Увеличение масштаба
|
Длительное нажатие (Press)
|
Удерживать нажатие в течение некоторого времени
|
Выделение, смена состояний, статуса
|
Длительное
и короткое нажатие
(Press and tap)
|
Одновременный вызов двух тач-событий разными пальцами
|
Перетаскивание объекта, вызов контекстного меню
|
Длительное нажатие
и протяжка
(Press and drag)
|
Одновременный вызов двух тач-событий разными пальцами
|
Перетаскивание объекта, регулировка параметров объекта
|
Поворот
(Rotate )
|
Непрерывное вращательное движение одним или несколькими пальцами
|
Разворот объекта
|
Существуют и другие специализированные жесты, однако они второстепенны, и пользователя необходимо обучать их использованию. Все основные функции управления могут быть осуществлены вышеописанными жестами. Благодаря включению разнообразных жестов можно обойтись без лишних контекстных меню и гиперссылок, которые нагромождают небольшой экран портативного устройства.
Особенностью мобильных устройств, влияющей на расположение навигационных элементов, является частое управление при помощи пальцев только одной руки. Попытки улучшить эргономику в данном случае наталкиваются на проблемы так называемой «мертвой зоны» – областей экранов, труднодоступных для управления. Параллельно с увеличением диаметра экранов растет и мертвая зона.
Дизайн мобильных интерфейсов, учитывающий контекст управления одной рукой, отталкивается от понятия «зона большого пальца», введенного Стивеном Хубером (Steven Hoober) и Эриком Беркманом (Eric Berkman)50. Авторы описали зоны дисплея с точки зрения удобства использования больших пальцев руки. Эти зоны неодинаковы не только для смартфонов конкурирующзих производителей, но различны даже внутри линеек одного бренда. Тем не менее, в общих чертах они совпадают. В отличие от мертвой зоны, размер зоны большого пальца при увеличении экрана сокращается относительно общей площади. Графическую схему зон см. в приложении.
Как правило, в мертвую зону попадают такие навигационные элементы, как панели инструментов, традиционно располагающиеся сверху. Для приложений, созданных под смартфоны фирмы «Эппл» (Apple), характерно расположение в мертвой зоне кнопки «Назад». Этот важнейший элемент навигации дизайнеры давно научились заменять характерным жестом перелистывания слева направо (пользователь как бы отлистывает страницы назад). Приложения для системы «Андроид» (Android) поступает точно также с вызовом бокового меню, которое находится в труднодоступной для большого пальца верхней части дисплея. Этот прием называют «навигацией смахивания». Таким образом, размещая какие-либо элементы управления в мертвых точках, дизайнеры не призывают воспользоваться этими иконками, а, в первую очередь, демонстрируют действие, которое последует свайпом. Свайп при навигации смахиванием начинается за пределами кромки экрана. Свайп внутри окна просмотра является совершенно иным действием и вызывает другие сценарии.
Навигация смахиванием используется и для обратного свайпа, а именно, смахивания справа налево. Этот жест менее удобен для правшей, поэтому используется реже и в том случае, когда свайпу слева направо уже приписан определенный сценарий. Понять, что скрывается за этим жестом можно также по иконкам, располагающимся в правом верхнем углу. Чаще всего такой свайп используют для вызова контекстного меню приложения с расширенным списком категорий.
Достоинство свайпа заключено в его интуитивной понятности. Тем не менее, существуют элементы, к которым нельзя применять навигацию смахиванием. Это действия, влекущие за собой необратимые изменения («удалить», «отправить», «готово»). Смахивание – слишком легкий, привычный жест для таких важных функций.
Другой способ решения проблемы мертвой зоны – сокращение площади интерфейса мобильного приложения, его стягивание в зону большого пальца без искажения контента51. В экосистемах Android и iOS данный способ реализован различным образом. В первом случае окно просмотра уменьшается пропорционально экрану, во втором – страница сползает в нижнюю часть экрана при сохранении ширины. Этот метод не всегда эргономичен для пальцев и совершенно неудобен для глаз, так как сокращается размер элементов, поэтому его нельзя назвать удачным решением. Грамотный дизайн не помогает дотянуться до иконки, а избавляет от потребности это делать.
3.4.3. Навигация и контекстные меню
Помимо основного меню на мобильных сайтах реализуется контекстное меню. Контекстное меню — это облегченное меню, предоставляющее пользователю мгновенный доступ к действиям (таким как команды для работы с буфером обмена) с текстом или объектами пользовательского интерфейса52.
Контекстное меню оптимально не для каждого приложения – в этом отличие навигации на мобильных устройствах от навигации на дестопных сайтах. Этот вид управления стоит избегать в приложениях, которые реализуют простые функции (иногда и вовсе ограничиваются одной). То есть включение контекстных меню как элемента навигации в новостные ленты, приложения с давлением текста над мультимедиа может быть лишним. Тем не менее, в некоторых случаях контекстные меню успешно применяются: в рамках мобильного ТВ, в приложениях и на сайтах с большим удельным весом мультимедиа, интерактивных элементов, игровых технологий и встроенных услуг.
В интерфейсах для десктопов контекстные меню традиционно вызываются при помощи правого клика мыши. Вызов контекстных меню в мобильном вебе может осуществляться и другими способами. Наиболее распространенное и понятное пользователям решение – иконка меню в виде стрелки, направленной вниз.
Мобильные технологии предлагают множество возможностей по созданию программных продуктов. С одной стороны, это может быть рассмотрено как достоинство области, с другой, такое положение вещей обуславливает растерянность редакций, когда дело доходит до выбора. Нативные приложения, адаптивные и мобильные версии сайтов служат различным целям и по-разному решают задачи изданий. Более того, их внутренняя структурно-функциональная организация и особенности визуального оформления существенно влияют на конечную эффективность программных продуктов.
Во второй главе на основе приведенных теоретических подходов составлены критерии для оценки эргономической организации мобильных сервисов. По результатам исследования будут сделаны выводы об оптимальной эргономической модели для каждой группы общественно-политических СМИ. Иными словами, автор установит связь между видом издания и типом мобильного сервиса, способного наилучшим образом решить поставленные задачи. Параллельно будет проведен анализ особенностей дизайна мобильных продуктов российских СМИ и сделаны выводы о качестве их эргономической организации.
|
