Ноя 15

О невозможной CAPTCHA

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

На форуме игры Simutrans для того, чтобы зарегистрироваться или создать новую тему, надо заполнить аж четыре(!) строки. Распознать традиционный буквенный код + ответить на три вопроса, подбираемых случайным образом из некоторого набора. Такая captcha отобьет желание пользоваться сайтом не только у спам-ботов, но и у людей!

В веб-разработке предлагаю руководствоваться двумя правилами в отношении CAPTCHA:

  1. Где можно избежать использование CAPTCHA, следует его избегать;
  2. В каждой форме ввода на сайте не более одной строки для ввода CAPTCHA.

Хорошего кодинга!

Ноя 09

Контент. Дизайн. Юзабилити

Когда я только начинал заниматься веб-разработкой, была популярна полемика на тему, что в сайте важнее - контент или дизайн. Очевидно, что сайт без интересного контента не будет привлекать пользователей, даже если будет красиво нарисован, и наоборот - сайт с ужасным дизайном, но интересным контентом, также может отпугивать пользователей. Как же быть? Что же важнее? Чему следует уделять внимание?

А внимание, на мой взгляд, следует уделять и контенту, и дизайну, причем особое внимание в дизайне надо уделять юзабилити (usability), что в переводе с английского означает удобство использования.

Люди стараются не носить неудобную одежду, не пользоваться неудобными инструментами. Также дела обстоят и сайтами. Неудобный сайт теряет трафик из-за своего неудобства. А мы, владельцы и создатели сайтов, зачастую видим свои сайты совсем не так, как видят их большинство пользователей! Как же проверить, удобен ли ваш сайт для пользователей или нет? Нужно посмотреть на сайт их глазами, глазами пользователей, узнать их мнение о том или ином разделе, функции или возможности. Другими словами, если мы хотим узнать, удобен ли сайт, нам надо провести юзабилити-тестирование!

С чего начать юзабилити-тестирование?

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

За основу я взял метод, описанный Стивом Кругом в его книге "Веб.дизайн" (у меня на руках первое издание этой книги). Рекомендую. В книге все просто и понятно изложено.  В процессе подготовки и проведения юзабилити-тестирования я выполнил следующие действия:

  1. Написал программу тестирования с вопросами и задачами. Вопросы, в основном, касались внешнего вида, расположения элементов, визуальной привлекательности. В качестве заданий были выбраны наиболее очевидные действия, которые хотели бы совершить пользователи зайдя на сайт (воспользоваться поиском, оформить заказ, найти контактные данные компании и т.п.).
  2. Пригласил по очереди четырех человек. Старался приглашать тех, кто не является программистом/веб-разработчиком. Приглашал обычных людей со средним пользовательским опытом работы на компьютере. Попросил их отвечать на вопросы и выполнять задачи в соответствии с программой тестирования. Весь процесс записывал на видео. Камера фиксировала изображение на мониторе и мои вопросы/ответы пользователей. Бумажных записей во время тестирования не вел и пользователей их вести не просил. После тестирования отпускал пользователя, пересматривал видео, выделял существенные моменты и выписывая их. Тестирование с одним пользователем занимало 20-40 минут, в зависимости от общительности пользователя, желания подискутировать, рассказать о своих представлениях, или предложить какие-нибудь варианты решений.
  3. Собрал данные по всем записям вместе, проанализировал частоту их повторения (т.е. сколько человек указало на тот или иной момент), свел все воедино, сгруппировав по задаваемым вопросам/задачам и учел частоту повторения. Получилось около трех печатных страниц результатов.
  4. Проанализировал список и принял решения по каждому пункту. Мои решения сводились к следующим: доработать в текущей версии, доработать в последующей версии, считать несущественным и оставить без изменений. Большая часть сказанного пользователями оказалось существенным и потребовало доработки.
  5. Внедрил исправления. Где не мог сам принять какое-то решение по расположению тех или иных элементов, проконсультировался с дизайнером. Консультации также помогли улучшить систему.

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

Рекомендую всем проводить юзабилити-тестирование своих продуктов!

Июн 29

О скругленных углах

Разрабатывал я как-то пользовательский интерфейс программного продукта, а именно форму поиска.

Изначально она была прямоугольной (справа). Мне порекомендовали сделать её со скругленными углами (слева). Сделал оба варианта и выложил скриношты для сравнения вконтактик.

Я как-то и не придал особого значения форме углов, но ради интереса решил организовать опрос в контакте. Результатами был весьма и весьма удивлен.

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

Кстати, углы весьма просто скругляются в вебе с помощью css-свойства border-radius.

Например, так:

border-radius: 10px;

К сожалению, данное свойство не работает в старых браузерах, таких как IE 6. Углы там остаются прямыми.

Более подробно о скруглении углов можно прочитать тут:
http://htmlbook.ru/css/border-radius

Фев 02

Вебдванольный интерфейс от Twitter

Если хотите, чтобы ваши сайты смотрелись модно и современно, то следует обратить внимание на framework Bootstrap от Twitter. Удобная вещь для построения пользовательских интерфейсов в стиле Веб 2.0, с использованием HTML 5, CSS 3 и Javascript.

Взять можно отсюда: http://twitter.github.com/bootstrap/index.html, скрипты лицензированы под Apache License v2.0.

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

При использовании стоит учитывать тот факт, что Bootstrap не будет  работать корректно в старых браузерах, например,  таких как Opera 9 или IE 6.

Мар 02

Отображаем картинки красиво: FancyBox и другие

Очень часто хочется, чтобы при клике на уменьшенную копию картинки большая картинка открывалась не в новой вкладке и не в новом окне, а прямо на текущей странице, причем красиво. Как этого добиться? Существует множество готовых инструментов, таких как: LightBox, LyteBox, FancyBox и другие.

Остановимся на последнем - FancyBox, т.к. на мой субъективный взгяд он отображает информацию приятнее всего и при этом более гибок в настройках.

Вот некоторые особенности FancyBox:

  • Возможность отображения изображений, HTML кода, Flash-роликов (*.swf), объектов IFrame и Ajax-запросов;
  • Гибкая настройка через параметры и CSS;
  • Организация навигации по отображаемым объектам;
  • Простота установки кода.

Посмотреть примеры использования и скачать FancyBox можно с сайта:  http://fancybox.net/