un objetivo final es determinado por 2 factores: la distancia al objetivo y el tamaño de este último. Ley de Fitts Las Leyes del Diseño de Interacciones
elementos y crear una jerarquía clara • Proveer estructura visual y flujo en cada nivel de organización • Hacer uso de imágenes cohesivas, consistentes y contextualmente apropiadas • Integrar estilo y función de modo comprensivo y siguiendo un propósito • Evitar el ruido y desorden visual
Hay muchas formas de atender los requerimientos de un proyecto, es esencial seleccionar la “buena práctica” que mejor refleje las necesidades y expectativas de los usuarios y su contexto.
de sitio estándar con una página de índice y una serie de sub-páginas. Este patrón suele seguirse en sitios responsivos si no se pensó en el móvil primero. Bueno para: La organización de estructuras complicadas que deben seguir la estructura de un sitio de escritorio. Ojo: Navegación. Estructuras de navegación multifacéticas pueden presentar un problema para las personas que utilizan las pequeñas pantallas.
de apps. Es una colección de secciones unidas por un menú de la barra de herramientas que permiten escanear y entender la funcionalidad completa de la app forma rápida al abrirla por primera vez. Bueno para: Apps con un tema similar. Multitasking. Ojo: Complejidad. Este patrón es el más adecuado para estructuras de contenido muy simples. iOS Patrones IA & Nav
índice central de la cual los usuarios navegar hacia afuera. Es el patrón por defecto en el iPhone. Los usuarios no pueden navegar entre las rayos, debiendo deben regresar al centro (home). Bueno para: Herramientas de múltiples funciones, cada uno con una navegación interna y el propósito particulares. Exponer el contenido y funcionalidades al inicio rápidamente. Ojo: Los usuarios que deseen realizar varias tareas en simultáneo. Patrones IA & Nav
a contenidos más detallados. En un contexto difícil éste es un modelo de navegación rápida y fácil. Dá al usuario, fuerte sentido de dónde se encuentra en la estructura de los contenidos al moverse hacia adelante y atrás. Bueno para: Aplicaciones o sitios con un tema o temas estrechamente relacionados. Esto también se puede utilizar para una subsección dentro de otros patrones, como Hub&Spoke. Ojo: Los usuarios no podrán cambiar rápidamente entre secciones así que puede ser una barrera para explorar contenido. Patrones IA & Nav
la pantalla hacia adentro que muestra la lista de opciones de menú. Esto puede tener categorías, además de ser desplazable. Es similar al menú expandible ticipo en sitios responsivos.. Bueno para: Apps con un gran número de opciones de menú.Crea un área separada para la navegación sin tomar una gran cantidad de espacio dando lugar al contenido. Ojo: Puede entrar en conflicto con otros patrones de navegación o de interacción, ya que el usuario puede perderse fácilmente, dificultando la posibilidad de encontrar una sección ya que se encuentra escondido. No visibiliza rápidamente el contenido de la app. Patrones IA & Nav Menú expandible Menú lateral
oportunidad inmensa para alcanzar a más usuarios • Las restricciones de los medios mobile nos permiten enfocarnos en aquello que realmente es importante • Las capacidades de los dispositivos móviles crean oportunidades para innovar • El contenido estructurado se convierte automáticamente en la base del diseño
have a good experience. In our business we get really excited about technology, but it’s important to always keep in mind (…) We don’t design for browsers. We don’t design for mobile devices. We don’t design for tablets and phablets and touchscreens and everything else: We design for people. Our stuff has to work in this places, but we design experiences for people.” Jeffrey Zeldman
The Essentials of Interaction Design – Alan Cooper http://nngroup.com/articles/usability-101-introduction-to-usability http://blog.uxpin.co/5060/practical-look-using-wireframes/ The Elements of User Experience – Jesse James Garrett Prototyping: A Practitioner’s Guide – Todd Zaki Warfel Mobile First – Luke Wroblewski http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/ https://vimeo.com/104641191 Referencias
fernandezroca
securecat
_limex_
goodpatch
kasumidyaya
cremacrema
xinyao
hirataaa0220
videlvequio
strongeron
root_recruit
aguringo
yukiringo
bcantrill
samanthasiow
garrettdimon
cromwellryan
thoeni
ufuk
jennybc
davidbonilla
addyosmani
mza
edds
bryan
![Preguntas? Lionel Fernandez Roca [email protected] @fernandezroca](https://files.speakerdeck.com/presentations/859a80c01788013292f406657be3bf12/slide_51.jpg){kind=link}
![Gracias! Lionel Fernandez Roca [email protected] @fernandezroca](https://files.speakerdeck.com/presentations/859a80c01788013292f406657be3bf12/slide_52.jpg){kind=link}