Share
Hoy conversamos con dos diseñadores de interfaces de usuario móviles sobre cómo diseñar interfaces móviles exitosas y soluciones de navegación intuitivas. Aprenderemos cómo funciona Sacha Greif con el espacio limitado del iPad mediante el uso de UI Elements para ahorrar espacio. Eryk Pastwa habla sobre cómo diseñar para múltiples tamaños de dispositivos móviles y cómo probar adecuadamente los diseños para los usos máximos del mundo real. Eche un vistazo a sus flujos de trabajo y las mejores prácticas que ambos implementaron en sus proyectos..
Esta publicación es el día 3 de nuestra sesión de diseño de interfaz. Sesiones creativas "Session Day 2Session Day 4"La navegación es especialmente importante para las interfaces móviles debido al espacio limitado y las interacciones limitadas. Las personas no pueden abrir su aplicación en varias pestañas, usar atajos de teclado o crear macros, por lo que es vital que sea fácil acceder a cada parte de su aplicación.
Los bocetos (que se muestran aquí para la aplicación LePost para iPhone) le permiten iterar rápidamente a través de diferentes ideas.
Para la aplicación de periódico de Le Monde, la navegación fue una de las mayores preocupaciones. ¿Cómo mantiene la estructura lineal de un periódico y proporciona un acceso rápido a cualquier página o artículo? ¿Y cómo aprovechar el hermoso diseño de un periódico, a la vez que ofrece la máxima legibilidad en una superficie física más pequeña??
Herramientas como Omnigraffle pueden ayudarlo a planificar la arquitectura general de la aplicación.
Primero, sabíamos que queríamos proporcionar dos modos de navegación: un modo "físico" que te permitiera navegar por el diseño real del periódico y un modo de "texto" que contuviera solo el contenido del artículo. El reto fue facilitar el cambio entre modos..
Nuestra solución fue crear una relación espacial entre cada modo..
Nuestra solución fue crear una relación espacial entre cada modo. Por ejemplo, en la aplicación para iPhone, cada modo existe en las pistas superior e inferior paralelas, y el cambio de una a otra activa una animación de deslizamiento vertical. Esto asegura que el modelo mental del usuario coincida con la arquitectura de la aplicación. Si deja las secciones de su aplicación como una serie de pantallas inconexas, al usuario le resultará mucho más difícil tener una idea de dónde se encuentra. Es por esto que las transiciones de diapositivas horizontales son tan frecuentes en el iPhone.
Una gran ventaja de los periódicos y libros físicos sobre sus homólogos digitales es que puede abrirlos en la página que desee. Puedes comenzar desde la primera página, pero si prefieres leer primero la sección de deportes, no hay nada que te detenga. Queríamos recrear esa misma libertad con una interfaz móvil, por lo que exploramos múltiples opciones. Primero, agregamos una tabla de contenido a la que se puede acceder en cualquier punto de la aplicación. Es una forma muy rápida de saltar a un artículo o sección específica en el periódico, pero sabíamos que no era suficiente. No queríamos reducir todo el periódico a una lista seca de artículos..
El scrubber pop-over
Por lo tanto, para la aplicación de iPad, también usamos el nuevo elemento emergente de la interfaz de usuario de Apple junto con un dispositivo de limpieza para mostrar una vista previa de la página cuando se "desplaza" en la paginación del periódico. Y para garantizar que el periódico físico nunca estuviera demasiado lejos, agregamos un navegador emergente al modo de texto. Esta ventana emergente contiene una versión en miniatura de cada página, que le permite tocar un artículo para acceder a él sin salir del modo actual..
La vista dividida
La clave aquí es sacar todas esas características fuera del camino, siempre y cuando aún sean visibles..
Por último, también aprovechamos otra innovación de Apple UI, la vista dividida. Cuando está en modo horizontal, puede usar el panel izquierdo para navegar a través de la tabla de contenido mientras lee en el panel derecho. Con tantos modos de navegación diferentes, existe el riesgo de que su aplicación se vuelva inflada e inutilizable. La clave aquí es sacar todas esas características fuera del camino, siempre y cuando aún sean visibles. Una buena técnica para lograrlo es sobrecargar elementos existentes..
Por ejemplo, en los reproductores de video como el de Youtube, la línea de tiempo indica su posición, pero también actúa como un control que le permite controlarla. Contraste esto con los botones de rebobinado y avance rápido, que le permiten moverse en el video pero no le brindan ninguna información sobre su posición. Si aplica este principio, cuando el usuario esté listo, descubrirá de forma natural la función que se había ocultado a simple vista todo el tiempo, y la transición entre el usuario recién llegado y el usuario avanzado se realizará sin problemas..
Sacha es un diseñador web y de interfaz de usuario de 25 años de Francia, que también vivió en China, Suiza y los Estados Unidos. Ver la cartera de Sacha, blog, o seguir @SachaGreif en Twitter.
El móvil es actualmente una de las industrias de más rápido crecimiento. Todo el mundo ve cuánto ha cambiado en nuestro entorno cotidiano después del lanzamiento del primer iPhone en 2007. ¿Alguien ha publicado algo en la web a través de dispositivos móviles antes? Estos son obviamente clichés, pero muestran lo rápido que están cambiando las cosas..
Regresemos al 2010. La primera mitad del año trajo el iPad, el nuevo iPhone con iOS 4, la nueva plataforma de Samsung: Bada, una nueva versión del sistema de Android y un montón de nuevos dispositivos durante un período de seis meses. Muestra el punto clave de todo el diseño móvil conectado: simplemente una diversidad abrumadora. Por eso nos encanta tanto el móvil..
Así que cada proyecto debe comenzar con esta pregunta fundamental: para qué dispositivos estamos diseñando?
En términos generales, en el mercado existen aproximadamente seis sistemas principales, en los que funcionan diferentes dispositivos, y para los que actualmente diseñamos y desarrollamos. Cada uno de ellos puede trabajar con métodos de entrada muy diferentes y seguir otras pautas de interfaz de usuario. Así que cada proyecto debe comenzar con esta pregunta fundamental: para qué dispositivos estamos diseñando?
Es el primer punto que determina el resto, establece el rango de posibilidades y tecnologías que podemos elegir más adelante y nos muestra nuestros límites. A primera vista, parece sencillo y simple, pero puede volverse muy difícil cuando tienes que diseñar una aplicación diseñada para muchos dispositivos diferentes. ¿Qué es importante entonces? Brindar a los usuarios la experiencia más similar independientemente del sistema o, por el contrario, aprovechar los dispositivos más avanzados y sus tecnologías.?
Lo siguiente que tenemos en cuenta al principio es el número de resoluciones que la aplicación debe admitir. Preguntar acerca de la resolución suena recientemente un poco desactualizado cuando la mayoría piensa "solo" sobre el iPhone. Pero todo vuelve a los estándares móviles. Ahora, pensando en iOS, debes pensar en resoluciones de 320x480, 640x960 y 1024x768. No es un gran problema si se compara con JAVA ME: si su aplicación tiene que funcionar allí, debe admitir al menos veinte resoluciones de pantalla diferentes e incluso más tamaños físicos!
La aplicación para Allegro se distribuiría a través de dispositivos Bluetooth (bluAir) durante el evento anual de la compañía. Teníamos que llegar a la mayoría de todos los dispositivos presentes en el mercado polaco en ese momento. También elegimos JAVA ME como un marco multiplataforma, pero al mismo tiempo tuvimos que admitir veintiuna resoluciones de pantalla diferentes..
En mi opinión, tratar de pensar desde el punto de vista del usuario es una regla básica, válida para cada proceso de diseño de UI y, en general, para cada diseño comercial, ya que el objetivo es simple: los usuarios deben apreciar su diseño. Tiene que definir cuál es su grupo objetivo, quién va a usar su aplicación, ¿qué hay en el contenido que sirve? Las respuestas a estas preguntas pueden ayudarlo a determinar cómo puede mejorar el concepto inicial y qué hacer para ayudar a los usuarios a encontrar fácilmente el contenido deseado o realizar las tareas exactas..
Esquema de color de la aplicación Allegro..
La aplicación Allegro era una agenda bastante extendida. Contenía mucha información agrupada en varias categorías que guiaban a los usuarios a través de un evento.
Conocer a sus usuarios también ayuda a determinar las limitaciones. Es bastante claro que, por ejemplo, los usuarios más jóvenes aprenden más rápido y están más abiertos a las noticias curiosas. Con este mercado se pueden considerar sistemas de navegación menos comunes o bastante innovadores. Pero para aplicaciones bancarias, sería bastante conservador e intentaría pensar en usuarios de mediana edad con problemas de visión, ya que estos defectos son muy comunes en las poblaciones modernas de ese grupo de edad..
Se hace evidente que la arquitectura de la información en los dispositivos móviles cuenta incluso más que cómo se ven las cosas..
Una vez que se establecen los requisitos y las limitaciones, dibujamos las primeras maquetas. Establecemos el flujo de la aplicación y trabajamos en el diseño de los elementos de navegación. Así que, básicamente, creamos un esqueleto, más adelante lo veremos. Es la fase, cuando la aplicación puede volverse utilizable e intuitiva o no. La regla básica aquí es mantener toda la interfaz lo más simple posible. La interfaz de usuario móvil tiene que ser muy sencilla..
Probamos nuestras ideas dibujadas en hojas de papel y / o simples esquemas de alambre en los dispositivos, y tratamos de imaginar su "contexto móvil". Cuando la aplicación es bastante compleja, creamos prototipos HTML simples, que nos brindan la experiencia que puede ser muy similar a los productos finales..
También empezamos a pensar en la estética visual, pero, para ser honesto, creo que incluso la aplicación más destacada fallará si la navegación no es sencilla. Por supuesto, el diseño visual puede cambiar la impresión general de una aplicación, pero especialmente en el caso de las aplicaciones de utilidad, los usuarios se sumergen más profundamente en ellas. Se vuelve claro que la arquitectura de la información en el móvil cuenta incluso más que la apariencia de las cosas..
Navegación de aplicaciones Allegro.
La aplicación Allegro se navegó con el pad directo o con las teclas de disco izquierda / derecha. Debido a que tenía una navegación jerárquica, decidimos utilizar las rutas de navegación que mostraban la ubicación actual en forma de iconos sencillos..
El diseño gráfico es sin duda nuestra parte favorita de todo el proceso de desarrollo. Por supuesto, el diseño visual ayuda a crear una buena primera impresión, pero lo disfrutamos principalmente porque nos encanta cuando nuestros productos se ven muy bien. El diseño gráfico móvil es una disciplina muy joven, por lo que en realidad todavía estamos explorando sus posibilidades. Si trabaja con un equipo experimentado de desarrolladores, casi nada es imposible, incluso en plataformas más hostiles para el desarrollo..
Elegimos las fuentes Pixel, porque eran legibles en pantallas grandes y pequeñas..
La regla más importante aquí es probar diseños en dispositivos reales. Hay una gran diferencia entre la pantalla de "escritorio" y la pantalla móvil, y estas diferencias aún aumentan. Y no se trata solo de las diferencias de densidad de píxeles, sino también de los cambios de color. Incluso algunos de los teléfonos inteligentes modernos aún no admiten 16M de colores, por lo que cuando diseñamos para tales dispositivos, siempre estamos conscientes de los tonos azules..
Trabajando con tamaño de pantalla.
Tomamos los teléfonos y tratamos de ver nuestros diseños en casa, en el pub cercano y en la calle en todas las condiciones climáticas, especialmente cuando está muy soleado o nublado. Estos son los lugares donde se utilizan las aplicaciones móviles. Entonces averiguamos dónde ajustar el contraste, cambiar el tamaño de la fuente o agrandar los botones. Esta regla es válida sin importar si estás diseñando una aplicación de utilidad o solo un juego simple. Siempre realizamos pruebas en esta etapa, porque más adelante durante la codificación a veces es muy difícil reorganizar las cosas. Así que ve y pruébalo!
Eryk es un diseñador altamente experimentado de Polonia. Su trabajo se centra en el diseño para servicios web y móviles. Desarrolla interfaces de usuario intuitivas y claras para aplicaciones pequeñas y grandes. Visite el portafolio de Eryk, eche un vistazo al gran trabajo de Mobo Studio y siga a @mobostudio en Twitter.
Accentsconagua