1 of 40

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

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

Урок 30

10

2 of 40

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

Розділ 4 § 24

Пригадай

що таке інтерфейс;
яку мову використовують при розмітці веб-сайта;
які розрізняють типи сайтів;

Ти дізнаєшся

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

9

3 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

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

10

4 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

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

комфорт під час використання, який полягає у зменшенні фізичної та психологічної втоми;

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

10

5 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

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

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

10

6 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

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

Головною перешкодою у створенні сайта з урахуванням ергономіки є різні профілі відвідувачів.

10

7 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

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

очікування користувачів: не всі відвідувачі мають ті само вимоги в плані графіки;

звички: тобто набута поведінка;

вік: загалом характеризує здатність до адаптації та швидкість користувача при перегляді;

обладнання: одна з головних перешкод. Відображення сайта може відрізнятися на різних комп’ютерах;

рівень знань: не всі відвідувачі є фахівцями в інформаційних технологіях.

10

8 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

Ергономіка сайта має бути розрахована на найменш досвідченого користувача.

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

10

9 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

Розглядають такі основні критерії ергономіки при створенні сайта:

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

Критерій

Лаконічний сайт зміцнить довіру до організації

Простота

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

Непереванта-женість

10

10 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Чіткість

Критерій

Доведено, що друкований текст важче читати з монітора, ніж з паперу (займає на 25 % більше часу)

Ясність

Текст має бути структурований за параграфами та назвами для полегшення читання

Структурова-ність

Інформація повинна бути розташована за ступенем важливості. Найважливіша інформація має бути зверху сторінки

Розташуван-ня

10

11 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Чіткість

Критерій

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

Видимість адреси

Мають бути вказані такі дані, як ім’я автора, дата останнього оновлення та дата публікації.

Актуальність інформації

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

Однорідність

структури

10

12 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Швидкість

Критерій

Час завантаження сторінки має бути якомога коротшим, бо ніхто не буде чекати більше 15 с завантаження. Цей фактор в основному залежить від розміру сторінки, зображень на ній і можливостей сервера

Час завантажен-ня

Гарною ідеєю є оптимізація розміру зображень при доборі відповідного розміру та кольору. Не варто завантажувати зображення, більші за 30–40 Kб

Оптимізовані зображення

10

13 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Взаємодія

Критерій

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

Гіпертекстові посилання

Важливо передбачити можливість зворотнього зв’язку, за яким можна зв’язатися з адміністратором

Сприяння взаємодії

10

14 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Адаптивність

Критерій

Варто використовувати шрифти, розміри яких виражаються абсолютною величиною. Таким чином, користувач може змінити розмір шрифту за потреби. Адаптивність характеризується здатністю сайта автоматично ставати персоналізованим без

втручання користувача

Зміна розміру шрифту

10

15 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Доступність

Критерій

Можливість мати доступ до сайта усім категоріям користувачів, включаючи людей з вадами зору

Сприяння доступу

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

Взаємодія

10

16 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Доступність

Критерій

Важливо, щоб код сайта було можливо прочитати в текстовому режимі, тому доцільно використовувати HTML замість Flash. Зображення й анімація не

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

Принцип прозорості

10

17 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Доступність

Критерій

Зображення мають бути підписані (слід використовувати атрибут ALT). Це необхідно для того, щоб люди з вадами зору зрозуміли сенс зображення

Підпис

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

Вибір кольору

10

18 of 40

Що розуміють під ергономікою вебсайта і які існують критерії ергономіки?

Розділ 4 § 24

(Продовження…) основні критерії ергономіки:

Доступність

Критерій

Інформація має бути доступна навіть без

Стилів

Правильне використання стилів

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

Контраст

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

Змішаний розмір шрифту

10

19 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

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

точки, лінії, текстури, фактури, форми, кольору, пропорції, композиції, симетрії, асиметрії, рівноваги, динаміки, ритму, гармонії, контрасту, колориту, перспективи, центру мас

дизайну

використання правил і критеріїв ергономіки та врахування основних складових веб-дизайну:

форма подання та стиль наповнення сайта, його зміст

оформлення — графічні елементи, навігація, шрифти, кольорова гама

10

20 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

(Продовження…) Використання правил і критеріїв ергономіки та врахування основних складових веб-дизайну:

технології — засоби створення, форматування сторінок і надання їм динамізму

подання — швидкість і надійність відображення сайта в мережі

причина створення сайта та очікувані результати

10

21 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

Дизайн сайта (веб-дизайн, дизайн web) — це один з напрямів графічного дизайну. Існують такі основні вимоги до сайта.

Зручна навігація

Стилістика сайта

Розмір сайта

Оформлення контенту

Веб-інтерфейс

10

22 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

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

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

Якщо розділів сайта багато й вони мають ще й підрозділи, потрібно зробити меню, що випадає. Якщо структура сайта є досить складною, доцільно зробити «Карту сайта» з поясненнями.

10

23 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

У текстах доцільно використовувати посилання (особливо, якщо це потрібно для більш детальної інформації).

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

10

24 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

Стилістика сайта. Весь сайт має бути витриманий у єдиному стилі, сторінки — з приблизно однаковим виглядом. Допускається створення головної сторінки в трохи іншому стилі.

Мають бути витримані єдині кольори, шрифти. Важливо також виділяти на сторінках головне (кольором, шрифтом, зображенням), а другорядне — «приховувати», щоб воно не заважало користувачеві, але він міг при бажанні дізнатися більше.

10

25 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

Розмір сайта. Через різницю в розмірах моніторів дизайни сайтів прийнято ділити на:

«гнучкі»

«жорсткі»

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

10

26 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

Жорсткий дизайн — з певною постійною шириною сторінок. Переважно підганяється під неширокий екран. Але на широкому — виглядатиме трохи порожньо. Хоча, як правило, такий дизайн виглядає акуратніше «гнучкого», бо має первинний вигляд, задуманий розробниками.

10

27 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

Оформлення контенту. Створення якісного дизайну сайта передбачає ще й певне оформлення контенту (текстів, зображень, таблиць, схем тощо). На сайті має бути цікава інформація, обов’язково правильно подана й оформлена, інакше користувач просто не зможе розібратися в ній.

10

28 of 40

Що передбачає веб-дизайн?

Розділ 4 § 24

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

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

10

29 of 40

Які переваги й недоліки різної компоновки сторінок сайта?

Розділ 4 § 24

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

Дизайн 1

Дизайн 2

Дизайн 3

Дизайн 4

Дизайн 5

10

30 of 40

Які переваги й недоліки різної компоновки сторінок сайта?

Розділ 4 § 24

Незалежно від типу дизайну, можна виділити основні складові:

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

1

область розміщення гіперпосилань і панелі навігації сайта;

2, 5

область розміщення тексту;

4

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

3

10

31 of 40

Які переваги й недоліки різної компоновки сторінок сайта?

Розділ 4 § 24

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

10

32 of 40

Які переваги й недоліки різної компоновки сторінок сайта?

Розділ 4 § 24

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

Дизайн 6

Дизайн 7

Дизайн 8

Дизайн 9

10

33 of 40

Які переваги й недоліки різної компоновки сторінок сайта?

Розділ 4 § 24

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

Як і в попередньому випадку, частини 1, 2, 4, 5 мають те само призначення.

У частині 3 також розміщується панель гіперпосилань, частина 6 дизайну 8 і 9 має допоміжне додаткове призначення.

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

10

34 of 40

Які переваги й недоліки різної компоновки сторінок сайта?

Розділ 4 § 24

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

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

10

35 of 40

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

Ергономіка

Розділ 4 § 24

10

36 of 40

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

Структура

Розділ 4 § 24

10

37 of 40

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

Розділ 4 § 24

Що вивчає ергономіка? Чому при створенні сайта доцільно використовувати ергономічні вимоги до веб-сайтів?

Що передбачає веб-дизайн?

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

Які переваги та недоліки різної компоновки сторінок сайта?

Як структура веб-сторінки впливає на її сприйняття користувачем?

10

38 of 40

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

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

§ 24, ст. 225-231

Розділ 4 § 24

10

39 of 40

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

Розділ 4 § 24

Сторінка

228-229

10

40 of 40

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

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

Урок 30

10