Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

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

  • 8 февраля 2008

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

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

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

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

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

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

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

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

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

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

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

Директор по бренду и дизайну Muse Group, ранее — Райффайзен Банка и Mail.ru Group. Я руковожу несколькими командами, которые отвечают за дизайн бренда и интерфейсов. Веду блог и курс о дизайн-менеджменте, делаю дайджесты, со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, Russian Design Cup, читаю лекции в Британке, курирую курс Future London Academy в Лондоне, публикуюсь на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
View Post
  • Дизайн-системы

Тёмная тема оформления

  • Юрий Ветров
  • 17 мая 2020
View Post
  • Дизайн-менеджмент
  • Статьи
  • Тренды

DesignOps, стремительно ворвавшийся в тренд

  • Юрий Ветров
  • 23 июля 2018
View Post
  • Дизайн-системы
  • Рецензии

Книги о дизайн-системах

  • Юрий Ветров
  • 26 апреля 2018
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 6 — Внедрение

  • Юрий Ветров
  • 30 мая 2017
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 5 — Дизайн с выхлопом

  • Юрий Ветров
  • 12 апреля 2017
View Post
  • Статьи
  • Тренды

Куда идёт UX в 2016 году

  • Юрий Ветров
  • 14 сентября 2016
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия на практике. Часть 4 —
От дизайн-команды к дизайн-культуре

  • Юрий Ветров
  • 12 сентября 2016
View Post
  • Методы и практики
  • Статьи
  • Тренды

Алгоритмический дизайн

  • Юрий Ветров
  • 27 июня 2016
39 comments
  1. Алексей:
    8 февраля 2008 в 19:52

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

    Ответить
  2. donor:
    9 февраля 2008 в 12:54

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

    Ответить
  3. Juras Vetrau:
    10 февраля 2008 в 16:39

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

    Ответить
  4. Juras Vetrau:
    10 февраля 2008 в 16:43

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

    Ответить
  5. rusblaze:
    13 февраля 2008 в 18:22

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

    Ответить
  6. Juras Vetrau:
    13 февраля 2008 в 18:32

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

    Ответить
  7. President:
    13 февраля 2008 в 21:13

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

    Ответить
  8. Alexsas:
    14 февраля 2008 в 8:40

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

    Ответить
  9. Juras Vetrau:
    14 февраля 2008 в 8:52

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

    Ответить
  10. Juras Vetrau:
    14 февраля 2008 в 8:56

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

    Ответить
  11. прохожий:
    14 февраля 2008 в 12:03

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

    Ответить
  12. Juras Vetrau:
    14 февраля 2008 в 12:51

    прохожий,
    То есть именно текст в HTML? Отличное решение, нужно испытать 🙂

    Ответить
  13. Glader:
    20 февраля 2008 в 11:04

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

    Ответить
  14. Juras Vetrau:
    20 февраля 2008 в 14:48

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

    Ответить
  15. Glader:
    20 февраля 2008 в 15:00

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

    Ответить
  16. Juras Vetrau:
    22 февраля 2008 в 12:17

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

    Ответить
  17. zuk:
    22 февраля 2008 в 20:27

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

    Ответить
  18. Juras Vetrau:
    22 февраля 2008 в 20:50

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

    Ответить
  19. Eugene:
    23 февраля 2008 в 23:43

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

    Ответить
  20. Геннадий:
    26 февраля 2008 в 12:45

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

    Ответить
  21. Juras Vetrau:
    26 февраля 2008 в 12:53

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

    Ответить
  22. Juras Vetrau:
    26 февраля 2008 в 12:56

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

    Ответить
  23. Gisma:
    28 февраля 2008 в 21:41

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

    Ответить
  24. Glader:
    28 февраля 2008 в 21:52

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

    Ответить
  25. Gisma:
    29 февраля 2008 в 18:00

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

    Ответить
  26. xes:
    29 февраля 2008 в 20:00

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

    Ответить
  27. Juras Vetrau:
    14 марта 2008 в 19:34

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

    Ответить
  28. Евгений:
    14 марта 2008 в 20:24

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

    Ответить
  29. Александр Реушкин:
    16 марта 2008 в 23:18

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

    Ответить
  30. Juras Vetrau:
    16 марта 2008 в 23:24

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

    Ответить
  31. Juras Vetrau:
    16 марта 2008 в 23:24

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

    Ответить
  32. Евгений:
    17 марта 2008 в 13:36

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

    Ответить
  33. Juras Vetrau:
    17 марта 2008 в 13:39

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

    Ответить
  34. sternina:
    28 марта 2008 в 15:10

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

    Ответить
  35. Juras Vetrau:
    28 марта 2008 в 16:35

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

    Ответить
  36. Уведомление: Обзор №4, Февраль 2008 | 0995
  37. fayona:
    12 мая 2008 в 9:47

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

    Ответить
  38. Антон Валяцов:
    17 сентября 2008 в 16:37

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

    Ответить
  39. Уведомление: Обзор №4, Февраль 2008 - Design For Masters

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.