WWDC2023 / Дизайн пространственного ввода

Дизайнеры из команды Apple рассказали об основных методах работы с пространственными интерфейсами, с которым будет взаимодействовать человек в AR шлеме Vision Pro.

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

Ссылка на оригинальное видео

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

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

Дизайнеры из эпл определили, что наиболее комфортная зона для отображения главных окон приложения находится в районе 60 градусов поля зрения. (фото 1)

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

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

Минимальная зона для расположения элемента равняется 60 точкам (pt). Но это именно зона для расположения элемента, сам элемент может быть меньше. (фото 3)

Все интерактивные элементы должны иметь ховер эффект. Таким образом человек понимает, что с такими элементами можно взаимодействовать. (видео 4)

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

Продолжение в следующем сообщении 👇

Продолжение предыдущего сообщения 👆

Руки
С помощью щипка двумя пальцами происходит всё основное управление в системе. Скролл, зум и так далее.

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

Используйте привычные и натуральные жесты для взаимодействия с некоторыми элементами, так как вы делали бы это в реальной жизни. Крутить пластинку или рубить фрукты вы не будете щипком двух пальцев. (фото 6)

При взаимодействии с элементами в виртуальном пространстве очень важен фидбек. Поэтому при печати на клавиатуре отображается анимация нажатий и воспроизводится звук. (фото 7)

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

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

🙂 Шпаргалка по доступным областям нажатия

Перевод статьи Виталия Фридмана о размерах интерактивных элементов в мобильных интерфейсах

В статье автор рассказал:
— Об общепринятых рекомендациях в отношении областей нажатия. Они должны быть не менее 44×44 px, а в случаях кликабельных элементов в тексте — не менее 27×27 px

— О том, что кликабельные элементы по краям экрана должны быть больше по размеру, чем элементы, расположенные в центре

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

— Об альтернативе всплывающим при наведении иконкам в строке сложных таблиц в виде кнопки «Действия» («Actions»)

— О помощнике, который необходим пользователю для выполнения сложных действий в интерфейсе

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

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

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

awdee.ru/accessible-target-sizes-cheatsheet

#awd_article #awd_ui