diseño de interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · diseño de...
TRANSCRIPT
![Page 1: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/1.jpg)
1
Diseño de Interfaz
Porcentaje de Conos
Azul(4%)Azul(4%)Verde (32%)Rojo (64%)
http://www.siggraph.org/education/materials/HyperGraph/color/coloreff.htmals/HyperGraph/color/coloreff.htm
![Page 2: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/2.jpg)
2
Longitudes de Onda
Las Longitudes de Onda de la Luz seLas Longitudes de Onda de la Luz se perciben en coloresLa frecuencia mas baja es el ROJO; la frecuencia mas alta es el VIOLETA.
![Page 3: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/3.jpg)
3
Problemas con el Color
Problemas con el ColorProblemas con el ColorEl 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 azulreceptores del color azul.
Los pequeños objetos en color azul casi desaparecen cuando los tratamos de enfocar.
La escritura en color azulLa escritura en color azulsobre un fondo rojo esdifícil de leer. Esto causavista cansada.
![Page 4: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/4.jpg)
4
Las letras rojas sobre fondo azul también son
difíciles de leer. Esto causa vista cansadaEsto causa vista cansada.
Letras amarillas sobre fondo rojo también son
difíciles de leer. Esto causa vista cansadaEsto causa vista cansada
![Page 5: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/5.jpg)
5
Problemas con el Color
El l i l iEl color ciega a los usuariosCerca del 10% de los hombres (0.4% de las mujeres) tienen problemas en la percepción de coloresLos mas comunes no son por no ver los colores sino por percibirlos débilmente
1% de la población percibe débilmente el color rojo5% de la población percibe débilmente el color verdeArriba del 15% de la población tiene problemas con la percepción del color
![Page 6: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/6.jpg)
6
La persona con unaLa persona con una vision normal de colores podra distinguir el número 5. La persona con ceguera del rojo yceguera del rojo y verde (Los mas comunes) observara el numero 2.
![Page 7: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/7.jpg)
7
Simulación de Decremento (una forma de rojo a verde)
![Page 8: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/8.jpg)
8
Respondiendo al Color
No todos responden a los colores de la mismaNo todos responden a los colores de la misma manera
Diferencias Culturales
Genero
Edad
Diferencias en ocupaciones u oficios
Respondiendo al Color
Diferencias CulturalesDiferencias CulturalesEn 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.
![Page 9: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/9.jpg)
9
Mira las palabras y pronuncia el color y no el texto que contienen
AMARILLO AZUL NARANJANEGRO ROJO VERDEPURPURA AMARILLO ROJONARANJA VERDE NEGROAZUL ROJO PURPURAVERDE AZUL NARANJAVERDE AZUL NARANJA
Conflictos Izquierda – DerechaTu lado derecho del cerebro trata de decir el color perotu lado izquierdo insiste en leer la palabra
lIluciones Opticas
![Page 10: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/10.jpg)
10
Cuenta los puntos Negros :o)
![Page 11: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/11.jpg)
11
Enfoca el punto del centro y mueve tu cabeza hacia atrás y adelante
¿Cuantas patas tiene el elefante?
![Page 12: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/12.jpg)
12
¿Son las líneas horizontales paralelas o están inclinadas?
Diseño de Interacción
![Page 13: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/13.jpg)
13
¿Que hacen los profesionales en el Diseño de Interfaz para los negocios?
Diseño de Interacción gente involucrada en el diseño deDiseñ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ño1. Reducir los pasos Minimizar el número de pasos para llegar a una meta1. 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
![Page 14: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/14.jpg)
14
Summario de PrincipiosReducción de Pasos Soporta todas las
PlataformasSoporta todos los Usuarios
Se Claro
Provee Retroalimentación
Prevé Errores
Se Consistente
Se Flexible
Plantillas Claras
Graficos Claros
Lenguaje Claro
Acciones Claras
Estados Claros
Contexto Claro
Permite Localización
Sensible a Redundancia
Motor de Redundancias
Evita Memorización
Manipulación Directa
Control de Usuario
Don NormanSoy un entusiasta de laSoy 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 basadaen los humanos y basada en sus actividades cotidianas. Fáciles de aprender, fáciles de usar. Potentes y agradables.
![Page 15: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/15.jpg)
15
![Page 16: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/16.jpg)
16
Diseño WEB
![Page 17: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/17.jpg)
17
Diseño WEBMetas y EstrategiasMetas 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?¿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 InterfazAaron Marcus & Suzanne Martin http://www.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
Existen tres principios fundamentalesExisten 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 lelementos
Comunicación:Adapta la presentación con las capacidades del usuario.
![Page 18: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/18.jpg)
18
Organización
ConsistenciaConsistencia, Pantallas, Relaciones yLa navegacion son importantes conceptos en la organización del sitioconceptos en la organización del sitio.
Organizando elementos de pantalla
Estudios de la visión indican queEstudios 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.
![Page 19: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/19.jpg)
19
Organiza los elementos de pantalla
Balance UtilidadBalanceSimetríaPredictibilidadSecuenciabilidad
UtilidadProporciónSimplicidadAgrupamiento
Balance
Crear un balance en pantalla previendoCrear 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.
![Page 20: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/20.jpg)
20
Balance
Balance
Colores oscuros formas inusuales y losColores 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.
![Page 21: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/21.jpg)
21
Inestabilidad
![Page 22: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/22.jpg)
22
Simetria
Simetria
![Page 23: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/23.jpg)
23
Simetria
Simetria
![Page 24: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/24.jpg)
24
Asimetria
Pantalla Caotica
![Page 25: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/25.jpg)
25
Pantalla Ordenada
Organiza >Ordena >Ventanas
![Page 26: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/26.jpg)
26
Organiza> Consitencia
Existen tre puntos de Consitencia:Existen tre puntos de Consitencia:Consitencia InternaConsistencia Externa Consistencia en el Mundo Real
![Page 27: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/27.jpg)
27
Organiza > Consistencia > Interna
Consistencia InternaConsistencia InternaObserve las mismas convenciones y reglas en todas partes de la aplicaciónEn general se debera de maximizar los elementos similares de el mayor numero de omponentes de la interfaz de usuario.
Organiza > Consistencia > Interna
![Page 28: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/28.jpg)
28
Organiza > Consistencia > Externa
Consistencia ExternaConsistencia ExternaLas 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
![Page 29: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/29.jpg)
29
Organización > Consistencia > Mundo Real
En el mundo real la consistenciaEn el mundo real la consistencia significa ser consistente con las experiencias, observaciones y percepciones de los usuarios.
Numeros de Teclados
Un caso de consistencia externaUn caso de consistencia externa
1 2 34 5 6
7 8 9
4 5 6
(a) Telefonos y control remoto (b) Calculadoras y Teclados de PC
7 8 9 1 2 3
4 5 6
0 0
![Page 30: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/30.jpg)
30
Organizar > Screen-Layout
Plantillas de PantallaPlantillas de PantallaTres formas de diseñar plantillas para desplegados: Utiliza una
estructura de rejilla, estandarizar las plantillas de pantalla, y
l l tagrupar los elementos.
Organizar > Screen-Layout
![Page 31: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/31.jpg)
31
Plantillas indexadas
Indexado vs Flexibilidad
![Page 32: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/32.jpg)
32
Layouts Flexibles
![Page 33: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/33.jpg)
33
Organiza > Screen Layout
RelacionesRelacionesLa unión de artículos relacionados y disociar artículos sin relaciones pueden ayudar a conseguir la organización visual.
Organiza > Screen Layout > Relaciones
![Page 34: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/34.jpg)
34
Organiza > Navegabilidad
NavegabilidadNavegabilidadHay 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.elementos periféricos.Asiste en navegación a través del material.
3 preguntas
¿A donde puedo ¿Que hay aquí?
¿Donde estoy?
puedo ir?
![Page 35: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/35.jpg)
35
Errores de Navegación
El mayor problema en las interfaces WebEl mayor problema en las interfaces Web es la carencia de un sentido, de donde se encuentra dentro del sitio local de la información.
![Page 36: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/36.jpg)
36
No paginas de callejón sin salida
Acceso Directo
Los usuarios quieren conseguir laLos 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.
![Page 37: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/37.jpg)
37
Navegación
Los usuarios deberan poder siempreLos 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 g qcomuniquen a los usuarios todo el tiempo donde se encuentran dentro del sitio Web.
Migas de Pan
![Page 38: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/38.jpg)
38
Economiza
Cuatro mayores puntos a considerar:Cuatro mayores puntos a considerar:simplicidad, claridad, peculiaridad, yénfasis.
Simplicidad
Simplicidad incluye solo los elementosSimplicidad incluye solo los elementos que son más importantes para la comunicación.También debería ser tan discreto como sea posible.p
![Page 39: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/39.jpg)
39
Claridad
ClaridadClaridadTodos los componentes deberán de diseñarse sin ambigüedad.
![Page 40: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/40.jpg)
40
Economiza
DistintivosDistintivosLas importantes propiedades de los elemento esenciales deberán de distinguirse.
ÉnfasisLos elementos más importantes deberánLos 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 unLa pantalla deberá de mantener un balance entre legibilidad, tipografía, simbolismo, vistas múltiples, y color o textura a fin de comunicarse con éxito.
![Page 41: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/41.jpg)
41
Proporción
Cree ventanas y agrupaciones de datosCree ventanas y agrupaciones de datos o texto con proporciones estéticamente agradables..
Proporciones
Desde temprana edad el hombre ha seguidoDesde 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 ellosrelación armoniosa y el espacio que ellos ocupan.
![Page 42: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/42.jpg)
42
Proporciones
En el diseño de pantalla lasEn 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 unaLa agrupación de elementos en una pantalla ayuda en el establecimiento de estructura y forma significativa.
Provee una mejor estética de aparienciaHa sido descubierto que ayuda a la memoria y resulta en una búsqueda de pantalla más rápida.
![Page 43: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/43.jpg)
43
Agrupamiento
Tullis encontró que las agrupacionesTullis 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.
![Page 44: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/44.jpg)
44
Agrupación Funcional
Los grupos semánticos son aquellos queLos 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 laestá 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 elPara dar la unidad a una pantalla, el espacio entre grupos debería ser menor que el de los márgenes.
![Page 45: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/45.jpg)
45
Unidad
Unidad FragmentaciónUnidad Fragmentación
![Page 46: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/46.jpg)
46
Espacios en Blanco
El modo más común y obvio deEl 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 delLa 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.
![Page 47: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/47.jpg)
47
Agrupamiento Utilizando Fronteras
Use lineas fronterizas para:Use lineas fronterizas para:Enfocar la Atenciónguide eye through screen
Limits3 line thicknesses3 line thicknesses2 line styles
Consistent line height & length
Learn from the past…
www.archive.org
![Page 48: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/48.jpg)
48
![Page 49: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/49.jpg)
49
![Page 50: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/50.jpg)
50
![Page 51: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/51.jpg)
51
![Page 52: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/52.jpg)
52
![Page 53: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/53.jpg)
53
![Page 54: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/54.jpg)
54
www.ilstu.edu
![Page 55: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/55.jpg)
55
![Page 56: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/56.jpg)
56
fwww.statefarm.com
![Page 57: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/57.jpg)
57
![Page 58: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/58.jpg)
58
![Page 59: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/59.jpg)
59
![Page 60: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/60.jpg)
60
IMPRESION
![Page 61: Diseño de Interfazozarate.net › material › disenio_interfaz.pdf · 2011-08-30 · Diseño de Interfaz para los negocios? Diseño de InteracciónDiseño de Interacción - gente](https://reader036.vdocuments.pub/reader036/viewer/2022081406/5f0e55ec7e708231d43ebf32/html5/thumbnails/61.jpg)
61