PROIECTAREA

INTERFEȚELOR
UTILIZATOR

GIANINA GABOR
C5 + C6
 CUPRINS
Proiectarea aplicațiilor web
structura site-uri web
 organizare site-urilor web
aranjament, flux vizual, cromatică,
conținut, accesibilitate, internaționalizare
pași proiectare site web
proiectare interactivă aplicații web
STRUCTURA UNUI SITE WEB
 De asigurat consistenţa
• mărimea, culoarea & poziţionarea unitară a
meniurilor de navigare, siglelor, conţinutului

 Modificările importante vor fi anunţate

• secţiunea “Noutăţi” (What’s New, News), blog

 Posibilităţi de contact
• prin e-mail, via un formular, secţiune “Contact”
• forumuri sau blog-uri corporatiste
STRUCTURA UNUI SITE WEB
Alte secţiuni
Adrese Web favorite site-uri 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
STRUCTURA UNUI SITE WEB

Instrumente de navigare prin site

 Meniu orizontal de navigare
 STRUCTURA UNUI SITE

Instrumente de navigare prin site

 Meniu vertical
• plat
• expandabil
• bi-nivel

plasat în stânga/dreapta imaginii

 STRUCTURA UNUI SITE WEB
Instrumente de navigare prin site
 Meniuri combinate
• vertical + orizontal
• pe 3 coloane – vertical, orizontal, vertical
Păstrarea contextului – breadcrumb navigation
STRUCTURA UNUI SITE WEB
Instrumente de navigare prin site
 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 – tehnici 3D, bazate pe
feedback utilizator …
 Navigare bazată pe termeni de conţinut
tag navigation
STRUCTURA UNUI SITE WEB

Instrumente de navigare prin site

 Greşeli frecvente
• Structura de navigare superficială – plată
(flat)
• Structura de navigare excesiv de adâncă
 ORGANIZARE SITE WEB

 Separarea datelor de prezentare - formă

& navigare - de procesarea lor efectivă
 Probleme
• modificarea frecventă a conţinutului
• schimbarea periodică a interfeţei
• păstrarea integrităţii legăturilor
 ORGANIZARE SITE WEB

 Organizarea poate fi influenţată de

reacţiile vizitatorilor
• audienţa internaţională
• colectare automată feedback utilizatori
• realizare de chestionare on-line / web surveys

 Verificarea & testarea frecventă

 STRUCTURA PAGINI WEB

 Organizare pagini web individuale

• Aranjament /layout
• Flux vizual – flow
• Cromatică
• Aspecte referitoare la conţinut
ARANJAMENT -LAYOUT
 ARANJAMENT –LAYOUT

Fiecare pagină web include un container

(container block) care va cuprinde
conţinutul propriu-zis

 Tipuri layout (Jason Beaird, 2007)

fix – lăţime prestabilită
lichid – lăţime variabilă
 ARANJAMENT –LAYOUT
Poate fi stabilit utilizând grile (grids)

 Reguli
secţiunea de aur
cele trei coloane
simplitatea
balansul
unitatea
 ARANJAMENT –LAYOUT
Balansul
• asigurare echilibru vizual pe
orizontală şi verticală
• simetrie orizontală, bilaterală
sau radială

simetrie vs. asimetrie

ARANJAMENT –LAYOUT
 ARANJAMENT –LAYOUT

Unitatea
 maniera în care elemente diferite
interacţionează în cadrul aceluiaşi
document/aceeaşi pagină web
 uzual se realizează prin grupare
 criterii de grupare
• spaţială
• cromatică
• via elemente grafice de separare – linii
orizontale, aliniere diferită
 ARANJAMENT –LAYOUT
 menţinerea structurii aranjamentului se
poate realiza prin repetare elemente de
design pe parcursul tuturor paginilor web
 şabloane de proiectare – design patterns
 site-uri de interes
Design Patterns
http://sourcemaking.com/design_patterns

Web Patterns
http://www.awwwards.com/background-patterns-
designs-and-resources-for-websites.html
 ARANJAMENT –LAYOUT
Şabloane de proiectare
left column navigation
 ARANJAMENT –LAYOUT
Şabloane de proiectare
right column navigation
 ARANJAMENT –LAYOUT
Şabloane de proiectare
three-column navigation
 ARANJAMENT –LAYOUT
Şabloane de proiectare
three columns with content first
 ARANJAMENT –LAYOUT
Şabloane de proiectare
three-column content
 FLUXUL VIZUAL -FLOW
Fluxul vizual poate fi realizat şi prin
contrast  asigurarea focalizării atenţiei
 tipuri de contrast pe baza variabilelor
vizuale
FLUXUL VIZUAL -FLOW
 CROMATICA
 Schema de culori
• 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 înalt 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.
 CROMATICA
 Schema de culori
• Mental – atenţie, test, încetinire
• Strălucire, cheerful
• utilizat ca şi cod vizual pentru instalaţii de
ţevi sau cabluri
“Too much yellow can supposedly cause an
increase in overall frustration
• perceput ca desemnând rapiditatea
• poate conduce la producere de confuzii
 CROMATICA

 Schema de culori
• Semnificaţii – ok, liber, vegetaţie, siguranţă
• Induce un sentiment de calm
• Supra-utilizarea 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”
 CROMATICA

 Schema de culori
• Semnificaţii – rece, apă, calm,cer, neutralitate
• un mediu albastru poate ajuta la tratarea
migrenelor, hipertensiunii sau insomniei

“The best colour for break areas, because it

decreases blood pressure, pulse and respiration.”
 CROMATICA
 Schema de culori
• cea mai odihnitoare culoare / restful
• scade presiunea sângelui, pulsul & respiraţia
• pentru suprafeţe mari devine enervantă

 Schema de culori
• asociată uneori cu ieftin/cheap
• se foloseşte uzual în conjuncţie cu
roşu/galben
 CROMATICA
 Proprietăţi - temperatura
culori calde

culori reci
 CROMATICA
 Proprietăţi – valoarea (value)
• măsoară gradul de luminozitate
 CROMATICA
 Schema de culori
• roata culorilor pentru web
 CROMATICA
 Schema de culori
• armonii monocrome
• armonii analoage

• armonii complementare
 CROMATICA
 Schema de culori
• armonii complementare divizate

• armonii cu patru culori

CROMATICA
 CROMATICA

 Schema de culori (Linda Goin 2005)

• contextul în care apare o culoare este foarte
important

• anumite culori au conotaţii multiple

roşu = pasiune roşu = furie

!! Atenţie la utilizarea internaţională !!

CROMATICA
CROMATICA
 CROMATICA
 Schema de culori
• combinaţiile atipice pot sugera mesaje
speciale
 CROMATICA
 Tendinţe actuale
• Fundalurile adoptă nuanţe neutre (gri),
odihnitoare, bazate (eventual) pe
dégradé-uri
• Informaţiile de interes & simbolurile
grafice sunt redate utilizând culori
“puternice” (strong)
CROMATICA
 CROMATICA
 Instrumente pentru generarea de
palete cromatice (exemple)
• Color Scheme Designer
colorschemedesigner.com
• Colr colr.org
• Colrd colrd.com
• Color Explorer colorexplorer.com
 CONŢINUT TEXTUAL

 Typography

• componentă vitală a procesului de

comunicare
• NU înseamnă “picking a cool font “
• typos (impresie) + grapheia (scriere)

http://webtypography.net
 CONŢINUT TEXTUAL

 Aspecte referitoare la typography

• Corpul de literă
• Culoarea tipografică
• Măsura
• Leading-ul
• Ritmul vertical
• Linia albă
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – typeface, font

• Mulțime unitară de glyphs (semne, simboluri
grafice) asociate unui set de caractere
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – dimensiune

• Măsurată în puncte tipografice sau picas
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – proporția

• Indică variația de lățime a setului glyphs
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – familia de font

• Clasifică fonturile pe baza unor caracteristici
exemplu  mod de redare glyph-uri
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – familia de font

• Include fontul de bază + variants  italic,
bold, bold italic, …
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
 Corpul de literă – familia de font
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – fonturi “sigure” pentru

web
• Disponibile pentru orice sistem
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – utilizarea/încărcarea de

la distanță a unor fonturi/colecții de
fonturi
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – WOFF( Web Open Font

Format )
• Include fonturi TrueType, OpenType, Open
Font Format
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Culoarea tipografică - indică densitatea

conţinutului unei pagini web

“It refers only to the darkness or blackness of the letter

form in mass”
(Robert Bringhurst – The Elements of Typographic Style)
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Măsura – desemnează lungimea unei linii

de text
• element-cheie al uşurinţei parcurgerii
conţinutului
• valori recomandate 45 - 75 caractere
• dificil de stabilit pentru layout-uri lichide
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
măsura
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
măsura
 CONŢINUT TEXTUAL
Aspecte referitoare la typography

Leading (line spacing) – spaţiul vertical

dintre 2 linii de text
• uzual titlurile (headings) nu necesită leading
• fonturile masive au 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
 CONŢINUT TEXTUAL
Aspecte referitoare la typography

Line spacing
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

Linia albă – 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
 CONŢINUT

 Textura

• oferă o înfăţişare distinctă a

suprafeţelor

• se bazează pe puncte, linii, forme

(shapes)
 CONŢINUT
 Punctul (dot, point)
element fundamental de design grafic
prin grupare poate sugera imagini - linii,
forme, volume  tehnica halftone

 Linia (line) - proprietăţi

• grosime, direcţie, curbură
• liniile diagonale – haşurile sugerează
mişcare
• liniile curbe sunt deosebit de expresive
 CONŢINUT
 Forma (shape) – creată pe baza liniilor
• categorii – geometrice sau libere
respectiv organice (freeforms)
• formele geometrice perfecte induc un
mesaj tehnic/mecanic
• formele libere sunt mai abstracte
sugerând informalitate, spontaneism,
umanism
 CONŢINUT
 Volumul
• a 3-a dimensiune spaţială a conţinutului
• indică profunzime (depth)
• Aspecte de interes
o Perspectiva – alegerea unui punct de
fugă (vanishing point)
o Proporţia
o Lumina & umbra
 CONŢINUT
 Grafica
• alegerea conţinutului grafic – relevant,
interesant, atragator
• utilizarea ilustraţiilor & fotografiilor
- ilustraţii de calitate
- minimizare timp de încărcare
- asigurare accesibilitate – descrieri
alternative
textuale
 EXEMPLE
 Greşeli
 EXEMPLE
 Discuţii
EXEMPLE
EXEMPLE
 EXEMPLE
 Discuţii
 EXEMPLE
 Discuţii – prevenirea erorilor
 ACCESIBILITATEA
 Accesibilitatea – accesul cu succes la
informaţii & tehnologia informaţiei de către
persoane cu nevoi speciale – vizuale,
auditive, motorii, cognitive

 Realităţi
• 20 % din populaţia SUA prezintă un anumit tip de
dizabilitate şi 10 % dintre aceştia au probleme
severe
• 4 % persoane cu probleme majore de vedere
 ACCESIBILITATEA

 În mod deosebit trebuie oferite mijloace

alternative care să faciliteze activităţile
utilizatorilor conform punctelor lor de
vedere & al stilului lor de lucru

 Tipuri de dizabilităţi – vizuale , auditive,

cognitive, referitoare la factori afectivi
 ACCESIBILITATEA
 Dizabilităţile pot fi temporare (de scurtă
durată) sau permanente unele provenind
din naştere
 Strategii generale
• descrieri alternative conţinut multimedia (imagini,
audio, video)
• organizare judicioasă conţinut & mijloace de
navigare
• oferire de suport de interacţiune via tastatură
• utilizare de formate standardizate
 ACCESIBILITATEA
 utilizatori cu probleme de vedere
• mijloace pentru mărire/micşorare fundal
• posibilitate de modificare contrast
• facilităţi pentru selectare & copiere text
 utilizatori cu probleme de auz
• subtitrări textuale pentru orice conţinut video
• alegere între conţinut video şi textual alternativ

 utilizatori cu ADD (Attention Deficit Disorder)

• mijloace de focalizare rapidă a atenţiei – conţinut clar &
concis, structură minimalistă
 INTERNAŢIONALIZAREA

 Preferinţe lingvistice & localizare fizică

utilizator
• Language - limbaj dorit de utilizator
• Locale – preferinţe culturale referitoare la
formatare numere şi dată, sortare
 Diferenţă majoră faţă de 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)
INTERNAŢIONALIZAREA
 PAȘI PROIECTARE SITE WEB
 Specificare cerințe
 Analiza și proiectarea
Structura SITE
Design – aspecte, principii, strategii
Organizare informa ții
Navigare
 Implementare & documentare
 Afișare pe net & promovare
 Menținere & întreținere
 CERINȚE
 platforma – hard, SO, client & server web
 limbaj de scripting & mod de procesare
 nivel programare – client, server sau ambele
 sistem de management BD și resurse
 cerințe securitate/autentificare
 design general site
 frecvența actualizare site
 audiența & specific conținut
 STRUCTURA SITE
 Pagina de start (home page)
• Index – sumar site
• Scop, tip conținut, modalități de parcurgere
 Paginile subiectelor principale
• Subiecte de interes site
 Pagini subsidiare
• Trebuie sa conțină neaparat legături de
revenire la pagina de start
STRUCTURA – Pagina start
STRUCTURA – Pagina principala
STRUCTURA – Pagina subsidiara
 DESIGN

 Aspecte importante
• Funcția – un design/ proiectare
bun/bună oferă suport pentru activitățile
utilizatorului
• Forma – un design/proiectare bun/bună
trebuie să impulsioneze utilizatorul să
folosească obiectul/aplicația cu plăcere
 DESIGN
 Principii generale
• Simplitate – un design simplu este de
obicei cel mai simplu
“Forma urmează întotdeauna funcției”
(Sullivan)
Exemplu – Google.com
• Dimensiune, contrast,proporție
• Organizarea și caracterul vizual al
structurii informaționale
 DESIGN
 Greșeli comune
• Dezordinea și zgomotul
• Interferența – între elementele cu
accelași grad de importanță din cadrul
site-ului
• Complicarea evidentului
• Detalierea excesivă
 DESIGN
 Principii
• Informațiile importante vor fi afișate în
mod diferit față de restul textului
• Site-ul trebuie să ofere posibilități de
navigare
• Site-ul trebuie să fie consistent – mărimea
și culoarea textului, butoanelor și legăturilor,
inclusiv localizarea legăturilor navigaționale
să fie similare în tot site-ul
 DESIGN
 Principii
• Site-ul trebuie să ofere o posibilitate de
contact – cel puțin prin poșta electronică
• Site-ul trebuie să ofere un index (site
map)
• Site-ul trebuie verificat și validat
 DESIGN - TIPURI
 Proiectare bazată pe grid
• utilizată în tipografie
 DESIGN - TIPURI
 Focalizarea informației

• se va scoate
în evidență un
număr redus
de elemente
modulare
 DESIGN
 Flexibilitate
• site-ul trebuie să
permită variații de la
temă / personalizare

 Modularitate
• stabilire de elemente
modulare
 ORGANIZARE
 Separarea datelor conținutul de
prezentarea finală (formă)
 Probleme
• Modificarea frecventă a conținutului
• Schimbarea periodică a interfeței
(atragerea utilizatorilor)
• Păstrarea integrității legăturilor și
asigurarea/oferirea unor facilități de
navigare
 ORGANIZARE - STRATEGII
 “Content is king” – conținut, consistență,
densitate, design, dimensiune
 “Feedback and Online Surveys”
 “Frequently Asked Questions” FAQ
 “Navigation Aid”
 “ Color scheme ”
 “ File size ”
 PROMOVAREA
 Atragerea vizitatorilor
• Oferire de informații “free” – white paper,
user guide, FAQ
• Personalizare
• Suport online/offline
• Anticipare dorințe clienți
• Traducere în limba maternă
• Interfață atractivă
 PROMOVAREA
 Anunțarea apariției pe web
• Numele site-ului sa apară peste tot unde
apare numele organizației sau al persoanei
• Schimbul de banner-e publicitare
• Înregistrare la motoare de căutare
• Anunțuri publicitare către clienți, furnizori,
cunoscuți, …
• Fără Under construction …!! nicăieri
 PROMOVAREA
 Management imagine
companie /persoana folosind
site-ul web
• Construire profil utilizatori (data-mining)
• Analiza fișiere de jurnalizare acces
• Măsurare popularitate site – viteza de
încărcare, număr accesări, timp de vizitare,
bannere vizualizate, …
• Apelare la companii publicitare pe web
 PROMOVAREA
 Bătălia numelor de domenii
Problema mărcilor înregistrate
Trade Mark ™ & Registered ®
• verificarea existenței mărcilor înregistrate
celebre
• verificarea existenței mărcii în alte țări
• înregistrarea mărcii
• deținerea de domenii anti “afacerea mea”
 PROMOVAREA

 Proprietatea intelectuală copyright

• Problemă copyright conținut – font, grafică, alte
informații multimedia
• Software piratat
• Copyright asupra datelor (baze de date)
• Semnături digitale
 PROMOVAREA
 Disclamers and legal notices
• trebuie să apară și să fie vizibile în cadrul
site-ului
 PROMOVAREA
 Alte probleme
• Campania negativă “ Niciodata să nu-ți
critici adversarii“
• Refacere după dezastru  ex. INTEL
• Promptitudine  ex. SwissAir
EXEMPLU SITE
EXEMPLU SITE
EXEMPLU SITE
PROIECTARE INTERACTIVĂ

Proiectarea interactivă poate atrage

utilizatorii în diferitele stagii ale proiectului

aceste persoane pot evalua interfața din

primele etape de dezvoltare
 PROIECTARE INTERACTIVĂ

evoluția dezvoltării aplicațiilor software (Cooper & al. 2007)

PROIECTARE INTERACTIVĂ

Prototipizarea (prototyping)

oferă o vedere generală a interfeței aplicației web

PROIECTARE INTERACTIVĂ

Prototipizarea (prototyping)

propune o souție de proiectare

și nu funcționalitatea completă
PROIECTARE INTERACTIVĂ

Prototipizarea (prototyping)

poate avea un caracter dinamic

oferă maniere de experimentare
atrage utilizatorii în procesul de proiectare
PROIECTARE INTERACTIVĂ

prototip pe hârtie - pagina principală site FII

S. Dumitriu, M. Gardea, S. Buraga, 2009
PROIECTARE INTERACTIVĂ

concept inițial Twitter

 PROIECTARE INTERACTIVĂ

Storyboard

oferă descrierea manierei concrete de prezentare a

informațiilor fără a lua în calcul funcționalitatea
PROIECTARE INTERACTIVĂ
PROIECTARE INTERACTIVĂ

Storyboard

în contextul proiectării web constă uzual în

Wireframes
 PROIECTARE INTERACTIVĂ

Wireframe

oferă o vedere generală a structurii interfeței web

și relațiile dintre pagini

wireframe based design
 PROIECTARE INTERACTIVĂ

Wireframe

este creat în prima etapă de dezvoltare a proiectului

oferă indicații design-erilor și programatorilor

referitoare la înfățișarea și comportamentul interfeței

conceptual page layouts
PROIECTARE INTERACTIVĂ
PROIECTARE INTERACTIVĂ

Mockup

oferă un prototip low-fidelity

la dimensiuni naturale sau scanate
ilustrații pe hârtie, capturi-ecran

utilizat pentru demonstrații, evaluare, învățare

PROIECTARE INTERACTIVA

mockup-uri pentru o aplicație ce oferă recomandări

bazate pe locația geografică
 PROIECTARE INTERACTIVĂ

Mockup

exemple de instrumente software

Balsamiq Mokups – www.balsamiq.com

Hot Gloo – www.hotgloo.com
MockFlow – www.mockflow.com
Mocking Bird – www.gomockingbird.com/mokingbird/
 PROIECTARE INTERACTIVĂ

Asistent de interfață (wizard)

ajută utilizatorii să realizeze în mod dinamic interfața

interactive prototyping
PROIECTARE INTERACTIVĂ

Studiu de caz

Proiectarea interfeței web pentru Apricado Music

http://www.jeff.io/posts/sketches-wireframes-css
PROIECTARE INTERACTIVĂ

pasul 1 – prototip pe hârtie (sketch)

PROIECTARE INTERACTIVĂ
PROIECTARE INTERACTIVĂ
PROIECTARE INTERACTIVĂ
PROIECTARE INTERACTIVĂ

Studiu de caz

proiectarea interfeței unei aplicații iPhone

pentru managementul bugetului personal

Andrei Potorac - 2011

PROIECTARE INTERACTIVA

storytelling – include notițe utile proiectant/dezvoltator

PROIECTARE INTERACTIVĂ

de la mockup la prototip interfață

(utilizare emulator de dispozitiv iPhone)
PROIECTARE INTERACTIVĂ

În vederea asigurării calității

trebuie urmate diverse
standarde și reglementări
PROIECTARE INTERACTIVĂ

Standarde

impuse de organisme (inter)naționale

www.webstandards.org
PROIECTARE INTERACTIVĂ

Reglementări

mai detaliate & sugestive

pot rezolva anumite conflicte de proiectare
PROIECTARE INTERACTIVĂ

(adaptare după Aaron Gustafson, 2012)

PROIECTARE INTERACTIVĂ