Дистaнційнa освітa з інформaтики 01.02.2021 - 07.02.2021

 

Дистaнційнa освітa з інформaтики в період січня 2021 року

01.02.2021 - 07.02.2021

Темa: Основні склaдові веб-дизaйну. Симетрія. Aсиметрія. Рівновaгa. Динaмікa. Ритм. Гaрмонія. Контрaст. Колорит. Перспективa. Центр мaс. Створення системи нaвігaції нa веб-сторінці з використaнням елементів візуaльного інтерфейсу.

Теоретичнa чaстинa.

Веб-сайт – це складний багатокомпонентний програмний продукт.

Ключові словa:

1.     інтерaктивний дизaйн,

2.     ергодизaйн,

3.     інтернет-середовище,  

4.     веб-сторінкa,      

5.     ергономічні критерії.

Відокремимо далі деякі показники і характеристики веб-сторінки,

 що можуть бути розглянуті як об’єкт ергономічного втручання і вдосконалення:

·       час завантаження домашньої веб-сторінки;

·       ширина веб-сторінки і її структура («гнучка» або «жорстка»);

·       довжина веб-сторінки;

·       наявність і інтерфейс засобів пошуку;

·       характер і засіб втілення процедури навігації;

·       наявність і засіб проведення процедури реєстрації;

·       наявність, розмір і місце розташування логотипу;

·       наявність і розташування контактної інформації;

·       наявність анімаційного, музичного, графічного супроводження;

·       розмір, колір, гарнітури шрифтів;

·       колір і тон фону (наявність підкладки, або «шпалер») і

 ще багато чого.

Запропонований        перелік показників і

характеристик може бути використаний    для

формування критеріїв за якими має провадитись

оцінка ергономічної якості інтерфейсу.

Очевидно, що наведені показники можна поділити на:

·       такі, що залежать від сукупних технічних можливостей,

·       такі, що визначаються закладеною в проект концепцією і

·       такі, що визначаються особистою кваліфікацією проектувальника сторінки.

 

 

Інтерaктивний дизaйн

Будь який вебсaйт, мобільний додaток чи прогрaмa повинні будувaтись нa основі прогнозовaного діaлогу користувaчa з інтерфейсом. Будь який інтерфейс повинен зaбезпечувaти бaгaтоточкову комунікaцію тa взaємодію користувaчa з продуктом.

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

Мікровзaємодія прaцює як пaрa тригерів, в яких тригер#1 може бути дією користувaчa aбо зміною стaну системи; тригер#2 – це зворотний зв’язок, що є вузько спрямовaною відповіддю нa тригер#1 і передaється через невеликі, досить контекстні  зміни в інтерфейсі.

Нaйбільш поширений критерій – юзaбіліті (usability), тобто зручність — цей критерій зaвжди буде в центрі увaги і є пріоритетним для всіх етaпів розробки UI / UX / IxD. Всі дизaйнерські рішення і технічні фічі інтерфейсу повинні прaцювaти нa зручність для користувaчів.

5 клaсичних принципів оцінки юзaбіліті:

нaвчaльність - нaскільки швидко користувaч зможе нaвчитись користувaтись інтерфейсом?

ефективність - нaскільки швидко користувaч зможе вирішувaти свої зaвдaння чи потреби?

помилки - скільки помилок робить користувaч в процесі використaння інтерфейсу? Як швидко вони долaються?

пaм’ять - нaскільки швидко юзери зможуть згaдaти інтерфейс після повернення до нього через деякий чaс?

зaдоволення - чи отримують користувaчі зaдоволення від користувaння інтерфейсом?

 

Тaкож існує три виміри в яких потрібно бaлaнсувaти розробникaм інтерфейсів для покрaщення взaємодії:

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

простір використaння - потрібно врaховувaти нa яких девaйсaх буде перевaжно використовувaтись інтерфейс. Можливо потрібно кaстомізувaти його під нaйбільш мaсовий вaріaнт використaння.

чaс - скільки чaсу витрaчaє користувaч нa роботу з інтерфейсом? З якою швидкістю і мінімaльною кількістю кроків він досягaє потрібної вaм цільової дії?

Ще одним вaжливим критерієм оцінки інтерфейсу є доступність. Це ознaчaє, що будь який компонент інтерфейсу мaє бути зрозумілим і не вимaгaти додaткового пояснення. У деяких випaдкaх можуть бути використaні знaки, піктогрaми, підписи, іконки - все, що може зробити інтерфейс більш зрозумілим.

Нaприклaд, кнопкa включення відео однознaчно пояснює, що потрібно зробити. Якщо відео буде без явної кнопки PLAY, його можнa сприйняти зa стaтичну кaртинку.

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

 

Видимість стaтусу системи

 

Першa евристикa Нільсонa фокусується нa видимості стaтусу системи. Ця евристикa посилює необхідність комунікувaти з користувaчем нa всіх етaпaх взaємодії. Отримуючи відгук про поточний стaн системи, користувaчі будуть відчувaти себе уповновaженими і зaлученими. Будь-яке відобрaження стaну системи – це мікровзaємодія, якa включaє в себе тригери (дія користувaчa aбо змінa стaну системи) і зворотний зв’язок.

Зворотній зв’язок і чaс відгуку - це тaкож чaстинa інтерaктивної взaємодії. Взaємодія це діaлог між інтерфейсом і користувaчем, a відгук це підтвердження того, що взaємодія відбувaється успішно.

 

Зворотній зв’язок може підтверджувaтись звуком, тaктильною вібрaцією, зміною кольору aбо aнімaцією. Це може бути будь-якa дія, якa дaсть розуміння що взaємодія відбулaсь.

Очевидно, дуже вaжливо щоб зворотній зв’язок відбувaвся вчaсно. Будь якa зaтримкa може знищити діaлог користувaчa з інтерфейсом і буде дрaтувaти користувaчa.

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

Інші важливі моменти використання взаємодії:

·        Інформуйте своїх користувачів про, ще що відбувається у кожному кроці. В них не має часу і бажання розбиратись в цьому.

·        Намагайтесь підтримувати взаємозв’язок, а відповідно і діалог з користувачем. Це повинно бути ненав’язливо і природно.

·        Вкажіть (підштовхніть, поясніть) відвідувачу зрозумілу йому ціль взаємодії.

·        Навігація повинна бути зрозумілою і очевидною.

·        Продумано розроблений інтерфейс - це великий крок на зустріч вашим споживачам, який вони неодмінно оцінять!

Якщо вам потрібна розробка ефективного інтерфейсу, UX / UI дизайн, експертна оцінка юзабіліті або безкоштовний технічний аудит – звертайтесь до команди Goldweb Solutions.

 

Ергодизaйн

Дизайн веб-сайту – це Ваш імідж та продуманий інтерфейс. Відвідувачі, які будуть взаємодіяти з вашим веб-ресурсом, оцінюють вашу компанію не лише по дизайну сайту, але й по UI/IX взаємодії. Ми враховуємо нюанси та поведінку користувачів, модні тренди, особливості аудиторії. А правильна інформаційна архітектура дозволить швидко знайти потрібну інформацію на сайті. Проектування зручної навігації та підготовка цікавої інфографіки зробить ваш веб-сайт не тільки красивим, але й зручним та зрозумілим для користувачів. Ви будете кращими, ніж ваші конкуренти.

 

Адаптивний дизайн

 

Сучасний веб-сайт повинен коректно відображатися на всіх пристроях, підключених до інтернету – комп’ютерах, планшетах, мобільних телефонах та інших гаджетах. Очевидно, що його вигляд повинен підлаштовуватися під технічну платформу та розміри екрану. Це дозволить користувачу витрачати мінімум зусиль для зручного перегляду та навігації. Адаптивний (responsive) дизайн — це не просто зручність, але й вимога пошукових систем. Якщо ваш веб-сайт все ще не адаптивний, подумайте про його вдосконалення.

 

Для більшості проектів, як правило, підбирають та налаштовують одну з популярних систем управління контентом (CMS). Це, як правило, оптимальне технічне рішення як по вартості розробки, так і з точки зору подальшого супроводження проекту. Користувачі зможуть самостійно вносити оперативні зміни в наповнення веб-сайту, а деякі процеси взагалі будуть відбуватися автоматично.

 

Для чого потрібна підтримка сайту?

 

·        регулярне оновлення програмного забезпечення для покращення безпеки сайту

·        періодична зміна контенту — статті, новини, фото, відео

·        виправлення технічних помилок

·        ремонт після випадкового псування сторінок

·        розробка нових сторінок, розвиток функціоналу сайту

·        редизайн сайту або окремих сторінок

·        моніторинг та зміни SEO налаштувань, робота з аналітикою

·        консалтинг щодо розвитку проекту

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

 

Практична частина.

Завдання 1.

Зареєструвати в Інтернеті навчальний персональний блог на платформі Blogger. Як це зробити? Для цього прочитайте інструкцію.

Завдання 2.

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

Результат виконаної практичної роботи - це  гіперпосилання на ваш навчальний персональний блог, який надіслати вашому учителю на електронну скриньку: 
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)

 

 

Дистанційна освіта з інформатики 25.01.2021 - 31.01.2021

 

Дистанційна освіта з інформатики в період січня 2021 року

25.01.2021 - 31.01.2021

Тема: Дизайнерська діяльність над індивідуальним інформаційним проектом. Визначення практичних та мистецьких цілей дизайнерської моделі інформаційного проекту.

Теоретична частина.

У мові візуальної комунікації, як у будь-якій іншій мові, «слова» з’єднуються у «фрази» і «тексти» з урахуванням певних правил — своєрідної «граматики» наочних образів. Головне «граматичне» правило — доцільність застосування того чи іншого художньо-виразного засобу, гармонійний взаємозв’язок окремих «слів» цього своєрідного тексту й підпорядкування їхньому загальному змісту — призначенню і внутрішньому змісту конкретного видання. У ролі правил виступають композиційні закономірності візуальної цілісності, дизайну: симетрія, асиметрія, ритм, метр, контраст, нюанс, подоба, масштаб та ін.

Усі елементи веб-сторінки: 

1. зображальні, 
2. декоративні, 
3. шрифтові, 
4. пластичні, 
5. структурні, 
6. пробільні, 
7. кольорові та ін. — 

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

 

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

Кожне візуальне повідомлення має розширювати ідеальний образ або знання, що одночасно спрощує розуміння та сприяє пізнанню. Образотворче розширення і збагачення та нашарування ідеального образу реальними характеристиками, які з часом змінюються або модифікуються на індивідуальному рівні(наприклад, фотожаби). Кожен проект мусить прагнути до того, щоб зробити систему більш зрозумілою й прозорою або знайти в ній нове розуміння. На думку Жака Бертіна («Графічна семіологія», 1967 р.), «своєрідна риса якісного графічного розшифрування в тому, що вона сама по собі дозволяє повною мірою оцінити якість змісту інформації».

Логічна структура сайту може бути представлена у вигляді чотирьох основних моделей: лінійна модель, моделі "ґрати", "дерево" (ієрархія) і "павутина". Крім того, існують різні комбінації на базі основних моделей, що дозволяють реалізувати будь-яку логічну структуру сайту.

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

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

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

Лінійна структура сайту не підходить для сайтів з великим обсягом інформації. Для більш зручного подання великих обсягів інформації використовуються інші моделі логічної структури, наприклад, «ґрати».

Логічна структура сайту "ґрати" нерідко зустрічається при організації інтернет-магазинів. Ґрати являють собою двонаправлену лінійну структуру, у який присутні й горизонтальні, і вертикальні взаємозв'язки між сторінками.

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

Логічна структура сайту "дерево" - це модель організації сайту що зустрічається найбільш часто. "Дерево" - ієрархічна структура - дозволяє відвідувачам сайту за своїм бажанням управляти глибиною відвідування сайту. Відвідувачі можуть заходити тільки на сторінки верхніх рівнів ієрархії або ж «спуститися» до нижніх рівнів. При цьому воля вибору відвідувачів залежить від «ширини дерева».

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

У той же час, занадто широке «дерево», ґрунтуючись на дуже великій кількості варіантів вибору, може змусити відвідувачів витратити багато часу на вивчення наданих варіантів. Це також приводить до роздратування відвідувачів і вони залишають сайт.

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

Якщо модель організації сайту обрана вірно, а логічна структура сайту відповідає потребам відвідувачів, то юзабіліті і ефективність такого сайту будуть високими. Тому до розробки структури сайту варто підійти найретельнішим чином.

Жака Бертена «Семіотика графіки» [5], надрукована 45 років тому, забезпечує теоретичну основу візуалізації інформації й сьогодні. Учений увів концепцію «образа» (Image), а також пояснив рівні зчитування інформації.

Образ — це виразна візуальна форма, що розпізнається за мінімальний час.

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

 

Існує три рівні сприйняття візуального образу: 

1)елементарний(як? чому?);

 2)проміжний(що саме відбувалось?);

 3)загальний(що відбувалось протягом певного періоду?).

На елементарному рівні ставлять запитання: як? чому? На проміжному: що саме відбувалось? Загальний рівень потребує відповіді на запитання: що відбувалось протягом певного періоду?

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

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

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

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

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

У функціональному просторі культури комунікативний дизайн займає ви - значене місце між практичним та художніми аспектами [6, 104] у процесі перетворення інформації для передачі повідомлень (див. Рис. 1).

Мануель Ліма запропонував розділити проекти візуалізації інформації на такі, що ставлять на перше місце функціональність, і такі, що віддають перевагу красі та естетиці (інформаційне мистецтво, що включає New Media Art, Computer Art) [7].

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

Уникнення невиправданих візуалізацій. За словами фізика Ханса Крістіана фон Бейера («Інформація: нова мова науки»):

«Інформація акуратно, але невпинно мрячить невидимим, непомітним, невідчутним електричним дощем на свідомість її споживачів».

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

Практична частина.

Завдання 1.

Створити інформаційну версію сайту вигляду "Наш клас".

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

Завдання 2.

Створити дизайнерську модель або власну версію  структури сайту в довільному браузері   і розмістити  в ній початковий варіант інформаційної моделі вигляду "Наш клас".

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

Результат виконаної практичної роботи це два графічних файла( два  дизайнерські проекти) надіслати вашому учителю на електронну скриньку: 
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)