uf 6.1 diseño de interfaz de usuariodefinicions.pdf · las corporativas son una de las tipologías...

UF 6.1 Diseño de interfaz de usuario

Módulo 6


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

introducción


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


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


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


multimedia


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

http://www.youtube.com/watch?v=fPGnXsv60x8


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


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



http://widerimage.reuters.com/timesofcrisis/ !http://interviewproject.davidlynch.com !!http://www.nytimes.com/packages/html/nyregion/1-in-8-million/index.html !


http://widerimage.reuters.com/timesofcrisis/

http://interviewproject.davidlynch.com

http://www.nytimes.com/packages/html/nyregion/1-in-8-million/index.html


http://thewildernessdowntown.com/ !!


http://artofpho.submarinechannel.com !!!!!

http://thewildernessdowntown.com/

http://artofpho.submarinechannel.com

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


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!!!!



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

!!



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



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


http://interactif.onf.ca/#/matribu

http://interactif.onf.ca/#/matribu


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!!!

!!!!



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 !

!!!!



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



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!



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!!!!!



9 entretenimiento!!- videojuegos!- novela o cuento interactivo!- serious games!- mundos virtuales 3d (second life)!- apps para tablets / móviles!!!!!



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



!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

Web, web movil, aplicación !Ejemplo: Amazon en las versiones web, web móvil y aplicación (app)


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



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.

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)

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)

hipertexto


hipertexto


Está formado por nodos y enlaces

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

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

hipertexto



hipermedia


HIPERMEDIA = HIPERTEXTO + MULTIMEDIA

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

hipermedia



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

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

interacción


interacción


!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


interacción: proceso


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


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



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!!!

interfaz


!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


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

interfaz


interfaz


interfaz

http://camilleutterback.com/projects/text-rain/

http://camilleutterback.com/projects/text-rain/


Grados de interacción



http://www.lukew.com/ff/entry.asp?1071

http://www.lukew.com/ff/entry.asp?1071


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

http://www.youtube.com/watch?v=6Cf7IL_eZ38

https://www.youtube.com/watch?v=w-tFdreZB94


Se basan en iconos y metáforas

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 !!

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.

interfaz


interfaz


Analogía con el mundo real

interfaz


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

interfaz


iconos

interfaz



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



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)

uf 6.1 diseño de interfaz de usuariodefinicions.pdf · las corporativas son una de las tipologías...

Documents