Чужие мысли

Паттерны дизайна для счастливых пользователей

5 Web Design Patterns for Happy Users
Источник: PingMag

Мгновенная обратная связь

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

Подгружаемые вкладки

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

Каждая вкладка позволяет переключиться к блоку с новой информацией. Можно использовать JavaScript и CSS, чтобы показывать и прятать панели с информацией. Но красота использования этого метода состоит в том, что время загрузки страницы сводится до минимума – пока пользователь читает информацию на одной панели, остальные подгружаются в фоновом режиме.

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

Полупрозрачные сообщения

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

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

Эластичный дизайн

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

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

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

Публичные тестовые зоны

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

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

• 16.06.2007
• Категории: Переводы
• Комментарии: 1