Ноя 15

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

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

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

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

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

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

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Ноя 09

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

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

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

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

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

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

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

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

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

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

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Сен 25

Шаманим с TEXTAREA

Речь в этой заметкек пойдет о стандартном элементе TEXTAREA и о свойствах, которые можно ему придать:

  1. Как отключить стандартную подсветку TEXTAREA и INPUT в браузерах на WebKit (например, Safari и Google Chrome).
  2. Как сделать собственную подсветку выделяемого поля TEXTAREA.
  3. Как отключить "растягиваемость" поля TEXTAREA (наиболее актуально для браузеров с движком WebKit).
  4. Как сделать так, чтобы поле TEXTAREA вытягивалось вниз автоматически под размер набираемого текста.

Решение этих задач очень простое:
1. Для отключения автоматического подсвечиваиня полей TEXTAREA и INPUT в браузерах Google Chrome, Safari нужно задать следующий стиль:

input, textarea { outline: none; }

2. Для создания собственного варианта подсветки поля TEXTAREA можно задать следующие стили:

textarea { outline:none; border:1px solid #000000; }
textarea:focus { border: 1px solid #ff0000; background: #ffffcc; }

Для полей INPUT решение аналогично.

3. Чтобы текстовое поле TEXTAREA не растягивалось до произвольных размеров (если пользователь растягивает его за нижний правый угол), нужно задать CSS-стиль:

textarea { resize: none; }

На этом проблема будет решена. Все поля TEXTAREA перестанут растягиваться.

4. Для того, чтобы поле TEXTAREA растягивалось вниз автоматически в процессе набора текста, можно воспользоваться jQuery-плагином "jQuery Autosize". Использование плагина очень простое. Теперь любое поле TEXTAREA на странице будет подстраивать свою высоту под размер помещенного в него текста.

$(document).ready(function(){
    $('textarea').autosize();  
});

Для правильной работы должны быть подключены скрипты jQuery и плагина jQuery Autosize.

Плагин распространяется свободно по MIT License.

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Июл 30

Делаем форму обратной связи на сайт с защитой от спама

Встала задача организовать на сайте "Уголок веб-разработчика" форму обратной связи для сбора пользовательских мнений о том, какую тему они хотели бы видеть раскрытой на сайте. Естественно, форма не должна пропускать спам. В этой заметке я рассказываю, как сделать подобную форму.

Самый простой способ защиты формы от спама - это использование CAPTCHA. Как сделать собственную CAPTCHA можно прочитать в моей статье "Скрипт текстовой CAPTCHA для защиты от спам-ботов". Но в данном примере мы используем проект KCAPTCHA - готовое решение, разработанное Сергеем Кругловым.

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

Далее - спроектируем форму с интеграцией модуля KCAPTCHA. Файл, содержащий форму обязательно должен быть PHP-скриптом и в самой верхней строчке должен содержать функцию session_start().

<form method="post">
<input type="hidden" name="send" value="1"/>
<p>Уважаемый гость! Если Вам интересен наш проект, 
предложите, пожалуйста, тему, которую Вам было бы интересно
видеть разобранной на страницах нашего
сайта или блога:</p>
<textarea name="theme"></textarea>
<br/>
<img src="kindex.php?<?php echo session_name()?>=<?php echo session_id()?>" 
width="120" height="60"><br/>
Введите анти-спам код с картинки:<br/>
<input name="keystring"><br/>
<input type="submit" value="Отправить"/>
</table>
</form>

Форма приведена без какого-либо оформления и CSS-стилей.

Далее рассмотрим скрипт отправки письма:

// получение темы
$theme = htmlspecialchars($_REQUEST['theme'], ENT_QUOTES);

// отправка письма
$subject = 'Тема для разбора с сайта codething.ru';
$mailto = 'mike@pestr.ru';
$headers = "From: mike@pestr.ru";
$message = "Тема: $theme";
$message = iconv("utf-8", "koi8-r", $message);
mail($mailto, $subject, $message, $headers);

Не забывайте заменить мой почтовый адрес mike@pestr.ru на свой!

Перед отправкой функцией mail() сообщение перекодируется в кодировку KOI8-R (так исторически сложилось для электронной почты), в данном скрипте перекодировка идет из формата UTF-8, т.к. сами скрипты я всегда сохраняю в UTF-8, но если вы решите, что вам удобнее использовать windows-кодировку, то пожалуйста, только не забудьте заменить "UTF-8" на "CP1251" в вызове функции iconv() и перекодировка также будет проходить нормально.

Теперь осталось собрать всё в кучу и добавить проверку правильности ввода CAPTCHA для защиты от спама.

Получившийся в итоге программный код будет выглядеть так:

<?php
session_start();
if ($_REQUEST['send']!='')
{

  if(!isset($_SESSION['captcha_keystring']) || 
     $_SESSION['captcha_keystring'] != $_REQUEST['keystring'])
  {
    $message="<p>Форма не отправлена!</p>";
  }
  else
  {
    // получение темы
    $theme = htmlspecialchars($_REQUEST['theme'], ENT_QUOTES);

    // отправка письма
    $subject = 'Тема для разбора с сайта codething.ru';
    $mailto = 'mike@pestr.ru';
    $headers = "From: mike@pestr.ru";
    $message = "Тема: $theme";
    $message = iconv("utf-8", "koi8-r", $message);
    mail($mailto, $subject, $message, $headers);
    $message="<p>Форма отправлена!</p>";
  }
}

if ($message!="")
{
  echo $message;
}
else
{
?>
  <form method="post">
  <input type="hidden" name="send" value="1"/>
  <p>Уважаемый гость! Если Вам интересен наш проект,
  предложите, пожалуйста, тему, которую Вам было бы интересно
  видеть разобранной на страницах нашего сайта или блога:</p>
  <textarea name="theme" ></textarea>
  <br/>
  <img src="kindex.php?<?php echo session_name()?>=<?php echo session_id()?>"
  width="120" height="60"><br/>
  Введите анти-спам код с картинки:<br/>
  <input name="keystring"><br/>
  <input type="submit" value="Отправить"/>
  </table>
  </form>
<?
}
?>

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

Вставку этого кода к себе на сайт я сделал через тег <IFRAME>, можно посмотреть, как это работает на главной странице сайта codething.ru.

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal
Июн 29

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

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

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

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

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

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

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

border-radius: 10px;

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

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

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal