Home > javascript, usability, web, перевод, программирование > Функция отмены последнего действия (Undo) – это просто (Часть 1)

Функция отмены последнего действия (Undo) – это просто (Часть 1)

September 24th, 2007 Leave a comment Go to comments

Я почитываю материалы по многим темам Internet, в том числе и по usability. А тут попалась на глазуа статья, как делать отмену последнего действия под Web. Стало интересно – решил переводить.

Как пользователи, мы делаем ошибки. Как дизайнеры, мы должны спроектировать интерфейсы с учётом этого, как я и утверждал в своей недавней статье Never Use a Warning When You Mean Undo ( перевод этой статьи – Реализуйте возможность отмены действия, вместо диалогов подтверждения ). Undo – это отличный спасательный круг, придающий потрясающее чувство надёжности работы интерфейса. Вот почему каждое десктопное приложение от Word до Photoshop предоставляет возможность многоуровневой отмены действия.

Так почему же Web-приложения которые предоставляют хоть какую-либо возможность отмены так немногочисленны? Ответ я часто получал, что эту функцию трудно реализовать.Я здесь, чтобы сказать вам, что это не так.

В этой серии записей в блоге, моя цель объяснить как легко реализовать функциональность отмены действия. Недавно, я дал предварительный вариант этой заметки на семинаре. После показа демо того, как может работать отмена, аудитория слегка привстала со своих мест. Когда же я открыл исходный код и начал показывать как это реализовано, универсальный возглас был: “Зачем Вы объясняете это? Это же всем понятно. Мы же разработчики ПО. Это легко!”

То-то же!

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

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

Метод 1: Очередь событий

Ситуация: Вы сделали онлайновый to-do список и пользователя нужна возможность удалить любую сущность со списка. Вы не хотите, чтобы пользователь удалил сущность случайно, также вы не хотите чтобы он изменил своё мнение после удаления или через 2 секунды. Этот метод теперь реализован в Интернете через уведомление пользователю диалоговым окном.

  • Deleting a to-do item in highrise requires the use of a warning.
  • Даже 37 Signals, обычно оплот хорошего дизайна, использует уведомление вместо отмены действия.

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

Попробуйте поработать со списком to-do со стандартным (но не очень гуманным) окном предупреждения.

Теперь представим, что мы изменили своё мнение о удалении чего-либо или хотите удалить 3 строчки. Как бы расстраивает, не так ли?

Правильно решение функции отмены, которое мы можем осуществить здесь имеет очередь событий и вызов “onUnload”. Когда мы нажимаем на удаление, to-do сущность исчезает. В общем, в этой точке мы должны будем отправить AJAX-запрос на сервер, чтобы удалить её. Когда пишем Undo, вместо немедленного вызова AJAX, мы ждём пока пользователь уйдёт с текущей страницы (это мы определяем, используя вызов “onUnload”). Это достигается путём добавления ссылки на to-do в очередь для безопасного сохранения.

Когда пользователь нажимает на Undo, мы достаём последнюю добавленную в очередь и делаем её видимой опять. Когда же пользователь уходит со страницы или закрывает её, вызывается метод “onUnload”. На данном этапе мы получаем собитие с очереди и отправляем AJAX-запрос о удалении списка.

Одним с больших преимуществ метода с очередью событий в том, что это делает реализацию многоуровневой отмены задачей очень тривиальной. И это также даёт безболезненное удаление списка to-do кучей (чего нет, когда удаление происходит с сообщением). Попробуйте!

Исходный код

Заинтриговало? Хотите знать больше? Хорошо. Вот и задокументированный исходный код.

Предупреждение

Метод очереди событий в реализации функции отмены не идеален:

  • Если браузер пользователя или компьютер вызовет ошибку, тогда работа пользователя потеряется. Это явно не оптимальный расклад..С другой стороны,это редкое явление и можно смело игнорировать все, кроме жизни и смерти
    важных данных.
  • Работа в реальном времени не работает в этом методе, потому что данные не отправляются серверу пока пользователь не уйдёт со страницы. Таким образом, другие пользователи не увидят изменений в реальном времени. Другие методы
    реализации Undo обходят даную проблему, но надо ждать другую заметку с этой серии.
  • Этот метод не целесообразно использовать для отправки emails или других срочных действий. Потому что действие будет завершено только тогда, когда пользователь покинет страницу, а это может растянуться на полчаса или час пока email будет отправлено. Это неприемлемо.

Вывод

Как Вы видите, Undo не слишком трудоёмкое занятие. Метод очереди событий можно даже сделать полностью на клиентской стороне, что означает, что вы можете реализовать отмену даже без изменений “back end”.

Итак, больше никаких отговорок по-поводу сложности реализации функции отмены последнего действия! Пришла пора Undo в web!

На следующей неделе я покажу, как сделать Отмену для срочных действий.

Перевод статьи Undo Made Easy with Ajax (Part 1)