Xperience Consulting

Estar a la vanguardia y ofrecer la mejor experiencia de usuario siempre ha sido nuestro objetivo. En Xperience; desde hace tiempo, estamos realizando proyectos donde crear webs sencillas, intuitivas, fáciles de utilizar y accesibles tienen como resultado crear experiencias únicas.

Este cambio y evolución parece estar ligado al avance e innovación que presenta la tecnología. Han sido la aparición de los dispositivos táctiles los que han ayudado a que la navegación sea más atractiva y emocionante para el usuario.
Si  navegar con estos dispositivos ya es toda una experiencia y tiene un componente diferencial, nuestro trabajo ahora es conseguir que esa interacción sea satisfactoria.

A continuación, en base a los proyectos que hemos realizado en este entorno; te presentamos 10 factores que no debes descuidar si quieres que la navegación de tu web, en los tan demandados dispositivos táctiles, sea un éxito.

1.    Utiliza eventos estándar

El objetivo del uso de eventos estándar es hacer la navegación más fácil al usuario. Serán compatibles con la mayoría de dispositivos y los usuarios los entenderán de forma intuitiva.

Un ejemplo claro es la acción de tocar la pantalla con el dedo índice para abrir, seleccionar un objeto; o pellizcar la pantalla para reducir, estrechar el tamaño de una foto, documento…

2.    Evita los eventos hover

Los eventos hover y rollOver son poco recomendables para dispositivos táctiles y en todo caso dificultan la navegación.

Los dispositivos táctiles, por sus características técnicas, no pueden interpretar este tipo de eventos. Es más sencillo optar por no utilizarlos y posteriormente añadirlos para una versión adaptada a Web.

3.    Evita los controles indirectos

La navegación por controles indirectos es menos intuitiva/natural y más compleja.

Si los usuarios aceptan como evento estándar arrastrar el dedo índice hacia la derecha para desplazar o mover un objeto no necesitamos enseñarles una nueva forma de hacerlo (un nuevo aprendizaje); pues les causará incomprensión y se sentirán frustrados.

4.    Áreas de interacción mayores

Es importante que las áreas de interacción sean grandes; para facilitar la navegación, especialmente para que las personas mayores o con alguna discapacidad motriz leve puedan acceder a la página web de forma fácil y sin esfuerzos.

Hacer la web accesible a todos los públicos es uno de los principios básicos en materia de usabilidad.

5.    Lo que no ve el usuario

El usuario nunca ve la pantalla completa ni desde el mismo ángulo, por pequeña que sea.
Por ello es importante hacer visible la información, huir de la competencia visual, agrupar los elementos relacionados o centrar la información dentro de su campo visual.

6.    Dónde interactúa el usuario.

El usuario solo interactúa en parte de la pantalla: la que está a su alcance al sujetarla o utilizarla.
Situar los elementos de interacción con el usuario cerca de su capacidad de acción es una ayuda para mejorar la facilidad de uso.

7.    Los mensajes al dedo

El mensaje será visible si aparece justo donde pulsamos y será más difícil de ver si queda oculto por nuestra mano.
Debemos hacer la información encontrable para el usuario; sino pasará desapercibida.

8.    Ten en cuenta el contexto

En este punto debemos aclarar la diferencia de contexto de uso entre un dispositivo móvil, como puede ser un iPhone y un ordenador, como puede ser un iPad.

El iPad se suele utilizar en sitios cerrados; por eso no encontraremos tantos problemas o inconvenientes de contexto a la hora de visualizar la página correctamente como nos podría pasar con el  iPhone, al ser utilizado en cualquier lugar indistintamente.

El reflejo del sol o el uso de guantes pueden ser impedimentos a la hora de navegar o acceder a nuestra web. Las vibraciones o el estar en movimiento dificultan también la navegación y el tiempo de permanencia en la página.

9.    El scroll es más cómodo que las capas.

El scroll siempre es más cómodo que las capas; además en este caso, desplazarse por una pantalla táctil es más sencillo e implica menos esfuerzo por parte del usuario.

También es cierto que las zonas centrales son menos visibles con scroll.

10.    Comunicar el resultado es importante

Decir al usuario qué va a pasar, le ayuda a entender la acción.
Cuanto más claros seamos a la hora de indicar un cambio de estado, menos posibilidad de confusión habrá por parte del usuario.

Por ejemplo, la vibración al pulsar indica que se ha realizado la acción.

Si lo deseas, puedes descargarte el artículo en pdf
O si lo prefieres, también puedes leerlo en nuestro canal de slideshare haciendo clic aquí

Escribo este artículo porque creo firmemente que la forma en que vamos a navegar por Internet en un futuro cercano va a ser diferente a cómo lo hacemos ahora.

Los dispositivos táctiles se están abriendo paso muy deprisa y con ellos surgen nuevos aspectos a tener en cuenta a la hora de diseñar para este tipo de dispositivos.

Aquí os dejo 10 recomendaciones que nos pueden ayudar a mejorar la experiencia de nuestros usuarios cuando naveguen con un iPad en nuestra página web. De esta forma conseguiremos que nuestra página sea más eficaz en la consecución de sus objetivos.

1.    Podemos hacer un mayor uso del scroll

Con el iPad, al ser una pantalla táctil, desplazarse por la página es más sencillo. Por ello,  no debemos tener mucho reparo a la hora de incorporar información en la página principal; el usuario no se sentirá molesto si para acceder a la información (que le interesa) tiene que desplazarse y hacer scroll.

2.    Mayor separación entre enlaces.

Cuando diseñamos una página web para interactuar con un PC es importante que los enlaces no sean excesivamente pequeños; para que no suponga un esfuerzo excesivamente alto de precisión con el ratón, ni que las personas mayores o con discapacidad motriz leve queden excluidas de navegar por dicha web.

Pero con el iPad la situación es diferente.
Ahora,  aunque el enlace sea pequeño; si el dedo toca el área del enlace, la nueva página se abrirá sin problemas.

¡Ojo! El problema viene cuando dos o más enlaces se hayan muy juntos. En ese caso, el dedo no tiene la misma precisión que un ratón y a veces puede ser difícil atinar en el enlace correcto.

De todas formas, es verdad que siempre se puede ampliar la zona donde se quiere hacer click y una vez los enlaces se vean más grandes, hacer click en ellos. Sin embargo, esto no deja de ser un engorro para los usuarios.

3.    Resolución de las fotografías.

Con los dispositivos táctiles, cuando se desea ampliar una fotografía y verla más grande, el primer impulso es ampliar una zona determinada.
El problema es que muchas fotografías tienen una resolución muy baja y al intentar ampliarlas, puede perderse calidad de imagen y el resultado es una fotografía pixelada o borrosa.

Si se utilizaran fotografías de mayor resolución, se evitaría que en muchos casos tuviéramos que hacer un click adicional para aumentar su tamaño.

4.    Espacio para “scrollear”

En el iPad no existe barra de scroll, el scroll se realiza apoyando los dedos en la pantalla y desplazándolos hacia abajo. En muchos casos, te encuentras con que cada vez que pones el dedo en la página, pulsas un enlace (sin quererlo). Las fotografías son enlaces, el texto es un enlace… y no encuentras espacio libre, sin hacer malabarismos, donde apoyar los dedos para desplazarte hacia la parte inferior de la página.

Deberíamos ser conscientes de ello y dejar espacios para “scrollear” y que el usuario pueda navegar libremente.

5.    Uso del flash

Nos guste o no, el iPad no permite que se vean los objetos realizados en flash. Eso significa que cualquier elemento en flash no será visto por los usuarios.
En su lugar aparecerá un espacio vacío. Esto afecta a vídeos que funcionan con esta tecnología, a imágenes con objetivos de comunicación de marca y a muchísimos anuncios.

6.    Qué queda por encima y qué queda por debajo del scroll

Cuando diseñas una web para un PC tienes en cuenta la resolución que tendrán la mayoría de los usuarios y decides qué cosas quedan por encima y qué cosas quedan por debajo de la línea que limita el hacer o no scroll.

En el caso del iPad no es tan sencillo.
El usuario puede decidir ver la página en vertical o en horizontal, variando de forma significativa el espacio que queda por encima y por debajo del scroll. En el caso que quiera visualizar nuestra página poniendo el iPad en horizontal el espacio que queda por encima del scroll es mínimo.

“No me cabe duda que los usuarios harán mucho más scroll en el Ipad del que hacen ahora en un PC. Con lo que no será tan importante el hecho de que haya información o botones que queden por encima o por debajo del scroll”

7.    Desplegables, radio button, check boxes…

Vamos a tener que repensar los elementos de interacción de los formularios.

Los check boxes y radio buttons tienen que ser más grandes para que sea más sencillo seleccionarlos. Incluso nos podríamos ir a sistemas de interacción como los que se utilizan en el Iphone y el Ipod para seleccionar opciones en algunas secciones como ajustes. En estas secciones se utiliza como un pequeño interruptor azul que se activa o desactiva cuando se mueve el dedo de forma lateral.

Lo mismo sucede con los radio buttons cuando se tiene que escoger sólo una entre varias opciones. En estos casos, podría llegar a bastar con clicar sobre la opción y que apareciera una “V” de check sobre la opción seleccionada.

Algo parecido podría pasar con los desplegables e irnos a sistemas tipo “ruleta” como lo que tiene la aplicación del calendario en el momento de seleccionar la hora.

8.    Inserción de datos

Escribir en el iPad requiere de un mayor esfuerzo para el usuario y se cometen muchos errores. Aunque aparece un teclado virtual, la introducción de datos no es tan sencilla como en el PC.

Debemos tenerlo muy en cuenta, en páginas donde el buscador es el elemento principal utilizado por los usuarios a la hora de buscar información en la página.
Estas páginas tendrán que tener en cuenta un mayor ratio de error en las palabras que se insertan en el buscador y deberán gestionarlo de alguna forma.

“Una buena práctica podría ser el buscador de Google; que te sugiere palabras similares a las que has puesto en el campo de búsqueda solucionando posibles errores tipográficos que pueda haber cometido el usuario”

9.    Uso de nuevos estándares para los dispositivos táctiles

Estaremos de acuerdo en que el uso de estándares facilita al usuario la interacción con nuestra página web.

Desde Xperience Consulting siempre hemos considerado útil e importante subrayar los enlaces para que el usuario supiera con sólo mirar el texto subrayado que se trataba de un enlace y pudiera navegar con la vista en vez de con el ratón.

Subrayar un enlace es un estándar que han utilizado casi todas las páginas web y ha ayudado al usuario en su navegación.

Al igual que pasó hace 15 años ahora aparecerán nuevos estándares en la interacción con los dispositivos táctiles que deberemos identificar y utilizar haciéndole la vida más fácil al usuario y haciendo nuestra web más eficiente.

10.    Testea tu página con tus usuarios reales

Como es lógico en un fan del diseño centrado en el usuario (como soy) y de involucrar al usuario en el desarrollo de las aplicaciones y páginas web; “recomiendo si cabe aún más testear con usuarios antes de lanzar una web que pretenda tener éxito en el iPad”

En Xperience Consulting ya hemos llevado a cabo tests con iPad; pero queda mucho por saber de su comportamiento.

“Cualquier web para iPad que no se testee con usuarios y que acabe siendo un éxito será pura coincidencia… ¿Nos la jugamos y dejamos que la suerte decida el éxito o fracaso de nuestra web? “

• Si deseas descargarte la versión en pdf puedes hacerlo en el siguiente enlace: 10 recomendaciones para diseñar una web para un iPad