8 maneras de optimizar su sitio para dispositivos móviles
Cuando el mundo pasó de las computadoras de escritorio a los dispositivos móviles, los diseñadores se enfocaron aún más en UX. Aunque la interfaz de usuario juega un papel importante en la creación de diseños optimizados para dispositivos móviles, la experiencia del usuario ahora se ha vuelto igualmente importante, especialmente dado que ahora tenemos más dispositivos para enfocarnos y la experiencia del usuario difiere 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. Al igual que Rahul Varshney, el cocreador de foster.fm , dice:
Una IU sin UX es como un pintor golpeando pintura sobre lienzo sin pensarlo.
Rahul estaba en lo cierto con esta analogía. Puede tener la versión de escritorio más atractiva, fácil de usar, única y funcional de su sitio web, pero si no tiene en cuenta la experiencia móvil, simplemente está pintando sin pensarlo.
Entonces, ¿qué separa una buena experiencia móvil de una mala? No es demasiado difícil separar los componentes clave que conforman un diseño altamente eficaz, optimizado y centrado en el usuario. Pero aquí hay algunas mejores prácticas que deberían guiarlo en el camino:
1) No descarte el primer dispositivo móvil
Si su sitio web está orientado a UX móvil, es posible que desee romper la tradición siguiendo la estrategia de "móvil primero". No hay inconveniente en adoptar esta técnica cuando está seguro de que la mayoría de sus usuarios accederá a su sitio web a través de un dispositivo móvil. Tal como codemyviews sugiere que el diseño web móvil no es un nicho, de hecho hay "1,2 mil millones de usuarios de web móvil en todo el mundo" y el número no parece estar disminuyendo en el corto plazo (es probable que aumente en el futuro cercano). Esto puede ser un poco desafiante al principio; pero si está dispuesto a poner a su usuario primero, vale la pena intentarlo.
El hecho de que haya intentado diseñar un sitio web simple, limpio o centrado en dispositivos móviles no significa que no deba ser sofisticado. Karimrashid.com es un ejemplo perfecto de cómo la simplicidad y la sofisticación se pueden combinar para crear un diseño limpio y receptivo, pero con clase.
2) Crear diseños fluidos
Simplemente hay demasiados tamaños de pantalla posibles para escoger y elegir para cuáles diseñar. Tendrá que crear un diseño que se adapte lo mejor posible a todos ellos. ¡Afortunadamente, los diseños fluidos están aquí para salvar el día!
Según los porcentajes, en lugar de mediciones definidas como los píxeles, los diseños de fluidos se han convertido en el estándar entre los profesionales de la web. Pueden ser complicados, pero asegurarse de que la mayor cantidad de gente posible pueda usar su sitio bien vale la pena.
3) Apuntar a la funcionalidad
¿Qué es la funcionalidad? Es lo que le ofrece a sus visitantes para hacer las cosas, y lo hace rápido. Según el propósito de su sitio web, todas las herramientas, como ubicaciones de tiendas más cercanas, búsqueda de productos, revisiones de productos o conversores de divisas, deberían ayudar a los usuarios a realizar las "funciones" deseadas y lograr los objetivos mucho más rápido.
Purina , un proveedor de alimentos para mascotas, es un ejemplo perfecto de cómo hacer que las "funciones" sean más fáciles en una página web. La página de inicio tiene un cuadro de búsqueda donde puede buscar lo que está buscando. A continuación hay dos columnas separadas para el tipo de alimento para animales en el que se especializan. Todo el sitio web es fácil de navegar con columnas, botones, herramientas y elementos de diseño que hacen que decidir sobre el mejor tipo de alimento para mascotas - y luego comprarlo - sea muy sencillo.
4) Identifica a tus usuarios
No trates de convertirte en un jodido comerciante, porque te puede costar un usuario típico, y nadie lo quiere. Primero averigua quiénes son tus usuarios. A continuación, descubra su comportamiento típico de navegación web. Una vez que se ha reservado, averigua qué los hace funcionar. Los usuarios modernos son de dos tipos principales: aquellos que navegan sin un objetivo en mente y aquellos que buscan realizar una tarea. Cada uno de estos grupos requeriría diferentes "funciones" basadas en sus necesidades.
No es difícil adivinar la demografía de los usuarios del sitio web de The Body Shop, ya que deja pistas en toda la página. Dado que The Body Shop está muy centrado en los "ingredientes naturales" y el activismo social, las variaciones verdes monocromáticas, un deslizador de ingredientes naturales, la elección de imágenes "verdes", así como informes sobre intercambios, promesas de contribuciones y otros eventos sociales es comprensible concepto de diseño bien desarrollado.
5) Siempre busque las bibliotecas y las pautas del desarrollador
Según la plataforma que utilizará, es esencial darle una mirada cercana a las pautas de la interfaz de usuario. Algunas plataformas permiten más flexibilidad que otras. Cualquiera que sea el caso, algunos componentes clave de la marca o "firmas" deben permanecer.
Un desarrollador de aplicaciones Apple debería echar un vistazo a Pautas de la interfaz humana de iOS y siga los estándares de Apple cuando se trata de diseñar conceptos básicos, estrategias de diseño, elementos de IU, diseño de íconos / imágenes, etc. El desarrollador de Android, por otro lado, debe aprender todo sobre los componentes, el estilo, la usabilidad y el diseño de las aplicaciones típicas de Android. con la ayuda de la Guía de desarrolladores de Android .
6) Haga que todo el contenido esté disponible para todos los usuarios
Algunos diseñadores, en lugar de hacer que todo su contenido funcione en diseños fluidos, simplemente optarán por ocultar parte de los usuarios de dispositivos móviles. A veces se debe a que el diseño es complicado o sienten que hay demasiado contenido para un diseño móvil. Este es el enfoque equivocado.
Ofrecer a los usuarios una versión "reducida" de su sitio o aplicación no solo es injusta para los usuarios de dispositivos móviles, sino que puede ser seriamente contraproducente y perder clientes. Puede que tenga que simplificar el diseño hasta el extremo, mover el contenido a otras pantallas para reducir el desorden, o simplemente tratar de organizarlo todo mejor; pero tiene que estar allí .
Compare la versión de escritorio del Sitio de la BBC a la versión móvil. Si bien es más simple de lo que solía ser, todavía coloca todo tipo de información en toda la pantalla. La versión móvil, por el contrario, elimina algunas de las imágenes (que todavía están disponibles en los artículos), pero mantiene todos los titulares, simplificando dramáticamente la experiencia en una pantalla del tamaño de un teléfono.
7) Diseño para el tacto
También es útil tener en cuenta el hecho de que un usuario de dispositivo móvil utilizará los dedos en lugar de punteros de mouse de precisión amigable. Su diseño debe ser fácil de navegar con los dedos de todos los tamaños y formas, teniendo en cuenta que todos los dispositivos móviles ahora son de pantalla táctil. Un usuario no debería tener que pellizcar demasiado o acercarse para tocar algo o completar un formulario o tocar un botón. Los grifos inexactos también son muy comunes en dispositivos pequeños que deben tenerse en cuenta en el diseño con entradas táctiles o gestos lo suficientemente grandes como para realizar el trabajo.
Aquí está un mesa táctil por Peter-Paul Koch eso podría ayudar. Observe cómo los eventos táctiles (y otras acciones) pueden variar según la compatibilidad del navegador y el dispositivo.
8) Usa herramientas de compresión
La cantidad de herramientas disponibles hoy para hacer que el trabajo de un diseñador sea menos oneroso es insondable. Encontrarás compresores de script como Compresor HTML o Gzip compresión que eliminará automáticamente los comentarios innecesarios, el espacio en blanco o el código. Minificador de CSS y Compresor CSS y algunas herramientas más que le permitirán concatenar el código CSS y mejorar el rendimiento. La compresión de la imagen también es igualmente importante; algunos que reducirán el tamaño de sus archivos .jpeg y .png mientras mantienen la calidad intacta incluyen EWWW Image Optimizer , smush.it , optiPNG y jpegtran .
Aquí hay un ejemplo de un diseño de cartera altamente receptivo por RyJohnson . El sitio web está lleno de imágenes espectaculares que no difieren de la versión de escritorio. El secreto para cargar rápidamente aquí es, sin duda, la optimización de la imagen.
