Como você representaria a distância graficamente?

Está bem,

Portanto, isso pode ser um pouco "subjetivo", mas estou procurando algumas idéias.

Quero representar a distância como um gráfico de barras (mais ou menos) que fica "mais cheio" quanto mais perto as pessoas estão.

Quanto mais longe estiverem, menos cheio será o gráfico de barras.

Não tenho certeza de como eu representaria isso. Eu criei este gráfico para mostrar meu processo de pensamento.

Você acha que as pessoas entenderiam? Devo especificar as bordas "FAR" e "CLOSE"? Ou apenas exibir a distância?

As pessoas entenderiam que, à medida que o gráfico de barras é preenchido, as pessoas estão mais próximas?

Talvez eu deva também especificar a distância real? (Metros, km, etc?) Ou renunciar completamente ao gráfico de barras?

Como você representaria a distância graficamente para que as pessoas, à primeira vista, tivessem uma boa idéia de quão perto ou longe a outra pessoa está?

EDIT : Ok, então falei com o cliente para obter mais detalhes e o que eles criaram foi algo semelhante ao círculo que o @Scott forneceu, onde o usuário atual está "no meio" e as pessoas ao redor do usuário estão em "órbita". Eles viram isso em algum lugar e querem isso, em vez de mostrar a distância para cada usuário.

Portanto, terei que exibir texto como "150m" ou "Próximo" em oposição a um gráfico de barras com a distância.

No entanto, eu também gostaria de agradecer a TODOS por fornecer respostas, alguns dos exemplos são fantásticos, eu os amo e isso fornece um ótimo painel de idéias para se basear. Como o "breve" mudou um pouco em relação à solicitação inicial, achei melhor editar esta pergunta para fornecer mais feedback.

Exemplo atualizado usando um design de cunha. Para maior clareza, as distâncias da amostra foram adicionadas ao gráfico e o texto foi removido.

Exemplo com texto Iniciar e Concluir

Como o tamanho pequeno é um fator para o computador de mão, aqui estão duas opções de economia de espaço de 100 por 100 pixels.

Brainstorming baseado nos requisitos mais recentes

Aqui está uma ideia de economia de espaço para celular que coloca o aplicativo em uma lista suspensa. Com o tamanho maior de uma lista suspensa, o mapa pode conter mais informações, como etiquetas do usuário e uma grade de distância.

Anos atrás, tive um jogo Amiga chamado F19 Stealth Fighter. O HUD sobre isso tinha algo muito semelhante ao que você descreve. Para as bombas que você soltou, em vez de disparar, foi exibida uma linha com dois 'postes' em cada extremidade, aproximando-se quanto mais perto de um alvo.

Aqui está uma representação moderna simples:

Se você quiser mostrar a distância entre duas pessoas, provavelmente é mais intuitivo mostrar uma distância entre duas pessoas. Na maquete grosseira abaixo, ainda existe algum tipo de barra, mas está apontando para trás. A distância é mostrada pela posição (movendo a pessoa para a direita) e tamanho (diminuindo a pessoa).

Quando você quiser mais um indicador em forma de barra, poderá colorir parte do triângulo como abaixo. E você pode adicionar rótulos às linhas.

Talvez a pessoa 'referência' à esquerda possa ser descartada.

Acho que os itens de distância funcionam melhor e são muito mais intuitivos, mas eu reverteria um pouco as coisas. A grande distância deve ser longa e vermelha, a curta distância deve ser curta e verde. O que você postou parece ler o oposto disso. Eu esperava que barras longas estivessem "distantes" e fossem vermelhas.

Sem conhecer seu layout geral, outra possibilidade talvez use um círculo com pontos ....

Usando a imagem criada por Talkingrock:

Eu acho que o que faria mais sentido, para mim, seria que fosse trocado assim:

Começa em Far Apart e acende quando você se aproxima. Eu acho que a mudança de texto de "Distante" para algo mais parecido com "Distante", "Juntos" ou "Conhecidos" ou algo indicando que as duas pessoas que chegam a um único destino ajudará a comunicar a idéia ainda mais.

Quero representar a distância como um gráfico de barras (mais ou menos) que fica "mais cheio" quanto mais perto as pessoas estão.

É o contrário do que mostra um gráfico de barras. Quanto maior o valor, maior a barra. Desejar fazer exatamente o oposto provavelmente adicionará confusão ou dissonância visual aos dados reais.

Para tornar o argumento um pouco mais direto, substitua 'far / near' por 'big / small'. Isso simplesmente não faria sentido:

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

Como tal, acho que você precisa abandonar a ideia de 'virar' a balança com os rótulos. Se você estiver tentando comunicar uma distância maior, deixe a barra grande indicar isso. É a correlação mais intuitiva.

Mas talvez a solução não seja um gráfico de barras. Parece que você está tentando implementar algum tipo de metáfora de 'sinal localizador'. Quanto mais perto você estiver, mais forte será o sinal. Eu acho que é uma boa ideia, mas considere um visual diferente de um gráfico de barras para isso. Talvez um "pontinho" (ou ponto) de algum tipo.

Você pergunta como representar a distância graficamente , mas todas as respostas parecem depender do texto da imagem (as palavras "longe" e "perto" etc.). Portanto, sugiro que você escreva "3 milhas de distância" ou "200 m para ir" e use qualquer tipo de plano de fundo do 'medidor de progresso' que preencha horizontalmente.

Indicar a distância numérica não é necessariamente útil em termos de uma pessoa ler os números reais, mas os números e a unidade de medida tornam completamente claro, à primeira vista, o que você está medindo e se há uma mudança.

Seu contexto não é claro, mas é importante. Conceitualmente, a distância é realmente que você deseja representar? Ou, na verdade, trata-se de representar a proximidade do usuário com o estado em que ele procura estar, onde "distância" é a métrica para isso?

Considere que o que você está realmente tentando representar é o quão perto um usuário está de alcançar um estado desejável. O estado desejável deve receber a impressão mais forte na tela.

Em outras palavras, no contexto do seu aplicativo, se os usuários procurarem estar mais próximos de outros usuários, você não desejaria uma barra (ou qualquer coisa) que se fortalecesse com uma maior distância, pois essa impressão é exatamente o oposto da imagem dos usuários. objetivo.

Isso vale para cores também; em um esquema vermelho -> verde, você normalmente deseja que o verde corresponda ao estado de destino e vermelho o oposto; portanto, se os usuários estiverem procurando estar mais perto, você deseja que o verde seja uma distância menor.

Com isso em mente, as barras ou a cunha servirão, mas em ambos os casos você desejará que as barras / cunha sejam verdes e cheias (e a cunha maior) no estado desejado lado do (por exemplo, menor distância se os usuários quiserem mais próximo).

Nessa linha, acessibilidade de lado (este é apenas um exemplo ilustrativo) , se tudo o que você realmente está tentando fazer é dar uma impressão de quão próximo o usuário está do estado desejado, em vez de fornecer informações precisas sobre a distância, um indicador pode ser simples como um quadrado estático que desvanece do vermelho ao amarelo, passando para o verde no estado alvo (mais perto ou mais longe), talvez ganhando um rótulo, borda ou animação quando o estado alvo é [quase] atingido.

As opções de design nas outras respostas aqui são ótimas, mas, do ponto de vista do UX, pense em como você está usando esses designs e o que está tentando fazer: Se você está tentando incentivar os usuários a atingir um estado-alvo, não deseja, por exemplo, que suas barras diminuam e desapareçam nesse estado. Isso é anti-motivação.

Curiosamente (não tenho nenhuma evidência disponível), eu também suspeitaria que é mais fácil para um usuário escolher a barra maior de um grupo rapidamente, em oposição à menor. Imagino que, se você tiver vários indicadores na tela e seu aplicativo quiser permitir que os usuários encontrem rapidamente o "melhor" (o mais próximo ou o mais distante, dependendo do contexto), ter o indicador mais forte representando os estados mais desejáveis ​​que ajudariam nesse sentido.

Pessoalmente, prefiro uma cunha, com o lado maior à direita, ficando verde à medida que enche, e com o lado maior sendo o lado maior ( assumindo que o objetivo seja mais próximo ), pois isso me lembra o agora familiar e onipresente sinal de celular metro (4 barras é emocionante, 1 não é).

Eu acho que você deve fazer a barra toda de uma cor e usar um marcador significativo, como uma seta ou uma barra colorida diferente, sobreposta verticalmente para mostrar a distância relativa do início à esquerda e do final à direita. ( Edit: Eu acredito que o termo oficial é uma barra deslizante)

Aqui está um exemplo de um jogo em que ícones de personagens são usados ​​como marcador e mais de um marcador está presente:

E aqui está um exemplo mais realista:

Edit: (Um pouco de justificativa para minha sugestão)

As versões originais, como apresentadas na pergunta, parecem muito com barras de progresso que devem representar progresso, não distância. Se algo que se parece com uma barra de progresso (mesmo que esteja rotulado) começa a retroceder, alguns usuários ficam confusos porque parece muito artificial e é contra-intuitivo o que as pessoas esperam.

Ao ter uma única barra colorida com alguma forma de marcador, o marcador se torna o foco e parece mais natural que ele possa se mover de qualquer maneira ao longo da barra. A adição de entalhes a isso também dá a sensação de que alguma forma de medição está acontecendo (neste caso, distância).