Tema 4 Diseño web para dispositivos móviles.

 - Arquitecturas móviles.

 

Al iniciar un proyecto mobile no basta con tener claro el modelo de negocio, también deberemos preocuparnos de los aspectos más técnicos. Muchos proyectos móviles se desarrollan de forma ágil y a menudo comenzamos el desarrollo de aplicaciones sin tener la arquitectura interna muy clara. Debido a la amplia gama de soluciones tecnológicas disponible en el ámbito móvil, y la rápida evolución que sufren las empresas dedicadas al Mobile Business, es importante establecer ciertos aspectos técnicos para definir la arquitectura de la app antes de comenzar su desarrollo. A continuación, comentamos los 3 puntos a tener en cuenta en la definición de la arquitectura de la app antes de empezar el desarrollo.

 

Plataformas móviles

Dispositivo: Primero deberemos decidir para qué dispositivos queremos desarrollar nuestra aplicación. Lo más común al comenzar es centrarnos en los dos dispositivos más populares del mercado al que nos queramos dirigir. Al principio también es recomendable decidir si nos centraremos en smartphones o tablets.

Sistema operativo: ¿Para qué sistema operativo queremos desarrollar nuestra aplicación? Inicialmente lo haremos para las últimas versiones de OS y Android (o la que más nos interese). Si queremos desarrollarlo también para las versiones más antiguas debemos medir el coste adicional que esto nos supondrá y si realmente nos interesa.

 

Tecnología de la app

App o Web: Desarrollar una aplicación suele ser más complejo que crear una web. Por eso muchas empresas se conforman con la versión en HTML, mientras que otras prefieren aprovechar al máximo las capacidades del dispositivo móvil para poder ofrecer una experiencia más personalizada al usuario, en ese caso desarrollaremos una app. Es importante desarrollar las aplicaciones orientándolas a sus propias funcionalidades, en lugar de tratar de introducir todos los elementos de nuestra web en la misma. La aplicación y la web no deben ser la misma cosa.

Apps nativas o híbridas: Este suele ser uno de los puntos más debatidos en proyectos de desarrollo de apps. La respuesta dependerá obviamente de las necesidades del negocio, por lo que es recomendable realizar un análisis estratégico antes de tomar la decisión. Una app nativa es desarrollada en el lenguaje nativo de cada terminal, mientras que la híbrida consiste en una app que contiene el navegador web en su interior. Lo desarrollaremos con frameworks de desarrollo basados en lenguajes de programación web como son HTML o CSS.

Diseño responsivo:  Si hemos decidido crear un sitio web móvil, deberíamos aprovechar la oportunidad de crear una experiencia multicanal mediante la creación de un sitio web independiente del dispositivo. Gracias al uso de técnicas de diseño responsivo, podremos adaptar la experiencia del usuario en función de las capacidades del dispositivo y se podrá acceder desde ordenadores, tablets o móviles con la misma base de código.

Herramientas y frameworks

Herramientas nativas: Si estamos desarrollando una app, sea nativa o híbrida, deberemos utilizar varias herramientas nativas que son requeridas para cada una de las plataformas móviles. Asegúrate de comprobar las pautas de desarrollo para cada una de las plataformas con las que trabajes.

Plataformas de desarrollo: Con el objetivo de simplificar el desarrollo móvil, en los últimos años han surgido una gran variedad de plataformas con el objetivo de generar y mantener aplicaciones multiplataforma utilizando la misma base de código. Algunos ejemplos destacados de este tipo de plataformas son SAP, Syclo, jQuery Mobile, Appcelerator, Verivo Software, Dojo, Sencha, Adobe, Kony o Antenna.

Frameworks de desarrollo: La necesidad de soportar múltiples plataformas de hardware y dispositivos hace del desarrollo móvil algo complejo. Los frameworks son esquemas para el desarrollo de estas aplicaciones. Podemos considerarlo como una aplicación genérica, incompleta y configurable sobre la que podemos añadir las últimas piezas que construirán la aplicación específica que queramos. Existen distintos frameworks basados en HTML5 o JavaScript que te permiten la construcción de apps híbridas.

 

En definitiva, es importante definir la arquitectura de la app y tomar una decisión sobre todos los puntos que acabamos de comentar antes de comenzar a desarrollarla. Por eso mismo es importante conocer los fundamentos de programación y tecnología móvil a la hora de dirigir un proyecto o empresa mobile.

 

https://www.iebschool.com/blog/aspectos-tecnicos-desarrollo-app-mobile-marketing/

 

- Navegadores para móviles.

 

En toda aplicación es necesario contar con un menú de navegación que permita a los usuarios dirigirse a diferentes secciones y realizar diversas acciones. Crear un menú de navegación limpio y organizado puede ser difícil, la tarea se vuelve más compleja cuando se trata de una aplicación exclusiva para dispositivos móviles debido a las limitaciones que supone por el tamaño de pantalla. Como respuesta a las necesidades de los usuarios en estos dispositivos, han surgido diversos patrones para navegación en móviles a lo largo de los años. En este artículo revisamos los patrones de navegación más comunes y empleados en los dispositivos móviles.

 

Menú hamburguesa: Debido al limitado espacio de la pantalla en dispositivos móviles, el icono del menú hamburguesa es uno de los patrones de navegación más utilizados en la actualidad. Este útil icono de tres líneas indica que el menú se encuentra “escondida” y solo se activará cuando el usuario seleccione el icono.

Ventajas: Libera espacio de la pantalla de manera que el usuario se puede enfocar en el contenido principal. Puede utilizarse para organizar una gran cantidad de secciones en un espacio mínimo. Evita que los usuarios se sientan abrumados al minimizar las secciones disponibles.

Desventajas: Ya que el menú se encuentra minimizado se hace menos probable que los usuarios lo empleen. Sigue siendo visible, pero se concentrarán en otros elementos en la pantalla. Se requieren pasos extra para llegar a la sección deseada ya que se debe activar el menú para ver todas las opciones.

 

¿En qué ocasiones es usado efectivamente?

Ya que este tipo de patrón esconde el menú, no es muy efectivo en aplicaciones en donde el usuario continuamente necesita cambiar de sección como puede ser el caso de una tienda online que posee una gran variedad de productos. Pero este detalle no implica que este icono no es de utilidad, de hecho, puede ser de gran ayuda al usarlo como navegación secundaria como es el caso de aplicaciones dedicadas como Uber, en donde la mayor interacción se da en la pantalla de inicio y los enlaces asociados a ésta. El menú se emplea como una especie de adición en donde el usuario puede visitar opciones secundarias de navegación pues las acciones principales se pueden realizar sin necesidad de acceder a este menú.

 

Barra de pestañas: Este tipo de menú se ha visto inspirado en el diseño para ordenadores. Usualmente contiene unos pocos enlaces, todos ellos son de igual importancia y por lo tanto, se requiere un acceso directo hacia ellos. Aunque es posible que se coloque solo texto, también se pueden colocar iconos y texto para reforzar el mensaje de forma visual.

Ventajas: Comunica donde se encuentra el usuario pues el icono o enlace suele destacarse una vez seleccionado. De esta forma, el usuario comprende inmediatamente su posición actual. Siempre es visible sin importar que página o sección el usuario esté viendo.

Desventajas: Las opciones de navegación son limitadas. Aunque es posible colocar un mayor número de opciones en la barra al hacerla deslizable, los enlaces que no se encuentran visibles pierden importancia y dejaría de ser una navegación directa. En Android, colocar una barra de pestañas en la parte inferior puede ser problemático pues es allí donde se encuentran los controles de navegación propios del sistema operativo. Es mucho más sencillo que se toquen estos botones por error si se coloca en esta posición.

 

¿En qué ocasiones es usado efectivamente?

La navegación en pestañas es una solución perfecta para aplicaciones que poseen un número mínimo de opciones de navegación (hasta 5 sería el máximo) para que todas éstas puedan ser visibles en la pantalla de inicio. De esta manera, se activan en un solo toque, a diferencia del menú hamburguesa.

 

Botón flotante: Este botón circular literalmente flota en la interfaz. Se suele colocar en la parte inferior de la pantalla y es visible sin importar cuanto se desplace el usuario por la página. Cuando este botón es seleccionado, parece que se elevara o agrandara ligeramente. Es un elemento que se emplea comúnmente en el Material Design.

Ventajas: Ocupa un espacio mínimo en pantalla. Es un indicador de las acciones principales que deseas que tomen los usuarios. Capta la atención de los usuarios porque es un elemento que se encuentra en primer plano.

Desventajas: Ya que es colorido y se encuentra en un primer plano capta la atención de los usuarios y en algunos casos puede llegar a distraer a los usuarios del contenido principal de la aplicación. Puede bloquear contenido importante que los usuarios necesitan visualizar ya que se coloca en primer plano. De esta forma, el usuario debe desplazarse hacia abajo para poder ver la información oculta por el botón. Funciona solo con iconos. Debido a su forma, se ha optado por colocar solo un icono. Este icono puede variar según la aplicación, pero puede ser confuso para los usuarios ya que no ofrece contexto. Usualmente se utiliza con un lápiz o con un símbolo de suma, pero el significado puede variar enormemente entre diversas aplicaciones

 

¿En qué ocasiones es usado efectivamente?

Este botón se enfoca en las acciones usuales que puede tomar el usuario. Es una especie de indicador de lo que debe hacer el usuario o de las opciones disponibles, en ciertos casos. Por ejemplo, en una aplicación para reproducir música lo más común es que si se coloca un botón flotante, éste contenga el icono de “reproducir”. Ya que es llamativo, los usuarios no pueden evitar interactuar con él y pueden realizar acciones específicas en uno o dos toques en la pantalla.

 

Navegación de pantalla completa

Aunque todos los patrones descritos previamente se centran en minimizar el espacio empleado en pantalla, este tipo de navegación hace exactamente lo opuesto: ocupa toda la pantalla. De esta manera, el usuario se centra en la navegación hasta elegir una opción apropiada o interesante para él. Puede contener opciones adicionales que son reveladas una vez que el usuario ha seleccionado la sección que le interesa.

Ventajas: El usuario centra toda su atención en el menú una vez se ha activado. Puedes organizar información de forma coherente sin abrumar a los usuarios. Una vez que el usuario ha decidido a qué sección ir, puedes dedicar todo el espacio en pantalla en contenido específico para esa sección. Puedes organizar varios niveles de navegación e indicarlas mediante flechas o desplegables.

Desventajas: Te ves limitado a mostrar solo las opciones de navegación hasta que el usuario decida la sección que desea visitar.

 

¿En qué ocasiones es usado efectivamente?

Este tipo de navegación es ideal cuando los usuarios suelen limitarse a visitar solo una sección específica de la aplicación cada vez que ingresan. También si se cuenta con una gran cantidad de secciones en la navegación pues como se va revelando información poco a poco, se evita abrumar a los usuarios.

 

En conclusión, la navegación es un tema relevante, tanto en ordenadores como en móviles. Debido al espacio limitado de la pantalla, se han buscado opciones de navegación en móviles y se han desarrollado nuevos patrones que han podido sorprender a los usuarios en un primer momento, pero debido al uso de estos patrones en otras aplicaciones, se han podido acostumbrar fácilmente. En ciertos casos, es posible emplear diversos patrones en una sola interfaz. Por ejemplo, combinar el uso de pestañas de navegación con un botón flotante para destacar la acción principal que buscamos tome el usuario.

https://blog.aulaformativa.com/patrones-basicos-navegacion-en-moviles/

 

 

- Herramientas de diseño.

 

Los prototipos son una parte integral del proceso de diseño, ya que permiten la revisión de los conceptos básicos del proyecto en la etapa inicial de su desarrollo y compartir opiniones con el resto del equipo. Gracias a ellos puedes crear fácilmente una maqueta interactiva de un sitio web o aplicación móvil, que es capaz de identificar cualquier deficiencia en el flujo y la usabilidad del diseño antes de invertir demasiado tiempo ni dinero en su desarrollo.

 

Es importante, cuando comenzamos un proyecto, que el primer paso sea establecer una jerarquía en la información y el contenido para poder trasladarlo visualmente. De esta manera nuestro cliente podrá entenderlo y hacerse una idea de cómo estará estructurado en un futuro.

 

Justinmind: Justinmind es una herramienta de prototipado de sitios web, aplicaciones software y aplicaciones móviles que puede trabajar tanto con Windows como con Mac o también con iOs y Android. Existe una versión gratuita con la que puedes trabajar bastante bien, aunque el precio de la versión Pro no es muy elevado. La aplicación es bastante sencilla de usar y se divide en dos partes principales, los paneles dinámicos y los eventos. Los paneles dinámicos permiten poner varios elementos en la misma área, de esta forma podremos simular botones, cambios de pestaña u otros contenidos que cambian dinámicamente. Los eventos permiten indicar acciones sobre los elementos que tenemos en nuestro diseño.

In Vision: In Vision ha supuesto una revolución no solo en el mercado de las herramientas de prototipado sino también de gestión de un proyecto en general, desde las fases de creación de los mockups hasta el final del desarrollo. El valor que la distingue de otras herramientas es que es muy intuitiva tanto para el diseñador que la está utilizando como para el cliente. Entre algunas de sus características encontramos la de compartir y comentar un proyecto a tiempo real con el cliente. De esta forma el feedback llega de manera más rápida y más clara y los procesos se agilizan. Además, permite gestionar las versiones de tus proyectos sincronizando tus archivos de Photoshop o Illustrator con la aplicación de modo que resulta muy fácil no perderse en el entramado de carpetas y capas de los diferentes archivos. La versión de prueba deja probar hasta cinco proyectos. Si tu volumen de proyectos web es notable, merece la pena que te crees una cuenta de pago ya que cuando comiences a utilizarla te darás cuenta de que te aporta un valor añadido a tus proyectos.

Origami: Origami es una herramienta de creación de prototipos cuya propiedad es de Facebook y se utilizó para crear las maquetas de varias aplicaciones como Instagram, Messenger y Paper. Aunque se usa principalmente para aplicaciones de iOS gracias a su integración con Apple Quartz Composer, Origami también es compatible al desarrollo de prototipos interactivos en Android. Esta herramienta de prototipado ofrece un par de características muy útiles para la creación de prototipos interactivos, incluyendo plugins para Sketch y Photoshop, así como una extensa biblioteca completa con foros, tutoriales en vídeo y guías. Tiene una característica para exportar el proyecto a código que permite convertir tu diseño visual en ejemplos de código escritos para iOS, Android, o la web.

Proto.io:  Tanto para iOs como para Android, Proto.io es una muy buena herramienta para la creación de grandes aplicaciones. Su principal característica es que cuenta con un motor que permite crear animaciones para apps móviles a través de un timeline para poder definir cuánto durará la animación.

Fluid: Fluid es otra herramienta de prototipado compatible con Android e iOs muy eficaz para pequeñas aplicaciones. Con ella puedes diseñar el maquetado de las principales vistas de tu app, pero también puedes enlazar cada una de esas vistas a controles de otras, pudiendo así realizar una demostración interactiva muy cercana a lo que sería el resultado final. Además, en su editor cuenta con diferentes wireframes para las diversas plataformas. De forma gratuita puedes crear proyectos de hasta 10 pantallas. Luego deberás contratar alguno de los diferentes planes mensuales que ofrece.

Codiqa: Codiqa es una de las herramientas de prototipado de pago, extremadamente intuitiva ya que funciona con drag and drop. La tendencia de este tipo de aplicaciones es que ofrecen al diseñador cada vez más facilidades y simplicidad en su uso. Además, permite escoger recursos de entre la amplia biblioteca que posee o bien puedes importar tu propio código. Su ventaja es que una vez construyas el prototipo, lo podrás ejecutar en cualquier navegador o tamaño de pantalla, lo que te ahorrará mucho tiempo de gestión de peculiaridades de cada navegador. Finalmente, otra de las características de Codiqa es que permite compartir y ver las propuestas en tiempo real, así como generar el proyecto visualmente y con código.

Pixate: Desarrollada por Google, Pixate es otra plataforma de prototipado que permite a los diseñadores probar diseños móviles interactivos, animaciones y wireframes para dispositivos Android o iOS. En Pixate puedes crear diseños de interfaz en forma de capas y animaciones individuales de forma similar a la mayoría de los programas de diseño gráfico, a través de una simple función de arrastrar y soltar. Una vez que estés satisfecho con tu prototipo, puedes implementarlo y probarlo en un dispositivo Android o iOS. Una vez que pongas Pixate en marcha, echa un vistazo a la documentación y tutoriales ofrecidos online para aprender los fundamentos básicos de la creación de tu primer prototipo.

Marvel: Marvel es una herramienta fácil de usar válida para iOS y Android, que permite crear propotipos funcionales de manera rápida y sencilla a través de wireframes o bocetos. La aplicación permite a través de borradores, objetos insertados e incluso imágenes para presentar un diseño personalizado lo más parecido posible a la app que queremos crear.

Ninja Mock: Ninja Mock es una herramienta de nivel intermedio que permite mediante bocetos la creación de aplicaciones móviles y diseño de páginas web de manera totalmente gratuita. Una vez tengas clara la idea puedes comenzar a utilizarla en los sistemas operativos Android, iOS o Windows.

Axure RP: Axure RP cuenta con años de experiencia, y es conocida por sus complejas interacciones entre diseñadores y desarrolladores. Dentro de la lista es una de las opciones más complejas, pero también más completa. Mientras se tiende cada vez más a simplificar la interfaz esta herramienta ofrece el máximo control a los diseñadores, es por este motivo porque se desaconseja su uso a novatos en el sector.

Pop app: Pop app es una herramienta funcional y fácil de usar que permite utilizar la cámara del móvil para fotografiar bocetos en papel y dotarlos de interacción para navegar. Puedes utilizar la herramienta en los sistemas operativos que prefieras de iOS, Android y Windows phone.

Principle: Aunque en principio la aplicación Principle está especializada en animación, es capaz de realizar prototipos incluir un nuevo editor de líneas de tiempo. Es similar a Adobe After Effects o al Flash, entre sus ventajas es que posee dos líneas del tiempo y puede animar los objetos de las páginas. Si tus ventajas son la animación y el vídeo esta es tu herramienta.

UXPin: UXPin es un conjunto de herramientas que pretende mejorar la experiencia Usuario al máximo. Creada por diseñadores UX, permite la creación rápida y fácil de prototipos de forma ágil. Las mayores ventajas de utilizar UXPin son: poder colaborar y comunicarse con el equipo en todo el proceso de diseño en tiempo real, integrar versiones de documentos de nuestros archivos, demostrar las el proceso de diseño a clientes y recopilar sugerencias y comentarios.

Webflow: Webflow es una herramienta de prototipado creada para diseñadores independientes y freelance que además de diseño incluye otras muchas tareas. Una de sus grandes ventajas es que no requiere el conocimiento previo de código para utilizarlo, también incluye un CMS maestro y características de hosting con múltiples opciones de diseño. En una sola plataforma es capaz de ofrecer gestión y diseño, además con la herramienta es capaz de editar en tiempo real mediante una interfaz similar a Photoshop.

Adobe XD: Entre las últimas incorporaciones de Creative Cloud de Adobe encontramos Adobe XD, una herramienta destinada a la creación de prototipos para hacerse con el mercado Sketch. Aunque es joven pronto será un fuerte competidor en este tipo de herramientas.

Framer: Está herramienta de prototipado está más destinada a los usuarios que trabajan con Apple y requiere unos conocimientos más avanzados para aprovechar al máximo su potencial. Pero una vez controlada podrás manejar el lienzo a tu gusto. Otra ventaja que tiene es también se integra con Sketch.

Flinto: El elemento diferencial de Flinto son las transiciones. El formato de su editor permite manipular o ajustar cada elemento de transición más rápido y con menos esfuerzo. Por este motivo, es ideal para proyectos en los que necesita ajustar el paso de usuarios entre varias páginas, para controlar la velocidad de transición y previsualizaciones.

Whimsical: Es una herramienta basada en la web que permite la colaboración en tiempo real en la elaboración visual de aquellas ideas que se pueden tener en mente. Esta, ofrece tableros virtuales que permiten crear diagramas de flujo y estructuras de aplicaciones móviles y web.

Overflow: Con esta herramienta podremos convertir nuestros diseños en diagramas de flujo de usuario atractivos y que cuenten una historia.

Plant: Se trata de un tablero que permite poner en contacto diseñadores. Sus características la hacen única porque podemos invitar a los diseñadores a un proyecto y sincronizar los cambios entre ellos, para ver cómo este avanza. Además, permite enviar solo unas determinadas mesas de trabajo o todas, y permite ver la diferencia entre dos versiones distintas del proyecto.

Sketch: Se trata de un kit de herramientas de diseño pensado para ayudarnos a crear un mejor trabajo, desde que se tiene una idea, hasta que conseguimos terminar el diseño final. Mediante una interfaz intuitiva y potentes plugins creados por una comunidad de desarrolladores, nos ayuda a centrarnos para sacar adelante complicados proyectos.

Figma: Figma permite diseñar y crear prototipos, así como, recopilar comentarios o notas sobre los proyectos. Esta es la primera herramienta de diseño de interfaz basada en el navegador, lo que facilita a los equipos la creación de software.

Zeplin: Se trata de un espacio conectado para los equipos de producto. En ella podemos encontrar desde diseños de transferencia y guías de estilo con especificaciones precisas, hasta fragmentos de código de forma automática. Su objetivo es facilitar el trabajo en el diseño de este tipo de documento. Además, para aquellas personas que trabajan en un solo proyecto es gratuita. En cada proyecto podemos ver las guías de diseño con información como paleta de colores, por ejemplo, así como un panel con pantallas que nos indica el tamaño, las notas y la distribución de los elementos. Dentro de Zeplin es posible establecer conversaciones con otros miembros del equipo.

 

https://www.iebschool.com/blog/herramientas-prototipado-analitica-usabilidad/

 

 

- Usabilidad.

 

 

UX son las siglas de “Uxer Experiencia”, que traducido significa Experiencia del usuario. En la UX influyen ciertos factores que en conjunto consiguen que el usuario disfrute con el uso del software y que en este post te vamos a contar, el manejo de la app debe ser intuitivo y con una curva de aprendizaje progresiva. El concepto de usabilidad se refiere a la facilidad con la que un usuario navega por un sitio web o app e interactúa con ella. Ni más ni menos.

 

¿Cómo podemos lograr la mejor experiencia para él usuario?

Optimiza el diseño: Un error típico tanto en las apps para móviles como en páginas webs, es el diseño de estas, ya que se suele dejar de lado la usabilidad en pos de un diseño muy atractivo. Estudiar las estructuras y los diseños de las apps o webs más famosas te ayudará a realizar un diseño atractivo y funcional, e implementar un diseño coherente con las tendencias y las estructuras interiorizadas por los usuarios.

 

Optimizar diseño para apps: Puedes ofrecer al usuario estructuras conocidas como la localización de menús y opciones principales, lo que facilitará el manejo desde el principio. Modificar la posición de ciertos elementos clave puede influir negativamente en la UX en apps móviles y proporcionar una experiencia negativa. Estudiar las tendencias de diseño te ayudará a desarrollar una app intuitiva y fácil de usar.

Ayuda a tu audiencia: Según un estudio de Google Analytics, un error básico es que no aparezca el menú de navegación en todas las partes de tu aplicación, siempre debes proporciónarle al usuario la libertad de desplazarse libremente. De esta forma puedes mejorar la usabilidad y el desplazamiento dentro de tu aplicación móvil, consiguiendo mejorar la experiencia. Ayuda al usuario normalizando el diseño, si empleas un color y forma para los botones no lo cambies de repente en una sección se coherente. Destaca lo importante y si un usuario tiene que hacer clic en un enlace, deja que lo sepa sin esfuerzo. Por último, utiliza imágenes, pero con cabeza, usar rellenos innecesarios puede empeorar la UX.

Velocidad y fluidez: La velocidad de tu app es muy importante, por tanto, optimiza la velocidad de carga, tanto de las imágenes y elementos visuales, como del código y recursos de la página. En la creación de apps móviles un factor que muchos desarrolladores no suelen tener en cuenta a la hora de pensar en UX en apps móviles es el consumo de energía. Optimizar el uso de la batería de los dispositivos ayudará a que tu app gane en experiencia de usuario, si el usuario observa que el consumo de batería aumenta debido a tu app no será muy agradable para él. El funcionamiento debe ser fluido y ágil, evitando en la medida de lo posible las esperas de carga.  Si necesitas realizar algún proceso que sabes que puede demorarse unos segundos para mostrar la información intenta ofrecerle algo interesante al usuario mientras espera, no aburras con el típico relojito dando vueltas. Tienes muchísimas herramientas para medir la velocidad de tu web o app, y con una rápida búsqueda encontrarás muchos sitios para poder analizar este dato.

No agobies a tu audiencia: Sabemos que quieres transmitirles mucho a tus usuarios, pero seguramente tu audiencia no esté conforme con que la bombardees con todo tipo de mensajes por todos los medios posibles. Video, pop-ups, ads, notificaciones push, animaciones o anuncios intermedios, son aspectos que molestan a los visitantes si no usan con moderación y pueden empeorar la experiencia de usuario o UX en apps móviles notablemente. Segmenta en la medida de lo posible el mensaje que haces llegar al usuario final, por ejemplo, si quieres vender moda de mujer ¿por qué ofertársela a hombres? Piensa un poco. La moraleja es conocer a los usuarios para ofrecerles lo que demandan y así mejorar su experiencia.

 

https://presupuestoapp.com/ux-en-apps-6-cosas-que-debes-tener-en-cuenta/

 

-- Scroll.

 

Listado de contenidos

A la hora de mostrar listados de contenidos, hay múltiples opciones. En función del objetivo que persigamos, será mejor optar por una opción u otra. A continuación, veremos tres posibilidades. Aquí podemos observar un listado vertical, el más convencional. Si este es el contenido principal de la página y bajo este listado no vamos a mostrar más contenidos, o no son relevantes, este tipo de listado es la mejor opción, ya que la navegación y visualización de las diferentes opciones es muy sencilla y rápida: con un ligero movimiento de dedo para hacer scroll vertical, el usuario puede ir viendo los distintos contenidos.

 

Sin embargo, puede haber situaciones en las que queramos mostrar muchos tipos de contenidos al mismo tiempo. En este caso, podemos optar por listados horizontales en los que el usuario debe hacer scroll horizontal para visualizar las distintas opciones. La ventaja que tiene es que podemos mostrar al mismo tiempo diferentes listados o contenidos: el usuario ve las distintas tipologías de listados que hay y visualiza las opciones de la que le interesa.

 

Como se observa en la imagen, para reflejar que existen más opciones en el listado horizontal se muestra la última cortada, así el usuario sabe que deslizando el dedo de forma horizontal verá más contenidos. Para reflejar esto, también podemos hacer uso de flechas a los lados del contenido, por ejemplo. No obstante, actualmente se utiliza más la opción anterior, dado que el movimiento a realizar con el dedo es más cómodo y porque las flechas no siempre se visualizan correctamente, en función del diseño de las imágenes, el contraste, etc.

 

Otra opción para mostrar diferentes contenidos es la que se observa en la siguiente imagen. Con unos bullets en la zona inferior, reflejamos que existen más contenidos y cuál estamos visualizando. Este recurso es especialmente útil para mostrar imágenes, ya que nos permite visualizar la imagen a lo ancho de la pantalla para darle más protagonismo, verla mejor y dejar libre el resto de la pantalla para mostrar otros contenidos, también relevantes.

Estos son algunos de los recursos que podemos encontrarnos a la hora de navegar con dispositivos móviles. En este punto, lo importante es que tengamos claro qué es lo que queremos contar a nuestros usuarios y asegurarles una navegación sencilla e intuitiva. Si la experiencia de nuestros usuarios es positiva, alcanzaremos mejores objetivos de negocio.

 

https://www.hiberus.com/crecemos-contigo/navegacion-movil/

 

-- Navegación.

 

Los usuarios de dispositivos móviles estamos acostumbrados a las interfaces de las apps de nuestros smartphones, es por eso que debemos conseguir que el diseño de nuestra web tenga un parecido a estas apps para que el usuario se encuentre en un entorno con el cual familiariza. En el desarrollo de aplicaciones para Windows Phone, Android o IOS, las interfaces están pensadas para navegar con los dedos y los botones, al igual que el diseño en sí, está pensado para que cualquier usuario pueda trabajar con ellas sin necesidad de haberlas usado antes. Consulta las tendencias de diseño en apps y mantente a la última para adaptarlas en tu web.

https://www.incubaweb.com/usabilidad-en-el-diseno-web-movil/

 

Diseña primero para móvil

La costumbre de todo diseñador es empezar por la versión desktop, pero con los nuevos algoritmos de Google esto tiene que cambiar y nos debemos centrar en el “mobile first”. Tu web debe verse bien en todos los dispositivos, pero hay que tratar de optimizarla muy bien para el móvil. Ya no sirve que simplemente sea “responsive”, hay que intentar que el visitante de la página llegue al objetivo en móvil haciendo el mínimo scroll posible. Adidas sabe bien cómo hacer esto, y en su “Above the Fold” (primera sección de la página principal) muestra varias llamadas a la acción, como la descarga de la app, el chat o botones que te llevan a la colección.

Di sí a los menús de toda la vida

Hubo una época en la que se puso de moda el famoso “menú hamburguesa”, y muchas webs siguen apostando por él. ¿Pero qué estamos consiguiendo con este tipo de menús? Estamos haciendo que los usuarios den un paso más en su proceso hacia nuestro objetivo final. Y esto puede hacer que perdamos a muchos de ellos por el camino. Hay que tratar de simplificarlo y facilitarle todo lo que necesita en cada momento de la forma más rápida posible (y no teniendo que dar clics de más).

https://www.inboundcycle.com/blog-de-inbound-marketing/tendencias-diseno-web-para-2020

 

Ejemplos de diseño de sitios web móviles

 

El objetivo es hacer que sus páginas sean atractivas y fáciles de usar, sin sobrecargarlas con demasiada funcionalidad e información. Si está buscando algunas ideas sobre cómo desarrollar un diseño web móvil eficaz, considere echar un vistazo a algunos de los sitios móviles de estas empresas.

 

El gigante tecnológico Apple ha hecho su misión crear un sitio web móvil que permita fácilmente a los usuarios investigar más sobre sus productos específicos. El diseño que siguen la mayoría de sus páginas con secciones es un patrón visual simple pero organizado que consta de un encabezado, subtítulo e imagen. Esta simplicidad ayuda a que las fotos dinámicas del producto tomen jerarquía, lo que lo lleva a su elegante diseño.

El sitio web móvil de Purple ayuda a centrar la atención del usuario en los diferenciadores de sus productos de dormitorio en comparación con los tradicionales. Sus secciones de héroe en cada página de producto muestran los cuatro hechos clave que debe saber si no lee nada más, y si eso lo atrae, puede continuar desplazándose para obtener más información. El color púrpura también está entretejido en imágenes de productos personalizados que muestran cómo sus artículos de dormitorio ayudan a mantenerte cómodo (¡porque si no muestras tu producto, no existe!). El proceso de pago también se simplifica para que los usuarios solo pasen unas pocas páginas para completar su compra.

Como otro sitio de comercio electrónico, Warby Parker hace un excelente trabajo al enumerar sus productos sin detalles excesivos y desordenados. Esto permite a los usuarios navegar centrándose en el estilo (que todos sabemos es lo más importante al comprar gafas), pero aún así les permite hacer clic en un producto para ver más detalles. Su menú móvil también sigue una tendencia similar, enumerando solo tres elementos principales (prueba, anteojos y gafas de sol) con imágenes en negrita para mostrar la prominencia de esos tres elementos del menú. 

El sitio móvil de Walt Disney Company se enfoca en organizar los hechos más corporativos / comerciales de la marca, pero no a expensas de una gran experiencia. Su menú móvil dirige fácilmente a los usuarios a aprender más sobre las iniciativas de la compañía, lo que lleva a páginas llenas de bellas imágenes, botones de colores y colores de fondo que se ajustan adecuadamente a la marca. En todo el sitio móvil, Walt Disney utiliza constantemente un diseño de tarjeta (que incluye una imagen, encabezado y texto de párrafo) en cualquier cosa que conduzca a un artículo. Esto les da a los usuarios un fragmento del contenido que leerían si hicieran clic.

El sitio web móvil de Domino se trata de facilitarle la tarea de completar su pedido en línea. Domino's hace esto al enfatizar sus botones de llamada a la acción (especialmente "ordenar ahora"), haciéndolos grandes y rojos para que no te sea difícil perderte.

Al realizar su pedido, Domino’s tiene un claro proceso paso a paso que comienza con la adición de sus artículos al carrito, seguido de la personalización, y finalmente realiza el pedido. Todo el proceso tiene lugar en un modo para que los usuarios puedan volver al menú cerrando la ventana emergente en caso de que desee realizar algún cambio en su pedido. Incluso tienen un robot de pedido móvil (llamado Dom) que puedes usar para hacer tu pedido. Esto crea una experiencia súper única y tiene el potencial de ser más atractivo para aquellos que prefieren ordenar con un asistente (uno que no sea humano).

https://blogging-techies.com/21-mejores-ejemplos-de-diseno-efectivo-de-sitios-web-moviles-video/

 

-- Adaptación de contenidos en pantalla

 

La web móvil requiere saber condensar la información en espacios pequeños, primar la usabilidad y saber comprender qué es lo verdaderamente importante en una web. Hay una gran diferencia entre diseñar una página web que será visible en un ordenador y diseñar una que será visible en un dispositivo móvil. Esta diferencia es cuantiosa ya que no se puede establecer un formato específico para móvil, debido a la gran cantidad de modelos, tamaños y grandes diferencias de resolución en los diferentes tipos de dispositivos móviles. Ante esta situación, la mejor opción es que tomemos como referencia a la hora de diseñar nuestro sitio web para móviles, la mayor cantidad posible de dispositivos móviles, de tal manera que nuestro diseño pueda ser visto desde casi cualquiera de estos dispositivos. Para ello debemos asegurarnos principalmente de hacer un diseño adaptable, que pueda adaptarse a diferentes anchuras sin romperse o desaprovechar espacio. No ha pasado mucho tiempo desde que para promocionarte o promocionar tu negocio y estar al día, solamente necesitabas tener una buena página web. Ahora, con lo rápido que ha avanzado la tecnología, hace falta mucho más que eso, hace falta tener actividad en las principales redes sociales y, sobre todo, contar con un sitio web compatible con dispositivos móviles. Actualmente un alto porcentaje de las búsquedas en motores tales como Google y Yahoo, se hacen desde dispositivos móviles como iPads y smartphones, pero es muy bajo el porcentaje de los sitios web del mundo pueden ser visualizados en un dispositivo móvil sin ningún problema. Lo cierto es que la navegación web móvil no es una moda pasajera, se ha convertido en una necesidad casi absoluta para muchas compañías que intentan mantenerse en contacto directo con sus consumidores, llegando incluso a se ha llegado a considerar como el nuevo estándar de Internet, por lo que su desarrollo más allá de ser una consideración alternativa es una necesidad. En este artículo, vamos a centrarnos en cómo se puede crear una versión móvil de un sitio, a través de diversas opciones y técnicas básicas que nos llevarán a trazar un procedimiento especial.

 

 

Consejos para hacer mejor diseño web para móviles

Actualmente, la navegación web en teléfonos móviles es la plataforma más importante de acceso a Internet. Si tu aún no has creado tu propio sitio móvil, entonces hoy es el tiempo adecuado para empezar. La manera más fácil de construir un sitio móvil, es modificar un sitio web existente para que éste sea compatible y pueda ser visualizado adecuadamente en dispositivos móviles. Para lograr esto es necesario realizar varios cambios en términos de diseño, estructura y construcción. Por lo que recomiendo tener en cuenta algunos consejos que harán nuestro trabajo más simple, fácil y atractivo para los usuarios. No te preocupes si te resulta abrumador todo lo que implica tener una web compatible con móviles, siempre puedes recurrir a los servicios de una agencia de diseño, como la agencia de diseño web sevilla. Ahora, vamos con ello.

Tamaños de pantalla: Como hemos indicado, la resolución de pantalla cambia según el dispositivo móvil en el que vayamos a visualizar una web, por lo tanto necesitamos adecuarnos a un estándar de resolución para que la web móvil se adapte a la mayoría de pantallas. Es conveniente no poner mucha información en una pantalla. Se recomienda dividir el contenido de la página en pequeñas porciones fáciles de entender, resumir textos y hacer bien visibles las llamadas a la acción, tales como botones y enlaces.

Reducir los tamaños de los textos y el tamaño de las imágenes para que tu sitio web móvil tenga un correcto funcionamiento y sea rápido al cargar no es lo único que necesitas. También es importante que utilices imágenes adaptadas al tamaño del dispositivo y elementos visuales más sencillos.

Navegación vertical: Siempre utiliza una misma dirección para el scrolling, pues si ya es bastante incómodo manejar un scroll en doble dirección en una página web estándar, lo será mucho más en un sitio web móvil. Utiliza navegación vertical. Ser lo más claro posible en la navegación del usuario. Esto es muy importante. El usuario debe encontrar las mayores facilidades tanto en la navegación web como en el sentido de esta. Para ello, debemos tener muy clara la distribución del contenido en el desarrollo de la web, logrando el correcto equilibrio entre la estética y la funcionalidad. Desarrollar un diseño sencillo para facilitar el uso. Es muy importante que la visualización de la web en un dispositivo móvil sea simple y claro, pues esto significará que el usuario vea atractivo y fácil navegar por la web. Para hacer más ágil la navegación web en un dispositivo móvil, es conveniente que el usuario no se vea obligado a escribir texto. Trata de proporcionar los enlaces necesarios para evitar este tipo de situaciones, asegúrate de que todas las páginas están vinculadas a otras páginas, y si en realidad es un sitio para verse en un teléfono, haz que los enlaces a números realmente realicen una llamada. Lo recomendable es utilizar opciones de menú desplegable que muestren las diferentes alternativas de acceso a los diferentes niveles de la navegación web.

Diseño sencillo: Evita la sobrecarga de imágenes. Si utilizas menor cantidad de imágenes será mejor para tu sitio web móvil, ya que esto no solamente facilitará la rapidez de las descargas, sino también hará que las imágenes que si sean necesarias sean mucho más fáciles de ver. Darle al usuario la opción de poder volver a la página inicial de la web, haciendo clic en un botón que aparecer en cada página a la que acceda. Esto hará que el usuario retome rápidamente el rumbo de la navegación en caso de haberlo perdido. Además, que el usuario pueda siempre diferenciar, por ejemplo, mediante un color diferente, los enlaces que ya haya visitado de lo que no, para que la navegación sea más clara y dinámica. Decide correctamente los colores que usarás. En una web estándar los colores son de importancia para resaltar el contenido de tu información, pero recuerda que la pantalla de algunos dispositivos móviles puede ser de bajo contraste y eso hará que los colores y, por consiguiente, tu sitio web no se visualice tal como lo esperabas. Asegúrate de que los textos y colores que utilizas son los adecuados y tengan un buen contraste.

Layout: El navegar por un sitio mediante un teléfono móvil puede requerir y consumir mucho tiempo, la pantalla es mucho más pequeña que en otros dispositivos, por lo que el usuario se puede desesperar si no llega fácilmente a la parte que él busca. Para evitar esta frustración, recuerda siempre poner toda la información más importante para los usuarios móviles, en la parte superior de la página. No te olvides de incluir el logotipo de tu empresa, o de tu cliente. Asegúrate de minimizar la navegación horizontal, ya que ésta es difícil de realizar en un teléfono, en lugar de esto, trata de organizar el contenido en una sola columna. También debes evitar el uso de tablas, pero si necesitas incorporarlas, no uses más de 2 columnas y evita las fusiones entre columnas y filas.

Tecnología universalmente compatible: WordPress. Asegurarnos que el desarrollo del contenido sea el adecuado. Debemos utilizar lenguajes de programación comunes y formatos de documentos conocidos por los usuarios, asegurarnos de la correcta codificación de los caracteres y utilizar hojas de estilo. No utilizar páginas emergentes (pop-us). Los navegadores móviles no soportan las ventanas emergentes y si así fuera, el espacio para mostrarlo sería muy reducido. Se recomienda no utilizarlos para la comodidad del usuario y para una mejor estética del diseño web móvil. La mejor recomendación en el apartado tecnológico es usar un CMS probado y fiable, como WordPress, ya que te aseguras en la mayoría de los casos que se ha hecho con buenas prácticas y no vas a tener problemas. WordPress es un CMS fácil de usar, ampliamente usado por millones de páginas web en el mundo y que te forece todo lo necesario para hacer una web que se vea bien en cualquier dispositivo. Como punto interesante de WordPress, es que tiene miles de temas gratuitos (diseños para tu web) y la mayoría de ellos ya se encuentran preparados para verse bien a cualquier resolución, ya que son desarrollos responsive.

AMP (accelerated mobile pages): Google está poniendo mucha importancia en que las páginas que se ven en los móviles carguen lo más rápido posible, casi instantáneamente. Llevan un tiempo dando mucha publicidad a un proyecto llamado AMP, que pretende precisamente hacer que sea rápido navega por la web desde un móvil sobre todo en condiciones de baja conectividad. En la web del proyecto explican cómo implementarlo, pero si usas WordPress no te preocupes, hay plugins muy buenos que lo hacen por ti.

Imágenes: La mayoría de los teléfonos móviles podrían tardar una eternidad en cargar imágenes pesadas. Es recomendable utilizar imágenes optimizadas para web, y trata de utilizar imágenes en formato jpeg, gif o png ya que estos archivos son los más ligeros. Asegúrate de comprimir tus imágenes para evitar el zoom, y haz uso del atributo alt para proporcionar un texto alternativo, el cual será de ayuda en caso de que el usuario tenga desactivado el despliegue de imágenes.

Implementa un diseño web responsive: El diseño web adaptativo ha recibido muchísima publicidad en los últimos años debido a sus grandes bondades. Este tema ha tomado tanta relevancia en los nuevos patrones de estructuración, que su aplicación se ha convertido en sinónimo de buena práctica. Es importante tomar el tiempo y crear un diseño que funcione bien con todos los dispositivos, así como rediseñar las imágenes para que se ajusten a una pantalla más pequeña. Como comentábamos, la mayoría de plantillas para WordPress son responsive y te van a ayudar muchísimo en esta tarea imprescindible hoy en día.

https://www.lawebera.es/diseno-web/diseno-web-para-moviles.php