Как я могу упростить свой интерфейс панели инструментов, когда список команд растет? [закрытый]
12 ответов
Я бы добавил больше ссылки, как это делает Google. Смотрите верхнюю панель Google с WeB Images Map Подробнее >>
К этому более >> вы можете добавить логику для добавления кнопки, менее часто используемой пользователем, или что-то в этом роде.
Вы можете сгруппировать их (например, две кнопки «vds») за одной кнопкой, при нажатии на которую открывается контекстное меню с отдельными значками.
А как насчет поля со списком и кнопки подтверждения? Или простое раскрывающееся меню?
Добавьте строку меню «Инструменты» или «Действия» и вставьте в меню крайние правые 4 команды (или более).
Иконки ужасны с точки зрения пользовательского опыта. Изображение гибкого диска не однозначно означает СОХРАНИТЬ. Это значит что-то делать с дискетой. Дискета на самом деле , ее 2010, СОХРАНИТЬ в веб-приложении означает сохранение на сервере, как дискета вообще вычисляет?
Вот приложение , у которого было то же самое чрезвычайно удобный интерфейс за 10 лет! И почти никаких изображений для кнопок, и это одно из самых производительных приложений в своей категории.
Вы знаете, что ЗНАЧКИ обозначают I ncomprehesible C ryptic O bfucsated N onsense S символ!
Также как интернационализировать значок?
Если вы читаете Джефа (и Азу) Раскин, вы, вероятно, поймете, что иконки также не являются хорошим решением - оба довольно громко заявляли о своей неприязни к ним (за очень немногими заметными исключениями). Во-первых, их даже сложнее нажать, чем крошечные кнопки, тогда их символы могут сбивать с толку, зависеть от культуры и вводить в заблуждение. Мы уже хорошо читаем текст, синтаксический анализ и интерпретация значков часто происходит медленнее.
В любом случае, эта панель кнопок выглядит так, как будто она подходит практически любому человеку и его собаке, которые могут использовать этот продукт. Вы могли иметь в виду некоторые конкретные сценарии при его создании, которые должны быть простыми и важными. Скорее всего не все кнопки нужны сразу для выполнения такой задачи.
Другое дело, что, возможно, не все кнопки даже полезны в каком-то одном состоянии приложения. Можете ли вы перейти на разные наборы кнопок, в зависимости от состояния. Однако это возможно только в том случае, если каждое государство четко определило, какие действия можно предпринять. Если все кнопки одинаково нажимаются независимо от состояния, это ничего не даст.
Группировка команд в соответствии со связанными функциями также может быть вариантом. Это не обязательно должно быть сделано с помощью идиом, подобных меню, вы также можете поместить их в контейнеры с другим цветом фона или даже раскрасить сами кнопки (однако не забывайте о дальтонизме). В зависимости от того, насколько связаны эти отдельные функции, это может быть хорошим способом ускорить взаимодействие. Пользователям может потребоваться некоторое обучение, чтобы знать, к чему относятся цвета, но для внутреннего инструмента, который используется только людьми, которых вы знаете (вместо произвольных случайных (что является проблемой, с которой Microsoft сталкивается довольно заметно)), это не должно создавать большая проблема.
Что если использовать иконки и текст?
Для общепонятных команд - используйте только иконку (например, сохранить). Для необычных команд используйте иконку + текст.
Если вы поместите рамку вокруг кнопки в целом, это хорошо свяжет иконки и текст вместе и покажет, что это все еще кнопка. Вы также можете сделать некоторые эффекты наведения.
Поскольку вы не можете сделать выпадающее меню (или аналогичные техники, такие как щелчок по кнопке для создания вторичного меню). Лучшее, что я могу придумать, это то, что сделал Прескотт, или показ области кнопок, сгруппированных таким образом, чтобы пользователю было легко понять, в каком разделе должна находиться его кнопка.
Я бы начал с изменения некоторых более длинных меток. Как минимум, «Загрузка приложения» может быть сокращено «Загрузка приложения». Какой еще (более короткий) способ сказать «Быстрая передача файлов»?
Вы также можете сгруппировать кнопки по вкладкам (т. Е. Сделать их лентой ). Это может работать особенно хорошо, если разные классы пользователей склонны использовать разные неперекрывающиеся наборы кнопок.
Можно ли реализовать «наиболее используемый» или «предпочтительный» набор кнопок (предпочтительно для пользователя, но глобально, если это необходимо) и кнопку, чтобы привести вас к остальным элементам, если вам нужен один из них?
Многочисленные опции:
Группировка и маркировка. При наличии более восьми команд следует разделить пункты меню на смысловые группы примерно по четыре, чтобы помочь пользователю найти нужную команду. Маркировка групп также помогает сканированию и может сделать меню более компактным. Например, вместо VDS Ping и VDS List, создайте группу с названием "VDS" с пунктами меню "Ping" и "List". У вас будет на одно слово меньше (два, если вы поместите метку над соответствующими пунктами меню при горизонтальной ориентации).
Нисходящие меню. Нильсен прав в том, что следует избегать использования выпадающего меню для создания команд. Однако он явно выступает за выпадающие меню, которые выглядят и ведут себя как менюбар в приложении толстого клиента (Нильсен называет их "командными" и "навигационными" меню). Я думаю, что вы обнаружите, что сейчас существует несколько выпадающих меню на Javascript, в отличие от 2000 года, когда Нильсен написал свой пост. В менюбаре можно разместить 100 команд.
Sidebar menu. Расположив пункты меню вертикально, вы сможете уместить 20 или более команд, и вам не придется сокращать названия команд до непонятных пользователю. Если этого недостаточно, рассмотрите вариант "банка меню", который сочетает в себе преимущества бокового меню и возможности выпадающего меню.
Ribbon. Если ваши команды соответствуют дискретным задачам, где пользователь склонен придерживаться одной задачи в течение некоторого времени, вы можете расположить кнопки на вкладке управления, с одним листом на задачу.
Command Overloading. Представьте объекты данных в виде выбираемых объектов в окне и замените команды на более общие операции, такие как "Сверлить", "Создать", "Копировать", "Переместить", "Удалить" и "Связать", которые можно применять к различным классам объектов, тем самым сокращая общее количество команд. Пользователь может выбрать один или несколько объектов данных, а затем выбрать нужную команду для действия над ними.
Атрибуты рабочей области. Некоторые из ваших команд могут не быть командами по настройкам или атрибутам. Удалите их из меню и представьте в виде объектов данных в рабочей области страницы (или другой страницы, если они редко используются) с помощью таких элементов управления, как радиокнопки, выпадающие списки и флажки. Это дает дополнительное преимущество, четко показывая пользователю текущую настройку, а также предоставляя возможность ее изменить.
Variants. Для внутреннего приложения у вас, вероятно, есть формальные роли и обязанности, которые зависят от должности. Включите должность пользователя в свою модель и динамически скрывайте команды (и другие элементы управления и страницы), которые не относятся к этой должности.
Похоже, что вы разрабатываете консоль администрирования, которая представляет свой пользовательский интерфейс через веб-страницу, а не то, что я бы количественно оценил как веб-приложение. Таким образом, особенно с учетом вашего заявления о том, что это приложение для внутреннего использования, совет Якоба Нильсона относительно плохого дизайна тегов
Для этого конкретного набора предположений, я думаю, что лучшим вариантом является для имитации настройки системного меню с использованием одного из множества возможных вариантов меню на основе CSS.