SlideShare une entreprise Scribd logo
1  sur  29
Diseño de Interfaces
Centradas en el usuario
M.C.V. Liz Palacios Penna.
Maestría en Diseño Multimedia
¿Qué es una UI?
Es la interfaz de usuario, (user interface)
Hace referencia a la interfaz con la que las personas
interaccionan con las máquinas.
También permite que el ordenador envíe un feedback al
usuario, de modo que este pueda dar cuenta de si su acción
se ha llevado a cabo con éxito.
Se trata del puente o
vehículo que permite usar
un ordenador, o cualquier
dispositivo móvil.
Cuenta con los elementos de control visibles (o
sensibles) al usuario, a través de los que puede efectuar
alguna acción.
Estos pueden ser líneas de texto, comandos, gráficos,
etc.
Tipos UI
Existen diversos tipos de métodos interacción
persona-ordenador (IPO), es decir muchos tipos
de interfaces.
Funcionan con comandos. Ejemplo MS dos.
El control mediante una CLI se lleva a cabo a través
del teclado y sin necesidad de usar el ratón.
Command Line Interfaces(CLI)
Text User Interface (TUI).
La interacción con el ordenador se realiza también por
medio del teclado.
Los programadores
pueden recurrir normalmente a
256 caracteres.
Ejemplo: gestores de arranque o
en programas BIOS Setup.
Graphical User Interfaces
(GUI)
Este software se aplica con elementos gráficos de
control e imágenes simbólicas que toman como
referencia de forma creativa a objetos del “mundo real”.
Todos los elementos pueden identificarse de forma sencilla
y su manejo resulta más intuitivo.
Voice User Interface (VUI)
Permite la interacción con los ordenadores por medio del control
por voz.
Ejemplo: Apple ha creado Siri, Amazon introdujo a Alexa,
Microsoft incluye a Cortana.
El usuario puede acceder a las aplicaciones por medio de
llamadas o lo que se transmite a viva voz, los usuarios pueden
trabajar de un modo más efectivo y tener mayor accesibilidad.
Natural User Interface (NUI)
La comunicación con el ordenador se establece a partir del
reconocimiento de gestos. Estas interfaces también
reconocen rostros y objetos. Ejemplo de ello son los diferentes
sensores de cámaras y micrófonos que permiten
una comunicación versátil con el dispositivo.
Tangible User Interfaces (TUI)
Son interfaces de usuario figurativas y
personalizables, es decir, la interacción con el
ordenador se lleva a cabo a través de objetos físicos.
Ejemplo, realidad aumentada.
Perceptual User Interfaces (PUI)
Son las interfaces de usuario controladas por
percepción, lo que se traduce en una
conexión entre las VUI, las GUI y el
reconocimiento electrónico de gestos.
Ejemplo: los drones de la marca DJ.
Brain Computer Interfaces (BCI)
Funcionan con ayuda de electrodos se pueden medir
las ondas cerebrales y hacer que los algoritmos las
traduzcan en comandos de control.
Ejemplo Stephen Hawkin.
La interfaz permite:
1. Que la persona pueda controlar efectivamente las
acciones de la máquina.
1. Que la persona reciba respuestas de la máquina
que le permitan saber si la interacción es correcta y
cómo seguir actuando.
El diseñador de la interfaz debe favorecer que el
proceso de interacción se efectúe de manera fácil e
intuitiva y que el usuario puede acceder a la
información o ejecutar las acciones que desea, de la
manera más simple posible.
El diseño de interfaces implica
conocimientos de
disciplinas muy variadas, como
la psicología, o el diseño
visual.
Uno de los elementos más importantes es
que la interfaz, “genere una buena
experiencia de usuario”.
¿Qué distingue a las buenas
interfaces de usuario?
 Son sencillas
 Intuitivas
 Amigables
 Comprensibles
 Funcionan
 Tienen fácil manejo
 Son usables
 Tienen apariencia reconocible, tienen
buen aspecto
Si es difícil de usar, el tener un diseño llamativo no
tendrá ninguna importancia para el usuario. Para diseñarlas,
se deben realizar tests; conocer al usuario.
Ejemplo: análisis de mapas de calor. Este
tipo de análisis puede hacer un
seguimiento del comportamiento del
usuario a través de los clics, del scroll,
del movimiento ocular o eye tracking y se
registra haciendo uso de gradaciones
cromáticas.
Con respecto al diseño…..“menos es más”.
Debe imperar la función sobre la forma.
Función, claridad y estructura rigen el diseño de la
interfaz.
Se trata de conocer las conductas de uso del
público objetivo y de no restringir la
funcionalidad a través del diseño.
¿Qué es una UI intuitiva?
Los usuarios esperan utilizar la interfaz de manera
intuitiva.
Usar los símbolos que la forman de manera instintiva
Por este motivo...utiliza iconos ya implantados.
La intención es encontrar el equilibrio
perfecto entre estética y funcionalidad para
poder alcanzar el éxito con un producto.
Puede haber integración de interfaces como GUI y VUI.
Ejemplo Iphone.
La interfaz gráfica de usuario
y el SEO
Una buena interfaz gráfica de usuario tiene un efecto
positivo en la optimización en buscadores (SEO).
Si los usuarios se sienten bien en una página web
permanecerán más tiempo en ella, lo que se convierte en
un factor muy importante, puesto que los buscadores
tienen la capacidad de reconocer mediante el tiempo
de permanencia cuál es la relevancia que tiene una
página web para la búsqueda correspondiente.
Al diseñar la UI, debes ponerte en el lugar de los usuarios
que llegan a ella por primera vez.
Si un usuario no tiene una agradable experiencia,
la abandonará y buscará otra UI sencilla y funcional.
Entonces…., !la navegación intuitiva se convierte en un
factor decisivo!
Se recomienda tener enlaces internos significativos
(crawlers de los buscadores).
 Rutas claras
 Rutas cortas
A lo que se llama (navegación con migas de pan o
breadcrumb navigation).
Para ello, se muestra la ruta recorrida en la página en las
barras de menú colocadas en la parte superior de la
propia página.
Ejemplo:
Página de inicio/Ropa de mujer/Pantalones/Vaqueros.
También puedes leer:
http://albertolacalle.com/hci/interfaz.htm
Todos los días interactuamos con interfaces;
analógicas, físicas, digitales, etc, con las que nos
relacionamos sin ser conscientes.
En la medida en que la interacción está más
relacionada con el cuerpo humano la sensación llamada
“transparencia de la interfaz” (kinect,
pantallas táctiles, reconocimiento de gestos, etc) ….todo
parece que funciona de un modo totalmente
intuitivo, casi naturalizado.
….. la evolución en el diseño de las interfaces
va en dirección de intentar acercarse a la máxima
transparencia….

Contenu connexe

Tendances

Crear un formulario con google drive
Crear un formulario con google drive Crear un formulario con google drive
Crear un formulario con google drive Irene Gonzalez
 
Metodología para Selección o Desarrollo de MECs
Metodología para Selección o Desarrollo de MECsMetodología para Selección o Desarrollo de MECs
Metodología para Selección o Desarrollo de MECsJaime Alberto Sousa Adames
 
Manual usuario estructura
Manual usuario estructuraManual usuario estructura
Manual usuario estructuraDennis Zepeda
 
Introducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-ComputadoraIntroducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-ComputadoraOmar Sosa-Tzec
 
Diagrama de actividades
Diagrama de actividadesDiagrama de actividades
Diagrama de actividadesnoeliaaiza
 
Caracteristicas de un manual de usuario
Caracteristicas de un manual de usuarioCaracteristicas de un manual de usuario
Caracteristicas de un manual de usuarioLuis Mario Zapata Azua
 
Listas en prolog
Listas en prologListas en prolog
Listas en prologJeffoG92
 

Tendances (9)

Crear un formulario con google drive
Crear un formulario con google drive Crear un formulario con google drive
Crear un formulario con google drive
 
SOA y Web Services
SOA y Web ServicesSOA y Web Services
SOA y Web Services
 
Modelo GOMS
Modelo GOMSModelo GOMS
Modelo GOMS
 
Metodología para Selección o Desarrollo de MECs
Metodología para Selección o Desarrollo de MECsMetodología para Selección o Desarrollo de MECs
Metodología para Selección o Desarrollo de MECs
 
Manual usuario estructura
Manual usuario estructuraManual usuario estructura
Manual usuario estructura
 
Introducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-ComputadoraIntroducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-Computadora
 
Diagrama de actividades
Diagrama de actividadesDiagrama de actividades
Diagrama de actividades
 
Caracteristicas de un manual de usuario
Caracteristicas de un manual de usuarioCaracteristicas de un manual de usuario
Caracteristicas de un manual de usuario
 
Listas en prolog
Listas en prologListas en prolog
Listas en prolog
 

Similaire à Diseño de interfaces centradas en el usuario

2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptx2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptxRam Vazquez
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuarioJose Tabor
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioJhoseannyOsuna
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioCristianJose15
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoadrianazamora
 
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...UX Nights
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioCristianJose15
 
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
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuarioaaaj1908
 
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIOQUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIOGDYatusae
 
UX no es diseño gráfico
UX no es diseño gráficoUX no es diseño gráfico
UX no es diseño gráficoIsabel Yepes
 
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaUsabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaSusana Heredia
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz graficajhordy2000
 
Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuariotaninof
 
Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Jhonnatan Flores
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
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
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioLucasDanielB
 

Similaire à Diseño de interfaces centradas en el usuario (20)

2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptx2.4 Creación de Interfaces.pptx
2.4 Creación de Interfaces.pptx
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
 
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
UXN CDMX 03-32 - De la ficción a la realidad, el ayer, hoy y mañana de UX y l...
 
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuarioEl computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
 
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
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIOQUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
QUE ES IPO Y EL DISEÑO CENTRADO EN EL USUARIO
 
UX no es diseño gráfico
UX no es diseño gráficoUX no es diseño gráfico
UX no es diseño gráfico
 
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - PamplonaUsabilidad - Cadius en el Día de la Usabilidad - Pamplona
Usabilidad - Cadius en el Día de la Usabilidad - Pamplona
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuario
 
Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#Reconocimiento de Gestos Kinect + C#
Reconocimiento de Gestos Kinect + C#
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
Taller n°3 patricio vimos
Taller n°3 patricio vimosTaller n°3 patricio vimos
Taller n°3 patricio vimos
 
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
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 

Dernier

Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfAdrianaCarolinaMoral2
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOManuelBustamante49
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasRiegosVeracruz
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxbarbaracantuflr
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 

Dernier (20)

Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdfPresentación Proyecto Vintage Scrapbook Marrón (1).pdf
Presentación Proyecto Vintage Scrapbook Marrón (1).pdf
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYOPDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
PDU - PLAN DE DESARROLLO URBANO DE LA CIUDAD DE CHICLAYO
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
Diseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicasDiseño de sifones y alcantarillas para obras hidraulicas
Diseño de sifones y alcantarillas para obras hidraulicas
 
Presentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptxPresentacion de 100 psicologos dijeron.pptx
Presentacion de 100 psicologos dijeron.pptx
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 

Diseño de interfaces centradas en el usuario

  • 1. Diseño de Interfaces Centradas en el usuario M.C.V. Liz Palacios Penna. Maestría en Diseño Multimedia
  • 2. ¿Qué es una UI? Es la interfaz de usuario, (user interface) Hace referencia a la interfaz con la que las personas interaccionan con las máquinas.
  • 3. También permite que el ordenador envíe un feedback al usuario, de modo que este pueda dar cuenta de si su acción se ha llevado a cabo con éxito. Se trata del puente o vehículo que permite usar un ordenador, o cualquier dispositivo móvil.
  • 4. Cuenta con los elementos de control visibles (o sensibles) al usuario, a través de los que puede efectuar alguna acción. Estos pueden ser líneas de texto, comandos, gráficos, etc.
  • 5. Tipos UI Existen diversos tipos de métodos interacción persona-ordenador (IPO), es decir muchos tipos de interfaces.
  • 6. Funcionan con comandos. Ejemplo MS dos. El control mediante una CLI se lleva a cabo a través del teclado y sin necesidad de usar el ratón. Command Line Interfaces(CLI)
  • 7. Text User Interface (TUI). La interacción con el ordenador se realiza también por medio del teclado. Los programadores pueden recurrir normalmente a 256 caracteres. Ejemplo: gestores de arranque o en programas BIOS Setup.
  • 8. Graphical User Interfaces (GUI) Este software se aplica con elementos gráficos de control e imágenes simbólicas que toman como referencia de forma creativa a objetos del “mundo real”. Todos los elementos pueden identificarse de forma sencilla y su manejo resulta más intuitivo.
  • 9. Voice User Interface (VUI) Permite la interacción con los ordenadores por medio del control por voz. Ejemplo: Apple ha creado Siri, Amazon introdujo a Alexa, Microsoft incluye a Cortana. El usuario puede acceder a las aplicaciones por medio de llamadas o lo que se transmite a viva voz, los usuarios pueden trabajar de un modo más efectivo y tener mayor accesibilidad.
  • 10. Natural User Interface (NUI) La comunicación con el ordenador se establece a partir del reconocimiento de gestos. Estas interfaces también reconocen rostros y objetos. Ejemplo de ello son los diferentes sensores de cámaras y micrófonos que permiten una comunicación versátil con el dispositivo.
  • 11. Tangible User Interfaces (TUI) Son interfaces de usuario figurativas y personalizables, es decir, la interacción con el ordenador se lleva a cabo a través de objetos físicos. Ejemplo, realidad aumentada.
  • 12. Perceptual User Interfaces (PUI) Son las interfaces de usuario controladas por percepción, lo que se traduce en una conexión entre las VUI, las GUI y el reconocimiento electrónico de gestos. Ejemplo: los drones de la marca DJ.
  • 13. Brain Computer Interfaces (BCI) Funcionan con ayuda de electrodos se pueden medir las ondas cerebrales y hacer que los algoritmos las traduzcan en comandos de control. Ejemplo Stephen Hawkin.
  • 14. La interfaz permite: 1. Que la persona pueda controlar efectivamente las acciones de la máquina. 1. Que la persona reciba respuestas de la máquina que le permitan saber si la interacción es correcta y cómo seguir actuando.
  • 15. El diseñador de la interfaz debe favorecer que el proceso de interacción se efectúe de manera fácil e intuitiva y que el usuario puede acceder a la información o ejecutar las acciones que desea, de la manera más simple posible.
  • 16. El diseño de interfaces implica conocimientos de disciplinas muy variadas, como la psicología, o el diseño visual.
  • 17. Uno de los elementos más importantes es que la interfaz, “genere una buena experiencia de usuario”.
  • 18. ¿Qué distingue a las buenas interfaces de usuario?  Son sencillas  Intuitivas  Amigables  Comprensibles  Funcionan  Tienen fácil manejo  Son usables  Tienen apariencia reconocible, tienen buen aspecto
  • 19. Si es difícil de usar, el tener un diseño llamativo no tendrá ninguna importancia para el usuario. Para diseñarlas, se deben realizar tests; conocer al usuario. Ejemplo: análisis de mapas de calor. Este tipo de análisis puede hacer un seguimiento del comportamiento del usuario a través de los clics, del scroll, del movimiento ocular o eye tracking y se registra haciendo uso de gradaciones cromáticas.
  • 20. Con respecto al diseño…..“menos es más”. Debe imperar la función sobre la forma. Función, claridad y estructura rigen el diseño de la interfaz. Se trata de conocer las conductas de uso del público objetivo y de no restringir la funcionalidad a través del diseño.
  • 21. ¿Qué es una UI intuitiva? Los usuarios esperan utilizar la interfaz de manera intuitiva. Usar los símbolos que la forman de manera instintiva Por este motivo...utiliza iconos ya implantados.
  • 22. La intención es encontrar el equilibrio perfecto entre estética y funcionalidad para poder alcanzar el éxito con un producto. Puede haber integración de interfaces como GUI y VUI. Ejemplo Iphone.
  • 23. La interfaz gráfica de usuario y el SEO Una buena interfaz gráfica de usuario tiene un efecto positivo en la optimización en buscadores (SEO). Si los usuarios se sienten bien en una página web permanecerán más tiempo en ella, lo que se convierte en un factor muy importante, puesto que los buscadores tienen la capacidad de reconocer mediante el tiempo de permanencia cuál es la relevancia que tiene una página web para la búsqueda correspondiente.
  • 24. Al diseñar la UI, debes ponerte en el lugar de los usuarios que llegan a ella por primera vez. Si un usuario no tiene una agradable experiencia, la abandonará y buscará otra UI sencilla y funcional. Entonces…., !la navegación intuitiva se convierte en un factor decisivo!
  • 25. Se recomienda tener enlaces internos significativos (crawlers de los buscadores).  Rutas claras  Rutas cortas A lo que se llama (navegación con migas de pan o breadcrumb navigation).
  • 26. Para ello, se muestra la ruta recorrida en la página en las barras de menú colocadas en la parte superior de la propia página. Ejemplo: Página de inicio/Ropa de mujer/Pantalones/Vaqueros. También puedes leer: http://albertolacalle.com/hci/interfaz.htm
  • 27. Todos los días interactuamos con interfaces; analógicas, físicas, digitales, etc, con las que nos relacionamos sin ser conscientes.
  • 28. En la medida en que la interacción está más relacionada con el cuerpo humano la sensación llamada “transparencia de la interfaz” (kinect, pantallas táctiles, reconocimiento de gestos, etc) ….todo parece que funciona de un modo totalmente intuitivo, casi naturalizado.
  • 29. ….. la evolución en el diseño de las interfaces va en dirección de intentar acercarse a la máxima transparencia….