Arquitectura de la informació
per a dispositius mòbils
Núria Ferran-Ferrer

Muriel Garreta-Domingo

Professora dels Estudi...
Resum enquesta participants taller

Procedència

Motivació

15 respostes de 70 assistents
Ocupació actual:
Consultora UI/U...
Un món mòbil
96% població mundial té telèfon mòbil (128% món desenvolupat i 89%
països en desenvolupament, dades ITU)
75% ...
Definicions breus I/II
Interacció persona-ordinador: disciplina que estudia la
interacció de les persones amb els ordinado...
Definicions breus II/II
Experiència d’usuari: conjunt de factors i elements
relatius a la interacció de l’usuari amb un en...
Procés DCU comprimit (2 vídeos)

Nordstrom Innovation Lab: Sunglass iPad
App Case Study

The Deep Dive - IDEO 1999

7/50
Usuaris i el seu
comportament

Diversitat de
continguts

Necessitats i objectius
de negoci i context

The Three Circles of...
9/50
• Useful. As practitioners, we can't be content to paint within the lines drawn by

UX Honeycomb:
Més enllà de la usabilit...
11/50
Definició AI
AI: disseny estructural d'un entorn informacional compartit
Art i ciència d'organitzar la informació: trobabl...
Anatomia de l'AI: Sist d'Organització (1/4)
Resultat del procés de dividir i classificar un àmbit concret en grups o
entit...
Sist. d’organització: esquema
TimeLine

14/50
Sist. d’organització: esquema
Mapes

15/50
Sist. d’organització: estructures
Jeràrquica
Pagina índex i conjunts de subpàgines
Bo: per organitzar estructures
complica...
Sist. d’organització: estructures
Hub&Spoke (Cub i radi)
Índex central. Els usuaris no poden
navegar entre les subpantalle...
Sist. d’organització: estructures
Aniuada
Guia els usuaris en un recorregut lineal
cap a continguts més concrets i detalla...
Sist. d’organització: estructures
Pestanyes
Col·lecció de seccions enllaçades a
través d'un toolbar menu.
L'usuari amb un ...
Sist. d’organització: estructures
Bento Box/Safata menú
El contingut més detallat ja apareix a la
pàgina d'inici a partir ...
Sist. d’organització: estructures
Filtered view
L'usuari explora el contingut a partir de
diferents propostes de visualitz...
Etiquetatge (2/4)
Etiquetatge: forma de representació de continguts de forma eficient.
Redueix el consum d'espai a un ento...
Etiquetatge (2/4)

23/50
Exploració (3/4)
Sist navegació: ordenen i agrupen els continguts sota categories que
formen una classificació per:
- perm...
Exploració (3/4)

25/50
Recuperació (4/4)
Sist de cerca: localitzar informació interrogant un sistema de cerca a
partir d'una necessitat d'informa...
Recuperació (4/4)

27/50
http://mobile.smashingmagazine.com/2012/07/12/elementsmobile-user-experience/

28/50
CONTEXT: Aspectes de negoci...
tecnològics
Viewing the NYTimes:
1. iPad app
2. iPhone app
3. Web amb Safari

29/50
Navegador del mòbil
Webapps no són apps encara
que poden tenir el look and feel
com apps

Fàcilment canvia i respon a la
m...
Apps
Canvia per adaptar-se a un conjunt
predeterminat de pantalles i mides
de dispositius
Estàs disposat a fer
desenvolupa...
CONTEXT:
Diferències fisiques
Mida, dimensions reduïdes
Lleugeresa fa que es pugui dur a tot
arreu
Accés constant
Pant...
CONTEXT + USUARIS

33/50
CONTEXT +
USUARIS
“[…] This shift away from objective context
toward subjective context will reshape the
way we design exp...
USUARIS Diferències emocionals /
cognitives

35/50
USUARIS Diferències emocionals /
cognitives
 Connexió emocional (63% se senten
perdudes sense mòbil)
 Dispositiu més “ín...
http://www.giantant.com/antenna/2007/06/design-sketch-the-context-of-m.html

37/50
CONTINGUT

Mobile First... Però: Dissenya l’experiència de l’ecosistema
38/50
Mobile i IA
Bones pràctiques a tenir en compte en l'AI
A l'hora d'organitzar la informació per a dispositius menuts, es fa...
Mobile i IA

http://mobiforge.com/book/mobile-information-architecture
40/50
Drill-down
Joc de l’AI i les mascotes del barri

Basat en la presentació del projecte “Pet Lost&Found” de Nick Fink “Mobile
Informati...
Bases del joc AI & mascotes
Concretar les necessitats dels usuaris i de la protectora d’animals.
Determinar la finalitat d...
Joc de l’AI i les mascotes del barri
Posada en comú

http://sweepstakes.rewardit.com/old-ipad-uses/
44/50
Joc de l’AI i les mascotes del barri

45/50
Joc de l’AI i les mascotes del barri

46/50
47/50
48/50
A User-Centered Approach
To Web Design For Mobile Devices
Design for smaller screen sizes
Simplify navigation
Prioritize c...
User-Centered Design: ISO 9241-210

50/50
Design principles for mobile learning
1 Start with needs
2 Do less
3 Design with data
4 Do the hard work to make it simple...
Moltes gràcies per la vostra
participació!
Núria Ferran-Ferrer

Muriel Garreta-Domingo

Professora dels Estudis
de Cièncie...
Upcoming SlideShare
Loading in …5
×

Arquitectura de la Informació per a dispositius mòbils - WIAD 2014

1,067 views

Published on

Information Architecture for mobile devices. Presentation for the World Information Architecture Day, Barcelona 15th February 2014.

Published in: Education

Arquitectura de la Informació per a dispositius mòbils - WIAD 2014

  1. 1. Arquitectura de la informació per a dispositius mòbils Núria Ferran-Ferrer Muriel Garreta-Domingo Professora dels Estudis de Ciències de la Informació i la Comunicació Serveis de l’Aprenentatge Àrea de Tecnologia Educativa World Information Architecture Day, Barcelona 15 de febrer de 2014
  2. 2. Resum enquesta participants taller Procedència Motivació 15 respostes de 70 assistents Ocupació actual: Consultora UI/UX Front End dev Front-end, diseño web Empresari autònom Professora Dpto. Marketing Digital Consultora UX UX designer Directora d'art junior Estudiant Product Manager Coordinadora i professora de cicles formatius Grau coneixement AI 2/50
  3. 3. Un món mòbil 96% població mundial té telèfon mòbil (128% món desenvolupat i 89% països en desenvolupament, dades ITU) 75% accés a Internet al món és a través mòbil (dades Google) Canvis i noves oportunitats: – com es lliura la informació (responsive, app, natiu, híbrid) – com s'estructura (AI) –… WorldPress Photo 2014 http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html 3/50
  4. 4. Definicions breus I/II Interacció persona-ordinador: disciplina que estudia la interacció de les persones amb els ordinadors. (HCI/IPO) Usabilitat: característica de ser fàcil, aplicat habitualment al software, per ò rellevant per a tot tipus d’artefacte. 4/50
  5. 5. Definicions breus II/II Experiència d’usuari: conjunt de factors i elements relatius a la interacció de l’usuari amb un entorn o dispositiu concret, el resultat de la qual és la percepció sobre un servei, producte o dispositiu. (UX) Disseny Centrat en l’Usuari: és una filosofia i procés de disseny en el qual les necessitats, els desigs i les limitacions de l'usuari final d'una interfície, o document, prenen una atenció i rellevància considerable en cada nivell del procés de disseny. 5/50
  6. 6. Procés DCU comprimit (2 vídeos) Nordstrom Innovation Lab: Sunglass iPad App Case Study The Deep Dive - IDEO 1999 7/50
  7. 7. Usuaris i el seu comportament Diversitat de continguts Necessitats i objectius de negoci i context The Three Circles of Information Architecture 8/50
  8. 8. 9/50
  9. 9. • Useful. As practitioners, we can't be content to paint within the lines drawn by UX Honeycomb: Més enllà de la usabilitat managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful. • Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient. • Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design. • Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need. • Accessible. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it's good business and the ethical thing to do. Eventually, it will become the law. • Credible. Thanks to the Web Credibility Project, we're beginning to understand the design elements that influence whether users trust and believe what we tell them. • Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction. http://semanticstudios.com/publications/semantics/000029.php 10/50
  10. 10. 11/50
  11. 11. Definició AI AI: disseny estructural d'un entorn informacional compartit Art i ciència d'organitzar la informació: trobable/gestionable/útil Els usuaris no perceben l'AI d'un lloc web a no ser que no funcioni. 4 pilars: Sitemes d'organització Etiquetatge Navegació Cerca 12/50
  12. 12. Anatomia de l'AI: Sist d'Organització (1/4) Resultat del procés de dividir i classificar un àmbit concret en grups o entitats que els conformen. Esquemes d'organització: sistemes que organitzen els ítems d'informació continguts en una web en grups i a partir d'un criteri concret. Esquemes exactes: alfabètic, cronològic, geogràfic Esquemes ambigus: tema, tasca, audiència, etc. Estructures d'organització: sistemes que organitzen els grups d'ítems d'informació resultats dels esquemes mostrant les dependències lògiques que existeixen entre aquests. Pex: jeràrquic, hipertextual o xarxa, seqüencial, en taula, etc. 13/50
  13. 13. Sist. d’organització: esquema TimeLine 14/50
  14. 14. Sist. d’organització: esquema Mapes 15/50
  15. 15. Sist. d’organització: estructures Jeràrquica Pagina índex i conjunts de subpàgines Bo: per organitzar estructures complicades que es basen en una estructura de site per desktop Alerta: Navegació. Estructures multifacetades de navegació poden ser un problema per a les pantalles petites Slow Carb App 16/50
  16. 16. Sist. d’organització: estructures Hub&Spoke (Cub i radi) Índex central. Els usuaris no poden navegar entre les subpantalles, sempre han de retornar a l'inici. Bo: per focalitzar-se en tasques.Per aplicacions multifuncionals que cada una pot tenir una navegació interna pròpia i un objectiu propi. Alerta: Els usuaris multi-tasca odien aquesta estructura 17/50
  17. 17. Sist. d’organització: estructures Aniuada Guia els usuaris en un recorregut lineal cap a continguts més concrets i detallats. Es pot combinar amb d'altres estructures: jeràrquica o hub&spoke Bo: proporciona els usuaris seguretat perquè dóna la sensació de moure's endavant i endarrere linealment. Alerta: Els usuaris no poden moure's ràpidament entre seccions. Email app d'Iphone 18/50
  18. 18. Sist. d’organització: estructures Pestanyes Col·lecció de seccions enllaçades a través d'un toolbar menu. L'usuari amb un cop d'ull sap el què des que obra l'app. Bo: apps d'un únic tema. Acull multiples tasques. Alerta: Utilizar-la per estructures de contingut simple. Airbnb. Location de vacances 19/50
  19. 19. Sist. d’organització: estructures Bento Box/Safata menú El contingut més detallat ja apareix a la pàgina d'inici a partir de petites porcions (continguts o recursos). És útil sobretot per tablets, per la seva complexitat. Bo: molt potent perquè amb un cop d'ull l'usuari ja s'immersa en els continguts Alerta: Cal presentar molt clarament la informació i ha de ser una interfície molt ben dissenyada Kayak app 20/50
  20. 20. Sist. d’organització: estructures Filtered view L'usuari explora el contingut a partir de diferents propostes de visualització. Vista amb icones, amb detalls de text, etc. Bo: apps amb molt contingut. Pex revistes. Alerta: per visualitzar-se en pantalles més petites pot ser difícil. Feedly 21/50
  21. 21. Etiquetatge (2/4) Etiquetatge: forma de representació de continguts de forma eficient. Redueix el consum d'espai a un entorn informacional i al cervell de l'usuari. Tipologia de formats: icònic, textual, links, títols, opcions del sistema de navegació (home, web map), folksonomies 22/50
  22. 22. Etiquetatge (2/4) 23/50
  23. 23. Exploració (3/4) Sist navegació: ordenen i agrupen els continguts sota categories que formen una classificació per: - permetre la identificació de les relacions entre continguts - oferir un sistema d'orientació - adquirir una imatge mental de l'estructura del lloc web * Poden ser integrats (pex contextuals, locals) o complementaris (mapa web, índexs o guies). * Exemples: http://mobiledesignpatterngallery.com/mobilepatterns.php?colid=65438029-72157627607680275 24/50
  24. 24. Exploració (3/4) 25/50
  25. 25. Recuperació (4/4) Sist de cerca: localitzar informació interrogant un sistema de cerca a partir d'una necessitat d'informació concreta Pull systems: reaccionen davant les consultes dels usuaris. L'usuari és actiu. Pex cercador Push systems: ofereixen informació proactivament a l'usuari sense que aquest hagi de reclarmar-la. Pex RSS 26/50
  26. 26. Recuperació (4/4) 27/50
  27. 27. http://mobile.smashingmagazine.com/2012/07/12/elementsmobile-user-experience/ 28/50
  28. 28. CONTEXT: Aspectes de negoci... tecnològics Viewing the NYTimes: 1. iPad app 2. iPhone app 3. Web amb Safari 29/50
  29. 29. Navegador del mòbil Webapps no són apps encara que poden tenir el look and feel com apps Fàcilment canvia i respon a la mida de la pantalla o del dispositiu Versió de la web optimitzada per al mòbil. Necessiten un navegador i estan escrites en HTML5 Quan vols servir el mateix contingut en múltiples resolucions de pantalla Es veuen bé en qualsevol dispositiu No disposa de les funcionalitats de les apps. Pex geolocalització, push... És quan només vols assumir un únic desenvolupament No cal oferir accés offline És l'opció menys adaptada a les prioritats de l'usuari Més adaptat a l'usuari que un responsive MOBILE SPECIFIC o WEBAPP RESPONSIVE 30/50
  30. 30. Apps Canvia per adaptar-se a un conjunt predeterminat de pantalles i mides de dispositius Estàs disposat a fer desenvolupaments per totes les plataformes i OS Aprofita les característiques exclusives dels dispositius: càmara, geolocalització, push... Les apps híbrides són part de les apps nadiues i part de les webapps: - Com les nadives, estan en una store i aprofiten les característiques dels dispositius - Com les web apps, necessiten HTML i el navegador està aniuat a l'app Requereix manteniment individual Millor rendiment i integració Millor experiència d'usuari NADIU HÍBRID 31/50
  31. 31. CONTEXT: Diferències fisiques Mida, dimensions reduïdes Lleugeresa fa que es pugui dur a tot arreu Accés constant Pantalles tàctils. Són imprecises i teclejar no és fàcil Connectivitat i ample de banda, cal optimitzar càrrega i reduir requeriments de dades Memòria reduïda. No es pot carregar massa la RAM i l’emmagatzematge també és limitat 32/50
  32. 32. CONTEXT + USUARIS 33/50
  33. 33. CONTEXT + USUARIS “[…] This shift away from objective context toward subjective context will reshape the way we design experiences across and between devices, to better support user goals and ultimately mimic analog tools woven into our physical spaces. http://whitneyhess.com/blog/2012/02/07/locati on-agnostic-context-specific/ 34/50
  34. 34. USUARIS Diferències emocionals / cognitives 35/50
  35. 35. USUARIS Diferències emocionals / cognitives  Connexió emocional (63% se senten perdudes sense mòbil)  Dispositiu més “íntim”… I més omnipresent  Perill de quedar-se sense bateria en qualsevol moment!  Cost de les connexions  Càrrega cognitiva / excés informació  Múltiples tasques / distraccions  Condicions llum i soroll  Input difícil 36/50
  36. 36. http://www.giantant.com/antenna/2007/06/design-sketch-the-context-of-m.html 37/50
  37. 37. CONTINGUT Mobile First... Però: Dissenya l’experiència de l’ecosistema 38/50
  38. 38. Mobile i IA Bones pràctiques a tenir en compte en l'AI A l'hora d'organitzar la informació per a dispositius menuts, es fan imprescindibles! Limitar les opcions: Cal conèixer el context d'ús i només posar contingut rellevant per aquell context. Contingut més petit i més simple: els usuaris llegeixen menys al mòbil. Simplicitat en en el sist. d'organització i navegació: Només tasques relacionades amb els objectius i les necessitats. “Click Investment” Orientar l'usuari: home icon, back button or section or category label Etiquetatge concís, clar i consistent: Per ítems per navegar i per a links. Cerca: Proporcionar categories per evitar teclejar, auto-completion, spellcheck suggestions, Keep it simple! 39/50
  39. 39. Mobile i IA http://mobiforge.com/book/mobile-information-architecture 40/50
  40. 40. Drill-down
  41. 41. Joc de l’AI i les mascotes del barri Basat en la presentació del projecte “Pet Lost&Found” de Nick Fink “Mobile Information Architecture & Interaction Design, Design for Mobile 2010 42/50
  42. 42. Bases del joc AI & mascotes Concretar les necessitats dels usuaris i de la protectora d’animals. Determinar la finalitat de l’app. Establir la manera com els usuaris trobaran informació del lloc web a través dels sistemes d'organització, navegació, etiquetatge i cerca. (mapa web) Projectar la manera com el site s'adaptarà al canvi i al creixement a través del temps. 43/50
  43. 43. Joc de l’AI i les mascotes del barri Posada en comú http://sweepstakes.rewardit.com/old-ipad-uses/ 44/50
  44. 44. Joc de l’AI i les mascotes del barri 45/50
  45. 45. Joc de l’AI i les mascotes del barri 46/50
  46. 46. 47/50
  47. 47. 48/50
  48. 48. A User-Centered Approach To Web Design For Mobile Devices Design for smaller screen sizes Simplify navigation Prioritize content Minimize user input Design for intermittent connectivity Offer cross-channel consistency & integration http://mobile.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/ 49/50
  49. 49. User-Centered Design: ISO 9241-210 50/50
  50. 50. Design principles for mobile learning 1 Start with needs 2 Do less 3 Design with data 4 Do the hard work to make it simple 5 Iterate. Then iterate again. 6 Build for inclusion 7 Understand context 8 Build digital services, not websites 9 Be consistent, not uniform 10 Make things open: it makes things better UK Government Digital Service Design Principles https://www.gov.uk/designprinciples 51/50
  51. 51. Moltes gràcies per la vostra participació! Núria Ferran-Ferrer Muriel Garreta-Domingo Professora dels Estudis de Ciències de la Informació i la Comunicació Serveis de l’Aprenentatge Àrea de Tecnologia Educativa Espai de paginació 2 / 25

×