El enfoque móvil primero es exactamente como suena: diseñar para la pantalla más pequeña y avanzar. Es una de las mejores estrategias para crear un diseño ya sea responsivo o adaptativo .
- El enfoque móvil primero es un principio de mejora progresiva . Es la ideología que el diseño móvil, como el más difícil, debe hacerse primero. Una vez que se respondan las preguntas de diseño móvil, será más fácil diseñar para otros dispositivos. Todo se reduce a que, el más pequeño de los diseños tendrá solo las características esenciales, por lo que de inmediato ha diseñado el corazón de su UX.
- El enfoque opuesto es la degradación elegante . Esto incorpora todas las complejidades desde el principio y luego las elimina para dispositivos más pequeños. El problema con la degradación elegante es que cuando construyes el diseño integral desde el principio, los elementos centrales y complementarios se fusionan y se vuelven más difíciles de distinguir y separar. Toda la filosofía corre el riesgo de tratar el diseño móvil como una ocurrencia tardía, ya que se está «recortando» la experiencia.
Nosotros, junto con otros , recomendamos encarecidamente la mejora progresiva con un enfoque móvil primero. En esta publicación, explicaremos consejos y técnicas, luego terminaremos con una lección práctica en la que construimos un sitio web hipotético con el primer flujo de trabajo móvil.
Móvil-Primero = Contenido-Primero
Si su sitio es bueno en un dispositivo móvil, se traduce mejor a todos los dispositivos. Sin embargo, lo más importante es que un enfoque de dispositivos móviles primero es también un enfoque de contenido primero. Los dispositivos móviles tienen la mayoría de las limitaciones, el tamaño de la pantalla y el ancho de banda, por nombrar algunos, por lo que diseñar dentro de estos parámetros lo obliga a priorizar el contenido sin piedad.
El enfoque móvil primero conduce orgánicamente a un diseño que está más centrado en el contenido y, por lo tanto, centrado en el usuario. El corazón del sitio es el contenido: para eso están los usuarios.
Sin embargo, una advertencia es que los usuarios móviles a veces requieren contenido diferente al de los usuarios de escritorio. El contenido específico del dispositivo se puede medir teniendo en cuenta el contexto: qué, en una situación determinada y en un entorno determinado, su usuario apreciará más. La mejor manera de planificar con anticipación para esto es creando escenarios de usuario.
Otra ventaja del enfoque móvil primero es que los puntos de interrupción de pantalla pequeña pueden adaptarse mejor al contenido. Una vez más, la alternativa es peor: tener que exprimir un diseño ya voluminoso en un marco diminuto. Pero con el enfoque móvil primero, los puntos de interrupción se desarrollan naturalmente alrededor del contenido, por lo que no necesita ediciones incómodas.
El proceso de diseño móvil primero
Describiremos un proceso que ayuda a nuestros diseñadores en UXPin .
Como de costumbre, el wireframing es un primer paso recomendado para estructurar su diseño de la manera más eficiente. Cuando creamos wireframes o prototipos, usamos el menú de punto de interrupción receptivo para agilizar el proceso de pasar a diferentes tamaños de pantalla, comenzando con el más pequeño.
Estos ajustes preestablecidos diseñan el tamaño de pantalla adecuado para usted, por lo que puede estructurar el diseño teniendo en cuenta solo el contenido.
Nuestro procedimiento sigue estos pasos:
1. Inventario de contenido: se trata de una hoja de cálculo o documento equivalente que contiene todos los elementos que desea incluir.
2. Jerarquía visual: priorice los elementos en el inventario de contenido y determine cómo mostrar los elementos más importantes de manera destacada.
3. Diseñe con los puntos de interrupción más pequeños y luego amplíe: primero construya la estructura alámbrica móvil y luego utilícela como modelo para puntos de interrupción más grandes. Expande la pantalla hasta que haya demasiado espacio en blanco
4. Amplíe los objetivos táctiles: los dedos son mucho más anchos que los cursores de mouse con precisión de píxel y, por lo tanto, necesitan elementos más grandes para tocar. En el momento de escribir este artículo, Apple recomienda 44 píxeles cuadrados para objetivos táctiles. Proporcione a los hipervínculos mucho espacio y amplíe ligeramente los botones, y asegúrese de que haya suficiente espacio alrededor de todos los elementos interactivos”.
5. No cuente con los efectos de desplazamiento del mouse: casi no hace falta decirlo, pero los diseñadores a menudo confían en los efectos de desplazamiento y desplazamiento del mouse en su trabajo interactivo. Si estás pensando en optimizar los dispositivos móviles, no lo hagas. Todavía no hay control de desplazamiento para las yemas de los dedos.
6. Piense en una “aplicación”: los usuarios móviles están acostumbrados al movimiento y a un mínimo de control en su experiencia. Piense en la navegación fuera del lienzo , los widgets expandibles, las llamadas AJAX u otros elementos en la pantalla con los que los usuarios pueden interactuar sin actualizar la página.
7. Evite los gráficos grandes: las fotos apaisadas y los gráficos complejos no se muestran bien cuando la pantalla tiene solo unas pocas pulgadas de ancho. Atiende a usuarios móviles con imágenes que se pueden leer en pantallas portátiles.
8. Pruébelo en un dispositivo real. No hay nada mejor que descubrir por sí mismo qué tan usable es (o no) un sitio web. Aléjese de su computadora de escritorio/portátil y cargue su producto en un teléfono o tableta real. Toque a través de las páginas. ¿El sitio es fácil de navegar? ¿Se carga en el momento oportuno? ¿El texto y los gráficos son fáciles de leer?
Esto es solo un esquema básico. Para obtener la guía completa de nuestro proceso, descargue el Wireframing de contenido gratuito para el diseño receptivo .
Un tutorial de diseño móvil primero
Dado que los diferentes dispositivos necesitan diferentes diseños según el tamaño y la orientación de su pantalla, tiene sentido diseñar varios arreglos para sus usuarios. Por suerte, puedes crear tus propias variaciones adaptables o receptivas directamente en UXPin .
Establece tus prioridades de contenido
Un «enfoque móvil primero» se diferencia de «primero el escritorio» en que agregamos información a cada diseño progresivamente más grande en lugar de cortarlo a medida que diseñamos más pequeño. Pensar móvil no significa eliminar información. Significa clasificar la información en contenido primario, secundario y terciario.
En este ejemplo, sabemos que la página de inicio debe tener ciertos elementos, como el nombre de la empresa y enlaces a productos. Una publicación en el blog tampoco vendría mal. Pero como dijimos, no todo cabe en la vista de un teléfono inteligente, por lo que establecemos prioridades en función de lo que logrará el objetivo del sitio: vender bicicletas:
1. El modelo más nuevo de bicicleta.
2. La bicicleta más vendida
3. CTA «Encuentra tu viaje perfecto»
4. Nombre de la empresa e imagen de héroe
5. Navegación
6. Buscar
7. La segunda bicicleta más vendida
8. Certificados de regalo
9. Un testimonio
10. La última publicación del blog
En base a esa lista ordenada, podemos crear con la confianza de que nuestro trabajo resolverá un problema de diseño de conseguir ventas.
Vista de teléfono inteligente
¿Cuánto necesitan los usuarios?
Pensar primero en los dispositivos móviles nos obliga a pensar en lo que es realmente importante. En esta vista de teléfono inteligente, la bicicleta más vendida y el modelo más nuevo conducirán directamente a las ventas, por lo que podemos dejar otros artículos, como certificados de regalo, un modelo menos popular, las últimas noticias, para las páginas interiores. La última llamada a la acción es especialmente prominente y fácil de realizar con un solo toque del dedo.
Vista de tableta
A medida que diseñamos para una vista del tamaño de una tableta, podemos agregar mejor información secundaria como productos adicionales (por ejemplo, «El condensador»). También podemos expandir la navegación en la parte superior de la página y agregar contenido que fomente las ventas sin conducir realmente a ellas, es decir, el testimonio.
Debido a que hay más opciones disponibles, esto puede ser sorprendentemente más difícil que decidir qué incluir en la interfaz de usuario de un teléfono inteligente. La diferencia entre elementos secundarios y terciarios es una línea borrosa, y la tentación de incluirlo todo es fuerte.
Resiste la urgencia. Utilice la lista de contenido ordenado. Al igual que los teléfonos inteligentes, el espacio aún es limitado.
Vista de escritorio
Finalmente, la vista de escritorio puede admitir tanta información como usted decida que es importante. Aquí es donde la página de inicio puede acomodar toda la información que considere adecuada, ya sea que se ajuste o no. Observe algunos de los contenidos adicionales que hemos incluido:
- Certificados de regalo
- Recomendaciones de clientes
- Publicación de blog que explora la nueva bicicleta Lightning Bolt
Diseñe diseños apropiados para el dispositivo usted mismo
Si está utilizando UXPin , es bastante fácil crear diferentes diseños para estas vistas.
- Abra un prototipo UXPin.
- Toque «Agregar nueva versión adaptable» en la parte inferior derecha del editor UXPin
- Elija un tamaño preestablecido o ingrese sus propias dimensiones.
- No tienes que recrear todo desde cero. Elija un tamaño desde el que copiar los elementos de su diseño.
Y eso es. Cambie entre los puntos de interrupción tocando los diferentes tamaños sobre su lienzo y ajuste cada uno según sus necesidades. Si desea probar la creación de prototipos para dispositivos móviles usted mismo, continúe y comience una prueba gratuita en UXPin .
