Архив рубрики «usability»

Кухарка и контент

19.09.2009

WYSIWYG редакторы дали повод думать, что сейчас каждая кухарка сможет редактировать контент. Да, она сможет это технически, сейчас CMS очень простые, но поддержка сайта – это не просто вставить в FCKEditor статью из MS Word и нажать «Сохранить».

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

  1. Розовые буквы большого размера. Когда есть визуальный редактор, сразу хочется сделать вот это слово большим, а вот то – розовеньким. Мало того, что это просто непрофессионально и выглядит как страничка 12-летней лирушницы, так ещё вы будете и inline стили долго вспоминать, если захотите сделать редизайн. Лучше всего бороться с этим, прописав свои стили и объяснив человеку, что играться со шрифтами не стоит.
  2. Картинки и их размер. Изображение для начинающих контент-менеджеров – вообще тёмный лес. Каким должны быть качество, формат, размер – они над этим не заморачиваются. Просто загрузили фотографию 1600*1200 px и уменьшили ее размер в WYSIWYG (за счёт указания width и height в теге img). Соответственно, на выходе получили картинку размером в 2МБ вместо 40Кб. Хорошо, если у пользователя, загружаеющего страницу, канал широкий, и это незаметно, а если нет? По поводу изображений стоит проводить большую разъяснительную беседу, научить хотя бы по минимуму обрабатывать фотографии в Photoshop, Paint.NET или GIMP (потянуло меня на извращения).
  3. Структура сайта. Если структуру можно изменять, то обязательно получится черти что: в новость вставлена огромная статья на 15 страниц, важные разделы запрятаны в глубине сайта, тогда как никому не нужные разделы красуются на главной странице. Тут уже объяснять бесполезно. Для визиток структуру сайта лучше не менять, а для более крупных проектов (вроде корпоративных сайтов), обучить человека или нанять кого-нибудь с аутсорсинга.
  4. SEO. Любой более-менее грамотный верстальщик имеет представление о поисковой оптимизации и оптимизации кода в целом, чего нельзя сказать про секретаршу, чьи познания ограничивются навыками работы в MS Word
  5. Кривой код. Визуальные редакторы создают много мусора в коде, и с этим ничего не поделаешь. Приходится выбирвать между быстрым форматированием и чистотой кода. Профессиональный вебмастер сможет сделать код нормальным, лёгким, за что ему скажут спасибо пользователи с медленным каналом.

Если и создавать нормальный сайт, то лучше нанимать специального человека на должность вебмастера. Он будет обновлять информацию вовремя и качественно. Необновляемый сайт держать нет смысла, он будет служить скорее антирекламой компании: «Ах, у них даже сайт 4 месяца не обновлялся, с ними лучше не иметь никаких дел».
Если нет денег держать человека в штате, можно воспользоваться аутсорсингом.

Рубрика: usability, сайты | Нет комментариев »

Формы: дьявол кроется в мелочах!

30.10.2007

Наверное, моя единственная статья про дизайн.

Часто, просматривая сайты, видишь, что разработчики относятся к формам ввода легкомысленно. Многие дизайнеры видят в них только визуальный смысл – чтобы красиво смотрелась, забывая, о том, что это функциональный элемент сайта.

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

Несколько примеров, как быстро можно сделать формы удобнее:

1. Используйте теги метки

Метка (<label>) используется для связи между полем и его описанием.
Клик на метку обрабатывается браузером, как клик на сам элемент.
Это может быть перевод фокуса на поле с текстом или установка/снятие флажка для полей выбора (radio кнопок, флажков). В desktop приложениях я привык кликать не на сам флажок, а на его описание т.к. попасть по нему мышкой гораздо проще. Если использовать <label> можно добиться подобного поведения и в HTML.

Как это выглядит в HTML:

<input type="checkbox" name="agree" id="agree_id" value="1" /> <label for="agree_id"> Я принимаю условия соглашения </label>

3. Всегда указывайте порядок полей (tabstop’ы)

Опытные пользователи при работе с формами могут пользоваться только клавиатурой. Переходя по полям формы кнопкой TAB, часто можно попасть фокусом с первого поля на третее, а потом на второе.

4. Большие текстовые поля

Делайте большие поля для ввода. Помните о том, что пользователи там вводят текст! Каюсь, год-полтора назад я думал, что для формы добавления новостей вполне хватит и 4 строчного поля.
Кроме этого можно сделать так, чтобы ширина поля ввода автоматически подстраивалась под размер окна. Для этого нужно дописать в HTML

<textarea name="field" rows="8" cols="6" style="width: 95%"></textarea>

5. Внимание к мелочам!

Атрибут <input> maxlength не просто так придумали. Он позволит пользователю не вводить данных, больше чем возможно. Но нужно понимать, что он сделан для удобства пользователя, а не для проверки длинны текста. При желании и свободных 5 минутах, ограничение maxlength можно легко обойти. Посему лучше еще раз проверять длину текста на стороне сервера.

Если на вашей странице есть только форма, пусть первое поле сразу получит фокус ввода.
Это очень легко реализуется через

<body onload="document.getElementById('field1').focus()">...<input type="text" name="field1" id="field1" />

6. Тестируйте на пользователях

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

7. Сохраняйте данные в случае ошибки

Как бывает обидно, когда ты пишешь большой комментарий на сайт, тратишь на это время, думая «вот сейчас меня оценят, как я хорошо написал!>, нажимаешь кнопку и тебя встречает ошибка «Вы неверно введи код на картинке, вы – робот!».
Возвращаешься назад и видишь пустую форму. :`(
Можно сделать первичную проверку на Javascript, обычно он включен у пользователей, а дальше проверять данные на стороне сервера.
Либо сделать, чтобы в случае неверных данных, пользователю возвращалась та же форма, с комментариями, где он что неправильно заполнил. На PHP это очень просто делается с помощью библиотеки Дмитрия Котерова HTML_FormPersister

Если пользователю приходится писать большие комментарии, то можно сделать автосохранение в cookies (работает в LiveJournal) или на сервер с помощью AJAX (так поступает Google в GMail и Google Notebook)

P.S.
Хороший интерфейс сложно заметить. Пользователи считают, что так и должно быть. А малейшие изъяны видно сразу.
Удобства ваших формам! Жду комментарии и критику.

Ссылки по теме:

Рубрика: design, html, usability | Комментарии (5) »