1. Introduccion al Diseno de Interfaces

Universidad del Valle de Puebla SCUniversidad del Valle de Puebla SCUniversidad del Valle de Puebla SCUniversidad del Valle de Puebla SCESCUELA DE INGENIERIA

Asignatura:

Diseño de InterfacesUnidad 1. Introducción al Diseño de Interfaces

Guía del Alumno

Material Elaborado por:Mtra. Yasmine Pineda Díaz

Email: [email protected]ágina Web: www.disimark.com/academico

1.1 Definición de Diseño1.2 Ámbitos de Aplicación del Diseño1.3 Arte y Diseño: Elementos de la Comunicación1.4 Aspectos Básicos del Diseño1.5 Descripción de Interfaces Gráficas1.6 Factores Humanos y Fundamentos del Diseño1.7 Evolución de la Interacción Hombre – Máquina

Índice de Contenido

1.7 Evolución de la Interacción Hombre – Máquina1.8 Consideraciones de la Percepción Humana en

el diseño de las GUI1.9 Quien es el responsable de diseñar interfaces de

Usuario?1.10 Función del diseñador o desarrollador??

1.10,1 Requisitos de un Diseñador1.11 Que es un Sitio Web1.12 No me hagas Pensar….

1.1 Definición de Diseño

Del italiano disegno, se refiere a la trazao delineación de un edificio o de unafigura. El concepto de diseño sueleutilizarse en el contexto de las artes, laingeniería, la arquitectura y diversasdisciplinas creativas.

El diseño es el proceso previo deconfiguración mental, en la búsqueda deuna solución, de esta forma implicaplasmar el pensamiento a través deesbozos, dibujos, bocetos y esquemastrazados en cualquier soporte.

1.2 Ámbitos de Aplicación del Diseño

Las posibilidades del diseño gráfico son infinitas, ya que cada vez son más los

campos en los que se emplean elementos creados a través del

ordenador.ordenador.

El diseño se podría dividir en tres grupos principales:

La ediciónLa ediciónLa ediciónLa ediciónLa publicidadLa publicidadLa publicidadLa publicidadLa identidadLa identidadLa identidadLa identidad

1.3 Arte y Diseño: 1.3 Arte y Diseño: Elementos de la ComunicaciónElementos de la Comunicación

Diseñar se puede considerar un arte,pero no es del todo exacto. Un diseñopuede reunir unas ciertas pautasestéticas como para considerarlas obrasde arte. En los museos de artemoderno, pueden verse carteles entremoderno, pueden verse carteles entrepinturas o dibujos artísticos, y otrosobjetos que se crearon para unafunción especial y específica, en losque puedan incluir el arte en sí.

La belleza de un diseño puede superaren muchas ocaciones, cualquier obrade Arte, por muy preciada que éstasea

Los elementos básicos que se deben dominar y tener en cuenta

1.4 Aspectos Básicos del Diseño

Los elementos básicos que se deben dominar y tener en cuenta en cualquier diseño:

Lenguaje Visual:Lenguaje Visual:Lenguaje Visual:Lenguaje Visual: Saber comunicar el mensaje adecuado, con los recursos oportunos, dependiendo del grupo de personas o público al que vaya dirigido el mensaje.

Comunicación:Comunicación:Comunicación:Comunicación: Conocer los procesos de comunicación, para poder captar los mensajes que el diseño ha de comunicar.

PercepciónPercepciónPercepciónPercepción VisualVisualVisualVisual:::: Estar informados, la manera en que las personas

1.4 Aspectos Básicos del Diseño

PercepciónPercepciónPercepciónPercepción VisualVisualVisualVisual:::: Estar informados, la manera en que las personasvemos y percibimos lo que vemos. Aspectos tan importantes, comonuestro campo visual, el recorrido de la vista, el contraste, la percepciónde las figuras, fondos, trayectoria de la luz.

AdministraciónAdministraciónAdministraciónAdministración dededede recursosrecursosrecursosrecursos:::: Conocer todos los recursos de los que sedispone, y aplicarlos lo mejor posible.

1.5 Descripción de Interfaces

Gráficas

La interfaz del usuario es el punto de contacto en un entornovisual que permite la interacción del usuario con una aplicación oprograma.

En este contexto, el diseño de Interfaces gráficas tiene comoobjetivo principal: centrar el diseño en el usuario a través deentornos gráficos claros y eficientes, con información yherramientas adecuadas

1.6 Factores Humanos y Fundamentos del Diseño

Los seres humanos percibimos lainformación del mundo que nos rodea através de nuestros sentidos. Lainformación que recibimos del medio enque nos desenvolvemos es básica paraque nos desenvolvemos es básica paranuestra supervivencia ya que a través deésta, podemos tomar las decisionescorrectas para evitar peligros,comunicarnos, disfrutar de eventos yespectáculos tanto naturales comoartificiales, sentir emociones, estados deánimo, etc.


Los Sentidos se podrían catalogar como interfaces entre laspersonas y el entorno, a través de ellos interactuamos con elmundo que nos rodea. Asociamos, anticipamos, decidimos,sobrevivimos.

� La vista� El oído� Tacto� Gusto� El Olfato


La Vista

La vista es fundamental en todos losámbitos de la vida del ser humano,y por lo tanto en el uso de una

En la periferia la visiónno es buena, un punto aconsiderar si se requierehacer una interfaz gráficade usuario en la que seutilice una pantalla muyamplia.

y por lo tanto en el uso de unainterfaz gráfica de usuario, ya que através de ella se perciben formas,colores, texto, imágenes y texturas,que son la mayoría de componentesque toda interfaz presenta.

amplia.

Para este casose maneja el concepto decampo visual, el cual semide en grados y es laamplitud en que la visiónes aceptable y que va delos 100 a los 120 grados.


El Oído

Después de la vista, el oído es elsegundo sentido más importante.

El Tacto

El tacto es importante en el uso delteclado para una interfaz o dealgún otro dispositivo de entrada.

Lo primordial en este caso es queel sonido nos puede remitir ainformación registrada en elcerebroque puede hacer que se revivanexperiencias agradables odesagradables, o que se registreuna nueva información asociada aun sonido.

algún otro dispositivo de entrada.


El Gusto

En este caso son las papilasgustativas las encargadas de recibir

El Olfato

Nos brinda información respecto asubstancias químicas que viajan engustativas las encargadas de recibir

los estímulos y pasar lainformación al cerebro para quesea procesada. Gracias a ellopodemos distinguir sabores comosalado, agrio o dulce.

substancias químicas que viajan enel aire. Estas substancias pueden serasociadas a situaciones de peligro,felicidad, sufrimiento, etc.

1.7 Evolución de la InteracciónHombre - Máquina

� Ocurre tanto en la vida cotidiana como en el uso delordenador.

� Gente de todas las actividades empiezan a usar elordenador

� Inicialmente aparece el término “Man-MachineInterface”

� Aquellos aspectos del sistema con los que tiene contactoel usuario. Interfaz amigable (“User-friendlyinterface”)

1.7 Evolución de la InteracciónHombre - Máquina

� A mediados de los 80 se acuña el nuevo término.

� (1981) “Un lenguaje de entrada para el usuario, desalida para el sistema y un protocolo de interacción”

� “HCI es una disciplina relacionada con el diseño,evaluación e implementación de sistemas interactivospara el uso humano y con el estudio de los grandesfenómenos alrededor de ellos”. (ACM SIGCHI, 1987)

¿Cuál es la diferencia

entre ‘user interface’ y

HCI?

1.8 Consideraciones de la Percepción Humana en el diseño de las GUI

� Tomar en cuenta todos y cada uno de los sentidos

� El Color es fundamental ya sea por sus característicasespectrales tanto por su significado

� El correcto uso del audio en una interfaz puede� El correcto uso del audio en una interfaz puedereforzar la forma como ésta se percibe, y ayudar aque se recuerde en un futuro, o en el presente seasocie con vivencias pasadas, ya sea para bien o paramal.

� El tacto, el gusto y el olfato no son muy utilizadospero resultaría interesante buscar la manera deintegrar estas tres importantes entradas

1.9 Quien es el responsable de diseñar Interfaces de Usuario?

� Diseñadores Gráficos

� Desarrolladores de Software (developers)(developers)

Diseño de Interacción y Arquitectura de Diseño de Interacción y Arquitectura de la Informaciónla Información

1.10 Función del diseñador o desarrollador??

Es, transmitir una idea, un concepto o una imagen de la forma máseficaz posible. Para ello, el diseñador debe contar con una serie deherramientas como, la información necesaria de lo que se va atransmitir, los elementos gráficos adecuados , su imaginación ytodo aquello que pueda servir para su comunicación.

Nuestro diseño debe constituir un todo, donde cada unode los elementos gráficos que utilicemos posean una funciónespecífica, sin interferir en importancia y protagonismo a loselementos restantes (a no ser que sea intencionado).

1.10 Función del diseñador o desarrollador??

Un buen diseñador debecomunicar las ideas yconceptos de una forma claray directa, por medio de loselementos gráficos.

Por tanto, la eficacia de laPor tanto, la eficacia de lacomunicación del mensajevisual que elabora eldiseñador, dependerá de laelección de los elementosque utilice y delconocimiento que tenga deellos.

1.10.1 Requisitos del Diseñador

Para desempeñar su función el diseñador necesita una serie derequisitos:

a. Información sobre lo que se va a comunicar.b. Elección de los elementos adecuados.c. Componer dichos elementos de la forma más atractivac. Componer dichos elementos de la forma más atractiva

posible.

Es un conjunto de archivoselectrónicos y páginas Webreferentes a un tema en particular,que incluye una página inicial debienvenida, generalmentedenominada homepage, con unnombre de dominio y direcciónen Internet específicos.

1.11 ¿Que es un Sitio Web?

No importa cual sea el giro de la empresaen la cual se desarrolle el sitio siempretendrá elementos gráficos y de navegaciónque deberán equilibrarse.

1.12 No me Hagas Pensar

A quien le interesa aprender sobre lo que esta bien y esta mal en undiseño de interfaces para un software?

DiseñadoresDesarrolladores de SoftwareDesarrolladores de SoftwareAnalistas de SoftwareAdministradores de ProyectoPersonas de Marketing


� Cuando una aplicación de software nos hace pensar,quiere decir que su esencia misma no es consistente.

� Es difícil entender cual es la funcionalidad principal ycuales son las funcionalidad auxiliares.

� No puedo entender realmente donde encontrar lo quenecesito.

� Donde empieza y donde termina?


A. SENCILLO, SIMPLE e

INTUITIVO

B. COMPLEJO, TEDIOSO,

ABURRIDO

Actividad de Participación15P Total

¿Quien considera bueno o malo un diseño?

Encontrar 5 páginas que sean para tengan un buendiseño de acuerdo a tu consideración y 5 que consideresmalas

malo un diseño?

Complemento de la Actividad

URL Buena Mala Final


Cuando un usuario se enfrenta a una aplicación de software por logeneral, le surgen ciertas dudas:

� Donde estoy?� Como empiezo?� Donde pongo ____ ? (entrada de información)� Que es lo mas importante de esta pantalla?� Que es lo mas importante de esta pantalla?� Donde esta lo que busco? (salida de información)

SeSe debedebe pensarpensar enen desarrollardesarrollar interfacesinterfaces queque minimicenminimicen loslostiempostiempos dede interaccióninteracción hombrehombre maquinamaquina.. UnUn buenbuen diseñodiseñomuestramuestra exactamenteexactamente lolo queque elel usuariousuario necesitanecesita..

Material Elaborado por:Mtra. Yasmine Pineda Díaz

Email: [email protected]ágina Web: www.disimark.com/academico

1. Introduccion al Diseno de Interfaces

Documents

Transcript of 1. Introduccion al Diseno de Interfaces