12 trucos de diseño de interfaz de usuario para aplicaciones web y móviles que nadie te contó, hasta ahora
Publicado: 2016-02-28[ Proto .io es una herramienta de creación de prototipos de aplicaciones móviles utilizada por emprendedores y empresas emergentes para crear prototipos realistas completamente interactivos que se ven y se sienten como aplicaciones reales.]
Le preguntamos a siete diseñadores, desarrolladores y empresarios de UI qué trucos de diseño de UI de aplicaciones móviles y web aprendieron de la manera más difícil o que aprendieron a lo largo de sus carreras. O nadie les habló nunca de estos consejos, o nadie parece saber acerca de los problemas cuando los mencionan. En cualquier caso, aquí hay 12 cosas que ahora no tienes que aprender a través de prueba y error, ¡a menos que, por supuesto, ya lo hayas hecho!
Los 3 mejores trucos de diseño de Duffy
John Geletka es vicepresidente ejecutivo de estrategia digital de Duffy (@duffydesignx), una agencia con más de 30 años de experiencia en diseño. Aquí hay algunos trucos que ha aprendido a lo largo de los años.
Dos puede ser un número mágico.
“Con un diseño receptivo, diseñe siempre dos pantallas a la vez: retrato móvil (320 px) y escritorio (1200 px). Hace que el proceso sea mucho más rápido”, dice Geletka.
Comience con un diseño básico.
“Reduzca todas las características, campanas y silbatos al principio. Quite la basura de su camino y concéntrese en el objetivo de la aplicación”, dice Geletka. “Eso significa que no agregue compartir, guardar y todas las integraciones a su diseño al principio. Asegúrate de captar la idea principal”.
No tengas miedo de tomar un bolígrafo.
“Las herramientas digitales son geniales, pero a veces puedes hacer más en papel en 10 minutos”, dice Geletka. “Si está atascado o tiene poco tiempo, use papel”.
Logre el equilibrio con este truco de diseño de interfaz de usuario de aplicación web
Brandon Termini es fundador y director creativo de Handsome (@HandsomeMade), una agencia comprometida con la creación de productos digitales y diseños de interfaz de usuario de aplicaciones web "intencionalmente hermosos y encantadores".
Utilice el peso óptico correcto.
“El equilibrio es muy importante cuando se crean interfaces exitosas. Un buen equilibrio permite a sus usuarios escanear fácilmente su aplicación de la manera que desea”, dice Termini. “Veo que esta regla se rompe con mayor frecuencia cuando se usan varios íconos en las interfaces. Algunos íconos tienen un peso más horizontal mientras que otros tienen un peso más vertical, y es nuestro trabajo asegurarnos de que cuando se juntan se sientan igualmente equilibrados”.
Botones ópticos de peso y reproducción
“Si está diseñando un botón de reproducción, la respuesta no es pegar un triángulo de lados iguales centrado horizontal y verticalmente dentro de un círculo. Claro, geométricamente están centrados, pero el triángulo se siente ópticamente más pesado a la izquierda debido a su mayor altura”, dice Termini. "No se preocupe, puede hacer dos cosas para solucionar esto: mueva el triángulo ligeramente hacia la izquierda para engañar al ojo para que lo vea centrado, o reduzca el ancho del triángulo ligeramente para que todos los lados parezcan iguales".
Del diseño de la interfaz de usuario de la aplicación web al móvil
Nuestros próximos tres trucos de diseño de interfaz de usuario para aplicaciones móviles y web provienen de Christian Dodd, vicepresidente y director de estrategia de experiencia del usuario, y Nathan Koch, director de tecnología creativa de Cramer-Krasselt (@cramerkrasselt). Cramer-Kasselt es la segunda agencia de publicidad independiente más grande de los EE. UU., con clientes como Porsche, Corona Extra y Heinz, por lo que Dodd y Koch se basan en una rica reserva de experiencia para brindarnos este consejo:
No olvide las interacciones de desplazamiento de la web cuando realice la migración a dispositivos móviles, y tenga un plan claro para tratar con ellas desde el principio del diseño.
“El contenido que se esconde detrás de un estado de desplazamiento en el escritorio se puede manejar de varias maneras en el móvil: directamente en la página y escondido detrás de un toque. Ninguna solución para lidiar con los eventos de desplazamiento del escritorio funciona en todos los casos”, dicen Dodd y Koch. “El contenido explicativo/de utilidad a menudo se beneficia de que se muestre en la página, y el contenido exploratorio a menudo tiene más sentido detrás de un toque. En general, a medida que los usuarios se sienten más cómodos desplazándose por todos los dispositivos, ocultar el contenido detrás de los estados de desplazamiento y ocultar/mostrar widgets se vuelve cada vez menos necesario.
Recomendado para ti:
¿Qué significa la disposición contra la especulación para las nuevas empresas indias?
Cómo las empresas emergentes de Edtech están ayudando a la fuerza laboral de la India a mejorar y prepararse para el futuro...
Acciones tecnológicas de la nueva era esta semana: los problemas de Zomato continúan, EaseMyTrip publica...
Startups indias toman atajos en busca de financiación
La plataforma de marketing digital Logicserve obtiene fondos de INR 80 Cr, cambia de marca como LS Dig...
Informe advierte sobre un escrutinio regulatorio renovado en Lendingtech Space
Por lo general, no vale la pena tratar de hacer que el video de reproducción automática funcione en la web móvil.
“Los desarrolladores de sistemas operativos móviles no permiten la reproducción automática de videos por una razón. En general, el audio y el video son más disruptivos para el usuario en dispositivos móviles”, dicen Dodd y Koch. “Los usuarios de dispositivos móviles están acostumbrados a tomar decisiones deliberadas para consumir medios”.
Hay más en el diseño receptivo que simplemente reducir su navegador.
“La detección de características también es una parte importante del desarrollo web móvil”, dicen Dodd y Koch. "No crea que no puede adivinar los eventos táctiles en un sitio web de escritorio, los detalles de la interacción móvil son más sofisticados de lo que parecen".
Hay más en la regla de tres de lo que piensas
Karolyn Hart es directora de operaciones de InspireHUB (@Inspire_HUB) y creadora de IHUBApp, una de las primeras aplicaciones web móviles de nivel empresarial en el mercado.
Intente mantener todos los elementos de diseño de la interfaz de usuario de la aplicación web en grupos de tres.
“Nos topamos con la 'Regla de los tres' mientras investigamos cómo crear confianza en nuestra interfaz para nuestros clientes. La V1.0 de nuestra plataforma no estaba dando en el blanco”, dice Hart. “La investigación muestra que tres es el número óptimo que aumenta la confianza. Menos de tres y la gente se siente insegura, más de tres y se sienten abrumados”.
“Así que hicimos un desafío de UX de que todo debe presentarse de tres en tres”, dice Hart, “desde las decisiones hasta los pasos a medida que nuestros clientes completan sus aplicaciones. La regla ha transformado nuestra herramienta. Nuestro back-end es extremadamente sofisticado para adaptarse a la simplicidad del diseño, ¡pero la recompensa ha valido la pena!”
Manteniendo los gestos simples e intuitivos
Jason Suriano es fundador y director ejecutivo de Rocketfuel Productions Inc. (@TrajectoryIQ). Con más de 13 años de experiencia en diseño de interfaz de usuario de aplicaciones web y móviles, y habiendo creado proyectos en línea y basados en dispositivos móviles para empresas como Discovery Communications, Suriano ha recogido bastantes consejos profesionales. Aquí está su favorito:
En el móvil, suponga que todos los dedos son torpes.
“Un truco que hemos implementado al diseñar juegos móviles es hacer que toda la pantalla de inicio sea un área que se pueda tocar. Lo que esto significa es que si el usuario toca el botón de inicio y falla, la aplicación aún cargará la pantalla de juego posterior, lo que garantiza que el usuario continúe en la aplicación”, dice Suriano.
“Debido a que la UI/UX móvil se define mediante toques, dobles toques, deslizamientos y gestos, un paso en falso al diseñar algo sencillo como una pantalla de inicio puede dejar a su usuario varado o frustrado, obligándolo a presionar el botón de inicio y salir de la aplicación”, agrega. .
Mantener una mente abierta a los nuevos trucos de diseño de la interfaz de usuario de la aplicación web
Nolan Kier y es gerente de proyectos y asociado de desarrollo comercial en Messapps (@Messapps), una empresa de desarrollo de aplicaciones con sede en Nueva York. “A pesar de haber sido fundada hace poco menos de tres años, Messapps ya ha crecido rápidamente hasta convertirse en una de las empresas de desarrollo de aplicaciones más reputadas e innovadoras en el campo del desarrollo de aplicaciones”, dice Kier, “y hemos aprendido mucho sobre la interfaz de usuario de aplicaciones web. trucos de diseño en esos tres cortos años”.
Siga investigando nuevas y mejores formas de hacer el trabajo.
“Muchos trucos o métodos nuevos para completar una tarea los aprendimos investigando el problema o profundizando en un problema de desarrollo en particular para determinar qué respuestas se podrían encontrar”, dice Kier. “Ejemplos de esto incluyen aprender a escribir documentos geniales escribiendo nuevos fragmentos de código en LaTeX, que es algo parecido a un editor de texto con un estilo/formato de programación. Además, Mathematica, que es como Mathcad para MacOS, tenía esta característica oculta que permitía al usuario crear un esquema 3D difícil usando el software”.
“Para el diseño, tropezar con cómo comprimir fotogramas usando cosas como la modificación de canales alfa y la capacidad de comprimir imágenes individuales usando algoritmos personalizados fueron pequeños trucos que ayudaron en el proceso”, dice Kierk. “Estar en el negocio de diseño y desarrollo de UI de aplicaciones web exige una innovación que coincida con la evolución de la tecnología. Como resultado, nuestros diseñadores y desarrolladores reelaboran constantemente nuestros procesos internos y externos para "reinventar la rueda" y descubrir nuevas formas de diseñar y desarrollar".
Encontrar a las personas adecuadas para trabajar
Robert Pieta es ingeniero de iOS y director ejecutivo de Porter Key (@PorterKeyboard), un teclado inteligente de iOS que brinda sugerencias contextuales. Este es su mayor consejo como ingeniero y empresario:
Encuentre un diseñador desarrollador o desarrollador diseñador.
“Alguien que entienda y tenga experiencia senior de ambos lados ayudará a resolver los problemas de comunicación y ayudará a mantener un proyecto dentro del cronograma”, dice Pieta. “Hay dos beneficios principales en esto. Primero, una persona con experiencia en diseño y desarrollo puede ayudar a cerrar las brechas de comunicación. Tanto el diseño como el desarrollo tienen sus propios términos clave, jerga, suposiciones implícitas e inquilinos principales. Al conocer ambos mundos, los problemas de comunicación se pueden detectar de manera preventiva”.
“En segundo lugar, un desarrollador con experiencia en diseño puede estimar la complejidad y los requisitos de recursos mucho mejor que un solo desarrollador, un solo diseñador o incluso un gerente de producto”, agrega Pieta. “A menudo, los pequeños cambios de diseño pueden conducir a una disminución significativa en el tiempo de desarrollo. Esto es especialmente cierto en dispositivos móviles, donde ciertos paradigmas de diseño están prácticamente prefabricados. Comprender qué personalizaciones son fáciles de implementar y qué animaciones son fáciles de usar ayudará a garantizar que tanto los desarrolladores como los diseñadores disfruten el proceso”.
“Algunos equipos existentes pueden afirmar que las reuniones de pie con desarrolladores y diseñadores resuelven estos problemas”, dice Pieta, “pero a menudo, este no es el caso. La reunión es demasiado corta para profundizar con precisión en los supuestos de diseño implícitos, la investigación previa del usuario, las decisiones de arquitectura de código existentes, la elección del idioma y más opciones que definen el proyecto. Solo una persona con experiencia en ambos mundos podrá cerrar la brecha de manera rápida y efectiva”.
Y un truco más de nuestra parte: utilice la herramienta de creación de prototipos adecuada
Se pueden enseñar algunos trucos de diseño de interfaz de usuario de aplicaciones móviles y web, y algunos solo se pueden aprender de la manera difícil, a través de la experiencia. Afortunadamente, los diseñadores y desarrolladores de hoy pueden construir su experiencia, como dicen, sobre los hombros de gigantes.
[ Proto .io es una herramienta de creación de prototipos de aplicaciones móviles utilizada por emprendedores y empresas emergentes para crear prototipos realistas completamente interactivos que se ven y se sienten como aplicaciones reales.]