Ергономічний дизайн сайту дистанційного навчання для умов середовища віртуальної реальності

Размещено на http://www.allbest.ru/

ВІСНИК №151. Том 1. Серія: ПЕДАГОГІЧНІ НАУКИ

УДК 378.018.43:004.738.1

ЕРГОНОМІЧНИЙ ДИЗАЙН САЙТУ ДИСТАНЦІЙНОГО НАВЧАННЯ ДЛЯ УМОВ СЕРЕДОВИЩА ВІРТУАЛЬНОЇ РЕАЛЬНОСТІ

Джевага Г.В., Ламанський Є.А.

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

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

Стаття надійшла до редакції 16.03.2018 р.

сайт дистанційний навчання ергономічний

Dzhevaga G., Lamansky Ye.

ERGONOMIC DESIGN OF THE DISTANCE TRAINING SITE FOR THE CONDITIONS OF THE VIRTUAL REALITY ENVIRONMENT

The article outlines the prospects for the development of the application of a virtual environment: from gaming platforms, virtual tours, presentations of interior design projects, real estate advertising to distance education. It is determined that software and principles of virtual reality design are actively being developed, but questions remain about the interface and navigation on the start pages of the virtual world web sites.

The features of the start page of the site for distance learning in the virtual educational space from the course "Resistance of Materials" are considered. This discipline consists of a lecture material and a cycle of laboratory works, the implementation of which is remotely impossible without specialized equipment.

Perception of information and navigation in classical 2D interfaces are different from 3D space. In the classic interface, we create an abstraction of appearance and interaction, but in virtual reality there are no reasons for this - on the contrary, we make it concrete and tangible. When designing a layout of a website, we have implemented a number of solutions for ergonomic management and positioning of the user with the help of virtual reality equipment. The linear horizontal arrangement of structural blocks is proposed: "Annotations to the discipline", "Libraries" and "Laboratories". These materials are located respectively on the central, right and left panels. The side blocks ofparticles are visible in the direct positioning of the view of the user. When turning the head it becomes visible the full panel "Library" or "Laboratory". This provides a comfortable user's perspective and intuitively easy orientation in the structure of the site. The layout of buttons, switches, and sliders is designed to show how the interface elements will interact when interacting with the controllers of the user. Also, three states of the "marker" (indicator label) are implemented to visualize the interaction of the user with interactive objects. It was modified the layout of the site in such a way that it is better to perceive the main information, distinguish between primary and secondary, near and distant objects. It was used the background photo of the room for harmonious user's perception of space. Due to this, the user can comfortably position on the start page of the site, taking into account the sensations of the vestibular apparatus. Less font size and blurring of long-line objects are used to provide a threedimensional space. The size of the font, ideal for reading without much effort, should be about 1.5 or about 20 pixels, which is suitable for most modern displays.

Key words: virtual reality, website, design layout, positioning in the virtual space, web site navigation, distance learning.

З початку ХХІ століття світ змінюється більш інтенсивніше у напрямку оперування інформацією. Люди за допомогою веб-технологій намагаються передавати максимально реалістичну інформацію і відтворити відповідні відчуття у користувача, як від реального об'єкта. В останні роки розвиток інформаційних технологій дозволяє зробити більш доступним для широкого загалу технічний і психологічний феномени, які в популярній та науковій літературі отримали назву "віртуальна реальність" (VR).

Започаткували роботу над створенням і становленням системи віртуального світу М. Крюгер, Д. Ланьєр, С. Лем, А. Сазерленд, М. Хейліг. Розроблення середовища віртуальної реальності ведуть провідні компанії світу: Apple, Google, Vive, HTC, Samsung та інші. Сьогодні над дизайном віртуального простору працюють такі відомі вчені, як М. Абраш, Р. Беттс, Р. Джонатан, А. Йейтс, А. Фоборг, А. Никандров та інші.

У віртуальному просторі користувач може отримати нові можливості для сприймання, мислення і поведінки. У ньому можна грати, відвідувати екскурсії, проектувати, презентувати, тренуватись (виконувати симуляцію дій) [4; 7; 9]. Проте, як бути з пошуком інформації в Інтернеті і як буде виглядати інтерфейс сторінки веб-сайту, якщо технологія VR набуде глобального поширення через всесвітню мережу. Для розв'язання даної проблеми необхідно створити ергономічний дизайн веб-сайту, для прикладу використаємо сайт для дистанційного навчання з курсу "Опір матеріалів", який зможе функціонувати в умовах віртуальної реальності. Дане дослідження продовжує роботу над забезпеченням дистанційного навчання у підготовці майбутніх вчителів технологій Гети В.Г., Єрмака С.М., Джеваги Г.В., Коляди А.М., Повечери І.В., Носовець Н.М., Шульги О.М. [5; 6].

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

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

породженість - віртуальна реальність створюється активністю іншої реальності, зовнішньої щодо неї (константної);

актуальність - віртуальна реальність існує тільки "тут і тепер", поки активна константна реальність;

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

інтерактивність - віртуальна реальність може взаємодіяти з іншими реальностями, в тому числі і з тою, що її створює [8, с. 24].

Поняття "віртуальна реальність" характеризує різновид реальності в формі тотожності матеріального й ідеального, що створюється та існує завдяки іншій реальності. У вужчому розумінні - ілюзія дійсності, створювана за допомогою комп'ютерних систем, які забезпечують зорові, звукові та інші відчуття. У вільній енциклопедії "Вікіпедія" під поняттям "віртуальна реальність" (англ. - Virtual reality (VR) штучна реальність) розуміють створений технічними засобами світ, який передається людині через його відчуття: зір, слух, нюх, дотик. Віртуальна реальність імітує як вплив, так і реакції на вплив. Для створення переконливого комплексу відчуттів реальності комп'ютерний синтез властивостей і реакцій віртуальної реальності проводиться в реальному часі [9].

Сприймання інформації і навігація у класичних 2D інтерфейсах відмінні від 3D простору. У класичному інтерфейсі ми створюємо абстракцію зовнішнього вигляду і взаємодії, однак у віртуальній реальності для цього немає причин - навпаки ми робимо його конкретним і відчутним. User Interface - це технологія прямої взаємодії між людиною і машиною [2]. Це засіб, за допомогою якого комп'ютер сповіщає нас про можливості, а ми передаємо йому свої наміри. Якість і передбачуваність спілкування в значній мірі впливають на те, як ми сприймаємо програмне забезпечення і як швидко досягаємо цілей. Особливо актуальні проблеми в розробленні віртуальної реальності - це нові ефективні способи синхронізації дій між положенням голови, напрямком погляду і контролем рухів рук. Іншими проблеми User Interface є налагодження чіткого детермінації взаємодії з його об'єктами. Наприклад, клік мишкою набагато простіше розпізнати ніж неявний жест на контролері. Ідеальний User Interface повинен бути зрозумілим, непомітним і інтуїтивним, щоб дії самі напрошувалися. Це визначає розробникам нові варіанти дизайну інтерфейсу.

Під час роботи над дизайном макету веб-сайту дистанційного навчання, важливо реалізувати, щоб віртуальний інтерфейс забезпечував зворотний зв'язок зі студентом. За допомогою візуальних і звукових ефектів, анімації можна сповістити користувача про те, чи вдало пройшла його дія. У віртуальному світі більше можливостей зробити ці оповіщення яскравішими, ніж у реальному [1; 10].

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

Рис. 1. Зміна елементів при взаємодії з ними

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

Під час розміщення інформаційних блоків панелі керування необхідно врахувати той факт, що людині незручно фокусуватися на об'єктах, які розміщені ближче ніж півметра. А все, що далі 20 метрів, втрачає ефект глибини, "тривимірність". Екрани й оптика сучасних VR-пристроїв найкраще дозволяють фокусуватися в діапазоні 2-10 метрів [10].

Дослідження розробника з Samsung, Алекса Чу, дозволили виявити оптимальний діапазон рухів голови:

вліво / вправо: комфортне значення до 30°, максимальне - 55°;

вгору: комфортне - до 20°, максимальне - 60°;

вниз: комфортне - до 12°, максимальне - 40° [7].

Показники критичних значень кутів повороту голови та загальні принципи композиції для виокремлення головного і другорядного [3, с. 34-42] були враховані нами під час розмічання робочої панелі макету сайту. Початок ознайомлення з навчальним курсом "Опір матеріалів" відбувається з анотації і перев'ю до дисципліни (рис. 2). Ця інформація головна, тому розміщена по центру на стартовій сторінці. Потім студентам необхідно вибрати навчальний матеріал, з яким вони будуть працювати: курс лейцій, навчальні посібникі, методичні рекомендації до лабораторних робіт чи візуальний матеріал для виконання лабораторних досліджень. Дані матеріали розташовані відповідно на правій і лівій панелі, які частков видно при прямому позиціонуванні погляду користовача. При повороті голови на кут до 15° стає видно повноцінно панелі "Бібліотека" і "Лабораторія". Відповідний дизайн макету веб-сайту виправдано відрізняється від класичних сайтів для 2D сприйняття, тому що здійснювати вертикальну прокрутку сторінки зручно скролом, але не поглядом. Таки чином, забезпечено комфортну зону погляду користувача і інтуїтивно просте орієнтування у структурі сайту.

Рис. 2. Головна сторінка веб-сайту дистанційного навчання у VR

Також було розглянуто реалізацію наведення "маркера" (індикаторної мітки) на об'єкт і активні його стани [1]. У віртуальній реальності ніщо не виглядає однозначно доступним для взаємодії, так що потрібно було передбачити якийсь детермінант, який би давав можливість зрозуміти інтерактивність об'єкту при наведенні на нього маркера. В ході проектування сайту, було розроблено декілька станів маркера (рис. 3). Для того, щоб при наведенні погляду користувача на інтерактивний об'єкт було зрозуміло, що з ним можна взаємодіяти, а коли просто його погляд знаходиться на частині текстури або пасивному об'єкті веб-сайту.

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

Рис. 3. Наведення маркера на об'єкт

Іншою задачею для проектування дизайну було забезпечення комфортного читання текстової інформації на веб-сайті. Потрібно вибрати кегель шрифту, який би був достатнім для читання без великих зусиль, але і одночасно з тим - не занадто великий, щоб розмістити всю інформацію та залишити простір для інших елементів на сайті. Оскільки сучасні пристрої відображають близько 13 пікселів на кутовий градус, текст повинен бути висотою близько ~ 1,5°, або близько 20 пікселів для більшості сучасних дисплеїв [10].

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

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

Рис. 4. Фонове зображення сайту у VR

Для сторінок розділів "Лабораторія" і "Бібліотека", де є перегляд відео чи текстові матеріали, фон змінюється на більш темний для того, щоб не відволікати користувачів від сприйняття навчального контенту. Кнопки і повзунки виконані об'ємними, щоб користувач міг виокремити інтерактивні об'єкти. Всі засоби керування розміщуються ергономічно на відстані витягнутої руки. За допомогою зменшення шрифту на дальніх об'єктах та розмиття ліній досягався ефект 3D простору. Переміщення повзунків здійснюється у горизонтальному напрямі, що є ергономічним рухом руки у рукавичці костюму віртуальної реальності.

Рис. 5. Сторінка перегляду відеоматеріалів

Рис. 6. Режим перегляду текстових матеріалів

Рис. 7. Навігація по методичним посібникам

Висновки

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

Використані джерела

1. Ravasz J. Design Practices in Virtual Reality. UX Collective URL: https://uxdesign.cc/design-practices-invirtual-reality-f900f5935826 (Last accessed: 12.03.2018).

2. VR-Design: User Interface. Хабрахарб. URL: https://habrahabr.ru/post/324002/ (дата звернення: 12.03.2018).

3. Білодід Ю.М., Поліщук О.П. Основи дизайну: Навч. посіб. Київ, 2004. 240 с.

4. Михеев О Виртуальная реальность: сферы применения, главные проблемы отрасли и перспективы развития. "Хайп". URL: https://hype.ru/p/virtualnaya-realnost-sfery-primeneniya-glavnye-problemy-otrasli- i-perspektivy-razvitiya-7gylbky1 (дата звернення: 13.03.2018).

5. Джевага Г. Підготовка лабораторних робіт до виконання студентами в умовах дистанційного навчання. Проблеми підготовки сучасного вчителя: збір. наук. праць УДПУ імені Павла Тичини. 2017. Вип. 15. С. 42-50.

6. Дистанційне навчання: дидактика, методика, організація: кол. моногр. Гета В.Г., Єрмак С.М., Джевага Г.В., Коляда А.М., Повечера І.В., Носовець Н.М., Шульга О.М. Чернігів, 2017. 286 с.

7. Кулакова А. Технологии будущего в веб-дизайне: Мечты о VR сбываются. Way up. URL: https://wayup.in/blog/technology-of-future-in-web-design-dream-of-vr (дата звернення: 12.03.2018).

8. Носов Н.А. Виртуальная психология. Москва, 2000. 146 с.

9. Виртуальная реальность. Свободная энциклопедия "Википедия". URL: https://ru.wikipedia.org/ wiki/Виртуальная_реальность (дата звернення: 14.03.2018).

10. Практическое руководство по VR-дизайну. "Хабрахарб". URL: https://habrahabr.ru/company/mailru /blog/316566/ (дата звернення: 15.03.2018)

Размещено на Allbest.ru