Анализ популярных решений в Веб-дизайне. Роль стандартов de facto в Web-е

Анализ популярных решений в Веб-дизайне.

Роль стандартов de facto в Web-е

Examining the Role of De Facto Standards on the Web
автор: October 13, 2003 Heidi Adkisson & Boxes and Arrows
перевод: Александр Качанов

Не так давно я прочитала статью Якоба Нильсена "Когда плохой дизайн становится стандартом". Главная идея статьи, ошарашившая меня, заключалась в том, что существуют определенные наработанные приёмы дизайна, которые распространились по Web-у настолько, что уже стали стандартом de facto. Я задала себе вопрос - а какие из этих приемов получили наибольшее распространение? Существуют ли такие приемы, которые используются на всех (или почти всех) сайтах?

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

В своем исследовании (которое я проводила в качестве дипломной работы в Университете шт. Вашингтон), я систематически проанализировала интерфейсы 75 ведущих коммерческих веб-сайтов по 15 категориям потребительских товаров. Сайты, выбранные для исследования в каждой категории, являются лидерами с хорошо известными именами и качественным дизайном - короче, сайты, которые прямо-таки обязаны быть воплощением всего лучшего в веб-дизайне. По мере сбора данных я заносила их в реляционную базу данных. Работа по сбору данных оказалась на деле сложнее, чем предполагалось в начале. Сюда входило изучение всех элементов навигации на исследуемых страницах (всего их было 315), и создание описательной схемы, где были представлены все эти элементы.

Я собрала почти все данные за полторы недели упорного труда в мае 2002 года. Данные включали в себя тип и стиль навигации, месторасположение элементов навигации на странице, месторасположение основных элементов e-коммерции, используемые при этом названия и пиктограммы. Результаты показали, что лишь очень малое количество дизайнерских приемов используется более чем на 70% веб-сайтов. Их список представлен в следующей таблице:

Элемент	Частота
Логотип со ссылкой на главную страницу, расположенный в верхнем левом углу	100% сайтов
Функция "Поиск по сайту" в виде поля и кнопки	93% сайтов
Расположение ссылок на главные разделы сайта горизонтально в верху страницы	87% сайтов
Ссылки на главные разделы сайта представлены в виде графических изображений	76% сайтов
Метафора корзинки для доступа к списку сделанных покупок	72% сайтов

Некоторые элементы использовались на сайтах реже, чем ожидалось. Например лишь 45% страниц использовали ссылки-цепочки (breadcrumb navigation), и лишь 50% использовали синий цвет для ссылок. HTML-ссылки были подчеркнуты только на 62% сайтов, и только 37% страниц использовали другой цвет для обозначения посещенных ссылок. За исключением расположения логотипа компании в левом верхнем углу страницы больше не наблюдалось никакого ярко выраженного единства в расположении элементов е-коммерции, таких, например, как "Корзина", "Ваш счет", "Помощь".

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

С чего началась история со "стандартами"?

В настоящее время в web-е отсутствуют лидеры - немногочисленная группа доминирующих на рынке компаний, которые в обычной жизни определяют стандарты de facto. Тем не менее есть явные явные законодатели мод, например , чей дизайн широко копируется другими сайтами. И хотя собранные данные с учетом этой особенности не рассматривались, создавалось ощущение, что сайты, посвященные одной и той же категории товаров, повторяли друг друга по крайней мере визуально. Я подозреваю, что эти совпадения связаны с сомнительным убеждением, что определенные сайты более успешных конкурентов являются лучшим, что есть, образцом для подражания, т. е. "стандартом". В качестве примера подобного взаимного подражания (на момент написания статьи) посмотрите на сайты Crate & Barrel, Pottery Barn, и Restoration Hardware.

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

В какой момент дизайнерский прием становится настолько доминирующим, что отклонение от него ухудшает юзабилити сайта? Создается ли прочная традиция, когда ей следует 90% сайтов? Или для этого требуется меньшее их количество (80%, 70% или даже 60%)? Насколько сильно можно уклоняться от устоявшейся традиции, "стандарта" без ухудшения юзабилити сайта? Например исследование, проведенное Майклом Бернардом (Michael Bernard), ясно показывает, что пользователи ожидают обнаружить логотип компании слева вверху страницы. Но могут ли они быстро найти его, если он например расположен в центре страницы? А если справа вверху? Существуют ли такие аспекты веб-дизайна, для которых стандарты de facto гораздо важнее, чем для других с точки зрения юзабилити? Например, что важнее: соблюдать "стандартное" расположение меню или использовать "стандартные" названия для его пунктов?

Зачем нужны стандарты?

Аргументы в защиту стандартизации веб-сайтов основаны на тех преимуществах, которые стандарты дали миру обычных компьютерных программ: меньшая стоимость разработки, более высокое юзабилити. Стоимость разработки снижается потому, что разработчикам меньше приходится принимать решений по разработке интерфейса. В простых случаях они всегда могут положиться на стандарты, опубликованные создателями платформы (например, руководство " Aqua Human Interface Guidelines " от Apple или "Windows User Experience" от Microsoft). Стандартизированные (по крайней мере частично) приложения для определенной платформы всегда в своей сумме гораздо более удобны в использовании, потому что пользователь может перенести знания, полученные от работы с одной программой, на работу с другой.

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

Казалось бы формирование стандартов в дизайне можно считать хорошей тенденцией, полезной для повышения юзабилити Web-а. Однако нельзя традиции, устоявшиеся в создании обычных программ, слепо переносить в Web. За исключением компьютерных игр, большинство прикладных программ состоит из набора функций, призванных помочь пользователю выполнить определенную задачу. Почувствуйте разницу между Excel-ем и коммерческим сайтом, чьё назначение - продавать товары и раскручивать имидж компании. Для того, чтобы продавать товары и укреплять образ компании в сознании посетителей, требуется создать интеллектуальную и эмоциональную связь с ними. А для успешного создания этой связи иногда приходится отходить от устоявшейся практики.

Например, пользователи сайта кладут свои товары в "пакет" (shopping bag), а не в "тележку" (shopping cart). Данные же исследований показывают, что 72% сайтов используют термин " cart - тележка" (а не "bag - пакет/сумка" или "basket - корзинка").

Получается, что ссылка "shopping bag" на сайте идет вразрез с распространенной практикой. Между тем пакет гораздо лучше отражает то, как совершаются покупки в реальных магазинах Nordstrom. Вы не пользуетесь там тележкой, сама мысль об этом абсурдна - по реальному магазину вы ходите с элегантным пакетом с логотипом Nordstrom.

А вот еще один, намного более примечательный пример - сайт Spencer Gifts. Эта компания продает оригинальные вещи: праздничные костюмы, лампы в стиле "lava", аксессуары для вечеринок. В те дни, когда я проводила свое исследование, поиск на сайте был оформлен так, как показано на картинке. Роль кнопки "Искать" выполнял большой глаз. Подобное представление поиска является не только развлечением для пользователя, но еще и отражает жанр товаров, которыми торгует Spencer Gifts.

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

Для дизайнера же главное - собрать данные, чтобы:

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

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

Чтобы пролить свет на принятые сейчас в веб-дизайне традиции, я опубликовала результаты своих исследований на сайте "Web Design Practices". На сайте также размещен список ссылок на другие подобные работы. Надеюсь, он будет постоянно пополняться по мере проведения новых исследований. Своим сайтом Web Design Practices (Анализ популярных решений в web-дизайне) я ставила себе целью создать полезный ресурс для сообщества веб-дизайнеров, который бы подсказывал (но не диктовал) им дизайнерские решения.

Хейди Адкиссон

Heidi Adkisson работает консультантом в компании Blink Interactive Architects (г. Сиэтл, шт. Вашингтон), где она занимается исследованием, дизайном, и тестированием юзабилити. Клиентами ее компании являются Apple Computer, InfoSpace, Real Networks, и Lexis-Nexis. Более подробную информацию о ее исследовании можно получить на сайте "Web Design Practices" (Анализ популярных решений в web-дизайне).

Когда плохой дизайн становится стандартом

When Bad Design Elements Become the Standard (November 14, 1999)
автор: Якоб Нильсен
перевод: Александр Качанов

Создавать сайты сейчас стало проще: если вы не знаете, как вам оформить определенный элемент дизайна страницы, все что вам нужно сделать, это зайти на двадцать наиболее посещаемых сайтов в Интернете и посмотреть, как этот элемент сделали они.

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

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

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

Организация информации и реализация задач: стандартов нет

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

Некоторые аспекты информационной архитектуры уже стали принимать очертания общепринятых правил: большинство корпоративных сайтов непременно имеют разделы "Продукты/Products" и "О компании/About Company". Более того, раздел "О компании " как правило содержит информацию для инвесторов и посетителей, ищущих работу, а также общую информацию об истории компании и ее руководстве. Адреса офисов компании и карты проезда к ним также располагают в разделе "О компании", но это не считается пока устоявшимся правилом, так как, например, многие сайты используют другую информационную архитектуру и помещают эти данные в особый раздел "Контакты". Так как пользователи часто ожидают найти адрес компании в разделе "О компании", веб-сайтам, поместившие эти данные в другой раздел, следует сделать перекрестную ссылку с раздела "О компании" на раздел "Контакты".

Примеры устоявшихся правил дизайна

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

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

Синий текст в Web означает "щелкай здесь", поэтому оставляя непосещенные ссылки синими, вы не ставите перед пользователем никаких сомнений в том, что куда они могут пойти дальше. Гораздо больше времени экономится из-за того, что посетители быстро догадываются, куда они могут пойти со страницы, чем теряется из-за того, что несколько слов на странице оформлены цветом, замедляющим чтение на несколько миллисекунд Что еще более важно, это отличие непосещенных ссылок (синий цвет) и посещенных (лиловый). Это отличие помогает посетителям понять структуру веб-сайта и не потеряться в путешествии по нему. На сайтах, где цвета ссылок изменены, мы часто наблюдаем, как посетители возвращаются на одну и ту же страницу снова и снова только потому, что они не понимают по цвету ссылки, что уже были на этой странице. Эта дополнительная путаница, замедленная навигация по сайту, снижение вероятности, что пользователи смогут найти нужную страницу - все это вы получаете взамен того, что просто поменяете традиционные цвета ссылок.

Закладки для разделов

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

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

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

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

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

Левая полоса навигации

Первым "Желтую Лихорадку" в веб-дизайне подхватил веб-сайт CNET (где-то в 1996 году), и с тех пор эта болезнь заразила такое количество сайтов, что превратилась практически в незыблемое правило: у каждого сайта теперь вдоль левого края страницы тянется сверху вниз цветная полоска, на которой располагаются главные ссылки навигации.

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

Самое интересное, что сам сайт CNET оправился от Желтой Лихорадки в 1999 году, и теперь использует дизайн, в котором ссылки навигации сконцентрированы вверху страницы. Благодаря этому все оставшееся пространство на экране отдано под материалы сайта. Их новый дизайн мне нравится гораздо больше.

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

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

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

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

Ссылки-цепочки

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

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

Пока не существует стандарта относительно того, как обозначать переход от одного уровня иерархии к другому в ссылках-цепочках. На своем сайте я уже четыре года пользуюсь стрелками. А до этого я пользовался двоеточиями, так, как это сейчас делает CNET. Yahoo и ZDNet используют символ >, а другие сайты используют косую черту "/". Стандарта пока нет, и пока нет никаких причин считать, что один символ чем-то лучше другого.

Если какой-либо из этих символов получит наибольшую популярность хотя бы на 60% сайтов, тогда я порекомендую и вам его использовать. Сегодня же, я бы сказал, что все символы хороши - ":", ">". "/" и стрелки. Но только не пытайтесь придумать еще какой-нибудь другой символ. Например, символом "вертикальная черта" ("|") принято обозначать два равных варианта выбора, и он не может использоваться для обозначения перемещения.

Якоб Нильсен

Когда плохой дизайн становится стандартом

When Bad Design Elements Become the Standard (November 14, 1999)
автор: Якоб Нильсен
перевод: Александр Качанов

Создавать сайты сейчас стало проще: если вы не знаете, как вам оформить определенный элемент дизайна страницы, все что вам нужно сделать, это зайти на двадцать наиболее посещаемых сайтов в Интернете и посмотреть, как этот элемент сделали они.

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

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

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

Организация информации и реализация задач: стандартов нет

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

Некоторые аспекты информационной архитектуры уже стали принимать очертания общепринятых правил: большинство корпоративных сайтов непременно имеют разделы "Продукты/Products" и "О компании/About Company". Более того, раздел "О компании " как правило содержит информацию для инвесторов и посетителей, ищущих работу, а также общую информацию об истории компании и ее руководстве. Адреса офисов компании и карты проезда к ним также располагают в разделе "О компании", но это не считается пока устоявшимся правилом, так как, например, многие сайты используют другую информационную архитектуру и помещают эти данные в особый раздел "Контакты". Так как пользователи часто ожидают найти адрес компании в разделе "О компании", веб-сайтам, поместившие эти данные в другой раздел, следует сделать перекрестную ссылку с раздела "О компании" на раздел "Контакты".

Примеры устоявшихся правил дизайна

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

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

Синий текст в Web означает "щелкай здесь", поэтому оставляя непосещенные ссылки синими, вы не ставите перед пользователем никаких сомнений в том, что куда они могут пойти дальше. Гораздо больше времени экономится из-за того, что посетители быстро догадываются, куда они могут пойти со страницы, чем теряется из-за того, что несколько слов на странице оформлены цветом, замедляющим чтение на несколько миллисекунд Что еще более важно, это отличие непосещенных ссылок (синий цвет) и посещенных (лиловый). Это отличие помогает посетителям понять структуру веб-сайта и не потеряться в путешествии по нему. На сайтах, где цвета ссылок изменены, мы часто наблюдаем, как посетители возвращаются на одну и ту же страницу снова и снова только потому, что они не понимают по цвету ссылки, что уже были на этой странице. Эта дополнительная путаница, замедленная навигация по сайту, снижение вероятности, что пользователи смогут найти нужную страницу - все это вы получаете взамен того, что просто поменяете традиционные цвета ссылок.

Закладки для разделов

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

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

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

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

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

Левая полоса навигации

Первым "Желтую Лихорадку" в веб-дизайне подхватил веб-сайт CNET (где-то в 1996 году), и с тех пор эта болезнь заразила такое количество сайтов, что превратилась практически в незыблемое правило: у каждого сайта теперь вдоль левого края страницы тянется сверху вниз цветная полоска, на которой располагаются главные ссылки навигации.

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

Самое интересное, что сам сайт CNET оправился от Желтой Лихорадки в 1999 году, и теперь использует дизайн, в котором ссылки навигации сконцентрированы вверху страницы. Благодаря этому все оставшееся пространство на экране отдано под материалы сайта. Их новый дизайн мне нравится гораздо больше.

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

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

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

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

Ссылки-цепочки

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

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

Пока не существует стандарта относительно того, как обозначать переход от одного уровня иерархии к другому в ссылках-цепочках. На своем сайте я уже четыре года пользуюсь стрелками. А до этого я пользовался двоеточиями, так, как это сейчас делает CNET. Yahoo и ZDNet используют символ >, а другие сайты используют косую черту "/". Стандарта пока нет, и пока нет никаких причин считать, что один символ чем-то лучше другого.

Если какой-либо из этих символов получит наибольшую популярность хотя бы на 60% сайтов, тогда я порекомендую и вам его использовать. Сегодня же, я бы сказал, что все символы хороши - ":", ">". "/" и стрелки. Но только не пытайтесь придумать еще какой-нибудь другой символ. Например, символом "вертикальная черта" ("|") принято обозначать два равных варианта выбора, и он не может использоваться для обозначения перемещения.

Якоб Нильсен

Как писать заявку на разработку Web-узла

перевод: Александр Качанов

Пожалуй самым главным источником недоразумений и проблем, возникающих между клиентами и компаниями-разработчиками, является плохо составленная Request for Proposal (дословно: заявка на получение предложений - далее используется термин "заявка").

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

Большая часть проблемы связана с тем, что трудно выразить на бумаге все подробности и возможности проекта по разработке Web-узла, когда нет еще самой идеи того, что вам нужно и как это все вместе будет работать. Кроме того, разработка Web-узлов - сравнительно новый вид деятельности и потому не удивительно, что большинство клиентов не имеют большого опыта в написании заявок на разработку Интернет-проектов. Заказ на постройку моста или установку сети - сильно отличается от заказа на разработку Web-проекта. В идеале компании следует обратиться к знающему консультанту по вопросам Интернет, который поможет им обрисовать и определить, что должно входить в их проект перед тем, как будет оформляться заявка. Хороший консультант может помочь написать такую заявку, которая упростит процесс разработки для обеих сторон. Жаль, что я не могу вставить сюда список хороших, знающих консультантов, к которым вы могли бы обратиться. К сожалению (похоже, это слово я использую в этой статье чаще всего) хорошего консультанта не только трудно найти, но и трудно определить. Крутые Web-разработчики скажут вам, что они - единственные консультанты, которые вам нужны, а независимый консультант может только повредить, не представив вам ничего, кроме скучной презентации в PowerPoint, зато выставит потом длинный-предлинный грабительский счет.

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

В этом предварительном документе необходимо сделать акцент на цели и ваше видение - что вы хотите, чтобы делал ваш узел? Каковы вообще причины создания Web-узла для вашей компании? Это должно быть не больше чем, описание видения проекта, и выглядеть примерно так:

"Рога и Копыта" ищет компанию, которая поможет создать Web-узел, выполняющий следующие функции: - Создать и укрепить известность марки компании XYZ по всему миру; Продавать продукцию XYZ; - Обеспечивать обслуживание клиентов. Все компании, заинтересовавшиеся предложением, могут обращаться к г.-ну Бендеру до 10 марта 1999 года.

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

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

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

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

Предложения должны содержать следующие разделы:

Вступление, в котором приводится краткое описание вашего подхода к разработке проекта и цены Информация о компании, включая финансовые результаты Описании квалификации, включая список предыдущих клиентов с их контактной информацией и URL-ами. Описание вашего процесса разработки Средства и графики доставки набросков Этапы проекта Контрольные точки Контроль качества Тестирование Предполагаемый состав команды и их квалификация Предлагаемый график выполнения работ Стоимость и детали оплаты Сроки и условия

Можно задать еще кучу вопросов, но помните, что ваша задача - выбрать ту компанию, которой вы доверяете. Во время разработки вы можете допустить ошибки, и они могут допустить ошибки, вы опоздаете с доставкой материала, и они могут опоздать. Вам необходимо выбрать компанию, которая будет прощать вам ваши грехи, а вы - их. Можно конечно попытаться, но включить в заявку или в ответ на нее абсолютно ВСЕ - невозможно. Предложение-ответ должен содержать описание того, как вы будете работать вместе. Все клиенты почти всегда вначале обещают, что предоставят все, что необходимо для проекта в виде маленькой кучки, и вы можете подумать, что и у вас также получится. ЭТОГО НИКОГДА НЕ БЫВАЕТ! Именно клиент первым с доставкой и запаздывает. В вашей заявке должно быть написано, что должно произойти, когда происходит задержка с вашей или их стороны.

Убедитесь, что в вашей заявке имеется график рассмотрения ответов и процесса производства. Например:

10 марта - Разослан "заказ-заявка" 20 марта - крайний срок получения ответов 22 марта - составлен краткий список участников отбора 30 марта - разослан "заказ-заявка" участникам из краткого списка 15 апреля - крайний срок получения ответов на "заказ-заявку" 20 апреля - уведомление победителя о принятии его предложения 22 апреля - выписан заказ-наряд на выполнение работ по проекту 24 апреля - общее первое собрание по проекту 30 мая - начало разработки проекта 30 июля - узел публикуется в сети

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

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

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

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

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

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

«О нас» - как представлять информацию об организации на сайте

'About Us' -- Presenting Information About an Organization on Its Website
автор: 2003.10.27 Якоб Нильсен
перевод: 2004.08.29 Максим Россомахин

Вкратце: Участникам теста предлагалось найти на различных веб-сайтах информацию о компании, начиная от ее истории до биографий ее руководящего состава и адресов офисов. Лишь в 70% случаев их поиски были успешными. Это означает, что еще многое предстоит сделать, чтобы улучшить юзабилити страниц "О нас".

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

Довольно часто на сайтах можно встретить раздел "О нас", и я рекомендую иметь на главной странице ссылку "О <имя компании>" или "О нас". Ссылка не должна сильно выделяться на фоне других, а просто должна присутствовать и быть легко заметной. В нашем исследовании пользователи с трудом находили информацию о компании, если ссылка была названа необычным образом, например "Информационный центр", либо располагалась рядом с графическим элементом, выглядела, как реклама, и потому была проигнорирована.

Тест с пользователями

Дабы выяснить, как пользователи находят и воспринимают информацию о компаниях на веб-сайтах, мы провели исследование сайтов 15 организаций из 5 общих категорий:

Большие компании (Allstate, Lexmark, Bristol-Myers Squibb, и Sempra Energy) Средние компании (Constellation Brands, Titan, и Pier 1 Imports) Маленькие компании (GiftTree, OneCall, и Team Industrial Services) Государственные агентства (Министерство жилищного строительства и городского хозяйства, Министерство внутренних дел и Управление по делам малого бизнеса) Некоммерческие организации (Национальное общество по борьбе с рассеянным склерозом и Международный детский фонд)

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

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

Число удачных попыток: приемлемое

В среднем, в 70% случаях пользователи успешно справились с выполнением поставленных конкретных задач по поиску информации. Это довольно высокий процент успешных попыток, если сравнить с нашими другими исследованиями юзабилити, в которых этот показатель обычно располагался в интервале от 55 до 65%.

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

Особые сложности выявились при поиске самых основных сведений о компании:

Состав верхнего управляющего звена: 59% успеха Точная контактная информация: 62% успеха Философия организации: 59% успеха Основные исторические вехи: 58% успеха

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

Чем занимается компания

Пользователи довольно успешно нашли ответ на основной вопрос: чем занимается компания? Эта задача увенчалась успехом в 90% случаев, но такой результат ещё ничего не говорит о качестве сайтов.

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

По итогам специального исследования юзабилити главных страниц корпоративных сайтов, в среднем лишь 36% сайтов следовало рекомендации, советовавшей кратко указывать на главной странице сайта цели компании. Слоганы также грешили пустой болтовнёй. Лишь 27% сайтов обладало формулировками, правильными с точки зрения юзабилити, т. е. такими, которые давали бы ясное (с точки зрения покупателя) представление о сути предлагаемых услуг и в то же время позволяли выделить компанию на фоне её основных конкурентов.

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

Помощь непосвящённым

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

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

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

Коммерческие сайты и сайты онлайновых услуг

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

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

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

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

Задушевный разговор

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

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

Хороший раздел "О нас" с легкостью даст ответ на этот вопрос. Чётко скажите, чем вы занимаетесь, и это поможет пользователям понять сайт в целом. Конечно, лишь сайт целиком представляет вас вашим клиентам. Люди просматривают страницы с описаниями товаров, читают тексты, оценивая вашу компанию как возможного продавца, делового партнёра, работодателя, инвестора, или (в случае благотворительной деятельности) получателя пожертвований. Общение не сводится лишь к одному разделу "О нас". Но при наличии места, где приводятся различные факты о вашей компании, её история и ее стремления, пользователи легко смогут собрать контент сайта воедино.

Дополнительные материалы

124-х страничный доклад об исследовании юзабилити раздела "О нас", содержащий 50 советов и 85 иллюстраций.

Полное руководство по представлению информации о компании на её сайте, созданное по итогам работы конференции User Experience 2004 conference, проходившей в Лас-Вегасе и Амстердаме.

Якоб Нильсен

Роль стандартов de facto в Web-е

Examining the Role of De Facto Standards on the Web
автор: October 13, 2003 Heidi Adkisson & Boxes and Arrows
перевод: Александр Качанов

Не так давно я прочитала статью Якоба Нильсена "Когда плохой дизайн становится стандартом". Главная идея статьи, ошарашившая меня, заключалась в том, что существуют определенные наработанные приёмы дизайна, которые распространились по Web-у настолько, что уже стали стандартом de facto. Я задала себе вопрос - а какие из этих приемов получили наибольшее распространение? Существуют ли такие приемы, которые используются на всех (или почти всех) сайтах?

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

В своем исследовании (которое я проводила в качестве дипломной работы в Университете шт. Вашингтон), я систематически проанализировала интерфейсы 75 ведущих коммерческих веб-сайтов по 15 категориям потребительских товаров. Сайты, выбранные для исследования в каждой категории, являются лидерами с хорошо известными именами и качественным дизайном - короче, сайты, которые прямо-таки обязаны быть воплощением всего лучшего в веб-дизайне. По мере сбора данных я заносила их в реляционную базу данных. Работа по сбору данных оказалась на деле сложнее, чем предполагалось в начале. Сюда входило изучение всех элементов навигации на исследуемых страницах (всего их было 315), и создание описательной схемы, где были представлены все эти элементы.

Я собрала почти все данные за полторы недели упорного труда в мае 2002 года. Данные включали в себя тип и стиль навигации, месторасположение элементов навигации на странице, месторасположение основных элементов e-коммерции, используемые при этом названия и пиктограммы. Результаты показали, что лишь очень малое количество дизайнерских приемов используется более чем на 70% веб-сайтов. Их список представлен в следующей таблице:

Элемент	Частота
Логотип со ссылкой на главную страницу, расположенный в верхнем левом углу	100% сайтов
Функция "Поиск по сайту" в виде поля и кнопки	93% сайтов
Расположение ссылок на главные разделы сайта горизонтально в верху страницы	87% сайтов
Ссылки на главные разделы сайта представлены в виде графических изображений	76% сайтов
Метафора корзинки для доступа к списку сделанных покупок	72% сайтов

Некоторые элементы использовались на сайтах реже, чем ожидалось. Например лишь 45% страниц использовали ссылки-цепочки (breadcrumb navigation), и лишь 50% использовали синий цвет для ссылок. HTML-ссылки были подчеркнуты только на 62% сайтов, и только 37% страниц использовали другой цвет для обозначения посещенных ссылок. За исключением расположения логотипа компании в левом верхнем углу страницы больше не наблюдалось никакого ярко выраженного единства в расположении элементов е-коммерции, таких, например, как "Корзина", "Ваш счет", "Помощь".

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

С чего началась история со "стандартами"?

В настоящее время в web-е отсутствуют лидеры - немногочисленная группа доминирующих на рынке компаний, которые в обычной жизни определяют стандарты de facto. Тем не менее есть явные явные законодатели мод, например , чей дизайн широко копируется другими сайтами. И хотя собранные данные с учетом этой особенности не рассматривались, создавалось ощущение, что сайты, посвященные одной и той же категории товаров, повторяли друг друга по крайней мере визуально. Я подозреваю, что эти совпадения связаны с сомнительным убеждением, что определенные сайты более успешных конкурентов являются лучшим, что есть, образцом для подражания, т. е. "стандартом". В качестве примера подобного взаимного подражания (на момент написания статьи) посмотрите на сайты Crate & Barrel, Pottery Barn, и Restoration Hardware.

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

В какой момент дизайнерский прием становится настолько доминирующим, что отклонение от него ухудшает юзабилити сайта? Создается ли прочная традиция, когда ей следует 90% сайтов? Или для этого требуется меньшее их количество (80%, 70% или даже 60%)? Насколько сильно можно уклоняться от устоявшейся традиции, "стандарта" без ухудшения юзабилити сайта? Например исследование, проведенное Майклом Бернардом (Michael Bernard), ясно показывает, что пользователи ожидают обнаружить логотип компании слева вверху страницы. Но могут ли они быстро найти его, если он например расположен в центре страницы? А если справа вверху? Существуют ли такие аспекты веб-дизайна, для которых стандарты de facto гораздо важнее, чем для других с точки зрения юзабилити? Например, что важнее: соблюдать "стандартное" расположение меню или использовать "стандартные" названия для его пунктов?

Зачем нужны стандарты?

Аргументы в защиту стандартизации веб-сайтов основаны на тех преимуществах, которые стандарты дали миру обычных компьютерных программ: меньшая стоимость разработки, более высокое юзабилити. Стоимость разработки снижается потому, что разработчикам меньше приходится принимать решений по разработке интерфейса. В простых случаях они всегда могут положиться на стандарты, опубликованные создателями платформы (например, руководство " Aqua Human Interface Guidelines " от Apple или "Windows User Experience" от Microsoft). Стандартизированные (по крайней мере частично) приложения для определенной платформы всегда в своей сумме гораздо более удобны в использовании, потому что пользователь может перенести знания, полученные от работы с одной программой, на работу с другой.

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

Казалось бы формирование стандартов в дизайне можно считать хорошей тенденцией, полезной для повышения юзабилити Web-а. Однако нельзя традиции, устоявшиеся в создании обычных программ, слепо переносить в Web. За исключением компьютерных игр, большинство прикладных программ состоит из набора функций, призванных помочь пользователю выполнить определенную задачу. Почувствуйте разницу между Excel-ем и коммерческим сайтом, чьё назначение - продавать товары и раскручивать имидж компании. Для того, чтобы продавать товары и укреплять образ компании в сознании посетителей, требуется создать интеллектуальную и эмоциональную связь с ними. А для успешного создания этой связи иногда приходится отходить от устоявшейся практики.

Например, пользователи сайта кладут свои товары в "пакет" (shopping bag), а не в "тележку" (shopping cart). Данные же исследований показывают, что 72% сайтов используют термин " cart - тележка" (а не "bag - пакет/сумка" или "basket - корзинка").

Получается, что ссылка "shopping bag" на сайте идет вразрез с распространенной практикой. Между тем пакет гораздо лучше отражает то, как совершаются покупки в реальных магазинах Nordstrom. Вы не пользуетесь там тележкой, сама мысль об этом абсурдна - по реальному магазину вы ходите с элегантным пакетом с логотипом Nordstrom.

А вот еще один, намного более примечательный пример - сайт Spencer Gifts. Эта компания продает оригинальные вещи: праздничные костюмы, лампы в стиле "lava", аксессуары для вечеринок. В те дни, когда я проводила свое исследование, поиск на сайте был оформлен так, как показано на картинке. Роль кнопки "Искать" выполнял большой глаз. Подобное представление поиска является не только развлечением для пользователя, но еще и отражает жанр товаров, которыми торгует Spencer Gifts.

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

Для дизайнера же главное - собрать данные, чтобы:

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

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

Чтобы пролить свет на принятые сейчас в веб-дизайне традиции, я опубликовала результаты своих исследований на сайте "Web Design Practices". На сайте также размещен список ссылок на другие подобные работы. Надеюсь, он будет постоянно пополняться по мере проведения новых исследований. Своим сайтом Web Design Practices (Анализ популярных решений в web-дизайне) я ставила себе целью создать полезный ресурс для сообщества веб-дизайнеров, который бы подсказывал (но не диктовал) им дизайнерские решения.

Хейди Адкиссон

Heidi Adkisson работает консультантом в компании Blink Interactive Architects (г. Сиэтл, шт. Вашингтон), где она занимается исследованием, дизайном, и тестированием юзабилити. Клиентами ее компании являются Apple Computer, InfoSpace, Real Networks, и Lexis-Nexis. Более подробную информацию о ее исследовании можно получить на сайте "Web Design Practices" (Анализ популярных решений в web-дизайне).

Коммерческий сайт

Interaction Design Patterns (Web)
автор: 2002 Martijn van Welie
перевод: Александр Качанов

(назад к списку)

С сайта www.

Задача

Пользователь хочет купить товар

Условия

У вас сайт, на котором вы продаете товар или услуги. Количество продаваемого товара неважно. Этот шаблон применим к любому сайту-магазину.

Решение

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

Основаная идея коммерческого веб-сайта такая же, как и идея обычного магазина. Посетитель смотрит/ищет товар, кладет его в корзинку а потом платит за него. Реальное отличие лишь в том, что посетители не могут "потрогать" товар перед покупкой. Поэтому для успешной деятельности коммерческий веб-сайт просто обязан обеспечить посетителю комфорт. Покупатель должен ДОСКОНАЛЬНО знать, что он покупает. Используйте для этого фотографии или анимацию, покажите товар со всех сторон. Иногда даже помогает 3-хмерная модель товара, которую покупатель может повращать и таким образом виртуально дотронуться до товара.

Коммерческий сайт базируется на следующих принципах:

База данных с описаниями товаров База данных клиентов-посетителей, хранящая информацию о них и записывающая весь процесс покупок Какой-либо механизм торговой корзинки

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

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

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

Процедура покупки | Первая часть процедуры покупки состоит в том, чтобы убедить посетителя что-то купить. Если вы хотите что-то продать, вам надо положить свой товар прямо под нос посетителю, и естественно не перестараться в этом. Покажите, что у вас есть в вашем магазине, что пользуется спросом, что из вашего товара самое прикольное, самое новое и т. д. Например это можно сделать с помощью шаблона "Список популярности (Hotlist)". Когда вы показываете посетителю товар, постарайтесь, чтобы изображение товара как можно ближе походило на оригинал. Еще лучше, если посетитель может виртуально "прикоснуться" к товару, посмотреть как он работает. Чтобы помочь посетителю выбрать нужный товар из ассортимента воспользуйтесь шаблоном "Сравнение товаров".

Если у вас на сайте предусмотрена Идентификация, сайт можно настроить так, чтобы ассортимент предлагаемого посетителю товара совпадал с его вкусами. Рекомендации могут быть основаны на том, какие покупки посетитель совершал ранее, либо на том, какие товары находятся в его списке отложенных товаров (wish list).

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

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

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

Почему

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

Еще примеры

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

Используют

Другие шаблоны

(назад к списку)