31
Experiència d'usuari, arquitectura de Experiència d'usuari, arquitectura de la informació i disseny d'interfícies la informació i disseny d'interfícies per a diferents dispositius per a diferents dispositius 26/11/2013 Ivette Garcia Manuel [email protected] [email protected] Twitter: @ivette_alhoa

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

  • Upload
    inina

  • View
    180

  • Download
    1

Embed Size (px)

Citation preview

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

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

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

• 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ó

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

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

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

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.

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

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

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

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

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

7

El context: Tipus de dispositiusEl context: Tipus de dispositius

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

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

El context: FragmentacióEl context: Fragmentació

8

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

19

Tràfic de dadesTràfic de dades

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

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

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

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

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

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

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

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

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

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

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

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:

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

26

Satisfacció dels usuarisSatisfacció dels usuaris

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

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

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)

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

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

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

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

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

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

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

Gràcies per la vostra atencióGràcies per la vostra atenció

Ivette Garcia [email protected]@uoc.edu

Twitter: @ivette_alhoa

26/11/2013