Diseño de Interfaz Porcentaje de Conos Azul(4%) Verde (32%) Rojo (64%) http://www.siggraph.org/education/materi als/hypergraph/color/coloreff.htm 1
Longitudes de Onda LasLongitudesdeOndadelaLuzse Longitudes Luz se perciben en colores La frecuencia mas baja es el ROJO; la frecuencia mas alta es el VIOLETA. 2
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. La escritura en color azul La escritura en color azul sobre un fondo rojo es difícil de leer. Esto causa vista cansada. 3
Las letras rojas sobre fondo azul también son difíciles de leer. Esto causa vista cansada. Letras amarillas sobre fondo rojo también son difíciles de leer. Esto causa vista cansada 4
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 5
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. 6
Simulación de Decremento (una forma de rojo a verde) 7
Respondiendo al Color No todos responden a los colores de la misma manera Diferencias Culturales Genero Edad Diferencias en ocupaciones u oficios 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. 8
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 lado izquierdo insiste en leer la palabra Iluciones Opticas 9
Cuenta los puntos Negros :o) 10
Enfoca el punto del centro y mueve tu cabeza hacia atrás y adelante Cuantas patas tiene el elefante? 11
Son las líneas horizontales paralelas o están inclinadas? Diseño de Interacción 12
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 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 13
Plantillas Claras Graficos Claros Lenguaje Claro Acciones Claras Estados Claros Contexto Claro Summario de Principios 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 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. 14
15
Diseño WEB 16
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? Principios del Diseño de Interfaz Aaron Marcus & Suzanne Martin http://www.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html 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. 17
Organización Consistencia, Pantallas, Relaciones y La navegacion son importantes conceptos en la organización del sitio. Organizando elementos de pantalla Estudios de la visión indican que 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. 18
Organiza los elementos de pantalla Balance Utilidad Simetría Proporción Predictibilidad Simplicidad Secuenciabilidad Agrupamiento Balance Crear un balance en pantalla previendo 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. 19
Balance Balance Colores oscuros formas inusuales y los 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. 20
Inestabilidad 21
Simetria Simetria 22
Simetria Simetria 23
Asimetria Pantalla Caotica 24
Pantalla Ordenada Organiza >Ordena >Ventanas 25
Organiza> Consitencia Existen tre puntos de Consitencia: Consitencia Interna Consistencia Externa Consistencia en el Mundo Real 26
Organiza > Consistencia > Interna Consistencia Interna Observe las mismas convenciones y reglas en todas partes de la aplicación En general se debera de maximizar los elementos similares de el mayor numero de omponentes de la interfaz de usuario. Organiza > Consistencia > Interna 27
Organiza > Consistencia > Externa Consistencia Externa Las plataformas existentes y las convenciones culturales deberían ser seguidas por las interfaces de usuario. Ejemplo: Consistencia Externa para iconos de Texto Estos iconos vienen de diferentes aplicaciones pero generalmente tienen el mismo significado. Text: Photoshop Text: Flash 28
Organización > Consistencia > Mundo Real En el mundo real la consistencia significa ser consistente con las experiencias, observaciones y percepciones de los usuarios. Numeros de Teclados Un caso de consistencia externa (a) Telefonos y control remoto (b) Calculadoras y Teclados de PC 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3 0 0 29
Organizar > Screen-Layout Plantillas de Pantalla Tres formas de diseñar plantillas para desplegados: Utiliza una estructura de rejilla, estandarizar las plantillas de pantalla, y agrupar los elementos. Organizar > Screen-Layout 30
Plantillas indexadas Indexado vs Flexibilidad 31
Layouts Flexibles 32
Organiza > Screen Layout Relaciones La unión de artículos relacionados y disociar artículos sin relaciones pueden ayudar a conseguir la organización visual. Organiza > Screen Layout > Relaciones 33
Organiza > Navegabilidad Navegabilidad Hay tres importantes reglas de navegación: Provee un foco inicial para la atención del usuario. Dirige la atención a lo importante, secundario o elementos periféricos. Asiste en navegación a través del material. 3 preguntas Donde estoy? A donde puedo ir? Que hay aquí? 34
Errores de Navegación El mayor problema en las interfaces Web El mayor problema en las interfaces Web es la carencia de un sentido, de donde se encuentra dentro del sitio local de la información. 35
No paginas de callejón sin salida Acceso Directo Los usuarios quieren conseguir la información en el menor número de clics. Esto significa que debera de diseñar eficientes e inerentes menus para navegar. Estudios han mostrado que los usuarios prefieren menús que presenten cuando menos cinco o siete vinculos y prefieren una gama muy pequeña de opciones para gran numero de layers. 36
Navegación Los usuarios deberan poder siempre regresar facilmente a la pagina de inicio o a algun punto de navegación importante. Crea graficos de identificación que comuniquen a los usuarios todo el tiempo donde se encuentran dentro del sitio Web. Migas de Pan 37
Economiza Cuatro mayores puntos a considerar: simplicidad, claridad, peculiaridad, y énfasis. Simplicidad Simplicidad incluye solo los elementos que son más importantes para la comunicación. También debería ser tan discreto como sea posible. 38
Claridad Claridad Todos los componentes deberán de diseñarse sin ambigüedad. 39
Economiza Distintivos Las importantes propiedades de los elemento esenciales deberán de distinguirse. Énfasis Los elementos más importantes deberán de percibirse con facilidad. Los elementos no críticos deberán de minimizarse para que no oculte la información critica. Comunicativo La pantalla deberá de mantener un La pantalla deberá de mantener un balance entre legibilidad, tipografía, simbolismo, vistas múltiples, y color o textura a fin de comunicarse con éxito. 40
Proporción Cree ventanas y agrupaciones de datos o texto con proporciones estéticamente agradables.. Proporciones Desde temprana edad, el hombre ha seguido desarrollando su sentido de la proporción en la formación de su mundo. Con el desarrollo de las matemáticas, el diseño comenzó el arreglo de objetos en la relación armoniosa y el espacio que ellos ocupan. 41
Proporciones En el diseño de pantalla, las proporciones estéticamente agradables deberían ser consideradas para componentes principales de la pantalla, incluso ventanas y grupos de datos o texto. Agrupando La agrupación de elementos en una pantalla ayuda en el establecimiento de estructura y forma significativa. Provee una mejor estética de apariencia Ha sido descubierto que ayuda a la memoria y resulta en una búsqueda de pantalla más rápida. 42
Agrupamiento Tullis encontró que las agrupaciones eran el determinante más fuerte del tiempo de búsqueda visual de una pantalla. Si el tamaño de un grupo en una pantalla aumentara, o el número de grupos aumenta, el tiempo de búsqueda también aumenta. Google 43
Agrupación Funcional Los grupos semánticos son aquellos que tienen sentido para el usuario. Información relacionada debera de desplegarse junta. Un lugar lógico para "romper" una pantalla está entre grupos funcionales de la información. Una agrupación masiva de la información debería ser rota en grupos más pequeños. Espacio Para dar la unidad a una pantalla el Para dar la unidad a una pantalla, el espacio entre grupos debería ser menor que el de los márgenes. 44
Unidad Unidad Fragmentación 45
Espacios en Blanco El modo más común y obvio de conseguir el espaciado es por el espacio Blanco o en blanco. Agrupación funcional: el Espaciado parece ser más fuerte que el color. Densidad de Pantalla La densidad total es una medida del porcentaje de posiciones de carácter (o cualquier otro objeto) en la pantalla entera que contiene datos. Danchak declaró que la densidad no debería exceder el 25 por ciento. En general restrinja niveles de densidad de ventana o pantalla a no más que aproximadamente el 30 por ciento. 46
Agrupamiento Utilizando Fronteras Use lineas fronterizas para: Enfocar la Atención guide eye through screen Limits 3 line thicknesses 2 line styles Consistent line height & length Learn from the past www.archive.org 47
48
49
50
51
52
53
www.ilstu.edu 54
55
www.statefarm.com 56
57
58
59
IMPRESION 60
61