UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Что не так с контекстными меню в iOS 13?
Редакція
Редакція

Опубліковано

Что не так с контекстными меню в iOS 13?

Стремление к согласованности между приложениями, платформами и устройствами во многом влияет на iOS 13.

Скриншот файла дизайн-системы Sketch iOS 13.

Новая iOS 13 Design System помогает Apple и сторонним разработчикам создавать приложения, совместимые друг с другом. Символы SF, пожалуй, самая важная часть iOS 13 Design System, они представляют собой набор из 1500+ иконок, которые можно использовать бесплатно для любого приложения, в результате вам не придется заново изучать как выглядят общий архив, указания или удаленные значки при использовании нового приложения.

Значение синего цвета системы iOS 13 заменяется на более высокое значение контрастности, когда включена функция повышения контрастности.

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

Контекстные меню

Peek & Pop против Контекстного меню.

Контекстные меню являются новинкой в iOS 13, они представляют собой адаптированную к сенсорному экрану версию контекстных меню macOS с дизайном, который улучшает Peek & Pop (Peek -предпросмотр контента, лёгкое нажатие на дисплей, Pop открытие, глубокое нажатие), показывая действия вместе с предварительным просмотром контента.

Важно отметить, что они являются чем то вроде ускорителя, с помощью которых продвинутые пользователи (20%) могут ускорить свой процесс взаимодействия с телефоном.

Контекстные меню доступны на устройствах iOS, iPadOS и tvOS, при использовании жеста долгого нажатия вместо 3D Touch. На устройствах с поддержкой 3D Touch дополнительное давление сокращает продолжительность жеста долгого нажатия.

Как и в MacOS, контекстные меню теперь поддерживают дочерние действия. За пределами Mac (кроме Catalyst) каждое действие должно быть связано с определенным значком.

Плюсы и минусы

Плюсы

Кросс-платформенная доступность является как преимуществом, так и требованием, поскольку приложения Catalyst должны стремиться к предоставлению одинакового набора функций при работе на iOS (сенсорный) и Mac (мыша).

Обнаружение действий - это еще один плюс, ранее с Peek & Pop, пользователи, которые не думали о смахивании, не знали о дополнительном функционале. То же самое касается горизонтального пролистывания, которое позволяет пользователям активировать одно из двух действий быстрым жестом.

Минусы

Эффективность определенно была замена в пользу кроссплатформенной доступности и доступности действий - это первый недостаток.

Как Peek & Pop, так и контекстные меню позволяют: 1. вызывать, 2. отменять, 3. получать доступ к деталям контента, 4. активировать действия.

В режиме Peek and Pop (3D Touch): 1. Предварительный просмотр контента выполняется за 250 мс, 2. Отклонение за 200 мс, 3. Доступ к деталям контента за 400 мс, 4. И выполнение действия после предварительного просмотра за 150 мс.

Эквивалент без 3D Touch занимает 1. 300 мс, 2. 500 мс, 3. 1000 мс и 4. 20 мс - действия доступны сразу после предварительного просмотра.

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

Время затраченное с Peek & Pop vs Contextual Menu

Анимации не только медленнее, но и сложнее. Например, доступ к деталям содержимого с помощью Peek & Pop используется для прямого перехода от Peek к Pop путем увеличения и уменьшения предварительного просмотра с фактическим содержимым. В контекстных меню анимация отмены выполняется стандартно, с анимацией толкания слайдов справа налево, что значительно замедляет действие.

Области комфорта для Peek & Pop vs Контекстное меню

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

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

Кроме того, высота каждого действия намного ниже удобных 44pt (или даже 56pt), которые Apple использует в iOS.

Саккады глаз при чтении текста (чем короче= лучше)

Последний недостаток: читабельность списка действий стала хуже.

Наши глаза работают лучше, если им не нужно много двигаться при просмотре контента. Вот почему, когда вы смотрите на приложение «Настройки iOS» (или «Android»), значки находятся рядом с текстовой строкой, поэтому вы можете быстро переключаться между ними, не слишком напрягая глаза.

Саккады глаз при чтении действий Peek & Pop, настроек и контекстного меню (короче = лучше)

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

Предложения

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

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

Эффективность

На устройствах с поддержкой 3D Touch с iOS 13 в настоящее время давление ограничивается ускорением вызова и сокращением жеста долгого нажатия.

Чтобы улучшить это, Apple может повторно представить:

  • Отмена или отклонение с помощью поднятие пальца;
  • Скольжение пальца вверх - доступ действий;
  • «Поп» через усиленное давление при нажатии.

Понятно, что Apple хочет, чтобы люди привыкли к отсутствию 3D Touch, не только из-за будущих обновлений iPhone, но и для доступа к контекстным меню на существующих в настоящее время устройствах. Однако я бы порекомендовал сделать улучшения 3D Touch доступными через настройки специальных возможностей, которые по умолчанию отключены.

Важно отметить, что пункт 2, «Скольжение пальца вверх - доступ действий», не устранит преимущества повышенной видимости действий, поскольку это достигается благодаря новому макету, который отображает действия наряду с предварительным просмотром содержимого.

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

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

Эргономика

Сравнение зоны комфорта между текущей iOS 13 и пересмотренным контекстным меню

Действия в контекстных меню больше не охватывают всю ширину экрана.

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

Различные примеры списков элементов полной ширины на iOS

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

Непоследовательное позиционирование действий контекстного меню: внизу слева, внизу справа, вверху слева

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

Список действий контекстного меню отображается в труднодоступной верхней левой части экрана.

Иногда списки действий даже отображаются в верхней части экрана.

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

Высота списка элементов для приложений и компонентов Apple для iOS

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

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

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

Скорость чтения

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

Эта проблема затрагивает не только список действий контекстного меню, но также списки в листах активности (чаще называемых «листами общего доступа»), а также приложения Apple, такие как Карты и пакет iWork (Numbers, Keynote, Pages).

Экран настроек iOS со временем. Иконки всегда имели левостороннее размещение.

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

Очень важно понимать, что расположение этих значков не является произвольным.

Но прежде чем мы углубимся в это, мы должны сначала понять, что вы должны расставить приоритеты для информации, отображаемой для пользователя, поскольку это помогает быстрее находить информацию. На приведенном выше экране «Настройки» каждый элемент списка содержит только значок, текстовую метку и значок раскрытия, которые указывают на наличие дочерних страниц. Для часто изменяемых настроек и для избегания дополнительного касания, iOS отображает текущее значение параметра в виде текстовой строки или переключателя (например, WiFi, Bluetooth, VPN и т. Д.). Обратите внимание, что значок раскрытия и значение настройки менее заметны, чем название и значок настройки.

Глазные саккады при чтении списков с левыми значками (короче= лучше)

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

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

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

Эти движения глаз называются саккадами. Когда вы читаете, ваши глаза выполняют по крайней мере 3 саккады в секунду, двигаясь со скоростью 9 миль в час и в идеале продолжительностью 20 мс или около того.

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

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

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

Итоги

Мы видели, что контекстные меню являются последовательным (но не единственным) способом выполнения действий с конкретными элементами на экране. Изящная адаптация для сенсорных (iOS) и основанных на указателях платформ (macOS). Мы также видели, как некоторые дизайнерские решения сделали контекстные меню хуже для опытных продвинутых пользователей на iOS, чем Peek & Pop.

Главные проблемы:

  • Эффективность
  • Эргономика
  • Скорость чтения

И как их разрешить:

  • Улучшение использования 3D Touch и жестов
  • Предлагаем полноростовые, действия в нижней части экрана
  • Размещение значков рядом с ярлыками

Мне любопытно посмотреть, внесут ли команды Apple какие-то улучшения как в контекстные меню, так и в таблицы активности, которые страдают от проблемы со скоростью чтения.


Перевод статьи lmjabreu.com

Топ коментарі (0)