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

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

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

Кто клиент?

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

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

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

И что нам делать, если мы ничего не знаем?

Предполагать.

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

Как не нужно делать

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

Главная страница Lala

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

Странное сообщение о загрузке, когда на самом деле ничего не загружается

А как вам нравиться сообщение «Загрузка» когда ничего не загружается.

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

Чтобы использовать Lala обязательно нужен JavaScript

Проблема даже не в том, что Lala использует JavaScript, а в том, что он необходим. Зачем? Видимо потому что они решили загружать весь контент на страницах с помощью Ajax. В их стремлении соответствовать веяниям Web 2.0, они потеряли, значительную часть пользователей Web 1.0 и ощутимую часть мобильных пользователей. И не они одни.

Чтобы использовать Lala обязательно нужен JavaScript

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

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

Думайте, прежде чем делать

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

Уровень 1: Никаких украшений

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

Уровень 2: Сделайте его красивым

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

Уровень 3: Все и сразу

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

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

Как учесть максимум потребностей пользователей.

После того как определили уровни, можете приступать к разработке сайта.

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

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

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

Когда дизайн практически готов добавьте немного лоска с помощью JavaScript, Вы, конечно, знаете, как проверить наличие объектов и методов чтобы удостовериться что скрипт будет работать, не лишним будет освежить свои знания в том как скрипты могут взаимодействовать с браузером, например создавать закладки или использовать кнопку «Назад». Не забывайте о независимости скриптов, ошибка в работе одного не должна сказываться на остальных.

Если вы используете элементы, которые зависят от JavaScript, отображайте их, если JavaScript включен, а соответствующие объекты и методы доступны. Разделяйте CSS связанный с вашими контрольными элементами и JavaScript. Хороший способ отображать элементы после проверки их функциональности, это замена классов. Например, для закладки это может быть .tabbed в скрытом положении и .tabbed-on в активном, а для формы с автозаполнением .auto-submit и .auto-submit.active соответственно.

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

Не поймите меня неправильно, Ajax имеет свое место на сайте, но важно знать, где это место есть, а где его нет.

Большой совет

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

Translated with the permission of A List Apart Magazine and the author[s].