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

Ejemplo actualizado usando 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 en esto tenía algo muy similar a lo que describes. Para las bombas que lanzaste, en lugar de disparar, se te mostró una línea con dos 'postes' en cada extremo que se acercaban más a medida que 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 la distancia entre dos personas. En la maqueta aproximada a continuación, todavía hay una especie 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 un indicador en forma de barra, puede colorear parte del triángulo como se muestra a continuación. Y podría agregar etiquetas a las líneas.

Tal vez la persona de 'referencia' de la izquierda podría eliminarse.

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

Sin conocer su diseño general, otra posibilidad tal vez sea usar un círculo con puntos....

Usando la imagen que creó Talkingrock:

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

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

Quiero representar la distancia como un gráfico de barras (más o menos) que se vuelve "más completo" 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. Es probable que querer hacer exactamente lo contrario agregue 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 balanza con las etiquetas. Si está tratando de comunicarse a mayor distancia, deje que la barra grande lo indique. Es la correlación más intuitiva.

Pero tal vez la solución no sea 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és, más fuerte será la señal. Creo que es una buena idea, pero considere una imagen que no sea un gráfico de barras para eso. Tal vez un 'blip' (o punto) de algún tipo.

Usted pregunta cómo representar la distancia gráficamente , pero todas las respuestas parecen basarse en el 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 recorrer" 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 que una persona lea los números reales, pero los números y la unidad de medida dejan completamente claro de un vistazo lo que está midiendo y si se está produciendo un cambio.

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

Considere que lo que realmente está tratando de representar es qué tan cerca está un usuario de lograr un estado deseable. El estado deseable debe recibir 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á una barra (ni nada) que se fortalezca con una mayor distancia, ya que esta impresión es exactamente la opuesta a la de los usuarios. meta.

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 el rojo lo contrario, por lo que si los usuarios buscan estar más cerca, querrá que el verde esté a una distancia más pequeña.

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

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

Las opciones de diseño en las otras respuestas aquí son geniales, pero desde una perspectiva de UX, asegúrese de pensar en cómo está usando esos diseños y qué está tratando de 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 mano), también sospecharía que es más fácil para un usuario seleccionar 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 representando 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 con el lado más grande más cerca (suponiendo que el objetivo sea más cerca ), ya que esto me recuerda a la ahora familiar y omnipresente señal de teléfono celular. metro (4 compases es emocionante, 1 no lo es).

Creo que deberías hacer que la barra sea de un solo color, luego usar un marcador significativo como una flecha o una barra de otro color 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 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, tal como 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á etiquetada) comienza a retroceder, algunos usuarios se confundirán porque parece demasiado poco natural y es contrario a lo que la gente espera.

Al tener una barra de un solo color con algún tipo de marcador, el marcador se convierte en el foco y se siente más natural que debería poder 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).