Методи удосконалення дизайну сайту НТУ з точки зору ефективності подання інформації

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

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

Національний транспортний університет, аспірант кафедри інформаційних систем і технологій

Методи удосконалення дизайну сайту НТУ з точки зору ефективності подання інформації

Безверхий Олександр Ігорович,

доктор фізико-математичних наук, професор

Борецький Владислав Вікторович, аспірант

Зубрецька Наталія Анатоліївна,

доктор технічних наук, професор

Карманов Роман В'ячеславович, аспірант

Анотація

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

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

METHODS OF IMPROVING THE DESIGN OF THE NTU WEBSITE FROM THE POINT OF VIEW OF THE EFFECTIVENESS OF INFORMATION PRESENTATION

Summary

The main concepts of website design - skeuomorphism, neomorphism, glassomorphism, minimorphism - are considered in the work and their main advantages and disadvantages are analyzed; The peculiarities of website operation on devices of different types, sizes, lighting levels and usage environments were analyzed; A prototype of the design of the NTU website based on the concept of glass-morphic interfaces was developed using Figma and Photoshop software, and a prototype of a universal multi-platform interface based on the glass-morphic concept was implemented, the effectiveness of key changes was tested for a wide range of devices.

Keywords design, glass morphism, designing, testing, website, interface, usability, adaptability, identity.

Вступ

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

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

1. Аналіз дизайну поточного сайту НТУ

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

Серед усіх ідеологій сучасних розробників, Human Interface від корпорації Apple у стилістиці скломорфізму є найбільш перспективним і одночасно естетично привабливим та гармонійним для влучного переходу до девайсів нового покоління - гаджетів AR (augmented reality), та VR (virtual reality). Концепція Material Design від Google, хоч і балансує на межі мінімалізму та неоморфізму, отримуючи на виході доволі простий та стильний інтерфейс, проте буде вимушено підлягати повному переосмисленню або переробці при розробці інтерфейсів, що потребують двостороннього просвіту - контактних лінз, окулярів, лобового скла автомобіля, мотоцикла, гвинтокрила, літака, інтерфейсу віртуальної реальності.

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

Для початку розглянемо перший (головний) екран мобільного та вебсайту НТУ - http://www.ntu.edu.ua./

Як бачимо, даний інтерфейс чітко відповідає мінімалістичній концепції дизайну, а саме:

* має обмежену кількість акцентних кольорів;

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

* має чітко виражений фокус уваги за рахунок відсутності відволікаючих елементів

* використовується лише суцільна заливка кольорів, тіні та градієнти відсутні

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

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

Рисунок 1 - Вихідний інтерфейс сайту НТУ для ПК та смартфону Figure 1 - The initial interface of the NTU website for PC and smartphone

дизайн сайт

2. Редизайн головного екрану сайту НТУ

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

Рисунок 2 - Редизайн головного екрану сайту НТУ Figure 2 - Redesign of the main screen of the NTU website

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

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

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

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

Рисунок 3 - Інтерфейс сайту НТУ у планшетному форматі та адаптація інтерфейсу для мобільного формату

Figure 3 - NTU site interface in tablet format and interface adaptation for mobile format

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

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

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

Рисунок 4 - Вигляд інтерфейсу у смартфоні та адаптація інтерфесу до малих девайсів

Figure 4 - View of the interface in a smartphone and adaptation of the interface to small devices

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

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

3. Додаток сайту НТУ для скляних дисплеїв

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

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

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

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

Рисунок 5 - Адаптація інтерфейсу для дзеркала або скла

Figure 5 - Interface adaptation for mirror or glass

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

Рисунок 6 - Адаптація інтерфейсу НТУ для лобового скла автомобіля та для AR окулярів

Figure 6 - Adaptation of the NTU interface for the car windshield and for AR glasses

У випадку взаємодії користувача з сайтом НТУ за допомогою контактних лінз, окулярів доповненої реальності (AR) або шолому віртуальної реальності (VR) основним завданням стане необхідність зберегти якомога більшу площу поля зору людини незайнятою, адже подібні девайси вже мають більш суттєвий вплив на життя людини.

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

Висновки

Розглянуто найпопулярніші UI концепції дизайну сайтів від провідних IT компаній - скевоморфізм, неоморфізм, скломорфізм, мініморфізм і проаналізовано їх основні переваги та недоліки. У результаті дослідження особливостей роботи вебсайтів на девайсах різного типу, їх розміру, рівня освітленості та середовища використання розроблено прототип дизайну сайту НТУ на основі концепції скломорфних інтерфейсів з використанням програмного забезпечення Figma та Photoshop; Реалізовано прототип універсального мультиплатформного інтерфейсу на основі скломорфного концпету, проведено тестування ефективності ключових змін для широкої вибірки девайсів.

Перелік посилань

Creech, J. The User Experience And Psychology Of Colour / J. Creech, 2011. [Електронний ресурс] - Режим доступу: http://spyrestudios.com/the-user-experience-and-psychology-of-colour/

Greenier, S. Optimizing Emotional Engagement In Web Design Through Metrics / S. Greenier, 2011. [Електронний ресурс] - Режим доступу: http://uxdesign.smashingmagazine.com/2011/05/19/optimizing- emotionalengagement-in-web-design-through-metrics/

Kaushik, A. Digital Marketing and Measurement Model / A. Kaushik. [Електронний ресурс] - Режим доступу: http://www.kaushik.net/avinash/digital-marketing-and-measurement-model/

Leggett, D. A Brief History Of Eye Tracking / D. Leggett, 2010. [Електронний ресурс] - Режим доступу: http://www.uxbooth.com/blog/a-brief-history-of-eye-tracking/

Plutchik's wheel of emotions // From the free encyclopedia, 2011. [Електронний ресурс] - Режим доступу: http://en.wikipedia.org/wiki/

Travis, D. Persuasion Triggers in Web Design / D. Travis, 2010. [Електронний ресурс] - Режим доступу: http://uxdesign.smashingmagazine.com/2010/11/29/persuasion-triggers-inweb-design/

Вебдизайн: підруч. для студ. вищ. навч. закл. / О. В. Пасічник, В. В. Пасічник; за заг. ред. В. В. Пасічника;-- ISBN 978-966-2025-33-0

Charlotte Fiell, Peter Fiell. Contemporary Graphic Design. -- Taschen Publishers, 2008. -- 559 с. -- ISBN 978-3-8228-5269-9.

Wiedemann, Julius & Taborda, Felipe. Latin-American Graphic Design. -- Taschen Publishers, 2008. -- 544 с. -- ISBN 978-3-8228-4035-1.

10 Бородаев Д.В. Веб-сайт как объект графического дизайна: монография. Харьков: Септима ЛТД, 2006. 288 с. [Електронний ресурс] - Режим доступу: https://nmetau.edu.ua/file/127.pdf

Михайло Опалєв, Ольга Вакуленко. Закономірності формування сучасного тренду веб-дизайну -- «плаский» дизайн // ВІСНИК Львівської національної академії мистецтв.. Львів: Вид-во ЛНАМ, 2016. Вып. 30. С. 215-225. [Електронний ресурс] - Режим доступу: https://lnam.edu.ua/files/Academy/nauka/visnyk/pdf visnyk/30/21.pdf

References

Creech, J. The User Experience And Psychology Of Colour / J. Creech, 2011. [Elektronnyy resurs] - Rezhym dostupu: http://spyrestudios.com/the-user-experience-and-psychology-of-colour/

Greenier, S. Optimizing Emotional Engagement In Web Design Through Metrics / S. Greenier, 2011.. [Elektronnyy resurs] - Rezhym dostupu: http://uxdesign.smashingmagazine.com/2011/05/19/optimizing- emotionalengagement-in-web-design-through-metrics/

Kaushik, A. Digital Marketing and Measurement Model / A. Kaushik.. [Elektronnyy resurs] - Rezhym dostupu: http://www.kaushik.net/avinash/digital-marketing-and-measurement-model/

Leggett, D. A Brief History Of Eye Tracking / D. Leggett, 2010.. [Elektronnyy resurs] - Rezhym dostupu: http://www.uxbooth.com/blog/a-brief-history-of-eye-tracking/

Plutchik's wheel of emotions // From the free encyclopedia, 2011.. [Elektronnyy resurs] - Rezhym dostupu: http://en.wikipedia.org/wiki/

Travis, D. Persuasion Triggers in Web Design / D. Travis, 2010. [Elektronnyy resurs] - Rezhym dostupu: http://uxdesign.smashingmagazine.com/2010/11/29/persuasion-triggers-inweb-design/

Vebdyzayn: pidruch. dlya stud. vyshch. navch. zakl. / O. V. Pasichnyk, V. V. Pasichnyk; za zah. red. V. V. Pasichnyka; -- ISBN 978-966-2025-33-0

Charlotte Fiell, Peter Fiell. Contemporary Graphic Design. -- Taschen Publishers, 2008. -- 559 с. -- ISBN 978-3-8228-5269-9.

Wiedemann, Julius & Taborda, Felipe. Latin-American Graphic Design. -- Taschen Publishers, 2008. -- 544 с. -- ISBN 978-3-8228-4035-1.

10 Borodayev D.V. Veb-sayt kak ob"yekt graficheskogo dizayna: monografiya. Khar'kov: Septima LTD, 2006. 288 s. [Yelektronniy resurs] - Rezhim dostupu: https://nmetau.edu.ua/file/127.pdf

Mykhaylo Opalyev, Ol'ha Vakulenko. Zakonomirnosti formuvannya suchasnoho trendu veb-dyzaynu -- «plaskyy» dyzayn // VISNYK L'vivs'koyi natsional'noyi akademiyi mystetstv.. L'viv: Vyd-vo LNAM, 2016. Vyp. 30. S. 215-225. [Elektronnyy resurs] - Rezhym dostupu: https://lnam.edu.ua/files/Academy/nauka/visnyk/pdf visnyk/30/21.pdf

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