скроллинг в мобильном приложении
Как бесконечный скролл в мобильных приложениях разрушает потребление контента
Понедельник, 11 вечера. Ты лежишь в постели и читаешь Twitter. Или Instagram. Или Facebook. Или Flipboard. Ты доходишь до конца ленты, и появляется анимация, свидетельствующая о загрузке новой порции информации. Еще больше новостей. Больше картинок. Ты снова скроллируешь. И снова анимация. Еще больше контента. Снова скроллируешь. И так без конца. Ты не можешь закончить. Поток нового контента не ослабевает. Пока ты спишь, лента снова наполнится, как озеро наполняется дождем. Следующим утром твой iPhone снова будет в твоих руках. Скроллинг. Цикл загрузки. Больше контента. Без конца. И это надо изменить. Это чувство неудовлетворённости необходимо заменить чувством достижения чего-то существенного, достижения конца.
Огромные объемы информации привели к потере чувства завершенности. Когда ты читаешь газету, у нее всегда есть конец. В этой газете ограниченный объем информации. И это ключ к чтению. Понимание того, что когда ты достигнешь конца, ты будешь знать все, что ты можешь из нее узнать. Когда ты читаешь книгу, ты читаешь ее с пониманием того, что когда ты перевернешь последнюю страницу, ты узнаешь ответ. Ты узнаешь, как она заканчивается, и ты закончишь что-то.
«Бесконечные» приложения, такие как Instagram или Facebook, отвергают этот опыт. Сначала это выглядит здорово. Бесконечный поток контента никогда не даст тебе скучать. Всегда есть что почитать, что узнать, наша потребность в новом никогда не останется неудовлетворенной. Это как шведский стол. На первый взгляд прекрасно. Но после трех часов ты чувствуешь переедание. После долгих часов прокрутки Instagram, Facebook, Twitter или Flipboard наш ум устает. Ты чувствуешь интеллектуальное перенасыщение и полное неудовлетворение. Почему? Потому что там осталось еще так много всего! Что если ты что-то пропустил? Что если там, всего в одном скролле, в одном движении пальцев, осталась критически важная информация?
Эту проблему бесконечной неудовлетворенности надо решить. Разработчикам мобильных приложений надо понять, что граница уже перейдена. Что иногда, если не всегда, людям надо достичь конца. News Digest от Yahoo пытается решить эту проблему, но на очень ограниченной аудитории. Приложение предлагает один и тот же новостной контент каждому пользователю, что явно не идеально. Для решения проблемы бесконечного контента нам не надо терять персонализацию. Нет никаких сложностей для Facebook, Instagram или Twitter алгоритмически определить, скажем, 20 важных для нас постов и предложить посмотреть только их. Нет сложностей новостному приложению подобрать 10 локальных или международных историй и показать только их.
Конечный список. Лента Instagram, которую можно долистать до конца. Фид Twitter-а, который заканчивается. Может быть, когда появятся такие приложения, в 11 вечера в понедельник ты сможешь почувствовать себя закончившим все дела. В конце ленты не будет анимации. Мы будем читать истории, когда захотим читать. Будем узнавать то, что захотим. Мы наконец-то будем удовлетворенными. Или, в конце конов, нет.
Правила скролла в мобильных приложениях. Взаимодействия и методы
Я тестировал скролл в трех разных проектах и открыл для себя его плюсы и минусы, и, возможно, несколько правил его использования. Надеюсь, это поможет вам при создании и прототипировании вашего следующего продукта.
Основы
Насколько я могу судить, при использовании такого паттерна на странице, как скролл существует одно общее правило.
Правило #1
Вы можете применять скролл к объекту только по одной оси за раз.
Как правило, эта ось является вертикальной или горизонтальной. Вертикальный скролл является основой практически любого цифрового взаимодействия, с которым вы столкнетесь, а горизонтальный – это обычный способ показать встроенный контент, не жертвуя информационным пространством. Однако, когда вы применяете скролл к более, чем одной оси, вы нарушаете границы. Вы даете объекту пространство, в котором он должен занимать любую точку между этими осями.
В приведенном выше примере (красный квадрат) показывает объект с возможностью прокрутки как по вертикали, так и по горизонтали. Он становится объектом свободной формы, более похожим на взаимодействие с перетаскиванием, чем как взаимодействие с прокруткой. Я уверен, что есть изобретательные способы использовать подобный вариант, но они, скорее всего, не будут восприниматься как скроллинг.
Поправка
Оказывается, вид скролла объекта свободной формы –это совершенно нормальный прецедент. Например, скролл карты на вашем телефоне. Он используется в различных приложениях и не рассматривается в этой статье. Я говорю только о более традиционных жестах скроллинга: вверх-вниз, влево-вправо.
Вложенный скролл
Возможно, у вас не получится нарушить правило одной оси, но вы можете обойти его. Наиболее надежным способом выхода скроллинга за пределы одной оси является добавление групп вложенного скролла. Группы вложенного скролла позволяют одновременно применять вертикальные и горизонтальные жесты скролла к одному объекту.
Что на самом деле происходит – это использование скролла двух отдельных объектов и применение их к одному объекту. Это означает применение группы скролла к одному объекту, а затем применение отдельной группы скролла к объекту, который уже содержит первый объект (или является его родителем). Я взял часть иерархии из дизайна, чтобы показать это. Эта структура позволяет группе «фрукты» прокручиваться отдельно от группы «овощи» и одновременно с ней, потому что группа фруктов получает жесты от двух взаимодействий скролла.
По существу, вложенный скроллинг использует переходы из двух источников для обхода правила №1. Это прекрасно работает, пока эти два источника не начнут конфликтовать. В приведенном выше примере группа «фрукты» прокручивается вертикально, а родительская группа «фрукты-овощи» прокручивается по горизонтали. Это делается по необходимости. Если обе группы будут прокручиваться в одном направлении, скажем вертикально, то оба взаимодействия будут конфликтовать. Система не сможет отделить один жест скролла от другого, и дизайн, безусловно, сломается. Одно взаимодействие блокирует другое, запрещая его использование. Это приводит меня ко второму правилу использования скролла.
Правило #2
Вы не можете применять к одному объекту два взаимодействия скролла на одной оси.
Даже вложенный скролл не поможет. Если объекты находятся в одном и том же пространстве, то, когда дело доходит до скролла может быть только одно взаимодействие, связанное с вертикальным жестом и одно взаимодействие, связанное с горизонтальным жестом. Хотелось бы надеяться, что это недостаток программного обеспечения только у меня. Хотя, я так не думаю.
Комбинированный скролл
Не бойтесь, есть выход. Комбинированный скроллинг (название, которое я только что придумал) и есть наше решение. Вместо того, чтобы фокусироваться на фактическом взаимодействии прокрутки, комбинированный скролл позволяет вам распространить это взаимодействие для остальной части дизайна.
Суть его заключается в том, чтобы анимировать взаимодействия скролла. Вы используете прогресс группы скролла для определения контента в других частях дизайна. В примере ниже (слева) группа вложенного скролла позволяет прокручивать различную обувь, а также описание для каждой пары обуви. При этом меняются иконки обуви внизу. Они не входят в группу скролла, но кажется, что они прокручиваются вместе с ней, несмотря на то, что они очень разные по размеру и форме. На самом деле срабатывает анимация, связанная с взаимодействием скролла. Я анимировал иконки обуви, чтобы они были в определенных положениях при определенных точках положения скролла. В результате один жест управляет несколькими различными частями дизайна. Кажется, что реализация подобного приема займет много времени, но я уверяю вас – это не так.
Однако, не все так хорошо. Посмотрите на другой пример (справа). Получаем такую же динамику, но наоборот. Иконки обуви находятся в группе вложенного скролла, а обувь / описание – нет. Вы можете сказать, что взаимодействие не такое плавное, как в примере слева, и для активации анимации требуются большие жесты. Могу сказать вам, что это конкретное взаимодействие часто ломалось. Бывает, что скролл не вызывает анимацию. Скажем, триггер для появления обуви – это положение скролла от 0px до 66px. Если я прокручу на 5px-66px, тогда анимация не сработает, и я получу сломанный прототип. До того, как я пришел к третьему правилу скролла, было много проб и ошибок.
Правило #3
Активная манипуляция
К этому моменту, думаю, я слишком далеко отклонился от первоначальной цели скролла. То, что отличает скролл от свайпа и сдвига – это активная манипуляция. Свайп начинается и заканчивается. Скроллинг всегда активен. В предыдущих дизайнах широко используется прокрутка страниц, которая удаляет это активное качество. В следующем дизайне я попытался его выделить.
Я переработал (отчасти) опыт использования Medium на мобильных устройствах, чтобы добавить секцию скролла, включающую все, что может понадобиться пользователю Medium. Вы можете открывать и закрывать секцию скролла, сохраняя информационное пространство. Более того, секция скролла довольно большая, и поскольку скролл – это активное взаимодействие, вам нужно прокручивать ровно столько, сколько требуется для нужного вам контента. Сначала отображается контент с самым высоким приоритетом.
Мне нравится этот дизайн, но я признаю, он слабый. И это потому, что, как вы могли заметить, я нарушил свое правило №2. Вертикальный скролл для открытия секции скролла находится поверх вертикального скролла основного контента. Иногда, при скролле, жест разрывает границы контента, заставляя секцию скролла самопроизвольно открываться. Мне, действительно, приходилось мыслить нестандартно, чтобы этот дизайн реагировал на два отдельных вертикальных жеста скролла. Тот факт, что он вообще работает, несмотря на «правило», которое утверждает, что это невозможно, означает, что есть возможности для изменения и нарушения правил. Так что…
Правило #2 дополненное
Вы не можете применять к одному объекту два взаимодействия скролла в одном направлении на одной оси. : D
Надеюсь, понятно, что я не отношусь к этим правилам слишком серьезно. Это всего лишь мои наблюдения. Надеюсь, мы сможем полностью избавиться от правил.
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 — жест, используемый для изменения масштаба картинки (увеличения или уменьшения): для уменьшения два пальца касаются экрана и сводятся вместе, для увеличения — разводятся в стороны.
Вот и весь наш список терминов, описывающих элементы интерфейса и жесты. А чем его дополнили бы вы?
Ваши идеи. Наши технологии. Для миллиардов пользователей
Масштабирование
Развивайте свой бизнес по всему миру, используя нашу платформу.
Итерации
Проводите эксперименты и тестирования, чтобы подготовить приложение для запуска и дальнейшего использования.
Статистика
Используйте детальную информацию и данные, имеющие практическое значение, чтобы принимать правильные решения.
Что нового в Google Play
Рассказываем новости с Саммита для разработчиков Android. Узнайте о новых функциях и инструментах, которые помогут вам добиться успеха на нашей платформе.
Создавайте качественные приложения и игры
Хотите добиться долгосрочного успеха? Повышайте производительность приложения и качество контента, а также улучшайте интерфейс и функции.
Отчеты о тестировании
Выявляйте проблемы, например со стабильностью и производительностью приложения, до того, как они коснутся пользователей.
Android Vitals
Отслеживайте и повышайте производительность своего приложения или игры.
Будьте уверены в своем продукте
Выбирайте подходящую стратегию и пользуйтесь инструментами, которые позволяют публиковать приложения, управлять ими и успешно выводить их на международный рынок.
Страница приложения
Совершенствуйте страницу приложения в Google Play, чтобы завоевать внимание пользователей.
Обзор выпусков
Отслеживайте сборки и управляйте выпусками на всех этапах.