Пассивная защита от дурака

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



Что я понимаю под защитой от дурака? Это некоторые детали интерфейса, которые препятствуют случайному удалению информации, которое, естественно, приведет к потере данных, и нервных клеток пользователя.

Из предложения выше следует, что каждый из нас хоть раз оказывался в ситуации такого «дурака», случайно нажимал кнопки «Очистить», которые благодарные юзабилисты поместили рядом с кнопкой «Отправить», информация естественно после этого терялась, и вводить её заново было лень. Я уверен, были такие случаи в жизни каждого человека. Итак, приступим.

Этап первый. Проблематика

Давайте осмыслим самые популярные ошибки, которые допускают создатели сайтов. Разумеется они не садисты, просто не всегда руководствуются разумом во время создания своего детища.

1. Фокус курсора автоматически становится на кнопку отмены, удаления.
2. Кнопки удаления, отмены, стирания — находятся в подозрительной близости от главных элементов навигации (как-то: кнопки перехода на следующий шаг, полезные ссылки, др.)
3. Элементы приводящие к необратимым последствиям расположены так, чтобы мозолить пользователю глаза.
4. Действия приводящие к потере данных необратимы.

Этап второй. Решения

Во втором этапе стоит разобратся с этими проблемами, и решить — как их не допускать.

Итак: фокус.

Фокус штука очень важная. При заполнении формы, фокус при нажатии tab должен переходить на соседнее поле, и только после того, как все поля заполнены — на кнопку перехода на следующий этап. Ни в коем случае фокус не должен устанавливаться на кнопку отмены, удаления и т.п. В случае случайного нажатия пользователем на enter — ни в коем случае не должна произойти потеря информации, столь долго вводимая.

Сами кнопки отмены нужно располагать на некотором расстоянии от главенствующей кнопки, но в то же время в непосредственной связи с ней. В данном случае можно применить группировку по цвету, которую я описывал в заметке о формах. Еще, как вариант, можно (да и нужно) главную кнопку делать больше кнопки отмены где-то в 1,5-2 раза — тогда взгляд пользователя сам по себе ляжет на главную кнопку, а не на кнопку отмены. Также лучше всего применить разделение по цвету: лучше всего будет, если главенствующая кнопка будет ярче, насыщеннее, чем кнопка удаления. В идеале — кнопка удаления должна быть серой.

Лучше всего, если батоны (кнопки, ага) приводящие к последствиям, которые нельзя отменить располагать в далеке от пользовательского глаза, но в то же время, не так, чтобы пользователь её по надобности искал с факелом до скончания веков. Т.е. нужно располагать эту кнопку ВНЕ первого экрана (область в браузере, которая открывается сразу после загрузки страницы). Как положительный пример можно привести движок WordPress — у него кнопка удаления записи находится в самом низу, ненароком её не нажмешь никак.

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

Этап третий. Идейный

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

1. Кнопка удаления\отмены по умолчанию неактивна. Возле неё стоит чекбокс, при отмечании которого, кнопка активируется — очень, и очень перспективная и интуитивная идея, рекомендую воспользоваться в своих проектах.

2. Кнопка удаления\отмены по умолчанию неактивна. Возле неё не располагается никаких элементов, кроме текста примерно такого содержания: «Нажмите на кнопку, чтобы активировать её». Т.е. при первом нажатии кнопка активируется, а уже после этого — можно на неё клацать. Отсеиваются случайные нажатия, но особо одаренные люди могут и пролезть сквозь эту защиту.

3. Поставьте ссылку «удалить», при нажатии на которую удаления не происходит, но появляется соответсвующая кнопка. Опять же, исключает случайные клики в эту область.

4. Если в системе планируется разместить несколько функций помимо удаления, лучше всего создать выпадающий список с выбранным по умолчанию пунктом «выберите действие», которое, естественно, ни к чему не приводит. Рядом с выпадающим списком ставится еще кнопочка OK для защиты от случайного выбора.

Теперь о недостатках:

1. Если рядом с кнопкой стоит чекбокс, интуитивно понятно большинству, что этот чекбокс кнопку и активирует. К сожалению это понятно далеко не всем.

2. Без надписи довольно неясно, что делать. А, как известно, далеко не все люди читают подписи к элементам интерфейсов перед тем, как на них кликнуть.

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

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

Автор: Ярослав Бирзул (DezmASter).
Источник: Блог о юзабилити веб интерфейсов.
Изображение к посту: Дизайнфрик