Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mas Alla de lo Visual

3,437 views

Published on

Curso sobre el diseño visual, impartida en Bogotá el 29 y 30 de junio 2012

Published in: Technology
  • Be the first to comment

Mas Alla de lo Visual

  1. 1. Diseño deInterfaces,Más Allá de lo VisualMarta Sylvia del Ríomdelrio@udem.edu.mx
  2. 2. Presentación yexpectativas
  3. 3. Expectativas
  4. 4. Elementos de laexperiencia del usuario Métodos de IHC Elementos de la qué puedo hacer Experiencia del Usuario concreto consolidación Diseño de la Comunicación Diseño Visual Tipografía Diseño de Diseño de Wireframes la Interfaz Navegación ThinkAloud Evaluación Heurística Diseño de Información Arquitectura tiempo Storyboards Diseño de de Paseo Cognitivo Interacción Información http://julian.missig.org/ Diseño Contextual Especifica- Requeri- ciones mientos de Diagramas de Afinidad Funcionales Contenido Análisis Contextual Necesidades del Usuario Entrevistas Focus Setting Objetivos del Sitio abstracto conceptualización
  5. 5. Agenda 150 Los conceptos básicos del diseño y su aplicación en la web120 30 Color y accesibilidad para el diseño de un sitio web Mental Notes: uso de psicología para motivación del usuario30 Innovación en las interfaces 60 Jerarquización y diseño basado en el "call to-action". 90 Ejercicios prácticos de solución de problemas de diseño web
  6. 6. El espacio es un recurso limitado…que se acaba rápidamente
  7. 7. Homepage usability: 50 websites deconstructed
  8. 8. http://www.andrescarnederes.com/dc/index.html recuperado el 27 de mayo 2012
  9. 9. http://www.gelattina.com/ recuperado el 7 de julio 2010
  10. 10. http://www.target.com/ recuperado el 27 de mayo 2012
  11. 11. EjercicioRevisar sitios web delos asistentes ydeterminar quéespacios se asignan acada función.
  12. 12. The Non-Designer’s Design BookBy Robin WilliamsPublished Sept7, 2003 by Peachpit PressCopyright 2004 BookDimensions: 9.8 x 6.9 x 0.4 inches ISBN-10: 0321193857Pages: 192 ISBN-13: 978-0321193858Edition: 2nd
  13. 13. Principios del Diseño■ Proximidad■ Alineación■ Repetición■ Contraste■ Tipografía
  14. 14. Proximidad
  15. 15. Ralph Roister Doister (717) 555-1212 Mermaid’s Tavern916 Bread Street London, NM Mermaid’s Tavern Ralph Roister Doister The Non-Designer’s Design Book 916 Bread Street London, NM (717) 555-1212
  16. 16. http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  17. 17. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  18. 18. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  19. 19. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  20. 20. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  21. 21. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  22. 22. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  23. 23. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  24. 24. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  25. 25. modificado de http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  26. 26. …y podríamos continuar http://www.crystalwater.com.mx/index.php recuperado el 11 de febrero 2012
  27. 27. http://www.gandhi.com.mx/ recuperado el 12 de marzo 2011
  28. 28. http://www.gandhi.com.mx/ recuperado el 12 de marzo 2011
  29. 29. Microsoft Access, 2008
  30. 30. Alineación
  31. 31. Ralph Roister Doister (717) 555-1212 Mermaid’s Tavern 916 Bread Street London, NMMermaid’s Tavern Mermaid’s Tavern Ralph Roister Doister Ralph Roister Doister The Non-Designer’s Design Book 916 Bread Street 916 Bread Street London, NM London, NM (717) 555-1212 (717) 555-1212
  32. 32. ttp://www.banorte.com recuperado el 12 de marzo 2011
  33. 33. http://www.pinturasosel.com/ recuperado el 16 de abril 2010
  34. 34. http://www.pinturasosel.com/ recuperado el 16 de abril 2010
  35. 35. modificado de http://www.pinturasosel.com/ recuperado el 16 de abril 2010
  36. 36. modificado de http://www.pinturasosel.com/ recuperado el 16 de abril 2010
  37. 37. modificado de http://www.pinturasosel.com/ recuperado el 16 de abril 2010
  38. 38. Grid 960 http://sonspring.com/journal/960-grid-system recuperado el 18 de julio 2012
  39. 39. Grid 960  Provee una retícula de las dimensiones más comunes, basada en 960 pixeles  Hay dos variantes: 12 y 16 columnas
  40. 40. http://960.gs/ recuperado el 17 de junio 2012
  41. 41. http://cssgrid.net/ recuperado el 17 de junio 2012
  42. 42. Repetición
  43. 43. Mermaid’s Tavern Mermaid’s Tavern Ralph Roister Doister Ralph Roister Doister 916 Bread Street 916 Bread Street London, NM London, NM (717) 555-1212 (717) 555-1212 The Non-Designer’s Design Book
  44. 44. http://www.imagen.com.mx/ recuperado el 7 de noviembre
  45. 45. http://www.googoo.com/ recuperado el 6 de octubre 2010
  46. 46. http://www.googoo.com/ recuperado el 6 de octubre 2010
  47. 47. Contraste
  48. 48. David Rivers on Visual design of Web Apps 2:14http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!
  49. 49. David Rivers on Visual design of Web Apps 2:14http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!
  50. 50. https://www.amway.com.mx/Store/Catalogue.aspx?show=PrdsList&IC=1&C=FB&line=F&NavM=N
  51. 51. http://www.ocregister.com/articles/parking-262014-brea-application.html
  52. 52. CancelarSistema de Gestión de Comercio Exterior, recuperado el 13 de noviembre 2010
  53. 53. Tipografía
  54. 54. Legibilidad Grado de claridad con la cual un elemento es visualizado (Grosor, anchura, forma, cuerpo, proporción, relaciones de la forma y contrapunzón)Lecturabilidad Facilidad con la cual un texto es leído (Cuerpo de la fuente, longitud de línea y el interlineado)
  55. 55. Legibilidad Taladraron los caninos para remover la caries La tierra es de quien la trabaja Mañana nos vamos de vacaciones Los molinos de viento giran. La naturaleza recobra su dominio. Mañana nos vamos de picnic La actitud ante todo
  56. 56. Lecturabilidad
  57. 57. Tipografías para webManeja tipografías soportadas e instaladas por la mayoría de los sistemasoperativos y evita que cambien de un monitor a otro.Andale Mono Arial Comic Sans MS Courier New VerdanaGeorgia Impact Times New Roman Trebuchet MS Webdings Material cortesía de Ing. José Alfonso García Grajeda
  58. 58. InterletradoDependiendo de la tipografía utilizada, el interletrado puede variar. Se puedemedir mediante “ems” que representan los puntos ocupados por una letra enel tamaño del texto. M M 1em (12pt) = 12pt M M Material cortesía de Ing. José Alfonso García Grajeda
  59. 59. Ancho de columnaLorem ipsum dolor sit amet"Lorem ipsum dolor sit amet, consectetur quia voluptas sit aspernatur aut odit autadipisicing elit, sed do eiusmod tempor fugit, sed quia consequuntur magni doloresincididunt ut labore et dolore magna aliqua. eos qui ratione voluptatem sequi nesciunt.Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui doloremexercitation ullamco laboris nisi ut aliquip ex ipsum quia dolor sit amet, consectetur,ea commodo consequat. Duis aute irure adipisci velit, sed quia non numquam eiusdolor in reprehenderit in voluptate velit esse modi tempora incidunt ut labore et dolorecillum dolore eu fugiat nulla pariatur. magnam aliquam quaerat voluptatem. UtExcepteur sint occaecat cupidatat non enim ad minima veniam, quis nostrumproident, sunt in culpa qui officia deserunt exercitationem ullam corporis suscipitmollit anim id est laborum.“ laboriosam, nisi ut aliquid ex ea commodi"Sed ut perspiciatis unde omnis iste natus consequatur? Quis autem vel eum iureerror sit voluptatem accusantium reprehenderit qui in ea voluptate velit essedoloremque laudantium, totam rem aperiam, quam nihil molestiae consequatur, vel illumeaque ipsa quae ab illo inventore veritatis et qui dolorem eum fugiat quo voluptas nullaquasi architecto beatae vitae dicta sunt pariatur?"explicabo. Nemo enim ipsam voluptatem Material cortesía de Ing. José Alfonso García Grajeda
  60. 60. Manejo de puntuaciónListas. No colocar espacio en viñetas o números. Material cortesía de Ing. José Alfonso García Grajeda
  61. 61. Manejo de puntuaciónComillas. Deben estar fuera del margen del texto. Material cortesía de Ing. José Alfonso García Grajeda
  62. 62. Peso y tamaño tipográficoDefinir un tamaño específico para todos los títulos, subtítulos, abstracts,contenidos y otros textos del sitio. Buscar consistencia en el uso de dichostamaños a través de todas las páginas.TYPECHART(http://www.typechart.com) Material cortesía de Ing. José Alfonso García Grajeda
  63. 63. Familias Tipográficas Fuentes de Microsft Office 2010
  64. 64. http://www.udem.edu.mx/home recuperado el 11 de mayo 2012
  65. 65. http://www.babyandkidscenter.com/acerca.htmlrecuperado el 7 de diciembre 2010
  66. 66. EjercicioUtilizando un grid 960,rediseña la mesa deregalos de Liverpool,cuidando todos losprincipios de diseñoestudiados hasta elmomento.
  67. 67. Diseño Responsivo http://www.threefeetdesign.es/?p=451 recuperado el 17 de junio 2012
  68. 68. Diseño Web Responsivo Es una combinación de retículas fluidas e imágenes que modifican su acomodo en base al tamaño del dispositivo en el que se despliegan. Usa detección de dispositivos (en el cliente) para distinguir el dispositivo del que se trata y adaptarse. Diseño web responsivo se utiliza cuando se quiere programar un solo sitio <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> La query contiene dos componentes:  un media type (screen), y  la consulta entre paréntesis, conteniendo una característica a inspeccionar (max-device- width) seguida por el valor al que apuntamos (480px). En otras palabras, le estamos preguntando al dispositivo si su resolución horizontal (max-device-width) es igual o menor que 480px. Si la pregunta pasa -en otras palabras, si estamos viendo nuestro trabajo en un dispositivo con una pantalla pequeña como el iPhone- entonces el dispositivo cargará shetland.css. De lo contrario, el link es completamente ignorado.
  69. 69. http://www.lukew.com/ff/entry.asp?1509 recuperado el 17 de junio 2012
  70. 70. http://themetrust.com/demos/reveal/ recuperado el 17 de junio 2012
  71. 71. http://foodsense.is/ recuperado el 17 de junio 2012
  72. 72. http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/ recuperado el 18 de junio 2012
  73. 73. “Katie Holmes sí estuvo en el desfile.”http://www.popsugar.com/Can-You-Spot-Celebrity-43629 recuperado el 17 de junio 2012
  74. 74. Imágenes
  75. 75. http://www.bobbyflay.com/ recuperado el 19 de junio 2012
  76. 76. http://www.bobbyflay.com/ recuperado el 19 de junio 2012
  77. 77. http://www.lanacional.net/recuperado el 13 de mayo 2012
  78. 78. http://www.uncrate.com/ recuperado el 29 de agosto de 2010
  79. 79. http://www.uncrate.com/ recuperado el 29 de agosto de 2010
  80. 80. http://www.uncrate.com/ recuperado el 29 de agosto de 2010
  81. 81. http://www.ties.com/ recuperado el 29 de agosto 2010
  82. 82. http://www.ties.com/ recuperadoel 29 de agosto 2010
  83. 83. http://www.harrywinston.com/ recuperado el 29 de agosto 2010
  84. 84. ttp://www.harrywinston.com/ recuperado el 29 de agosto 2010
  85. 85. http://www.harrywinston.com/ recuperado el 29 de agosto 2010
  86. 86. http://www.zappos.com/womens-pumps recuperado el 15 de septiembre 2010
  87. 87. http://www.zappos.com/womens-pumps recuperado el 15 de septiembre 2010
  88. 88. http://www.zales.com/ recuperadoel 17 de noviembre 2010
  89. 89. http://www.louisvuitton.com recuperado el 17 de noviembre 2010
  90. 90. http://www.louisvuitton.com recuperado el 17 de noviembre 2010
  91. 91. http://www.cufflinks.com recuperado el 17 de noviembre 2010
  92. 92. http://www.cufflinks.comrecuperado el 17 de noviembre 2010
  93. 93. http://www.victorinox.com/ recuperado el 17 de junio de 2012
  94. 94. La GenteDistrae laAtención delProducto
  95. 95. http://www.youtube.com/watch?v=lo_a2cfBUGc recuperado el 19 de julio de 2012
  96. 96. Anuncio de SunSilk antes del estudio. Anuncio de SunSilk después del estudio.BunnyFoot study. BunnyFoot study.
  97. 97. Mapa de calor de Eye-tracking de un bebé mirando directamentehacia nosotros. UsableWorld study. Ahora el bebé mirando hacia el contenido. UsableWorld study.
  98. 98. Uso de Fotografías Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  99. 99. Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  100. 100. Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  101. 101. Fotos de personas  Si son personas reales, se revisan Pasaron más tiempo revisando las fotos que el contenido  Si sienten que son fotos genéricas, se ignoranJakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  102. 102. Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  103. 103. Fotos en Miniatura (thumbnails)Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  104. 104. Fotos Grandes de productos  Cuando son solicitadas, se revisan Lo ideal es presentar una imagen de al menos el doble de tamañoJakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  105. 105. Sitios personales Los usuarios buscan a la persona detrás del sitio. Revisan fotos, textos, todo. Revisen los tips de usabilidad para blogs.Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  106. 106. Conclusiones “ Pon atención a la imágenes que contienen información y que muestran contenido relevante para la tarea que se realiza. Los usuarios ignoran las imágenes decorativas. Jakob Nielsen ”Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  107. 107. EjercicioRevisar sitios de losparticipantes,analizando la selecciónde imágenes y quéaportan comoinformación.Justificar qué imágenesdebieran manejarse encaso de no ser las másadecuadas.
  108. 108. Formatos de Imagen
  109. 109. GIF - Graphics Interchange FormatEl formato más utilizado para iconografía / clip-art en la web Ventajas Desventajas  Poco peso = descarga más rápida  Soportan solamente 256 colores  Compresión Lossless = mayor  No recomendados para fotografías compresión y menor pérdida de calidad  No usar imágenes con muchos colores  Soporta el uso de transparencias  Soporta animación Material cortesía de Ing. José Alfonso García Grajeda
  110. 110. GIF – 32 BitsImagen 1024 x 768204 Kb Material cortesía de Ing. José Alfonso García Grajeda
  111. 111. GIF – 64 BitsImagen 1024 x 768283 Kb Material cortesía de Ing. José Alfonso García Grajeda
  112. 112. GIF – 128 BitsImagen 1024 x 768361 Kb Material cortesía de Ing. José Alfonso García Grajeda
  113. 113. GIF – 256 BitsImagen 1024 x 768459 Kb Material cortesía de Ing. José Alfonso García Grajeda
  114. 114. Usos del formato GIF Material cortesía de Ing. José Alfonso García Grajeda
  115. 115. JPG – Joint Photographic Experts GroupEl formato más utilizado para fotografía en la web Ventajas Desventajas  Poco peso = descarga más rápida  No soporta transparencias  Soporta imágenes true-colour, hasta  No soporta animación 16 millones de colores.  Compresión Lossy = A mayor compresión, mayor pérdida de calidad Material cortesía de Ing. José Alfonso García Grajeda
  116. 116. JPG – Low 0%Imagen 690 x 76838.2 Kb Material cortesía de Ing. José Alfonso García Grajeda
  117. 117. JPG – Medium 50%Imagen 690 x 768108 Kb Material cortesía de Ing. José Alfonso García Grajeda
  118. 118. JPG – High 100%Imagen 690 x 768294 Kb Material cortesía de Ing. José Alfonso García Grajeda
  119. 119. Usos del formato JPG Material cortesía de Ing. José Alfonso García Grajeda
  120. 120. PNG – Portable Network GraphicsEl formato diseñado como alternativa de GIF (con mayor capacidad)Ventajas Desventajas Soporta 8-Bit (GIF) y 64-Bit (JPG)  No soporta animación Soporta imágenes true-colour, hasta 16  En PNG-8 es mejor que GIF millones de colores.  En PNG-24 no es mejor que JPG Soporta transarencias (mejor que GIF) Compresión LossLess Material cortesía de Ing. José Alfonso García Grajeda
  121. 121. PNG – 8 BitImagen 1024 x 768108 Kb Material cortesía de Ing. José Alfonso García Grajeda
  122. 122. PNG – 64 BitImagen 1024 x 768894 Kb Material cortesía de Ing. José Alfonso García Grajeda
  123. 123. Usos del formato PNG Material cortesía de Ing. José Alfonso García Grajeda
  124. 124. Usos del formato PNG Material cortesía de Ing. José Alfonso García Grajeda
  125. 125. Transparencia PNG vs GIF Material cortesía de Ing. José Alfonso García Grajeda
  126. 126. Resolución y peso PNG vs JPGPNG - 64 Bit JPG – Medium 50%Imagen 1024 x 768 Imagen 1024 x 768894 Kb 152 Kb Material cortesía de Ing. José Alfonso García Grajeda
  127. 127. ¿Cuándo usar cada formato?GIF JPG PNG-8 PNG-24Mejor para clipart y Mejor para Mejor para clipart y Mejor paragráficos con pocos fotografías e gráficos con pocos fotografías ecolores. imágenes con colores. Uso de imágenes con muchos colores y transparencias mejor muchos colores y detalle. Mejor peso que GIF. detalle. Peso no para web adecuado para web en imágenes grandes.Hasta 256 colores Hasta 16 millones de Hasta 256 colores Hasta 16 millones de colores coloresImágenes LossLess Imágenes Lossy, que Imágenes LossLess Imágenes LossLesscon poco peso contienen menos con poco peso con poco peso que no información que la pierde información imagen original de la imagen (resolución)Permite animación No permite No permite No permite animación animación animaciónPermite No transparencia Permite Permitetransparencia transparencia transparencia Material cortesía de Ing. José Alfonso García Grajeda
  128. 128. Color
  129. 129. Hexadecimal para WebSistema utiliza la combinación de tres códigos de dos dígitos paraexpresar las diferentes intensidades de los colores primarios RGB NEGRO #000000 00 00 00 BLANCO #FFFFFF R G B ROJO #FF0000 AMARILLO #FFFF00 VERDE #00FF00 CYAN #00FFFF AZUL #0000FF MAGENTA #FF00FF Material cortesía de Ing. José Alfonso García Grajeda
  130. 130. Colores cálidos y fríosCálidosPasiónFelicidadEntusiasmoEnergíaFríosCalmaProfesionalismo Material cortesía de Ing. José Alfonso García Grajeda
  131. 131. Colores cálidos y fríos¿Cuándo utilizar colores cálidos y cuándo fríos?http://www.udem.edu.mx/ http://www.extension.harvard.edu/ Material cortesía de Ing. José Alfonso García Grajeda
  132. 132. Colores cálidos y fríos¿Cuándo utilizar colores cálidos y cuándo fríos?http://www.toysrus.com/ http://www.tengoevento.com/ Material cortesía de Ing. José Alfonso García Grajeda
  133. 133. entre colores Relacioneshttp://gdbasics.com/index.php?s=color recuperado el 19 de agosto 2011
  134. 134. Combinaciones de Colores
  135. 135. Utilización de Colores http://www.colorsontheweb.com/colorwizard.asp recuperado el 18 de junio 2012
  136. 136. El ContrasteLa diferencia relativa enintensidad entre un punto deuna imagen y sus alrededoresBrillo = Brillo CONTRASTE NULO Material cortesía de Ing. José Alfonso García Grajeda
  137. 137. Selección de paletas de colores¿Cómo selecciono la paleta de color adecuada para un sitio?http://colorschemedesigner.com/http://colorsontheweb.com/colorwizard.asp#wizard Material cortesía de Ing. José Alfonso García Grajeda
  138. 138. http://www.accesskeys.org/tools/color-contrast.html recuperado el 19 de junio 2012
  139. 139. http://www.tfl.gov.uk/assets/downloads/standard-tube-map.pdf recuperado el 20 de junio 2012
  140. 140. http://www.pocketberry.com/2009/03/03/weatherbug-for-blackberry-storm-free-download/
  141. 141. http://iordanov.info/projecs_mentormate_MigraineMate.html
  142. 142. http://www.soft-gadgets.com/telenav-gps- http://symbianism.blogspot.com/2009/08/free-mobile-maps-navigator-for-blackberry-storm/ and-navigation-metro.html
  143. 143. Planear¿Qué es el diseño de información? “El diseño de información es un campo y un enfoque que intenta diseñar comunicaciones claras e inteligibles mediante el cuidado de la estructura, el contexto y la presentación de los datos y la información”. Nathan Shedroff (2008)
  144. 144. vs http://www.alistapart.com/articles/zebrastripingdoesithelp/Medida de supervivencia en un avión Mapa del metro de Londres Estudio de Periódicos en Línea Mexicanos
  145. 145. http://www.amazon.com/Diamond-Engagement-Rings-Loose-Diamonds recuperado el 7 de julio 2010
  146. 146. http://www.smartmoney.com/map-of-the-market/ el 23 de agosto 2010
  147. 147. http://www.panic.com/goods/ recuperado el 23 de agosto 2010
  148. 148. http://www.ted.com recuperado el 23 de agosto 2010
  149. 149. http://www.tenbyten.org/ recuperado el 22 de agosto 2010
  150. 150. http://www.lukew.com/ff/entry.asp?1007 recuperado el 20 de junio 2012
  151. 151. Design Decision: A New Signup Form
  152. 152. Mental NotesEjemplos Prácticos
  153. 153. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  154. 154. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  155. 155. La Historia de iLike Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders (pp. 5-10). Adaptado.  Stephen Anderson explica su experiencia con el sitio http://www.ilike.com, un sitio de música  El registro fue amigable, pero no fuera de lo común  Lo que llamó la atención del autor, fue cómo solicitaban cuáles son los intérpretes favoritos; en lugar de un cuadro de texto donde uno escribe los nombres de las bandas, mostraban una especie de juego de memorama (ver imagen en la siguiente diapositiva)Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  156. 156. Grooveshark shazzamAnderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  157. 157. La Historia de iLike Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders (pp. 5-10). Adaptado. ¿Por qué funciona?  Feedback Loops Conforme el usuario seleccionaba artistas, aparecían nuevas opciones. Aunque el sitio promete que entre más información mejor será la experiencia, no especifica si será en esa sesión o será en la siguiente visita.  Curiosidad Con esta misma idea, el usuario tenía curiosidad por saber si la lista iba adecuándose a sus estilos preferidos.  Pattern Recognition Nuestras mentes buscan patrones. El autor buscaba qué tenían en común esos artistas para que hubieran aparecido en esa página. ¿Había cierto tipo de artistas?Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  158. 158. La Historia de iLike Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders (pp. 5-10). Adaptado.  Visual Imagery Resulta mucho mejor ver al artista que leer su nombre. Y el área de clic es mucho mayor.  Recognition over Recall Es mucho mejor reconocer a los artistas que me gustan que tratar de recordarlos. El usuario dará mucho más información cuando no tiene que hacer el esfuerzo  Después del registro, mientras el autor revisaba su correo, le llegó un mensaje con la confirmación del registro y una invitación a participar en un reto. Esto despertó su curiosidad y dio clic.Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  159. 159. La Historia de iLike Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders (pp. 5-10). Adaptado.  El iLike Challenge es un juego, muy adictivo, que consiste en que tocan una muestra de 30 segundos de una canción. Se debe reconocer al autor de la canción o el título de la misma.  Te dan puntos si contestas correctamente. Si contestas en los primeros segundos, recibes 10 puntos. Si te toma 5-6 segundos contestar, recibes 9 puntos y así sucesivamente. Si te equivocas, no recibes puntos.  Lo más adictivo es ver tu score en una barra del lado derecho. Observas tu ranking, puntos acumulados, puntos para llegar al siguiente rank, preguntas contestadas, porcentaje de respuestas correctas y el tiempo promedio de respuesta.Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  160. 160. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  161. 161. La Historia de iLike Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders (pp. 5-10). Adaptado.  En el sitio de iLike utilizan muchas de las tarjetas que propone Stephen Anderson.  Adicionalmente a las tarjetas que ya se explicó que utilizan en este sitio, identifica al menos 3 adicionales que no se hayan mencionado.  Observen además que el sitio siempre facilita la mercadotecnia viral “invita a un amigo a jugar”.Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  162. 162. Le echamos másganas cuandonos reconocen elesfuerzo.¿Quéreconocimientoshay parafomentar elcomportamientodeseado?
  163. 163. http://apps.facebook.com/onthefarm/?ref=ts obtenido el 6 de octubre de 2011Ejemplo de Eduardo Acevedo
  164. 164. Diseñosestéticamenteagradablesnos parecenmás fáciles deusar.Generalmentelo son.
  165. 165. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  166. 166. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  167. 167. El autor del libro dice que dejó de ir a la gasolinera de la bomba descuidada, aunque está más cerca de su casa, porque desconfía de dar sus datos de tarjeta a un negocio con tan poco mantenimiento. La estética visual afecta al negocio.Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  168. 168. En caso de duda,nos enfocamos aun dato,generalmente elprecio o un valornumérico.¿Cuálesproporcionas alusuario?
  169. 169. Mostrando la oferta una porción grande de la página, se llama la atención del usuario, cambiando de página permanece hasta que el usuario elija del menú izquierdo.http://www.gap.com/browse/subDivision.do?cid=5646 recuperado el 10 de octubre, 2011Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar
  170. 170. Tenemos la página de información de IBM donde se quiere convencer al cliente que la empresa es buena. Dan estadísticas (anclaje) que convencen al usuario de lo grande que IBM es como empresahttp://www.ibm.com/ibm/us/en/?lnk=ftai recuperado el 4 de octubre del 2011Ejemplo de Héctor Cano
  171. 171. ¿Qué mejor forma de convencernos que haciendo un gran descuento en sushttp://www.amazon.com/s/ref=nb_sb_ss_i_0_7?field-keywords=inheritance&url=search- productos?alias%3Daps&x=0&y=0&sprefix=Inherit recuperado el 4 de octubre del 2011Ejemplo de Hector Cano
  172. 172. El anclaje esta vez se trata de las excelentes propiedades de los productos.http://www.nokia.com.mx/productos/todos-los-modelos/nokia-e5/caracteristicas#communications recuperado el 4 de octubre del 2011Ejemplo de Héctor Cano
  173. 173. Preferimoshacer lo que laautoridad o elexpertosugiera.
  174. 174. JPMORGAN (empresa de consultoría) habla de como es un componente de DOW JONES INDUSTRIAL AVERAGE. Eso le da a entender al usuario de que JPMORGAN es una empresa con un valor alto de importancia.http://careers.jpmorganchase.com/career/jpmc/careers/org recuperado el 4 de octubre del 2011Ejemplo de Héctor Cano
  175. 175. Saliéndonos de las computadoras al mundo real, en un simple vaso puedes avisar de la calidad que tiene tu producto. CARL’S JR usa la opinión de ORANGE COUNTY para informar al consumidor que una empresa importante avala que CARL’S JR tiene buenas hamburguesashttp://farm2.static.flickr.com/1286/953808043_865d015288_o.jpg recuperado el 4 de octubre del 2011Ejemplo de Héctor Cano
  176. 176. Como último ejemplo, tenemos la página de promoción de el Ipad y la opinión de un experto en el área.http://www.apple.com/mx/ipad/business/ipad-at-work/presentations.html recuperado el 4 de octubre del 2011Ejemplo de Héctor Cano
  177. 177. A la gente legustacoleccionar.¿Hay oportunidadde coleccionaralgo en tu sitio?Es mejor cuandoes algo pormérito.
  178. 178. http://www.foursquare.com.mx/ recuperado el 4 octubre 2011Ejemplo de Álvaro Contreras
  179. 179. Deseamosactuarconforme anuestrascreencias.Relaciónalocon tu sitio.
  180. 180. El hecho de preguntarle cuándo las recogerá, hace que el usuario lo medite y lo incluya en su itinerario, por lo que se incrementa el número de personas que recogen lo que separaron.Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  181. 181. Puedes ofrecerpequeñostrozos deinformaciónque harán quela gente quierasaber más.
  182. 182. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  183. 183. El carro más vendido de Hot Wheels es el “Mystery Car”http://www.worldoftoycars.com/product/2009-hot-wheels-mystery-car-sealed-you-pick recuperado el 24 de octubre 2011
  184. 184. http://www.groupon.com.mx/deals/monterrey/165-en-vez-de-550-por-un-descuento-sorpresa-te-atreves-o-te-lo-pierdes/1247317?nlp=&CID=MX_CRM_1_0_0_297&a=1510recuperado el 24 de octubre 2011
  185. 185. http://www.groupon.com.mx/deals/monterrey/165-en-vez-de-550-por-un-descuento-sorpresa-te-atreves-o-te-lo-pierdes/1247317?nlp=&CID=MX_CRM_1_0_0_297&a=1510recuperado el 24 de octubre 2011
  186. 186. Respondemosfavorablementea pequeñassorpresasagradables.
  187. 187. http://www.walkernews.net/2008/01/13/collection-of- http://blogvecindad.com/en-el-logo-de-google-40- google-holiday-logo/ recuperado el 24 de octubre 2011 aniversario-de-plaza-sesamo recuperado el 24 de octubre 2011http://infopiper.com/2011/20-july-google-doodle-of-gregor- http://planetaip.blogspot.com/2009/08/goomendel-189th-birthday-google-logo-on-20-july-2011 gle-logo-michael-jackson.html recuperado elrecuperado el 24 de octubre 2011 24 de octubre 2011 http://www.walkernews.net/2008/01/13/collection-of- http://www.walkernews.net/2008/01/13/collection-of- google-holiday-logo/ recuperado el 24 de octubre 2011 google-holiday-logo/ recuperado el 24 de octubre 2011
  188. 188. http://kennynguyen.us/2010/11/26/death-match-bruce-lee-and-iron-man-mailchimp/recuperado el 24 de octubre 2011
  189. 189. Una pequeña sorpresa musicalhttp://www.yahoo.com recuperado el 5 de octubre, 2011Ejemplo de Erick Marroquín
  190. 190. En cualquier video de YouTube, dejar presionado izquierda 2 segundos y luego arriba permite jugar Snake mientras corre el video.http://www.youtube.com/watch?v=hWc0Fd2AS3s / recuperado el 5 de octubre, 2011Ejemplo de Erick Marroquín
  191. 191. Google publicó un video de “Don’t Stop me Now” de Freddy Mercury el día que cumpliera 65 años, y el de cumpleaños 96 de Les Paul. http://www.youtube.com/watch?v=VMco4WF1914http://www.google.com recuperados el 9 de junio de 2011 y el 5 de septiembre 2011
  192. 192. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  193. 193. La forma en laque mostramoso redactamosla informaciónafectanuestrasdecisiones.
  194. 194. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  195. 195. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  196. 196. En una prueba A/B que se hizo, el “Download Now – Free” tuvo 3.44% más conversiones que conversiones “Try Firefox 3″, esto es, 10.07% versus 9.73%.http://www.90percentofeverything.com/2008/11/22/ab-test-results-for-the-firefox-download-button-wordingRecuperado el 27 de octubre del 2011
  197. 197. Versiones“beta” eran muyvaloradas hacetiempo. Pideque se “ganen”el acceso a tusitio.
  198. 198. Para jugar el beta primero debes haber reservado la versión de descarga desde antes.http://www.battlefield.com/es/battlefield3/1/beta recuperado el 5 de octubre 2011Ejemplo de Azael Alejandro muñoz
  199. 199. Si hay la opciónde actuar o noactuar, el ponerlímite de tiempopara participarnos alienta.
  200. 200. http://www.ebay.com recuperado el 10 de octubre, 2011Ejemplo de Álvaro Contreras
  201. 201. http://www.priceline.com recuperado el 10 de octubre, 2011Ejemplo de Álvaro Contreras
  202. 202. http://www.por1peso.mx/index.html recuperado el 10 de octubre, 2011Ejemplo de Álvaro Contreras
  203. 203. La fecha de terminación de la oferta persuade al usuario en comprarlo pronto.http://www.aquahotel.com/es/ofertas/paselo-de-miedo recuperado el 10 de octubre, 2011Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar
  204. 204. Tiempo limitado de oferta causa al usuario interés por conseguirlo.http://www.rumbo.es/ recuperado el 10 de octubre, 2011Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar
  205. 205. Podemos ver los meses que durará la promoción con la información sobre destinos y el costohttp://www.ryanair.com/en recuperado el 10 de octubre 2011Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar
  206. 206. Odiamos perderalgo que yaconseguimos.Permite que elusuario creecontenidopersonal antesde solicitarlesus datos.
  207. 207. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  208. 208. Recuperado el 5 de octubre del 2011 desde http://www.kongregate.com/games/ArmorGames/upgrade-completeEjemplo de Adolfo Orduño
  209. 209. Recuperado el 5 de octubre del 2011 desde http://www.winpalace-ads.com/slots/25free/CASINOGUIDE25/13373/.aspxEjemplo de Adolfo Orduño
  210. 210. Recuperado el 5 de octubre del 2011 desde https://www.facebook.com/deactivate.phpEjemplo de Adolfo Orduño
  211. 211. Recuperado el 27 de octubre del 2011 desde http://www.prorityclub.com
  212. 212. Para probar este software, haces una película. Al terminarla, te pregunta si quieres registrarte para conservarla/compartirla. Si no lo haces, pierdes la película.Recuperado el 5 de octubre del 2011 desde http://www.alistapart.com/articles/signupforms
  213. 213. Aprendemosimitando aotros.¿Qué ejemplostienes en elsitio quedemuestreninteraccionespositivas?
  214. 214. Ikea muestra sus “showrooms” en Facebook, lo que hace que la gente vea el producto en el contexto e incrementa las ganas de comprarlo.http://www.apartmenttherapy.com/ny/look/ikea-brooklyn-053298 recuperado el 25 de octubre 2011
  215. 215. Que otros cambien su perfil invita a que tú los imites.http://www.facebook,com recuperado el 25 de octubre 2011
  216. 216. http://www.facebook.com recuperado el 25 de octubre 2011
  217. 217. http://www.amazon.com recuperado el 25 de octubre 2011
  218. 218. Las sugestionesvisuales overbalesinfluyen encómorespondemos.
  219. 219. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  220. 220. Al entrar en la página, el fondo siendo una imagen de un bosque, así como los recuadros con imágenes ilustradas de árboles, atiborran al usuario diciéndole desde primera instancia de qué trata la página.http://www.milliontrees.ca/ recuperado el 10 de octubre, 2011Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar
  221. 221. La palabra pastel escrita tantas veces sobre una misma página, así como la misma imagen de un pastel, prepara el interés del usuario.http://www.cakesweetcake.co.uk/ recuperado el 10 de octubre, 2011Ejemplo de Pamela Villarreal, Sergio Sandoval e Isabel Solar
  222. 222. Es más fácilreconocer querecordar.
  223. 223. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  224. 224. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  225. 225. Nos preocupa loque la gentepiense denosotros.¿Hay acciones quetenganrepercusión ennuestro status enel sitio (visible aotros)?
  226. 226. Gamegroundhttp://gameground.com recuperado el 5 de octubre del 2011Ejemplo de Erick Marroquín
  227. 227. Video “My mom’s on Facebook” que muestra que uno cuida más lo que pone cuando hay otras personas que lo pueden observar.http://www.youtube.com recuperado el 10 de octubre, 2011Ejemplo de Adrián Rivera
  228. 228. Le asociamosmayor valor aalgo con pocadisponibilidad.
  229. 229. La pagina menciona, utilizando un rojo llamativo, que el producto se esta vendiendo rápido. Esto crea la sensación de que debes comprarlo pronto antes de que se acabe.http://www.solestruck.com/jeffrey-campbell-lita recuperado el 9 octubre 2011Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez
  230. 230. El paquete más completo se muestra agotado pero te ofrece una segunda opción para que te decidas por esa.http://www.universalorlando.com/Landing/Harry-Potter-November-Celebration.aspx recuperado el 9 octubre 2011Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez
  231. 231. La pagina menciona que solo tienen pocas unidades del producto en almacén, lo que te despierta sensación de quererlo comprar de inmediato antes de que se acabe.http://www.freepeople.com/accesories-hats-and-hair/jenoah-floppy-brim-hat/ recuperado el 9 octubre 2011Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez
  232. 232. Cuando recordarun elemento esprimordial,colócalo al inicioo al final.Es útil cuandohay muchoselementos.
  233. 233. Recuperado el 5 de octubre del 2011 desde http://www.amazon.com/gp/product/B002I096AA/ref=s9_simh_gw_p63_d0_g63_i4?pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=0PF5DFZEE3EWFJH2ZHD3&pf_rd_t=101&pf_rd_p=470938631&pf_rd_i=507846Ejemplo de Adolfo Orduño
  234. 234. Recuperado el 5 de octubre del 2011 desde http://www.walmart.com/ip/Ematic-6ft-HDMI-Cable-With-Shielding/11331701Ejemplo de Adolfo Orduño
  235. 235. Recuperado el 5 de Octube del 2011 desde http://katnels.articlesbase.com/operating-systems-articles/the-benefits-of-mac-567797.htmlEjemplo de Adolfo Orduño
  236. 236. En facebook, con la opción de Titulares puedes ver las noticias más destacadas de tus amigos, destacando la más reciente y la más antigua de ese día.http://www.facebook.com recuperado el 20 de octubre 2011Ejemplo de Alejandro Hernández, Rogelio Rodríguez y Lucia Elizondo
  237. 237. Entre máscerca estemosde completaruna colección,más pagamospor las piezasque faltan.
  238. 238. http://www.arm.co.uk/blog/how-to-get-a-job-on-linkedin.aspx recuperado el 24 de octubre 2011
  239. 239. En Mafia Wars, juego de Facebook, te permiten observar cuántos elementos te faltan de la colección. Los usuarios tratan de obtenerlos jugando diferentes misiones.http://www.bligblogging.com/mafia-wars-las-vegas-collections recuperado el 24 de octubre 2011Ejemplo de Adrián Rivera
  240. 240. En situacionespocofamiliares,imitamos aquienes nosrodean.
  241. 241. Recuperado el 5 de octubre del 2011 desde http://www.amazon.com/PlayStation-Portable-3000-System-Sony-PSP/dp/B001KMRN0M/ref=sr_1_7?ie=UTF8&qid=1317863029&sr=8-7Ejemplo de Adolfo Orduño
  242. 242. Recuperado el 5 de octubre del 2011 desde http://www.funnyordie.com/browse/pictures_and_words/all/all/most_viewed/this_month?rel=headerEjemplo de Adolfo Orduño
  243. 243. Recuperado el 5 de octubre del 2011 desde http://www.guitarcenter.com/Williams-Williams-Overture-88-Key-Digital-Piano-104651310-i1386664.gc Ejemplo de Adolfo Orduño
  244. 244. Siempremedimos cómonuestrasactuacionesmejoran oempeorannuestro status.
  245. 245. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  246. 246. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  247. 247. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  248. 248. EjercicioCrea una estrategiapara la mesa de regalosen base a la tarjeta quete hayan asignado.
  249. 249. 10 técnicas para un‘Call To Action’efectivoTraducción y modificación delPost del blog Designde Paul Boagdel jueves 22 de enero 2009
  250. 250. http://www.elpalaciodehierro.com.mx/ recuperado el 13 de noviembre 2009
  251. 251. Un call-to-action debe asegurar… el enfoque en tu sitio web una forma de medir el éxito de tu website que dirija a tus usuarios Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  252. 252. http://www.google.com recuperado el 31 de agosto 2010
  253. 253. http://www.vivaaerobus.com/ recuperado el 8 de mayo 2010
  254. 254. http://www.ryanair.com/ recuperado el 8 de mayo 2010
  255. 255. 1. Sienta las bases Para que un usuario complete un call-to-action, debe entender la necesidad de hacerlo. Los informerciales hacen esto muy bien. Antes de solicitar que la gente llame, identifican un problema y presentan un producto que resuelva el problema. http://www.youtube.com/watch?v=Vd5zrMkxU-I&feature=player_embedded#! También es necesario comunicar los beneficios de actuar. ¿Qué obtendrán los usuarios al completar el call-to-action? Por ejemplo, el VoIP de Skype, inmediatamente después del call-to- action (un botón de descarga) tienen el siguiente texto: “Make calls from your computer — free to other people on Skype and cheap to phones and mobiles around the world.” Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  256. 256. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  257. 257. 2. Ofrece un extra A veces habrá que motivar a los usuarios a completar un call-to-action. Los incentivos pueden incluir descuentos, entrar a una rifa o un regalo gratis. Esto es lo que hizo Barack Obama en su sitio para recaudar fondos. Si donabas $30 o más, te regalaban una playera. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  258. 258. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  259. 259. 3. Ten un número reducido de acciones distintivas Es importante ser preciso en los calls-to-action. Si hay demasiados, el usuario se siente abrumado.  Estudios de mercadotecnia muestran que si al comprador se le dan demasiadas opciones, es más probable que no compre nada.  Limita el número de opciones y reduce el esfuerzo mental. Guía en forma efectiva al usuario a lo largo de todo el sitio. Lo importante no es tanto el número de acciones ino lo distintivo de las mismas. En pbwiki.com tienen 3 calls-to-action:  Create a wiki  View Demo  Buy now Aunque pudiera ser un número aceptable, ¿qué diferencia hay entre ‘create a wiki’ y ‘buy now’. ¿Qué debo de hacer primero, crearlo o comprarlo? Es confuso. Hubiera sido mejor presentar la opción de comprar mucho después de que el usuario haya construido un wiki, y ya esté enganchado. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  260. 260. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  261. 261. 4. Utiliza lenguaje imperativo y urgente Un call-to-action debería decir a los usuarios de forma clara lo que se espera de ellos. Debe incluir verbos de acción tales como:  Llama  Compra  Regístrate  Subscríbete  Dona Todas ellas motivan al usuario a realizar una acción. Para crear un sentido de urgencia y una necesidad de actuar, estas palabras pueden acompañarse por frases tales como:  La oferta expira el 31 de marzo  Por tiempo limitado  Ordena ahora y recibe un regalo gratis Carsonified usa este enfoque al vender sus tutoriales. Para crear un sentido de urgencia, ofrecen descuentos a los que se registren antes. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  262. 262. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  263. 263. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  264. 264. 5. Encuenta la posición correcta Otro factor importante es la posición dentro de la página de tu call-for- action. Idelamnete debe colocarse en la parte alta de la página y en la columna central. picsengine.com coloca su see in action centrado, sobre la imagen. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  265. 265. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  266. 266. http://www.elpalaciodehierro.com.mx/ recuperado el 13 de noviembre 2009
  267. 267. 6. Usa espacio negativo No es solo la posición deI call-to-action lo que importa. También se trata del espacio alrededor de ella. Entre más espacio haya, más llamará la atención. Si saturas el espacio alrededor de tu call-to-action se perderá entre tanta cosa. PlanHQ hace un muy buen trabajo al enfocar a los usuarios a su call-to- action. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  268. 268. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  269. 269. 7. Usa un color alternativo El color es una forma efectiva de llamar la atención a un elemento, especialmente si el resto del sitio tiene una paleta limitada. Things hace esto de forma experta. Mientras que el resto del sitio es predominantemente azul y gris, sus call-to-action los resaltan en naranja. El contraste extremo no deja duda sobre cuál es la siguiente cosa que debes hacer. Nunca dependas únicamente del color, porque los usuarios daltónicos no verán el contraste. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  270. 270. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  271. 271. http://www.amway.com.mx/ recuperado el 20 de junio 2012
  272. 272. http://www.amway.com.mx/ recuperado el 20 de junio 2012
  273. 273. 8. Házlo grande Existe una regla en el diseño sobre no sobre-enfatizar. Ya se estableció que el color, la posición y el espacio negativo son tan importantes como el tamaño. Sin embargo, el tamaño juega un papel importante. Entre más grande el call-to-action, mayor oportunidad de que la noten. Mozilla tomó esta decisión en el homepage de Firefox donde su liga de descarga domina la página. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  274. 274. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  275. 275. 9. Ten un call-to-action en cada página Un call-to-action no debe limitarse al homepage. Cada página del sitio debe tener un call-to-action que guíe al usuario. Si el usuario llega a un callejón sin salida, abandonarán el sitio sin que logres tu objetivo. Tu call-to-action no necesita ser igual en cada página. Puedes ir presentando pequeñas acciones que guíen al usuario a tu objetivo (siempre contando el número de clics). 37 Signals entiende la importancia de tener un call-to-action en cada página. Al final de cada página del sitio Basecamp despliegan ligas a sus páginas de tour y registro. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  276. 276. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  277. 277. 10. Piensa en el ProcesoCompleto Finalmente, considera que sucedería si el usuario no responde a tu call- to-action. El resto del proceso debe pensarse con el mismo cuidado. Una advertencia: si requieres que los usuarios proporcionen sus datos personales, resiste la tentación de pedir información innecesaria. Los mercadotecnistas quieren tener datos demográficos. Aunque tiene su valor, pedir mucha información puede ahuyentar al usuario. Wordpress.com es un excelente ejemplo de cómo minimizar la cantidad de datos recolectados. Solamente piden la información requerida para iniciar un blog. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  278. 278. Traducción y modificación del Post del blog Designde Paul Boag del jueves 22 de enero 2009
  279. 279. Traducción y modificación del Post del blog Design de Paul Boag del jueves 22 de enero 2009
  280. 280. EjercicioRevisa el diseño delsitio que diseñaste parala mesa de regalos,asegurando que existaun call-to-actionefectivo
  281. 281. Accesibilidad
  282. 282. http://www.freedomscientific.com/products/fs/jaws-product-page.asp recuperado el 20 de junio 2012
  283. 283. http://www.ping.com recuperado el 29 de agosto 2010
  284. 284. Tips para Mayor Accesibilidad  Nombres representativos en archivos  Uso de alternate text  Uso de title  Evita “haz click aquí”  Alto contraste  Ajuste de tamaño de font  Subtítulos en videos  Versión texto en archivos de audio  Evitar flash  Versión lineal (de ser posible)
  285. 285. ¿Qué Hago conlas Formas?http://www.allabouttrucksil.com/content/usefulforms recuperado el 12 de junio 2012
  286. 286. RegistroDentro del proceso, solicita los datos de registro lo más tardeposible. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  287. 287. Evita solicitar datos inncesarios. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  288. 288. Apertura ProgresivaSolamente muestra al usuario la información relevante a latarea que realiza. La demás información proporciónala hastaque lo soliciten. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  289. 289. Formatos PermisivosLas opciones de búsqueda pueden llegar a ser complicadas sise manejan muchos criterios. Permitan que el usuario ingresedatos en varios formatos, y que la aplicación parsee los datos. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  290. 290. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  291. 291. Uso de BreadcrumbsMuestran el recorrido desde el home hasta la página actual.Son un estilo de navegación secundaria que permite a losusuarios familiarizarse con la estructura del sitio.Cada elemento debe estar ligado a su página correspondiente,excepto la página actual, que debe estar deshabilitada.El home no debe tener breadcrumb, no tiene caso. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  292. 292. http://www.officedepot.com/a/products/353080/HP-Color-Laser-Brochure-Paper-Glossy/ recuperado el 12 de junio 2012http://store.officedepot.com.mx/OnlineStore/SearchSKU.do?sku=8345 recuperado el 12 de junio 2012
  293. 293. Reduce la Forma http://experienceblogger.com/post/1081389180/design-for- conversion-checkout-page-redesign recuperado el 1 de junio 2012
  294. 294. http://www.alistapart.com/articles/signupforms
  295. 295. vshttp://www.alistapart.com/articles/signupforms
  296. 296. http://www.alistapart.com/articles/signupforms
  297. 297. http://www.alistapart.com/articles/signupforms
  298. 298. http://www.alistapart.com/articles/signupforms
  299. 299. Campos RequeridosDebe ser evidente qué campos son requeridos al momento dellenar una forma. Así, el usuario sabe qué necesita llenar para queno marque error.Lo ideal sería que solo se solicitaran los campos requeridos, losindispensables. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  300. 300. Pasos NecesariosEs un patrón muy utilizado cuando el usuario debe llenarinformación en múltiples pasos.Guía al usuario, le informa cuánto falta, y le indica en qué paso va. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  301. 301. Pasos Necesarios Normalmente los pasos se muestran horizontalmente y se conectan por flechas. Cada paso se marca con un número, y una breve descripción del objetivo de dicho paso. Debe haber un indicador de progreso, siempre en el mismo lugar, que indique donde están. Puede acompañarse por un wizard. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  302. 302. Planes de suscripciónEs un patrón muy utilizado cuando el usuario solicita un productoque se paga mensualmente. Debe proporcionarse: Nombre de plan, por ejemplo “Básico” o “Profesional” Precio de la suscripción y tiempo de validez Características del plan (el más barato tiene menos opciones) Botón de suscripción Mostrar los planes en orden http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  303. 303. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  304. 304. Controles de Posición (Hover)Cuando una interfaz tiene muchos elementos, pueden ocultarseelementos que aparezcan cuando el usuario pase sobre ellos. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  305. 305. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  306. 306. Resultados de búsqueda- ¿Búsqueda avanzada?- Cuál fue mi búsqueda- Cuántos resultados- Paginación- Cuántos resultados mostrar- Cómo mostrarlos Material cortesía de Ing. José Alfonso García Grajeda
  307. 307. http://www.toysrus.com/ recuperado el 29 de agosto 2010
  308. 308. http://www.target.com/ recuperado el 29 de agosto 2010
  309. 309. Aplicaciones Móviles http://www.socialnomics.net/2012/05/14/social-mobile-and-desktop- applications-for-the-digital-marketer/ recuperado el 12 de junio 2012
  310. 310. ¿Qué aplica en móviles?  Todos los conceptos manejados también aplican para dispositivos móviles  No hay que olvidar que debemos hacer uso de todo lo que el dispositivo brinde
  311. 311. http://www.emme.com.mx/home.htm recuperado el 12 de julio 2012
  312. 312.  Simplificar el proceso de llamada  Buscar y llamar a la sucursal más cercana  Avisar a los paramédicos sobre cuestiones de alergias y padecimientos preexistentes  Indicar a la ambulancia el hospital de preferencia  Avisar al contacto de emergenciahttp://www.iconfinder.com/icondetails/65064/128/call_phone_icon recuperado el 12 dejunio 2012
  313. 313. Referencias y Bibliografía Norman, Donald The Design of Everyday Things. Basic Books, 2002 Cooper, Alan, The Inmates are running the asylum, Why high-tech products drive us crazy and how to restore the sanity, SAMS, 2004 Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders Nielsen, Jacob y Tahir, Marie. Homepacge Usability: 50 Websites Deconstructed. New Riders, 2001 Hoekman, Robert Jr., Designing the Obvious, New Riders,2007 http://www.webcredible.co.uk/user-friendly-resources/web-usability/user-interface- design.shtml http://www.lukew.com/ff/entry.asp?1007 http://www.webcredible.co.uk/user-friendly-resources/web-usability/user-interface- design.shtml http://old.sigchi.org/cdg/cdg2.html http://knowledge.wpcarey.asu.edu/article.cfm?articleid=1409 http://www.tenfacesofinnovation.com/tenfaces/index.htm http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user- interface-design-in-web-applications/
  314. 314. Anexos
  315. 315. Nuestro estadode humoractual afectanuestrapercepción delas cosas.
  316. 316. Te invitan a asistir a la subasta, y la imagen está diseñada para llegarle a la gente.http://www.fundacionluca.org.mx/ recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  317. 317. Trata de despertar sentimientos en el usuario para que hagan donaciones diciendo que pueden ayudar a salvar a varios animales, oceanos, etc.http://www.greenpeace.org/mexico/es recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  318. 318. Al decir que puedes salvar la vida de niños con tu donación involucra sentimientos para influenciar la decision del usuario y lograr que donen.http://www.unicef.org/ recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  319. 319. Ni tan tan nimuy muy…Se necesitanretosalcanzables.
  320. 320. El reto aumenta conforme pasa el tiempo.Recuperado el 5 de octubre del 2011de http://www.onemorelevel.com/game/multitaskEjemplo de Cristina Treviño
  321. 321. Existe versión principiante y avanzado.http://www.kongregate.com recuperado el 5 de octubre del 2011Ejemplo de Erick Marroquín
  322. 322. Preferimos yesperamostener controlsobre lascosas.
  323. 323. Informa que puedes crear tu propia pagina web, lo que hace que el usuario se sienta en control.http://www.wix.com recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  324. 324. La descripción le informa al usuario que podrá modificar y editar las imágenes como el quiera, lo que le da ese sentimiento de control.http://www.picnik.com recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  325. 325. La informaciónprocesada yorganizada serecuerdamejor.
  326. 326. Las noticias y artículos están separados por regiones/ubicaciones lo que hace mas fácil encontrar un evento.http://www.cnn.com/US/ recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  327. 327. Luchamos porganar cosasque no puedencompartirse.
  328. 328. http://www.foursquaregame.com/leaderboards.php recuperado el 25 de octubre 2011
  329. 329. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  330. 330. Explica tusideasutilizandometáforas.Compara conalgo conocido.
  331. 331. Los iconos representan cualidades de la computadora.http://www.apple.com/macbookpro/features.html recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  332. 332. Hace una representación de las secciones de la pagina con iconos que le corresponden y son fáciles de entender.http://mx.barbie.com recuperado el 9 octubre 2011Ejemplo de Andrea Rodríguez, Karla Díaz y Marcela Chapa
  333. 333. Utiliza color,tamaño y formapara llamar laatención.El comportamientoirregular, como une-mail deadvertencia,también llama laatención.
  334. 334. Conforme a toda la paleta de colores de la página, una notificación contrasta de los demás elementos para que pongas atención a lo que interesa.http://www.facebook.com recuperado el 20 de octubre 2011Ejemplo de Luisa Aragón, Diego Jiménez y Oscar Buentello
  335. 335. El contraste de colores define donde se encuentra el usuario dentro del menú.http://www.americanairlines.ie/intl/ie/index.jsp?locale=en_IErecuperado el 20 de octubre 2011Ejemplo de Luisa Aragón, Diego Jiménez y Oscar Buentello
  336. 336. La percepcióndel tiempo essubjetiva“5 minutos…pero debajo delagua”.
  337. 337. El reloj va avanzando por ciclos, conforme se carga la página y el personaje está animado como distracción mientras esperas.http://www.escriba.es/base_en.html recuperado el 9 octubre 2011Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez
  338. 338. En esta pagina que sirve para editar fotos, conforme se va cargando, avanza la barra, y debajo de ella se muestran diferentes frases para distraer al usuario al ir soltándole la mente, mientras lee la frase y se imagina cosas.http://www.picnik.com recuperado el 9 octubre 2011Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez
  339. 339. Mientras se carga la pagina aparece la silueta de Mickey, y una cuenta regresiva con unas barritas que se van llenando.http://www.home.disneylatino.com/juegos/html/index?id=251837 recuperado el 9 octubre 2011Ejemplo de Cecilia de la Garza. Elisa Martínez y Anadel Velasquez
  340. 340. Al introducirnuevosconceptos,utilizaelementos conlos que elusuario estéfamiliarizado.
  341. 341. No hay nada más familiar que hablar.http://www.google.com/ recuperado el 20 de octubre 2011
  342. 342. El “like” ya es usado por muchos sitios, debido a que los usuarios ya están familiarizados con su significadohttp://www.youtube.com/ recuperado el 20 de octubre 2011Ejemplo de Antonio Sánchez, Mariam Elizondo y José Luis Reyes
  343. 343. Los usuarios que usan iTunes ya estarán familiarizados con el formato que ofrece Grooveshark en su página.http://www.grooveshark.com/ recuperado el 20 de octubre 2011Ejemplo de Antonio Sánchez, Mariam Elizondo y José Luis Reyes
  344. 344. Las personas que leen webcomics están familiarizados con estos botones, que son para la navegación de archivos. Están presentes en casi todas las páginas de comics. Los que no las han visitado, pueden entender que son como los botones de un control remoto.http://www.kiwiblitz.com/ recuperado el 20 de octubre 2011Ejemplo de Antonio Sánchez, Mariam Elizondo y José Luis Reyes
  345. 345. Nos gusta queun sistema querespondainmediatamentea nuestrasacciones.
  346. 346. Youtube añade una lista de reproducción con videos relacionados.http://www.youtube.com recuperado el 20 de octubre 2011Ejemplo de Alejandro Hernández, Rogelio Rodríguez y Lucia Elizondo
  347. 347. Refleja la reacción rápida o lenta del jugador.http://www.minijuegostop.com.mx/items/.../0/1556_reaccion-rapida/ recuperado el 5 de octubre de 2011Ejemplo de Azael Alejandro Muñoz
  348. 348. El juego refleja a través de un personaje los movimientos que el jugador transmita.http://quierobits.com/wp-content/uploads/2010/10/500x_kinect_specs.jpg recuperado el 5 de cotubre 2011Ejemplo de Azael alejandro Muñoz
  349. 349. Sentimos elcompromiso de serrecíprocos cuandonos regalan algo.Si serviciossimilares tambiénlo regalan,entonces no es unregalo, es algoesperado.
  350. 350. http://www.facebook.com recuperado el 25 de octubre 2011
  351. 351. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  352. 352. http://apps.facebook.com/bakinglife/?ref=bookmarks&fb_source=bookmarks_apps&fb_bmpos=1_ recuperado el 27 de pctubre 2011Ejemplo de Adrián Rivera
  353. 353. Algo de humorse recuerdamás fácilmente.
  354. 354. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  355. 355. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  356. 356. La frase que te invita a cambiar de página es humorística.http://senorgif.memebase.com recuperado el 9 de octubre del 2011Ejemplo de Andrea Gómez, Christian González y Hugo Villanueva
  357. 357. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders
  358. 358. Firefox recuperado el 25 de septiembre de 2011
  359. 359. Anunciopara uninsecticida. http://forum.xcitefun.net/creative-animal-ads-romantic-fm-t12235.html recuperado el 14 de octubre 2011
  360. 360. Se trata de ofrecer al cliente un producto de una manera cómica para llamar su atención y que el cliente se interese y lo recuerde por el comercial.http://www.sopitas.com/site/100015-volkswagen-para-star-wars/ recuperado el 14 de octubre 2011Ejemplo de Carlos Alejandro Loza
  361. 361. Una empresaque vendepollo utilizavacas parapromocionarque consumassus productos. http://www.chick-fil-a.com/Cows/Campaign-History recuperado el 14 de octubre 2011 Ejemplo de Carlos Alejandro Loza
  362. 362. Explicación: la paginade ESPN utiliza estaimagen como quepara demostrar queestarás viendomucho su canal quehasta serás parte delsofá de tanto estarsentado. http://espndeportes.espn.go.com/?cc=5200 recuperado el 14 de octubre 2011 Ejemplo de Carlos Alejandro Loza
  363. 363. Es másprobable queescojamoscuandotenemos pocasopciones.
  364. 364. Vemos que encierran el menú en 4 opciones para que sea más fácil de navegar© 2011 Carbonmade, LLC, Recuperado el 10 de octubre del 2011 de la página:http://www.nickjrboost.com/index.php?source=282Ejemplo de Marliesse Pérez, Alejandra Muñoz y Carlos Vela
  365. 365. Del lado contrario esta friend requests, inbox y notifications ya Tu perfil y home ya que son que son las 3 acciones que revisas las dos cosas que más ves cuando entras a facebook Facebook a cambiado mucho y ahora agrupa las opciones para hacerlo más sencilloFacebook. Recuperado el 10 de octubre del 2011 de la página: https://www.facebook.comEjemplo de Marliesse Pérez, Alejandra Muñoz y Carlos Vela
  366. 366. Pocas opciones a elegir, pero las más importantes. Fácil de encontrarlas y estratégicamente acomodadas.http://www.irontoiron.com/ recuperado el 5 de octubre de 2011Ejemplo de Juan Antonio Córdova
  367. 367. Anderson, Stephen (2011). Seductive Interaction Design. California: New Riders

×