Михаил Елфимов об интерфейсах

Best Practices For Form Design (Luke Wroblewski) (презентация в PdF, 3Mb, 112 слайдов) @lukew.com
Грамотная подборка советов о проектировании форм.

Три правила дизайна элегантных интерфейсов (Статья+презентация) @usethics.ru
Советы о создании эстетичных интерфейсов.

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

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

Еще одна категория книг – научная литература, как, например, книга Р.Л. Солсо «Когнитивная психология», о которой собственно я и хотел написать.

Литература такого рода дает систематическое представление – как человек воспринимает информацию, как переваривает её и реагирует на окружающее, как учится, и как полученные знания влияют на развитие человека.

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

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

Я в течении нескольких дней честно пытался свести в одно целое отдельные заметки, которые я делал по мере чтения книги. Но это невозможно. Единственный способ изложить полезную информацию из книги Солсо – это переписать её целиком, но такая книга уже есть и написал её Солсо, а называется она «Когнитивная психология». Рекомендую к прочтению.

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

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

Ссылки по теме:
Купить на Озоне
Купить на bolero.ru 224 руб.
Искать на findbook.ru

Usability Methods Table @usabilitynet.org
На вид скомпоновано лучше, чем материалы в Википедии на эту же тему.

Methods @usabilityfirst.com
Небольшой дополняющий список, добавляющий GOMS и Cognitive Walkthrough.

Существуют распространенные рекомендации о том, как заменить стандартное сообщение HTTP-сервера «404 Not Found» на что-то более дружелюбное, например, написать что-то типа «404 Не найдено». Осмысленность такого решения будто бы в том, что посетители сайтов до смерти пугаются сообщений на английском, а вот если то же самое написать по-русски – пользователи тут же всё поймут и будут счастливы. Попробуем предложить пару более элегантных решений. Заодно я затрону тему обработки переходов на сайт по ссылке (а так обычно и переходят на сайт, верно?). Статья не только для программистов, просто разумным людям тоже будет интересно.

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

Типичные решения:

• Сообщение «Страница не найдена, потому что либо вы ошиблись, либо сервер кривой, либо пятна на солнце». Это говорит посетителю только об одном – нужной ему информации тут нет, и страницу можно закрыть. Посетитель потерян для вашего сайта. Почему бы вместо этого не предложить ему что-то подходящее?
• Сообщение «Страница не найдена» и карта сайта. Уже лучше, потому что человек видит возможные пути выхода из ситуации, получает некоторую информацию о сайте и может сделать предположение о том, где содержится нужная ему информация. Однако, посетитель не знает в какой раздел смотреть, не видит конкретных вариантов, и, в зависимости от мотивации, может не захотеть копаться в разделах сайта. Почему бы вам не поискать информацию в разделах сайта самому и предложить посетителю найденные варианты?
• Сообщение «Страница не найдена» и ссылка на главную страницу сайта. Предложение перейти на главную страницу по степени раздражения и неэффективности находится рядом с картой сайта. Посетителю не нужен ваш сайт, ему нужна информация, товар, файл. Предложите ему это, исходя из ссылки, по которой посетитель пришел к вам!

Почему так получилось, что страница не найдена и что с этим делать? Рассмотрим возможные ситуации.

Посетитель пытается перейти к удаленному документу, файлу, картинке
Вероятно, когда-то такой документ был на сайте, но с тех пор много воды утекло, и теперь его нет, как нет никакой возможности его предоставить. В этом случае, при сознательном удалении с сайта документа, вы можете предложить пользователю альтернативные способы получить нужную ему информацию – порекомендовать ссылку на другой сайт, или предложить перейти на поисковый сайт с уже сформированным запросом (заголовок утраченного документа или ключевые слова). Для этого достаточно следить за удаляемыми документами и вести простой список – ссылка, по которой находился удаленный документ, тип документа и его заголовок или ключевые слова. Отлавливая 404, вы просматриваете список, и если требуемая ссылка в нем есть – информируете посетителя. Если на вашем сайте читабельные ссылки (вроде /shop/foto/canon/d300.html), то ключевые слова можно попробовать извлечь прямо из ссылки.

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

Посетитель пытается перейти к удаленному документу по ссылке с поисковика
Посетитель мог ввести поисковый запрос «купить Nokia N95 прямо сейчас» или «голые девушки секс на пляже» на яндексе, а вы как-раз удалили описание телефона с сайта или переместили его в другой раздел, а может быть удалили пачку эротических рассказов. В этом случае у вас есть поисковый запрос (подсказка: referer http-header), введенный посетителем на поисковике. Если у вас на сайте есть своя поисковая система, вы можете выдать список страниц, подходящих под поисковый запрос. Если поисковой системы нет, но вы знаете, что некоторые ключевые слова вам интересны – проверяйте их наличие в поисковом запросе и показывайте соответствующие ссылки. Например, если у вас интернет-магазин мобильных телефонов – проверяйте названия брендов и моделей в запросе.

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

Посетитель хочет неведомого
Может быть так, что вы совсем не знаете что привело к вам посетителя. Даже в этом случае вы можете сделать доброе дело и указать на конкретную причину ошибки, благо у вас есть источник перехода (подсказка: referer http-header). Не заставляйте посетителя теряться в догадках о причине происшедшего, если вы можете определить причину сами.

Если по заголовку referer видно, что к вам пришли по ссылке с сайта www.xxx.ru – сообщите пользователю, что ссылка на сайте www.xxx.ru устарела и предложите вернуться и написать письмо администратору сайта www.xxx.ru. Подскажите, что надо сообщить администратору – дату и время ошибки (чтобы их можно было найти в логе), адрес страницы на вашем сайте, адрес страницы на www.xxx.ru. Чаще всего почтовый ящик администратора выглядит как webmaster@xxx.ru или root@xxx.ru – предложите эти варианты пользователю.

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

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

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

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

• Совершенная 404-ая страница. Ян Ллойд @webmascon.com. Примеры кода на JS и на PHP.
• Маленькие штучки для блога (Обработка опечаток в URL) micromarketing
• Работаем над ошибками @artlebedev.ru. Плохие советы о содержании страницы 404, но хорошие советы о её оформлении.

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

Сайты
Сайт Мосфинагентства @artlebedev.ru и обсуждение ru_ucdesign
Одностраничные сайты @1ps.ru
Как живется одностраничникам в Рунете @mastertext.spb.ru
Elise Springer Home Page @espringer.web.wesleyan.edu

Технология
TiddlyWiki @tiddlywiki.com
moo.fx - super lightweight javascript effect library @moofx.mad4milk.net