¿Cómo diseñar para los dispositivos móviles? O “Cuando los días de diseñar sólo para la Web se acabaron…”

LCC Eduardo Tapia Sandoval, MMT

Erase una vez…

• En un país en desarrollo, cuando el internet era exclusivo de trasnacionales y ciertos grupos de usuarios con un poder adquisitivo por encima de la media nacional.

• Los diseñadores sólo se preocupaban por manejar un mínimo de resolución para proyectos digitales…. ¿cuál es este mínimo?

• Teníamos un standar en los monitores y una profundidad de bits bastante general….

• Los ajustes previos a cualquier documento de trabajo se limitaban a elegir entre CMYK y RGB, y algunas variaciones en tamaño para Web y medios impresos.

• Los celulares se ocupaban sólo para hablar por teléfono, y algunos afortunados podían ver su correo electrónico en ellos.

• En esos tiempos de limitado acceso a internet a través de un sólo canal (computadoras de escritorio)…

• Los diseñadores no tenían de qué preocuparse.

Bienvenidos al tiempo del diseño enfocado en segmentos de usuarios específicos.

Ya sean smartphones, tablets, laptops o computadoras de escritorio, cada uno de estos canales puede llegar a tener variables a considerar de

bastante complejidad.

¡NO ME HAGAS PENSAR!Reglas de usabilidad de Stve Krug

1. No me hagas pensar

Cuando pensemos en el diseño, tomemos en cuenta la fatiga mediática del usuario, su fácil distracción y la simbología universal.

2. Cómo usamos realmente la Web.

No leemos los sitios Web… los escaneamos.Tampoco hacemos decisiones ópticas, hacemos decisiones prácticas.No descubrimos cómo las cosas funcionan, simplemente las hacemos de forma intuitiva.

3. Diseña como si fueran espectaculares.

• Diseña páginas para que el usuario las pueda escanear, no leer.– Jerarquiza información visualmente.

•MUY IMPORTANTE• Un poco menos importante• Nada cercano a ser importante.

4. Animal vegetal o mineral?

• Los usuarios tomamos decisiones inconcientes.– Un usuario puede dar clic a algo que se parezca a

un botón… pero si no lo es, lo intentará un par de muchas veces…. Si sigue sin serlo se frustrará:

• Primer clic: Mmm… no carga la página• Segundo clic: @#¢@/ internet lento• Tercer clic: ·$”%& página de mi·$%#&

5. Omite la palabrería.

El arte de des-ecribir para la Web

1. Redacta un párrafo.2. Vuélvelo a redactar con la mitad de las palabras que usaste.3. Vuelve a redactarlo con la mitad de las palabras que usaste

anteriormente, de nuevo.

Reduce el ruido visual de tu página.Hace más útil el contenido.

Permitirá mejor distribución de elementos.

6. Señalización y jerarquización

• Diseña la navegación de lo general a lo particular.

– Imagina tu Website/App como un súper mercado.

7. El primer paso es que hay que aceptar que la Home page está más allá de tu control

Lo que yo quiero publicar

Lo que mi público quiere

Ofertas

Promociones

Algo nuevo, diferente

Identificarse con la marca

Mis logros

Misión/visión

Productos /servicios

8. Todos deben ser amigos.

9. Realiza pruebas de usablidad10. La usabilidad debe de ser una cortersía.

¡MUY MUY IMPORTANTE!

11. Da accesibilidad

• Usabilidad y accesibilidad no son lo mismo.

• El “508”. Se refiere a la sección 508 de la Acta Amendments to the Rehabilitation, en la que se especifican los estándares de accesibilidad en las TIC’s para proveedores que quieren venderle al gobierno de los EE.UU.

12. ¡Ayuda! Mi jefe quiere que______.

Empezar a mano puede ser una buena idea…

Empezar a mano puede ser una buena idea…

Referencias para realizar retículas y mockups en línea y en impresos.

• http://www.jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

• appsketchbook.com/• http://method.ac/

Recapitulemos:

• Una buena selección de color es indispensable en cualquier proyecto de diseño digital o impreso. ¿Por qué?

• Los mock-ups o dibujos a mano son útiles porque…

• Conocer a nuestro usuario, su comportamiento digital y sus posibles discapacidades…

Links:

• Plataforma para mejorar mi sentido de diseño:• http://method.ac/• Plataformas para consultar requerimientos de

diseño móvil:– https://developer.apple.com/library/ios/#documen

tation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

– http://developer.android.com/guide/practices/ui_guidelines/index.html

– http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry+Smartphones6.0&language=English&userType=21&category=Java+Development+Guidelines&subCategory=

– http://www.developer.nokia.com/Design/