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

  1. Ергономіка розміщення об'єктів на сторінці

    У процесі створення веб-сайту важливо спланувати його структуру так, щоб ко 

ристувачам Інтернету було максимально зручно працювати з вашим сайтом. 

    Ергономіка (грец έργος — праця, νώμος — закон) — це наука, яка вивчає особ 

ливості виробничої діяльності людини з метою забезпечення ефективності, безпеки  

та зручності цієї діяльності.

    Ергономічний сайт — це сайт, що забезпечує необхідні зручності відвідувачеві,  

зменшує фізичну та психологічну втому, зберігає здоров’я та працездатність.  

Складовою частиною ергономіки сайту є ступінь зручності та простоти веб-сайтів  

у використанні для користувача без потреби проходження спеціального навчання.  

Будь-яка людина повинна мати можливість інтуїтивно пов’язувати дії, які потрібно  

виконати на веб-сторінці, з об’єктами, що вона бачить.

    Під час розробки структури веб-сторінок потрібно:

    • подавати відомості у зрозумілій і стислій формі;

    • пропонувати кілька посилань для переходу на одну й ту саму сторінку, щоб забезпечити кожному користувачу можливість вибрати найбільш зручне або очевидне;

    • усувати будь-яку двозначність щодо наслідків дій після вибору елементів керування на веб-сторінці.

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

Таблиця

Критерії оцінювання ергономічності веб-сторінок

    Під час розробки веб-сайту потрібно враховувати можливість надання зручності  

для користувачів з особливими потребами. Для цього варто звертати увагу на таке:

    • розмір шрифту повинен бути достатнім, щоб без масштабування сторінок його  

змогли прочитати без напруження зору більшість користувачів; для людей з ва

 

дами зору бажано надавати можливість змінення розміру шрифту;

    • зображення повинні мати підписи та текст заміщення, щоб люди з вадами зору  

змогли зорієнтуватися у змісті зображення;

    • за можливості додавати на веб-сторінки елементи, що озвучують важливі відо 

мості на сайті.

    2. Поняття про просування сайтів

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

    Існують різні та постійно з’являються нові стратегії просування сайтів. Наведемо приклади стратегій, які використовують для просування сайтів:
    • Реєстрація в пошукових каталогах — полягає в розміщенні відомостей про сайт у базах даних популярних тематичних каталогів, наприклад Мета (meta.ua), Uaport (uaport.net) тощо.
    • Пошукова оптимізація, або SEO (англ. Search Engine Optimization — пошукова оптимізація), — процес коригування HTML-коду, контенту, структури сайту для забезпечення відповідності вимогам пошукових систем з метою отримання високих позицій веб-ресурсу в результатах пошуку за певними запитами користувачів.
    • Просування засобами соціальних мереж, SMO (англ. Social Media Optimization — оптимізація соціальних медіа) та SMM (англ. Social Media Marketing — маркетинг соціальних мереж) — просування сайту з використанням можливостей соціальних мереж. SMO передбачає створення на сайті засобів для зручного додавання відомостей з нього в соціальні мережі, коментування матеріалів сайту з використанням облікового запису соціальних мереж тощо. SMM — це реклама сайту в соціальних мережах і медіа 

    • Контекстна (банерна) реклама — передбачає розміщення рекламних оголошень про сайт на сторінках пошукових систем у результатах пошуку за певними ключовими словами. Рекламна кампанія є платною та проводиться з використанням спеціальних сервісів пошукових систем, наприклад Google Adwords.
    • Просування сайту офлайн — може проводитись у вигляді зовнішньої реклами, листівок, реклами у газетах, на радіо та телебаченні тощо.
    Ці та інші засоби сприяють збільшенню відвідуваності сайту. Але основним фактором популярності ресурсу є унікальний, цікавий і корисний для відвідувачів контент сайту.

    3. Пошукова оптимізація

    Для того щоб пошукова система наводила в числі перших у списку знайдених ресурсів ваш сайт, потрібно враховувати такі параметри:

    • частота появи ключових слів на веб-сторінках. Оптимальною вважається щільність ключових слів 5-7 % від текстового вмісту веб-сторінки або 3-4 рази на сторінку;

    • індекс цитування сайту, тобто показник, який визначається на основі кількості веб-ресурсів, які мають гіперпосилання на цей сайт При цьому сайти з посиланнями повинні бути такої самої або схожої тематики та ін.

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

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

    Вибрані ключові слова потрібно розмістити в HTML-тегах сторінки, які опрацьовують пошукові роботи:

    • <title> — назва, що відображається на вкладці браузера;

    • <meta name="keywords" content="ключові слова"> — список ключових слів;

    • <meta name="description" content="опис"> — опис сайту.

    Наприклад, під час пошуку в пошуковій системі Google за запитом весела наука на першій позиції виведено посилання на сайт Весела наука з URL-адресою veselanauka.org.

    

    HTML-код цієї сторінки містить, серед іншого, такі теги:

    <meta name="keywords" content="Всеукраїнський Конкурс Проектів Інформатика Весела Наука школа ліцей чорноморський"/>

    <meta name="description» content="Всеукраїнський Конкурс Проектів по Інформатиці Весела Наука"/>

    <title>Всеукраїнський Конкурс Проектів по Інформатиці Весела Наука</title>

    Під час внутрішньої оптимізації сайту доцільно у HTML-коді сторінок виділити ключові слова тегами, які свідчать про важливість цих слів:

    • <strong> — задає напівжирне накреслення, вказує на важливість виділеного тексту;

    • <i> — задає курсивне накреслення;

    • <big> — збільшує поточний розмір символів тексту.

    Достатньо, щоб на веб-сторінці було виділено таким чином 1-2 ключових слова.

    Також на веб-сторінках повинні бути заголовки Заголовок, створений тегом <h1>, має бути лише один і містити ключову фразу. Підзаголовки на сторінці варто створювати тегами <h2>.

    Бажано також, щоб зображення, вставлені на веб-сторінку, мали текст заміщення, який містить ключові слова. Для цього використовується атрибут alt:

    <img src="ім’я або URL-адреса файла із зображенням" alt="текст заміщення">

    У тексті веб-сторінок доцільно створювати гіперпосилання для переходу на інші сторінки цього самого сайту.

    Наприклад, під час пошуку в пошуковій системі Google за запитом винахідник на першій позиції виведено посилання на сайт Технічна студія Винахідник з URL-адресою vynahidnyk.org.

    HTML-код цієї сторінки, серед іншого, містить такі теги:

    <img src="http://vynahidnyk.org/files/logo.png" alt="Винахідник"/>

    <strong>Технічна студія Винахідник</strong>

    <a href="http://vynahidnyk.org/pro-studiyu/">Про студію</a>

    Зауважимо, що під час створення сайту засобами сервісу Google Сайти не має можливості врахувати деякі із цих рекомендацій, оскільки розробник сайту не працює безпосередньо з HTML-кодом сторінок сайту.

2. Робота в класі

---

Практична робота 8. Розробка простого веб-сайта

Під час роботи дотримуйтесь правил техніки безпеки.

    Завдання: 

 Створіть у сервісі Google Сайти веб-сайт Збережемо природу рідного краю, розмістіть на ньому відомості про екологічні проблеми вашого регіону та запропонуйте способи їх подолання. Здійсніть заходи з просування та пошукової оптимізації сайту.

Методичні рекомендації:

    1. Визначте ключові слова для вашого сайту, які стануть назвами веб-сторінок. Ними можуть бути: екологія, екологічні проблеми, захист природи, природа України, збереження природи, природа рідного краю, подолання екологічних проблем тощо.

    2. Створіть у сервісі Google Сайти сайт з назвою Збережемо природу рідного краю.

    3. Виберіть тему оформлення сайту та зображення у верхньому колонтитулі домашньої сторінки на ваш смак.

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

    5. Розмістіть ключові слова сайту в заголовку статті на домашній сторінці. Для цього:

    5.1. Виберіть у панелі навігації домашню сторінку

    5.2. Уставте на веб-сторінку текстовий блок

    5.3. Виберіть у меню текстового блока кнопку відкриття списку Стилі та команду Заголовок. Зверніть увагу на зміну розміру шрифту в заголовку.

    5.4. Уведіть заголовок, наприклад Рідний край, натисніть клавішу Enter. Зверніть увагу на зміну розміру шрифту в тексті.

    5.5. Уведіть 2-3 речення з описом того, за що ви любите свій край, яким ви хочете його бачити. В окремому абзаці вкажіть призначення сайту — для висвітлення екологічних проблем вашого краю та пошуку шляхів їх подолання.

    6. Уставте до тексту сторінки гіперпосилання для переходу на інші сторінки сайту: під час вибору слів про екологічні проблеми — на сторінку з описом проблем,  під час вибору слів про шляхи подолання проблем — на сторінку про збереження природи.

    7. Уведіть ключові слова як текст заміщення для зображення. Для цього:

7.1. Уставте на сторінку Збереження природи інфографіку Біорізноманіття в Україні зі сторінки Новини сайту Всеукраїнська екологічна ліга.URL-адреса файла із зображенням

7.2. Виберіть в меню блока зображення кнопку Інші опції редагування та команду Додати текст заміщення.

7.3. Уведіть текст Природа України.

7.4. Виберіть кнопку Застосувати.

    8. Уставте на сторінку Екологічні проблеми текст з файла. Оформіть заголовки та підзаголовки в тексті. Для цього:

8.1. Виберіть у панелі навігації сторінку Екологічні проблеми.

8.2. Уставте на сторінку текстовий блок

8.3. Відкрийте у вікні текстового процесора файл.

8.4. Виділіть увесь текст, скопіюйте його та вставте в текстовий блок на сторінці сайту.

8.5. Виділіть заголовок тексту Сім екологічних проблем України, виберіть у меню текстового блока кнопку відкриття списку Стилі та команду Заголовок.

8.6. Виділіть підзаголовок Неякісна вода, виберіть у меню текстового блока кнопку відкриття списку Стилі та команду Підзаголовок.

8.7. Оформіть як підзаголовки назви ще шести екологічних проблем.

    9. Опублікуйте сайт. Уведіть частину URL-адреси ecology та ваше прізвище латиницею.

    10. Перегляньте опублікований сайт.

    11. Закрийте вікно браузера.