Создание сайта
Системный анализ проектной ситуации. Макеты страниц сайта, его дизайн. Создание сайта для музыкальной компании. Поиск путей совершенствования интернет-ресурса, его анализ на основании технических и эргономических тестирований. Методы SEO-оптимизации.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 04.04.2013 |
| Размер файла | 2,5 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
· пользователь должен всегда четко понимать, где находится нужная информация;
· текст должен быть приведен в соответствие с используемым форматом представления.
|
Направления анализа |
Критерии анализа |
muz.by |
guitarland.by |
shop.idj.by |
|
|
Визуальное решение |
Цветовое решение |
Одноцветное, без изображений, цветова схема меняеся при перемещении по страницам. Излишне строгое и примитивное. |
Монохромное серое, направлено на создание нейтрального фона для контента. |
Нейтральное, цвета только белые, на светло-голубом фоне, направлено на создание нейтрального фона для контента. |
|
|
Компоновочное решение |
Внимание акцентируется на нужной инфо. Все доступно для поиска и понимания. |
Внимание акцентируется на нужной инфо. Все самое важное отображено в верхней части главной страницы, доступно сразу же после первой загрузки сайта. |
Внимание акцентируется на нужной инфо. Все доступно для поиска и понимания. |
||
|
Информацион. архитектура |
Контент |
Соответствует тематике. как уникальный контент (новости), так и копипаст (описания товаров). Не перегружен лишней инфо. |
Соответствует тематике. Содержит уникальный контент (новости). Не перегружен лишней инфо. |
На главное странице содержится слишком много информации, при прокрутке сайта вниз отображена карта каталога товаров, которая дублирует и так доступное в верхней части страницы, выпадающее меню. Содержит уникальный контент (новости). |
|
|
Навигация |
Раздел меню с видами товаров реализован отдельно, что удобно при ознакомлении с ассортиментом. Так же имеется облако тегов, блок со «скидками», «популярным» и «новым». Поиск реализован только по базе товаров. Сортировка товаров. |
Главная страница содержит только меню первого уровня (нет подпунктов, что неудобно). Почему-то меню с катологом товаров расположено на всех страницах, кроме главное, на главной это место занимает опрос. В меню с каталогом товаров так же не используется подменю - лишние переходы по страницам. Часто приходится использовать строку поиска (реализован только по каталогу товаров). |
Хорошо реализованное главное меню (каталога товаров) с подробными выпадающими подпунктами. Второстепенное меню содержит инфо о условиях сотрудничества. Строка поиска ориентирована так же только на поиск по каталогу товаров. |
||
|
Эффективность решения польз. задач |
Перечень реализованных пользоват. задач |
Используя только меню вполне реально отыскать нужный товар или нужную категорию сайта. Когда этого недостаточно или требуется быстрый результат - можно воспользоваться поиском. Однако поиск возможен лишь по базе товаров. |
Используя только меню, нельзя быстро отыскать нужную игру, потому приходится всегда пользоваться строкой поиска. |
Используя только меню вполне возможно быстро отыскать нужный товар. Однако что касается новостей сайта - придется потратить время на поиск нужной инфо. |
|
|
Тех. реализация |
Использованные ср-ва и технологии |
На главной странице расположен java-слайдер с основными преимуществами и горящими объявлениями компании. В разделе медиагалерея расположен аудио- и видеоконтент. |
Исполузуется флеш-слайдер для отображения рекламных баннеров, условий сотрудничества и акций. |
Использование современных технологий: флеш-слайдеры, видео, java-скрипты. |
|
|
Скорость загрузки |
Хорошая скорость загрузки. |
Хорошая скорость загрузки. |
Хорошая скорость загрузки. |
Рекомендации:
1. Сайты shop.idj.by и muz.by вполне могут послужить образцом сайтов по продаже музыкального оборудования, однако несмотря на хорошее эргономическое решение, присутствие некоторой изюминки в дизайне и оформлении, на мой взгляд, им не помешало бы.
2. Использовать уникальный контент. Меню разбить на логические блоки и реализовать подменю, примерно, как на сайте shop.idj.by.
3. Хорошее разбиение меню на подпункты должно облегчить пользователям навигацию по сайту.А так же позаботиться об качественной реализации скрипта поиска, его визуальном оформлении и заметном месторасположении, ведь иногда пользователю нужна конкретная информация на поиск которой отведен минимальный промежуток времени.
4. Сайты о музыкальном оборудовании и инструментах, должны содержать современные медиа-технологии, такие как фото-галереи, флеш-баннеры, аудио- и видеообзоры. Так же нужно следить за тем, что бы время загрузки оставалось на хорошем уровне.
Какие пользователи прийдут на наш сайт
85% мужчины, 15% женщины. Сфера деятельности: студенты, а так же взрослые люди, интересующиеся музыкой по роду своей деятельности или хобби. Возраст от 20 да 45 лет. Язык русский. Образование: среднее и высшее. Уровень пользования интернет средний. Демография - все русскоязычное население. География - РБ. Достаток: средний и выше среднего. Доступ из дома и на работе. Основная цель посещения: получение информации о репетициях, аренда оборудования для личных целей.
Группы целевой аудитории.
1. По профессиональному уровню:
· профессионалы;
· любители;
· слушатели.
2. По возрасту:
· Для молодежи;
· Для старшего возраста;
3. По роду занятий:
· звукорежиссеры;
· музыканты;
· аудиофилы.
Цель
Получение прибыли за счет:
· сдачи оборудования в аренду;
· сдачи в аренду репетиционных залов;
· привлечение пользователей в магазины.
Функции
Маркетинговая, информационная, имиджевая.
Задачи
· Привлечение пользователей.
· Раскрутка сайта.
· Дать актуальную инфо пользователям.
· Представление новинок продаж и аренды.
Проектирование информационной архитектуры
1. Анализ информации, которую предполагается поместить на сайт.
· полная инфо о новых и текущих продуктах;
· новости:
§ репетиционные точки;
§ магазин;
§ аренда оборудования;
§ ремонтная мастерская;
§ события;
§ мнение эксперта;
§ интервью;
· реклама (о новых брендах, новинках индустрии музыкального оборудования, предстоящих концертах и мероприятиях, акциях компании, о новых услугах компании );
2. Анализ задач пользователя.
· Получение инфо о продукции и услугах(о музыкальном оборудовании, об услугах компании);
· Получение новостной инфо.
3. Организация информации в структуру, соответствующую задачам пользователя.
Состав меню:
1. Главная
· Новости.
2. Магазины
· boom.of.by;
· proaudio.by.
3. Студия
· Правила;
· Онлайн-расписание;
· Услуги и цены;
· Залы и их оборудование.
4. Прокат
· Онлайн-расписание;
· Цены.
5. Ремонт
· Цены.
6. Клиенты
7. О нас
· Отправьте нам сообщение.
Повторы и взаимосвязи между разными группами:
· слайдер, ведущий на определенный контент сайта:
§ реклама товара магазинов;
§ реклама студий;
§ реклама ремонтной мастерской;
§ реклама аренды музыкального оборудования;
§ реклама онлайн-записи.
Повторяется переход с главной страницы сайта boom-sound.by на:
· подпункт меню «boom.of.by»;
· пункт меню «Прокат» (http://boom-sound.by/index.php/prokat);
· пункт меню «Студия» (http://boom-sound.by/index.php/studiya);
· пункт меню «Ремонт» (http://boom-sound.by/index.php/remont);
· подпункт меню «Онлайн-расписание» (http://boom-sound.by/index.php/studiya/online-raspisanie-2).
Способы навигации по контенту сайта:
· Хлебные крошки, оно же главное меню. Цепочки ссылок, которые призваны показать, каким образом текущая страница относится к главной. На сайте boom-sound.by главное меню позволяет пользователю видеть в каком месте сайта она находиться и к какой странице относится подстаница.
· Ссылки. При большом объеме контента, либо для оперативного указания пользователю на нужную информацию, необходимо ставить ссылки в материалах сайта. Ссылки обязаны четко сообщать, куда они ведут. Пользователь с большей долей вероятности перейдет по ссылке, если будет знать, куда она ведет.
· Слайдер. Для нагладного отображения самой важной текущей информации на главной странице, сразу после загрузки, нижнюю часть занимает слайд-шоу. Каждый слайд ведет на соответствующую страницу сайта.
2.5 Макеты страниц сайта
Макет сайта boom-sound.by будет относится к виду фиксированных. Основной блок имеет ширину 980 пикселей и размещен по центру экрана, фон имеет ширину 1500 пикселей. Преимущества фиксированного дизайна сайта boom-sound.by в том, что при любом разрешении монитора сайт выглядит одинаково, т.е. элементы расположены в привычных местах, это позволяет говорить о хорошей юзабилити сайта, стабильности восприятия информации пользователем, а следовательно и его комфорте.
Главная страница отличается от остальных наличием новостного блока и блока со слайдером:
Рисунок 8
Второстепенные страницы:
Рисунок 9
Второстепенная страница новости имеет промежуточный макет:
Рисунок 10
2.6 Дизайн
Дизайн сайта выполнен в черном неоновом стиле на музыкальную тематику.
Разработанные элементы дизайна сочетаются по стилю и цвету, они служат для объединения всех информационных блоков и формирования у посетителя приятного впечатления.
Фон сайта зафиксирован и доступен для обозрения при разрешении монитора более 1024*600 пикселей. Главная цель фона - быть приятным и не отвлекать посетителя сайта от более важной информации.
Рисунок 11
Лотип компании выполнен в общем стиле сайта. Он расположен в верхней центральной части сайта и призван фокусировать внимание пользователя и продвигать торговую марку компании.
Рисунок 12
Строка поиска расположена рядом с основным меню и ненавязчиво выделена неоновой рамкой в тон основному стилю сайта, что позволяет пользователю быстро идентифицировать ее местоположение.
Рисунок 13
Меню выполнено в строгом стиле в тон основному дизайну. Оно имеет горизонтальное расположение. Цвет надписей изменяется, при наведении, нажатии и переходе. Второстепенное меню так же выполнено в горизонтальном виде. Оно расположено на прозрачном фоне, при наведениее возникает эффект свечения, активный пунк меню выделен цветом.
Рисунок 14
Общий вид главной страница сайта (разрешение 1366*768):
Рисунок 15
3. Техническая реализация проекта
3.1 Разработка сервисной структуры сайта
Форма обратной связи
Для того, что бы создать обратную форму связи для CMS Joomla, необходимо овладеть навыками разработки расширений для Joomla. К сожалению, в рамках написания дипломной работы, я не успела освоить эту сферу программирования. Но несомненно смогу сделать это в будующем. На данный момент оптимальным решением оказалось воспользоваться встроенным компонентом «Контакты» и на его основе создать и подключить форму обратной связи к сайту.
Так же в форме обратной связи установлена капча. Для создания капчи я воспользовалась сервисом «Recaptcha» от ресурса Google.com.
Рисунок 16
Слайдер
Сегодня большинство приложений для сайтов разрабатываются с использованием библиотек. Однако, для более легкого веса приложения и более быстрой загрузки главной страницы я решила обойтись без их использования.
Рисунок 17
Слайдер выполнен в минималистичном виде. Навигация между слайдами осуществляется посредством клика по навигационным точкам, расположенным под слайдером. Кроме того слайдер циклически выполняет переход по слайдам через заданный промежуток времени.
Html-код слайдера позволяет задать путь к изображениям слайдов, заголовок для каждого слайда, ссылки для клика на изображения слайдов:
<a href="(url)"><img src=... /></a>
В css-файле содержаться стили оформления. Размеры слайдера можно менять в зависимости от размера исходных изображений:
#slider { width:960px;height:420px; }
А так же в зависимости от размера изображений, откорректировать расположение навигационных точек:
div.navBulletsWrapper { top:320px; left:280px; }
Для удобства редактирования все основные переменные JavaScript вынесены в отдельный абзац:
var sliderOptions =
{
effect: "series1",
effectRandom: false,
pauseTime: 2800,
transitionTime: 1200,
slices: 14,
boxes: 8,
hoverPause: 1,
autoAdvance: true,
captionOpacity: 0.4,
captionEffect: "fade",
m: false
};
effect - позволяет выбрать один либо несколько из 14 эффектов изменения слайдов. Так же доступны два автоматических режима:
· series1 - изменение 14 эффектов в перемешку, порядок постоянный;
· series2 - изменение с 1 по 14 эффект по порядку.
effectRandom - включение или отключение случайного изменения эффектов.
pauseTime и transitionTime - задержка слайда и скорость его трансформации в миллисекундах.
slices - количество частей слайда в эффектах, разбивающих слайд на части.
boxes - количество боксов в эффектах, разбивающих слайд на боксы.
hoverPause - задержка при наведении:
· 0 - без задержки;
· 1 - с задержкой.
autoAdvance - автопрокрутка.
captionOpacity - прозрачность поля с заголовком (от 0 до 1).
captionEffect - доступны три эффекта для заголовка:
· "none" - без эффекта;
· "fade" - затухание;
· "rotate" - вращение.
m - изменение направления эффектов в соответствии с ручным переключением вправо или влево.
Фотогалерея
Галерея «Студия»
Главная фотогалерея сайта расположена на странице «Студия», «Залы и их оборудование». Эта галерея имеет функции обработки и занесения данных в базу данных CMS Joomla. Для создания подобного функционала необходим опыт в разработке компонентов для Joomla 2.5. Поэтому мне пришлось воспользоваться встроенным в CMS компонентом «JoomGallery».
Основные возможности и функции галереи:
Фотографии можно сортировать в категории и подкатегории. Первая страница галереи отображает категории по студиям.
Рисунок 18
На подстранице студии отображаются залы со списком оборудования.
Рисунок 19
При детальном просмотре фотографии, под ней реализован мини-слайдер для удобной навигации по альбому зала. Есть возможность поставить оценку фотографии и оставить комментарии.
Рисунок 20
Рисунок 21
Загрузка фотографий на хостинг осуществляется через встроенное меню компонента «JoomGallery». Можно загружать как по одной фотографии, так и несколько фотографий в zip-архиве.
Галерея «Прокат»
Вторая галерея на сайте boom-sound.by - галерея на странице «Прокат». Для ее реализации я воспользовалась свойствами CSS3. Это очень простая галерея с минимальными возможностями. Изображения плавно увеличиваются при наведении и приобретают исходную контрастность и яркость.
Рисунок 22
Код стилей CSS3:
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: уменьшаем размер до 0.8*/
-moz-transform:scale(0.8); /*Mozilla: масштабирование*/
-o-transform:scale(0.8); /*Opera: масштабирование*/
-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
-moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/
-o-transition-duration: 0.5s; /*Opera: длительность анимации*/
opacity: 0.7; /*Начальная прозрачность изображений*/
margin: 0 10px 5px 0; /*Интервалы между изображениями*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: увеличиваем размер до 1.2x*/
-moz-transform:scale(1.1); /*Mozilla: масштабирование*/
-o-transform:scale(1.1); /*Opera: масштабирование*/
box-shadow:0px 0px 30px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
-webkit-box-shadow:0px 0px 30px gray; /*Webkit: тени*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla: тени*/
opacity: 1;
}
</style>
Путь к изображениям задается в html-коде:
<div class="hovergallery">
<img src="images/M_images/prokat/sub808/sub808.jpg" /><img
</div>
Онлайн-расписание
На страницах «Студия» - «Онлайн-расписание» и «Прокат» - «Онлайн-запись» расположены календари Google, по которым пользователь может получить информацию и занятом (и соответственно - свободном) времени на студиях, а так же о времени аренды музыкального оборудования. Календари на обоих страницах реализованы по одному принципу. У зарегестрированных в Google пользователей, на странице https://www.google.com/calendar/render расположен онлайн-календарь. Можно создавать неограниченное количество календарей для разных целей. Я создала по календарю для каждого репетиционного зала, а так же для аренды оборудования. Код можно получить в разделе настроек календаря. Он имеет вид:
<iframe src="https://www.google.com/calendar/embed?src=psychedelka%40gmail.com&ctz=Europe/Minsk" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
и интегрируется в html-код страницы. В режиме реального времени менеджер редактирует календари и изменения в них сразу отражаются на сайте boom-sound.by.
Рисунок 23
В правой нижней части экрана располагается кнопка онлайн-консультации, через нее можно связаться с менеджером в отдельном окошке-чате и зарегестрироваться на репетицию онлайн. Данная функция получена на сервисе http://siteheart.com/. Код кнопки-формы онлайн-регистрации так же интегрируется в html-код соответствующей страницы.
Для удобного и компактного отображения календарь каждого из репетиционных залов помещен с отдельные спойлеры, изпользующие библиотеку jquery для разворачивания\сворачивания своего содержимого:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Библиотека jquery подключается из хранилища Google, что обеспечивает более быструю работу скрипта и самого сайта, т.к. у многих пользователей плагин уже находится в кэше их браузеров.
Html-код спойлера:
//начало спойлера <div><a href="javascript://" class="splLink">BOOM. VIP room</a><div class="splCont"> <iframe src="https://www.google.com/calendar/embed?height=500&wkst=2&hl=ru&bgcolor=%23FFFFFF&src=psychedelka%40gmail.com&color=%23060D5E&ctz=Europe%2FMinsk" style=" border-width:0 " width="940" height="500" frameborder="0" scrolling="no"></iframe> </div></div> //конец спойлера
Javascript и CSS:
<script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $('div.splCont').not($(this).parent().children('div.splCont')).slideUp('normal'); $(this).parent().children('div.splCont').slideDown('normal'); return false; }); }); </script> <style type="text/css"> .splCont{display:none;border:0;padding:3px 5px;} </style>
Поиск по сайту
Поиск на сайте boom-sound.by реализован с помощью встроенного в CMS Joomla компонента. Компонент использует базу данных CMS и выводит результаты изо всех материалов сайта.
Рисунок 24
3.2 Тестирование сайта
3.2.1 Техническое тестирование
Проверка на кроссбраузерность
При проверке на кроссбраузерность я провела детальное исследование отображение сайта в наиболее популярных браузерах.
1. IE 7. В этом браузере возникли серьезные проблемы - не отображается кнопка быстрой регистрации на репетицию/аренду. В остальном все приемлимо, не принимая во внимание отсутствие поддержки CSS3 - из-за этого не поддерживаются эффекты меню и второй галереи.
Рисунок 25
Рисунок 26
2. IE 10. В этой версии браузера сайт отображается полностью корректно - есть поддержка CSS3, виден бэкграунд сайта, кнопки онлайн-консультации, функционирует CSS3-галерея. Поддержка CSS3 реализована в IE начиная с 8ой версии.
Рисунок 27
3. Opera 9. Сайт плохо отображается в этой версии браузера. На главной странице сбито позиционирование. Не работает форма авторизации. CSS-галерея не функционирует на ресайз изображений.
Рисунок 28
Рисунок 29
4. Opera 10. Эта версия прекрасно отображает сайт и великолепно работает с CSS3.
Рисунок 30
Рисунок 31
Рисунок 32
5. FireFox 3.0. Данная версия браузера имеет проблемы при загрузке сайта. Фон сайта полностью белый, несмотря на наличие фонового изображения и стилей, задающих черный цвет. Нет поддержки CSS3.
Рисунок 33
Рисунок 34
Рисунок 35
6. FireFox 3.5. Эта версия браузера корректно отображает CSS3 и без проблем загружает сайт. Единственная проблема - слишком крупный шрифт меню и как следствие - смещение строки поиска
Рисунок 36
Рисунок 37
7.
8. Safari 5. Браузер не имеет проблем с отображением сайта.
Рисунок 38
Рисунок 39
Рисунок 40
Таким образом, сайт имеет критичные ошибки, такие как отсутствие кнопки формы онлайн-записи и нефункционирующая форма авторизации в браузерах IE7 и Opera 9. Необходимо доработать сайт под эти версии.
3.2.2 Юзабилити-тестирование
|
Вопрос |
boom-sound.by |
Пожелания |
|
|
Оформление |
|||
|
Используется ли для оформления сайта графика, без пользы усложняющая восприятие? |
Такая графика на сайте не используется. |
В дальнейшем использовать минимум графики, но при этом не доходить до примитивизма, грамотно выражать дизайнерские идеи. |
|
|
Если в оформлении использованы тени, все ли они имеют одинаковое направление? (Сайт воспринимается как единое пространство, и потому эффект освещенности должен быть естественным). |
Все тени в оформлении имеют одинаковое направление. |
В дальнейшем так же учитывать этот фактор при расширении сайта и создании новых элементов. |
|
|
Используются ли яркие (насыщенные) цвета только в небольших областях и только при необходимости? |
Яркие, насыщенные цвета используются, но только в небольших областях для концентрации внимания пользователя. |
В дальнейшем грамотно использовать цвета для привлечения внимания пользователей. |
|
|
Используются ли для фона только нейтральные цвета? |
Для цвета фона с текстом используются только нейтральные и светлые цвета. |
В дальнейшем не прибегать к излишней контрастности и яркости в области текста и изображений, что бы не ухудшить его восприятие |
|
|
Текст |
|||
|
Корректно ли сайт печатается? (Есть ли для каждой страницы с обширным текстом версия для печати - на белом фоне и без элементов оформления сайта? Если большой текст разделен на части - на несколько страниц, есть ли возможность напечатать весь текст целиком?) |
К сожалению, данная функция на сайте реализована только на страницах с онлайн-расписанием. |
В дальнейшем, особенно при наполнении сайта доролнительным контентом, реализовать данную функцию на каждой странице. |
|
|
Нет ли длинных текстов на темном/ярком фоне? Или длинных текстов с низким контрастом цвета шрифта и цвета фона? |
Таких текстов на сайте нету. |
В дальнейшем придерживаться этих критериев, при добалении контента на сайт, а так же при возможном изменении дизайна сайта. |
|
|
Есть ли возможность для пользователей изменять размер шрифта? Не разваливается ли при этом оформление? |
Данной возможности на сайте не предусмотрено. |
Желательно реализовать данную функцию для сайта, т.к. не все пользователи умеют пользоваться встроенной функцией масштабирования. |
|
|
Есть ли грамматические ошибки? (В первую очередь, ошибки в заголовках и любых выделенных фрагментах текста). |
Грамматические ошибки не найдены. |
Для более правильного наполнения сайта, перед публикацией проверять новые материалы на грамматические ошибки. |
|
|
Используются ли в текстовых сообщениях только командно ориентированные фразы? (Глаголы вместо отглагольных существительных) |
В текстах материалов используются только командно-ориентированные фразы. |
При публикации новых материалов не использовать фразы с отглагольными существительными. |
|
|
Взаимодействие |
|||
Если используется какое-либо цветовое кодирование информации, то имеются ли иные способы индикации: текст, форма, подчеркивание и т.п.?Показывает ли сайт возможность воспринять действия пользователя? (Изменяют ли вид при подведении курсора ссылки и кнопки?) |
Используется классическое цветовое оформление для ссылок, при наведении курсора, переходе по меню активные элементв текста получают изменения, что способствует хорошему ориентированию пользователя в навигации сайта. |
В дальшнейшем использовать эти приемы при публикации новых материалов и элементов, но не выходить за рамки привычного восприятия пользователей, дабы не ухудшить навигационную эргономику. |
|
|
Установлен ли соответствующий альтернативный текст на все значимые графические изображения? Отвечает ли этот текст на один из вопросов: "Что это?", "Что это делает?" и "Что произойдет, если по этому кликнуть?" |
Альтернативный текст установлен не на все графические элементы. |
Установить альтернативный тест, что бы, при отключении изображений, пользователь не «потерялся» на сайте. |
|
|
Различаются ли цвета у пройденных и непройденных гиперссылок? |
Цвета не различаются. В тескстовом наполнении страниц пока нет ссылок, они присутствуют только в заголовках новостной ленты. |
В дальнейшем, при появлении на сайте материалов, содержищих ссылки, организовать для них данное различие. |
|
|
Организована ли информация так, чтобы наиболее важные данные находились в начале страницы? (Чтобы их можно было прочесть в первую очередь). |
Да, самая важна информация, либо ее заголовки, расположены в самом начале страницы. |
В дальнейшем располагать новую важную информацию только в самых активных областях сайта. |
|
|
В интерфейсе отсутствуют жаргонизмы? |
Отсутствуют. |
Употреблять жаргонизмы только при необходимости, для поддержания художественного стиля материала, в кавычках. |
|
|
В интерфейсе отсутствуют отрицательные формулировки? |
Отсутствуют. |
Не упортреблять и в дальнейшем. |
|
|
Ни один элемент не называется по-разному в разных местах? |
Не называется. |
Для логичного образа контента сайта, придерживаться фиксированных названий элементов. |
|
|
Навигация |
|||
|
Постоянно ли доступны пользователю все управляющие элементы сайта? (Всегда ли доступна навигация? Или хотя бы возможность легко вернуться к навигации?) |
Навигация доступна из любого места сайта. |
При возможном изменении дизайна, обеспечить пользователям привычную, понятную и доступную навигацию. |
|
|
Если глубина сайта больше 5 уровней, есть ли функция текстового поиска? |
Хотя глубина сайта еще менее 5 уровней, форма поиска на сайте реализована |
Сохранять строку поиска на видном, после первой же загрузки сайта, месте. |
|
|
Убедились ли вы, что все страницы имеют корректный заголовок (title)? |
Все страницы имеют корректный заголовок, соответствующий их содержанию. |
Не забывать о заголовках при создании новых страниц на сайте. |
|
|
Формы ввода |
|||
|
Все поля, обязательные для заполнения, помечены, и есть соответствующее пояснение? |
Все поля помечены. |
Соблюдать это обязательное условие при создании новых полей ввода на сайте. |
|
|
Во всех формах, служащих для сбора информации, есть описание целей сбора данных, объясняется, что с этими данными будет сделано и что не будет? |
Конкретных объяснений для сбора данных (форма обратной связи, регистрация на сайте) нет, но это понятно из контекста проводимой операции. |
В будущем, при сборе данных у пользователей (опросы, голосования) раскрывать причину, побудившую организовать данный сбор, описать кратко его условия и результаты. |
|
|
Поля ввода |
|||
|
Длина полей не меньше, и, по возможности, не больше, длины вводимых в них данных? |
Длина полей ввода соответствует стандартной длине, принятой в формах. |
Создавать поля ввода оптимальной длины и в дальнейшем. |
|
|
Если поле предназначено для ввода большого количества текста, оно многострочное? |
Для ввода большого количества текста - многострочное поле, полоса прокрутки появляется в вертикальной области. |
Придерживаться этих стандартов и в дальнейшем - это облегчает редактирование вводимой информации пользователем. |
|
|
Выпадающие списки |
|||
|
Если список содержит более 50 элементов, используется фильтр или режим поиска? |
Да, в частности на странице с результатами поиска. |
Всегда позволять пользователю иметь возможность быстро отыскать нужную информацию. |
|
|
Нет часто используемых коротких списков (менее пяти элементов)? (Такие списки лучше заменять группой радиокнопок или чекбоксов) |
Нет, таких списков нет. |
Радиокнопки и чекбоксы - очень удобный инструмент. Его можно использовать в дальнейшем при развитии сервиса онлайн-записи на репетицию и аренду. |
|
|
Ширина списков не меньше ширины входящих в них элементов? (Чтобы не появлялся горизонтальный скроллинг). |
Не меньше. Все списки реализованы «в столбик». |
Избегаить появления горизонтального скроллинга и в дальнейшем. |
|
|
Элементы списка отсортированы; либо структурно, т.е. по общим признакам, либо по алфавиту, либо по частотности? |
Элементы списка на сайте отсортированы по общим признакам (онлайн-запись на репетиции), либо имеют варианты сортировки пользователем (результаты поиска). |
В дальнейшем, длинные списки должны сопроваждаться возможностью их сортировки по нескольким критериям, на выбор пользователя. |
|
|
Многострочные списки множественного выбора снабжены чекбоксами возле каждого элемента? |
Да (расширенный поиск). |
В дальнейшем (при совершенствовании сервисов онлайн-записи) организовать чек-боксы выбора инструментов, оборудования и т.д. |
|
|
Чекбоксы и радиокнопки |
|||
|
Чекбоксы и радиокнопки внутри своих групп расставлены по вертикали? |
Нет, но чек-боксы расставлены в соответствии с рациональным использованием свободного места на странице сайта. Горизонтальгый скроллинг они не вызывают и никак не путают пользователя. |
Организовать чек-боксы внутри групп по вертикали, при совершенствовании, проектировании и разработке будущих сервисов. |
|
|
Кнопки |
|||
|
Кликабельный размер кнопок совпадает с их видимым или логическим размером? |
Да |
Динамический вид кнопок положительно влияет на юзабилити сайта. Эту функцию нужно реализовывать для всех будущих кнопок. |
|
|
Между кнопками, стоящими рядом, есть пустое пространство? |
Да |
||
|
Разные состояния кнопок выглядят по-разному? |
Да |
||
|
Меню |
|||
|
Первая буква в названии пунктов меню - заглавная? |
Да |
Использование привычного форматирования текста в дальнейшем так же позволит поддерживать эргономику сайта на хорошем уровне. |
|
|
Используются не более двух подуровней меню? |
Да |
В дальнейшем, при необходимости создать более 2х подуровней меню, выносить излишние пункты меню в отдельные блоки. |
4. Внедрение и сопровождение
4.1 Выбор доменного имени
Доменное имя boom-sound.by была зарегистрированно заказчиком. Домен второго уровня. Включает в себя название компании и род деятельности. В целом домен можно назвать удачным и запоминающимся.
4.2 Выбор и обоснование хостинга
Заказчик использует виртуальный хостинг от ActiveCloud, тарифный план Эксперт.
Основные технические характеристики хостинга:
· ОС RedHat ES Linux (CloudLinux);
· Оптимизированные веб-серверы Apache 2.x, Resin, Nginx;
· PHP: 5.3.x, 5.2.x, Suhosin, GD, ImageMagick, PEAR, XML, XSLT, DOM, XPath, Sablotron, Zend Optimizer, ION Cube, eAccelerator и пр.;
· FastCGI/CGI: Perl, Ruby, Ruby On Rails, Python и пр.;
· Java: JDK 1.6.x, JSP/Servlet (Resin, напрямую на 80 порт);
· СУБД: Percona MySQL 5.1.x, PostgreSQL;
· Доступ по протоколу FTP;
· Установка библиотек и модулей по запросу.
Хостинг позволяет полноценно использовать CMS Joomla и другие системы.
4.3 Внешнее тестирование сайта
Свободное пространство
На сайте boom-sound.by пространство реализованно рационально: нет пустых мест, контент не перегружен ссылками и изображениями.
Фон
Фон сайта темный с контрастным рисунком в тему содержания сайта. Для текста подобран нейтральный светло-серый тон в виде крапчатой текстуры.
Колонки
На главной странице предусмотрена боковая колонка для вывода формы авторизации и новостной ленты. На странице «Новости» так же предусмотрена боковая колонка для вывода списка категорий новостей, последних и популярных новостей.
Шрифты
Для сайта boom-sound.by выбраны 2 простых шрифта без засечек - Arial и Verdana. Они отлично сочетаются и не перегружают страницы.
Изображения
Для галерей и страниц выбраны оптимальные изображения. Качество изображений находится на оптимальном уровне соотношения размер/качество. Они сочетаются между собой по стилю и размерам. Изображения органично вписываются так же и в стиль и размер страниц.
Разбитие текста
Текст грамотно разбит на абзацы. В полях с контактами реализованы миниатюрные иконки, которые служат как для привлечения внимания пользователя, так и для его быстрого ориентирования в контенте.
Подзаголовки
В нужных местах используются подзаголовки, это так же улучшает читабельность текста и оставляет приятное впечатление от контента у пользователя.
Расположение элементов
Элементы на сайте расположены эргономично, в соответствии с их целевым назначением и приоритетностью.
4.4 SEO-оптимизация сайта
Составление семантического ядра
Для составления семантического ядра я воспользовалась сервисом adwords.google.com. Этот онлайн-сервис позволяет автоматически составить семантическое ядро сайта с учетом:
· категории сайта;
· целевых регионов и языков;
· типа мобильных устройств;
|
Ключевое слово |
Уровень конкуренции |
Кол-во запросов в месяц (весь мир) |
Локальные запросы за месяц (Беларусь) |
|
|
аренда студии звукозаписи |
- |
140 |
- |
|
|
звуковое оборудование купить |
0,13 |
390 |
5 |
|
|
звуковое оборудование продажа |
0,07 |
320 |
0 |
|
|
купить звуковое оборудование |
0,13 |
390 |
5 |
|
|
купить музыкальное оборудование |
0,18 |
210 |
5 |
|
|
магазин звукового оборудования |
0,04 |
390 |
5 |
|
|
магазин музыкального оборудования |
0,1 |
880 |
16 |
|
|
магазин музыкальное оборудование |
0,1 |
880 |
16 |
|
|
музыкальное оборудование купить |
0,18 |
210 |
5 |
|
|
музыкальные инструменты в аренду |
0,2 |
170 |
12 |
|
|
репетиционная студия |
0,02 |
110 |
16 |
|
|
продажа музыкальной аппаратуры |
- |
91 |
- |
|
|
продажа музыкального оборудования |
0,14 |
170 |
0 |
|
|
продажа звукового оборудования |
0,06 |
210 |
16 |
|
|
оборудование музыкальное |
0,15 |
6600 |
210 |
|
|
оборудование для студии звукозаписи |
0,1 |
590 |
12 |
|
|
музыкальное оборудование магазины |
0,09 |
880 |
16 |
|
|
музыкальное оборудование магазин |
0,1 |
880 |
16 |
|
|
музыкальное оборудование |
0,15 |
6600 |
210 |
|
|
магазины музыкального оборудования |
0,09 |
720 |
16 |
|
|
магазины звукового оборудования |
0,04 |
390 |
0 |
Результаты (ключевых слов: 21):
· Кликов в день - 0,44;
· Показов в день - 17;
· Сред. поз. - 1,1;
· Ежедневные расходы - 0,74$;
· Сред. цена за клик - 1,67$.
Наполнение сайта уникальным контентом
К основным позитивным моментам уникального контента можно отнести:
· Увеличение трафика на сайте. Не просто трафика, а 100% лояльного.
· Увеличение скорости индексации страниц сайта.
· «Цитируемость» сайта и увеличение бэков. Люди не скупятся на обратные прямые ссылки, ведущие на интересные и полезные статьи.
Что бы защитить контент от кражи, рекомендуется:
· Упоминание своего имени и сайта в тексте статей.
· При выявлении кражи контента, обратитесь с начала к вебмастеру сайта и попросите о размещение прямой ссылки на источник. При отсутствие ответа и отказа - пожалуйтесь на сайт поисковым системам.
Основные способы добычи контента:
· Копирайт. Это может быть купленный на биржах статей копирайтинг или написанный своими руками текст. Это один из самых эффективных способов добычи качественного контента. К основным минусам можно отнести:
- время, потраченное на написание интересной статьи;
- деньги при покупке копирайта;
- возможно, что написанная Вами или купленная статья не понравится аудитории.
· Рерайт. Рерайт - это переделывание чужой статьи с помощью синонимов и перестановок абзацов. Качество такого контента очень низкое. Основными достоинством рерайта: наполнение сайта контентом. Недостатком метода: возможность попадания под фильтр при плохом рерайте. Стоит использовать глубокий рерайт - анализируется несколько статей, берется самое главное и важное, кардинально изменять статьи.
· Копипаст. Нахождение информации и публикация ее на сайте, с указанием ссылки на источник. Минусы данного способа перевешивают его плюсы. Такой метод можно использовать на закрытых от индексирования поисковыми системами сайтах. К примеру, в группе Вконтакте.
· Сканирование книжек, журналов. Сканирование и распознавание контента. Перед началом сканирование необходимо проверить контент на уникальность в интернете. Такой контент очень качественный и не требует много времени. Но возможны проблемы с авторскими правами авторов газет, журналов или книги.
· Переводы зарубежных статей. Активно используется русскими вебмастерами. Следует грамотно перевести зарубежную статью, которую еще не перевели на русский, и опубликовать на Вашем сайте.
· Размещение бесплатных уникальных статей. Размещение таких статей - это бесплатное и быстрое наполнение сайта контентом. Качественность и полезность такой информации зависит от авторов, которые прислали статьи со ссылками. Минус - исходящая прямая ссылка.
Увеличение трафика с Google.
1. Связать уникальный контент сайта с профилем Google+.
2. Регулярно проводить улучшение поведенческих факторов внутри сайта (А/B тестирование, редизайн, улучшения и т.д. Это увеличивает шансы на добавление сайта в закладки, социальную активность, регистрацию на сайте или запоминание названия сайта!
3. Поиск страниц и поисковых фраз, где поведенческие гораздо хуже, чем в среднем на сайте. Это можно сделать при помощи пользовательского фильтра в Google Analytics. Необходимо зайти в Google Analytics во вкладку: Стандартные отчеты -> Источники траффика -> Источники -> Поиск -> Бесплатный и нажать на кнопку “Еще”, где указать нужные параметры по средним показателям качества траффика на сайте.
Анализ посещаемости boom-sound.by от Google Analitics:
Рисунок 41
Причины, почему страница не дает пользователю найти нужную информацию:
· Слабый рерайт статьи, которую пользователь уже читал ранее и не желает читать снова ту же информацию. (Вот почему стоит заказывать копирайт/качественный рерайт).
· Оформление самой страницы и контента (без абзацев, списков и картинок).
· Малоинформативный контент.
· Не то, что хотел увидеть. К примеру, в поле description страницы использовались SEOшные ключевые фразы, которые приносят траффик, но страница с контентом не дает ответов пользователю и т.д.
· Сайт долго грузится (слабый хостинг).
· Отсутствие внутренних ссылок на статьях, блока читайте еще статьи, открытие внешних ссылок в том же окне и т.д.
Самыми популярными изменениями, которые позитивно влияют на вовлеченность являются:
· Добавление на страницу видео и фото контента, который релевантный контенту на странице.
· Изменения в оформлении страницы (использование подзаголовком, таблиц и списков).
· Дописывание статьи/добавление комментариев к статье и т.д.
Яндекс-метрика
С помощью Яндекс Метрики вебмастера и владельцы сайтов могут получать подробную информацию о посещаемости сайта, поведении пользователей на сайте, а также об эффективности различных источников трафика. Как и Google Analytics, Яндекс Метрика обладает достаточно мощным инструментом для анализа конверсии по привлеченным посетителям.
Рисунок 42
Карта кликов от Яндекс-Метрики:
Рисунок 43
Сравнение Яндекс Метрики и Google Analytics
Особенности Яндекс Метрики
· Понятный и универсальный интерфейс, не перегруженный лишними деталями
· Обновление данных практически в режиме реального времени (каждые 5 минут)
· Возможность устанавливать и мониторить «цели» рекламной кампании
· Сегментация трафика по различным источникам, анализ социо-демографической статистики посетителей вашего сайта.
· Возможность sms-доставки отчетов в случае технических неполадок на сайте системы.
· Отдельные отчеты переходов посетителей на сайт из систем контекстной рекламы.
Особенности Google Analytics
· Несколько режимов сегментации входящего трафика (стандартный и улучшенный)
· Мощный функционал, большое количество различных режимов, фильтров и настроек (например, около 80 видов детализированных отчетов). Вместе с этим, интерфейс системы будет сложен для новичков.
· Возможность анализа статистики конкурентных сайтов
· Ограниченно бесплатная система
· При исследовании российского трафика возможна значительная (20-40%) погрешность.
В заключении можно отметить, что обе эти системы анализа статистики посещаемости обладают очень большими возможностями и высоким потенциалом. Каждая из них имеет определенные особенности и отличительные черты. Google Analytics, безусловно, выигрывает в плане более широкого и универсального функционала. В то время, как Яндекс.Метрика прост и понятен в использовании, отлично адаптирован под особенности Рунета, а также славится своими оперативно предоставляемыми отчетами.
4.5 Перспективы развития сайта
В дальнейшем работа над сайтом будет продолжена. Планируется создание и внедрение новых сервисов и правок.
Предлагаю ознакомится с планом окончательной бета-версий сайта boom-sound.by:
1. Доработка онлайн-записи на репитиции\аренду оборудования. Будет разработан интефейс для онлайн-регистрации пользователей на свободное время. Клиент просто выбирает удобное время и занимает его самостоятельно, заполняя форму с данными. Для постоянных пользователей эта процедура еще более упрощена. Для резервирования времени им достаточно подтвердить свое намерение в диалоговом окне.
Запись на репетицию. Переход по датам осуществляется при помощи календаря. Занятое время обозначено словом «Занято», свободное время - словом «Занять». «Занять» представляет собой ссылку, по клику на которую во всплывающем окне появляется форма записи на репетицию. Форма записи на репетицию содержит в себе:
· данные «Дата» и «Время»;
· поле «Ваше имя»;
· поле «Ваш телефон»;
· поле «Ваш email»;
· поле «Ваша группа»;
· поле «Сайт группы»;
· поле «Состав группы» - многострочное поле;
· поле «Обязательное оборудование» - многострочное поле;
· чек-бокс «Я согласен с правилами студии» (слово «правилами» является ссылкой на страницу «Правила»).
Аренда оборудования:
· переход по датам осуществляется при помощи виртуального календаря. Перемещение проходит по дням (числа месяца). На каждый день создается запись, если какое-либо оборудование или комплект оборудования сдан в аренду. Записи выводятся в виде текста и содержат следующие обязательные строки (поля):
· дата и время в формате ДД.ММ.ГГГГ, ЧЧ:ММ;
· срок аренды (часы (время с/до), дни (дата с/до));
· список оборудования (название представляет собой ссылку на страницу с описанием данного оборудования)
· online-запись осуществляется через кнопку «Арендовать оборудование». При нажатии осуществляется переход на страницу заказа, представляющей собой форму обратной связи, с полями для заполнения:
· данные «Оборудование», содержит список оборудования с чек-боксами, разбитый по категориям.
· поле «Период аренды»;
· поле «Ваше ФИО»;
· поле «Ваш телефон»;
· поле «Ваш email»;
· поле «Цель аренды»;
· чек-бокс «Я согласен с правилами аренды музыкального оборудования» (слово «правилами» является ссылкой на страницу «Правила»).
2. Планируется подключение сервиса онлайн-оплаты репетиций.
3. Баннерная реклама. При помощи сервиса баннерной рекламы, на главной странице сайта, а так же в шапке сайта, можно размещать баннеры, как стронних компаний (в целях получения выгоды), так и свои, например во время акций. Для баннерной рекламы на каждой странице необходимо предусмотреть отдельные блоки, в которых может быть одновременно размещено 1-2 баннера.
4. Подписка на тематические рассылки. В личном кабинете пользователя будут доступны соответствующие чек-боксы для выбора тем новостных подписок. Система рассылок предоставляет зарегистрированным пользователям возможность подписаться на тематические рассылки, которые автоматически формируются и рассылаются подписчикам в следующих случаях:
· добавление нового информационного сообщения;
· изменения в ассортименте;
· акции и скидки.
5. На главной странице планируется разместить кнопку на закачку полного актуально прайс-листа компании. Обновление прайс-листа будет происходить вместе с обновлением интернет-магазинов. Прайс-лист позволит пользователю иметь перед глазами сразу все наименования товаров с ценами, что удобно при крупных заказах организациями и для оптовых покупателей.
Заключение
Содание сайта - самый лучший вариант для компании, которая многое хочет рассказать своим клиентам, как уже существующим, так и потенциальным. Такой ресурс должен быть ориентированный именно на те услуги, которые компания предоставляет. Важные условия эффективной работы - обновление сайта вместе с развитием компании и интуитивно понятная навигация. Основная функция корпоративного сайта - сделать так, чтобы клиент смог получить через Интернет, не выходя из дома, те же самые услуги, как если бы он приехал в офис компании. Это касается как информации (текст, фотографии или живое общение с менеджером), так и процесса оформления заказа.
В процессе создания сайта boom-sound.by положено начала интеграции услуг музыкальной компании BOOM в онлайн-пространство. С помощью реализации сервисов онлайн-записи на репетицию и аренду оборудования, достигнуто упрощение этих задач как для клиентов компании, так и для менеджеров. Выбор оптимального свободного временного промежутка при помощи телефонной связи довольно затруднительное и времязатратное занятие. На данный момент запись на репетицию сводится в связи с менеджером и бронировании,уже выбранного на сайте, времени. В дальнейшем планируется введение электронных методов предоплаты услуг компании.
Для новых клиентов окажется полезным возможность ознакомится на сайте со списками и фотографиями:
· оборудования для проката;
· оснащения репетиционных залов;
· услуг ремонта.
Так же эта информация позволит привлекать новых клиентов.
Реализована лента новостей (включая RSS). Для удобства новости разделены на основныетематические категории. Она обеспечит пользователей актуальной информацией о:
1. поставках товаров;
2. акциях;
3. скидках;
4. проведении музыкальных мероприятий;
5. наличии оборудования в аренду;
6. наличии свободного времени на студиях.
Для привлечения внимания посетителей сайта к наиболее важным текущим новостям и услугам на главной странице сайта реализован слайдер. Простая навигация позволяет вернуться на интересующий пользователя слайд, а кликабельность изображений - быстро переместиться на соответствующий материал сайта.
Начала проводиться работа по оптимизации сайта для лучшего индексирования в поисковых системах Google и Яндекс. Так же сайт размещен в популярных белорусских онлайн-каталогах. Развитие в данном направлении позволит обеспечить узнаваемость сайта компании в интернет-среде.
Размещено на Allbest.ru
Подобные документы
Создание локальной версии Web-сайта компании, оказывающей услуги в сфере "Дизайн помещений". Логическая структура сайта – набор тематических рубрик с распределенными по разделам документами. HTML–коды Web-страниц. Теоретические аспекты создания сайта.
курсовая работа [94,0 K], добавлен 10.05.2011Современные Интернет-технологии, Web-дизайн и браузеры. Язык разметки гипертекстовых страниц HTML. Представление текста и графики на Web-страницах. Правила и этапы создания сайта. Влияние дисплеев на Web-дизайн. Сравнительный анализ HTML-редакторов.
дипломная работа [3,3 M], добавлен 21.06.2013Понятие сайта как Интернет-ресурса. Специфические особенности сайтов учебных заведений. Видимость сайта в поисковых выдачах. Анализ сайта учебного заведения на примере сайта Тираспольского межрегионального университета. Составляющие (рубрики) сайта.
курсовая работа [403,8 K], добавлен 27.04.2013Ознакомление с современными Интернет-технологиями и использование их в своей разработке. Изучение основных программ, применяемых для разработки и создания Web-сайта. Инструментальные средства. Информационная структура, дизайн и шаблон web-сайта.
контрольная работа [1,0 M], добавлен 15.02.2017Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.
курсовая работа [1,0 M], добавлен 09.01.2014Проектирование web-сайта. Пользовательские персонажи, детальная концепция сайта. Разработка скелетной схемы страниц, информационной архитектуры. Создание прототипа web-сайта. Выбор среды разработки. CMS системы и их анализ. Стадии проектирования сайта.
курсовая работа [346,7 K], добавлен 18.09.2016Цели, функции, аудитория web-сайта. Основные разделы web-сайта, его логическая и физическая структуры. Веб-дизайн - это вид графического дизайна, направленный на разработку и оформление интернет-сайтов, отличающийся оригинальностью технических решений.
реферат [503,5 K], добавлен 30.06.2014Особенности создания сайта интернет-магазина для частных лиц и организаций. Анализ финансовой и технико-экономической деятельности фирмы. Создание информационной модели сайта, ее базовые элементы. Выбор программного и аппаратного обеспечения сайта.
дипломная работа [1,5 M], добавлен 08.12.2013Технические характеристики компьютерных систем. Анализ интернет-сайта филиала предприятия и выявление основных проблем. Обновление структуры и подгонка сайта под современные стандарты с помощью программы WebSite X5. Создание дизайна веб-страницы.
отчет по практике [410,2 K], добавлен 14.01.2015Проектирование сайта учителя в системе Ucoz с учетом особенностей педагогической деятельности. Обновление и пополнение содержимого сайта. Регистрация пользователей. Настройка дизайна и выбор модулей для сайта. Создание меню и наполнение сайта контентом.
курсовая работа [2,1 M], добавлен 14.06.2014
