176
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Dezvoltarea aplicațiilor Web la nivel de client interacțiune & design Web http://designforuse.net/work/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Dezvoltarea aplicațiilor Webla nivel de client
interacțiune & design Web
htt
p:/
/des
ign
foru
se.n
et/w
ork
/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
“I’ve been amazed at how often those outsidethe discipline of design assume that
what designers do is decoration.Good design is problem solving.”
Jeff Veen
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Scop
dezvoltarea de produse digitale(recurgând la tehnologii Web)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Scop
dezvoltarea de produse digitale(recurgând la tehnologii Web)
product as functionalityversus
product as information
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
adaptare după Crumlish & Malone, 2009
scopuripsihologie
comportament
interacțiunecontroale
limbi naturale
funcționalitățitehnologiialgoritmi
indexarestructuraremeta-date
instrumentemetodologii
stimuli
utilizatori interfață software conținut creatori
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
GoalBuilding successful
digital products
actori principali:designers
technologistsmanagement
Alan Cooper et al., About Face (4th Edition), 2014
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Care sunt mijloacele de interacțiunedintre utilizatori și o aplicație?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
vezi cursul Human-Computer Interaction de la masterprofs.info.uaic.ro/~busaco/teach/courses/hci/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interacțiunea dintre utilizator(i) și softwarese realizează via o interfață (user interface)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interacțiunea dintre utilizator(i) și softwarese realizează via o interfață (user interface)
API (Application Programming Interface)versus
UI (User Interface)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Aplicații Web
colecție interconectată de pagini Webcu conținut generat dinamic,
oferind o funcționalitate specifică
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Aplicații Web
prezintă o interfață cu utilizatorul exploatabilă la nivel de client (i.e. navigator Web)
recurg la standarde/formate de date deschise(HTTP, URL, HTML, CSS, JSON, SVG, XML, RDF,…)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coclient Web server Web
conținut static
conținut dinamic
conținut static
conținut dinamic
date locale
JavaScript server de aplic., framework
HTTP
transferasincron
via o interfață Web, utilizatorul interacționează cu clientul(front-end) și inițiază acțiuni – e.g., cereri HTTP (a)sincrone– ce vor fi executate pe diverse componente implementate
la nivel de server (back-end), pentru a obține date
☁date externe(serviciu Web)
front-end back-end
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Aplicații Web
interfața Web
browser – interacțiune limitată via controale HTMLhipertext/hipermedia
RIA (Rich Internet Applications): în prezent, HTML5interacțiune facilitată de transfer (a)sincron: Ajax et al.
audiență globală
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Așteptările utilizatorilor referitoare la interfața Web
(Peter Morville)
utilă – useful
utilizabilă – usable
apreciată – valuable
dezirabilă – desirable
disponibilă – findable
accesibilă – accessible
credibilă – credible
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interfața – desktop, Web,… – cu utilizatorul
parte a aplicației – desktop, Web, miniaturală,… –care permite utilizatorilor să-și exprime intențiilede operare asupra software-ului și să interpreteze
rezultatele acțiunilor efectuate de mașină
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
din punctul de vedere al utilizatorului,reprezintă întregul sistem – aplicația per se
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interfaţa – desktop, Web,… – cu utilizatorul
utilitate (utility)
oferirea facilităților dorite de utilizator
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interfaţa – desktop, Web,… – cu utilizatorul
utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interfaţa – desktop, Web,… – cu utilizatorul
utilă (useful)
usability + utility
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
UX (User Experience)
modul de percepție a produsului/serviciuluide către persoanele care-l folosescși plăcerea/satisfacția înregistrată
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Context
http://garrettdimon.com/pages/improving_interface_design
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Ce reprezintă utilizabilitatea?
uxchecklist.github.io
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizabilitatea
se referă la cât de „bine” utilizatoriipot exploata funcționalitatea unui sistem
Jakob Nielsenwww.nngroup.com/articles/usability-101-introduction-to-usability/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizabilitatea
learnability
cât de ușor se învață utilizarea sistemului (interfața sa)?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizabilitatea
efficiency
după ce utilizatorul a învățat interfața,care-i modul optim de utilizare a ei?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
navigatorul Firefox – o parte dintre combinațiile de taste
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizabilitatea
memorability
cât de ușor este pentru utilizatorsă-și amintească interacțiunea cu aplicația/sistemul?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
usability
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizabilitatea
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatoruluitrebuie să poate fi facil detectate/corectate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
exemplu: utilizarea edit-in-placepentru modificarea datelor introduse
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizabilitatea
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
www.flickr.com/groups/insults/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
system accepta-
bility
social accepta-
bility
practical accepta-
bility
useful-ness
utility usability
easy to learn
efficient to use
easy to remem-
ber
few errors
sub-jectivelypleasant
costcompa-tibility
relia-bility
etc.
Jako
bN
ielsen
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
“The applications that are easy to use are designed to be familiar.”
Jenifer Tidwell
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Există anumite metodologii de proiectare?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Se preferă metodologii de proiectare iterative
“washing machine”
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
ideas
build
pro-duct
mea-sure
data
learn
metoda lean startup (Eric Ries, 2011)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Methodologies
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
faze conceptuale de design
(bottom-up)
surfaceskeletonstructure
scopestrategy
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Methodologies
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
product as functionality
product as information
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Metodologiile se pot baza pe diverse modele
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
modele conceptuale privind proiectarea interfeței Web (Robert Baxley, 2003)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Proiectarea iterativă poate atrage utilizatoriiîn diferitele stagii ale proiectului
aceste persoane pot evalua interfațadin primele etape de dezvoltare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
evoluția manierei de dezvoltare a produselor
digitale (software)Alan Cooper et al., 2014
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
de la idee la produsul software complet
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
A. Micallef, Wireframing, Prototyping, Mockuping– What’s the Difference? (2015)
speckyboy.com/2015/04/20/wireframing-prototyping-mockuping-whats-the-difference/
sketch wireframe mock-up develop
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prototipizare (prototyping)
oferă o vedere generală a interfeței aplicației Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prototipizare (prototyping)
propune o soluție de proiectareși nu funcționalitatea completă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prototipizare (prototyping)
poate avea un caracter dinamic
oferă maniere de experimentare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prototipizare (prototyping)
încurajează atragerea utilizatorilorîn procesul de proiectare
poate avea un rol important și în testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prototipizare (prototyping)
fidelitate instrument
prototip pe hârtie (low-fidelity)
hârtie + creion
scăzută– clickable wireframe
Framebox, Gliffy, MS Visio, OmniGraffle, UXPin
medieAxure, Adobe Illustrator, FlairBuilder, ForeUI, InVision, Moqups
înaltă(high-fidelity)
cod (e.g., HTML + CSS + JS)eventual, folosind un framework specific
a se studia și blog.prototypr.io
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
prototipul pe hârtie al paginii principale a sitului FII(Sergiu Dumitriu, Marta Gârdea, Sabin Buraga, 2006)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Twitter – conceptul inițialwww.flickr.com/photos/jackdorsey/182613360/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Realitatea virtuală pe Web – WebVR (Sampathi, 2018)
exemplu de instrument de prototipizare high-fidelity:A-Frame – crearea de experiențe VR în browser-ul Web
discuție
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Storyboard
planșă narativă ce oferă descrierea manierei (concrete) de prezentare a informațiilor,
fără a lua în considerație funcționalitatea
storyboardcentral.blogspot.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Models & Methodologies
Mirela Popoveniuc & Alexandrina Filimonov (2015) – draw-by-sound.weebly.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Storyboard
în contextul proiectării Web, constă uzual în wireframes
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Wireframe
oferă o vedere generală a structurii interfeței sitului Webși relațiile dintre pagini
wireframe-based design
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Wireframe
creat în prima etapă de dezvoltare a proiectului
oferă indicații designer-ilor și programatorilorprivind înfățișarea și comportamentul interfeței
conceptual page layouts
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
I. Sitaru, Ș. Matcovici, B. Lupu (2018) – github.com/ioanasitaru/CLIW
proiectul Asle (Asian Language Learning Web Tool) – CLIW 2017
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Mockup
oferă un prototip low-fidelityla dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
utilizat pentru demonstrații, evaluare, învățare,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Mockup
exemple de instrumente software:Balsamiq Mockups – www.balsamiq.com
HotGloo – www.hotgloo.com
MockFlow – mockflow.com
Mocking Bird – gomockingbird.com/mockingbird/
Moqups – moqups.com
Proto.io – proto.io
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Asistent de interfață (wizard)
ajută utilizatorii să creeze în mod dinamic interfața
interactive prototyping
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Models & MethodologiesProcese de proiectare – exemple concrete:
Thinking Design (Adobe)medium.com/thinking-design
Product Development Process (Apple)tinyurl.com/j676epe
Facebook Designmedium.com/facebook-design
DigitalLabs Design Experimentsmedium.com/cbc-digital-labs
Practicing Collaborative UX Design (Hive)blog.prototypr.io/practicing-collaborative-ux-design-in-a-large-
organization-9ffec182b4d7
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Studiu de caz (Jeff Ward)proiectarea interfeței Web
pentru un sit de promovare a muzicienilor
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pasul 1: prototip pe hârtie (sketch)
formular de înscriere
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pasul 2: wireframe
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pasul 3: design mockup
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pas 4: implementare
interfața Web concretă
(HTML+CSS+JS)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
(în loc de) pauză
dilbert.com/strip/2002-09-23
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Există o „rețetă” de proiectare judicioasăa interfețelor Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Aspecte importante:
funcția – designul (proiectarea) bun(ă) oferă suportpentru desfășurarea activităților utilizatorului
forma (înfățișarea) – designul (proiectarea) bun(ă)trebuie să impulsioneze utilizatorul să folosească
obiectul/aplicația/serviciul cu plăcere
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Tradițional, interacțiunea cu utilizatorulva recurge la elemente de interfață
suprafețe de redarepagini, zone interactive,…
elemente de interacțiunecâmpuri de intrare, legături hipermedia,
controale specifice (e.g., bară de defilare, buton) etc.
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Cum percepe utilizatorul interfața?
pe baza simțurilor
(human senses)
A.-
H. P
oo
l (2
01
5):
htt
ps:
//co
mm
on
s.w
ikim
edia
.org
/wik
i/File
:Fiv
e_se
nse
s.jp
g
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
bazat pe modele vizuale
ce anume vom comunica utilizatorului?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
reprezentările vizuale trebuie să fie ușor percepute și recunoscute
recognition (recunoaștere)versus
recall (reamintire)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
pictograme & simbolurimetafore vizuale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Metaforele sunt utilizate pentru a reda și/sau a crea asociații mentale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
metafore și/sau idiomuri?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
layout
grid
visual flow
typography
color, shape, texture
conform Dan Saffer (2006)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
layout
unde și cum sunt plasate conținutul și mijloacele de interacțiune
alistapart.com/topic/layout-grids
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Visual design
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
layout fixlățime prestabilită
versus
layout „lichid” (flexibil)lățime variabilă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Layout-ul e facilitat de template-uri(machete de prezentare)
specificarea aranjamentului și stilului vizualvia HTML + CSS + conținuturi grafice
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
w3layouts.com/free-responsive-html5-css3-website-templates/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Recurgerea la sisteme de aplicare a machetelorde prezentare – Web template systems
utilizând specificații de prezentare a conținutului(Web template), datele persistente
(e.g., preluate dintr-o sursă de date) sunt folosite de un procesor – template engine –
pentru a genera documente HTML ori alte formate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Recurgerea la sisteme de aplicare a machetelorde prezentare – Web template systems
oferite implicit de unele servere de aplicații oriframework-uri Web sau disponibile ca extensii
la nivel de client și/sau server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
<!-- macheta --><h1>{{header}}</h1>
<ul>{{#items}}{{#special}}<li><strong>{{name}}</strong></li>
{{/special}}{{#link}}<li><a href="{{url}}"
title="Details">{{name}}</a></li>{{/link}}
{{/items}}</ul>
{{#empty}}<p>The list is empty.</p>
{{/empty}}
// datele de intrare în format JSON
{
"header": "Info3",
"items": [
{"name": "CLIW", "link": true, "url": "#cliw"},
{"name": "DSFUM", "link": true, "url": "#dsfum"},
{"name": "ML", "special": true}
],
"empty": false
}
conținut generat pe baza machetei + datelor de intrare
exemplificare: {{ mustache }}github.com/janl/mustache.js
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
grid
oferă o structură coerentă a informațiilor prezentate
www.thegridsystem.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
aranjamentul spațial poate fi stabilit via grid – uzual, în tipografieaici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
grid
soluții tehnice oferite de specificațiile actuale:
CSS Grid (W3C Candidate Recommendation, dec. 2017)www.w3.org/TR/css-grid-1/
C. House, A Complete Guide to Flexbox (2018)css-tricks.com/snippets/css/complete-guide-grid/
tutoriale + exemple: learncssgrid.com gridbyexample.com
CSS Flexbox (în lucru la W3C, aug. 2018)drafts.csswg.org/css-flexbox-1
C. Coyier, A Complete Guide to Flexbox (2018)css-tricks.com/snippets/css/a-guide-to-flexbox/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
visual flow
vizează metodele de înțelegere de către utilizator a datelor prezentate și/sau de interacțiune cu acestea
ierarhia elementelor vizuale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
discuție
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Grupare – principiul Gelstalt
ochiul creează un întreg (gelstalt)din fragmentele existente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
de parcurs și D. Todorovic, Gestalt principles (2008):www.scholarpedia.org/article/Gestalt_principles
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
cromatica
culoarea considerată cod vizual,indicând categoria (tipul) de informații
redate utilizatorului
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
cromatica
un set de culori poate avea semantici diferite,în funcție de situațiile survenite și de audiență
poate stabili ambientul
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Design vizual
cromatica
utilizarea a maxim 4 culori afişate simultan
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
„Roata” culorilor pentru Web
culori calde
culori reci
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Armonie cromatică
redarea plăcută a elementelor de interes(în acest context: culorile)
estetică vizuală
www.interaction-design.org/encyclopedia/visual_aesthetics.html
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
exemplu: armonie bazată pe 3 culori (triadă)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Observație:contextul în care apare o culoare este foarte important
anumite culori au conotații multiple
atenție la utilizarea internațională– www.w3.org/standards/webdesign/i18n –
și la accesibilitate – a11yproject.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Instrumente pentru generarea de palete cromatice(exemplificări)
colr – www.colr.org
Colrd – colrd.com
Color Explorer – colorexplorer.com
Color Hunt – colorhunt.co
Paletton – paletton.com
alte detalii în S. Buraga, Any Colour You Like (2013)www.slideshare.net/busaco/any-colour-you-like
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Care sunt aspectele de interesprivind redarea conținutului textual?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Typography
prezentarea conținutului textual via corpuri de literă(fonturi) conform unor anumite reguli de prezentare
typos (impresie) + grapheia (scriere)
nu înseamnă “picking a cool font”
resurse de interes: ilovetypography.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
în contextul designului Web, de studiat webtypography.net
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)asociate unui set de caractere
Font: Caracter Semn
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Corpul de literă
dimensiunemăsurată în puncte tipografice ori picas
scala: 6 8 9 10 11 12 14 16 18 21 24 36 48 60 72
proprietate CSS: font-size
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Corpul de literă
proporțiaindică variația de lățime a setului de glyphs
proporționat vs. monospațiat (monospace)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Corpul de literă
familia de fontclasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph-urilor)
proprietate CSS: font-family
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Corpul de literă
familia de fontinclude fontul de bază + variants (italic, bold, bold italic)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
serif
sans-serif
cursive
fantasy
monospace
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Corpul de literă
utilizarea/încărcarea de la distanțăa unor (colecții de) fonturi
proprietatea @font-face definită de CSS – nivelul 3
CSS Fonts Module Level 3 (W3C Proposed Recommendation, august 2018) – www.w3.org/TR/css3-fonts/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Corpul de literă
WOFF (Web Open Font Format)include formatele TrueType, OpenType, Open Font Format
recomandare W3C (2012)
www.w3.org/TR/WOFF/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Google Fonts – fonts.google.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
„Culoarea” tipograficăindică densitatea texturii conținutului unei pagini
“It refers only to the darkness or blacknessof the letterform in mass.”
Robert Bringhurst, The Elements of Typographic Style
a se vizita și typographica.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Măsuradefinește lungimea unei linii de text
element-cheie al ușurinței parcurgerii conținutului
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Măsura
valori recomandate: 45—75 caractere per linie (CPL) sau 30—50 em
poate fi dificil de stabilit pentru layout-uri lichide
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php
calcul optimal tipografic Golden Ratio Typography
grtcalculator.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Leading (sau line-spacing)spațiul vertical dintre 2 linii de text
fonturile masive vor avea nevoie de leading mai mare
fonturile sans-serif necesitămai mult leading decât cele serif
lățimea mai mare a liniei conduce la creșterea leading-ului
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
devdocs.io
Organizarea informațiilor (IA – Information Architecture)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Necesitatea organizării informațiilor prezentate
în funcție de:natura și domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintăcontextul interacțiunii
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Necesitatea organizării informațiilor prezentate
în funcție de:natura și domeniul aplicației
cunoștințele de bază ale utilizatorilor-țintăcontextul interacțiunii
redare (date) vs. interacțiune (acțiuni)
substantive verbe
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prezentare liniară
uzual, se recurge la diverse criterii de sortare:alfabeticspațial
temporalconform semnificației
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
www.html5rocks.com/webappfieldguide/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prezentare bidimensională
se consideră 2 criterii/dimensiuni de interes
exemplu:locație geografică + dată calendaristică
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prezentare bidimensionalăuzual, se adoptă o vizualizare bazată pe grilă (grid)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prezentare ierarhică
structuri arborescente cu 1 sau mai multe niveluri
folosită pentru a ilustra anumite relații între obiecte:copil-părinte, grupare, sub-sumare,…
exemplu tipic: meniuri
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
arhitectura ierarhică a unui sit Webhttp://clairebarco.com/projects/information-architecture/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prezentare bazată pe context
spațialtemporal
conform profilului utilizatorului
exemplificări:hărți, chart-uri, timelines, informații recomandate,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Prezentări mixte (complexe)pot utiliza combinații ale precedentelor
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Care sunt mijloacele de explorare?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Localizarea obiectelor din „proximitate”
signposts
titlul documentului Websigle
metode de redare a selecției…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Găsirea „drumului” care conduce utilizatorulcătre satisfacerea scopului
wayfinding
good signageenvironmental clues
maps
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Navigabilitatea
găsirea „drumului” care conduce utilizatorulcătre satisfacerea scopului
minimizarea distanțeiergonomia interfeței
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
deși numărul optim de pași (click-uri/tap-uri) este 3, utilizatorul realizează 9 acțiuni, fiind „pierdut în spațiu”
T. Tullis, B. Albert, Measuring the User Experience(2nd Edition), Morgan Kaufmann, 2013
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Navigabilitatea
soluții tradiționale:meniuri
legături conexedivizarea conținutului
harta situluicăutare internă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Navigabilitatea
meniuri
orizontale – informații, apoi acțiuniverticale: plate, expandabile, bi-nivel
combinate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
navigabilitate via harta sitului (site map)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
left column navigation right column navigation
three columns with content first
three column contentwith bottom navigation
layout-uri privind plasarea elementelor navigaționale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
layout pentru desktop vs. layout pentru dispozitiv mobil(Ronan Cremin & Luca Passani, 2012)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
navigabilitatea în contextul tabletelor(Ronan Cremin & Luca Passani, 2012)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
alistapart.com/article/design-patterns-faceted-navigationwebmasters.googleblog.com/2014/02/faceted-navigation-best-and-5-of-worst.html
www.nngroup.com/articles/filters-vs-facets/
navigare multicriterială(faceted navigation/search)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
navigare socială +navigare bazată pe termeni de conținut (tag-uri)
tagdef.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
navigare cartografică + 3D
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Navigabilitatea
semantici diferite ale legăturilor:navigare
preluare de date (download)procesare – e.g., recalcularea coșului de cumpărături
asociere de meta-date – exemplu: tagging
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Regulă de bună practică:
existența unor elemente navigaționale– plasate consistent –
pentru conducerea utilizatoruluispre secțiunile importante ale sitului/aplicației Web
de studiat și S. Buraga, Proiectarea siturilor Web, Polirom, 2005www.slideshare.net/busaco/sabin-buraga-proiectarea-siturilor-web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Regulă de bună practică:
secțiunile unei aplicații pot fi divizate în mini-aplicații/mini-situri independente,
accesabile din fereastra/pagina principală
context: aplicații destinate dispozitivelor mobile
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Regulă de bună practică:
breadcrumbsindicarea drumului de la pagina principală
până la documentul curent
uzual, în cadrul unei ierarhii (taxonomii)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Ce înseamnă responsive Web design?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
realitate: multitudinea dimensiunilor + caracteristicilor ecranelor dispozitivelor oferind acces la Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
utilizarea unei suite de tehnologii Web ce permite adaptarea designului la contextul de redare
(e.g., orientare, rezoluție, densitate de pixeli,…)
Ethan Marcotte, 2010www.alistapart.com/articles/responsive-web-design/
resurse la responsivedesign.is
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
media queries
flexible image (+media, +font)
flexible/fluid grid
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
rezoluții de ecran diverserecurgerea la valori diferite pentru anumite proprietăți CSS via reguli @media
Media Queries (recomandare W3C, 2012)www.w3.org/TR/css3-mediaqueries/
cea mai recentă specificație (iulie 2018): drafts.csswg.org/mediaqueries-4/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
<link rel="stylesheet" media="only screen and (color)"
href="stiluri-pentru-ecrane-color.css" />
@media screen and (max-width: 768px) and (orientation: portrait) {
/* stiluri pentru tablete*/
}
/* redarea pe 2 coloane pentru rezoluții mari */
@media (min-width:1140px) and (min-resolution: 300dpi) {
.content { column-count: 2; column-gap: 1em; font-size: 1.5em; }
}
pentru alte detalii, a se studia developer.mozilla.org/docs/Web/Guide/CSS/Media_queries
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
testarea designului Web cu instrumentele pentru dezvoltatori oferite de orice browser actual
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
responsive multimedia
imagini flexibile + alte resurse grafice – e.g., video
<picture>
<source media="(min-width: 40em)"
srcset="mare.jpg 1x, mare-hd.jpg 2x"/>
<source srcset="mic.jpg 1x, mic-hd.jpg 2x" />
<img src="implicit.jpg" alt="..." />
</picture>
<img src="mic.jpg" alt="Un pinguin"
srcset="mare.jpg 1024w, mediu.jpg 640w, mic.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw" />
informații de interes la responsiveimages.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
responsive multimedia
uzual, soluții de optimizare la nivel de server Web
exemple:adaptive-images.com
www.resrc.it
developers.google.com/speed/pagespeed/module
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
responsive fonts
fonturile externe nu ar trebui încărcate în contextuldispozitivelor având rezoluții reduse ale ecranului
soluții:încărcarea asincronă a fonturilor (Web font loading)
considerarea graficii vectoriale – SVG (Scalable Vector Graphics)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
alte strategii:
adoptarea unităților de măsură relativela mărimea fontului (% em rem) sau la zona de vizualizare –
viewport (vh vw) – pentru valorile unor proprietăți CSS
developer.mozilla.org/Web/CSS/length
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
alte strategii:
linearizarea conținutuluiîn contextul redării pe dispozitive mobile
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
layout shifter
column drop
Luke Wroblewski, Multi-Device Layout Patterns (2012)www.lukew.com/ff/entry.asp?1514
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
alte strategii:
ascunderea (eliminarea) datelor care nu sunt esențiale
@media all and (min-width: 321px) and
(max-width: 480px) and (monochrome) {
.continut-neesential { display: none; }
}
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
alte strategii:
stabilirea zonei de redare (viewport) la dimensiunea reală a ecranului dispozitivului
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
bradfrost.github.com/this-is-responsive/patterns.html
responsive Web patterns: șabloane de proiectare pentru layout, navigare, conținut grafic, formulare,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
situație:conținut tabelar responsiv
(responsive table)
posibile soluții:css-tricks.com/responsive-data-tables/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web design
situație:conținut responsiv trimis prin poșta electronică
(responsive e-mail)
șabloane de proiectare:responsiveemailpatterns.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Responsive Web designflexible grid
un instrument Web de testare: www.gridlover.net
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Instrumente Web specifice – exemplificări:
Bootstrap – getbootstrap.com
Foundation – foundation.zurb.com
Fluid Grids – fluidgrids.com
Semantic UI – semantic-ui.com
Skeleton – www.getskeleton.com
UI Kit – getuikit.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
episodul viitor: arhitectura navigatorului Web
user interface
browser engine
rendering engine
network
JSinter-preter
datapar-ser
display back-end
da
ta p
ersiste
nce
