1. 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

2. 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

3. 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

4. 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.

5. 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.

6. 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…)

7. 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