Principales consideraciones de IU para el mejor diseño de PWA

Si aún no ha oído hablar de PWA, primero debe sumergirse en este: “¿Qué es PWA? Todo lo que necesita saber sobre las aplicaciones web progresivas” . En definitiva, son aplicaciones web realizadas con la intención de ofrecer interfaces de usuario y experiencias muy superiores a las que ofrecen las tradicionales.

En este artículo, sugeriremos las principales preocupaciones de UI (interfaz de usuario) al diseñar una PWA. Siga leyendo para descubrir cómo puede tener la mejor interfaz de usuario para su aplicación web progresiva.

Fuentes del sistema

Si desea que los usuarios se sientan cómodos al usar su aplicación web progresiva (PWA), su estilo debe mejorarse un poco para que coincida con su sistema operativo (SO). Antes de implementar diferentes menús y botones por plataforma, puede comenzar con la fuente preferida del sistema, para iOS, Android y Windows por separado.

En otras palabras, deje que el arduo trabajo de Microsoft (Segoe), Google (Roboto), Apple (San Francisco) o incluso Mozilla (Fira Sans) facilite su trabajo al mejorar la experiencia de los usuarios. Como resultado, las fuentes del sistema son un elemento que nunca debe dejar fuera de su lista.

 /*iOS*/
familia tipográfica: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* androide */
familia de fuentes: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Telefono windows */
familia de fuentes: 'Segoe UI', Segoe, Tahoma, Ginebra, sans-serif;

Iconos de aplicaciones

Es cierto que los diseñadores de aplicaciones móviles prestan especial atención al diseño de iconos. Y dado que su PWA (al agregarlo a la pantalla de inicio) se ubicará junto al resto de las aplicaciones nativas, también se debe pensar en el diseño de su icono.

Hay una buena razón para esto. Las primeras impresiones siempre son extremadamente importantes, y el icono de una aplicación es la primera impresión que deja en el usuario. Para explicarlo, un usuario puede dudar en tocar un ícono que tiene una apariencia diferente en medio de los íconos de aplicaciones nativas en su teléfono.

Para que sus íconos de PWA se mezclen con el resto de las aplicaciones en su dispositivo, debe ser flexible para adaptarse a diferentes plataformas, como Android, iOS y Windows, y acomodar elementos estilísticos (su forma, cómo se ve con/sin fondos o en diferentes colores, etc.). Una buena manera de hacer esto es hacer que el diseño del ícono de su PWA coincida, o al menos se acerque, al estándar visual de los íconos de aplicaciones nativas. Una fuente de inspiración son las pautas de diseño de materiales de Google, los íconos de materiales de Google.

 Lectura recomendada: PWA vs aplicación nativa: ¿cuál se adapta mejor a ti?

Interacciones táctiles

Las interacciones táctiles deben implementarse muy bien, o no implementarse en absoluto.

Aunque esto no es realmente imposible, es demasiado difícil incorporar interacciones táctiles avanzadas, como "deslizar para descartar" o "tirar para actualizar". Si bien cree que tales interacciones sorprenderán a los usuarios, este es solo el caso si funcionan como se espera. Si no, entonces estás en problemas.

Si sus PWA necesitan interacciones táctiles avanzadas, asegúrese de que funcionen bien en dispositivos reales. Por lo general, esto significa que ha encontrado una implementación de esta característica que ha sido desarrollada por otra persona con gran esfuerzo, como brillantes vistas intercambiables de reacción.

Mientras tanto, puede evitar este problema por completo modificando el diseño, de esta manera no sugerirá interacciones táctiles avanzadas, por ejemplo, puede usar pestañas de navegación inferiores en lugar de pestañas.

Contenido compartible

En el caso de las aplicaciones web progresivas, a menudo no se puede acceder fácilmente a la URL actual; por lo tanto, debe asegurarse de que los usuarios puedan compartir lo que están viendo fácilmente. Se puede integrar un botón para compartir que permite a los usuarios copiar la URL en el portapapeles para que se pueda compartir en sitios de redes sociales destacados.

Un pequeño consejo para este caso: si está implementando botones para compartir en redes sociales, asegúrese de retrasar la carga del JavaScript de terceros hasta que se haya cargado el contenido principal de la página.

Comentarios táctiles

En primer lugar, las áreas que se pueden tocar deben dar retroalimentación táctil . Cuando se toca un botón o un área que se puede tocar, el usuario no debe quedarse preguntándose si se reconoció el toque.

Trate de dejar en claro de inmediato que los toques fueron reconocidos. Por ejemplo, esto se puede hacer resaltando la región tocada en gris (claro), mostrando una onda de material o haciendo que una transición de página comience de inmediato.

Ejemplo de retroalimentación táctil bien hecha:

La aplicación web Google I/O 2016 proporciona un resaltado gris inmediato cuando se toca una charla y el color de toque azul predeterminado está inhabilitado (de manera predeterminada, algunos navegadores muestran su propio resaltado cuando se toca los elementos. Este estilo predeterminado no es atractivo y puede entrar en conflicto con su calidad visual de la marca).

En segundo lugar, tocar un elemento mientras se desplaza no debería activar la respuesta táctil .

Siempre que implemente la retroalimentación táctil, es importante que no se active por error cuando el usuario solo está tocando un elemento para DESPLAZAR la página.

Ejemplo de retroalimentación táctil dada en el momento equivocado:

Una versión anterior de la popular biblioteca Material-UI provocó ondas en los elementos táctiles cuando se tocaron durante los desplazamientos.

El problema se solucionó abortando la animación ondulada si la ubicación táctil del usuario se movía más de 6 píxeles en cualquier dirección dentro de los primeros cientos de milisegundos.

Conservar la posición de desplazamiento en la página de lista anterior

Presionar hacia atrás desde una página de detalles debería mantener la posición de desplazamiento en la página de lista anterior

Cuando el usuario retrocede desde un detalle, la página debe conservar la posición de desplazamiento en la página de la lista anterior. A medida que un usuario elige elementos de una lista y ve sus detalles, al tocar hacia atrás NO debe llevarlos a la parte superior de la lista. El objetivo principal es que, mientras el usuario toca, debe regresar a la página de la lista "con la misma posición de desplazamiento" en la que estaba antes de presionar el elemento.

Después de todo, navegar por una lista de productos, artículos u otros elementos se vuelve difícil cuando al presionar Atrás, el usuario vuelve a estar en la parte superior de la lista.

Obviamente, cuando dificultas la navegación a los usuarios, estos tienden a no volver.

Evite el diseño demasiado "similar a la web"

El diseño web "clásico" depende en gran medida de los enlaces en el texto y de los elementos estáticos disponibles en cada página, como un encabezado y un pie de página. De hecho, estos elementos de diseño rara vez se encuentran en las aplicaciones nativas, por lo que para que coincidan con los modelos mentales del usuario, se recomienda evitarlos y utilizar un diseño más similar al de una aplicación.

Por ejemplo, los enlaces deben usarse con moderación. Debe colocar los botones o las regiones que se pueden pulsar con cuidado.

Además, se deben evitar los pies de página estáticos que contienen enlaces de navegación e información de derechos de autor. Inspírese en el diseño de aplicaciones nativas para ver cómo se puede mover información similar a un menú o no incluirla en todas las páginas.

tema oscuro

Los temas oscuros llegaron para quedarse y solo mejorarán.

Según los desarrolladores de Android, el tema oscuro tiene muchos beneficios : puede reducir el uso de energía en una cantidad significativa (dependiendo de la tecnología de pantalla del dispositivo). Mejora la visibilidad para usuarios con baja visión y aquellos que son sensibles a la luz brillante. Hace que sea más fácil para cualquier persona usar un dispositivo en un entorno con poca luz.

Aquellos que puedan encontrar el equilibrio entre la accesibilidad de la interfaz de usuario oscura y la respuesta emotiva de los colores deslumbrantes estarán en la cima el próximo año. Hay una guía de Google Material que te puede ayudar.

En conclusión

Las aplicaciones web progresivas son la necesidad del momento, ya que permiten a los desarrolladores ofrecer una experiencia web intuitiva a los usuarios en sus teléfonos. Simplemente implementando estas recomendaciones, puede ofrecer fácilmente a sus usuarios excelentes interfaces y experiencias similares a las de una aplicación mientras usan su PWA.

SimiCart está aquí para responder a todas sus preguntas y necesidades relacionadas con PWA. Y especialmente para los comerciantes en línea que buscan una solución Magento PWA completa y perfecta para su tienda web de comercio electrónico, ofrecemos una solución completa y rentable para usted y su tienda.