• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Diseño para no diseñadores
 

Diseño para no diseñadores

on

  • 954 views

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

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

Statistics

Views

Total Views
954
Views on SlideShare
954
Embed Views
0

Actions

Likes
3
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diseño para no diseñadores Diseño para no diseñadores Presentation Transcript

    • Diseño paraNo-DiseñadoresMarta Sylvia del Ríomdelrio@udem.edu.mx
    • Elementos de laexperiencia del usuario http://julian.missig.org/
    • 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
    • El espacio es un recurso limitado…Que se acaba rápidamente
    • Homepage usability: 50 websites deconstructed
    • Homepage usability: 50 websites deconstructed
    • Homepage usability: 50 websites deconstructed
    • http://www.sabritas.com.mx/index2.html
    • http://www.pwc.com/mx/es/index.jhtml
    • http://www.gelattina.com/
    • http://www.crystalwater.com.mx/index.php
    • http://www.target.com/
    • http://www.pocketberry.com/2009/03/03/weatherbug-for-blackberry-storm-free-download/
    • 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
    • Principios del Diseño¦ Proximidad¦ Alineación¦ Repetición¦ Contraste¦ Tipografía
    • Proximidad
    • 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
    • The Non-Designer’s Design Book
    • The Non-Designer’s Design Book
    • The Non-Designer’s Design Book
    • http://www.crystalwater.com.mx/index.php
    • …y podemos continuar
    • Alineación
    • 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
    • The Non-Designer’s Design Book
    • The Non-Designer’s Design Book
    • õö õö 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
    • õ 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
    • The Non-Designer’s Design Book
    • The Non-Designer’s Design Book
    • http://app.time.com/blackberry.php
    • http://venturebeat.com/2010/10/15/new-york-times-updates-ipad-app-with-full-content-free-until-2011/
    • ejercicio
    • The Non-Designer’s Design Book
    • 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
    • http://www.pinturasosel.com/
    • ejercicio
    • Repetición
    • 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
    • Los Encabezados son un Comienzo… The Non-Designer’s Design Book
    • The Non-Designer’s Design Book
    • Repite unElemento
    • http://www.imagen.com.mx/
    • http://www.oxxo.com/
    • David Rivers on Visual design of Web Apps 2:14http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!
    • David Rivers on Visual design of Web Apps 2:14http://www.youtube.com/watch?v=TN-qwLzKD0&feature=player_embedded#!
    • Contraste
    • https://www.amway.com.mx/Store/Catalogue.aspx?show=PrdsList&IC=1&C=FB&line=F&NavM=N
    • http://www.ocregister.com/articles/parking-262014-brea-application.html
    • Cancelar
    • Tipografía
    • 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)
    • 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
    • Lecturabilidad
    • 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
    • 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
    • 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
    • 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
    • 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
    • Manejo de puntuaciónListas. No colocar espacio en viñetas o números. Ing. José Alfonso García Grajeda
    • Manejo de puntuaciónComillas. Deben estar fuera del margen del texto. Ing. José Alfonso García Grajeda
    • 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
    • Peso y tamaño tipográfico Ing. José Alfonso García Grajeda
    • Ing. José Alfonso García Grajeda Peso y tamaño tipográfico
    • Familias Tipográficas
    • Imágenes
    • http://www.lanacional.net/
    • http://www.uncrate.com/
    • http://www.uncrate.com/
    • http://www.uncrate.com/
    • http://www.uncrate.com/
    • http://www.ties.com/
    • http://www.ties.com/
    • http://www.made.com/
    • http://www.made.com/
    • http://www.harrywinston.com/
    • http://www.harrywinston.com/
    • http://www.harrywinston.com/
    • http://www.zappos.com/womens-pumps
    • http://www.zales.com/
    • http://www.louisvuitton.com/
    • http://www.louisvuitton.com/
    • http://www.cufflinks.com
    • http://www.cufflinks.com
    • http://www.victorinox.com/
    • http://www.leica.com/
    • http://www.leica.com/
    • http://www.moben.co.uk/
    • http://www.bang-olufsen.com/
    • La GenteDistrae laAtención delProducto
    • Anuncio de SunSilk antes del estudio. Anuncio de SunSilk después del estudio.BunnyFoot study. BunnyFoot study.
    • Mapa de calor de Eye-tracking de un bebé mirando directamentehacia nosotros. UsableWorld study. Ahora el bebé mirando hacia el contenido. UsableWorld study.
    • Uso de Fotografías Jakob Nielsens Alertbox, November 1, 2010: Photos as Web Content
    • ¿Cómo reacciona el usuarioante una foto?§ Algunas fotos se ignoran completamente§ Otras son tratadas como contenido y son escrutinadas
    • 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
    • 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.
    • Fotos Grandes de productos P Cuando son solicitadas, se revisan Lo ideal es presentar una imagen de al menos el doble de tamaño
    • Sitios personales P Los usuarios buscan a la persona detrás del sitio. Revisan fotos, textos Revisen los tips de usabilidad para blogs.
    • 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
    • Formatos de Imagen
    • 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
    • GIF – 32 BitsImagen 1024 x 768204 Kb Ing. José Alfonso García Grajeda
    • GIF – 64 BitsImagen 1024 x 768283 Kb Ing. José Alfonso García Grajeda
    • GIF – 128 BitsImagen 1024 x 768361 Kb Ing. José Alfonso García Grajeda
    • GIF – 256 BitsImagen 1024 x 768459 Kb Ing. José Alfonso García Grajeda
    • Usos del formato GIF Ing. José Alfonso García Grajeda
    • 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
    • JPG – Low 0%Imagen 690 x 76838.2 Kb Ing. José Alfonso García Grajeda
    • JPG – Medium 50%Imagen 690 x 768108 Kb Ing. José Alfonso García Grajeda
    • JPG – High 100%Imagen 690 x 768294 Kb Ing. José Alfonso García Grajeda
    • Usos del formato JPG Ing. José Alfonso García Grajeda
    • 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
    • PNG – 8 BitImagen 1024 x 768108 Kb Ing. José Alfonso García Grajeda
    • PNG – 64 BitImagen 1024 x 768894 Kb Ing. José Alfonso García Grajeda
    • Usos del formato PNG Ing. José Alfonso García Grajeda
    • Usos del formato PNG Ing. José Alfonso García Grajeda
    • Transparencia PNG vs GIF Ing. José Alfonso García Grajeda
    • 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
    • ¿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
    • 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
    • Imagen digital VS imagen impresaWEB: 72 DPI Impreso: 300 DPI300 x 300 pixeles 1250 x 1250 pixeles Ing. José Alfonso García Grajeda
    • 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
    • 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
    • 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
    • Iconografía:No Usar Elementos InnecesariosEliminar elementos que pueden ser asumidos o que no son indispensables. Ing. José Alfonso García Grajeda
    • 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
    • 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
    • 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
    • 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
    • Buscadores de iconosIconfinderIconletSets de iconosFamfamfamPinvokeSweetieIconFactoryTango Icon LibraryGlyphlabGreyscaleRecopilaciones de iconosRecopilación de IconfinderFree icons web Ing. José Alfonso García Grajeda
    • Color
    • 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
    • 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
    • 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
    • Colores cálidos y fríosCálidosPasiónFelicidadEntusiasmoEnergíaFríosCalmaProfesionalismo Ing. José Alfonso García Grajeda
    • 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
    • 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
    • entre colores Relacioneshttp://gdbasics.com/index.php?s=color
    • Combinaciones de Colores
    • 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
    • Utilización de Colores
    • 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…
    • El ContrasteLa diferencia relativa enintensidad entre un punto deuna imagen y sus alrededoresBrillo = Brillo CONTRASTE NULO Ing. José Alfonso García Grajeda
    • ejercicio
    • 10 técnicas para un‘Call To Action’efectivoTraducción y modificación delPost del blog Designde Paul Boagdel jueves 22 de enero 2009
    • 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
    • ¿Cuál es un buen conversion rate? 3%
    • 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
    • 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.”
    • 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.
    • 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.
    • 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.
    • 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.
    • Human Factors, UPA 2008
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Accesibilidad
    • www.ping.com
    • www.ping.com
    • http://royal.pingdom.com/2010/10/27/web-designers-keep-that-page-size-down
    • 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
    • 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)
    • Call-to-action Web Copy!!!¿Qué dice la experiencia?
    • http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
    • 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/
    • Evita solicitar datos inncesarios. http://www.smashingmagazine.com/2009/06/23/10-ui-design- patterns-you-should-be-paying-attention-to/
    • 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/
    • http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
    • 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/
    • http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
    • 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/
    • 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/
    • 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/
    • 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/
    • http://www.alistapart.com/articles/signupforms
    • vshttp://www.alistapart.com/articles/signupforms
    • http://www.alistapart.com/articles/signupforms
    • http://www.alistapart.com/articles/signupforms
    • http://www.alistapart.com/articles/signupforms
    • http://www.alistapart.com/articles/signupforms
    • http://experienceblogger.com/post/1081389180/design-for-conversion-checkout-page-redesign
    • http://experienceblogger.com/post/1081389180/design-for-conversion-checkout-page-redesign
    • 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/
    • 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/
    • 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.
    • 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/
    • http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
    • 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/
    • http://www.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/
    • Otros
    • ¿Cómo ven mi sitio web? Ver:_Nielsen Norman Group Report
    • ¿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
    • 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
    • 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
    • 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
    • GetSatisfaction.com utiliza tabs verticales en vez de radio buttons paraidentificar el tipo de mensaje del usuario. http://www.patternry.com/p=stacked-tabs/
    • http://www.patternry.com/p=stacked-tabs/http://www.google.com/finance/st...
    • http://www.patternry.com/p=stacked-tabs/http://www.carmax.com/
    • El input depende de la selección http://www.patternry.com/p=stacked-tabs/ http://www.stumbleupon.com/
    • http://www.patternry.com/p=stacked-tabs/http://sites.google.com/site/sites/
    • http://www.patternry.com/p=stacked-tabs/https://www.getdropbox.com/tour#2
    • 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
    • http://www.toysrus.com/
    • http://www.target.com/
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • http://www.pocketberry.com/2009/03/03/weatherbug-for-blackberry-storm-free-download/
    • http://iordanov.info/projecs_mentormate_MigraineMate.html
    • http://www.soft-gadgets.com/telenav- http://symbianism.blogspot.com/2009/08/free-mobile-gps-navigator-for-blackberry-storm/ maps-and-navigation-metro.html
    • 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)
    • 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
    • http://www.amazon.com/Diamond-Engagement-Rings-Loose-Diamonds
    • http://www.smartmoney.com/map-of-the-market/
    • http://www.panic.com/goods/
    • http://www.tenbyten.org/
    • http://www.lukew.com/ff/entry.asp?1007
    • Design Decision: A New Signup Form
    • Crítica de Sitios
    • ttp://www.target.com/Home-%C3%A9cor/b/ref=nav_t_spc_7_4?ie=UTF8&ode=1038616
    • http://www.gerber.com.mx/
    • 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/