Lecciones del diseño web móvil
El desarrollo móvil es furor y la industria interactiva se encuentra en una gran confusión a medida que llegan al mercado innumerables tabletas y teléfonos inteligentes.
El desarrollo de aplicaciones móviles recibe la mayor atención, mientras que la web móvil avanza un poco silenciosamente. Pero la web móvil está progresando cada día a medida que más y más desarrolladores lanzan interfaces optimizadas para dispositivos móviles.
Lo mejor de la web móvil es que está construida fundamentalmente con todas las mismas herramientas utilizadas en el diseño y desarrollo web tradicional.
Esto lo hace mucho más accesible que el desarrollo de aplicaciones. Además, muchos usuarios querrán visitar el sitio web de una empresa sobre la marcha, sin necesidad de una aplicación en toda regla.
Crear sitios web optimizados para dispositivos móviles es tan similar pero tan diferente al diseño para el escritorio. Ciertos factores adquieren un papel mucho más significativo. Por ejemplo, las variaciones en el tamaño de la pantalla, los intervalos de atención del usuario y los problemas de usabilidad son más críticos que nunca.
Estos mismos problemas siempre están presentes en el escritorio, pero a veces son más fáciles de pasar por alto. Aquí veremos algunas lecciones para aprender de la optimización que está sucediendo en la web móvil. Las lecciones pueden informar directamente cómo diseñamos y cómo pensamos sobre el diseño web tradicional y la arquitectura del sitio web.
Navegación simplificada en sitios web móviles
Una de las primeras cosas que se hace evidente al explorar sitios web móviles es la extrema simplificación de la navegación. La navegación no solo se vuelve muy prominente y central en un sitio web móvil, sino que también se reduce considerablemente para centrarse solo en los elementos más críticos.
Me parece sorprendente cómo la navegación de alto nivel se puede reducir a dos o cuatro elementos en la mayoría de los sitios web móviles. Por supuesto, reconozco que el contenido en un sitio web móvil a menudo se optimiza para la audiencia prevista. Por ejemplo, Iglesia del Tabernáculo de la Verdad tiene seis opciones en su navegación principal, solo una de las cuales ha entrado en la navegación para el version móvil ; y el que lo hizo ("Contacto") es el foco de toda la página de inicio.
El contenido que no llegó a la versión móvil es, por supuesto, completamente relevante. La interfaz móvil está destinada a atrapar a las personas que intentan encontrar la iglesia o verificar los tiempos de servicio o simplemente ponerse en contacto con ellos. Estos son los objetivos más probables del surfista móvil. Es probable que aquellos que visitan el sitio web completo en una computadora de escritorio deseen esas cosas, ya que quieren investigar la iglesia para ver si es el tipo de lugar que les gustaría visitar.
Entonces, ¿cuál es la lección para aprender? ¿Estas dos interfaces no se dirigen a audiencias totalmente diferentes y tienen propósitos totalmente diferentes? Quizás, pero podemos aprender mucho del enfoque extremo de la interfaz móvil. Observe cómo todo se trata de las acciones que puede tomar? La iglesia ha eliminado todos los elementos de navegación que se sienten como cajas para marcar.
Un elemento interesante es la opción de navegación "Acerca de" en el sitio web completo. El sitio web móvil puede estar optimizado para las personas que se desplazan, pero no hay ninguna razón para suponer que no les interesaría leer sobre la iglesia y sus creencias. Es posible que alguien le haya mencionado la iglesia de pasada, lo que le indica que busque en su teléfono.
Por lo tanto, la opción de navegación para este elemento debe cambiarse. ¿Qué pasaría si, en cambio, comunicara algo así como, "¿Qué debe saber sobre nosotros"? Aunque es un poco largo, refleja una actitud más útil. Un contenedor general "Acerca de" se siente como un lugar para contener toda la información que nadie lee. "Una guía de visitantes para nuestra iglesia" se siente mucho más útil y específica.
La simplicidad y el enfoque de la interfaz móvil muestra que todo debe tener un propósito para ganar un espacio en el sitio web. Si lo mismo fuera cierto para el sitio web completo, estaríamos menos dispuestos a llenarlo con contenido aparentemente importante y más inclinados a asegurarnos de que todo tenga una función clara.
Esto refleja una mentalidad muy orientada a las tareas. Cada opción desafía al usuario a tomar algún paso activo. Es como si todas las opciones pasivas hubieran sido eliminadas y reducidas a elementos accionables en el sitio web móvil. Esto nos lleva a la siguiente lección: estar extremadamente orientado a las tareas.
Los sitios web móviles están orientados a tareas
Con una mentalidad orientada a las tareas, reconsideremos el sitio web completo. Si bien la página de inicio está bellamente diseñada, el llamado a la acción es mucho menos evidente. El contenido está lleno de bits de información esperando que decidas estar interesado.
Por ejemplo, la gran pancarta que destaca un evento venidero no me llama a algún tipo de acción; muy pasivo Con una mentalidad orientada a las tareas, podríamos mejorar enormemente el llamado a la acción "Leer más". Esto podría ser tan simple como hacer que el llamado a la acción sea mucho más prominente; por ejemplo, un botón grande en una naranja que contrasta. Además, la llamada podría cambiarse por "Más información y registrarse".
Otro ejemplo es el mensaje de bienvenida. Aprecio la intención y el mensaje que se comunica aquí. El mensaje muestra que hay personas reales detrás del sitio web e intenta hacer que la página se sienta personal. Pero, de nuevo, diseccionemos esto con una mentalidad orientada a tareas. Un gran seguimiento de una presentación como esta sería una clara llamada a la acción que aliente a los visitantes a dar el siguiente paso. Después de todo, las únicas personas que leerán esto son los recién llegados. Los miembros actuales pasarán directamente a cosas como el calendario de eventos. Por lo tanto, ofrezca un punto de conversión para los usuarios, como "Háganos una pregunta difícil" o "Qué esperar cuando visite".
Por el contrario, la casilla "invitado especial" es fantástica. Aborda problemas clave y lleva a las personas a profundizar. Solo me pregunto si podría ser un elemento más destacado de la página. Una vez más, los miembros llegarán a donde necesitan ir; por lo tanto, centrarse en aquellos que son nuevos en el sitio web y la iglesia sería un gran paso para maximizar la oportunidad.
Sé que realmente estoy superando este sitio web, pero no es porque no me guste o porque no sirva para su función. Mi objetivo es solo desafiar nuestro pensamiento y nuestras nociones preconcebidas de cómo debe ser y hacer un sitio web. De hecho, recomiendo a esta iglesia por tener un sitio web hermoso y funcional, ¡con una extensión móvil para arrancar!
Los sitios web móviles reducen drásticamente su contenido
Otra lección obvia relacionada con reducir la navegación es que los sitios web móviles reducen invariablemente su contenido. No solo se reduce el número de opciones a la funcionalidad principal y el propósito del sitio web, sino que la copia también se reduce enormemente.
En algunos casos, gran parte de la copia se elimina por completo. Esto plantea la pregunta: ¿este contenido es necesario en el sitio web completo si la versión móvil funciona bien sin él? Divi Aruba es un gran ejemplo de esto. La atractiva publicidad de marketing presentada sobre la foto podría parecer un elemento imprescindible para la página de inicio, pero se ha visto afectada sitio web micro móvil .
En la versión móvil, el logotipo se coloca encima de la misma imagen y, sin embargo, transmite exactamente el mismo mensaje: si quieres ir a un lugar como este, sigue leyendo. ¿Por qué no utilizar este lugar destacado para llevar a las personas a la acción deseada? Seguramente los diseñadores saben cuál es el elemento más crítico para convertir visitantes en clientes. Ponga esta información a trabajar, y dirija a las personas allí con un llamamiento a la acción prominente en lugar de un discurso publicitario esponjoso.
Todo lo bueno, sin pelusa
Esto nos lleva a la siguiente lección: perder la pelusa. El siguiente ejemplo es una demostración positiva de esto. Viaje Tex es un sitio web de información de viajes para el estado de Texas. Tiene un propósito claro y una audiencia en mente. Afortunadamente, los diseñadores han abrazado por completo la mentalidad sin pelusa.
No solo el mini sitio web móvil ¡céntrese enteramente en el tema en cuestión y los elementos accionables clave, pero también lo hace el sitio web completo! Qué alivio ver casi sin pelusa en absoluto. Incluir algo lúgubres como la historia de Texas sería demasiado tentador. Si las personas quisieran una lección de historia, no vendrían a este sitio web. Será difícil encontrar contenido que no sea relevante para el propósito singular de este sitio web.
Adquiera el hábito de cuestionar todo. Esta es la única manera de reducir un sitio web a sus elementos críticos, que es exactamente lo que sucede en un buen sitio web móvil. Se toman decisiones difíciles y, de otro modo, se recorta el contenido valioso para agilizar el sitio web. ¡Llame a Fluff por lo que es y lo nukee!
La marca es el rey en la web móvil
Me refiero a la creatividad en la web. De hecho, muchos de los mayores cambios en la industria se han producido como resultado de una negativa a mantener el status quo. Pero hay un momento y lugar para todo. Muchos diseñadores usan sus tareas como una excusa para lanzar sus jugos creativos, con el único propósito de hacer algo creativo. Esto convierte el sitio web en un diseño para el diseñador, no para el cliente y sus necesidades. Esta es una de las cosas que la web móvil advierte con bastante audacia.
La marca es increíblemente consistente en la web móvil, y una de las partes más consistentes es la ubicación del logotipo. En los sitios web para móviles, no encontrará logotipos locos en la parte inferior con pies de página fijos. La funcionalidad es el rey, y los logos siempre aparecen en la parte superior. ¿Te imaginas golpear un sitio web móvil y no ver el logotipo de inmediato? Sin embargo, esto es un lugar común en muchos sitios web completos.
Aquí hay algunos sitios web que, aunque son minimalistas y carecen de un estilo alucinante, son ricos en marcas que no se pueden perder.
La lección aquí puede tener un profundo impacto en la forma en que aborda su trabajo y en el valor fundamental que representa para sus clientes. Para cada diseñador que se da cuenta de que las necesidades del cliente deben ser su propósito completo para el proyecto, hay otro que quiere mostrarle al mundo lo creativas y originales que son.
Al igual que cualquier otra persona involucrada en la producción de un sitio web, el diseñador web debe ser solidario al servir al cliente, ayudar a su negocio y mejorar el resultado final. Con cada elemento que coloca en un sitio web móvil, considera su función y el beneficio que traerá. Aplica esta mentalidad a todo lo que haces, y pronto encontrarás un fuerte aliado en tu cliente.
Cuanto más adoptemos las necesidades del cliente y hagamos todo lo posible para aportar valor a su sitio web, más podremos ver un cambio fundamental en nuestro trabajo. Pasaremos de construir "cosas interesantes" a mirar todo desde la perspectiva del cliente. ¿Esta característica puede aumentar sus ganancias? ¿Cómo se puede cambiar el diseño para mejorar su negocio? Si un subproducto de su trabajo es más dinero para el cliente, entonces encontrará la oportunidad en todas partes.
Sitios web sin los trucos
Uno de los mayores logros de la web móvil es la falta total de trucos. Para ser justos, hay un momento y lugar para los trucos en la web. De hecho, les dedico secciones completas de mis libros. Pero la falta de trucos en los sitios web móviles demuestra que estas ideas aparentemente grandiosas no tienen ningún propósito real.
Todo lo que sucede en un sitio web móvil debe pasar por varios filtros. ¿El contenido es relevante y completamente útil? ¿El contenido es crítico y sirve al propósito principal del sitio web? ¿El sitio web es fácil de usar y comprender? ¿La navegación es poco convencional? Si es así, ¿es crítico para la función del sitio web? La respuesta puede ser sí, pero la mayoría de las veces será un no decisivo.
Algunos trucos que están notablemente ausentes en el desarrollo de dispositivos móviles son pantallas emergentes, navegación inusual, animaciones sin sentido e interactividad, regiones de desplazamiento en línea, diseños impares y diseños de ancho fijo. La eficiencia de la web móvil es increíble.
Conclusión
Como puede ver, tenemos varias lecciones para aprender de la web móvil; particularmente, su capacidad para revelar elementos innecesarios de un sitio web. Como ocurre con muchas cosas en la vida, un ligero cambio de perspectiva a menudo nos abre los ojos al verdadero valor de las cosas que durante mucho tiempo hemos dado por sentado.
No estoy sugiriendo que hayamos perdido de vista el propósito de la web. Por el contrario, propongo que adoptemos una mentalidad mucho más estratégica.
Patrick McNeil es escritor, desarrollador y diseñador independiente. En particular, le encanta escribir sobre diseño web, capacitar a las personas en el desarrollo web y crear sitios web. El último proyecto del libro de Patrick es El manual de la web del diseñador ; incluye muchos temas en la línea de este artículo. Puede obtener más información al respecto en TheWebDesignersIdeaBook.com . Sigue a Patrick en Twitter @designmeltdown .
Esta publicación fue presentada por DudaMobile, un sitio web móvil empresa de creación.
¿Qué aspectos del diseño móvil tratas de traducir al escritorio? ¿Ves simplicidad y velocidad en la web móvil?