Сайттардың үлгілері

 Сайттардың классификациясы

 Сайттрдың негізгі үлгілері

 Сайттың мақсаттары

 Дайындай стильдері

 Ақпаратты ұйымдастыру әдістері

 Ыңғайлы - сайтта

 Юзабилит әдістері

 Ақпарат қабылдау

      

Осы лекцияда сіз сайттардың әртүрлі үлгілерімен, қай кезде дайындау стилінің қайсы түрі таңдаланатынымен таныс боласыз. Сайттқа келушілер назарын иелену әдістерін үйреніп, ақпаратты тиімді орналастыру, келушілермен өзара интерактив әрекетін ұйымдастыруды үйренеміз. Сайттарды бағалау критерийлерімен таныс боласыз.
Кілттік сөздер: Сайт типі, дайындау стилі, дизайн, навигация, эргономика, юзабилит, бағалау критерийі.

 

Сайттар класификациясы

Осыған дейінгі дәрістерде сіз мәтіндік және графикалық ақпараттарды веб-бетке енгізу әдістерімен таныстыңыз. Гиперссылка көмегімен бір, немесе бірнеше құжаттардың бөлімдерін өзара байланыстыруды үйрендіңіз. Сондай-ақ өзіңіздің шағын сайтыңызды аштыңыз.

Осы бағытта әлем елдерінде істелініп жатқан шараларға көңіл бөлу қазіргі заман талабы. Өз шығармашылығыңыз қай бағытқа тиесілі екенін анықтау қажет.Сайттарды сараптай отырып сіз өзіңіздің жетістіктеріңізді және кемшіліктеріңізді бағалай аласыз.
Алдымен сайттардың түрлерін талқылайық.

 

Сайттардың негізгі үлгілері

Жеке (үй) бет – Веб-сайттың ең жалпылама және тартымсыз категориясы. Жеке беттерді жобалау принциптері, ережеге сәйкес, автордвң фантазиясының және тапсырмаларының негізінде жүзеге асырылады.Сонымен қатар кейбір әйгілі тұлғалардың (мысал ретінде -саясаткерлер) жеке беттері жоғары мамандырылған болып, оның жеке басының имиджіне қызмет етеді. Жеке беттерді көптеген дизайншылар да жасайды, мысалы Артемия Лебедевтің үй-беттері (дом-страница): http://tema.ru

Комерциялық емес сайт – табыс көзі мақсатында емес, ерікті біріккен ұйымдар, комерциялық емес, уақытша түзілген жобаларға, білім беру саласына, қоғамдық және басқа ұйымдарға тиесілі. Бұл категорияға оқу орындарының, универститетпен ғылыми орталықтардың көптеген беттерін жатқызуға болады. Мұндай сайттардың негізгі мақсаты – таң қалдырарлық дизайны емес, берілген жоба немесе ұйым жөнінде ақпаратты жеткізу, ынтымақтастықты ұйымдастыру және қолдау болып табылады. Мысалыға "Эйдос": http://www.eidos.ru білім беру орталығы.
Ақпараттық сайт – Интернетте көп сұранысқа ие – бұл мүмкіндіктерге ие іздену мүшелері, жаңалықтар лентасы, интернет-газета, утилиталық және тағы басқа ақпараттар «қоймалары». Комерциялық емес сайттар сияқты бұл типтегі сайттар үшін де оның дайындалуы, мазмұнынан маңызды.Бұл сайттардың әр салалы және жиі ауыспалы мазмұны оның дизайнына әр кез сәйкес келе бермейді. Нәтижесінде дизайншының репертуары шектеледі.Көп қолдануға ие болатын бұл сайттарды дайындау элементтерін минимумге теңестіріп, оқырманның аса қымбат уақытының босқа жұмсамауын және сайтқа келгендегі негізгі бағытынан ауытқымауына ықпал етеді.Ақпараттық сайтқа мысал: http://www.kak.ru
Корпоративті сайт – келушіге фирманыңесте сақтау және назар аударуға бағытталған образын сомдау негізгі мақсаты болып табылады. Басқаша айтар болсақ фирма сайты – ақпараттағыдай, жарнама поштасының құралы десек те, мұнда жоғары сапалы дизайнның қажеттілігіне мұқтаж және кәсіби дизайншы орындаған кооперативті сайттардың орташа деңгейі «среднем по сети»-ден біршама жоғары. Комерциялық сайттар басқа сайттардан келушілерге тауар ұсынуда және қызмет көрсетудегі бағыттармен ерекшеленеді. Кооперативті сайтқа мысал – РосБизнесКонсалтинг: http://www.rbc.ru
Келтірілген сайттар типологиясы жеткілікті дәрежеде шартты болады. Мысалы жеке беттер күшті ақпарат порталына айналуы мүмкін (мысалы, Мошков кітапханасы - http://lib.ru).

4.1.1-тапсырма  Жоғарыда көрсетілген сайттар типтерін бір тақырыптағы негізгі мінездемесін өңдеңіз.
Өзіңізді қызықтыратын тақырыпты таңдаңыз, мысалы: "Автосалон", "Гүлдер", "Мобильді желі", "Кулинария", "Футбол", "Кунсткамера", "Видеошолу" және тағы басқа.Бір тақырыпта берілген сайттың барлық төрт принципін тұрғызуға әрекеттеніп көріңіз .Бұл үшін өзіңізді қызығушылар (фонаттар, рокерлер, шахматшылар және т.б.) тобының мүшесі деп, соңынан ірі фирма жетекшісі, ақпарат агенттігінің жетекшісі бейнесінде сезініңіз. Осы тақырыпта сіздің жеке сайтыңыз көрсетілген сайттардан ерекшелену принциптерін салыстырыңыз. Нәтижесін кесте түрінде көрсетіңіз:

	Жеке (үй) беті	Комерциялық емес сайт	Ақпараттық сайт	Кооперативті сайт
Сайт атауы
Тағайындалуы
Мақсаты
Аудитория
Конструкциялау принциптері
Сайтта қолданылатын технологиялар
Сайтты құру және сақтаудағы шығындар
Күтілетін нәтижелер

 

Сайттың мақсаттары

 

Сайт төменде келтірілген мақсаттарды орындау құралы ретінде пайдаланылуы мүмкін:
- Тауарлардың орындалуы және қызмет көрсетуі;
- Компания имиджін жақсартуды қалыптастыру: компания қаншалықты үлкен және әйгілі болса, өзін әр түрлі көрмелерде, призентацияларды, қайырымдылық акцияларда немесе демеушілік қызметтерінде өзін ауқымдырақ танытады; 
- ақпараттарды оперативті мақсаттарда таратуды ұйымдастыру; мысалы, тұрақты клиенттерді және сайттағы әдістерді тарту, пайдаланудағы «жаңа» басшылықтар, анықтама материалдары, оқу құралдары, жиі қойылатын сұрақтар тізімі және олардың жауабы, коментарийлер және түсініктемелер, тестілеу нәтижесі, прайс-парақтар, каталогтар және т.б.;
- инвестиция тарту: егер сізде нұсқалы пікіріңіз болса, пайда келтіру, бірақ оны іске асыруға қаражаты жоқ инвесторлардытартып көруге болады.. өзіңізге назар аударту әдістерінің бірі сіздің проектіңізге арналған потенциалды инвесторларға арналған толық мағлұматты веб-сайт құру (алғашқыда мағлұматтар, қаражатты сіздің проектіңізге құю пайдалы екендігін көрсету).

4.1.2-тапсырма. Сайт көмегімен қол жеткізетін мақсаттар тізбегін жалғастырыңыз.

Дайындау стильдері

Конструктивті. Сайттың тұрақталған түрлі-түсті гаммасы, негізінде белсінділеу түс акценттерінің әр-түрлі реңдегі бір түстіңэлементтері. Стиль элементтері өз негізінде геометриялық формаға ие. әрқашан анықтау бола бермейді. Суреттер көбінше екі түсті немесе сұр түске стильденеді.

Стильді. Сайт иесі – форманың визуальді стилінде сақталады және бейімделеді. Арнайы стиль көп жағдайда осы сайтта өңделеді. Логотиптер, әріптер, суреттер фирманың визуальді стиліне сәйкестендіріліп алынады.
Көркем . Коллаждар нақты сезімтал фон жасау мақсатында түсті белсенді пайдалану, стандартты емес көркем әріптер еркін құрылымды схемалар, стереотиптерден алшақтау.
Мәтіндік. Беттеу элементтерінің көмегімен орындалған дизайн. Тақырыптарға, тақырыпшаларға, әріптер өлшеміне, мәтіндік блоктар орналасуына, сызғыштарға негізгі назар аударылады.

4.1.3-тапсырма. Алдыңғы тапсырмада көрсетілген стильдердің қайсысы сайттар типтерінің әрқайсысына тура келетінін анықтаңыз? Сайттардың барлық типтеріне бір ғана стильді қолдануға болады ма? Өз шешіміңізді негіздеңіз.

 

Ақпаратты ұйымдастырудың негіздері

Алдыңғы бөлімде сіз сайтта ақпаратты ұйымдастыруда төмендегі әдістермен таныстыңыз:

• сызықты;
• иерархиялық;
• контексті-бағынышты;
• қиыстырылған (комбинированный).

4.1.4-тарсырма. Жоғарыда көрсетілген сайт типтерінің әрқайсысына ақпарат ұйымдастыру әдістерінің қайсыбірі тура келетінін ойлап көріңіз. Төмендегі ақпаратты ұйымдастыру кепірдемелерімен танысып, олардың ішінен әр сайт типіне маңыздырақ болатынын белгілеңіз.

 

Сайтта ақпаратты  ұйымдастыру кепілдемесі:
- сайттағы ақпарат тұрақты келушілердің мүддесін ұсынуы қажет және мүмкіндігінше аналогы болмауы қажет;
- Келушілердің ақпарат сайтында сіз орналастырғыңыз келмейтін ақпарт бар деп ойлауларына сылтауына жол бермеңіз;
- Имидждік және жарнамалық ақпарат шағын болуы қажет және сайттың мағыналық мазмұнына көлеңке түсірмеуі қажет;
- Сайтта ешқандай мағынасыз (мысалы, анимациялық суреттер) орналастырылған қалыпты қабылдануына кедергі болатын элементтер болмауы тиіс;
- Ақпарат блоктарының логикалық құрылымы алғашқы кезеңдң маңызды ақпараттың, соңынан маңызды және өзекті дәрежелеріне сәйкес қабылдануын қамтамсыз етуі қажет;
- Сайт құрылым бір бөлім құрылымының басқа бөлімдерге әсер етпейтіндей етіп құрылады;
- Әр тамамдалған логикалық ақпарат блогы және құжат түрінде, жеке бетте құрылады;
- Навигацияға сүйену келушінің негізгі ақпаратты қабылдауына және оның көмегімен қай бетке ауыса алатыны  жөнінде кедергі болмауы қажет;
- Сайттың навигациялық құрылымы сайттың кез-келген 3 кликтен аспайтын, басқа бетке ауысу мүмкіндігін қамтамасыз етуі қажет;
- Күрделі және көп тармақты навигациялық құрылым болған жағдайда жеке бетте сайт картасы – сілтеме түрінде құрылады.

 

 Сайтта- ыңғайлықпен

Сіз, бірқатар сайттар типтерімен және орындау стильдерімен, сондай-ақ, оларға ақпаратты ұйымдастыру әдістерімен таныстыңыз. Сайттың бірнеше веб-парақтардың жиынтығы болып, сол парақтар аралығында, сондай-ақ әртүрлі сипаттардың аралығында еркін қозғалыста болуы мүмкін екенін анықтап алдыңыз.
Сайтқа келушілер үшін веб-парақта ақпаратпен жұмыс істеу, жоғары деңгейде, ыңғайлы болуы қажет. Бұл ыңғайлы жағдай қалай қамтамасыз етіледі? Бұл сұраққа эргономика жауап береді.

Эргономика – қолданыстағы ыңғайлылықты зерттеу жөніндегі ғылым.

Веб-сайттағы бағдарламамен қамтамасыз ету эргономикасымен айналысатын ғылым саласын юзабилити деп атайды юзабилити (usability, ағылшын тілінде use - пайдалану).
Веб-дизайнның негізгі мақсаты: сайттың түсініктілігін, қолданыстағы қарапайымдылықты қамтамасыз ету.
Сайттарда юзабилитиді анықтаудың көптеген әдістері олардың әр түрлі этапты орындауға қолданылады. Олардың біразын анықтап, байқап көрелік.

 

Юзабилити  әдістері

Макеттер жасау

 
Макеттерді жасау  – саиттардың жобаларын орындау болып табылып, оның құрылымын тестілеуге ықпал етеді. .
Жоба тестілінуші сайттың компоненттерін қосындысы болып табылады (дизайн, басқару элементтері және т.б.). Жобаны жасау барысында қағаз бетіне интерфейс элементтерін түсіруден бастап сайттың жобасының орындалуына дейінгі аралықта жобаны орындаудың бірнеше әдістерін пайдалануға болады..
«Горизонтальды» және  «вертикальді» жобалаулардың орындаулары ерекшеленеді.
«Горизонтальді» макетті орындау – жобадағы сайттың параметрлерін ауқымды түрлу түсте байқап білу. Жобалаудың бұл түрі интерфейс саласында пайдаланушылардың тұтынудағы таңдауларын оқып үйрену үшін қолданылады. Зерттеу барысында, пайдаланушылардың пайымдануынша сайттың функциялары қай жерде орналасқан болуы қажет, олар қаншалықты түсінікті және т.б. анықталады. «Горизонтальді» жобалауды орындаудың алғашқы сатысында қолданылады.
«Вертикальді» жобалау сайттың кейбір компоненттерінің функциясын зеттейді. Мысалы, «вертикальді» жобалау кезінде, оның іздеу мүмкіндіктерін үйренеді, бірақ жіберуді тексеру, әр түрлі баузерде жұмыс істеу және тағы басқа жұмыстары жүргізілмейді. Себебі жобалаудың бұл түрі сайттың кішігірім секторын тереңдетіп оқып-үйренуді ұсынады. Бұл жағдай тиестіленуші секторды өңдеуден кейін ғана жүзеге асырады.

 

Шолулар

Шолулар дегеніміз – бұл пайдаланушыға (болатын арнайы интервью) алдын-ала дайындалған сұрақтарды қою арқылы жүргізілетін пайдаланушымен интервью. Олардың алынған жауаптары алдағы үйренушіге жазылады. Шолуға енетін сұрақтар зерттелудегі мақсаттарына байланысты болып, төмендегі категориялармен топталады:

• Пайдаланушы туралы демографиялық ақпарат (жасы, атқаратын қызметі, тұрар жері және т.б);
• Сайтты ақпаратпен толықтыруды бағалау (қай ақпаратты күттіңіз, сайттың толтырылуы сіздің күткеніңіздей ме, қандай қосымшаңыз бар және т.б.);
• Сайттың дизайнының бағалануы (қолданудағыеркіндік, жылдамдық, көркемдеу және т.б.).

Шолулар – сйат құрылымдарын және концепциялардыдайындауда маркеингті зерттеулер өткізу үшін, тұрақты пайдаланушыларды анықтау, олардың ақпаратқа мұқтажын анықтауда, компьютерді пайдаланудағы ұқыптылығын, сондай-ақ сайт құрылымын жасап болған соң пайдаланушының әрекеттерін бағалауға, бағытталған ақпараттардың толықтығы мен ыңғайлылығын бағалауда қолданылады.

Сұрақнамалар (опросники).
Сайттарды бағалау сұрақнамалары психодиагностикалық тестілеуге сәйкес принциптерінің негізінде түзіледі. Олардың шолулардан ерекшелігі пайдаланушылардың назарына ұсыну формасында болады. Егер шолуларды құрылымдық интервью десек сұрақнамалар сұрақтарының жауаптарының варианттары көрсетілген сұрақтар түрінде беріледі.
Сұрақнамадағы сұрақтардың мәніне байланысты сайтты дайындау, оны пайдалану процессінде оны пайдалану барлық деңгейде қолданылады.
 «Ойдың дауыстап жеткізудің» бекітілуі (фиксация).
Пайдаланушының тәжірибеге бағытталған ойын бекіту сайттың функцианалдығын бағалауда ең әйгілі техниктердің бірі болып есептеледі. Пайдаланушы есептерді шешу процессінде пайда болатын ойын, сезімін дауыстап жеткізуін сұранады.
Пайдаланушыны тестілеуге рұқсат етілген сайтпен немесе прототипімен қамтамасыз етіп, оған сайтты пайдалану процессінде қажет болатын тапсыпма беріледі. Ол бұл тапсырманы шешу шешуі керек, сонымен қатар интерфейске себепті келген ойды дауыстап жеткізуі қажет. Нәтижесі аудиопленкаға жазылады және жазбаша бекітіледі.
Көптеген басқа әдістермен салыстырғанда бұл техника пайдаланушының уақытпен шектелмегенсайтын жеке компоненттерімен әрекеттестігінң реакциясн бағалауға мүмкіндік береді. Ал егер бұл есептың шешімін күтуге қажетті операция қажетті сайттың дизайнерлік шешімінен алшақтанса, онда бұл шешімнің өзгертілуі мүмкін.
Эвристикалық зерттеу
Эвристикалық зеттеу 4-6 кәсіпкер маманнан тұратын, топ мүшелерімен веб-өнімдері және адам мен компьютерлік жүйенің өзара қатынасы төңірегінде жүргізіледі.
Бұлардың жұмысы сайт сапасының ара қатынасын белгілеуде арнайы қисындырылған эвристикалық принциптермен негізделеді.Әр тәжірибе сайтты ұқыпты үйренеді, нәтижесін жазбаша белгілеп және топтық басқа мүшелерінен бөлектеніп жұмыс істейді. Бұл жағдай тәжірибе өткізулердің әрқайсысының белгілегенбағаларының тәуелсіздігін қамтамасыз ету үшін қажет. Сосын алынған нәтижелер топтасып талқыланады және ұжым мүшелерінің шешімі қабылданады. Топ қызметінің нәтижесі топ басқарушысымен бағаланады.
Берілген әдіс сайттың жобасын дайындауда, сондай-ақ оны дайындаудың соңғы сатысында да және дайын нәтижені сараптауда пайдаланады.

4.2.1-тапсырма. Сіздің 4.1.1-тапсырмаңызда ұсынған айттарыңызды біреуін пайдаланыңыз, көлденең (горизанталь) жобалау әдісі. Қағаз бетінде болашақ титул беті элементтерін орналастырыңыз.

4.2.2-тапсырма. Сіз дайындап отырған сайтты пайдаланушымен арнайы интервью орындап – шолуға сұрақтар дайындаңыз. Интервью мақсаты – сіздің сайтыңыздың болашақ пайдаланушыларының нақты талаптарын анықтау.

4.2.3-тапсырма. Сайттардың біруіне арнап интернет жүйесін орналасқан «ойды дауыстап жеткізуді» бекіту әдісін пайдаланыңыз. Бұл үшін өз қызметтестеріңіздің осы сайтты пайдаланушыны тауып, оған тапсырма ойлап табыңыз, мысалы, дизайнер көзқарасынан берілген сайтты қарап шығу кезінде айтқан рікірлерінің барлығын диктафонға жазып алыңыз. Жазбаны сараптап, берілген сайтты жетілдіруге бағытталған ұсыныстарды жасайсыз.

 

Ақпаратты қабылдау

Юзабилитидің маңызды бөлімі – ақпаратты қабылдау.
Интернет пайдаланушылардың көбісі мұқият оқуда жеңіл көз жүгіртіп танысқанға бейімдеу келеді.
Экранна оқу көзбен көруге үлкен ауыртпашылықтар келтіреді және мәтінді қағаз бетінен оқығаннан, шамамен 25% баяулау болады. Сондықтан төмендегі факторларға назар аудару қажет:
1) Веб-бетте мәтіннің түсін және фонын анықтау.
Түрлі-түсті гамма сайт мақсаттарына жауап беріп қана қоймай, келушілердің көңіл күйінің көтеріңкі болуын қамтамасыз етуі қажет.
Түрлі-түсті екі шеткі схемалар бар: позитивті (ақ фонда қара мәтін) және негативті (қара фонда ақ мәтін). Жалпы алғанда бұл екі схема да өте жақсы оқылады. Кейде негативті схеманың оқылуы төмендеу деген пікірлер айтылып, оқырманның назарының әлсіреуіне әсер етеді.
Негативті схеманың өте әйгілі кезеңі де болған. Қазіргі кезде көптеген сайттар позитивті әдеттер жақындатылып түзілуде. Оқудың  ыңғайлылығы үшін дұрыс таңдалған контраст өте маңызды. Ал фондағы қара шрифт көзге күштірек әсер етеді. Ашық-сұр фондағы қараңғы-сұр шрифттерінің көрінуі басқаларға қарағанда анығырақ көрінеді. Көптеген баспаханалар мамндары ақтығы төмендеу қағазды пайдаланады және қаралығы 60-80% болатын шрифтермен пайдаланады..
Төменде қолданушымен қабылдануы төмендеу, көп тараған түр-түстің қосылымы берілген.

• Ақтағы көк
• Сарыдағы қара
• Ақтағы жасыл
• Ақтағы қара
• Қызылдағы жасыл
• Сарыдағы қызыл
• Ақтағы қызыл
• Қарадағы қызғылт сары
• Қарақошқылдағы қара
• Ақтағы қызғылт сары
• Жасылдағы қызыл

Өзіне назар аудару тұрғысынан қарасақ сары фондағы қара әріптер, ақ фондағы – жасылдар мен қызылдар дұрысыраққабылданады. Ескеретін жәйт – жоғарыда келтірілген кепілдемелер шартты, себебі олардың үйлестірулері мен түстері әр жеке адамда әртүрлі қабылданады.
2) Веб-беттің фоны
Кез келген фондағы сурет көру арқылы қабылдауды қиындатады. Солай бола тұрып оны қолдануды шешсеңіз, оны бір түсті гаммада өте төмен контрастылы етіп орындаңыз. Және көне бір қағида: суреттің үстінде маңызды блоктарды орналастырма.
3) Сілтеме
Сілтемелер міндетті түрде негізгімәтіннен ерекшеленіп тұруы қажет (түр-түсімен болса да). Ішке ену сілтемелерін сыртқа ұмтылу сілтемелерінен айырып көрсеткен дұрыс.
Барлық сілтемелер үшін сайт аумағында дайындаудың бірыңғай стилі сақталуы қажет. Егер сайт жеке қолданушы жұмысына есептелген болса, онда келуші етіп үлгерген сілтеме түр-түсінөзгертуі қажет. Егер бірнеше пайдаланушыға бір компьютер мен жұмыс істеу ұсынылған болса (мысалы, мектепте бір компьютерде әр сабақта әрбасқа оқушы пайдаланады), онда енген сілтемелердің түр-түсін өзгерту қиындыққа соғады.

4) Элементы навигации
Внешний вид элементов навигации должен соответствовать их назначению. Логотип сайта на любой странице является ссылкой на стартовую (титульную) страницу. Однородные элементы (например, все кнопки) должны быть оформлены в едином стиле и ясно показывать свое назначение.
Делайте различие между элементами по иерархии. Например, кнопки подразделов можно сделать чуть меньше, чем кнопки основных разделов (или выделить их другим, менее доминирующим цветом). Это же касается и заголовков с подзаголовками.
5) Важная информация наверху страницы
Веб-страницы загружаются сверху вниз, информация вверху страницы появляется раньше, нежели та, что размещена внизу. Поэтому, более важные для пользователя материалы должны располагаться ближе к началу страницы.