거리를 그래픽으로 어떻게 표현 하시겠습니까?

확인,

따라서 이것은 다소 "주관적"일 수 있지만 몇 가지 아이디어를 찾고 있습니다.

거리가 사람들이 가까이있을수록 "더 크게"나타나는 막대 그래프 (종류)로 표현하고 싶습니다.

그들이 멀수록 막대 그래프가 덜 채워집니다.

어떻게 표현할 지 잘 모르겠습니다. 내 생각 과정을 보여주기 위해이 그래픽을 만들었습니다.

사람들이 이해할 것이라고 생각하십니까? "FAR"과 "CLOSE"모서리를 지정해야합니까? 아니면 그냥 표시 거리?

막대 그래프가 채워질수록 사람들이 더 가까이 있다는 것을 사람들이 이해합니까?

실제 거리를 지정해야합니까? (미터, km 등?) 또는 막대 그래프를 모두 잊었습니까?

사람들이 언뜻보기에 다른 사람이 얼마나 가까이 또는 멀리 있는지 잘 알 수 있도록 거리를 그래픽으로 어떻게 표현 하시겠습니까?

편집 : 좋아, 자세한 내용은 고객과 대화를 나누고 @Scott이 제공 한 서클과 비슷한 것으로, 현재 사용자는 "중간에 있고"사용자는 "궤도"에 있습니다. 그들은 각 사용자의 거리를 보여주는 것과 달리 어딘가에서 그것을보고 싶어했습니다.

따라서 거리가있는 막대 그래프 대신 "150m"또는 "Nearby"와 같은 텍스트를 표시해야합니다.

그러나, 나는 또한 답변을 해주신 모든 분들께 감사 드리고 싶었습니다. 일부 사례는 환상적입니다. 저는 그것들을 좋아하며,이를 바탕으로 훌륭한 아이디어 패널을 제공합니다. "요약"은 초기 요청에서 약간 변경되었으므로 피드백을 제공하기 위해이 질문을 편집하는 것이 가장 좋습니다.

웨지 디자인을 사용하여 업데이트 된 예. 명확성을 위해 샘플 거리를 그래프에 추가하고 텍스트를 제거했습니다.

시작 및 종료 텍스트가있는 예

작은 크기는 핸드 헬드의 요소이므로 여기에는 두 개의 100 x 100 픽셀 공간 절약 옵션이 있습니다.

최신 요구 사항에 따른 브레인 스토밍

다음은 앱을 드롭 다운에 배치하는 모바일 공간 절약 아이디어입니다. 드롭 다운 크기가 클수록지도에는 사용자 레이블 및 거리 그리드와 같은 추가 정보가 포함될 수 있습니다.

몇 년 전 저는 F19 Stealth Fighter라는 Amiga 게임을했습니다. 이것에 대한 HUD는 당신이 묘사 한 것과 매우 유사했습니다. 발사 한 폭탄보다 발사 한 폭탄의 경우 목표에 가까워 질수록 양쪽 끝에 두 개의 '포스트'가있는 라인이 표시됩니다.

다음은 간단한 현대 표현입니다.

두 사람 사이의 거리를 표시하려면 두 사람 사이의 거리를 표시하는 것이 가장 직관적입니다. 아래의 거친 모형에는 여전히 어떤 종류의 막대가 있지만 뒤로 향하고 있습니다. 거리는 위치 (사람을 오른쪽으로 이동)와 크기 (사람을 축소)로 표시됩니다.

막 대형 표시기를 더 많이 원할 경우 아래와 같이 삼각형의 일부를 채색 할 수 있습니다. 선에 레이블을 추가 할 수 있습니다.

왼쪽에있는 '참조'사람이 삭제 될 수 있습니다.

나는 거리 아이템이 더 잘 작동하고 훨씬 더 직관적이라고 생각하지만, 약간 반대로 할 것입니다. 먼 거리는 길고 붉은 색이어야하고, 짧은 거리는 짧고 녹색이어야합니다. 게시 한 내용은 이것의 반대를 읽는 것 같습니다. 긴 막대가 "멀리 떨어져"있고 빨간색이 될 것으로 기대합니다.

전반적인 레이아웃을 알지 못하면 점이있는 원을 사용할 수도 있습니다 ....

Talkingrock 이미지 생성 :

나에게 가장 의미가있는 것은 다음과 같이 교체 될 것이라고 생각합니다.

Far Apart에서 시작하여 함께 접근하면 불이 켜집니다. "Far Close"에서 "Far Apart", "Together"또는 "Met"과 같은 텍스트로 변경하거나 두 사람이 단일 목적지에 도착했음을 나타내는 것이 아이디어를 더 전달하는 데 도움이된다고 생각합니다.

거리가 사람들이 가까이있을수록 "더 크게"나타나는 막대 그래프 (종류)로 표현하고 싶습니다.

그러나 막대 그래프가 보여주는 것과 반대입니다. 값이 클수록 막대가 커집니다. 반대의 행동을 원한다면 실제 데이터에 혼란이나 시각적 불협화음이 추가 될 수 있습니다.

포인트를 좀 더 직접적으로 만들려면 'far / near'를 'big / small'로 바꿉니다. 이것은 의미가 없습니다.

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

따라서 레이블로 눈금을 '충돌'한다는 생각을 버려야한다고 생각합니다. 더 먼 거리에서 통신하려는 경우 큰 막대로 표시하십시오. 가장 직관적 인 상관 관계입니다.

그러나 솔루션이 막대 그래프가 아닐 수도 있습니다. 일종의 '로케이터 신호'유를 구현하려고하는 것처럼 들립니다. 가까이있을수록 신호가 강해집니다. 나는 그것이 좋은 생각이라고 생각하지만, 막대 그래프 이외의 시각적 인 것을 고려하십시오. 어쩌면 일종의 '블립'(또는 점) 일 수 있습니다.

거리를 그래픽 으로 표현하는 방법을 묻지 만 모든 대답은 이미지 내의 텍스트 ( "far"및 "close"등)에 의존하는 것 같습니다. 따라서 "3 마일 간격"또는 "200m 이동"을 작성하고 가로로 채워지는 '진행 미터'배경을 사용하는 것이 좋습니다.

숫자 거리를 제공하는 것이 실제 숫자를 읽는 사람의 관점에서 반드시 유용한 것은 아니지만 숫자와 측정 단위를 사용하면 측정 대상과 변경 사항이 있는지 한 눈에 완전히 알 수 있습니다.

상황은 명확하지 않지만 중요합니다. 개념적으로, 거리는 정말로 당신이 표현하고자하는 것입니까? 또는 실제로 사용자가 원하는 상태에 얼마나 근접한지를 나타내는 것일까 요? "거리"는 그에 대한 지표 일 뿐입니 까?

실제로 표현하려는 것은 사용자가 바람직한 상태를 달성하는 데 얼마나 근접한 지를 고려하십시오 . 바람직한 상태는 화면에서 가장 강한 인상을 주어야합니다.

다시 말해서, 응용 프로그램의 맥락에서, 사용자 가 다른 사용자에게 더 가까이 다가가려 는 경우,이 인상은 사용자와 정확히 반대이므로 거리가 멀어 질 수록 더 강한 막대 (또는 다른 것)를 원하지 않을 것 입니다. 골.

이것은 색상에도 적용됩니다. 빨간색-> 녹색 구성표에서는 일반적으로 녹색이 대상 상태와 일치하고 반대의 경우 빨간색을 원하므로 사용자가 더 가까이 접근하려는 경우 녹색이 더 작은 거리를 원할 것입니다.

이를 염두에두고 바 또는 웨지가되지만, 두 경우 모두 원하는 상태 측면 에서 바 / 웨지가 녹색이고 꽉 찼을 때 (그리고 쐐기가 더 커짐) (예 : 사용자가 가까이).

이러한 선을 따라 접근성을 제쳐두고 (이것은 단지 예시적인 예입니다.) 실제로 시도하려는 모든 것이 거리에 대한 정확한 정보를 제공하기보다는 사용자가 원하는 상태에 얼마나 가까운 지에 대한 인상을 주면 표시기는 다음과 같습니다. 타겟 상태 (적어도 더 멀거나 더 먼)에서 빨강에서 노랑으로 사라지고 녹색으로 바뀐 정적 정사각형처럼 간단합니다. 아마도 타겟 상태에 거의 도달했을 때 레이블, 테두리 또는 애니메이션을 얻을 수 있습니다.

여기에있는 다른 답변의 디자인 옵션은 모두 훌륭하지만 UX 관점에서 이러한 디자인을 사용하는 방법과 수행하려는 작업에 대해 생각해야합니다. 사용자가 대상 상태에 도달하도록 권장하려는 경우 예를 들어 막대가 짧아지고 그 상태에서 사라지는 것을 원하지 않습니다. 그것은 동기 부여입니다.

일화 적으로 (나는 증거가 없다) 또한 사용자가 가장 작은 것과 반대로 한 그룹에서 가장 큰 막대를 한 눈에 쉽게 선택할 수 있다고 생각합니다. 그런 다음 화면에 여러 개의 표시기가 있고 응용 프로그램에서 사용자가 "최상의"(상황에 따라 가장 가깝거나 가장 먼 거리)을 빨리 찾으려고한다면 더 강력한 표시기가 더 바람직한 상태를 나타내면 이와 관련하여 도움이 될 것입니다.

개인적으로 나는 쐐기를 선호합니다. 오른쪽이 더 커지고 채워질수록 녹색으로 바뀌고 더 굵은 쪽이 더 가깝습니다 (목표가 더 가깝다고 가정합니다 ). 미터 (4 bar는 흥미롭고 1은 그렇지 않습니다).

막대를 모두 한 가지 색상으로 만든 다음 화살표와 같은 중요한 마커 또는 세로로 겹쳐진 다른 막대를 사용하여 왼쪽 시작과 오른쪽 끝의 상대 거리를 표시해야한다고 생각합니다. ( 편집 : 공식 용어는 슬라이더 막대라고 생각합니다)

다음은 캐릭터 아이콘이 마커로 사용되고 하나 이상의 마커가있는 게임의 예입니다.

보다 현실적인 예는 다음과 같습니다.

편집 : (내 제안에 대한 약간의 정당화)

질문에 제시된 원본 버전은 거리가 아닌 진행률을 나타내는 진행률 표시 줄과 너무 많이 보입니다. 진행률 표시 줄처럼 보이는 것이 레이블로 표시되어 있어도 뒤로 가기 시작하면 일부 사용자는 너무 부자연스럽고 사람들이 기대하는 것에 반 직관적이기 때문에 혼동 될 것입니다.

마커 형태의 단일 색상 막대를 사용하면 마커가 초점이되고 막대를 따라 어느 방향 으로든 움직일 수 있다는 것이 더 자연스럽게 느껴집니다. 여기에 노치를 추가하면 어떤 형태의 측정 (이 경우 거리)이 진행되고 있음을 알 수 있습니다.