Как создать редактор отношений N:N на веб-странице?

Мне нужно создать небольшое веб-приложение «кто что делает» для маршрутизации входящих писем:

  • относительно длинный список (около 600 наименований) сотрудников;
  • есть краткий список (около 5 пунктов) задач;
  • при постановке задачи сотруднику обязательно указывается срок ее выполнения;

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

  • Джон Смит - написать ответное письмо - 20.01.2010
  • Фредерика Минозо - обзор входящего письма - 18.01.2010
  • Роберт Гир - обзор входящего письма - 18.01.2010

Если бы у нас было, скажем, 10 сотрудников, дизайн был бы довольно простым — выпадающий список сотрудников, выпадающий список задач, выбор даты для срока, кнопка «Добавить в список». Вот так http://naivist.net/tmp/layout.jpg
И, конечно же, Я бы добавил список результатов с кнопками "вверх"/"вниз" помимо него.
Однако выпадающий список из 600 элементов явно слишком велик; это значит, что какой-то поиск пользователя по имени, фамилии, отделу должен иметь место.

Я достаточно квалифицирован, чтобы технически создать приложение (JavaScript, jQuery и ajax-запросы мои друзья), но проблема в том, как спроектировать интерфейс веб-формы, чтобы пользователи понимали, что именно они делают? Как раскладывать предметы по форме? Что показать в начале, что скрыть?

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

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

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


javascript user-interface forms input
person naivists    schedule 11.01.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как только я увидел проблему, я подумал об AutoComplete. Поскольку вы думали так же, это, вероятно, очевидное решение проблемы. Поле «Кому» в электронных письмах имеет ту же проблему — как выбрать этого человека из 1000 контактов.

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

Так как задание содержит 5 элементов, допустимы выпадающие списки. Рекомендуемый верхний предел для раскрывающихся списков составляет 7 элементов, поэтому вы находитесь в пределах ограничения. Одним из предложений было бы заканчивать задачи словами "by" или "on", чтобы строка читалась как предложение - Джон Доу пишет ответное письмо 01.02.2010. Кроме того, добавление небольшого наглядного пособия в раскрывающийся список может улучшить понимание в некоторых ситуациях.

person DavGarcia    schedule 11.01.2010
comment
спасибо за ссылку, я слышал о расширениях YUI, но никогда не знал, что есть и хорошая документация ;-) Я подумаю о том, чтобы использовать автозаполнение. - person naivists; 15.01.2010

arrow_upward
2
arrow_downward

Начну с того, что не уверен, что согласен с нестандартной интерфейсной частью. Я предполагаю, что это зависит от того, кем на самом деле являются пользователи, но я бы определенно сказал, что такие функции текстового поля/автоматического поиска становятся очень стандартными от форм бронирования авиабилетов до поисковых систем.

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

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

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

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

person Matti Lyra    schedule 11.01.2010