x
 
Виктор Брылев
22 сентября 2008

Есть такая идея — местное редактирование данных: где смотрим, там и редактируем. Идея сначала была озвучена в одном из примеров JS-библиотеки script.aculo.us и развита в Rails-плагине SuperInplaceControls. Может быть, для других языков/фреймворков существуют аналоги, но я при описании буду опираться именно на этот плагин.

  • Сейчас это работает так:
  • 1) при создании страницы показывается текст со значением;
  • 2) при щелчке по значению текст заменяется на элемент или группу элементов, в которых можно отредактировать значение, кнопку OK и ссылку Cancel;
  • 3) при нажатии на кнопку или на ссылку текст отсылается аяксом на сервер, где сохраняется или откатывается к предыдущему значению. После обработки все эти элементы управления заменяются на текст со значением.

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

Сейчас мы (я и автор SuperInplaceControls) обсуждаем варианты улучшения плагина. Как вариант, мы обсуждаем клики по label для перехода в режим редактирования. В этом случае проблемы начинаются в случаях длинных описаний вместо коротких. Верстальщики, скорее всего, их поместят в p или span.

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

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

Что можете посоветовать? Какой из вариантов лучший, а про какие стоит забыть? До каких вариантов мы не додумались?



Идея редактировать на месте — отличная. Но текст на странице не должен себя так вести: у вас нельзя выделить фрагмент, т. к. клик по тексту будет интерпретирован иначе. Попробуйте выделить несколько значений в списке checkbox collection в демонстрационном примере.

Противоречие можно разрешить, чуть-чуть разнеся во времени и пространстве два несовместимых состояния. Пусть теперь желтая плашка редактирования появляется при наведении мыши, если зажата клавиша Ctrl. Это называется «псевдорежим»:

Но теперь появляется новая проблема: никто не узнает, что этот псевдорежим существует. Такая штука отлично подойдет тем, кто про нее знает, но не для массового зрителя.

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

Чтобы перейти в режим редактирования, нужно нажать на подсказку или на клавиши Ctrl+Enter. Выход из режима — клик по подсказке или Esc. Соответственно, отдельная кнопка отмены нам не нужна.

Пустые блоки в режиме редактирования стоит дополнительно подсветить.

Быстрое редактирование с зажатым Ctrl все равно должно работать, как подарок посвященным.


Поделиться
Отправить

Комментарии

Иван Неслуховский
22 сентября 2008

Что касается противоречия «ссылка должна вести на отдельную страницу» vs. «ссылка Cancel визуально противопоставляется кнопке», то решить его можно, установив ссылку с пунктирным подчеркиванием (такое подчеркивание обозначает: «это не ссылка, а элемент интерфейса, ведущий к моментальному изменению страницы без ее перезагрузки»). Такие ссылки широко используются для обозначения раскрывающихся меню, фильтров, закладок и проч.


22 сентября 2008

Считаю, что местное редактирование оправдывает себя, только если редактирование сложное, например, нужен набор контролов. В примере, который привел Артем, оно совершенно не нужно. Зачем же добавлять модальность, со всеми вытекающими проблемами, там, где ее так легко избежать? — Незачем.

Александр Цебро
22 сентября 2008

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

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

Юрий Хан
22 сентября 2008

Виктору Брылеву
Проблемы с пустым полем должны решаться назначением всем полям ширины через CSS.

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

А. Г.
Противоречие с выделением решается проще: пусть drag&drop не ведет к редактированию, а только простой клик.

Если уж мы делаем обычную модальность, то давайте по нажатию Ctrl+Enter или клику кнопки редактирования заменять вообще все значения на контролы и добавлять кнопки Save и Revert.


22 сентября 2008

Если автор SuperInplaceControls еще этого не сделал, то рекомендую ему ознакомиться с Inplace Editors от Developer Express, они уже давно занимаются этой проблемой и у них можно почерпнуть массу хороших идей.

Анатолий Rr Буров
22 сентября 2008

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


22 сентября 2008

Юрий, конечно же, формочку из примера автора лучше редактировать целиком. Идея подходит для страниц, состоящих из больших информационных блоков, как на Амазоне или в Википедии.

Посыпаю голову пеплом, оттого что не взял пример прямо оттуда.

Александр Цебро
23 сентября 2008

Похожий компонент есть в библиотеке JSF+AJAX компонентов RichFaces. Местное редактирование можно настроить там на двойной щелчок (по-моему, неплохо). Ссылка на демо: http://livedemo.exadel.com/…-demo/richfaces/inplaceInput.jsf?c=inplaceInput (http://livedemo.exadel.com/richfaces-demo/richfaces/inplaceInput.jsf?c=inplaceInput) (смотреть InplaceInput as table cell editor).

Только под технологию JSF+AJAX я нашел более десятка различных библиотек компонентов, распространяющихся как на коммерческой основе, так и в качестве проектов Open Sourсe. Вот ссылка на сводную таблицу: http://www.jsfmatrix.net

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

Виталий Ким
24 сентября 2008

Ссылки с пунктирным подчеркиванием называются «полуссылками».

Идея давно используется на фликере (flickr.com), страницу со своими фотографиями легко редактировать. На поле (точнее невидимую «ссылку» в нем) с пустым значением вы можете поставить стиль display:block, чтобы оно подсвечивалось целиком.

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

До тех пор, пока интерфейс не превратится во что-то такое же универсальное как, например, управление всем чем угодно через загадывание желания, профессия не испытает даже скрытой угрозы.


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

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

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Год назад запустил личный проект «Либретто опер» 2 Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 2




Недавно всплыло

1 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Как написать хорошее резюме? 7 Это какие‑то другие пиксели? Как они соотносятся? 2