Естественият уеб във Vision Pro на Apple

Apple твърди, че Vision Pro е най-усъвършенстваното лично изчислително устройство, и лесно е да се разбере защо. AR/VR взаимодействието чрез проследяване на очи/глава/ръце и високата визуална прецизност, осигурена от два 4K+ дисплея, наистина изглеждат като технология от следващо ниво. Интересното за уеба е, че устройството използва добре* познатия Safari за сърфиране, а UX зависи от това дали сайтовете са бързи, със семантичен HTML, мащабируеми, достъпни и стабилни. Има и напълно нов ефект на осветяване.

Стари добри практики в нова реалност

Почти всичко споменато по-долу важи за всяко друго устройство за сърфиране, но предвид слабото използване на семантичен HTML в реални сайтове, си заслужава да се повтори.

• Както при iPad, Safari във visionOS игнорира правилата за :hover и предлага собствен ефект на осветяване чрез проследяване на очите, когато засече „интерактивни зони“, изведени от mark-up-а. Това са:
  • Бутони, линкове и менюта
  • Елементи с еквивалентни ARIA роли
  • Полета за въвеждане и формови елементи
  • Елементи със CSS cursor: pointer;
• Горните елементи трябва да обхващат цялата зона на техния родителски бутон или линк, напр. <a> вътре в <li>, така че да бъде разширен чрез собствен padding, а не с отстояние на родителя.
• Неправилни тагове като div soup, генерирани от мега фреймуърк, изобщо няма да получат осветяване.
• Бутон трябва да бъде <button>, който автоматично се разпознава като интерактивен елемент навсякъде и има вградени основни свойства.
• Етикетите трябва да обгръщат чекбокси и радио бутони, за да увеличат hit зоната за поглед.
• Страниците трябва да са гъвкави и без фиксирани размери, използвайки ефективно неограниченото пространство. Фоновете не трябва да се отрязват от произволна рамка (напр. 1280px), а да преливат в плътен цвят.
• Ще е нужен още по-добър контраст на текста, защото браузърът на visionOS може да стане полупрозрачен, както всяко друго приложение.
• Избягвайте дребен текст.
• Разполагайте важните навигационни елементи в лесно достижими зони.
• Използвайте векторни графики за диаграми и икони, които изглеждат добре на всяко увеличение. Потребителите на Vision Pro могат да се приближат и „влязат“ в страницата – не трябва да виждат пикселизирани изображения.
• Те превъртат с движение на пръста и съответното движение трябва да е естествено. Използвайте нативен scroll без hijacking и пасивни scroll събития, за да избегнете накъсване.
• Използвайте нативни текстови полета, за да се възползвате от вграденото гласово въвеждане.
• Правилно маркираното поле за качване на файл с label ще поддържа drag and drop.
• Всички интеракции на страницата ви трябва да са достъпни с клавиатура, защото Vision Pro поддържа Bluetooth клавиатури. Не искаме потребителят да се опитва да направи нещо с клавиатурата, да се провали, да се чуди дали е счупена, да я размахва във VR… и евентуално да счупи нещо. Или да нарани котката.
• Целете кратко време за зареждане (1 секунда за HTML+CSS+JS на Lighthouse Slow 4G), за да не гледа човек празен прозорец на Safari висящ пред очите му. Изкушението да се откажеш е още по-голямо в богата на медии среда.
• Потапянето е основната функция на VR/AR устройство, но може да бъде разрушено от забавяния, глитчове и разместен контент при разглеждане на уеб страници. Оразмерявайте изображенията.
• Независимо колко сложно е приложението ви, HTML-ът трябва да е минимален, семантичен и достъпен. Това гарантира, че всяко устройство или помощна технология ще улови смисъла и намерението.

Пример за осветяване на елемент, по-малък от родителския си бутон / обхващащ целия бутон

Още за Apple Vision Pro

Запознайте се със Safari за пространствени изчисления

Бъди естествен

Apple сериозно инвестира в подобряване на поддръжката на уеб стандарти в Safari през последната година и макар все още да има пропуски, напредъкът е впечатляващ. Симулаторът на visionOS вече е наличен за тестване на сайтове, с поддръжка за инспектиране. Тестването е винаги полезно, но следването на уеб стандартите е чудесно начало. Както всеки строителен инженер ще потвърди – солидната основа е от съществено значение.

Компаниите често използват тежки фреймуъркове, които объркват DOM-а и затрудняват и девелъпърите, и потребителите. Vision Pro е още една добра причина да се преосмисли този подход. Мега фреймуърковете не работят навсякъде (празен екран на Apple Watch) и биха изисквали значителни усилия, за да бъдат преработени за естественият уеб.

Ежедневното придържане към уеб стандартите и семантичен HTML гарантира, че продуктът ви ще работи от Apple Watch до най-новата VR платформа без почти никакви допълнителни усилия. Това KPI ли е?