Обзор приемов проектирования. Достаточный интерфейс против всеохватывающего

Давно известна польза от меньшего количества кликов в интерфейсе. Резать ненужные взаимодействия и упрощать оставшиеся — одно из самых приятных занятий при проектировании. Не всегда получается сделать это сразу, но после нескольких ревью и обсуждений получившегося интерфейса приходит просветление. Хотя бывает, что сперва психологически сложно спроектировать функциональность в упрощенном виде. И только взгляд через некоторое время дает отнестись к урезанию легче.

Степень возможного упрощения по большей части зависит от трех вещей. Во-первых, критичности операции. Насколько опасна потеря или получение неверных данных при том, что система не будет постоянно одергивать пользователя? Во-вторых, сложности в реализации. Готов ли разработчик потратить на “разгрузку” интерфейса больше сил? Ведь в более-менее крупных системах снятие нагрузки с пользователя — это перенос ее на систему. Третьим пунктом можно указать важность для бизнеса. Например, для внутреннего исследования важно, чтобы посетитель сайта заполнил при регистрации на сайте дополнительную форму. И хотя самому пользователю важность этих лишних 10 полей неочевидна, отказаться от них нельзя.

Удаление входящих сообщений в BFM ProjectВот, например, стандартная проблема — делать или нет подтверждение удаления. Большинство людей это прерывание работы раздражает и через некоторое время “ok” нажимается уже на автомате. Дурацкий диалог можно убрать, если “прикрыть тылы” — обеспечить возможность восстановления. Причем корзины или папки “Удаленные” недостаточно — неплохо бы тут же дать возможность отменить операцию. На скриншоте справа пример такого интерфейса. При нажатии на ссылку “удалить” сообщение стирается, но до ухода со страницы пользователь может восстановить его. А если сообщения маловажные или служебные — например, “Василий Иванов добавил вас в друзья” — можно обойтись и без корзины.

Оформление заказа на сайте SitronicsИли форма регистрации в интернет-магазине. Часто в ней нужно заполнить с десяток, а то и больше полей. Куда лучше оставить здесь два-три поля ввода, а остальное перенести в процесс оформления заказа. На скриншотах слева — как раз такой пример. Один раз заполнив персональные данные при оформлении заказа, в следующий раз пользователь увидит их уже подставленными в форму — они сохраняются в профиле. Хотя ничто не мешает ему изменить эту информацию и на странице личного кабинета.

Регистрация на сайте SitronicsКстати, при упрощении формы регистрации есть психологический барьер. Сейчас на многих сайтах этот процесс максимально упрощен — кое-где вообще нужно ввести только email. Но если сделать в этой форме меньше 3х полей, она становится либо визуально похожей на форму логина, либо начинается долгий процесс получения сгенерированного системой пароля по почте. Который сложно запомнить и потому он часто сразу меняется, так что упрощение выходит мнимое.

Отличный пример борьбы безопасности и удобства — секретные коды или CAPTCHA. Многие из них трудночитаемы даже для людей с нормальным зрением. В идеале, конечно, лучше вообще обойтись без них и найти другие способы фильтровать спамеров. Но идеал далек и не всегда реализуем, а злопыхатели всегда начеку. В одном из проектов мы старались максимально облегчить и процесс регистрации. Пользоваться сервисом почти в полной мере можно и без нее, но создание аккаунта здорово облегчает процесс. Поставить “угадайку” на регистрацию — значит, отпугнуть какую-то часть пользователей. Обойтись без нее — открыть сервис для атак одного из конкурентов, который и в офлайне всячески показывает недружелюбность.

CAPTCHA на странице регистрации в BFM ProjectПервоначальный вариант — показывать логотип портала и просить указать с помощью двух групп радио-кнопок, какого цвета он сам и его фон — не совсем подошел (обидим дальтоников). А его производная — две картинки и две группы радио-кнопок, в которых нужно указать, что на картинке — вполне приемлема. Если варианта выбора в каждой группе 3, то робот случайным перебором может угадать комбинацию в (1/3) * (1/3) * 100% = 11,1% случаев. Если добавить по варианту выбора сверху, жизнь роботов станет сложнее еще на 4,9%. Возможно, есть минус в том что такое исполнение не очень привычно. Зато такая CAPTCHA и читается легче легкого, и для роботов не так проста.

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

Безопасность Простота разработки Важность для бизнеса
Идеальная ? ? ?
Наилучшая ? ? ?
Высокая ? ? ?
Достаточная ? ? ?

Тогда выбор между этими двумя вариантами будет гораздо очевиднее: 

Идеальный Достаточный
Интерфейс абстрактной программы дефрагментации, функциональный вариант Интерфейс абстрактной программы дефрагментации, дружественный интерфейс

39 Comments Обзор приемов проектирования. Достаточный интерфейс против всеохватывающего

  1. Алексей

    Судя по скриншотам, это магазин. А так ли важно для магазина отсеивать ботов? Предположим зарегистрировали они миллион аккаунтов, чего тут страшного?

    Reply
  2. donor

    Кстати, Юр, функцию “Удалится при следующем заходе на страницу” хорошо объяснять пользователям более подробно – в виде прямой подсказки с текстом. Иначе возникает ощущение, что удаление состоит из перевода блока в полупрозрачное состояние.

    Reply
  3. Juras Vetrau

    Алексей,

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

    Reply
  4. Juras Vetrau

    donor,

    В общем-то да, смысл есть. Лучше всего вывести мини-справку в одно предложение под заголовком письма. Скоро проект уйдет в тестирование и там все эти мелочи вскроются и решатся 🙂

    Reply
  5. rusblaze

    Касательно предложенной формы регистрации. На сколько я знаю, смешение типов контролов (с клавиатурным и мышечным вводами) не очень хорошо. В этом разрезе, вероятно, поля ввода будут, все-таки, лучше? Вроде “Введите ’25’:”. Кроме того, все поля отмечены красными звездочками, в то время как легенда отсутствует (что эти звездочки означают?). Наверно, проще написать, что все поля обязательны для заполнения. И не совсем согласен с идеальностью варианта окна программы для дефрагментации. Такое количество контролов лучше, наверно, выносить либо на отдельную вкладку, либо на отдельную форму.

    Reply
  6. Juras Vetrau

    rusblaze,

    Есть спорный момент про смешение разных типов контролов, поэтому форму мы еще будем тестировать. Тут вопрос что хуже — переключение типа ввода или плохочитаемый текст. Потому что если нужно вводить “25” — опять встает проблема искажения символов, чтобы роботы не распознали. Поэтому опять же, нужно провести тест.

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

    По поводу страницы дефрагментации — так это как раз пародия 🙂 Там ведь имелся в виду идеальный с точки зрения безопасности и функциональности случай. Но часто вполне хватает и “достаточного”.

    Reply
  7. President

    re:
    > Есть спорный момент про смешение разных типов контролов, поэтому форму мы еще будем тестировать. Тут вопрос что хуже — переключение типа ввода или плохочитаемый текст. Потому что если нужно вводить “25″ — опять встает проблема искажения символов, чтобы роботы не распознали. Поэтому опять же, нужно провести тест.

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

    Reply
  8. Alexsas

    Не по теме:

    Знаете, считаю высочайшем провалом, то что блог пишущий о юзабилити сам неюзабилен. Читать блог болят глаза..
    Шрифт побольше бы, и картинки бы вставлять по красивее, а не как бедных родственников.

    Reply
  9. Juras Vetrau

    President,

    А если текст в варианте выбора окружить тегами, часть из которых принимается, а часть — фальшивка? Например: <span id=”X1″>2</span><span id=”X2″>7</span><span id=”X3″>5</span>. Человек увидит 25, а робот?

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

    Reply
  10. Juras Vetrau

    Alexsas,

    Да, сапожник без сапог — выбран стандартный шаблон чтобы как можно скорее стартовать блог. В ближайшие дни запускается сайт моего отдела, а после этого и блогом займусь. Хотя большая часть людей читает меня через RSS, где все выглядит очень пристойно 🙂

    Reply
  11. прохожий

    Сделали вариант CAPTCHA простым текстом для некоторых своих проектов. Читается легко, а спамеры похоже не ожидают такой шутки

    Reply
  12. Glader

    ИМХО такая капча (с радиокнопками) легко ломается обычным брутфорсом. То есть робот просто засабмитит все варианты радиокнопок, и с одним из вариантов точно угадает.

    Reply
  13. Juras Vetrau

    Glader,

    Да, робот может проскочить — но вероятность-то маленькая (в статье как раз подсчитано). Хотя в комментарии прохожего есть куда лучшая идея, будем пробовать ее.

    Reply
  14. Glader

    “Да, робот может проскочить — но вероятность-то маленькая (в статье как раз подсчитано). ”
    Еще раз. Если робот на одну капчу пошлет 9 запросов (все комбинации), очевидно, что в одном из случаев он угадает. Именно поэтому количество возможных вариантов должно быть неограниченным (или очень большим).

    “Хотя в комментарии прохожего есть куда лучшая идея, будем пробовать ее.”
    С капчами все очень просто 🙂 Если бьют по площадям, достаточно, чтобы капча отличалась от самых распространенных (хотя бы и простым текстом). Если стараются заспамить именно ваш сайт (целенаправленно), никакая капча не поможет. Поэтому выдумывать что-то особое смысла нету.

    Reply
  15. Juras Vetrau

    Glader,

    Детально обсудил с коллегами — да, вы правы 🙂 Оставим привычную картинку с замутненным текстом, а два набора радиокнопок и голый текст останутся в банке возможных решений на будущее 🙂

    Reply
  16. zuk

    Да уж воистину – если с умом к делу подойти то все будет и удобно и клево и будет нравится и пользователю и вааще… Кароче я как раз башку ломаю над двумя проектами – нифига не получается – ваша статейка как раз в руку… Спасибо

    Reply
  17. Juras Vetrau

    zuk,

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

    Reply
  18. Eugene

    А сколько у вас вариантов картинок? Если мало, то написать распознаватель под ваш сайт будет просто. 11 проц. многовато, а пользователю неудобно делать выбор два раза.

    Reply
  19. Геннадий

    Настоятельно советую почитать Раскина на тему интерфейсов. В его книге (сейчас название не вспомню) приводятся примеры _количественной_ оценки качества. Поищите в интернет-магазинах и купите. Реально полезная книга.

    Reply
  20. Juras Vetrau

    Eugene,

    Благодаря комментариям уже взвесили все за и против, решили все-таки вернуться к стандартной картинке 🙂

    Reply
  21. Juras Vetrau

    Геннадий,

    Раскина я читал, с количественными анализами знаком. Этот материал — обзорный, об основном принципе “зачем делать 100 кнопок, если у аппарата только две функции”, а немного в сторону более подробного анализа можно почитать в этой статье.

    Reply
  22. Gisma

    Вообще вариант, с радиокнопками не так плох. Его можно обезопасить и так, что будет приниматься только попытка на угадывание, в ошибочном случае условия (изображения, варианты ответов) меняются. Т.е. брут как-бы и не пройдет
    Но даже если вероятность прохода будет 11%, то это слишком большая вероятность. Представьте, что спам-боты регистрируются втихую в течение 4-х суток с двух серверов) Втихую, чтоб ddos был незаметен. Пару тысяч в течение пару дней накапает)

    Как вариант идентификации пользователя я бы возложил на операции осуществляемые пользователем. Пользователь же по странице мышкой двигает, клавишами стучит так и можно слать запросы втихую на сервер, что по такой сессии работает пользователь. А чтобы хитрые спамеры, которым совсем въелся ваш сайт не взяли и синтерпретировали действия js-окружения страницы – можно запрограммировать самоизменяемое js-окружение. Упрощенно, раз в сутки скрипт окружения изменяет параметры посылки, урлы, механизмы ответов, как у вирусов ) Вот такую защиту пройти уже сложнее) Программируется такая защита один раз, а вот пользы от нее проектов на 10 хватит)
    Проблема спамеров сильно упрощается, как только мы заставляем их думать, расшифровывать алгоритмы, отслеживать куки, сессии, параметры – это, поверьте, убивает всякое желание на спам.
    Из жизни, проекты, которые сложнее всего заспамить, обычно имеют ajax-проверку пользователя, написанную “ужасным и нечитабельным кодом”, с нарушением всех правил “хорошего кода”. Такой детский прием убивает всякое желание;)
    Извините за такой развернутый коммент, конечно, мысль растеклась по древу. Основа моей мысли – нужно брать на вооружение приемы защиты ПО из мира software, спамеры к ним еще не готовы

    Reply
  23. Glader

    “Такой детский прием убивает всякое желание;)”
    И заодно отсекает посетителей с отключенным JS

    Reply
  24. Gisma

    Вы знаете, я бы поступил бы как в любом RIA, для пользователей с отключенным JS-обрезанный функционал.

    Reply
  25. xes

    Насчёт того как сделать aurwb. отмены удаления можно посмотреть как это реализованно у гугл почты.

    Reply
  26. Juras Vetrau

    Gisma,

    Защита через скрипты не очень подходит — как верно подметили, они могут быть отключены у пользователя. После долгих рассуждений мы все-таки решили вернуться к обычной капче. Единственное — сделать ее визуально читаемой и исключить похожие символы (например, “S” и “8”).

    Reply
  27. Евгений

    >Давно известна польза от меньшего количества кликов в интерфейсе.
    Хм…
    Все примеры представленные в посте можно было легко, представить в полном размере или немного изменив размер изображения, или при подготовке скриншотов уменьшить ширину параграфов с выступающими строками (с 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?

    Reply
  28. Александр Реушкин

    >Евгений
    стандартную тему не трудно настроить, но не каждый обладает знаниями в области CSS и не каждый захочет разбираться в шаблонах какой-либо системы.

    Reply
  29. Juras Vetrau

    Евгений,

    Дизайн блога я в любом случае буду обновлять — в первую очередь не устраивает оформление материалов. Но свободного времени на это как обычно нет, да и в самом начале я сделал правильный выбор — сперва начал создавать контент, а уж потом занялся шаблоном. На прошлой неделе я наконец-то запустил сайт моего отдела — http://www.uimodeling.ru, так что теперь займусь блогом.

    А за совет с дополнением к коду спасибо — попробую применить 🙂

    Reply
  30. Juras Vetrau

    Александр,

    Все верно 🙂 Если бы это было для меня делом пяти минут — давно бы причесал верстку.

    Reply
  31. Евгений

    Ну тогда сорри, иногда лучше жевать 🙂

    На http://www.uimodeling.ru карта сайта понравилась, не встречал еще таких, но если курсор в поле поиска то просвечивается сквозь карту, не критично, конечно, но бросается в глаза. Со шрифтами, на мой вкус, глаз и монитор, перемельчили, особенно плохо читается описание компании белым на зеленом, в полоске под меню. А на страничке http://www.uimodeling.ru/clients-and-case-studies/ буква “и” наполовину залезла, под блок “Клиенты и проекты” (у меня FF2).

    Reply
  32. Juras Vetrau

    Евгений,

    Спасибо за комменатрии! Там отчасти ситуация такая же как с блогом — нужно было как можно скорее запустить 🙂 В ближайший месяц дизайн причешется окончательно и там, и тут. А в дальнейшие ближайшие месяцы появится еще один суб-проект — на этот год у нас большие планы 🙂

    Reply
  33. sternina

    1. > Но если сделать в этой форме меньше 3х полей, она становится либо визуально похожей на форму логина, либо начинается долгий процесс получения сгенерированного системой пароля по почте.

    Эта проблема уже решена. Используем два поля:
    введите свою почту
    введите пароль

    2. по поводу CAPTCHA. Ваше решение уже достаточно прокомментировали, добавить нечего. Относительно кривых цифр и букв тоже есть некоторое ограничение -их часто не разбирают даже люди с идеальным зрением.
    придумано оригинальное решение – отображать простую картинку, например, слона и попросить пользователя ввести в поле то, что он видит на картинке.

    Reply
  34. Juras Vetrau

    sternina,

    По поводу формы регистрации — у вас ведь все равно остается два поля 🙂 Частый случай — форма регистрации, а сбоку страницы — форма логина. Если они имеют одинаковое количество полей (т.е. 2), получается путаница.

    Reply
  35. Pingback: Обзор №4, Февраль 2008 | 0995

  36. fayona

    Спасибо, статья хорошая и полезная 😉
    Правда немного общо 😉
    ЗЫ а шрифт на сайте нельзя ли сделать покрупнее? уж трудно читается ;Р

    Reply
  37. Антон Валяцов

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

    Reply
  38. Pingback: Обзор №4, Февраль 2008 - Design For Masters

Leave a Reply

Your email address will not be published. Required fields are marked *