Дизайн и юзабилити-тестирование

Размещено на http://www.allbest.ru/

Дизайн и юзабилити-тестирование

1. Структура отдельной страницы

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

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

Рисунок 1 - Макет главной страницы сайта: 1 - название сайта; 2 - модуль поиска; 3 - основная навигация; 4 - краткая информация о методике преподавания с ссылкой на раздел «Методика»; 5 - информация о преподавателях курсов, контактные данные; 6 - ссылка на страницу с тестом для оценки уровня знания владения английским языком; 7 - логотип курсов английского языка «Коммунмкация ПЛЮС»; 8 - краткая информация о методике преподавания с ссылкой на раздел «Методика»; 9 - навигация «Полезные ресурсы»; 10 - анонсы последних новостей (2 анонса); 11 - дублирующая навигация

Страница сайта условно разбита на три части: «шапку», левую и правую часть.

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

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

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

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

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

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

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

Структура раздела «О НАС»: 1 - название сайта; 2 - модуль поиска; 3 - основная навигация; 4 - дополнительная навигация «О нас»: преподаватели, расписание, условия обучения; 5 - логотип курсов английского языка «Коммунмкация ПЛЮС»; 7 - контентаная область раздела; 7 - фотогалерея «Прогулка по Великобритании»; 8 - дублирующая навигация

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

2. Стилевое и композиционное решения

2.1 Цветовое решение

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

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

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

2.2 Характеристики цветов

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

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

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

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

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

2.3 Шрифтовое решение

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

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

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

Verdana, Tahoma, семейство sans-serif. Tahoma - гротеск. Очень хорошо смотрится в полосе и на экране. Гарнитура Verdana является примером шрифта без засечек. Буквы в этом шрифте имеют геометрическую форму, они одинаковой толщины, аккуратные и открытые. Такой шрифт, по мнению психологов, положительно влияют на визуальное восприятие. Шрифты данного семейства являются самыми удобно читаемыми и разборчивыми.

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

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

2.4 Изготовление графических элементов и их оптимизация

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

Наибольший объем графических элементов традиционно содержит шапка сайта, а также фотогалерея. Элементы сохранялись в формате gif, jpeg.

Для декоративного выделение элементов меню в некоторых видах навигации и ссылках использовались изображения стрелок и иконки с изображением флага Великобритании. Они сохранены в формате gif с восьми битным цветом.

Для обработки графических элементов использовалось следующее программное обеспечение:

Adobe Photoshop CS3. Один из самых популярных и профессиональных редакторов для работы с растровой графикой. С помощью этого пакета изменялись параметры изображений. Выполнялась их обрезка; убирались дефекты изображения, компоновка макета сайта.

Corel DRAW X4. Один из самых популярных и профессиональных редакторов для работы с векторной графикой. С помощью этого пакета осуществлялась разработка логотипа, макета сайта.

Одним из важнейших элементов на странице является шапка сайта.

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

Рисунок 2.2 - Изображение флага

Рисунок 2.3 - Изображение здания парламента

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

Поскольку основной цвет станиц сайта синий, то шапка монтировалась с использованием оттенка синего цвета # 365c9b.

Технически компоновка осуществлялась путем создания трех слоев, предназначенных для хранения изображений. В самом верхнем слое с фотографией флага был создан эффект прозрачность 60% и выбран режим наложения Darker Color. Благодаря этому получилась цельная картинка Британского флага на синем фоне прямоугольника. Для самого нижнего слоя с изображением парламента созданы настраиваемые слои Levels и HUE, благодаря которым был отрегулирован контраст, яркость, настроен необходимый цвет. После склеивания слоев сохраняем рисунок для Web.

Готовая шапка сайта представлена на рисунке 2.4.

Рисунок 2.4 - Готовая шапка сайта

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

Создание логотипа сайта.

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

Основные требования, предъявляемые к логотипу:

Запоминаемость

Универсальность

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

Ассоциативность

Выразительность

Функциональность

Лаконичность

Идеальный логотип должен решать 6 основополагающих функций:

Фактическую. Это контакт между носителем и получателем.

Экспрессивную. Визуальное сообщение мисси носителя: идентичность и характеристики компании.

Референтную. Информация о продукте.

Импрессивную. Впечатление от увиденного: воздействие на потребителя.

Поэтическую. Эмоциональный позыв: эстетическое восприятие.

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

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

В качестве программы, в которой велась разработка, был выбран один из самых популярных пакетов векторной графики Corel DRAW X4.

Сначала необходимо определить главный графический элемент в композиции будущего логотипа. Если провести своеобразный опрос на тему, с каким символом ассоциируется Великобритания, то, наверное, большинство людей дали бы ответ, что это главная башня Лондона - «Биг-Бен» (Биг-Бен (англ. BigBen) - колокол в часах часовой башни в Лондоне. Расширительно именем Биг-Бен именуются также часы и башня целиком. На сегодняшний день башня - один из самых узнаваемых символов Великобритании, часто используемый в рекламе, кинофильмах и т.д.) [8]. Останавливаю свой выбор на данном символе.

Далее необходимо определить форму для будущего знака. Геометрия «Биг-Бен» это в основном прямые линии, поэтому наиболее подходящим видится удлиненный прямоугольник. Для облегчения задачи размещаю в нарисованной форме подходящую фотографию «Биг-Бен» и вооружившись инструментом Pen обрисовываю основные элементы башни (стены, крышу, часы). Удаляю фотографию. После прорисовки получился узнаваемый, но несколько перегруженный лишними элементами символ. После определенной манипуляции с векторами получаю подходящий результат. Однако знак должен быть не только узнаваемым, но и оригинальным. Для стилизации полученных линий лучше всего подойдет инструмент Corel Artistic Media Tool. Выделяю линии, настраиваю подходящую кисть и в результате получаю узнаваемый оригинальный символ главной башни Лондона. Определяю подходящие шрифты и добавляю текст курсы английского языка «Коммуникация ПЛЮС». Как было сказано выше, выбор подходящего шрифта очень непростая задача и для ее решения, в данном случае, необходимо тщательно проанализировать полученную геометрию главного элемента композиции башни «Биг-Бен». После стилизации, в линиях «Биг-Бена» появились как острые, так и скругленные узлы, символ приобрел мягкие очертания. Значит и будущий шрифт также должен соответствовать похожим характеристикам. В результате выбираю гарнитуру Comic Sans MS. После добавления текста в геометрию формы, компоную его с символом «Биг-Бен». Для решения данной задачи включаю инструмент сетка, и, используя инструменты группы Transform, позиционирую элементы в форме в соответствии с правилами золотого сечения. В результате немного меняю форму «Биг-Бен», вписывая вместо правой стенки вертикально набранное слово ПЛЮС. Вертикальное написание слова (напоминающее стенку башни) и геометрия шрифта выполняют объединяющую роль символа «Биг-Бен» с набранным текстом, расположение которого напоминая символ +. Далее добавляем цвет (см. раздел 2.2.1 Цветовое решение). Полученный логотип переводится в формат gif и в дальнейшем используется для компоновки страниц сайта.

3. Анализ юзабилити макета

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

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

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

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

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

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

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

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

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

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

Список источников

сайт логотип юзабилити макет

1. Сырых, Ю. Рисуем сайт, который продает / Ю.А. Сырых. - М.: Вильямс, 2008. - 304 с.

2. Джамеа, К. Эффективный самоучитель по креативному Web-дизайну / К. Джамса. - М.: ДиаСофтЮП, 2005. - 672 с.

3. Чидзиива, Х. Гармония цвета: Руководство по созданию цветовых комбинаций / Х. Чидзиива. - М.: ООО «Издательство Астрель», 2003. - 142 с.

4. Кэмпбел, М. Строим Web-сайты. Дизайн*HTML*CSS. GARAGE: пер. с англ. яз. /Марк Кэмпбел; [пер. с англ. Александр Горлач, Александр Климович]. - М.: Изд-во ТРИУМФ, [2006]. - 480 с.: ил.

5. Роббинс, Дж.Н. Web-дизайн: справочник [Текст] / Дж.Н. Роббинс; пер с англ. - 3-е изд. - М.: КУДИЦ-ПРЕСС, 2008. - 216 с. - 2000 экз. - ISBN 978-5-91136-039-9 (в пер.).

6. Норт, Б. Joomla: практическое руководство / Б. Норт. - Спб.: Символ-Плюс, 2008. - 448 с.

7. Колисниченко, Д. Движок для вашего сайта. CMS Joomla!. Slacd, PNP-Nukc. / Д. Колисниченко - СГГб.: БХВ-1 ктербург, 2008. - 368 с.

Размещено на Allbest.ru