interactiune om-calculator (proiectarea interfeţei web)

InteracInteracţţiune omiune om--calculatorcalculator

Dr. Dr. SabinSabin--CorneliuCorneliu BuragaBuraga –– www.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

11

InteracInteracţţiune omiune om--calculatorcalculator Proiectarea interfeProiectarea interfeţţei Webei Web

Dr. Sabin-Corneliu Buraga Facultatea de Informatică

Universitatea “A.I.Cuza”

Iaşi, România httphttp://://www.infoiasi.rowww.infoiasi.ro/~/~busacobusaco//



22

“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.”

Hans Hofmann



33

CuprinsCuprins

•

Proiectarea interfeţei Web– Preliminarii– Cerinţe– Structura & organizarea sitului– Structura paginilor Web individuale– Aspecte privind conţinutul– Accesibilitatea & internaţionalizarea– Metodologii de proiectare



44

•

Categorii de aplicaţii Web–

Centrate pe documente

(pagini statice, situri de companii)–

Interactive

(expoziţii virtuale, situri de ştiri,

planificare de călătorii)–

Tranzacţionale (online

banking, soluţii B2B, workflow-uri)

–

Colaborative

(chat, e-learning, servicii P2P,

wiki)–

Orientate spre portaluri (comunităţi, afaceri)

–

De tip ubicuu

(servicii bazate pe locaţie, disponib. multi-platformă, servicii configurabile)

–

Web social

(blog-uri, spaţii de lucru virtuale, filtrare colaborativă)

–

Web semantic

(sisteme de recomandare, mediatizare, management de cunoştinţe)

IntroIntroE

voluţia in

timp

a comp

lexităţii



55

•

Aspecte esenţiale privind designul Web în vederea facilitării utilizabilităţii:–Information

Architecture

Design

–Presentation

Design–Interaction

Design

IntroIntro



66

•

Scopul & obiectivele unui sit Web–Aspecte

•

Identificarea publicului-ţintă•

Stabilirea scopului

(mission statement)

–De găsit o

motivaţie

reală: “Find a need and fill it.”

•

Cunoaşterea obiectivelor principale•

Întocmirea unui plan concis privitor la informaţiile disponibile pe sit

IntroIntro



77

•

Aspecte comune: –stabilirea

standardelor

de calitate

–licitare & negociere•

aspect important: copyright-ul

–documentare–verificare & validare–management

CerinCerinţţee



88

•

Specifice: – lipsa unei structuri reale (tangibile)

•

contrast cu materialele tipărite– multi-disciplinaritate– necunoaşterea publicului-ţintă real– volatilitatea cerinţelor & constrângerilor– mediu de operare impredictibil– impactul sistemelor tradiţionale (legacy) – aspecte calitative

diferite

– inexperienţa vizitatorilor– termenul de lansare

CerinCerinţţee

“You cannot train Web surfers.”



99

•

Exemplu: situl

Web al unui

muzician– “To maintain and develop lasting relationships

with fans of Robert’s music. In addition to being visually and emotionally appealing and appropriate to Robert’s fan base, the site should be a reliable source for current information on Robert’s activities and provide consistently updated audio and visual stimuli that encourage repeated visits from fans.”

CerinCerinţţee



1010

•

Privitoare la conţinut (audienţă, context de navigare, preferinţe, disponibilitate etc.)

•

Interacţiune Web•

Calitative (funcţionalitate, fiabilitate, utilizabilitate, eficienţă, mentenabilitate, portabilitate)

•

Privitoare la mediul de execuţie (e.g., wireless)•

Referitoare la evoluţie

•

Vizând Web-ul

social

(content mashup): “It’s yours to take, re-arrange and re-use”

NoiNoi tipuritipuri

de cde cerinerinţţee



1111

•

Design Web vs.

design clasic–Cine?–Ce?–Când?–Unde?

Proiectarea interfeProiectarea interfeţţei Webei Web



1212

•

Cine?– Posibilitatea de a afla cine este creatorul paginii– Aspect foarte important pentru situri Web

informaţionale (articole, ştiri, documentaţii,…)




1313

•

Ce?– Ce anume comunică un document/sit Web

– Vizitatorul trebuie rapid să-şi dea seama asupra tematicii oferite de un sit sau de serviciile puse la dispoziţie de o aplicaţie Web

– Atenţie la titlul paginii!•

New

page, Untitled

document




1414

•

Când?– De indicat data ultimei actualizări a conţinutului

– Aspect esenţial pentru situri de comerţ electronic, legislative, cetăţeneşti etc.

–

15 iulie 1997 vs.

07 ianuarie 2033




1515

•

Unde?– Apartenenţa & afilierea autorului

– Recurgerea la strategii privind identitatea (vizuală)




1616



1717

•

Navigarea prin sit–exploatarea

“puterii”

hipertextului

–aspect negativ: absenţa orientării în cadrul sitului




1818

•

Navigarea prin sit– Strategii

de navigare:

•

Meniuri•

Legături

conexe

•

Paginări•

Cele mai recente vizitate pagini

•

Harta sitului

(site map)•

Facilităţi de căutare în cadrul sitului

•

…




1919



2020

•

Proiectarea mijloacelor de căutare internă– Acordarea de sugestii –

e.g., spelling

suggestions,

sinonime (car

⇒ automobile, truck,…) – Oferirea de soluţii (cele mai frecvente răspunsuri)– Îmbunătăţirea interacţiunii –

utilizabilitatea

•

Integrarea în designul general al sitului•

Tactici: oferirea unui următor pas de realizat (mai ales când nu există rezultate), tips, exemple, rafinarea cererii




2121




2222

•

Proiectarea mijloacelor de căutare internă– In pagina de redare a rezultatelor, va fi afişată şi

interogarea iniţială, cu posibilitatea modificării ei– Utilizatorul să aibă libertatea de a efectua o nouă

interogare– Afişarea a cel puţin 10 rezultate/pagină– Afişarea numărului total de pagini de rezultate– Facilitarea navigării între paginile de rezultate– Evitarea “fundăturilor”

–

oferirea de suport, tips,…

– Fiecare rezultat să includă informaţii utile




2323

•

Proiectarea mijloacelor de căutare internă– Calitatea este dată şi de cea a conţinutului,

plus

a modului de structurare•

Recurgerea la meta-date (e.g., tagging

al

conţinutului)

– Folosirea unui vocabular înţeles de către audienţă•

Utilizatorul chiar va căuta vreodată Propil-3374f?

– Facilitarea filtrării & sortării datelor– Utilizarea unor tehnici de vizualizare complexă

•

Linii

temporale, tag

clouds, semantic zoom, 3D etc.




2424




2525

•

Clickstreams & click density (Garrick

Schmitt & Marisa Gallagher, 2007)

– Click

Density– Analiza legăturilor– Analizarea

formularelor Web

– Scrolling

Analysis– Within-Page

Drop-off

Analysis

– Between

Page Drop-off

Analysis– Flash Tracking– Chestionare privind atitudinea vizitatorilor– Colectarea datelor vizând comportamentul




2626

•

Asigurarea contextului–Utilizatorul nu are acces la întreaga

informaţie disponibilă pe un sit




2727

•

Asigurarea contextului

– strategii:–Consistenţa prezentării–Layout

unitar

–Grupare judicioasă a conţinutului•

Cronologic, alfabetic, geografic, după subiect, ierarhic, după

criterii

vizuale, mixt

–Recunoaştere

facilă a datelor

de interes (recognition,

not

recall)

–etc.




2828




2929

•

Accesul direct & rapid – Evitarea

supra-încărcării informaţionale

– Transferul

rapid

al documentelor

Web

– Soluţii: paginarea conţinutului, optimizări la nivel de cod, redimensionarea imaginilor, evitarea siturilor realizate integral în Flash, prezentări alternative,…




3030

•

Asigurarea simplităţii & consistenţei– Less is more + keep it simple– Utilizarea

metaforei

şi

şabloanelor

(template-urilor)

– Cel

mai

mult

contează uşurinţa interacţiunii şi

îndeplinirea scopurilor utilizatorului




3131



3232

•

Pagina de start (home page)– Sumar

& scop, tipul conţinutului,…

– Oferă maniere de parcurgere•

Paginile subiectelor principale– Subiecte de interes ale sitului

•

Paginile subsidiare– Divizează conţinutul, oferă acces la resurse etc.– Trebuie să conţină legături de revenire

la pagina de start

StructuraStructura unuiunui

sitsit



3333

•

Organizarea informaţiilor

la nivel

de sit–Realizarea relaţiilor (logice) dintre module

de informaţii–De analizat

din punct

de vedere:

estetic, semantic, al utilităţii •

conform scopurilor


sitsit



3434

•

Organizarea informaţiilor la nivel de sit–Secvenţială

•

Cronologie•

General

⇒ particular

•

Alfabetică–Caroiaj (grid)

•

Conform unor

axe prestabilite –

e.g., timp & tematică–Ierarhică–In reţea

•

Relaţii complexe între module (documente) de informaţii


sitsit



3535

•

Tipuri

frecvente

de structuri

Web– All-in-one: doar

pagina

principală

– Flat

(monocline)– Index

– Daisychain


sitsit



3636

•

Tipuri

frecvente

de structuri

Web– Strict hierarchy

– Multi-dimensional hierarchy


sitsit



3737

•

Tipuri

frecvente

de structuri

Web– Search


sitsit



3838

•

De asigurat

consistenţa– Mărimea, culoarea & poziţionarea unitară ale

meniurilor de navigare, siglelor, conţinutului etc.•

Modificările importante vor fi anunţate– Secţiunea “Noutăţi”

(What’s

New, News),

blog

etc.

•

Posibilităţi de contact– Prin e-mail, via un formular, secţiunea “Contact”,…– Forumuri

sau

blog-uri

corporatiste


sitsit



3939

•

Alte secţiuni– Adrese Web favorite

situri

conexe/partenere, blogroll,…– Întrebări adresate frecvent

FAQ (Frequently Asked Questions)– Condiţii de utilizare sau asumare a răspunderii

Disclaimer– Politica de confidenţialitate

Privacy policy


sitsit



4040




4141

•

Instrumentele

de navigare

prin

sit– Meniu orizontal de navigare


sitsit



4242

•

Instrumentele

de navigare

prin

sit

–Meniu vertical •

Plat

•

Expandabil

•

Bi-nivel

Plasat în stânga/dreapta paginii


sitsit



4343

•

Instrumentele

de navigare

prin

sit– Meniuri

combinate

•

Vertical + orizontal

•

Pe

trei

coloane: vertical, orizontal, vertical

– Păstrarea contextului –

breadcrumb navigation


sitsit



4444

•

Instrumentele de navigare prin sit

– altele:– Navigare matriceală –

2 axe navigaţionale

– Paginarea conţinutului– Plasarea mijloacelor de navigare în subsol

•

expansive footer

navigation– Navigare socială– Navigare

Web cartografică

–

http://geodistribution.ca

– Navigări complexe –

e.g., tehnici 3D, bazate pe feedback-ul utilizatorului,…

– Navigare bazată pe termeni de conţinut (tag

navigation)


sitsit



4545


sitsit



4646


sitsit



4747

•

Instrumentele

de navigare

prin

sit

–Greşeli frecvente:•

Structura de navigare superficială – plată (flat)

•

Structura de navigare excesiv de adâncă


sitsit



4848

•

Separarea

datelor

de prezentare

(formă + navigare) şi de procesarea

lor

efectivă

•

Probleme:– modificarea frecventă a conţinutului

– schimbarea periodică a interfeţei

– păstrarea integrităţii legăturilor

OrganizareaOrganizarea situluisitului

Web Web



4949

•

Organizarea

poate

fi

influenţată şi de reacţiile

vizitatorilor

– Audienţa

internaţională– Colectarea

(automată) de feedback

de la utilizatori

– Realizarea

de chestionare

on-line

–

Web surveys

•

Verificarea

& testarea

frecventă

OrganizareaOrganizarea situluisitului

Web Web



5050

•

Organizarea

paginilor

Web individuale:–Aranjament

(layout)

–Fluxul

vizual

(flow)–Cromatica–Aspecte privind conţinutul

StructuraStructura paginilorpaginilor

WebWeb



5151

Aranjamentul

(layout-ul)

AranjamentulAranjamentul ((layoutlayout--ulul))



5252

•

Fiecare pagină Web include un container (container

block) care va cuprinde

conţinutul propriu-zis

•

Tipuri

de layout

(Jason Beaird, 2007):– fix

– lăţime prestabilită

– lichid

– lăţime variabilă




5353

•

Poate

fi

stabilit

via grilă

(grid)

•

Reguli– Secţiunea de aur

– Cele 3 coloane

– Simplitatea

– Balansul

– Unitatea




5454

•

Balansul–asigurarea

echilibrului

vizual

pe

orizontală/verticală–simetrie

orizontală, bilaterală

sau

radială

–simetrie

versus

asimetrie




5555




5656

•

Unitatea– Maniera

în care elemente diferite

interacţionează

în cadrul aceluiaşi document (aceleaşi pagini Web)– Uzual, se realizează prin grupare– Criterii

de grupare:

•

Spaţială•

Cromatică

•

Via elemente

(grafice) de separare –

e.g., linii orizontale, aliniere diferită etc.


A se A se revedearevedea principiulprincipiul

GelstaltGelstalt



5757

•

Menţinerea structurii

aranjamentului

se poate

realiza prin repetarea elementelor de design

pe

parcursul

tuturor

paginilor

Web ale situluişabloane de proiectare (design patterns)

•

Situri

de interes:– A List Apart: www.alistapart.com– van Welie’s Design Patterns: www.welie.com– Web Patterns: webpatterns.org– Yahoo! Design Patterns:

http://developer.yahoo.com/ypatterns/atoz.php




5858

Şabloane de proiectareLeft column navigation




5959

Şabloane de proiectareRight column navigation




6060

Şabloane de proiectareThree-column navigation




6161

Şabloane de proiectareThree columns with content first




6262

Şabloane de proiectareThree-column content




6363

•

Fluxul

vizual

poate

fi realizat şi via

contrastasigurarea focalizării atenţiei

•

Tipuri

de contrast pe

baza

variabilelor

vizuale:

FluxulFluxul vizualvizual

((flowflow))



6464



6565

CromaticaCromatica

•

Schema de culori: roroşşuu

(#FF0000):– Mental: fierbinte, foc, căldură, sânge– Asociaţii directe: pericol, Crăciun, Mărţişor, steag– Impresii obiective: pasional, incitant, activ– Impresii subiective: intensitate, furie, capacitate,

ferocitate– Stimulează în cel mai mare grad emoţiile–

“In

an overpowering

red

environment, lengths

of material

appear

longer, weights

feel

heavier, time

seems

to

pass more slowly

and

temperatures

seem

warmer.

The

workers

tire

more easily

and

have

more

accidents.”



6666

CromaticaCromatica

•

Schema de culori: galbengalben

(#FFFF00):– Mental: atenţie, test, încetinire– Strălucire, cheerful– “Too

much

yellow

can

supposedly

cause

an increase

in overall

frustration.”– Folosit drept cod vizual

pentru instalaţii de ţevi

sau cabluri– Perceput ca desemnând rapiditatea– Poate conduce de confuzii



6767

CromaticaCromatica

•

Schema de culori: verdeverde

(#00FF00):– Semnificaţii: mergi, OK, liber, vegetaţie, siguranţă– Induce un sentiment de calm– Supra-folosirea conduce la plictiseală– “One company repainted its red tool boxes green

after employees complained of the boxes being too heavy. The employees were pleased with their new lighter tool boxes.”



6868

CromaticaCromatica

•

Schema de culori: albastrualbastru

(#0000FF):– Semnificaţii: rece, apă, calm, cer, neutralitate– “The best colour

for break areas, because it

decreases blood pressure, pulse and respiration.”– Un mediu albastru poate ajuta la tratarea

migrenelor, hipertensiunii sau insomniei



6969

CromaticaCromatica

•

Schema de culori: violetviolet

(#CC00FF):– Cea mai odihnitoare (restful) culoare– Scade presiunea sângelui, pulsul & respiraţia– Pentru suprafeţe mari, devine foarte enervantă

•

Schema de culori: oranjoranj

(#FF6600):– Asociată

uneori

cu “ieftin”

(cheap)

– Se foloseşte uzual în conjuncţie cu roşu/galben



7070

CromaticaCromatica

•

Schema de culori:– Gri –

neutralitate

– Alb –

neutralitate http://www.hcibook.com/alan/papers/is-white-a-colour-2005/

– Culori calde –

acţiune

(click here!), necesitatea unui răspuns, proximitate

– Culori reci –

afişarea stării, informaţii de fundal, depărtare



7171

CromaticaCromatica

•

Schema de culori

–

preferinţe cromatice:– 1941: bărbaţii preferau

cel mai mult albastrul,

urmat de roşu, verde, violet, oranj & galben; femeile preferau

la fel, dar galbenul e mai important

decât oranjul– 1969: oranjul

este

apreciat cel mai mult,

urmat de albastru, apoi de verde

– Pentru

Botswana: albastrul cel mai preferat, urmat de verde, iar cele mai puţin apreciate

au fost roşul & galbenul



7272

CromaticaCromatica

•

Proprietăţi

– temperatura:– culori

calde

– culori

reci



7373

CromaticaCromatica

•

Proprietăţi

– valoarea (value):– măsoară gradul de luminozitate



7474

CromaticaCromatica

•

Proprietăţi

–

intensitatea/saturaţia (saturation)

– exprimă

gradul

de “vivacitate”



7575

CromaticaCromatica

•

Schema de culori– Roata

culorilor

pentru

Web:



7676

CromaticaCromatica

•

Schema de culori– Armonii

monocrome

– Armonii

analoage

– Armonii

complementare



7777

CromaticaCromatica•

Schema de culori– Armonii

complementare

divizate

(split complement harmonies)

– Armonii

cu 4 culori

(tetrad colour

harmonies)



7878

CromaticaCromatica



7979

CromaticaCromatica

•

Schema de culori–Remarci (Linda Goin, 2005):

•

Contextul în care apare o culoare este

foarte important

•

Anumite culori au conotaţii multiple (e.g., roşu = pasiune, dar roşu = furie)

•

Atenţie la utilizarea internaţională!



8080

CromaticaCromaticaChina fericirefericire nanaşşteretere

putereputereparadis paradis

norinoriparadis paradis

norinorimoarte puritate

Franţa aristoaristo-- cracraţţieie

tempotempo-- rarrar

crimicrimi-- nalitatenalitate

liberliber pacepace

neutralitate

Indiaviaviaţţă ă

creaticreati-- vitatevitate

successuccesprospeprospe--

ritateritate fertilfertil

moarte puritate

Japonia furie furie pericolpericol

gragraţţieie nobilnobil

viitor viitor tineretinereţţee

răutaterăutate moarte

USA pericol, pericol, stopstop

lalaşşitate itate atenatenţţieie

sigusigu-- ranranţţăă

mascumascu-- linitatelinitate

puritate



8181

SUASUA CehiaCehia

MexicMexic EEgiptgipt



8282

CromaticaCromatica•

Schema de culori– Combinatiile

“atipice”

pot sugera

mesaje

speciale



8383

CromaticaCromatica

•

Tendinţe actuale:– Fundalurile adoptă nuanţe neutre (gri),

odihnitoare, bazate

–

eventual –

pe

dégradé-uri

– Informaţiile de interes & pictogramele sunt

redate utilizând

culori “puternice”

(strong)



8484

CromaticaCromatica



8585

CromaticaCromatica



8686

ConConţţinutulinutul

•

Aspecte

privind

tipografia

(typography):– Corpul de literă– “Culoarea” tipografică– Măsura– Leading-ul– Ritmul vertical– Linia albă

– Vezi

http://webtypography.net/sxsw2007/



8787


•

Aspecte

privind

tipografia

(typography):– “Culoarea” tipografică:

indică densitatea texturii conţinutului unei pagini•

“It refers only to the darkness or blackness of the letterform in mass.” (Robert Bringhurst, The Elements of Typographic Style)

– Măsura: desemnează lungimea unei linii de text•

element-cheie al uşurinţei parcurgerii conţinutului

•

valori

recomandate: 45-75 caractere

(30-50 em)



8888




8989


•

Aspecte

privind

tipografia

(typography):– Leading (line-spacing):

spaţiul vertical dintre 2 linii de text•

uzual, titlurile (headings) nu necesită leading

•

fonturile

masive vor avea nevoie de leading mai mare

•

fonturile

sans-serif necesită mai mult leading decât cele

cu serife

•

lăţimea mai mare a liniei

conduce la creşterea leading-ului



9090


•

Aspecte

privind

tipografia

(typography):–Linia

albă

(white line): spaţiul vertical

liber dintre 2 paragrafe adiacente•

Tipografia

tradiţională foloseşte tehnica

aliniatului paragrafelor

(indentation)–Indicarea

unui

paragraf

nou

•

Tehnici: aliniat, linia albă, letrina, ornamente,…•

De folosit în mod unitar un singur mijloc

•

Primul

paragraf

nu

are aliniat



9191


•

Aspecte

privind

tipografia

(typography):–Fonturile

“sigure”

pentru

Web



9292


•

Textura:– Oferă o înfăţişare distinctă a suprafeţelor

– Se bazează pe puncte, linii, forme

(shapes)

– Vezi şi cele discutate în cursul anterior



9393


•

Punctul

(dot, point)– element fundamental al designului

grafic

– prin

grupare, poate

sugera

imagini (linii, forme, volume) –

tehnica

halftone

•

Linia

(line)– proprietăţi importante:– direcţie, grosime, curbură– liniile diagonale –

e.g., haşurile

–

sugerează

mişcarea

(vivacitatea)– liniile curbe sunt deosebit de expresive



9494


•

Forma

(shape): creată pe baza liniilor– categorii: geometrice

sau

libere/organice

(freeform)

– formele geometrice perfecte induc

un mesaj tehnic/mecanic

– formele libere sunt mai abstracte,

sugerând informalitate, spontaneitate, umanism



9595


•

Volumul–a

treia dimensiune

spaţială a conţinutului

–indică

profunzimea (depth)–aspecte

de interes:

•

perspectiva: alegerea unui punct de fugă

(vanishing point)

•

proporţia•

lumina

& umbra



9696


Volumul



9797

•

Grafica–Alegerea conţinutului grafic:

relevant, interesant, atrăgător–Utilizarea ilustraţiilor & fotografiilor

•Ilustraţii de calitate•Minimizarea timpului de încărcare•Asigurarea accesibilităţii

(descrieri alternative textuale)




9898

ExempleExempleGreşeli:



9999

ExempleExemple

Discuţii:



100100

ExempleExemple

Discuţii:



101101

ExempleExemple

Discuţii:



102102

ExempleExemple

Discuţii:



103103

ExempleExempleDiscuţii:



104104

ExempleExempleDiscuţii:

prevenirea

erorilor



105105

•

Creşterea impactului social folosind tehnici IA – după M. Hanley, T. Coates, M. Biddulph, L. Chan, “Real information architecture: new mighty deeds”, IA Summit 2007

StudiuStudiu de de cazcaz

Varianta iniţială



106106

•

Varianta

I– Îmbogăţirea informaţiilor

oferite cu datele preluate de pe Web (via alte situri)

StudiuStudiu de de cazcaz



107107

•

Varianta

II– Facilitarea accesului la

conţinutul pus la dispoziţie•

invitaţie la interacţiuni sociale directe

•

totul

bazat

pe

servicii deschise, accesate

via

API-uri

flexibile



108108

•

Accesibilitatea = accesul cu succes la informaţii şi tehnologia informaţiei de către persoanele cu nevoi speciale: vizuale, auditive, motorii, cognitive

•

Realităţi: – 20% din populaţia SUA prezintă un anumit tip de

dizabilitate, din care 10% –

probleme severe– 4% persoane cu probleme majore de vedere

AccesibilitateaAccesibilitatea



109109


Utilizabilitatea generală

Afectează toţi utilizatorii

Barierele

fiziceAfectează doar

utilizatorii cu dizabilităţi

VariabileInconveniente

pentru

unii

Bariere

pentru

alţii



110110

•

Esenţialmente, trebuie oferite mijloace alternative facilitând activităţile utilizatorilor, conform punctelor lor de vedere şi stilului de lucru al acestor persoane– WAI (Web Accessibility Initiative): www.w3.org/WAI/

•

Tipuri de dizabilităţi:– Vizuale– Auditive– Legate de mobilitate– Cognitive

–

www.webaim.org/articles/cognitive/

– Privitoare la factori

afectivi

(seizure

disorders)




111111

•

Dizabilităţile pot fi temporare (de scurtă sau de lungă durată) ori permanente –

unele provenind din

naştere

•

Strategii generale:– Descrieri alternative ale conţinutului multimedia

(imagini, audio, video)– Organizarea judicioasă a conţinutului şi mijloacelor

de navigare– Oferirea de suport de interacţiune via tastatură– Utilizarea de formate standardizate




112112

•

Pentru utilizatorii cu probleme de vedere:– Mijloace pentru mărirea/micşorarea fontului– Posibilitatea de a creşte contrastul– Facilităţi pentru selectarea & copierea textului

•

Pentru utilizatorii cu probleme de auz:– Subtitrări textuale pentru orice conţinut video– Alegerea între conţinut audio şi cel textual alternativ

•

Pentru utilizatorii prezentând Attention

Deficit Disorder

(ADD):

– Mijloace de focalizare

rapidă a atenţiei: conţinut clar & concis, design minimalist etc.




113113

•

Preferinţele lingvistice şi localizarea fizică ale

utilizatorului

– Language

–

limbajul dorit de utilizator– Locale

–

preferinţele culturale privitoare

la

formatarea

numerelor

& datei, modul de sortare

etc.•

Diferenţa majoră faţă de la alte preferinţe: “if

the

user

can’t

read

the

description

of the

preference, he/she

doesn’t

even

have

a chance to

make

a choice”

(Achim

Ruopp, 2007)

•

A se vizita

www.w3.org/International/

InternaInternaţţionalizareaionalizarea



114114

InternaInternaţţionalizareaionalizarea

Evitarea folosirii graficii în locul textului

traductibil

Evitarea lăţimilor absolute (textele în alte limbi pot ocupa mai mult)

Pe cât posibil, trebuie scrise fraze complete –

apar probleme la traducere



115115

•

Vocabularul

vizual

creat

de Jesse Garrett: www.jjg.net/ia/visvocab/– Suită de simboluri utilizate la descrierea la nivel

înalt a unor concepte –

e.g.,

proces de interacţiune•

Privire

de ansamblu a interacţiunii (macrostructură)

– Fluxul interacţiunii urmează căi (paths) stabilite– Utilizatorul, în urma acţiunilor realizate,

se „deplasează” pe aceste căi– Acţiunile vor

conduce

din partea sistemului

la generarea de

rezultate

(results)

MetodologiiMetodologii de de proiectareproiectare



116116

•

Vocabularul

vizual

creat

de Jesse Garrett:– Exemplu: modelarea unei decizii privind

autentificarea utilizatorului




117117

Pathfinder

(Heymassi

et al., 2006)




118118

•

Pathfinder

(Heymassi

et al., 2006)–Recurgerea

la template-uri

(wireframes)

–Specificaţii textuale vs.

specificaţii vizuale–Specificaţiile vizuale facilitează descrierea

mediului de lucru, fluxul de activităţi, structurarea conţinutului în funcţie de categoriile de utilizatori etc.

–“Think

flow, then

features”–Utilizarea

prototipurilor




119119

Descrierea

vizuală

a fluxului

(workflow)



120120

•

XP (Extreme Programming)– “XP is

a light

weight

methodology

for small-to-

medium-sized

teams

developing

software in the

face of vague

or rapidly

changing

requirement”

(Kent Beck)– Permite

oferirea

de rezultate

vizibile

frecvent,

cu implicarea

clientului– Focalizarea

pe

oameni, colaborare

& comunicare

– Detalii

la www.ExtremeProgramming.org




121121


•

Simple design

•

Planning game

•

Test first, then develop

•

System metaphor

•

Pair programming

•

Coding standards

•

Sustainable pace

•

Frequent small releases

•

Continuous integration

•

Refactoring

•

On-site customer

XP (Extreme Programming)



122122

•

Optimizarea sitului (implicit a designului) are loc permanent

•

Fenomenul perpetual

beta– A se vizita The

Museum

of Modern Betas:

http://momb.socio-kybernetics.net/•

Situl trebuie să reacţioneze în timp-real

la interacţiunea cu utilizatorul

““ConcluziiConcluzii””



123123

•

Un număr tot mai mare de servicii populare disponibile on-line se bazează pe conţinut generat de utilizatori

(conform Alexa.com):

1. Yahoo! 2. MSN 3. Google 4. YouTube 5. MySpace 6. Baidu 7. Windows Live 8. Orkut 11. Wikipedia 13. Microsoft 14. eBay 15. Blogger 19. Hi5 23. Amazon 31. Friendster 35. IMDB 42. Flickr 48. CNN 52. AOL 77. Apple 80. Digg 94. Adobe 97. About 98. Sourceforge

⇒necesitatea

altor

metode/tehnici

de design Web

““ConcluziiConcluzii””



124124

RezumatRezumat

•

Proiectarea interfeţei Web– Preliminarii– Cerinţe– Structura & organizarea sitului– Structura paginilor Web individuale– Aspecte privind conţinutul– Accesibilitatea & internaţionalizarea– Metodologii de proiectare



125125

ÎÎntrebărintrebări??

interactiune om-calculator (proiectarea interfeţei web)

Technology

DEZVOLTAREA ŞI REALIZAREA INTERFEŢEI DE ACCES LA … · Revista Română de Informatică şi Automatică, vol. 21, nr. 2, 2011 17 DEZVOLTAREA ŞI REALIZAREA INTERFEŢEI DE ACCES

Catalogul partajat al Bibliotecii Municipale B.P. Hasdeu - instrument de interactiune bibliotecar-utilizator

Interactiune om-calculator (Metodologii de proiectare)

Lucrul La Calculator

Misiune: calculator nou

Arhitectura Unui Calculator

Interactiune Teren-Structura

Noul calculator

Interactiune Om-Calculator Curs 6 Potrivirea si urmarirea trasaturilor in secvente de ...users.utcluj.ro/~tmarita/HCI/C6.pdf · 2016-11-09 · (vitezelor) de miscare ale punctelor

Interactiune om-calculator - users.utcluj.rousers.utcluj.ro/~tmarita/HCI/C9.pdf · Technical University of Cluj Napoca Computer Science Department IOC Sistem biometric Solutii biometrice

Interactiune om-calculator -- Interacţiunea cu utilizatorul (I)

Interactiune om-calculator -- Interacţiunea cu utilizatorul (II)

Initiere calculator

Infractionalitatea Pe Calculator

Aplicatia Calculator

Curs Depanare Calculator

Rezumat Modelarea Fenomenelor de Interactiune

- Virusi de Calculator

Initiere Operare Calculator

Operator Calculator

Facebook – interactiune cu minus?

Calculator curs

Interactiune om-calculator (Tipuri de interfete & proiectare)

Interactiune om-calculator (Educarea & instruirea utilizatorilor)

Nicoleta Radulescu - Fundatii de Adancime. Parametri Caracteristici de Interactiune

Volumul de lucrari ale Conferintei Nationale de Interactiune Om-Calculator -- RoCHI 2008

Grafica Pe Calculator

Diagramele de Interactiune

Glosar Calculator

OPERATOR CALCULATOR ELECTRONIC ŞI REŢELE calculator retea... · ... Operator calculator electronic şi reţele ... Procesul de lucru în cazul unui operatorul calculator electronic

calculator dobanzi

Calculator rambursare credite

Interactiune Clinica i

Interactiunea om-calculator

COMPONENTELE UNUI CALCULATOR