Usabilidad en Proyectos Digitales

  • Published on
    18-Nov-2014

  • View
    247

  • Download
    1

Embed Size (px)

DESCRIPTION

Presentacin sobre los elementos presentes en proyectos digitales, desde la estructuracin y estudio hasta la experiencia de usuario.

Transcript

<ul><li> 1. Usabilidad en Proyectos Digitales UCD UX IA Sofa Savoy Anguita | Arquitecto de Informacin </li> <li> 2. 1Usabilidad </li> <li> 3. Usabilidad QU ES LA USABILIDAD? La usabilidad es la facilidad de uso de sistemas, productos o servicios con los que interacta un usuario </li> <li> 4. Usabilidad Diseo centrado Usabilidad Diseo en el usuario </li> <li> 5. Diseo Centrado en el Usuario (UCD) QU ES EL DISEO CENTRADO EN EL USUARIO? Es el diseo de productos, servicios o dispositivos enfocados a las necesidades de los usuarios, a brindarles satisfaccin y cumplir sus expectativas </li> <li> 6. Diseo Centrado en el Usuario (UCD) Usabilidad Experiencia de Usuario accesibles amigables atractivos </li> <li> 7. Experiencia de Usuario (UX) QU ES LA EXPERIENCIA DE USUARIO? Es el nivel de satisfaccin que experimenta un usuario al interactuar con cualquier servicio, dispositivo o producto </li> <li> 8. Experiencia de Usuario (UX) Wireframes (WF) Arquitectura de Informacin (AI) Diseo de Interaccin (IxD) Diseo de Interfaz UX (UI) Anlisis y Contenido Ingeniera y Desarrollo </li> <li> 9. Experiencia de Usuario (UX) Producto Diseo Funcional Diseo estructural Contenido Investigacin </li> <li> 10. Arquitectura 2de Informacin </li> <li> 11. Arquitectura de Informacin (IA) QU ES LA ARQUITECTURA DE INFORMACIN? Es la disciplina encargada de estudiar, analizar, organizar y estructurar la informacin de un sistema, logrando que el acceso a ella sea eficiente </li> <li> 12. Arquitectura de Informacin (IA) PARA QU SIRVE? Sirve para que cualquier espacio de informacin, ya sea simple o complejo, permita al usuario: Acceder sin dificultades y de manera amigable Encontrar lo que busca o utilizar el sistema sin complicaciones Obtener una grata experiencia </li> <li> 13. Metodologas: Card Sorting CARD SORTING Es una tcnica que permite definir la organizacin y distribucin de las categoras o contenidos </li> <li> 14. Metodologas: Mapa de Navegacin y Etiquetado MAPA DE NAVEGACIN Y ETIQUETADO Es la jerarquizacin del contenidos y nombramiento adecuado de las secciones segn los criterios de bsqueda </li> <li> 15. Metodologas: Personas y Escenarios PERSONAS Y ESCENARIOS Tcninca que se basa en pensar en los potenciales usuarios e identificar casos de uso para cada uno de ellos. </li> <li> 16. Metodologas: Wireframes WIREFRAMES Los wireframes son la jerarquizacin visual de los contenidos; son la estructura o esqueleto de nuestro diseo </li> <li> 17. Metodologas: Wireframes </li> <li> 18. Arquitectura de Informacin (IA) usuarios contenido IA contexto </li> <li> 19. Estrategia de Contenido: Mapa de Navegacin Elementos visuales Pgina(s) Documento(s) Enlace externo </li> <li> 20. Estrategia de Contenido: Mapa de Navegacin HOME Greenpeace Acerca de nosotros Qu hacemos Noticias/Blog Multimedia Involcrate Donar Kumi Naidoo Victorias de Greenpeace Historia y xito Organizacin Preguntas frecuentes Cambio climtico rtico Haciendo holas Reaccin nuclear Soluciones Bosques Mar Redes Sociales Centro de Prensa Tierra Login / Registro Contacto Suscripcin a Newsletter Registro Activista Buscador Selector Pases HOME CONTENIDO AUXILIAR 1 NIVEL DE NAVEGACIN 2 NIVEL DE NAVEGACIN FUNC. GENERALES </li> <li> 21. Estrategia de Contenido: Mapa de Navegacin </li> <li> 22. Conclusiones BENEFICIOS DE SER METODOLGICOS Evitar correcciones sobre la marcha Reducir tiempos en la produccin final Claridad del proyecto para todas las reas Motivar el trabajo multidisciplinario </li> <li> 23. 3Wireframes </li> <li> 24. Wireframes QU SON LOS WIREFRAMES? Los wireframes son la jerarquizacin visual de los contenidos; son la estructura o esqueleto de nuestro diseo, de cualquier tipo de interfaz digital </li> <li> 25. Wireframes PARA QU SIRVEN? Sirven para mostrar el contenido, definir las funcionalidades, conectar lo conceptual con lo visual, organizando: La informacin que ser mostrada Las funciones disponibles Las reglas para mostrar cierto tipo de informacin </li> <li> 26. Wireframes LOS WIREFRAMES DEBEN Ser simples, pero no descuidados Representar los elementos grficos esquemticamente Utilizar escala de grises Evitar utilizar ms de una tipografa Usar contenido real siempre que sea posible </li> <li> 27. Wireframes Comenzar desde el papel... </li> <li> 28. Construccin de los Wireframes: Plantillas principales DEFINIR PLANTILLAS PRINCIPALES Home Categora principal Interior tipo Pgina de accin </li> <li> 29. Plantillas Listado de plantillas PLANTILLA TIPO COMENTARIOS Home Home Men Contenido Se presenta un submen con cada categora. Se mantiene fijo en el borde superior de la pantalla cuando se hace scroll Historia Contenido Presencia de imgenes Blog Artculos Repositorio de artculos Contacto Formulario Informacin ms formulario de contacto simple </li> <li> 30. Construccin de los Wireframes PARA COMENZAR Revisar los contenidos a destacar o reforzar Definir qu plus, innovacin o tecnologa aplicaremos Considerar las distintas resoluciones de pantalla </li> <li> 31. Construccin de los Wireframes: Sitio de ejemplo Ejemplo de sitio web: http://www.agra-culture.com </li> <li> 32. Construccin de los Wireframes: Mapa de navegacin Ejemplo modificado desde: http://www.agra-culture.com HOME CONTENIDO AUXILIAR 1 NIVEL DE NAVEGACIN 2 NIVEL DE NAVEGACIN FUNCIONALIDADES GENERALES HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab &amp; Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter </li> <li> 33. Construccin de los Wireframes: Home HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab &amp; Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter &lt; Catering Menu | Story | Detox | Locations | Contact Delivery &gt; Welcome to Agra Culture. Now open in uptown. Learn more &gt; Want to see what were cooking up? View our menu &gt; What we believe Eating is an agricultural act. Wendell Berry, Agricultural Philosopher Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Join our eat well, be well culture. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Enter your email address Sign me up! Home | Menu | Story | Detox | Locations Contact Blog Catering Delivery Healthy fast-casual food, crafted with love in minnieapolis Agra Culture Kitchen &amp; Press | All Rights Reserved </li> <li> 34. Construccin de los Wireframes: Home &lt; Catering Menu | Story | Detox | Locations | Contact Delivery &gt; Welcome to Agra Culture. Now open in uptown. Learn more &gt; Want to see what were cooking up? View our menu &gt; What we believe Eating is an agricultural act. Wendell Berry, Agricultural Philosopher Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Join our eat well, be well culture. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Enter your email address Sign me up! Home | Menu | Story | Detox | Locations Contact Blog Catering Delivery Healthy fast-casual food, crafted with love in minnieapolis Agra Culture Kitchen &amp; Press | All Rights Reserved </li> <li> 35. Construccin de los Wireframes: Categora Principal HOME Blog Men Historia Detox Catering Delivering Desayuno Almuerzo/Cena Grab &amp; Go Tragos Contacto Informacin Nutricional Solicitud de Empleo Locaciones Articulos RRSS (fb, pinterest, instagram, tw, Artculos por categora Artculos por mes/ao Compartir por FB, TW y mail Newsletter &lt; Catering Menu | Story | Detox | Locations | Contact Delivery &gt; Our menu Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info Breakfast Lunch/Dinner Grab &amp; Go Drinks organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn tortillas, wrapped in a flour tortilla or with toast Breakfast Served 7-10:30am daily Farm Scrambles Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Simple Salads The American Applewood smoked bacon, spinach, truffled wild mushrooms, onion, white cheddar, fresh parsley (nutrition facts shown for eggs) Cal: 340 Fat: 26g Carbs: 5g Protein: 20g The Mediterranean asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese (nutrition facts shown for eggs) Cal: 270 Fat: 20g Carbs: 6g Protein: 15g El Granjero Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo (nutrition facts shown for eggs) Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Breakfast sandwiches &amp; non. wiches Arugula &amp; bacon Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Wilted greens Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Kale pesto &amp; prosciutto Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Trimmings Seasonal hash Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Granola parfait Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Roasted apple sauce Lorem ipsum dolor sit amet. Lorem Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Dolor sit Lorem ipsum dolor sit amet. Elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Set diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam. Sit amet Lorem ipsum dolor sit amet. Lunch &amp; Dinner Porridges Muesli Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Quinoa (hot) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Oatmeal Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 490 Fat: 38g Carbs: 7g Protein: 29g </li> <li> 36. Construccin de los Wireframes: Categora Principal &lt; Catering Menu | Story | Detox | Locations | Contact Delivery &gt; Our menu Vegetarian Diary free Paleo Gluten free Vegan Favorite Download nutritional info Breakfast Lunch/Dinner Grab &amp; Go Drinks organic eggs, organic egg whites or seasoned tofu, served over quinoa, in 2 corn tortillas, wrapped in a flour tortilla or with toast Breakfast Served 7-10:30am daily Farm Scrambles Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Simple Salads The American Applewood smoked bacon, spinach, truffled wild mushrooms, onion, white cheddar, fresh parsley (nutrition facts shown for eggs) Cal: 340 Fat: 26g Carbs: 5g Protein: 20g The Mediterranean asparagus, roasted red peppers, kalamata olives, grape tomatoes, arugula, feta cheese (nutrition facts shown for eggs) Cal: 270 Fat: 20g Carbs: 6g Protein: 15g El Granjero Chorizo sausage, roasted poblano peppers, black beans, queso fresco, fresh cilantro, pico de gallo (nutrition facts shown for eggs) Cal: 490 Fat: 38g Carbs: 7g Protein: 29g Breakfast sandwiches &amp; non. wiches Arugula &amp; bacon Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat. Cal: 340 Fat: 26g Carbs: 5g Protein: 20g Wilted greens Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Cal: 270 Fat: 20g Carbs: 6g Protein: 15g Kale pesto &amp; prosciutto Lorem ipsum dolor sit amet,...</li></ul>