Как бы вы изобразили расстояние графически?

В порядке,

Так что это может быть несколько «субъективно», но я ищу некоторые идеи.

Я хочу представить расстояние в виде гистограммы (типа), которая становится «полнее», чем ближе люди.

Чем они дальше, тем менее полна гистограмма, если хотите.

Я не уверен, как бы я это представлял. Я создал этот рисунок, чтобы показать вам мой мыслительный процесс.

Как вы думаете, люди поймут? Должен ли я указать края "FAR" и "CLOSE"? Или просто показать расстояние?

Понимают ли люди, что по мере заполнения гистограммы люди становятся ближе?

Должен ли я также указать фактическое расстояние? (Метры, километры и т. Д.?) Или вообще отказаться от гистограммы?

Как бы вы изобразили расстояние графически, чтобы люди, на первый взгляд, имели представление о том, насколько близко или далеко находится другой человек?

РЕДАКТИРОВАТЬ : Хорошо, поэтому поговорили с клиентом для получения более подробной информации, и что они придумали, было что-то похожее на круг, который предоставил @Scott, где текущий пользователь находится «в середине», а люди вокруг пользователя находятся на «орбите». Они где-то видели это и хотят этого, а не показывают расстояние для каждого пользователя.

Поэтому мне придется отображать текст, например, «150 м» или «Рядом», а не гистограмму с расстоянием.

Тем не менее, я также хотел бы поблагодарить ВСЕХ за предоставление ответов, некоторые примеры фантастические, я люблю их, и это дает отличную панель идей, на которые можно опираться. Поскольку «краткое» несколько изменилось по сравнению с первоначальным запросом, я решил, что лучше всего отредактировать этот вопрос, чтобы получить еще больше отзывов.

Обновленный пример с использованием дизайна клина. Для ясности, расстояния образца были добавлены к графику, а текст был удален.

Пример с начальным и конечным текстом

Так как малый размер является фактором для портативного устройства, здесь есть два варианта экономии пространства 100 на 100 пикселей.

Мозговой штурм на основе последних требований

Вот идея экономии места для мобильных устройств, которая помещает приложение в выпадающий список. При большем размере раскрывающегося списка карта может содержать больше информации, например, метки пользователя и сетку расстояний.

Несколько лет назад у меня была игра Amiga под названием F19 Stealth Fighter. В HUD было что-то очень похожее на то, что вы описываете. Для бомб, которые вы сбрасывали, а не стреляли, вам показывали линию с двумя «постами» на каждом конце, которые становились ближе друг к другу, чем ближе к цели.

Вот простое современное представление:

Если вы хотите показать расстояние между двумя людьми, возможно, наиболее интуитивно понятно показать расстояние между двумя людьми. В грубом макете ниже есть еще какая-то полоса, но она указывает назад. Расстояние показывается положением (при перемещении человека вправо) и размером (уменьшение человека).

Если вы хотите больше индикатора в виде столбцов, вы можете закрасить часть треугольника, как показано ниже. И вы можете добавить метки к строкам.

Возможно, «справочный» человек слева может быть отброшен.

Я думаю, что дистанционные элементы работают лучше и гораздо более интуитивно понятны, но я бы немного изменил положение вещей. Большое расстояние должно быть длинным и красным, короткое расстояние должно быть коротким и зеленым. То, что вы опубликовали, похоже, говорит об обратном. Я ожидаю, что длинные бары будут "далеко" и будут красными.

Не зная вашего общего макета, другая возможность, возможно, использовать круг с точками ....

Используя изображение Talkingrock создано:

Я думаю, что было бы для меня самым разумным сделать это так:

Начинается в дальнем расстоянии и загорается, когда вы приближаетесь. Я думаю, что изменение текста с «Дальнего расстояния» на что-то более похожее на «Далеко друг от друга», «Вместе» или «Встреча» или что-то, указывающее, что два человека прибывают в один пункт назначения, поможет донести идею дальше.

Я хочу представить расстояние в виде гистограммы (типа), которая становится «полнее», чем ближе люди.

Это противоположно тому, что показывает гистограмма. Чем выше значение, тем больше планка. Желание сделать прямо противоположное может привести к путанице или визуальному диссонансу к фактическим данным.

Чтобы сделать точку чуть более прямой, замените «далеко / близко» на «большой / маленький». Это просто не имеет никакого смысла:

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

Поэтому я думаю, что вам нужно отказаться от идеи «перевернуть» шкалу с помощью меток. Если вы пытаетесь общаться на большем расстоянии, позвольте большой полосе указать это. Это самая интуитивная корреляция.

Но, возможно, решение вовсе не гистограмма. Похоже, вы пытаетесь реализовать какую-то метафору «сигнал локатора». Чем ближе вы, тем сильнее сигнал. Я думаю, что это хорошая идея, но для этого рассмотрим визуальное, а не гистограмму. Может быть, «блик» (или точка) какого-то рода.

Вы спрашиваете, как изобразить расстояние графически , но все ответы, похоже, основаны на тексте на изображении (слова «далеко» и «близко» и т. Д.). Поэтому я предлагаю вам просто написать «3 мили друг от друга» или «200 метров до конца» и использовать любой фон «индикатора прогресса», который заполняется горизонтально.

Указание числового расстояния не обязательно полезно с точки зрения человека, читающего фактические числа, но числа и единица измерения действительно позволяют сразу понять, что именно вы измеряете, и происходит ли изменение.

Ваш контекст не ясен, но важен. Концептуально, расстояние действительно то, что вы хотите изобразить? Или это действительно представление о том, насколько близок пользователь к состоянию, в котором он стремится быть, где «расстояние» как раз и является метрикой для этого?

Представьте , что вы на самом деле пытаетесь представить, насколько близок пользователь к достижению желаемого состояния. Желаемое состояние должно получить самое сильное впечатление на экране.

Другими словами, в контексте вашего приложения, если пользователи стремятся быть ближе к другим пользователям, вы бы не хотели, чтобы планка (или что-то еще) укреплялась с большим расстоянием, так как это впечатление является полной противоположностью пользователей. Цель.

Это касается и цветов; в схеме «красный -> зеленый» вы обычно хотите, чтобы зеленый цвет соответствовал целевому состоянию, а красный - наоборот, поэтому, если пользователи стремятся быть ближе, то вы хотите, чтобы зеленый цвет был на меньшем расстоянии.

Имея это в виду, подойдут либо стержни, либо клин, но в любом случае вы захотите, чтобы стержни / клин были зелеными и полными (и клин больше) на желаемой стороне состояния (например, на меньшем расстоянии, если пользователи стремятся быть ближе).

Вдобавок к этому, за исключением доступности (это всего лишь иллюстративный пример) , если все, что вы действительно пытаетесь сделать, это дать представление о том, насколько близко пользователь находится к желаемому состоянию, а не дать точную информацию о расстоянии, индикатор может быть простой как статический квадрат, который исчезает от красного до, например, желтого, затем до зеленого в целевом состоянии (будь то ближе или дальше), возможно, получая метку, границу или анимацию, когда целевое состояние [почти] достигнуто.

Все варианты дизайна в других ответах здесь великолепны, но с точки зрения UX обязательно подумайте о том, как вы используете эти проекты и что вы пытаетесь сделать: если вы пытаетесь побудить пользователей достичь целевого состояния, вы не хотите, например, чтобы ваши бары становились короче и исчезали в этом состоянии. Это анти-мотивация.

Неожиданно (у меня нет под рукой доказательств), я также подозреваю, что пользователю проще выделить самый большой столбец в группе, чем наименьший. Я бы тогда предположил, что если у вас на экране несколько индикаторов, а ваше приложение хочет, чтобы пользователи быстро находили «лучшие» (самые близкие или самые дальние в зависимости от контекста), то наличие более сильного индикатора, представляющего более желательные состояния, поможет в этом отношении.

Лично я предпочитаю клин, с большей стороной справа, зеленым, когда он заполняется, и с более близким, являющимся большей стороной ( при условии, что цель ближе ), так как это напоминает мне знакомый и вездесущий сигнал сотового телефона метр (4 бара - это увлекательно, 1 - нет).

Я думаю, что вы должны сделать полосу одного цвета, а затем использовать значительный маркер, такой как стрелка или полоса другого цвета, идущая вертикально, чтобы показать относительное расстояние от начала слева и до конца справа. ( Изменить: я считаю, что официальным термином является ползунок)

Вот пример из игры, где значки персонажей используются в качестве маркера, и присутствует более одного маркера:

А вот более реалистичный пример:

Изменить: (немного оправдания для моего предложения)

Исходные версии, представленные в вопросе, слишком похожи на индикаторы выполнения, которые, как ожидается, будут представлять прогресс, а не расстояние. Если что-то, что похоже на индикатор выполнения (даже если он помечен), начинает двигаться назад, некоторые пользователи будут сбиты с толку, потому что это выглядит слишком неестественно и противоречит тому, что люди ожидают.

Имея одноцветную полосу с какой-либо формой маркера, маркер становится фокусом, и становится более естественным, что он может двигаться в любую сторону вдоль полосы. Добавление меток к этому также дает ощущение того, что происходит некоторая форма измерения (в данном случае расстояние).