1 of 19

Ергономіка розміщення відомостей на веб-сторінці

За навчальною програмою 2018 року

Урок 29

10

2 of 19

Запитання

Розділ 4 § 4.4

  1. Які теги мови HTML ви знаєте? Яке їх призначення?
  1. Які вимоги до оформлення комп'ютерних презентацій зумовлено правилами композиції, колористики, ергономіки?
  1. Які етапи створення сайту засобами системи керування вмістом веб-сайтів Google Сайти?

10

© Вивчаємо інформатику teach-inf.at.ua

3 of 19

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

Розділ 4 § 4.4

Дизайн веб-сайту, як і дизайн комп'ютерних презентацій, базується на законах:

Композиції

Колористики

Ергономіки

10

© Вивчаємо інформатику teach-inf.at.ua

4 of 19

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

Розділ 4 § 4.4

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

У процесі створення веб-сайту важливо спланувати його структуру так, щоб користувачам Інтернету було максимально зручно працювати з вашим сайтом.

10

© Вивчаємо інформатику teach-inf.at.ua

5 of 19

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

Розділ 4 § 4.4

Ергономіка — це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.

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

10

© Вивчаємо інформатику teach-inf.at.ua

6 of 19

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

Розділ 4 § 4.4

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

Будь-яка людина повинна мати можливість інтуїтивно пов'язувати дії, які потрібно виконати на веб-сторінці, з об'єктами, що вона бачить.

10

© Вивчаємо інформатику teach-inf.at.ua

7 of 19

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

Розділ 4 § 4.4

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

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

10

© Вивчаємо інформатику teach-inf.at.ua

8 of 19

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

Розділ 4 § 4.4

Ергономіка сайту стосується:

Розміщення

відомостей на

веб-сторінках

Системи

навігації

Оформлення

сторінок

Швидкості їх

завантаження

10

© Вивчаємо інформатику teach-inf.at.ua

9 of 19

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

Розділ 4 § 4.4

Наведемо опис критеріїв, за якими оцінюється ергономічність веб-сторінок.

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

Назва сайту — в заголовку всіх сторінок.

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

Найважливіші відомості — на початку сторінки.

Колонок з контентом — не більше ніж три.

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

Нижній колонтитул (підвал) дублює меню, зазначає авторські права (копірайт) дизайнера сайту, містить контактні дані власника ресурсу та дизайнера

Розташування відомостей на сторінці

Опис

Критерій

10

© Вивчаємо інформатику teach-inf.at.ua

10 of 19

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

Розділ 4 § 4.4

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

З будь-якої сторінки є можливість перейти до перегляду головної (домашньої) веб-сторінки сайту.

Сайт має не більше ніж три рівні вкладеності веб-сторінок. Меню сайту — велике та помітне, легке в розумінні. Гіперпосилань в одному блоці навігації — не більше ніж 7, інші – у вкладених меню або інших блоках.

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

Зручність навігації

Опис

Критерій

10

© Вивчаємо інформатику teach-inf.at.ua

11 of 19

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

Розділ 4 § 4.4

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

Єдиний стиль оформлення та компоновки матеріалу на всіх сторінках.

Кольори фону сторінки та тексту контрастні.

Заголовки статей виділено шрифтом збільшеного розміру.

Текст статей вирівняно за шириною.

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

Мінімум анімованих зображень, що відволікають увагу.

Порожній простір (поля) навколо тексту та зображень

Оформлення

Опис

Критерій

Час завантаження сторінки — якомога менший.

Зображення — оптимізовані для веб-простору, бажано не більше ніж 40 Кбайт

Швидкість завантаження

10

© Вивчаємо інформатику teach-inf.at.ua

12 of 19

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

Розділ 4 § 4.4

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

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

10

© Вивчаємо інформатику teach-inf.at.ua

13 of 19

Для тих, хто хоче знати більше

Розділ 4 § 4.4

Новим піонером медіа називають Якоба Нільсена (нар. 1957 р.) — датського вченого, одного з провідних консультантів з ергономіки сайтів, доктора наук наукового напряму людино-комп'ютерної взаємодії Технічного Університету Данії в Копенгагені.

Якоб Нільсен

10

© Вивчаємо інформатику teach-inf.at.ua

14 of 19

Для тих, хто хоче знати більше

Розділ 4 § 4.4

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

10

© Вивчаємо інформатику teach-inf.at.ua

15 of 19

Розгадайте ребус

Ергономіка

«Ребуси українською» © rebus1.com

Розділ 4 § 4.4

10

© Вивчаємо інформатику teach-inf.at.ua

16 of 19

Дайте відповіді на запитання

Розділ 4 § 4.4

  1. Який сайт вважається ергономічним?
  1. Які критерії потрібно враховувати для забезпечення ергономічності сайту? Схарактеризуйте їх.
  1. Яким чином під час створення сайту можна створити зручності для користувачів з особливими потребами?

10

© Вивчаємо інформатику teach-inf.at.ua

17 of 19

Домашнє завдання

Проаналізувати

§ 4.4, ст. 131-133

Розділ 4 § 4.4

10

© Вивчаємо інформатику teach-inf.at.ua

18 of 19

Працюємо за комп’ютером

Розділ 4 § 4.4

Сторінка

137

10

© Вивчаємо інформатику teach-inf.at.ua

19 of 19

Дякую за увагу!

За навчальною програмою 2018 року

Урок 29

10