¿Porqué diseño móvil? Porque es una carencia real: se enfatiza la enseñanza de tecnologías de desarrollo móvil, pero no las mejores prácticas de diseño móvil. Porque es un tema importante: es necesario dedicarle tiempo a pensar en los problemas que resolveremos antes de escribir la primera línea de código ¿Porqué apps y webs? Ambas formas de software coexisten en dispositivos móviles. Web: “Consigue una experiencia personalizada descargando nuestra app” Puedes elegir usar una sola de ellas, pero también pueden complementarse entre sí. xkcd Móvil: “Para completar esta transacción sigue este enlace web” ¿Qué veremos hoy? Sesión 1: De la idea al prototipo PROTOTIPO 1. Porqué el contenido móvil es diferente 3 IDEA 1 2 2. Planeando una web/app móvil 3. Diseñando una experiencia de usuario móvil 1 Diseño de apps y webs móviles 1. Porqué el contenido móvil es diferente 1. Porqué el contenido móvil es diferente Pantallas pequeñas, no utilizables como una pantalla amplia Hacer zoom no debería ser la única opción para elegir algo 1. Porqué el contenido móvil es diferente Los recursos de hardware y conectividad son más limitados que en una PC o Mac. Es necesario optimizar los requerimientos de software para un mejor desempeño. 1. Porqué el contenido móvil es diferente Teclados ocultan la mitad de la pantalla al activarse. Teclas muy pequeñas, autocorrectores, teclados que cambian de acuerdo al contexto 1. Porqué el contenido móvil es diferente Los usuarios interactúan con el móvil usando sus manos y pueden ocultar la pantalla. Pueden sostener el móvil como prefieran y pueden usar gestos. Antes de avanzar, repasemos: ¿Porqué el contenido móvil es diferente? 1. Pantallas pequeñas 2. Recursos de hardware y ____________ _________ 3. T _ _ _ _ _ _ _ 4. M _ _ _ _ Si no recuerdas 2, 3 y 4, retroceder y recordar. Si ya los recuerdas, ¡felicidades!, haz completado la primera parte de la sesión. 2 Diseño de apps y webs móviles 2. Planeando una web/app móvil Todo empieza con una declaración: ¿Qué quiero hacer con la web/app? 2.A Concepción de una web/app Las respuestas pueden mejorarse con el tiempo. ¿Qué quiero lograr con la app? (¿Cuál es su objetivo?) Quiero ingresar a un 'aula virtual de tecnologías' y consultar los materiales de los cursos que llevo. ¿Qué problema soluciona? Educación continua. ¿Cuál es su valor agregado / diferenciador? Descargar contenidos para leer después. ¿Porqué nos tomamos el tiempo en concebir una web/app? Porque necesitamos definir claramente los principios de nuestra web/app, y considerar qué la haría diferente a las demás. 2.B Concepción de un usuario Concebimos una Proto-persona: El usuario 'modelo' de nuestra web/app. 2.B Concepción de un usuario Protopersona: –Nombre y dibujo –Información demográfica / comportamiento En el segundo punto se puede ahondar en actitudes, cualidades y preferencias. “Alejandro Lara” 30 años, de clase media baja, soltero sin hijos, familiarizado con el uso de tecnología Nació en Ica y vive en Jesús María, Lima. Parte del equipo de desarrollo en una entidad privada de Surco. Sale con su pareja o amigos dos veces por semana. No le gusta caminar. 2.B Concepción de un usuario Protopersona: –Cara y nombre –Información demográfica / comportamiento –Puntos de dolor y necesidades –Posibles soluciones - Necesita certificarse en nuevas tecnologías para conseguir un ascenso en su trabajo. - A veces hay imprevistos en la oficina y sale tarde, por lo cual no puede estudiar en horario fijo. - Utiliza transporte público en Lima y pasa varias horas en microbuses. Tarea: piensa en cómo un móvil resolvería estos puntos. ¿Porqué nos tomamos el tiempo en concebir un usuario? Porque debemos pensar cómo nuestra web/app le resolvería la vida a un usuario que lo necesita, no nosotros mismos. 2.C Funcionalidades Comienza con los objetivos desde el punto de vista del usuario. Luego pasarás a las funcionalidades en si. Algunos objetivos: - Puedo iniciar sesión con mi cuenta. - Puedo ver los cursos que llevo y los que puedo llevar. - Puedo matricularme en los cursos que quiera. - Por cada curso puedo consultar los materiales disponibles. - Puedo descargar el contenido de mis cursos para leerlos sin conexión. 2.C Funcionalidades - Puedo iniciar sesión con mi cuenta. - Puedo ver los cursos que llevo y los que puedo llevar. - Puedo matricularme en los cursos que quiera. - Por cada curso puedo consultar los materiales disponibles. - Puedo descargar el contenido de mis cursos para leerlos sin conexión. Iniciar sesión Listar cursos disponibles Matricularse en curso Ver página de un curso / Ver recurso Descargar recurso Elige la funcionalidad más importante 2.D Diagrama de arquitectura de información Iniciar sesión Listar cursos Abrir curso Ver recurso Olvidé mi contraseña Inscribirse en curso Descargar recurso Abandonar curso Crear nueva cuenta Cerrar sesión Antes de avanzar, repasemos: Pasos para planear una web/app: 1. Concebir una web/app 2. Concebir un _______ (o también llamado ____________, que tiene _ componentes y son ...) 3. Elaborar las _______________ a partir de _________ 4. Elaborar un ... Si no recuerdas 2, 3 y 4, retroceder y recordar. Si ya los recuerdas, ¡felicidades!, haz completado la segunda parte de la sesión. ¿Porqué nos tomamos el tiempo en detallar funcionalidades y diagramas? Porque así podremos diseñar mejor nuestra web/app. 3 Diseño de apps y webs móviles 3. Diseñando la experiencia de usuario móvil 3.A Modelos de interacción Google's Material Design Guidelines design.google.com 3.A Modelos de interacción iOS Human Interface Guidelines: Designing for iOS developer.apple.com/design Interfaces nativas, ¿si o no? La vida es lo que pasa mientras argumentamos a favor o en contra. No tenemos tanto tiempo Así que usaremos un atajo 3.B Lineamientos de interacción móvil Múltiples opciones, pero enfócate en una funcionalidad bien hecha. 1 2 3 4 ¿Recuerdas que antes enfatizamos elegir la funcionalidad más importante? 3.B Lineamientos de interacción móvil No reinventes la rueda: delega a otras apps o al navegador, deja que otras apps te utilicen. 3 2 1 3.B Lineamientos de interacción móvil Las opciones disponibles deben ser familiares. Un botón debe verse como un botón, un enlace web se diferencia del texto. 3.C Elementos gráficos Barras de herramientas: ¡acción! 1 2 3 4 3.C Elementos gráficos Navegación: de dónde vine y a dónde voy, siempre visible. 1 2 3 3.C Elementos gráficos La forma del texto nos dice algo: tamaños, colores, contrastes. 3 1 2 3.C Elementos gráficos Los colores son tus amigos 3 1 2 4 3.C Elementos gráficos Si iconos tienen significado, mantener ese significado. 1 2 3 4 PROTOTIPO ¡Terminamos! ¿Qué vimos hoy? 3. Diseñando una experiencia de usuario móvil 3 IDEA 2 1 2. Planeando una web/app móvil 1. Porqué el contenido móvil es diferente Ahora te toca poner esto en práctica Realiza todo el proceso con tu idea de web/app Referencias bibliográficas Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug Publisher: New Riders Release Date: December 2013 OSCON 2014: Complete Video Compilation by O'Reilly Media, Inc. Publisher: O'Reilly Media, Inc. Release Date: August 2014 - Unfortunately, Design Tutorial Has Stopped, and Other Ways to Infuriate People With Mobile Apps - Paris ButtfieldAddison, Jonathan Taller de UX y diseño de apps By Javier Cuello Publisher: disenoenviaje.com Release Date: June 2014 Mobile Design Pattern Gallery, 2nd Edition by Theresa Neil Publisher: O'Reilly Media, Inc. Published: May 2014 Material Design Guidelines design.google.com iOS Human Interface Guidelines: Designing for iOS developer.apple.com/design ¿Esto tenía que ver con Mozilla? Todas las capturas usadas aquí corresponden a webs/apps en Firefox OS Puedes probar a hacer prototipos en Mozilla Webmaker para Android Diseño de apps y webs móviles Sesión 1: De la idea al prototipo Juan Eladio Sanchez Rosas [about.me/juaneladio]
