คุณจะแสดงระยะทางแบบกราฟิกอย่างไร

ตกลง,

ดังนั้นนี่อาจเป็น "ส่วนตัว" แต่ฉันกำลังมองหาแนวคิดบางอย่าง

ฉันต้องการแสดงระยะทางเป็นกราฟแท่ง (ชนิด) ที่ทำให้ "ฟูลเลอร์" ยิ่งใกล้คนมากขึ้น

ยิ่งพวกเขาอยู่ไกลเท่าไหร่กราฟแท่งที่เต็มจะยิ่งน้อยลงถ้าคุณต้องการ

ฉันไม่แน่ใจว่าฉันจะเป็นตัวแทนได้อย่างไร ฉันได้สร้างกราฟิกนี้เพื่อแสดงกระบวนการคิดของฉัน

คุณคิดว่าคนจะเข้าใจไหม? ฉันควรระบุขอบ "FAR" และ "ปิด" หรือไม่ หรือเพียงแค่แสดงระยะทาง?

ผู้คนจะเข้าใจหรือไม่ว่าเมื่อกราฟแท่งเต็ม

ฉันควรระบุระยะทางจริงหรือไม่? (ไม่ว่าจะเป็นเมตร, กม., ฯลฯ ?) หรือทิ้งกราฟแท่งทั้งหมด?

คุณจะแสดงระยะทางแบบกราฟิกอย่างไรเพื่อให้ผู้คนเห็นแวบแรกคิดว่าคนอื่นอยู่ใกล้หรือไกลแค่ไหน?

แก้ไข : ตกลงเพื่อพูดคุยกับลูกค้าเพื่อดูรายละเอียดเพิ่มเติมและสิ่งที่พวกเขาพบคือสิ่งที่คล้ายกับวงกลมที่ @Scott จัดหาให้ซึ่งผู้ใช้ปัจจุบันคือ "กลาง" และผู้คนรอบ ๆ ผู้ใช้อยู่ใน "วงโคจร" พวกเขาเห็นมันที่ไหนสักแห่งและต้องการสิ่งนั้นซึ่งต่างจากการแสดงระยะทางสำหรับผู้ใช้แต่ละคน

ฉันจะต้องแสดงข้อความเช่น "150m" หรือ "ใกล้เคียง" ซึ่งตรงข้ามกับกราฟแท่งที่มีระยะทาง

อย่างไรก็ตามฉันอยากจะขอบคุณทุกคนที่ให้คำตอบตัวอย่างที่ยอดเยี่ยมฉันรักพวกเขาและให้ความคิดที่ยอดเยี่ยม เนื่องจาก "สั้น" ค่อนข้างเปลี่ยนไปจากคำขอเริ่มต้นฉันคิดว่าควรแก้ไขคำถามนี้เพื่อให้ข้อเสนอแนะเพิ่มเติม

อัปเดตตัวอย่างโดยใช้การออกแบบลิ่ม เพื่อความชัดเจนเราจะเพิ่มระยะทางตัวอย่างลงในกราฟและลบข้อความออก

ตัวอย่างที่มีข้อความเริ่มต้นและเสร็จสิ้น

เนื่องจากขนาดเล็กเป็นปัจจัยสำหรับมือถือนี่คือตัวเลือกการประหยัดพื้นที่ 100px คูณ 100px สองตัว

ระดมสมองตามข้อกำหนดล่าสุด

นี่คือแนวคิดประหยัดพื้นที่สำหรับมือถือที่วางแอปไว้ในรายการแบบเลื่อนลง ด้วยขนาดที่ใหญ่กว่าของดรอปดาวน์แผนที่สามารถมีข้อมูลเพิ่มเติมเช่นป้ายชื่อผู้ใช้และกริดระยะทาง

หลายปีก่อนฉันมีเกม Amiga ชื่อ F19 Stealth Fighter HUD เกี่ยวกับเรื่องนี้มีบางสิ่งที่คล้ายกับที่คุณอธิบาย สำหรับระเบิดที่คุณทิ้งไปแทนที่จะถูกยิงคุณจะเห็นเส้นที่มี 'โพสต์' สองจุดที่ปลายแต่ละด้านใกล้กันมากขึ้นเมื่อใกล้ถึงเป้าหมาย

ต่อไปนี้เป็นการนำเสนอที่เรียบง่ายทันสมัย:

หากคุณต้องการแสดงระยะห่างระหว่างคนสองคนมันอาจเป็นเรื่องง่ายที่สุดที่จะแสดงระยะห่างระหว่างคนสองคน ในการจำลองแบบหยาบด้านล่างยังคงมีแถบอยู่บ้าง แต่มันก็ชี้ไปด้านหลัง ระยะทางจะแสดงตามตำแหน่ง (โดยเลื่อนบุคคลไปทางขวา) และขนาด (ลดขนาดบุคคล)

เมื่อคุณต้องการตัวบ่งชี้ที่เหมือน Barlike มากขึ้นคุณสามารถสีส่วนของสามเหลี่ยมดังต่อไปนี้ และคุณสามารถเพิ่มป้ายกำกับในบรรทัด

บางทีคน 'อ้างอิง' ทางด้านซ้ายอาจถูกทิ้ง

ฉันคิดว่ารายการระยะทางทำงานได้ดีขึ้นและใช้งานง่ายกว่ามาก แต่ฉันกลับสิ่งเล็กน้อย ระยะทางที่ดีควรยาวและแดงระยะสั้นควรสั้นและเขียว สิ่งที่คุณโพสต์ดูเหมือนจะอ่านตรงข้ามกับสิ่งนี้ ฉันคาดว่าบาร์ยาวจะ "ไกล" และเป็นสีแดง

ความเป็นไปได้อีกอย่างหนึ่งอาจใช้วงกลมที่มีจุด ...

การใช้ภาพ Talkingrock ที่สร้างขึ้น:

ฉันคิดว่าสิ่งที่เหมาะสมที่สุดสำหรับฉันก็คือการเปลี่ยนให้เป็นเช่นนี้:

เริ่มที่ Far Apart และสว่างขึ้นเมื่อคุณเข้าหากัน ฉันคิดว่าการเปลี่ยนข้อความจาก "Far Far" เป็นอะไรที่มากกว่า "Far Apart" "Together" หรือ "Met" หรือบางสิ่งที่บ่งบอกว่าคนสองคนที่มาถึงปลายทางเดียวจะช่วยสื่อสารความคิดต่อไป

ฉันต้องการแสดงระยะทางเป็นกราฟแท่ง (ชนิด) ที่ทำให้ "ฟูลเลอร์" ยิ่งใกล้คนมากขึ้น

นั่นคือสิ่งที่ตรงกันข้ามกับสิ่งที่กราฟแท่งแสดงให้เห็น ยิ่งค่ายิ่งสูงแถบก็จะยิ่งใหญ่ขึ้นเท่านั้น ต้องการทำในสิ่งที่ตรงกันข้ามมีแนวโน้มที่จะเพิ่มความสับสนหรือความไม่ลงรอยกันของข้อมูลจริง

หากต้องการทำให้จุดนั้นตรงมากขึ้นให้เปลี่ยน 'ไกล / ใกล้' ด้วย 'ใหญ่ / เล็ก' สิ่งนี้จะไม่สมเหตุสมผล:

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

ดังนั้นฉันคิดว่าคุณจำเป็นต้องวางแนวคิดของ 'พลิก' สเกลด้วยป้ายกำกับ หากคุณพยายามสื่อสารในระยะทางที่ไกลขึ้นให้แถบขนาดใหญ่ระบุว่า มันเป็นความสัมพันธ์ที่เข้าใจง่ายที่สุด

แต่วิธีการแก้ปัญหาอาจไม่ใช่กราฟแท่งเลย ดูเหมือนว่าคุณกำลังพยายามใช้คำเปรียบเทียบ 'locator signal' ยิ่งคุณอยู่ใกล้สัญญาณยิ่งแรง ฉันคิดว่ามันเป็นความคิดที่ดี แต่ให้พิจารณาภาพอื่นนอกเหนือจากกราฟแท่งสำหรับเรื่องนั้น อาจเป็น 'blip' (หรือจุด) ของการจัดเรียงบางอย่าง

คุณถามว่าจะแสดงระยะทางแบบกราฟิกได้อย่างไร แต่คำตอบทั้งหมดดูเหมือนจะอาศัยข้อความในภาพ (คำว่า "ไกล" และ "ปิด" ฯลฯ ) ดังนั้นฉันขอแนะนำให้คุณเขียน "ห่างกัน 3 ไมล์" หรือ "200m เพื่อไป" และใช้พื้นหลังใด ๆ ของ 'เครื่องวัดความคืบหน้า' ที่เติมเต็มในแนวนอน

การให้ระยะทางเป็นตัวเลขนั้นไม่จำเป็นว่าจะมีประโยชน์ในแง่ของคนที่อ่านตัวเลขจริง แต่ตัวเลขและหน่วยการวัดทำให้ชัดเจนโดยสมบูรณ์ในสิ่งที่คุณกำลังวัดและหากมีการเปลี่ยนแปลงเกิดขึ้น

บริบทของคุณไม่ชัดเจน แต่มีความสำคัญ แนวคิดคือระยะทางจริงๆสิ่งที่คุณต้องการที่จะเป็นตัวแทน? หรือเป็นจริงเกี่ยวกับการแสดงให้เห็นว่าผู้ใช้ใกล้ชิดกับรัฐมากแค่ไหนที่พวกเขาต้องการที่จะเข้าใกล้โดยที่ "ระยะทาง" เกิดขึ้นเป็นตัวชี้วัดสำหรับสิ่งนั้น

พิจารณาว่าสิ่งที่คุณพยายามนำเสนอจริง ๆคือผู้ใช้ใกล้ถึงสถานะที่ต้องการได้อย่างไร สถานะที่พึงประสงค์ควรได้รับการแสดงผลที่แข็งแกร่งที่สุดบนหน้าจอ

กล่าวอีกนัยหนึ่งในบริบทของแอปพลิเคชันของคุณหากผู้ใช้ต้องการที่จะใกล้ชิดกับผู้ใช้คนอื่นมากขึ้นคุณจะไม่ต้องการบาร์ (หรืออะไรก็ตาม) ที่แข็งแกร่งขึ้นด้วยระยะทางที่มากกว่าเนื่องจากการแสดงผลนี้ตรงกันข้ามกับผู้ใช้ เป้าหมาย.

สิ่งนี้ให้สีเช่นกัน ในชุดรูปแบบสีแดง -> สีเขียวโดยทั่วไปคุณต้องการให้สีเขียวสอดคล้องกับสถานะเป้าหมายและสีแดงตรงข้ามดังนั้นหากผู้ใช้ค้นหาให้ใกล้ชิดยิ่งขึ้นแล้วคุณต้องการให้สีเขียวเป็นระยะทางที่สั้นกว่า

โดยที่ในใจบาร์หรือลิ่มจะทำ แต่ในกรณีใดกรณีหนึ่งคุณจะต้องการให้บาร์ / ลิ่มเป็นสีเขียวและเต็ม (และลิ่มใหญ่กว่า) ที่ด้านรัฐที่ต้องการ (เช่นระยะทางที่ต่ำกว่าหากผู้ใช้ต้องการเป็น ใกล้ชิด)

ตามเส้นเหล่านั้นความสามารถในการเข้าใช้นอกเหนือจากนี้เป็นเพียงตัวอย่างที่แสดงให้เห็นว่าสิ่งที่คุณพยายามทำคือให้ความประทับใจว่าผู้ใช้อยู่ในสถานะที่ต้องการได้อย่างไรแทนที่จะให้ข้อมูลที่ถูกต้องเกี่ยวกับระยะทาง ง่าย ๆ เช่นเดียวกับสแควร์คงที่ที่จางหายจากสีแดงเช่นสีเหลืองแล้วเป็นสีเขียวที่สถานะเป้าหมาย (ไม่ว่าจะใกล้หรือไกลออกไป) อาจได้รับฉลากชายแดนหรือภาพเคลื่อนไหวเมื่อถึงเป้าหมาย [เกือบ]

ตัวเลือกการออกแบบในคำตอบอื่น ๆ ที่นี่ล้วนยอดเยี่ยม แต่จากมุมมองของ UX อย่าลืมนึกถึงวิธีที่คุณใช้การออกแบบเหล่านั้นและสิ่งที่คุณพยายามทำ: ถ้าคุณพยายามกระตุ้นให้ผู้ใช้เข้าถึงสถานะเป้าหมายคุณ ตัวอย่างเช่นไม่ต้องการแท่งของคุณจะสั้นลงและหายไปในสถานะนั้น นั่นคือการต่อต้านแรงจูงใจ

Anecdotally (ฉันไม่มีหลักฐานอยู่ในมือ) ฉันยังสงสัยว่ามันจะง่ายกว่าสำหรับผู้ใช้ที่จะเลือกแถบที่ใหญ่ที่สุดในกลุ่มได้อย่างรวดเร็วเมื่อเทียบกับที่เล็กที่สุด ฉันคิดว่าถ้าคุณมีตัวบ่งชี้หลายตัวบนหน้าจอของคุณและแอปพลิเคชันของคุณต้องการให้ผู้ใช้ค้นหา "ที่ดีที่สุด" (ใกล้เคียงที่สุดหรือไกลที่สุดขึ้นอยู่กับบริบท) อย่างรวดเร็วการมีตัวบ่งชี้ที่แข็งแกร่งมากขึ้น

โดยส่วนตัวแล้วฉันชอบลิ่มด้วยด้านที่ใหญ่กว่าทางด้านขวาเปลี่ยนเป็นสีเขียวเมื่อเติมและใกล้เข้ามาเป็นด้านที่ใหญ่กว่า ( สมมติว่าใกล้กว่าคือเป้าหมาย ) เนื่องจากนี่เป็นการเตือนให้ฉันระลึกถึงสัญญาณโทรศัพท์มือถือที่คุ้นเคยและแพร่หลาย เมตร (4 บาร์น่าตื่นเต้น 1 ไม่ใช่)

ฉันคิดว่าคุณควรทำให้แถบเป็นสีเดียวจากนั้นใช้เครื่องหมายสำคัญเช่นลูกศรหรือแถบสีอื่นที่วางซ้อนกันในแนวตั้งเพื่อแสดงระยะทางสัมพัทธ์จากจุดเริ่มต้นทางด้านซ้ายและจุดสิ้นสุดทางด้านขวา ( แก้ไข:ฉันเชื่อว่าคำที่เป็นทางการคือแถบเลื่อน)

นี่คือตัวอย่างจากเกมที่มีไอคอนตัวละครใช้เป็นเครื่องหมายและมีมากกว่าหนึ่งเครื่องหมาย:

และนี่คือตัวอย่างที่สมจริงยิ่งขึ้น:

แก้ไข: (เหตุผลเล็กน้อยสำหรับข้อเสนอแนะของฉัน)

ฉบับดั้งเดิมที่นำเสนอในคำถามดูเหมือนแถบความคืบหน้ามากเกินไปซึ่งคาดว่าจะแสดงถึงความคืบหน้าไม่ใช่ระยะทาง หากสิ่งที่ดูเหมือนแถบความคืบหน้า (แม้ว่าจะมีป้ายกำกับ) เริ่มย้อนกลับผู้ใช้บางคนจะสับสนเพราะมันดูผิดธรรมชาติเกินไปและขัดกับสิ่งที่ผู้คนคาดหวัง

การมีแถบสีเดียวที่มีรูปแบบของเครื่องหมายมาร์กเกอร์นั้นจะกลายเป็นจุดโฟกัสและให้ความรู้สึกเป็นธรรมชาติมากขึ้นว่าควรจะสามารถเลื่อนไปทางใดก็ได้ตามแถบ การเพิ่มรอยหยักให้ความรู้สึกว่ารูปแบบการวัดบางอย่างเกิดขึ้น (ในกรณีระยะนี้)