Давно известна польза от меньшего количества кликов в интерфейсе. Резать ненужные взаимодействия и упрощать оставшиеся — одно из самых приятных занятий при проектировании. Не всегда получается сделать это сразу, но после нескольких ревью и обсуждений получившегося интерфейса приходит просветление. Хотя бывает, что сперва психологически сложно спроектировать функциональность в упрощенном виде. И только взгляд через некоторое время дает отнестись к урезанию легче.
Степень возможного упрощения по большей части зависит от трех вещей. Во-первых, критичности операции. Насколько опасна потеря или получение неверных данных при том, что система не будет постоянно одергивать пользователя? Во-вторых, сложности в реализации. Готов ли разработчик потратить на “разгрузку” интерфейса больше сил? Ведь в более-менее крупных системах снятие нагрузки с пользователя — это перенос ее на систему. Третьим пунктом можно указать важность для бизнеса. Например, для внутреннего исследования важно, чтобы посетитель сайта заполнил при регистрации на сайте дополнительную форму. И хотя самому пользователю важность этих лишних 10 полей неочевидна, отказаться от них нельзя.
Вот, например, стандартная проблема — делать или нет подтверждение удаления. Большинство людей это прерывание работы раздражает и через некоторое время “ok” нажимается уже на автомате. Дурацкий диалог можно убрать, если “прикрыть тылы” — обеспечить возможность восстановления. Причем корзины или папки “Удаленные” недостаточно — неплохо бы тут же дать возможность отменить операцию. На скриншоте справа пример такого интерфейса. При нажатии на ссылку “удалить” сообщение стирается, но до ухода со страницы пользователь может восстановить его. А если сообщения маловажные или служебные — например, “Василий Иванов добавил вас в друзья” — можно обойтись и без корзины.
Или форма регистрации в интернет-магазине. Часто в ней нужно заполнить с десяток, а то и больше полей. Куда лучше оставить здесь два-три поля ввода, а остальное перенести в процесс оформления заказа. На скриншотах слева — как раз такой пример. Один раз заполнив персональные данные при оформлении заказа, в следующий раз пользователь увидит их уже подставленными в форму — они сохраняются в профиле. Хотя ничто не мешает ему изменить эту информацию и на странице личного кабинета.
Кстати, при упрощении формы регистрации есть психологический барьер. Сейчас на многих сайтах этот процесс максимально упрощен — кое-где вообще нужно ввести только email. Но если сделать в этой форме меньше 3х полей, она становится либо визуально похожей на форму логина, либо начинается долгий процесс получения сгенерированного системой пароля по почте. Который сложно запомнить и потому он часто сразу меняется, так что упрощение выходит мнимое.
Отличный пример борьбы безопасности и удобства — секретные коды или CAPTCHA. Многие из них трудночитаемы даже для людей с нормальным зрением. В идеале, конечно, лучше вообще обойтись без них и найти другие способы фильтровать спамеров. Но идеал далек и не всегда реализуем, а злопыхатели всегда начеку. В одном из проектов мы старались максимально облегчить и процесс регистрации. Пользоваться сервисом почти в полной мере можно и без нее, но создание аккаунта здорово облегчает процесс. Поставить “угадайку” на регистрацию — значит, отпугнуть какую-то часть пользователей. Обойтись без нее — открыть сервис для атак одного из конкурентов, который и в офлайне всячески показывает недружелюбность.
Первоначальный вариант — показывать логотип портала и просить указать с помощью двух групп радио-кнопок, какого цвета он сам и его фон — не совсем подошел (обидим дальтоников). А его производная — две картинки и две группы радио-кнопок, в которых нужно указать, что на картинке — вполне приемлема. Если варианта выбора в каждой группе 3, то робот случайным перебором может угадать комбинацию в (1/3) * (1/3) * 100% = 11,1% случаев. Если добавить по варианту выбора сверху, жизнь роботов станет сложнее еще на 4,9%. Возможно, есть минус в том что такое исполнение не очень привычно. Зато такая CAPTCHA и читается легче легкого, и для роботов не так проста.
Часто лишние действия в интерфейсе объясняются некой требуемой безопасностью. Но в итоге они отпугивают больше людей, чем спасают от потери информации. Которая на деле, оказывается, была не так уж и важна. Так что если стоит выбор между разными вариантами интерфейсных решений, для нахождения правильного можно воспользоваться примерно такой табличкой:
| Безопасность | Простота разработки | Важность для бизнеса | |
|---|---|---|---|
| Идеальная | ? | ? | ? |
| Наилучшая | ? | ? | ? |
| Высокая | ? | ? | ? |
| Достаточная | ? | ? | ? |
Тогда выбор между этими двумя вариантами будет гораздо очевиднее:
| Идеальный | Достаточный |
|---|---|
 |
 |
39 comments
Судя по скриншотам, это магазин. А так ли важно для магазина отсеивать ботов? Предположим зарегистрировали они миллион аккаунтов, чего тут страшного?
Кстати, Юр, функцию “Удалится при следующем заходе на страницу” хорошо объяснять пользователям более подробно – в виде прямой подсказки с текстом. Иначе возникает ощущение, что удаление состоит из перевода блока в полупрозрачное состояние.
Алексей,
Здесь скриншоты из нескольких проектов — статья обзорная, не об одной конкретной системе. В магазине дополнительная защита в интерфейсе и вправду не нужна, а вот для портала с большой посещаемостью — очень даже.
donor,
В общем-то да, смысл есть. Лучше всего вывести мини-справку в одно предложение под заголовком письма. Скоро проект уйдет в тестирование и там все эти мелочи вскроются и решатся 🙂
Касательно предложенной формы регистрации. На сколько я знаю, смешение типов контролов (с клавиатурным и мышечным вводами) не очень хорошо. В этом разрезе, вероятно, поля ввода будут, все-таки, лучше? Вроде “Введите ’25’:”. Кроме того, все поля отмечены красными звездочками, в то время как легенда отсутствует (что эти звездочки означают?). Наверно, проще написать, что все поля обязательны для заполнения. И не совсем согласен с идеальностью варианта окна программы для дефрагментации. Такое количество контролов лучше, наверно, выносить либо на отдельную вкладку, либо на отдельную форму.
rusblaze,
Есть спорный момент про смешение разных типов контролов, поэтому форму мы еще будем тестировать. Тут вопрос что хуже — переключение типа ввода или плохочитаемый текст. Потому что если нужно вводить “25” — опять встает проблема искажения символов, чтобы роботы не распознали. Поэтому опять же, нужно провести тест.
По поводу обязательных полей — обычно пишется, но в форме регистрации из 3х полей это не нужно. Я просто забыл убрать сами звездочки.
По поводу страницы дефрагментации — так это как раз пародия 🙂 Там ведь имелся в виду идеальный с точки зрения безопасности и функциональности случай. Но часто вполне хватает и “достаточного”.
re:
> Есть спорный момент про смешение разных типов контролов, поэтому форму мы еще будем тестировать. Тут вопрос что хуже — переключение типа ввода или плохочитаемый текст. Потому что если нужно вводить “25″ — опять встает проблема искажения символов, чтобы роботы не распознали. Поэтому опять же, нужно провести тест.
а для переключателей разве не нужно текст искажать? робот тогда легко сможет выбрать правильный переключатель.
=>
текст искажать нужно всегда, а вот то что людям придется переходить с клавы на мышку (тратя при этом время) и при этом роботу становится проще угадать – это факт.
так что лучше уж стандартные поля ввода капчи.
Не по теме:
Знаете, считаю высочайшем провалом, то что блог пишущий о юзабилити сам неюзабилен. Читать блог болят глаза..
Шрифт побольше бы, и картинки бы вставлять по красивее, а не как бедных родственников.
President,
А если текст в варианте выбора окружить тегами, часть из которых принимается, а часть — фальшивка? Например: <span id=”X1″>2</span><span id=”X2″>7</span><span id=”X3″>5</span>. Человек увидит 25, а робот?
Ну и опять, же про переключение режимов ввода — без тестирования сложно сказать. О переходе с клавиатуры на мышку речь идет, если человек переходит между полями с помощью кнопки TAB. А если он выбирает их мышкой? Таких ведь пользователей немало.
Alexsas,
Да, сапожник без сапог — выбран стандартный шаблон чтобы как можно скорее стартовать блог. В ближайшие дни запускается сайт моего отдела, а после этого и блогом займусь. Хотя большая часть людей читает меня через RSS, где все выглядит очень пристойно 🙂
Сделали вариант CAPTCHA простым текстом для некоторых своих проектов. Читается легко, а спамеры похоже не ожидают такой шутки
прохожий,
То есть именно текст в HTML? Отличное решение, нужно испытать 🙂
ИМХО такая капча (с радиокнопками) легко ломается обычным брутфорсом. То есть робот просто засабмитит все варианты радиокнопок, и с одним из вариантов точно угадает.
Glader,
Да, робот может проскочить — но вероятность-то маленькая (в статье как раз подсчитано). Хотя в комментарии прохожего есть куда лучшая идея, будем пробовать ее.
“Да, робот может проскочить — но вероятность-то маленькая (в статье как раз подсчитано). ”
Еще раз. Если робот на одну капчу пошлет 9 запросов (все комбинации), очевидно, что в одном из случаев он угадает. Именно поэтому количество возможных вариантов должно быть неограниченным (или очень большим).
“Хотя в комментарии прохожего есть куда лучшая идея, будем пробовать ее.”
С капчами все очень просто 🙂 Если бьют по площадям, достаточно, чтобы капча отличалась от самых распространенных (хотя бы и простым текстом). Если стараются заспамить именно ваш сайт (целенаправленно), никакая капча не поможет. Поэтому выдумывать что-то особое смысла нету.
Glader,
Детально обсудил с коллегами — да, вы правы 🙂 Оставим привычную картинку с замутненным текстом, а два набора радиокнопок и голый текст останутся в банке возможных решений на будущее 🙂
Да уж воистину – если с умом к делу подойти то все будет и удобно и клево и будет нравится и пользователю и вааще… Кароче я как раз башку ломаю над двумя проектами – нифига не получается – ваша статейка как раз в руку… Спасибо
zuk,
Все верно — главное все взвесить и понять, для кого мы делаем продукт. Тогда он получится не абстрактно хорошим, а конкретно удобным 🙂 Надеюсь, у вас все пойдет здорово как раз 🙂
А сколько у вас вариантов картинок? Если мало, то написать распознаватель под ваш сайт будет просто. 11 проц. многовато, а пользователю неудобно делать выбор два раза.
Настоятельно советую почитать Раскина на тему интерфейсов. В его книге (сейчас название не вспомню) приводятся примеры _количественной_ оценки качества. Поищите в интернет-магазинах и купите. Реально полезная книга.
Eugene,
Благодаря комментариям уже взвесили все за и против, решили все-таки вернуться к стандартной картинке 🙂
Геннадий,
Раскина я читал, с количественными анализами знаком. Этот материал — обзорный, об основном принципе “зачем делать 100 кнопок, если у аппарата только две функции”, а немного в сторону более подробного анализа можно почитать в этой статье.
Вообще вариант, с радиокнопками не так плох. Его можно обезопасить и так, что будет приниматься только попытка на угадывание, в ошибочном случае условия (изображения, варианты ответов) меняются. Т.е. брут как-бы и не пройдет
Но даже если вероятность прохода будет 11%, то это слишком большая вероятность. Представьте, что спам-боты регистрируются втихую в течение 4-х суток с двух серверов) Втихую, чтоб ddos был незаметен. Пару тысяч в течение пару дней накапает)
Как вариант идентификации пользователя я бы возложил на операции осуществляемые пользователем. Пользователь же по странице мышкой двигает, клавишами стучит так и можно слать запросы втихую на сервер, что по такой сессии работает пользователь. А чтобы хитрые спамеры, которым совсем въелся ваш сайт не взяли и синтерпретировали действия js-окружения страницы – можно запрограммировать самоизменяемое js-окружение. Упрощенно, раз в сутки скрипт окружения изменяет параметры посылки, урлы, механизмы ответов, как у вирусов ) Вот такую защиту пройти уже сложнее) Программируется такая защита один раз, а вот пользы от нее проектов на 10 хватит)
Проблема спамеров сильно упрощается, как только мы заставляем их думать, расшифровывать алгоритмы, отслеживать куки, сессии, параметры – это, поверьте, убивает всякое желание на спам.
Из жизни, проекты, которые сложнее всего заспамить, обычно имеют ajax-проверку пользователя, написанную “ужасным и нечитабельным кодом”, с нарушением всех правил “хорошего кода”. Такой детский прием убивает всякое желание;)
Извините за такой развернутый коммент, конечно, мысль растеклась по древу. Основа моей мысли – нужно брать на вооружение приемы защиты ПО из мира software, спамеры к ним еще не готовы
“Такой детский прием убивает всякое желание;)”
И заодно отсекает посетителей с отключенным JS
Вы знаете, я бы поступил бы как в любом RIA, для пользователей с отключенным JS-обрезанный функционал.
Насчёт того как сделать aurwb. отмены удаления можно посмотреть как это реализованно у гугл почты.
Gisma,
Защита через скрипты не очень подходит — как верно подметили, они могут быть отключены у пользователя. После долгих рассуждений мы все-таки решили вернуться к обычной капче. Единственное — сделать ее визуально читаемой и исключить похожие символы (например, “S” и “8”).
>Давно известна польза от меньшего количества кликов в интерфейсе.
Хм…
Все примеры представленные в посте можно было легко, представить в полном размере или немного изменив размер изображения, или при подготовке скриншотов уменьшить ширину параграфов с выступающими строками (с FireBug это секунда), или просто обрезать их по ширине колонки блога. Но нет юзабили не затронуло блог автора столь правильной статьи, и скриншоты нужно просматривать в отдельном окне (+3 клика на каждый).
Можно попробовать вот эту CAPTCHA-у http://research.microsoft.com/asirra/ правда она в стадии беты. Переключение на мышь, не очень большая проблема, многие кнопку “Зарегистрироваться” жмут мышкой, и абсолютно любому пользователю, придется перейти на мышку после подтверждения формы, нечего страшного если это придется сделать чуть раньше, главное чтобы не было текстовых полей уже после того как пользователю пришлось перейти на мышку.
А вообще, капча при регистрации, не столь уж и раздражающий элемент, проблемой она становиться, когда ее нужно часто вводить, к примеру, в форме комментариев блога.
Насчет сапожника без сапог.
Стандартную тему долго поправить? Я вот пока тут читал, нажал в Stylish “создать стиль для этого блога”, посмотрел в FireBug, что тут к чему написал.
.entry .postcontent, .commentlist { font-size:1.05em!important; line-height:1.4em!important; color:#111 !important;}
.entry .postcontent p {line-height:1.5em!important;}
Все можно нормально читать, неужели долго это вставить в конце css?
>Евгений
стандартную тему не трудно настроить, но не каждый обладает знаниями в области CSS и не каждый захочет разбираться в шаблонах какой-либо системы.
Евгений,
Дизайн блога я в любом случае буду обновлять — в первую очередь не устраивает оформление материалов. Но свободного времени на это как обычно нет, да и в самом начале я сделал правильный выбор — сперва начал создавать контент, а уж потом занялся шаблоном. На прошлой неделе я наконец-то запустил сайт моего отдела — http://www.uimodeling.ru, так что теперь займусь блогом.
А за совет с дополнением к коду спасибо — попробую применить 🙂
Александр,
Все верно 🙂 Если бы это было для меня делом пяти минут — давно бы причесал верстку.
Ну тогда сорри, иногда лучше жевать 🙂
На http://www.uimodeling.ru карта сайта понравилась, не встречал еще таких, но если курсор в поле поиска то просвечивается сквозь карту, не критично, конечно, но бросается в глаза. Со шрифтами, на мой вкус, глаз и монитор, перемельчили, особенно плохо читается описание компании белым на зеленом, в полоске под меню. А на страничке http://www.uimodeling.ru/clients-and-case-studies/ буква “и” наполовину залезла, под блок “Клиенты и проекты” (у меня FF2).
Евгений,
Спасибо за комменатрии! Там отчасти ситуация такая же как с блогом — нужно было как можно скорее запустить 🙂 В ближайший месяц дизайн причешется окончательно и там, и тут. А в дальнейшие ближайшие месяцы появится еще один суб-проект — на этот год у нас большие планы 🙂
1. > Но если сделать в этой форме меньше 3х полей, она становится либо визуально похожей на форму логина, либо начинается долгий процесс получения сгенерированного системой пароля по почте.
Эта проблема уже решена. Используем два поля:
введите свою почту
введите пароль
2. по поводу CAPTCHA. Ваше решение уже достаточно прокомментировали, добавить нечего. Относительно кривых цифр и букв тоже есть некоторое ограничение -их часто не разбирают даже люди с идеальным зрением.
придумано оригинальное решение – отображать простую картинку, например, слона и попросить пользователя ввести в поле то, что он видит на картинке.
sternina,
По поводу формы регистрации — у вас ведь все равно остается два поля 🙂 Частый случай — форма регистрации, а сбоку страницы — форма логина. Если они имеют одинаковое количество полей (т.е. 2), получается путаница.
Спасибо, статья хорошая и полезная 😉
Правда немного общо 😉
ЗЫ а шрифт на сайте нельзя ли сделать покрупнее? уж трудно читается ;Р
Спасибо, Юрий..
как всегда было приятно прочесть вашу статью и подумать над новыми идеями для реализации интерфесов.
Может что и используем .. 🙂