Ссылка: мультивалидатор HTML.

Купить в books.ru или ozon.ru

• Книга «Why software sucks… and what you can do about it», в русском издании «Софт — отстой! И что с этим делать?»
• Автор David Platt (Дэвид Платт)
• Год издания 2008
• Автор рецензии Алексей Петров aka Sq.Piglet

Об авторе

Дэвид Платт — опытный программист, преподаватель, участник компьютерных конференций и частный консультант в области компьютерных технологий. Но самое главное Дэвид человек с неординарным чувством юмора и способностью говорить правду в лицо.

О книге

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

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

А вот если вы разработчик или начальник разработчика, то эта книга для вас, только я не советую вам ее читать, вдруг после прочтения вы захотите сменить профессию…

Об издании

Единственное достоинство данного издания («Софт — отстой! И что с этим делать?» СПб, Символ-Плюс, 2008) это не плохой перевод.

Недостатки: мягкая обложка, посредственная верстка, черно-белые иллюстрации.

Купить в books.ru или ozon.ru

• Книга «The Elements of User Experience», в русском издании «Элементы опыта взаимодействия»
• Автор Jesse James Garrett (Джесс Гарретт)
• Год издания 2008
• Автор рецензии Алексей Петров aka Sq.Piglet

Об авторе

Джесс Гарретт — известный специалист в области информационной архитектуры и юзабилити. Он также является изобретателем диаграммы элементов пользовательского взаимодействия и visual vocabulary — открытой нотационной системы документирования информационной архитектуры.

О книге

Это отличная книга, фактически являющаяся пошаговой инструкцией по созданию web-ресурсов, начиная от постановки задачи в общем виде и заканчивая навигационными схемами и даже дизайном. Каждая глава книги описывает свой этап создания web-сайта или сервиса. Вот эти этапы: стратегия, набор возможностей, структура, компоновка и дизайн.

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

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

Об издании

Из достоинств данного издания («Элементы опыта взаимодействия» СПб, Символ-Плюс, 2008), следует отметить неплохую бумагу и верстку, хороший перевод.

Недостатки: мягкая обложка и черно-белые иллюстрации.

Желающим принять участие в решении этой задачи необходимо забыть о существовании традиционного оконного интерфейса и попытаться придумать нечто принципиально новое. В Mozilla Labs не сомневаются, что Всемирная Паутина будет играть всё большую и большую роль в жизни людей, равно как и будет расти число способов взаимодействия с ней — но оконному браузеру в этом светлом будущем не место.

Тем, кого осенит, каким образом можно выбросить окна на свалку и заменить их чем-то не менее — а ещё лучше более — функциональным, следует представить свою идею в виде модели. Под моделью подразумевается «что угодно: от зарисовки на салфетке до проволочного каркаса или доведённого до совершенства графика или видео».

Авторы наиболее перспективных идей, числом не более 20, примут участие в менторской программе: «старшие товарищи» из Mozilla Labs помогут студентам-дизайнерам довести свои идеи до интерактивных прототипов. Окончательные прототипы будут торжественно представлены на суд общественности, а их авторам достанется почёт и слава.

Это мероприятие даёт старт новой серии под названием Design Challenges. График первого этапа довольно плотный: приём моделей ограничен 1 марта, на менторскую программу выделено менее трёх недель, а доведённые до ума прототипы следует представить до 12 апреля. На конец апреля намечена «раздача слонов»: определятся лучшие работы и состоится церемония вручения призов.

Источник: WebPlanet.

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

Все данные, введенные пользователем, должны быть сохранены

Большинство разработчиков уже усвоили это простое правило, и при неправильном заполнении формы восстанавливают значения полей, которые пользователь заполнил. Но почему-то забывают делать это для неправильно заполненных полей и полей типа пароль. Почему, указав некорректный адрес электронной почты, я должен заново вводить пароль? Или, почему, допустив ошибку в поле «логин», я должен заполнять его заново, вместо того, чтобы исправить ошибку, удалив лишний символ?

Итак: всегда сохраняйте данные, введенные пользователем, в полном объеме.
Исключение: если в форме есть поле уникальное для каждой попытки заполнить форму (например CAPTCHA), то это поле нужно очистить.

В полном объеме информируйте пользователя о допущенных им ошибках

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

В заголовке формы выведите сообщение об ошибке и список полей заполненных неправильно, выделите сообщение цветом (красным) и стилем (размером или насыщенностью текста). Подсветите неправильно заполненные поля формы красным фоном, под каждым неправильно заполненным полем разместите текст с описанием ошибки. Текст должен не констатировать факт ошибки, а помогать ее исправить. Например: не «неправильный адрес электронной почты», а «в поле адрес электронной почты должен присутствовать символ „@“, например: mail@freeartists.ru».

Если форма была заполнена правильно, сообщите об этом пользователю и направьте его дальше. Не оставляйте пользователя на пол пути.

Итак: пользователь должен видеть, что допустил ошибку; неправильно заполненные поля должны быть выделены; текст сообщения об ошибки должен быть однозначной инструкцией по ее исправлению.

Валидация форм

Если результат отправки данных формы на сервер вызовет запуск длительного или необратимого процесса обязательно валидируйте такую форму перед выполнением. Кроме валидации формы на сервере имеет смысл валидировать ее и на клиенте. Многие разработчики проверяют на клиенте только соответствие полей формы некоторым правилам и ограничениям, используя регулярные выражения или другие методики. Но они не могут проверить свободно ли такое «имя пользователя» или достаточно ли у пользователя средств на счету. Такие задачи легко решаются на клиенте с помощью технологии AJAX.

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

Итак: алгоритм, внешний вид и код результата проверки формы на клиенте и на сервере должны быть абсолютно одинаковыми.

CAPTCHA или как не выплеснуть вместе с водой младенца

Наверное, все читатели видели CAPTCHA, которую не может прочесть даже человек с абсолютным зрением. Возникает вопрос зачем защищать форму от роботов так, что ее не может заполнить человек? Я уже не говорю, о том, что в мире полно людей с нарушениями зрения. Тем не менее сделать хорошую CAPTCHA очень просто:

1. Делайте CAPTCHA длиной 4 символа и сообщайте это пользователю.
2. Используйте только цифры и сообщайте это пользователю (введите четырехзначное число на картинке).
3. Не используйте фон близкий к цвету надписи, а также не используйте сочетание цветов фона и надписи, недоступные людям страдающим дальтонизмом. Цвета текста и фона должны быть контрастными.
4. Делайте CAPTCHA достаточно большой, например, 150*70 px.
5. Используйте префикс из случайной строки в параметре name тега input CAPTCHA (<input tape="text" name="captcha-3241" size="4" maxlength="4" />) это нужно для того, чтобы браузер не заполнял поле CAPTCHA из ранее запомненных значений.
6. Дайте пользователю альтернативу. Это может быть звуковая CAPTCHA, возможность cгенерировать CAPTCHA заново или отправить текст CAPTCHA на электронную почту и т. д.
7. Не генерируйте CAPTCHA заново, при неправильном заполнении формы. В этом случае не забудьте восстановить значение ранее заполненное пользователем.

Подумайте а нужна ли вам CAPTCHA вообще? Например если пользователь уже авторизован его нет смысла проверять.

Правильное оформление форм

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

Обязательные поля

Выделяйте обязательные поля красной звездочкой (*) после подписи к полю. К этому символу все привыкли и прекрасно знают его назначение. Другие способы выделения обязательных полей скорее всего буду не очевидны для пользователей. Также можно добавить подсказку (<span title="обязательно заполните это поле">*</span>).

Оформление и группировка элементов формы

Используйте стандартное оформление элементов формы. Пользователи привыкли к оформлению принятому в их ОС или ПО. Не надо шокировать пользователей собственным творчеством.

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

Группируйте близкие по смыслу поля формы используя теги fieldset и label.

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

Кодирование форм

Используйте конструкцию «<label for="field-id">Подпись <input id="field-id" /></label>» для того, чтобы, при клике на подпись, фокус переходил на поле ввода.

Подсвечивайте поля ввода, находящиеся в фокусе (input:focus{background:#ffc}).

Обязательно указывайте параметры size и maxlength для тега input. В качестве значения параметра size используйте среднестатистическую длину для этого поля, а для maxlength максимально допустимую длину этого поля в базе данных.

Выбирайте общеупотребительные названия для полей ввода (name), тогда браузер клиента будет заполнять их автоматически (mail, а не pochta).

Избегайте повторной отправки формы, при обновлении страницы. Обычно это делается через редирект.

Используйте AJAX для автоматического заполнения зависимых полей.

Заполняйте поля ввода значениями по умолчанию, если заранее знаете, какой будет ответ пользователя. Например, в поле «Я согласен с условиями» можно поставить галочку по умолчанию.

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

Постарайтесь обойтись без форматов. Например, пользователь должен ввести номер своего телефона, допустим мы ожидаем от него такую строку 74957978889, а он привык писать телефон так — 8 (495) 797-88-89. Что мешает написать регулярное выражение, которое принимало бы данные в том формате, в котором удобно пользователю, а сохранять данные в удобном для вас формате? Если же это не возможно, покажите пользователю нужный формат на примере.

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

Подписи к полям ввода

Убедитесь, что пользователи однозначно понимают смысл вопросов. На одном проекте в форме регистрации было поле с подписью «адрес почты», половина пользователей вписывало в него свой почтовый адрес (Москва, Красная пл., д. 1). И очень удивлялась, когда система сообщала, что в поле «адрес почты» должен быть символ «@».

Ни в коем случае не используйте сленг.

Оформление страниц с формой

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

Ставьте фокус в первое поле формы, перемещение фокуса, при табуляции, должно соответствовать визуальному порядку элементов формы на странице.

Форма должна находится до «сгиба».

Тренируйтесь на кошках

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

Подобное тестирование это повод задуматься насколько вы отличаетесь от ваших пользователей…

P.S.

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

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

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

Как будто по волшебству

Слово «креативный» последнее время пользуется величайшей популярностью и авторитетом. Креативные люди неожиданно волшебным образом придумывают новые идеи, которые становятся чудесными решениями для самых сложных проблем — и все это с легкостью фокусника, достающего кролика из шляпы. А толпы восторженных зрителей восхищаются: «Какое волшебное искусство! Как же он это делает?!»

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

Краткое описание

Разработка большинства web-проектов начинаются с писем. В целом, конечно, это не лучшая отправная точка для начала проекта. Большинство писем вовсе не страдают краткостью и часто состоят из нескольких страниц текста — подробного описания и необходимой документации. Ни то ни другое абсолютно не вдохновляет.

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

Краткое описание идеи — это одно-два предложения, обобщающие суть проекта и отражающие его как проблему, которую необходимо решить. Это вопрос, нуждающийся в ответе. Нечто вроде:

Нам необходимо сделать редизайн проекта, чтобы привлечь больше посетителей.

или

Как нам привлечь нашу старую аудиторию к новому проекту социальной сети?

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

Структурирование идей

Так, теперь краткое описание идеи у нас есть, что же дальше?

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

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

Идейные мини-конференции

Вероятно, все хоть раз участвовали в чем-то подобном. Иногда это называют еще мозговым штурмом.

Мне не очень нравится идея классических мозговых штурмов. Верный рецепт от всех бед: соберите вместе нескольких людей, чтоб решить проблему. У всех у них свое мнение, но в итоге вам нужно прийти к общему решению, с которым будет согласен каждый. В итоге это решение обычно не работает.

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

Проектная группа

Идейные мини-конференции это групповая работа и в ней непременно должны принимать участие ключевые члены проектной группы. Это важно. Для того, чтобы идея воспринимали серьезно, можно попробовать продать ее людям, которые в ней заинтересованы: гендиректору или директору по маркетингу. Если же продать ее и соблюсти все интересы клиента не удается, то скорее всего такую, возможно даже очень заманчивую идею, ожидает неминуемый провал.

Хороший фасилитатор

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

Распорядок конференции

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

1. Представление участников.
2. Изложение проблемы — цель настоящей конференции (краткая идея).
3. Правила мозгового штурма.
4. Первый порыв.
5. Контексты — 4 метода.
6. Энтузиазмометр.

Правила

Вслед за представлением участников и описанием (в виде краткой идеи) проблемы, стоящей на повестке дня, фасилитатор должен озвучить правила. Они необходимы для того, чтобы общение в процессе мозгового штурма шло спокойно и вежливо. Вот они:

1. Все идеи равны между собой.
2. У нас здесь очень много идей.
3. Не судим.
4. Анализируем идеи позднее.
5. Здесь все равны (не используем служебное положение в личных целях).
6. Получаем удовольствие.
7. Следим за временем.
8. Идеи выдвигаем по очереди (одна идея в один конкретный промежуток времени).

Первый порыв

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

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

Контексты

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

Четыре метода

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

Изменение

Под изменением подразумевается возможность перевернуть в идее все с ног на голову. Берем характеристики предмета, а затем переводим их в обратное или смещаем ракурс. Например, в пивной четыре стены и крыша. А если стен не будет, а крыша останется?

Выразите другими словами

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

Родственные сферы деятельности

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

Случайные связки

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

Куча отличных идей, что дальше?

Фасилитатор выписывает все идеи на одном листке бумаги. После того как конференция закончена, фасилитатор по очереди зачитывает их группе и группа оценивает их с помощью «энтузиазмометра» (модное название для пачки стикеров). К каждой идее приклеивается от одного стикера (не вдохновляет) до трех (вау, вот это великолепно).

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

Мгновения вдохновения

Однажды Билли Коннолли охарактеризовал Палату Лордов в Великобритании как «место в котором хоронят хорошие идеи».

Думаю, он имел в виду, что любые идеи (в данном примере, идеи законопроектов) могут запросто потонуть в процессе полемики. Бесконечное детальное обсуждение и отшлифовывание идеи могут ее фактически похоронить. Это вполне возможно и случается в разных ситуациях довольно часто. Однако, если подходить к идеям правильно и развивать структурно, они могут полностью реализовать весь заложенный в них потенциал.

Мгновения вдохновения очень важны и не менее важен конечный продукт, однако обратите внимание на путь, который лежит между ними.

Об авторе

Марк Боултон живет в Великобритании. Занимается графическим дизайном, пишет и делает первые шаги в искусстве выращивания карликовых деревьев. У него своя собственная крошечная дизайн-студия «Марк Боултон дизайн». Кроме прочего, он регулярно и занудно пишет на темы традиционной теории графического дизайна в своем блоге.