¿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
8. Todos deben ser amigos.
9. Realiza pruebas de usablidad
10. 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/archjournal/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/#documentation/UserE
xperience/Conceptual/MobileHIG/Introduction/Introduction.ht
ml
– http://developer.android.com/guide/practices/ui_guidelines/ind
ex.html
– http://docs.blackberry.com/en/developers/deliverables/17965/i
ndex.jsp?name=UI+Guidelines++BlackBerry+Smartphones6.0&language=English&userType=21
&category=Java+Development+Guidelines&subCategory=
– http://www.developer.nokia.com/Design/
Descargar

O *Cuando los días de diseñar sólo para la Web se acabaron