В связи с тем, что моя довольно простая, но удобная идея с защитой от удаления ненароком собрала множество положительных отзывов, я решил серьезно обдумать проблему «защиты от дурака». В принципе, тема довольно интересная, и не избита множеством блоггеров, поэтому должна быть полезной большинству моих читателей.
Что я понимаю под защитой от дурака? Это некоторые детали интерфейса, которые препятствуют случайному удалению информации, которое, естественно, приведет к потере данных, и нервных клеток пользователя.
Из предложения выше следует, что каждый из нас хоть раз оказывался в ситуации такого «дурака», случайно нажимал кнопки «Очистить», которые благодарные юзабилисты поместили рядом с кнопкой «Отправить», информация естественно после этого терялась, и вводить её заново было лень. Я уверен, были такие случаи в жизни каждого человека. Итак, приступим.
Автор: Ярослав Бирзул (DezmASter).
Источник: Блог о юзабилити веб интерфейсов.
Изображение к посту: Дизайнфрик
Что я понимаю под защитой от дурака? Это некоторые детали интерфейса, которые препятствуют случайному удалению информации, которое, естественно, приведет к потере данных, и нервных клеток пользователя.
Из предложения выше следует, что каждый из нас хоть раз оказывался в ситуации такого «дурака», случайно нажимал кнопки «Очистить», которые благодарные юзабилисты поместили рядом с кнопкой «Отправить», информация естественно после этого терялась, и вводить её заново было лень. Я уверен, были такие случаи в жизни каждого человека. Итак, приступим.
Этап первый. Проблематика
Давайте осмыслим самые популярные ошибки, которые допускают создатели сайтов. Разумеется ��ни не садисты, просто не всегда руководствуются разумом во время создания своего детища.
- Фокус курсора автоматически становится на кнопку отмены, удаления.
- Кнопки удаления, отмены, стирания — находятся в подозрительной близости от главных элементов навигации (как-то: кнопки перехода на следующий шаг, полезные ссылки, др.)
- Элементы приводящие к необратимым последствиям расположены так, чтобы мозолить пользователю глаза.
- Действия приводящие к потере данных необратимы.
Этап второй. Решения
Во втором этапе стоит разобратся с этими проблемами, и решить — как их не допускать.
Итак: фокус.
Фокус штука очень важная. При заполнении формы, фокус при нажатии tab должен переходить на соседнее поле, и только после того, как все поля заполнены — на кнопку перехода на следующий этап. Ни в коем случае фокус не должен устанавливаться на кнопку отмены, удаления и т.п. В случае случайного нажатия пользователем на enter — ни в коем случае не должна произойти потеря информации, столь долго вводимая.
Сами кнопки отмены нужно располагать на некотором расстоянии от главенствующей кнопки, но в то же время в непосредственной связи с ней. В данном случае можно применить группировку по цвету, которую я описывал в заметке о формах. Еще, как вариант, можно (да и нужно) главную кнопку делать больше кнопки отмены где-то в 1,5-2 раза — тогда взгляд пользователя сам по себе ляжет на главную кнопку, а не на кнопку отмены. Также лучше всего применить разделение по цвету: лучше всего будет, если главенствующая кнопка будет ярче, насыщеннее, чем кнопка удаления. В идеале — кнопка удаления должна быть серой.
Лучше всего, если батоны (кнопки, ага) приводящие к последствиям, которые нельзя отменить располагать в далеке от пользовательского глаза, но в то же время, не так, чтобы пользователь её по надобности искал с факелом до скончания веков. Т.е. нужно располагать эту кнопку ВНЕ первого экрана (область в браузере, которая открывается сразу после загрузки страницы). Как положительный пример можно привести движок WordPress — у него кнопка удаления записи находится в самом низу, ненароком её не нажмешь никак.
В идеале — все действия пользователя можно отменить. Но практика, как всегда, весьма и весьма далека от идеала, поэтому нужно принимать во внимания 3 вышеперечисленных пункта.
Этап третий. Идейный
Этому этапу я посвятил больше всего своего внимания — в нем я опишу несколько идей, которые помогут защититься от не нарочных действий пользователя.
1. Кнопка удаления\отмены по умолчанию неактивна. Возле неё стоит чекбокс, при отмечании которого, кнопка активируется — очень, и очень перспективная и интуитивная идея, рекомендую воспользоваться в своих проектах.
2. Кнопка удаления\отмены по умолчанию неактивна. Возле неё не располагается никаких элементов, кроме текста примерно такого содержания: «Нажмите на кнопку, чтобы активировать её». Т.е. при первом нажатии кнопка активируется, а уже после этого — можно на неё клацать. Отсеиваются случайные нажатия, но особо одаренные люди могут и пролезть сквозь эту защиту.
3. Поставьте ссылку «удалить», при нажатии на которую удаления не происходит, но появляется соответсвующая кнопка. Опять же, исключает случайные клики в эту область.
4. Если в системе планируется разместить несколько функций помимо удаления, лучше всего создать выпадающий список с выбранным по умолчанию пунктом «выберите действие», которое, естественно, ни к чему не приводит. Рядом с выпадающим списком ставится еще кнопочка OK для защиты от случайного выбора.
Теперь о недостатках:
1. Если рядом с кнопкой стоит чекбокс, интуитивно понятно большинству, что этот чекбокс кнопку и активирует. К сожалению это понятно далеко не всем.
2. Без надписи довольно неясно, что делать. А, как известно, далеко не все люди читают подписи к элементам интерфейсов перед тем, как на них кликнуть.
3. Минусов практически нет, кроме раздражения особо впечатлительных личностей, для которых сделать лишний клик для своего же блага — хуже чем пипиську потерять.
4. Монструозная защита, которая однако предполагает целых три клика, далеко не каждая аудитория поддержит данное решение: гики будут недовольны, а простые юзеры сразу не поймут. Нужно искать компромисс среди вышеперечисленных.
Автор: Ярослав Бирзул (DezmASter).
Источник: Блог о юзабилити веб интерфейсов.
Изображение к посту: Дизайнфрик
