В настоящее время у меня есть таблица, которая показывает строку для каждой созданной пользователем формы. Для некоторых пользователей это будет только 1 или 2 элемента. Для других у них будет 40-50.

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

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

Вот как выглядит таблица: Обзор таблицы

Как видите, наиболее распространенные действия отображаются справа от каждой строки, максимум до 4. Однако при наведении курсора на гиперссылку появляется еще одно меню:

Row mouseover (Изначально мы скопировали эту идею из Sharepoint)

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

Row menu

Как видите, вариантов намного больше, чем мы могли показать в правой колонке «Параметры».


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

Table Header Button

При нажатии на эту кнопку появляется следующее меню:

Table Menu

(Изначально мы использовали кнопку, потому что если вы нажмете на сам заголовок, он прибегает к помощи)


Как упоминалось ранее, теперь мы знаем, что это был ужасный выбор, особенно первый пример. Пользователям постоянно не удавалось открыть для себя эту функциональность, и у нас есть опытные ветераны с 4-летним опытом работы с сайтом, которые не знают, что эти кнопки есть. Явно надо менять.

Однако:

  • Мы почти уверены, что список ВСЕХ опций, просто сброшенных в правую колонку, не является ответом. (На самом деле мы раньше так делали, и многие на это жаловались)
  • Таблица занимает практически всю горизонтальную ширину экрана пользователей, поэтому размещение элементов слева/справа от таблицы не сработает.
  • Для многих пользователей таблицы могут быть длинными, поэтому размещение элементов вверху/внизу таблицы также не сработает.
  • Мы также хотели бы улучшить удобство использования для планшетов, где маленькие тесные ссылки плохи, а «зависание» невозможно.

Ребята, у вас есть предложения, как улучшить один или оба этих опыта?

Благодарность!

17
Kristiyan Lukanov 10 Июн 2016 в 15:22
P.S. Это веб-страница, а не родное приложение.
 – 
DOOManiac
5 Окт 2012 в 17:14

6 ответов

Лучший ответ

Вы могли бы действовать следующим образом:

  1. Попробуйте уменьшить ширину отдельных столбцов. Таким образом, вы выигрываете пространство.
  2. Переместите контекстное меню полностью вправо, чтобы все действия были под одним капотом.
  3. Пересмотрите свои действия. Расставьте приоритеты и сгруппируйте их и соответствующим образом исправьте макет.

И подробно:

Относительно 1. Например, описание столбца не обязательно должно быть таким же широким, как самое длинное слово в столбце. Вы можете ввести разрыв строки, если превышена определенная ширина. Эта статья дает некоторые идеи для разработки таблиц данных в веб-приложениях . Кроме того, возможно, вы найдете более компактное представление столбца «Завершено».

Относительно 2. и 3.: Судя по количеству доступных действий, я делаю вывод, что ваша таблица используется очень интерактивно. Я не знаю вашего контекста, но я предполагаю, что пользователь обычно тратит некоторое время на передачу выбранной записи, отправку, редактирование и т.д. Возможно, в этом случае уместны расширяемые строки (см. ссылки ниже).

Спросите себя: какие действия самые важные и наиболее часто используемые? Эти действия должны отображаться первыми (например, может быть, «передача/отправка вложений pronk» на самом деле используется чаще, чем «pdf» или «заметки»).

Дальнейшее вдохновение вы можете получить здесь: Статья на UXMatters.com

Идеи для встроенного редактирования: статья на сайте designingwebinterfaces.com

Идеи для расширяемых строк и меню действий: jankoatwarpspeed.com

11
Anna Prenzel 4 Окт 2012 в 00:35
Много отличных ссылок, спасибо. Что касается заказа, он определенно может быть немного изменен. Мне также нравится идея, о которой упоминали другие, по-прежнему отображать, но отключать ненужные параметры меню. Думаю, это придаст большей согласованности меню. Что касается того, чтобы сделать столбцы более тонкими, перенос слов в описании просто меняет горизонтальные ненужные элементы на вертикальные — и вводит пробелы во всех остальных столбцах. Мы также не можем объединить столбцы в более красивое сочетание, потому что здесь очень часто используется сортировка...
 – 
DOOManiac
4 Окт 2012 в 01:57
1
Одна проблема, которую мы обнаружили во время исследований пользователей с элементами управления справа, заключается в том, что основной идентификатор строки обычно находится слева, поэтому пользователям приходится отслеживать мышь/глаза слева направо, чтобы убедиться, что они сопоставляют элементы управления с правым значком.
 – 
Anna Rouben
26 Авг 2016 в 00:10

Что касается 4 популярных действий, которые у вас есть в столбце «Параметры»:

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

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

5
talkol 4 Окт 2012 в 13:06

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

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

Обновить

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

Судя по всему, это приложение используется опытными пользователями; с точки зрения книги Алана Купера О лице, суверенном< /a> приложение, в котором может быть полезно обеспечить большую мощность за счет некоторой сложности.

1
Bevan 4 Окт 2012 в 10:56
Я бы беспокоился, что пользователи не будут знать, что они должны «выбрать» строку, тем более что это механика, которую мы никогда раньше не использовали. Итак, если просто посмотреть на это, может показаться, что для строки нет доступных опций... Хм...
 – 
DOOManiac
3 Окт 2012 в 17:09

Что касается действий со строками (Редактировать/Проверить/PDF/Примечания), я предлагаю следующий подход:

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

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

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

Это основные шаги. В дополнение к альтернативному параллельному потоку рассмотрите следующее:

  1. Добавьте возможность выбора строки. Выбранную строку можно пометить, выделив ее, или окрасив ее границу в другой цвет (например, в синий). Посмотрите, как Excel помечает текущую выделенную ячейку.

  2. Одна из строк (и только одна) всегда должна быть выбрана всегда. По умолчанию вы можете выбрать первую строку. Всякий раз, когда пользователь щелкает другую строку (где угодно, любую ячейку, передний план, фон и т. д.), эта строка должна стать выбранной строкой. Единственный способ отменить выбор строки — выбрать другую.

  3. Добавьте меню окна верхнего уровня (там, где в Windows находится «Справка окна редактирования файла») под названием «Форма», которое будет содержать действия, относящиеся к текущей выбранной строке. Это меню всегда будет активным, так как всегда должна быть выбрана какая-либо строка. Это меню должно быть идентично контекстному меню.

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

1
talkol 4 Окт 2012 в 13:01
1
Мы ничего не делаем с правой кнопкой мыши, поэтому я не уверен, откуда вы это взяли. Лично я ненавижу, когда какая-либо страница переопределяет мой щелчок правой кнопкой мыши, а у меня Firefox не разрешает это...
 – 
DOOManiac
4 Окт 2012 в 00:27
2
Кроме того, подавляющее большинство пользователей не будут думать о том, чтобы щелкнуть что-либо правой кнопкой мыши, потому что это то, что вы просто не делаете в Интернете. И это ничего не делает для улучшения доступности планшетов...
 – 
DOOManiac
4 Окт 2012 в 00:36
Хм... из вашего вопроса не было ясно, что это веб-приложение. На скриншотах пользовательский интерфейс кажется родным — элемент управления сеткой с расширяемыми строками. Что касается щелчка правой кнопкой мыши, поскольку я предположил, что он родной, вы написали «клики пользователя на фоне», поэтому я предположил, что щелкнул правой кнопкой мыши. Неплохо бы уточнить вопрос
 – 
talkol
4 Окт 2012 в 12:46
Извини за это. Под фоном я имел в виду заполнение ячейки (часть без гиперссылки). Считаю комплиментом, что скриншоты заставили вас поверить, что это нативное приложение. :)
 – 
DOOManiac
5 Окт 2012 в 17:15

@talkol прав!

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

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

Если вы опасаетесь выбора строки, то, по крайней мере, дайте строке, находящейся под курсором, немного другой цвет фона, чтобы убедить пользователя в том, на какой элемент будут воздействовать действия. Рассмотрите возможность использования намеренияHover вместо простых событий наведения. Этот плагин задерживает действия наведения на несколько миллисекунд, чтобы пользователи могли перемещать указатель по строкам таблицы без визуального шума быстрого выделения и затемнения.

0
Juan Lanus 3 Окт 2012 в 23:49
Я рассматривал панель инструментов, похожую на G-mail, в верхней части таблицы, но я не хочу, чтобы пользователям приходилось беспокоиться о выборе строки до того, как параметры появятся в сети. Это также создает ложное впечатление, что вы можете выбрать более одной строки за раз и выполнить действие. Другие области сайта ДЕЙСТВИТЕЛЬНО позволяют вам выполнять действия над несколькими строками, поэтому было бы странно видеть похожий макет с двумя разными поведениями.
 – 
DOOManiac
4 Окт 2012 в 00:33
Из артефактов gmail я упомянул только кнопку [больше V], выпадающее меню. Я не думаю, что панель инструментов — хороший вариант, потому что она выглядит как-то отсоединенной от строк таблицы. Это будет выглядеть как связанное со всей таблицей, а не с одной строкой. Google решает эту проблему, изменяя панель инструментов при выборе строки.
 – 
Juan Lanus
5 Окт 2012 в 00:10

Интересное обсуждение. Вот ряд мыслей:

Параметры сетки: — Добавить кнопку «Инструменты» /wrench/grid над сеткой справа: она должна содержать действия с самой сеткой, а не информацию, относящуюся к строке. - Удалите такие элементы, как «Экспорт в Excel», из заголовка Rt Click (который в настоящее время представляет собой синюю кнопку со стрелкой вниз) и поместите в это новое меню. - Включите такие параметры, как включение фильтров (хотя предполагается, что это более явный и легко переключаемый элемент, возможно, оставить опцию включенной в сетке, по крайней мере, по умолчанию и предоставить возможность отключить)

Контекстное меню (правый клик внутри ячейки)

  • Предлагайте не наводить курсор мыши на каждую ячейку - это шум, если кто-то оставляет там курсор на ячейке. Один из способов помочь в обучении кривая — это всплывающее окно, которое пользователь может закрыть один раз или каждый раз, когда пользователь входит в эту сетку - дает подсказку типа "Знаете ли вы, что можете отредактировать свой отчет, щелкнув правой кнопкой мыши по строке?» и дать ссылку на помощь.

  • Добавляйте в меню разделы/разделительные линии и группируйте по схожим действиям - это делает его легче усваивается

  • Удалите столбец «Параметры», разместите элементы в этом контекстном меню. Добавить
    кнопки над сеткой, разделяющие параметры, например, редактирование
    кнопка; рассмотрите возможность разделения кнопки для дополнительных параметров редактирования в этом, например, «Редактировать запись» [использовать нетехническое имя]. Другие варианты Кнопки "Добавить/Просмотреть/Открыть" – это
    дает пользователю больше визуальных возможностей для вариантов в сетке.

И еще несколько вопросов: это похоже на древовидную сетку — применяются ли действия родительского уровня к дочерним строкам?

Имеются ли в настоящее время параметры, связанные со статусом или информацией в столбце «Завершено»? Если да, то подумайте, как появляются опции в контекстном меню - отключено?

Надеюсь, это полезно. Сетки — такие мощные опции, но именно из-за этого может быть сложно сделать взаимодействие с ними понятным.

0
Leslie M 4 Окт 2012 в 00:43