Algunas buenas prácticas que deben guiarte en el diseño web responsive
Cuando el mundo se desplazó de las computadoras de escritorio a los dispositivos móviles, los diseñadores se centraron aún más en UX (User eXperience - Experiencia de Usuario). Aunque la interfaz de usuario juega un papel importante en la creación de diseños móviles amigables, la experiencia del usuario se ha hecho igualmente importante, sobre todo porque ahora tenemos más dispositivos que se centran en la experiencia del usuario y se diferencia con el tipo de dispositivo.
UX es algo que se extiende más allá de los límites de los gráficos y la estética. Como dice Rahul Varshney, el co-creador de foster.fm:
Una interfaz de usuario sin UX es como un pintor que arroja pintura sobre el lienzo sin pensar.
Rahul tiene razón con esta analogía. Podemos tener la versión de escritorio más atractiva, fácil de usar, única y funcional de nuestro sitio web, pero si no estamos tomando en consideración la experiencia móvil, estamos pintando sin pensar.
Por lo tanto, ¿qué separa una buena experiencia móvil de una mala? No es muy difícil separar los componentes clave que conforman un diseño altamente eficaz, optimizado y centrado en el usuario. Aquí hay algunas buenas prácticas que deben guiarte en el camino:
1) No descartes primero lo móvil
Si tu sitio web no está dirigido a UX móvil, es posible que desees romper la tradición siguiendo la estrategia "primero lo móvil". No hay problema en adoptar esta técnica cuando estés seguro que la mayoría de tus usuarios acceden a tu sitio web a través de un dispositivo móvil. Aunque codemyviews sugiere que el diseño web móvil no es un nicho hay, de hecho, "1.2 mil millones de usuarios de Internet móviles en el mundo" y el número no parece estar disminuyendo en el corto plazo (es probable que aumente en un futuro próximo). Esto puede ser un poco difícil al principio, pero si estás dispuesto a poner primero al usuario, vale la pena intentarlo.
El hecho de que te hayas encaminado a diseñar un sitio web sencillo, limpio, o centrado en el móvil no significa que no debería ser sofisticado. Karimrashid.com es un ejemplo perfecto de cómo la simplicidad y la sofisticación se pueden mezclar para la creación de un diseño limpio y sensible, pero elegante.
2) Crear diseños fluidos
Simplemente hay demasiados tamaños posibles de pantalla para escoger y elegir para cuáles podrías diseñar. Tendrás que crear un diseño que se adapte con la mayor fluidez posible a todos ellos. Por suerte, están aquí los diseños fluidos para salvarte el día!
Sobre la base de porcentajes en lugar de medidas definitivas como píxeles, los diseños fluidos se han convertido en el estándar entre los profesionales de la web. Pueden ser complicados, pero asegurarte de que el mayor número de personas posible puede utilizar realmente tu sitio bien vale la pena el esfuerzo.
3) Trata de ser funcional
¿Qué es la funcionalidad? Es lo que ofreces a tus visitantes para hacer cosas, y hacerlas rápido. Con base en el propósito de tu sitio web, todas las herramientas tales como tiendas cercanas, búsqueda de productos, reseñas de productos o conversores de monedas, deben ayudar a los usuarios a realizar las "funciones" que pretenden y lograr sus objetivos mucho más rápido.
Purina, un proveedor de alimentos para mascotas, es un ejemplo perfecto de cómo hacer más fácilmente "funciones" en una página web. La página principal tiene un cuadro de búsqueda donde se puede encontrar lo que estás buscando. A continuación se presentan dos columnas separadas para el tipo de alimentos de origen animal en que se especializan. Todo el sitio es fácil de navegar con elementos columna, botones, herramientas y diseño que hacen fácil decidir sobre el mejor tipo de alimento para mascotas - y luego comprar.
4) Identifica tus usuarios
No trates de convertirte en un aprendiz de todo, porque te puede costar un usuario típico, y nadie quiere eso. Primero averigüa quiénes son los usuarios. Luego averigüa su comportamiento típico de navegación web. Una vez que lo tienes analizado, averigüa lo que le motiva. Los usuarios modernos son de dos tipos principales: los que están navegando sin un objetivo en mente y aquellos que están buscando realizar una tarea. Cada uno de estos grupos requerirá diferentes "funciones" en función de sus necesidades.
No es difícil adivinar la demografía de los usuarios del sitio web de The Body Shop ya que deja pistas por toda la página. Dado que The Body Shop está muy centrado en "ingredientes naturales" y el activismo social, las variaciones verdes monocromáticas, un slider de ingredientes naturales, opción "verde" de las imágenes, además de informes sobre comercios, prendas y otros eventos sociales justos, es comprensiblemente un bien desarrollado concepto de diseño.
5) Comprobar siempre las bibliotecas y directrices del desarrollador
Basado en la plataforma que vayas a utilizar, es esencial echar un vistazo de cerca a las directrices de interfaz de usuario. Algunas plataformas permiten más flexibilidad que otras. Cualquiera que sea el caso, deben permanecer algunos componentes clave de marca o "firmas".
Un desarrollador de aplicaciones Apple debería echar un vistazo a iOS Human Interface Guidelines y seguir las normas de Apple cuando se trata de conceptos básicos de diseño, estrategias de diseño, elementos de la interfaz, diseño de icono/imagen, etc. El desarrollador de Android, por el contrario, debe aprender todo acerca de los componentes, el estilo, la facilidad de uso y el diseño de las aplicaciones típicas de Android con la ayuda de la Android developers guide.
6) Hacer todo el contenido disponible a todos los usuarios
Algunos diseñadores, en lugar de hacer todo su trabajo de contenidos en los diseños fluidos, simplemente optan por ocultar parte de él a los usuarios móviles. A veces es porque el diseño es complicado, o sienten como que hay demasiado contenido para un diseño móvil. Este es un enfoque equivocado.
Dar a los usuarios una versión "despojada" de tu sitio o aplicación no sólo es injusto para los usuarios móviles, sino que puede ser contraproducente y perder clientes. Puede que tengas que simplificar el diseño hasta el extremo, mover algo de contenido a otras pantallas para reducir el desorden, o simplemente tratar de organizar todo mejor, pero necesita estar allí.
Compara la versión de escritorio del sitio de la BBC con la versión móvil. Mientras que es más simple de lo que solía ser, todavía pone todo tipo de información por toda la pantalla. La versión móvil, por el contrario, elimina algunas de las imágenes (que aún están disponibles en los propios artículos), pero mantiene todos los titulares, lo que simplifica dramáticamente la experiencia en una pantalla del tamaño de un teléfono.
7) Diseña para el tacto
También es útil tener en cuenta el hecho de que un usuario de dispositivos móviles va a utilizar los dedos en lugar de punteros de ratón con menos precisión amigable. Tu diseño debe ser fácil de navegar con los dedos de todos los tamaños y formas, teniendo en cuenta todos los dispositivos móviles de pantalla táctil. Un usuario no debería tener que pellizcar demasiado o hacer un zoom para ampliar algo o llenar un formulario o tocar en un botón. Golpecitos inexactos también son muy comunes en los pequeños dispositivos que deben tenerse en cuenta en el diseño con entradas o gestos táctiles suficientemente grandes como para hacer el trabajo.
Aquí hay una touch table por Peter-Paul Koch que podría ayudar. Observa cómo pueden variar los eventos táctiles (y otras acciones) dependiendo de la compatibilidad del navegador y el dispositivo.
8) Utiliza herramientas de compresión
En la actualidad es insondable la cantidad de herramientas disponibles para hacer menos gravoso el trabajo de un diseñador. Encontrarás compresores de script como HTML compressor o compresión Gzip que eliminan automáticamente los comentarios, espacios en blanco o código innecesarios. CSS minifier y CSS compressor y algunas herramientas más te permitirán concatenar código CSS y mejorar el rendimiento. La compresión de la imagen también es igualmente importante. Algunas que reducirán el tamaño de tus archivos .jpeg y .png mientras mantienen intacta la calidad incluyen EWWW Image Optimizer, smush.it, optiPNG y jpegtran.
Abajo un ejemplo de un diseño de portfolio muy sensible de RyJohnson. El sitio web está llena de espectaculares imágenes que no difieren de la versión de escritorio. El secreto para una carga rápida aquí es, sin duda, la optimización de la imagen.