Как лучше показать «вес» (важность) пуленевых предметов неинтрузивным (творческим) способом?

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

Изображение с маркированным списком

  • Один из способов - показать маленькие бары влево /вправо от элемента, масштабированного по его весу. Затем он будет выглядеть как гистограмма сверху донизу, причем каждый элемент добавляется (или добавляется) с помощью «бара». Это было воспринято как навязчивое и тревожное, поэтому было консервировано.
  • Другой способ - «заполнить поля» (по горизонтали) величиной, пропорциональной весу. Однако наличие такого фона оказалось слишком резким для пользователя. Тем более, что каждый элемент имеет разную высоту, восприятие не было однородным. Даже если бы мы сделали это вертикально, как заполнение ведра, это было не так уж хорошо.
  • Более тонкая версия: иметь верхнюю (или нижнюю) границу, окрашенную пропорционально весу. Но это привело к запутыванию с тех пор, как пользователи не смогли понять, к какому предмету относится граница, и, как правило, неправильно истолковывают его для элемента выше (или ниже).
  

Вопрос: Какой был бы самый неинтрузивный, но творческий способ   визуально отображать вес каждого элемента на месте, пока отображается список? (Это нормально, если числа видны, но только номера неприемлемы)

Есть ли какие-либо визуализации, на которые я могу /должен смотреть, чтобы получить некоторые идеи? Любые указатели, предложения, скриншоты будут оценены. Если любое значение, это тяжелый интерфейс Javascript /Jquery + CSS.

ОБНОВЛЕНИЕ . Я, вероятно, собираюсь использовать комбинацию термометров (например, индикатор выполнения, например, вещи :) через верхние границы списков с пулями (каждый элемент имеет только верхнюю границу. На графике выше были все границы, чтобы показать отклонения в размерах). Я предполагаю, что это будет выглядеть аккуратно, и я смогу опубликовать готовую версию, когда закончите. Я, таким образом, буду представлять собой смесь /комбинацию того, что @Jay и @Beat перечислены в их сообщениях. Я принимаю один из ответов ради полноты, но оба вместе помогают лучше ответить на мой вопрос.

12 голосов | спросил PhD 11 J000000Wednesday12 2012, 09:28:18

5 ответов


15

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

Однако это не невозможно. Этот эксперимент, названный эластичными списками , является отличным примером нескольких идей.

Упругие списки

Получить код: ссылка Github для эластичных списков

Это версия колоколов и свистов. Высота представляет вес переменной (например, количество результатов). Затенение представляет пропорцию по сравнению с глобальным распределением (т. Е. Выше, чем ожидалось, учитывая выбранные состояния). Его легче увидеть на практике. Сроки искры видят изменение с течением времени.

Помните, что это может быть показано только с высотой линии для более простого эффекта. Насколько сложный вы будете зависеть от контекста. Пример только отклонения по вертикали линии см. В этом демо для поиска статей в NY Times .

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

Список стилей термометра

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

Этот пример имеет диаграмму, подобную подходу с цветом добавлено для акцента.

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

Популярные упорядоченные списки

EDIT: я нашел многострочный пример в Forbes.

Ссылки Forbes

ответил Jay 11 J000000Wednesday12 2012, 13:37:49
3

Трудно ответить на этот вопрос, не зная, как выглядит общий стиль вашей страницы /контекста. Однако у меня есть

Простое предложение

Я бы предложил сочетание горизонтальной прокладки и непрозрачности, как этот (приблизительный эскиз):

непрозрачность и горизонтальное заполнение

Я оставил числа только для объяснения. Это будет работать без них. Вы можете добавить эффект mouseover к зависающему элементу, увеличивая его непрозрачность, потому что очевидно, что элемент, который пользователь наводит, всегда является самым важным.

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

Другие стили

Вы можете сделать такое же взвешивание элементов с помощью:

  • насыщенность цвета
  • толщина подчеркивания: Пример EDIT

введите описание изображения здесь>> </p>

<ul>
<li> сила (фильтра) эффектов: EDIT Пример </li>
</ul>
<p> <img src =

ответил Beat Richartz 11 J000000Wednesday12 2012, 14:16:25
2

Использование высоты строки является проблематичным ИМО, поскольку пользователь не может надежно сравнивать их (например, она легко сравнивает длину уложенных строк):

Если 2-я и 5-я строки имеют вес 3 и 4 соответственно, пользователю будет сложно различаться из-за расстояния между строками (если высота не значительно отличается).

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

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

введите описание изображения здесь>> </p>

<p> Я уверен, что вы просто просто указали упорядоченную информацию. Это позволит вам использовать даже линейные высоты, как в примере Джей, так как близость каждого из них делает их сопоставимыми. Но это, вероятно, не вариант. </p></body></html>

ответил Dan Barak 11 J000000Wednesday12 2012, 14:10:54
1

Почему бы вам не применить подход с облаком тегов?

Поддерживайте формат списка, но увеличивайте размер шрифта (или толщину /жирный шрифт) в зависимости от важности элемента.

ответил jpsstavares 11 J000000Wednesday12 2012, 20:40:10
0

Я не видел, чтобы кто-нибудь предлагал использовать отступы ...

менее важные (меньший вес) имеют больший отступ.

Это позволяет прямое сравнение по лево-правой плоскости.

ответил kruchkamgar 27 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 27 Sep 2013 03:56:53 +0400 2013, 03:56:53

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132