Diseño para no diseñadores

1,412 views

Published on

Qué conceptos de diseño deben aplicarse a los sitios web para mejorar la usabilidad.

Published in: Design

Diseño para no diseñadores

  1. 1. Diseño paraNo-DiseñadoresMarta Sylvia del Ríomdelrio@udem.edu.mx
  2. 2. Elementos de laexperiencia del usuario http://julian.missig.org/
  3. 3. Agenda 150 Los conceptos básicos del diseño y su aplicación en la web120 Tips sobre el manejo de la tipografía, imágenes y retícula: del print a la web 30 Color y accesibilidad para el diseño de un sitio web 60 Jerarquización y diseño basado en el "call to-action".30 Innovación en las interfaces 90 Ejercicios prácticos de solución de problemas de diseño web
  4. 4. El espacio es un recurso limitado…Que se acaba rápidamente
  5. 5. Homepage usability: 50 websites deconstructed
  6. 6. Homepage usability: 50 websites deconstructed
  7. 7. Homepage usability: 50 websites deconstructed
  8. 8. http://www.sabritas.com.mx/index2.html
  9. 9. http://www.pwc.com/mx/es/index.jhtml
  10. 10. http://www.gelattina.com/
  11. 11. http://www.crystalwater.com.mx/index.php
  12. 12. http://www.target.com/
  13. 13. http://www.pocketberry.com/2009/03/03/weatherbug-for-blackberry-storm-free-download/
  14. 14. 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
  15. 15. Principios del Diseño¦ Proximidad¦ Alineación¦ Repetición¦ Contraste¦ Tipografía
  16. 16. Proximidad
  17. 17. 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
  18. 18. The Non-Designer’s Design Book
  19. 19. The Non-Designer’s Design Book
  20. 20. The Non-Designer’s Design Book
  21. 21. http://www.crystalwater.com.mx/index.php
  22. 22. …y podemos continuar
  23. 23. Alineación
  24. 24. 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
  25. 25. The Non-Designer’s Design Book
  26. 26. The Non-Designer’s Design Book
  27. 27. õö õö Como Perros y Gatos Como Perros y Gatos Veterinaria Veterinaria The Non-Designer’s Design BookPirineos 212 – Paseo de Cumbres - Tel. 82151206 Pirineos 212 – Paseo de Cumbres - Tel. 82151206
  28. 28. õ Como Perros y Gatos VeterinariaComo Perros y Gatos Veterinaria The Non-Designer’s Design Book Pirineos 212Paseo de Cumbres Tel. 82151206 Pirineos 212 – Paseo de Cumbres - Tel. 82151206
  29. 29. The Non-Designer’s Design Book
  30. 30. The Non-Designer’s Design Book
  31. 31. http://app.time.com/blackberry.php
  32. 32. http://venturebeat.com/2010/10/15/new-york-times-updates-ipad-app-with-full-content-free-until-2011/
  33. 33. ejercicio
  34. 34. The Non-Designer’s Design Book
  35. 35. Estructura de la página Una buena estructura crea una navegación sencilla e intuitiva. http://www.bbc.co.uk/ http://wordpress.com/ http://www.cnn.com http://www.britneyspears.com/ http://www.whitehouse.gov/ P http://www.disney.com http://www.giorgioarmani.com O Fuentes: http://designingwebinterfaces.com Ing. José Alfonso García Grajeda
  36. 36. http://www.pinturasosel.com/
  37. 37. ejercicio
  38. 38. Repetición
  39. 39. 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
  40. 40. Los Encabezados son un Comienzo… The Non-Designer’s Design Book
  41. 41. The Non-Designer’s Design Book
  42. 42. Repite unElemento
  43. 43. http://www.imagen.com.mx/
  44. 44. http://www.oxxo.com/
  45. 45. David Rivers on Visual design of Web Apps 2:14http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!
  46. 46. David Rivers on Visual design of Web Apps 2:14http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!
  47. 47. Contraste
  48. 48. https://www.amway.com.mx/Store/Catalogue.aspx?show=PrdsList&IC=1&C=FB&line=F&NavM=N
  49. 49. http://www.ocregister.com/articles/parking-262014-brea-application.html
  50. 50. Cancelar
  51. 51. Tipografía
  52. 52. 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)
  53. 53. 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 resaltan.§ La tierra es de quien la trabaja§ Mañana nos vamos de picnic§ La actitud ante todo
  54. 54. Lecturabilidad
  55. 55. 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 Ing. José Alfonso García Grajeda
  56. 56. 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 Ing. José Alfonso García Grajeda
  57. 57. Interlineado Dependiendo de la tipografía, dejar un espacio adecuado entre las líneas de texto permite que el contenido se veas más limpio, eliminando la saturación.Ing. José Alfonso García Grajeda
  58. 58. Ancho de columna El espacio total de la columna de texto debe ser adecuado para la lectura. Una renglón muy largo hará que la lectura sea cansada y el usuario pueda llegar a perderse entre una línea y otra. ¿Ancho óptimo? 52–78 caracteres (incluyendo espacios)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
  60. 60. Manejo de puntuaciónListas. No colocar espacio en viñetas o números. Ing. José Alfonso García Grajeda
  61. 61. Manejo de puntuaciónComillas. Deben estar fuera del margen del texto. 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) Ing. José Alfonso García Grajeda
  63. 63. Peso y tamaño tipográfico Ing. José Alfonso García Grajeda
  64. 64. Ing. José Alfonso García Grajeda Peso y tamaño tipográfico
  65. 65. Familias Tipográficas
  66. 66. Imágenes
  67. 67. http://www.lanacional.net/
  68. 68. http://www.uncrate.com/
  69. 69. http://www.uncrate.com/
  70. 70. http://www.uncrate.com/
  71. 71. http://www.uncrate.com/
  72. 72. http://www.ties.com/
  73. 73. http://www.ties.com/
  74. 74. http://www.made.com/
  75. 75. http://www.made.com/
  76. 76. http://www.harrywinston.com/
  77. 77. http://www.harrywinston.com/
  78. 78. http://www.harrywinston.com/
  79. 79. http://www.zappos.com/womens-pumps
  80. 80. http://www.zales.com/
  81. 81. http://www.louisvuitton.com/
  82. 82. http://www.louisvuitton.com/
  83. 83. http://www.cufflinks.com
  84. 84. http://www.cufflinks.com
  85. 85. http://www.victorinox.com/
  86. 86. http://www.leica.com/
  87. 87. http://www.leica.com/
  88. 88. http://www.moben.co.uk/
  89. 89. http://www.bang-olufsen.com/
  90. 90. La GenteDistrae laAtención delProducto
  91. 91. Anuncio de SunSilk antes del estudio. Anuncio de SunSilk después del estudio.BunnyFoot study. BunnyFoot study.
  92. 92. Mapa de calor de Eye-tracking de un bebé mirando directamentehacia nosotros. UsableWorld study. Ahora el bebé mirando hacia el contenido. UsableWorld study.
  93. 93. Uso de Fotografías Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
  94. 94. ¿Cómo reacciona el usuarioante una foto?§ Algunas fotos se ignoran completamente§ Otras son tratadas como contenido y son escrutinadas
  95. 95. Fotos de personas Si son personas reales, se revisan P Pasaron más tiempo revisando las fotos que el contenido O Si son fotos genéricas, se ignoran
  96. 96. Fotos de productos P Siempre son revisadas Los thumbnails de libreros se revisaron más intensamente que los de televisiones. Los usuarios se fijaron un 82% del tiempo en las descripciones de las televisiones y solamente el 18% en las fotos.
  97. 97. Fotos Grandes de productos P Cuando son solicitadas, se revisan Lo ideal es presentar una imagen de al menos el doble de tamaño
  98. 98. Sitios personales P Los usuarios buscan a la persona detrás del sitio. Revisan fotos, textos Revisen los tips de usabilidad para blogs.
  99. 99. Conclusiones “ Pay attention to information- carrying images that show content thats relevant to the task at hand. And users ignore purely decorative ” image. Jakob Nielsen
  100. 100. Formatos de Imagen
  101. 101. 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 Ing. José Alfonso García Grajeda
  102. 102. GIF – 32 BitsImagen 1024 x 768204 Kb Ing. José Alfonso García Grajeda
  103. 103. GIF – 64 BitsImagen 1024 x 768283 Kb Ing. José Alfonso García Grajeda
  104. 104. GIF – 128 BitsImagen 1024 x 768361 Kb Ing. José Alfonso García Grajeda
  105. 105. GIF – 256 BitsImagen 1024 x 768459 Kb Ing. José Alfonso García Grajeda
  106. 106. Usos del formato GIF Ing. José Alfonso García Grajeda
  107. 107. JPG – Joint Photographic ExpertsGroupEl 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 Ing. José Alfonso García Grajeda
  108. 108. JPG – Low 0%Imagen 690 x 76838.2 Kb Ing. José Alfonso García Grajeda
  109. 109. JPG – Medium 50%Imagen 690 x 768108 Kb Ing. José Alfonso García Grajeda
  110. 110. JPG – High 100%Imagen 690 x 768294 Kb Ing. José Alfonso García Grajeda
  111. 111. Usos del formato JPG Ing. José Alfonso García Grajeda
  112. 112. 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 Ing. José Alfonso García Grajeda
  113. 113. PNG – 8 BitImagen 1024 x 768108 Kb Ing. José Alfonso García Grajeda
  114. 114. PNG – 64 BitImagen 1024 x 768894 Kb Ing. José Alfonso García Grajeda
  115. 115. Usos del formato PNG Ing. José Alfonso García Grajeda
  116. 116. Usos del formato PNG Ing. José Alfonso García Grajeda
  117. 117. Transparencia PNG vs GIF Ing. José Alfonso García Grajeda
  118. 118. Resolución y peso PNG vs JPGPNG - 64 Bit JPG – Medium 50%Imagen 1024 x 768 Imagen 1024 x 768894 Kb 152 Kb Ing. José Alfonso García Grajeda
  119. 119. ¿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 Ing. José Alfonso García Grajeda
  120. 120. Imagen digital VS imagen impresaLos puntos por pulgada (ppp) del inglés dots per inch (DPI) es una unidad demedida para resoluciones de impresión, concretamente, el número depuntos individuales de tinta que una impresora o tóner puede producir enun espacio lineal de una pulgada. (Fuente Wikipedia)¿Cuántos puntos por pulgada utilizo?WEB:72 DPIImpreso:300 DPI Ing. José Alfonso García Grajeda
  121. 121. Imagen digital VS imagen impresaWEB: 72 DPI Impreso: 300 DPI300 x 300 pixeles 1250 x 1250 pixeles Ing. José Alfonso García Grajeda
  122. 122. Iconografía ¿Qué debemos considerar? - Resoluciones: 128 x 128px | 48 x 48px | 32 x 32px | 16 x 16px - Representar su función mediante metáforas - Ser consistente en su uso y diseño (www.yahoo.com) http://www.iconcool.com/ http://www.istockphoto.com/ Ing. José Alfonso García Grajeda
  123. 123. Iconografía:Pocas Diferencias en el Diseño de IconosEs necesario marcar diferencias en la iconografía en función deltamaño o resolución de los íconos. Ing. José Alfonso García Grajeda
  124. 124. Iconografía:No Colocar Muchos Elementos en un IconoEntre más simple, mejor.Muchos elementos en los íconossaturan la imagen y se pierde el mensaje. Ing. José Alfonso García Grajeda
  125. 125. Iconografía:No Usar Elementos InnecesariosEliminar elementos que pueden ser asumidos o que no son indispensables. Ing. José Alfonso García Grajeda
  126. 126. Iconografía:Unificar el Estilo de los Grupos de IconosConsistencia en paleta de colores, perspectiva, tamaño, técnica de dibujo. Ing. José Alfonso García Grajeda
  127. 127. Iconografía:Reemplazar Metáforas ya Conocidas y AdoptadasNo reemplazar elementos con los que los usuarios están ya familiarizados. Ing. José Alfonso García Grajeda
  128. 128. Iconografía:No Utilizar Imágenes de Controles o Interfaces RealesUtilizar checkboxes, botones u otros elementos de las interfaces puedeconfundir a los usuarios. Ing. José Alfonso García Grajeda
  129. 129. Iconografía:Texto dentro de IconosNo utilizar texto dentro de los elementos iconográficos. Ya que enresoluciones pequeñas, el texto no podrá ser leído. Ing. José Alfonso García Grajeda
  130. 130. Buscadores de iconosIconfinderIconletSets de iconosFamfamfamPinvokeSweetieIconFactoryTango Icon LibraryGlyphlabGreyscaleRecopilaciones de iconosRecopilación de IconfinderFree icons web Ing. José Alfonso García Grajeda
  131. 131. Color
  132. 132. Mezcla de color aditivaComposición del color entérminos de la intensidadde los colores primarioscon que se forma:rojo, verde y azul Ing. José Alfonso García Grajeda
  133. 133. El Color en Pantalla§ Cada pixel está compuesto de tres sub-pixeles (colores primarios), cada uno de estos brilla con menor o mayor intensidad.§ La gama de colores de la Web consiste en 216 combinaciones. #00 #33 #66 #99 #CC #FF 0 51 102 153 204 255 0% 20% 40% 60% 80% 100% Cubo de dimensión seis Ing. José Alfonso García Grajeda
  134. 134. 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 Ing. José Alfonso García Grajeda
  135. 135. Colores cálidos y fríosCálidosPasiónFelicidadEntusiasmoEnergíaFríosCalmaProfesionalismo Ing. José Alfonso García Grajeda
  136. 136. 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/ Ing. José Alfonso García Grajeda
  137. 137. 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/ Ing. José Alfonso García Grajeda
  138. 138. entre colores Relacioneshttp://gdbasics.com/index.php?s=color
  139. 139. Combinaciones de Colores
  140. 140. 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 Ing. José Alfonso García Grajeda
  141. 141. Utilización de Colores
  142. 142. Utilización de Colores Color para textos y flechas Color para fillers, separadores… NUNCA para botones pues parecen deshabilitados Color principal del sitio Color contrastante para el call-to-action Color secundario, para iconos, viñetas, subtítulos…
  143. 143. El ContrasteLa diferencia relativa enintensidad entre un punto deuna imagen y sus alrededoresBrillo = Brillo CONTRASTE NULO Ing. José Alfonso García Grajeda
  144. 144. ejercicio
  145. 145. 10 técnicas para un‘Call To Action’efectivoTraducción y modificación delPost del blog Designde Paul Boagdel jueves 22 de enero 2009
  146. 146. 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
  147. 147. ¿Cuál es un buen conversion rate? 3%
  148. 148. 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
  149. 149. 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.”
  150. 150. 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.
  151. 151. 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.
  152. 152. 4. Utiliza un 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.
  153. 153. 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.
  154. 154. Human Factors, UPA 2008
  155. 155. 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.
  156. 156. 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.
  157. 157. 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.
  158. 158. 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.
  159. 159. 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.
  160. 160. Accesibilidad
  161. 161. www.ping.com
  162. 162. www.ping.com
  163. 163. http://royal.pingdom.com/2010/10/27/web-designers-keep-that-page-size-down
  164. 164. Contraste y accesibilidad¿Cómo puedo evaluar si el contraste de colores es adecuado?http://www.accesskeys.org/tools/color-contrast.htmlhttp://gmazzocato.altervista.org/colorwheel/wheel.php Ing. José Alfonso García Grajeda
  165. 165. 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)
  166. 166. Call-to-action Web Copy!!!¿Qué dice la experiencia?
  167. 167. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  168. 168. 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/
  169. 169. Evita solicitar datos inncesarios. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  170. 170. 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/
  171. 171. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  172. 172. 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/
  173. 173. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  174. 174. Acciones EvidentesLas formas simples normalmente permiten una sola acción:“compra”, “regístrate”, “envía”, “guarda”… El usuario sabedónde dar click al terminar ese paso.Deben distinguirse las acciones primarias de secundarias, estoes, el call-to-action debe ser evidente. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  175. 175. Es importante distinguir las cciones principales de lassecundarias, que desvían del objetivo. Hay dos maneras dedistinguirlas:§ Utilizar un color que destaque para la acción principal, y grises para las acciones secundarias.§ Manejar la acción principal en botón, y las secundarias en liga. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  176. 176. 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/
  177. 177. RegistroEl registro resuelve tres problemas relacionados:§ Cierto contenido sólo debe estar disponible para usuarios registrados§ Los usuarios deben ingresar información personal reiteradamente§ Los usuarios deben accesar información personalizadaLa solución es registrarlo y utilizar la información. A pesar de losbeneficios, no es una tarea que guste, hay que solicitar solo lainformación indispensable.Por otro lado, conviene dejar muy evidente todos los beneficiosque recibirán al registrarse. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
  178. 178. http://www.alistapart.com/articles/signupforms
  179. 179. vshttp://www.alistapart.com/articles/signupforms
  180. 180. http://www.alistapart.com/articles/signupforms
  181. 181. http://www.alistapart.com/articles/signupforms
  182. 182. http://www.alistapart.com/articles/signupforms
  183. 183. http://www.alistapart.com/articles/signupforms
  184. 184. http://experienceblogger.com/post/1081389180/design-for-conversion-checkout-page-redesign
  185. 185. http://experienceblogger.com/post/1081389180/design-for-conversion-checkout-page-redesign
  186. 186. 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/
  187. 187. 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/
  188. 188. Normalmente los pasos se muestran horizontalmente y seconectan por flechas.Cada paso se marca con un número, y una breve descripción delobjetivo 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.
  189. 189. 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/
  190. 190. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  191. 191. 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/
  192. 192. http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
  193. 193. Otros
  194. 194. ¿Cómo ven mi sitio web? Ver:_Nielsen Norman Group Report
  195. 195. ¿Qué debo tomar en cuenta?• Sistema operativo: Windows XP, Vista, 7. MAC-OS• Navegador web: Firefox, Internet Explorer, Safari, Chrome• Resolución de pantalla: 800 x 600, 1024 x 768… ¿wide screen?• Versión móvil: ¿Hay necesidad de crear una versión lineal?• Elementos interactivos: Flash, JavaScript, Java Applets Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  196. 196. Versiones de impresiónFacilitar versiones de impresión que eliminen elementos no deseados http://www.eluniversal.com.mx Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  197. 197. Estandarizar funcionalidadesMisma acción / función = mismo estilo http://www.sony.com Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  198. 198. Master / detail Acceso directo a funcionalidades que permiten al usuario navegar sin perder la navegación. Fuente:shttp://designingwebinterfaces.com http://www.google.com/analytics/apps/results?category=Content%20Management
  199. 199. GetSatisfaction.com utiliza tabs verticales en vez de radio buttons paraidentificar el tipo de mensaje del usuario. http://www.patternry.com/p=stacked-tabs/
  200. 200. http://www.patternry.com/p=stacked-tabs/http://www.google.com/finance/st...
  201. 201. http://www.patternry.com/p=stacked-tabs/http://www.carmax.com/
  202. 202. El input depende de la selección http://www.patternry.com/p=stacked-tabs/ http://www.stumbleupon.com/
  203. 203. http://www.patternry.com/p=stacked-tabs/http://sites.google.com/site/sites/
  204. 204. http://www.patternry.com/p=stacked-tabs/https://www.getdropbox.com/tour#2
  205. 205. 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 Fuente: http://designingwebinterfaces.com Ing. José Alfonso García Grajeda
  206. 206. http://www.toysrus.com/
  207. 207. http://www.target.com/
  208. 208. EscribirUtilizar encabezados evidentesEvitar grandes bloques de texto tratando de integrar listas con viñetas o connúmeros, tablas y diagramas. Los encabezados deben ser concretos yvisibles, invitar a una acción y brindar una idea general del contenido. http://www.officemax.com http://www.ted.com Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  209. 209. Escribir Simplificar los textos y palabras El lenguaje debe simplificarse lo más posible, eliminando adjetivos, juicios de valor, y ambigüedades. De igual forma se deben evitar tecnicismos, abreviaturas o conceptos que quizás para el dueño del sitio son importantes, pero para el usuario no lo son.Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  210. 210. Escribir Usar palabras y oraciones precisas Palabras que pueden ser ambiguas Daniel Cassany (2002) explica que: • Se deben utilizar palabras que se refieran a objetos o sujetos tangibles, es decir palabras concretas. • Se deben evitar palabras que designen conceptos o cualidades difusos, es decir palabras abstractas.Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  211. 211. Escribir Eliminar palabras innecesarias Existen grupos de palabras que se pueden reducir mediante sinónimos, esto evitará palabras redundantes que pueden hacer más denso el texto de una página del portal para el usuario.Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  212. 212. EscribirSeparar el texto en segmentosAyudar a los usuarios para “escanear” los contenidos sin la necesidad de leertodo palabra por palabra.http://www.whitehouse.gov Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  213. 213. EscribirOraciones, encabezados y enlaces con palabras claveIndicar a los usuarios qué van a encontrar si deciden seguir leyendo o dar clicen un enlace.http://es.wikipedia.org/ Ing. José Alfonso García Grajeda Prohibido su uso sin permiso del autor
  214. 214. http://www.pocketberry.com/2009/03/03/weatherbug-for-blackberry-storm-free-download/
  215. 215. http://iordanov.info/projecs_mentormate_MigraineMate.html
  216. 216. http://www.soft-gadgets.com/telenav- http://symbianism.blogspot.com/2009/08/free-mobile-gps-navigator-for-blackberry-storm/ maps-and-navigation-metro.html
  217. 217. 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)
  218. 218. 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
  219. 219. http://www.amazon.com/Diamond-Engagement-Rings-Loose-Diamonds
  220. 220. http://www.smartmoney.com/map-of-the-market/
  221. 221. http://www.panic.com/goods/
  222. 222. http://www.tenbyten.org/
  223. 223. http://www.lukew.com/ff/entry.asp?1007
  224. 224. Design Decision: A New Signup Form
  225. 225. Crítica de Sitios
  226. 226. ttp://www.target.com/Home-%C3%A9cor/b/ref=nav_t_spc_7_4?ie=UTF8&ode=1038616
  227. 227. http://www.gerber.com.mx/
  228. 228. 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§ 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/

×