PLANO DE ESTRUCTURA

Plano de Estructura

El diseño de la interacción consiste en definir el comportamiento que tiene el usuario cuando accede a la página web. Para ello, es necesario identificar cómo se adecuará y responderá el sitio web al comportamiento del usuario. El objetivo del diseño de la interacción será identificar qué es lo que hace el usuario y cómo lo hace e intentar diseñar el software de manera que mejor funcione para el que accede a la página.

Elemento del diseño de la interacción

1. Comunicación persona-máquina

La comunicación persona-máquina es la traducción de la conversación entre la tecnología y el usuario. Para que esta comunicación sea rápida y eficiente es necesario comprender las sutilezas y coloquialismos de ambas partes. A continuación, se van a mostrar algunas funciones que afectan en la comunicación persona-máquina.

Legibilidad:

Cuando se diseñe la página web es conveniente cuidar los colores y los tamaños de las letras. Hay que tener en cuenta las personas mayores que suelen tener peor visión que los jóvenes.

Daltonismo:

Hay que tener en cuenta que las personas daltónicas también pueden acceder a la página web y por esta razón, conviene tener la página adaptada a las necesidades de estas personas. Esto requiere utilizar distintos tonos de gris, gráficos complementarios o etiquetas de texto cuando se utilice color en las páginas.

Objetos humanos:

Ejemplo: en una página web de un supermercado cuando dan la opción de comprar por Internet, por ejemplo, si ofrecen una manzana, en vez de poner producto: manzana, poner también la imagen de una manzana para que la gente sepa lo que se ofrece.

Uso de metáforas:

Como dice el propio nombre es la utilización de metáforas para enriquecer la página web y permitir que los usuarios comprendan los detalles del modelo conceptual.

Ley de Fitt:

Como dice Tognazzini en Principios de diseño de interacción, “El tiempo necesario para alcanzar un objeto es función de la distancia y del tamaño del objeto”. Esta ley tiene en cuenta las siguientes funciones:

• Utilizar objetos grandes para las funciones importantes.

• Utilizar las esquinas y los bordes de pantalla porque es más rápido llegar a ellos.

2. Acción/Reacción

Hay que tener en cuenta que cuando un usuario interactúa con un sitio web, siempre hay una reacción. Por ejemplo, cuando el usuario hace clic en “entrar” el sitio web reacciona y abre una nueva pantalla; o cuando un sitio web informa a un usuario que ha introducido incorrecta la contraseña de acceso, el usuario responde y vuelve a introducir la contraseña correcta (el sitio web prestará todas las herramientas posibles para que el usuario ejecute la acción). La base de la comunicación entre el usuario y la web es, sin duda, la acción-reacción.

Valores por defecto:

Un sitio web tiene que estar preparado para dar una respuesta a la acción del usuario y los valores por defecto es un ejemplo de ello.

Ejemplo: A la hora de rellenar un formulario en un sitio web, normalmente es necesario introducir datos personales (nombre, apellido, dirección, país, ciudad, etc.). Los valores por defecto lo que hacen es anticipar y proporcionar reacciones rápidas y útiles para la acción del usuario. Por ejemplo, cuando el usuario introduce la ciudad en la que reside, San Sebastián-Donostia, el sitio web reacciona e inmediatamente, por defecto responde la provincia Guipúzcoa. El sitio web tiene que estar preparado para cualquier interacción del usuario. En este caso, el sitio web ha hecho que el usuario se haya ahorrado tiempo redactado la provincia automáticamente.

3. Flujo de trabajo

El flujo de trabajo consiste en facilitar las tareas especificas del usuario dentro de la plataforma y el cumplimiento de los objetivos multitarea como navegar o la realización de compras en linea. De igual forma podemos encontrar otros términos o factores que hacen que el flujo de trabajo sea mas eficiente, por ejemplo:

Eficacia del usuario:

El diseñador de una pagina web debe tener en cuenta la interacción del individuo con la maquina, de igual modo en un proyecto de software es muy importante que todos los que pertenecen al equipo tengan como objetivo principal la productividad del usuario, ya que esto fortalece la colaboración, la comunicación, la complicidad y la interacción entre todos. Lo anterior debido a que se tiene como concepto que si la maquina funciona bien el individuo debe acoplarse, pero no siempre debe ser así. Actualmente desde el diseño de la plataforma podemos hacer que el usuario ahorre tiempo en la navegación o procedimientos realizados, es decir, si el usuario ingresa a un sitio web para comprar una bicicleta y la plataforma tiene secciones como tecnología, deporte, hogar, ropa de mujer, entre otras, el usuario deberá clicar en el apartado de deportes y luego buscar entre todos los artículos una bicicleta, pero si el sitio web de entrada brinda la opción de buscador el usuario puede escribir directamente el producto que quiere. Esto hace que la navegación del individuo sea mas eficaz y de una u otra manera se cuida que el individuo caiga en frustración. Otro estrategia para la eficacia del usuario esta en poner las palabras mas importantes de los menús o las etiquetas de primeras, por ejemplo:

Incorrecta: añadir una nota para el pie de pagina
Correcta: Pie de pagina

Interfaces explorables:

Hace referencia a darle dos posibilidades al usuario, la primera que pueda navegar de una manera rápida y sencilla y la segunda que tenga varias opciones para realizar la misma tarea. Por otro lado es importante darle la opción al usuario de volver fácilmente a la Home Page o al paso anterior.

Ejemplo: Para encontrar el número de contacto, la dirección, o el email de una organización hay varias opciones, como desplazarse hasta el final de la pagina web o hacer clic en la pestaña contáctenos. Las dos rutas cumplen el mismo objetivo, pero una es mas larga que otra, y si a esto le añadimos que clicando del logo de la organización el usuario pueda volver a la pagina principal la exploración será cada vez mas eficaz.

Evita la navegación visible:

En todas las plataformas web se le debe brindar al usuario una navegación sencilla, fácil, comprensible e intuitiva, que a la hora de clicar sea perceptible. Ejemplo, que si la pestaña donde clic dice “Ropa para dama” al ingresar se encuentre con artículos de mujer y no artículos para niñas.

4. Estado

Es necesario que exista una comunicación correcta entre el sitio web y el usuario y viceversa, para ello el diseño de la interacción tiene la función de traducir la situación del sitio web al usuario. El estado sirve para dar a conocer al usuario qué tipo de operaciones son posibles, cuáles son las adecuadas o en qué lugar se encuentra uno dentro del sitio web. A continuación, se encuentran cuatro funciones para facilitar la el estado del sistema al usuario.

Autonomía:

Es básico saber que no existe autonomía en ausencia de control; y el control no se puede tener sin información suficiente. Por lo tanto, comunicar el estado al usuario es fundamental para que el este responda apropiadamente con la información disponible.

Ejemplo: Se puede dar autonomía ilimitada a un usuario; sin embargo, es necesario informarle sobre el estado del sitio web. De lo contrario el usuario sufrirá un estrés y una fatiga innecesarios, y cuando venga la siguiente carga de trabajo, puede ser que el usuario no esté en las mejores condiciones físicas y mentales. La información del estado debe ser visible y actualizada para el usuario.

Guardar el estado:

Un sitio web debe estar preparado para guardar el estado de sus usuarios. Para ello, es importante saber dónde ha estado el usuario, qué ha hecho y dónde ha abandonado el usuario la última sesión. Toda la información del estado debe estar almacenada en una cookie durante la sesión en el ordenador del usuario, y a continuación se almacena en un servidor para, de esta manera, si el usuario vuelve a conectarse horas después, pueda seguir trabajando desde el punto donde lo dejó.

Ejemplo: Por ejemplo, un usuario inicia sesión en una página habitual de crear diseños, el usuario comienza a trabajar en el sitio web y a los 10 minutos abandona la página. Durante esos 10 minutos, todo el trabajo que ha hecho el usuario se ha tenido que almacenar en una cookie; y a continuación en un servidor. Al día siguiente el mismo usuario vuelve a conectarse y encuentra su trabajo en el punto exacto donde lo dejó.

Reducción de latencia:

Según la Real Academia Española, la latencia es el tiempo que transcurre entre un estímulo y la respuesta que produce. En ocasiones, en la web el tiempo de espera que transcurre entre la acción y la reacción es largo, por lo que es importante tener en cuenta la latencia (de tiempo de espera). Para que el usuario no se agobie sin entender lo que sucede se debe reducir la latencia de la siguiente manera:

Mostrar un reloj de arena, para que el usuario sepa que el sistema sigue trabajando.
Comunicar el tamaño y el progreso con una barra de estado.
Mostrar mensajes de texto agradables y mantener el usuario entretenido mientras espera a que el ordenador termine.
Indicar con pitidos e indicaciones visuales muy claras cuando el usuario puede volver al trabajo con el sistema.
Mostrar un mensaje comunicando la duración estimada para cualquier proceso que pueda durar más de 2 segundos.

5. Mal funcionamiento o errores

Las paginas web pueden tener fallos inesperados o que no se perciben si no hasta después de ciertos procedimientos, sin embargo el mal funcionamiento o los errores de las plataformas en su mayoría podrían evitarse de la siguiente manera:

Anticipación:

La anticipación es un paso fundamental para reducir los fallos del sitio web, los diseñadores de las aplicaciones deberían conocer las necesidades y deseos de los usuarios, esto mediante el estudio del público objetivo y respondiendo al qué quieren.

Ejemplo: Facebook anteriormente contaba solo con la opción de darle like a las imágenes o vídeos que sus usuarios publicaban, pero después de detectar varios comentarios que se realizaban a cerca de poder decir “no me gusta” o “es feo”, la organización decidió incluir no solo la posibilidad de dar like, sino también la de “me enoja, me entristece, me divierte o me encanta”. Lo anterior no es producto de un fallo precisamente funcional de la plataforma, pero al ver o detectar la necesidad que estaba teniendo el usuario se incrementaron las visitas del sitio.

Protege el trabajo del usuario:

No hay nada mas frustrante que estar en un navegador o trabajar en un proyecto y que por alguna razón las ventanas o la información cierren y desaparezcan. Para evitar esto se debe diseñar o implementar diversas opciones que protejan la información del usuario. Algunas de estas estrategias son:

El navegador de Google Chrome cuando por error se apaga el ordenador y se vuelve a reiniciar da la opción de “restaurar pestañas”, opción que le da satisfacción al usuario porque no debe trazar una ruta mas larga como ir hasta el historial y buscar una por una las pestañas que estaba usando.
Microsoft también tiene opciones útiles, como preguntarle al usuario cuando clica el botón de cerrar si desea guardar o no el documento en el que ha estado trabajando, o cuando se cierra la documento y a la hora de volver abrirlo no se recuerda el nombre del archivo, pone en la pestaña archivo los últimos documentos en los que estuvo trabajando el usuario. Estas son rutas mas largas, pero que le dan al usuario la esperanza de recuperar lo que daba por perdido.

6. Referencias:

Baxley, B. (2002). Introducing Interaction Design. Disponible en: http://boxesandarrows.com/introducing-interaction-design/
Tognazzini, B. (2014). First Principles of Interaction Design. Disponible en: https://alud.deusto.es/pluginfile.php/567531/mod_folder/content/0/Tognazzini_Principios%20del%20dise%C3%B1o%20de%20interacci%C3%B3n.pdf?forcedownload=1