Come rappresenteresti la distanza graficamente?

Ok,

Quindi questo potrebbe essere in qualche modo "soggettivo" ma sto cercando alcune idee.

Voglio rappresentare la distanza come un grafico a barre (tipo di) che diventa "più pieno" più le persone si avvicinano.

Più sono lontani, meno pieno sarà il grafico a barre, se vuoi.

Non sono sicuro di come lo rappresenterei. Ho creato questo grafico per mostrarti il ​​mio processo di pensiero.

Pensi che la gente avrebbe capito? Devo specificare i bordi "FAR" e "CLOSE"? O semplicemente visualizzare la distanza?

Le persone capiranno che quando il grafico a barre si riempie, le persone sono più vicine?

Dovrei forse anche specificare la distanza effettiva? (Metri, km, ecc?) O rinunciare del tutto al grafico a barre?

Come rappresenteresti la distanza graficamente in modo che le persone a prima vista abbiano una buona idea di quanto sia vicina o lontana l'altra persona?

EDIT : Ok, quindi ho parlato con il cliente per maggiori dettagli e quello che è emerso è qualcosa di simile al cerchio fornito da @Scott, in cui l'utente corrente è "nel mezzo" e le persone intorno all'utente sono in "orbita". L'hanno visto da qualche parte e lo vogliono, invece di mostrare la distanza per ogni utente.

Dovrò quindi visualizzare testo come "150m" o "Vicino" anziché un grafico a barre con la distanza.

Tuttavia, volevo anche ringraziare TUTTI per aver fornito risposte, alcuni degli esempi sono fantastici, li adoro e danno un grande pannello di idee su cui attingere. Dato che il "brief" è leggermente cambiato rispetto alla richiesta iniziale, ho pensato che fosse meglio modificare questa domanda per fornire ulteriori feedback.

Esempio aggiornato usando un design a cuneo. Per chiarezza, le distanze del campione sono state aggiunte al grafico e il testo è stato rimosso.

Esempio con testo Start e Finish

Poiché le dimensioni ridotte sono un fattore per il palmare, ecco due opzioni di risparmio di spazio di 100 x 100 pixel.

Brainstorming basato sugli ultimi requisiti

Ecco un'idea salvaspazio per dispositivi mobili che posiziona l'app in un menu a discesa. Con le dimensioni maggiori di un menu a discesa, la mappa può contenere più informazioni come le etichette degli utenti e una griglia di distanza.

Anni fa ho avuto un gioco Amiga chiamato F19 Stealth Fighter. L'HUD su questo aveva qualcosa di molto simile a quello che descrivi. Per le bombe che hai lanciato, invece di sparare, ti è stata mostrata una linea con due "pali" ad ogni estremità che si avvicinavano più vicino al bersaglio.

Ecco una semplice rappresentazione moderna:

Se si desidera mostrare la distanza tra due persone, è probabilmente più intuitivo mostrare una distanza tra due persone. Nel modello approssimativo sotto c'è ancora una sorta di barra, ma punta all'indietro. La distanza è indicata dalla posizione (spostando la persona a destra) e dalle dimensioni (riducendo la persona).

Quando vuoi più di un indicatore a barre, puoi colorare parte del triangolo come di seguito. E potresti aggiungere etichette alle linee.

Forse la persona di "riferimento" a sinistra potrebbe essere abbandonata.

Penso che gli oggetti a distanza funzionino meglio e siano molto più intuitivi, ma invertirò un po 'le cose. La grande distanza dovrebbe essere lunga e rossa, la breve distanza dovrebbe essere corta e verde. Quello che hai pubblicato sembra leggere il contrario di questo. Mi aspetto che le barre lunghe siano "lontane" e rosse.

Senza conoscere il layout generale, un'altra possibilità forse di usare un cerchio con punti ....

Utilizzando l'immagine che Talkingrock ha creato:

Penso che ciò che avrebbe più senso, per me, sarebbe che si scambiasse in questo modo:

Inizia da lontano e si illumina mentre ti avvicini. Penso che il cambio di testo da "Far Close" a qualcosa di più come "Far Apart" "Together" o "Met" o qualcosa che indichi le sue due persone che arrivano ad una singola destinazione aiuterà a comunicare ulteriormente l'idea.

Voglio rappresentare la distanza come un grafico a barre (tipo di) che diventa "più pieno" più le persone si avvicinano.

Questo è l'opposto di ciò che mostra un grafico a barre, però. Più alto è il valore, maggiore è la barra. Volere fare esattamente il contrario aggiungerà probabilmente confusione o dissonanza visiva ai dati reali.

Per rendere il punto un po 'più diretto, sostituisci "lontano / vicino" con "grande / piccolo". Questo non avrebbe alcun senso:

                            ---        
                     ---    | |        
              ---    | |    | |        
       ---    | |    | |    | |
       | |    | |    | |    | |
big    ---    ---    ---    ---     small

Pertanto, penso che sia necessario abbandonare l'idea di "capovolgere" la scala con le etichette. Se stai cercando di comunicare a una distanza maggiore, lascia che la barra grande lo indichi. È la correlazione più intuitiva.

Ma forse la soluzione non è affatto un grafico a barre. Sembra che tu stia cercando di implementare una sorta di metafora del "segnale di localizzazione". Più sei vicino, più forte è il segnale. Penso che sia una buona idea, ma considera un elemento visivo diverso da un grafico a barre per quello. Forse un "blip" (o punto) di qualche tipo.

Chiedete come rappresentare graficamente la distanza , ma tutte le risposte sembrano basarsi sul testo all'interno dell'immagine (le parole "lontano" e "vicino" ecc.). Pertanto ti suggerisco di scrivere solo "3 miglia di distanza" o "200 metri per andare" e utilizzare qualsiasi tipo di sfondo "indicatore di progresso" che si riempie orizzontalmente.

Fornire la distanza numerica non è necessariamente utile in termini di una persona che legge i numeri reali, ma i numeri e l'unità di misura rendono completamente chiaro a colpo d'occhio ciò che si sta misurando e se si verifica un cambiamento.

Il tuo contesto non è chiaro ma è importante. Concettualmente, la distanza è davvero ciò che vuoi rappresentare? O in realtà si tratta di rappresentare quanto un utente è vicino allo stato in cui sta cercando di essere, in cui la "distanza" sembra essere la metrica per quello?

Considera che ciò che stai effettivamente cercando di rappresentare è quanto è vicino un utente al raggiungimento di uno stato desiderabile. Lo stato desiderabile dovrebbe avere l'impressione più forte sullo schermo.

In altre parole, nel contesto della tua applicazione, se gli utenti cercano di essere più vicini agli altri utenti, non vorresti una barra (o nulla) che diventa più forte con una maggiore distanza, poiché questa impressione è l'esatto opposto di quello degli utenti obbiettivo.

Questo vale anche per i colori; in uno schema rosso -> verde in genere si desidera che il verde corrisponda allo stato di destinazione e rosso l'opposto, quindi se gli utenti cercassero di essere più vicini, si vorrebbe che il verde fosse a una distanza inferiore.

Con questo in mente, lo faranno le barre o il cuneo, ma in entrambi i casi vorrete che le barre / il cuneo siano verdi e piene (e il cuneo più grande) sul lato dello stato desiderato (ad es. Distanza inferiore se gli utenti cercano di essere più vicino).

Lungo queste linee, a parte l'accessibilità (questo è solo un esempio illustrativo) , se tutto ciò che stai davvero cercando di fare è dare un'idea di quanto un utente si avvicini al suo stato desiderato piuttosto che fornire informazioni accurate sulla distanza, un indicatore potrebbe essere come semplice come un quadrato statico che sfuma dal rosso attraverso ad esempio il giallo e poi il verde allo stato target (sia esso più vicino o più lontano), magari ottenendo un'etichetta, un bordo o un'animazione quando lo stato target è [quasi] raggiunto.

Le opzioni di progettazione nelle altre risposte qui sono tutte fantastiche, ma dal punto di vista UX assicurati di pensare a come stai usando quei progetti e cosa stai tentando di fare: se stai cercando di incoraggiare gli utenti a raggiungere uno stato target, tu non voglio, ad esempio, che le barre si accorcino e scompaiano in quello stato. Questa è anti-motivazione.

Aneddoticamente (non ho prove a portata di mano) Sospetterei anche che è più facile per un utente scegliere la barra più grande di un gruppo a colpo d'occhio rispetto alla più piccola. Immagino quindi che se hai più indicatori sullo schermo e la tua applicazione vuole consentire agli utenti di trovare rapidamente il "migliore" (il più vicino o il più lontano a seconda del contesto), avere l'indicatore più forte rappresenta gli stati più desiderabili sarebbe utile in questo senso.

Personalmente preferisco un cuneo, con il lato più grande a destra, che diventa verde mentre si riempie, e con il più vicino è il lato più grande ( supponendo che sia l'obiettivo più vicino ), poiché questo mi ricorda il segnale ormai familiare e onnipresente del telefono cellulare metro (4 barre è eccitante, 1 non lo è).

Penso che dovresti rendere la barra tutta di un colore, quindi utilizzare un marcatore significativo come una freccia o una barra di colore diverso che si sovrappone verticalmente per mostrare la distanza relativa dall'inizio a sinistra e la fine a destra. ( Modifica: credo che il termine ufficiale sia una barra di scorrimento)

Ecco un esempio di un gioco in cui le icone dei personaggi vengono utilizzate come marker e più di un marker è presente:

Ed ecco un esempio più realistico:

Modifica: (Un po 'di giustificazione per il mio suggerimento)

Le versioni originali presentate nella domanda sembrano troppo simili a barre di avanzamento che dovrebbero rappresentare progressi, non distanza. Se qualcosa che assomiglia a una barra di avanzamento (anche se è etichettato) inizia a tornare indietro, alcuni utenti saranno confusi perché sembra troppo innaturale ed è controintuitivo di ciò che le persone si aspettano.

Avendo una singola barra colorata con una qualche forma di marker, il marker diventa il focus e sembra più naturale che dovrebbe essere in grado di muoversi in entrambi i modi lungo la barra. L'aggiunta di tacche a questo dà anche la sensazione che stia succedendo una qualche forma di misurazione (in questo caso la distanza).