domingo, 5 de julio de 2015

Colecciones de patrones de interacción en la web

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





No hay comentarios:

Publicar un comentario