1. Experiència d'usuari, arquitectura de la informació
i disseny d'interfícies per a diferents dispositius
Ivette Garcia Manuel
ivette.garcia@upc.edu
igarciamanu@uoc.edu
Twitter: @ivette_alhoa
26/11/2013

2. Arquitectura de la informació
•
No hi ha una definició única i àmpliament acceptada (Rosenfeld, 2002; Dillon
i Turnbull, 2005).
•
L’arquitectura de la informació és l’art i la ciència d’organitzar la informació
de manera que sigui localitzable, usable i útil (Bailey, 2002).
•
L'arquitectura de la informació es centra en l’organització de la informació i
implica estructurar, dissenyar i etiquetar (Rosenfeld, 2002; Morville i Rosenfeld,
2006)
•
L’Arquitectura de la informació es pot abordar des d’una visió encara més
àmplia que inclourà l’usuari a més d’aspectes organitzatius (Forrester
Research, Inc. , 2009-2010)
http://www.forrester.com/Best+Practices+In+User+Experience+UX+Design/fulltext/-/E-RES54101
http://www.adobe.com/enterprise/pdfs/Forrester_Best_Prac_In_User_Exp.pdf
i

3. Experiència d’usuari
Jasse James Garrett, el març de l’any 2000, realitza un mapa conceptual que
servirà de base a tot el seu treball posterior en aquest camp.
Ens mostra els elements de l’Experiència d’usuari orientat a l’entorn web, tot i fer
una divisió entre programari i sistema d’hipertext.
Imatge extreta de “Disseny centrat en l’usuari” de Muriel Garreta Domingo i Enric Mor Peña
http://openaccess.uoc.edu/webapps/o2/bitstream/10609/9743/4/PID_00158922-3.pdf
3

4. Disseny centrat en l’usuari (DCU)
•
Donald A. Norman és el creador d’aquest terme.
•
DCU és una manera de planificar, de gestionar i
de dur a terme projectes de creació, millora i
implementació de productes interactius.
•
Involucra l’usuari en totes les fases en què es
desenvolupa un producte, des de la
conceptualització fins a l’avaluació. També pot
incloure a l’usuari en la fase de desenvolupament.
•
http://www.smashingmagazine.com/2010/06/
16/design-better-faster-with-rapidprototyping/
S’ha de tenir en compte per a qui es dissenya i també els contextos d’ús.
Disseny i avaluació són posteriors a la investigació dels usuaris
http://openaccess.uoc.edu/webapps/o2/bitstream/10609/9743/4/PID_00158922-3.pdf
4

5. Cicle de vida del disseny mòbil centrat en l’usuari (DCU)
http://mobile.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
Objectiu del DCU: crear productes que els usuaris trobin útils i usables.
5

6. Interfície natural d’usuari (NUI)
La interfície natural d'usuari és aquella en què s'interactua amb un sistema,
aplicació, etc. sense utilitzar sistemes de comandament o dispositius d'entrada
El cos o part del mateix és el mateix comandament de control.
Pantalles amb capacitats multitàctils:
• L'operació o control es realitza per mitjà de la puntes dels dits.
S'estan desenvolupant altres control de sistemes operatius per mitjà de veu
humana i controls per proximitat a la pantalla.
Emulen els principis físics de la natura => Interacció més intuitiva
Ambients naturals: aconseguir experiències úniques i satisfactòries per als usuaris.
6

7. El context: Tipus de dispositius
7

8. El context: Fragmentació
http://mashable.com/2012/05/16/android-fragmentation-graphic/
8

9. Què fem a la xarxa?
In 60 seconds (2011) http://www.go-gulf.com/wp-content/themes/go-gulf/blog/60seconds.jpg
9

10. Equipament dels usuaris
Adaptació de “IV Estudio IAB Spain sobre Mobile Marketing”. Setiembre 2012 http://www.iabspain.net/wpcontent/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
10

11. Equipament segons l’edat
IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabspain.net/wpcontent/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
11

12. Freqüència d'accés a Internet des de diferents dispositius
8 de cada 10 internautes accedeixen
a Internet des del mòbil.
IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabspain.net/wpcontent/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
12

13. Diferents dispositius, diferents experiències
IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabspain.net/wp-content/uploads/downloads/2012/09/IVEstudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
Our Mobile Planet: España. Conoce mejor al consumidor móvil. Mayo 2013. http://services.google.com/fh/files/misc/omp-2013-eslocal.pdf
13

14. Penetració dels smartphones
Our Mobile Planet: España. Conoce mejor al consumidor móvil. Mayo 2013. http://services.google.com/fh/files/misc/omp-2013-eslocal.pdf
14

15. Ús de l’smartphone mentre...
Our Mobile Planet: España. Conoce mejor al consumidor móvil. Mayo 2013. http://services.google.com/fh/files/misc/omp-2013-eslocal.pdf
15

16. Dispositius existents al mercat I
8 de cada 10 dispositius que es compren són smartphones
Android actualment supera el 80% de la quota de mercat
http://blogs.strategyanalytics.com/WSS/post/2013/10/31/Android-Captures-Record-81Percent-Share-of-Global-Smartphone-Shipments-in-Q3-2013.aspx
16

17. Dispositius existents al mercat II
Samsung lidera el mercat
dels smartphones
Apple lidera el mercat
de les tablets
71,9% d’usuaris Android tenen la versió 4.0
o superior instal·lada.
http://developer.android.com/about/dashboards/index.html
17

18. Quantitat de dispositius mòbils i tràfic de dades
Hi ha més dispositius mòbils connectats que persones al planeta.
L’any 2012…
•
El tràfic de dades mòbils va créixer un 70% respecte l’any anterior.
o 520 petabytes per mes a finals de 2011
o 885 petabytes per mes a finals de 2012
•
•
•
El 50% del tràfic a través de dispositius mòbils eren continguts de vídeo.
200 milions d'usuaris de realitat augmentada
L´ús de smartphones va créixer un 81%.
L’any 2016 s’espera que…
•El nombre de dispositius connectats sigui superior a 3 vegades la població
mundial.
•Els continguts de vídeo suposin 2/3 del tràfic de dades total.
L’any 2017 s’espera que…
•La suma de tot el tràfic IP sigui 134 vegades superior al generat l’any 2000
L’any 2020 s’espera que…
•Pot haver-hi mil milions de consumidors d’aplicacions de RA
18

19. Tràfic de dades
Informe Cisco VNI (Visual Networking Index) sobre Tràfic Global de Dades Mòbils 2012-2017
19

20. Hàbits
Una persona mira el seu dispositiu mòbil unes 150 vegades al dia
http://www.techcentral.co.za/the-next-10-years-in-mobile/27622/
El 75% de la població utilitzen els seus dispositius mòbils al bany.
http://www.11mark.com/IT-in-the-Toilet
El 70% dels usuaris de tablets i el 68% dels d’smartphone usen els seus dispositius
mentre veuen la televisió.
Usuaris d’smartphones. Aplicacions…
•xarxes socials (85%)
•correu electrònic (81%)
•relacionades amb la cartografia i GPS
(76%).
Usuaris de tablets
•relacionades amb jocs (85%)
•canals de televisió (60%)
•medis de comunicació (52%)
Fem ús dels dispositius mòbils…
•quan ens trobem amb temps morts o d’espera
•quan necessitem fer una cerca
•quan volem accedir a determinats continguts
•per parlar amb coneguts,...
Les persones usem els dispositius mòbils a qualsevol lloc i a qualsevol hora
20

21. Web mòbil, Aplicacions natives o aplicacions híbrides
Hi ha diferents opinions
Poden ser vies complementàries
Els usuaris prefereixen la web mòbil
Estudio de usabilidad en Tablet. E-commerce de moda. Junio 2013.
http://www.userzoom.es/ux-ebooks/e-commerce-modatestusabilidad-tablet-form-html/
Web mòbil
•Html, CSS i JavaScript
•Es visualitza des del navegador del
dispositiu.
•Web universal: Multi-dispositiu
•Es requereix connexió a Internet
•W3C treballa en estàndars per fer la web
accessible per a tothom, des de
qualsevol lloc i en qualsevol moment.
http://www.w3c.es/Divulgacion/GuiasBreves/IndependenciaDispositi
vo
•Tens el control directe de la distribució i
monetització.
•Les modificacions són més senzilles de
dur a terme.
App nativa
•Programari escrit per a una plataforma
concreta.
•Usa les capacitats i funcionalitats
natives del dispositiu (acceleròmetre,
càmera, giroscopi, GPS, brúixola,
reconeixement de veu,...)
•Es descarrega de la tenda
d’aplicacions específica de cada
plataforma
•Pot usar-se sense connexió
21

22. Responsive web design I
Disseny basat en una retícula flexible
http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
22

23. Responsive web design II
Elements flexibles
i la seva posició també
Comportaments adaptatius
Control de la visibilitat dels elements
http://colly.com/
http://www.cmswire.com/images/responsive-grid.png
23

24. Diferències entre plataformes
Extret de la infografia “iOS and Android Design Guidelines” http://www.kinvey.com/blog/2765/ios-and-android-design-guidelines-cheat-sheet
24

25. Diferències entre iOS6 i iOS7
iOS 7 incorpora els següents aspectes:
La interfície d'usuari ajuda als usuaris a entendre i interactuar amb el contingut,
però no competeix amb ell.
El text és llegible en totes les mides, precisió i lucidesa a les icones. S’ha treballat per
a que les decoracions siguin més subtils i més apropiades.
Capes visuals i moviment realistes per augmentar el plaer i comprensió dels usuaris.
Els dispositius d’Apple poder actualitzar-se a les darreres versions tot i que no
sempre incorporen totes les funcionalitats a la versió de l’actualització.
25

26. Satisfacció dels usuaris
http://www.pfeifferreport.com/v2/wp-content/uploads/2013/09/iOS7-User-Experience-Shootout.pdf
26

27. Exemple: Evernote
Evernote: experiències d’usuari diferents a cada entorn i plataforma.
•No usen HTML5 ni aposten pel mínim comú denominador.
•Dissenyen versions diferents per a cada plataforma (no són consistents entre sí)
(imatge: http://uxmag.com/articles/framework-for-designing-for-multiple-devices)
El CEO d’EverNote, Phil Libin, ens diu…
En un futur, si et miro amb unes Glass, el dispositiu mòbil hauria de saber que fer sense
que jo obri una aplicació. (juliol, 2013)
27

28. Exemple: BBC
Disseny escalable i adaptable a diferents dispositius
Estructura de continguts: principis, patrons i directius fortament establertes
Té en compte altres aspectes com les diferents orientacions de pantalla.
BBC Movile Style Guide http://downloads.bbc.co.uk/guidelines/mobile_guide_v1.1_compressed.pdf
28

29. Noves formes de traslladar continguts entre dispositius
http://vimeo.com/40117938
Noves formes de fer publicitat
http://pleasurehunt2.mymagnum.com/
Noves formes de mostrar la informació
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnelcreek
29

30. Activitats
Anàlisi
•Ús de diferents dispositius. Breu gràfica dels
dispositius del grup.
•Sensacions i emocions que podem tenir al
comprar un televisor per internet o unes vacances.
Són les mateixes?
•Exemples de bones i males experiències amb
diferents entorns o aplicacions.
•Aplicacions d’ús freqüent. Quines compartiu?
•Heu interactuat amb un agent virtual?
•Heu fet ús d’alguna aplicació de realitat
augmentada o de geolocalització? Cóm us heu
sentit?
Creació d’un nou producte
•Descripció del producte
•Target: població destí
•Funcionalitats de l’aplicació. Com a mínim una impactant i innovadora.
•Plataformes destí
•Wireframe o esboç de la pantalla d’inici per a les diferents plataformes destí
29

31. Gràcies per la vostra atenció
Ivette Garcia Manuel
ivette.garcia@upc.edu
igarciamanu@uoc.edu
Twitter: @ivette_alhoa
26/11/2013