Krypton Solid

Dominar las restricciones del mundo real (un estudio de caso) – Revista Smashing

Dominar las restricciones del mundo real (un estudio de caso) – Revista Smashing

Como diseñadores de UI, siempre estamos interesados ​​en aprender, leer la investigación de los usuarios, comprender las mejores prácticas y mantenernos actualizados sobre los últimos enfoques y tácticas para crear sitios web y aplicaciones.

Como diseñadores de UI, siempre estamos interesados ​​en aprender, leer las investigaciones de los usuarios, comprender las mejores prácticas y mantenernos actualizados sobre los últimos enfoques y tácticas para crear sitios web y aplicaciones.

Uno de los conceptos más interesantes que hemos comenzado a aplicar a nuestro pensamiento es el enfoque móvil primero, famoso por el diseñador Luke Wroblewski en su blog y luego en su libro posterior. En general, este enfoque proporciona una forma saludable de concentrarse, reducir la grasa y llegar al corazón de lo que es importante, tanto para el contenido como para la interacción.

Otras lecturas en SmashingMag:

Pero, ¿qué sucede si tiene un sitio o una aplicación existente que se creó para escritorio sin una estrategia de respuesta o móvil en mente? Y más específicamente, ¿qué pasa si usted, como nosotros, no tiene los recursos, el tiempo o el presupuesto para empezar de cero en el corto plazo? A pesar de ser una tienda de diseño, en Suelo Fresco Labrado nos encontramos en esta misma posición. Así es como lo abordamos.

El reto

Como empresa de diseño de interfaz de usuario de aplicaciones web y móviles, no podríamos ignorar el problema durante mucho más tiempo y dejar que los clientes potenciales pellizquen, acerquen y entrecerren los ojos en sus teléfonos para evaluar si somos la agencia adecuada para ellos, especialmente cuando ofrecemos servicios de diseño web móvil y aplicaciones nativas!

¿Entonces lo que hay que hacer? Una empresa de diseño que ofrece soluciones de diseño móviles y receptivas ciertamente debe practicar lo que predica, especialmente con los datos que muestran un número creciente de visitantes que acceden a nuestro sitio desde sus teléfonos inteligentes. Porque queríamos compartir la misma información independientemente del tipo de dispositivo y mantener una única base de código, un enfoque receptivo era la mejor solución.

Aunque nuestros recursos eran limitados, tuvimos la suerte de tener varios miembros del equipo con una ventana limitada de disponibilidad próxima. Rápidamente reunimos un pequeño equipo con el objetivo de hacer que todo nuestro sitio web fuera realmente receptivo (aunque prestando especial atención a nuestros usuarios de iPhone y Android). Según nuestros informes de análisis, estos dispositivos fueron, con mucho, los más populares entre los visitantes de nuestro sitio.

Nuestra investigación nos mostró que el 51% de las visitas móviles se realizaron en iPhones, el 40% en iPads y el 9% restante se dividió entre varios teléfonos inteligentes y tabletas Android. Sin embargo, sentimos que una solución verdaderamente receptiva en la que cada uno de nuestros diseños era fluido fue una solución mejor que solo apuntar a dispositivos específicos.

Como empezar

  • Identificar diseños clave para abordar. Como grupo, discutimos lo que más importaba desde el punto de vista de un cliente potencial, luego identificamos qué diseños necesitarían un diseño personalizado y cuáles podrían manejarse directamente en el código.
  • Céntrese en el tamaño de la pantalla más allá de los dispositivos específicos. Una vez que se diseñaron y codificaron los diseños personalizados, identificamos puntos de interrupción orgánicos entre dispositivos móviles y computadoras de escritorio para un mayor refinamiento.
  • Cuenta para nuevas capacidades de dispositivos. Actualizamos los gráficos para admitir la resolución más alta asociada con las pantallas retina.
  • Diseño y código en paralelo. Mientras los diseñadores se pusieron a trabajar en los diseños personalizados, los desarrolladores comenzaron a adaptar el sitio web a las pantallas pequeñas, convirtiendo anchos fijos en porcentajes. Luego, un diseñador y un desarrollador trabajaron codo a codo para perfeccionar aún más la tipografía, la navegación y los diseños en el código, realizando mejoras en tiempo real.

Nuestro proceso en acción

1. Optimice la navegación

Considere el espacio limitado de una pantalla móvil y examine las formas de simplificar los diseños.

Al diseñar para la experiencia móvil, la primera decisión que tomamos fue simplificar la navegación a una serie de íconos que representaban cada una de las secciones. Eliminamos la gran imagen de fondo de nuestro apuesto CEO, Richard Banfield, y nos enfocamos en facilitar la visualización de la declaración de posicionamiento y comenzar cualquiera de los videos.

2. Identificar casos de uso específicos de dispositivos

Piense en lo que más desean los visitantes de su sitio web móvil y considere cómo facilitarles el acceso.

Pensamos que era importante para los clientes que nos visitaban por primera vez poder contactarnos fácilmente o acceder a un mapa de nuestra ubicación. Al visualizar esto desde la perspectiva del usuario, decidimos que este contenido era lo suficientemente importante como para estar en una ubicación destacada en los dispositivos móviles. Simplemente mostrar esta sección cuando el ancho de la pantalla del dispositivo implicaba una resolución móvil y configurarla para que no se mostrara en pantallas más grandes fue suficiente para hacer el truco.

La información de contacto y las direcciones se destacaron en el diseño de las pantallas pequeñas, para ayudar a los clientes que visitan por primera vez.
La información de contacto y las direcciones se destacaron más en el diseño de las pantallas pequeñas, para ayudar a los clientes que visitan por primera vez.

3. Simplifique la funcionalidad existente

Asegúrese de que sus interacciones funcionen sin problemas en pantallas más pequeñas y conserven su contexto.

La sección de la cartera se simplificó en dispositivos más pequeños para mostrar solo seis proyectos, y las imágenes de detalles de la cartera ahora aparecen sobre las miniaturas en lugar de sobre ellas para mantener el contexto de la sección de la cartera.

Las interacciones se simplificaron para garantizar que funcionen sin problemas en pantallas más pequeñas.
Las interacciones se simplificaron para garantizar que funcionaran sin problemas en pantallas más pequeñas.

4. Reconsidere las interacciones potencialmente incómodas

Si algo requiere un enfoque de diseño personalizado, invierta tiempo para optimizarlo realmente.

Algunas opciones de interfaz de usuario que tienen mucho sentido en una computadora de escritorio simplemente se quedan planas en una pantalla móvil. En la versión de escritorio de nuestro sitio web, las biografías del equipo se deslizan a la vista sobre una cuadrícula de miembros del equipo, y los detalles de cada persona aparecen a la izquierda de una toma de cabeza más grande. Sabiendo que estos diseños de biografía probablemente tendrían que anclar y saltar mucho más alto que la cuadrícula y luego requerir un poco de desplazamiento para leer la biografía, se nos ocurrió un tratamiento de diseño alterado que se asemeja a una superposición modal.

Los enfoques de IU que no funcionaban bien en pantallas pequeñas recibieron un tratamiento de diseño diferente.
Los enfoques de IU que no funcionaban bien en pantallas pequeñas recibieron un tratamiento de diseño diferente.

Era importante identificar que la sección de equipo necesitaría un diseño personalizado al principio del proceso para que pudiéramos comenzar a diseñar, probar e iterar. Usamos un div que se desliza hacia arriba desde la parte inferior de la página, cubriendo aproximadamente el 90% de la misma. A continuación, se acortó la longitud de la biografía para que cada biografía pudiera presentarse sin desplazarse tanto en la orientación vertical como en la horizontal en nuestros dispositivos de destino.

5. Utilice patrones de respuesta probados y verdaderos

No todos los diseños necesitan ser rediseñados para una pantalla más pequeña. A veces, hacer que las columnas se apilen y dejar que sus anchos se ajusten a la pantalla es el tratamiento óptimo.

En nuestro sitio web, no todas las secciones requerían tratamientos personalizados para pantallas más pequeñas. Debajo del área del equipo, la sección «Hábitat» (artículo, talleres y eventos) implementa un enfoque receptivo más sencillo en el que el diseño de dos columnas simplemente se apila verticalmente. Las páginas de detalles para cada uno de esos elementos también utilizan un enfoque de apilamiento similar, y nos aseguramos de que la opción de registrarse para un taller estuviera en una ubicación destacada.

6. Eliminación de elementos innecesarios

Considere siempre simplificar. Si algo en su sitio web de escritorio no se aplica a un contexto móvil, entonces tal vez pueda eliminarlo. Si encuentra que es una mejora, considere formas de simplificar también el diseño del escritorio.

Hacia la parte inferior de la página, nuestra sección de contacto se simplificó enormemente para incluir solo un formulario de contacto compatible con dispositivos móviles para que los posibles clientes se pongan en contacto. Como ya contamos con los botones «llámanos» e «indicaciones» en la parte superior del sitio web, pudimos eliminar la dirección y el mapa de esta sección.

La sección de contacto se simplificó para eliminar elementos duplicados.
La sección de contacto se simplificó para eliminar elementos duplicados.

Lecciones aprendidas

  • Toma decisiones informadas.. Al hacer que la estructura del sitio web sea fluida, al probar e identificar qué secciones podrían reordenarse o reestructurarse para optimizarlas para dispositivos móviles, nuestro pequeño equipo interno pudo comenzar de inmediato y moverse rápidamente.
  • El trabajo en equipo es clave.. Todos pudieron presentar su caso sobre qué agregar, eliminar o cambiar, siempre que provenga de un lugar en el que los objetivos del usuario sean lo primero.
  • No formalices demasiado el proceso. Al igual que con muchos proyectos de diseño, los bocetos rápidos y las sesiones de pizarra, seguidos de pequeños cambios en las composiciones de diseño y el código real, enfocaron el panorama general sin que nos dejáramos llevar por un proceso demasiado formal.
  • Comprenda qué dispositivos usa su audiencia, pero adopte un enfoque totalmente receptivo.. El diseñador jefe Alex Sylvia dice: “Estábamos conscientes de probar en los dispositivos que usaban nuestros clientes, pero también queríamos que el diseño reaccionara orgánicamente. La única forma de descubrirlo era interactuar con el sitio en varios tamaños «. Al usar este enfoque y al mismo tiempo realizar pruebas en dispositivos que sabíamos que nuestra audiencia estaba usando en función de la analítica, obtuvimos lo mejor de ambos mundos.
  • Utilice la mejor tecnología para el trabajo.. Uno de nuestros diseñadores senior de UI, Alec Harrison, desarrolló rápidamente composiciones de diseño para el tratamiento de los miembros del equipo, utilizando LiveView para mostrar inmediatamente las composiciones en su iPhone. Esto proporcionó el contexto adecuado para mejorar el diseño.
  • La colaboración es clave.. En lugar de diseñar de forma independiente, colaborar con un desarrollador para tomar decisiones de diseño directamente en el código nos ayudó a llegar a una solución orgánica. Nuestra desarrolladora líder, Sarah Canieso, dijo lo siguiente sobre el proceso: “Este proyecto me reiteró que los proyectos receptivos son en gran medida una colaboración de diseño y código. Fue un equilibrio entre lo visual, donde el diseño cambió en diferentes puntos de interrupción, y el mantenimiento de la funcionalidad que proporcionaría una buena experiencia de usuario en todos los dispositivos «.

El impacto

Desde el lanzamiento de la versión receptiva de nuestro sitio web, hemos notado las siguientes mejoras en el comportamiento de los usuarios móviles:

  • Una reducción del 17% en nuestra tasa de rebote.
  • Un aumento del tiempo dedicado a nuestro sitio web: hasta 3 minutos desde solo 40 segundos.

Además, hemos recibido varios cumplidos de posibles clientes que han accedido a nuestro sitio web por primera vez utilizando su teléfono.

Si bien un enfoque de dispositivos móviles primero llega al corazón de la simplificación de un sitio o interfaz para todas las resoluciones, grandes y pequeñas, eso simplemente no siempre es posible. En un momento crítico, sentimos que el proceso que llevamos a cabo ayudó a mejorar enormemente nuestro sitio en dispositivos más pequeños. Y en el proceso, nos hizo aún más conocedores de la compatibilidad con varios dispositivos con una única base de código.

(cp) (ea)

Deja un comentario