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

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

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

Вот именно на этом простейшем примере, мы, дизайнеры можем и должны почерпнуть немало полезного.

Кто такие эти клиенты вообще?

Представьте себя на месте официанта, Вы прекрасно знаете, что люди, садящиеся за столик пришли сюда с какой-то целью и наверняка чего-то ожидают. В большинстве ресторанов, обычный стакан воды является первичным контактом с клиентом (или first “touch point”). Если официант наполнит его быстро, проворно и виртуозно у вас создастся первое хорошее впечатление. Некоторые люди, к примеру, пьют чаше, поэтому наполнять стакан им тоже необходимо чаще. Некоторые вообще не притрагиваются к стакану до тех пор, пока не принесут какое-либо блюдо. Другие же вообще не пьют воду и вовсе, а заказывают холодный чай или другие прохладительные напитки. И если Вы сталкиваетесь с реальными людьми, Вы и понятия не имеете об их предпочтениях. А если при этом за столиком 4, 6 или даже 10 человек, необходимо быть просто идеально подготовленным.

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

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

Так что же делать, если нам не известно ничего? Предвидеть.

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

Что если случайно разлить на клиента холодную воду.

Lala.com веб сайт, построенный людьми, которые любят музыку. В этой системе они просто обмениваются музыкальными дисками друг с другом.

Я не решусь назвать их сайт (Рис. 1.1) привлекательным, но им можно пользоваться, даже при выключенном JavaScript (Рис 1.2).

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

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

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

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

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

Думайте прежде чем открыть сайт

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

Уровень 1: Никаких излишеств

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

Уровень 2: Делайте сайты привлекательными

Часть пользователей любят разного рода украшения на программных окнах. Для них делайте привлекательный дизайн, с правильно расположенными элементами дизайна. Можно добавлять разного рода завитушки и росчерки, можно даже немного флеша, поверьте, они будут просто счастливы видеть подобное. До тех пор, пока ваш дизайн не пойдет вразрез с визуальной иерархией сайта, пока вы будете усердно тестить сайт в различных браузерах, создавать несколько основных альтернативных стилей для различных устройств, ВАМ НЕ БУДЕТ ЦЕНЫ.

Уровень 3: Да будет песня.

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

Не забывайте, что у этих уровней нет четкой границы. Возможно, придется создавать что-то среднее между уровнем 1 и 2, задавая основные стили и цвета для Netscape 4.x и для IE5/Mac. Или возможно придется рассмотреть улучшения в виде добавления JavaScript для правильного отображения браузером с помощью инъекции какой-нибудь вкусности между уровнем 2 и 3.

Двигаясь незаметно.

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

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

Как только контент приведен в порядок, переходите к визуальной части (look and feel) вашего сайта. Используя различные техники по своему усмотрению, стилизуйте сайт в соответствии с рассмотренными выше уровнями, скройте некоторые CSS файлы от старых браузеров и добавьте стили лишь для определенных браузеров. Conditional comments всегда были настоящим подарком, старый излюбленный способ @import совместно с media позволит избирательно добавить некоторые стили или наоборот скрыть от старых браузеров.

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

Как только дизайн сайта собран в единое целое, можно добавить немного жизни на сайт каким-нибудь JavaScript'ом. Вы уже знаете как использовать объект и метод для определения, может ли запускаться скрипт в браузере, кроме этого обдумайте как ваши скрипты могут работать в различных браузерах, например , при создании закладки или кнопки Назад. И не забудьте о взаимозаменяемости скриптов. Станет ли Ваш сайт не пригодным к использованию, если один скрипт будет работать, а другой нет?

Если Вы создали виджет или другое средство управления интерфейсом и определили, что widget работает правильно и все идет как надо, генеририте дополнительную разметку. И если Вы отделяете CSS виджета от JavaScript, будучи хорошим стандартистом, убедитесь, что стиль не активен до тех пор, пока скрипт показывает, что виджет может использоваться. В подобном случае хорошо бы задействовать class-swapping (см. Таблицу 1)

Таблица 1. Class-swapping examples

Widget	At Rest	Activated
Tab Interface	.tabbed	.tabbed-on
Auto-submitting Form	.auto-submit	.auto-submit.active

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

Если я не ошибаюсь, Ajax'у отведено свое место и очень важно знать где это место.

Собирайте как можно больше информации

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

Источник alistapart.com

Перевод — Дмитрий Папуца

Оригинал статьи

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