Principios de Diseo Algunos atributos de las buenas

Principios de Diseño

Algunos atributos de las buenas Interfaces n n n 1) Invisibles 2) Fáciles de aprender 3) Fáciles de recordar 4) Predecibilidad 5) Pocos errores 6) Recuperación sencilla ante errores 7) Uso eficiente 8) Flexibles 9) Inteligentes 10) Satisfacción subjetiva 11). . . y varios más

Algunos principios generales de diseño n n n n Simplicidad Consistencia Metáforas apropiadas Feedback informativo Diseño gráfico Prevención y tratamiento de errores otros. . . n Cada estilo de interacción proporciona principios de diseño particulares

Simplicidad n n Principio KISS (“Keep It Simple, Stupid”) Presentar exactamente la información necesaria n ‘Less is More’ Menos para aprender, para equivocarse, para distraerse, . . . Eliminar u ocultar la información irrelevante o innecesaria n Compite con la información importante en la presentación La información debiera aparecer en un orden natural n La información relacionada debe estar agrupada graficamente n El orden de acceso a la información debe corresponder a aquel que espera el usuario No utilizar muchas ventanas n No utilizar navegaciones o administración compleja entre ventanas Si es dificil de explicar o documentar, rediseñarlo Lenguaje conciso n n n

Simplicidad

Simplicidad

Consistencia n Tipos de consistencia: n Efectos n Los mismas comandos y acciones deberán tener siempre el mismo efecto en situaciones equivalentes n n Lenguaje y gráficos n La misma información/controles en la misma posición en todas las pantallas n La misma apariencia visual a lo largo del sistema n n n Predecibilidad de la interfaz look & feel de un toolkit Terminología idéntica en ayudas, manuales, etc. inputs n Sintaxis consistente en el sistema completo

Consistencia n Facilita al operador la determinación de la forma correcta de interactuar n n Algunas formas de potenciar la consistencia: n n ej. el operador puede recordar la forma de manipular un objeto en pantalla, a partir de su similitud con otros objetos (ej. barras de desplazamiento, botones) Definición de una metáfora de interacción Utilización de las guías de estilo provistas por cada plataforma Utilización de un ‘toolkit’ Las excepciones debieran ser limitadas n ej. falta de eco en la entrada de claves (‘passwords’), confirmación del comando delete

Consistencia con toolkits n Algunos toolkits proveen consistencia, por medio de la implementación de un look&feel particular. n n n Proveen un conjunto de OI predefinidos, de propósitos generales Las operaciones se aplican siempre de una misma forma particular n Facilidad para recordar y aprender para el operador Pueden existir dificultades cuando la IU no puede ser implementada totalmente por un toolkit particular. n n Rediseñar la interfaz para adecuarse a un toolkit particular, o Extender el toolkit para lograr la funcionalidad o apariencia deseada

Consistencia con toolkits Reimplementación de controles (diferentes a los estandares) Posible desorientación en los usuarios

Guías de estilo n Guías publicadas por los proveedores de GUIs n n n Open Software Foundation OSF Open Look MS Windows Apple Describen el look&feel de la interfaz n ej. Open Look: agrupamiento de menúes en el mismo menú n n “Utilizar un espacio en blanco entre grupos grandes de controles en menúes o en grupos pequeños cuando el espacio en pantalla no es un problema” Características n n n son específicas de la GUI y para los widgets provistos numero alto de guías pueden no cubrir algunos principios de diseño fundamentales

Guías de Estilo: Apple

Guías de Estilo n Las aplicaciones Windows suelen colocar la función Find en el menú Edit n En el Notepad, la combinación Alt+E+F no funciona

Metáforas n n Términos, imágenes y conceptos fundamentales que son fácilmente reconocidos, comprendidos y recordados [Marcus 93] Propósito n n Descripción de un modelo nuevo, en términos de un modelo conocido Algunas metáforas actuales: n “Modelo del mundo” (‘model world’) n Reproducción electrónica de objetos del mundo real n n ej. Metáfora de escritorio. “Conversación” (‘conversation’): n Acciones representadas de una forma lingüística n ej. Lenguajes de comandos textuales (Unix)

Metáforas n La aplicación de metáforas no siempre es beneficiosa n Algunas conceptos u operaciones no tienen una representación real en la metáfora n ej. no existe una operación ‘undo’ en un escritorio real n En estos casos, la metáfora puede producir confusiones

n No abusar de las metáforas Macintosh n La aplicación de una metáfora puede no proporcionar mayor usabilidad Quick Time Player (todos los sonidos se ven iguales en el preview)

Feedback informativo n Información contínua al usuario acerca de: n n n Lo que está haciendo La interpretación que se le está dando a las acciones del usuario El usuario siempre debe estar consciente de lo que está haciendo

Feedback informativo Modo actual Selección actual Interpretación de las acciones

Feedback informativo n Indicar las acciones inhabilitadas sobre los OI n El OI debe indicar dicha inhabilitación n Presentación opaca del OI, y suspensión de las reacciones al mouse n ‘do nothing approach’ n n No hace nada, no hay posibilidad de error Removiendo el OI actualmente inaccesible. n n Producirá cambios en la localización de los otros items Contradice el principio de consistencia en el layout espacial

Feedback informativo n n La eliminación de los items deshabilitados puede confundir Indicar en todos los elementos las acciones deshabilitadas

Feedback informativo n Mostrar el modo actual n Interacción con “modos”: los mismos inputs producen resultados diferentes, dependiendo del estado del sistema. n ej. Dragging o rubberbanding de un objeto en una manipulación directa n En general, los modos no pueden ser evitados, pero debe proveerse un feedback explícito acerca del modo actual.

Feedback informativo n Informar al operador ante tiempos de respuesta largos n Cuando una entrada no puede ser procesada en un tiempo razonable, debe indicarse mientras está siendo procesada. n Forma especial del cursor n n Barra con la progresión del trabajo n n Para transacciones cortas Para transacciones más largas n Indica cuanto resta de la operación n Tiempo estimado n Que está haciendo Aleatorio n Para tiempos de respuesta desconocidos

Feedback informativo n Representar los movimientos de los dispositivos de input en la pantalla. n n Facilita el proceso de evaluación. n ejs. ‘rubberbanding’ y ‘shape tracking’. n Pueden requerir un esfuerzo de programación sustancial Debe ser tan específico como sea posible n Es conveniente presentarlo dentro del contexto de la acción n ej. indicación del guardado de archivos en MS Word

Feedback informativo n Tiempos de respuesta n Como perciben los usuarios las demoras en las respuestas n 0, 1 seg. (máximo): percibida como una acción “instantánea” n 1 seg. (máximo): el flujo de pensamiento del usuario no se interrumpe, pero la demora es percibida n 10 seg. : limite para mantener la atención del usuario focalizada en el diálogo n > 10 seg. : los usuarios prefieren realizar otra tarea mientras esperan los resultados

Principios Diseño Gráfico n n Colores apropiados, atrayendo la atención del usuario Agrupar objetos relacionados n n Alineación, decoraciones similares Balancear el espacio Pocas fuentes y colores (5 a 7 colores) Contraste apropiado

Principios Diseño Gráfico

Usar el lenguaje del usuario n Utilizar terminología basada en el lenguaje utilizado por el usuario en la tarea n n n Los mensajes de error y feedback deben referirse a objetos del dominio del usuario Utilizar palabras comunes, no vocabulario o jerga tecnica Permitir nombres con longitud arbitraria

Usar el lenguaje del usuario Compu. Serve's Win. Cim

Usar el lenguaje del usuario Numeración comenzando desde 0 (Netscape Communicator) Colores representados en hexa (y no el color mismo)

Usar el lenguaje del usuario n No confundir al usuario XFM, "X-windows File Manager" n Que significa “Continue”? n n “continuar usando XFM” o “Continuar para salir”? En que difieren “Cancel” y “Abort”?

Puntos de Salida n Deben indicarse claramente n Los usuarios no desean sentirse “atrapados” por el SI

Puntos de Salida n Estrategias: n Botones de cancelación n n ‘Undo’ universal n n para operaciones largas ‘Quit’ n n permite retornar al estado previo Interrupciones n n diálogos esperando una acción del usuario para salir del SI en cualquier momento Valores por omisión n para restaurar un formulario de ingreso de datos

‘Shortcuts’ n Los usuarios expertos deberían ser capaces de realizar rápidamente las operaciones frecuentes n Estrategias: n Aceleradores de teclado y mouse n n n ‘Type-ahead’ n n Realizar un ingreso antes de que el SI esté listo para ello Saltos en la navegación n n Abreviaciones Completando comandos ‘Shortcuts’ en los menús Teclas función ej. Dirigirse directamente a una ventana o posición, evitando nodos intermedios Sistemas con historia n ej. WWW: aprox. El 60% de las páginas son revisitadas

‘Shortcuts’ n utilizar abreviaciones, iconos y terminos nemotécnicos significativas n ej. “Guardar un archivo” n n n Ctrl + G (abreviación) Alt AG (termino nemotécnico para acción de un menú) Guardar archivo (ícono)

‘Shortcuts’ Aceleradores de teclado en menúes Barras ‘customizables’ y paletas para acciones frecuentes Menú con opciones recientemente utilizadas en el tope Doble-Click para activar un menú específico del objeto seleccionado Doble-Click para activar las opciones visibles en la barra de tareas Scrolling para incrementos de acuerdo al tamaño de la página

Reducción necesidad de memoria “inmediata” n ‘short-term memory’ n Limitaciones humanas para el procesamiento de información n n Esta memoria es extremadamente frágil n n 7 +/- 2 ítems, 30 seg. a 2 min, a menos que sea interrumpida Las distracciones pueden producir la pérdida de su contenido Requiere presentaciones simples Provisión de ayuda en línea para la sintaxis de los comandos, abreviaciones, códigos, etc. El usuario debiera reconocer, no recordar n n Menús, iconos, cajas de diálogo vs. líneas comando Basado en la visibilidad de los objetos por el usuario

Reducción necesidad de memoria “inmediata” n n Describir el formato esperado de las entradas n ej. los ‘prompts’ debieran indicar el formato de lo que se debe ingresar Numero pequeño de reglas aplicables universalmente n Comandos genéricos: el mismo comando puede ser aplicado a todos los objetos de la interfaz n ej. Cut, copy, paste, drag & drop, . . .

Reducción necesidad de memoria “inmediata” n Facilitar la tarea al usuario, proveyendo información contextual n n El usuario debe recordar el directorio exacto El sistema podría agregar STARTUP automáticamente

Reversibilidad de las acciones n En lo posible, todas las acciones deben ser reversibles n n n Tranquilidad para el usuario n Los errores pueden ser reparados ( ‘ undo’) Facilita la exploración de opciones no conocidas Unidad de reversibilidad: n n n Acción simple Tarea de entrada de datos Grupo completo de acciones

Errores n Todos los operadores cometen errores n n n Es conveniente prevenir los errores n n 31% de las tareas tienen algún tipo de errores o estrategias ineficientes [Card 80] Los errores producen perdidas de productividad ej. permitir el llenado de un campo de un formulario con un menú, y no por medio de un tipeo. Los errores ocurridos deben ser detectados lo antes posible n Deben ofrecerse instrucciones para reparar el error n n ej. no retipear un comando entero, sino solamente aquellas partes que están equivocadas Las acciones erróneas no deberían cambiar el estado del sistema, o el sistema debería proveer instrucciones para restaurar el estado

Errores n ‘Mistakes’ n n Errores semánticos: ejecución correcta de las acciones, pero en una forma equivocada n ej. colocación de un rectángulo como un marco para un texto, en lugar de un marco propiamente dicho ‘Slips’ n n n Comportamiento inconsciente que conduce a un camino erróneo en la ejecución de la tarea Suelen suceder frecuentemente en usuarios experimentados n Generalmente por falta de atención También suelen producirse por similaridades entre distintas acciones

Tipos de ‘slips’ n Errores de “captura” n Se ejecuta la actividad más frecuente en lugar de la actividad deseada n ej. confirmar el grabado de un archivo cuando no se desea sobreescribirlo n Generalmente ocurren cuando las acciones comunes y las infrecuentes tienen la misma secuencia inicial Porqué presioné “Si”. . ?

Tipos de ‘slips’ n Error de descripción n La acción deseada tiene mucho en común con otras posibles n ej. mover un archivo a la papelera de reciclaje, en lugar de a un directorio o unidad de disco n Generalmente ocurren cuando los objetos correctos y erróneos están fisicamente cercanos

Tipos de ‘slips’ n Pérdida de la activación n n Olvido del objetivo de la tarea en el medio de la secuencia de acciones n ej. navegación de menúes o diálogos, y no recordar lo que se está buscando n “Desorientación” Errores de modo n El usuario realiza acciones en un modo creyendo que está operando en otro modo n ej. referirse a un archivo que está en un directorio diferente n ej. búsqueda de comandos u opciones de menúes que no son relevantes

Diseño para evitar ‘slips’ n n Reglas generales n Prevenir los ‘slips’ antes de que ocurran n Detectar y corregir los ‘slips’ cuando ocurren n Permitir la corrección del usuario con feedback y ‘undo’ Ejemplos n n Errores modales n Tener la menor cantidad de modos posibles n Explicitar los modos de la mejor forma posible Errores de “captura” n En lugar de confirmación, permitir que las operaciones sean reversibles n Permitir la reconsideración de las acciones por el usuario n n n ej. los items de la papelera de reciclaje pueden ser recupeados Pérdida de la activación n Si el SI conoce el objetivo de la tarea, explicitarlo n Si el SI no lo conoce, mostrar el camino seguido hasta el punto actual Errores de descripción n En interfaces con iconos, evitar la similitud entre los iconos

Prevención y tratamiento de errores n Idea general n n Prevenir o mitigar la continuación de una acción errónea Estrategias n Tratar los errores, no permitiendo la continuidad de las acciones del usuario n n ‘Warnings’ n Avisar al usuario cuando ocurre una situacion no usual n n n ej. no pasar la ventana de login hasta que no se ingrese el password correcto ej. sonidos (campanas, timbres) No abusar de su uso ‘Do nothing’ n n Una acción ilegal no tendrá ningún efecto El usuario debe inferir lo que ha sucedido n ej. ingreso de una letra en un campo numérico (se ignora la tecla presionada)

Prevención y tratamiento de errores n Estrategias n Autocorrección n El sistema autocorrige el error, de acuerdo a determinadas acciones válidas n n n Negociación n El SI inicia un diálogo con el usuario para encontrar una solución al problema n n ej. autocorrector ortográfico Se transforma en un problema de confianza ej. compiladores indicando la línea donde ha ocurrido el error, y posibilitando su reparación Demostración n El SI pregunta al usuario cuál es la acción que desea ejecutar realmente

Prevención y tratamiento de errores n Estrategias n Chequeos n El SI chequea la razonabilidad de los datos ingresados por el usuario n n ej. “Ud. ha solicitado la compra de 5000 lápices. Es realmente la cantidad que desea comprar? ” Ingreso de datos válidos n El SI solamente acepta los datos ingresados con un formato dado n ej. Los widgets actuales sólo permiten el ingreso de datos con un determinado formato

Tratar los errores en forma positiva y significativa

Mensajes de error n Expresados en el lenguaje del usuario n n Preferiblemente en el lenguaje de la tarea No utilizar códigos n n no ‘ERROR 25’ Precisos n ej. UNMATCHED LEFT PARENTHESIS en lugar de SYNTAX ERROR

Mensajes de error n Constructivos n n Indicar porque sucedió el error y cómo solucionarlo Positivos n no ‘FATAL ERROR’

Mensajes de error n No confundir al usuario

Mensajes de error n No culpar al usuario de la ocurrencia del error n ej. ‘Cannot open “chapter 5” because the application “MS Word” is not on your system”

Provisión de ayudas n n Las ayudas no son un reemplazo para un mal diseño Sistemas simples: n n Instrucciones mínimas Mayoría de los sistemas: n n n Ricos en características Muchos usuarios desean convertirse en usuarios expertos, no usuarios “casuales” Los usuarios no frecuentes necesitan recordar

Uso de la documentación n La mayoría de los usuarios no leen los manuales n n Generalmente, utilizados cuando los usuarios necesitan una ayuda inmediata (en “pánico”) n n Prefieren utilizar su tiempo continuando con su tarea Indica la necesidad para la documentación en línea y herramientas de búsqueda n La ayuda en línea puede ser específica al contexto actual n Los manuales en papel generalmente no están disponibles en el lugar correcto Muchas veces utilizados como referencia rápida n Sintaxis de acciones, posibilidades, . . .

Algunos tipos de ayuda n Tutoriales y/o manuales ‘getting started’ n n Guías cortas que los usuarios pueden leer cuando comienzan el uso de los SI n Estimula la exploración y el conocimiento general del sistema n Intenta proveer el material conceptual y la sintaxis esencial del SI ‘Tours’ en línea, ejercicios y demostraciones n Demuestra los principios más básicos a través de varios ejemplos de trabajo

Algunos tipos de ayuda n Manuales de referencia n n Mayormente utilizados para búsquedas detalladas (por expertos) n Organizados por tema Hipertexto en línea n Search / find n Tabla de contenidos n Indices cruzados

Algunos tipos de ayuda n ‘Reminders’ n n n Significado sintáctico/semántico de las teclas Textos sobre los iconos indicando su significado o propósito Ayuda sensible al contexto n El sistema provee ayuda acerca de lo que el usuario está realizando n Macintosh ‘ballon help’