desarrollo web movil
DESCRIPTION
Desarrollo de Aplicaciones Web utilizando Responsive Web Design.TRANSCRIPT
Desarrollo Web para Móviles
Alfredo Juárez CEO Cloudadmin, Inc
¿Por qué Desarrollar para Móviles?
• Diseñar web móviles no sólo te prepara al crecimiento explosivo y permite aprovechar las nuevas oportunidades en el internet móvil, también permite innovar en formas que antes no podías.
• Preparando tus aplicaciones para móviles, uHlizando diseño web responsivo, puedes alcanzar incluso disposiHvos que todavía no han salido al mercado.
Crecimiento Exponencial
Fuentes: hLp://bkaprt.com/mf/11 y hLp://bkaprt.com/mf/12
Crecimiento Exponencial
• PayPal está recibiendo un volumen de pagos móviles por encima de los 10 mdd al día.
• eBay registró ventas móviles a nivel mundial cerca de los 2 billones de dólares en 2010.
• Google tuvo un crecimiento en sus búsquedas móviles de un 130% en el tercer cuarto de 2010.
Condiciones • Tamaño de la Pantalla • Desempeño • Tiempo y Espacio
Usando las condiciones a tu favor Celulares vienen con un set natural de condiciones que al principio pudieran parecer limitantes, sin embargo, diseñar para celulares te obliga a adoptar dichas condiciones para desarrollar una solución apropiada.
Capacidades
• Acceso a datos en Hempo real, en cualquier parte del mundo.
• Los usuarios no necesitan esperar a llegar a una computadora para actualizar su información o revisar las noHcias.
• Información úHl en la palma de su mano.
¿Cómo Empezar?
• Es claro que trabajar con móviles es una nueva oportunidad para muchos de nosotros. Sin embargo, si vienes de trabajar con aplicaciones Web de escritorio, ¿Cómo hacer que la transición sea fácil?
• La mayoría de las herramientas y conocimientos que actualmente se uHlizan todavía podrán ser aplicadas en esta área, pero deberás pensar de manera diferente acerca de la organización, acciones, entradas y diseño de interfaces en móviles.
Organización
• La organización de las experiencias móviles en web necesitan: – Entender cómo la gente usa sus disposiHvos móviles y por qué.
– EnfaHzar contenido sobre navegación. – Proveer opciones relevantes para exploración. – Mantener claridad y enfoque.
Tipos de Usos
• Búsqueda (Información urgente, local): Necesito encontrar una respuesta a a lgo ahora! – Frecuentemente relacionado a mi localización actual.
• Explorar/Jugar (Aburrido, local): Necesito matar el Hempo con algo interesante y entretenido.
• Check In/Status (RepeMr/micro-‐tasking): Algo importante para mi se manHene cambiando o actualizando y quiero estar al día con eso.
• Editar/Crear (Cambio urgente/micro-‐tasking): Necesito que algo esté listo ahora y no puedo esperar.
Algunos Ejemplos Tarea Urgente (Micro-‐Tasking)
www.cloudadmin.mx Búsqueda de información (Local)
www.dnlspots.com
Contenido sobre Navegación • Como regla general, contenido toma precedente sobre
navegación. • Sea la tarea que los usuarios necesiten hacer, lo más importante
para ellos es encontrar respuestas inmediatas a sus necesidades y no el mapa del siHo.
ESPN y YouTube son ejemplos claros de enfoque en contenido sobre navegación.
Botón Volver: Buenas prácHcas
• Cuando diseñas aplicaciones naHvas, añadir un botón “atrás” a la cabecera de la app puede resultar imprescindible, sin embargo, en la web, la mayoría de los navegadores móviles ya cuentan con un botón “atrás” por defecto, por lo que, integrar otro botón “atrás” en tu aplicación sería redundante.
• En caso de ser necesario implementar una manera de regresarse a un nivel arriba, es recomendable uHlizar un nombre descripHvo en el botón.
Mantener Claridad y Enfoque
Las circunstancias en la que el usuario visita nuestra App móvil hacen que su atención sea parcial, por lo que debemos de evitar cualquier Hpo de distractor.
La pantalla de Yahoo es un buen ejemplo de Claridad y Enfoque, En contraste con la de ESPN, el contenido que el usuario está interesado queda fuera de la pantalla.
Organizando la Experiencia de Usuario
• Los casos de uso para búsqueda, exploración, check-‐in y editar y crear, te permiten pensar en cómo organizarás tu siHo para una mejor experiencia móviles, diseñando una estructura apropiada.
• Teniendo la experiencia de usuario organizada, ayudará a la gente a encontrar su camino; pero una vez que lo encuentren, necesitan actuar de manera instantánea.
Organizando la Experiencia de Usuario
• Enfocándose en contenido sobre navegación, proporciona a la gente la información y las tareas que desean lo más rápido posible.
• Opciones de navegación relevantes y bien posicionadas permiten a la gente a explorar tu siHo de una manera más apropiada.
• Reduciendo el total de opciones de navegación y enfocándose en las tareas principales, manHene claridad y enfoque en lo que el usuario necesita realizar – Especialmente cuando van a prisa o situaciones no ideales.
• Aún cuando los usuarios tengan Hempo de relax con su celular, seguirán apreciando simpleza en tu diseño!
Acciones • Mientras que algunos disposiHvos cuentan con controles
por hardware, tales como Trackpads, trackwheels y teclados, es de manera tácHl como la mayoría interactúa con la web en los celulares. Entonces, ¿cómo aseguramos que todos sean capaces de interactuar con nuestra aplicación en interfaces basadas en pantallas tácHles?.
– Asegurar que los botones tengan un tamaño y posición apropiada.
– Conocer claramente los gestos más comunes y como se adapta a los objeHvos de los usuarios.
– Cubriendo la falta del “hover” en las interacciones basadas en él.
¡Menos es mas!
Si la pantalla es pequeña, ¿por qué no hacer todo más pequeño para que quepa en ella?
¡Olvídenlo! • Aunque puedan caer en la tentación, realmente, ir en la dirección contraria es mucho mejor.
• Debes de usar tamaños grandes que se adapten al tamaño de los dedos.
• Los dedos humanos son instrumentos de punteo imprecisos: no son tan perfectos como el puntero del mouse. Vienen en diferentes tamaños.
Tamaño de los botones
• Apple recomienda botones de por lo menos 44x44 puntos.
• Microsoj recomienda 9mm y un mínimo de 7mm. Además, de un mínimo espacio de 2mm entre botones.
• Si una acción es tocada con frecuencia, el tamaño debe de ser aún mayor.
• Esto con la finalidad de evitar que los dedos toquen un objeHvo incorrecto.
En términos de diseño móvil, ¡entre más grande mejor!
Lo suficiente para evitar que los usuarios cometan errores, tocando donde no quieren.
Ejemplos
El botón de cancelar está muy pegado al botón de
Login.
¿Dónde quieres que toque?
Adaptarse a las circunstancias
Imagina que estás sosteniendo tu smartphone sólo con la mano
derecha.
Mientras que tocar el área verde es muy fácil, tratar de tocar la parte amarilla es en algunos casos
imposible.
Gestos
Bienvenida la NUI (Natural User Interface)
• El concepto de Interface de Usuario Natural o NUI (Por sus siglas en inglés), es usado comúnmente entre diseñadores y desarrolladores de interfaces para hacer referencia a una interfaz de usuario que es efecHvamente invisible, o bien, lo suficientemente intuiHva y/o natural cómo para que implique mucho esfuerzo al usuario para aprenderlas.
Natural User Interface
• Personas que hace 5 años le tenían temor a la tecnología, hoy en día han adoptado el uso de smartphones, tabletas y demás disposiHvos que de cierta manera, replican su interacción en la forma como naturalmente interactuamos con los objetos en el mundo real.
Ejemplos de acciones de usuario y gestos que podemos
implementar.
Ejemplos
Usos de Gestos
• Cuando implementes gestos en tu aplicación, trata que sean naturales (aquellos que sean comunes en nuestra vida diaria), tratar de romper paradigmas puede ocasionar frustración en los usuarios.
Y el “hover” apá?
• El uso del “hover” en interfaces Web es algo muy común, sin embargo, en interfaces tácHles, debemos de implementar técnicas que cubran esa funcionalidad.
• Los posibles suplentes para el “Hover” son: – En Pantalla – Con un “Tap” o “Swipe” – Ventana separada – Olvidarlo por siempre J
En Pantalla
• Si las acciones que están en el “Hover” son demas i ado impor tan tes , se r í a más conveniente implementarlas en la pantalla.
Con un “Tap” o “Swipe”
• Algunos navegadores susHtuyen el “Hover” con un simple “Tap” en la pantalla, sin embargo, si el elemento Hene una acción en el “Click” diferente al “hover” el usuario deberá dar dos “Taps”, lo que puede resultar frustrante para algunos usuarios.
Swipe
• Las acciones usando el gesto “Swipe” son un poco disciles de encontrar a primera instancia, e implican un mayor esfuerzo de p rog r amac i ón pa r a que f un c i onen correctamente, pero si los implementas de manera correcta y natural, los usuarios lo agradecerán.
En una ventana separada
• Si el contenido dentro de un “Hover” es extenso, es recomendable mover los elementos fuera de una ventana.
Can’t touch this!
• Justo cuando pensabas que ya la libraste; resulta que habrá disposiHvos que no son tácHles, por lo que si quieres que tu aplicación sea híbrida, debes de pensar en una manera de solucionarlo.
• Existe una técnica llamada “Progressive Enhacement” y es precisamente una manera de aplicar accesibilidad a sus siHos.
• Va link de tarea: hLp://bkaprt.com/mf/47
Ready, Set, AcHons!
• UHlizar elementos grandes y bien posicionados. • Aprende el lenguaje tácHl familiarizándote con los gestos tácHles más comunes y como son uHlizados para navegar e interactuar con los objetos y pantallas.
• No le temas a uHlizar Interfaces de Usuarios Naturales (NUI)
• Implementa tus acciones “hover” a la solución más apropiada para tu aplicación o siHo.
• Recuerda considerar interfaces para disposiHvos híbridos al momento de diseñar tus interacciones Web.
Entradas
• El poder de la web siempre ha sido la habilidad del usuario para crear contenido, no solo consumirlo. – UHliza los móviles como oportunidad para que los usuarios generen contenidos donde y cuando sea necesario.
– UHliza eHquetas opHmizadas para móviles para realizar preguntas claras y concisas.
– Aprovecha las ventajas de Hpos de entradas, atributos y máscaras para producir campos sencillos.
– Posiciona los elementos de una manera efecHva. – Busca oportunidades para ir mas allá uHlizando capacidades de los móviles.
Formularios
• La alineación para los elementos de un f o r m u l a r i o e s recomendada que sea verHcal, para que el proceso de llenado sea mas fluido.
Tipos de Entradas para móviles Podemos usar las ventajas de HTML5 para decirle al navegador qué Hpo de teclado queremos mostrar, dependiendo el Hpo de entrada necesaria.
Uso de “Placeholders”
Puedes uHlizar la propiedad “placeholders” para darle pistas al usuario de lo que Hene que escribir. <input type=“text” id=“nombre” placeholder=“Alfredo Juárez”>
Diseño Web Responsivo
• Con las diferencias de tamaños de pantallas creciendo, diseñar de manera responsiva debe de ser fundamental.
• Imagina que tu aplicación será uHlizada por usuarios que trabajan en una laptop, un tablet y/o un smartphone, siempre quieren estar conectados con la aplicación.
CSS Media Queries /* Smartphones (portrait and landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 320px) and (max-‐device-‐width : 480px) { /* Styles */ } /* Smartphones (landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐width : 321px) { /* Styles */ } /* Smartphones (portrait) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (max-‐width : 320px) { /* Styles */ }
/* iPads (portrait and landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 768px) and (max-‐device-‐width : 1024px) { /* Styles */ } /* iPads (landscape) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 768px) and (max-‐device-‐width : 1024px) and (orientaHon : landscape) { /* Styles */ } /* iPads (portrait) -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ @media only screen and (min-‐device-‐width : 768px) and (max-‐device-‐width : 1024px) and (orientaHon : portrait) { /* Styles */ }
Conclusiones • Los disposiHvos móviles de hoy en día son las verdaderas
computadoras personales; siempre con nosotros, conectadas a la red, y llenas de nuevas capacidades para realizar las cosas, comunicarse entre nosotros, y hasta para matar el Hempo.
– Tomar ventaja del crecimiento exponencial del uso del internet móvil y encontrar nuevas formas para que la gente use nuestras experiencias web.
– Adaptarse a las condiciones para enfocarse y priorizar los servicios que estamos diseñando y construyendo.
– Usa las capacidades de los disposiHvos móviles para innovar la experiencia del usuario.
– Toma lo que ya sabemos sobre el diseño web y comienza a pensar diferente acerca de las organizaciones, acciones, entradas y diseño.
¡ GRACIAS!
Alfredo Juárez CEO Cloudadmin, Inc TwiTer: @alfrekjv www.cloudadmin.mx