Cómo hacer que sus ideas se vean bien: una guía para principiantes sobre el diseño visual de aplicaciones móviles
Publicado: 2015-11-24¿Se le ocurrió una idea de aplicación brillante, pero no conoce la diferencia entre una fuente y un tipo de letra, o cree que un menú de hamburguesas es algo que solo ve en un autoservicio? Incluso los empresarios con poca o ninguna experiencia pueden crear excelentes aplicaciones con el equipo y las herramientas adecuados, pero no está de más saber manejar un wireframe.
Ya sea que sea nuevo en el diseño de interfaz de usuario móvil, esté pensando en sumergirse en la creación de aplicaciones o simplemente sea un usuario curioso con algunas ideas geniales, esta guía lo ayudará a encaminarse cuando se trata de hacer que su aplicación se vea bien, y , lo que es más importante, se siente bien en la mano de un usuario.
Principios básicos del diseño visual de aplicaciones móviles
Uno de los errores de diseño visual más comunes que cometen los diseñadores principiantes y los empresarios es suponer que una aplicación móvil es solo una versión más pequeña de una aplicación de escritorio o una experiencia de sitio web, con el mismo contenido, características, funcionalidad y elementos de interfaz de usuario. Si este es un hábito en el que caes, ahora es el momento de abandonarlo y nunca mirar hacia atrás. El diseño de la interfaz de usuario de la aplicación móvil es un animal distinto, y las limitaciones de los dispositivos, los sistemas operativos y el comportamiento del usuario dictan una experiencia muy diferente de lo que sería apropiado en una computadora más grande.
Incluso si tiene experiencia en el diseño para otros medios y ya tiene una habilidad especial para distinguir un gran diseño visual, el diseño de aplicaciones para tabletas y teléfonos inteligentes requiere que sepa al menos algunas cosas sobre la tecnología con la que está trabajando. El tamaño de la pantalla es un parámetro obvio a tener en cuenta, pero también lo son la velocidad y la duración de la batería del dispositivo real.
Además, Apple y Android tienen sus propias filosofías de diseño y recomendaciones para las aplicaciones que se ejecutan en sus respectivos sistemas operativos. Seguir esas pautas ayuda a los usuarios a sentir una sensación de continuidad y competencia al usar su aplicación; después de todo, están usando otras aplicaciones a lo largo del día.
Lo mismo ocurre cuando diseñas para wearables. FitBit Flex o Charge, por ejemplo, solo tienen una franja negra delgada en la que mostrar su interfaz de usuario. ¿Cómo encajan información como el número de pasos, los pisos subidos, las calorías quemadas e incluso la fecha y la hora en un espacio tan pequeño? Y mejor aún, ¿cómo lo hacen tan útil y atractivo?
Reconociendo las limitaciones del espacio, priorizando lo que el usuario necesita saber y cuándo (y, lo que es más importante, permitiéndoles cambiar el orden de las pantallas para adaptarlo a sus propias necesidades y prioridades), y usando íconos simples y fáciles de reconocer. Hay una razón por la que todos y su madre (¡e incluso el presidente de los Estados Unidos!) parecen tener un FitBit en estos días, y un buen diseño visual es parte de ello.
No abrumes la pantalla
Dejemos de lado lo obvio: las aplicaciones móviles no le brindan mucho espacio en la pantalla para trabajar, incluso en la era de los phablets. Uno de los aspectos más importantes de clavar el diseño visual móvil es decidir lo que realmente debe estar en la pantalla en un momento dado.
Suena simple, ¿verdad? Bueno, una vez que comienzas a cavar en él, no siempre está completamente cortado y seco. Es posible que tenga una idea en su cabeza de cómo quiere que se vea la pantalla de inicio de sesión, pero una vez que cree un prototipo digital, es posible que descubra que no puede ajustarse a todos los formularios que originalmente quería (o puede, pero se ve terrible y se siente aún peor). Alternativamente, puede encontrar que la pantalla de inicio de sesión elegantemente simple que tenía en mente es completamente poco intuitiva para un usuario, que necesita más orientación.
Entonces, ¿cómo decides qué va a dónde? Gran parte de esto viene con la práctica, las pruebas de los usuarios y tener una idea de lo que otras aplicaciones hacen bien, pero hay algunas pautas generales a seguir.
No abrume al usuario
Cuando los usuarios abran su aplicación por primera vez, ¿cómo sabrán qué hacer? ¿La experiencia es intuitiva? Si no, ¿cómo mostrará a sus usuarios las diversas características y funcionalidades de su aplicación?
Dos formas importantes de asegurarse de que está dando en el clavo son establecer un punto focal y establecer una jerarquía visual.
Como hemos escrito antes, priorizar su pantalla de modo que algunos elementos llamen más la atención que otros es simplemente un buen diseño visual, independientemente del medio; esto no es exclusivo de la interfaz de usuario de la aplicación móvil. Sin embargo, su interfaz de usuario fallará sin una jerarquía clara y sólida, y las limitaciones de espacio hacen que sea especialmente importante que su punto focal sea fácil de discernir. Esta jerarquía ayuda a su usuario a saber qué mirar y qué hacer cuando interactúa con su aplicación.
Cuando se acerque al diseño visual, tome todo lo que desee incluir en la pantalla de una aplicación y decida qué es lo más importante que debe mirar el usuario. Ese elemento, ya sea una foto, un fragmento de texto, un campo de entrada o un botón, debe dominar su pantalla en términos de espacio y distinción visual. Luego, establezca una jerarquía para todo lo demás que ocupará la pantalla en ese momento.
Usemos la pantalla de inicio de sesión como ejemplo nuevamente. Los aspectos más importantes de esta pantalla son los campos en los que los usuarios ingresarán sus nombres y contraseñas. Si estos campos son demasiado pequeños o están ocultos en la esquina, no solo serán más difíciles de detectar para el usuario, sino que también será más difícil interactuar con ellos (a nadie le gusta tener que acercarse para escribir).
Gestos y Comentarios
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
Un momento, ¿no estábamos hablando de diseño visual, como en lo que el usuario realmente ve? Entonces, ¿qué tienen que ver los gestos y los comentarios con eso? Una de las particularidades del diseño visual para dispositivos móviles es que no estamos hablando de una experiencia puramente visual. Lo que el usuario ve tiene que tener sentido con lo que el usuario siente, ya que sus usuarios tocarán su aplicación para interactuar con ella. No puede divorciar la vista del tacto cuando se acerca a su interfaz de usuario móvil.
Por ejemplo, hay algunas formas de decirle a un usuario que un botón es un botón. Puede usar sombras u otras pistas tridimensionales para mostrar que es un elemento que el usuario debe presionar o deslizar, o animarlo de tal manera que el usuario sepa interactuar con él (y cómo para interactuar con él!).
Pero incluso la forma en que se mueve el botón puede depender de lo que haga el usuario. Por ejemplo, si el usuario no desliza completamente la pantalla, el botón puede moverse un poco hacia un lado antes de volver a su posición original, esperando un gesto más seguro por parte del usuario. O, si el botón debe presionarse y mantenerse presionado, podría devolver una respuesta háptica que indica al usuario cuándo está bien soltarlo. Todos estos factores influyen en la forma en que diseñas y animas los elementos de la interfaz de usuario.
Si todo eso suena complicado, imagine cómo se siente un usuario que nunca ha oído hablar de su aplicación, y mucho menos ha visto los bocetos y las pizarras en su oficina. Esta es la razón por la que la incorporación de usuarios es importante: puede usar flechas, texto instructivo y otras pistas visuales para alertar a sus usuarios sobre las acciones que deben realizar. Hacer que estas señales se vean bien y se sientan intuitivas es otro factor importante a tener en cuenta al abordar el diseño visual de su aplicación móvil.
tipografía 101
Hay un montón de fuentes y tipos de letra por ahí. No es necesario saber cada uno, o incluso la mayor parte de lo que hay por ahí. La buena noticia es que para la mayoría de las aplicaciones móviles, solo necesita saber un puñado, porque las fuentes populares son populares por una razón: una gran cantidad de personas las encuentran atractivas y legibles.
Probablemente estés familiarizado, por ejemplo, con Helvetica (y si deseas un curso acelerado de tipografía, tal vez quieras ver el sorprendentemente entretenido documental sobre Helvetica). Desde interfaces de usuario móviles hasta estaciones de tren y logotipos de marcas, Helvetica tiene un atractivo casi universal (aunque, como The Beatles o el chocolate, todo tiene al menos algunos detractores vocales). Y hay una razón para eso: es una fuente simple, legible y de aspecto agradable.
Algunas fuentes se han diseñado específicamente para dispositivos móviles. Por ejemplo, la interfaz de usuario de Segoe de Microsoft fue diseñada para ser altamente legible en las pantallas de los dispositivos, incluso en tamaños pequeños. De manera similar, Google desarrolló Roboto para Android y Apple usa la interfaz de usuario de San Francisco. Cada sistema operativo tiene sus propias recomendaciones y pautas en lo que respecta a la tipografía, pero la mayoría se puede resumir en los mismos principios básicos:
- Mantenlo legible
Hay un sinfín de fuentes para elegir, y algunas tienen un aspecto muy llamativo y emocionante. Sin embargo, al final del día, lo que más importa es lo fácil que es leer el texto. Es mejor elegir una fuente sans serif simple que no te haga entrecerrar los ojos que una fuente que se vea hermosa, pero que haga que los usuarios trabajen para ella. (Y recuerde: un buen diseño visual es un diseño visual accesible , y muchos de sus usuarios pueden tener dificultades con la vista. Haga que su interfaz de usuario sea lo más agradable posible a la vista).
- Quédese con una o dos fuentes
Esto es una especie de corolario para "mantenerlo legible". Realmente no hay necesidad, desde la perspectiva de la interfaz de usuario móvil, de usar varios tipos de letra diferentes en su diseño visual, y a menudo puede afectar la legibilidad. Una fuente está bien, o dos si crees que es absolutamente necesario. Para establecer una jerarquía usando su tipografía, debe confiar en diferentes tamaños, pesos y estilos de fuente, no en múltiples tipos de letra.
- No reinventes la rueda
La tipografía es un tema sobre el que podríamos escribir libros, y hay muchas personas que dedican su vida al tema. Afortunadamente, no tienes que ser uno de ellos (¡a menos que realmente quieras!). Si recién está comenzando, eche un vistazo a las fuentes que usan aplicaciones similares o use los tipos de letra específicos que recomiendan las pautas del sistema operativo. Si bien eso puede parecer una forma menos creativa de abordar el diseño visual, el uso de SF-UI para una aplicación de iOS o Roboto para una aplicación de Android le brinda a su usuario una experiencia de dispositivo móvil más continua y garantiza que su aplicación será legible.
Teoría del color para diseñadores de interfaz de usuario de aplicaciones móviles
Aún más numerosos que los tipos de letra son los colores. Con tantas posibilidades infinitas, es fácil idear un esquema de color para su aplicación móvil que sea, bueno, menos que extraordinario. Seamos realistas: a menos que hayas estudiado diseño visual o simplemente tengas un don para ello, puedes terminar con una interfaz de usuario móvil que se asemeje a algunas de las peores decisiones de vestuario que tomaron tus padres en los años setenta (en serio, ¿quién le dijo a tu padre que un traje de ocio amarillo mostaza fue una buena idea, especialmente ¿con plataformas azul claro?).
Al igual que con la tipografía, el sistema operativo para el que está diseñando probablemente tenga sus propias pautas sobre lo que debe buscar en un esquema de color. Sin embargo, independientemente del sistema operativo, algunas recomendaciones son universales:
- Limite su paleta de dos a cuatro colores
La interfaz de usuario de su aplicación móvil no es el momento de mostrar su amor por Lisa Frank. Al igual que con las fuentes, menos es más cuando se trata de elegir un esquema de color para tu aplicación. Demasiados colores y sombras complican su diseño visual, lo que hace que sea más difícil para los usuarios orientarse en su aplicación y saber con qué deberían estar interactuando.
- Designe colores primarios y de acento, y utilícelos apropiadamente.
Debe usar el color de una manera que le diga a los usuarios qué está pasando o qué deben hacer. Por ejemplo, los elementos con los que el usuario necesita interactuar (como menús o botones) pueden tener un color diferente, y ese color puede cambiar una vez que el usuario toque o deslice el elemento.
Para cada paleta, elegirá un color primario o un conjunto de colores primarios para los elementos no interactivos de su interfaz de usuario, así como un color de acento para mostrar la interactividad. Para poner esto en perspectiva, no debe usar su color de acento para bloques de texto por los que el usuario simplemente se desplaza o ilustraciones estáticas, y no debe usar sus colores primarios en los botones. Si usa los colores primarios y de énfasis de manera consistente, sus usuarios podrán navegar por su aplicación de manera más intuitiva.
- Use el color para que su diseño sea más legible y elija colores que combinen bien.
Hay algunos factores que influyen en si sus colores funcionarán bien juntos en un esquema. Una de las cosas más importantes a considerar es el contraste: el amarillo brillante no será muy visible sobre el verde lima, por ejemplo. Sin embargo, el hecho de que dos colores o tonos contrasten bien entre sí no significa que funcionarán bien juntos. Ese amarillo brillante también parecerá "vibrar" si está encima o al lado de un tono azul real.
Por qué sucede esto podría llenar su propia publicación de blog, pero para comenzar a elegir una paleta de colores, intente mirar las paletas que Google y Apple recomiendan específicamente en sus respectivas pautas de diseño visual. Nuevamente, ya han hecho mucho del trabajo por usted en términos de tomar decisiones visualmente agradables para su interfaz, para que pueda concentrarse en proporcionar las características y la funcionalidad que desean sus usuarios.
Una nota más: su combinación de colores hace una gran diferencia cuando se trata de accesibilidad. Cuando ejecuta el control de calidad en la interfaz de usuario de su aplicación móvil, una cosa que debe probar es si la aplicación será utilizable por personas con daltonismo (quienes, por ejemplo, pueden tener problemas para distinguir entre rojo y verde). Una forma de hacer que su aplicación sea más accesible es permitir que sus usuarios elijan entre una selección de paletas de colores personalizadas, de modo que su experiencia personal con la aplicación se adapte a sus necesidades y preferencias visuales.
Use un prototipo de aplicación móvil para probar sus habilidades de diseño visual
Aprender a implementar el diseño visual de manera efectiva en la interfaz de usuario de la aplicación móvil es un proceso gradual, pero una de las mejores formas de probar sus ideas estéticas es crear un prototipo digital de su aplicación.
Con un prototipo de diseño móvil, puede probar rápidamente A/B diferentes aspectos de su diseño visual, desde fuentes hasta colores y tipos de navegación. No solo puede probar la aplicación usted mismo, haciendo los ajustes necesarios, sino que también puede pedirles a amigos, familiares, colegas y probadores beta que den su opinión. Después de todo, puedes impresionar a una sala llena de artistas con un diseño impresionante, pero las opiniones que más importan son las de tus usuarios.
Publicado originalmente en Proto Blog el 30 de octubre.