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

Rio Grande Valley Site
Rio Grande Valley SiteRio Grande Valley Site
Rio Grande Valley Sitemariavista
 
Violencia de xénero
Violencia de xéneroViolencia de xénero
Violencia de xéneroequipobrey
 
Competencias informacionoeles.tarea 2
Competencias informacionoeles.tarea 2Competencias informacionoeles.tarea 2
Competencias informacionoeles.tarea 2raqcinrey
 
Tipos de sistemas operativos
Tipos de sistemas operativosTipos de sistemas operativos
Tipos de sistemas operativosBernardo Lara
 
Common assessment product
Common assessment productCommon assessment product
Common assessment productRikuto
 
La ciencia moderna del siglo XVI-XVII
La ciencia moderna del siglo XVI-XVIILa ciencia moderna del siglo XVI-XVII
La ciencia moderna del siglo XVI-XVIIVeronica Pardo
 
The 10 Most Oil Rich States
The 10 Most Oil Rich StatesThe 10 Most Oil Rich States
The 10 Most Oil Rich Statesbarcorentatruck
 
Kapuscinski los-cinicos-no-sirven-para-este-oficio
Kapuscinski los-cinicos-no-sirven-para-este-oficioKapuscinski los-cinicos-no-sirven-para-este-oficio
Kapuscinski los-cinicos-no-sirven-para-este-oficioCalin Villacis
 

Destacado (11)

Rio Grande Valley Site
Rio Grande Valley SiteRio Grande Valley Site
Rio Grande Valley Site
 
Violencia de xénero
Violencia de xéneroViolencia de xénero
Violencia de xénero
 
La inteligencia
La inteligenciaLa inteligencia
La inteligencia
 
Evjf_Carine_V9
Evjf_Carine_V9Evjf_Carine_V9
Evjf_Carine_V9
 
Competencias informacionoeles.tarea 2
Competencias informacionoeles.tarea 2Competencias informacionoeles.tarea 2
Competencias informacionoeles.tarea 2
 
Tipos de sistemas operativos
Tipos de sistemas operativosTipos de sistemas operativos
Tipos de sistemas operativos
 
Common assessment product
Common assessment productCommon assessment product
Common assessment product
 
La ciencia moderna del siglo XVI-XVII
La ciencia moderna del siglo XVI-XVIILa ciencia moderna del siglo XVI-XVII
La ciencia moderna del siglo XVI-XVII
 
Historia musica
Historia  musicaHistoria  musica
Historia musica
 
The 10 Most Oil Rich States
The 10 Most Oil Rich StatesThe 10 Most Oil Rich States
The 10 Most Oil Rich States
 
Kapuscinski los-cinicos-no-sirven-para-este-oficio
Kapuscinski los-cinicos-no-sirven-para-este-oficioKapuscinski los-cinicos-no-sirven-para-este-oficio
Kapuscinski los-cinicos-no-sirven-para-este-oficio
 

Similar a Gui

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 Gui (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
 

Gui

  • 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