În Tips & Tricks

Tips’n’tricks de design pentru VR/AR

VR-AR

Realitatea Virtuală (VR) şi cea “augmentată” aka “îmbunătăţită” (AR) au ajuns tendinţe de top, acolo sus printre Inteligenţa Artificială/Învăţare automată, Telemedicină, Online-to-Offline (O2O) sau Biometrie.

Diferenţa majoră între cele două, constă în faptul că în VR se generează o lume nouă unde tu eşti în centrul scenei, pe când în AR, lumea este cea reală, văzută prin ochii tăi, doar că este ajutată de un strat suplimentar de elemente, componente, interacţiuni.

 

Dar deşi sună a scenarii desprinse din cărţi şi filme de SF, noile medii mai au cale lungă de a deveni parte din activitatea noastră zilnică (de exemplu, cum a ajuns smartphone-ul).

 

Dar să nu ne descurajăm şi să vedem de unde putem începe. Hai să intrăm în detalii mai geeky.

Design pentru VR

Din experienţa mea prototipând pentru VR, recomand de luat în calcul următoarele:

1. 2D nu este 3D. Nu sunt 3D artist de meserie şi recunosc că a fost puţin dificil să mă adaptez lucrând într-un mediu distribuit pe 3 axe (fiind obişnuit doar cu web/mobile UI).

Chiar dacă sunt elemente de interfaţă 2D incorporate în experienţă VR, tot trebuie să iei în calcul poziţionarea lor, distanţă faţă de utilizator, scara setată la nivel de înălţime/lăţime (cât de mare sunt faţă de o componentă) şi mai ales interacţiunile puse la dispoziţie.

 

2. Metri = noii pixeli. Lucrând în VR pentru browser ai crede că pixelii vor rămâne your BFFs. Nu e chiar aşa.

Deşi poţi calcula în funcţie de rezoluţia display-ului pus în faţa ochilor tăi, cel mai bine este să proiectezi lumea din jur gândind în metri.

E mult mai bine mai ales dacă experienţă este mai imersivă. În fond noi nu ne plimbăm sau facem paşi în pixeli, iar percepţia distanţă-spaţiu trebuie să fie cât mai aproape de realitate.

 

3. Reticulul şi fitilul. O componentă foarte importantă în VR este reticulul (eng. the reticle). Este acel “punct” care îţi indică unde îţi este îndreptată atenţia şi te ajută să ţinteşti cu ce obiecte să interacţionezi.

Practic este echivalentul ţintei din orice joc First-Person

Un lucru esenţial în setarea reticulului este aranjarea camerei astfel încât să fie poziţionat la nivelul ochilor. În plus, complementar reticulului, foarte util este şi controlul de tip fitil (eng.fuse buttons).

Fitilul este acel element de interacţiune când utilizatorul se foloseşte de reticul, se uită la un element (buton, toggle etc), iar după un anumit timp, fară să apeşi altceva, eşti redirecţionat către rezultatul interacţiunii cu acel element.

Practic este un cronometru care te ajută să interacţionezi fără să apeşi pe butoane fizice. Doar te uiţi şi Puf! Funcţionează foarte bine pentru mobile VR.

Un lucru fain făcut de cei de la Facebook (pentru versiunea lor de VR) este că au semi-automatizat recunoaşterea elementelor de interacţiune.

Când eşti în apropierea unui element, reticulul face “snap” şi este adus imediat la acea componentă (fără să te mai chinui).VRhttps://www.google.com/design/spec-vr/interactive-patterns/controls.html#

4. Cât mai mult control. E frumos să avem reticul şi fitil, dar să nu ne limităm doar la nivelul acesta de interacţiune.

De ce să nu folosim controllere dedicate (fie bluetooth pentru mobile, fie cele pentru Oculus sau Vive) sau dispozitive InternetOfThings (IoT) care sa ofere o experienţă şi mai unică (control prin smartwatch, mănuşi etc.).

Mai mult decât atât, de ce să nu avem control vocal. Dacă tot sunt chatbotii populari, cum ar fi un asistent personal pentru VR—propriul nostru Jarvis.

În fond, utilizatorii trebuie să fie cât mai mult în control în noua lume generată şi conştienţi de asta, prin urmare de evitat acţiunile scripted de lungă durată.

 

5. Keep it limited. VR-ul este la început, deci nu este complet imersiv.

Există efecte de ghosting (elemente dublate, în ceaţă sau lăsate în urmă), există scăderi de frame-rate, exista rezoluţii limitate. Toate acestea fac ca experienţa să devină una obositoare, chiar ameţitoare în sensul mai puţin plăcut.

Experienţele ar trebui să fie bine definite, episodice şi să lase loc de respiro. Chiar dacă e telefon de ultima generaţie, sau mega gaming PC, suntem departe de “Matrix”.

Exemple VR

  1. Google Tilt Brush Daca ar fi să-mi iau un HTC Vive ar fi special pentru această aplicaţie. Mi se pare incredibil să poţi sculpta/picta 3D folosind VR. Camera ta este canvas-ul, iar controllerele uneltele necesare.
    tilt-brush
  2. Resident Evil 7: Biohazard – nu recomand celor slabi de inimă, dar RE7 este înfricoşător. Este o experienţă care te face să uiţi că eşti într-o cameră per se, conectat la PlayStation. Efectiv te mergi tip-til, tremuri şi gândeşti fiecare mişcare cu atenţie.
  3. SportsIllustred – E cel mai apropiat de NSFW (dar safe) exemplu pe care-l pot da. Sports Illustrator a publicat anul trecut calendarul său Swim Suit pe… VR. Poţi vizualiza conţinut video 360 şi să admiri splendoarea foto-modelelor din unghiuri care mai de care.
  4. Google Cardboard+Camera – Cardboard e varianta cea mai accesibilă de a testa imediat VR. Cu 50 de Ron şi aplicaţia dedicată pe iOS şi Android poţi testa o paletă largă de experienţe, limitate ce-i drept, dar suficient cât să-ţi faci o idee. Ce e şi mai fain e că prin aplicaţia Google Cardboard Camera poţi face fotografii panoramice ca după să le poţi vedea 360 cu device-ul din carton.
  5. Facebook VR – Proaspat lansat, Facebook for VR este o aplicaţie via Oculus Store unde prin intermediul GearVR/Oculus poţi explora toate video-urile 360 puse de prietenii tăi sau restul utilizatorilor. Şi cam atât. Este dedicat video-urilor 360.
    facebook-360

Design pentru AR

Trecând pe partea cealaltă, la AR, vin cu următoarele sugestii:

1. Headset sau telefon. E foarte important de decis la început ce tip de AR vrei să construieşti.

Cel de tip headset, similar cu VR, unde foloseşti o cască pentru a interacţiona (veziMicrosoft HoloLens) sau cel în care foloseşti telefonul mobil şi camera acestuia pentru a adăuga “augmentarea”.

 

2. Camera şi geo-localizare. Camera foto este punctul de legătura între AR şi utilizator, prin urmare aplicaţiile AR trebuie gândite cu camera ca metodă principală de interacţiune.

Iar ca să facem lucrurile şi mai dinamice şi apropiate utilizatorilor, recomandat ar fi să avem integrări cu API-uri de geo-localizare. Sunt în parc, ce pot face? Sunt în muzeu, ce pot vedea? Sunt într-un cartier nou, ce magazine sunt? Ajung la un magazin? Ce produse are online?

Deja ofer un nivel în plus de personalizare şi apropiere utilizatorului, sincronizând lumea şi locaţia reală cu punctele de interes (atât pentru el, cât şi pentru business).

 


3. QR code!
Ştiu, pare imposibil, dar în AR un punct de intrare foarte important reprezintă QR code-ul.

În Asia rupe pe partea de O2O, iar dacă AR-ul va prinde popularitate (şi comercialitate), aşteptaţi-vă ca scanarea QR code-urile să devină un must-have pentru experienţele AR. Mai ales că acum te poţi detaşa de design-ul clasic, alb-negru.

 

4. Contextual. O practică mai puţin plăcută pe care o văd din ce mai des în AR este de a aglomera cât mai mult ecranul cu tot felul de elemente ca şi cum ţi-ai dori să ai un Ad Blocker la îndemână.

Elementele trebuie prioritizate, iar o soluţie foarte bună este de a păstra afişajul acestora contextual.
Prin indicatori vizuali subtili, să pot afişa mai multe informaţii dacă doresc. Să aleg eu ce să controlez la fiecare hotspot, nu să fiu bombardat cu “click here”, “tap me”, “view this”-uri.

 

5. Interacţiuni cât mai simple. Telefonul predomină ca device susţinător al AR-ul, prin urmare recomandarea mea este că interacţiunile să fie cât mai precise, punctuale şi la subiect.

Tap-uri directe pe elemente, swipe-uri când e cazul. Desigur, putem introduce şi aici comenzi vocale pentru a reduce din gesturi multi-touch şi pentru evita să folosim telefonul tot timpul cu ambele mâini.

Exemple AR

(fără Pokémon GO, promit)

  1. Google Tango – Platformă dedicată de AR de la cei de la Google momentan disponibilă doar pe Lenovo Phab 2 Pro şi Asus ZenFone AR. Prin intermediul camerelor şi scannerelor dedicate, aplicaţiile AR Tango adaugă elemente în lumea reală ţinând cont de unghi şi adâncime. Nu doar le plasează, ci fac să pară cât mai integrate posibil.
    google-tango
  2. Google Translate – Aplicaţia mobilă are un feature foarte util. Deschizi camera şi scanezi conţinutul de tip text. Textul original este înlocuit pe loc/instant cu cel tradus (pe baza configurărilor anterioare).
  3. Sky Map – Sky Map oferă posibilitatea explorării constelaţiilor şi poziţionării stelelor. Iei telefonul, îl drepţi spre cer şi observi cum ecranul se schimbă oferindu-ţi informaţiile de care eşti curios.
  4. IKEA aplicaţia celor de la IKEA permite să iei din modele 3D ale pieselor de mobilă şi le plasezi în camera ta folosind aparatul foto al telefonului mobil. Poţi să le măreşti, roteşti în toate unghiurile, orice ca să fie acolo unde vrei tu.
  5. LayAR – aplicaţia prin care poţi configura materiale offline să ofere mai mult decât un print. Prin intermediul aplicaţiei dedicate poţi accesa video-uri, link-uri, galerii, call-to-action-uri, etc.


Concluzii

VR şi AR-ul au prins avânt, primul mai mult decât al doilea. Cel mai mult îmi doresc ca aceste noi platforme/medii să deschidă calea spre inovaţii, soluţii utile şi rapide la probleme zilnice/probleme de business şi trendul să fie mai puţin îndreptat spre “hai să facem VR/AR că e cool”. I’m looking at you, advertising agencies!

 

Resurse de explorat

Personal, vă recomand să trageţi cu ochiul pe următoarele resurse. Sunt numai bune de folosit/aprofundat.

  1. Facebook Design VR – Site-ul Facebook.design e plin de resurse utile oricărui product designer. Ce e şi mai fain e că au introdus şi categoria de VR. Ai acces la template-uri de design pentru VR şi articole utile despre cum au lucrat la versiunea de VR a Facebook-ului pentru Oculus sau cum au lucrat la video-urile live 360.
  2. AFrame – recomand cu cea mai mare căldură să faceţi prototipuri VR în browser-ul vostru. E cea mai ieftină metodă de a lucra cu VR. Mai pui şi un Google Cardboard şi eşti gata de imersiune. AFrame este un framework dezvoltat de către Mozilla (prin iniţiativă MozVR şi folosindu-se de Three.JS). Practic prin cod HTML/CSS/JS poţi genera lumi virtuale direct în browser. E super easy!
  3. UXofVR – sincer, de ce să mai listez alte link-uri, când puteţi accesa direct The mother of all VR resources. UXofVr este un agregator de tot ceea ce înseamnă VR: de la video-uri, până la articole, slide-uri şi cărţi.

alecsandru grigoriuAlecsandru Grigoriu, Lead UX Designer @Grapefruit

Alecsandru coordonează echipa de design a companiei Grapefruit şi este specializat în design-ul de soluţii viabile şi tangibile pentru problemele de business ale clienţilor şi nevoile utilizatorilor/consumatorilor acestora. În timpul liber predă ocazional ore de laborator Human Computer Interaction la Facultatea de Informatică din Iaşi. În timpul care mai rămâne, lucrează la proiectele personale. Unul dintre acestea este şi UX Recipe, o unealtă de definire a procesului de UX şi de estimare a efortului.