risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come chiarire perfettamente che un utente può interagire con un'immagine avatar?

Sto sviluppando un Android per dispositivi di dimensioni tablet. L'obiettivo dell'applicazione è quello di creare un curriculum infografico. Pertanto l'utente deve confrontarsi con alcune viste simili a forme per ottenere un risultato adeguato .

C'è una sezione in cui l'utente deve scegliere un'immagine avatar, che viene successivamente visualizzata nell'immagine inforgrafica. Ma dai un'occhiata a te stesso:

AvatarImage

Come puoi vedere, l'immagine dell'avatar stesso viene posizionata in una vista circolare dell'immagine. Per evidenziare che l'utente può interagire con l'immagine, sto disegnando un'icona davanti ad essa. A causa della forma tondeggiante, è difficile trovare una posizione ottimale per l'icona. Inoltre, dato che ci sono già due pulsanti "Floating-Action" visualizzati sulla pagina, vorrei evitare di aggiungerne un altro. A mio avviso, il contenitore dell'immagine dovrebbe anche essere circolare per ottenere un aspetto generale pulito e coerente.

La mia domanda è la seguente: Questo disegno è sufficiente ed è ovvio per l'utente che può scegliere una nuova immagine avatar facendo clic sulla vista circolare dell'immagine ? Devo aggiungere un pulsante aggiuntivo?

O in generale, perché ho la sensazione che il design dell'esempio seguente sia semplicemente migliore del mio?

Whatsapp

8
luQ

Il tuo progetto attuale potrebbe mancare in alcune aree. Generalmente, l'utilizzo delle icone da solo lascia molto all'interpretazione dell'utente e all'esperienza personale, anche se è globalmente riconoscibile come l'icona della foto o l'icona della matita.

Ecco un estratto dal NN Group on Icon Usability ;

Le icone hanno bisogno di un'etichetta di testo

Per aiutare a superare l'ambiguità che devono affrontare quasi tutte le icone, un'etichetta di testo deve essere presente accanto a un'icona per chiarirne il significato in quel particolare contesto. (E anche se stai usando un'icona standard, spesso è più sicuro includere un'etichetta, specialmente se hai leggermente modificato l'icona per adattarla alle tue preferenze o vincoli estetici.) ... Le etichette delle icone dovrebbero essere sempre visibili, senza alcun interazione da parte dell'utente. Per le icone di navigazione, le etichette sono particolarmente critiche. Non fare affidamento sul passaggio del mouse per rivelare le etichette di testo: non solo aumenta i costi di interazione, ma non riesce anche a tradurre bene sui dispositivi touch.

Dal tuo esempio di altre applicazioni che usano l'icona della matita, ecco la mia preoccupazione: potrebbe essere l'icona ideale per rappresentare il testo di modifica, ma non le immagini. Se suddividiamo l'icona al suo significato e uso comuni, una matita è uno strumento per scrivere o disegnare, ma è principalmente associata al testo, il che lo rende appropriato per i campi e le aree di testo, ma quando si tratta di immagini, è fuori luogo, nel senso comune che non si scriverà/disegnerà un'immagine (in questo caso), quindi gli utenti inesperti potrebbero finire per trovarla confusa.

Quindi quale sarebbe l'icona ideale per rappresentare l'input dell'utente in questo caso?

L'icona della fotocamera potrebbe essere la soluzione migliore. Ecco alcuni motivi per cui;

  1. Corrisponde all'input previsto. - Considera le informazioni che l'utente sta immettendo, è una foto di se stesso, che è stata più che probabilmente presa da una telecamera, uno reale o quello di uno smartphone.
  2. È conforme al nuovo caso d'uso dell'input - Considera anche dove l'utente è saggio di progressione nella tua applicazione. Se stanno appena iniziando e compilando il modulo per la prima volta, non "modificheranno" nulla come potrebbe suggerire un'icona a matita.
  3. È collegato alla fonte di input - Un'ultima considerazione, poiché si tratta di un'applicazione mobile, potresti consentire all'utente di scegliere di scattare una nuova foto nel modo giusto lì usando la fotocamera sul loro dispositivo, ciò aggiungerebbe più significato all'icona in quanto rappresenterebbe anche l'azione che li porterebbe all'applicazione della fotocamera del loro dispositivo, o aggiungendo una foto, li porterebbe al loro rullino fotografico.

Casi d'uso dell'applicazione

Facebook e Twitter sembrano usare questo metodo anche nei loro input di foto del profilo, ma non posso commentare di sicuro, o sul perché hanno fatto quello che hanno fatto, ma sono comunque lì e sono ottimi esempi di ciò che sto andando per.

enter image description hereenter image description here


Ecco il design con la modifica modificata

enter image description here

Si può notare che ho incluso anche uno sfondo semitrasparente con lo stesso colore dei pulsanti mobili. Si tratta non solo di far risaltare maggiormente il testo e l'icona, ma anche di codificare i colori dell'elemento seguendo Legge di somiglianza nei principi di percezione della forma di Gestalt , quindi è associato con gli altri pulsanti . Sebbene non abbia la stessa forma, il suo colore insinua che ha funzionalità simili, in quanto è cliccabile o, in questo caso, toccabile, dando più significato visivo, a parte il testo.

17
Cody Brantley