Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Ux formato tec bbva v 4.1.pptx

549 Aufrufe

Veröffentlicht am

UX by MC for BBVA

Veröffentlicht in: Business
  • Als Erste(r) kommentieren

Ux formato tec bbva v 4.1.pptx

  1. 1. 10/02/16   1   Taller UX BBVA Moisés Cielak, Antonio Salgado & Mauricio Angulo Un enfoque mas humano para un asunto de seres humanos 1 • • • ESTRATEGIA DE CONTENIDOS La estrategia de contenidos debe estar centrada en la Persona. Para dar a las personas el contenido que necesitan,es necesario identificar los tipos de contenidos que mejor asistan al usuario en la ejecución de sus tareas en cada escenario. • • • • TIPOS DE CONTENIDO Para definir un contenido es necesario identificar su formato y tipo. El formato es la unidad básica del contenido:texto,imagen o video. El tipo es la aplicación del formato,por ejemplo,una receta de cocina es un tipo de contenido de formato texto. Un tipo de contenido puede estar compuesto por varios formatos,por ejemplo,una galería de imágenes (Slider). • • MAPA DE CONTENIDO Son cartografías que se centran en el contenido de un producto digital.Permite explorar y visualizar el contenido,así como detectar oportunidades de mejora para el desarrollo de contenidos. El objetivo de un mapa de contenido es comenzar el desarrollo de contenidos con un fuerte enfoque en las metas de los usuarios.
  2. 2. 10/02/16   2   EJERCICIO #5 CREACIÓN DE MAPA DE CONTENIDO 15 MINUTOS
  3. 3. 10/02/16   3   Faltan 2 minutos • • Identificar contenidos para las tareas a realizar por la Persona en el escenario descrito Crear un mapa de contenido ENTREGABLE: 1.  Diseño conceptual platicadito 2.  Con dibujitos Enviar foto a ProfeCielak@gmail.com usar app para que se vea mejor opción CamScan CS10
  4. 4. 10/02/16   4  
  5. 5. 10/02/16   5   Estudios de EYE TRACKING 18 EYE TRACKING 19 Moises C. Katz at the Munchen Forum Eye tracking & Design Todo será explicado…
  6. 6. 10/02/16   6   What is eye tracking? Eye tracking … qué está viendo realmente UD. 3 See the user’s gaze - Live You can follow what the user pays attention to in real-time. The participant’s gaze is marked by red dots and red lines. A camera displays the participant, so you can see their facial expressions and body language. 4 Eye tracking results: Heatmaps Heatmaps show what participants focus on. In this example, ‘hot spots’ are the picture of the shoes, the central entry field and the two right-hand tiles underneath. The data of all participants is averaged in this map. 5
  7. 7. 10/02/16   7   Eye tracking results: Gazeplot Gaze plots show the ‘visual path’ of individual participants. Each bubble represents a fixation. The bubble size denotes the length or intensity of the fixation. Additional results are available in table format for more detailed analysis.More examples with interpretations are coming up. But before… 6 How does it work? Pupils move a lot in here, somewhere… Our pupils are constantly in motion. When the pupil is moving, it’s called a ‘saccade’. During a saccade, visual perception is unlikely or even impossible. 8 How we ‘look’ Fixation Saccade The pupil must focus on a point in order to perceive colour, faces, writing, etc. That is called a ‘fixation’. Eye Tracking measures the speed of the pupil and can thus detect when a fixation is happening! 9
  8. 8. 10/02/16   8   What do these fixations tell us? Fixations are linked to attention. Moving your eyes means moving attention. A fixation does not mean that the participant definitely perceived an element. But it is fair to say that elements that draw visual attention have a higher chance of being perceived (consciously or subconsciously). 10 How can a monitor tell what I look at? tobii 11 The red-eye effect There’s a layer in our eyes that reflects infrared light. This is where the red-eye effect in photos comes from as photo flashes use infrared light. The eye tracking monitor makes use of this effect! 12 What the eye tracker sees tobii The eye tracking monitor uses infrared light to make the pupils of the person sitting in front of it light up and so become detectable. This is what it looks like for the monitor. 13
  9. 9. 10/02/16   9   Monitors - No strings attached It used to be like this: tobii Now it’s all free and comfy. The monitor can capture the gaze in a wide area, so the participant can relax and move naturally: kristenbell.org 14 Eye tracking … qué está viendo realmente UD. Eye Tracking & Design Develop and design There’s lots of decisions to make in all stages of the design process: 16 Eye tracking … qué está viendo realmente UD. Decision like these… Where should the ‘Pay now’ button be? Will users notice this if I put it here? 17 Eye tracking … qué está viendo realmente UD.
  10. 10. 10/02/16   10   visuality-group.co.uk … or these: How does my design perform compared to others? Does my design draw enough attention? 18 Eye tracking … qué está viendo realmente UD. … and these: Does Design A work better? … or Design B? 19 How eye tracking can help §  Provides insights into your user’s behaviour §  Answers questions such as: ‘Will users see/notice this?’ §  Evaluates the effectiveness of a design §  Reveals what the user’s attention is drawn to §  Serves as a tool for observers, e.g. during a user test 20 Using eye tracking – an example
  11. 11. 10/02/16   11   Set-up of an eye tracking test Design tests can be run in fairly quick sessions (10 to 15 min) with 10 to 20 participants: 1.  Present participants with the design(s) you want to test. 2.  Give them a task to complete using the design, or let them just explore. 3.  At the end of the test, participants fill in an on-screen questionnaire to capture their impressions and answer questions, e.g. ‘Which design do you prefer?’ 22 What happens then? The next step is to analyse the eye tracking data and the user’s feedback. We focus on: §  what users saw, §  what users overlooked and §  what they thought and felt about the designs. 23 Eye tracking … qué está viendo realmente UD. Examples: Testing website designs What do you think draws the user’s attention on this site? The listed offers in the centre or the special offer banners on the right? 24 The design suits browsers and focussed users This participant thoroughly reads the listed offers. Whenever a destination sparks her interest, she looks at the offer details, e.g. the price. This participant focusses on the right- hand banners. He briefly gazes at the listed offers, but shows no reading behaviour there. 25
  12. 12. 10/02/16   12   What drew most attention on this design? 26 The key visual and a box at the bottom Note: Telstra Clear have since re-designed their homepage. The key visual got lots of attention. Surprising: This box got heaps of attention. It reads: “If you are having trouble getting through to us on the phone, please click here to email us, we’ll get back to you within 2 business days”. Participants got the impression that Telstra Clear has trouble with their customer service. The main navigation and its options got almost no attention. 27 Design principles – revealed by eye tracking Humans are programmed to recognise faces. Everywhere. This effect can be seen in eye tracking. Faces always draw attention! Face Effect
  13. 13. 10/02/16   13   The Face effect – an example bunnyfoot Yep, there’s attention on certain… areas, … the face, however, is the strongest point of focus! 30 Using the Face effect humanfactors.com The ‘Face effect’ can be used to drive perception. Here’s a great example from humanfactors.com 2 versions of an ad design were tested using eye tracking. The goal of the ad is of course to draw attention to the product name. Version A Version B 31 Using the Face effect humanfactors.com Eye tracking results for ad Version A: §  We see a face effect: The model’s face draws a lot of attention. §  The slogan is the other hot spot of the design. Participants will likely have read it. §  The product and its name get some, but not a lot of attention. 32 Using the Face effect Eye tracking results for ad Version B: §  Again, we see a strong face effect. BUT: In this version, the models gaze is in line with the product and its name. §  The product image and name get considerably more attention! §  Additionally, even the product name at the bottom is noticed by a number of participants. humanfactors.com 33
  14. 14. 10/02/16   14   Ways to focus attention usableworld.com.au Same effect: If the baby faces you, you’ll look at the baby. But if the baby faces the ad message, you pay attention to the message. You basically follow the baby’s gaze. 34 Eye tracking … qué está viendo realmente UD. Did we learn to ignore them? Banner Blindness Central banners Central banners are used on a lot of homepages. They use prime real estate on the homepage. That means they must be in the centre of attention, right? 36 Banner blindness … or are they? In this test, participants were given a task: Find the nearest ATM. Participants focused on the main navigation and the footer navigation– this is where they found the ‘ATM locator’. So, when visiting a site with a task in mind – as you normally do – the central banner can be ignored! 37
  15. 15. 10/02/16   15   Main focus: Navigation options Eye tracking results show: When looking for something on a website, the main focus of attention are the navigation options. Maybe users have learned that they’re unlikely to find what they’re looking for in a central banner image. Task: ‘What concerts are happen in Auckland this month?’ Task: ‘You want to send an email to customer service’ 38 Task: ‘You want to get in touch with customer service’ When do users look at banners? In this example, participants looked at the banner even though they were looking for something specific. What’s different? Participant was asked just to look at the homepage 39 Banner Blindness: The trick is… … don’t make your banners look like banners! 40 Eye tracking … qué está viendo realmente UD. Let’s talk about colours Research shows that saturated colours and strong contrasts work best to capture attention
  16. 16. 10/02/16   16   That must mean that this design is ideal: 42 … or maybe this is a better example: The Air New Zealand homepage uses strong colours. The buttons are contrasted to the background. The special offer uses both a high-resolution image and a prominent price. 43 How do these different designs compare? 44 Eye tracking … qué está viendo realmente UD. Colours chaos = Attention chaos This heatmap shows a chaotic, non-directed spread of visual attention: §  Everything seems to demand attention at the same time, lots of hot spots are the result. §  The participant’s gazes are scattered between navigation elements and images. §  Some images capture more attention, the site options on the top are barely looked at. 45
  17. 17. 10/02/16   17   In contrast: A structured design This heatmap shows an overall more structured and deliberate design: §  There are clear centres of attention: the flight booking and special offer. §  The image of a woman (face effect) and a keyword (‘Wellington’) draw the gaze towards the flight booking. §  Banner blindness is avoided by placing a relevant special offer and by using an unusual image. 46 Design + Eye tracking a more complete understanding of your user’s experience = The bottom line: Accesibilidad (web) y sus beneficios 09/02/16 67 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Eye tracking … qué está viendo realmente UD.
  18. 18. 10/02/16   18   Recordemos… § Usabilidad Que sea fácil de usar § UX (User eXperience) Que el usuario tenga una experiencia satisfactoria (suele conseguirse haciendo que sea usable) § Accesibilidad Que el usuario pueda usarlo (nos solemos referir a situaciones “especiales”) 09/02/1669 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Acceso universal 09/02/1670 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net MITO: accesibilidad web es “para ciegos” FALSO. § Es cierto que los criterios de accesibilidad ayudan a personas con deficiencias físicas (visuales, auditivas, motrices), cognitivas, de lenguaje, … Y TAMBIÉN… § Usuarios con discapacidades temporales (enfermedades, convalecencias) § Usuarios de edad avanzada § Dispositivos menos (?) habituales: móviles, SmartTV; versiones antiguas SO/navegador; conexiones lentas § Entornos especiales (kioskos públicos; entornos ruidosos, fábricas, etc.) 09/02/1671 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Beneficios de accesibilidad (obvios) § Maximizar los posibles usuarios/clientes § Seguir estándares facilita el desarrollo y mantenimiento § Por imagen pública § … Web Accessibility Initiative (WAI) http://www.w3.org/WAI/ 09/02/1672 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  19. 19. 10/02/16   19   Accesibilidad: más beneficios o y además… § Mejora el posicionamiento en buscadores (SEO) o textos alternativos; identificar idioma; documentos bien estructurados; … § Por normativa legal o Los sitios web de administraciones públicas (o con financiación pública; o “de especial interés”) deben cumplir un nivel mínimo de accesibilidadHigh Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo Referencia sobre legislación española relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html 09/02/1673 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net § El uso de Personas (needfinding) y escenarios 74 75 Topics • Personas • Scenarios • User stories Escenarios Los escenarios describen la interacción entre tipos de usuarios basado en diversas metas Y el sistema al que pertencen
  20. 20. 10/02/16   20   Escenarios • Consiste de metas, expectativas, Acción y reacción Es un espejo de las aspiraciones • vincula contexto y uso • aunque no incluye ejemplos del uso en acciones E.g.: “Roberto le da click al boton verde Sino, Roberto procede a convertir… Historias de usuarios Secuencias de acciones que conducen a un resultado • Glas historias se vuelven testeables • Sirve de puente entre usuarios y desarrolladores • Asemeja un buen método de proceder a programar Ejemplo de una historia de usuario “Como <rol>, deseo <hacer qué> de modo que <beneficio>.” User Stories Otro ejemplo “como organizador, quiero que sea fácil calendarizar un evento para muchas personas donde pueda dar clases de Zumba.”
  21. 21. 10/02/16   21   Una necesidad • No tan detallada • Testeable “As an organizer I want to click on various days in calendar I want to provide several meeting day options.” Problemas de accesibilidad. Cómo ser accesible Capital ONE09/02/16 82 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net PROBLEMAS habituales de accesibilidad (1) Personas con problemas visuales (o dispositivos como SmartTV, móviles, etc.) § Sólo “ven” texto de modo secuencial (usan lectores de pantalla/navegadores por voz) § Necesitan textos grandes § No distinguen bien los colores Cuidado con: o Imágenes sin descripción textual o Tablas y marcos (frames) mal etiquetados o Colores de bajo contraste o Texto no escalable o Ventanas emergentes (pop-up) o No funcionan con teclado 09/02/1683 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net PROBLEMAS habituales de accesibilidad (2) Personas con discapacidades cognitivas / de aprendizaje (o en entornos complejos; o con poco dominio del idioma; …) § Pueden tener problemas para “entender” los contenidos o para concentrarse § Problemas de memoria Cuidado con: o Documentos con estructura mal definida o Demasiada información en una página o Lenguaje innecesariamente complejo o Falta de imágenes para clarificar el texto o Animaciones y elementos decorativos superfluos 09/02/1684 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  22. 22. 10/02/16   22   Normativa sobre extranjeros 09/02/1685 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net PROBLEMAS habituales de accesibilidad (3) Personas con discapacidades auditivas (o en entornos ruidosos; o en equipos sin hardware de audio) § Pueden tener problemas para acceder a los contenidos sonoros Cuidado con: o Audio/vídeo sin descripciones textuales o Frases complejas o demasiado largas 09/02/1686 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Subtítulos 09/02/1687 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net PROBLEMAS habituales de accesibilidad (4) Personas con discapacidades motoras (o no disponen de ratón) § Tienen que usar el teclado u otros dispositivos (reconocimiento de voz) Cuidado con: o Páginas que no funcionan con teclado 09/02/1688 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  23. 23. 10/02/16   23   MITO: para ser accesible basta con tener una versión “sólo texto”FALSO. § Sólo para determinados usuarios § Suponen una discriminación (“entrar por la puerta trasera”) § Problemas por contenidos duplicados: o mantenimiento o indexación en buscadores § Se descuida la accesibilidad de la versión “normal” § ¿Cómo llego a la versión accesible? MEJOR: si es posible, una única versión que cumpla los estándares de accesibilidad 09/02/1689 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Tiene “versión sólo texto”, pero… 09/02/1690 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net … sin imágenes… ¿Cómo accedo a la versión “sólo texto”? 09/02/1691 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net ¿CÓMO consigo que mi web sea ACCESIBLE? § Conociendo y cumpliendo los estándares o De los lenguajes utilizados (HTML; CSS; etc.) o Específicos de accesibilidad § Testeando o Diferentes entornos (navegadores, sistemas operativos, etc.) o Con usuarios reales 09/02/1692 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  24. 24. 10/02/16   24   ¿Qué ESTÁNDARES? (1) § Lenguajes/técnicas utilizados: o HTML válido o CSS válido o JavaScript “no obstructivo” o Etc. § IMPORTANTE: separar contenido vs. aspecto o El mismo contenido para todos los usuarios o Aspecto en función de las condiciones particulares § IMPORTANTE: compatibilidad multinavegador 09/02/1693 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Con el mismo contenido HTML… 09/02/1694 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net ¿Qué ESTÁNDARES? (2) Recomendaciones y normativas específicas sobre accesibilidad web: § Section 508 (USA) § WAI (Web Accessibility Initiative) o Internacionales, W3C o Sugeridas por la Comisión Europea § UNE 139803 “Requisitos de accesibilidad para contenidos Web” (España) o Basada en WAI o Obligatoria por Ley para sitios web de Administraciones Públicas 09/02/1695 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net WAI (Web Accessibility Initiative) § Forma parte del W3C (World Wide Web Consortium) § Recomendaciones y directrices sobre: o Contenido web (WCAG) § Contenidos web accesibles § Referencia de normas UNE o Herramientas de autor (ATAG) § Herramientas de creación accesibles y § que generen contenidos accesibles o Agentes usuario (navegadores) (UAAG) § Navegadores accesibles o Rich Applications (WAI-ARIA) § Para aplicaciones RIA 2.0 09/02/1696 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  25. 25. 10/02/16   25   WCAG (Web Content Accessibility Guidelines) § Cómo crear contenidos web accesibles. Versión 2.0 § 4 principios generales del contenido web: o Perceptible o Operable o Inteligible o Robusto Cada principio incluye directrices (guidelines) Cada guideline incluye criterios de éxito con prioridad: § A = Debe satisfacerse; requerimientos básicos § AA = Debería satisfacerse; eliminar barreras significativas § AAA = Puede satisfacerse; acceso mejorado § Además: técnicas, ejemplos, enlaces, etc. 09/02/1697 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Texto alternativo ¡También por SEO! 09/02/1698 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net No confiar únicamente en el color (1) 09/02/1699 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net No confiar únicamente en el color (2) 09/02/16100 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  26. 26. 10/02/16   26   Usability  Tes,ng     Rediseño  de  resultados  de   búsqueda  del  portal  inmobiliario   AdondeVivir.comi     1.  Estudio  de  usabilidad:  Ficha  tecnica     2.  Situación  previa     3.  Resultados  del  estudio     4.  Solución     5.  Conclusiones  y  Recomendaciones   INDICE  DE  CONTENIDOS   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   1.         Estudio  de  Usabilidad  –   Ficha  Técnica   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   1.  Estudio  de  usabilidad   Fecha  de  realización     •  Estudio  llevado  a  cabo  entre  el  13  de  diciembre  y  14  enero  2011     Obje,vo  principal  del  estudio   •  Evaluar  la  manera  cómo  los  usuarios  registrados  y  no  registrados  se   desenvuelven  al  buscar  o  publicar  en  Internet  información  sobre  la  compra  y   venta  de  inmuebles.     Metodología   •  Usability  TesFng:   a) CuesFonario  inicial   b) Navegación  libre   c)  Navegación  inducida   d) Preguntas  finales  sobre  atributos  de  la  web  
  27. 27. 10/02/16   27   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   1.  Estudio  de  usabilidad   Muestra:   6  Users   2  Heavy  users   2  Light  users  (registrados  sin  publicar)   2  no  registrados          Con  5  usuarios  se  encuentran  el   85%  de  los  problemas  de  usabilidad   de  una  Web     Fuente:  Jacob  Nielsen    http://www.useit.com/alertbox/20000319.html         2.         Situación  previa   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   ¿  Qué  es  AdondeVivir.com  ?   •  AdondeVivir.com  es  un   portal  inmobiliario   Oferta  -­‐  Demanda   •  Tenemos  más  de   6,000  anuncios   acFvos  de  inmuebles   (más  que  cualquier          diario  impreso  un  día  domingo)  y  registramos  más  de   3’500,000  de  páginas  vistas  al  mes   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Estructura  básica  de  la  Web          1.  Home  
  28. 28. 10/02/16   28   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Estructura  básica  de  la  Web        2.  Resultados  de  búsqueda   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Estructura  básica  de  la  Web        3.  Detalle  de  inmueble   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com        2.  Resultados  de  búsqueda   Caso  a  analizar:     Pág  de  Resultados  de  búsqueda   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Caso  a  analizar:     Pág  de  Resultados  de  búsqueda   Importancia  de  página  de  resultados  de  búsqueda:     •  Es  el  nexo  entre  la  búsqueda  que  realiza  un  usuario  en  el   home  page,  y  la  página  de  detalle  de  algún  inmueble.     •  Debe  presentar  información  relevante  y  perFnente,  para  que   el  usuario  pueda,  con  el  menor  ,empo  y  uso  de  recursos,   encontrar  un  anuncio  de  su  interés.     El  test  de  usabilidad  nos  debía  confirmar  si  esta  página   estaba  diseñada  para  poder  cumplir  con  estos  fines.    
  29. 29. 10/02/16   29   3.         Resultados  del  estudio  y     Oportunidades  de  mejora   detectadas   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   a)  Poca  dis,nción  de  anuncios  pagados   Anuncios  gratuitos   Poca  disFnción  entre   anuncios  pagados  y   gratuitos  .  No  hay   mayor  incen,vo  para   que  los  usuarios   vendedores  se  animen  por   el  servicio  destacado.   Anuncios  pagados   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   b)  Poco  o  nulo  uso  de  filtros  de  búsqueda   Filtros  de  búsqueda   Poco  uso  del  filtro  de   búsqueda  debido  a  largo   scroll  que  realizaban  los   usuarios.  Nunca  estaba   a  la  vista   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   c)  Texto  muy  comprimido   Publicidad  dificulta  la   navegación  por  ocupar   gran  parte  del  ancho  de  la   página   Mucha  información   en  muy  poco  espacio  
  30. 30. 10/02/16   30   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   d)  Falta  de  fotos  o  elementos  gráficos   Los  anuncios  mencionaban   atulo,  metraje,  precio,  etc.   Pero  no  destacaban   aspectos  visuales   como  fotos  o  logos  de   quién  vende.   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   e)  Alta  can,dad  de  páginas  vistas  por   usuario   Casi  13  páginas   vistas  por  usuario.     4.         Solución:     Rediseño  de  Página  de   resultados  de  búsqueda   Anterior…   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Solución:  Rediseño  de  la  página  de   resultados  de  búsqueda  
  31. 31. 10/02/16   31   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Solución:  Rediseño  de  la  página  de   resultados  de  búsqueda   NUEVA  !   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   a)  Poca  dis,nción  de  anuncios  pagados   Describir  de  manera   explícita  qué  Fpo  de   anuncio  es  (proyecto,   destacado  o  gratuito),  no   solo  facilita  la  búsqueda   del  comprador,  sino  que   incenFva  al  vendedor  a   destacar  su  anuncio.     Mayor  diferenciación  de   Fpo  de  anuncio:   -­‐E,queta  de  anuncio   -­‐Fondo  amarillo     World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   b)  Poco  o  nulo  uso  de  filtros  de  búsqueda   1.  Pasamos  el   filtro  de  formato   Horizontal  a   Ver,cal   2.  A  medida  que   un  usuario  hace   scroll,  el  filtro   de  búsqueda  lo   acompaña  en   todo   momento.   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   c)  Texto  muy  comprimido   Se  reemplazó  el  gran  banner  publicitario   lateral,  por  uno    más  pequeño  y   Horizontal,  liberando  espacio  para  los   lisFngs.     1.  Se  aumentó  el  espacio  disponible  para   cada  lisFng  a  casi  el  doble   2.  Se  redistribuyó  el  contenido  para   presentarlo  de  una  manera  más   limpia  y  fácil  de  leer,  brindando   contenido  más  relevante    
  32. 32. 10/02/16   32   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   d)  Falta  de  fotos  o  elementos  gráficos   La  presencia  de  fotos  y  el  logo  de   la  empresa,  generan  resultados  más   relevantes  para  los  usuarios.     World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   e)  Alta  can,dad  de  páginas  vistas  por   usuario   Reducción  en  más  de  20%  de  páginas   vistas  por  usuarios.     Ahora  los  usuarios  encuentran  anuncios   de  su  interés  con  menor  esfuerzo.       5.         Conclusiones  y   Recomendaciones   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Conclusiones     •  Día  a  día  el  área  de  TI/Diseño  trabaja  por  responder  pedidos  inconexos  de   clientes  o  disFntas  áreas  de  la  empresa  (Comercial/MarkeFng/IT)   o  Ej:  MKT  quiere  mejorar  la  efecFvidad  de  su  publicidad  –  agranden  los   banners   o  IT  quiere  reducir  la  carga  del  servidor  –  reduzcan  el  tamaño  de  las   imágenes   o  Etc  en  el  Fempo     •  Estos  pedidos  Fenden  a  ser  tratados  de  manera  aislada,  sin  tomar  en  cuenta  la   experiencia  del  usuario  u  objeFvos  de  otras  áreas   •  Un  estudio  de  usabilidad  permite  hacer  una  pausa  en  el  camino,  evaluar  el   funcionamiento    integral  de  una  web  y  ver  si  cumple  con  los  objeFvos  para  los   cuales  está  creada  
  33. 33. 10/02/16   33   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Conclusiones   1.  Si  bien  algunas  de  las  oportunidades  de  mejora  pueden  ser  bastante   evidentes,  un  test  de  usabilidad  permite  tener  TODOS  los  elementos  de   juicio  desde  el  punto  de  vista  del  usuario,  para  dar  una  solución  integral,   y  no  un  “parche”   2.  Un  rediseño  integral,  como  el  del  presente  caso,  debe  estar  respaldado   de  tesFmonios  de  todo  Fpo  de  usuarios,  desde  heavy  users  hasta   primerizos.       3.  Antes  de  realizar  cambios,  deben  tenerse  métricas  (ej.  Páginas  vistas  por   visita).  De  lo  contrario,  no  se  va  a  poder  medir  la  efecFvidad  de  un  cambio   hecho  posteriormente.   World  Usability  Day  Peru  2011  –  Caso  AdondeVivir.com   Recomendaciones     1.  Realizar  un  estudio  de  Usabilidad  tercerizado:   o  Al  menos  una  vez  al  año  (para  empresas  netamente   online)   o  Al  menos  una  vez  cada  dos  años  (para  cualquier  otro  Fpo   de  empresa   2.  Incluir  estudios  de  Usabilidad  In-­‐House,  como  parte  del   proceso  regular  de  lanzamiento  de  mejoras  en  la  Web:   Testeo  Con,nuo   EVALUACIONES DE ACCESIBILIDAD 09/02/16 131 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Evaluaciones de accesibilidad: manual § Leyendo el contenido: o Lenguaje sencillo o Abreviaturas, idiomas, … o ¿Se entiende? § Comprobar navegadores gráficos o Firefox, Internet Explorer, Opera, Safari, … o Diferentes plataformas, versiones y sistemas operativos o Diferentes configuraciones: § Desactivando imágenes, CSS, JavaScript, sonido, etc. § Diferentes resoluciones de pantalla, tamaños de texto, combinaciones de colores o B/N, etc. § Usar navegadores sólo texto; lectores de pantalla § Usar dispositivos alternativos (sólo con teclado) 09/02/16132 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  34. 34. 10/02/16   34   Evaluaciones de accesibilidad: herramientas § Online y offline § Para comprobar sintaxis de HTML, CSS, etc. o W3C (HTML Validation Service; CSS Validation Service; etc.) W3C Unicorn o Otras herramientas (HTML Tidy; Dreamweaver; etc.) § Para validación de accesibilidad o WebXACT/Bobby; Cynthia Says; TAW; eXaminator TAW o Comprueban si se cumplen determinados checkpoints de WCAG o Sirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad 09/02/16133 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net MITO: los validadores automáticos indican si una página es accesible o no FALSO. § Los validadores comprueban la sintaxis (HTML, CSS, etc.) § Los validadores comprueban algunos checkpoints PERO… § Muchos checkpoints son interpretables y necesitan validación manual. § Las herramientas automáticas pueden producir “falsos negativos” y “falsos positivos” Guidelines, checkpoints, validadores automáticos y sellos son herramientas e indicadores, NO un objetivo Lo importante: la accesibilidad real 09/02/16134 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Pruebas accesibilidad con usuarios § Similares a los tests de usabilidad: o Observación de usuarios reales mientras se enfrentan al sitio web § Proporcionan mucha información útil, pero son muy complejos: o Definir tareas representativas o Existe gran cantidad de tipologías de discapacidad 09/02/16135 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Retos de accesibilidad: RIA (Rich Internet Applications) § Conseguir interfaces “de escritorio” en la web § Algunas aplicaciones: o Google (Gmail; Google Maps); Flickr; YouTube; ... § Tecnologías: o AJAX; Flash; Java; DHTML; etc. § Ya no son interfaces “insertados” en una página web, sino que son la propia interfaz. § WAI-ARIA (WAI Accessible Rich Internet Applications) o Iniciativa de W3C en desarrollo Mientras tanto… o Estándares para conseguir degradación progresiva o Proporcionar versión alternativa 09/02/16136 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  35. 35. 10/02/16   35   Gmail, con y sin JavaScript 09/02/16137 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net ¿Por qué es importante ACCESIBILIDAD? § Permite que el mayor número posible de personas acceda a los contenidos (no sólo discapacitados). § Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las páginas (mejor usabilidad). § Reduce costes de mantenimiento/desarrollo: o Una única versión para todas las plataformas o Es más fácil hacer cambios (contenido vs. presentación) o Mayor “vida útil” de los contenidos o Las técnicas se pueden aplicar a diferentes sitios § Cumplir estándares mejora la visibilidad en Internet (SEO) y la compatibilidad multinavegador. § Para determinados sitios, cumplir con la Ley. 09/02/16138 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net En conclusión … 09/02/16 139 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net Usabilidad (y accesibilidad) son “muy agradecidas” § No requieren grandes inversiones § Habitualmente dan resultados muy buenos § Pueden significar la diferencia entre: o el éxito y el fracaso o tú y tu competencia http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/ 09/02/16140 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net
  36. 36. 10/02/16   36   Consejo de mínimos (recordatorio) § Contratar/formar personal especializado § Integrar usabilidad en el proceso de desarrollo Subconjunto (mínimo) de técnicas: § Roles de usuarios; personas (“quién”) § Casos de uso (“qué”) § Prototipado de interfaces (“cómo”) § Evaluación (heurística/pruebas con usuarios) 09/02/16141 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net ¿Estás seguro de que tu producto o sitio web no es así? 09/02/16142 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net ¿Cuál es el problema?
  37. 37. 10/02/16   37   145 El terrible caso del A/B Test I want more people who visit the site to subscribe via email A) More People Visiting B) Higher Conversion Rate Multivariate Testing We’ll show each version to a percentage of visitors and find a winner
  38. 38. 10/02/16   38   Qué hay dentro De una decisión de Conversión? Likability Trust Word of Mouth UX Design Branding Historical Experiences Social Proof Associations CTAs Copywriting CONVERSION DECISION (it’s a complex process)! Timing Price Process Word of Mouth Discovery Path Amount of Pain Effort Required How Do We Find Out What Needs Optimizing? Segment Our Visitors & Survey Them Via: http://moz.com/rand/the-growth-of-web-marketing-fields/
  39. 39. 10/02/16   39   Ask Smart Questions to the Right People Never Taken a Free Trial What are you seeking from Moz? What’s brought you back? What would make you more likely to sign up? What are your biggest objections to signup? Took the Free Trial But Left What made you take the free trial? What objections did you have and how did you overcome them? What caused you to cancel subscription? What would have made you stay a subscriber? Took the Free Trial and Stayed What initially made you want Moz? What objections did you have and how did you overcome them? What’s been most valuable to you? Had success w/ Moz? Can we share? This is How the Pros Do It: Boom. And Shakalaka. From Conversion Rate Experts’ case study (which is definitely worth a read): http://www.conversion-rate-experts.com/crazy-egg-case-study/ #1: Make Pages Load BLAZING FAST 50% drop in just 3 seconds! Data and charts via: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/ ROI of page speed calculator: http://www.tagman.com/conversion-loss-calculator/ #2: Align Visitor Intent and Page Purpose From Avinash Kaushik’s post: http://www.kaushik.net/avinash/tips-for-improving-high-bounce-low-conversion-web-pages/
  40. 40. 10/02/16   40   #3: Poor Design Negatively Impacts Everything Good place to find great designers: http://dribbble.com #4: Empathy Yields Action +19%Via Kyle Rush: http://kylerush.net/blog/optimization-at-the-obama-campaign-ab-testing/ #5: Don’t Force Unnecessary Steps The $300mm button story is a great anecdotal piece on this http://www.uie.com/articles/three_hund_million_button #6: Concrete & Emotional > Abstract & Intellectual Concrete & Emotional Abstract & Intellectual From this excellent infographic: http://www.zippycart.com/infographics/how-sales-messaging-affects-conversion-rates.html
  41. 41. 10/02/16   41   #7: More Product Detail + Better Presentation = WIN Zappos’ great videos and detailed images help make them a standout in the field of online retailing: http://www.zappos.com/puma-future-cat-remix-2-ferrari-dandelion-black-high-risk-red #8: Video Works Conversion went from 30.0% 33.2% after the video was added. (10% lift) http://www.commoncraft.com/common-craft-video-dropboxcom-effective #8: But You Have to Optimize It Three must-read links on video for conversion: http://conversionxl.com/how-to-use-video-to-increase-conversions/, and the case study data for eParty: http://www.internetretailer.com/2011/02/22/videos-boost-online-profile-eparty-unlimited and for Premiere Game Tables: http://blog.treepodia.com/2011/03/ecommerce-video-roi-a-case-study/. I also highly recommend http://wistia.com which we use at Moz for video. #9: Don’t Fall Into the Trap of Copying Others’ Tactics 14% Increase in Sales 20% Increase in Sales Great post on case studies and lessons learned: http://moz.com/blog/lessons-learned-from-21-case-studies-in-conversion-rate-optimization-10585
  42. 42. 10/02/16   42   #10: Make Your Core Purpose Insanely Obvious Huh? Despite reading the homepage thoroughly, I was stumped about exactly what teamr does: h#p://www.teamr.com/ #10: Make Your Core Purpose Insanely Obvious Makes total sense. Contrast with 15Five, a competitive product that makes their purpose and product extremely clear right away: h#p://www.15five.com/ #11: Maximize the Conversion “Scent” Throughout the Marketing Messages (on & off site) Photo doesn’t match… Where’s the “snow, ice, or ground” versions? There’s no copy except the name… WEAK SCENT! Maintaining the conversion “scent” from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#. #11: Maximize the Conversion “Scent” Throughout the Marketing Funnel Photo, logo, & button all match Screenshots & copy fit with the display ad’s promise STRONG SCENT! Maintaining the conversion “scent” from ConversionXL: h#p://conversionxl.com/give:your:adver>sing:roi:a:serious:boost:by:maintaining:scent/#.
  43. 43. 10/02/16   43   #12: Don’t Just Aim for the Fastest Possible Conversion The more times someone visits Moz before taking a free trial, the longer theystay a subscriber (on average) Conversions < Moz’s internal customer growth funnel (built by our amazing inbound engineering team) CLTV Bonus #13: More Tips Than You Can Imagine From Unbounce: http://unbounce.com/conversion-rate-optimization/544-conversion-rate-optimization-tips/ UX/UI UX es como funciona y UI es como luce como se siente -  McNuggets de Pollo -  Instruciones… - Descongelar -  30 segundos -  Comer -  Eructar -  Simple UX
  44. 44. 10/02/16   44   UX - Experiencia de Usuario UX, o experiencia de usuario, mide la facilidad y el placer que tienen los usuarios al navegar por un sitio. Propósito detrás del UX Experiencia de Usuario *Cumplir con los objetivos del negocio 1. Adquisición de usuario 2. Activación de usuario 3. Retención de usuario
  45. 45. 10/02/16   45   ¿Cómo el UX resuelve problemas? Usabilidad Diseño Visual Investigación del Usuario UX Diseño de Interacción Arquitectura de La Información Estrategia de Contenido Componentes del UX 1.   Definición de Usuario 2.   Mapas del Sitio 3.   Flujo de Usuario 4.   Wireframes Definición de Persona Arquitectura de la Información
  46. 46. 10/02/16   46   Flujo de Usuario Wireframes K UI- Interfaz de Usuario Un hábil diseñador de interfaces entiende la importancia de proporcionar al usuario una solución a un problema definido
  47. 47. 10/02/16   47   UI Branding Wireframing Color, Esquemas: fuentes, Logo, Estilos Cómo llegamos al UI? 1. El problema ha sido definido 2. Flujos de usuario e historias han sido creadas 3. Experimentos para validar personas 4. Wireframes y bocetos 5. Mockups con UI incluida pueden ser realizados 6. Prueba de Usuario 7. Es tiempo de codificar la interfaz - UI Design! 187 •  Etapas. Responden al tiempo transcurrido ¿cuándo? •  Actividades y tareas. Responden al proceso ¿qué? •  Técnicas. Responden a lo que se hace para lograr los procesos ¿cómo? •  Herramientas. Responden a qué se usa para aplicar las técnicas ¿con qué? El PROCESO de AI se divide en:
  48. 48. 10/02/16   48   •  Reunión •  Entrevista y Encuesta •  Observación •  Revisión bibliográfica •  Consulta a experto •  Representación y mapeo Técnicas básicas •  Encuestas online: son herramientas que permiten diseñar un encuesta en línea y que los usuarios, de manera remota, la respondan. Luego se analizan los resultados. •  Algunos son servicios de terceros. Técnicas y herramientas Survey Manager de Netquest [www.solucionesnetquest.com/ survey_manager] E-encuestas [www.e-encuesta.com] •  Tormenta de ideas. (brainstorming) (focusgroup) •  Crítica de diseño. (critic design) •  Diseño participativo. (participatory design) •  Tormenta de necesidades. Técnicas y herramientas www.mindjet.com •  Escenarios (definición de). – Plantilla en Word para recoger datos de escenarios. •  Benchmarking. (comparación)(análisis de homólogos) – Tabla en Excel para comparar elementos. Técnicas y herramientas Sitio Tipos de contenido Tipo de sitio Calidad del recurso Amazon.com Libros, ropas, autos, … Tienda bueno Yahoo.com Personas, Trabajos, … Directorio- portal regular Google.com Sitios web, PDF, PPT, … Buscador bueno
  49. 49. 10/02/16   49   •  Análisis de frecuencia de texto. Técnicas y herramientas TextSTAT-2 www.niederlandistik.fu-berlin.de/textstat/software-en.html •  Organización de tarjetas (cardsorting) Técnicas y herramientas AGRUPACIÓN EZcalc y USort [www.tripledogs.com/ibm- usability ] •  Organización de tarjetas (cardsorting) Técnicas y herramientas SECUENCIA www.nosolousabilidad.com/articulos/analisis_secuencia.htm •  Inventario de contenidos 1. Técnicas y herramientas Se puede hacer como: •  Mapa de contenidos CMapTools. [http://cmap.ihmc.us]
  50. 50. 10/02/16   50   •  Inventario de contenidos 2. Técnicas y herramientas Se puede hacer como: •  Tabulación de contenidos Hoja de cálculo Excel. •  Análisis de tareas (task analysis). •  Flujogramas. Técnicas y herramientas Microsoft Visio. (diagramas de flujo) •  Análisis de tareas (ejemplo). Técnicas y herramientas Microsoft Visio •  Diagramación en papel (paper prototype) Técnicas y herramientas
  51. 51. 10/02/16   51   •  Diagramación del producto: –  Diagrama(s) de organización (blueprint o sitemap) –  Diagrama(s) de funcionamiento (flow) –  Diagrama(s) de presentación (wireframe) Técnicas y herramientas – Diagrama de organización (blueprint o sitemap) Técnicas y herramientas www.mindjet.com – Diagrama de funcionamiento (flow) Técnicas y herramientas Microsoft Visio – Diagrama de presentación (wireframe) Técnicas y herramientas Microsoft Visio
  52. 52. 10/02/16   52   Técnicas y herramientasSoftware para hacer diagramas de software: §  Mindmanager (www.mindjet.com) §  Freemind (http://freemind.sourceforge.net) §  PowerMapper (www.powermapper.com) §  Xtreeme SiteXpert (www.xtreeme.com/sitexpert) §  SmartDraw (www.smartdraw.com) §  Microsoft Visio (www.microsoft.com) §  OmniGraffle (OSX) (www.omnigroup.com) §  iGrafx Flowcharter (www.igrafx.de) §  DENIM & Silk. (http://guir.berkeley.edu/projects/denim) Técnicas y herramientas Algunos sistemas de símbolos para diagramar: §  Jesse James Garret (http://www.jjg.net/ia/visvocab) §  Dan Brown (http://www.greenonions.com) §  Bill Scout (http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio ) §  Garrett Dimon (http://www.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle) §  Nick Finck (http://www.nickfinck.com/stencils.html) §  Peter Van Dijk's (http://iabook.com/template.htm ) •  Prototipado digital Técnicas y herramientas Se usó el Microsoft Frontpage, el Adobe Dreamweaver, en algunos casos se usó el Microsoft Visio y hasta el Power Point. Existen algunas experiencias usando CMS como el WorldPress (útil para hacer blogs) el Joomla, y hasta el Drupal. •  Prototipado digital Técnicas y herramientas 1.  Permite prototipar muy rápido. 2.  En su última versión permite incorporar y crear su propia biblioteca de símbolos. 3.  Permite hacer diagramación y prototipado al mismo tiempo. 4.  Permite hacer prototipado colaborativo (en red).
  53. 53. 10/02/16   53   •  Prototipado digital Técnicas y herramientas www.axure.com •  Test de prototipos Técnicas y herramientas Morae de TechSmith: aplicación para grabar, observar y gestionar el uso de un prototipo o sitio web entre una red de usuarios. Antiguamente se usaba el Cantasia de la misma empresa, pero la demanda los llevó a crear el Morae y otras aplicaciones, como Uservue. [www.techsmith.com] Aplicaciones para Eyestracking. •  Posicionamiento Técnicas y herramientas Herramientas para ubicar sitios web en buscadores: •  Active WebTraffic •  Webceo Herramientas para analizar las estadísticas del uso de sitio web: •  Webalizer •  Web statistics •  Google analysis •  El Instituto de AI agrupa varias herramientas para diagramar y hacer arquitectura de información en general. •  Contiene propuestas para el software Omnigraffle, Ilustrador y Visio. http://iainstitute.org/en/learn/tools.php Técnicas y herramientas
  54. 54. 10/02/16   54   LA TÉCNICA ES LA TÉCNICA Y SIN TÉCNICA NO HAY TÉCNICA Qué NO hacer: Herramientas de diseño fáciles de usar HotGloo Hotgloo.com
  55. 55. 10/02/16   55   BalsamiqBalsamiq.com Invisioninvisionapp.com La diferencia entre UX/UI Freelance vs Agency Pros Cons Freelancer Flexibilidad Perfectiva nueva Cambios rápidos Especialidades limitadas La “Marca” Agencia Creatividad Acceso a las últimas técnologías Expertos Costos Cambios In-house Armonía de Marca Acceso a “recursos” Falta de creatividad puede varias rápidos pueden Burocracia varias
  56. 56. 10/02/16   56   Módulo II Introducción a Diseño de Interfaces•  Arquitectura de la Información ¿Qué es la AI? Navegación Breadcrumb •  Buscadores Ejemplos de buscadores Tipos de búsqueda ¿Que debe tener un •  buscador? •  D I Conceptos Generales Flujos visuales y call to action Principios de diseño de •  interacción •  D II Diferencia entre Mockups, Wireframes y Prototipos Patrones de IxD •  Formularios Login Validaciones Ayudas Home ¿Que debe tener una home? •  Herramientas Balsamiq Axure   Hablemos un poco de Arquitectura de Información y Wireframes ¿Qué es Arquitectura de Información?
  57. 57. 10/02/16   57   Hablemos un poco de Arquitectura de Información y Wireframes ¿Dónde se Ubica? Hablemos un poco de Arquitectura de Información y Wireframes ¿Dónde se Ubica? Hablemos un poco de Arquitectura de Información y Wireframes ¿Qué hace un Arquitecto de Información? Hablemos un poco de Arquitectura de Información y Wireframes ¿Qué hace un Arquitecto de Información?
  58. 58. 10/02/16   58   Hablemos un poco de Arquitectura de Información y Wireframes ¿Qué hace un Arquitecto de Información? Hablemos un poco de Arquitectura de Información y Wireframes ¿Cómo llegamos a ella? Hablemos un poco de Arquitectura de Información y Wireframes Ejemplo Hablemos un poco de Arquitectura de Información y Wireframes Ejemplo
  59. 59. 10/02/16   59   Hablemos un poco de Arquitectura de Información y Wireframes ¿Qué es un Wireframe? Hablemos un poco de Arquitectura de Información y Wireframes El Wireframe es una jerarquización de contenidos distribuida visualmente y una esquematización de la interfaz. Gráficamente, son estructuras muy simples y están enfocados a visualizar la distribución de los contenidos dentro de una pantalla. ¿Qué es un Wireframe? Hablemos un poco de Arquitectura de Información y Wireframes El Wireframe es el puente que une la Arquitectura de Información y el Diseño. Pasa de la “mentalidad estructural” de un árbol de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz. Arquitectura de información" Estrategia" Diseño de interfaz" Desarrollo" Wireframes" Es un Puente Hablemos un poco de Arquitectura de Información y Wireframes Pasar de la AI al Wireframe, compete varios procesos de un desarrollo de interfaz digital. Será importante en esta traducción aspectos estratégicos, definiciones de buenas prácticas del benchmark y la definición de los contenidos. Luego, valiéndonos del árbol de contenidos, podremos plasmar una correcta jerarquía de contenidos en nuestro esquema. ¿Relación con Diseño?
  60. 60. 10/02/16   60   Hablemos un poco de Arquitectura de Información y Wireframes La principal ventaja de los Wireframes, es que ofrecen una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.). Esto último, ayuda a que el proyecto en desarrollo no se retrase por falta de definición o que el resultado se aleje mucho de lo que se esperaba. _<" Tiempos" _"<" Productividad" _"<" Costos" ¿Porqué hacerlos? Hablemos un poco de Arquitectura de Información y Wireframes Además, son una excelente herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. ¿Y además? Hablemos un poco de Arquitectura de Información y Wireframes " Definen qué quiere tu cliente y cuáles son sus objetivos" •  Permite la comunicación fluida entre el equipo de trabajo y el cliente" •  Las correcciones son objetivas, basadas en contenidos y funcionalidad Se evitan las discusiones gráficas" •  Se reducen los tiempos de trabajo y costos" •  Permiten visualizar interacciones y flujos." •  Se pueden identificar tempranamente problemas de Interacción, Usabilidad, Accesibilidad" •  Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz" ¿Porqué hacerlos? Hablemos un poco de Arquitectura de Información y Wireframes Son estructuras simples conformados principalmente de líneas y cajas! ¿Guías Visuales?
  61. 61. 10/02/16   61   Hablemos un poco de Arquitectura de Información y Wireframes Están diseñados en escala de grises! ¿Guías Visuales? Hablemos un poco de Arquitectura de Información y Wireframes Todos los elementos gráficos (imágenes, marcas, iconos) y de sistema (radio button, dropdown, checkbox) están representados esquemáticamente! ¿Guías Visuales? Hablemos un poco de Arquitectura de Información y Wireframes Usar solamente una familia tipográfica, de preferencia de sistema 1234567890¿?" abcdefghijklmnño pqrstuvwxyz" ¿Guías Visuales? Hablemos un poco de Arquitectura de Información y Wireframes Guías Visuales Trata de usar Contenido Real, de lo contrario nuestro buen amigo Lorem Ipsum ¿Lorem ipsum?"
  62. 62. 10/02/16   62   Hablemos un poco de Arquitectura de Información y Wireframes Trata de usar guías o notas visuales para explicar una interacción (sobre todo Wireframes Funcionales) ¿Guías Visuales? Hablemos un poco de Arquitectura de Información y Wireframes Trata de usar guías o notas visuales para explicar una interacción (móvil) ¿Guías Visuales? Hablemos un poco de Arquitectura de Información y Wireframes " Simple sobre todas las cosas" •  Usa la mayor cantidad de contenido real posible" •  Siempre trabaja en escala de grises" •  Evita usar imágenes, logos e iconografía" •  No te limites a usar una aplicación digital, ¡dibuja!" •  Define muy bien la estrategia y los contenidos antes de empezar" •  Siempre haz wireframes antes de diseñar" " Explica las zonas e interacciones" •  Discute los wireframes con tu equipo de trabajo" •  Corrige problemas detectados en wireframes, no en diseño" ¿Guías Visuales? Hablemos un poco de Arquitectura de Información y Wireframes Fireworks Omnigraffle" Microsoft Axure" Balsamiq" Keynote" Apliaciones" escritorio" Apliaciones" web" Hotgloo iplotz" Balsamiq Cacoo" Algunos ejemplos de Aplicaciones para realizar Wireframes ¿Aplicaciones?
  63. 63. 10/02/16   63   2

×