CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la design Web

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
interacțiune & design Web
http://designforuse.net/work/

“I’ve been amazed at how often those outside
the discipline of design assume that
what designers do is decoration.
Good design is problem solving.”
Jeff Veen

Scop
dezvoltarea de produse digitale
(recurgând la tehnologii Web)

Scop
dezvoltarea de produse digitale
(recurgând la tehnologii Web)
product as functionality
versus
product as information

adaptare după Crumlish & Malone, 2009
scopuri
psihologie
comportament
    
interacțiune
controale
limbi naturale
funcționalități
tehnologii
algoritmi
indexare
structurare
meta-date
instrumente
metodologii
stimuli
utilizatori interfață software conținut creatori

Goal „ingrediente umane”
designers
technologists
management
Alan Cooper et al.,
About Face (4th Edition), 2014

Care sunt mijloacele de interacțiune
dintre utilizatori și o aplicație?

vezi cursul Human-Computer Interaction de la master
profs.info.uaic.ro/~busaco/teach/courses/hci/

Interacțiunea dintre utilizator(i) și software
se realizează via o interfață (user interface)

Interacțiunea dintre utilizator(i) și software
se realizează via o interfață (user interface)
API (Application Programming Interface)
versus
UI (User Interface)

Aplicații Web
colecție interconectată de pagini Web
cu conținut generat dinamic,
oferind o funcționalitate specifică

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

client Web server Web
conținut
static
conținut
dinamic
conținut
static
conținut
dinamic
date
locale
JavaScript server de aplic., framework
HTTP
transfer
asincron
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

Aplicații Web
interfața Web
browser – interacțiune limitată via controale HTML
hipertext/hipermedia
RIA (Rich Internet Applications): în prezent, HTML5
interacțiune facilitată de transfer (a)sincron: Ajax et al.
audiență globală

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

Interfața – desktop, Web,… – cu utilizatorul
parte a aplicației – desktop, Web, miniaturală,… –
care permite utilizatorilor să-și exprime intențiile
de operare asupra software-ului și să interpreteze
rezultatele acțiunilor efectuate de mașină

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

utilitate (utility)
oferirea facilităților dorite de utilizator

utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?

utilă (useful)
usability + utility

UX (User Experience)
modul de percepție a produsului/serviciului
de către persoanele care-l folosesc
și plăcerea/satisfacția înregistrată

Context
http://garrettdimon.com/pages/improving_interface_design

Ce reprezintă utilizabilitatea?
uxchecklist.github.io

Utilizabilitatea
se referă la cât de „bine” utilizatorii
pot exploata funcționalitatea unui sistem
Jakob Nielsen
www.nngroup.com/articles/usability-101-introduction-to-usability/

Utilizabilitatea
learnability
cât de ușor se învață utilizarea sistemului (interfața sa)?

Utilizabilitatea
efficiency
după ce utilizatorul a învățat interfața,
care-i modul optim de utilizare a ei?

navigatorul Firefox – o parte dintre combinațiile de taste

Utilizabilitatea
memorability
cât de ușor este pentru utilizator
să-și amintească interacțiunea cu aplicația/sistemul?

usability

Utilizabilitatea
errors
numărul de erori potențiale trebuie să fie minimal
greșelile utilizatorului
trebuie să poate fi facil detectate/corectate

exemplu: utilizarea edit-in-place
pentru modificarea datelor introduse

Utilizabilitatea
satisfaction
utilizatorului îi place să folosească aplicația/serviciul?

www.flickr.com/groups/insults/

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-
jectively
pleasant
cost
compa-
tibility
relia-
bility
etc.
JakobNielsen

“The applications that are easy
to use are designed to be familiar.”
Jenifer Tidwell

Există anumite metodologii de proiectare?

Se preferă metodologii de proiectare iterative
“washing machine”

ideas
build
pro-
duct
mea-
sure
data
learn
metoda lean startup (Eric Ries, 2011)

Methodologies
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
faze conceptuale
de design
(bottom-up)

Methodologies
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011

Metodologiile se pot baza pe diverse modele

modele conceptuale privind proiectarea interfeței Web
(Robert Baxley, 2003)

Proiectarea iterativă poate atrage utilizatorii
în diferitele stagii ale proiectului
aceste persoane pot evalua interfața
din primele etape de dezvoltare

evoluția manierei de
dezvoltare a produselor
digitale (software)
Alan Cooper et al., 2014

de la idee la produsul software complet

A. Micallef, Wireframing, Prototyping, Mockuping
– What’s the Difference? (2015)
speckyboy.com/wireframing-prototyping-mockuping-whats-the-difference/

Prototipizare (prototyping)
oferă o vedere generală a interfeței aplicației Web

propune o soluție de proiectare
și nu funcționalitatea completă

poate avea un caracter dinamic
oferă maniere de experimentare

încurajează atragerea utilizatorilor
în procesul de proiectare
poate avea un rol important și în testare

fidelitate instrument
prototip pe hârtie hârtie + creion
scăzută
– clickable wireframe
Framebox, Gliffy, MS Visio,
OmniGraffle, UXPin
medie
Axure, Adobe Illustrator, FlairBuilder,
ForeUI, InVision, Moqups
înaltă
cod (e.g., HTML + CSS + JS)
eventual, folosind un framework specific
a se studia și blog.prototypr.io

prototipul pe hârtie al paginii principale a sitului FII
(Sergiu Dumitriu, Marta Gârdea, Sabin Buraga, 2006)

Twitter – conceptul inițial
www.flickr.com/photos/jackdorsey/182613360/

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

Models & Methodologies
A. Stanciu, I. Șchiopu, A. Grigoriu, I. Lazăr (2011) – aisquared.wordpress.com

Models & Methodologies
Mirela Popoveniuc & Alexandrina Filimonov (2015) – draw-by-sound.weebly.com

Storyboard
în contextul proiectării Web, constă uzual în wireframes

Wireframe
oferă o vedere generală a structurii interfeței sitului Web
și relațiile dintre pagini

wireframe-based design

Wireframe
creat în prima etapă de dezvoltare a proiectului
oferă indicații designer-ilor și programatorilor
privind înfățișarea și comportamentul interfeței
conceptual page layouts

M. Baciu, M. Pinzariu, L. Țuca (2015) – github.com/EDU-Soft/hci-project

Mockup
oferă un prototip low-fidelity
la dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.

Mockup
oferă un prototip low-fidelity
la dimensiuni naturale sau scalate:
ilustrații pe hârtie, capturi-ecran etc.
utilizat pentru demonstrații, evaluare, învățare,…

mockup pentru interfața unei aplicații Web de turism
B. Rotariu et al. (2017) – tras.bogdanrotariu.ro

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 – http://proto.io/

Asistent de interfață (wizard)
ajută utilizatorii să creeze în mod dinamic interfața

interactive prototyping

Studiu de caz
proiectarea interfeței Web
pentru un sit de promovare a muzicienilor
http://www.jeff.io/posts/sketches-wireframes-css
alte exemple: Best HCI 2015 projects @ FII
pxdotpt.com/blog/2015/6/19/human-computer-interaction-best-in-class-2015

pasul 1: prototip pe hârtie (sketch)
formular de
înscriere

pasul 2: wireframe

pasul 3: mockup

pas 4: implementare
interfața Web
concretă
(HTML+CSS+JS)

(în loc de) pauză
dilbert.com/strip/2002-09-23

Există o „rețetă” de proiectare judicioasă
a interfețelor Web?

Aspecte importante:
funcția – designul (proiectarea) bun(ă) oferă suport
pentru 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

Tradițional, interacțiunea cu utilizatorul
va recurge la elemente de interfață
suprafețe de redare
pagini, zone interactive,…
elemente de interacțiune
câmpuri de intrare, legături hipermedia,
controale specifice (e.g., bară de defilare, buton) etc.

Cum percepe utilizatorul interfața?
pe baza
simțurilor
(human senses)
A.-H.Pool(2015):https://commons.wikimedia.org/wiki/File:Five_senses.jpg

Design vizual
bazat pe modele vizuale
ce anume vom comunica utilizatorului?

Design vizual
reprezentările vizuale
trebuie să fie ușor percepute și recunoscute
recognition (recunoaștere)
versus
recall (reamintire)

pictograme & simbolurimetafore vizuale

Metaforele sunt utilizate
pentru a reda și/sau a crea asociații mentale

metafore și/sau idiomuri?

Design vizual
layout
grid
visual flow
typography
color, shape, texture
conform Dan Saffer (2006)

Design vizual
layout
unde și cum sunt plasate conținutul
și mijloacele de interacțiune
http://alistapart.com/topic/layout-grids

Visual design

layout fix
lățime prestabilită
versus
layout „lichid” (flexibil)
lățime variabilă

Layout-ul e facilitat de template-uri
(machete de prezentare)
specificarea aranjamentului și stilului vizual
via HTML + CSS + conținuturi grafice

w3layouts.com/free-responsive-html5-css3-website-templates/

Recurgerea la sisteme de aplicare a machetelor
de 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

Recurgerea la sisteme de aplicare a machetelor
de prezentare – Web template systems
oferite implicit de unele servere de aplicații ori
framework-uri Web sau disponibile ca extensii
la nivel de client și/sau server

<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}}
// date 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

Design vizual
grid
oferă o structură coerentă a informațiilor prezentate
www.thegridsystem.org

aranjamentul spațial poate fi stabilit via grid – uzual, în tipografie
aici, utilizarea secțiunii de aur: alistapart.com/article/content-out-layout

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

discuție

Grupare – principiul Gelstalt
ochiul creează un întreg (gelstalt)
din fragmentele existente

www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html
detalii + exemple: http://tinyurl.com/y6ao7k

Design vizual
cromatica
culoarea considerată cod vizual,
indicând categoria (tipul) de informații
redate utilizatorului

Design vizual
cromatica
un set de culori poate avea semantici diferite,
în funcție de situațiile survenite și de audiență
poate stabili ambientul

Design vizual
cromatica
utilizarea a maxim 4 culori afişate simultan

„Roata” culorilor pentru Web
culori
calde
culori
reci

Armonie cromatică
redarea plăcută a elementelor de interes
(în acest context: culorile)
estetică vizuală
www.interaction-design.org/encyclopedia/visual_aesthetics.html

exemplu: armonie bazată pe 3 culori (triadă)

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

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

Care sunt aspectele de interes
privind redarea conținutului textual?

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: http://ilovetypography.com/

în contextul designului Web, de studiat webtypography.net

Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere

Typography
corpul de literă – typeface, font
mulțime unitară de glyphs (semne, simboluri grafice)
asociate unui set de caractere
Font: Caracter  Semn

Corpul de literă
dimensiune
mă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

Corpul de literă
proporția
indică variația de lățime a setului de glyphs
proporționat vs. monospațiat (monospace)

Corpul de literă
familia de font
clasifică fonturile pe baza unor caracteristici
(e.g., modul de redare a glyph-urilor)
proprietate CSS: font-family

Corpul de literă
familia de font
include fontul de bază + variants (italic, bold, bold italic)

serif
sans-serif
cursive
fantasy
monospace

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 Candidate
Recommendation, 2013) – www.w3.org/TR/css3-fonts/

Corpul de literă
WOFF (Web Open Font Format)
include formatele TrueType, OpenType, Open Font Format
recomandare W3C (2012)
www.w3.org/TR/WOFF/

Google Web fonts – fonts.google.com

„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
a se vizita și typographica.org

Măsura
definește lungimea unei linii de text
element-cheie al ușurinței parcurgerii conținutului

Măsura
valori recomandate:
45—75 caractere per linie (CPL) sau 30—50 em
poate fi dificil de stabilit pentru layout-uri lichide

calcul optimal tipografic: pearsonified.com/typography/
de parcurs și www.pearsonified.com/2011/12/golden-ratio-typography.php

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

Organizarea informațiilor
(IA – Information Architecture)

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

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

Prezentare liniară
uzual, se recurge la diverse criterii de sortare:
alfabetic
spațial
temporal
conform semnificației
…

www.html5rocks.com/webappfieldguide/

Prezentare bidimensională
se consideră 2 criterii/dimensiuni de interes
exemplu:
locație geografică + dată calendaristică

Prezentare bidimensională
uzual, se adoptă o vizualizare bazată pe grilă (grid)

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

arhitectura ierarhică a unui sit Web
http://clairebarco.com/projects/information-architecture/

Prezentare bazată pe context
spațial
temporal
conform profilului utilizatorului
exemplificări:
hărți, chart-uri, timelines, informații recomandate,…

Prezentări mixte (complexe)
pot utiliza combinații ale precedentelor

Care sunt mijloacele de explorare?

Localizarea obiectelor din „proximitate”
signposts
titlul documentului Web
sigle
metode de redare a selecției
…

Găsirea „drumului” care conduce utilizatorul
către satisfacerea scopului
wayfinding
good signage
environmental clues
maps

Navigabilitatea
găsirea „drumului” care conduce utilizatorul
către satisfacerea scopului
minimizarea distanțeiergonomia interfeței

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

Navigabilitatea
soluții tradiționale:
meniuri
legături conexe
divizarea conținutului
harta sitului
căutare internă

Navigabilitatea
meniuri
orizontale – informații, apoi acțiuni
verticale: plate, expandabile, bi-nivel
combinate

navigabilitate via harta sitului (site map)

left column navigation right column navigation
three columns
with content first
three column content
with bottom navigation
layout-uri privind plasarea elementelor navigaționale

layout pentru desktop vs. layout pentru dispozitiv mobil
(Ronan Cremin & Luca Passani, 2012)

navigabilitatea în contextul tabletelor
(Ronan Cremin & Luca Passani, 2012)

alistapart.com/article/design-patterns-faceted-navigation
webmasters.googleblog.com/2014/02/faceted-navigation-best-and-5-of-worst.html
www.nngroup.com/articles/filters-vs-facets/
navigare multicriterială
(faceted navigation/search)

navigare socială +
navigare bazată pe termeni de conținut (tag-uri)
www.hashtags.org  tagdef.com

navigare cartografică + 3D

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

Regulă de bună practică:
existența unor elemente navigaționale
– plasate consistent –
pentru conducerea utilizatorului
spre secțiunile importante ale sitului/aplicației Web
de studiat și S. Buraga, Proiectarea siturilor Web, Polirom, 2005
www.slideshare.net/busaco/sabin-buraga-proiectarea-siturilor-web

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

breadcrumbs
indicarea drumului de la pagina principală
până la documentul curent
uzual, în cadrul unei ierarhii (taxonomii)

Ce înseamnă responsive Web design?

realitate: multitudinea dimensiunilor + caracteristicilor
ecranelor dispozitivelor oferind acces la Web

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, 2010
www.alistapart.com/articles/responsive-web-design/
resurse la https://responsivedesign.is/

media queries
flexible image (+media, +font)
flexible/fluid grid

rezoluții de ecran diverserecurgerea la valori diferite
pentru anumite proprietăți CSS via reguli @media
Media Queries (recomandare W3C, 2012)
www.w3.org/TR/css3-mediaqueries/

testarea designului Web cu instrumentele
pentru dezvoltatori oferite de orice browser actual

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

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

responsive fonts
fonturile externe nu ar trebui încărcate în contextul
dispozitivelor având rezoluții reduse ale ecranului
soluții:
încărcarea asincronă a fonturilor (Web font loading)
considerarea graficii vectoriale – SVG
(Scalable Vector Graphics)

alte strategii:
adoptarea unităților de măsură relative
la 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

alte strategii:
linearizarea conținutului
în contextul redării pe dispozitive mobile

layout shifter
column drop
Luke Wroblewski, Multi-Device Layout Patterns (2012)
www.lukew.com/ff/entry.asp?1514

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; }
}

alte strategii:
stabilirea zonei de redare (viewport)
la dimensiunea reală a ecranului dispozitivului
<meta name="viewport" content="width=device-width, initial-scale=1"/>

http://bradfrost.github.com/this-is-responsive/patterns.html
responsive Web patterns: șabloane de proiectare
pentru layout, navigare, conținut grafic, formulare,…

situație:
conținut tabelar responsiv
(responsive table)
posibile soluții:
sitesforprofit.com/responsive-table-plugins-and-patterns

situație:
conținut responsiv trimis prin poșta electronică
(responsive e-mail)
șabloane de proiectare:
responsiveemailpatterns.com

flexible grid
un instrument Web de testare: www.gridlover.net

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

episodul viitor: arhitectura navigatorului Web
user interface
browser engine
rendering engine
net
work
JS
inter-
preter
data
par-
ser
display back-end
datapersistence

CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la design Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la design Web

Similar to CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la design Web (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la design Web