Путаные флажки и переключатели

У меня возникла проблема с созданием определенного пользовательского интерфейса для веб-сайта. Я собираюсь продемонстрировать проблему с простым веб-сайтом для сети ресторанов:

Контекст

на веб-сайте много пользователей и множество ресторанов. В каждом ресторане есть определенные пользователи, которым он может быть либо менеджер, либо повар, либо официант.

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

Для каждого ресторана может быть только один менеджер, но как много поваров и официантов по желанию. Вот как выглядит пользовательский интерфейс на данный момент:

mockup

скачать источник bmml - каркасы созданный с помощью макетов Balsamiq

Проблема

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

Вопрос

Как вы поняли эту идею через интерфейс? «Идея» заключается в том, что в ресторане может быть только один менеджер, и каждый пользователь может иметь только одну роль.

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

EDIT: Есть более высокие роли, которые могут свободно изменять все три упомянутые роли.

Последний случай - это то, чего я пытаюсь избежать (Мэри).

 Изображение .

69 голосов | спросил H. Saleh 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 11:33:40 +0300 2017, 11:33:40

6 ответов


121

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

 Макет

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

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

Некоторые упражнения для читателя включают:

  1. Устранить неоднозначность, в которой в настоящее время выбрана роль.
  2. Отобразить информацию менеджера (телефон, адрес электронной почты, ...)
  3. Сделать операции изменения данных более преднамеренными, чем просто изменять выпадающий список или переключать
ответил Tristan Shelton 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 15:28:41 +0300 2017, 15:28:41
106

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

Официант /шеф-повар - это радио-кнопки, поэтому только один из них может быть активным одновременно - и только один человек может быть менеджером и ничего другого.

 Пример для менеджера с кнопкой

ответил Falco 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 18:55:48 +0300 2017, 18:55:48
21

Это похоже на задачу группировки пользователей.

Оба эти примера имеют приятное свойство, что вы можете распечатать аналогичный вид для отображения на кухне. У вас также нет дублированного /избыточного текста Cook /Waiter по всему пользовательскому интерфейсу, поэтому я считаю, что читать и понимать, кто работает с кем-то, легче читать.

Стиль тегов

Аналогично тому, как вы добавляете теги в вопрос с Stack Exchange.

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

<h3> Стиль меню </h3>

<p> Я принял редактирование меню WordPress как базовую концепцию для имитации иерархии. </p>

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

ответил icc97 26 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 26 Sep 2017 17:17:25 +0300 2017, 17:17:25
13

Используйте это - Это более высокий ролевой взгляд.

По мнению менеджера, у менеджера не будет комбинированного поля для его /ее роли.
Представление двух других будет простым текстом - никаких комбинированных ящиков.

mockup

скачать источник bmml - каркасы созданный с помощью макетов Balsamiq

ответил DPS 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 13:34:42 +0300 2017, 13:34:42
4

Из того, что я вижу, все они должны быть радиокнопками (используйте лучший интервал для разделения каждого пользователя и связанных с ним переключателей).
Вопрос, в вашей голове, должен быть:
Кто такой Алиса? Является ли она (â € ¢) менеджером, () Cook или () официантом?
Кто такой Боб? Является ли он () менеджером, (â € ¢) Cook или () официантом?
и др.

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

ответил Armands 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 25 Sep 2017 12:38:01 +0300 2017, 12:38:01
0

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

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

ответил Vadivel 15 FriEurope/Moscow2017-12-15T10:58:45+03:00Europe/Moscow12bEurope/MoscowFri, 15 Dec 2017 10:58:45 +0300 2017, 10:58:45

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

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

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