sabloni notes

===Прво Предавање===
===Вовед===

*Кратка историја
-За креирање на интерактивни апликации програмерите на располагање имале многу малку елементи: текстуални полиња, копчиња, менија, малечки икони... и заради тоа имало многу мала интеракција помеѓу човекот и апликацијата
-Елементите се разместувале на начин кој бил во согласност со Windows Style Guide или Macintosh Human Interface Guidelines, со надеж дека корисниците ќе го разберат креираниот интерфејс, но тоа не бил случајот.
-Се дизајнирало на мали екрани, се користеле многу малку бои и компјутерите и мрежите биле претерано бавни и неразвиени

*Сегашност
-Голем избор на елементи(HTML, CSS, JavaScript итн.)
-Промена на технологијата за прикажување(голема резолуција, богатство од бои)
-Различни видови на апликации и интерфејси(веб апликациите се' повеќе наликуваат на desktop-UI, изобилие на апликации за мобилни платформи)
-Дизајнирањето на кориснички интерфејси станува се' потешко, затоа што очекувањата на корисниците се поголеми и згора на тоа на пазарот веќе има голема конкуренција која веќе има измислено многу напреден дизајн, па е многу тешко да се измисли нешто ново и уникатно
-Постојано се развиваат нови уреди(таблети, мобилни телефони, навигациски системи за автомобили итн.), па затоа што овој вид на уреди стануваат поприсутни, помоќни и попаметни, се наметнува потребата од иновативни начини на интеракција со нив за да се олесни нивното користење
-RIA-concept(Rich Internet Applications)
	*Богатство на информации
	*Богатство на погледи
	*Богатство од интеракција
	*Богато корисничко доживување
	*Нагласок на визуелните ефекти и мултимедијалноста

~*Што работат корисниците
-HCI(Human-Computer Interaction)
	*Човечки аспект
	*Компјутерски аспект              => Дизајн на кориснички интерфејс
	*Ергономски аспект
-Разговор во HCI
	*Најважна работа при креирање на нов дизајн на интерфејс е разбирање на луѓето(како тие размислуваат, кои се нивните навики, зошто користат даден софтвер, кој е жаргонот кој тие го користат, за која група на корисници е наменета апликацијата итн.)
	*При креирање на апликација, мора да се моделира начинот на кој што ќе се врши разговор, односно комуникација помеѓу апликацијата и корисникот(дали ќе се врши преку терминал или мени, или некој друг начин)
-Методи за истражување на корисниците
	*Директно набљудување - интервјуа и прашалници за корисниците во моментот на посетување на сајтот/апликацијата
	*Case studies - детална анализа за различна група на корисници
	*Анкети - прибирање информации од корисниците и статистички анализи
	*Personas - се обидуваме да ги разбереме корисниците што ќе ја користат нашата апликација со моделирање на различните групи
-Групи на корисници
	*Нормални(mainstream) корисници
		-Повеќето од апликациите спаѓаат во оваа група
		-Служат и на експертите и на нормалните/обичните корисници
		-Најчесто нема волшебници за како да се користи апликацијата
		-Нормалните корисници најчесто брзо го учат софтверот и не се надоградуваат, освен ако им треба нешто понапредно
	*Повремени корисници
		-Ограничени функционалности
		-Поедноставен интерфејс
		-Волшебници за полесна навигација низ корисничкиот интерфејс
	*Експерти
		-Имаат многу комплексни функционалности
		-Нема волшебници за помош
		-Се претпоставува дека корисниците веќе знаат како да ги користат апликациите од оваа група
		-Оптимизирани се за ефикасно користење, а не за ефикасно учење
		-За нив има цели книги и курсеви

*Шаблони
	-Иако секој човек е различен, однесувањето на луѓето може да се предвиди, па затоа дизајнерите ги набљудуваат корисниците со години за да заклучат какво е нивното размислување и на кој начин ги употребуваат уредите и работаат со апликациите
	-При користење на апликација, очекувано е корисниците да се однесуваат по некој шаблон
-Шаблони за однесување на корисниците
	*Safe exploration
		-Истражување на интерејсот со пробување, односно со истражување на непознати работи(without getting into trouble, or making a mess)
	*Instant gratification
		-Корисниците сакаат веднаш да ги видат резултатите од некоја превземена акција
		-Иако користењето на апликацијата може да станува се' потешко и потешко, корисниците сепак ќе сакаат да продолжат со користење на истата, заради тоа што добиваат голема самодоверба и сатисфакција при самото користење
	*Satisficing = satisfying + sufficing
		-Корисниците сакаат брзо да искористат некоја опција, без претходно да ја проучат
	*Changes in midstream
		-Намерата на корисниците се менува додека го користат интерфејсот кој го имаме дизајнирано за нив
	*Deferred choices
		-Ако сакаме да поставиме некои прашања на корисниците кои не се дотолку битни, тогаш треба да им оставиме опција да ги одговорат тие прашања подоцна, за да не изгубат непотребно време, односно побрзо да го добијат тоа што го сакаат
	*Incremental construction
		-Корисниците постепено се трудат за да постигнат некои резултати
	*Habituation
		-Имплементација на одредени функции кои се универзални на повеќето интерфејси, како на пример Save-S за save
	*Spatial memory
		-Кога корисниците работат со објекти и документи, покасно ги пронаоѓаат според нивната локација, а не според нивното име
	*Prospective memory
		-Начин на кој корисниците зачувуваат некоја потребна информација која што треба да ја проверат подоцна, taking notes
	*Streamlined repetition
		-Оптимизирани повторливи акции(пример: find and replace)
	*Keyboard only
		-Можност за само користење на тастатура
	*Other people's advice

===Второ предавање===
===Организација на содржина(Информациска архитектура и Структура на апликации)===

*Вовед
	-Информациската архитектура(ИА) е „уметност“ за организирање и структуирање на содржината на веб-апликациите, мобилните апликации, социјални медиуми итн.
	-ИА опфаќа повеќе аспекти: презентирање, пребарување, прелистување, означување, категоризација, подредување, манипулирање и стратешко криење на информации
	-Добрата ИА е основа за ефикасно корисничко искуство

*ИА системски компоненти
	-Организациски системи
		*Претставуваат групи или категории во кои се поделени информациите
		*Таквиот систем им помага на корисниците да предвидат каде лесно можат да најдат одредени информации
		*Три главни организациски структури:
			-Хиерархиска
				~Добро позната техника на организација на содржини која се нарекува визуелна хиерархија
				~Се заснова на Гешталт психолошката теорија и нејзината главна цел е да презентира содржина така што корисниците можат да го разберат нивото на важност на секој елемент
				~Ја активира способноста на мозокот да прави разлика меѓу објектите на основа на нивните физички разлики, како што се боја, големина, поставеност, контраст итн.
			-Секвенцијална
				~Оваа структура создава конкретна патека што треба да ја следат корисниците
				~Тие одат чекор по чекор низ содржината за да ја завршат посакуваната акција
				~Овој вид на системи најчесто се користи при имплементација на веб-страници за продажба, каде луѓето треба да извршат неколку последователни задачи за да го реализираат купувањето
			-Матрична
				~Овој вид е малку покомплициран за корисниците, бидејќи тие самите го избираат начинот на навигација
				~На корисниците им се дава избор за организација на содржини
				~На пример, различни корисници можат да одберат дали ќе се движат низ содржината според датумот, или на друг начин
	-Системи за означување
		*Системот за означување има за цел ефикасно да ги обедини податоците
		*Дизајнерите ги создаваат ознаките кои претставуваат опис со неколку зборови на големо количество податоци
	-Системи за навигација
		*Навигацијата се дефинира како збир на акции и техники кои ги водат корисниците низ целата апликација или веб-страница, овозможувајќи им да ги исполнат своите цели и успешно да комуницираат со производот
		*Системот за навигација, во смисла на ИА, ги вклучува начините како корисниците се движат низ содржината
		*Тоа е комплексен систем кој користи многу техники и пристапи
	-Пребарувачки системи
		*Овој систем се користи за да им помогне на корисниците полесно да пронајдат некој податок во рамките на апликацијата
		*Овие системи, има смисла да се користат во апликациите кои имаат многу голема содржина
		*Дизајнерите требаат да се одлучат каков начин на пребарување ќе користат(пребарувач, филтри итн) и како ќе ги прикажат резултатите од пребарувањето
-Организациски шеми
	*Содржината може да се групира според различни организациски шеми
	*Листа на популарни шеми:
		-Алфабетски шеми
		-Хронолошки шеми
		-Шеми базирани на теми
		-Шеми според видови на корисници

*Шаблони
-Feature, Search, Browse
	*Што? Три елементи:
		-тематски текст или производ
		-поле за пребарување
		-листа на елементи или категории што може да се пребаруваат
	*Кога?
		-Страницата нуди долга листа на елемнти што може да се разгледуваат, или низ нив да се пребарува
		-Сака да се привлече вниманието на корисникот, со што му се нуди атрактивна информација
	*Зошто?
		-Сите три елементи треба да ги има на страницата или екранот
		-Некои корисници сакаат да листаат, други сакаат да пребаруваат
-Picture manager/Media browser
	*What?
		-Use thumbnails, item views, and a browsing interfce to create a familiar structure for managing photos, videos and other pictorial items
	*Use when
		-People use your software to work with lists or collections of pictorial things: photos, drawings, video clips and so on
		-The list might be in a web page, or in an application, or both
-Dashboard
	*What
		-Arrange data displays into a single information-dense page, updated regularly
		-Show users relevant, actionable information, and let them customize the display as nescessary
	*Use when
		-Your site or application deals with an incoming flow of information from something - web server data, social chatter, news, airline flights, business intelligence information, or financials
		-Your users will benefit from continuous monitoring of that information
	*Why
		-This is a familiar and recognizable page style
		-They show useful information, they update themselves, they usually use graphics to display data
-Canvas
	*What
		-Place an iconic palette next to a blank canvas
		-The user clicks on the pallete buttons to create objects on the canvas
	*Use when
		-You're designing any kind of graphical editor
	*Why
		-This pair of panels(palette and blank canvas) is so common that almost every user of desktop software has seen it
-Алтернативни погледи
	*Што?
		-Овозможи корисникот да избира помеѓу алтернативни прегледи на информациите
	*Кога?
		-Апликацијата покажува комплексни документи, листи, веб-страници, мапи или други информации
		-Понудени се опции за измена на екранските елемнти со кои се прикажува содржината, но тоа не е доволно
	*Зошто?
		-Не е можно сите можни сценарија на користење да се сместат во еден поглед, бидејќи се потребни различни навигациски алтаки, поинаков приказ итн.
		-Можно е понекогаш ова да се прави спо цел да се задоволат потребите и стилот на корисниците
		-Корисниците користат различна технологија за пристап до апликацијата
-Повеќе-нивовска помош
	*Што?
		-Користи различни техники за приказ на информациите потребни за работа на корисникот
	*Кога?
		-Дизајнирате комплексна апликација
		-Некои корисници имаат потреба од помош при работа со апликацијата
		-Сакате да ги задоволите потребите од дополнителна помош на секаков вид корисници
	*Зошто?
		-Корисниците имаат потреба од различно ниво на помош при работа со апликациите
		-Корисниците се со различно ниво на знаење
		-Некои корисници сакаат да читаат документација, други не
		-Корисниците имаат различен стил на учење

===Трето предавање===
===Навигација===

*Шаблони
-Јасни влезни точки(Clear entry points)
	*Прикажува само неколку „влезни точки“ на интерфејсот што се ориентирани кон конкретни задачи и се доволно описни за истите
	*Се користи за апликации кои ретко се користат, или пак за апликации кои имаат многу елементи кои ретко се користат

-Мени страница(Menu page)
	*Целата страница е полна со линкови до содржини на богата страница
	*На екранот не се прикажува друга важна содржина
	*При креирањето на мени страница потребно е дизајнерот да е сигурен дека корисниците на апликацијата точно знаат за каква намена е истата
	*Ако треба да се прикаже некаква друга важна содржина, овој модел не е погоден

-Пирамидална навигација(Pyramid)
	*Значи имаме една главна страница која содржи линкови до сите други подстраници
	*Кога ќе кликнеме на линк од некоја од страниците се отвара содржината на таа страница со можност да одиме на следна или претходна содржина, со можност да се вратиме на почетната страница во било кое време
	*Се користи за апликации кои секвенцијално прикажуваат некакви содржини кои се меѓусебно поврзани(на пр. волшебници, или некој slideshow)

-Режимски панел(Modal Panel)
	*Се прикажува само една страница без можност за навигација се' додека корисникот не го реши проблемот
	*Се користи кога апликацијата не може да продолжи без некаков инпут од страна на корисникот
	*Корисникот не може да го игнорира модалниот прозорец, се' додека не ја заврши работата

-Deep-linked state
	*Ја „фаќа“ состојбата на страница или апликација во URL што може да се прати на други луѓе
	*Се користи кога содржината на апликацијата е многу голема и кога до саканата содржина е тешко да се дојде, односно потребен е голем број на чекори за да се дојде до саканата дестинација

-Можност за излез(Escape hatch)
	*На секоја страница што има ограничени навигациски опции е поставено копче или врска што ќе овозможи корисникот да ја напушти истата и да оди на познато место
	*Се користи кога за x причини навигацијата е ограничена

-Fat menus
	*Се прикажува долга листа на навигациски опции во „drop-down“ или „fly-out“ мени за да се прикажат сите подстраници во сите секции
	*Се користи кај страници кои имаат многу страници кои се подредени во некаква хиерархија

-Sitemap footer
	*Се поставува мапа на страницата на дното на секоја страница

-Sign-in алатки
	*Се поставуваат алатки релевантни за навигација на најавени корисници во горниот десен агол на апликацијата

-Мапи на секвенци(Sequence map)
	*На секоја страница во секвенцата се прикажува редоследна мапа на сите страници и индикатор што покажува каде е корисникот во моментот
	*Идејата е да се покаже на корисникот каде се наоѓа во моментот и колку им треба да стигнат до целта

-Оставање траги(Breadcrumbs)
	*На секоја страница во хиерархијата, се прикажува мапа на сите претходни страници се' до главната страница

-Означени лизгачки ленти(Annonated scrollbar)
	*Се користи како мапа на содржината и индикатор за каде се наоѓаме во содржината
	*Се користи за апликации кои прикажуваат документи со голем виртуелен простор низ кој може да се движи со лизгачка лента

-Анимирани транзиции
	*Го измазнува процесот на затворање на некој прозорец или овозможува преминот од еден на друг екрански приказ да изгледа природно

===Четврто предавање===
===Организација на екран===

*Шаблони

-Визуелна рамка(visual framework)
	*Секоја страница е дизајнирана да ги користи истите основни форми, бои и стилски елементи, но, сепак е оставена доволна флексибилност да се овозможи манипулација со различните информации и елементи
	*Се користи кога се дизајнира комплексен софтвер да се означи дека сите страници припаѓаат на една целина, и да се овозможи полесна навигација

-Централна позиција(center stage)
	*Позиционирање на најважниот дел од интерфесот да зафаќа најголем дел од страницата, а сите останати алатки се организирани околу него во помали панели
	*Се користи кога треба да се покаже најзначајната задача, а сите останати се секундарни
	*Се користи за очите на корисникот веднаш да се насочени кон најважната задача

-Означени секции(titled sections)
	*Се дефинираат посебни секции со содржина и на секоја и се доделува визуелно јак наслов, а потоа се подредуваат на една страница
	*Се користи кога треба да биде прикажан голем текст што треба лесно да се скенира и разбери
	*Секциите се најчесто тематски или ориентирани кон задачата така да имаат смисла за корисникот

-Мрежа на еднакви(Grid of equals)
	*Сите елементи се поставуваат во мрежа или матрица
	*Секој елемент следи заеднички шаблон
	*Визуелната тежина на секој елемент е слична
	*Потребни се врски до страниците на кои може да се скокне
	*Се користи кога страницата содржи голем број елементи што имаат сличен стил и значење

-Модуларни табулатори(Module tabs, Card stacks)
	*Се поставуваат делови од содржините во мал простор(модул) означен со јазиче
	*Се подредуваат модулите на тој начин така што во еден момент да е видлив само еден модул
	*Кликнување на јазиче го носи корисникот на друг модул
	*Се користи кога треба да се организира големо количество хетерогена содржина и/или на екранот нема простор да се прикаже се

-Подвижни панели(Movable panels)
	*Се сместуваат различни алатки или секции од апликацијата во одделни панели што може да се поместуваат
	*Апликацијата има неколку кохерентни делови што не мора да бидат фиксно подредени, затоа што нивното значење го поставува самиот корисник
	*Се користи за да му се овозможи на корисникот персонализација и слобода во работењето со апликацијата

-Армоника
	*Се поставуваат модули во колинеарен стек од панели што можат да се отвараат и затвораат независно еден од друг
	*Се користат кога треба да се прикаже хетерогена содржина и/или на страницата нема доволно простор да се прикаже целата содржина

-Collapsible panels
	*Панели што се отвараат и затвараат
	*Помалку значајниот или опционалниот материјал се поставува во панели што може да бидат отворени или затворени од страната на корисникот
	*Се користи кога треба да се прикаже големо количество на хетерогена содржина за која нема простор да се прикаже, а постои содржина која треба централно да се позиционира

-Десно/Лево подредување
	*Кога се дизајнира дво-колонска форма или табела, подреди ги елементите во левата колона односно налево елемнтите во десната колона
	*Се користи за форми во кои на контролите или текстуалните елементи им се придружени лабели, но може да се користи и за организација на внатрешна структура на табела

-Дијагонален баланс
	*Се подредуваат елементите на страницата асиметрично, но се поставува баланс на визуелната тежина со поставување на елементи во горниот лев и долниот десен ќош
	*Се користи кај простори кои имаат наслов што се поставува горе на истиот и акциски копчиња на дното
	*Страницата е мала и нема потреба од лизгање да се види нејзината содржуна

-Responsive disclosure
	*Се почнува со минимален интерфејс, а потоа се води корисникот чекор по чекор со прикажување на нови делови од интерфејсот по завршување на секој чекор
	*Се користи кога корисникот треба да заврши комплексна задача, но се избегнува вошебник што секој чекор го прикажува во различен прозорец
	*Интерфејсот се креира пред очите на корисникот
	*При секој следен чекор се открива нов дел од интерфејсот со што тој динамички расте

-Responsive enabling
	*Се прикажува целиот интерфејс, но најголем дел од акциите се оневозможени, потоа се води корисникот чекор по чекор со овозможување на дополнителни контроли по завршување на секој чекор
	*Се користи кога станува збор за комплексен интерфејс каде користењето на волшебник и завршување на делови од задачата на нови прозорци е несоодветно

-Liquid Layout
	*Кога корисникот ќе ја смени големината на прозорецот, се менува големината на содржината со цел страницата да остане постојано пополнета
	*Се користи кога корисникот ја менува големината на прозорецот
	*Се дозволува слобода на корисникот да ја одреди димензијата на прозорецот со кој ќе работи