SlideShare una empresa de Scribd logo
1 de 6
DISEÑO DEL INTERFAZ
El diseño del interfaz se parece mucho al diseño de la información, pero su
dominio es principalmente la visualización de la pantalla y la interactividad
con el computador y con dispositivos electrónicos.
El diseño del interfaz abarca:
cualquier elemento con el que el usuario vea, toque, escuche o interactué.
se refiere únicamente a la parte visual (pantallas, botones, iconos),
Incluye también los componentes auditivos y, especialmente, la
navegación y la interacción.
PRINCIPIOS DE DISEÑO DEL INTERFAZ
La primera pregunta que un diseñador de interfaz se debe hacer es: ¿Cual
es la vivencia que la gente debería tener?. Al definir la experiencia se
define el modelo del interfaz.
1. METAFORAS
Las metáforas permiten a la gente entender y experimentar un tipo de
interacción utilizando otro tipo de interacción más familiar.
Algunos ejemplos típicos son los siguientes:
o Baraja de cartas: cartas, juegos, reglas de juegos
o Mesa de trabajo: cajones, ficheros, archivadores, papeles
o Documento: libros, revistas
o Libros, papeles: capítulos/secciones, artículos, figuras
o Fotografías: álbumes, secciones, fotos
o Televisión: redes de trabajo, canales, programas, anuncios
o Película: papeles, representaciones, películas, carretes de películas
Los grupos de funciones vienen representados por los verbos. Algunos
ejemplos típicos son:
- Seleccionar: elemento tocado, superficie de fondo desprendida, colocar
dedo y
desplazar, quitar elemento, enlazar el elemento.
-Explorar, deambular, curiosear: exhibiciones (desplazamientos rápidos),
-Borrar: tirar, destruir, perder, reciclar.
-- Mover: navegar, conducir, volar, travesía intencionada.
-Localizar: apuntar, tocar, rodear de un círculo.
- Crear: añadir (nuevo), copiar.
PRINCIPIOS DE DISEÑO DEL INTERFAZ
PRINCIPIOS DE DISEÑO DEL INTERFAZ
2. NAVEGACION DEL MODELO
La navegación consiste en el movimiento a lo largo de los datos, funciones,
tareas y
actividades representados en el modelo y que proporciona un rápido acceso y
facilita la comprensión.
Normalmente este movimiento se facilita mediante menús, cajas de diálogos y
paneles de control.
Uno de los importantes avances para el diseño del interfaz de usuario es ayudar
a que el usuario novato se vuelva más hábil y al final se convierta en un usuario
experto.
3. MANIPULACION DIRECTA
A l usuario le gusta sentir que ellos están a cargo de la actividad que se
encuentren ejecutando y esperan que sus acciones físicas tengan una
respuesta.
PRINCIPIOS DE DISEÑO DEL INTERFAZ
4. VISTA
La vista de un interfaz de usuario consiste en la características de
presentación
auditivas y visuales que llevan la información al usuario eficientemente de
una forma atractiva y atrayente. Estas características incluyen todos los
aspectos del lenguaje visible: tipografía, color, simbolismo, imágenes,
animaciones , etc.
5. VER Y SEÑALAR
La gente selecciona las acciones de alternativas presentadas en la pantalla.
Si la gente entiende lo que se tiene que hacer normalmente se imaginarán
como hacerlo.
6. SENTIDO
El sentido del interfaz de usuario consiste en las técnicas de interacción que
funcionan eficientemente y que proporcionan una experiencia de percepción
atractiva. Algunos diseñadores de producto tradicionales han descrito el
diseño del interfaz de usuario como un "diseño de interacción“.
7. CONSISTENCIA
La gente se concentra con más facilidad cuando pueden confiar en formas
familiares de hacer las cosas. De esta forma al sentirse más segura sabiendo
cual será el resultyado de sus acciones también se sentirá más segura para
explorar.
8. WYSIWYG (WHAT YOU SEE IS WHAT YOU GET)
"Lo que ves es lo que hay". Implementando la metáfora de una forma fidedigna
no
habrá secretos para el usuario.
9. ACCIONES INICIADAS POR EL USUARIO
Si la persona controla todas las acciones podrá aprender mejor al estar
directamente
involucrada en el proceso de aprendizaje.
10. DIALOGO
La comunicación debe ser breve, directa y expresada en términos del punto de

Más contenido relacionado

Similar a Diseño interfaz

Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileDesarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileWorköholics
 
Interfaces digitales
Interfaces digitalesInterfaces digitales
Interfaces digitalesrick arias
 
Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634ManuelBarrios56
 
DISEÑO INTERACTIVO.pptx
DISEÑO INTERACTIVO.pptxDISEÑO INTERACTIVO.pptx
DISEÑO INTERACTIVO.pptxMrKevinKR
 
Productos digitales: Agítese bien antes de usar
Productos digitales: Agítese bien antes de usarProductos digitales: Agítese bien antes de usar
Productos digitales: Agítese bien antes de usarCésar García Gascón
 
Usabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño WebUsabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño WebDNRstudios
 
Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Jhonnatan Flores
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioLucasDanielB
 
Formacion UCD -1-
Formacion UCD -1-Formacion UCD -1-
Formacion UCD -1-Aurora Font
 

Similar a Diseño interfaz (20)

Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileDesarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobile
 
UX para dispositivos móviles
UX para dispositivos móvilesUX para dispositivos móviles
UX para dispositivos móviles
 
Digu 04. modelos y affordances
Digu 04. modelos y affordancesDigu 04. modelos y affordances
Digu 04. modelos y affordances
 
Introducción a Experiencia de Usuario
Introducción a Experiencia de UsuarioIntroducción a Experiencia de Usuario
Introducción a Experiencia de Usuario
 
Human centered design
Human centered designHuman centered design
Human centered design
 
Diseño de interfaces centradas en el usuario
Diseño de interfaces centradas en el usuarioDiseño de interfaces centradas en el usuario
Diseño de interfaces centradas en el usuario
 
Taller n°3 patricio vimos
Taller n°3 patricio vimosTaller n°3 patricio vimos
Taller n°3 patricio vimos
 
Interfaces digitales
Interfaces digitalesInterfaces digitales
Interfaces digitales
 
Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634Unidad 5 interfaces-trabajo c.i.27.902.634
Unidad 5 interfaces-trabajo c.i.27.902.634
 
Diseno de interfaces zyndi.pptx
Diseno de interfaces zyndi.pptxDiseno de interfaces zyndi.pptx
Diseno de interfaces zyndi.pptx
 
DISEÑO INTERACTIVO.pptx
DISEÑO INTERACTIVO.pptxDISEÑO INTERACTIVO.pptx
DISEÑO INTERACTIVO.pptx
 
Productos digitales: Agítese bien antes de usar
Productos digitales: Agítese bien antes de usarProductos digitales: Agítese bien antes de usar
Productos digitales: Agítese bien antes de usar
 
Usabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño WebUsabilidad y Workflow de diseño Web
Usabilidad y Workflow de diseño Web
 
Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#
 
Ui vs ux
Ui vs uxUi vs ux
Ui vs ux
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 
Formacion UCD -1-
Formacion UCD -1-Formacion UCD -1-
Formacion UCD -1-
 

Más de mmazonf

Motores de busqueda en internet tipos.pptx
Motores de busqueda en internet tipos.pptxMotores de busqueda en internet tipos.pptx
Motores de busqueda en internet tipos.pptxmmazonf
 
Conocimiento.pptx
Conocimiento.pptxConocimiento.pptx
Conocimiento.pptxmmazonf
 
EDUCAPLAY..pdf
EDUCAPLAY..pdfEDUCAPLAY..pdf
EDUCAPLAY..pdfmmazonf
 
sociedad de la informacion..pptx
sociedad de la informacion..pptxsociedad de la informacion..pptx
sociedad de la informacion..pptxmmazonf
 
Plataformas E-learning LMS.pptx
Plataformas E-learning LMS.pptxPlataformas E-learning LMS.pptx
Plataformas E-learning LMS.pptxmmazonf
 
Presentacion Cursos Tutores Virtuales.pptx
Presentacion Cursos Tutores Virtuales.pptxPresentacion Cursos Tutores Virtuales.pptx
Presentacion Cursos Tutores Virtuales.pptxmmazonf
 
Panorama de la Enseñanza online.pptx
Panorama de la Enseñanza online.pptxPanorama de la Enseñanza online.pptx
Panorama de la Enseñanza online.pptxmmazonf
 
Enseñanza online.pptx
Enseñanza online.pptxEnseñanza online.pptx
Enseñanza online.pptxmmazonf
 
Tareas y estrategias accion formativa
Tareas y estrategias accion formativaTareas y estrategias accion formativa
Tareas y estrategias accion formativammazonf
 
Origen y significado etimologico de pedagogia
Origen y significado etimologico de pedagogiaOrigen y significado etimologico de pedagogia
Origen y significado etimologico de pedagogiammazonf
 
Las aulas virtuales EVA Perspectiva pedagogica
Las aulas virtuales EVA Perspectiva pedagogicaLas aulas virtuales EVA Perspectiva pedagogica
Las aulas virtuales EVA Perspectiva pedagogicammazonf
 
98602857 categorias-pedagogicas-ppt
98602857 categorias-pedagogicas-ppt98602857 categorias-pedagogicas-ppt
98602857 categorias-pedagogicas-pptmmazonf
 
Comunicacion
ComunicacionComunicacion
Comunicacionmmazonf
 
Conocimiento (1)
Conocimiento (1)Conocimiento (1)
Conocimiento (1)mmazonf
 
Conceptos informaticos p2
Conceptos informaticos p2Conceptos informaticos p2
Conceptos informaticos p2mmazonf
 
Informatica forense
Informatica  forenseInformatica  forense
Informatica forensemmazonf
 
Sistemas operativos
Sistemas operativosSistemas operativos
Sistemas operativosmmazonf
 
Parroquia licán
Parroquia licánParroquia licán
Parroquia licánmmazonf
 

Más de mmazonf (18)

Motores de busqueda en internet tipos.pptx
Motores de busqueda en internet tipos.pptxMotores de busqueda en internet tipos.pptx
Motores de busqueda en internet tipos.pptx
 
Conocimiento.pptx
Conocimiento.pptxConocimiento.pptx
Conocimiento.pptx
 
EDUCAPLAY..pdf
EDUCAPLAY..pdfEDUCAPLAY..pdf
EDUCAPLAY..pdf
 
sociedad de la informacion..pptx
sociedad de la informacion..pptxsociedad de la informacion..pptx
sociedad de la informacion..pptx
 
Plataformas E-learning LMS.pptx
Plataformas E-learning LMS.pptxPlataformas E-learning LMS.pptx
Plataformas E-learning LMS.pptx
 
Presentacion Cursos Tutores Virtuales.pptx
Presentacion Cursos Tutores Virtuales.pptxPresentacion Cursos Tutores Virtuales.pptx
Presentacion Cursos Tutores Virtuales.pptx
 
Panorama de la Enseñanza online.pptx
Panorama de la Enseñanza online.pptxPanorama de la Enseñanza online.pptx
Panorama de la Enseñanza online.pptx
 
Enseñanza online.pptx
Enseñanza online.pptxEnseñanza online.pptx
Enseñanza online.pptx
 
Tareas y estrategias accion formativa
Tareas y estrategias accion formativaTareas y estrategias accion formativa
Tareas y estrategias accion formativa
 
Origen y significado etimologico de pedagogia
Origen y significado etimologico de pedagogiaOrigen y significado etimologico de pedagogia
Origen y significado etimologico de pedagogia
 
Las aulas virtuales EVA Perspectiva pedagogica
Las aulas virtuales EVA Perspectiva pedagogicaLas aulas virtuales EVA Perspectiva pedagogica
Las aulas virtuales EVA Perspectiva pedagogica
 
98602857 categorias-pedagogicas-ppt
98602857 categorias-pedagogicas-ppt98602857 categorias-pedagogicas-ppt
98602857 categorias-pedagogicas-ppt
 
Comunicacion
ComunicacionComunicacion
Comunicacion
 
Conocimiento (1)
Conocimiento (1)Conocimiento (1)
Conocimiento (1)
 
Conceptos informaticos p2
Conceptos informaticos p2Conceptos informaticos p2
Conceptos informaticos p2
 
Informatica forense
Informatica  forenseInformatica  forense
Informatica forense
 
Sistemas operativos
Sistemas operativosSistemas operativos
Sistemas operativos
 
Parroquia licán
Parroquia licánParroquia licán
Parroquia licán
 

Diseño interfaz

  • 1. DISEÑO DEL INTERFAZ El diseño del interfaz se parece mucho al diseño de la información, pero su dominio es principalmente la visualización de la pantalla y la interactividad con el computador y con dispositivos electrónicos. El diseño del interfaz abarca: cualquier elemento con el que el usuario vea, toque, escuche o interactué. se refiere únicamente a la parte visual (pantallas, botones, iconos), Incluye también los componentes auditivos y, especialmente, la navegación y la interacción.
  • 2. PRINCIPIOS DE DISEÑO DEL INTERFAZ La primera pregunta que un diseñador de interfaz se debe hacer es: ¿Cual es la vivencia que la gente debería tener?. Al definir la experiencia se define el modelo del interfaz. 1. METAFORAS Las metáforas permiten a la gente entender y experimentar un tipo de interacción utilizando otro tipo de interacción más familiar. Algunos ejemplos típicos son los siguientes: o Baraja de cartas: cartas, juegos, reglas de juegos o Mesa de trabajo: cajones, ficheros, archivadores, papeles o Documento: libros, revistas o Libros, papeles: capítulos/secciones, artículos, figuras o Fotografías: álbumes, secciones, fotos o Televisión: redes de trabajo, canales, programas, anuncios o Película: papeles, representaciones, películas, carretes de películas
  • 3. Los grupos de funciones vienen representados por los verbos. Algunos ejemplos típicos son: - Seleccionar: elemento tocado, superficie de fondo desprendida, colocar dedo y desplazar, quitar elemento, enlazar el elemento. -Explorar, deambular, curiosear: exhibiciones (desplazamientos rápidos), -Borrar: tirar, destruir, perder, reciclar. -- Mover: navegar, conducir, volar, travesía intencionada. -Localizar: apuntar, tocar, rodear de un círculo. - Crear: añadir (nuevo), copiar. PRINCIPIOS DE DISEÑO DEL INTERFAZ
  • 4. PRINCIPIOS DE DISEÑO DEL INTERFAZ 2. NAVEGACION DEL MODELO La navegación consiste en el movimiento a lo largo de los datos, funciones, tareas y actividades representados en el modelo y que proporciona un rápido acceso y facilita la comprensión. Normalmente este movimiento se facilita mediante menús, cajas de diálogos y paneles de control. Uno de los importantes avances para el diseño del interfaz de usuario es ayudar a que el usuario novato se vuelva más hábil y al final se convierta en un usuario experto. 3. MANIPULACION DIRECTA A l usuario le gusta sentir que ellos están a cargo de la actividad que se encuentren ejecutando y esperan que sus acciones físicas tengan una respuesta.
  • 5. PRINCIPIOS DE DISEÑO DEL INTERFAZ 4. VISTA La vista de un interfaz de usuario consiste en la características de presentación auditivas y visuales que llevan la información al usuario eficientemente de una forma atractiva y atrayente. Estas características incluyen todos los aspectos del lenguaje visible: tipografía, color, simbolismo, imágenes, animaciones , etc. 5. VER Y SEÑALAR La gente selecciona las acciones de alternativas presentadas en la pantalla. Si la gente entiende lo que se tiene que hacer normalmente se imaginarán como hacerlo. 6. SENTIDO El sentido del interfaz de usuario consiste en las técnicas de interacción que funcionan eficientemente y que proporcionan una experiencia de percepción atractiva. Algunos diseñadores de producto tradicionales han descrito el diseño del interfaz de usuario como un "diseño de interacción“.
  • 6. 7. CONSISTENCIA La gente se concentra con más facilidad cuando pueden confiar en formas familiares de hacer las cosas. De esta forma al sentirse más segura sabiendo cual será el resultyado de sus acciones también se sentirá más segura para explorar. 8. WYSIWYG (WHAT YOU SEE IS WHAT YOU GET) "Lo que ves es lo que hay". Implementando la metáfora de una forma fidedigna no habrá secretos para el usuario. 9. ACCIONES INICIADAS POR EL USUARIO Si la persona controla todas las acciones podrá aprender mejor al estar directamente involucrada en el proceso de aprendizaje. 10. DIALOGO La comunicación debe ser breve, directa y expresada en términos del punto de