Experiència d'usuari, arquitectura de la informació i disseny d'interfícies per a diferents...
Transcript of Experiència d'usuari, arquitectura de la informació i disseny d'interfícies per a diferents...
Experiència d'usuari, arquitectura de la Experiència d'usuari, arquitectura de la informació i disseny d'interfícies per a informació i disseny d'interfícies per a
diferents dispositius diferents dispositius
26/11/2013
Ivette Garcia [email protected]@uoc.edu
Twitter: @ivette_alhoa
• 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 i http://www.adobe.com/enterprise/pdfs/Forrester_Best_Prac_In_User_Exp.pdf
Arquitectura de la Arquitectura de la
informacióinformació
3
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
Experiència d’usuariExperiència d’usuari
Disseny centrat en l’usuari Disseny centrat en l’usuari
(DCU)(DCU)
Disseny i avaluació són posteriors a la investigació dels usuaris
• 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-rapid-prototyping/
http://openaccess.uoc.edu/webapps/o2/bitstream/10609/9743/4/PID_00158922-3.pdf
4
• S’ha de tenir en compte per a qui es dissenya i també els contextos d’ús.
http://mobile.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
Cicle de vida del disseny mòbil centrat en Cicle de vida del disseny mòbil centrat en
l’usuari (DCU)l’usuari (DCU)
Objectiu del DCU: crear productes que els usuaris trobin útils i usables.
5
Interfície natural d’usuari (NUI)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 dispositiusEl context: Tipus de dispositius
http://mashable.com/2012/05/16/android-fragmentation-graphic/
El context: FragmentacióEl context: Fragmentació
8
In 60 seconds (2011) http://www.go-gulf.com/wp-content/themes/go-gulf/blog/60seconds.jpg
Què fem a la xarxa?Què fem a la xarxa?
9
10
Equipament dels usuarisEquipament dels usuaris
Adaptació de “IV Estudio IAB Spain sobre Mobile Marketing”. Setiembre 2012 http://www.iabspain.net/wp-content/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
11
Equipament segons l’edatEquipament segons l’edat
IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabspain.net/wp-content/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
12
IV Estudio IAB Spain sobre Mobile Marketing. Setiembre 2012 http://www.iabspain.net/wp-content/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa1.pdf
Freqüència d'accés a Internet des de diferents Freqüència d'accés a Internet des de diferents
dispositiusdispositius
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/wp-content/uploads/downloads/2012/09/IV-Estudio-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-es-local.pdf
13
Diferents dispositius, diferents experiènciesDiferents dispositius, diferents experiències
14
Penetració dels smartphones 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-es-local.pdf
15
Ús de l’smartphone mentre...Ú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-es-local.pdf
Dispositius existents al mercat IDispositius existents al mercat I
Android actualment supera el 80% de la quota de mercat
http://blogs.strategyanalytics.com/WSS/post/2013/10/31/Android-Captures-Record-81-Percent-Share-of-Global-Smartphone-Shipments-in-Q3-2013.aspx
8 de cada 10 dispositius que es compren són smartphones
16
Samsung lidera el mercat dels smartphones
Apple lidera el mercat de les tablets
17
Dispositius existents al mercat IIDispositius existents al mercat II
http://developer.android.com/about/dashboards/index.html
71,9% d’usuaris Android tenen la versió 4.0 o superior instal·lada.
Quantitat de dispositius mòbils i tràfic de dadesQuantitat de dispositius mòbils i tràfic de dades
18
Hi ha més dispositius mòbils connectats que persones al planeta.
• El tràfic de dades mòbils va créixer un 70% respecte l’any anterior. o 520 petabytes per mes a finals de 2011o 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 2012…
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 2000L’any 2020 s’espera que…•Pot haver-hi mil milions de consumidors d’aplicacions de RA
Informe Cisco VNI (Visual Networking Index) sobre Tràfic Global de Dades Mòbils 2012-2017
19
Tràfic de dadesTràfic de dades
HàbitsHàbits
Una persona mira el seu dispositiu mòbil unes 150 vegades al diahttp://www.techcentral.co.za/the-next-10-years-in-mobile/27622/
http://www.11mark.com/IT-in-the-ToiletEl 75% de la població utilitzen els seus dispositius mòbils al bany.
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,...
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%).
Les persones usem els dispositius mòbils a qualsevol lloc i a qualsevol hora
Usuaris de tablets•relacionades amb jocs (85%)•canals de televisió (60%)•medis de comunicació (52%)
20
Web mòbil, Aplicacions natives o aplicacions Web mòbil, Aplicacions natives o aplicacions
híbrideshíbrides
Hi ha diferents opinions
Poden ser vies complementàries
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/IndependenciaDispositivo
•Tens el control directe de la distribució i monetització.•Les modificacions són més senzilles de dur a terme.
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-moda-testusabilidad-tablet-form-html/
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
Responsive web design IResponsive web design I
Disseny basat en una retícula flexible
http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
22
23
Elements flexibles
Comportaments adaptatius
i la seva posició també
Control de la visibilitat dels elements
http://www.cmswire.com/images/responsive-grid.png
http://colly.com/
Responsive web design IIResponsive web design II
24
Diferències entre plataformes 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
25
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.
Diferències entre iOS6 i Diferències entre iOS6 i
iOS7iOS7
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ó.
iOS 7 incorpora els següents aspectes:
26
Satisfacció dels usuarisSatisfacció dels usuaris
http://www.pfeifferreport.com/v2/wp-content/uploads/2013/09/iOS7-User-Experience-Shootout.pdf
27
Exemple: EvernoteExemple: 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)
28
Exemple: BBCExemple: 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
29
http://vimeo.com/40117938
Noves formes de traslladar continguts entre Noves formes de traslladar continguts entre
dispositiusdispositius
http://pleasurehunt2.mymagnum.com/
Noves formes de fer publicitatNoves formes de fer publicitat
Noves formes de mostrar la informacióNoves formes de mostrar la informació
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
ActivitatsActivitatsAnà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
Gràcies per la vostra atencióGràcies per la vostra atenció
Ivette Garcia [email protected]@uoc.edu
Twitter: @ivette_alhoa
26/11/2013