название ориентации страниц в приложениях
Книжная и альбомная ориентация в мобильных интерфейсах
12 Ноя 2012, 14:00, написал Максим Шайхалов в разделе «Интерфейс»
Как правило встроенный акселерометр используется лишь для изменения ориентации экрана вашего мобильного устройства. Однако это лишь часть используемых возможностей.
И тем не менее разработка приложениях для различной ориентации требует вдумчивого проектирования. Эта функция должна быть уместна и максимально понятная пользователю.
Большинство приложений на данный момент использует или будет использовать различную ориентацию. В этой статье будут освещены основные понятия необходимые для работы с разной ориентацией.
Использование ориентации для вызова второго экрана
Приложение от YouTube наглядно демонстрирует эту функцию. В портретном режиме у пользователя есть много возможностей по управлению видео и учетными записями. В альбомном же режиме удобно управлять воспроизведением и смотреть видео. После окончания просмотра приложение изменяет ориентацию на портретную что вынуждает пользователя перейти к поиску новых видео.
YouTube в разных режимах.
Но не всегда изменение ориентации работает так продуманно. В CardMunch (визитки в LinkedIn) пользователи могут конвертировать фото визитки в контакт в адресной книге. В альбомном режиме полностью меняется интерфейс представления карт.
В альбомном режиме нет никаких подсказок и ограничено управление. Невозможно, к примеру, добавить новые карточки или же изменить существующие. В итоге, эта карусель вызывает лишь раздражение и недоумение.
CardMunch. Отсутствие визуальных подсказок в альбомной ориентации.
Модели поведения интерфейсов
В помощь UX-специалистам я разделил модели поведения интерфейса на 4 типа.
Текучий
Интерфейс меняется в зависимости от размеров экрана.
В Skype иконки меняю свое положение в зависимости от ориентации.
Pocket’s: одинаковая сетка, разная ширина.
Расширяющий
В этой модели интерфейс не только подстраивается по размер экрана, но и добавляет или убирает новые элементы. К примеру в IMDb для IPad в альбомном режиме используется широкая область для просмотра фильмографии. В портретной же ориентации этот список доступен только после нажатия дополнительной кнопки.
Обеспечение функциональности в любой ориентации дает пользователю комфорт. И вместе с тем позволяет пользоваться приложением при любой ориентации не принуждая держать устройство определенным образом.
Дополняющий
При использовании этой модели изменение ориентации вызывает альтернативный экран. К примеру, финансовое приложение. В вертикальной ориентации информация отображается таблицей, а в горизонтальной графиком.
Основной и дополнительный интерфейс в финансовом приложении.
Непрерывный
Изменение ориентации позволяет получить доступ к дополнительному интерфейсу. При этом функциональность предыдущего интерфейса сохраняется в новом. Например, приложение-пульт от ТВ. В альбомной ориентации открывается список каналов с сохранением функциональности по настройке, записи и просмотру каналов.
Программа передач в Smart Remote.
Определение ориентации по умолчанию
Above & Beyond интерактивное приложение-книга для Айпада о жизни и творчестве карикатуриста John Kascht. Насладиться карикатурами мы можем как в портретном так и в альбомном варианте. Однако горизонтальный режим показывает больше значимых и функциональных элементов. Вертикальная ориентация является дефолтной в Айпаде и перенос функциональных элементов в горизонтальную может сбить пользователей с толку.
Отсутствие управляющих элементов в вертикальной ориентации.
И в тоже время на планшетах Android, Windows 8, Playbook BlackBerry, ориентация по умолчанию — альбомная. Поэтому всегда стоит помнить о ориентации по умолчанию на том или ином устройстве.
Контекст использования
Используя различную экранную ориентацию можно значительно облегчить пользователю работу с кулинарной книгой. В портретной ориентации пользователь ищет рецепт. В альбомной ориентации начинается процесс готовки. В альбомной ориентации открывается удобный интерфейс с большими кнопками, отключается затемнение экрана, камера начинает воспринимать управляющие жесты (это поможет избежать прикосновения к экрану грязными пальцами).
Поваренная книга Бетти Крокер отличный пример правильного использования ориентации.
Визуальные подсказки о режимах ориентации
Дополнительная функциональность или экран могут быть непонятны. Если не дать пользователю подсказку, то та или иная функциональность может быть упущена. Например, классический калькулятор Айфона при смене ориентации может меняться на инженерный.
Визуальные подсказки могут значительно облегчить понимание интерфейса. Смотрим примеры.
Заголовок приложения
Положение заголовка может дать подсказку о дополнительной функциональности при смене ориентации.
Иконка
Есть много универсальных значков, например универсальный значок Share или кнопка Action у Apple. Поэтому предлагаю использовать специальную иконку для указания возможности смены ориентации. Его можно скачать пользоваться бесплатно.
Иконка появляется в любое время и используется как переключатель. Пользователю нет необходимости переворачивать экран, но иконка будет напоминать о возможности дополнительной функциональности.
Изменение кнопки в заголовке окна.
Иконка может работать и как индикатор ориентации.
Примечание: Идея не проверена и минусом такого решения является загромождение интерфейса. И в тоже время идея поможет расширить применение режимов ориентации и расширить их применение.
Шторка
Идея проста и заключается в показе некоего элемента при сдвиге которого будет показываться альтернативный экран.
Заключение
Проектирование интерфейсов с использованием ориентации не ново. К примеру, в альбомном режиме смартфоны открывают большую клавиатуру, а а почта перейдет на Master–detail интерфейс. Но такое проектирование в первую очередь идет как дополнение к основному интерфейсу. А пользователи, которые используют дефолтную ориентации часто и не догадываются о таких возможностях. Добавив простые подсказки дизайнеры интерфейсов могут сделать свои продукты еще понятнее и удобней.
Проектирование интерфейсов для мобильных устройств: книжная и альбомная ориентации
Встроенный в ваш смартфон или планшет акселерометер, как правило используется для переключения между портретным и альбомным режимами. Эта функция предоставляет широкие возможности для более удобного использования устройства.
Тем не менее, разработка приложения для различных режимов ориентации приносит некоторые проблемы и требует более внимательного отношения. Применение этой функции должно быть понятным пользователю. А мы как разработчики должны понимать контекст использования этой возможности.
Почти все мобильные и планшетные приложения используют или будут использовать функцию ориентации. В данной статье рассматриваются некоторые основные понятия, которые дизайнеры и разработчики могут использовать чтобы правильно спланировать переключение между режимами.
Использование устройства ориентации для активации дополнительного экрана
Мобильное приложение YouTube является хорошим примером применения функции ориентации. Портретный режим предлагает многофункциональный интерфейс для открытия видео и просмотра учетной записи пользователя. Альбомный режим обеспечивает комфортный просмотр и управление воспроизведением. Когда видео заканчивается дисплей автоматически переходит из альбомного обратно в книжную ориентацию, что заставляет пользователя быстро наклонить устройство для просмотра и поиска новых видеороликов.
Однако использование ориентации для активации дополнительного экрана может и наоборот сбить пользователя с толку. Например в CardMunch (бизнес-карты пользователя LinkedIn) где пользователи могут преобразовывать изображения визитки, сделаные с помощью камеры смартфона в контакты в адресной книге. Вращающийся CardMunch в альбомном режиме полностью изменяет интерфейс для обзора всех сохраненных карт.
YouTube мобильный интерфейс в портретном и альбомном режимах.
Этот интерфейс не имеет никаких визуальных подсказок о своей ориентации и имеет ограниченные функции управления. Вы не можете добавить или изменить визитные карточки, в результате чего эта карусель несколько раздражает и смущает, особенно если вы запустили приложение в альбомном режиме.
CardMunch на LinkedIn отсутствуют визуальные подсказки о его дополнительном экране.
Модели для конструирования ориентации
Чтобы помочь UX-специалистам я выделил четыре основные модели для конструирования ориентации.
Жидкость
Этот интерфейс просто приспосабливается к размерам экрана.
В мобильном интерфейсе Skype иконки меняют положение при переходе из книжной ориентации в альбомную.
Pocket’s мобильный интерфейс, тот же макет только разная ширина.
Расширенный
Этот интерфейс не только подстраивается под размер экрана, но и добавляет или вычитает расположение компонентов в соответствии с выбранным режимом ориентации. Наприемер IMDb для IPad использует широкий экран в ландшафтном режиме, чтобы иметь возможность просматривать фильмографию слева. Этот список также доступен и в портретном режиме, но только после нажатия соответствующей кнопки в правой части экрана.
IMDb для IPad.
Обеспечение визуальных элементов и функциональности в любом положении в конечном итоге дает удобство для пользователя. Тем не менее, не насаждая пользователю держать устройство определенным образом дает особое преимущество, особенно если необходимая функциональность не появляется в ориентации по умолчанию.
Дополнительный
В этой модели изменение ориентации вызывает вспомогательный экран с соответствующей дополнительной информацией. Примером может служить финансовое приложение, которое отображает данные в портретном режиме по умолчанию, а при изменении ориентации показывает визуальный график.
Пример основного и дополнительного окна приложения о финансах.
Непрерывный
Как и YouTube, непрерывный дизайн позволяет пользователю получить доступ к дополнительному интерфейсу путем простого вращения устройства. В качестве примера можно использовать смартфон в качестве пульта дистанционного управления для смарт-ТВ. В режиме альбомной ориентации устройство откроет полный путеводитель по программам, сохраняя при этом функциональность для изменения настроек каналов, просмотра и записи будущих программ.
Smart Remote и программа передач.
Ориентация по умолчанию
Above & Beyond это интерактивная книга для IPad о жизни и творчестве американского художника-карикатуриста John Kascht. Прекрасное искусство в этой книге отображается как в портретном так и альбомном режиме. Тем не менее, горизонтальный режим показывает важные интерактивные элементы, которые не отображаются в портретном, такие как возврат в главное меню. Портеретная ориентация, является ориентацией по умолчанию в IPad, поэтому перенос подобной функциональности в альбомный режим могут только запутать пользователей.
В портретном режиме отсутствуют элементы управления.
В отличии от устройств на Android, Windows 8, Playbook BlackBerry, где по умолчанию ориентация альбомная. Поэтому стоит помнить, что ориентация по умолчанию должна использоватся вашими пользователями по назначению.
Понимание контекста
При разработке приложений для смарт-устройств давайте рассмотрим контекст и обстоятельства, при которых это приложение будет использоваться, в частности при разработке режима ориентации. Например: интерактивные поваренные книги стали очень популярны. Производители оборудования и аксессуаров создают множество устройств для облегчения использования IPad на кухне, в том числе моющийся стилус для использования при приготовлении пищи.
Мы можем использовать ориентацию для создания более удобного интерфейса для пользователя. В портретной ориентации пользователи могут пролистывать список ингридиентов в рецептах для конкретного блюда. При переключении в альбомный режим интерфейс изменится на пошаговую инструкцию с большими кнопками. Этот дружественный к повару интерфейс предотвратит автоматическое затемнение экрана, а также позволит переключать страницы взмахом руки перед камерой, чтобы избежать прикосновению к экрану грязными руками во время приготовления пищи.
Поваренная книга Бетти Крокер для IPad является примером понятного интерфейса.
Визуальные подсказки о режимах ориентации
Дополнительный экран или дополнительная функциональность зависящая от ориентации не всегда может быть понятной и логичной. Без визуальных подсказок в определенной ориентации, пользователь может пропустить дополнительную функциональность. Классическим примером может служить встроенный в iPhone обычный калькулятор, который как многие не знают может меняться на инженерный.
Визуальные подсказки при ориентации в целом могут значительно упростить и сделать работу пользователя более интуитивно понятной. Ниже приведены несколько примеров того как можно использовать подсказки при режимах ориентации.
Title Bar
Указание загаловка в начале приложения тонкая подсказка пользователю. Этот метод особенно важен при использовании ориентации на дополнительном экране, и служит надежным напоминанием о дополнительном функционале.
Примечание: Данный метод не обеспечит 100% эффективности в понимании пользователем функционала режима ориентирования, более надежным методом можно считать применение графических указателей или Coach Marks.
Значок ориентации
Многие универсальные значки, такие как универсальный значок Share или кнопка Action у Apple зарекомендовали себя с хорошей стороны, поэтому я предлагаю стандартный значок для ориентации. Вы можете скачать его и использовать бесплатно.
Иконка может появиться в любое время и использоватся как переключатель между ориентациями дисплея. От пользователя не требуется поворачивать экран для просмотра дополнительной информации, но иконка будет подталкивать пользователя к использованию ориентации для просмотра дополнительного экрана. В конечном счете значок будет служить напоминанием о дополнительной функциональности.
Ниже приведены примеры использования этого значка ориентации:
Переключите кнопку в заголовке окна.
При условии что этот значок станет стандартом, то он сможет послужить хорошим индикатором ориентации.
Ориентация переключения в углу экрана.
Примечание: Значек ориентации не является проверенной идеей, и большим его минусом является излишнее наполнение интерфейса. Однако на мой взгляд идея проста и эффективна и позволит разработчикам лучше использовать режим ориентации и расширить его применение.
Занавеска
Иллюстрация работы Занавески.
Идея заключается в том, чтобы показать некий выдвигающийся элемент, который будет закрывать или открывать дополнительный экран как занавеска. Которую пользователи смогут свободно открывать и закрывать.
UI-элементы и жесты в мобильных приложениях
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Splashscreen — изображение, «заставка», которую пользователь видит во время загрузки приложения.
Заглушка — название говорит само за себя: это элемент, сигнализирующий о какой-то проблеме(отсутствует интернет-соединение, сервер временно недоступен, ведутся технические работы, по вашему запросу ничего не найдено и т.п.). Обычно заглушка отображается там, где должен быть контент, но по каким-то причинам он не был получен.
Webview — компонент, который позволяет отобразить страницы веб-сайта в приложении. Например, webview «Как получить бонусы»:
Popup — всплывающее окно, которое появляется внезапно, без запроса пользователя, и отображается поверх экрана, на котором находился пользователь. Не стоит путать с диалоговым окном, которое появляется при совершении пользователем какого-либо действия.
Action menu — кнопка, которая представляет собой три точки, и при нажатии (тапе) на которую открывается меню с несколькими action’ами.
Tab — вкладка; обычно переключение между табами осуществляется нажатием (тапом) на нужный таб или смахивание (свайпом) вправо/влево.
Toast — всплывающее уведомление, не блокирующее работоспособность приложения и плавно исчезающее спустя несколько секунд. Может сообщать о какой-то ошибке, о совершении какого-то действия (например, публикация каких-то изменений). Обычно тоаст содержит текстовую информацию, но может содержать и картинку.
Progress Bar — индикатор степени выполнения какого-либо действия (например, показывает оставшееся время работы активности «продвижение товара»).
TabBar — панель вкладок в нижней части экрана, позволяющая быстро переключаться между разделами приложения.
AppBar (Android) / NavBar (iOS) — панель инструментов в верхней части экрана, содержащая кнопки управления текущим экраном.
Alert — оповещение, которое передает важную информацию, связанную с состоянием приложения или устройства, и часто запрашивает обратную связь. Алерт состоит из заголовка, необязательного сообщения, одной или нескольких кнопок.
Toggle switches/Тумблер — переключатель между двумя состояниями вкл/выкл.
Bottomsheet — информационная панель, появляющаяся снизу экрана поверх текущего состояния при совершении какого-нибудь действия. Может содержать информацию, а также какие-либо действия.
Bubble — овальный элемент выбора какого-либо параметра, чаще всего используется в фильтрах.
Строка поиска — поле ввода для поискового запроса.
Placeholder — текстовая заглушка в поле ввода, подсказывающая, что можно туда ввести (на скринах — текст «Поиск объявлений»).
Page Controls — элемент управления, который отображает текущее положение экрана в плоском списке страниц (на скринах — точки над кнопкой, отображающие текущее положение через изменение цвета).
Counter — точка или число, обозначающее количество непросмотренных уведомлений (например, количество непрочитанных сообщений).
Overlay — перекрывающий слой, который позволяет затемнить или осветлить элемент, на который он был наложен.
Tooltip — всплывающее сообщение, которое завязано на элемент и обучает использованию той или иной части приложения.
Onboarding — обучающая функциональность в приложении, появляющаяся при первом запуске для ознакомления пользователя с продуктом.
Suggest List — выпадающий список, состоящий из подсказок; появляется при вводе букв, слов или символов в поле ввода. Или список ранее совершенных поисковых запросов. Отдельный пункт из этого списка — Suggest.
Checkbox — элемент интерфейса, позволяющий выбрать любое количество опций (ни одной, одну или несколько).
Status Bar — строка состояния, содержащая общую информацию об устройстве: время, дату, сеть, уровень заряда и т.п.
Slider — горизонтальная шкала с элементом управления, по которой скольжением пальца можно управлять состоянием или значением характеристики (в нашем случае — расстоянием от указанного адреса):
Жесты
Тап — касание, нажатие на сенсорный экран. Чтобы открыть любое приложение на смартфоне — мы тапаем на его иконку.
Double tap — два коротких касания, двойной тап.
Мультитап — три и более тапов подряд по одному элементу.
Лонгтап — нажатие с удержанием на несколько секунд. Позволяет открыть дополнительные опции там, где они есть.
Скролл — вертикальное пролистывание содержимого скольжением пальца по экрану сверху вниз или снизу вверх.
Свайп — смахивание вниз, вверх, вправо или влево. Похоже на скролл, только с «легким», коротким касанием.
Pull to refresh (p2r) — дословный перевод: «потяни для обновления».
Drag&Drop — изменение положения элементов интерфейса с помощью перетягивания: как говорит нам название — «тащи и бросай»!
Pinch — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?