Организация большого количества данных в результатах поиска

Question

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

Существует ли шаблон проектирования для привлекательного отображения множества описательных полей с каждым результатом поиска?

(Пожалуйста, не говорите мне просто удалить некоторые поля из результатов; это не вариант для этого проекта.)

Answer 1

Очевидно, что есть много способов справиться с этим, и в некоторой степени это является фактором ваших способностей и предпочтений в области дизайна информации.

Природные группировки данных

То, что я хотел бы сделать, это попытаться упорядочить ваши данные в небольшое количество «корзин». Вы утверждаете, что данные слишком разнородны, чтобы их можно было объединить в предложение, но, скорее всего, вы можете создать несколько логических групп. Поскольку мы не можем увидеть все ваши данные, я предполагаю, что у вас есть информация о человеке (электронная почта, имя, идентификатор?), О каком-то событии (даты? Тип?) Или, возможно, о каком-либо объекте, связанном с человеку (приказы? классы?). Чем бы они ни были, некоторые данные будут более тесно связаны друг с другом, чем другие.

Проектирование кусками

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

Использование сетки

Теперь, когда у вас есть небольшое количество «пластин», вернитесь к сеточному подходу для общего дизайна строки результатов поиска. Расположите листы как ряды в ряду и не забудьте выровнять их. Следование общей сетке (таблица HTML или иным образом) для тарелок позволит избежать проблемы «информационного супа». У вас будут чистые столбцы, которые хорошо сканируются, и понятная, естественная информационная иерархия. Пример естественного языка, который вы цитируете, будет действительно трудно разобрать, если бы он был одной из многих строк, отображаемых в таблице результатов поиска.

Последовательность

Обязательно используйте общий «словарь дизайна», когда вы работаете над кусками - согласованное оформление надписей, согласованный интервал ... поэтому, когда все отображается, несмотря на объем информации, все кажется, что оно является частью одной семьи.

Это интересное дизайнерское упражнение. Множество композиций, много итераций и мозгового штурма должны привести вас туда, где вам нужно.

Answer 2

Вероятно, это зависит от отображаемого вами контента. Посмотрите на макет StackOverflow для этого вопроса. Имеет Голосов , Заголовок , Описание , Теги , Автор и т. Д. Содержание не будет работать хорошо в сетке точно, и при этом это не течет хорошо самостоятельно.

Я думаю, пришло время проявить творческий подход;)

Answer 3

Никто никогда не задумывается о том, как это будет выглядеть на их экране, не так ли?

Одна вещь, которую вы можете сделать, это обрезать отображаемый текст, а затем отобразить развернутую версию во всплывающей подсказке или после того, как пользователь нажмет на нее.

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

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

Для длинных описаний вы можете отобразить только первые несколько символов, за которыми следует многоточие или слово «Дополнительно». Затем отобразите полный текст при наведении курсора или при нажатии.

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