SlideShare una empresa de Scribd logo
1 de 6
Interfaz de usuario

•   Originalmente el termino interfaz surgió para
    referirse al trabajo realizado por algunos
    especialistas que construían aplicaciones de
    software. Pero realmente todos los productos y
    documentos tanto impresos como digitales tienen
    alguna clase de interfaz de usuario.

•   Una revista por ejemplo necesita una interfaz ( la
    tabla de contenidos, la numeración, títulos,
    subtítulos y demás) para que el lector pueda usarla
    efectivamente.

• Humanizar lo no humano

• Indicios                         Acción
Interfaz de usuario
El diseño de la interfaz de usuario (GUI - Graphic
User Interface -) de un sistema computarizado
incluye:


• 1- Metáforas de interacción,
   Imágenes y conceptos usados para transmitir función
   significando sobre la pantalla de la computadora,
   Las características visuales detalladas de cada
   componente de la interfaz gráfica,

• Todo esto produce la llamada: "experiencia de uso" de
  una interfaz.
Interfaz de usuario


•   En Internet, el diseño gráfico y las "marcas" visuales no
    son usadas simplemente para "decorar" las paginas. Aquí
    los gráficos son parte integral de la experiencia interactiva
    del usuario con el sitio.

•   En documentos interactivos es imposible separar el diseño
    gráfico del diseño de interfaz.
Interfaz de usuario


La navegación debe mostrar claramente:

•   1- En que lugar o sección del sitio me encuentro,
•   2- En que lugares o secciones he estado
•   3- Hacia donde puedo ir
Interfaz de usuario

Tips para el diseño de Interfaz :
   

1.   Conozca y diseñe para su publico objetivo
2.   Pruebe sus suposiciones
3.   Conozca la tecnología
4.   Conozca sus limitaciones
5.   No sea inconsistente (o demasiado
     consistente)
6.   Provea retroalimentación
7.   Permita la manipulación directa
8.   No sobreextienda sus metáforas
9.   Diseñe y conquiste
Interfaz de usuario

Piense globalmente y actúe localmente
     
1. Use figuras gráficas, iconos o símbolos para
   representar una acción siempre que sea posible:
 
2.Cuando esté creando elementos textuales asegúrese
   de que el texto sea totalmente editable

3. Deje espacio para las traducciones

4. Conozca sus limitaciones

5. No sea inconsistente (o demasiado consistente)

6. Consulte a los nativos

7. Sea listo

Más contenido relacionado

Destacado

CRISTOFOR COLOM
CRISTOFOR COLOMCRISTOFOR COLOM
CRISTOFOR COLOMpboschr1
 
Estudio de caso
Estudio de casoEstudio de caso
Estudio de casojilalla
 
Googloe wen
Googloe wenGoogloe wen
Googloe wendwpd2115
 
Rep0216slide
Rep0216slideRep0216slide
Rep0216slidemokkle
 
FUNDAMENTOS CÓNICA Y EJERCICIOS
FUNDAMENTOS CÓNICA Y EJERCICIOSFUNDAMENTOS CÓNICA Y EJERCICIOS
FUNDAMENTOS CÓNICA Y EJERCICIOSanahmsi
 
Bases filosoficas y organizativas del sistema mexicano isabel barron luna
Bases filosoficas y organizativas del sistema mexicano  isabel barron lunaBases filosoficas y organizativas del sistema mexicano  isabel barron luna
Bases filosoficas y organizativas del sistema mexicano isabel barron lunaisabelb1
 
Tráfico de animais ok
Tráfico de animais  okTráfico de animais  ok
Tráfico de animais okcgtetznerslide
 
La revolución científica del siglo xvii
La revolución científica del siglo xviiLa revolución científica del siglo xvii
La revolución científica del siglo xviiVeronica Pardo
 
Diapositivas elevctiva iv...
Diapositivas elevctiva iv...Diapositivas elevctiva iv...
Diapositivas elevctiva iv...aidalvarez
 
Klaudia - Famous Polish people
Klaudia - Famous Polish peopleKlaudia - Famous Polish people
Klaudia - Famous Polish peoplemagdajanusz
 
Caminando sobre la lluvia.
Caminando sobre la lluvia.Caminando sobre la lluvia.
Caminando sobre la lluvia.Camilo Daza
 

Destacado (16)

CRISTOFOR COLOM
CRISTOFOR COLOMCRISTOFOR COLOM
CRISTOFOR COLOM
 
Presentación tarea 3
Presentación tarea 3Presentación tarea 3
Presentación tarea 3
 
Estudio de caso
Estudio de casoEstudio de caso
Estudio de caso
 
Googloe wen
Googloe wenGoogloe wen
Googloe wen
 
Rep0216slide
Rep0216slideRep0216slide
Rep0216slide
 
FUNDAMENTOS CÓNICA Y EJERCICIOS
FUNDAMENTOS CÓNICA Y EJERCICIOSFUNDAMENTOS CÓNICA Y EJERCICIOS
FUNDAMENTOS CÓNICA Y EJERCICIOS
 
Bases filosoficas y organizativas del sistema mexicano isabel barron luna
Bases filosoficas y organizativas del sistema mexicano  isabel barron lunaBases filosoficas y organizativas del sistema mexicano  isabel barron luna
Bases filosoficas y organizativas del sistema mexicano isabel barron luna
 
Kvitu
KvituKvitu
Kvitu
 
Tráfico de animais ok
Tráfico de animais  okTráfico de animais  ok
Tráfico de animais ok
 
La revolución científica del siglo xvii
La revolución científica del siglo xviiLa revolución científica del siglo xvii
La revolución científica del siglo xvii
 
Diapositivas elevctiva iv...
Diapositivas elevctiva iv...Diapositivas elevctiva iv...
Diapositivas elevctiva iv...
 
Persiguiendo a la felicidad
Persiguiendo a la felicidadPersiguiendo a la felicidad
Persiguiendo a la felicidad
 
MÁS ALLÁ DE UNA IMAGEN
MÁS ALLÁ DE UNA IMAGENMÁS ALLÁ DE UNA IMAGEN
MÁS ALLÁ DE UNA IMAGEN
 
Branding - Adoro Pedras
Branding - Adoro PedrasBranding - Adoro Pedras
Branding - Adoro Pedras
 
Klaudia - Famous Polish people
Klaudia - Famous Polish peopleKlaudia - Famous Polish people
Klaudia - Famous Polish people
 
Caminando sobre la lluvia.
Caminando sobre la lluvia.Caminando sobre la lluvia.
Caminando sobre la lluvia.
 

Similar a Diseño de interfaz de usuario

producción de Multimedia y los Diseño Grupo 2.pptx
producción de Multimedia y los Diseño Grupo 2.pptxproducción de Multimedia y los Diseño Grupo 2.pptx
producción de Multimedia y los Diseño Grupo 2.pptxMauricio Lopez Garcia
 
3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptx3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptxadso2024sena
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuarioBayardo Medina
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuarioBayardo Medina
 
Interfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxInterfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxJoseBarazarte4
 
Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)jezabelink
 
INTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxINTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxMariselaBardales1
 
2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcciónkamui002
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaLuis Felipe Perez
 
Modelo de Implantación del Usuario | interfaz Gráfica de usuario
Modelo de Implantación del Usuario |  interfaz Gráfica de usuarioModelo de Implantación del Usuario |  interfaz Gráfica de usuario
Modelo de Implantación del Usuario | interfaz Gráfica de usuariocelesteorellana
 
Diseno grafico dojo_v1
Diseno grafico dojo_v1Diseno grafico dojo_v1
Diseno grafico dojo_v1ramos866
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañottEleny30
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo bañoEleny30
 
Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscapedisseny2d1
 

Similar a Diseño de interfaz de usuario (20)

producción de Multimedia y los Diseño Grupo 2.pptx
producción de Multimedia y los Diseño Grupo 2.pptxproducción de Multimedia y los Diseño Grupo 2.pptx
producción de Multimedia y los Diseño Grupo 2.pptx
 
3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptx3Mayo2023 Taller construcción de Prototipos.pptx
3Mayo2023 Taller construcción de Prototipos.pptx
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
 
Pressman y sommerville, GUI
Pressman y sommerville, GUIPressman y sommerville, GUI
Pressman y sommerville, GUI
 
Interfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxInterfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptx
 
Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)
 
INTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxINTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptx
 
Herramientas de diseño UI
Herramientas de diseño UIHerramientas de diseño UI
Herramientas de diseño UI
 
2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción
 
Clase 04 diseno_ui
Clase 04 diseno_uiClase 04 diseno_ui
Clase 04 diseno_ui
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
00 Sketching
00 Sketching00 Sketching
00 Sketching
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
 
Modelo de Implantación del Usuario | interfaz Gráfica de usuario
Modelo de Implantación del Usuario |  interfaz Gráfica de usuarioModelo de Implantación del Usuario |  interfaz Gráfica de usuario
Modelo de Implantación del Usuario | interfaz Gráfica de usuario
 
Diseno grafico dojo_v1
Diseno grafico dojo_v1Diseno grafico dojo_v1
Diseno grafico dojo_v1
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
 
Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscape
 
Maquetado
MaquetadoMaquetado
Maquetado
 

Más de Mayra Macas

Etica de los derivados financieros
Etica de los derivados financierosEtica de los derivados financieros
Etica de los derivados financierosMayra Macas
 
Gestión porprocesos replica
Gestión porprocesos replicaGestión porprocesos replica
Gestión porprocesos replicaMayra Macas
 
Perritos hermosos
Perritos hermososPerritos hermosos
Perritos hermososMayra Macas
 

Más de Mayra Macas (6)

Etica de los derivados financieros
Etica de los derivados financierosEtica de los derivados financieros
Etica de los derivados financieros
 
Gestión porprocesos replica
Gestión porprocesos replicaGestión porprocesos replica
Gestión porprocesos replica
 
Mlearning
MlearningMlearning
Mlearning
 
Perritos hermosos
Perritos hermososPerritos hermosos
Perritos hermosos
 
Técnica
Técnica Técnica
Técnica
 
Gui
GuiGui
Gui
 

Diseño de interfaz de usuario

  • 1. Interfaz de usuario • Originalmente el termino interfaz surgió para referirse al trabajo realizado por algunos especialistas que construían aplicaciones de software. Pero realmente todos los productos y documentos tanto impresos como digitales tienen alguna clase de interfaz de usuario. • Una revista por ejemplo necesita una interfaz ( la tabla de contenidos, la numeración, títulos, subtítulos y demás) para que el lector pueda usarla efectivamente. • Humanizar lo no humano • Indicios Acción
  • 2. Interfaz de usuario El diseño de la interfaz de usuario (GUI - Graphic User Interface -) de un sistema computarizado incluye: • 1- Metáforas de interacción, Imágenes y conceptos usados para transmitir función significando sobre la pantalla de la computadora, Las características visuales detalladas de cada componente de la interfaz gráfica, • Todo esto produce la llamada: "experiencia de uso" de una interfaz.
  • 3. Interfaz de usuario • En Internet, el diseño gráfico y las "marcas" visuales no son usadas simplemente para "decorar" las paginas. Aquí los gráficos son parte integral de la experiencia interactiva del usuario con el sitio. • En documentos interactivos es imposible separar el diseño gráfico del diseño de interfaz.
  • 4. Interfaz de usuario La navegación debe mostrar claramente: • 1- En que lugar o sección del sitio me encuentro, • 2- En que lugares o secciones he estado • 3- Hacia donde puedo ir
  • 5. Interfaz de usuario Tips para el diseño de Interfaz :   1. Conozca y diseñe para su publico objetivo 2. Pruebe sus suposiciones 3. Conozca la tecnología 4. Conozca sus limitaciones 5. No sea inconsistente (o demasiado consistente) 6. Provea retroalimentación 7. Permita la manipulación directa 8. No sobreextienda sus metáforas 9. Diseñe y conquiste
  • 6. Interfaz de usuario Piense globalmente y actúe localmente    1. Use figuras gráficas, iconos o símbolos para representar una acción siempre que sea posible:   2.Cuando esté creando elementos textuales asegúrese de que el texto sea totalmente editable 3. Deje espacio para las traducciones 4. Conozca sus limitaciones 5. No sea inconsistente (o demasiado consistente) 6. Consulte a los nativos 7. Sea listo