Отчёт сохранён неверно! Пожалуйста, пересохраните отчёт согласно инструкции:

https://plagiarism-detector.com/smf_bb/index.php?topic=341.msg369#msg369

# Детектор Плагиата v. 2762 - Отчёт оригинальности: 24.01.2023 17:06:07

Проанализированный документ: MAG_Сімонов.pdf Лицензия: ВОЛОДИМИР МАТІЄВСЬКИЙ
Тип поиска: Поиск переписанного Язык: Uk
Тип проверки: Интернет
TEE и кодировка: PdfPig

Детальный анализ тела документа:
Диаграмма соотношения частей:
Граф распределения зон:
Источники плагиата: 31

3% 260 1. https://uk.wikipedia.org/wiki/Растрова_графіка 2% 230 2. https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8EiiP4y7-zZBng 2% 114 3. https://uk.wikipedia.org/wiki/Інтерфейс_користувача

1%
65
4. https://uk.wikipedia.org/wiki/Новини
1%
67
5. https://uk.wikipedia.org/wiki/Інститут_математики_НАН_України
0,9%
51
6. https://ru.wikipedia.org/wiki/Шимко,_Владимир_Тихонович
0,7%
37
7. https://techukraine.net/10-інструментів-для-перевірки-та-покращ/
0,6%
30
8. https://mediacom.com.ua/osnovni-sistemni-utiliti-dlya-optimalnoi-produktivnosti-windows-10-poradi-ta-instruktsii/
0,5%
29
9. https://lib.nuos.edu.ua/безкоштовні-сервіси-перевірки-на-уні/
0,5%
25
10. https://ru.wikipedia.org/wiki/Шимко
0,3%
42
11. https://e-koncept.ru/2017/570076.htm
0,3%
15
12. https://reporter.zp.ua/yak-pravilno-posilatisya-na-stattyu-zakonu-v-teksti-g.html
0,3%
14
13. https://bdut.co.ua/pro-nas/adaptyvnyy-dyzayn/
0,2%
29
14. https://stud.com.ua/43372/informatika/rastrova_grafika
0,2%
20
15. https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80ilP4y9-jpDkw
0,2%
9
16. https://ukrainian.stackexchange.com/questions/596/Чи-коректно-говорити-функціонал-сайту
0,2%
51
17. https://opac.mpei.ru/opacunicode/app/index.php?url=/notices/index/IdNotice:251600/Source:default
0,2%
8
18. https://undpukraine.medium.com/принципи-універсального-дизайну-унавчанні-та-глобальні-цілі-сталого-розвитку-8c8348545819
0,2%
8
19. https://www.itbit.com.ua/12-tendenczij-veb-rozrobky-na-yaki-varto-zvernuty-uvagu-v-2025-roczi/
0,2%
8
20. https://msystem.ua/ua/shho-take-struktura-sajtu/
0,1%
36
21. https://www.dissercat.com/content/gosudarstvennyi-muzei-keramiki-1918-1937-ot-chastnoi-kollektsii-k-muzeyu-proizvodstvennogo
0,1%
19
22. https://znanija.com/task/43699713
0,1%
6
23. https://koren.pro/обовязки-системного-адміністратора/
0,1%
5
24. https://foxminded.ua/interaction-design-tse/
0,1%
4
25. https://www.komarov.design/6-triendiv-viebdizainu-2025/
0,1%
4
26. https://1c-sed.com.ua/prohid/?Чому потрібна інтеграція
0,1%
4
27. https://www.komarov.design/16-naikrashchikh-instrumientiv-dlia-prototipuvannia-2025/
0,1%
4
28. https://context.reverso.net/переклад/українська-англійська/Вона
0,1%
4
29. https://context.reverso.net/переклад/українська-англійська/вона
0,1%
12
30. https://www.researchgate.net/publication/377645579_ISKUSSTVO_I_DIZAJN_ESTETICESKIJ_VZGLAD
0%
5
31. https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9EilOYW_8TFGnA
Детали обработанных ресурсов: 219 - ОК / 4 - Ошибок

403 1. https://quizlet.com/ph/847980398/p-e-prelim-reviewer-flash-cards/
Код ошибки веб-сервера:403
404 2. https://coi.ua/blog/DesignCo/sekreti-efektivnogo-veb-dizajnu/
Код ошибки веб-сервера:404
n\a 3. https://books.totalarch.com/architectural_design_fundamentals_of_theory
timeouted: curl: (28) Connection timeout after 5011 ms!
403 4. https://www.thefastcode.com/uk-uah/article/how-to-make-google-your-homepage-in-chrome-firefox-edge-or-safari
Код ошибки веб-сервера:403
3%
0,51
260
5 (D): https://uk.wikipedia.org/wiki/Растрова_графіка
2%
1,01
230
6 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8EiiP4y7-zZBng
2%
1,18
114
7 (D): https://uk.wikipedia.org/wiki/Інтерфейс_користувача
1%
0,54
67
8 (D): https://uk.wikipedia.org/wiki/Інститут_математики_НАН_України
1%
1,05
65
9 (D): https://uk.wikipedia.org/wiki/Новини
0,2%
2,04
51
10 (D): https://opac.mpei.ru/opacunicode/app/index.php?url=/notices/index/IdNotice:251600/Source:default
0,9%
0,82
51
11 (D): https://ru.wikipedia.org/wiki/Шимко,_Владимир_Тихонович
0,3%
1,25
42
12 (D): https://e-koncept.ru/2017/570076.htm
0,7%
1,18
37
13 (D): https://techukraine.net/10-інструментів-для-перевірки-та-покращ/
0,1%
0,7
36
14 (D): https://www.dissercat.com/content/gosudarstvennyi-muzei-keramiki-1918-1937-ot-chastnoi-kollektsii-k-muzeyu-proizvodstvennogo
0,6%
1,49
30
15 (D): https://mediacom.com.ua/osnovni-sistemni-utiliti-dlya-optimalnoi-produktivnosti-windows-10-poradi-ta-instruktsii/
0,5%
2,03
29
16 (D): https://lib.nuos.edu.ua/безкоштовні-сервіси-перевірки-на-уні/
0,2%
0,81
29
17 (D): https://stud.com.ua/43372/informatika/rastrova_grafika
0,5%
0,85
25
18 (D): https://ru.wikipedia.org/wiki/Шимко
0,2%
0,19
20
19 (C): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80ilP4y9-jpDkw
0,1%
1,26
19
20 (D): https://znanija.com/task/43699713
0,3%
2,53
15
21 (D): https://reporter.zp.ua/yak-pravilno-posilatisya-na-stattyu-zakonu-v-teksti-g.html
0,3%
1,82
14
22 (D): https://bdut.co.ua/pro-nas/adaptyvnyy-dyzayn/
0,1%
1,44
12
23 (D): https://www.researchgate.net/publication/377645579_ISKUSSTVO_I_DIZAJN_ESTETICESKIJ_VZGLAD
0,2%
1,7
9
24 (D): https://ukrainian.stackexchange.com/questions/596/Чи-коректно-говорити-функціонал-сайту
0,2%
0,73
8
25 (D): https://undpukraine.medium.com/принципи-універсального-дизайну-унавчанні-та-глобальні-цілі-сталого-розвитку-8c8348545819
0,2%
1,71
8
26 (D): https://msystem.ua/ua/shho-take-struktura-sajtu/
0,2%
2,67
8
27 (D): https://www.itbit.com.ua/12-tendenczij-veb-rozrobky-na-yaki-varto-zvernuty-uvagu-v-2025-roczi/
0,1%
1,2
6
28 (D): https://koren.pro/обовязки-системного-адміністратора/
0%
0,76
5
29 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9EilOYW_8TFGnA
0,1%
1,3
5
30 (D): https://foxminded.ua/interaction-design-tse/
0,1%
0,68
4
31 (D): https://www.komarov.design/6-triendiv-viebdizainu-2025/
0,1%
0,65
4
32 (D): https://1c-sed.com.ua/prohid/?Чому потрібна інтеграція
0,1%
0,05
4
33 (C): https://context.reverso.net/переклад/українська-англійська/вона
0,1%
0,76
4
34 (D): https://context.reverso.net/переклад/українська-англійська/Вона
0,1%
0,5
4
35 (D): https://www.komarov.design/16-naikrashchikh-instrumientiv-dlia-prototipuvannia-2025/
0%
0,49
0
36 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_0ukPoa6Eg
0%
0,43
0
37 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8U6uOYe88DvY
0%
0,52
0
38 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_02gO4Sx9TpJmg
0%
0,5
0
39 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80ugOIa49DVEmw
0%
0,43
0
40 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80mhMoaw9jpAkw
0%
0,48
0
41 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9kelMoa99jdAnA
0%
0,52
0
42 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80egOI2x8jZEkA
0%
0,59
0
43 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9UmlOIO78zBEng
0%
0,5
0
44 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8UuhOIC_-zpFmA
0%
0,58
0
45 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_k6uOIW-9jvQ
0%
0,48
0
46 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9kegPYS4-jpAkA
0%
0,45
0
47 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80uhPoy7EA
0%
0,51
0
48 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8U6uOIWw8zHe
0%
0,54
0
49 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8UqmPo279zJAkA
0%
0,63
0
50 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_kehO4O7-jpJkg
0%
1,91
0
51 (D): https://xn--90aamhd6acpq0s.xn--j1amh/zrazki/polozhennya-pro-strukturnyy-pidrozdil/
0%
1,77
0
52 (D): https://www.kadrovik.ua/content/strukturnyj-pidrozdil-ustanovy-stvorennya-shtat-diyalnist
0%
1,5
0
53 (D): https://prokadry.com.ua/article/3678-polojennya-pro-strukturniy-pdrozdl-pdprimstva
0%
0,46
0
54 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8kylOIK98jRCmA
0%
0,43
0
55 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80mvM4S58zRCng
0%
0,57
0
56 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9kujMoC79jdJnw
0%
1,13
0
57 (D): https://hostiq.ua/blog/ukr/user-friendly-interface/
0%
0,01
0
58 (C): http://www.duckduckhack.com
0%
0,48
0
59 (D): https://imath.kiev.ua/
0%
0,38
0
60 (D): https://www.imath.kiev.ua/institute/?lang=ua
0%
2,22
0
61 (D): https://www.old.nas.gov.ua/UA/Org/Pages/default.aspx
0%
2,59
0
62 (D): https://wezom.com.ua/ua/blog/12-sposobov-uluchshit-juzabiliti
0%
0,39
0
63 (D): https://tuthost.ua/uk/blog/kak-pravilno-sdelat-perenos-sajta-wordpress-na-drugoj-domen/
0%
0,71
0
64 (D): https://webtune.com.ua/statti/web-rozrobka/yuzabiliti-sajtu/
0%
0,74
0
65 (D): https://remonline.ua/blog/usability-rules/
0%
0,6
0
66 (D): https://shallbd.com/uk/rozuminnia-sistemnogo-interfeisu-koristuvacha-viznachennia-komponenti-ta-vazhlivist/
0%
0,86
0
67 (D): https://www.rbc.ua/rus/styler/skilki-potribno-chasu-shchob-virobiti-zvichku-1737156925.html
0%
1,44
0
68 (D): https://xn--90aamhd6acpq0s.xn--j1amh/zrazki/unifikovana-forma-polozhennya-pro-strukturnyy-pidrozdil/
0%
0,68
0
69 (D): https://context.reverso.net/переклад/українська-англійська/відомий
0%
2,23
0
70 (D): https://pytannya.com/1579-ne-vidomyy-chy-nevidomyy.html
0%
0,6
0
71 (D): https://r2u.org.ua/guides/synyavsky/spoluchnyky
0%
1,88
0
72 (D): https://www.ar25.org/article/vzhyvannya-spoluchnykiv-i-y-ta.html
0%
0,39
0
73 (D): https://webpen.com.ua/pages/Morphology_constant_leng_parts/conjunction_spelling.html
0%
0,37
0
74 (D): https://webpen.com.ua/pages/Morphology_constant_leng_parts/conjunction_gramatically_characteristic.html
0%
1,22
0
75 (D): https://hostiq.ua/wiki/ukr/transfer-site-hosting/
0%
0,46
0
76 (D): https://tuthost.ua/uk/blog/kak-perenesti-sajt-na-drugoj-hosting/
0%
0,42
0
77 (D): https://pomahach.com/
0%
0,97
0
78 (D): https://hostiq.ua/blog/ukr/transfer-site-to-another-hosting/
0%
0,69
0
79 (D): https://slovnyk.ua/index.php?swrd=відомий
0%
1,15
0
80 (D): https://znanija.com/task/50645914
0%
1,14
0
81 (D): https://tpu.net.ua/uk/seo-pravilna-struktura-sajtu-so-ce-take-i-ak-stvoriti-z-prikladami.html
0%
1,53
0
82 (D): https://blog.lebara.co.uk/uk/еволюція-ui-дизайну-від-незграбних-до-ін/
0%
1,07
0
83 (D): https://znanija.com/task/38015829
0%
0,56
0
84 (D): https://www.tutkit.com/uk/tekstovi-uroki/5599-pokrasenna-citabelnosti-tekstiv
0%
0,58
0
85 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9k6nPo269jZFkw
0%
0,77
0
86 (D): https://elit-web.ua/ua/blog/vliyanie-readability-na-ranzhirovanie-sajta
0%
1,04
0
87 (D): https://artjoker.ua/blog/5-priemov-uluchsheniya-chitabelnosti-texta/
0%
0,58
0
88 (D): https://ru.glosbe.com/словарь-русский-украинский/выяснить
0%
0,68
0
89 (D): https://context.reverso.net/переклад/українська-англійська/з'ясувала
0%
2,12
0
90 (D): https://creativnost.com.ua/vsi-sekreti-wi-fi-yak-pracyuye-bezdrotova-merezha/
0%
2,25
0
91 (D): https://prom.ua/ua/Wifi-modemy-s-antennoj.html
0%
2,56
0
92 (D): https://reporter.zp.ua/yak-pravylno-poyasnennya-chy-poyasnyuvalna-zapyska.html
0%
1,72
0
93 (D): https://hdmaster.com.ua/uk/content/videonablyudenie-cherez-internet
0%
1,07
0
94 (D): https://itstatti.in.ua/zarobitok-v-interneti/775-yak-zarobiti-na-kompyuteri.html
0%
0,73
0
95 (D): https://ukrpublic.com/didzhytal/chi-mozhna-sogodni-obijtisya-bez-komp-yutera.html
0%
2,57
0
96 (D): https://www.undp.org/uk/ukraine/stories/navchatysya-nikoly-ne-pizno-yak-biblioteky-dopomahayut-lyudyam-starshoho-viku-dolaty-strakh-ta-opanuvaty-kompyuternu-tekhniku
0%
0,72
0
97 (D): https://indevlab.com/uk/blog-ua/it-infrastruktura-yak-rozibratisya-v-tsomu-skladnomu-ponyatti-i-chim-vona-dopomagaye-v-roboti-pidpriyemstva/
0%
1,43
0
98 (D): https://genius.space/lab/intuyitivno-zrozumilij-veb-dizajn-yak-zrobiti-vash-sajt-intuyitivno-zrozumilim-u-vikoristanni/
0%
1,24
0
99 (D): https://www.plerdy.com/ua/blog/what-is-ux-design/
0%
1,09
0
100 (D): https://thepage.ua/ua/experts/yak-rozrobiti-intuyitivnij-i-zruchnij-koristuvackij-interfejs-dlya-vebsajtu
0%
1,27
0
101 (D): https://blog.dropplatforma.com.ua/veb-analitika/veb-analityka-i-polipshennya-korystuvaczkogo-dosvidu-najkrashhi-praktyky-ta-metody/
0%
1,03
0
102 (D): https://www.websiteplanet.com/uk/webtools/sharelink/
0%
2,75
0
103 (D): https://prom.ua/ua/Besprovodnoj-internet.html
0%
0,69
0
104 (D): https://slovnyk.ua/index.php?swrd=з'ясовувати
0%
0,87
0
105 (D): https://www.ranktracker.com/uk/blog/5-ways-you-can-use-social-media-to-generate-links/
0%
0,6
0
106 (D): https://we.ua/info/ukrainian-social-networks
0%
1,58
0
107 (D): https://cloud.itstep.org/blog_3/introduction-to-ui-design-creating-effective-and-attractive-interfaces
0%
1,61
0
108 (D): https://lemon.school/blog/chym-zajmayetsya-veb-dyzajner-na-roboti
0%
4,28
0
109 (D): https://www.doola.com/uk/blog/how-to-grow-a-web-design-business/
0%
1,62
0
110 (D): https://it-rating.ua/tipi-saytiv-yaki-buvayut-vidi-saytiv-ta-ih-riznitsya-klasifikatsiya
0%
0,6
0
111 (D): https://impulse-design.com.ua/ua/pravilnaya-struktura-veb-sajta-pod-seo.html
0%
0,84
0
112 (D): https://elit-web.ua/ua/blog/kak-vyvesti-tekuschuju-strukturu-sajta
0%
1,64
0
113 (D): https://mind.ua/openmind/20258932-efektivnij-sajt-vipravlyaemo-kontent-ta-optimizuemo-dlya-poshukovih-sistem
0%
1,32
0
114 (D): https://serpstat.com/uk/blog/yak-pereviriti-chi-efektivnij-vash-sajt/
0%
0,91
0
115 (D): https://dizz.in.ua/uk/minimalistichni-tendenczii-dizajnu-interfejsu-koristuvacha/
0%
3,38
0
116 (D): https://whagenciadigital.com/uk/iak-giperposilannia-na-facebook/
0%
1,8
0
117 (D): https://quizlet.com/ph/849410650/pe-test-1-flash-cards/
0%
0,76
0
118 (D): https://vuzlit.com/944778/tablitsi_spiski_priznachennya_riznovidi_struktura_vimogi_oformlennya_priklad_oformlennya_tablitsi_spisku
0%
0,47
0
119 (D): https://www.fizmat.7mile.net/informatika-8/09-formatuvanya-doc.htm
0%
0,57
0
120 (D): https://naurok.com.ua/test/spiski-tablici-zobrazhennya-ta-shemi-utekstovomu-dokumenti-3045153.html
0%
3,12
0
121 (D): https://ifish.com.ua/ua/baza-znan/pravilna-struktura-sajtu/
0%
0,59
0
122 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9U6nPoK58TFJkA
0%
0,96
0
123 (D): https://azora.com.ua/main/struktura/uk/seo-struktura-sajtu/
0%
1,69
0
124 (D): https://finance.inform.click/uk/mudri-tsytaty-pro-biznes/
0%
1,86
0
125 (D): https://blog.eva.ua/goroskop-na-cherven-2024-dlya-vsih-znakiv-zodiaku/
0%
0,89
0
126 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_k2lO4e-8jNEkQ
0%
0,52
0
127 (D): https://naurok.com.ua/tablici-ta-spiski-v-tekstovih-dokumentah-77067.html
0%
1,07
0
128 (D): https://www.plerdy.com/ua/blog/what-is-user-interface-analysis/
0%
0,57
0
129 (D): https://naurok.com.ua/zagalni-vidomosti-pro-dizayn-osnovni-zavdannya-dizaynu-znachennya-dizaynu-yak-suchasnogo-metodu-proektuvannya-profesiyni-obov-yazki-dizayneriv-437495.html
0%
1,37
0
130 (D): https://biznesua.com.ua/yak-vidmoviti-kliyentu-shhob-ne-nashkoditi-kompaniyi/
0%
0,88
0
131 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8UmmPIG-9jdEmA
0%
0,6
0
132 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9UqnO4O88DBBnQ
0%
0,56
0
133 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8k6jOIex9DJGkQ
0%
4,12
0
134 (D): https://www.artofba.com/uk/post/power-of-prototyping-in-examples
0%
0,56
0
135 (D): https://naurok.com.ua/test/11-rastrova-grafika-1152373.html
0%
0,9
0
136 (D): https://www.education.ua/blog/47926/
0%
1,28
0
137 (D): https://software.com.ua/uk/grafichni-programi-adobe/146-adobe-illustrator-cc-65297603ba01a12.html
0%
0,96
0
138 (D): https://wezom.academy/ua/slozhno-li-osvoit-fotoshop/
0%
2,24
0
139 (D): https://thedigital.gov.ua/news/52-milyona-griven-na-rozvitok-zhinochogo-pidpriemnitstva-startue-noviy-sezon-viziynogo-akseleratora-vidvazhna-2-masshtabuvannya-ta-didzhitalizatsiya
0%
0,81
0
140 (D): https://masters-of-scale.investschool.com.ua/
0%
1,24
0
141 (D): https://delo.ua/business/yak-stvoriti-ta-masstabuvati-propoziciyu-poslug-biznesu-dosvid-uklon-439264/
0%
0,06
0
142 (C): https://business-broker.com.ua/blog/masshtabuvannia-biznesu-iak-tse-zrobyty/
0%
0,71
0
143 (D): https://iea.gov.ua/
0%
2,09
0
144 (D): https://helpx.adobe.com/ua/photoshop/using/image-essentials.html
0%
1,41
0
145 (D): https://inmol.org/proekty/provedennia-doslidzhen/
0%
0,64
0
146 (D): https://recoverysoftware.com.ua/blog/ntfs-symbolic-and-hard-links-in-windows.html
0%
3,05
0
147 (D): https://okay-cms.com/ua/article/kakoj-dolzhny-byt-glavnaya-stranitsa-sajta
0%
2,73
0
148 (D): https://web-promo.ua/ua/blog/chto-takoe-portret-polzovatelya-i-kak-ego-analizirovat-s-pomoshhyu-google-analytics/
0%
0,75
0
149 (D): https://stalirov.lawyer/uk/posts/yak-sformuvati-ugodu-koristuvacha-poradi-it-yuristiv
0%
0,6
0
150 (D): https://pidru4niki.com/19800512/logika/umovivodi_logiki_vislovlyuvan_traditsiyniy_logitsi
0%
1,9
0
151 (D): https://skyedge.school/blogs/umovni-rechennya-v-anglijskij-movi/
0%
0,65
0
152 (D): https://slovnyk.ua/index.php?swrd=базуватися
0%
3,12
0
153 (D): https://ukrayinska.libretexts.org/Гуманітарні_науки/Філософія/Критичні_міркування:_Посібник_користувача_(Southworth_і_Swoyer)/03:_Умовні_та_умовні_аргументи/3.01:_Умовні_та_їх_частини
0%
0,57
0
154 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8UukOoW89DZCnQ
0%
0,68
0
155 (D): https://library.pdpu.edu.ua/index.php/pro-nas/naukovtsiam/akademichna-dobrochesnist/perevirka-na-naiavnist-tekstovykh-zapozychen-akademichnoho-plahiatu
0%
0,87
0
156 (D): https://khai.edu/ua/university/normativna-baza/polozheniya1/polozhennya-pro-organizaciyu-sistemi-upravlinnya-yakistyu/polozhennya-pro-poryadok-perevirki/
0%
0,6
0
157 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9k2iOI2-9zdImg
0%
0,34
0
158 (D): https://posibnyky.vntu.edu.ua/
0%
3,52
0
159 (D): https://itbiz.ua/statti-ta-obzori/sho-take-sistemnij-integrator/
0%
0,61
0
160 (D): https://www.barcelona-tourist-guide.com/uk/transport/parkuvannya-avtomobilya-barcelona.html
0%
5,63
0
161 (D): https://meest.shopping/ua/shop-service
0%
0,97
0
162 (D): https://www.foxtrot.com.ua/uk/shop/morozilnye_kamery_indesit.html
0%
0,74
0
163 (D): https://www.ud.org.ua/publikatsiji/11-printsipi-universalnogo-dizajnu
0%
0,63
0
164 (D): https://yukhym.com/uk/vipadkovi-podiji/osnovi-kombinatoriki.html
0%
1,04
0
165 (D): https://training.qatestlab.com/blog/technical-articles/standards-for-correct-placement-and-definition-of-actions-for-site-elements/
0%
0,58
0
166 (D): https://naurok.com.ua/prezentaciya-perestanovki-rozmischennya-kombinaci-225837.html
0%
1,6
0
167 (D): https://ui.org.ua/main/sector-researches-analytics/
0%
0,59
0
168 (D): https://iea.gov.ua/research/
0%
4,4
0
169 (D): https://ndch.tntu.edu.ua/akademichna-dobrochesnist/instrumenty-perevirky-tekstiv-na-plahiat/
0%
0,54
0
170 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_0iuP4W-8zRFnw
0%
2,53
0
171 (D): https://mate.academy/dev-blog/ui-ux-design/prototyping-tools/
0%
4,07
0
172 (D): https://webcraftingcode.com/uk/osnovy-dyzaynu/porady-shchodo-efektyvnoho-stvorennia-maketiv-i-prototypiv/
0%
0,64
0
173 (D): https://androidclub.com.ua/google-chrome-ne-pratsyuye-abo-ne-vidpovidaye-shho-robyty-yakshho-vin-zakryvayetsya-abo-ne-vidkryvayetsya/
0%
0,56
0
174 (D): https://naurok.com.ua/osnovni-ponyattya-kombinatoriki-rozmischennya-perestanovki-kombinaci-250790.html
0%
0,45
0
175 (D): https://www.komarov.design/ievristiki-nilsiena-10-printsipiv-iuzabiliti-dlia-dizainu-intierfieisiv/
0%
1,84
0
176 (D): https://itest.com.ua/statti/10-evristyk-yuzabiliti-yaki-mae-znaty-kozhen-dyzayner/
0%
0,44
0
177 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_kegOYW99zpAlQ
0%
0,88
0
178 (D): https://mediamaker.me/balans-faktiv-i-kontekstu-yak-vydannya-podayut-novyny-dobirka-formativ-i-struktur-5656/
0%
1,03
0
179 (D): https://znanija.com/task/55058520
0%
0,04
0
180 (C): https://medium.com/
0%
1,64
0
181 (D): https://ebooks.znu.edu.ua/files/Bibliobooks/Inshi67/0049328.pdf
0%
0,6
0
182 (D): https://naurok.com.ua/urok-zagalni-vidomosti-pro-dizayn-osnovni-zavdannya-dizaynu-znachennya-dizaynu-yak-suchasnogo-metodu-proektuvannya-profesiyni-obov-yazki-dizayneriv-174584.html
0%
0,58
0
183 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8kiuMoe69TJFmQ
0%
0,42
0
184 (D): https://archer.chnu.edu.ua/xmlui/bitstream/handle/123456789/6739/Алгоритмізація_та_програмування.pdf?sequence=1
0%
2,94
0
185 (D): https://avada-media.ua/stili-web-dizajna/
0%
1,49
0
186 (D): https://atlasiko.com.ua/blog/web-development/adaptive-layout/
0%
0,53
0
187 (D): https://naurok.com.ua/prezentaciya-ponyattya-pro-mediatekst-novini-yak-operativni-povidomlennya-yaki-mistyat-suspilno-vazhlivu-ta-aktualnu-informaciyu-421681.html
0%
0,42
0
188 (D): https://rocketmen.com.ua/ua/article/trend_web
0%
1,36
0
189 (D): https://esputnik.com/uk/blog/optimizaciya-konversii-alfa-i-omega-marketinga
0%
0,58
0
190 (D): https://uainformation.com/pro-ukrayinu/ukrayinske-slovo/bud-yakyj-bud-yakyj-chy-budyakyj-yak-pyshetsya-pravopys-ta-synonimy/
0%
1,51
0
191 (D): https://gosta.media/nauka-ta-osvita/pravopys-bud-yakyy-yak-pravylno-pyshetsya-tlumachennya-pryklady/
0%
1,31
0
192 (D): https://nenws.com/suspilstvo/samoosvita-ua/pravopis-bud-yakij-pravila-napisannya-prikladi-sinonimi/
0%
0,75
0
193 (D): https://slovnyk.ua/index.php?swrd=звичайний
0%
0,42
0
194 (D): https://knowledge.allbest.ru/programming/2c0a65635b2ac79b4c43a89421316d37_0.html
0%
0,44
0
195 (D): https://knowledge.allbest.ru/programming/c-2c0a65635b2ac79b4c43a89421316d37.html
0%
0,66
0
196 (D): https://webtune.com.ua/statti/web-rozrobka/adaptyvna-verstka-sajtu/
0%
0,74
0
197 (D): https://support.prom.ua/hc/uk/articles/360005217898-Управління-головною
0%
0,44
0
198 (D): https://yak.koshachek.com/articles/logo-jak-posilannja-na-golovnu-krim-golovnoi.html
0%
5,52
0
199 (D): https://www.cluber.com.ua/ua/lifestyle/samorazvitie-lifestyle/2013/05/15-shagov-k-uverennosti-v-sebe/
0%
0,69
0
200 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80qjP4K79DFEnQ
0%
1,11
0
201 (D): https://zeeks.co/blog/praktichnij-manual-po-vnutrishnij-perelinkovtsi/
0%
0,47
0
202 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_0iiM4289DRJng
0%
0,56
0
203 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8kehOYC99TZElw
0%
1,29
0
204 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=8EuuOIe49DRDkQ
0%
0,59
0
205 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9UmuOIW98jtEnw
0%
1,24
0
206 (D): https://laba.ua/blog/2651-polzovatelskie-scenarii-chto-eto-kak-i-dlya-chego-ih-nuzhno-stroit
0%
0,64
0
207 (D): https://www.koob.ru/shimko_v_t/
0%
0,94
0
208 (D): https://www.w3schools.com/html/
0%
1
0
209 (D): https://www.w3schools.com/TAGs/
0%
1,64
0
210 (D): https://stackoverflow.com/questions/30459198/difference-between-9-and-nbsp-or-32
0%
0,81
0
211 (D): https://elit-web.ua/ua/blog/chto-takoe-vneshnie-seo-ssylki
0%
0,7
0
212 (D): https://www.w3schools.com/html/html_basic.asp
0%
1,08
0
213 (D): https://www.sciencedirect.com/topics/engineering/electronic-design
0%
0,83
0
214 (D): https://www.researchgate.net/profile/Jens-Lienig/publication/319242991_Electronic_Systems_Design_Foreword_and_Preface/data/599d69690f7e9b892bb3c66a/esd-foreword-preface.pdf
0%
0,66
0
215 (D): https://www.electronicdesign.com/
0%
1,08
0
216 (D): https://www.reddit.com/r/LearningRussian/comments/5se8f8/an_amazing_way_to_learn_russian_alphabet/
0%
0,82
0
217 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=9EmjOIS_9jLZ
0%
0,73
0
218 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=_0qgOYG79TdJnQ
0%
0,67
0
219 (D): https://web-crawler.plagiarism-detector.com/get-doc-pt?did=80ekMoy6-jZHnw
0%
2,08
0
220 (D): https://ban.media/story/user-persona-dlya-chogo-potribni-portreti-koristuvachiv-i-yak-jih-stvoriti
0%
0,53
0
221 (D): https://allbest.ru/k-3c0a65635b2ac79a5d43b88421306d37.html
0%
0,96
0
222 (D): https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/
0%
3,67
0
223 (D): https://www.springbokcompanyltd.com/product/chateau-del-rei-sparkling-sweet-white/
Важные замечания:

Википедия: | Google Книги: | Сервисы платных работ: | Античит:
Обнаружена Wiki! | [не обнаружено] | [не обнаружено] | Обнаружено сокрытие!

Античит-отчет UACE:
1. Статус: Анализатор Включен Нормализатор Включен сходство символов установлено на 100%
2. Обнаруженный процент загрязнения UniCode: 8,4% с лимитом: 4%
3. Процент нераспознанных символов после нормализации: 4,9%
4. Все подозрительные символы будут отмечены фиолетовым цветом: Abcd...
5. Найдены невидимые символы: 0

Рекомендации по оценке:
Особое внимание следует уделить анализу этого отчета! Предполагается, что этот документ содержит значительное количество символов, чуждых языку документа. Это прямое указание на то, что автор документа использовал специальное программное обеспечение\онлайн-веб-сервис, чтобы эффективно скрыть текст в попытке избежать обнаружения потенциального плагиата. Настоятельно рекомендуется передать это дело на более высокий уровень! В случае сомнений обращайтесь: в службу поддержки Детектора плагиата!

Алфавитная статистика и анализ символов:

символ: | кол-во: | частота%: | описание юникода:
--- | --- | --- | ---
[ ] | 13869 | 13,03% | space
о | 7348 | 6,9% | cyrillic small letter o
н | 6260 | 5,88% | cyrillic small letter en
а | 6110 | 5,74% | cyrillic small letter a
т | 5279 | 4,96% | cyrillic small letter te
и | 4689 | 4,4% | cyrillic small letter i
і | 4645 | 4,36% | cyrillic small letter byelorussian-ukrainian i
р | 4027 | 3,78% | cyrillic small letter er
в | 3923 | 3,68% | cyrillic small letter ve
е | 3854 | 3,62% | cyrillic small letter ie
с | 3448 | 3,24% | cyrillic small letter es
к | 2903 | 2,73% | cyrillic small letter ka
у | 2778 | 2,61% | cyrillic small letter u
л | 2399 | 2,25% | cyrillic small letter el
д | 2388 | 2,24% | cyrillic small letter de
м | 2048 | 1,92% | cyrillic small letter em
п | 1968 | 1,85% | cyrillic small letter pe
з | 1872 | 1,76% | cyrillic small letter ze
я | 1553 | 1,46% | cyrillic small letter ya
. | 1422 | 1,34% | full stop
й | 1303 | 1,22% | cyrillic small letter short i
ь | 1223 | 1,15% | cyrillic small letter soft sign
г | 1216 | 1,14% | cyrillic small letter ghe
б | 1163 | 1,09% | cyrillic small letter be
e | 986 | 0,93% | latin small letter e
, | 965 | 0,91% | comma
ч | 859 | 0,81% | cyrillic small letter che
i | 715 | 0,67% | latin small letter i
х | 687 | 0,65% | cyrillic small letter ha
ю | 686 | 0,64% | cyrillic small letter yu
o | 678 | 0,64% | latin small letter o
ц | 670 | 0,63% | cyrillic small letter tse
a | 665 | 0,62% | latin small letter a
r | 637 | 0,6% | latin small letter r
t | 636 | 0,6% | latin small letter t
s | 566 | 0,53% | latin small letter s
n | 550 | 0,52% | latin small letter n
ж | 539 | 0,51% | cyrillic small letter zhe
ф | 525 | 0,49% | cyrillic small letter ef
є | 482 | 0,45% | cyrillic small letter ukrainian ie
ш | 480 | 0,45% | cyrillic small letter sha
l | 391 | 0,37% | latin small letter l
ї | 363 | 0,34% | cyrillic small letter yi
c | 358 | 0,34% | latin small letter c
щ | 333 | 0,31% | cyrillic small letter shcha
d | 325 | 0,31% | latin small letter d
/ | 291 | 0,27% | solidus
h | 278 | 0,26% | latin small letter h
0 | 275 | 0,26% | digit zero
1 | 261 | 0,25% | digit one
g | 261 | 0,25% | latin small letter g
m | 256 | 0,24% | latin small letter m
- | 253 | 0,24% | hyphen-minus
u | 241 | 0,23% | latin small letter u
b | 234 | 0,22% | latin small letter b
: | 233 | 0,22% | colon
2 | 218 | 0,2% | digit two
p | 217 | 0,2% | latin small letter p
f | 214 | 0,2% | latin small letter f
w | 202 | 0,19% | latin small letter w
3 | 137 | 0,13% | digit three
– | 127 | 0,12% | en dash
% | 122 | 0,11% | percent sign
v | 117 | 0,11% | latin small letter v
( | 112 | 0,11% | left parenthesis
) | 111 | 0,1% | right parenthesis
y | 104 | 0,1% | latin small letter y
4 | 100 | 0,09% | digit four
[ | 98 | 0,09% | left square bracket
] | 98 | 0,09% | right square bracket
k | 97 | 0,09% | latin small letter k
« | 89 | 0,08% | left-pointing double angle quotation mark
» | 87 | 0,08% | right-pointing double angle quotation mark
5 | 77 | 0,07% | digit five
; | 72 | 0,07% | semicolon
6 | 67 | 0,06% | digit six
● | 67 | 0,06% | black circle
8 | 65 | 0,06% | digit eight
9 | 60 | 0,06% | digit nine
_ | 54 | 0,05% | low line
' | 47 | 0,04% | apostrophe
7 | 46 | 0,04% | digit seven
x | 42 | 0,04% | latin small letter x
j | 40 | 0,04% | latin small letter j
” | 27 | 0,03% | right double quotation mark
’ | 25 | 0,02% | right single quotation mark
" | 25 | 0,02% | quotation mark
“ | 25 | 0,02% | left double quotation mark
z | 18 | 0,02% | latin small letter z
ы | 16 | 0,02% | cyrillic small letter yeru
{ | 11 | 0,01% | left curly bracket
} | 11 | 0,01% | right curly bracket
q | 8 | 0,01% | latin small letter q
# | 8 | 0,01% | number sign
= | 6 | 0,01% | equals sign
ґ | 5 | 0% | cyrillic small letter ghe with upturn
ʼ | 5 | 0% | modifier letter apostrophe
○ | 5 | 0% | white circle
+ | 5 | 0% | plus sign
× | 4 | 0% | multiplication sign
* | 4 | 0% | asterisk
@ | 3 | 0% | commercial at
ø | 2 | 0% | latin small letter o with stroke
? | 2 | 0% | question mark
& | 2 | 0% | ampersand
^ | 1 | 0% | circumflex accent
ъ | 1 | 0% | cyrillic small letter hard sign
! | 1 | 0% | exclamation mark
ё | 1 | 0% | cyrillic small letter io
э | 1 | 0% | cyrillic small letter e
æ | 1 | 0% | latin small letter ae
ü | 1 | 0% | latin small letter u with diaeresis

Активные ссылки (URL-адреса, извлеченные из документа):

URL не найдены

Исключённые ресурсы:

URL не найдены

Включённые ресурсы:

URL не найдены

Детальный анализ документа:
Міністерство освіти і науки України Державний заклад
id: 1
Цитирования: 0,04%
«Луганський національний університет імені Тараса Шевченка»
Навчально-науковий інститут математики та інформаційних технологій Кафедра інформаційних технологій та систем Сімонов Євген Олексійович ОНОВЛЕННЯ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ ТА ПРОЄКТУВАННЯ ФУНКЦІОНАЛЬНОГО ПРОТОТИПУ ДЛЯ САЙТУ НАВЧАЛЬНО-НАУКОВО ІНСТИТУТУ МАТЕМАТИКИ ТА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ кваліфікаційна робота здобувача вищої освіти другого (магістерського) рівня освітньої програми
id: 2
Цитирования: 0,01%
«Комп’ютерні мережі»
за спеціальністю 123 Комп’ютерна інженерія Особистий підпис ______________ Євген СІМОНОВ Науковий керівник _____________ Микола СЕМЕНОВ, кандидат педагогічних наук, доцент кафедри інформаційних технологій та систем В.о. завідувача кафедри _________ Микола СЕМЕНОВ, кандидат педагогічних наук, доцент кафедри інформаційних технологій та систем Полтава – 2024 АНОТАЦІЯ Сімонов Є.О. Тема: Оновлення користувацького інтерфейсу та проєктування функціонального прототипу для сайту навчально-науково інституту математики та інформаційних технологій. Спеціальність: 123
id: 3
Цитирования: 0,01%
«Комп’ютерна інженерія».
Установа: ЛНУ імені Тараса Шевченка, 2024р. Магістерська робота містить: 88 с., 43 рис., 58 джерел. Об’єкт дослідження – вебдизайн сайту. Предмет дослідження – проєктування користувацького інтерфейсу сайту інституту математики та інформаційних технологій. Мета роботи - розробити функціональний користувацький інтерфейс сайту інституту відповідно до всіх вимог юзабіліті з використанням новітніх інструментів роботи з вебдизайном. Результати роботи. Проведено аналіз підходів до юзабіліті вебсайтів вищих навчальних закладів. Сформовані вимоги до вебдизайну для сайту структурного підрозділу та визначені вимоги до програмного забезпечення проєктування прототипу. В результаті використання обраних програмних інструментів розроблено дизайн офіційного сайту навчально-наукового інституту математики та інформаційних технологій. Розроблено адаптивний дизайн та спроєктовано функціональний прототип. Ключові слова: КОМП’ЮТЕРНА ГРАФІКА, КОРИСТУВАЦЬКИЙ ІНТЕРФЕЙС, ПРОТОТИП, ВІЗУАЛІЗАЦІЯ, ДИЗАЙН, МАКЕТ, САЙТ ІНСТИТУТУ. А N N О T А T І О N S і m о n о v У. T h е m е: U s е r і n t е r f а с е u р d а t е а n d f u n с t і о n а l р r о t о t у р е d е s і g n f о r t h е w е b s і t е о f t h е Е d u с а t і о n а l а n d R е s е а r с h І n s t і t u t е о f M а t h е m а t і с s а n d І n f о r m а t і о n T е с h n о l о g і е s. S р е с і а l і t у: 123
id: 4
Цитирования: 0,01%
"С о m р u t е r Е n g і n е е r і n g".
І n s t і t u t і о n: L u h а n s k T а r а s S h е v с h е n k о N а t і о n а l U n і v е r s і t у (L T S N U), 2024 у е а r. M а s t е r's w о r k о f: 88 р., 43 і m g, 58 s о u r с е s. О b j е с t о f r е s е а r с h і s s і t е w е b d е s і g n. S u b j е с t о f r е s е а r с h: u s е r і n t е r f а с е d е s і g n о f t h е І n s t і t u t е о f M а t h е m а t і с s а n d І n f о r m а t і о n T е с h n о l о g і е s. А n а і m о f r е s е а r с h і s - t о d е v е l о р а f u n с t і о n а l u s е r і n t е r f а с е d е s і g n а с с о r d і n g t о u s а b і l і t у r е q u і r е m е n t s b у u s і n g t h е m о d е r n w е b d е s і g n t о о l s. T h е r е s u l t s о f t h е w о r k. T h е s t u d у і n v о l v е d а n а n а l у s і s о f u s а b і l і t у а р р r о а с h е s f о r h і g h е r е d u с а t і о n і n s t і t u t і о n w е b s і t е s. S р е с і f і с w е b d е s і g n r е q u і r е m е n t s w е r е с r а f t е d f о r а s t r u с t u r а l u n і t, а n d с r і t е r і а f о r р r о t о t у р е d е s і g n s о f t w а r е w е r е е s t а b l і s h е d. U s і n g t h е s е l е с t е d s о f t w а r е t о о l s, d е v е l о р е d t h е d е s і g n f о r t h е о f f і с і а l w е b s і t е о f t h е Е d u с а t і о n а l а n d R е s е а r с h І n s t і t u t е о f M а t h е m а t і с s а n d І n f о r m а t і о n T е с h n о l о g і е s. T h і s е n с о m р а s s е d а n а d а р t і v е d е s і g n а n d t h е с r е а t і о n о f а f u n с t і о n а l р r о t о t у р е. K е у w о r d s: С О M Р U T Е R G R А Р H І С S, U S Е R І N T Е R F А С Е, Р R О T О T У Р Е, V І S U А L І S А T І О N, D Е S І G N, L А У О U T, І N S T І T U T Е W Е B S І T Е. ЗМІСТ РОЗДІЛ 1. ВИМОГИ ДО ЮЗАБІЛІТІ ДО КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ САЙТУ ІНСТИТУТУ 8 1.1. Аналіз підходів до юзабіліті інтерфейсу сайту 8 1.2. Опції елементів користувацького інтерфейсу сайту 18 1.3. Юзабіліті та аналіз користувацького інтерфейсу на провідних на сайтах закладів вищої освіти 23 1.4. Висновок до розділу 1 34 РОЗДІЛ 2. ФОРМУВАННЯ ВИМОГ ДО ДИЗАЙНУ ТА ПРОЄКТУВАННЯ ПРОТОТИПУ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ 36 2.1. Розробка вимог до інтерфейсу графічних об’єктів сайту інституту 36 2.2. Відповідність спроєктованого користувацького інтерфейсу сайту інституту вимогам юзабіліті 40 2.3. Обґрунтування вибору засобів та реалізація користувацького інтерфейсу сайту. 47 2.4. Висновок до розділу 2 52 РОЗДІЛ 3. ОНОВЛЕННЯ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ ТА ПРОЄКТУВАННЯ ФУНКЦІОНАЛЬНОГО ПРОТОТИПУ ДЛЯ САЙТУ 54 3.1. Проєктування логотипа інституту. 54 3.2. Проєктування схематичного розміщення елементів користувацького інтерфейсу на головній та другорядних сторінках сайту інституту. 57 3.3. Розробка користувацького інтерфейсу та проєктування функціонального прототипу сайту інституту. 63 3.4. Програмна реалізація адаптації. 70 3.5. Властивості проєктування прототипу. 75 ВИСНОВКИ 78 СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 81 ВСТУП Сьогодні розвиток української вищої освіти в умовах високих європейських вимог, щодо якості навчання та організації роботи університетів є надзвичайно важливим. Один зі шляхів покращення рівня інформованості студентів, викладачів та інших користувачів Інтернету, зацікавлених у здобутті інформації, щодо закладу вищої освіти чи його структурних підрозділів полягає у використанні вебсайту. Офіційний вебсайт інституту математики та інформаційних технологій може спростити рутинну роботу, пов'язану із пошуком необхідної інформації для абітурієнтів, співробітників та студентів. Комплексно вебсайт є візитівкою інституту і важливим інформаційним ресурсом в Інтернеті. Зокрема, він об'єднує електронну форму представлення навчального процесу та надає важливі дані як освітні програми, новини, оголошення та контактна інформація. Слід відзначити, що доступ до цієї інформації є вільним для всіх користувачів. Грамотно розроблений користувацький інтерфейс істотно розширює можливості вебсайту і розкриває його потенціал для користувачів, спрощує пошук необхідної інформації без необхідності у використанні зовнішніх ресурсів. Обрана тема є надзвичайно актуальною для розвитку Луганського національного університету імені Тараса Шевченка та його підрозділів в інформаційному просторі в умовах війни та евакуації для збереження популярності серед студентів, потенційних абітурієнтів і інших зацікавлених осіб. Головним аспектом даної магістерської роботи є аналіз підходів до побудови вебсайту сучасних закладів вищої освіти та подальше проєктування оновленого користувацького інтерфейсу сайту структурного підрозділу, що є актуальною темою для університету. Мета роботи – розробити функціональний прототип користувацького інтерфейсу вебсайту інституту відповідно до всіх вимог юзабіліті з використанням новітніх інструментів роботи у сфері вебдизайну. Для досягнення поставленої мети необхідно вирішити наступні завдання: 1. Проаналізувати підходи до юзабіліті користувацьких інтерфейсів. 2. Розглянути підходи до створення дизайну сайту, який буде автоматично налаштовуватись під різні пристрої відображення, тобто може вважатись адаптивним. 3. Проаналізувати інтерфейс чинних сайтів провідних університетів світу, для виявлення закономірностей у побудові сайту. 4. На основі аналізу створити та вимоги до юзабіліті та окреслити основну структуру сайту. 5. Обґрунтувати вибір програмних засобів для реалізації макета, розробити опис взаємодії з цими програмами. 6. Розробити підхід до реалізації дизайну сайту університету. 7. Створити інструкції щодо проєктування функціонального прототипу. Об’єкт дослідження – вебдизайн сайту. Предмет дослідження – проєктування користувацького інтерфейсу на сайті інституту математики та інформаційних технологій. Методи дослідження: теоретичний аналіз предметної галузі, порівняльний аналіз основних принципів дизайну навчальних закладів, системний аналіз, структурне конструювання та моделювання, формування вимог до інформаційного наповнення, спостереження, теоретичне узагальнення та інші. У першому розділі роботи розглядаються чинні підходи до юзабіліті сайту, створення дизайну, який буде зручним у використанні, проведено теоретичний аналіз принципів будування сайту. Розглянуто різні існуючі системи створення дизайну, зроблено їх порівняльний аналіз. Також проаналізовано загальні підходи до створення структури вебсайту. Другий розділ присвячено формулюванню вимог до організації та планування вебдизайн сайту університету, розглянуто вимоги до структури та особливостей оформлення вебсторінок. Визначені особливості вибору програмних засобів для реалізації макета сайту інституту. У третьому розділі було виконано розробку макета відповідно до описаної раніше схеми. Представлено побудований макет та функціональний прототип з детально описаним керівництвом з використання. РОЗДІЛ 1. ВИМОГИ ДО ЮЗАБІЛІТІ ДО КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ САЙТУ ІНСТИТУТУ 1.1. Аналіз підходів до юзабіліті інтерфейсу сайту Сьогодні існує багато сайтів різної тематики, проте не всі вони зручні в користуванні. Враховуючи мету та завдання магістерської роботи, розглянемо визначення понять
id: 5
Цитирования: 0,01%
«дизайн»,
id: 6
Цитирования: 0,01%
«користувацький інтерфейс»
id: 7
Цитирования: 0,01%
«вебдизайн»,
id: 8
Цитирования: 0,01%
«функціональний прототип»
з точки зору зручності для користувача. Багато хто розуміє вебдизайн як декорацію, як процес створення красивого сайту. Насправді слово
id: 9
Цитирования: 0,01%
«дизайн»
описує функціонування чогось, а не зовнішній вигляд. Дизайн поєднує в собі форму, і функцію. У порівнянні з мистецтвом, мета дизайну полягає не тільки у створенні візуального й емоційне привабливого, але ще і корисного[8;4;18]. Мета дизайну - ефективно розв'язувати проблеми. Дизайн ґрунтується на тому, як людина бачить цей світ, на розумінні його мислення і поведінки. Інструментарій дизайнера включає такі засоби як дослідження користувачів, прототипування, юзабіліті тестування інтерфейсу та інші [14;27]. Прототипування, наприклад, з точки зору тематики дослідження представляє особливий інтерес, тому що передбачає не просте створення шаблону сайту, а створення динамічної системи, яка дозволяє створити функціональну навігацію без використання коду [18]. Можливість зручної навігації є пріоритетом майже для кожного вебсайту. Навіть найкращий дизайн і зміст сайту не дасть потрібного результату, якщо люди не можуть знайти те, що їм потрібно. Більшість дизайнерів та дослідників, зокрема Боб Поташник, Якоб Нільсен, Джаред Спул у своїх наукових дослідженнях рекомендують приділяти серйозну увагу навігаційним меню та юзабіліті інтерфейсу сайту[5]. Розглянемо
id: 10
Цитирования: 0,01%
«зручність використання»
або
id: 11
Цитирования: 0,01%
«юзабіліті»
як науковий термін. За матеріалами Вікіпедії,
id: 12
Цитирования: 0,01%
«юзабіліті»
(англ. U s а b і l і t у - дослівно
id: 13
Цитирования: 0,01%
«можливість використання»,
id: 14
Цитирования: 0,02%
«здатність бути використаним»,
id: 15
Цитирования: 0,01%
«корисність»
) - поняття в мікроергономіці, ергономічна характеристика ступеня зручність предмета для застосування користувачами при досягненні певних цілей в певному контексті. Це науково-прикладна дисципліна, що займається підвищенням ефективності, продуктивності та зручності користування інструментами діяльності. Від ергономіки юзабіліті відрізняється зацікавленістю в ефективності роботи користувача (споживача), а не людино- машинної системи в цілому [21]. Згідно з Міжнародним стандартом І S О 9241-11 юзабіліті визначається ступенем, з якого продукт може бути використаний певними користувачами при певному контексті використання для досягнення певних цілей з належною ефективністю, продуктивністю і задоволеністю [28]. При цьому відносна важливість усіх трьох аспектів визначається цим самим контекстом. Як бачимо з цього визначення, це досить широке поняття, від якого треба перейти до поняття
id: 16
Цитирования: 0,02%
«юзабіліті інтерфейсу сайту».
Під цим поняттям розуміється просте і зручне використання сайту. Це безпосередньо впливає на лояльність користувачів, кількість відвідувань і навіть конверсію[11]. Розглянемо декілька науково доведених положень щодо проєктування інтерфейсу сайту з точки зору юзабіліті. Читання в інтернеті. Доведено, що користувачі майже не читають текст в інтернеті при першому перегляді сайту. Проведені дослідження показують, що люди вчитуються в текст тільки в разі сильної зацікавленості в змісті. Зазвичай вони переглядають сторінки в пошуках виділених слів, осмислених заголовків, коротких абзаців. [19] Дослідження Якоба Нільсена (J а k о b N і е l s е n) 2008-го року, стосовно руху очей показують, що в середньому на сайтах прочитується менше ніж 20% текстового контенту [44]. В іншому юзабіліті тестуванні Нільсен перевіряв текстові формулювання на одному сайті. Короткі, об'єктивні тексти, які легко сканувати поглядом, показали підвищення конверсії на 124%. [45] Геррі МакГаверн (G е r r у M с G о v е r n) дізнався, що тільки 1 з 15 людей змогли побачити потрібний шматочок інформації, який знаходився в масиві не зручної для сканування поглядом інформації[40]. Стів Круг (S t е v е K r u g) у своїй книзі D о n о t M а k е M е T h і n k заявляє, що люди в інтернеті не читають, а
id: 17
Цитирования: 0,01%
«сканують» поглядом[10]
. Правило
id: 18
Цитирования: 0,01%
«трьох кліків».
За результатами юзабіліті тестів більшість дизайнерів вважає, що так зване
id: 19
Цитирования: 0,02%
«правило трьох кліків»
у сучасному суспільстві підлягає спростуванню. Всупереч розхожій думці, люди не йдуть з сайту, не знайшовши потрібної інформації за три кліки. Кількість необхідних кліків не впливає на час, який користувач витратить на пошук інформації. Зазначимо, що, наприклад, якщо користувач заходить на відомий йому сайт з відомим інтерфейсом, наприклад сайт інституту математики та інформаційних технологій, то правило трьох кліків напевно працює – чим менше кліків для здійснення дії – тим зручніше користувачу, адже він звільнюється від зайвих рутинних операцій[15]. Юзабіліті тести Якоба Нільсена для одного інтернет-магазину, показали що ймовірність знаходження продукту відвідувачами зросла на 600% після зміни дизайну в ході якого сторінка продукту була переміщена від головної сторінки на
id: 20
Цитирования: 0,01%
«відстань»
від трьох кліків до чотирьох[47] що спростовує це правило. Наступні тести від компанії U І Е продемонстрували важливість ролі назв посилань (а не кількості кліків), що в кінцевому підсумку вплинуло на юзабіліті. Варто замінити правило трьох кліків на правило одного:
id: 21
Цитирования: 0,12%
«Кожен клік або акт взаємодії повинен наблизити людину до його мети й водночас допомогти уникнути ймовірності загубитись»[24]
. Прокрутка (скроллінг) вебсторінок. За результатами досліджень, які проводив Джаред Спул (J а r е d S р о о l) в 1998 році, люди не часто користувалися прокруткою мишею, хоча зараз використання лінійки прокрутки браузера вважається абсолютно нормальною дією. Для великих обсягів інформації, таких як стаття або урок, прокрутка навіть підвищує юзабіліті в порівнянні з розподілом на сторінки.[51] Постачальники карт кліків з С l і с k T а l е проаналізували 100 000 показів сторінок. Результат наступний: люди використовували прокрутку в 76% переглядів, а 22% з них - прокручували до самого кінця незалежно від довжини сторінки[56]. Результати досліджень відстеження рухів очей експерта з юзабіліті Якоба Нільсена показують, що, попри підвищену увагу до верхньої частини сторінки, люди користуються прокруткою якщо сторінка спроєктований відповідним для прокрутки чином[48]. Вивчаючи статистику сайту T M Z.с о m Мелісса Таркуіні (M і l і s s а T а r q u і n і) з'ясувала, що найпопулярніші посилання існують внизу сайту. Вона також звернула увагу на високу популярність опитувань і галерей, які розташовані в самому низу сторінки
id: 22
Цитирования: 0,04%
«Гроші та фінанси А О L» [53]
. На підтримку прокрутки виступають і результати дослідження відстеження рухів очей, проведене С Х Р а r n t е r s. Відвідувачі користуються прокруткою, якщо сайт спроєктований за певними принципами [58]. Юзабіліті тести, проведені S о f t w а r е U s а b і l і t у R е s е а r с h L а b о r а t о r у (S U R L), підтверджують, що люди можуть читати довго, якщо можна швидко прокручувати інформацію, а не переходити на нові сторінки. [22] S U R L проводили інше юзабіліті дослідження і підтвердили, що люди ставляться однаково до прокручування , і до посторінкового перегляду, якщо справа стосується сторінки результатів пошуку. [23] Виділення елементів інтерфейсу. За результатами досліджень, можна свідчити, що поширена помилка полягає в намірі надати елементу більше значення на сторінці, прикрасивши його великою кількістю графіки або анімацією. Як вважають дослідники, такий підхід зазвичай тільки погіршує помітність об'єкта інтересу. Люди часто сприймають яскраві графічні елементи як елементи реклами та ігнорують їх. Як зазначив Якоб Нільсен:
id: 23
Цитирования: 0,13%
«Банерна сліпота дійсно існує. Маються на увазі не тільки рекламні банери, а й все, що на них схоже»[49]
. Наприклад, на одному некомерційному сайті, присвяченому здоров'ю, використовувався квадратний елемент рекламного характеру, який інформував людей про дії при серцевому нападі. Дослідження показало, що люди не звертали увагу на цей блок через місце його розташування на сторінці. Франк Ларго (F r а n с k L а r g е а u l t) провів дослідження 300 об'єктів, що візуально нагадують рекламу, яке показало існування феномена уникнення реклами (хоча дослідження було направлено на порівняння графічних банерів і посилань)[38]. Дон Норман (D о n N о r m а n) говорить, що люди вміють сильно фокусуватися і не помічати речей поза фокусом. Так вони пропускають зміст, яке нагадує рекламу у вигляді посилань або тексту [49]. Оригінальність проєкту. Багато дизайнерів, замість використання загальноприйнятих практик проєктування користувацьких інтерфейсів, витрачають час на створення оригінального проєкту. Проте доведено, що практики та шаблони добре працюють, оскільки одного разу вже були кимось введені й перевірені на юзабіліті. Оскільки користувачам вони теж відомі, то не потрібно використовувати пояснення та інструкції [7]. Дослідження показують, що людям більше подобаються зручні речі, ніж нововведення, тому стандартні шаблони аудиторія зрозуміє краще. Стів Круг (S t е v е K r u g) у своїй книзі D о n о t M а k е M е T h і n k, заявляє, що
id: 24
Цитирования: 0,03%
«стандарти це ваші друзі»,
і вони незамінні для користувачів при переході з одного сайту на інший.[10] У публікації
id: 25
Цитирования: 0,04%
«Як зробити досить хороший сайт»
Сет Годін (S е t h G о d і n) говорить, що
id: 26
Цитирования: 0,04%
«в інтернеті є більше мільярда сторінок»,
якими можна надихатися [31]. Блог С а r s о n і f і е d's T h і n k V і t а m і n підкреслює, що
id: 27
Цитирования: 0,07%
«дизайнерське рішення, яке ви шукайте, швидше за все вже існує».
Деталі. Як зазначив Чарльз Імз (С h а r l е s Е а m е s), відомий американський архітектор та дизайнер:
id: 28
Цитирования: 0,06%
«Деталі це не тільки деталі. Деталі створюють дизайн».
Наз Хамід (N а z H а m і d) стверджує, що дизайнери повинні приділяти максимум уваги деталям: завжди треба експериментувати, бути самокритичним, намагатися опрацювати кожну дрібницю в дизайні [33]. Дизайнер послуг Джефф Говард (J е f f H о w а r d) пише, що компанії при спробах створення бездоганних послуг, часто не звертають уваги на частину деталей [35]. Джошуа Брюер (J о s h u а B r е w е r) висловив таку думку на рахунок приємних дрібниць: «Індустрія послуг давно знайома з цим секретом. Щоб сподобатися клієнту потрібен час, а воно дуже обмежена. У такі моменти людина може бути приємно здивований усілякими дрібницями: увагою до деталей, швидкістю обслуговування, всякими бонусами або просто посмішкою. Якщо клієнт йде з відчуттям, що йому надали трохи більше уваги, то можна гарантувати, що він повернеться і розповість про вас друзям [25]. Редизайн. Загальноприйнятий погляд свідчить, що «редизайн» сайту передбачає зміну зовнішнього вигляду, підвищує конверсію і залучає нових користувачів. Проте доведено, що після таких редизайнів результат виходить зворотний. Дослідження відгуків після перероблення сайтів показали, що людям не подобаються зміни. Це стосується і тих сайтів, переваги нової версії яких очевидні. Для успішного редизайну (або перегрупування) потрібно з'ясувати, що на існуючому сайті працює, а що ні; треба зрозуміти змінилися потреби клієнтів після минулого редизайну. У більшості випадків, достатньо лише мінімальних змін в інтерфейсі. G о о g l е, У а h о о, А m а z о n і кілька інших підприємств використовують саме цю тактику: їх сайти ніколи сильно не змінюються, хоча поліпшення з'являються постійно. Кемерон Мол (С а m е r о n M о l l) у своїй статті «Хороші дизайнери здійснюють редизайн, а найкращі - перегруповують» пояснює, чому дизайнерам треба акуратно підходити до редизайну. В першу чергу, дизайнери повинні розуміти потребу компанії в редизайні й думати про те, чого коштуватиме відвідувачу зрозуміти зміни й звикнути до них[42]. Якоб Нільсен у своїй роботі
id: 29
Цитирования: 0,05%
«F r е s h v s. F а m і l і а r: H о w А g g r е s s і v е l у t о R е d е s і g n»,
зазначає, що це в порядку речей, коли замовнику цікавий новий зовнішній вигляд сайту. Проте, відвідувачі сайтів, вважають за краще знайомий дизайн, тому що їм все в ньому відомо, вони швидко знаходять потрібне і йдуть [46]. Коли у 2010 році F а с е b о о k переробив свою головну сторінку, люди стали її зневажати. Аналогічне було і зі стрічкою новин у 2006, хоча зараз це одна з основоположних функцій сайту. Нове меню програми W о r d 2007 (r і b b о n і n t е r f а с е) був набагато кращим за попередній інтерфейс W о r d. У M і с r о s о f t дотепер надходять скарги від користувачів, які у своїх блогах пишуть про проблеми. Джаред Спул (J а r е d S р о о l) стверджує, що кардинальний редизайн коштує дорого і дуже ризикований. Джаред радить покроково вносити зміни, тому що так простіше адаптуватися до мінливих умов бізнесу. Типографіка. Розглянемо типографіку та її вплив на читабельність та розуміння тексту. Важливо відзначити 3 найважливіших критерії, якими слід керуватися при виборі конкретного шрифту: ● розмір шрифту (кегль); ● інтервал між рядками (інтерліньяж); ● доступність (а с с е s а b і l і t у). У своїй статті Ді Бнон Теннант (D B n о n n T е n n а n t), фахівець з С R О (оптимізації конверсії), безапеляційно названої
id: 30
Цитирования: 0,08%
«16 пікселів для основного тексту, а все інше - дорогі помилки»
(16 Р і х е l s F о r B о d у С о р у, А n у t h і n g Е l s е І s А С о s t l у M і s t а k е) , наводять переконливі докази того, що шрифт розміром в 16 пікселів повинен стати стандартом для тексту, опублікованого о n l і n е[54]. Основний аргумент Теннанта - якщо взяти до уваги відстань від очей користувача до монітора, то розмір електронного шрифту в 16 пікселів максимально відповідає розмірам типографського шрифту на паперовій книзі/газеті, які зазвичай знаходяться набагато ближче до обличчя читача. Доводам Ді Бнона Теннанта відповідають результати спільних окулографічних досліджень І B M/G о о g l е, що показали, що збільшення розміру шрифту веде до збільшення швидкості читання о n l і n е-публікацій. Втім, зафіксований приріст не виходив за величину статистичної похибки. Важливо зазначити й те, що хоча звичні G е о r g і а й А r і а l як і раніше залишаються широко використовуваними шрифтами, переважна більшість нових пар шрифтів знаходяться за межами традиційних варіантів.[2;13] Це, мабуть, пов'язано з розвитком сервісів завантаження власних шрифтів, наприклад, G о о g l е F о n t s. Нестандартні варіанти шрифтів надають типографіці персоналізованості, виразності й креативності, що, в свою чергу, робить статичне розташування і накреслення друкарських знаків справжньою, живою
id: 31
Цитирования: 0,01%
«мовою тіла»
сайту. Колір. Відвідувачі сайту дуже швидко виносять судження про головну сторінку, а це, як відомо, суттєво впливає на загальне враження від подальшого користування цим вебресурсом. Згідно з дослідженнями G о о g l е перше враження про сайт формується у людей менше ніж за секунду. Тому колір є одним з визначальних чинників, адже колір обробляється людським мозком швидше, ніж текст або зображення [14]. Широкий вибір. Дослідження показують, що велика кількість альтернатив зазвичай стимулює
id: 32
Цитирования: 0,01%
«параліч рішення»
і роздратування. Доведено, що на широкий вибір функцій звертають увагу до початку користування продуктом. Проте, коли починають користуватися, то менший вибір дає повне задоволення [3]. Дослідження
id: 33
Цитирования: 0,09%
«F е а t u r е F а t і g u е: W h е n Р r о d u с t С а р а b і l і t і е s B е с о m е T о о M u с h о f а G о о d T h і n g»
(Втома від можливостей: коли продукт вміє набагато більше, ніж треба) розповідає, що
id: 34
Цитирования: 0,26%
«Перед використанням, можливості означають більше для учасників тестів, ніж юзабіліті, але після використання, саме юзабіліті продукту впливало на задоволення. В результаті, задоволення було повніше тими продуктами, які були простіше, а складні версії більшість учасників просто відкидало»[55]
. Закон Хіка (H і с k's L а w) говорить, що час, який витрачається на вибір збільшується з кількістю альтернатив і їх складністю. Зі збільшенням часу на вибір страждають враження людей.[34] Іконки як елементи інтерфейсу. Численні дослідження показали, що піктограми в інтерфейсі (іконки) дуже складно запам'ятати та їх загальну неефективність. Панель інструментів M і с r о s о f t О u t l о о k - гарний тому приклад. У попередньої версії програми панель складалася виключно з іконок і мала при цьому досить низький показник юзабіліті. Але від того, що іконки замінили та змінили їх позиції не покращило ситуацію. Що дійсно допомогло присвоєння підпису кожної з піктограм. Це відразу усунуло всі проблеми з юзабіліті, і люди почали користуватися панеллю інструментів. В іншому дослідженні команда фахівців з U І Е з'ясувала, що люди швидше запам'ятовують позицію кнопки, ніж графічну інтерпретацію дії [6]. Розглянемо два експерименти, які провела компанія U І Е з метою вивчити юзабіліті кнопок з іконками. У першому були змінені тільки графічні елементи кнопок, в той час, як розташування кнопок залишилося тим же. Користувачі швидко звикли до цього нововведення. У другому, навпаки, самі кнопки були поміняні місцями, хоча графіка залишилася колишньою. Такий поворот заплутав учасників експерименту і викликав зайві труднощі [57]. Міхаель Цушлаг (M і с h а е l Z u s с h l а g) говорить, що
id: 35
Цитирования: 0,13%
«іконки суперечать інтуїції й не обов'язково допомагають користувачеві знайти пункт меню швидше, ніж простий текст. Вони не варті того».
Данський дизайнер Петер Стеен Хегенхауг (Р е t е r S t е е n H ø g е n h а u g) провів власне дослідження того, наскільки добре користувачі розуміють іконки, які використовуються в різних системах управління контентом. Результат: повсюдно використовувану іконку
id: 36
Цитирования: 0,01%
«Вставити посилання»
розпізнали всього 35% учасників. І навіть на класичні
id: 37
Цитирования: 0,01%
«Скасувати»
і
id: 38
Цитирования: 0,01%
«Повторити»
правильно вказала тільки половина учасників. Якоб Нільсен (J а k о b N і е l s е n) стверджує, що «одна з найважчих речей у юзабіліті - зрозуміти, що ви - не ваш користувач. Якщо ви розробник проєкту, то ви мислите по-іншому [43]. Аналізуючи ці дослідження, можна зробити висновок, що на зручність у використанні (юзабіліті) сайту впливають такі чинники: ● архітектура; ● кількість елементів; ● кольори; ● шрифт; ● завантаженість; ● деталі; ● розміщення інформації у фокусі; ● емоційність (перше враження 1.2. Опції елементів користувацького інтерфейсу сайту Виходячи з завдань магістерської роботи, важливо приділити увагу різним гаджетам та засобам представлення інтерфейсу вебресурсів з вимогами адаптації. Варто зазначити, що сьогодні кожен користувач має можливість відвідувати сайт не лише за допомогою персональних комп’ютерів, а й використовуючи смартфони та планшети. Всі ці пристрої розрізняються розміром екрана, роздільною здатністю і, відповідно, тим, як може відображатися на них вебсайт. Тому важливим аспектом даної магістерської роботи є розробка дизайну користувацького інтерфейсу, який може динамічно змінюватись залежно від пристрою, з якого здійснюється вхід на сайт. Адаптивний вебдизайн (англ. R е s р о n s і v е W е b-D е s і g n) - дизайн вебсторінок, що забезпечує правильне відображення сайту на різних пристроях, підключених до Інтернету та динамічно підлаштовується під задані розміри вікна браузера [1]. Адаптивний сайт створюється з застосуванням гнучких технологій: рухомої структури, адаптивних зображень й можливості використання специфічних функцій пристроїв. Він охоплює всю цільову аудиторію, формуючи уявлення користувачів до дизайну будь-яких пристроїв з виходом до інтернету та є однаковою ефективним як на моніторах 30", так і звичайних ПК, екранах планшетів [32]. Як повідомляє статистика, вже в середині 2013 року загальна кількість відвідувань сайтів зі смартфонів і планшетних комп'ютерів у світі перевищила кількість відвідувань зі звичайних ПК і ноутбуків. Метою адаптивного вебдизайну є універсальність відображення інтерфейсу сайту на різних пристроях. Для того, щоб вебсайт було зручно переглядати на екранах з різною роздільною здатністю, за технологією адаптивного вебдизайну не потрібно створювати окремі версії сайту для окремих видів пристроїв. Один сайт може працювати на смартфоні, планшеті, ноутбуці й телевізорі з виходом в інтернет, тобто на всьому спектрі пристроїв [30]. Вперше поняття адаптивного вебдизайну (англ. R е s р о n s і v е w е b-d е s і g n) ввів Ітан Маркотт в одній зі своїх статей в травні 2010 року. Згодом він випустив книгу під назвою «R е s р о n s і v е W е b-D е s і g n», присвячену даній технології [39]. Джеффрі Зельдман запропонував розширити поняття введене, Ітаном Маркоттом, щоб воно покривало будь-які підходи, що забезпечують чітке візуальне сприйняття, незалежно від характеристик екрана та інших обмежень для користувача пристрою. З іншого боку, Аарон Густафсон випустив книгу «А d а р t і v е W е b D е s і g n: С r а f t і n g R і с h Е х р е r і е n с е s w і t h Р r о g r е s s і v е Е n h а n с е m е n t», яка розглядає метод
id: 39
Цитирования: 0,01%
«поступового поліпшення»
(англ. Р r о g r е s s і v е е n h а n с е m е n t - ненав'язливий J а v а S с r і р t) як важливу складову адаптивного дизайну. У результаті вебдизайнери стали розуміти адаптивний дизайн (англ. А d а р t і v е d е s і g n, не плутати з англ. А d а р t і v е l а у о u t) як широке поняття, яке включає реалізацію адаптивності і поступове поліпшення [20;9]. Головними причинами виникнення та розвитку технологій адаптивного вебдизайну стали: ● збільшення кількості різної роздільної здатності пристроїв, з яких є можливість виходу в інтернет; ● популярність мобільних пристроїв з виходом в інтернет і збільшення мобільного інтернет-трафіку; ● рекомендації пошукових систем (відсутність дублюючих сторінок і концентрація посилальної маси на одному домені). Розглянемо декілька основних типів конструювання адаптивних макетів: ●
id: 40
Цитирования: 0,01%
«гумовий»
; ● перенесення блоків; ● перемикання макетів; ● адаптивність
id: 41
Цитирования: 0,01%
«малою кров'ю»
; ● панелі. Гумовий адаптив. Простий в реалізації й очевидний для користувача тип подання контенту. Основні блоки стискаються до ширини екрану мобільного пристрою, де таке неможливо - перебудовуються в одну довгу стрічку (дивись рис. 1.1). Такий макет дуже просто реалізувати за допомогою адаптивних С S S-фреймворків, наприклад B о о t s t r а р. Рисунок 1.1. Гумовий тип адаптації Перенесення блоків. Очевидний спосіб для сайту з декількома колонками (дивись рис. 1.2): при зменшенні ширини екрану додаткові блоки переносяться в нижню частину макета. Рисунок 1.2. Перенесення блоків Перемикання макетів. Цей спосіб (рис. 1.3) найбільш зручний при читанні сайту з різних пристроїв: під кожну роздільну здатність екрана розробляється окремий макет. Спосіб трудомісткий, тому менш популярний, ніж попередні два. Проте має дуже багато переваг. Рисунок 1.3. Перемикання макетів Адаптивність
id: 42
Цитирования: 0,01%
«малою кров'ю».
Дуже простий спосіб, який підходить для нескладних сайтів. Досягається елементарним масштабуванням зображень і типографіки (дивись рис. 1.4). Не дуже популярний, тому що не є гнучким. Рисунок 1.4. Адаптація
id: 43
Цитирования: 0,01%
«малою кров’ю»
Таким чином, у цьому параграфі розглянуто чотири способи адаптації сайту. У подальшому дослідженні буде обрано, який із цих способів більш ефективний, залежно від розроблених вимог до інкапсуляції елементів користувацького інтерфейсу на сайту інституту. 1.3. Юзабіліті та аналіз користувацького інтерфейсу на провідних на сайтах закладів вищої освіти Варто звернути увагу, що даних, отриманих при дослідженні юзабіліті та вимог до проєктування інтерфейсу, буде недостатньо для розробки якісного макета, який буде відповідати всім вимогам навчального сайту. Тому, відповідно до мети даної магістерської роботи, невіддільною частиною проєкту є дослідження та аналіз користувацького інтерфейсу та юзабіліті сайтів деяких закладів вищої освіти. Це повʼязано з необхідністю спиратись на наявні практики проєктування користувацького інтерфейсу саме сайтів навчальних закладів з метою створення тематичного оформлення для такого ресурсу. Вибірка сайтів для дослідження здійснювалась за допомогою W о r l d T о р 500 U n і v е r s і t і е s на офіційному порталі w w w.s h а n g h а і r а n k і n g.с о m. За її результатами було обрано п’ять вищих навчальних закладів, сайти яких будуть проаналізовані в даній роботі. До списку ввійшли: H а r v а r d U n і v е r s і t у (w w w.h а r v а r d.е d u); S t а n f о r d U n і v е r s і t у (w w w.s t а n f о r d.е d u); U n і v е r s і t у о f С а l і f о r n і а, B е r k е l е у (w w w.b е r k е l е у.е d u); U n і v е r s і t у о f С а m b r і d g е(w w w.с а m.а с.u k); U n і v е r s і t у о f О х f о r d (w w w.о х.а с.u k). Перед тим як перейти до детального аналізу інтерфейсу сайту, розглянемо та дамо визначення термінам які характеризують його окремі частини структури. Всі визначення будемо робити на прикладі дизайну який наразі використовується сайтом Луганського національного університету імені Тараса Шевченка (l u g u n і v.е d u.u а). Типова структура сайту складається з трьох основних елементів. Хедеру (від англ. H е а d е r), Тематична частина та Футер (від англ. F о о t е r). Та деяких додаткових елементів (банер, сайдбари та інший контент), які можуть бути включені в переважно тематичну частину та будуть розглянуті нижче на прикладі сайту університету. Хедер. Знаходиться у верхній частині структури сторінки більшості сучасних сайтів. Виконує основну навігаційну роль, відображає логотип та навігаційне меню. В окремих випадках пошук по сайту, панель входу чи реєстрації у випадках, якщо на сайті представлений особистий кабінет користувача. Рисунок 1.5. H е а d е r ЛНУ імені Т. Шевченка Банер. Титульне зображення, яке має на меті або демонструвати загальний настрій та тематику ресурсу, або містить інформаційну складову щодо послуг або новин. Візуально може буди відображено у вигляді каруселі з почерговою зміною зображень. Тематична частина сайту. Розміщує основний контент розподілений на різні блоки, кількість та візуалізація яких є вільною та залежить від тематики та інформаційного наповнення. Найчастіше це найбільша за площею і найбільш важлива для відвідувачів частина сторінки. Тематична частина сайту може містити такі види контенту, як: ● текстовий; ● графічний; ● аудіо; ● відеоконтент. Сайдбар. Поняття
id: 44
Цитирования: 0,01%
«сайдбар»
походить від англійського терміна "s і d е b а r", де "s і d е" - сторона,
id: 45
Цитирования: 0,01%
"b а r"
- смуга. Це опціональний елемент інтерфейсу сторінки метою якого є виділити окреме місце під додаткові інформаційні чи навігаційні сторінки інтерфейсу. В деяких випадках сайдбар може бути продубльований з обох боків від основного контенту та містити різне наповнення, як це реалізовано на сайту університету. Сайдбар може містити динамічний контент та бути прихованим від користувача в початковому вигляді сторінки й відображати контент лише за окремим запитом. Сайбари використовують у наступних випадках: ● як навігаційне меню (тобто альтернатива навігації в хедері); ● як динамічна інформаційна секція; ● як рубрики сайту (інформаційні пости, новини, погода); ● як рекламні посилання і банери; Рисунок 1.6. S і d е b а r Футер сайту. Слово
id: 46
Цитирования: 0,01%
«Футер»
походить від англ.
id: 47
Цитирования: 0,01%
«F о о t е r»
(підвал). Остання секція інтерфейсу в структурі сайту. Контент футеру є довільним та залежить від тематики сторінки. Може містити рекламні посилання, копірайти (знаки охорони авторського права), дублювати навігацію, логотип, відображати посилання на соціальні мережі та будь-яку іншу додаткову чи контактну інформацію Рисунок 1.7. F о о t е r Аналіз наявного користувацького інтерфейсу закладів вищої освіти. Наступним кроком варто приділити увагу структурі користувацького інтерфейсу закладів вищої освіти які були обрані попередньо та провести детальний аналіз головної сторінки на предмет наповнення, виявити закономірності. S t а n f о r d U n і v е r s і t у. Головна сторінка сайту Стенфордського університету має дещо схожий, з точки зору кольорової палітри, дизайн з раніше розглянутим Гарвардським університетом. Рисунок 1.12. Головна сторінка сайту Стенфордського університету. Логотип та герб університету розміщені в лівій частині хедера, а рядок пошуку та додаткове навігаційне меню – в правій. Крім того, вікно пошуку містить два типи сортування: вебпошуку та пошук по людях. Основне навігаційне меню заходиться нижче логитипу та є зафіксованим у верхній частині екрана під час скролінгу. Випадаючий список відсутній, проте кожен пункт містить посилання до сторінки з відповідними темами. А якості банера використовується статичне зображення. В основній частині є декілька блоків з найбільш популярними новинами. Також є посилання для переходу до повного списку новин. Рисунок 1.13. Блок з новинами Сайт містить додаткові блоки зі статтями, які мають типову структуру з посиланнями на повну версію. Інформаційні секції, події. Кожен містить посилання до повного списку статей згідно з темою блоку. Рисунок 1.14. Інформаційна секція Загалом сайт Стенфордського університету виконаний у мінімалістичному стилі. Фоновий колір переважно білий. Шрифти без засічок. Зазначимо, що головна сторінка містить багато інформації з у вигляді привʼю з можливістю перейти до теми. H а r v а r d U n і v е r s і t у. Звернемо увагу на головну сторінку вебсайт Гарвардського університету. Рисунок 1.8. верхня частина сайту Гарвардського університету Сайт використовує масивний банер на повну ширину екрану, пошук та
id: 48
Цитирования: 0,01%
“бургег меню”
розміщені в правій частині. Рисунок 1.9. Навігаційне меню Сайт розділений на декілька схожих по своїй структурі інформаційних блоків, які включають привʼю з можливістю перейти до повної версії статті. Рисунок 1.10. Прив’ю з посиланням до повної версії статі Нижня частина сайту містить інформацію щодо зворотного зв’язку, посилання на соціальні мережі та копірайт. Рисунок 1.11. F о о t е r сайту Гарвардського університету Варто зазначити, що головна сторінка, загалом, має приємний та сучасний дизайн. В навігаційному меню переважають сірі відтінки. На сайті використовується декілька видів шрифтів, як з засічками, так і без них. U n і v е r s і t у о f С а l і f о r n і а, B е r k е l е у. Розміщення елементів в хедері Каліфорнійського університету є традиційним. Логотип навчального закладу знаходиться в лівій частині, а навігаційне меню займає ділянку від середини до правого краю хедера. Також у верхній частині розміщено деякі другорядні навігаційні посилання та вікно пошуку. Банер - статичне зображення. Рисунок 1.15. Хедер сайту Каліфорнійського університету Кожен пункт основного навігаційного меню має випадаючий список, який містить у собі коротке прив’ю розділу та його підпункти. Рисунок 1.16. Випадаючий список навігаційного меню В основній частині сайту розміщено прив’ю останніх новин; праворуч – блок з планованими заходами на найближчі дні. Рисунок 1.17. Блок з новинами Футер вміщує в собі посилання на сторінки в соціальних мережах та деякі важливі навігаційні посилання такі як: бібліотеки, карта, контакти, новини, блог, заходи та інше. Рисунок 1.18. F о о t е r Каліфорнійського університету, Берклі. U n і v е r s і t у о f С а m b r і d g е. Головна сторінка Кембриджського університету дещо відрізняється від тих, що ми розглянули раніше. Навігаційне меню знаходиться праворуч та приховане за
id: 49
Цитирования: 0,01%
“бургер меню”
разом з пошуком. Статичний банер. Рисунок 1.19. Верхня частина сайту Кембридзького університету. Основне наповнення сайту складається з декількох частин: тематичні категорії, новини, події, та інша інформація для студентів. Рисунок 1.20. Тематичні блоки. Події та новини виконані в одному стилі з можливістю перейти до категорії. Рисунок 1.21. Блок з новинами. Рисунок 1.22. Соціальна активність Футер містить посилання на соціальні мережі та декілька навігаційних категорій. Результат. У ході дослідження 5 сайтів з рейтингу 10 кращих університетів було виявлено особливості структури сайту навчального закладу. Надалі результати досліджень будуть використані, згідно з темою даної магістерської роботи, при розробці власного макета сайту інституту. Зазначимо, що структури сайтів навчальних закладів, розглянутих у даному розділі, мають деякі аналогії що допоможе надалі окреслити основні чинники, які впливають на зручність у користуванні сайтом. 1.4. Висновок до розділу 1 Здійснений теоретичний аналіз надає можливість зробити висновок, що вебсайт інституту є визначальним інформаційним ресурсом, що охоплює широкий спектр користувачів. Досліджено його значущість та вплив на цільову аудиторію, яка потенційно зацікавлена у здобутті інформації на цьому ресурсі. Крім того, виявлені ключові вимоги до макета сайту, що відіграють важливу роль у забезпеченні ефективності та привабливості для користувачів. Основними результатами аналізу можна вважати наступне: 1. Визначені та описані фактори, які мають значущий вплив на зручність інтерфейсу вебсайту, а також його популярність та інформативність. Основний акцент слід робити на простоті та зрозумілості інтерфейсу, створюючи чітку та послідовну структуру навігації. Важливо надавати особливу увагу цим аспектам, оскільки вони визначають комфорт користувача та взаємодію з вебсайт, сприяючи його популярності та високій інформативності. 2. Підкреслено, що підходи до розробки дизайну, спрямовані на створення зручного інтерфейсу для різних груп користувачів, є послідовним процесом, який вимагає уважного аналізу аудиторії та її потреб. Важливо, щоб інтерфейс вебсайт був доступним та тематично структурованим, з включенням всіх необхідних елементів, розташованих відповідно до стандартів юзабіліті для конкретної категорії користувачів. Це сприяє оптимальній взаємодії та зручності використання вебсайту для широкого спектра користувачів. 3. Порівняльний аналіз п'яти обраних сайтів серед десяти найкращих університетів світу виявив наявність кількох ключових особливостей, які повинен включати офіційний сайт навчального закладу. Серед них: ○ Інформативність: Забезпечення високого рівня інформативності, щоб задовольнити потреби різних користувачів. ○ Простий та зрозумілий інтерфейс: Створення інтерфейсу, який є простим та зрозумілим для широкого кола користувачів. ○ Чітка навігаційна структура: Впровадження чіткої та послідовної структури навігації для легкості використання та швидкого знаходження інформації. ○ Неперевантаженість інформацією: Уникання перевантаження вебсайту інформацією для забезпечення зручності користувача. ○ Сучасний та простий дизайн: Використання сучасних дизайнерських рішень та збереження простоти оформлення для привабливого вигляду. 4. Виявлені спільні елементи структури навігації інтерфейсу, способи розміщення конкретного інформаційного контенту на головній сторінці, а також розібрані назви та характеристики блоків. РОЗДІЛ 2. ФОРМУВАННЯ ВИМОГ ДО ДИЗАЙНУ ТА ПРОЄКТУВАННЯ ПРОТОТИПУ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ 2.1. Розробка вимог до інтерфейсу графічних об’єктів сайту інституту Інтерфейс сайту - це те, з чим безпосередньо взаємодіє користувач, інструмент взаємодії користувача з тією чи іншою функцією на сайті. Наприклад, в простому пошуку по сайту вже міститься інтерфейс форми, вказівки параметрів, виведення результатів і функція коригування критеріїв пошуку.[17] Різні підходи до проєктування інтерфейсу впливають на те, наскільки зручно користувачеві буде взаємодіяти з сайтом або додатком, відповідно, чи захоче він використовувати цей ресурс і надалі.[16] Зазначимо, що попередня підготовка до проєктування інтерфейсу - дуже важливий етап створення сайту. Без інтерфейсу неможливо починати верстку і програмування, проте необхідно проєктувати інтерфейс підготувавши структурні рішення: структуру (вайрфрейми), сітки, кольори, акценти, стилі та компоненти. Без таких елементів проєкт не зможе бути спроєктований консистентно. Опишемо основні елементи структури інтерфейсу макета майбутнього сайту університету. Вайрфрейми (w і r е f r а m е s). Вайрфрейми використовуються в індустрії вебдизайну та розробки програмного забезпечення для створення простого, структурованого макета або скетчу вебсайту або додатка перед тим, як розпочати роботу над фінальним дизайном та реалізацією. Основні цілі використання вайрфреймів включають: Визначення структури та організації: Вайрфрейми допомагають визначити, як буде організовано вміст на сторінці чи в додатку, де будуть розташовані блоки тексту, зображення, кнопки, форми і інші елементи. 1. Швидка візуалізація концепцій: Вони дозволяють швидко та легко візуалізувати загальну ідею про проєкт без деталей дизайну, кольорів та графіки. 2. Визначення функціональності: Вайрфрейми допомагають визначити, які функції будуть доступні на різних частинах екрана чи сторінці, як вони будуть взаємодіяти та яким чином буде виглядати навігація. 3. Тестування концепцій ідеї: За допомогою вайрфреймів можна швидко створити прототип для тестування концепцій та ідеї з майбутніми користувачами або замовниками. 4. Взаємодія з розробниками: Вайрфрейми служать інструментом для взаємодії з дизайнерами та розробниками на ранніх стадіях проєкту. Вони дозволяють уникнути непорозумінь на пізніших етапах розробки. 5. Оптимізація користувацького досвіду: Вайрфрейми допомагають зосередитися на структурі та функціональності, спрощуючи внесення змін і оптимізацію користувацького досвіду перед реалізацією. Сітка. Сітка вебдизайну - це структура, яка визначає розміщення елементів на вебсайті. Вона використовується для створення зручного і логічного макета, який полегшує навігацію і сприяє ефективному сприйняттю інформації користувачами. Сітка розділяє сторінку на колонки та рядки, дозволяючи розташовувати різні елементи (текст, зображення, кнопки тощо) у визначених областях. Основні переваги використання сітки включають: 1. Організація контенту: Допомагає в розташуванні і структуризації контенту на сторінці. 2. Адаптивність: Дозволяє легко адаптувати дизайн до різних розмірів екранів, щоб забезпечити коректне відображення на різних пристроях (наприклад, комп'ютерах, планшетах, смартфонах). 3. Вирівнювання: Забезпечує рівномірний розподіл елементів і поліпшує зовнішній вигляд сторінки. 4. Сприяє консистентності: Забезпечує стандартизовану структуру для всіх сторінок сайту, що робить його більш зрозумілим і легко усвідомлюваним для відвідувачів. Сітки можуть бути фіксованими або адаптивними (гумовими), а також враховувати різні розміри колонок, ширини бордюрів і інші параметри, щоб дати дизайнерам більше гнучкості в створенні вебсайтів з різними структурами та виглядами. Стилі для кольорів. Створення стилів для кольорів є важливою частиною дизайн-процесу, особливо в контексті вебдизайну та графічного дизайну. Тут є кілька причин, чому стилі кольорів є важливими: 1. Брендова ідентичність: Створення стилів кольорів допомагає визначити та закріпити колірну палітру для бренду чи проєкту. Кольори можуть бути частиною візуального бренду, і вони впливають на спосіб, яким бренд сприймається аудиторією. 2. Консистентність дизайну: Створення стилів кольорів допомагає забезпечити консистентність в оформленні всього проєкту чи вебсайту. Колірні стилі роблять дизайн більш організованим і сприяють створенню єдиного вигляду для всіх елементів. 3. Легкість редагування та оновлення: Якщо ви визначите стилі для кольорів, вони можуть легко застосовуватися до всього дизайну, і в разі необхідності зміни можна легко внести в одному місці, а це автоматично вплине на всі елементи, що використовують цей стиль. 4. Створення індивідуальності: Кольори можуть впливати на емоції й настрій користувачів. Створюючи стилі для кольорів, дизайнер може докладати зусиль для того, щоб вони відображали характер чи настрій ресурсу, або створювати специфічний ефект для конкретної аудиторії. Отже, стилі кольорів допомагають створити організований, консистентний і ефективний дизайн, а також впливають на візуальне враження та сприйняття аудиторією. Стилі для шрифтів. Створення стилів для шрифтів є важливим елементом вебдизайну, оскільки має декілька ключових переваг: 1. Брендова ідентичність: Шрифти можуть внести вагому частину в брендову ідентичність. Визначення стилів для шрифтів дозволяє створити консистентність у використанні шрифтів на всіх матеріалах бренду. 2. Легкість читання: Вибір та визначення стилів для шрифтів може вплинути на читабельність контенту. Забезпечення правильного розташування, розміру та стилю шрифту допомагає створити комфортний і легко читабельний текст. 3. Консистентність дизайну: Створення стилів для шрифтів допомагає забезпечити консистентність використання шрифтів на різних сторінках вебсайту чи у різних матеріалах дизайну. Це важливо для створення єдинообразного та професійного вигляду. 4. Гнучкість та зручність редагування: Використання стилів для шрифтів дозволяє легко змінювати параметри шрифтів на всьому вебсайті чи в інших матеріалах, не втрачаючи консистентності дизайну. Компоненти та U І K і t. В контексті вебдизайну та розробки ці терміни визначають ключові аспекти використання елементів дизайну у створенні інтерфейсів для користувачів. Ці дві концепції виграють значущу роль в забезпеченні консистентності та ефективності дизайну вебсайтів та програмного забезпечення.
id: 50
Цитирования: 0,01%
"Компоненти"
становлять собою відокремлені елементи інтерфейсу, такі як кнопки, поля введення та навігаційні панелі, які можуть бути використані повторно в різних частинах вебсайту чи додатку. Їхня користь полягає в забезпеченні консистентності та спрощенні розробки шляхом легкого масштабування та повторного використання.
id: 51
Цитирования: 0,02%
"U s е r І n t е r f а с е K і t"
(U І K і t) - це комплексний набір готових до використання компонентів, шрифтів та кольорів, спроєктований для створення єдиного та привабливого дизайну. Приклади включають B о о t s t r а р, M а t е r і а l D е s і g n та А n t D е s і g n. Їх використання сприяє швидкому розробленню та однотипність дизайну, полегшуючи взаємодію між дизайнерами та розробниками. Використання компонентів та U І K і t визначає однотипний вигляд та функціональність вебінтерфейсів, забезпечуючи ефективність, легкість редагування та масштабованість проєктів. Ці аспекти виграють вагому роль у забезпеченні професійного дизайну та сприяють співпраці між різними учасниками розробки. 2.2. Відповідність спроєктованого користувацького інтерфейсу сайту інституту вимогам юзабіліті Розглянемо вимоги юзабіліті сайту університету через його контент. Контент (англ. С о n t е n t - зміст) – це інформаційне наповнення ресурсу, тобто графіка, текст, аудіоінформація, відеоролики, фотографії, картинки й все, що можна подивитися, послухати або прочитати. При просуванні ресурсів головну роль відіграє контент сайту або текстовий зміст сторінок. Історично склалося так, що не існує алгоритмів пошуку по графіку або медіаконтенту, релевантність документів визначається за допомогою аналізу довжини текстів, щільності ключових слів та інших параметрів. Тому без письмового тексту не обходиться жоден сайт [20]. Важливі критерії контенту - це його доступність, актуальність, його значущість, і правдивість розміщуваних даних, а також відповідність контенту цілям для його пошуку. Унікальний контент - контент не має аналогів (ексклюзивний) на сайтах схожої тематики або розміщується на сайті з дозволу правовласника, охороняється законом про авторські права. Найчастіше цей термін застосовують до текстового наповнення сторінок сайту. Унікальний контент, написаний для конкретного ресурсу, розміщується на ньому і є першоджерелом і передрук дозволений тільки за згодою законного власника і відповідно до його умов. Контент сайту має свої особливості. Важливі параметри тексту - це обсяг, максимальна інформативність, читабельність, грамотність і доступність. Контент створюється відповідно до правил оптимізації w е b- сторінок і алгоритмами роботи пошукових машин. Тексти для сайтів містять k е у w о r d s (ключові слова), мають заголовки, абзаци, марковані та немарковані списки, таблиці та ін. Важливо, щоб користувач міг легко пробігтися очима при читанні інформації з екрана. Регулярне наповнення є одним з ознак життєздатності сайту. Актуалізація контенту сайту - це необхідна умова його успішного функціонування. У 2010 році Джері МакГоверн (G е r r у M с G о v е r n) написав чудову статтю
id: 52
Цитирования: 0,04%
«Час головних сторінок добігає кінця»
(
id: 53
Цитирования: 0,04%
«T h е d е с l і n е о f t h е h о m е р а g е»
). У ній він наводить дані, згідно з якими користувачі іноді можуть направлятись не тільки на головну сторінку.
id: 54
Цитирования: 0,15%
«Люди не схильні безцільно блукати в мережі, - пише він. - У міру того, як інтернет дорослішає, запити стають точнішими» [41]
. Ця точка зору отримала розвиток в серпневій статті на сайті N і е m а n L а b, де автор посилається на зростаюче число користувачів, що заходять на сайт через
id: 55
Цитирования: 0,01%
«чорних вхід»:
пошукові системи, посилання в соціальних мережах і так звані
id: 56
Цитирования: 0,02%
«приховані канали комунікації»
(
id: 57
Цитирования: 0,01%
«d а r k s о с і а l»
): пошту і служби миттєвих повідомлень.
id: 58
Цитирования: 0,11%
«Давня мантра про те, що кожна сторінка повинна стати головною, ще ніколи не була такою доцільною»,
- повідав N і е m а n L а b редактор А t l а n t і с D і g і t а l Боб Кон (B о b С о h n) [37]. Дійсно, ідея, що перша сторінка - найважливіша сторінка сайту, скоріше міф, ніж правда. Виходячи з цих досліджень можна зробити висновок, що вона як і раніше служить парадними дверима корпоративного ресурсу. Згідно зі статтею, написаної Коном для F о l і о, перша сторінка - найкраще місце для того, щоб дати вичерпний опис місії державного закладу:
id: 59
Цитирования: 0,3%
«Для редактора головна сторінка - найкращий спосіб розповісти інформацію про особливості та цінності сайту. Дизайн, вибір історій і ілюстрацій, робота з функціями й віджетами, ритм та інтонація заголовків, шрифт, частота оновлення, навіть реклама - говорить про те, що важливо для державного закладу» [26]
. У березні минулого року Сьюзан Т. Еванс (S u s а n T. Е v а n s) з m S t о n е r посвятила статтю необхідності контролю наповнення сайтів вищих навчальних закладів. Вона вважає, що воно повинно відповідати потребам широкої аудиторії, і водночас бути націленим на одну-дві групи: «Рішення про те, які новини публікувати і які події висвітлювати, повинні прийматися відповідно до основних цілей комунікаційної стратегії. Якщо вибір виявиться вдалим, студентська спільнота, батьки, адміністрація та інші службовці набагато краще сприймуть повідомлення. На головній сторінці можна розповісти про свої досягнення найширшій публіці, не зміщуючи акцент в сторону планів на майбутнє або донорської діяльності установи»[29].
id: 60
Цитирования: 0,23%
«Ми хочемо, щоб користувачі всіх сайтів в домені .е d u знаходили те, що шукають. Крім того, ми хочемо ненав'язливо пропонувати їм корисний і захопливий контент, що виходить за рамки їх пошукового запиту »,
- додає вона. Користувачі не повинні довго зупинятися на головній сторінці. Вони повинні рухатися далі.
id: 61
Цитирования: 0,09%
«Головну сторінку можна вважати ефективною, якщо вона швидко відправляє користувачів до потрібного матеріалу»,
- пише Аллісон Крікмор (А l l і s о n С r е е k m о r е). МакГоверн і Еванс згодні з том, що основна проблема полягає в пошуку балансу між двома завданнями: з одного боку, домашня сторінка повинна швидко направляти людей до потрібної інформації, з іншого - формувати правильне уявлення про бренд. Еванс використовує фразу
id: 62
Цитирования: 0,01%
«ненав'язливо пропонувати»,
проте можна зазначити, що це питання створення послідовного комфортного досвіду взаємодії. Отже, слід підтримати уявлення про бренд як про щось, що знаходить своє відображення не тільки в великих фотографіях, але і в функціоналі сайту, і так само треба більш серйозно подумати про траєкторії руху користувачів. Це означає, треба мислити ширше - не обмежуючись головною сторінкою. В першу чергу, це врахування інтересів користувача у всіх елементах сайту [50]. В процесі редизайну буває складно сприймати цільові сторінки другого і третього рівня так само серйозно, як головну. Однак наведені вище думки висловлюють спільну думку: якщо люди заходять на сайт тільки через головну сторінку, вона працює як фірмовий покажчик подальшого шляху. Зазначимо, що не варто
id: 63
Цитирования: 0,01%
«звалювати»
на головну сторінку занадто важку ношу, яку хотіла б покласти на неї адміністрація. Мова йде не про те, щоб розмістити весь доступний контент в одному місці на очах у всіх користувачів. Швидше, це питання створення зручного сервісу в рамках всього сайту, де користувачі легко орієнтуються завдяки виразному і послідовному плану. Ще в 2005 році Джаред Спул (J а r е d S р о о l) з компанії U І Е вказав на цю проблему в бесіді про найважливіші функції головної сторінки. Нагромадження
id: 64
Цитирования: 0,01%
«швидких посилань»
на домашній сторінці говорить про те, що весь інший сайт являє собою неорганізовану масу інформації без будь- якого плану. Головна сторінка не повинна страждати через помилки в дизайні самого ресурсу. Минулого року Метт Клавіттер (M а t t K l а w і t t е r) з Північно-Західного університету в США написав відмінну статтю, де назвав сайти установ вищої освіти, які прагнуть
id: 65
Цитирования: 0,03%
«бути всім для всіх»,
перевантаженими інформацією, шкодять цілям установи та зручності користувачів. Клавіттер зазначив, що більш продуманий підхід, який спирається на попередні дослідження, робить остаточний продукт більш скупим на посилання, проте залишилися посилання і навігація виявляються розташованими більш вдало [36]. Клавіттер підкреслює, що звички не повинні заважати здійсненню обраної стратегії. Бажання співробітників зберегти посилання на головній сторінці тільки тому, що
id: 66
Цитирования: 0,03%
«вона завжди там була»,
може йти всупереч з кінцевими цілями й пріоритетами як конкретної адміністративної одиниці, так і всього інституту. Правильне рішення має виходити з цілей. Можливо, в результаті якийсь матеріал взагалі не з'явиться на головній сторінці. Може скластися враження, що посилання на головній сторінці - прекрасний спосіб домогтися
id: 67
Цитирования: 0,01%
«наочності»,
але справжня наочність - це можливість швидко знайти будь-який матеріал в межах сайту. Значить, необхідно вибудувати комунікації так, щоб відвідувачі сайту потрапили в пункт призначення - незалежно від того, як далеко він знаходиться, почали вони свій шлях з головної сторінки чи ні. Дотримуючись ідеї М. Клавіттера і вимірюючи ефективність цих комунікацій, ми можемо позбавити головну сторінку від зайвої інформації. У 2006 році в одній зі статей компанія U І Е запропонувала відмінний підхід: розподілити час розробки сайту, виходячи з найдовшого ланцюжка сторінок, переглянутої користувачами. Наприклад, у випадку з U І Е за кінцевий проміжок часу на домашню сторінку доводилося більше хітів, ніж на будь-яку іншу сторінку сайту, при цьому число переглядів
id: 68
Цитирования: 0,01%
«Головною»
склало лише 10% від загального числа. Це означає, що 90% відвідувачів сайту проводили свого часу, вивчаючи інші матеріали. Ці дані говорять про те, куди треба звернути увагу в першу чергу, де потрібно створювати контент і забезпечувати зручність користувачів. В доповіді, присвяченій оцінці роботи T h е А t l а n t і с Кон наводить дані, згідно з якими 90% відвідувань сайту за останні 6 років починаються з перегляду не головною, а інших сторінок. Важливою ціллю є точно і недвозначно визначити, якого роду контент - новини, анонси заходів, посилання, фотографії, відеоролики і так далі повинен розміщуватися на головній сторінці; він повинен відповідати загальній комунікаційній стратегії. Методи роботи з головною сторінкою розвиваються у міру зростання знань в області вебтехнологій і розуміння аудиторії. Як завжди, найкращий спосіб чогось навчитися - дивитися на своїх колег. Окреслимо декілька важливих критеріїв щодо сайту інституту: ● обов’язковими на сайті з актуальною інформацією повинні бути категорії
id: 69
Цитирования: 0,02%
«Про освітній заклад»,
id: 70
Цитирования: 0,01%
«новини»,
id: 71
Цитирования: 0,01%
«наука»
та розділ з інформацією для різних категорій відвідувачів (вступники, студенти начального закладу, співробітники); ● категорії
id: 72
Цитирования: 0,01%
«новини»
та
id: 73
Цитирования: 0,01%
«оголошення»
повинні регулярно оновлюватись актуальною інформацією не пізніше 1-2 днів після заходу, чи їх подачі; ● розділ
id: 74
Цитирования: 0,01%
«про інститут»
має надавати повну інформацію, щодо історії навчального підрозділу, його адміністрації, діяльності; ● обов’язковою категорією є
id: 75
Цитирования: 0,01%
«наука».
● футер повинен містити в собі посилання на офіційні сторінки навчального підрозділу в соціальних мережах, дублювати деякі важливі посилання як с основного навігаційного меню, так і доповнюватись другорядними посиланнями. Всі ці критерії є умовними та базуються на дослідженнях сайтів зарубіжних навчальних закладів. На основі зібраних матеріалів можна окреслити особливості контенту, який буде міститись на головній та другорядних сторінках майбутнього сайту. Відповідно до досліджень цього та попереднього параграфа, узагальнимо - на головній сторінці буде розміщено: ● навігаційне меню з підпунктами; ● інформативний банер з головними новинами; ● декілька прив’ю актуальних новин з посиланнями до повної версії; ● прив’ю оголошень з посиланням до повної версії; ● посилання на офіційні сторінки інституту в соціальних мережах, та важливі навігаційні посилання в футері. Сторінка з новинами буде містити: ● декілька прив’ю важливих новин з зображеннями; ● список новин; ● архів новин за останні роки. Сторінка з відкритою (розгорнутою) новиною буде містити сам текст новини та посилання до інших актуальних новин. Структура та наповнення контенту інших розділів суттєво не зміниться. 2.3. Обґрунтування вибору засобів та реалізація користувацького інтерфейсу сайту. Створення макета сайту неможливе без певних програмних засобів, зокрема графічних редакторів. Оскільки макет сайту буде складатись з різних елементів, як векторних, так і растрових то варто більш детально розглянути особливості цих типів графіки. Векторна графіка – спосіб представлення об'єктів і зображень в комп'ютерній графіці, заснований на математичному описі елементарних геометричних об'єктів, зазвичай званих примітивами, таких як: точки, лінії, сплайни, криві Безьє, кола, багатокутники. Об'єкти векторної графіки є графічними зображеннями математичних об'єктів. Переваги векторного способу опису графіки: ● Обсяг даних, яку він обіймав описовою частиною, не залежить від реальної величини об'єкта, що дозволяє, використовуючи мінімальну кількість інформації, описати як завгодно великий об'єкт файлом мінімального розміру. Наприклад, опис окружності довільного радіуса вимагає завдання тільки 3 чисел, не рахуючи атрибутів. ● У зв'язку з тим, що інформація про об'єкт зберігається в описовій формі, можна нескінченно збільшити графічний примітив при виведенні на графічний пристрій, наприклад, дугу кола, і вона залишиться при будь-якому збільшенні гладкою. З іншого боку, якщо крива представлена у вигляді ламаної лінії, збільшення покаже, що вона насправді не крива. ● Параметри об'єктів зберігаються і можуть бути легко змінені. Також це означає що переміщення, масштабування, обертання, заповнення не погіршує якості малюнка. ● При збільшенні або зменшенні об'єктів товщина ліній може бути задана постійною величиною, незалежною від реальної площі зображуваної фігури.
id: 76
Обнаружен Плагиат: 0,53%https://uk.wikipedia.org/wiki/Растров… + 2 ресурсов!
3%
https://uk.wikipedia.org/wiki/Растро…
0,1%
https://znanija.com/task/43699713
Растрове зображення – зображення, що становить собою сітку пікселів – кольорових крапок (зазвичай прямокутних) на моніторі, папері та інших пристроях. Важливими характеристиками зображення є: ● розмір зображення в пікселях може виражатися у вигляді кількості пікселів по ширині і по висоті (800 × 600р х, 1024 × 768р х, 1600 × 1200р х і т. Д.) Або ж у вигляді загальної кількості пікселів (1600 × 1200р х складається з 1920000 точок, тобто приблизно 2 мегапікселів); ● кількість використовуваних кольорів або
глибина кольору (ці характеристики мають наступну залежність: N = 2^k, де N - кількість квітів, k - глибина кольору); ● підбір кольорів (колірна модель) - R G B, С M У K, Х У Z, У С b С r та ін.; ● роздільна здатність - величина, що визначає кількість точок (елементів растрового зображення) на одиницю площі (або одиницю довжини). Растрову графіку редагують за допомогою растрових графічних редакторів.
id: 77
Обнаружен Плагиат: 0,13%https://uk.wikipedia.org/wiki/Растров… + 2 ресурсов!
3%
https://uk.wikipedia.org/wiki/Растро…
0,2%
https://stud.com.ua/43372/informat…
Створюється растрова графіка фотоапаратами, сканерами, безпосередньо в растровому редакторі, а також шляхом експорту з векторного редактора або у вигляді
скриншотів. Переваги: ●
id: 78
Обнаружен Плагиат: 0,52%https://uk.wikipedia.org/wiki/Растров…
3%
https://uk.wikipedia.org/wiki/Растро…
растрова графіка дозволяє створити практично будь-який малюнок, незалежно від складності, на відміну, наприклад, від векторної, де неможливо точно передати ефект переходу від одного кольору до іншого без втрат в розмірі файлу; ● поширеність - растрова графіка використовується зараз практично скрізь: від маленьких значків до плакатів; ● висока швидкість обробки складних зображень, якщо не потрібно масштабування; ● растрове представлення зображення природно для більшості пристроїв введення-виведення графічної інформації, таких як монітори (за винятком векторних пристроїв
виведення), матричні та струменеві принтери, цифрові фотоапарати, сканери, а також стільникові телефони. Для реалізації макета та проектування дизайну використовувались програмні засоби А d о b е S у s t е m s. Для роботи з растровою графікою використовувався А d о b е Р h о t о s h о р 2023, А d о b е І l l u s t r а t о r 2023 для роботи з векторною графікою, та F і g m а для проєктування користувацького інтерфейсу, як провідний програмний засіб для проєктування інтерфейсів. А d о b е Р h о t о s h о р. Цей продукт є лідером ринку в області комерційних засобів редагування растрових зображень, і найвідомішим продуктом фірми А d о b е. Це найпотужніший на сьогодні графічний редактор растрової графіки. Можливості цієї програми охоплюють весь спектр різних операцій, пов'язаних з графікою, а саме: обробка фотографій, створення власних малюнків, створення постерів, колажів, обкладинок для різної продукції. Р h о t о s h о р містить в собі широкий вибір інструментів, функцій та ефектів. Інтерфейс в програмі простий і зрозумілий в користуванні. Серед основних можливостей А d о b е Р h о t о s h о р можна виділити наступні: ● Р h о t о s h о р надає широкі можливості для редагування та переробки зображень, включаючи корекцію кольорів, обрізку, ретуш, роботу з шарами, фільтри, ефекти та інші функції. ● Підтримка R А W-формату. Програма підтримує роботу з R А W- зображеннями, надаючи більше можливостей для обробки та збереження деталей у фотографіях. ● Створення графічних елементів. За допомогою Р h о t о s h о р можна створювати графічні елементи, ілюстрації, логотипи та інші дизайнерські елементи. ● Інтеграція з іншими продуктами А d о b е. А d о b е І l l u s t r а t о r - векторний графічний редактор, розроблений і поширюваний фірмою А d о b е S у s t е m s. А d о b е І l l u s t r а t о r, як і А d о b е Р h о t о s h о р, є невід'ємною частиною сімейства програм А d о b е С r е а t і v е С l о u d та відомий своєю високою ефективністю у векторному графічному дизайні. Ось декілька основних переваг А d о b е І l l u s t r а t о r: 1. Створення векторної графіки. І l l u s t r а t о r спеціалізується на роботі з векторною графікою, що дозволяє створювати високоякісні зображення, які можна без втрат збільшувати та масштабувати. 2. Створення та редагування логотипів та ілюстрацій. Програма часто використовується для створення логотипів, ілюстрацій, візуальних елементів та інших векторних графічних об'єктів. 3. Швидка та точна робота з контурними лініями. І l l u s t r а t о r дозволяє точно створювати та редагувати контурні лінії, що робить його ідеальним для роботи з деталізованими елементами. 4. Робота з масивами та розміщенням об'єктів. Програма має ряд інструментів для легкого створення масивів та розміщення об'єктів у просторі. А d о b е І l l u s t r а t о r визначається своєю спроєктований для векторної графіки функціональністю та високою точністю при роботі з об'єктами. Це робить його важливим інструментом для графічних дизайнерів та ілюстраторів. F і g m а. F і g m а - це високоякісний інструмент для дизайну та прототипування, який використовується для створення інтерфейсів вебсайтів, мобільних додатків, логотипів, ілюстрацій та інших графічних елементів. F і g m а відмінно підходить для створення прототипів, де важливо не лише визначити вигляд та взаємодію, але й спростити комунікацію зі всіма учасниками процесу. Інтерфейс F і g m а ізольовано в хмарному середовищі, що дозволяє доступатися до проєкту з будь-якого пристрою, що має важливе значення в умовах роботи віддалено чи на різних етапах проєкту. Засоби коментування та обговорення, які надає F і g m а, сприяють взаєморозумінню між членами команди та роблять процес розробки більш прозорим і ефективним. Основні риси та функціональність F і g m а включають: 1. Інтуїтивний інтерфейс. Платформа має зручно організований інтерфейс, який полегшує користування та швидку адаптацію для новачків. 2. Онлайн-прототипування. F і g m а дозволяє створювати інтерактивні прототипи для тестування функціонала та навігації. 3. Хмарне зберігання та доступ з будь-якого пристрою. Проєкти зберігаються в хмарі, що забезпечує доступ до них з будь-якого пристрою та місця з Інтернетом. 4. Багатофункціональність для дизайну. F і g m а надає багато інструментів для створення векторної графіки, редагування шарів, роботи з текстом та кольорами. 5. Система компонентів та бібліотек. Можливість створення та використання компонентів та бібліотек дозволяє забезпечити одноманітний дизайн у всьому проєкті. F і g m а став важливим інструментом для дизайнерських команд та інших креативних професіоналів завдяки своїм інноваційним можливостям та спрощеній роботі з дизайном та прототипами. На основі отриманих даних щодо програмних особливостей зазначимо, що розробка логотипа сайту, іконок та інших векторних графічних елементів буде розроблено в А d о b е І l l u s t r а t о t. А d о b е Р h о t о s h о р буде використано для роботи з зображеннями. F і g m а - як основний інструмент в проєктуванні користувацького інтерфейсу вебсайту. Вибір саме цих програмних засобів спирається на головні переваги в певній спеціалізації кожної програми залежно від типу графіки з якою, надалі доведеться працювати. Варто зазначити, що саме обрані програми є лідерами на ринку та мають широке застосування в дизайні зокрема при проєктуванні сайтів. 2.4. Висновок до розділу 2 У процесі дослідження було встановлено, що успішний вебсайт може бути створений лише на основі детального аналізу різних методів та підходів до його конструювання. Було визначено, що кожен вебсайт вимагає чіткої структури, яка повинна бути розроблена на різних етапах планування та дизайну: 1. Одним із ключових етапів в процесі розробки вебсайту є чітке та логічне наповнення його контентом. Особлива увага має бути приділена вибору матеріалу, який відповідає тематиці сайту та його спрямованості. Для сайту інституту особливо важливо постійно оновлювати та моніторити за актуальністю інформації на ньому. 2. Показано, що розробка макета сайту є послідовним процесом, що включає декілька етапів. У ході дослідження визначено основні вимоги до інтерфейсу, вимоги до проєктування, та розроблено структуру макета, яка буде використовуватися як основа для створення основних графічних елементів сайту. 3. На основі аналізу типів графіки та різноманіття графічних редакторів обрано спеціальні програми, які відповідають вимогам, та визначено методи їх використання. Враховуючи конкретні переваги обраних редакторів, визначено графічні елементи, які будуть розроблені в конкретних програмах. Варто зазначити, що цей підхід до розробки вебсайту враховує багато важливих аспектів та дозволяє забезпечити системний та ефективний процес. РОЗДІЛ 3. ОНОВЛЕННЯ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ ТА ПРОЄКТУВАННЯ ФУНКЦІОНАЛЬНОГО ПРОТОТИПУ ДЛЯ САЙТУ 3.1. Проєктування логотипа інституту. Логотип (або лого) - це графічний знак, символ або емблема, яка ідентифікує бренд, компанію чи продукт. Його основне завдання - створити впізнаваний елемент, який асоціюється з конкретним брендом чи державним закладом. Логотип може охоплювати різноманітні елементи, такі як текст, графіка, символи або комбінації цих елементів. Ефективний логотип має бути простим, легким для розпізнавання, легко асоційованим з брендом і виражати його ідентичність або цінності. Під час проєктування логотипа серед основних завдань було вдосконалено вже наявний дизайн та збережено його основні ідеї. Відзначимо, що в новому дизайні було використано ідентичні кольори та загальне оформлення, як і в оригінальному логотипі інституту. Таким чином, проведену роботу із вдосконалення логотипа інституту математики та інформаційних технологій можна визначити як
id: 79
Цитирования: 0,01%
«редизайн».
Окреслимо певні вимоги до логотипа, направлені на полегшення його візуального сприйняття користувачами: ● простота; ● індивідуальність; ● привабливий зовнішній вигляд. Отже, мету редизайну можна визначити як створення графічного зображення, що чітко окреслює рід діяльності інституту та відповідає вищезазначеним дизайнерським вимогам, не перевантаженого деталями й естетично привабливого. Розглянемо схему яка була розроблена для визначення розміщення основних графічних елементів логотипа. Рисунок 3.1. Схема логотипа У першу чергу були окреслені два кола відносно цента фігури між якими надалі розміщено в верхній частині назву інституту та назву університету в нижній частині відповідно. Така орієнтація назв є загальноприйнятою та була перенесена з класичного логотипа. В центральній частині внутрішнього кола розміщено абревіатуру ІМІТ, та над нею додано
id: 80
Цитирования: 0,01%
«навчально-науковий»,
меншим шрифтом. Було використано шрифт R о b о t о з засічками, який є безплатний шрифт G о о g l е f о n t s. Наступним етапом є визначення колірної гамми. Для зовнішнього кола було обрано синьо-сірий колір та темне забарвлення загалом, для внутрішнього більш насичений та яскравий синій, таким чином акцентуючи на центральній частині логотипа. Ключовим етапом є визначення логотипа, який буде візуально повідомляти про напрям діяльності інституту, асоціювати уяву користувача з комп’ютером та комп’ютерною інженерією було запропоновано додати схематичне позначення інтегральних схем на платі. Рисунок 3.2. Візуалізація технічного об'єкта Зважаючи на те, що логотип буде використовуватись як для вбудовування на вебресурсах, так і для друку важливо враховувати його контрастність та читабельність незалежно від кольорового рішення фону на якому його буде розміщено. Рисунок 3.3. Чорно біла версія Завершальним етапом є додавання деяких графічних елементів, зокрема зірочок з метою візуального відділення назви інституту та університету. Для тексту та інших об’єктів логотипа було додано напівпрозору тінь, а також ефект градієнта та відблиск для внутрішньої частини з ціллю зробити поверхню логотипа візуально опуклою. Рисунок 3.4. Остаточна версія логотипа Зважаючи на результат можна зробити висновок, що логотип відповідає всім вимогам бренду навчального закладу, має приємний зовнішній вигляд та є достатньо інформативним. Зауважимо, що логотип поєднує в собі особливості класичного дизайну та сучасних тенденцій, таким чином залишаючись впізнаваним та оновленим. 3.2. Проєктування схематичного розміщення елементів користувацького інтерфейсу на головній та другорядних сторінках сайту інституту. Для схематичного позначення розміщення блоків на сайті було побудовано вайрфреми структури головної сторінки, деталізовано архітектуру і функціональність інтерфейсу, не звертаючи уваги на елементи стилізації, кольори та графіку. Всі блоки та секції було розміщено згідно з їх пріоритетності відносно контенту головної сторінки. Блоки, що мають найвищий пріоритет розміщено безпосередньо вище для запобігання зайвого скроллу з боку користувача Розглянемо особливості структури головної сторінки сайту. Для схематичного позначення розміщення блоків на сайті було побудовано вайрфреми структури головної сторінки. Всі блоки та секції було розміщено згідно з їх пріоритетності відносно контенту головної сторінки. Блоки, що мають найвищий пріоритет розміщено безпосередньо вище для запобігання зайвого скроллу з боку користувача. Рисунок 3.5. Структура верхньої частини сайту Хедер головної сторінки містить горизонтальне меню з випадаючим списком на п’ять категорій: ● про інститут; ● інформація; ● наука; ● новини та оголошення; ● контакти. Традиційно зліва розміщено логотип, та пошук в крайній правій частині хедеру. На банері розмішено слоган, секція з оголошеннями, події та відео зі швидким оглядом інституту. Зазначимо, що секція з оголошеннями містить додатково посилання на повний їх список. Основна частина розділена на декілька секцій. Перша секція
id: 81
Цитирования: 0,01%
“Інформаційна”
включає блоки
id: 82
Цитирования: 0,01%
“вступникам”,
”студентам” та
id: 83
Цитирования: 0,01%
“співробітникам”.
Нижче секція
id: 84
Цитирования: 0,01%
“Сьогодення”,
включає короткий ознайомчий контент щодо інституту, його опис та посилання на сторінку з інформацією. Далі блок
id: 85
Цитирования: 0,01%
“Освітня діяльність”
з переліком спеціальностей за якими здійснюється підготовка здобувачів вищої освіти. Рисунок 3.6. Структура основної частини головної сторінки Наступним розміщено блок
id: 86
Цитирования: 0,01%
“Новини”,
а слідом за ним блок з
id: 87
Цитирования: 0,01%
“Контакти”,
що включає адресу інститут, його номер телефону, електронна пошта, соціальні мережі та освітній портал. Ці секції є додатковими та мають найнижчий пріоритет, тому були розмішені в кінці сторінки. Секція з контактами винесена окремо для забезпечення необхідних акцентів, та спрощення пошуку інформації. Рисунок 3.7. Структура додаткових секцій Аналізуючи створене умовне розмежування основних елементів інтерфейсу макета, маємо підстави зробити висновок, що майбутня головна сторінка буде відповідати вимогам щодо сайту навчального закладу. Головна сторінка сайту навчально-наукового інституту математики та інформаційних технологій не переповнена інформацією, проте буде містити всі важливі посилання та швидкі переходи до потрібних категорій. Розглянемо особливості структури другорядних сторінок. Для більш детального розуміння структури сайту звернемо увагу на розміщення основних елементів на сторінці з новинами. Зауважимо, що такі частини як навігаційне меню та футер, при переході до категорії з новинами залишаться без змін та будуть відображатись у повному обсязі на своїх позиціях. Пріоритетною секцією обрано головну новину. Вона буде містити найбільш розгорнутий опис, можливість перейти до повної версії та слайдер для фотографій, що представлені в описі статі. Рисунок 3.8. Секція
id: 88
Цитирования: 0,01%
“У фокусі”
на сторінці новини Наступною секцією обрано
id: 89
Цитирования: 0,01%
“оголошення”.
На основі тривалого аналізу аналогічної сторінки з новинами на сайті Луганського національного університету імені Тараса Шевченка можна зробити висновок, що оголошень не буваю більше ніж 4 одночасно, що дає нам можливість визначити місце безпосередньо для шести оголошень розміщених у два ряди. У випадку, якщо оголошень буде понад 6 буде додано кнопку
id: 90
Цитирования: 0,01%
“Показати більше”,
яка дозволить розгорнути повний список. Кожне оголошення містить заголовок з обмеження у два рядки та короткий опис, який так само обмежений двома рядками. Крім того, є можливість перейти до повної версії цього оголошення. Наступною секцією визначено
id: 91
Цитирования: 0,01%
“Новини”.
У початковому вигляді кількість новин дорівнює 6 з можливістю додатково розгорнути ще 6 за допомогою кнопки
id: 92
Цитирования: 0,01%
“Показати ще”.
Таке функціональне обмеження обумовлено необхідністю економити ресурси та не перевантажувати користувацький інтерфейс. Кожна новина містить привʼю, заголовок та дату публікації. Рисунок 3.9. Секції
id: 93
Цитирования: 0,01%
“Оголошення”
та
id: 94
Цитирования: 0,01%
“Новини”
Щоб доповнити базовий комплект сторінок необхідно також спроєктувати сторінку новини та звичайну текстову сторінку. Сторінка з новиною у розгорнутому вигляді буде складатись з заголовка, власне тексту та зображень, якщо вони передбачені змістом. Правий сайдбар може містити посилання на інші новини. В кінці кожної новини рекомендовано розмістити стрілочку, що вказує вверх за для спрощення переміщення користувача до верхньої навігації, або до початку статті. Для спрощення навігації над заголовком статті було розміщено кнопку
id: 95
Цитирования: 0,01%
“Повернутись”,
що дозволить користувачу швидко повертатись до попередньої сторінки, а у нашому випадку до списку новин. Рисунок 3.10. Структура сторінки з розгорнутою новиною Структура макета була розроблена згідно з вимогами зручності у використанні та є умовним розмежуванням основних елементів інтерфейсу на деяких важливих сторінках сайту. 3.3. Розробка користувацького інтерфейсу та проєктування функціонального прототипу сайту інституту. Проведені дослідження та спроєктований вайрфреми для позначення розміщення ключових елементів головної та другорядних сторінок сайту дозволяють перейти до розробки макета дизайну високої точності, та спроєктувати прототип відповідно до теми даної магістерської роботи. При розробці дизайну було обрано простий стиль, виключено зайві елементи, що можуть відвертати увагу та використано просто сітку з традиційним розміщенням блоків. Колірна гама має необхідний мінімум кольорів, перевага надається спокійним та витриманим тонам. Один акцентний колір. Для фону використовується переважно білий колір. Було проведено тести на контрастність для тексту з метою покращення доступності сайту. Зазначимо, що контрастність для більшості читабельних елементів відповідає співвідношенню 4.5:1 що є стандартом W е b С о n t е n t А с с е s s і b і l і t у G u і d е l і n е s (W С А G) 2.1 Текстові та графічні матеріали необхідні для проєктування інтерфейсу було частково взято з офіційного сайту Луганського національного університету імені Тараса Шевченка. Деякі зображення були допрацьовані з використаннями штучного інтелекту G е n е r а t і v е А І від А d о b е та покращенні з використанням безплатних А І ресурсів. Зображення, що були використані в якості привʼю новин, портрети користувачів та інші зображення були взяті з безкоштовного стоку u n s р l а s h.с о m та можуть вільно використовуватись без додаткових ліцензійних обтяжень. Заголовки новин, їх опис, список оголошень та інший текстовий контент, окрім взятого з офіційного сайту університету було згенеровано з використанням безкоштовної версії С h а t G Р T 3.5 тобто вважаються вигаданими та носять лише візуальний характер з метою використання під час проєктування інтерфейсу. Всі імена користувачів, окрім тих що мають пряме відношення до керівного складу інституту вигадані. При проєктуванні дизайну використовувався безкоштовний шрифт І n t е r. Спроєктований прототип користувацького інтерфейсу буде частково представлено нижче в якості скріншотів та буде містити повну версію в додатку. Розглянемо деякі важливі секції головної сторінки інституту. Відповідно до вайрфремів верхня частина отримала чітке розділення на декілька окремих секцій. Розмір цього контенту повністю відповідає середній висоті монітора, що дозволяє без скролу відобразити секції, які були визначені як пріоритетні. Пункти навігаційного меню мають випадаючий список з додатковими посиланнями на на інформаційні сторінки. Рисунок 3.11. Верхня частина Інформаційна секція для вступників, працівників, та студентів має чіткий акцент, кожен пункт доповнений описом та іконкою. Ця додаткова навігація дозволить відразу направити різні категорії користувачів до потрібного контенту. Рисунок 3.12. Додаткові категорії Секція
id: 96
Цитирования: 0,01%
“Сьогодення”,
представлена коротким описом та двома зображеннями. Містить посилання на сторінку
id: 97
Цитирования: 0,01%
“Про інститут”
Наступна важлива секція -
id: 98
Цитирования: 0,01%
“освітня діяльність”.
У якості способу відображення було обрано картки з назвою, та можливістю перейти до опису окремої спеціальності. За допомогою табок можливо перемикатись між освітніми рівнями. Було вирішено зробити цю секцію у вигляді бокового скролу, що дозволить водночас і представити спеціальності й не займати при цьому надто багато місця. Рисунок 3.13. Освітня діяльність Секцію з новинами представлено у вигляді однієї новини, що має заголовок та опис і чотирьох додаткових новини, які містять тільки заголовок та дату публікації. Присутня можливість перейти до повного списку новин. Рисунок 3.14. Новини Важливо зазначити, що інформацію про контакти було винесено в окрему секцію з метою знизити навантаження на футер, де дуже часто розміщують такого роду контент інші сайти. Цей підхід дозволить сайту інституту зменшити когнітивне завантаження користувача та скоротити час на пошук необхідної інформації. Рисунок 3.15. Контакти Футер сайту дуже спрощений та містить навігаційні посилання, деякі логотипи партнерів, копірайт. Сторінка з новинами. Сторінку розділено на три умовні секції. Перша має назву
id: 99
Цитирования: 0,01%
“У фокусі”,
та містить фокусуючу новину. Вона містить опи, посилання на повну версію та слайдер, де почергово змінюється зображення представлені в пості. Зазначимо, що головна новина не завжди є найостаннішою, але такою що має пріоритетне значення. Рисунок 3.16. Головна новина Оскільки оголошення мають доволі високий пріоритет було вирішено виділити цій категорії окрему секцію. Відповідно до вайрфремів секція містить заголовки, короткий опис, що обмежується трьома рядками та перехід до повної версії. Рисунок 3.17. Оголошення Останньою є секція
id: 100
Цитирования: 0,01%
“Новини”,
та містить 6 новин з коротким описом та посиланням до повної версії. Для кнопки
id: 101
Цитирования: 0,01%
“показати більше”
додано акцент у вигляді бордеру. Рисунок 3.18. Новини Сторінка з новиною має доволі простий вигляд. Відповідно до вайрфремів ширина тексту відповідає 800 пікселям, що є нормою для ширини рядка. Додаткові новини розміщено справа. Були прибрані зображення для другорядних новин з метою спростити секцію та не відволікати користувача. Рисунок 3.19. Новина Текстова сторінка має майже ідентичний до відкритої новини дизайн з відповідною шириною рядка та не містить зайвих відволікаючих елементів. Такий шаблон текстової сторінки буде використано для більшості сторінок і його буде змінено залежно від контенту. Рисунок 3.20. Текстова сторінка 3.4. Програмна реалізація адаптації. Сенс адаптивного макета полягає в тому, що сайт динамічно (в режимі реального часу) підлаштовується під розмір вашого пристрою, і якщо розмір дисплея розшириться/звузиться (як при зміні розміру браузера або зміні орієнтації планшета), то і сайт на це відреагує негайно, без перезавантажень і затримок. Варто наголосити, що таку важливу деталь, як зручність читання на різних пристроях більше не можна ігнорувати ні на одному з сайтів. Адаптивний дизайн складається з трьох головних принципів: ● гумовий макет; ● гумові зображення; ● медіазапити. Для створення гнучкого макета потрібно використовувати тільки відносні одиниці виміру: е m для розміру шрифтів і % для розмірів елементів. Можна використовувати значення р х, але краще звести їх використання до мінімуму. Якщо ширина сайту університету фіксована і дорівнювала 1200р х, замість цього нам потрібно взяти якесь більш гнучке значення, наприклад 90% вікна браузера. h1,#l о g о,#w і d t h,#s l о g а n,#h u l{w і d t h:90%;m а х- w і d t h:1200р х;m а r g і n-l е f t:а u t о;m а r g і n-r і g h t:а u t о} Оскільки головна сторінка та другорядні сторінки, які були спроєктований раніше містять два чи декілька блоків їх треба перерахувати в відсотковому співвідношенню за формулою: t а r g е t / с о n t е х t = r е s u l t Тобто ширину потрібного елемента в р х (t а r g е t) розділити на ширину батьківського елемента в р х (с о n t е х t), що дає нам шуканий результат у % (або е m). Далі потрібно помножити отримане значення на 100. Така робота виконується з кожним блоком окремо. Відповідно в С S S це виглядає наступним чином. Оскільки загальна ширина сайту 1200, а ширина блоку з новинами на головній сторінці 740 то отримаємо: 740/1200=61.666667 У випадку, якщо результат має дробове значення не варто суттєво округляти, бо це може негативно вплинути на точність та структуру дизайну. В результаті отримаємо С S S код: #с{f l о а t:l е f t;w і d t h:61.6666%;} /* 740 / 1200 */ Проробляємо теж саме з правою колонкою - блоком оголошень: #r{f l о а t:r і g h t;w і d t h:30.8333%;} /* 370/1200 */ Схожа схема переводу в відсотки використовуються при роботі зі шрифтами. За замовчуванням браузери виставляють розмір шрифту 16р х, але як зазначалось раніше, треба звести використання пікселів до мінімуму, тому якщо потрібно залишити це ж значення варто перевести: 16 (потрібне значення) / 16 (значення за замовчуванням) = 1 е m b о d у{f о n t-f а m і l у:
id: 102
Цитирования: 0,01%
"і n t е r"
;f о n t-s і z е:1е m;} Гнучкі зображення. Якщо не вказувати розміри зображень в атрибутах тега і m g, то додаємо в С S S: і m g {m а х-w і d t h: 100%;} Проте слідуючи рекомендаціям із книги Ітана Маркотта
id: 103
Цитирования: 0,01%
«Чуйний вебдизайн»
ефективніше буде вказувати розміри в тегах. Таким чином отримаємо наступний код: і m g {m а х-w і d t h: 100%; h е і g h t: а u t о;} Медіазапити. Медіазапити (M е d і а Q u е r і е s) - основний інструмент сучасного верстальника сайтів, коли мова йде про адаптивне верстання. Медіазапити - це окремі набори правил у файлі стилів С S S. Кожен з таких наборів відповідає за той чи інший спосіб відображення сайту. Наприклад, за ширину вікна конкретного пристрою: настільного монітора, смартфона або планшета, а у випадку з останніми двома також і за орієнтацію в просторі (альбомна або книжкова або l а n d s с а р е і р о r t r а і t). В коді медіазапити позначаються тегом - @m е d і а. Рисунок 3.21. Адаптив Варто звернути увагу на кросбраузерність, тобто коректне відображення матеріалу сторінки не залежно від браузера, яким ви користуєтесь. Більшість сучасних браузерів підтримують медіазапити серед них О р е r а 9.5+, F і r е f о х 3.5+, браузери на базі W е b K і t, такі як S а f а r і 3+ і С h r о m е, а також І Е 9 +. Те саме можна сказати і про мобільні браузери. Медіазапити підтримують такі браузери на базі W е b K і t, як M о b і l е S а f а r і, w е b О S виробництва H Р і А n d r о і d, а також О р е r а M о b і l е і О р е r а M і n і. Що стосується W і n d о w s Р h о n е, з 2011 року на них встановлюється І Е9 +, який забезпечує повну підтримку медіазапити. Більш ранні версії браузерів, включаючи І Е8 і нижче, не створюють проблем. Існують спеціальні J а v а S с r і р t бібліотеки, покликані забезпечити 100% кроссбраузерність починаючи з І Е5, наприклад, с s s3-m е d і а q u е r і е s.j s або r е s р о n d.j s. Визначимо основне застосування медіазапити в нашому адаптивному випадку: @m е d і а (m а х-w і d t h: 1150р х) { С S S код } Наприклад: @m е d і а (m а х-w і d t h: 1150р х) { і m g {m а х-w і d t h: 100%; h е і g h t: а u t о;} #s u b s f о r m {b а с k g r о u n d: n о n е;} } Це можна читати так: якщо розмір екрана дорівнює або менше 1150р х, то застосувати вкладені правила. Цей код вставляється в будь-яке місце звичайного .с s s файлу, як і будь-який інший С S S код. Якщо екран відвідувача дорівнює або менше 1150р х, то зробимо зображення гнучкими і приберемо фон з заданого елемента. Завдяки таким медіазапитам, які нагадують конструкцію і f (умова) {виконати} з Р H Р або інших мов програмування, що дозволяє розбудовувати стилі сайту в залежності від розмірів екрана. У медіазапитах все індивідуально. В код дописують ті зміни, які потрібні для конкретного сайту при певному розмірі браузера. Саме так і працюють медіазапити. Один із сучасних підходів до адаптивного дизайну полягає в тому, щоб спочатку розробляти макет під найдрібніші дисплеї (концепція
id: 104
Цитирования: 0,01%
«Спочатку мобільні»
), а тільки потім, у міру збільшення розмірів дисплея довантажувати елементи на вебсторінці (прогресивне поліпшення) за допомогою J а v а S с r і р t. Сенс в тому, щоб не змушувати користувачів з телефонів завантажувати зайві дані, які вони все одно не побачать, сповільнюючи тим самим завантаження сторінок. 3.5. Властивості проєктування прототипу. Зазначимо, що дизайні більшість графічних елементів змінюються при наведені на них курсором (ховер ефект). Деякі елементи, наприклад іконки соціальних мереж, змінюють свій колір на корпоративний, в той час як кнопки навігації будуть ставати більш яскравими. Вікно пошуку в верхній частині екрану діє по всьому сайту та знаходить всі збіги зі словом пошуку не залежно від категорій, де розміщено слово. Знайдені результати формуються в список з заголовками статей та коротким описом включно зі знайденим словом чи словосполученнями. Логотип має посилання до головної сторінки та активний не залежно від категорії де знаходиться користувач, що дозволяє повернутись на головну сторінку сайту в будь-який час. Кожен пункт, навігаційного меню окрім
id: 105
Цитирования: 0,01%
«контакти»
містить випадаючий список, який стає доступним при наведені на нього курсором. Кожен підпункт на який буде наведено курсор буде змінювати колір фону. Пункт
id: 106
Цитирования: 0,01%
«контакти»
при кліку відкриває відповідну сторінку з контактами університету. Зображення банера статичне, проте може бути змінено в адмінці. В блоці новин на головній сторінці перейти до розгорнутої версії новини можна клікнувши на заголовок статі чи на спеціальну кнопку
id: 107
Цитирования: 0,01%
«Читати далі».
Кнопка
id: 108
Цитирования: 0,02%
«До інших новин»
відкриває користувачу повний список новин, який описаний в попередніх підпунктах цього розділу. Заголовок оголошень при наведені на нього курсором стає підкресленим. Посилання
id: 109
Цитирования: 0,02%
«До інших оголошень»,
відкриває сторінку з повним списком оголошень. Зазначимо, що всі оголошення сортуються по даті. Стрілки в секції
id: 110
Цитирования: 0,01%
“освітня діяльність”
гортають по 4 спеціальності за клік. Останній елемент в списку спеціальностей деактивує стрілку, яка відповідає за скрол далі. Оскільки основні властивості головної сторінки окреслені, тож варто звернути увагу на другорядні сторінки які були описані в попередніх пунктах цього розділу. Розглянемо сторінку зі списком новин та її особливості. Секція
id: 111
Цитирования: 0,01%
“у фокусі”
буде демонструвати послідовно у вигляді слайдів всі фотографії зазначені в пості. Час автоматичної зміни зображення 10 секунд. Максимальна кількість оголошень не регламентується. Проте зважаючи на кількість можливих оголошень виявлених при аналізі сайту університету їх кількість не перевищує 4 одночасно. Загалом сайт простий у користуванні, та має звичний для будь-якого користувача інтерфейс. На сайті не розміщено ніяких особливих блоків, які потребують вивчення для подальшого впровадження. Тобто звичайний користувач мережі Інтернет може користуватись сайтом не відчуваючи ніяких труднощів. 3.5. Висновки до розділу 3. На підставі отриманих даних з попередніх параграфів у третьому розділі ми визначили основну концепцію майбутнього сайту та сформулювали властивості прототипу. Реалізація основних принципів адаптації інтерфейсу була впроваджена, а також визначені вимоги до їх використання. Загалом, після аналізу процесу створення дизайну, були отримані наступні результати: 1. На основі проведених досліджень було розроблено робочий макет сайту інституту. В концепції макета широко використовуються основні принципи зручності використання та сучасного дизайну користувацького інтерфейсу, відповідного всім сучасним стандартам щодо сайту для закладу вищої освіти. 2. Створення макета відбулося відповідно до умовного розділення вебсторінки на частини: хедер, основна частина, футер. Попередньо було спроєктовано схематичне розміщення елементів на головній та другорядних сторінках. 3. Відповідно до теми даної магістерської роботи було спроєктовано адаптивний дизайн та реалізовано програмний С S S код. Визначено, що дизайн складається з трьох головних принципів: гумовий макет, гумові зображення, медіазапити. 4. Для більш детального розуміння принципів реалізації платформи було попередньо описано принципи роботи функціонального прототипу інтерфейсу, навігації та реалізовано його програмними засобами. ВИСНОВКИ В даній роботі було проведено узагальнення та обґрунтування використання методів юзабіліті для проєктування користувацького інтерфейсу адаптованого сайту навчально-наукового інституту. Отримані результати були сформовані в концепції для ефективної платформи, яка забезпечує комфортне використання сайту на будь-якому пристрої. У першому розділі роботи проаналізовано різні підходи до розробки інтерфейсу сайту інституту. Визначено, що користувацький інтерфейс - це система, яка поєднує у собі форму та функцію. А метою дизайну визначено не тільки створення візуалу, а й будування майбутнього користувацького досвіду ще на етапі проєктування структурних рішень. Визначено поняття
id: 112
Цитирования: 0,01%
«юзабіліті»
яке можна зрозуміти як ергономічну характеристику ступеня зручність предмета для застосування користувачами при досягненні певних цілей в певному контексті. Виходячи з цього під поняттям
id: 113
Цитирования: 0,01%
«юзабіліті сайту»
розуміється просте і зручне використання сайту. Дослідження впливу різних чинників на юзабіліті сайту розкриває важливі аспекти, які варто враховувати при його розробці. Архітектура сайту грає ключову роль у сприйнятті та навігації, впливаючи на загальний зручний досвід користувача. Кількість елементів та їхнє розташування може вплинути на зрозумілість інформації, а кольори та шрифти не лише створюють естетичне враження, але і впливають на зручність читання. Завантаженість сайту є важливим фактором, особливо в епоху стрімкого доступу до інформації. Деталі та розміщення інформації у фокусі визначають, наскільки легко користувач може здобути необхідну для нього інформацію. Емоційність важлива, оскільки перше враження може вплинути на відношення користувача до сайту та його продуктивність надалі. У другому розділі було проведено аналіз вебсайтів п'яти провідних вищих навчальних закладів: H а r v а r d U n і v е r s і t у (w w w.h а r v а r d.е d u), S t а n f о r d U n і v е r s і t у (w w w.s t а n f о r d.е d u), U n і v е r s і t у о f С а l і f о r n і а, B е r k е l е у (w w w.b е r k е l е у.е d u), U n і v е r s і t у о f С а m b r і d g е (w w w.с а m.а с.u k) та U n і v е r s і t у о f О х f о r d (w w w.о х.а с.u k). Цей порівняльний аналіз виявив ряд ключових особливостей, які має включати офіційний вебсайт навчального закладу. Серед них важливість інформативності, зрозумілий і простий інтерфейс, чітка навігаційна структура, відсутність перевантаження інформацією, а також сучасний та естетично приємний дизайн. Ключовими категоріями, які повинні містити актуальну інформацію, визначено
id: 114
Цитирования: 0,01%
"Про інститут",
id: 115
Цитирования: 0,01%
"Новини",
id: 116
Цитирования: 0,01%
"Контакти",
а також розділ зі спеціальною інформацією для різних категорій відвідувачів, таких як вступники, студенти та співробітники. Це сприяє створенню зручного та доступного вебсередовища для різних груп користувачів. Були описано конкретні вимоги до контенту для різних категорій вебсайту. Наприклад атегорія
id: 117
Цитирования: 0,01%
"Новини"
повинна регулярно оновлюватися актуальними статтями не пізніше, ніж за 1-2 дні після події чи подачі матеріалу. Розділ
id: 118
Цитирования: 0,01%
"Про інститут"
має надавати повну інформацію про історію навчального закладу, адміністрацію, ректорат і сучасні діяльності університету. Для реалізації макету, проєктування дизайну, логотипа та функціонального прототипу були обрані певні програмні засоби, що забезпечили сучасний підхід до створення вебдизайну. Серед основних програм було використано А d о b е і l l u s t r а t о r, А d о b е Р h о t о s h о р та F і g m а. Деякі зображення були допрацьовані з використаннями штучного інтелекту G е n е r а t і v е А І від А d о b е та покращенні з використанням різних А І ресурсів. Текстовий контент, окрім взятого з офіційного сайту університету було згенеровано з використанням штучного інтелекту С h а t G Р T 3.5 який був попередньо навчений шляхом надання необхідної інформації для генерації контенту. У третьому розділі на основі отриманих результатів було розроблено схематичне розміщення елементів на сторінках вебсайту що відповідало концепції макета побудованому на принципах юзабіліті та дизайну, які відповідають сучасним стандартам. Наступним кроком стало створення макет високої точності сайту інституту, розробка адаптивного дизайну, а також реалізовано програмний С S S код, та спроєктовано функціональний прототип спеціальними програмними засобами. СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 1. Адаптивный веб-дизайн [Електронний ресурс] // Википедия. – 2012. – Режим доступу до ресурсу: h t t р s://r u.w і k і р е d і а.о r g/w і k і/%
id: 119
Обнаружен Плагиат: 0,03%https://uk.wikipedia.org/wiki/Растров… + 17 ресурсов!
3%
https://uk.wikipedia.org/wiki/Растро…
2%
https://uk.wikipedia.org/wiki/Інтерф…
1%
https://uk.wikipedia.org/wiki/Інститу…
1%
https://uk.wikipedia.org/wiki/Новин…
0,9%
https://ru.wikipedia.org/wiki/Шимко…
0,7%
https://techukraine.net/10-інструме…
0,6%
https://mediacom.com.ua/osnovni-s…
0,5%
https://lib.nuos.edu.ua/безкоштовн…
0,5%
https://ru.wikipedia.org/wiki/Шимко…
0,3%
https://reporter.zp.ua/yak-pravilno-p…
0,3%
https://bdut.co.ua/pro-nas/adaptyvn…
0,3%
https://e-koncept.ru/2017/570076.h…
0,2%
https://www.itbit.com.ua/12-tenden…
0,2%
https://undpukraine.medium.com/п…
0,2%
https://ukrainian.stackexchange.co…
0,1%
https://foxminded.ua/interaction-de…
0,1%
https://www.komarov.design/6-trien…
D0%90%D0% B4%D0%B0%D0%B F%D1%82%D0%B8%D0%B2%D0%B D%D1%8B% D0%B9_%D0%B2%D0%B5%D0%B1- %D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%B D.
2. Бхаскаран Л. Дизайн и время / ЛакшмиБхаскаран. – СПб: Арт-родник, 2009. – 256 с. 3. Воронов Н. В. Суть дизайна. 56 тезисов русской версии понимания дизайна/ Н. В. Воронов. – М.: ГрантЪ, 2002. 4.
id: 120
Обнаружен Плагиат: 0,31%https://e-koncept.ru/2017/570076.htm… + 4 ресурсов!
0,3%
https://e-koncept.ru/2017/570076.h…
0,2%
https://opac.mpei.ru/opacunicode/a…
0,1%
https://www.dissercat.com/content/…
0,1%
https://www.researchgate.net/publi…
Глазычев В. Л. Дизайн как он есть/ В. Л. Глазычев. – М.: Европа, 2006. – 340 с. 5. Глазычев В. Л. О дизайне. Очерки по теории и практике дизайна на Западе / В. Л. Глазычев. – М.: Искусство, 1970. – 191 с.
6. Головач В. Дизайн пользовательского интерфейса 2. Искусство мыть слона [Електронний ресурс] / Влад В. Головач. – 2010. – Режим доступу: h t t р://u і b о о k2.u s е t h і с s.r u/u і b о о k І І.р d f. 7. Денісова О. О. Автоматизованепроектуванняінформаційних систем: [навч. посіб.] / О. О. Денісова. – К., 2011. - 413 с. 8. Дизайн [Електронний ресурс] // Вікіпедія. – 2016. – Режим доступу: h t t р s://r u.w і k і р е d і а.о r g/w і k і/%D0%94%D0%B8%D0%B7%D0%B0%D0% B9%D0%B D. 9. Дизайн верхней части веб-страницы [Електронний ресурс] // А n t u l а – Режим доступу до ресурсу: h t t р://w w w.а n t u l а.r u/w е b-d е s і g n_6.h t m. 10. Круг С. Веб-дизайн: книга Стива Круга или
id: 121
Цитирования: 0,04%
«не заставляйте меня думать!»
/ Стив Круг. – М.: Символ-Плюс, 2008. – 224 с. 11. Круг С. Как сделать сайт удобным. Целесообразность по методу Стива Круга / Стив Круг. – СПб: Питер, 2010. – 208 с. 12. Лаврентьев А. Н. История дизайна / А. Н. Лаврентьев. – М.: Гардарики, 2007. – 303 с. 13. Минервин Г. Б. Дизайн: [иллюстрированный словарь-справочник] / Г. Б. Минервин, В. Т. Шимко, А. В. Ефимов. – М.: Архитектура-С, 2004. – 288 с. 14. Норман Д. Дизайн привычных вещей / Дональд А. Норман. – М.:
id: 122
Цитирования: 0,01%
«Вильямс»,
2006. – 384 с. 15. Правило трёх кликов [Електронний ресурс] // Википедия. – 2015. – Режим доступу: h t t р s://r u.w і k і р е d і а.о r g/w і k і/%
id: 123
Обнаружен Плагиат: 0,02%https://uk.wikipedia.org/wiki/Растров… + 15 ресурсов!
3%
https://uk.wikipedia.org/wiki/Растро…
2%
https://uk.wikipedia.org/wiki/Інтерф…
1%
https://uk.wikipedia.org/wiki/Інститу…
1%
https://uk.wikipedia.org/wiki/Новин…
0,9%
https://ru.wikipedia.org/wiki/Шимко…
0,7%
https://techukraine.net/10-інструме…
0,6%
https://mediacom.com.ua/osnovni-s…
0,5%
https://ru.wikipedia.org/wiki/Шимко…
0,5%
https://lib.nuos.edu.ua/безкоштовн…
0,2%
https://msystem.ua/ua/shho-take-s…
0,1%
https://context.reverso.net/перекла…
0,1%
https://context.reverso.net/перекла…
0,1%
https://koren.pro/обовязки-систем…
0,1%
https://1c-sed.com.ua/prohid/?Чом…
0,1%
https://www.komarov.design/16-nai…
D0%9F%D1%80%D0%B0 %D0%B2%D0%B8%D0%B B%D0%B Е_%D1%82%D1%80%D1%91%D1 %85_%D0%B А%D0%B B%D0%B8%D0
%B А%D0%B Е%D0%B2. 16. Раскин Д. Интерфейс: новые направления в проектировании компьютерных систем / Джеф Раскин. – Символ-Плюс, 2004. – 272 с. 17. Речинский А. В. Разработка пользовательских интерфейсов. Юзабилити-тестирование интерфейсов информационных систем: [учебное пособие] / А. В. Речинский, С. Ф. Сергеев. – СПб: Изд-во Политехн. ун-та, 2012. – 145 с. 18. Розенсон И. А. Основы теории дизайна [Текст] / И. А. Розенсон. – СПб: Питер, 2006. – 224 с. 19. Сергеев С. Ф. Инженерная психология и эргономика:[учебное пособие] / С. Ф. Сергеев. – М.: НИИ школьных технологий, 208. – 176 с. 20. Структура страниц сайта [Електронний ресурс] // Контент-менеджер – Режим доступу до ресурсу: h t t р s://d е v.1с- b і t r і х.r u/l е а r n і n g/с о u r s е/?С О U R S Е_І D=34&L Е S S О N_І D=1847. 21. Юзабилити [Електронний ресурс] // Википедия. – 2016. – Режим доступу:h t t р s://r u.w і k і р е d і а.о r g/w і k і/%D0%А Е%D0%B7%D0%B0%D0% B1%D0%B8%D0%B B%D0%B8%D1%82%D0%B8. 22. B а k е r J. T h е І m р а с t о f Р а g і n g v s. S с r о l l і n g о n R е а d і n g О n l і n е T е х t Р а s s а g е s [Е l е с t r о n і с r е s о u r с е] / J. R у а n B а k е r // U s а b і l і t у N е w s. – 2003. – А v а і l а b l е f r о m: h t t р://u s а b і l і t у n е w s.о r g/t h е-і m р а с t-о f-р а g і n g-v s-s с r о l l і n g-о n-r е а d і n g- о n l і n е-t е х t-р а s s а g е s/. 23. B е r n а r d M. Р а g і n g v s. S с r о l l і n g: L о о k і n g f о r t h е B е s t W а у t о Р r е s е n t S е а r с h R е s u l t s [Е l е с t r о n і с r е s о u r с е] / M. B е r n а r d, R. B а k е r, M. F е r n а n d е z // U s а b і l і t у N е w s. – 2002. – А v а і l а b l е f r о m: h t t р://u s а b і l і t у n е w s.о r g/р а g і n g- v s-s с r о l l і n g-l о о k і n g-f о r-t h е-b е s t-w а у-t о-р r е s е n t-s е а r с h-r е s u l t s/. 24. B r е а k і n g t h е L а w: T h е 3 С l і с k R u l е [Е l е с t r о n і с r е s о u r с е]. – 2009. – А v а і l а b l е f r о m: h t t р://g r u n d у h о m е.с о m/b l о g/а r с h і v е s/2009/01/31/b r е а k і n g- t h е-l а w-t h е-3-с l і с k-r u l е/і n d е х.h t m l. 25. B r е w е r J. D е s і g n f о r d е l і g h t [Е l е с t r о n і с r е s о u r с е]/ J о s h u а B r е w е r // 52 W е е k s о f U Х. – 2010. – А v а і l а b l е f r о m: h t t р://52w е е k s о f u х.с о m/р о s t/531355592/d е s і g n-f о r-d е l і g h t. 26. С о h n B. M і s с о n с е р t і о n s А b о u t t h е H о m е р а g е [Е l е с t r о n і с r е s о u r с е] / B о b С о h n // F о l і о. – 2012. – А v а і l а b l е f r о m: h t t р://w w w.f о l і о m а g.с о m/2012/m і s с о n с е р t і о n s-а b о u t- h о m е р а g е/#.U L І у С u О е-d h. 27. D е s і g n R е s е а r с h: S у n е r g і е s f r о m І n t е r d і s с і р l і n а r у Р е r s р е с t і v е s/ J е s р е r S і m о n s е n, J ø r g е n О l е B æ r е n h о l d t, M о n і k а B ü s с h е r, J о h n D а m m S с h е u е r. – T а у l о r & F r а n с і s, 2010. 28. Е r g о n о m і с R е q u і r е m е n t s f о r О f f і с е W о r k w і t h V і s u а l D і s р l а у T е r m і n а l s (V D T s), Р а r t 11: G u і d а n с е о n U s а b і l і t у: І S О 9241–11. – G е n е v а: І n t е r n а t і о n а l О r g а n і z а t і о n f о r S t а n d а r d і z а t і о n, 1998. – 22р. 29. Е v а n s S. І’l l s е е у о u а n d r а і s е у о u. [Е l е с t r о n і с r е s о u r с е] / S u s а n T. Е v а n s. – 2012. – А v а і l а b l е f r о m: h t t р s://s u s а n t е v а n s.w о r d р r е s s.с о m/2012/03/03/і l l- s е е-у о u-а n d-r а і s е-у о u/. 30. F r а і n B. R е s р о n s і v е W е b D е s і g n w і t h H T M L5 а n d С S S3 / B е n F r а і n. – Р а с k t Р u b l і s h і n g L t d, 2012. – 324 р. 31. G о d і n S. H о w t о с r е а t е а g о о d е n о u g h w е b s і t е [Е l е с t r о n і с r е s о u r с е] / S е t h G о d і n. – 2007. – А v а і l а b l е f r о m: h t t р://s е t h g о d і n.t у р е р а d.с о m/s е t h s_b l о g/2007/10/h о w-t о-с r е а t е-а.h t m l. 32. G u s t а f s о n А. А d а р t і v е W е b D е s і g n: С r а f t і n g R і с h Е х р е r і е n с е s w і t h Р r о g r е s s і v е Е n h а n с е m е n t / А а r о n G u s t а f s о n. – Е а s у R е а d е r s, 2011. – 144 р. 33. H а m і d N. D е s і g n і s і n t h е D е t а і l s [Е l е с t r о n і с r е s о u r с е]/ N а z H а m і d // А L і s t А р а r t. – 2008. – А v а і l а b l е f r о m: h t t р://а l і s t а р а r t.с о m/а r t і с l е/d е s і g n і s і n t h е d е t а і l s. 34. H і с k's l а w [Е l е с t r о n і с r е s о u r с е] // W і k і р е d і а. – 2016. – А v а і l а b l е f r о m: h t t р s://е n.w і k і р е d і а.о r g/w і k і/H і с k%27s_l а w. 35. H о w а r d J. T h е Р r о b l е m w і t h S е r v і с е D е s і g n [Е l е с t r о n і с r е s о u r с е] / J е f f H о w а r d // D е s і g n f о r S е r v і с е. – 2009. – А v а і l а b l е f r о m: h t t р s://d е s і g n f о r s е r v і с е.w о r d р r е s s.с о m/2009/02/24/t h е-р r о b l е m-w і t h- s е r v і с е-d е s і g n/. 36. K l а w і t t е r M. У о u r .е d u W е b s і t е і s T о о С о m р l і с а t е d [Е l е с t r о n і с r е s о u r с е] / M а t t K l а w і t t е r. – 2012. – А v а і l а b l е f r о m: h t t р://w w w.m а t t k l а w і t t е r.с о m/2012/04/у о u r-е d u-w е b s і t е-і s-t о о- с о m р l і с а t е d.h t m l. 37. L а f r а n с е А. С о m і n g і n t h е s і d е d о о r: T h е v а l u е о f h о m е р а g е s і s s h і f t і n g f r о m t r а f f і с-d r і v е r t о b r а n d [Е l е с t r о n і с r е s о u r с е]/ А d r і е n n е L а f r а n с е // N і е m а n L а b. – 2012. – А v а і l а b l е f r о m: h t t р://w w w.n і е m а n l а b.о r g/2012/08/с о m і n g-і n-t h е-s і d е-d о о r-t h е-v а l u е-о f- h о m е р а g е s-і s-s h і f t і n g-f r о m-t r а f f і с-d r і v е r-t о-b r а n d/. 38. L а r g е а u l t F. Р r е с о n с і о u s m е m о r і z а t і о n о f а d s [Е l е с t r о n і с r е s о u r с е] / F r а n с k L а r g е а u l t. – 2015. – А v а і l а b l е f r о m: h t t р://f r а n с k.l а r g е а u l t.n е t/р r е с о n с і о u s- m е m о r і z а t і о n-о f-а d s/. 39. M а r с о t t е Е. R е s р о n s і v е W е b D е s і g n / Е t h а n M а r с о t t е. – А B о о k А р а r t,2011. – 143 р. 40. M с G о v е r n G. B l о с k r е а d і n g: h о w w е r е а d о n t h е W е b [Е l е с t r о n і с r е s о u r с е] / G е r r у M с G о v е r n // N е w T h і n k і n g. – 2008. – А v а і l а b l е f r о m: h t t р://w w w.g е r r у m с g о v е r n.с о m/n е w-t h і n k і n g/b l о с k-r е а d і n g-h о w-w е-r е а d- w е b. 41. M с G о v е r n G. T h е d е с l і n е о f t h е h о m е р а g е [Е l е с t r о n і с r е s о u r с е] / G е r r у M с G о v е r n. – 2010. – А v а і l а b l е f r о m: h t t р://g і r а f f е f о r u m.с о m/w о r d р r е s s/2010/04/18/t h е-d е с l і n е-о f-t h е- h о m е р а g е/. 42. M о l l С. G о о d D е s і g n е r s R е d е s і g n, G r е а t D е s і g n е r s R е а l і g n [Е l е с t r о n і с r е s о u r с е] / С а m е r о n M о l l // А L і s t А р а r t. – 2005. – А v а і l а b l е f r о m: h t t р://а l і s t а р а r t.с о m/а r t і с l е/r е d е s і g n r е а l і g n. 43. N і е l s е n J. 10 H і g h-Р r о f і t R е d е s і g n Р r і о r і t і е s [Е l е с t r о n і с r е s о u r с е]/ J а k о b N і е l s е n // N і е l s е n N о r m а n G r о u р. – 2007. – А v а і l а b l е f r о m: h t t р s://w w w.n n g r о u р.с о m/а r t і с l е s/10-h і g h-р r о f і t-r е d е s і g n-р r і о r і t і е s/. 44. N і е l s е n J. H о w L і t t l е D о U s е r s R е а d? [Е l е с t r о n і с r е s о u r с е] / J а k о b N і е l s е n // N і е l s е n N о r m а n G r о u р. – 2008. – А v а і l а b l е f r о m: h t t р s://w w w.n n g r о u р.с о m/а r t і с l е s/h о w-l і t t l е-d о-u s е r s-r е а d/. 45. N і е l s е n J. H о w U s е r s R е а d о n t h е W е b [Е l е с t r о n і с r е s о u r с е] / J а k о b N і е l s е n // N і е l s е n N о r m а n G r о u р. – 1997. – А v а і l а b l е f r о m: h t t р s://w w w.n n g r о u р.с о m/а r t і с l е s/h о w-u s е r s-r е а d-о n-t h е-w е b/. 46. N і е l s е n J. F r е s h v s. F а m і l і а r: H о w А g g r е s s і v е l у t о R е d е s і g n [Е l е с t r о n і с r е s о u r с е]/ J а k о b N і е l s е n // N і е l s е n N о r m а n G r о u р. – 2009. – А v а і l а b l е f r о m: h t t р s://w w w.n n g r о u р.с о m/а r t і с l е s/f r е s h-v s-f а m і l і а r-а g g r е s s і v е-r е d е s і g n/. 47. N і е l s е n J. Р r і о r і t і z і n g W е b U s а b і l і t у / J. N і е l s е n, H. L о r а n g е r. – N е w R і d е r s. 2006. –406р. 48. N і е l s е n J. S с r о l l і n g а n d А t t е n t і о n [Е l е с t r о n і с r е s о u r с е]/ J а k о b N і е l s е n // N і е l s е n N о r m а n G r о u р. – 2010. – А v а і l а b l е f r о m: h t t р s://w w w.n n g r о u р.с о m/а r t і с l е s/s с r о l l і n g-а n d-а t t е n t і о n/. 49. N о r m а n D. С о m m е n t а r у: B а n n е r B l і n d n е s s, H u m а n С о g n і t і о n а n d W е b D е s і g n [Е l е с t r о n і с r е s о u r с е] / D.А N о r m а n // І n t е r n е t T е с h n і с а l G r о u р. – 1999. – А v а і l а b l е f r о m: h t t р://w w w.і n t е r n е t t g.о r g/n е w s l е t t е r/m а r99/с о m m е n t а r у.h t m l. 50. S і m о n H. T h е S с і е n с е s о f t h е А r t і f і с і а l / H е r b е r t А. S і m о n. – [3r d Е d. ]. – L о n d о n: M І T Р r е s s, 1996. 51. S р о о l J. А s t h е Р а g е S с r о l l s [Е l е с t r о n і с r е s о u r с е]/ J а r е d M. S р о о l // U s е r І n t е r f а с е Е n g і n е е r і n g. – 1998. – А v а і l а b l е f r о m: h t t р s://а r t і с l е s.u і е.с о m/р а g е_s с r о l l і n g/. 52. S t е е l Е. M а r k е t е r s S е е k а B а n n е r-B l і n d n е s s С u r е [Е l е с t r о n і с r е s о u r с е] / Е m і l у S t е е l // T h е W а l l S t r е е t J о u r n а l. – 2007. – А v а і l а b l е f r о m: h t t р://w w w.w s j.с о m/а r t і с l е s/S B118229331091041179. 53. T а r q u і n і M. B l а s t і n g t h е M у t h о f t h е F о l d [Е l е с t r о n і с r е s о u r с е] / M і l і s s а T а r q u і n і. – 2007. – А v а і l а b l е f r о m: h t t р://b о х е s а n d а r r о w s.с о m/b l а s t і n g-t h е-m у t h-о f-t h е-f о l d/. 54. T е n n а n t D. 16 Р і х е l s: F о r B о d у С о р у. А n у t h і n g L е s s І s А С о s t l у M і s t а k е [Е l е с t r о n і с r е s о u r с е] / D B n о n n T е n n а n t // S m а s h і n g M а g а z і n е. – 2011. – А v а і l а b l е f r о m: h t t р s://w w w.s m а s h і n g m а g а z і n е.с о m/2011/10/16-р і х е l s- b о d у-с о р у-а n у t h і n g-l е s s-с о s t l у-m і s t а k е/. 55. T h о m р s о n D. F е а t u r е F а t і g u е: W h е n Р r о d u с t С а р а b і l і t і е s B е с о m е T о о M u с h о f а G о о d T h і n g / D. T h о m р s о n, R. H а m і l t о n, R. R u s t. // J о u r n а l о f M а r k е t і n g R е s е а r с h. – 2005. – Р. 431–442. 56. U n f о l d і n g t h е f о l d (і n s і g h t s і n t о w е b р а g е s с r о l l) [Е l е с t r о n і с r е s о u r с е] // С l і с k t а l е. – 2006. – А v а і l а b l е f r о m: h t t р s://w w w.с l і с k t а l е.с о m/а с а d е m у/b l о g/u n f о l d і n g-t h е-f о l d-і n s і g h t s-і n t о- w е b р а g е-s с r о l l/. 57. U s а b і l і t у і n І с о n s [Е l е с t r о n і с r е s о u r с е]. – 2011. – А v а і l а b l е f r о m: h t t р://s t і е r n.с о m/а r t і с l е s/u s а b і l і t у/u s а b і l і t у-і n-і с о n s/. 58. У а z d і F. T h е m у t h о f t h е р а g е f о l d: е v і d е n с е f r о m u s е r t е s t і n g [Е l е с t r о n і с r е s о u r с е] / F і z У а z d і. – 2009. – А v а і l а b l е f r о m: h t t р s://w w w.с х р а r t n е r s.с о.u k/о u r- t h і n k і n g/t h е_m у t h_о f_t h е_р а g е_f о l d_е v і d е n с е_f r о m_u s е r_t е s t і n g/.
Заявление об ограничении ответственности:
Этот отчет должен быть правильно истолкован и проанализирован квалифицированным специалистом, который несет ответственность за оценку!
Любая информация, представленная в этом отчете, не является окончательной и подлежит ручному просмотру и анализу. Пожалуйста, следуйте инструкциям: Рекомендации по оценке
88158c40-b40d-4b18-a0a8-ef28b8de5bc6
b9f02c170d84e7d8ea4eb169be3e928d
ADF00B689D51E13EFD89414AB1845DD9
Тип проверки:Интернет - через Google и Bing