Восприятие графики посетителями сайта

План

1. Понятие юзабилити

2. Золотое сечение

3. Восприятие графики посетителями сайта

Общая структура сайта

5. Подготовка макета сайта

Юзаби́лити (англ. usability — дословно «возможность использования», «способность быть использованным», «полезность») — понятие в микроэргономике, обозначающее итоговый уровень удобности предмета для использования в заявленных целях.

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

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

Как правило, на пользователя оказывают впечатление следующие факторы, которые производятся сайтом:

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

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

Золотое сечение

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

Рис. 1. Пропорции золотого сечения

Золотое сечение характеризуется следующим соотношением.

B : A = C : B

Учитывая, что C = A + B в итоге получим квадратное уравнение, корнем которого будет выражение . Примерно это значение будет равно 0,6. Кроме того, полученный результат можно заменить приближенным отношением.

2/3, 3/5, 5/8, 8/13, 13/21,...

Числитель и знаменатель представляют собой ряд чисел Фибоначчи. С увеличением значений повышается и точность результата.

С золотым сечением связаны некоторые особенности. Такое отношение подсознательно воспринимается человеком как наиболее гармоничное, поэтому золотое сечение с давних пор активно применяется в фотографии, живописи и архитектуре. Кроме того, золотое сечение встречается и в природе, в частности, тело человека подчинено этому правилу (рис. 2).

Рис. 2. Картина Леонардо да Винчи, изображающая пропорции человека

В дизайне золотое сечение используется в каноническом виде и в качестве «правило трети». Поясним насчет последнего термина на примере фотографии. Если условно разделить изображение на три части по вертикали и горизонтали, то внимание человека будет невольно фокусироваться в местах пересечения линий. Соответственно, на фотографии необходимо располагать объекты таким образом, чтобы они находились на этих линиях по горизонтали или вертикали или даже в местах их пересечений. «Правило трети» является упрощением правила золотого сечения, поскольку 2/3 — это первое приближенное отношение (рис. 3).

Рис. 3. Разделение фотографии на три части

Восприятие графики посетителями сайта

Графика, расположенная в верхней части веб-страницы, запоминается больше, чем графика, расположенная в нижней части веб-страницы. Здесь: 1 - верхняя часть страницы. Используется для размещения логотипа, эмблемы, названия фирмы, страницы и другой наиболее важной информации. 2,4 - область размещения гиперссылок или панели навигации сайта. 3 - область размещения текста. 5 - нижняя часть страницы. Используется для размещения контактной информации или иных данных, менее важных, по сравнению с размещенными в области 1.

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

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

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

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

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

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

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

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

· Один и тот же рисунок запоминается тем больше, чем чаще он встречается на сайте.

Общая структура сайта

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

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

Структура каталогов

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

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

иерархическая - страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.

• 
  произвольная - страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов.
  
  

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

Структура навигации

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

1. Где я нахожусь?

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

3. Как туда добраться?

4. Как вернуться назад?

НАВИГАЦИОННЫЙ ПУТЬ

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

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

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

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

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

Теперь рассмотрим основные системы навигации:

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

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

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

Главная Делаем сайт Оптимизируем сайт Раскручиваем сайт

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

Более оптимальным решением является следующее: оставить лишь вид кнопки (фоном), а текст на ней все-таки оформить в виде ссылки. Этого нетрудно добиться средствами CSS. Пример обыкновенной кнопочной навигации:

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

Пример навигационной карты для сайта магазина бытовой техники могла бы выглядеть так:

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

СТИЛИСТИЧЕСКИЕ ИКОНКИ

Иногда рекомендуется использовать специальные изображения, облегчающие понимание материала или навигацию по сайту. К примеру, перед всеми e-mail адресами вставляют небольшое изображения письма (20x10 точек). Это значительно улучшает внешний вид страницы и придает структуре моего сайта единый вид, что очень важно.

Заставки сайта

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

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

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

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

Главная страница должна отражать тематику сайта.

• Она должна быть интересной, чтобы пользователю захотелось пройтись по другим страницам сайта.
• Желательно разместить на ней функцию поиска по сайту.
• Пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня.
• Обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес).
• Сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.

Остальные страницы сайта

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

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

1. Следите за длиной страницы. Если она больше 2,5 экранов, разбейте страницу на две.

2. Разбивайте текст на абзацы, делайте отступы и поля. Выделяйте текст заголовками и подзаголовками. В общем, сделайте так, чтобы он легко воспринимался.

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

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

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

ОРФОГРАФИЯ И ПУНКТУАЦИЯ

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

ДЕФИС И ТИРЕ

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

Итак, мы рассмотрели все основные структурные части сайта.

Подготовка макета сайта

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

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

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

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

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

На самом деле, вы сами можете придумать эту структуру, но есть основные виды:

Опираясь на них, продумайте свою структуру.

Используя, например, программу photoshop, можно создать новый файл размером 800 Х 600 пикселов.

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

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

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

При нарезке следует помнить, что однотипные элементы следует сохранять в виде маленьких кусочков и использовать их при верстке, как фон.

Так например в моем примере, можно выделить следующие части и сохранить их отдельно для последующего использования (помечены красным):

Насчет фрагмента 2. Как известно, существует два вида дизайна сайтов: фиксированный и резиновый.

Фиксированный дизайн страницы остается неизменным независимо от монитора пользователя.

При резиновом дизайне страница растягивается и занимает все свободное место окна браузера.

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

Табличная верстка

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

В итоге в браузере вы должны увидеть картинку, максимально близкую к вашему макету.

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

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

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

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

Теперь надо подготовить наши 7 картинок.

Для удобства дадим им имена в виде im_01.gif - im_07.gif и сложим в папку с названием im.

Теперь создадим папку site на любом диске компьютера, поместим в нее папку im с картинками и сюда же будем складывать все наши страницы.

Создадим страницу index.html с каркасом нашей таблицы.

Определим структуру таблицы (она состоит из пяти строк и трех столбцов):

Первая строка состоит из трех столбцов, причем третий столбец объединяет три строки (ячейки 1, 2 и 3).
Вторая строка состоит из одного столбца, включающего в себя два (ячейка 4).
Третья строка состоит из одного столбца, включающего в себя два (ячейка 5).
Четвертая строка состоит из одного столбца, включающего в себя три (ячейка 6).
Пятая строка состоит из одного столбца, включающего в себя три (ячейка 7).

Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки, уберем рамку у таблицы (border="0").

Теперь нужно сделать меню (На макете это пятая ячейка) - что собой представляют пункты меню? Это ссылки на соответствующие страницы сайта.

Сами страницы мы создадим чуть позже, пока же дадим им названия:
например:

· делаем сайт - do.html

· оптимизируем сайт - opt.html

· раскручиваем сайт - unt.html

· зарабатываем - ear.html

Напишем наши пункты меню и сделаем их ссылками:

Потом займемся контентом, он занимает всю четвертую строку нашей таблицы.

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

Вот теперь шаблон нашего сайта готов. Создавайте страницы, соответствующие пунктам меню, скопируйте в них код этой страницы, меняйте только название страниц (теги <title></title>) и наполняйте их нужным контентом. Кстати, не забудьте на всех страницах сделать ссылку на главную страницу (index.html).

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

Блочная верстка

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

Будем считать, что они сделаны и посмотрим на примере, как из картинки сделать html-страницу, причем страницу сверстаем с помощью блоков.

Именно этим блочная верстка сайта и отличается от табличной, в основе которой лежит таблица.

Создадим папку, назовем ее, например, restaurant. В нее создадим и положим две страницы: index.html и style.css, а также папку images, куда будем складывать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.

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

Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:

Именно такие картинки, с такими названиями мы и сложим в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы.

У сайта может быть фиксированный либо резиновый дизайн. Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов. Теперь все готово для верстки, открываем index.html и пишем код:

<html> <head> <title> Блочная верстка сайта </title> </head> <body> <div id="main"> <div id="header"></div> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div> <div id="reklama"> <div id="reklama_top"></div> <div id="reklama_text"></div> <div id="reklama_bottom"></div> </div> <div id="content"></div> <div id="footer"></div> </div> </body> </html>

Теперь с помощью таблицы стилей зададим положение, размер и фон этих блоков.

Сейчас наша страница выглядит так:

Осталось наполнить страницу нужным текстом, и оформить его, например так: