¿Cómo representaría la distancia gráficamente?

Okay,

Así que esto podría ser algo "subjetivo", pero estoy buscando algunas ideas.

Quiero representar la distancia como un gráfico de barras (más o menos) que se "llena" cuanto más cerca están las personas.

Cuanto más lejos estén, menos lleno estará el gráfico de barras, por así decirlo.

No estoy seguro de cómo representaría eso. He creado este gráfico para mostrarle mi proceso de pensamiento.

¿Crees que la gente lo entendería? ¿Debo especificar los bordes "FAR" y "CLOSE"? O simplemente mostrar la distancia?

¿Entendería la gente que a medida que se llena el gráfico de barras, la gente está más cerca?

¿Debería también especificar la distancia real? (¿Medidores, km, etc.?) ¿O renunciar por completo al gráfico de barras?

¿Cómo representaría la distancia gráficamente para que las personas a primera vista tengan una buena idea de cuán cerca o lejos está la otra persona?

EDITAR : Ok, hablé con el cliente para obtener más detalles y se les ocurrió algo similar al círculo que proporcionó @Scott, donde el usuario actual está "en el medio" y las personas que lo rodean están en "órbita". Lo han visto en alguna parte y lo quieren, en lugar de mostrar la distancia para cada usuario.

Por lo tanto, tendré que mostrar texto como "150 m" o "Cercano" en lugar de un gráfico de barras con la distancia.

Sin embargo, también quería agradecer a TODOS por proporcionar respuestas, algunos de los ejemplos son fantásticos, los amo y ofrece un gran panel de ideas para aprovechar. Dado que el "breve" cambió algo de la solicitud inicial, pensé que era mejor editar esta pregunta para proporcionar más comentarios.

Ejemplo actualizado con un diseño de cuña. Para mayor claridad, se agregaron distancias de muestra al gráfico y se eliminó el texto.

Ejemplo con texto de inicio y finalización

Dado que el tamaño pequeño es un factor para la computadora de mano, aquí hay dos opciones de ahorro de espacio de 100 px por 100 px.

Lluvia de ideas basada en los últimos requisitos

Aquí hay una idea para ahorrar espacio para dispositivos móviles que coloca la aplicación en un menú desplegable. Con el tamaño más grande de un menú desplegable, el mapa puede contener más información como etiquetas de usuario y una cuadrícula de distancia.

Hace años tuve un juego de Amiga llamado F19 Stealth Fighter. El HUD sobre esto tenía algo muy similar a lo que usted describe. Para las bombas que arrojaste, en lugar de disparar, se te mostró una línea con dos 'postes' en cada extremo cada vez más cerca cuanto más te acercabas a un objetivo.

Aquí hay una representación moderna simple:

Si desea mostrar la distancia entre dos personas, probablemente sea más intuitivo mostrar una distancia entre dos personas. En la maqueta aproximada de abajo todavía hay algún tipo de barra, pero apunta hacia atrás. La distancia se muestra por posición (moviendo a la persona hacia la derecha) y tamaño (reduciendo a la persona).

Cuando desee más de un indicador tipo barra, puede colorear parte del triángulo como se muestra a continuación. Y podría agregar etiquetas a las líneas.

Quizás la persona 'referencia' de la izquierda podría ser eliminada.

Creo que los elementos de distancia funcionan mejor y son mucho más intuitivos, pero revertiría las cosas un poco. La gran distancia debe ser larga y roja, la corta distancia debe ser corta y verde. Lo que has publicado parece leer lo contrario de esto. Esperaría que las barras largas estén "muy lejos" y sean rojas.

Sin conocer su diseño general, otra posibilidad quizás sea usar un círculo con puntos ...

Usando la imagen que Talkingrock creó:

Creo que lo que tendría más sentido, para mí, sería que se intercambiara así:

Comienza en Far Apart y se ilumina cuando se acercan juntos. Creo que el cambio de texto de "Far Close" a algo más parecido a "Far Apart", "Together" o "Met" o algo que indique que sus dos personas llegan a un solo destino ayudará a comunicar la idea aún más.

Quiero representar la distancia como un gráfico de barras (más o menos) que se "llena" cuanto más cerca están las personas.

Sin embargo, eso es lo contrario de lo que muestra un gráfico de barras. Cuanto mayor sea el valor, mayor será la barra. Querer hacer exactamente lo contrario probablemente agregará confusión o disonancia visual a los datos reales.

Para hacer el punto un poco más directo, reemplace 'lejos / cerca' con 'grande / pequeño'. Esto simplemente no tendría ningún sentido:

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

Como tal, creo que debes abandonar la idea de 'voltear' la escala con las etiquetas. Si está intentando comunicarse a una distancia mayor, deje que la barra grande lo indique. Es la correlación más intuitiva.

Pero tal vez la solución no es un gráfico de barras en absoluto. Parece que estás tratando de implementar algún tipo de metáfora de 'señal de localización'. Cuanto más cerca esté, más fuerte será la señal. Creo que es una buena idea, pero considere una imagen diferente a un gráfico de barras para eso. Tal vez un 'blip' (o punto) de algún tipo.

Usted pregunta cómo representar gráficamente la distancia , pero todas las respuestas parecen depender del texto dentro de la imagen (las palabras "lejos" y "cerca", etc.). Por lo tanto, le sugiero que simplemente escriba "3 millas de distancia" o "200 m para ir" y use cualquier tipo de fondo de 'medidor de progreso' que se llene horizontalmente.

Dar la distancia numérica no es necesariamente útil en términos de una persona que lee los números reales, pero los números y la unidad de medida dejan en claro a simple vista lo que está midiendo y si ocurre un cambio.

Su contexto no es claro pero es importante. Conceptualmente, ¿es la distancia realmente lo que quieres representar? ¿O se trata realmente de representar qué tan cerca está un usuario del estado en el que está buscando estar, donde la "distancia" es la métrica para eso?

Tenga en cuenta que lo que realmente está tratando de representar es qué tan cerca está un usuario de alcanzar un estado deseable. El estado deseable debe tener la impresión más fuerte en la pantalla.

En otras palabras, en el contexto de su aplicación, si los usuarios buscan estar más cerca de otros usuarios, entonces no querría una barra (ni nada) que se fortalezca con una mayor distancia, ya que esta impresión es exactamente lo contrario de los usuarios objetivo.

Esto también se aplica a los colores; en un esquema rojo -> verde, normalmente querrá que el verde se corresponda con el estado objetivo, y rojo lo contrario, por lo que si los usuarios buscan estar más cerca, entonces querría que el verde esté a una distancia menor.

Con eso en mente, las barras o la cuña funcionarán, pero en cualquier caso querrá que las barras / cuña estén verdes y llenas (y la cuña más grande) en el lado del estado deseado (por ejemplo, una distancia más baja si los usuarios buscan ser cerca).

En ese sentido, dejando de lado la accesibilidad (esto es solo un ejemplo ilustrativo) , si todo lo que realmente está intentando hacer es dar una impresión de cuán cerca está un usuario de su estado deseado en lugar de brindar información precisa sobre la distancia, un indicador podría ser simple como un cuadrado estático que se desvanece de rojo a, por ejemplo, amarillo y luego a verde en el estado objetivo (ya sea más cerca o más lejos), tal vez obteniendo una etiqueta, borde o animación cuando se alcanza el estado objetivo [casi].

Las opciones de diseño en las otras respuestas aquí son geniales, pero desde una perspectiva de experiencia de usuario, asegúrese de pensar cómo está utilizando esos diseños y qué está intentando hacer: si está tratando de alentar a los usuarios a alcanzar un estado objetivo, usted no quiere, por ejemplo, que sus barras se acorten y desaparezcan en ese estado. Eso es anti-motivación.

Como anécdota (no tengo evidencia a la mano) también sospecharía que es más fácil para un usuario elegir la barra más grande de un grupo de un vistazo en lugar de la más pequeña. Entonces me imagino que si tiene múltiples indicadores en su pantalla y su aplicación quiere permitir que los usuarios encuentren rápidamente el "mejor" (más cercano o más lejano según el contexto), tener el indicador más fuerte representa los estados más deseables ayudaría en este sentido.

Personalmente, prefiero una cuña, con el lado más grande a la derecha, que se vuelve verde a medida que se llena, y más cerca es el lado más grande ( suponiendo que el objetivo sea más cercano ), ya que esto me recuerda la señal del teléfono celular ahora familiar y omnipresente. metro (4 barras es emocionante, 1 no lo es).

Creo que debe hacer que la barra sea de un solo color, luego use un marcador significativo como una flecha o una barra de color diferente que se superponga verticalmente para mostrar la distancia relativa desde el inicio a la izquierda y el final a la derecha. ( Editar: creo que el término oficial es una barra deslizante)

Aquí hay un ejemplo de un juego donde los íconos de los personajes se usan como marcador y hay más de un marcador presente:

Y aquí hay un ejemplo más realista:

Editar: (Un poco de justificación para mi sugerencia)

Las versiones originales que se presentan en la pregunta se parecen demasiado a las barras de progreso que se espera que representen el progreso, no la distancia. Si algo que parece una barra de progreso (incluso si está etiquetado) comienza a retroceder, algunos usuarios se confundirán porque parece demasiado antinatural y es contrario a lo que la gente espera.

Al tener una barra de un solo color con alguna forma de marcador, el marcador se convierte en el foco y se siente más natural que pueda moverse en cualquier dirección a lo largo de la barra. La adición de muescas a esto también da la sensación de que se está realizando alguna forma de medición (en este caso, la distancia).