uf 6.1 diseño de interfaz de usuariodefinicions.pdf · las corporativas son una de las tipologías...
TRANSCRIPT
![Page 1: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/1.jpg)
UF 6.1 Diseño de interfaz de usuario
Módulo 6
![Page 2: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/2.jpg)
UF 6.1 Diseño de interfaz de usuario
1. multimedia!2. hipertexto!3. hipermedia!4. interacción!5. interfaz!
introducción
![Page 3: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/3.jpg)
UF 6.1 Diseño de interfaz de usuario
1. multimedia!2. hipertexto!3. hipermedia!4. interacción!5. interfaz!
introducción
![Page 4: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/4.jpg)
UF 6.1 Diseño de interfaz de usuario
multimedia
Multi - más de uno!!Medium - (singular): intermediario, medio!!Media (plural de medios)!sistemas de transmisión de información a !un público numeroso y heterogéneo, mediante la
prensa, televisión, radio, cine, etc.!
multimedia
![Page 5: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/5.jpg)
UF 6.1 Diseño de interfaz de usuario
1. Combinación de texto, imagen, sonido e imagen en movimiento (animación, vídeo)
2. Combinación de diferentes medios en un único documento que incluye texto, gráficos, animación, audio y vídeo
3. Material digitalizado que integra textos, gráficos, imagen fija y en movimiento, sonido.!!
! 4. Término empleado para describir diversos tipos de medios (media) ! que se utilizan para transportar información (texto, audio, gráficos,
animación, vídeo, )
El lenguaje multimedia puede incluir interactividad
multimedia
![Page 6: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/6.jpg)
UF 6.1 Diseño de interfaz de usuario
Multimedia es el campo relacionado con la integración controlada por ordenador de texto, imágenes, vídeo y otros medios donde cada tipo !de información puede representarse, almacenarse,!transmitirse DIGITALMENTE
multimedia
![Page 7: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/7.jpg)
UF 6.1 Diseño de interfaz de usuario
multimedia
![Page 8: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/8.jpg)
UF 6.1 Diseño de interfaz de usuario
La información digital se basa en el código binario de 0 y 1 (un bit) !http://www.youtube.com/watch?v=fPGnXsv60x8
Medios analógicos versus digitales
multimedia
![Page 9: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/9.jpg)
UF 6.1 Diseño de interfaz de usuario
Texto: ASCII/Unicode!!Audio: MP3, AIFF,WMA!!Imagen fija: fotografía (JPEG, PNG)!!Gráfico: Imagen generada por ordenador!!Vídeo: secuencia de imágenes capturadas y montadas!(MPEG, AVI)!!Animación: secuencia de imágenes gráficas
contenidos multimedia
![Page 10: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/10.jpg)
UF 6.1 Diseño de interfaz de usuario
Herramientas de autor !Tipo de aplicaciones que permiten a sus usuarios crear sus propios proyectos multimedia sin programación. !Maya Photoshop Flash Dreamweaver ...
contenidos multimedia
![Page 11: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/11.jpg)
UF 6.1 Diseño de interfaz de usuario
http://widerimage.reuters.com/timesofcrisis/ !http://interviewproject.davidlynch.com !!http://www.nytimes.com/packages/html/nyregion/1-in-8-million/index.html !
contenidos multimedia
![Page 12: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/12.jpg)
UF 6.1 Diseño de interfaz de usuario
http://thewildernessdowntown.com/ !!
contenidos multimedia
http://artofpho.submarinechannel.com !!!!!
![Page 13: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/13.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
abiertos / cerrados
clasificación de productos multimedia multimedia
![Page 14: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/14.jpg)
UF 6.1 Diseño de interfaz de usuario
Clasificación por temática!!1 web corporativa!2 web divulgativa!3 web documental (docuweb)!4 web catálogo / escaparate!5 e-commerce!6 e-learning!7 portales y buscadores!8 web 2.0 y redes sociales!9 entretenimiento!10 experimental/artística!!!!
clasificación de productos multimedia multimedia
![Page 15: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/15.jpg)
UF 6.1 Diseño de interfaz de usuario
1 web corporativa!!El sitio web de una organización es un elemento esencial de la imagen que esta muestra.!Habitualmente es el entorno en que el usuario entra en contacto por primera vez con una empresa o institución.!!Las webs permiten una comunicación directa con clientes, accionistas, medios y público interesado en cualquier lugar del mundo, las 24 horas del día. Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen. !
!!
clasificación de productos multimedia multimedia
![Page 16: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/16.jpg)
UF 6.1 Diseño de interfaz de usuario
2 web divulgativa!!Su propósito es informar o divulgar algún tema en concreto, sin un interés comercial!!!!!!!!!
clasificación de productos multimedia multimedia
![Page 17: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/17.jpg)
UF 6.1 Diseño de interfaz de usuario
3 web documental o docuweb!!producción documental que emplea el formato de hipermedia para narrar. Incluye texto, vídeo, imágenes, e interactividad!!!!!!!!!
clasificación de productos multimedia multimedia
http://interactif.onf.ca/#/matribu
![Page 18: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/18.jpg)
UF 6.1 Diseño de interfaz de usuario
4 Web catálogo o escaparate!!!- se centra en mostrar los productos que vende o fabrica la empresa !!- este tipo de web se asocia a webs de moda o belleza!!- se está sustituyendo por el modelo de e-commerce!!!
!!!!
clasificación de productos multimedia multimedia
![Page 19: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/19.jpg)
UF 6.1 Diseño de interfaz de usuario
5 e-commerce o webs de comerció electrónico!!!- permiten hacer transacciones de compra-venta de productos y servicios!!- información sobre productos!!- pueden formar parte de las acciones de marketing de una organización determinada !
!!!!
clasificación de productos multimedia multimedia
![Page 20: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/20.jpg)
UF 6.1 Diseño de interfaz de usuario
6 e-learning!!- herramientas de e-learning o educación a distancia!!- optimizar el proceso de aprendizaje!mediante las tecnologías de la información
clasificación de productos multimedia multimedia
![Page 21: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/21.jpg)
UF 6.1 Diseño de interfaz de usuario
7 portales !!
Los portales de información son lugares web en los que el usuario puede buscar activamente información sobre temas diversos.!Tienen gran complejidad estructural (muchos temáticas y contenidos)!!
Un caso específico de portal son los periódicos on-line!
clasificación de productos multimedia multimedia
![Page 22: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/22.jpg)
UF 6.1 Diseño de interfaz de usuario
8 web 2.0 y redes sociales!!- herramientas web 2.0 > delicious, googlemaps!- web colaborativa > blogs, wikis!- redes sociales!- plataforma de difusion de contenido audivisual!!Permiten:!- personalización de contenidos!- agregar contenidos!- compartir contenidos con otros usuarios!!!!!
clasificación de productos multimedia multimedia
![Page 23: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/23.jpg)
UF 6.1 Diseño de interfaz de usuario
9 entretenimiento!!- videojuegos!- novela o cuento interactivo!- serious games!- mundos virtuales 3d (second life)!- apps para tablets / móviles!!!!!
clasificación de productos multimedia multimedia
![Page 24: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/24.jpg)
UF 6.1 Diseño de interfaz de usuario
9 experimental / artística!!!- su intención es crear una obra artística o experimentar con el medio (web, multimedia, tecnología)!!!net art!!!!!!!
clasificación de productos multimedia multimedia
![Page 25: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/25.jpg)
UF 6.1 Diseño de interfaz de usuario
!Tendencias (actuales):!!- internet en los dispositivos móviles,!!- adaptación de la web tradicional (responsive design)!!- app!!- La nube (the cloud)!!- Web semántica (web 3.0)!!!!!
clasificación de productos multimedia multimedia
![Page 26: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/26.jpg)
UF 6.1 Diseño de interfaz de usuario
clasificación de productos multimedia multimedia
![Page 27: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/27.jpg)
UF 6.1 Diseño de interfaz de usuario
clasificación de productos multimedia
Web, web movil, aplicación !Ejemplo: Amazon en las versiones web, web móvil y aplicación (app)
![Page 28: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/28.jpg)
UF 6.1 Diseño de interfaz de usuario
práctica!!> buscar y anotar un ejemplo de cada tipo de producto multimedia!!> averiguar el porcentaje de usuarios según las estadísticas de:!!— dispositivo desde el que se accede a internet(ordenador, movil, tablet..)!!— lista de navegadores más utilizados!
clasificación de productos multimedia
![Page 29: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/29.jpg)
UF 6.1 Diseño de interfaz de usuario
1. multimedia!2. hipertexto!3. hipermedia!4. interacción!5. interfaz!
hipertexto
![Page 30: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/30.jpg)
UF 6.1 Diseño de interfaz de usuario
hipertexto
![Page 31: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/31.jpg)
UF 6.1 Diseño de interfaz de usuario
“El hipertexto es un sistema de administración y recuperación electrónica de la información que funciona de un modo no lineal” !
(Mirabito)!!
• El hipertexto o estructura hipertextual es la estructura que tiene la información a la que tenemos acceso. !!• Es una estructura no lineal. !!• Es un modo de estructurar y organizar la!información.
hipertexto
![Page 32: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/32.jpg)
UF 6.1 Diseño de interfaz de usuario
Es una forma de organizar la información digitalizada en bloques de contenido, llamados nodos, conectados a través de una serie de enlaces, de manera que la selección de un enlace desde un nodo provoca la inmediata recuperación de la información destino situada en otro nodo!
(Blanco)
hipertexto
![Page 33: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/33.jpg)
UF 6.1 Diseño de interfaz de usuario
• Están asociados al hipertexto los conceptos de no-linealidad, multisecuencialidad, multilinealidad. (“Un texto que se bifurca”) !• Se encuentra en entornos abiertos (online) o cerrados (offline), pero siempre en el medio digital. • Es la tecnología digital la que permite la estructura hipertextual (html)
hipertexto
![Page 34: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/34.jpg)
UF 6.1 Diseño de interfaz de usuario
hipertexto
![Page 35: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/35.jpg)
UF 6.1 Diseño de interfaz de usuario
hipertexto
![Page 36: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/36.jpg)
UF 6.1 Diseño de interfaz de usuario
Está formado por nodos y enlaces
hipertexto
![Page 37: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/37.jpg)
UF 6.1 Diseño de interfaz de usuario
El hipertexto es:!!1. Un modo de organización y presentación de la información – nodos y conexiones!!2. Un modo de acceso y distribución de la información – estructura no lineal, un modo diferente de acceder a la información!!3. Un modo de edición – generar contenidos dentro de este!sistema !!4. Un modo de expresión – buscar otras maneras de narrar!no lineales sino discontínuas
hipertexto
![Page 38: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/38.jpg)
UF 6.1 Diseño de interfaz de usuario
Conclusiones:!!• acceder a la información que nos interese de forma directa!!• estructura de múltiples ramificaciones.!!• solo en medio digital.!!• La diferenciación entre autor y lector desaparece. Web colaborativa, Wiki
hipertexto
![Page 39: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/39.jpg)
UF 6.1 Diseño de interfaz de usuario
1. multimedia!2. hipertexto!3. hipermedia!4. interacción!5. interfaz!
hipermedia
![Page 40: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/40.jpg)
UF 6.1 Diseño de interfaz de usuario
HIPERMEDIA = HIPERTEXTO + MULTIMEDIA
hipermedia
![Page 41: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/41.jpg)
UF 6.1 Diseño de interfaz de usuario
La expresión hipermedia extiende la noción de texto hipertextual al incluir información visual, sonora, animación u otras formas de información
hipermedia
![Page 42: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/42.jpg)
UF 6.1 Diseño de interfaz de usuario
1. multimedia!2. hipertexto!3. hipermedia!4. interacción!5. interfaz!
interacción
![Page 43: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/43.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Por interacción entendemos el proceso recíproco de transferencia de información entre el hombre y el ordenador, e incluye tanto las acciones implicadas en este proceso como sus resultados
interacción
![Page 44: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/44.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
D.A Norman describió en 1986 las etapas en que se divide el proceso de interacción:!El usuario determina la intención de alcanzar un objetivo!El usuario convierte esta intención en una acción que ejecuta con efectividad (por ejemplo, presiona una tecla o hace click sobre una opción de la interfaz.!La acción produce una serie de cambios en el sistema del ordenador, que el usuario percibe e interpreta!El usuario evalua si estos cambios son favorables para la consecución del objetivo prouesto.!
interacción
![Page 45: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/45.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interacción
![Page 46: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/46.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
!En el proceso de interacción con el sistema, puede haber dos problemas fundamentales:!!1) En el ámbito de ejecución, si el usuario conoce que objetivo quiere alcanzar, pero no sabe qué acciones tiene que hacer, o de que manera las tiene que llevar a cabo.!!2) En el ámbito de evaluación, si el usuario no sabe como se han de interpretar los cambios que su acción ha provocado en el sistema.!!La existencia y grado de importancia dependen del diseño de la interfaz del sistema.!
interacción: proceso
![Page 47: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/47.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interacción: proceso
![Page 48: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/48.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
HCI - Human Computer Interaction!!
Interacción persona-ordenador!
La disciplina HCI (human-computer interaction) de puede definir como:!“la disciplina relativa al diseño, evaluación y implementación de sistemas interactivos para uso humano, y el estudio de los fenómenos que les rodean" (ACM SIGCHI).!!!De esta manera, el HCI se concentra tanto en aspectos humanos como en los relacionados con la máquina (ordenador) que se utiliza par interactuar.!
HCI: Human computer interaction
![Page 49: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/49.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
desde la informática > usuarios y computadoras!desde la comunicación > usuarios y contenidos!desde la sociología > usuarios y usuarios
La interacción es cada vez más compleja:
HCI: Human computer interaction
![Page 50: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/50.jpg)
UF 6.1 Diseño de interfaz de usuario
1. multimedia!2. hipertexto!3. hipermedia!4. interacción!5. interfaz!
interfaz
![Page 51: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/51.jpg)
UF 6.1 Diseño de interfaz de usuario
Es el área que permite la comunicación entre el hombre y la máquina!!Son los dispositivos que conectan dos sistemas diferentes!!La interacción es posible gracias a la interfaz!!!
interfaz
![Page 52: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/52.jpg)
UF 6.1 Diseño de interfaz de usuario
!La interfaz de usuario se define como “la apariencia y el comportamiento de un sistema de información", o com "la parte del sistema del ordenador con la que el usuario está en contacto directo” (CMD).!
La interfaz es el recurso mediante el cual se lleva a término la interacción. Incluye todos los dispositivos que ponen en contacto el hombre con la máquina.!!Hay dos tipos de dispositivos de interfaz:!
1) Los dispositivos de entrada: permiten al hombre introducir datos en el ordenador) > interfaces físicas !2) Los dispositivos de manipulación: elementos que se encuentran en un programa determinado i que se utilizan para alterar el estado de la información y navegar por la aplicación. También llamadas GUI (graphical user interfaces). > interfaces gráficas
interfaz
![Page 53: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/53.jpg)
UF 6.1 Diseño de interfaz de usuario
Las interfaces físicas son dispositivos o aparatos reales, más o menos complejos:
interfaz
![Page 54: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/54.jpg)
UF 6.1 Diseño de interfaz de usuario
interfaz
![Page 55: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/55.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 56: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/56.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 57: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/57.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 58: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/58.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
http://camilleutterback.com/projects/text-rain/
![Page 59: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/59.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Grados de interacción
![Page 60: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/60.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Grados de interacción
http://www.lukew.com/ff/entry.asp?1071
![Page 61: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/61.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
A day made of glass!http://www.youtube.com/watch?v=6Cf7IL_eZ38!!Productivity future vision!https://www.youtube.com/watch?v=w-tFdreZB94
![Page 62: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/62.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Se basan en iconos y metáforas
interfaz
![Page 63: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/63.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Metáfora. Se basa en la analogía entre lo representado (el concepto, idea) y el objeto que lo representa. !!Va de lo abstracto (la idea representada) a lo concreto (el objeto con el que se representa)!!Es la figura retórica más utilizada en el diseño de interfaces !!
interfaz
![Page 64: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/64.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Metáfora del escritorio en Mac y Windows!!!Supone la creación de un sistema o marco en el que todos los elementos están relacionados con ese sistema.!!Ayuda a orientarse al usuario por un mundo conocido.
interfaz
![Page 65: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/65.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 66: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/66.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 67: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/67.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 68: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/68.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Analogía con el mundo real
interfaz
![Page 69: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/69.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
interfaz
![Page 70: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/70.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
iconos
Metonímia. Consiste en la sustitución de un concepto u objeto por otro relacionado. !!La substitución puede ser casual, espacial o cronológica.!!Por ejemplo, la herramienta de relleno de color= icono bote de pintura
interfaz
![Page 71: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/71.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
iconos
interfaz
![Page 72: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/72.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Grados de interacción
Grado de interactividad de un proyecto!!- condicionara el diseño de la interfaz. !- la interacción no es binaria (se tiene o no se tiene) sino !que hay varios grados.!
![Page 73: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/73.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Grados de interacción
Niveles o grados de la interacción:!!nivel bajo: el usuario se limita a escoger ante un menú de !opciones!!nivel medio: se eligen las opciones pero hay que superar !pruebas u obstáculos para avanzar en la exploración!!nivel alto: el interactor puede explorar el sistema, pero !además puede modificarlo (contribuir)
![Page 74: UF 6.1 Diseño de interfaz de usuariodefinicions.pdf · Las corporativas son una de las tipologías de webs más extendidas y estandarizadas que existen ... - web colaborativa > blogs,](https://reader031.vdocuments.co/reader031/viewer/2022030406/5a82d7fc7f8b9aee018e664a/html5/thumbnails/74.jpg)
UF 6.1 Diseño de interfaz de usuarioUF 6.1 Diseño de interfaz de usuario
Grados de interacción
Niveles o grados de la interacción:!!nivel bajo: el usuario se limita a escoger ante un menú de !opciones!!nivel medio: se eligen las opciones pero hay que superar !pruebas u obstáculos para avanzar en la exploración!!nivel alto: el interactor puede explorar el sistema, pero !además puede modificarlo (contribuir)