Progettare un puntatore del mouse per un metaverso digitale
Il puntatore del mouse ha una lunga storia come parte fondamentale dell'interfaccia moderna. I puntatori dei sistemi Windows e Mac sono rimasti praticamente invariati negli ultimi decenni. D'altra parte, i videogiochi hanno una tradizione di reinvenzione del puntatore. Una percentuale elevata dei moderni videogiochi per desktop utilizza puntatori personalizzati che ne caratterizzano l'esperienza. Ma cosa servirebbe per progettare un puntatore per videogiochi che funzioni anche in un'interfaccia simile a un sistema operativo come Roblox? Roblox è una piattaforma in cui gli utenti possono creare ed esplorare esperienze virtuali immersive. Poiché funge da metaverso senza soluzione di continuità tra giochi ed esperienze, l'app Roblox ha presentato una sfida unica in termini di UX su cui ero entusiasta di lavorare.
Ho visto i termini "cursore" e "puntatore" usati in modo intercambiabile. Opterò principalmente per "puntatore" per distinguerlo dai cursori di testo, che vengono utilizzati nei campi di immissione e nelle interfacce di comando.
Il problema
Il nuovo client desktop di Roblox era in fase di sviluppo, ma all'app mancava un elemento UX fondamentale: i cambiamenti di stato del mouse. A differenza di come la navigazione e il gioco siano esperienze separate per la maggior parte dei giochi desktop, il nuovo client desktop di Roblox permette agli utenti di navigare e giocare senza soluzione di continuità in un'unica finestra. Tuttavia, l'esperienza del puntatore del mouse necessitava di miglioramenti. Lo stato "Selezione link" o "Hover" aveva una scarsa affordance visiva. E lo stato "Selezione testo", che appare quando un utente passa il mouse su un campo di immissione testo, mancava del tutto. Questa era un'opportunità per riprogettare e migliorare la tripletta del puntatore del mouse: Predefinito, Link (Hover) e Testo.
Progettare un puntatore sia per un sistema operativo che per un videogioco è impegnativo a causa dei loro diversi casi d'uso. Un cursore del sistema operativo deve essere di un colore neutro, con un contrasto sufficientemente elevato per garantire la visibilità, abbastanza pratico per l'uso quotidiano e non troppo sgargiante da causare affaticamento agli occhi. Un cursore di un videogioco può ignorare molte di queste regole perché di solito corrisponde all'aspetto e allo stile del marchio per offrire un'esperienza immersiva. Ma esiste un modo efficace per combinare entrambi questi attributi?
Date un'occhiata al puntatore di Roblox del 2012. Ha seguito la direzione giusta utilizzando colori neutri in scala di grigi. Tuttavia, lo stato al passaggio del mouse utilizzava un puntatore nero, il che confondeva i nuovi utenti su un computer Mac. Un altro errore è che le spalle della freccia sono state disegnate utilizzando l'asse verticale invece dell'asse della punta della freccia. Ciò significa che la freccia è asimmetrica di circa il 6,8%.
Aspetto e sensazione
Ecco la parte divertente. Quali sono le tendenze attuali dei puntatori per videogiochi per desktop? Ho raccolto alcuni dei puntatori per videogiochi più popolari e li ho classificati in base alla grafica e alla praticità. La maggior parte dei puntatori per videogiochi punta verso una grafica di marca. Il puntatore Roblox dovrebbe essere leggermente più grafico rispetto al comune puntatore del sistema operativo, pur massimizzando la praticità.
Il puntatore di Roblox non solo deve apparire adeguato in tutti i generi di esperienza, ma deve anche integrarsi con il nostro sistema di design, uiBlox. Il sistema di design uiBlox attualmente utilizza icone #FFFFFF su un tema scuro predefinito. Il nostro stile utilizza curve con raggio di 2px e un rapporto approssimativo di 3:1 tra angoli arrotondati e angoli squadrati in ogni icona. Per il cursore a forma di mano che indica, mi sono ispirato alla nostra nuova grafica per le emote illustrata da una delle nostre fantastiche designer, Amy Liu.
Mettendo tutto insieme
Dopo aver ricevuto feedback da altri designer, abbiamo sviluppato il set di puntatori definitivo per Roblox. Il nuovo puntatore predefinito è ora simmetrico e presenta una freccia alla fine per una maggiore visibilità. Un'ombra proiettata conferisce modernità e profondità in un ambiente 3D. Il nuovo puntatore al passaggio del mouse migliora l'accessibilità rendendo la forma distinta dal puntatore predefinito. Infine, il puntatore di testo è stato ridisegnato come cursore #FFFFFF da 1px per conferirgli contrasto sul nostro tema scuro. Il tratto scuro garantisce visibilità sul nostro tema chiaro e su altre esperienze Roblox con sfondi chiari.
L'efficacia di una riprogettazione dipende dal feedback degli utenti. Abbiamo chiesto a 215 sviluppatori Roblox cosa ne pensassero di questi nuovi cursori. Una maggioranza significativa ha concordato sul fatto che i cursori rappresentassero un miglioramento sia dal punto di vista estetico che dell'usabilità. Il dato più entusiasmante è la risposta dei nostri sviluppatori al puntatore Testo. Dell'impressionante 89% che ha concordato che si trattava di un miglioramento complessivo, il 74% era fortemente d'accordo con tale affermazione. Sapere che i nostri utenti hanno una reazione positiva a questi miglioramenti dell'esperienza utente ci aiuterà quando svilupperemo il resto del nostro set di puntatori, così come altri elementi dell'interfaccia utente all'interno dell'esperienza.
Man mano che Roblox si espande oltre il gaming per diventare una piattaforma di comunicazione, social e persino transazionale, questo aspetto del prodotto aiuterà a guidare l'utente mentre naviga tra l'applicazione e le sue esperienze. La nostra speranza è che questo diventi uno standard prevalente per i metaversi digitali d'ora in poi!
Ti interessa entrare a far parte del team di progettazione di Roblox e risolvere problemi come questo? Visita il sito corp.roblox.com/careers/ per scoprire le ultime opportunità.
Derek Wong è un Visual Designer presso Roblox. Si occupa del sistema di design di Roblox, che definisce l'interfaccia utente del sito web e dell'app desktop di Roblox. Né Roblox Corporation né questo blog promuovono o sostengono alcuna azienda o servizio. Inoltre, non vengono fornite garanzie o promesse riguardo all'accuratezza, all'affidabilità o alla completezza delle informazioni contenute in questo blog.
©2021 Roblox Corporation. Roblox, il logo Roblox e Powering Imagination sono tra i nostri marchi registrati e non registrati negli Stati Uniti e in altri paesi.
