Как я могу упростить интерфейс панели инструментов, когда список команд растет?

Я пишу веб-приложение для внутренних инструментов; На одной из центральных страниц этого инструмента есть целый ряд связанных команд, которые пользователь может выполнить, нажав одну из нескольких кнопок на странице, например:

панель инструментов http://img709.imageshack.us/img709/1928/commands.png

В идеале все кнопки должны располагаться на одной линии. Обычно я делал бы это, меняя каждый виджет с кнопки с (иногда длинной) текстовой меткой на простой, компактный значок - например,

кнопка с надписью " Сохранить " http://img337.imageshack.us/img337/773/saver.png

может быть заменен знакомым значком диска:

disk icon

К сожалению, я не думаю, что смогу сделать это для каждой кнопки на этой конкретной странице. Некоторые из командных кнопок просто не имеют хороших визуальных аналогов - "Список VDS". Или, если бы мне нужно было добавить еще одну кнопку в будущем для какого-то другого вида списка, мне понадобились бы две иконки, которые оба сообщают "список" и какой список. Итак, я все еще рассматриваю этот вариант, но мне это не нравится.

Поэтому пришло время добавить еще одну кнопку в этот раздел (разве вы не любите внутренние инструменты?). На этой единственной линии недостаточно места для новой кнопки. Помимо упомянутого мной решения для пиктограмм, что было бы хорошим * способом упростить/удалить/уменьшить или иным образом улучшить этот интерфейс?


* Что касается статьи Якоба Нильсена, я хотел бы думать, что выпадающее меню не является решением.


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

Ответ 1

alt text

Я бы добавил ссылку More Link Like Google. См. Верхнюю панель Google с изображениями WeB Карта Подробнее →

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

Ответ 2

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

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

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

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

Ответ 3

Что делать, если вы используете значки и текст?

Для общепринятых команд - используйте только значок (например, сохранение) Для необычных команд используйте значок + текст.

Если вы помещаете рамку вокруг кнопки в целом, она должна хорошо сочетать значки/текст и показывать ей еще одну кнопку. Вы также можете сделать некоторые зависания.

Ответ 4

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

Ответ 5

Я бы начал с изменения некоторых более длинных меток. Как минимум, "Загрузка приложения" может быть сокращена "Загрузка приложения". Какой еще (более короткий) способ сказать "Быстрая передача файлов"?

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

Ответ 6

Многочисленные опции:

  • Группировка и маркировка. Каждый раз, когда у вас более восьми команд, вы должны разделить пункты меню на семантические группы около четырех, чтобы помочь пользователю выполнить поиск команды, которую они хотят. Маркировка групп также помогает сканировать и может сделать меню более компактным. Например, вместо VDS Ping и VDS List, введите группу с надписью "VDS" с пунктами меню "Ping" и "List". У вас есть меньше слов, чтобы вписаться (два, если вы поместите метку над ее связанными элементами меню при использовании горизонтальной ориентации).

  • Пулдаун меню. Нильсен прав, чтобы избежать использования выпадающего меню для создания команд. Тем не менее, ГЭС явно выступает за раскрывающиеся меню, которые выглядят и ведут себя как меню в толстом клиентском приложении (Нильсен называет их "командами" и "навигационными" меню). Я думаю, вы обнаружите, что в настоящее время существует несколько раскрывающихся меню Javascript, в отличие от еще в 2000 году, когда Нильсен написал свой пост. Вы можете установить 100 команд в строке меню.

  • Меню боковой панели. Группировка элементов меню по вертикали, и вы должны соответствовать 20 или более командам, и вам не придется сокращать имена команд, чтобы пользователь мог не понимать. Если этого недостаточно, рассмотрите " банк меню", чем сочетает преимущества меню боковой панели с возможностью раскрывающегося меню.

  • Лента

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

  • Перегрузка команд. Представляйте свои объекты данных в качестве выбираемых объектов в своем окне и меняйте свои команды на более общие операции, такие как "Развертывание", "Создать", "Копировать", "Переместить", "Удалить" и "Ссылка", которые могут применяться к различным классам объектов, тем самым уменьшая общую сумму количество команд. Пользователь может выбрать один или несколько объектов данных, а затем выбрать нужную команду, чтобы действовать на них.

  • Атрибуты рабочей области. Некоторые из ваших команд могут не быть командами с помощью настроек или атрибутов. Удалите их из меню и представляйте их как объекты данных в рабочей области страницы (или другую страницу, если они используются редко), используя элементы управления, такие как переключатели, раскрывающиеся списки и флажки. Это дает дополнительное преимущество, которое ясно показывает пользователю текущую настройку, а также предоставляет средства для ее изменения.

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

Ответ 7

Как насчет кнопки со списком и подтверждения? Или просто выпадающее меню?

Ответ 8

Добавьте панель меню "Инструменты" или "Действия" и вставьте в себя самые правые 4 команды (или более) в меню.

Ответ 9

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

Ответ 10

Вы можете сгруппировать их (например, две кнопки "vds" ) за одной кнопкой, которая при нажатии вызывает контекстное меню с отдельными значками.

Ответ 11

Иконки ужасны с точки зрения пользователя. Изображение гибкого диска не имеет однозначного значения SAVE. Это означает что-то делать с гибким диском. Floppy действительно, ее 2010, SAVE в веб-приложении означает сохранение на сервере, как дискету даже вычисляет?

Вот приложение, которое имеет такой же чрезвычайно удобный интерфейс в течение 10 лет! И вряд ли какие-либо изображения для кнопок, и это одно из самых продуктивных приложений в своей категории.

Вы знаете, что означает ICONS для I ncomprehesible C ryptic O bfucsated N onsense S ymbol!

Также как вы интернационализируете значок?

Ответ 12

По-настоящему кажется, что вы разрабатываете консоль администрирования, которая, как представляется, представляет свой интерфейс пользователя через веб-страницу, а не то, что я бы оценил как веб-приложение. Как таковой, особенно с учетом вашего заявления о том, что это приложение для внутреннего использования, совет Якоба Нильсона относительно <select> теги, являющиеся плохим дизайном, не должны применяться.

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