Пермская группа пользователей Linux

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

Выкладываю на всеобщее обозрение текст своего первого выступления (минут 30-40), призванного объяснить заказчикам, на что нужно обращать внимание при утверждении дизайна сайта.

1. Интуитивный интерфейс = знакомый интерфейс.

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

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

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

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

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

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

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

Не надо пытаться научить пользователя чему-то. Наша задача в том, чтобы дать ему то, что он ожидает.

2. Меню ≠ кролик.

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

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

Меню — не кролик, оно не должно прыгать, пользователь не должен его сначала искать, а потом гоняться за ним.

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

3. Сайт ≠ открытка.

http://lenta.ru/

Как вы думаете, там есть что-нибудь внизу? А почему вы так думаете? А много там еще? А как вы это определили?

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

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

4. Размер имеет значение.

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

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

Давайте сравним: http://lenta.ru/ и http://www.membrana.ru/

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

Теперь посмотрим на второй сайт. Статьи на нём ужаты до ширины менее 500 пикселей, и мы при всём желании ничего с этим поделать не можем. То есть попадаем в ситуацию с грязным окном.

Чтобы не создалось впечатление, будто это актуально только для новостных сайтов, посмотрим третий пример: http://ancorenergy.ru/

Сайт очень простой, красивый и функциональный. Здесь интересно обыграно изменение размеров окна браузера. Особенно на внутренней странице.

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

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

5. На Феррари за грибами.

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

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

1. Флеш поддерживается не всеми браузерами. То есть, браузеры тут не причём, конечно. Просто не все пользователи устанавливают себе на компьютер флеш-плеер и обновляют его регулярно. Хотя, сейчас эта ситуация исправляется. По статистике гугл.аналитикс, собранной по сайту marlboro.kz, флеш-плеер версии 9 и выше установлен у 96% пользователей. Это очень высокий показатель.

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

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

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

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

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

6. Флеш не будет работать, пока не загрузится целиком. На медленных каналах это критично.

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

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

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

http://pestovogolf.ru/

http://www.ancor.ru/

http://www.garage25.ru/

Как видите, все это сделано очень интересно и без применения флеш.

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

С другой стороны, javascript — как хороший надёжный джип: везде проедет, достаточно мощный и быстрый, выглядит не менее красиво. На нём и за грибами, и на охоту, и на дачу, и по городу. А еще в нём просторно и стоит он не так дорого.

Из всего сказанного можно сделать вывод: решение должно вытекать из задачи, а не наоборот. Часто мы говорим: «А давайте сделаем что-нибудь интересное на флеш!» А правильно говорить просто: «А давайте сделаем что-нибудь интересное!» — а на чем и как, будут решать программисты.