Interaccin persona-ordenadorEl diseo grfico

ObjetivosValorar la importancia del diseo en la interfazConocer los principios, mtodos y herramientas del diseo

ContenidoObjetivos de un buen diseo de la interfazElementos morfolgicos de la imagenUso del colorTcnicas de diseo grficoIconosEjemplos

Crear una interfaz transparenteNo obstruye el accesoEl usuario tiene una buena experiencia interaccionando con el sistemaLa interfaz casi no es detectadaObjetivos del diseo

Considerar cada aspecto con un sentido del conjuntoConjuntar el diseo funcional y el visualLos controles deben tener un aspecto acorde a su funcin y funcionar de acuerdo con su aspectoCuando el diseo visual clarifica sus funciones, la interfaz resulta intuitivaObjetivos del diseoCmo conseguirlos?

Para representar algo utilizamos unos elementos que constituyen un alfabeto grfico. Estos elementos son:El puntoLa lneaLa formaLa luzEl colorEl tiempoEl tamaoEl formatoLa composicinElementos de la imagen

Elementos de la imagenEl puntoEl elemento ms simplePosee una gran fuerza atractiva como marcaSu situacin puede establecer los ejes bsicos de la estructuraVarios puntos juntos se perciben agrupados creando formasUna secuencia de puntos puede imprimir ritmo a la imagen, creando una direccin de movimientoAyuda a dirigir la visin del observador

Elementos de la imagenLa lneaOrganizan el espacioDeterminan ejes que delimitan zonas de atraccinPueden crear texturas, profundidad y movimientoSu direccin y grosor les da una expresividad

Define una superficie con unas dimensiones dadasFormas bsicasCuadrado, tringulo y crculoFuncin: definir y organizar el espacioPueden simular tridimensionalidad cuando se representan en perspectivaElementos de la imagenLa forma

Elementos de la imagenLa luzContribuye a la composicin de la escenaPuede sugerir profundidad y tridimensionalidadPuede modelar formas, superficies y volmenesUna caracterstica importante es la tonalidad, que incide en la captacin de las formas:Un tono claro parece ms claro cerca de un tono oscuro y vic.Un tono claro se expande rodeado de uno oscuroUn tono oscuro se comprime rodeado de uno claro

Elementos de la imagenEl colorCaractersticas:Tonalidad o matiz: longitud de ondaSaturacin o intensidad: cantidad de blancoLuminosidad o claridad: cantidad de luzSistemas de color:Aditivo: combina radiaciones de distinta longitud de ondaUtilizado en las pantallas electrnicasSustractivo: combina pigmentos cian, magenta y amarilloUtilizado en el papel

Elementos de la imagenEl colorPapel del color en la imagen:Contribuye a la recreacin del espacioAyuda a simular la profundidad (sombreado)Sugiere distancia (difuminacin progresiva del tono)Ayuda a dinamizar la composicin a travs de la interaccin de los coloresLos colores claros son excntricos y los oscuros concntricosLos colores saturados producen un fuerte impacto y se relacionan con sensaciones dinmicas y alegres. Los colores no saturados transmiten sensaciones dbiles y ms sutilesEl color transmite sentimientosHay colores clidos y fros, ligeros y pesados, tristes y alegresLa percepcin del color es subjetiva y depende de factores culturales

Elementos de la imagenEl colorFormas de relacin dinmica entre los colores:Armona: crea una composicin con variaciones cromticas suaves y graduales relacionando colores afinesContraste: yuxtapone colores diferentes entre s, fundamentalmente colores complementarios:Rojo-verde, amarillo-violeta, azul-naranjaLa composicin llama fuertemente la atencinSi es muy acentuado puede reducir la legibilidad al producirse vibracinEs necesario conocer las relaciones cromticas para combinar correctamente los colores

Elementos de la imagenEl tiempoSe puede simular el paso del tiempo en imgenes fijas, organizando adecuadamente el espacio:Usando diferentes intensidades lumnicas, contrastes cromticos, de textura, de escala...Jerarquizando los elementos representados, ordenndolos segn una cierta secuencia

Elementos de la imagenEl tamaoEl tamao establece un peso visual y una jerarquizacin en cuanto al espacio ocupado por el elementoAyuda a crear sensacin de profundidad mediante la perspectiva

Elementos de la imagenEl formatoEs la proporcin del cuadro donde se muestra la imagenDebe favorecer la adaptacin al campo visual humano, buscando una armona entre las dimensionesInfluye decisivamente en la composicin general y le da un significadoLos formatos horizontales son ms estticosLos formatos verticales y circulares son ms dinmicos

Elementos de la imagenLa composicinEs la forma de ordenar y organizar los elementos morfolgicos de la imagen en el espacio estructural que ofrece el formatoPrincipios: unidad y claridadSe puede crear diversidad y contraste para aadir dinamismo, aunque complica la composicinHay que delimitar claramente el centro de inters, el que atraer la mirada del espectador, y que depende de la composicin

Elementos de la imagenLa composicinAlgunas reglas de composicin:La zona inferior suele ser ms esttica y slida y la superior ms dinmica y llamativaLa zona izquierda es ms estable y permite colocar pesos mayores sin desequilibrarA mayor tamao, mayor peso compositivo

El color es un aspecto muy importante de la interfazPartes de la interfaz relacionadas con el color:Persona: sistema humano visualOrdenador: presentacin de informacinUso del color

El color tiene un gran impacto en la presentacin de informacinSi se usa adecuadamente mejora la presentacinSu uso inapropiado puede reducir su funcionalidadEs un componente principal de las GUIEl uso de colores apropiados puede ayudar a la memoria del usuario y facilitar la formacin de modelos mentales efectivosUso del colorMotivacin

Modelos de color:Basados en la percepcinHSV: Matiz (Hue), Saturacin (Saturation), Valor (Value). Usado por artistas, diseadores, fabricantesHLS: Matiz (Hue), Luz (Light), Saturacin (Saturation). Desarrollado por TektronixBasados en los dispositivos de presentacinRGB. Usado en los monitores de ordenadorYIQ/YUV. Usado en la transmisin de televisinModelo CIE (Comisin Internacional sobre Iluminacin)Uso del colorFundamentos del color

Fundamentos del colorModelo RGBLos colores presentados en un monitor han de ser trasladados al espacio de color RGBProblema: no hay un mapeo uno a uno entre los modelos perceptuales y los de presentacinEl modelo CIE permite traducciones del HSV al RGB

El ojo humano contiene una lente y una retinaLa retina contiene receptores sensibles a la luz, los conos y los bastonesLos bastones proporcionan visin de nocheLos conos trabajan en niveles ms altos de intensidad de luzLos conos contienen fotorreceptores sensibles al rojo (64%), al verde (32%) o al azul (2%)Fundamentos del colorEl ojo humano

El ojo es sensible a un rango de longitudes de ondaMenos sensible a longitudes ms cortas (azules)Ms sensible a longitudes ms largas (amarillos y anaranjados)Debido a la distribucin fsica de los fotorreceptores azules, podemos ver los azules mejor en la periferia que en el frenteFundamentos del colorEl ojo humano

Consecuencias de la organizacin fsica del ojo:Por la falta de fororreceptores azules,Las lneas azules delgadas (como el texto) tienden a verse borrosasPequeos objetos azules tienden a desaparecer cuando tratamos de enfocarlosLos colores que difieren slo por la cantidad de azul no producen bordes clarosObjetos del mismo color pueden parecer marcadamente diferentes en color dependiendo del color del fondoFundamentos del colorEl ojo humano

Ejemplo:Fundamentos del colorEl ojo humanoR: 255 G: 102 B: 0R: 255 G: 102 B: 100R: 255 G: 0 B: 102R: 255 G: 100 B: 102

Ejemplo:Fundamentos del colorEl ojo humanoEl texto en azul tiende a verse borrosoEl texto en azul tiende a verse borrosoEl texto en azul tiende a verse borroso

Ejemplo:Fundamentos del colorEl ojo humano

Conclusin:El uso inefectivo de los colores puede causar vibraciones y sombras, imgenes que distraen al usuario y pueden forzar la vistaFundamentos del colorEl ojo humano

La persona interacta con el mundo a travs de modelos mentales que ha desarrolladoAl disear una interfaz hay quedesarrollar las herramientas de la interfaz que le ayudarn a realizar el trabajoayudar al usuario a desarrollar modelos mentales del sistema que faciliten su trabajoEl color ayuda a desarrollar modelos mentales eficientes si se siguen unas pautas Uso del colorUso efectivo del color

Vincular significados prcticos e intuitivos a los colores primarios, rojo, verde, amarillo y azul, que son fciles de aprender y recordar Mantener el esquema del color simple, utilizando pocos colores: 52Mantener el mensaje sencillo: no sobrecargar el significado del color vinculando ms de un concepto a un slo color. Conceptos diferentes = colores diferentesUso efectivo del colorSimplicidad

Mantener el orden espectral y perceptual de los colores: rojo, verde, amarillo, azul:El rojo se enfoca en el frenteEl verde y el amarillo se enfocan en medioEl azul se enfoca en el fondoEvitar cambiar el significado de los colores en diferentes pantallas, sobre todo cuando se usa para codificar o agrupar informacin Ejemplo: color de fondo de campos no editablesUso efectivo del colorConsistencia

Utilizar colores diferentes para conceptos diferentesNo utilizar varios matices del mismo color, sobre todo para los azulesEvitar el uso de colores que aparecen diferentes debido a la variacin del color de fondoPueden ser percibidos por el usuario como colores diferentes y el significado se perderUso efectivo del colorConsistencia

El tiempo de bsqueda para encontrar una informacin disminuye si su color es conocido de antemano y slo se aplica a ellaUtilizar colores estandarizadosEl uso del color mejora la esttica y el atractivo de la interfaz, pero tambin la efectividad del procesamiento de la informacin y el rendimiento de la memoriaUso efectivo del colorClaridad

Uso efectivo del colorClaridadLa usabilidad mejora alusar colores para agrupar informaciones relacionadasUtilizar cdigos de color en los mensajesrojo = alertar al usuario de un erroramarillo = mensaje de advertenciaverde = progreso positivo

Las personas tenemos un lenguaje de color basado en el uso comn y culturalEjemplo: el color del buzn de correo es efectivo para un icono de correo en un sistema de correo electrnicoUso efectivo del colorLenguaje de colorPara usar el color efectivamente debe conocerse al usuario y su entorno de trabajo

Es ms difcil usar el color efectivamente que inefectivamenteUsar una combinacin equivocada para el fondo y el frente puede crear ilusiones que forzarn la vistaUsar mltiples colores puros o colores muy saturados obliga al ojo a reenfocar constantemente y causa fatigaUsar colores difciles de enfocar para texto o lneas delgadas causa fatiga y estrsUso efectivo del colorLenguaje de color

Combinar colores para producir efectos positivos requiere el conocimiento de ciertas tcnicas, como las combinaciones de colorUso efectivo del colorLenguaje de colorProgramming the user interface: principles and examples. Brown y Cunningham

Existen reglas y sugerencias fciles de seguirMarcus:Utiliza el color azul para el fondoUtiliza la secuencia de color espectral (rojo, anaranjado, amarillo, verde, azul, ndigo y violeta)Mantn pequeo el nmero de coloresEvita usar colores adyacentes que difieran solamente en la cantidad de azulUtiliza colores brillantes para indicar peligro o para llamar la atencin del usuarioSuger.: disea la interfaz primero en blanco y negroUso efectivo del colorLenguaje de color

Evita el despliegue simultneo de colores espectralmente extremos que estn altamente saturadosDescarta el color azul puro para texto, lneas delgadas y figuras pequeasEvita colores adyacentes que se diferencien slo por la cantidad de azul que contienenLos operadores de edad avanzada necesitan niveles ms altos de brillo para distinguir los coloresLos colores cambian de apariencia a medida que el nivel de luz ambiental cambiaUso efectivo del colorLas reglas de Murch

La magnitud de un cambio detectable en el color vara a travs del espectroEs difcil enfocar hacia las orillas creadas solamente por el colorEvita utilizar el rojo y el verde en la periferia de presentaciones a gran escalaLos colores opuestos se ven bien juntosPara los observadores con deficiencias del color (ciegos al color), evita hacer distinciones de un slo colorUso efectivo del colorLas reglas de Murch

Uso efectivo del colorEjemplosPixelcentric (http://pixelcentric.net/x-shame/color.html)LegibilidadMac OS XQT 4 / 5,6Significado del colorMac OS X

Uso efectivo del colorEjemplosInterface Hall of Shame (http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)Easy CD CreatorSignificado del color(colores fijados en el cdigo)

Uso efectivo del colorEjemplosInterface Hall of Shame (http://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.htm)IBM RealCDUso del colorWebformsMicrosoft Access

DisposicinCmo se colocan las cosas en la pantalla. Permite dar ms importancia a ciertas cosas. El orden de lectura es importante y vara segn la culturanfasisLos elementos realzados se ven antes y se perciben como ms importantes. Para enfatizar se usa la posicin, el color y los atributos del textoSi todos los elementos tienen el mismo peso la composicin es aburrida y la navegacin difcilTcnicas de diseo grfico

FocoEl punto focal es el centro de atencin, el punto que normalmente se ve antes. Se puede utilizar para dirigir al usuario a la informacin deseadaAlineacinAyuda a conseguir equilibrio, armona, unidad y modularidad. Una alineacin exacta y consistente es la manera ms fcil de mejorar la esttica de la interfazTcnicas de diseo grfico

Los iconos se utilizan desde la primera interfaz grfica (Xerox Star) y son tiles por dos motivos:Las personas reaccionan instintivamente a las imgenesSon pequeos, importante para el espacio limitado de la pantalla de ordenadorLos iconos representan objetos y tambin funcionesIconos

Factores que determinan el significado de un icono:Contexto. Entorno donde se utilizaFuncin. Tipo de tarea en la que se utilizaForma representativa. Puede ser de tres tipos:Uso de un objeto concretoUso de un objeto abstractoUso de una combinacin de ambos (iconos ms comprensibles)IconosDisear con significado

Tipos de iconos segn forma representativa:a) Iconos similares: presentan el concepto a travs de una imagen anlogab) Iconos ejemplares: sirven como ejemplosc) Iconos simblicos: se utilizan para dar una referencia a un mayor nivel de abstraccind) Iconos arbitrarios: no guardan relacin y la asociacin ha de aprenderseIconosDisear con significado

Tras decidir el objeto a incluir en el icono hay que decidir cmo dibujarloMs detallado o ms simplificadoRegla: incluir slo los detalles imprescindiblesIconosCmo disear iconos

Consiste en definir iconos coordinados que representan distintas acciones aplicables a un elementoEjemplo: depuracin de cdigoIconos El lenguaje icnicoPunto de observacinavanzarretrocederborrar

Disear un conjunto coordinado de iconos es mejor que hacerlo uno a unoReduce el esfuerzo en el diseo y el dibujoAsegura la consistenciaDa un estilo al productoHace que los iconos sean autoexplicativos y permite al usuario prever cmo sernLos sistemas complejos disponen de un lenguaje icnico simple y consistenteIconos Ventajas

Iconos EjemplosbienmalMicrosoft WordZocWinCimMac OS X Browser ChimeraMac OS X Finder

EjemplosLa informacin sencilla reduce la carga de memoria

EjemplosInformacin jerarquizada

EjemplosInformacin dispuesta por temas

EjemplosSobrecarga informativa

EjemplosMantenimiento de una misma estructura de navegacin

EjemplosUn fondo llamativo dificulta la lectura

EjemplosLos iconos ayudan a identificar los contenidos

EjemplosUso del color para distribuir la informacin

EjemplosUso del color para resaltar y jerarquizar la informacin

EjemplosEl contraste de color anima y estimula

EjemplosContraste errneo, rojo-azul, exige gran esfuerzo de acomodacin visual

EjemplosAgrupacin lgica de datos

EjemplosImagen global

EjemplosRecomendacionesFacilitar la visibilidad - centrarse en el contenidoUtilizar dilogos simples y naturalesReducir la memorizacin haciendo visible toda la informacin evitar desplazamientosReducir la complejidad de las acciones prediccin y realimentacinMarcar las opciones de navegacin con claridadAgrupar los datos lgicamente jerarquizar la informacin mostrar slo la necesariaFlexibilizar la presentacin - personalizacinDisear siguiendo una imagen global

El diseo es importante para la usabilidad de la interfazUn buen diseo ana la funcionalidad con la estticaEl diseo no es slo cuestin de buen gusto. Est basado en conocimientos fundados sobre la percepcin humanaExisten reglas de fcil aplicacin que pueden ayudar a realizar un buen diseoEs importante recurrir a las guas de estiloConclusiones