Restricciones de diseño de UX móvil, mejores prácticas y trabajo con desarrolladores

Podemos lograr mejores experiencias de usuario siguiendo las mejores prácticas de diseño de UX móvil, comprendiendo las limitaciones y facilitando una relación de trabajo sólida con los desarrolladores.

¿Qué es el diseño de UX móvil?

Un artículo reciente en TechCrunch señaló que el comercio electrónico móvil representó casi un tercio de todas las ventas en línea durante el período de vacaciones del Día de Acción de Gracias de 2018, y Digital Trends informó en 2017 que 5 mil millones de personas en todo el mundo ahora tienen un dispositivo móvil. Google también anunció que la indexación móvil primero se utiliza ahora para más de la mitad de las páginas web en sus resultados de búsqueda.

Las personas dependen de los dispositivos móviles todos los días para las comunicaciones, el comercio electrónico, el consumo de contenido, el trabajo, la banca, las direcciones y, cada vez más, como su único dispositivo informático. Además, están utilizando una variedad de dispositivos, como teléfonos móviles, relojes inteligentes, tabletas, phablets, dispositivos portátiles y computadoras portátiles híbridas.

El diseño de experiencia de usuario móvil (UX) se refiere al diseño de experiencias positivas durante el uso de dispositivos móviles y dispositivos portátiles, y aplicaciones o servicios que se ejecutan en dichos dispositivos... El diseño de UX móvil se centra fuertemente en la eficiencia y la capacidad de descubrimiento. - Fundamentos de Diseño de Interacción

Para los diseñadores de UX, estas tendencias de dispositivos móviles representan tanto desafíos como oportunidades. Por un lado, tenemos que tener en cuenta la variedad de dispositivos y formas en que se utilizan. Por otro lado, esto abre un conjunto completamente nuevo de áreas de enfoque en el diseño de UX, y eso significa crear experiencias positivas para una generación de usuarios completamente nueva.

Mejores prácticas para el diseño de UX móvil

El diseño de UX móvil es complicado. Como se mencionó anteriormente, hay muchas cosas que debemos considerar, incluida la creciente lista de dispositivos móviles, las formas en que las personas interactúan con ellos y el hecho de que las personas desean experiencias consistentes y placenteras en todos los tipos de dispositivos.

Los 25 consejos de diseño de experiencia de usuario móvil de Google

En 2015, Google publicó 25 mejores prácticas de diseño de UX móvil basadas en investigaciones internas. Estos consejos se actualizaron recientemente para que estén más actualizados. El autor también incluye un PDF descargable de los 25 consejos que es bueno tener a mano para cualquier proyecto de UX móvil.

Pautas de interfaz humana de Apple

Otro gran recurso para tener a mano son las Pautas de interfaz humana de Apple para el diseño móvil. Son fáciles de leer con un hermoso diseño y llenos de mejores prácticas, consejos y la propia visión de Apple sobre los principios de diseño. Para los diseñadores de UX móviles, estas pautas son un gran recurso para brindar experiencias de usuario de alta calidad.

Mejores prácticas adicionales de UX móvil

Aquí hay algunas mejores prácticas de diseño de UX móvil que pueden no ser tan conocidas como las de Google, pero que son igual de importantes para que los diseñadores móviles las tengan en cuenta.

• Investigación UX . En cierto punto, podemos sentirnos inclinados a entrar directamente en maquetas o prototipos, sin embargo, hacer primero una investigación adecuada de UX es algo que no puede subestimarse. Recuerde siempre que "usted no es su usuario", y una experiencia de usuario positiva se basa en una investigación exhaustiva de UX en todos los casos. Aquí está la guía completa de Adobe sobre métodos de investigación de UX para mayor referencia.
• desorden Todos hemos experimentado la ansiedad de un escritorio desordenado, ¡imagínalo en un dispositivo móvil! Cada botón, imagen, pieza de contenido, etc., agregada, hace las cosas mucho más complicadas. Es una buena idea deshacerse de todo lo que no sea absolutamente necesario en una interfaz de usuario móvil. Un gran consejo es luchar por el minimalismo, pero no a costa de una buena usabilidad. A menudo, esto se puede lograr priorizando una acción principal en cada pantalla.
• Priorizar Hay una tendencia a tratar de agregar tantas funciones como sea posible. Creemos que dejar algo fuera de alguna manera creará menos experiencia para los usuarios. Por el contrario, mantenga las funciones altamente enfocadas en función de los objetivos principales y refine el diseño analizando qué funciones se usan más y luego haga el esfuerzo de hacer que esas funciones sean tanto intuitivas como placenteras.
• Toque Objetivos . Los usuarios pueden enojarse físicamente y comenzar a golpear sus dispositivos móviles cuando tocan algo y no responde. Un estudio realizado en el MIT descubrió que estaban tocando algo que tenía un objetivo táctil demasiado pequeño. Una práctica recomendada es crear controles, botones, enlaces, etc. (cualquier cosa que sea un objetivo táctil) de al menos 7-10 mm, que es el ancho promedio de la punta de los dedos. También es una buena idea asegurarse de que haya un amplio espacio entre estos elementos de la interfaz de usuario.
• Texto legible . Dado que gran parte de lo que hacen los usuarios se basa en el consumo de contenido, para brindar una experiencia uniforme en todos los tipos de dispositivos móviles, asegúrese de elegir tipos de letra que funcionen bien en varios tamaños y pesos. Se recomiendan tamaños de fuente de al menos 11 puntos para reducir la fatiga visual. Los tipos de letra limpios y fáciles de leer, como Roboto y Noto de Google o la nueva fuente San Francisco de Apple, son excelentes opciones para explorar.
• Comentarios sobre la interfaz de usuario . Las aplicaciones bien diseñadas nos mantienen informados mientras interactuamos con ellas. La falta de buenos comentarios puede confundir a los usuarios y hacer que se pregunten si algo sucedió, está sucediendo o por qué sucedió o no sucedió. Una práctica recomendada es usar diferentes formas de comentarios (sonido, háptica, visualizaciones), según el elemento de la interfaz de usuario o el estado actual de la aplicación.
• Accesibilidad . Este es probablemente uno de los aspectos más pasados ​​por alto del diseño de la experiencia del usuario y, especialmente, del diseño de UX móvil. El 15% de la población mundial experimenta algún tipo de discapacidad. Las Pautas de accesibilidad al contenido web son un recurso disponible gratuitamente y, para los diseñadores digitales, es un elemento "imprescindible" como parte de su caja de herramientas.

Restricciones de diseño de UX móvil

El objetivo de la mayoría de los diseñadores de UX es proporcionar experiencias placenteras y crear diseños geniales que logren tanto la capacidad de descubrimiento (qué acciones son posibles) como la comprensión (cómo se supone que se debe usar el producto). Sin embargo, con los dispositivos móviles, se introducen algunas limitaciones debido al tamaño, la portabilidad y los entornos en los que se utilizan estos dispositivos.

Restricciones de almacenamiento

Cuando se trata de aplicaciones móviles nativas, los diseñadores deben tener en cuenta que algunos usuarios pueden tener limitaciones de almacenamiento.

Una aplicación móvil, a diferencia de una aplicación web, utiliza el almacenamiento directamente en el dispositivo móvil. Esto tiene un impacto en el diseño de UX móvil porque introduce posibles limitaciones en la calidad del video, el audio y las imágenes que se pueden usar.

Para las aplicaciones nativas, queremos diseños de UX móviles que tengan en cuenta las limitaciones de almacenamiento. Cuando un usuario se encuentra con una limitación de almacenamiento, debe tomar decisiones difíciles sobre qué conservar y qué eliminar. Genera una mala experiencia de usuario cuando obligamos a los usuarios a tomar esas decisiones.

Pantallas y Controles

Otra limitación que enfrentamos con el diseño de UX móvil es el tamaño de la pantalla y los controles en nuestros dispositivos móviles.

Las pantallas de los móviles son más pequeñas: leer a través de una mirilla aumenta la carga cognitiva y hace que sea casi el doble de difícil de entender. - Jakob Nielsen, consultor de usabilidad web.

La mejor manera de lidiar con pantallas y controles es eliminar la mayor fricción posible. Reestructure la información, preste atención a las zonas de pulgar, disminuya los clics (especialmente con el comercio electrónico) y preste atención al proceso de inicio de sesión, que a menudo puede ser frustrante.

Ambiente

Con los dispositivos móviles, existen factores ambientales a considerar para el diseño de UX. Los usuarios están sujetos a desconectarse con mucha más frecuencia, y estas situaciones deben tenerse en cuenta en la experiencia general del usuario. ¿Cómo los traemos de vuelta a donde estaban? ¿Cómo nos aseguramos de que no tengan que empezar de nuevo con lo que estaban haciendo?

Otro factor ambiental son las distracciones. Cuando usamos nuestros teléfonos móviles o tabletas, a menudo nos encontramos en un entorno ruidoso o lleno de gente que dificulta la concentración. ¿Cómo podemos garantizar una buena experiencia de usuario cuando las distracciones compiten por la atención del usuario? ¿Hay formas de guardar estados y permitir que nuestros usuarios también guarden estados?

Tamaño de pantalla pequeño, ventana única

Otra restricción a la que se enfrentan los diseñadores con el diseño de UX móvil es el tamaño limitado de la pantalla. Debido a eso, las personas solo pueden ver una ventana a la vez, y eso pone una gran limitación en la experiencia del usuario.

Hay esfuerzos para tratar de adaptarse a "pantallas múltiples" y "tareas múltiples", pero aún no son la norma y vienen con sus propios conjuntos de restricciones.

La clave para una mejor UX móvil con esta restricción de ventana única es que el diseño debe ser autosuficiente. Cualquier cosa que el usuario deba hacer debe poder realizarse dentro de una sola pantalla o ventana, es decir, no debería tener que salir de la aplicación para buscar información, etc.

Cuando los usuarios tienen que salir de aplicaciones o abrir nuevas pantallas, esto se suma a la carga cognitiva general y eso significa que las cosas se vuelven demasiado complejas y frustrantes.

Cómo sostienen las personas los dispositivos móviles

Hay una última restricción a tener en cuenta: sostener nuestros dispositivos. ¿Cómo las sostienen las personas y qué significa esto para el diseño de UX móvil?

Según una investigación de Steven Hoober y descrita en Design for Fingers, Touch, and People, Part 2, se descubrió que las personas interactúan con sus dispositivos de manera diferente según cómo los sostienen, lo que posteriormente tiene un impacto en el diseño de UX móvil.

Las personas sostienen sus dispositivos móviles de múltiples maneras y cambian de posición todo el tiempo. Esto tiene un impacto en qué dedos usan y cómo interactúan con una interfaz de usuario móvil (ver más abajo). Resulta que los usuarios prefieren el centro de la pantalla y no les gusta hacer clic en los elementos que están demasiado cerca de los bordes.

Aquí hay algunos consejos adicionales de UX móvil de la investigación de Steven:

• Diseño para cada usuario y cada tipo y tamaño de dispositivo móvil
• Diseño para todas las diversas formas en que las personas trabajan con sus dispositivos.
• Considera que los usuarios prefieren tocar el centro de su pantalla en la mayoría de los casos
• Coloque las acciones clave en la mitad central o en dos tercios de la pantalla
• Asegúrese de que los dedos y los pulgares no oculten el contenido
• Los elementos seleccionables deben ser lo suficientemente grandes como para tocarlos cómodamente

Trabajar con desarrolladores

Ya sea que trabajen en un entorno de UX ágil/esbelto o no, son los desarrolladores quienes tienen que interpretar e implementar los diseños que se han elaborado con tanto cuidado. Es una buena idea establecer algunas de las mejores prácticas probadas y verdaderas con los desarrolladores desde el principio para asegurarse de que los diseños se implementen según lo previsto. Aquí hay algunas sugerencias y consejos.

maquetas

Al preparar y entregar maquetas, trate de que los nombres de los archivos sean simples, coherentes y descriptivos. Esto ahorrará mucho tiempo yendo y viniendo. También es una buena idea finalizar todas las maquetas antes de compartirlas con los desarrolladores para que solo reciban una versión de cada pantalla. Otro consejo para ahorrar tiempo es probar todas las interacciones con prototipos para que funcionen y sean funcionales. Buenas herramientas para compartir maquetas: InVision y Marvel .

Especificaciones funcionales

La mayor parte del trabajo realizado como diseñadores de UX involucra a los desarrolladores desde el principio del proyecto, y una excelente manera de facilitar una comprensión continua del proceso de diseño y crear una mejor línea de comunicación es mediante la creación y el uso de un documento de especificación funcional, o un "Func". -Especificaciones."

El documento Func-Spec es similar a un plano que crean los arquitectos, excepto que se comparte con los desarrolladores a lo largo del proyecto de diseño y les permite comprender cómo funcionará una aplicación o sitio web (frente a cómo se verá la interfaz de usuario).

A continuación se muestra un buen ejemplo de un Func-Spec en funcionamiento:

Dupdo

Por lo general, hay una gran cantidad de copia que vive fuera de una maqueta que debe comunicarse a los desarrolladores. Aquí hay una idea que definitivamente apreciarán:

Como se vio anteriormente, el contexto ayuda al desarrollador a comprender cuándo debe aparecer o desaparecer el mensaje. Debe permitir que el desarrollador sepa lo que está pasando para que no tenga que adivinar. El mensaje es la copia real que aparecerá. Utilice la copia real y no galimatías (es decir, lorem ipsum). Los desarrolladores no quieren ser redactores publicitarios y queremos que las cosas sean lo más sencillas posible para ellos.

Especificaciones

Esta es una de las partes más importantes de la comunicación de los diseños con los desarrolladores. Aquí es donde las herramientas como Zeplin e InVision's Inspect realmente brillan porque se encargan de comunicar especificaciones como medidas, guías de estilo, fuentes, flujo de experiencia del usuario y cómo funciona cada pieza del diseño.

Comunicación IRL (en la vida real)

Los diseñadores aman sus herramientas. Tanto es así que puede ser muy fácil olvidarse de levantar el teléfono, iniciar una videollamada o acercarse a los desarrolladores y hablar. Se ha ahorrado mucho tiempo simplemente reuniéndose con los desarrolladores después de entregar una parte de un diseño porque cualquier pregunta o matiz se puede discutir en el acto. Esto a menudo se olvida, pero si se convierte en parte del proceso normal de transferencia, todos apreciarán el tiempo que se ahorra.

Atarlo todo junto

El móvil no va a desaparecer. En 2016, la cantidad de usuarios que acceden a la web en un dispositivo móvil superó por primera vez el uso de escritorio. Para los diseñadores de UX, la mayor adopción de dispositivos móviles y la proliferación de varios tipos de dispositivos hará que el diseño de la experiencia del usuario sea mucho más desafiante.

Por estas razones, adherirse a un conjunto de mejores prácticas, comprender las limitaciones que presenta la tecnología móvil y brindar una relación de trabajo fluida con los desarrolladores serán factores clave para lograr diseños que creen experiencias humanas positivas.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Los principios del diseño y su importancia
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Explorando los Principios Gestalt del Diseño
• Adobe XD vs. Sketch: ¿Qué herramienta UX es adecuada para usted?
• Los 10 entregables de UX que usan los mejores diseñadores