1 1160x620 - Как проектировать мобильные приложения для использования одной рукой
Первый iPhone, представленный в 2007 году, ознаменовал отказ от Qwerty-клавиатуры и стилуса

90% продаваемых сегодня смартфонов имеют дисплеи 5 и больше дюймов. Большие экраны представляют разработчикам приложений и дизайнерам новые проблемы и возможности. Давайте посмотрим, как проектирование приложений для использования одной рукой может решить эти проблемы.

В январе 2007 года, мир стал умещаться в наших ладонях, когда три революционных продукта – iPod, телефон и интернет-коммуникатор – были объединены в смартфон, который мы знаем и любим сегодня.

iPhone был создан для удобного использования одной рукой, позволяя плавно перемещать большой палец по экрану.

Стив Джобс однажды сказал, что 3,5-дюймовый экран – это «идеальный размер для потребителей», а большие экраны – это глупость.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой

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

90% продаваемых сегодня смартфонов имеют дисплеи размером более 5 дюймов.

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

Например, приложение CNN было одним из немногих, кто получил ранний доступ к iPhone 5, представленному в 2012 году. Разработчики не только эстетически трансформировали его, но и создали удобный для восприятия визуально привлекательный опыт, выделив заголовки.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Из выступления Фила Шиллера на специальном мероприятии Apple в 2012 году

Из-за больших экранов страдает доступность

Хотя большие экраны отлично подходят для отображения большего количества контента, страдает главный аргумент Стива Джобса в пользу создания 3,5-дюймовых телефонов – использование одной рукой.

В своем двухмесячном исследовании (проведённом в аэропортах, на улицах, в кафе, в автобусах и поездах)   Стивен Хубер выделил три способа, как пользователи держат свои телефоны.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой

49% пользователей держат свои телефоны одной рукой, особенно, когда находяться в движении.

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

Почему проектирование приложений для использования одной рукой должно стать главным приоритетом дизайнеров

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

Исследования показывают, что в среднем пользователь проверяет свой телефон 58 раз в день, при этом 70% мобильных взаимодействий длятся менее 2 минут.

Мы используем наши телефоны в «короткие промежутки времени с рассеянным вниманием».

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Изображение: Rescue Time

Команда исследователей из Simform наблюдала за поведением пользователей во время таких кратковременных сессий в различных сценариях:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Примеры вариантов использования телефона в коротких промежутках времени

Директор по продуктам Google, Люк Вроблески, называет эти короткие всплески мобильной активности «один большой палец, один глаз». Это отражает то, как отвлекающая среда заставляет пользователей использовать телефон одной рукой в ​​течение коротких промежутков времени с частичным вниманием. Он также добавляет, что наиболее оптимальным вариантом использования смартфона одной рукой является тот, в котором быстрое взаимодействие поддерживается плавной функциональностью.

Как проектировать дизайн с учетом коротких интервалов использования смартфона одной рукой?

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой

Давайте взглянем на эволюцию интерфейса Spotify, чтобы получить представление о проблеме:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Старая навигация Spotify – гамбургер-меню

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Spotify — Пользователи испытывали определенный уровень сложности и дискомфорта при взаимодействии с приложением

Это вынудило команду Spotify в 2016 году отказаться от гамбургер-меню и расположить основные функции (Home, Browse, Search, Radio и Library) в нижней части экрана, что привело к увеличению общего количества кликов на 9% и на 30% кликов по пунктам меню.

Используйте устоявшиеся UX-паттерны для общих сценариев использования, чтобы упростить использование приложения одной рукой

Зачем изобретать велосипед? Когда вы можете использовать проверенные UX-паттерны, которые работают. Многие дизайнеры уже учли варианты использования приложения одной рукой, в ​​качестве принципа дизайна.

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

Мы разделяем наиболее распространенные модели поведения пользователей и UX-паттерны на шесть категорий:

  1. Навигация
    Например, строки меню, панели вкладок и жесты для легкого перемещения между наиболее важными разделами приложения;
  2. Действия
    Создание, редактирование, публикация, добавление, удаление и другие действия, которые пользователи предпринимают для использования основных функций приложения;
  3. Оформление покупок, транзакций, заказов
  4. Поиск, сортировка и фильтрация, когда пользователи хотят быстро найти или просмотреть контент;
  5. Ввод и взаимодействие
    Слайдеры, селекторы, выпадающие списки, заполнение форм, масштабирование, скроллинг – строительные блоки любого приложения;
  6. Прочие паттерны
    Воспроизведение мультимедиа, фотосъемка, редактирование фотографий и паттерны навигации по картам.

1. Проектирование навигации по приложению одной рукой

Что это?

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

70% пользователей находят функции приложения с помощью навигационных ссылок, а не с помощью поиска или других способов. Панели навигации, меню, жесты, ссылки, вкладки и т. д. являются наиболее распространенными UX-паттернами навигации.

У хорошей навигации все важные разделы должны быть легко доступны.

Проблемы

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

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

Решение

Facebook и многие другие приложения решают эту проблему, помещая элементы под вкладку «Больше» или «Меню», откуда пользователи могут получить доступ к дополнительным функциям и разделам приложения. Это, однако, не идеальный вариант для использования приложения одной рукой.

  • Для обеспечения доступности и размещения более 5 пунктов, используйте всплывающее меню, а не полностраничное.
  • Расширенная панель вкладок, когда у вас больше контента.
  • Персонализированная панель вкладок для опытных пользователей, чтобы они могли быстро получить доступ к тому, что им нравится.
  • Используйте жесты, чтобы у пользователей выработалась привычка быстрого и удобного доступа.
  • Возврат и закрытие страницы также должно быть простыми.
  • Быстрый переход к разделам страницы с помощью UX-паттернов.

Например, Facebook скрывает множество функций в гамбургер-меню, что разгружает главный экран. Хотя это привлекательно с точки зрения организованности, пользователям сложно использовать приложение одной рукой.

1.1 В чем проблема гамбургер-меню?

Используйте всплывающее меню вместо полностраничного

К счастью, у нас есть способ решить эту проблему.

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

1.2 Мобильные UX-паттерны для всплывающих меню (Видео: Joox)

Расширьте панель вкладок, если у вас много контента

Руководство Human Interface Guidelines рекомендует размещать не более 5 функций в нижней панели навигации. Здесь вам пригодится опция «Больше» (3 точки). Расположенная в нижней панели, она может скрыть другие функции и раскрыть их одним нажатием.

1.3 Проектирование нижней панели навигации с возможностью расширения дополнительных параметров

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

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

1.4 Персонализированная нижняя панель вкладок для быстрого доступа к функциям

У пользователей легко формируется привычка использовать жесты для быстрой навигации

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

1.5 Навигация на основе жестов для доступа к функциям приложения

Возврат и закрытие страницы также должны быть правильно спроектированы

Навигация – это не только доступ к экрану или разделу приложения. Важно правильно спроектировать возврат на предыдущую страницу, закрытие экрана или переход к разделу! Давайте посмотрим, как приложения используют жесты и UX-паттерны для упрощения этих задач.

1.6 Использование жестов для навигации по нескольким экранам (Видео: Zenly)

Паттерны для быстрого перехода к различным разделам приложения

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

Их можно организовать с помощью иерархии и UX-паттернов для повышения доступности, и простоты использования.

1.7 Плавающие вкладки и жесты для перехода между разделами

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

Что это?

Пользователи тратят примерно 50% времени использования мобильного телефона на самовыражение, общение в социальных сетях, онлайн-покупки, управление финансами, здоровье и производительность, а также планирование предстоящих событий. Эти UX-паттерны включают в себя такие вещи, как создание постов в социальных сетях, редактирование документов и т.д.

Проблемы

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

Решение

При проектировании пользовательского опыта для основных действий необходимо учитывать четыре вещи.

  1. Основные действия должны привлечь внимание пользователей заметным расположением иконки или кнопки. Не помещайте их в верхний правый угол приложения, где пользователь может их не заметить. Они должны быть легко доступны без необходимости тянуться большим пальцем или использовать вторую руку.
  2. Кроме того, пользователи должны иметь возможность прервать процесс создания и добавления задач одной рукой. Это включает, отмену задачи, переход к следующему шагу и т.д.
  3. Проектирование сложных задач редактирования с многоуровневыми меню и элементами управления.
  4. С целью обеспечения доступности сделайте обмен данными и отправку информации легкой и простой.
Кнопка или иконка основной задачи приложения должны привлекать внимание пользователей

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

Например, Snapchat скрывает все и стимулирует пользователей выполнять только основную задачу – снимать фото и видео. Кроме того, кнопка «Отправить» предлагает пользователям поделиться своими историями.

2.1 Упрощение доступа к основным задачам с помощью жестов, всплывающих меню и плавающих панелей

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

Для многих пользователей мобильный телефон – наиболее используемое вычислительное устройство.

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

Microsoft Word и WPS Office предлагают множество инструментов для редактирования и многоуровневые меню в пределах досягаемости большого пальца. Эти интуитивно понятные системы меню интеллектуальны и функциональны. Они позволяют пользователям выполнять сложные операции и выбирать несколько вариантов.

2.2 Размещение инструментов редактирования в нижней части экрана для быстрого внесения изменения

Простые функции обмена и отправки с учетом достижимости

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

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

2.3 UX-паттерны для обмена фотографиями, видео, музыкой и другим контентом одной рукой

Разделите на несколько шагов задачи создания или добавления 

Создание досок, избранного и списков желаний может быть затруднительным, особенно, если они размещены в верхних крайних точках экрана. Давайте посмотрим на паттерны ввода данных в несколько этапов.

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

2.4 Размещение иконок «Создать» и «Добавить» в пределах досягаемости большого пальца

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

Что это?

Согласно Kaspersky Cybersecurity Index, 50% покупок в Интернете осуществляется на мобильных телефонах. Добавьте к этому такие коммерческие транзакции, как бронирование поездки, авиарейса, гостиницы, билетов в кино и на концерты, и вы поймете, насколько важен дизайн мобильного оформления заказа. В отчете Института Баймарда сообщается, что 23% покупателей бросают корзину с товарами из-за сложного процесса оформления заказа. Особенно мобильные покупатели, для которых оформление заказа представляет собой многоэтапный процесс, а ввести данные не так просто.

Проблемы

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

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

Решение

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

  • При выборе таких вариантов, как размер, цвет, время, дата и др., они должны быть легко заметны и доступны.
  • Мы можем интегрировать платежные системы Google и Apple, или автозаполнение из менеджеров паролей, например, Keychain, 1password и LastPass, чтобы ввести имя, данные кредитной карты, адрес, одноразовые пароли.
  • Мы также должны свести к минимуму движения пользователя большим пальцем.
Добавление товаров в корзину и выбор деталей продукта в зоне досягаемости большого пальца

Логистика покупок в Интернете может быть упрощена до трех этапов: добавление товаров в корзину, выбор вариантов товара и завершение процесса оплаты.

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

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

Другой способ – позволить пользователям прокручивать страницу и быстро выбирать варианты продукта, в то время как опция «Оформить заказ» или «Купить» остается статичной внизу страницы.

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

3.1 Добавление товаров в корзину в приложении электронной коммерции и доставки по требованию.  Видео: Shopping Choose | WE+AR TRBL | Tasty Hamburger App

Использование электронных кошельков и менеджеров паролей для быстрой оплаты

В Отчете о методах оплаты за 2019 год указывается, что более 71% онлайн-транзакций осуществляется через электронные кошельки, такие как Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney и другие. Эти кошельки не только считаются более быстрыми, но и более безопасными и простыми в использовании.

Процесс оформления заказа можно сделать более эффективным и понятным. Более того, вы также можете добавить опцию «свайп, чтобы оплатить» (swipe-to-pay) для повышения конверсии.

3.2 UX-паттерны для оплаты платежей в мобильных приложениях электронной коммерции. (Видео: SPACED Challenge (Travel + VR) | Checkout Promocode | Gamification Checkout)

4. Поиск, фильтрация и сортировка контента одной рукой

Что это?

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

Фильтры являются отличным инструментом, позволяющим сузить объемы контента и найти наиболее релевантные результаты.

Теоретически они отличаются: сортировка организует контент по определенному параметру, фильтрация удаляет лишний контент из поля зрения.

В ходе исследования Института Баймарда «Списки продуктов и фильтрация», было обнаружено, что сайты со средним юзабилити списка продуктов демонстрировали частоту отказов 67–90%. Внесение небольших изменений в набор инструментов снижало процент отказов до 17–33% при поиске тех же продуктов. Это привело к увеличению числа лидов примерно в 4 раза.

Проблемы

  • Поиск на мобильном телефоне должен быть легко доступен. Например, Youtube, Amazon Prime, Slack, Google Maps затрудняют пользователям доступ к меню поиска, располагая его в правом верхнем углу.
  • Организация информационной иерархии фильтров, так как существует слишком много параметров и категорий, чтобы пользователи могли быстро найти то, что ищут.
  • Управление многоуровневой информацией в интерфейсе, особенно, когда есть много категорий, и каждая категория содержит множество элементов.
  • Изменение интерфейса на основе различных состояний, когда применен один или несколько фильтров.
  • Все это должно выполняться пользователями в пределах досягаемости большого пальца.

Решение

  • Используйте для поиска жесты или легко доступные кнопки. Когда пользователи переходят на экран поиска, предложите им варианты поиска, а также сразу открывайте текстовое поле.
  • Говорите на языке пользователей и помните о них при организации фильтров. Разместите фильтры / кнопку сортировки под рукой. Также сделайте открытие и закрытие меню фильтров одной рукой.
  • Для сложной информации, используйте двухэтапную или параллельную фильтрацию.
  • Применяйте фильтры немедленно. Сделайте фильтры интерактивными, на основе действий пользователей. Разрешите пользователям выбирать несколько вариантов. Измените категории фильтров в соответствии с применяемыми фильтрами.
  • Сначала покажите рекомендации, недавно использованную или наиболее часто используемую информацию.

Для многих приложений поиск входит в топ-5 самых популярных функций. Но многие дизайнеры приложений затрудняют доступ к иконке поиска. Смотрите интерфейсы Apple Maps и Google Maps,  Netflix иYoutube.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Сравнение доступности панели поиска – Apple Maps и Google Maps
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
Сравнение доступности панели поиска – Netflix и YouTube

Некоторые приложения используют экран поиска для знакомства пользователей с контентом. Они рекомендуют им контент на основе предыдущего поиска, текущих трендов и так далее.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как проектировать мобильные приложения для использования одной рукой
4.1 Знакомство пользователей с контентом через страницу поиска
Удалите лишние шаги при поиске и фильтрации

Чтобы укорить процесс поиска, мы можем сделать так, чтобы при нажатии на иконку поиска на панели вкладок появлялась клавиатура. Тогда пользователи смогут сразу вводить свои запросы. Смотрите примеры Netflix и SpotHero ниже.

Многие приложения, такие как Amazon или Google Drive, размещают панель поиска в верхней части главной страницы. В таких случаях мы можем использовать жесты (свайп вниз). Например, в приложении Inshorts свайп вниз позволяет немедленно начать печатать, вместо того, чтобы тянуться вверх и нажимать на строку поиска.

4.2 Поиск и фильтрация, удобные для большого пальца

Двойное нажатие на иконку поиска, чтобы открыть клавиатуру

Если вы хотите использовать страницу поиска для отображения дополнительной информации, вы можете использовать двойное нажатие для открытия клавиатуры, как в приложениях Microsoft News, Spotify и Reddit Apollo.

4.3 Удобный доступ к клавиатуре с помощью двойного нажатия на иконку поиска

Меню фильтра в пределах досягаемости большого пальца должно ускорить поиск информации

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

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

Кроме того, фильтры должны реагировать на выбор пользователей и указывать, когда фильтр применен.

Чтобы сделать этот процесс более гибким, можно фильтровать результаты поиска в фоновом режиме, когда пользователи выбирают варианты.

4.4 Сортировка и фильтрация элементов в мобильных приложениях электронной коммерции Видео: Filters | Car Sharing with Friends

5. Элементы управления и ввода данных

Что это?

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

Такие вещи, как заполнение форм, ввод пароля, выбор даты / времени и т.д. необходимо правильно перевести на сенсорный интерфейс, не отказываясь от привычных метафор ПК.

Проблемы

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

Переводить пользовательские взаимодействия на небольшие устройства непросто. К самым большим проблемам относятся:

  • Скорость ввода данных должна быть очень высокой с минимальным движением большого пальца пользователя.
  • Информация должна быть собрана за минимальное количество шагов.
  • Дизайн полей ввода должен иметь понятный интерфейс и метафору.
  • Опыт должен быть восхитительным и последовательным.
  • Пользователи должны знать свое местоположение, и информация не должна быть потеряна.

Если все сделано правильно, то ввод данных не должен занимать много времени.

Решение

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

Мы все ненавидим заполнять формы регистрации. Они отнимают много времени и требуют ввода ненужной информации.

Заполнение форм может быть менее трудоемким, если разделить длинную форму на несколько экранов. Использование автозаполнения, удобных для большого пальца кнопок «Вперед» и «Назад», непрерывное присутствие клавиатуры и отсутствие прокрутки делают этот подход быстрее и проще.

5.1 Лучшие практики регистрации, разбитой на несколько экранов (Видео: Zenly & AirBnB)

Быстрый ввод информации с минимумом движений большим пальцем

Расположение элементов в нижней части экрана обеспечивает более быстрый ввод данных и быстрое реагирование на призыв к действию.

Используйте пикеры, выпадающие списки, скроллеры и слайдеры для предоставления информации пользователям.

5.2 Точное заполнение формы одной рукой (Видео: Periscope)

Умные мобильные паттерны для ввода данных

Давайте рассмотрим еще несколько паттернов, которые облегчают получение информации от пользователей.

5.3 Ввод данных одной рукой в формы мобильных приложений (Видео: Peach | Zova Workout & Fitness | Square Order)

6. Прочие паттерны для воспроизведения мультимедиа, фотосъемки, редактирования фотографий и навигации по карте

В связи с тем, что в Google Store более чем 2 миллиона приложений, а в App Store 1,83 миллиона приложений, дизайнерам стало необходимо выделить свои приложения из общей массы. Один из способов – сделать общие функции веселыми и плавными, и этот последний раздел представляет собой подборку различных пользовательских взаимодействий.

6.1 Эти приложения позволяют пользователям увеличивать и уменьшать масштаб одним движением большого пальца.

6.1 Независимо от того, выбираете ли вы эмодзи, отправляете изображения или слушаете аудио, жесты могут добавлять такие взаимодействия. (Видео: Composer Concept | Gamification + Checkout)

Вывод

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

Мы рассмотрели множество паттернов, которые дизайнеры могут использовать для решения различных UX-задач. Более того, вы можете самостоятельно проверить сайты, чтобы найти паттерны, которые помогут вам создать дизайн для использования одной рукой.

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: smashingmagazine.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

10 эвристических принципов для мобильных интерфейсов

Якоб Нильсен консультировал и обучал юзабилити-инжинирингу, когда начал изучать множество паттернов. В…