Веб-дизайн - Возможности поиска

Возможности поиска

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

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

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

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

• Явно сообщать, в каких пределах будет осуществляться поиск. Эта информация должна быть указана в верхней части как страницы запроса, так и страницы с результатами поиска.
• Содержать ссылку на страницу поиска по всему сайту. Эта ссылка, опять же, должна быть как на странице запроса, так и на странице результатов. Причем на странице с результатами поиска она должна скрываться под вопросом типа: «Не нашли то, что искали? Попробуйте расширить границы поиска до размеров всего сайта». Переход по этой ссылке должен активизировать тот же самый запрос, но уже для всего сайта.

Предыдущая статья:
Веб-дизайн - Подсайты

Следующая статья:

Веб-дизайн - Подсайты

Подсайты

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

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

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

Рыбный Восторг - Купить => Регион - Красноярский край =>Красноярск

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

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

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

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

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

Предыдущая статья:

Веб-дизайн - Навигация

Следующая статья:

Веб-дизайн - Возможности поиска

Веб-дизайн - Навигация

 Навигация

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

• Где я нахожусь?
• Где я уже побывал?
• Куда я могу пойти?

Где я?

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

Текущее местонахождение пользователя должно быть показано на двух уровнях:

• относительно всего Интернета в целом
• относительно структуры сайта

Вы должны идентифицировать ваш сайт на каждой его странице, потому что все они входят в сообщество Интернет. С точки зрения пользователя, все сайты одинаковы; они используют технологию интерактивности, они загружаются (медленно) из Интернета и имеют приблизительно одинаковое строение. Эти сходства на самом деле хороши тем, что они позволяют людям переносить свои знания с одного сайта на другой. Мои исследования показали, что пользователи часто жалуются на сайты, в которых задействованы навигационные интерфейсы, отличные от представленных на большинстве веб-узлов.
Интернет в целом доминирует в опыте, потому что пользователи имеют тенденцию просматривать не больше 4-5 страниц на сайте за один раз. И проблема состоит в том, что пользователи не узнают, на каком сайте они находятся, до тех пор пока вы не скажете им об этом. Таким образом, правило номер один — это помещать логотип (или другой идентификатор сайта) на каждой странице. Логотип должен иметь постоянное местоположение (желательно в левом верхнем углу, если язык сайта предполагает чтение слева направо) и должен быть организован как ссылка на первую страницу.

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

Где я был?

В силу обезличенности стандартной веб-технологии сайту довольно сложно ответить на вопрос; «Где я уже побывал?», потому что сайт не знает этого, если не использует механизм записи в cookie или другие способы слежения за пользователем. К счастью, навигационные механизмы современных браузеров предоставляют некоторую помощь в этом вопросе. Кнопка Назад (Back) отправляет на предыдущую страницу, список History показывает страницы, которые вы посетили последними, а ссылки, по которым вы уже ходили, отмечаются другим цветом.
Я бы рекомендовал не изменять стандартные цвета ссылок, потому что пользователи поймут только те цвета, к которым они привыкли. Я протестировал множество сайтов с нестандартными цветами ссылок, и там пользователи никак не могли разобраться с тем, какие ссылки они уже использовали.

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

Куда я могу пойти?

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

Существует три вида которые могут быть использованы на странице:

• Встроенные ссылки - это традиционный подчеркнутый текст, указывающий, что по вопросу, обсуждаемому в данном месте, есть дополнительная информация.
• Структурные ссылки - это ссылки, которые указывают на другие уровни структуры сайта, а также на «братьев-сестер» или «детей» в иерархии. Важно, чтобы одни и те же структурные ссылки присутствовали на всех страницах, в этом случае пользователь понимает, чего ждать от структурной навигации. Естественно, конкретный пункт назначения каждой из структурных ссылок будет меняться от страницы к странице. Поэтому часто бывает лучше использовать ссылки, которые указывают имя конкретного места в дополнение к представлению структурного отношения между текущей страницей и страницей назначения. Проще говоря, лучше иметь ссылку «Вверх к Widget Product Family», чем просто ссылку «Переход на один уровеньвверх».
• Ассоциативные ссылки используются, чтобы дать пользователю совет типа «смотри также», относительно страниц, которые могут быть ему интересны, так как они похожи или связаны с текущей страницей.

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

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

Предыдущая статья:
Веб-дизайн - Главная страница в сравнении с внутренними

Следующая статья:
Веб-дизайн - Подсайты

Веб-дизайн - Главная страница в сравнении с внутренними

Главная страница в сравнении с внутренними

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

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

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

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

Ссылки вглубь сайта

Заставлять пользователей входить на сайт только через главную страницу — ошибочная стратегия. Так называемые «ссылки вглубь» deep linking позволяют другим сайтам направлять пользователя в конкретную точку, представляющую интерес именно для него. Каждый сайт - словно дом с тысячей дверей: есть масса возможностей попасть внутрь. Весьма гостеприимное место, не так ли?

Если же открыт только один парадный вход, а все остальные заблокированы, пользователи попадут на первую страницу, не имея четкого представления о том, как ваш сайт соотносится с их целям или их отправной точкой. Это объясняется тем, что первая страница никогда не может быть настолько же отвечающей конкретному запросу или полезной, как та страница, которая описывает продукт или отвечает на вопрос. Итак, 1:0 не в вашу пользу идем дальше: вы вынуждаете пользователей выучить вашу навигационную систему, специальные условные обозначения и каламбуры, прежде чем они смогут попасть туда, куда им нужно. Еще одно очко не в вашу пользу. Кто-нибудь из новых клиентов еще остался на сайте? Вероятно, нет.

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

Веб-дизайн - Главная страница

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

Главная (или домашняя) страница - это флагман сайта, и ее дизайн должен отличаться от дизайна всех остальных страниц. Конечно, первая и остальные страницы должны быть выдержаны в одном стиле, но есть и различия. Например, на главной странице не должно быть кнопки «На главную» (Ноте), так как не очень-то приятно нажимать на кнопку для того, чтобы попасть на ту же самую страницу. Также на главной странице обычно представлен более крупный логотип компании, ее название и название сайта. Первая непосредственная цель любой главной страницы - ответить на вопросы: «Где я нахожусь?» и «Что делает этот сайт? » - и оба они требуют прямого указания полного имени. Ответы не должны быть представлены в форме устрашающих официальных формулировок, которые можно встретить на чрезмерно бюрократичных сайтах. Лучше, если и по дизайну будет понятно, какой цели может служить этот сайт для нового пользователя.
Для нового пользователя, вероятно, самая важная функция первой страницы - это ответ на вопрос «Что же этот сайт делает?», а для большинства остальных первая страница - отправная точка для навигации по сайту. Обычно эта задача выполняется в виде списка разделов верхнего уровня иерархии, но особенности информационной архитектуры могут потребовать организовать входы верхнего уровня и по-другому.

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

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

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

Веб-дизайн - Разработка сайта

Разработка сайта

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

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

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

Веб-дизайн - Рисунки и фотографии

Рисунки и фотографии

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

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

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

Уменьшение размера изображения

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

К сожалению, при изменении масштаба изображения уменьшаются настолько, что могут становиться абсолютно неразборчивыми. Применение кадрировки (обрезки краев изображения) позволяет сохранить детализацию на исходном уровне, однако при этом утрачивается определенная часть содержащейся в изображении информации. Оптимальным выходом в данной ситуации может стать совместное использование обоих указанных методов. Например, для получения уменьшенного образца, размер которого составляет 10% от размера исходного изображения, вначале следует обрезать изображение до 32% относительно исходного размера, а затем уменьшить его масштаб до 32% от размера версии после кадрировки. Размер полученного в результате этого варианта изображения составляет 0,32 хО,32=0,1 от исходного.

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

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

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

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