INSTITUTO TECNOLÓGICO DE CIUDAD JUÁREZ

Interacción Humano-Computadora

Titular: Edgardo Cervantes

Resumen

Colecciones de patrones de interacción en la Web

Carrera: Ingeniería en Tecnologías de la Información y Comunicación

Alumno: Blanca Estela Parra Hernández

No. De control: 10111248

La necesidad de un lenguaje de patrones de interfaz Humano-Computadora

Existe muy buena literatura en los principios de alto nivel para un buen diseño de

interfaz, y se ha vuelto mejor mientras este campo madura. Todos sabemos que a

estas alturas debemos utilizar la manipulación directa, retroalimentación inmediata, un

juicioso uso del sonido y la animación, permisos apropiados, protección para errores

accidentales, mensajes de error agradables, etcétera. Pero si eres un diseñador

novato, es difícil recordar todos estos principios, por no hablar de utilizarlos

eficazmente. Y a veces es muy difícil hacer compensaciones con estos principios

cuando entran en conflicto; a menudo tenemos que encontrar la mejor solución al

adivinar, o recurriendo a otros medios.

1. Hacer pruebas con usuarios

Una manera excelente de verificar tus conjeturas o ideas, por supuesto, es probar tu

diseño con usuarios potenciales. Se ha escrito mucho sobre pruebas de usabilidad y

otros campos de métodos, y todo es importante. Antes de que comience la fase de

diseño, debemos entender las preocupaciones de los usuarios y aprender a empatizar

con ellos; son guías de retroalimentación y nos inspiran ideas mientras exploramos

diferentes posibilidades de diseño; y luego en un proyecto, nos ayudan a mejorar y

construir el diseño elegido. En el campo de las interfaces humano-computadora, hemos

aprendido –más rápido que en algunos otros campos- el valor de un proceso de diseño

iterativo que involucra directamente a los usuarios finales.

Pero, ¿cómo llegar a los diseños iniciales? Una vez que entendemos de donde viene el

usuario y que es lo que su artefacto tiene que hacer, ¿que es lo que viene después?

¿Qué otras preguntas tienes? ¿Qué suposiciones debes hacer? ¿Cómo se pone todo

junto en un diseño que quizá funcione? Este salto creativo es siempre más difícil de lo

que parece. Y nos cuesta mucho menos, en términos de tiempo y de las pruebas de

usabilidad, para hacer buenas conjeturas y las opciones de diseño desde el principio.

2. Seguir las guías de estilo

También hay guías de estilo GUI, tanto los kit de herramientas estándar y las guías de

estilo personalizadas para empresas. Trabajan bien si quieres que todas las

aplicaciones de tu compañía solo se vean y trabajen, o para asegurarte de que has

aceptado la herramienta con la que debes trabajar. A veces es importante conocer

estos detalles. Pero son trascendentes – herramientas, tendencias, y sistemas

operativos, vienen y van, tan pronto como el mundo se sienta cómodo con uno, otro

llega y toma su lugar.

Por otro lado, al limitarte a ti mismo a la pequeña cantidad de herramientas que la

mayoría de los toolkits te ofrecen, y las formas de utilizarlos de manera convencional,

limitas la expresividad de tu interfaz, lo que aun es aceptable. (“Utilicé un combo box

ahí porque es lo que todos hacen.”) Y ninguna guía de estilo puede decirte como

encontrar un equilibrio entre dos principios de alto nivel opuestos.

3. Hacer lo que otras personas hacen.

Hemos visto casos donde, diseñadores de interfaces sin experiencia toman decisiones

de diseño en base a diseños de otras personas o dependiendo de ello, en lugar de

tomar decisiones en base a sus propias habilidades de diseño. Se preguntan cosas

como, “¿Qué técnicas o diseños he visto que hagan lo que estoy tratando de hacer?”.

Esto no es realmente malo en su totalidad, la observación de las interfaces exitosas es

parte del proceso de aprender, y al menos no están tratando de reinventar todo desde

el principio.

Claro, los diseñadores experimentados tampoco escapan de esta manera de pensar.

Reinventar técnicas no es práctico siempre, consciente o inconscientemente, aplican lo

que saben, y reutilizan buenas soluciones que han visto antes. La diferencia radica en

parte en la experiencia que han obtenido: un diseñador con experiencia ha visto,

analizado o construido interfaces de muchos tipos. Y también radica en la habilidad con

que aplican esa experiencia. Ellos no copian una técnica tímida o torpemente,

temerosos de arruinarla de alguna manera por cambiarla; ellos comprenden los

principios de diseño y el proceso suficiente para adaptar una buen idea para un nuevo

uso en un nuevo contexto. Entienden qué funciona y qué no funciona.

¿Cómo puede la comunidad de IHC ayudar a los diseñadores sin experiencia a salir de

sus diseños torpes, debido a su falta de seguridad y habilidad, sin pasar años

aprendiendo todo de la manera difícil?

Una manera es construir un lenguaje de Patrones de Interfaces Humano-Computadora

Un lenguaje de Patrones de Muestra

La descripción de cada patrón define un contexto de uso, un problema que el diseñador

tiene que resolver , un conjunto de "fuerzas" que empujan el diseñador en diferentes

direcciones, y una norma primaria - y las normas secundarias a veces adicionales -

sobre cómo se podrían resolver esas fuerzas para resolver mejor el problema. También

se proporcionan ejemplos, buenos y malos, a veces los malos ejemplos muestran el

uso inapropiado de la pauta, y otras veces muestran una situación en la que el patrón

se debería haber utilizado, pero no fue así.

Si el éxito de patrones en arquitectura e ingeniería software es un indicador, tanto como

nuestra industria y nuestros clientes se beneficiaran enormemente de este esfuerzo.

Los patrones principales para realizar acciones –su forma básica- podrían incluir estos

géneros familiares:

Formulario. Se espera que el usuario pueda proveer su información, en un

formato.

Panel de control. Son usados para elegir el estado de una o mas cosas.

Editor WYSIWYG. Un procesador de palabras o un programa de dibujo son

algunos ejemplos. Esto ofrece muchas acciones posibles al usuario a la vez,

incluyendo varios tipos de manipulación directa y los resultados de esas

acciones suelen ser inmediatos.

Comando integrado.

Espacio Social. Esto incluye el equivalente de espacios sociales "reales" en

línea - grupos de noticias, listas de correo electrónico, salas de chat, y así

sucesivamente. Este patrón es inusual, ya que el artefacto no es más que un

mediador entre la gente, no un participante directo en un diálogo con el usuario,

ni un proveedor pasivo de contenido. Sin embargo, todavía se revela el

contenido (las conversaciones que tienen lugar) y proporciona acciones (lo que

el usuario puede hacer en ese espacio), pero de una manera muy estilizada.

Los siguientes son otros ejemplos de uso de patrones generales. Algunos se aplican al

contenido, algunos a acciones, o a ambos.

Espacios de navegación. Es altamente interactivo, dejar a los usuarios moverse

a través de la web o aplicación a su propio paso, y a su dirección.

Vista de descripción.

Instrucciones Paso por Paso. Permite que el usuario se mueva por distintos

escenarios completándolos progresivamente.

Inserción de texto. Los usuarios están comprometidos en ocasiones a introducir

datos.

Salidas de emergencia. Los usuarios que usan una gran cantidad de

aplicaciones en el curso de su trabajo, quizá necesitan salir de un programa

rápidamente, cuando otra tarea requiere de los recursos del sistema o cuando

ha sido iniciado por error.

Dar advertencias. Los usuarios quizá ejecuten acciones que pueden tener serias

consecuencias, así que hay que alentarlos o hacerlos pensar dos veces.

Retroalimentación de interacción. Los usuarios necesitan estar advertidos y

prevenidos sobre el modo actual del sistema, debe tener una indicación de que

lo que han introducido, como datos, o lo que han cambiado ha sido aceptado por

el sistema.

Solo mirando. Los usuarios que acceden a sistemas de información donde es

posible comprometerse por medio de algún contrato, por ejemplo las tiendas

online.

Mostrar que la computadora está pensando. Los usuarios necesitan saber que la

computadora está registrando sus intentos de interactuar con ella.

Mostrar el formato requerido. Los usuarios que introducen datos en formularios

necesitan que se les guie, en los diferentes campos y el formato de la sintaxis

que deben llevar los campos.

Pensar doble. El usuario podría accidentalmente elegir una acción que tiene

serias consecuencias, como borrar un archivo, un disco, etcétera. Las

consecuencias de esto podrían ser eliminadas permitiendo UNDO (rehacer)

donde sea posible. En algunas circunstancias una acción errónea podría ser

irrecuperable.

Tiempo de hacer algo más. Cuando los usuarios están haciendo uso de alguna

aplicación donde experimenta pausas mientras la computadora hace un proceso

interno, hay que hacerle saber al usuario que tomara tiempo, así puede hacer

algo más.

Estos son solo algunos ejemplos de patrones, existen muchos más, existen muchas

librerías de patrones de interacción, la librería que se encuentra en www.yahoo.com

muestra las siguientes categorías:

Diseño. Patrones para elegir tipos de página, diseños de tablas, los

componentes de una página estándar.

Navegación. El usuario necesita localizar contenido y características necesarias

para completar una tarea.

Selección. El usuario necesita elegir un ítem de entre muchos otros, o en otros

casos especificar información, por ejemplo las fechas.

Interacción enriquecida. Los usuarios necesitan interactuar con la interfaz y más

que eso reconocer cualquier oportunidad para hacer y entender lo qué es

posible en la aplicación.

Diseño Social. El usuario quiere asociarse, comunicarse e interactuar con otras

personas (amigos, familia, compañeros de trabajo) en línea.

La librería de patrones de interacción en www.welie.com hace una separación mas

amplia de las categorías:

Necesidades del usuario. Patrones que cumplen una necesidad directa del

usuario. Esta categoría se subdivide en:

Navegación (Ayudas y diferentes tipos de menús, links…)

Búsqueda (Autocompletar, área de búsqueda, búsqueda avanzada,

índices o mapas del sitio, nubes de etiquetas…)

Compras (Reservaciones, carrito de compras, comparaciones de

productos…)

Manejo de datos (Filtro de tablas, detalles, selección de partes…)

Hacer elecciones (Selector de fecha, país, lenguaje, clasificador…)

Introducir información (Caja de comentarios, formularios…)

Interacciones básicas (Botones, ventanas…)

Personalizando (Ventanas personalizables, registro, sesiones…)

Diversas (Caja de noticias, vínculo de compartir…)

Necesidades de la aplicación. Patrones que ayudan a la aplicación, o a ti como

diseñador, a comunicarse mejor con el usuario.

Atención de dibujo (Sección de códigos de colores, captcha, vínculos

externos)

Retroalimentación (Mensajes de error, pagina progresiva…)

Simplificando la interacción (área de click agrandada…)

Contexto del diseño.

Tipos de sitio (sitio de comercio, comunidades, sitio de museo…)

Experiencias (construcción de comunidad, manejo de información,

diversión, historias, comentarios…)

Tipos de páginas (de ayuda, foros, de productos, de tutoriales…)

Conclusión

Los patrones de interacción son de gran ayuda para la solución de problemas que se

tienen en cuanto a la interacción humano-computadora mediante una interfaz, es

importante pensar como el usuario y en el usuario, ya que las aplicaciones que se

desarrollen están diseñadas para su comodidad y para facilitar su manejo.

Afortunadamente existen muchas librerías y colecciones de patrones para la web, y

esto nos permite hacer uso de ellos para que el contenido de nuestra aplicación sea

familiar y agradable para el usuario.

Bibliografía

http://www.mit.edu/~jtidwell/interaction_patterns.html

http://www.cmis.brighton.ac.uk/research/patterns/home.html

http://developer.yahoo.com/ypatterns/about/start.html

http://www.welie.com/patterns/index.php