Diseño de Interfaz. Material Creado por: Mtro. Omar Zárate Navarro Mtro. Omar Zárate Navarro

Transcripción

1 Diseño de Interfaz Asignatura: Ingeniería del Software II Unidad Temática: Diseño de interfaz de usuario Objetivo: El alumno diseñará un sistema de información aplicando los principios de usabilidad, estándares y guías de estilo para mejorar la facilidad de uso. Material Creado por:

2 Porcentaje de Conos Azul(4%) Verde (32%) Rojo (64%)

3

4 Longitudes de Onda Las Longitudes de Onda de la Luz se perciben en colores La frecuencia mas baja es el ROJO; la frecuencia mas alta es el VIOLETA.

5 Problemas con el Color Problemas con el Color El ojo humano no enfoca correctamente todos los colores juntos. El Rojo y el Azul no pueden enfocarse juntos, esto causa vista cansada El centro de la retino virtualmente no tiene receptores del color azul. Los pequeños objetos en color azul casi desaparecen cuando los tratamos de enfocar.

6 La escritura en color azul sobre un fondo rojo es difícil de leer. Esto causa vista cansada.

7 Las letras rojas sobre fondo azul también son difíciles de leer. Esto causa vista cansada.

8 Letras amarillas sobre fondo rojo también son difíciles de leer. Esto causa vista cansada

9 Problemas con el Color El color ciega a los usuarios Cerca del 10% de los hombres (0.4% de las mujeres) tienen problemas en la percepción de colores Los mas comunes no son por no ver los colores sino por percibirlos débilmente 1% de la población percibe débilmente el color rojo 5% de la población percibe débilmente el color verde Arriba del 15% de la población tiene problemas con la percepción del color

10

11

12 La persona con una vision normal de colores podra distinguir el número 5. La persona con ceguera del rojo y verde (Los mas comunes) observara el numero 2.

13

14 Simulación de Decremento (una forma de rojo a verde)

15 Respondiendo al Color No todos responden a los colores de la misma manera Diferencias Culturales Genero Edad Diferencias en ocupaciones u oficios

16 Respondiendo al Color Diferencias Culturales En Japón, verde implica juventud y energía, pero en Francia connota criminalidad. En Estados Unidos, amarillo es utilizado para precaución, mientras en Egipto significa prosperidad y felicidad.

17 Mira las palabras y pronuncia el color y no el texto que contienen AMARILLO AZUL NARANJA NEGRO ROJO VERDE PURPURA AMARILLO ROJO NARANJA VERDE NEGRO AZUL ROJO PURPURA VERDE AZUL NARANJA Conflictos Izquierda Derecha Tu lado derecho del cerebro trata de decir el color pero tu Mtro. lado Omar Zárate izquierdo Navarro insiste en leer la palabra

18 Iluciones Opticas

19 Cuenta los puntos Negros :o)

20

21 Enfoca el punto del centro y mueve tu cabeza hacia atrás y adelante

22 Cuantas patas tiene el elefante?

23 Mtro. Son Omar las Zárate líneas Navarrohorizontales paralelas o están inclinadas?

24 Diseño de Interacción

25 Que hacen los profesionales en el Diseño de Interfaz para los negocios? Diseño de Interacción - gente involucrada en el diseño de todos los aspectos de interacción de un producto Ingeniería de Usabilidad - gente enfocada en evaluar los productos, utilizando métodos y principios de usabilidad. Diseño Web gente que desarrolla y crea el diseño visual de sitios web, como plantillas (layouts) Arquitectura de Información Gente que genera ideas de cómo planear y estructurar productos interactivos

26 Pricipios del Diseño 1. Reducir los pasos Minimizar el número de pasos para llegar a una meta 2. Soportabilidad Maximizar el numero de usuarios que puedan acceder al sistema 3. Se Claro Expresar la información de forma sencilla 4. Proveer Retroalimentación Muestra a los usuarios los resultados de sus acciones 5. Prevé Errores Diseña tomando en cuenta errores humanos 6. Se consistente Has similares todos los procesos en el sistema 7. Se Flexible Permite a los usuarios trabajar como ellos prefieran 8. Evita la Memorización No esperes que los usuarios recuerden 9. Manipulación Directa Permite a los usuarios manipular los datos que pueden ver 10. Control de Usuario No permitas que el software tome el control de los usuarios

27 Summario de Principios Plantillas Claras Graficos Claros Lenguaje Claro Acciones Claras Estados Claros Contexto Claro Reducción de Pasos Soporta todos los Usuarios Se Claro Provee Retroalimentación Prevé Errores Se Consistente Se Flexible Evita Memorización Manipulación Directa Control de Usuario Soporta todas las Plataformas Permite Localización Sensible a Redundancia Motor de Redundancias

28 Don Norman Soy un entusiasta de la tecnología y molesto por la innecesaria complejidad de los productos de hoy en día. Mi meta es humanizar la tecnología y remplazarla por tecnología centrada en los humanos y basada en sus actividades cotidianas. Fáciles de aprender, fáciles de usar. Potentes y agradables.

29

30

31

32 Diseño WEB

33 Diseño WEB Metas y Estrategias Cual es la misión de la organización? Como el sitio WEB soportara la misión? Cuales son las principales metas del sitio WEB? Cual es la principal audiencia de tu sitio WEB? Que quieres que la audiencia peince o haga despues de visitar tu sitio? Que estrategias en el sitio utilizaras para alcanzar las metas? Como mediras el exito de tu sitio WEB? Como se mantendra adecuadamente el sitio WEB?

34 Principios del Diseño de Interfaz Aaron Marcus & Suzanne Martin Existen tres principios fundamentales. Organización: Provee al usuario de un clara y consistente concepto de la estructura Economiza: Haz lo más que puedas con el menor numero de elementos Comunicación: Adapta la presentación con las capacidades del usuario.

35 Organización Consistencia, Pantallas, Relaciones y La navegacion son importantes conceptos en la organización del sitio.

36 Organizando elementos de pantalla Estudios de la visión, indican que durante la visualización de un desplegado en dirección de las manecillas del reloj, la gente esta influenciada por el equilibrio simetrico y el tamaño de los títulos, gráficos, y texto del desplegado.

37 Organiza los elementos de pantalla Balance Simetría Predictibilidad Secuenciabilidad Utilidad Proporción Simplicidad Agrupamiento

38 Balance Crear un balance en pantalla previendo el mismo tamaño de los elementos de la izquierda que los de la derecha, los de arriba y los de abajo.

39 Balance

40 Balance Colores oscuros, formas inusuales, y los objetos más grandes son más pesados mientras que los colores ligeros, las formas regulares, y los pequeños objetos son más ligeros.

41

42 Inestabilidad

43 Simetria

44 Simetria

45 Simetria

46 Simetria