3. Diseño Gráfico. Contenidos. Introducción Organización perceptual de los objetos Texto Color Gráficos Navegación. Diseño Gráfico

Transcripción

1 Coteidos 1. Iteracció Hombre-Máquia 2. El Factor Humao Estilos de Iteracció 5. Metáforas 6. Iteracioalizació 7. Soporte al Usuario 8. Usabilidad Web 9. Guías y Estádares 10. Accesibilidad 11. Trabajo cooperativo 12. Evaluació 3. Itroducció Orgaizació perceptual de los objetos Texto Color Gráficos Navegació

2 Itroducció - Coocer - Volume de usuarios - Perfil de los usuarios - Desarrollar u prototipo (probar co distitas cofiguracioes,moitores,...) El objetivo del diseñador es presetar la iformació de u modo fácil, iteligible y maipulable para el usuario, acercádose a las ecesidades del cliete y cosiguiedo u modo de utilizació más ituitivo. Es la pieza clave etre el tratamieto de la iformació y su desarrollo e la patalla del ordeador Es fudametal e primer lugar coocer las características del usuario al que va dirigido el producto Itroducció(II) El diseñador gráfico ha de propoer la orgaizació de los elemetos e la patalla y etre patallas, como Tipografía El color Uso de gráficos e ilustracioes Aimacioes Sistema de avegació Debe presetar las patallas optimizadas atediedo a uos criterios ergoómicos, y cuidar la calidad de los mesajes y el leguaje visual

3 Coteidos Itroducció Orgaizació perceptual de los objetos Texto Color Gráficos Navegació Orgaizació Perceptual de Objetos La distribució de los elemetos e la iterfaz es ua decisió del diseñador. Es posible ayudar a la distribució acudiedo a los procesos psicológicos que subyace a la percepció orgaizada de esceas. Leyes de Agrupació que da como resultado que varios elemetos de la escea se perciba cojutamete. Estas leyes so el puto de la orgaizació perceptual que más y mejor puede ser empleado para el diseño de iterfaces

4 Orgaizació Perceptual de Objetos (II) Pricipios de Agrupació: Proximidad. Dos objetos que está uo cerca de otro y alejados de los otros tiede a ser percibidos cojutamete. Similitud. Objetos que comparte algua característica perceptual tiede a ser percibidos cojutamete. Destio comú. Dos elemetos que se mueve e la misma direcció se percibirá agrupados. Buea cotiuació. Elemetos que puede ser vistos como bueas cotiuacioes del otro tiede a ser percibidos cojutamete. Orgaizació Perceptual de Objetos (III) Pricipios de Agrupació: Cierre. Elemetos formado ua figura cerrada tiede a ser percibidos como agrupados. Regió comú. Objetos colocados detro de ua misma regió cerrada se percibirá agrupados Coexió etre elemetos. Objetos que está coectados por otros elemetos tiede a ser agrupados cojutamete. Sicroía. Elemetos visuales que ocurre al mismo tiempo tiede a ser vistos como u cojuto

5 Orgaizació Perceptual de Objetos (IV) Por lo geeral, cuatos más pricipios se aplique coheretemete e ua agrupació cocreta, más facilidad habrá de que el usuario la perciba, pero si varios elemetos opera de forma opuesta deberá ser aalizados co mayor deteimieto. Orgaizació Perceptual de Objetos (V) Segú Wickes la orgaizació perceptual de la iformació debe estar supeditada a cómo el usuario lleve a cabo la tarea sobre la misma

6 Coteidos Itroducció Orgaizació perceptual de los objetos Texto Color Gráficos Navegació Texto Determia la correcta legibilidad de la iformació e la patalla y tiee ua iterveció directa e la visió del usuario. E la legibilidad iterviee: Tipo Color Tamaño

7 Texto - Fuete Tipográfica Las fuetes refleja el carácter del documeto: Helvética -> trasparecia y eutralidad Times-> clasicismo y tradició No debe emplearse muchas fuetes distitas e ua págia (máx. 3). Ejemplo Para la selecció de la fuete pricipal Teer e cueta aspectos fucioales(iños,...) Debe fucioar si espacio adicioal etre líeas Texto - Recomedacioes (I) El texto debe ser escueto y claro, evitado redudacias y ambigüedades. Nuca de debe fializar titulares co. No se debe emplear subrayado para destacar. Mejor egrita o cursiva. Tampoco abusar de sombras o huecos. El texto e miúsculas es más fácil de leer que e mayúsculas El tamaño de 12 putos es el valor más pequeño e que resulta legibles cómodamete muchas fuetes.

8 Texto - Recomedacioes (II) Acosejable u tipo de letra secillo e el que se de ua relació óptima etre el grueso de los trazos y la altura de los mismos. Ejemplo Ejemplo de escritura Ejemplo de Escritura El espacio etre líeas de texto debe ser mayor (dos o tres putos) que el espacio etre palabras. Líeas largas ecesita más espacio de separació que las líeas más cortas. Aliear siempre el texto a la izquierda o e su defecto justificarlo. Es más fácil su lectura. Texto - Recomedacioes (III) El texto elazado de los documetos debe aparecer e u color que lo resalte: Ejemplo Azul, para elaces que aú o ha sido usados Verde, para elaces e ejecució Violeta o sepia, para elaces ya visitados co aterioridad Hay que cotrolar la catidad de texto La lectura e la patalla de ordeador es u 25% más leta. A los usuarios o les gusta hacer Scroll Ejemplo

9 Texto - Recomedacioes (IV) Cotraste U cotraste acetuado implica llamada de ateció pero si es muy acetuado puede dismiuir la legibilidad Por lo geeral es preferible u cotraste moderado e el que se logre destacar la letra del fodo Los textos sobre fodos obscuros o debe utilizarse salvo que el texto sea corto o perteezca a u titular. Coteidos Itroducció Orgaizació perceptual de los objetos Texto Color Gráficos Navegació

10 Color Es u factor clave para los elemetos que costruye el diseño. Cuado se añade color a u diseño, casi siempre se covierte e el pricipal puto de ateció, es el que más afecta imediatamete a uestra memoria. Permite resaltar iformacioes relevates pero o se puede emplear si criterios de comuicació. E geeral, los colores claros queda bie itegrados si se ue co colores obscuros ya que hay bue cotraste. E determiados casos puede combiar co toos tambié claros, excepto si so demasiado parecidos como el azul y el verde. Color (II) El área ocupada por u color etraña u mesaje: Área co color obscuro. Efecto de pesadez y seriedad. Área co color claro. Alegría y secillez Grades zoas de color poco destacable, sea obscuras o claras. Aburrimieto.

11 Color (III) El ojo humao cotiee bastoes y coos sesibles a la luz. Los coos está especializados e el color. Si ellos se vería e blaco y egro. Hay coos para los colores rojo, verde y azul y a partir de su combiació se obtiee el resto de colores. Los defectos e la visualizació del color proviee de carecias e alguos de los tres tipos de coos. Afecta al 8% de los hombres y al 0.5% de las mujeres Adelate Ayuda Salir Color (IV) Si rojo Accesibilidad Si verde Si azul Todos Si azul Si rojo Si verde

12 Color (V) Existe procesos opoetes: Rojo-Verde, Azul-Amarillo que debe ser evitados Ejemplo1 Ejemplo2 Cuado se mira fijamete,durate u tiempo, u color como el rojo se produce imágees verdes. Si se poe letras e color azul sobre u fodo amarillo puede captarse la ateció del usuario pero los posefectos del color puede hacer que se deje de ver las letras e la patalla. Color (VI) Guías para la selecció del color e las iterfaces Elegir combiacioes de colores compatibles. Evitar rojo-verde, azul-amarillo, verde-azul y rojo-azul Usar cotrastes altos de color etre la letra y el fodo Limitar el úmero de colores a 4 para los ovatos y a 7 para los expertos Usar color blaco para la iformació periférica Usar códigos redudates (formas además de colores)

13 Coteidos Itroducció Orgaizació perceptual de los objetos Texto Color Gráficos Navegació Imágees y Gráficos Cuado ua persoa lee u texto accede al coocimieto que tiee almaceado e la memoria semática a través de la trasformació foológica de las palabras. Tambié se puede acceder a la iformació almaceada e la memoria mediate imágees. De hecho, los icoos permite u acceso directo y más rápido a la iformació semática del objeto El empleo de u icoo para represetar u objeto secillo es mejor que la iclusió del icoo más la palabra correspodiete. Para la represetació de accioes complejas es mejor ambas represetacioes: icoo y texto. Ej. visita guiada por museos Los icoos ha de ser fácilmete distiguibles uos de otros Debe presetarse e las mismas posicioes a lo largo de todas las patallas.

14 Imágees y Gráficos (II) Las imágees ha de adecuarse a la trasmisió de u coteido determiado. Es fudametal que la fució o mesaje que represete sea iteligible co facilidad Si se emplea imágees descoocidas (o poco claras) se dificulta el etedimieto y obliga a la memorizació de sus fucioes, provocado casacio visual y quizá abadoo. Imágees y Gráficos (III) Si queremos destacar u elemeto cocreto de ua image sobre el resto, lo colocaremos cercao al foco. Los aspectos poco relevates se ubicará e el puto de fuga. Como osotros leemos de izquierda a derecha y de arriba hacia abajo, percibimos mucha mayor sesació de velocidad e el movimieto e esas direccioes que co las opuestas.

15 Coteidos Itroducció Orgaizació perceptual de los objetos Texto Color Gráficos Navegació Navegació La avegació o es ua tarea e si misma, sio u medio para realizar la tarea, co lo que la carga cogitiva asociada debería ser lo más baja posible. A veces so ecesarios ua gra catidad de comados para realizar la avegació Desorietació del Usuario Pérdida e el Hiperespacio

16 Navegació (II) Al pricipio el usuario o sabe co exactitud dode quiere ir o lo que se va a ecotrar, por lo que los saltos etre págias debe ser sutiles y la ueva iterfaz debe mateer algú tipo de relació visual co la aterior Tratar de colocar los cotroles de las págias e lugares fácilmete accesibles y visibles. Usar icoos y botoes recoocibles. Evitar fodos llamativos o que cree cotrastes agresivos salvo para segmetos de patalla muy cocretos. Toos claros e iocuos se utiliza e documetos co mucho texto para facilitar la lectura o para págias compuestas fudametalmete por icoos. Los fodos co mosaicos o imágees ocupa mucha memoria por lo que debe reducirse. Calibració correcta de los tiempos de respuesta. Navegació (II) Se puede emplear ua serie de técicas o herramietas que ayude e la avegació: Visitas Guiadas Mapas Mecaismo de vuelta atrás Recuperació de la iformació Metáforas

17 Visitas Guiadas Ua visita guiada es u camio lieal a través del espacio de iformació que puede utilizarse para ayudar a los usuarios a familiarizarse co los coteidos del hipertexto. El usuario puede abadoar la visita cuado quiera y cotiuar avegado por el hipertexto. Tambié puede retomarla dóde la había dejado. Mapas Se basa e la metáfora del mapa turístico Proporcioa ua represetació esquemática de la estructura de la págia, idicado los pricipales coceptos icluidos e el espacio de iformació y las iterrelacioes existetes etre ellos. Puede presetarse e forma de tablas de coteidos bidimesioales o tridimesioales o bie represetacioes más acordes co el cotexto.

18 Mapas (II) E los mapas suele icluirse huellas (footprits) que idica tato la posició actual del usuario como las previas. Es apropiado tambié que ofrezca marcas (ladmarks), co las que se señala odos realmete iteresates. Mecaismo Vuelta Atrás Es acosejable que el usuario siempre pueda volver al odo aterior. Puede compararse co u salvavidas de forma que el usuario siempre puede ir dode quiera teiedo la certeza de que siempre le será posible retorar a u lugar coocido.

19 Recuperació de Iformació Es importate proporcioar mecaismos de búsqueda que complemete la avegació ya que e muchos casos el usuario o quiere avegar; úicamete quiere acceder a ua iformació cocreta directamete. Bibliografía Desigig Visual Iterfaces K. Mullet, D. Sao. Pretice Hall, Normas Básicas e el Diseño de ua Iterfaz Gráfica de Usuario M. Aguiar y K. Aguiar. Novática, º 121, The Desig of Sites: Patters, Priciples ad Processes for Craftig a Customer-Cetered Web Experiece K. Douglas. Addiso-Wesley, 2002