UF 6.1 Diseño de interfaz de usuario. Módulo 6

Transcripción

1 Módulo 6

2 introducción 1. multimedia 2. hipertexto 3. hipermedia 4. interacción 5. interfaz

3 introducción 1. multimedia 2. hipertexto 3. hipermedia 4. interacción 5. interfaz

4 multimedia 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.

5 multimedia 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

6 multimedia 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

7 multimedia

8 multimedia Medios analógicos versus digitales La información digital se basa en el código binario de 0 y 1 (un bit)

9 contenidos multimedia 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

10 contenidos multimedia Herramientas de autor Tipo de aplicaciones que permiten a sus usuarios crear sus propios proyectos multimedia sin programación. Maya Photoshop Flash Dreamweaver...

11 contenidos multimedia million/index.html

12 contenidos multimedia

13 clasificación de productos multimedia multimedia abiertos / cerrados

14 clasificación de productos multimedia multimedia 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

15 clasificación de productos multimedia multimedia 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.

16 clasificación de productos multimedia multimedia 2 web divulgativa Su propósito es informar o divulgar algún tema en concreto, sin un interés comercial

17 clasificación de productos multimedia multimedia 3 web documental o docuweb producción documental que emplea el formato de hipermedia para narrar. Incluye texto, vídeo, imágenes, e interactividad

18 clasificación de productos multimedia multimedia 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

19 clasificación de productos multimedia multimedia 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

20 clasificación de productos multimedia multimedia 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

21 clasificación de productos multimedia multimedia 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

22 clasificación de productos multimedia multimedia 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

23 clasificación de productos multimedia multimedia 9 entretenimiento - videojuegos - novela o cuento interactivo - serious games - mundos virtuales 3d (second life) - apps para tablets / móviles

24 clasificación de productos multimedia multimedia 9 experimental / artística - su intención es crear una obra artística o experimentar con el medio (web, multimedia, tecnología) net art

25 clasificación de productos multimedia multimedia 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)

26 clasificación de productos multimedia multimedia

27 clasificación de productos multimedia Web, web movil, aplicación Ejemplo: Amazon en las versiones web, web móvil y aplicación (app)

28 clasificación de productos multimedia 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

29 hipertexto 1. multimedia 2. hipertexto 3. hipermedia 4. interacción 5. interfaz

30 hipertexto

31 hipertexto 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.

32 hipertexto 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)

33 hipertexto 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)

34 hipertexto

35 hipertexto

36 hipertexto Está formado por nodos y enlaces

37 hipertexto 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

38 hipertexto 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

39 hipermedia 1. multimedia 2. hipertexto 3. hipermedia 4. interacción 5. interfaz

40 hipermedia HIPERMEDIA = HIPERTEXTO + MULTIMEDIA

41 hipermedia 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

42 interacción 1. multimedia 2. hipertexto 3. hipermedia 4. interacción 5. interfaz

43 interacción 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

44 interacción 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.

45 interacción

46 interacción: proceso 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.

47 interacción: proceso

48 HCI: Human computer interaction 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.

49 HCI: Human computer interaction La interacción es cada vez más compleja: desde la informática > usuarios y computadoras desde la comunicación > usuarios y contenidos desde la sociología > usuarios y usuarios

50 interfaz 1. multimedia 2. hipertexto 3. hipermedia 4. interacción 5. interfaz

51 interfaz 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

52 interfaz 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 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).

53 interfaz Las interfaces físicas son dispositivos o aparatos reales, más o menos complejos:

54 interfaz

55 interfaz

56 interfaz

57 interfaz

58 interfaz

59 Grados de interacción

60 Grados de interacción

61 interfaz A day made of glass Productivity future vision

62 interfaz Se basan en iconos y metáforas

63 interfaz 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

64 interfaz 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.

65 interfaz

66 interfaz

67 interfaz

68 interfaz Analogía con el mundo real

69 interfaz

70 interfaz 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

71 interfaz iconos

72 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.

73 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)

74 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)