Алексей Рытов
En Ru
 
   
 

среда, 30 сентября 2009 г.

Пользователи плохо умеют считать проценты

Если вы взимаете комиссию за услугу, необходимо внятно сообщить пользователю размер этой комиссии. Вопрос в том — в рублях или в процентах. В рублях, вроде бы логичнее, но если пользователь сам вводит сумму, то может быть, до момента ввода проще показать проценты? Я так считал. Оказалось, что пользователи считают иначе. Точнее, они вообще плохо считают.

В нашей платежной системе комиссия отображается в виде процентов:

Хотя были идеи и варианты комиссию считать налету (пока пользователь вводит сумму в поле) и отображать ее в рублях. Но я посчитал, что это баловство — излишняя интерактивность и ненужное программирование. Тем более, что в нашем случае, все равно будет шаг, на котором пользователь должен все проверить, ввести пароль и подтвердить платеж. Вот на этом втором шаге, конечно, мы показываем комиссию в рублях:

Сегодня разговаривал со своим коллегой, работающим в одном крупном мобильном операторе. Он сказал, что они проводили исследования и оказалось, что вариант, применяемы у нас, отпугивает пользователей.

Как так? Почему? Оказывается, что пользователи плохо считают проценты. Плохо, в смысле неправильно. Например, при платеже на 1000 руб. и комиссии 2%, пользователь говорил: «Нет, 120 рублей комиссии — это слишком дорого».

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

Что ж, нужно исправляться и делать что-то в таком духе:

Впрочем, возможно, такое оформление для измененной логики не самое лучшее, нужно будет еще подумать и потестировать. Думаю, сделаем комиссию рядом с полем ввода суммы, например так: Сумма [500] руб. + комиссия 10 руб. (2%)

В заключение скажу, что я не отловил эту проблему при юзабилити-тестировании. Дело в том, что пользователи при тестировании платили не свои деньги и не очень большие суммы. А раз так, то им хоть 90% комиссиии напиши — все ладно.

Так что порой получасовое общение с коллегой стоит многих часов исследований.

четверг, 24 сентября 2009 г.

Активные и субактивные пункты меню

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

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

В данной статье речь пойдет именно о меню. Т.е. об иерархичной структуре с единственным отношением (один пункт меню — одна страница). Множественные отношения — теги — под данное рассуждение не попадают.

Активный пункт меню

Предположим, что у вас есть сайт с меню из тех пунктов:

Новости Старости Странности

Активный пункт меню должен выделяться. Это поможет пользователю помнить (или понять, если он пришел по ссылке сразу на внутреннюю страницу), в каком именно месте сайта он находится. В нашем примере, когда пользователь щелкнет по пункту «Новости», то меню станет таким:

Новости Старости Странности

Активный пункт претерпел изменения:
  1. Графически выделен — другой цвет фона и полужирное начертание шрифта;
  2. Не залинкован — ссылка убрана, т.к. нет смысла давать ссылку на текущий URL.

Субактивный пункт меню

Предположим, что в разделе «Новости» у нас много ссылок на вложенные страницы с новостями. Если зайти на эти вложенные страницы, то как должен выглядеть пункт меню? С одной стороны, он продолжает быть активным, т.к. мы все еще в разделе новостей. С другой — вроде бы мы уже не прямо в нем находимся.

Состояние пункта меню в данном случае я называю субактивным:

Новости Старости Странности

Субактивный пункт сочетает в себе черты активного и пассивного пунктов:
  1. Графически выделен другим цветом фона — это черта активного пункта;
  2. Залинкован и не выделен полоужирным — это черты пассивного пункта.

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

Ошибки в построении меню

Описанные выше принципы просты для понимания, разработки и использования. По сути, это те мелочи, о которых пользователю даже думать не нужно, типа вращения колесика на мышке.

Но и в данном простом вопросе встречаются ошибки:

  • Пункты меню вообще не выделяются — это как ни странно встречается;
  • Субактивный пункт выглядит также, как активный — если при этом он залинкован, то ошибка не страшная, но если он не залинкован (такое встречается), то это уже проблема;
  • Активный пункт выделен, но залинкова сам на себя — очень распространенная ошибка, впрочем нестрашная;
  • Активный пункт присутствует, а субактивный выглядит как пассивный (никак не выделен) — очень распространенная и довольно серьезная ошибка, часто встречается на больших корпоративных сайтах, где она приводит к серьезным проблемам в навигации.

Где это НЕприменимо

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

Могу припомнить только две ситуации, где данный принцип неприменим:

  1. Выпадающее меню — в этом случае рекомендую для компенсации применять хлебные крошки;
  2. Пункт меню пропадает на странице назначения. Представьте, что кликнув по пункту «Новости», вы попадете на сайт с другим оформлением и совершенно другим меню. Такое бывает, впрочем, злоупотреблять этим не стоит.

Выводы и картинка

Разработчик, помни, выделение активного и субактивного пунктов меню улучшает навигацию, понижает артериальное давление и улучшает пищеварение!

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

среда, 23 сентября 2009 г.

ЧПУ — средство навигации, а не визуализации

ЧПУ или веб-адреса, удобные для восприятия человеком, к счастью, перестали быть экзотикой. Например эта страница имеет вот такой адрес:

blog.ritov.ru / 2009 / 09 / blog-post_22.html

Как видите, весьма понятный URL, если не обращать внимания на неказистое название blog-post_22.html (я еще не разобрался как в Блогспоте давать человеческие адреса постам).

По идее, если отбрасывать части адреса

так blog.ritov.ru / 2009 / 09 или так blog.ritov.ru / 2009

то должен выводится список постов за сентябрь 2009 года и список постов за весь 2009-й соответственно. К сожалению, если вы попробуете зайти по этим адресам, то получите сообщение, что страница не найдена.

Курьез в том, что справа от текста поста имеется календарик, оформленный как раз в виде вложенного списка по типу:

  • 2009
    • Сентябрь
      • ЧПУ — средство навигации, а не визуализации
      • Веб-проект как унитаз

Логично, что «2009» должен быть залинкован на blog.ritov.ru/2009/. Однако, щелкнув по этой ссылке, мы получим следующий ужос:

blog.ritov.ru / search?updated-min=2009-01-01T00%3A00%3A00-08%3A00&updated-max=2010-01-01T00%3A00%3A00-08%3A00&max-results=4

Ссылка «Сентябрь» выглядит посимпатичнее, но логики не прибавляет:

blog.ritov.ru / 2009_09_01_archive.html

Получается, что у гугл-блога ЧПУ присутствует (частично), и выполняет оформительскую функцию, но никак не функцию навигации.

Согласен, что это пустячок. Но из таких пустячков и скалдывается настоящая любовь :) Вот у меня в браузере, например, можно по частям адреса кликать, очень удобно, советую:

Мода применять ЧПУ как средство визуализации, а не как средство навигации, явно прослеживается в среде современных веб-разработчиков. Чего скрывать, и сам я не без греха: mobi-money.ru / news / full / 88

понедельник, 21 сентября 2009 г.

Веб-проект как унитаз

Навеяно сегодняшним походом в поликлинику.

Все мы периодически посещаем общественные туалеты. К сожалению, они часто грязны, а порою и просто заср*ны (в прямом смысле слова). И проблема тут не в свинстве людей.

Унитаз vs Толчок

В современных общественных туалетах ставят унитазы. Унитаз подразумевает стульчак. Стульчак подразумевает наличие специальных (или хотя бы обычных) одноразовых салфеток. К использованию без салфеток (читай, без стульчака) унитаз в общественных местах не предназначен.

Салфетки в общественном туалете (особенно специальные для стульчака) — редкость. Результат известен — страждущие животом садятся на корточки и... [вырезано цензурой].

Спрашивается, зачем делать красивый кафельный туалет с блистающим чешским унитазом, если в нем никогда не будет салфеток, туалетной бумаги и мыла? Покрасили бы стены масляной зеленой краской, в полу проделали бы дырку — и готово. Чё выпендриваться то!

Веб-проект как унитаз

К сожалению, подобное часто происходит в веб-проектах. Делают что-то красивое и дорогое, но потом экономят на мелочах и через какое-то время проект начинает дурно пахнуть и к нему никто не хочет прикасаться.

Однажды я участвовал в разработке веб-портала для партнеров довольно крупной системы. За основу был взят один довольно известный колаборейшн-продукт, который мы долго и мучительно тюнили под наши нужды и нужды клиентов. Получилось неплохо. Однако, из-за несогласованности управления, этот портал использовался как домашняя страничка из нескольких статических страниц, большинство его возможностей так и не было использовано.

Как и унитаз без салфеток для стульчака, этот портал без должной поддержки, постепенно зарос грязью и паутиной и к нему сейчас не хочется даже прикасаться.

Так что, начиная новый проект, подумайте, может быть можно обойтись просто дыркой в полу?

Ах, эти интерфейсы

Этот блог — рассуждения о пользовательских интерфейсах в различных их проявлениях и веб-проектах.

Блог построен на движке Google

 
  
Алексей Рытов © 1977 :-)  
Домой
  Для писем и газет: aleksritovgmailcom