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 interfaz TipografaTcnicas de diseo grficoIconosElementos morfolgicos de la imagenUso del color

Objetivos del diseo grficoCrear una interfaz transparente

No obstruya el acceso.

donde el usuario tenga una buena experiencia al interactuar con el sistema.

y la interfaz casi no sea detectada.

El estilo y la apariencia del textoFactores que influyen en legibilidad del texto:Tipo de fuenteTamao de la fuenteMaysculas y minsculasEspaciamiento entre caracter, palabra y lneaLongitud de la lneaJustificacinAmbiente del textoMrgenesDistincin tipogrficaTipografa

Las fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo.TipografaTipo de la fuente

TipografaTipo de la fuenteLas fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo. Las fuentes proporcionales consumen menos espacio y son ms legibles que las de ancho fijo.

El espacio entre caracteres depende en gran medida del tamao de la fuente.El espacio recomendado entre palabras es el ancho de una n. Espaciamiento entre palabras con una ene

TipografaEspaciamiento

2. Diecises puntos pueden ser empleados para ttulos2.1 Catorce puntos para encabezado de seccinDoce puntos estn bien para texto fluido (1) . Recuerde hacer diferenciacin de por lo menos 2 puntos entre distintos tamaos

(1) Diez puntos son apropiados para notas de pie de pgina, subndices y superndices.

10 puntos son legibles.11 y 12 puntos son ms legibles.La distincin entre tamaos de fuentes debe ser por lo menos de 2 puntos.

TipografaTamao de la fuente

Mezclar maysculas y minsculas hace ms legible el texto que si son slo maysculas.

El reconocimiento de palabras est parcialmente basado en reconocimiento de formas.La mezcla de maysculas y minsculas produce formas ms irregulares.Facilita el reconocimiento.TipografaMaysculas y minsculas

TipografaMaysculas y minsculasDEFINIR UNA GRAN CANTIDAD DE TEXTO EN LETRAS MAYSCULAS AFECTA SERIAMENTE LA LEGIBILIDAD DEL TEXTO. LAS LETRAS MAYSCULAS DEBERAN USARSE SLO PARA DAR NFASIS, PERO RECUERDE DEFINIR EL TAMAO DE LA FUENTE UN POCO MS PEQUEO QUE EL RESTO DEL TEXTO

Definir una gran cantidad de texto en letras maysculas afecta seriamente la legibilidad del texto. Las letras maysculas deberan usarse slo para dar nfasis, pero recuerde definir el tamao de la fuente un poco ms pequeo que el resto del texto.

El espacio recomendado entre lneas es de 2 puntos.

TipografaEspaciamiento entre lineas

TipografaLongitud de la lneaSi una lnea es muy larga, los lectores tendrn dificultad para encontrar el comienzo de la siguiente lnea. En este primer ejemplo hay alrededor de 90 caracteres por lnea. Para libros es recomendable dejar alrededor de sesenta caracteres o 10 palabras por lnea. Las columnas de los diarios tienen tpicamente 30 caracteres o cinco palabras por lnea.

Si una lnea es muy larga, los lectores tendrn dificultad para encontrar el comienzo de la siguiente lnea. En este primer ejemplo hay alrededor de 90 caracteres por lnea. Para libros es recomendable dejar alrededor de sesenta caracteres o 10 palabras por lnea. Las columnas de los diarios tienen tpicamente 30 caracteres o cinco palabras por lnea.

Si una lnea es muy larga, los lectores tendrn dificultad para encontrar el comienzo de la siguiente lnea. En este primer ejemplo hay alrededor de 90 caracteres por lnea. Para libros es recomendable dejar alrededor de sesenta caracteres o 10 palabras por lnea. Las columnas de los diarios tienen tpicamente 30 caracteres o cinco palabras por lnea.

Insercin de espacio adicional dentro de una lnea para alinear el margen derecho.

La justificacin sin guiones divisores de palabras retrasa la lectura.

Debido a brechas entre palabras

Alinear a la izquierda o dividir palabras.TipografaJustificacin

TipografaJustificacinJustificacin a la izquierda:

Interaccin Humano-computador es una disciplina que involucra el diseo, evaluacin e implementacin de los sistemas computacionales interactivos para el uso humano

Justificacin a la derecha:

Interaccin Humano-computador es una disciplina que involucra el diseo, evaluacin e implementacin de los sistemas computacionales interactivos para el uso humano

Justificacin centrada:

Interaccin Humano-computador es una disciplina que involucra el diseo, evaluacin e implementacin de los sistemas computacionales interactivos para el uso humano

Justificacin a ambos lados:

Interaccin Humano-computador es una disciplina que involucra el diseo, evaluacin e implementacin de los sistemas computacionales interactivos para el uso humano

Utilice un mximo de

Dos tipos de fuente diferentes

Dos inclinaciones diferentes (normal y cursiva)

Dos pesos diferentes (medio y negrita)

Cuatro tamaos (ttulo, subttulo, texto y pie de pgina)TipografaAmbiente del texto

Evite el sndrome de los procesadores de texto.Texto al borde de la ventana (vea Notepad)Deje mrgenes amplios a los lados

TipografaMrgenesvs.

Informacin es cualquier diferencia que hace una diferencia. (Gregory Bateson)

Use distincin tipogrfica como cursiva, negrita o cambio de fuente si ello lleva consigo informacin adicional.Importancia de un elementoTipografaDistincin tipogrfica

Un fondo llamativo dificulta la lectura

Tcnicas de diseo grficoDisposicin de los elementos:

Cmo se colocan los elementos en la pantalla.

Induce relaciones entre elementos

Permite dar ms importancia a ciertas cosas.

Tcnicas de diseo grficoDisposicin de los elementos:

El orden de lectura es importante y vara segn el idioma.

Tcnicas 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 deseada

AlineacinAyuda a conseguir equilibrio, armona, unidad y modularidad. Una alineacin exacta y consistente es la manera ms fcil de mejorar la esttica de la interfaz

nfasis

Los elementos realzados se ven antes y se perciben como ms importantes.

Para enfatizar se usan la posicin, el color y los atributos del texto.

Si todos los elementos tienen el mismo peso, la composicin es aburrida y la navegacin difcil.Tcnicas de diseo grfico

La informacin sencilla reduce la carga de memoria

Sobrecarga informativa

EjemplosInformacin jerarquizada

EjemplosInformacin dispuesta por temas

IconosLos iconos se utilizan desde la primera interfaz grfica (Xerox Star) y son tiles por dos motivos:Las personas reaccionan instintivamente a las imgenes.Son pequeos.Importante para el espacio limitado de la pantalla de ordenador.

Los iconos representan objetos y tambin funciones.

IconosDisear con significadoFactores que determinan el significado de un icono:ContextoEntorno en que 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)

INCRUSTAR Paint.Picture

IconosCmo disear iconosTras decidir el objeto a incluir en el icono hay que decidir cmo dibujarlo => Nivel de realismoMs detallado o ms simplificadoRegla: incluir slo los detalles imprescindibles

Partes de un iconoBordeFondoImagenEtiquetaIconosCmo disear iconos

Evite el uso de muchos colores.Disee primero en blanco y negro.Agregue color despusUtilice tonos grises y uno o dos coloresNo utilice letras o caracteres alfabticos dentro del icono.Necesitar versiones para idiomas diferentes.Evite smbolos de manos o rostros humanos.Recuerde que las metforas son especficas para una determinada cultura.No se olvide de la etiqueta de texto que servir de gua al usuario.Tooltip

IconosCmo disear iconos

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

Disear un conjunto coordinado de iconos es mejor que hacerlo uno a uno.

Reduce el esfuerzo en el diseo y el dibujo.Asegura la consistencia.En tamao, color, metfora, nivel de realismoDa un estilo al producto.Hace que los iconos sean autoexplicativos y permite al usuario prever cmo sern.

Los sistemas complejos disponen de un lenguaje icnico simple y consistenteIconosVentajas

IconosEjemplosbienmalMicrosoft WordZocWinCim

Los iconos ayudan a identificar los contenidos... a veces

Elementos de la imagenPara representar algo utilizamos elementos que constituyen un alfabeto grfico.

Estos elementos son:El puntoLa lneaLa formaLa luzEl colorEl tiempoEl tamaoEl formatoLa composicin

Elementos de la imagenEl puntoEl elemento ms simplePosee una gran fuerza atractiva como marca.Su situacin puede establecer los ejes bsicos de la estructura.Varios puntos juntos se perciben agrupados creando formas.Ayuda a dirigir la visin del observador.

Elementos de la imagenLa lneaOrganizan el espacio.Determinan ejes que delimitan zonas de atraccin.Pueden crear texturas, profundidad y movimiento.Su direccin y grosor les da expresividad.

Elementos de la imagenLa formaDefine una superficie con unas dimensiones dadas.Formas bsicas:Cuadrado, tringulo y crculoFuncin: definir y organizar el espacioPueden simular tridimensionalidad cuando se representan en perspectiva.

Elementos de la imagenLa composicinEs la forma de ordenar y organizar los elementos morfolgicos de la imagen en el espacio estructural que ofrece el formato

Elementos de la imagenLa luzContribuye a la composicin de la escena.Puede sugerir profundidad y tridimensionalidad.Puede modelar formas, superficies y volmenes.

Una 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 oscuro.Un tono oscuro se comprime rodeado de uno claro.

Elementos de la imagenEl tiempoSe puede simular el paso del tiempo en imgenes fijas, organizando adecuadamente el espacio:Uso de diferentes intensidades lumnicas, contrastes cromticos, de textura, de escala, entre otros.Jerarquizacin de 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 elemento.Ayuda a crear sensacin de profundidad mediante la perspectiva.

Elementos de la imagenEl formatoProporcin del cuadro donde se muestra la imagen.Debe favorecer la adaptacin al campo visual humano, buscando una armona entre las dimensiones.formatos horizontales son ms estticos, verticales y circulares son ms dinmicos

Uso del colorMotivacinEl color tiene un gran impacto en la presentacin de informacin.Si se usa adecuadamente, mejora la presentacin.Su uso inapropiado puede reducir su funcionalidad.

Es un componente principal de las GUI.

El uso de colores apropiados puede ayudar a la memoria del usuario y facilitar la formacin de modelos mentales efectivos.

Fundamentos del colorEl ojo humanoEl 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 humanoEl 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 frente

Fundamentos del colorEl ojo humanoConsecuencias 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 fondo

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

Fundamentos del colorEl ojo humanoEjemplo:El texto en azul tiende a verse borrosoEl texto en azul tiende a verse borrosoEl texto en azul tiende a verse borroso

Fundamentos del colorEl ojo humanoEjemplo:

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

Elementos de la imagenEl colorPapel del color en la imagen:Contribuye a la recreacin del espacio.Ayuda a simular la profundidad (sombreado).Sugiere distancia (difuminacin progresiva del tono).

El color transmite sentimientos.Hay colores clidos y fros, ligeros y pesados, tristes y alegres.La percepcin del color es subjetiva y depende de factores culturales.

Elementos de la imagenEl colorPapel del color en la imagen:Ayuda a dinamizar la composicin a travs de la interaccin de los colores.Los colores claros son excntricos y los oscuros concntricos.Los colores saturados (cantidad de blanco) producen un fuerte impacto y se relacionan con sensaciones dinmicas y alegres. Los colores no saturados transmiten sensaciones dbiles y ms sutiles.

Elementos de la imagenEl colorFormas de relacin dinmica entre colores:Armona: crea una composicin con variaciones cromticas suaves y gradualesSe relacionan colores afinesContraste: yuxtapone colores diferentes entre s, Rojo-verde, amarillo-violeta, azul-naranjaLa composicin llama fuertemente la atencin.Si es muy acentuado, puede reducir la legibilidad al producirse vibracin

Uso efectivo del colorSimplicidadVincular significados prcticos e intuitivos a los colores primarios, rojo, verde, amarillo y azul, que son fciles de aprender Mantener el esquema del color simple, utilizando pocos colores: 52

Mantener el mensaje sencillo

No sobrecargar el significado del color vinculando ms de un concepto a un slo color.

Conceptos diferentes => colores diferentes

Uso efectivo del colorConsistenciaEvitar 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 editables

Uso efectivo del colorConsistenciaUtilizar colores diferentes para conceptos diferentesNo utilizar varios matices del mismo color, sobre todo para los azules

Evitar el uso de colores que aparecen diferentes debido a la variacin del color de fondo

Pueden ser percibidos por el usuario como colores diferentes y el significado se perder.

Uso efectivo del colorClaridadEl tiempo de bsqueda para encontrar una informacin disminuye si su color es conocido de antemano y slo se aplica a ella.

Utilizar colores estandarizados

El uso del color mejora la esttica y el atractivo de la interfaz.

Tambin mejora la efectividad del procesamiento de la informacin y el rendimiento de la memoria.

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

Uso 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 no efectivamente.

Usar una combinacin equivocada para el fondo y el frente puede crear ilusiones que forzarn la vista.

Usar mltiples colores puros o colores muy saturados obliga al ojo a reenfocar constantemente y causa fatiga.

Usar colores difciles de enfocar para texto o lneas delgadas causa fatiga y estrs.

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

Uso efectivo del colorLenguaje de colorExisten reglas y sugerencias fciles de seguir.Marcus:Utilice el color azul para el fondo.Mantenga bajo el nmero de colores.Evite usar colores adyacentes que difieran solamente en la cantidad de azul.Utilice colores brillantes para indicar peligro o para llamar la atencin del usuario.Sugerencia: disee la interfaz primero en blanco y negro.

Uso efectivo del colorLas reglas de MurchEvite el despliegue simultneo de colores espectralmente extremos que estn altamente saturados.Descarte el color azul puro para texto, lneas delgadas y figuras pequeas.Evite colores adyacentes que se diferencien slo por la cantidad de azul que contienen.Los operadores de edad avanzada necesitan niveles ms altos de brillo para distinguir los colores.Los colores cambian de apariencia a medida que el nivel de luz ambiental cambia.

Uso efectivo del colorLas reglas de MurchLa magnitud de un cambio detectable en el color vara a travs del espectro.Es difcil enfocar hacia las orillas creadas solamente por el color.Evite utilizar el rojo y el verde en la periferia de presentaciones a gran escala.Los colores opuestos se ven bien juntos.Para los observadores con deficiencias del color (ciegos al color), evite hacer distinciones de un slo color.

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://homepage.mac.com/bradster/iarchitect/)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 colorWebforms

Uso del color para distribuir la informacin

El contraste de color anima y estimula

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

EjemplosRecomendacionesFacilite la visibilidad - cntrese en el contenido.

Utilice dilogos simples y naturales.

Reduzca la memorizacin haciendo visible toda la informacin.Evite desplazamientos.instrucciones de uso visibles

Reduzca la complejidad de las acciones.Prediccin y realimentacin, evitar ambigedad en las representaciones

EjemplosRecomendacionesMarque las opciones de navegacin con claridad.

Agrupe los datos lgicamente.Jerarquice la informacin.Muestre slo la informacin necesaria.

Flexibilice la presentacin.Personalizacin

Disee siguiendo una imagen global.mantener representaciones, estructura grfica

EjemplosRecomendacionesMensajes de error en lenguaje natural

Proporcionar ayuda

Permitir que el usuario controle la velocidad

Evaluaruso de maquetas desde el principio

ConclusionesEl diseo es importante para la usabilidad de la interfaz.

Un buen diseo reune la funcionalidad con la esttica.

El diseo no es slo cuestin de buen gusto. Est basado en conocimientos fundados sobre la percepcin humana.

Existen reglas de fcil aplicacin que pueden ayudar a realizar un buen diseo.