0

5 Tips para diseñar sitios web móviles que brinden una buena UX

En la actualidad, las personas encuentran los móviles muy prácticos no sólo para buscar información, productos y servicios, sino también para realizar compras. En este sentido, es muy difícil que una compañía sobreviva sin un diseño de página web compatible con dispositivos móviles, sabiendo que se realizan muchos tipos de compras por este medio.

Un reporte muestra que, pese al crecimiento fenomenal de usuarios de smartphones, el cambio de uso de páginas Web de escritorio a las móviles no ha sido de la misma forma. Este estudio revela que 45% de los negocios encuestados no contaban con una página Web adaptiva (responsive) móvil. Dichos negocios están luchando para mantener a sus clientes, cuando otras empresas, que ya cuentan con estas páginas web, le dan la facilidad de que los mismos compren con solo un “toque”.

1. El diseño tiene que ser  “Adaptable”

Se tiene que considerar este punto al crear páginas Web para dispositivos móviles, los cuales tiene pantallas mucho más pequeñas que la de un monitor, como ya te habrás dado cuenta. Un diseño adaptable  (o RWD Responsive Web Design por sus siglas en inglés) es aquel que, como su propio nombre dice, se adapta los distintos tamaños de pantallas, de una computadora de escritorio y celulares. No hay necesidad de tener dos páginas Web cuando este diseño se adapta a ambas versiones de una misma página Web.

01_tips_diseño_adaptivo_páginas_moviles

 

2. Conoce las limitaciones de los dispositivos móviles

Los usuarios de dispositivos móviles no usan un teclado completo o un mouse, lo que significa que dependen de sus dedos para tocar una pequeña porción de la pantalla del dispositivo. El diseño debe tener esto en mente. Para una búsqueda más fácil de enlaces, iconos, etc, estas deben ser más grandes. Los diseñadores deben crear un menú despegable para que sea más fácil navegar en estas páginas Web.

02_tips_diseño_adaptivo_páginas_moviles

3. Coloca la información importante en la parte superior

Los usuarios móviles no pueden acceder a toda la información de una página en un instante. Solo ven una pequeña parte del sitio y esto hace que vean tu información más importante inmediatamente. Por ejemplo, si tienes un restaurante, a los usuarios les gustaría ver el menú con rapidez. Por ello, tu menú para el almuerzo, cena, postres y bebidas deben ser visibles antes de que brindes cualquier otra información. Busca qué detalles son los más importantes y colócalas en la parte superior.

03_tips_diseño_adaptivo_páginas_moviles

4. Usa iconos y botones que llamen a la acción (CTA)

Debido a que el sitio Web móvil tiene un área pequeño para las presentaciones, es imperativo que uses iconos para evitar que dicho sitio luzca muy saturado. Los botones CTA (Call-to-action) son altamente recomendados para guiar al cliente hacia los lugares más importantes de tu sitio Web.

Usar estos iconos o los botones CTA ayuda a los usuarios a relacionarse más con los dispositivos móviles y les permite navegar en tu página Web con facilidad.

04_tips_diseño_adaptivo_páginas_moviles

5. Usa imágenes optimizadas

La velocidad del Internet es, con frecuencia, más lenta comparada con las bandas anchas de las laptop o desktop; por ello es importante que las páginas Web móviles sean optimizadas. Una de las primeras cosas que un diseñador deber ver mientras optimiza la velocidad de una página Web son las imágenes.

Debido a que las resoluciones y proporciones de los dispositivos son considerablemente más bajas, de 240×320 a 2560×1440, las imágenes deben ser redimensionadas, cortadas o cambiadas a las resoluciones y proporciones mencionadas. Las librerías JavaScript y los archivos Jquery deben ser remplazadas solo con JavaScript.

05_tips_diseño_adaptivo_páginas_moviles

 

Artículo Cortesía de Staff Creativa – Agencia de Diseño Web en Lima, Perú
Descarga este artículo en PDF

Tags:
Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /web/htdocs/www.uxinperu.com/home/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273