SISTEMAS MULTIMÍDIA Design de Interação e Autoria

Transcrição

1 SISTEMAS MULTIMÍDIA Design de Interação e Autoria CEFET-RJ UnED Petrópolis Técnico em Telecomunicações TV Digital Prof. Luis Carlos Retondaro luis.retondaro<at>gmail.com

2 Definição de Mídia Em inglês: media Plural da palavra medium em Latim Significa meio, centro Meio de distribuir e representar a informação

3 Tipos de Mídia Mídia Como os humanos percebem a informação Audição, tato, visão, olfato e paladar Mídia de Percepção de Representação Como a informação é codificada no computador Texto, imagem gráfica (vetorial), imagem estática (matricial), áudio e vídeo

4 Tipos de Mídia Mídia Qual meio é utilizado como dispositivo de saída ou entrada de informações em um computador Sistemas de entrada e saída Entrada: teclados, câmeras, microfones Saída: monitores, caixas de som, papel Mídia de Apresentação de Armazenamento Onde a informação é armazenada Discos magnéticos, discos óticos, fitas magnéticas, papel

5 Tipos de Mídia Mídia de Transmissão Qual meio é utilizado para transmitir dados Meios físicos (cabos metálicos, fibras óticas, ondas de rádio)

6 O que é multimídia? Programas e sistemas em que a comunicação entre homem e computador se dá através de múltiplos meios de representação de informação (p.ex.: áudio, imagem estática, animação, gráficos e texto). Conceito informal: informal Uso de múltiplas mídias + Interação

7 Multimídia A multimídia será a mais poderosa ferramenta de apresentação porque será capaz de explorar todos os sentidos. Douglas E. Wolfgram

8 Multimídia usada como adjetivo Aplicação multimídia Função ou conjunto de funções que suportam a provisão de um serviço multimídia específico para o usuário final Ex. Áudio-vídeoconferência Tecnologia multimídia Conjunto de campos tecnológicos específicos habilitando aplicações multimídia Ex. Compressão de vídeo

9 Multimídia usada como adjetivo Plataforma Computador equipado com hardware multimídia capaz de suportar softwares de aplicações multimídia Ex. PC com placas de áudio e vídeo Placa multimídia multimídia Hardware conectado ao computador que executa uma função multimídia Ex. Placa de captura de vídeo para digitalizar vídeo analógico

10 Multimídia usada como adjetivo Dispositivo Dispositivo capaz de armazenar vários tipos de mídia Ex. DVD, CD-ROM, tape de áudio digital Rede de armazenamento multimídia multimídia Rede de comunicação de dados que permite o transporte de múltiplos tipos de mídia Ex. Rede Digital de Serviços Integrados (RDSI - ISDN)

11 Marcos da evolução da TI Programas armazenados em memória (Von Neumann) Linguagens simbólicas de programação (FORTRAN) Circuitos integrados (chips) Computadores e sistemas multiusuários Terminais gráficos Microprocessadores CISC e RISC Sistemas de armazenamento óptico Redes de computadores/satélites de comunicação Interfaces gráficas de usuários/interatividade (Windows) Multimídia e World Wide Web Supercomputadores

12 Fases da Multimídia Fase 1 (Ontem): Micro standalone com Placa de Som e CD-ROM Fase 2 (Hoje): Redes Multimídia, Multimídia na Internet Fase 3 (Amanhã): Realidade Virtual: Redes Multimídia com periféricos especiais

13 A evolução da multimídia Primeiro Momento: Articulação de Várias Linguagens e Mídias Segundo Momento: Criação de uma Nova Mídia e de uma Nova Linguagem Terceiro Momento: Criação de uma Nova Forma de Aprender, Trabalhar, Comunicar-se, Divertir-se,????

14 Classificação dos tipos de mídia Mídias Discretas x Contínuas Mídias Discretas (estáticas ou em bloco) Compostas por itens de informação independentes do tempo Mídias com dimensões unicamente espaciais Tempo não faz parte da semântica da informação Textos, imagens e gráficos Modo de recuperação: download

15 Classificação dos tipos de mídia Mídias Discretas x Contínuas Mídias Contínuas (dinâmicas, dependentes do tempo) O tempo ou a dependência temporal entre os itens de informação fazem parte da própria informação Mídias com dimensões temporais Tempo faz parte da semântica da informação Se a dependência temporal não for respeitada, o significado pode ser alterado Áudios, vídeos e animações Streaming é um termo usado para indicar que uma mídia está sendo enviada e apresentada diretamente no destino à medida que é recebida (em tempo real)

16 Classificação dos tipos de mídia Mídias Capturadas x Sintetizadas Informações capturadas do mundo real Imagens, vídeos e sons Informações sintetizadas pelo computador Textos, gráficos e animações

17 Sistemas multimídia É um sistema capaz de manipular ao menos um tipo de mídia discreta e um tipo de mídia contínua na forma digital de maneira sincronizada No mínimo uma mídia discreta e uma contínua Mídias devem ser independentes Processamento controlado por computador Integração das mídias de forma sincronizada

18 Classes de Sistemas multimídia Sistemas multimídia Standalone Utilizam apenas recursos presentes no sistema local para prover serviços multimídia Aplicações Treinamento baseado em computador Educação baseada em computador Sistema de autoria multimídia

19 Classes de Sistemas multimídia Sistemas multimídia Distribuídos Precisam de infra-estrutura de comunicação Muitas vezes o objetivo é fornecer serviços de comunicação à distância Videoconferẽncia, redes de distribuição de pacotes de áudio e vídeo, Implementação de modelos cliente-servidor e peer-topeer Aplicações standalone podem ser de alto custo para armazenamento de informações Utilização de servidores permite o compartilhamento e armazenamento de informações

20 Primeiro momento: articulação de várias linguagens e mídias Dados Alfanuméricos Texto Livre Gráficos Animações Imagens Estáticas (Fotografia) Som (Efeitos Especiais, Discos, Voz, Rádio) Imagens Dinâmicas (Vídeo, Cinema, TV)

21 Primeiro momento: articulação de várias linguagens e mídias Integração de várias mídias Meios de Comunicação Impressos (Livro, Revista, Jornal, etc.) Meios de Comunicação Sonoros (Disco, Rádio, etc.) Meios de Comunicação Visuais Estáticos (Gráfico, Desenho, Pintura, Fotografia, etc.) Meios de Comunicação Visuais Dinâmicos (Animação, Cinema, Vídeo, TV, etc.)

22 Primeiro momento: articulação de várias linguagens e mídias Possibilidades Digitalização do Texto Digitalização do Som Digitalização da Imagem

23 Segundo momento: A criação de uma nova mídia Computador Internet meio de comunicação multimídia que está encontrando uma linguagem: Hipertexto. Com Multimídia, Hipertexto é Hipermídia. Projetos para o século XXI obtidos no final de século XX (Rádio e Vídeo na Rede)

24 Segundo momento: A criação de uma nova mídia Tipos de mídia Texto Imagem Gráfico Áudio Animação Vídeo

25 Representação da informação multimídia Texto Caracteres são convertidos para uma representação com um número fixo de bits ASCII, EBCDIC, Unicode Captura de Texto Digitação, OCR

26 Representação da informação multimídia Imagem Bloco bidimensional de pixels (picture elements) Cada pixel é representado por um número fixo de bits. Exemplos: RGB, YUV Captura de Imagens Câmera Fotográfica, Scanner, etc.

27 Representação da informação multimídia Áudio Mídia Tipicamente Analógica Representação Digital, quando necessário para integração com mídias digitais, através de digitalização do Sinal Analógico por amostragem. Captura de Áudio Microfone

28 Representação da informação multimídia Vídeo Mídia Tipicamente Analógica Captura de Vídeo Câmeras de Vídeo

29 Representação da informação multimídia Mídias, quando digitalizadas, geram uma quantidade de informação relativamente alta Compressão de Dados Texto Imagem Áudio Vídeo Obs.: Um sinal analógico perde qualidade como resultado de distorções do sinal. Com um sinal digital tal fenômeno acarreta erro, com possível correção.

30 Digitalização da mídia AMOSTRAGEM Imagem natural A imagem é amostrada face à matriz de pixels PONDERAÇÃO As amostras discretas (pixels) são ponderadas QUANTIZAÇÃO Os pixels são convertidos à forma numérica

31 Aplicações multimídia Comunicação Pessoal Voz Telefonia, Voic , Conferência de voz, etc. Imagem FAX

32 Aplicações multimídia Comunicação Pessoal Texto , etc. Texto e Imagem Voz e Vídeo Videoconferência, etc. Multimídia Multimídia mail, etc.

33 Aplicações multimídia Aplicações Interativas WWW, Teleshopping, Telebanking, etc. Aplicações de Lazer Vídeo sob demanda, Televisão Interativa, etc.

34 Aplicações multimídia Confecção de CD-ROMs e Sites Web Corporativo/Empresarial: Demonstrações e Apresentações Bancos de dados multimídia Simulações (jogos) Comércio eletrônico Comunicação inter-pessoal (videoconferência, reconhecimento e síntese de voz,...)

35 Aplicações multimídia Mídias eletrônicas versus mídias convencionais: Escrita (textos) Jornal Gráficos/Imagens Revistas Vídeos e Animações Cinema, Televisão Sons e Músicas Rádio Mídias eletrônicas: Realidade Virtual Processamento de Imagens e Voz Vídeo-Conferência Internet Interação com o usuário

36 Sistemas multimídia Sistemas multimídia requerem alto desempenho desafios: volume de informação; fluxo de informação; manutenção do fluxo em tempo real; cálculos em tempo real; facilidade de uso.

37 Sistemas multimídia Soluções: computadores mais potentes; memórias maiores; técnicas de compressão; técnicas de design.

38 Introdução ao Design de Interação Além da IHC Design de Interação Design de produtos interativos que fornecem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho Preece 2005 Principal preocupação: Fáceis de usar (simplicidade) Eficazes no uso (versatilidade) Proporcionem ao usuário uma experiência agradável (satisfação)

39 Design de interação Ponto de partida: comparação Comente os exemplos:

40 O que projetar? Ao se considerar a usabilidade de um produto é fundamental considerar onde e por quem será utilizado Entender as atividades que as pessoas estão realizando quando estão interagindo com os produtos

41 Exercício Liste as atividades realizadas por um computador e as interfaces e dispositivos disponíveis para realizar algumas atividades. Atividades Interfaces Programar Calcular Jogar Enviar mensagens Sist. Baseados na fala Dispositivos multimídia PDA s Displays

42 Questão fundamental Como você otimiza as interações do usuário com o sistema, ambiente ou produto de forma que combinem com as atividades que estão sendo estendidas ou recebendo suporte?

43 Critérios de decisão Considerar no que as pessoas são boas ou não Considerar o que pode auxiliar as pessoas na sua atual maneira de fazer as coisas Pensar no que pode proporcionar experiências de qualidade ao usuário Ouvir o que as pessoas querem e envolvê-las no design Utilizar técnicas baseadas no usuário testadas e aprovadas durante o processo de design

44 Equipe multidisciplinar Vantagens: + idéias + novos métodos + criatividade e originalidade nos designs Desvantagens:???

45 Exercícios 1) Cite as desvantegens de trabalhar com uma equipe multidisciplinar no design de interação 2) Selecione um site com bad-design e explique 3) Qual a diferença entre realizar uma chamada telefônica De um telefone público De um celular? Como estes dispositivos foram desenvolvidos com relação a: Tipos de usuários Tipo de atividade a receber suporte Contexto de uso

46 Respostas possíveis: 1) Desvantagens Na prática significa que confusão, desentendimento e falhas de comunicação podem surgir em uma equipe; Maneiras diferentes de falar sobre design, assim como utilizar os mesmos termos para se referir a coisas diferentes Dificuldades de intercâmbio de informações

47 Respostas possíveis: 2) Bad-design: Bradesco Home-page suja. Por onde começar? Porque o ícone para Pessoas Jurídicas está deslocado?

48 Respostas possíveis: 3) Chamada telefônica A) Os telefones públicos são projetados para ser utilizados pelo público em geral. Muitos dispõem de código em braille gravado nas teclas e de controle de volume para permitir que deficientes visuais e auditivos os utilizem Os telefones celulares são projetados para todos os grupos de usuários, embora possam ser de difícil uso para deficientes visuais ou pessoas com destreza manual limitada. B) A maioria das cabines telefônicas são projetadas com um modo de interação simples: inserir cartão e digitar o número do telefone. Se estiver ocupado ou não completar a ligação, o cartão é devolvido quando o fone é colocado no gancho. Há também a opção de permitir ao usuário fazer chamadas seguidas pressionando um botão, em vez de retirar e recolocar o cartão a cada vez. Essa função permite realizar várias chamadas de uma maneira mais eficiente. Os telefones celulares possuem um modo de interação mais complexo. Mais funcionalidades são oferecidas, exigindo que os usuários passem algum tempo aprendendo como utilizá-las. Por exemplo, poderão salvar números de telefone em uma agenda de endereços e vinculá-los a teclas de atalho; desta forma, os números selecionados poderão ser acessados pressionando-se simplesmente uma ou duas teclas.

49 Respostas possíveis: 3) Chamada telefônica C) Os telefones públicos são destinados a uso em lugares abertos, na rua ou em estações de ônibus. São projetados para proporcionar ao usuário uma certa privacidade e proteção contra ruídos durante ligações, por meio do uso de orelhões ou das cabines Os telefones celulares foram projetados para ser utilizados a qualquer hora e em qualquer lugar. No entanto, o fato de essa flexibilidade afetar as outras pessoas que estão no mesmo local público (trens e ônibus) não foi muito levado em consideração.

50 Profissionais do design Designer de interação: pessoas envolvidas no design de todos os aspectos interativos de um produto, não somente no design gráfico de uma interface Engenheiros de usabilidade: pessoas que avaliam produtos utilizando métodos e princípios de usalbilidade Web Designers: pessoas que desenvolvem e criam o design visual de websites os leiautes por exemplo. Arquitetos da informação: pessoas que têm idéias de como planejar e estruturar produtos interativos, especialmente websites Designers de novas experiências aos usuários: pessoas que realizam todas as tarefas acima citadas, mas que também podem realizar estudos de campo a fim de fomentar o design de produtos.

51 Interfaces Definição: Genérica Superfície entre duas faces; Lugar onde acontece o contato entre duas entidades: Ex.: Maçanetas de portas, torneiras, etc. Informática Parte do sistema computacional com a qual o usuário entra em contato físico e perceptivo (Moran, 1981) É o conjunto de comandos de controle do usuário + respostas do computador; constituídos por sinais (gráficos, acústicos e tácteis). Ex. Monitor de vídeo.

52 Porquê estudar interfaces? A qualidade da interface determina se os usuários aceitam ou recusam o sistema; É necessário estabelecer um bom nível de conversação entre o usuário e o sistema computacional, as interfaces são um meio para tal; Ajustando os termos: IHC x IHM IHC: Interfaces Humano-Computador; IHM: Interfaces Homem-Máquina.

53 Preparação para o estudo Saber os momentos de pensar como técnico/projetista; Para produzir tecnologia que auxilie humanos é necessário antes conhecê-los; Estudar em primeiro plano as necessidades dos usuários e não as tecnologias disponíveis; Aproveitar os conhecimentos dos usuários e torná-lo um parceiro no desenvolvimento.

54 Comportamento dos usuários Expectativas Quando interagimos com objetos conhecidos, esperamos um comportamento baseado em experiências passadas: Ex. Uma torneira deve ser aberta girando o registro no sentido anti-horário

55 Comportamento dos usuários Novidades É associado a ele um comportamento de algo que já é conhecido; Seres humanos em situações complexas ou novas, tendem a simplificar as coisas.

56 Software x Usuário A barreira tecnológica Usuários novatos ficam apreensivos, com medo de estragar algo; Sentem pânico de possíveis mensagens de erro; Normalmente pensam: fiz algo errado Afinal, o produto foi projetado por profissionais experientes. Seres humanos em situações complexas ou novas, tendem a simplificar as coisas. O projetista deve (sempre que possível): Conhecer os usuários e as tarefas por ele realizadas; Quais tarefas eles estão tentando realizar; Conhecer o ambiente operacional dos usuários; Produzir produtos que se adaptem ao usuário, e não o contrário.

57 Quem são os usuários? Trazem consigo experiências passadas; Têm concepção daquilo que o computador pode fazer; Se ele não sabe muito a respeito de um objeto ou tarefa, irá associar com algo que já é de seu conhecimento.

58 Quem são os usuários? Usuários são impacientes

59 Quem são os usuários? Usuários odeiam bugs

60 Quem são os usuários? Usuários têm necessidades diferentes em função da sua experiência (diferentes perfis)

61 Interfaces e Tecnologia O sistema ideal deve esconder a tecnologia e o usuário nem deverá notar a sua presença; O objetivo é deixar as pessoas realizarem suas atividades, com a tecnologia aumentando a sua produtividade, seu poder, e seu divertimento, cada vez mais por ser invísivel, fora de vista, desapercebida; As pessoas deveriam aprender a tarefa, não a tecnologia; Deveríamos poder empregar a ferramenta na tarefa, e não como é hoje, onde temos que adequar a tarefa à ferramenta; As ferramentas deveriam seguir os três princípios básicos do design: simplicidade, versatilidade e satisfação de quem as usa.

62 Problemas do dia a dia No mundo moderno existem diversos objetos que nos fazem parar e pensar como usá-los; O que parece simples para uns (às vezes a minoria), não é tão simples para outros (às vezes a maioria); Instruções de uso mal elaboradas, algumas vezes causando mais dúvidas ao usuário; Uso frequente de tentativa e erro.

63 Tipos de Interfaces CUI (character-based user interface) São as interfaces fundamentadas em textos e caracteres alfanuméricos, fazendo uso da metáfora de uma máquina de escrever; GUI (Graphical user interface) São as interfaces fundamentadas em gráficos e desenhos, fazendo uso de metáforas de mesas de trabalho, documentos, botões, janelas, etc. WUI (Web user interface) São interfaces usadas na internet, através de navegadores de hipertexto. PUI (Pen-based/Perceptual user interface) São as interfaces compostas de um monitor de vídeo em formato de uma planilha ou bloco de anotações que recebe dados através de uma espécie de caneta eletrônica ou o próprio dedo. VRUI (Virtual Reality-based user interface) São as interfaces fundamentadas no paradigma da realidade virtual.

64 Processo de interação Homem - Computador

65 Desafios para o projeto Como dar conta da evolução tecnológica? Equilibrar conforto e facilidades de uso com desempenho da aplicação (tolerância a erros controlada); Como garantir funcionalidade explorando o potencial da tecnologia? Ex. Celulares Aumentar a funcionalidade não pode ser desculpa para um bad-design; É possível projetar boas interfaces, mesmo que a quantidade de funções sejam relativamente grande, desde que exista um bom mecanismo de feed-back aos usuários. Ex.: Carros. Usuários operam em média 100 controles enquanto dirigem (botões do som, luzes, travas, espelhos, etc.) Porquê? Feed-back imediato e elevado grau de padronização

66 Princípios básicos de um bom design (Norman, 1988) Visibilidade Affordance Bom modelo conceitual Bons mapeamentos Feedback

67 Visibilidade Apenas as coisas necessárias devem estar visíveis, para indicar quais partes podem ser operadas e como. Deve indicar o mapeamento entre ações pretendidas e as ações reais.

68 Affordance Se refere às propriedades percebidas e as propriedades reais de um objeto, que deveriam determinar como ele pode ser usado Quando se prodomina affordance em um objeto o usuário sabe o que fazer somente olhando para ele, sem necessidades de elementos adicionais (figuras, rótulos, etc)

69 Bom modelo conceitual Permite prever o efeito das ações; Se não existe um bom modelo conceitual o usuário opera utilizando tentativa e erro; Para que o modelo conceitual se torne claro é desejável um efetivo uso de affordance.

70 Bons mapeamentos Mapeamento é o termo utilizado para denotar o relacionamento entre duas entidades; Em interfaces é o relacionamento entre os controles e seus movimentos.

71 Feedback Mecanismo para retornar ao usuário informação sobre as ações que foram feitas e quais os resultados obtidos.

72 Feedback

73 Ergonomia Recomendações interfaces ergonômicas no projeto de

74 Recomendações ergonômicas Fonte Um quesito importante das fontes é a característica de seu contorno, sendo classificadas em serifadas (Serif) e não serifadas (Sans Serif) As fontes com serifa têm detalhes nas extremidades e no meio das letras; Exemplo: SERIFA (Times New Roman) Fontes sem serida tem todo desenho da letra com a mesma espessura, sem detalhes Exemplo: SEM SERIFA (Verdana)

75 Recomendações ergonômicas Fonte Diversos pesquisadores estudaram o tema, e os resultados apontam, quase que invariavelmente, que fontes Sans Serif ofrecem melhor capacidade de leitura que fontes Serif. Diversos pesquisadores estudaram o tema, e os resultados apontam, quase que invariavelmente, que fontes Sans Serif ofrecem melhor capacidade de leitura que fontes Serif.

76 Recomendações ergonômicas Fonte Evite utilizar simultaneamente, na mesma página, fontes Serif e Sans Serif; Prefira usar fontes Sans Serif limitando sua variedade a no máximo duas ou três fontes (Ex. Arial e Verdana); Não é recomendado o uso de fontes muito grandes; Recomenda-se usar fontes com caixa alta e baixa. Fontes com caixa alta e baixa usadas juntas são mais legíveis e compreensíveis.

77 Recomendações ergonômicas Formatação de Texto Alinhamento: Negrito: Utilizado para destacar elementos do texto. Títulos e subtítulos são, por exemplo, altamente qualificados para serem apresentados em negrito; Itálico: Justificar textos à esquerda. Qualquer outra opção, compromete a velocidade de leitura, e aumenta o cansaço visual; Utilizar com bastante cautela, pois reduz a velocidade de leitura; MAIÚSCULO: Devem ser evitados (fora casos óbvios, como por exemplo as siglas) Contribui para diminuir a velocidade de leitura; O TEXTO PARACE GRITAR COM O USUÁRIO!

78 Recomendações ergonômicas

79 Recomendações ergonômicas A linguagem das cores As cores permitem que se comunique idéias sem o uso da linguagem oral ou escrita; As cores despertam respostas emocionais específicas; Ex.: VERMELHO: Perigo, situações que requerem mais atenção, etc. Para se comunicar uma idéia ou produzir um reação, deve-se compreender primeiro a harmonia da cor, identificando que cor usar para representar o estado desejado;

80 Recomendações ergonômicas A linguagem das cores A cor permite ao usuário saber em qual contexto está inserido: A cor é parte importante da interface gráfica, sendo a primeira coisa que os usuários observam em uma aplicação, antes mesmo de usá-la; As cores enfatizam informações importantes;

81 Recomendações ergonômicas A linguagem das cores Tornam a interface mais fácil de ser memorizada; Ajudam a identificar estruturas e subdivisões; Tornam as aplicações mais atrativas; Propiciam melhor captação de memória.

82 Recomendações ergonômicas Cores A idade é um fator importante no uso de cores: e faixa etária: Crianças pequenas em geral são atraídas por cores vivas, normalmente são as principais cores de seus brinquedos; A medida que envelhecem as pessoas tendem a preferir cores mais neutras; Se um sistema destina-se a um grupo de uma idade em particular, tais considerações podem ser um fator importante na aceitação do sistema.

83 Recomendações ergonômicas Um bom exemplo:

84 Recomendações ergonômicas Cuidado no uso de cores O uso de cores não adequadas pode interferir na legibilidade da interface e causar fadiga nos olhos dos usuários

85 Recomendações ergonômicas Cuidado no uso de cores Ao se agrupar elementos na tela utilizando cores: Elementos que não se relacionam devem usar cores diferenciadas; Um mau exemplo:

86 Recomendações ergonômicas Qualidade da visibilidade da cor Em 1958, Heison, avaliou a qualidade da visibilidade das cores, a uma distância de 180 metros, numa escala de 0 a 100: Amarelo âmbar Laranja Vermelho Verde 95% 69% 51% 24%

87 Referências bibliográficas www2.uepa.br/paulolima (Prof. Paulo Lima) Material referente a projeto de interfaces (prof. Joseana M. Fechine) Material relativo a conceitos Multimídia - Disciplina de Sistemas Multimídia (Prof. Débora Muchaluat Saade)