Diseño web móvil 10 consejos para una mejor usabilidad

Se espera que la navegación web móvil se convierta en la próxima gran plataforma de Internet. Ahora es fácil navegar por la red desde casi cualquier lugar, utilizando dispositivos móviles que caben en una mano debido a la tecnología. Al ser corto en la implementación de la buena usabilidad en el diseño web móvil, es difícil navegar por varios sitios web móviles populares. El diseño para dispositivos móviles debe ser más simple que su sitio web estándar y más basado en tareas para realizar el trabajo porque los usuarios buscan algo específico y urgente.

Debe tener en cuenta cómo usar el mínimo espacio disponible para sus principales contenidos y permanecer interesante para los usuarios móviles. Evite las imágenes grandes y las animaciones flash, ya que ralentizará su sitio. Recuerde que la funcionalidad es más importante que el estilo para los sitios web móviles. Si su sitio web no está codificado y diseñado correctamente, podría verse mejor en un teléfono, peor en otro o peor, sin mostrar nada. Pruebe, valide y verifique si es compatible con todos los dispositivos móviles.

Para ayudarlo a crear un sitio web que sea accesible no solo en computadoras de escritorio o portátiles, sino también en dispositivos móviles, aquí hay algunas cosas que debe considerar en el diseño web móvil con imágenes de muestra junto con el enlace directo de la versión del sitio web móvil..

1. Decidir sobre la resolución de la pantalla.

El mundo móvil contiene una rica variedad de consideraciones de diseño desde diferentes tamaños de pantalla y resolución a una variedad de formas. Trate de lograr un equilibrio entre el ancho de pantalla suficiente y el tamaño de la audiencia. Averigüe las especificaciones de los dispositivos móviles actuales y use su mejor criterio. Lo que supone un desafío para los desarrolladores móviles es la manera de lograr que uno se muestre de manera adecuada en una gama de tamaños de pantalla sin tener que recrear páginas para diferentes plataformas..

Aquí hay una lista de resoluciones web populares en dispositivos móviles a partir de febrero de 2011 presentada por Uxbooth.com con su artículo publicado., Consideraciones para el diseño web móvil (Parte 2): Dimensiones, por David Leggett. El autor explica algunos puntos sobre las dimensiones de la pantalla y las soluciones para el diseño del diseño..

2. Divida las páginas web en pequeñas porciones.

Las secciones extensas de texto pueden ser difíciles de leer, por lo que colocarlas en varias páginas limita el desplazamiento en una dirección. Deshazte del contenido de baja prioridad. Se adhiere a una sola columna de texto que se ajusta para que no haya desplazamiento horizontal.

Para el ejemplo a continuación, la versión del sitio web móvil de CBS News muestra solo la sección de noticias principales y divide los artículos de noticias en pequeñas porciones. Mientras que Treehugger se presenta con sus artículos recientes y los últimos tweets con algunas de las características del sitio web completo. Ambos sitios hacen que el usuario haga clic en un enlace de texto para ver el resto del artículo.

Noticias CBS

Treehugger

3. Simplificar el diseño.

La simplicidad equivale a la usabilidad. Permítales moverse por el sitio sin dificultad. Evite la inclusión de tablas, marcos y otros formatos. Si usa el relleno, recuerde que debe mantenerlo en un mínimo absoluto mucho menor que el que usaría para una página web normal. En comparación con las computadoras de escritorio, cuanto más haga clic en los enlaces en los sitios web para dispositivos móviles, más esperará debido al tiempo de carga. Con eso, debe simplificar y simplificar su sitio web con el equilibrio entre el contenido y la navegación..

En nuestro ejemplo, el sitio web de la versión móvil de Best Buy enumera solo las categorías de productos más importantes que reducen el nivel de jerarquía del contenido. Mientras que la página de inicio móvil de YouTube muestra solo los cuatro últimos videos de Spotlight.

La mejor compra

Youtube

4. Opción para ver el sitio web completo.

Proporcione un enlace para que sus visitantes móviles vuelvan a su sitio web completo para que el usuario pueda encontrar y ver el resto del contenido y las funciones a las que solo tiene acceso la versión de escritorio del sitio. Sus espectadores seguramente harán mucho desplazamiento vertical, así que ayúdelos con los enlaces "Volver al principio" para que puedan saltar a la parte superior de la página..

Como ejemplo, Ars Technica tiene su botón de enlace al sitio web estándar ubicado en el encabezado. Mientras que los Shangri-La tienen su enlace al sitio web completo colocado en el pie de página.

Ars Technica

Shangri-la

5. Colocación de navegación.

Conozca a su público y sea consciente de lo que está buscando. Descubra cómo querrán navegar su sitio. Coloque su menú de navegación debajo del contenido si sus usuarios móviles objetivo desean ver el cambio de contenido rápidamente. El contenido y el título deben ser visibles primero para no estorbar el contenido de la página. Para los usuarios que desean navegar en una categoría particular de inmediato, coloque la navegación en la parte superior de la página. A continuación se muestran varios ejemplos de ubicación de navegación utilizados en diseño web móvil.

D&G

Politico

Horóscopo diario

6. Usa enlaces de texto.

Su sitio web principal puede emplear menús extravagantes, rollovers u otros artilugios de lujo, pero es probable que un navegador móvil no lo haga. Tenga en cuenta que los elementos dinámicos de la página y los enlaces gráficos consumen recursos, así que opte por enlaces de texto bien etiquetados.

Una lista aparte

Reddit

7. Hacer una distinción entre el enlace seleccionado.

Mover el cursor hacia abajo desplazará la página y resaltará todos los enlaces a la vez. Por lo tanto, es importante asesorar claramente al usuario sobre qué elemento está enfocado. Esto se puede hacer cambiando la fuente y el color de fondo de los enlaces y botones o simplemente agregando algo de relleno alrededor de los enlaces para hacer que el área en la que se puede hacer clic sea más grande de 44px por 44px. Geek Squad y Diesel utilizaron fuentes grandes para hacer clic en el texto.

Geek clan

Diesel

8. Balance de enlaces

Cada descarga de página consume tiempo y recursos del sistema, el último de los cuales es escaso, así que trate de no forzar al visitante del sitio a que explore varias páginas para acceder a la información solicitada. Logre un equilibrio entre la cantidad de enlaces en cada página y la profundidad del sitio.

Flickr

Gorjeo

9. Reducir la entrada de texto del usuario

Es difícil ingresar texto en versiones móviles de sitios web. Reemplace con los botones de radio o la lista para que puedan optar por lo que necesitan con facilidad. Recuerde que los usuarios de teléfonos móviles no tienen acceso a un teclado y mouse convencionales. Cuanto más corta sea la URL, mejor porque es monótono escribir URL largas.

Para nuestro ejemplo a continuación, Fedex hizo uso de la lista de verificación y los menús desplegables. Mientras que Tumblr te hizo elegir tu idioma usando el menú desplegable.

Fedex

Tumblr

10. No pops ni refrescos.

Los navegadores móviles normalmente no admiten ventanas emergentes. Y si lo hicieran, tendrían un espacio muy estrecho para saltar. Manténgase alejado de su uso para evitar resultados impredecibles. Además, no tenga páginas que se actualicen periódicamente para evitar llenar la memoria limitada del dispositivo. Deje que el usuario actualice el contenido..

En una palabra

Sea creativo y aplique su diseño web móvil de una manera nueva. Haz que tu contenido sea lo suficientemente convincente y utilizable. Dale a tus usuarios lo que quieran, cuando lo quieran. Los usuarios no quieren profundizar en el sitio solo para encontrar lo que buscan en la web móvil.

¿Tienes algún sitio móvil preferido que realmente te haya inspirado? ¿Puedes compartir algunos de tus consejos de diseño web móvil? Haznos saber!

Otras lecturas

1. Diseño web adaptable (alistapart.com)
2. Haga su sitio móvil amigable (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. simulador de iPhone