SlideShare uma empresa Scribd logo
1 de 36
Baixar para ler offline
Usabilitat i disseny interactiu
Mariona Grané. LMI - UB.
El disseny interactiu és el disseny d’interfícies digitals.
U i D
Per a un usuari, la interfície, és el sistema.
U i D
Usabilitat
UX - Experiència d’usuari
Arquitectura de la informació
Interacció persona-ordinador
Ergonomia
Conceptes i termes utilitzats en disseny interactiu:
Disseny Interactiu
UI [ user interface ]
respon al com es dissenya un producte des del punt de
vista de la enginyeria i atén al disseny dels components
estructurals de qualsevol programa multimèdia o
HCI [ human - computer interaccion ]
considera com un programa organitza les accions que
pot realitzar un usuari ... i que fa un usuari davant un
programa, com reacciona, quines opcions té, quines
GUI [ graphic user interface ]
es refereix al disseny més físic i visual de cada element
de la pantalla, de cada pantalla, i del conjunt de totes
les pantalles que acaba conformant un entorn interactiu
U i D
UI [ user interface ]
HCI [ human - computer interaccion ]
GUI [ graphic user interface ]
concepció visual + interacció + enginyeria
U i D
Jesse James Garret 2004
U i D
U i D
Usabilitat
Quin és més usable?
U i D
Usabilitat
U i D
U i D
U i D
Quin mapa és més usable per a un escolar?
Quin mapa és més usable per a un tècnic de camins?
U i D
la usabilitat no és una idea intrínseca d'un material web
prové de la paraula "usable" i per tant de la paraula "usuari"
un usuari ha de poder utilitzar de forma senzilla i eficient
un disseny interactiu
Coneix el teu usuari
U i D
Usabilitat
U i D
Usabilitat
it’s not me
it’s you
X
El concepte d’usabilitat
es centra en la idea de facilitat, intuició i efectivitat en l'ús
Jakob Nielsen
U i D
Usabilitat
La usabilitat es de
fi
neix com el grau en el que un producte
pot ser utilitzat per un grup d'usuaris especí
fi
cs per assolir
certes
fi
tes de
fi
nides amb efectivitat, e
fi
ciència, i satisfacció,
en un context d'ús especí
fi
c.
(Normativa ISO 9241 (Ergonomic requeriments for visual
display terminals, 1998, apartat 11-Guidance for usability))
La usabilitat és la percepció de que tant consistent,
organitzat, e
fi
cient, productiu, fàcil d'utilitzar i intuïtiu és el
procés de realitzar una tasca particular dins un sistema.
(Baeza-Yates,R; Rivera,C; Velasco,J. 2004)
U i D
Usabilitat
>> Qualitat en el disseny interactiu
En el disseny de la interfície de pantalla
En el disseny de tot un entorn interactiu de diferents
pantalles i recursos
En els elements multimèdia
En l’estructura de l’entorn interactiu i la navegació
U i D
principis de disseny interactiu, segons M. Grané (2009)
principis de disseny interactiu, segons M. Grané (2009)
U i D
UX ... Experiència d’usuari
· descriu el veritable sentit del disseny que és l’usuari
· introdueix la importància de les emocions en el disseny
Experiència d’usuari
U i D
No és una tendència sinó un paradigma:
Experiència d’usuari
U i D
Usabilitat >>> carácterística d’un producte
Experiència d'usuari >>> conjunt de sensacions i
emocions que desperta a una persona l'ús d'una aplicació
Els aspectes emocionals juguen un paper fonamental en la interacció de
l'usuari perquè afecten els processos cognitius, atenció, memorització,
rendiment, … (Norman)
Experiència d’usuari
"Les relacions personals i positives amb un disseny provoquen
sentiments d'estima, lleialtat i paciència, factors significatius en la
utilitat a llarg termini i en l'èxit global d'un disseny.
Aquestes relacions positives tenen implicacions pel que fa
referència a l'eficàcia de les interaccions entre les persones i els
dissenys.
Les relacions positives amb un disseny funcionen en una
interacció que ajuda a catalitzar el pensament creatiu i la resolució
de problemes.
Pel contrari, les relacions negatives provoquen una interacció que
estreny el pensament i paralitza la creativitat." (Butler, Holden &
Lidwell, 2005)
U i D
User centered design .... disseny centrat en l’usuari
Experiència d’usuari
U i D
Procés o la metodologia que assegura la usabilitat d’un sistema,
atenent les necessitats de l’usuari i la seva participació en el
procés de disseny
U i D
Arquitectura de la informació
Estructuració de la informació, selecció i presentació
en entorns informatius.
Informació = contingut
Arquitectura de la informació
U i D
Disciplina encarregada d’estructurar, organitzar i etiquetar els
elements que conformen els entorns informacionals per a
facilitar la localització, o l’accés a la informació que contenen, i
millorar, així, la seva utilitat i el seu apro
fi
tament per part dels
usuaris.
(Pérez-Montoro, 2010)
L'arquitecte de la informació és aquell que ha d'identi
fi
car la
misió (els objectius) i la visió (les expectatives dels usuaris) d'una
web, determinar els continguts i funcionalitats de la página,
facilitar l'accés mitjançant sistemes d'organització, etiquetat,
navegació, cerca, ... i plani
fi
car en previsió de futures
modi
fi
cacions i del creixement de la plana.
(Morville y Rosenfeld, 1998)
U i D
Prové de la informàtica, i de la bibliotecnologia.
Arquitectura de la informació
U i D
1959 > IBM
1970 > Xerox
1976 > R.S. Wurman
1998 > Rosenfeld & Morville
U i D
Usabilitat
UX - Experiència d’usuari
Arquitectura de la informació
Interacció persona-ordinador
Ergonomia
Conceptes i termes utilitzats igual al disseny interactiu:
Disseny Interactiu
U i D
Olga Carreras
olgacarreras.blogspot.com.es
U i D
Anatomy of ux design
UI [ user interface ]
HCI [ human - computer interaccion ]
GUI [ graphic user interface ]
DISSENY
INTERACTIU
U i D
LEER NO MATA:
Krug, S. (2006). No me hagas pensar: Una aproximación a la usabilidad en la web. Madrid: Prentice
Hall.
Norman, D.A (2004). El diseño emocional. Por qué nos gustan (o no) los objetos cotidianos.
Barcelona: Paidós.
Braun, K ; Gadney, M; Haughey, M; Roselli, A; Synstelien, D; Walter, T; Wertheimer, D. (2002).
Usabilidad. Madrid: Anaya Multimedia.
Cooper, A.; Reimann, R. M; Cronin, D. (2007), About Face 3: The Essentials of Interaction Design.
Chichester: Wiley.
Garrett, J.J. (2002). The elements of user experience: user-centered design for the web. New York:
New Riders.
Unger, R & Chandler,C. (2012). A Project Guide to UX Design: For user experience designers in the
field or in the making. New York: New Riders.
Rosenfeld, L; Morville,P. (1998). Information Architecture for the World Wide Web. Cambridge:
O'Reilly
Grané, M. (2012). El disseny interactiu a la xarxa. Barcelona: Edicions UB.
Perez-Montoro, M. (2010). Arquitectura de la información en entornos web. Gijon: Trea
U i D
Usabilitat i disseny interactiu
Mariona Grané. LMI UB

Mais conteúdo relacionado

Semelhante a Conceptes en disseny interactiu

Dissenys Presentacions Multimèdia
Dissenys Presentacions MultimèdiaDissenys Presentacions Multimèdia
Dissenys Presentacions MultimèdiaTicgrup2
 
Narrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia BriaNarrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia BriaLidia Bria
 
La usabilitat requeriment principal
La usabilitat requeriment principalLa usabilitat requeriment principal
La usabilitat requeriment principalEsther Caparrós
 
UNITAT 1. Disseny assistit per ordinador
UNITAT 1. Disseny assistit per ordinadorUNITAT 1. Disseny assistit per ordinador
UNITAT 1. Disseny assistit per ordinadorda_FLAWLESS
 
El llenguatge dels nous mitjans de comunicació
El llenguatge dels nous mitjans de comunicacióEl llenguatge dels nous mitjans de comunicació
El llenguatge dels nous mitjans de comunicacióDiegoC_2011
 
Render i renderitzar
Render i renderitzarRender i renderitzar
Render i renderitzarsergidpm
 
Documentació Curs Disseny Centrat en l'Usuari
Documentació Curs Disseny Centrat en l'UsuariDocumentació Curs Disseny Centrat en l'Usuari
Documentació Curs Disseny Centrat en l'UsuariDigital Granollers
 
Els Nous Mitjans
Els Nous MitjansEls Nous Mitjans
Els Nous MitjansJordi Gomez
 
Pautes social media - LH
Pautes social media - LHPautes social media - LH
Pautes social media - LHCulturaLH
 
Arquitectura de l'informacio_pac1
Arquitectura de l'informacio_pac1Arquitectura de l'informacio_pac1
Arquitectura de l'informacio_pac1Marcos Baldovi
 
Cacera del tresor web 2.0
Cacera del tresor web 2.0Cacera del tresor web 2.0
Cacera del tresor web 2.0Edu Alias
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?Joan Solé Pla
 
Fonaments i evolució de la Multimèdia - Pac2 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac2 - Lídia BriaFonaments i evolució de la Multimèdia - Pac2 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac2 - Lídia BriaLidia Bria
 
Design thinking, innovació centrada en les persones
Design thinking, innovació centrada en les personesDesign thinking, innovació centrada en les persones
Design thinking, innovació centrada en les personesAriadna Font Llitjos
 
El llenguatge dels nous medis de comunicació pac1
El llenguatge dels nous medis de comunicació pac1El llenguatge dels nous medis de comunicació pac1
El llenguatge dels nous medis de comunicació pac1jtriquellm
 
001 disseny
001 disseny001 disseny
001 dissenyslegna3
 

Semelhante a Conceptes en disseny interactiu (20)

40idees
40idees40idees
40idees
 
Eines20
Eines20Eines20
Eines20
 
Dissenys Presentacions Multimèdia
Dissenys Presentacions MultimèdiaDissenys Presentacions Multimèdia
Dissenys Presentacions Multimèdia
 
Narrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia BriaNarrativa interactiva - Pràctica - Lídia Bria
Narrativa interactiva - Pràctica - Lídia Bria
 
La usabilitat requeriment principal
La usabilitat requeriment principalLa usabilitat requeriment principal
La usabilitat requeriment principal
 
UNITAT 1. Disseny assistit per ordinador
UNITAT 1. Disseny assistit per ordinadorUNITAT 1. Disseny assistit per ordinador
UNITAT 1. Disseny assistit per ordinador
 
Web20
Web20Web20
Web20
 
El llenguatge dels nous mitjans de comunicació
El llenguatge dels nous mitjans de comunicacióEl llenguatge dels nous mitjans de comunicació
El llenguatge dels nous mitjans de comunicació
 
Render i renderitzar
Render i renderitzarRender i renderitzar
Render i renderitzar
 
Documentació Curs Disseny Centrat en l'Usuari
Documentació Curs Disseny Centrat en l'UsuariDocumentació Curs Disseny Centrat en l'Usuari
Documentació Curs Disseny Centrat en l'Usuari
 
Els Nous Mitjans
Els Nous MitjansEls Nous Mitjans
Els Nous Mitjans
 
Pautes social media - LH
Pautes social media - LHPautes social media - LH
Pautes social media - LH
 
Arquitectura de l'informacio_pac1
Arquitectura de l'informacio_pac1Arquitectura de l'informacio_pac1
Arquitectura de l'informacio_pac1
 
Cacera del tresor web 2.0
Cacera del tresor web 2.0Cacera del tresor web 2.0
Cacera del tresor web 2.0
 
Què són els nous mitjans?
Què són els nous mitjans?Què són els nous mitjans?
Què són els nous mitjans?
 
Presentació Jornada Técnica #uoc-sprint
Presentació Jornada Técnica #uoc-sprintPresentació Jornada Técnica #uoc-sprint
Presentació Jornada Técnica #uoc-sprint
 
Fonaments i evolució de la Multimèdia - Pac2 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac2 - Lídia BriaFonaments i evolució de la Multimèdia - Pac2 - Lídia Bria
Fonaments i evolució de la Multimèdia - Pac2 - Lídia Bria
 
Design thinking, innovació centrada en les persones
Design thinking, innovació centrada en les personesDesign thinking, innovació centrada en les persones
Design thinking, innovació centrada en les persones
 
El llenguatge dels nous medis de comunicació pac1
El llenguatge dels nous medis de comunicació pac1El llenguatge dels nous medis de comunicació pac1
El llenguatge dels nous medis de comunicació pac1
 
001 disseny
001 disseny001 disseny
001 disseny
 

Último

Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musicalalba444773
 
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfErnest Lluch
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATLasilviatecno
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfsilvialopezle
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,Lasilviatecno
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxCRIS650557
 

Último (8)

Plans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El MusicalPlans Estudi per Especialitats - El Musical
Plans Estudi per Especialitats - El Musical
 
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdfESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
ESCOLAERNESTLLUCHINFORME_BAREM_RESOLTES_BAREM.pdf
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
 
itcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldaduraitcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldadura
 
Sílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdfSílvia_López_Competic3_bloc000002_C8.pdf
Sílvia_López_Competic3_bloc000002_C8.pdf
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
 
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdfHISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
 

Conceptes en disseny interactiu

  • 1. Usabilitat i disseny interactiu Mariona Grané. LMI - UB.
  • 2. El disseny interactiu és el disseny d’interfícies digitals. U i D Per a un usuari, la interfície, és el sistema.
  • 3. U i D Usabilitat UX - Experiència d’usuari Arquitectura de la informació Interacció persona-ordinador Ergonomia Conceptes i termes utilitzats en disseny interactiu: Disseny Interactiu
  • 4. UI [ user interface ] respon al com es dissenya un producte des del punt de vista de la enginyeria i atén al disseny dels components estructurals de qualsevol programa multimèdia o HCI [ human - computer interaccion ] considera com un programa organitza les accions que pot realitzar un usuari ... i que fa un usuari davant un programa, com reacciona, quines opcions té, quines GUI [ graphic user interface ] es refereix al disseny més físic i visual de cada element de la pantalla, de cada pantalla, i del conjunt de totes les pantalles que acaba conformant un entorn interactiu U i D
  • 5. UI [ user interface ] HCI [ human - computer interaccion ] GUI [ graphic user interface ] concepció visual + interacció + enginyeria U i D
  • 6. Jesse James Garret 2004 U i D
  • 8. Quin és més usable? U i D Usabilitat
  • 10. U i D
  • 11. U i D
  • 12. Quin mapa és més usable per a un escolar? Quin mapa és més usable per a un tècnic de camins? U i D
  • 13. la usabilitat no és una idea intrínseca d'un material web prové de la paraula "usable" i per tant de la paraula "usuari" un usuari ha de poder utilitzar de forma senzilla i eficient un disseny interactiu Coneix el teu usuari U i D Usabilitat
  • 14. U i D Usabilitat it’s not me it’s you X
  • 15. El concepte d’usabilitat es centra en la idea de facilitat, intuició i efectivitat en l'ús Jakob Nielsen U i D Usabilitat
  • 16. La usabilitat es de fi neix com el grau en el que un producte pot ser utilitzat per un grup d'usuaris especí fi cs per assolir certes fi tes de fi nides amb efectivitat, e fi ciència, i satisfacció, en un context d'ús especí fi c. (Normativa ISO 9241 (Ergonomic requeriments for visual display terminals, 1998, apartat 11-Guidance for usability)) La usabilitat és la percepció de que tant consistent, organitzat, e fi cient, productiu, fàcil d'utilitzar i intuïtiu és el procés de realitzar una tasca particular dins un sistema. (Baeza-Yates,R; Rivera,C; Velasco,J. 2004) U i D
  • 17. Usabilitat >> Qualitat en el disseny interactiu En el disseny de la interfície de pantalla En el disseny de tot un entorn interactiu de diferents pantalles i recursos En els elements multimèdia En l’estructura de l’entorn interactiu i la navegació U i D
  • 18. principis de disseny interactiu, segons M. Grané (2009)
  • 19. principis de disseny interactiu, segons M. Grané (2009)
  • 20. U i D UX ... Experiència d’usuari
  • 21. · descriu el veritable sentit del disseny que és l’usuari · introdueix la importància de les emocions en el disseny Experiència d’usuari U i D
  • 22. No és una tendència sinó un paradigma: Experiència d’usuari U i D Usabilitat >>> carácterística d’un producte Experiència d'usuari >>> conjunt de sensacions i emocions que desperta a una persona l'ús d'una aplicació
  • 23.
  • 24.
  • 25. Els aspectes emocionals juguen un paper fonamental en la interacció de l'usuari perquè afecten els processos cognitius, atenció, memorització, rendiment, … (Norman) Experiència d’usuari "Les relacions personals i positives amb un disseny provoquen sentiments d'estima, lleialtat i paciència, factors significatius en la utilitat a llarg termini i en l'èxit global d'un disseny. Aquestes relacions positives tenen implicacions pel que fa referència a l'eficàcia de les interaccions entre les persones i els dissenys. Les relacions positives amb un disseny funcionen en una interacció que ajuda a catalitzar el pensament creatiu i la resolució de problemes. Pel contrari, les relacions negatives provoquen una interacció que estreny el pensament i paralitza la creativitat." (Butler, Holden & Lidwell, 2005) U i D
  • 26. User centered design .... disseny centrat en l’usuari Experiència d’usuari U i D Procés o la metodologia que assegura la usabilitat d’un sistema, atenent les necessitats de l’usuari i la seva participació en el procés de disseny
  • 27. U i D Arquitectura de la informació
  • 28. Estructuració de la informació, selecció i presentació en entorns informatius. Informació = contingut Arquitectura de la informació U i D
  • 29. Disciplina encarregada d’estructurar, organitzar i etiquetar els elements que conformen els entorns informacionals per a facilitar la localització, o l’accés a la informació que contenen, i millorar, així, la seva utilitat i el seu apro fi tament per part dels usuaris. (Pérez-Montoro, 2010) L'arquitecte de la informació és aquell que ha d'identi fi car la misió (els objectius) i la visió (les expectatives dels usuaris) d'una web, determinar els continguts i funcionalitats de la página, facilitar l'accés mitjançant sistemes d'organització, etiquetat, navegació, cerca, ... i plani fi car en previsió de futures modi fi cacions i del creixement de la plana. (Morville y Rosenfeld, 1998) U i D
  • 30. Prové de la informàtica, i de la bibliotecnologia. Arquitectura de la informació U i D 1959 > IBM 1970 > Xerox 1976 > R.S. Wurman 1998 > Rosenfeld & Morville
  • 31. U i D Usabilitat UX - Experiència d’usuari Arquitectura de la informació Interacció persona-ordinador Ergonomia Conceptes i termes utilitzats igual al disseny interactiu: Disseny Interactiu
  • 32. U i D Olga Carreras olgacarreras.blogspot.com.es
  • 33. U i D Anatomy of ux design
  • 34. UI [ user interface ] HCI [ human - computer interaccion ] GUI [ graphic user interface ] DISSENY INTERACTIU U i D
  • 35. LEER NO MATA: Krug, S. (2006). No me hagas pensar: Una aproximación a la usabilidad en la web. Madrid: Prentice Hall. Norman, D.A (2004). El diseño emocional. Por qué nos gustan (o no) los objetos cotidianos. Barcelona: Paidós. Braun, K ; Gadney, M; Haughey, M; Roselli, A; Synstelien, D; Walter, T; Wertheimer, D. (2002). Usabilidad. Madrid: Anaya Multimedia. Cooper, A.; Reimann, R. M; Cronin, D. (2007), About Face 3: The Essentials of Interaction Design. Chichester: Wiley. Garrett, J.J. (2002). The elements of user experience: user-centered design for the web. New York: New Riders. Unger, R & Chandler,C. (2012). A Project Guide to UX Design: For user experience designers in the field or in the making. New York: New Riders. Rosenfeld, L; Morville,P. (1998). Information Architecture for the World Wide Web. Cambridge: O'Reilly Grané, M. (2012). El disseny interactiu a la xarxa. Barcelona: Edicions UB. Perez-Montoro, M. (2010). Arquitectura de la información en entornos web. Gijon: Trea U i D
  • 36. Usabilitat i disseny interactiu Mariona Grané. LMI UB