1. Arquitectura de la informaci per a dispositius mbils Nria Ferran-FerrerMuriel Garreta-DomingoProfessora dels Estudis de Cincies de la Informaci i la ComunicaciServeis de lAprenentatge rea de Tecnologia EducativaWorld Information Architecture Day, Barcelona 15 de febrer de 2014

2. Resum enquesta participants tallerProcednciaMotivaci15 respostes de 70 assistents Ocupaci actual: Consultora UI/UX Front End dev Front-end, diseo web Empresari autnom Professora Dpto. Marketing Digital Consultora UX UX designer Directora d'art junior Estudiant Product Manager Coordinadora i professora de cicles formatiusGrau coneixement AI2/50 3. Un mn mbil 96% poblaci mundial t telfon mbil (128% mn desenvolupat i 89% pasos en desenvolupament, dades ITU) 75% accs a Internet al mn s a travs mbil (dades Google) Canvis i noves oportunitats: com es lliura la informaci (responsive, app, natiu, hbrid) com s'estructura (AI) WorldPress Photo 2014 http://www.bbc.co.uk/blogs/bbcinternet/2010/02/bbc_online_our_mobile_future.html3/50 4. Definicions breus I/II Interacci persona-ordinador: disciplina que estudia la interacci de les persones amb els ordinadors. (HCI/IPO) Usabilitat: caracterstica de ser fcil, aplicat habitualment al software, per rellevant per a tot tipus dartefacte.4/50 5. Definicions breus II/II Experincia dusuari: conjunt de factors i elements relatius a la interacci de lusuari amb un entorn o dispositiu concret, el resultat de la qual s la percepci sobre un servei, producte o dispositiu. (UX) Disseny Centrat en lUsuari: s una filosofia i procs de disseny en el qual les necessitats, els desigs i les limitacions de l'usuari final d'una interfcie, o document, prenen una atenci i rellevncia considerable en cada nivell del procs de disseny.5/50 6. Procs DCU comprimit (2 vdeos)Nordstrom Innovation Lab: Sunglass iPad App Case StudyThe Deep Dive - IDEO 19997/50 7. Usuaris i el seu comportamentDiversitat de contingutsNecessitats i objectius de negoci i contextThe Three Circles of Information Architecture8/50 8. 9/50 9. Useful. As practitioners, we can't be content to paint within the lines drawn byUX Honeycomb: Ms enll de la usabilitatmanagers. 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.php10/50 10. 11/50 11. Definici AI AI: disseny estructural d'un entorn informacional compartit Art i cincia 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 Cerca12/50 12. Anatomia de l'AI: Sist d'Organitzaci (1/4) Resultat del procs 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: alfabtic, cronolgic, geogrfic Esquemes ambigus: tema, tasca, audincia, etc. Estructures d'organitzaci: sistemes que organitzen els grups d'tems d'informaci resultats dels esquemes mostrant les dependncies lgiques que existeixen entre aquests. Pex: jerrquic, hipertextual o xarxa, seqencial, en taula, etc. 13/50 13. Sist. dorganitzaci: esquema TimeLine14/50 14. Sist. dorganitzaci: esquema Mapes15/50 15. Sist. dorganitzaci: estructures Jerrquica Pagina ndex i conjunts de subpgines 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 petitesSlow Carb App16/50 16. Sist. dorganitzaci: 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 prpia i un objectiu propi. Alerta: Els usuaris multi-tasca odien aquesta estructura17/50 17. Sist. dorganitzaci: estructures Aniuada Guia els usuaris en un recorregut lineal cap a continguts ms concrets i detallats. Es pot combinar amb d'altres estructures: jerrquica o hub&spoke Bo: proporciona els usuaris seguretat perqu dna la sensaci de moure's endavant i endarrere linealment. Alerta: Els usuaris no poden moure's rpidament entre seccions.Email app d'Iphone18/50 18. Sist. dorganitzaci: estructures Pestanyes Collecci de seccions enllaades a travs 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 vacances19/50 19. Sist. dorganitzaci: estructures Bento Box/Safata men El contingut ms detallat ja apareix a la pgina 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 interfcie molt ben dissenyadaKayak app 20/50 20. Sist. dorganitzaci: 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 ms petites pot ser difcil.Feedly21/50 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: icnic, textual, links, ttols, opcions del sistema de navegaci (home, web map), folksonomies22/50 22. Etiquetatge (2/4)23/50 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-7215762760768027524/50 24. Exploraci (3/4)25/50 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 RSS26/50 26. Recuperaci (4/4)27/50 27. http://mobile.smashingmagazine.com/2012/07/12/elementsmobile-user-experience/28/50 28. CONTEXT: Aspectes de negoci... tecnolgics Viewing the NYTimes: 1. iPad app 2. iPhone app 3. Web amb Safari29/50 29. Navegador del mbil Webapps no sn apps encara que poden tenir el look and feel com appsFcilment canvia i respon a la mida de la pantalla o del dispositiuVersi de la web optimitzada per al mbil. Necessiten un navegador i estan escrites en HTML5Quan vols servir el mateix contingut en mltiples resolucions de pantallaEs veuen b en qualsevol dispositiu No disposa de les funcionalitats de les apps. Pex geolocalitzaci, push...s quan noms vols assumir un nic desenvolupament No cal oferir accs offline s l'opci menys adaptada a les prioritats de l'usuariMs adaptat a l'usuari que un responsiveMOBILE SPECIFIC o WEBAPPRESPONSIVE30/50 30. Apps Canvia per adaptar-se a un conjunt predeterminat de pantalles i mides de dispositius Ests disposat a fer desenvolupaments per totes les plataformes i OS Aprofita les caracterstiques exclusives dels dispositius: cmara, geolocalitzaci, push...Les apps hbrides sn part de les apps nadiues i part de les webapps: - Com les nadives, estan en una store i aprofiten les caracterstiques dels dispositius - Com les web apps, necessiten HTML i el navegador est aniuat a l'appRequereix manteniment individual Millor rendiment i integraci Millor experincia d'usuariNADIUHBRID31/50 31. CONTEXT: Diferncies fisiques Mida, dimensions redudes Lleugeresa fa que es pugui dur a tot arreu Accs constant Pantalles tctils. Sn imprecises i teclejar no s fcil Connectivitat i ample de banda, cal optimitzar crrega i reduir requeriments de dades Memria reduda. No es pot carregar massa la RAM i lemmagatzematge tamb s limitat32/50 32. CONTEXT + USUARIS33/50 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. USUARIS Diferncies emocionals / cognitives35/50 35. USUARIS Diferncies emocionals / cognitives Connexi emocional (63% se senten perdudes sense mbil) Dispositiu ms ntim I ms omnipresent Perill de quedar-se sense bateria en qualsevol moment! Cost de les connexions Crrega cognitiva / excs informaci Mltiples tasques / distraccions Condicions llum i soroll Input difcil36/50 36. http://www.giantant.com/antenna/2007/06/design-sketch-the-context-of-m.html37/50 37. CONTINGUTMobile First... Per: Dissenya lexperincia de lecosistema 38/50 38. Mobile i IA Bones prctiques 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 conixer el context d's i noms posar contingut rellevant per aquell context. Contingut ms petit i ms simple: els usuaris llegeixen menys al mbil. Simplicitat en en el sist. d'organitzaci i navegaci: Noms tasques relacionades amb els objectius i les necessitats. Click Investment Orientar l'usuari: home icon, back button or section or category label Etiquetatge concs, 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. Mobile i IAhttp://mobiforge.com/book/mobile-information-architecture 40/50 40. Drill-down 41. Joc de lAI i les mascotes del barriBasat en la presentaci del projecte Pet Lost&Found de Nick Fink Mobile Information Architecture & Interaction Design, Design for Mobile 2010 42/50 42. Bases del joc AI & mascotes Concretar les necessitats dels usuaris i de la protectora danimals. Determinar la finalitat de lapp. Establir la manera com els usuaris trobaran informaci del lloc web a travs dels sistemes d'organitzaci, navegaci, etiquetatge i cerca. (mapa web) Projectar la manera com el site s'adaptar al canvi i al creixement a travs del temps.43/50 43. Joc de lAI i les mascotes del barri Posada en comhttp://sweepstakes.rewardit.com/old-ipad-uses/ 44/50 44. Joc de lAI i les mascotes del barri45/50 45. Joc de lAI i les mascotes del barri46/50 46. 47/50 47. 48/50 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. User-Centered Design: ISO 9241-21050/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/designprinciples51/50 51. Moltes grcies per la vostra participaci! Nria Ferran-FerrerMuriel Garreta-DomingoProfessora dels Estudis de Cincies de la Informaci i la ComunicaciServeis de lAprenentatge rea de Tecnologia EducativaEspai de paginaci2 / 25