Experiència d'usuari, arquitectura de la informació
i disseny d'interfícies per a diferents dispositius
Ivette Garcia Manu...
Arquitectura de la informació
•

No hi ha una definició única i àmpliament acceptada (Rosenfeld, 2002; Dillon
i Turnbull, ...
Experiència d’usuari
Jasse James Garrett, el març de l’any 2000, realitza un mapa conceptual que
servirà de base a tot el ...
Disseny centrat en l’usuari (DCU)
•

Donald A. Norman és el creador d’aquest terme.

•

DCU és una manera de planificar, d...
Cicle de vida del disseny mòbil centrat en l’usuari (DCU)

http://mobile.smashingmagazine.com/2011/05/02/a-user-centered-a...
Interfície natural d’usuari (NUI)
La interfície natural d'usuari és aquella en què s'interactua amb un sistema,
aplicació,...
El context: Tipus de dispositius

7
El context: Fragmentació

http://mashable.com/2012/05/16/android-fragmentation-graphic/

8
Què fem a la xarxa?

In 60 seconds (2011) http://www.go-gulf.com/wp-content/themes/go-gulf/blog/60seconds.jpg

9
Equipament dels usuaris

Adaptació de “IV Estudio IAB Spain sobre Mobile Marketing”. Setiembre 2012 http://www.iabspain.ne...
Equipament segons l’edat

IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabspain.net/wpcontent/up...
Freqüència d'accés a Internet des de diferents dispositius

8 de cada 10 internautes accedeixen
a Internet des del mòbil.
...
Diferents dispositius, diferents experiències

IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabs...
Penetració dels smartphones

Our Mobile Planet: España. Conoce mejor al consumidor móvil. Mayo 2013. http://services.googl...
Ús de l’smartphone mentre...

Our Mobile Planet: España. Conoce mejor al consumidor móvil. Mayo 2013. http://services.goog...
Dispositius existents al mercat I
8 de cada 10 dispositius que es compren són smartphones

Android actualment supera el 80...
Dispositius existents al mercat II
Samsung lidera el mercat
dels smartphones
Apple lidera el mercat
de les tablets

71,9% ...
Quantitat de dispositius mòbils i tràfic de dades
Hi ha més dispositius mòbils connectats que persones al planeta.
L’any 2...
Tràfic de dades

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

19
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-...
Web mòbil, Aplicacions natives o aplicacions híbrides
Hi ha diferents opinions
Poden ser vies complementàries
Els usuaris ...
Responsive web design I

Disseny basat en una retícula flexible

http://elliotjaystocks.com/blog/a-better-photoshop-grid-f...
Responsive web design II
Elements flexibles
i la seva posició també
Comportaments adaptatius
Control de la visibilitat del...
Diferències entre plataformes

Extret de la infografia “iOS and Android Design Guidelines” http://www.kinvey.com/blog/2765...
Diferències entre iOS6 i iOS7
iOS 7 incorpora els següents aspectes:
La interfície d'usuari ajuda als usuaris a entendre i...
Satisfacció dels usuaris

http://www.pfeifferreport.com/v2/wp-content/uploads/2013/09/iOS7-User-Experience-Shootout.pdf

2...
Exemple: Evernote
Evernote: experiències d’usuari diferents a cada entorn i plataforma.
•No usen HTML5 ni aposten pel míni...
Exemple: BBC
Disseny escalable i adaptable a diferents dispositius
Estructura de continguts: principis, patrons i directiu...
Noves formes de traslladar continguts entre dispositius

http://vimeo.com/40117938

Noves formes de fer publicitat

http:/...
Activitats
Anàlisi
•Ús de diferents dispositius. Breu gràfica dels
dispositius del grup.
•Sensacions i emocions que podem ...
Gràcies per la vostra atenció

Ivette Garcia Manuel
ivette.garcia@upc.edu
igarciamanu@uoc.edu

Twitter: @ivette_alhoa
26/1...
Upcoming SlideShare
Loading in …5
×

Experiència d'usuari, arquitectura de la informació i disseny d'interfícies per a diferents dispositius

387 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
387
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Experiència d'usuari, arquitectura de la informació i disseny d'interfícies per a diferents dispositius

  1. 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. 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. 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. 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. 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. 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. 7. El context: Tipus de dispositius 7
  8. 8. El context: Fragmentació http://mashable.com/2012/05/16/android-fragmentation-graphic/ 8
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Tràfic de dades Informe Cisco VNI (Visual Networking Index) sobre Tràfic Global de Dades Mòbils 2012-2017 19
  20. 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. 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. 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. 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. 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. 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. 26. Satisfacció dels usuaris http://www.pfeifferreport.com/v2/wp-content/uploads/2013/09/iOS7-User-Experience-Shootout.pdf 26
  27. 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. 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. 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. 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. 31. Gràcies per la vostra atenció Ivette Garcia Manuel ivette.garcia@upc.edu igarciamanu@uoc.edu Twitter: @ivette_alhoa 26/11/2013

×