Transcript
Page 1: 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//

Page 2: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

22

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

Hans Hofmann

Page 3: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 4: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 5: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

55

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

Architecture

Design

–Presentation

Design–Interaction

Design

IntroIntro

Page 6: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 7: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

77

Aspecte comune: –stabilirea

standardelor

de calitate

–licitare & negociere•

aspect important: copyright-ul

–documentare–verificare & validare–management

CerinCerinţţee

Page 8: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.”

Page 9: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 10: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 11: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

1111

Design Web vs.

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 12: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

1212

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 13: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 14: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 15: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

1515

Unde?– Apartenenţa & afilierea autorului

– Recurgerea la strategii privind identitatea (vizuală)

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 16: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

1616

Page 17: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

1717

Navigarea prin sit–exploatarea

“puterii”

hipertextului

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 18: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 19: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

1919

Page 20: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 21: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

2121

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 22: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 23: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 24: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

2424

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 25: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 26: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

2626

Asigurarea contextului–Utilizatorul nu are acces la întreaga

informaţie disponibilă pe un sit

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 27: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 28: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

2828

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 29: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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,…

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 30: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 31: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

3131

Page 32: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 33: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

StructuraStructura unuiunui

sitsit

Page 34: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

StructuraStructura unuiunui

sitsit

Page 35: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

3535

Tipuri

frecvente

de structuri

Web– All-in-one: doar

pagina

principală

– Flat

(monocline)– Index

– Daisychain

StructuraStructura unuiunui

sitsit

Page 36: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

3636

Tipuri

frecvente

de structuri

Web– Strict hierarchy

– Multi-dimensional hierarchy

StructuraStructura unuiunui

sitsit

Page 37: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

3737

Tipuri

frecvente

de structuri

Web– Search

StructuraStructura unuiunui

sitsit

Page 38: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

StructuraStructura unuiunui

sitsit

Page 39: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

StructuraStructura unuiunui

sitsit

Page 40: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4040

Proiectarea interfeProiectarea interfeţţei Webei Web

Page 41: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4141

Instrumentele

de navigare

prin

sit– Meniu orizontal de navigare

StructuraStructura unuiunui

sitsit

Page 42: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4242

Instrumentele

de navigare

prin

sit

–Meniu vertical •

Plat

Expandabil

Bi-nivel

Plasat în stânga/dreapta paginii

StructuraStructura unuiunui

sitsit

Page 43: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4343

Instrumentele

de navigare

prin

sit– Meniuri

combinate

Vertical + orizontal

Pe

trei

coloane: vertical, orizontal, vertical

– Păstrarea contextului –

breadcrumb navigation

StructuraStructura unuiunui

sitsit

Page 44: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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)

StructuraStructura unuiunui

sitsit

Page 45: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4545

StructuraStructura unuiunui

sitsit

Page 46: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4646

StructuraStructura unuiunui

sitsit

Page 47: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

4747

Instrumentele

de navigare

prin

sit

–Greşeli frecvente:•

Structura de navigare superficială – plată (flat)

Structura de navigare excesiv de adâncă

StructuraStructura unuiunui

sitsit

Page 48: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 49: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 50: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5050

Organizarea

paginilor

Web individuale:–Aranjament

(layout)

–Fluxul

vizual

(flow)–Cromatica–Aspecte privind conţinutul

StructuraStructura paginilorpaginilor

WebWeb

Page 51: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5151

Aranjamentul

(layout-ul)

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 52: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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ă

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 53: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5353

Poate

fi

stabilit

via grilă

(grid)

Reguli– Secţiunea de aur

– Cele 3 coloane

– Simplitatea

– Balansul

– Unitatea

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 54: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5454

Balansul–asigurarea

echilibrului

vizual

pe

orizontală/verticală–simetrie

orizontală, bilaterală

sau

radială

–simetrie

versus

asimetrie

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 55: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5555

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 56: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.

AranjamentulAranjamentul ((layoutlayout--ulul))

A se A se revedearevedea principiulprincipiul

GelstaltGelstalt

Page 57: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 58: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5858

Şabloane de proiectareLeft column navigation

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 59: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

5959

Şabloane de proiectareRight column navigation

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 60: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

6060

Şabloane de proiectareThree-column navigation

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 61: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

6161

Şabloane de proiectareThree columns with content first

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 62: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

6262

Şabloane de proiectareThree-column content

AranjamentulAranjamentul ((layoutlayout--ulul))

Page 63: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

6363

Fluxul

vizual

poate

fi realizat şi via

contrastasigurarea focalizării atenţiei

Tipuri

de contrast pe

baza

variabilelor

vizuale:

FluxulFluxul vizualvizual

((flowflow))

Page 64: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

6464

Page 65: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.”

Page 66: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 67: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.”

Page 68: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 69: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 70: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 71: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 72: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7272

CromaticaCromatica

Proprietăţi

– temperatura:– culori

calde

– culori

reci

Page 73: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7373

CromaticaCromatica

Proprietăţi

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

Page 74: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7474

CromaticaCromatica

Proprietăţi

intensitatea/saturaţia (saturation)

– exprimă

gradul

de “vivacitate”

Page 75: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7575

CromaticaCromatica

Schema de culori– Roata

culorilor

pentru

Web:

Page 76: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7676

CromaticaCromatica

Schema de culori– Armonii

monocrome

– Armonii

analoage

– Armonii

complementare

Page 77: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7777

CromaticaCromatica•

Schema de culori– Armonii

complementare

divizate

(split complement harmonies)

– Armonii

cu 4 culori

(tetrad colour

harmonies)

Page 78: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

7878

CromaticaCromatica

Page 79: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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ă!

Page 80: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8080

CromaticaCromaticaChina fericirefericire nanaşşteretere

putereputereparadis paradis

norinoriparadis paradis

norinorimoarte puritate

Franţa aristoaristo-- cracraţţieie

tempotempo-- rarrar

crimicrimi-- nalitatenalitate

liberliber pacepace

neutra- litate

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

Page 81: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8181

SUASUA CehiaCehia

MexicMexic EEgiptgipt

Page 82: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8282

CromaticaCromatica•

Schema de culori– Combinatiile

“atipice”

pot sugera

mesaje

speciale

Page 83: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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)

Page 84: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8484

CromaticaCromatica

Page 85: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8585

CromaticaCromatica

Page 86: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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/

Page 87: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8787

ConConţţinutulinutul

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)

Page 88: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8888

ConConţţinutulinutul

Page 89: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

8989

ConConţţinutulinutul

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

Page 90: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9090

ConConţţinutulinutul

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

Page 91: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9191

ConConţţinutulinutul

Aspecte

privind

tipografia

(typography):–Fonturile

“sigure”

pentru

Web

Page 92: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9292

ConConţţinutulinutul

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

– Se bazează pe puncte, linii, forme

(shapes)

– Vezi şi cele discutate în cursul anterior

Page 93: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9393

ConConţţinutulinutul

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

Page 94: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9494

ConConţţinutulinutul

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

Page 95: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9595

ConConţţinutulinutul

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

Page 96: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9696

ConConţţinutulinutul

Volumul

Page 97: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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)

ConConţţinutulinutul

Page 98: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9898

ExempleExempleGreşeli:

Page 99: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

9999

ExempleExemple

Discuţii:

Page 100: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

100100

ExempleExemple

Discuţii:

Page 101: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

101101

ExempleExemple

Discuţii:

Page 102: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

102102

ExempleExemple

Discuţii:

Page 103: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

103103

ExempleExempleDiscuţii:

Page 104: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

104104

ExempleExempleDiscuţii:

prevenirea

erorilor

Page 105: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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ă

Page 106: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

106106

Varianta

I– Îmbogăţirea informaţiilor

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

StudiuStudiu de de cazcaz

Page 107: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 108: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 109: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

109109

AccesibilitateaAccesibilitatea

Utilizabilitatea generală

Afectează toţi utilizatorii

Barierele

fiziceAfectează doar

utilizatorii cu dizabilităţi

VariabileInconveniente

pentru

unii

Bariere

pentru

alţii

Page 110: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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)

AccesibilitateaAccesibilitatea

Page 111: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

AccesibilitateaAccesibilitatea

Page 112: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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.

AccesibilitateaAccesibilitatea

Page 113: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 114: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 115: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 116: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

116116

Vocabularul

vizual

creat

de Jesse Garrett:– Exemplu: modelarea unei decizii privind

autentificarea utilizatorului

MetodologiiMetodologii de de proiectareproiectare

Page 117: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

117117

Pathfinder

(Heymassi

et al., 2006)

MetodologiiMetodologii de de proiectareproiectare

Page 118: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

MetodologiiMetodologii de de proiectareproiectare

Page 119: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

119119

Descrierea

vizuală

a fluxului

(workflow)

Page 120: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

MetodologiiMetodologii de de proiectareproiectare

Page 121: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

121121

MetodologiiMetodologii de de proiectareproiectare

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)

Page 122: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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””

Page 123: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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””

Page 124: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

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

Page 125: Interactiune om-calculator (Proiectarea interfeţei Web)

InteracInteracţţiune omiune om--calculatorcalculator

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

125125

ÎÎntrebărintrebări??


Top Related