02 Multimedia Interfaces

CURSO CIENTÍFICO-TECNOLÓGICO DE
INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA
Objetivo:
Serve o presente manual como guia de apoio na

aprendizagem dos alunos.
Ferramentas:
Multimédia e Interfaces
Autor:
Rui Baptista
Contribuidores:
12. ANO
TECNOLOGIAS E DESENVOLVIMENTO MULTIMÉDIA
ANO ESCOLAR 2019 – 2020
1
Conteúdo
Índice de figuras ............................................................................................................................ 4
Introdução ..................................................................................................................................... 6
Convenções ............................................................................................................................... 6
Código Fonte ............................................................................................................................. 6
Errata ......................................................................................................................................... 6
Multimédia .................................................................................................................................... 7
Definição ................................................................................................................................... 7
Associação ................................................................................................................................. 7
Impacto ..................................................................................................................................... 8
Processamento da informação ................................................................................................. 8
Tipos de informação multimédia .............................................................................................. 8
Multimédia Digital ..................................................................................................................... 9
Informação digital ..................................................................................................................... 9
Aplicações multimédia ............................................................................................................ 10
Desenvolvimento ................................................................................................................ 10
Taxonomia ........................................................................................................................... 10
Utilização ................................................................................................................................. 12
Hipertexto ................................................................................................................................... 12
Hipermédia .................................................................................................................................. 13
Projeto Multimédia ..................................................................................................................... 13
Fases de desenvolvimento de um projeto multimédia........................................................... 13
Design ...................................................................................................................................... 14
Design da estrutura da aplicação ........................................................................................ 14
Estruturas fundamentais da navegação .............................................................................. 14
Design dos ecrãs da aplicação (storyboards) ...................................................................... 16
Design da interface do utilizador ........................................................................................ 17
Mind Mapping ......................................................................................................................... 17
Protótipo ................................................................................................................................. 17
Vantagens ............................................................................................................................ 18
Baixa fidelidade ................................................................................................................... 18
Média fidelidade ................................................................................................................. 18
Alta fidelidade ..................................................................................................................... 18
12. ANO
2
Experiencia do utilizador ......................................................................................................... 19

Interfaces..................................................................................................................................... 19
Estilos de interação ................................................................................................................. 19
Linha de comando ............................................................................................................... 19
Menus.................................................................................................................................. 20
Linguagem natural............................................................................................................... 20
Diálogo baseado em pergunta / resposta ........................................................................... 20
Preenchimento de formulários ........................................................................................... 21
Diálogo baseado em janelas, ícones, menus e apontadores .............................................. 21
Design de elementos interativos......................................................................................... 23
Organização dos elementos de interação nas interfaces ................................................... 23
Utilização da cor ...................................................................................................................... 27
Erros a evitar ....................................................................................................................... 36
Design Técnico......................................................................................................................... 37
Produção ................................................................................................................................. 37
Atividades de autoria .......................................................................................................... 37
Organização temporal ......................................................................................................... 37
Teste e validação ..................................................................................................................... 39
Características e prioridades dos erros ............................................................................... 39
Erros – prioridades .............................................................................................................. 39
Lista de prioridades ............................................................................................................. 39
Tipos de testes .................................................................................................................... 39
Distribuição ............................................................................................................................. 40
12. ANO
3
ÍNDICE DE FIGURAS
Figura 1 - Tipos de informação multimédia .................................................................................. 8
Figura 2 - Digitalização da informação .......................................................................................... 9
Figura 3 - Taxonomia aplicação multimédia pessoa/pessoa....................................................... 10
Figura 4 - Taxonomia aplicação multimédia pessoa/sistema ..................................................... 11
Figura 5 - Aplicação multimédia: utilização interativa ................................................................ 12
Figura 6 - Utilização multissensorial............................................................................................ 12
Figura 7 - interface sensorial ....................................................................................................... 12
Figura 8 - Mapa de navegação do modelo UX ............................................................................ 15
Figura 9 - Rascunho de um mapa de navegação ......................................................................... 15
Figura 10 - Storyboard de uma aplicação mobile ....................................................................... 16
Figura 11 - IU pobre..................................................................................................................... 17
Figura 12 - Mind Mapping ........................................................................................................... 17
Figura 13 - Protótipo de baixa fidelidade .................................................................................... 18
Figura 14 - Protótipo de média fidelidade .................................................................................. 18
Figura 15 - Protótipo de alta fidelidade ...................................................................................... 18
Figura 16 - Estilos de Interação: Linha de comandos .................................................................. 20
Figura 17 - Estilos de Interação: Menus ...................................................................................... 20
Figura 18 - Estilos de Interação: Linguagem Natural .................................................................. 20
Figura 19 - Estilos de interação: Diálogos ................................................................................... 20
Figura 20 - Estilos de interação: Preenchimento de formulários................................................ 21
Figura 21 - Janelas ....................................................................................................................... 21
Figura 22 - ícones ........................................................................................................................ 21
Figura 23 - Pull-down .................................................................................................................. 21
Figura 24 - fall-down ................................................................................................................... 22
Figura 25 - side menu .................................................................................................................. 22
Figura 26 - pop-up ....................................................................................................................... 22
Figura 27 - pin-up ........................................................................................................................ 22
Figura 28 - Apontadores .............................................................................................................. 22
Figura 29 - Eixo (Alinhamento) .................................................................................................... 23
Figura 30 - Eixo (Reforço) ............................................................................................................ 23
Figura 31 - Eixo (Movimento) ...................................................................................................... 24
Figura 32 - Eixo (Contínuo) .......................................................................................................... 24
Figura 33 - Simetria (Equilíbrio)................................................................................................... 24
Figura 34 - Simetria (Assimetria) ................................................................................................. 25
Figura 35 - Hierarquia (Tamanho) ............................................................................................... 25
Figura 36 - Hierarquia (Forma) .................................................................................................... 25
Figura 37 - Hierarquia (Localização) ............................................................................................ 26
Figura 38 - Ritmo (Padrões)......................................................................................................... 26
Figura 39 - Ritmo (Quebras) ........................................................................................................ 26
Figura 40 - Regra 60-30-10 .......................................................................................................... 27
Figura 41 – Escala de cinzas ........................................................................................................ 28
Figura 42 – Saturação da cor ....................................................................................................... 28
12. ANO
4
Figura 43 - Circulo cromático ...................................................................................................... 28

Figura 44 - Circulo cromático (Cores complementares).............................................................. 28
Figura 45 - Circulo cromático (Combinações análogas) .............................................................. 29
Figura 46 - Circulo cromático (tríade) ......................................................................................... 29
Figura 47 - Circulo cromático (Combinação em fenda)............................................................... 29
Figura 48 - Circulo cromático (Combinação de quatro cores) .................................................... 30
Figura 49 - Circulo cromático (O quadrado) ................................................................................ 30
Figura 50 - Palete de cores .......................................................................................................... 30
Figura 51 - ferramentas de cor (Coolors.co) ............................................................................... 31
Figura 52 - ferramentas de cor (kuber ADOBE)........................................................................... 31
Figura 53 - Tipos de letra (calendário google) ............................................................................. 33
12. ANO
5
INTRODUÇÃO
CONVENÇÕES
Para o ajudar a tirar o máximo partido do texto e o ajudar na interpretação do que vai
acontecendo, são utilizadas algumas convenções durante este manual.
EXERCÍCIO| Resolva a ficha de exercícios N03
Este é um exercício que deve ser resolvido, seguindo os procedimentos descritos neste manual.
1. Normalmente consiste num conjunto de passos.

2. Cada passo é numerado.
3. Siga os passos
ATENÇÃO: Caixas como esta contêm informação importante, para não

ser esquecida. Informação diretamente relevante para o texto em redor
NOTA: Notas, Dicas, fora do contexto deste manual
Outras convenções no texto:
• Novos termos e palavras importantes são representadas a negrito e itálico quando

aplicadas pela primeira vez.
• Teclas de atalho são representadas da seguinte forma: Ctrl + R.
• Nomes de ficheiros, URL’s e código dentro da área de texto tratado da seguinte forma:
persistence.properties
CÓDIGO FONTE
O código fonte dos exemplos deste manual será disponibilizado aos alunos, no entanto, estes
devem tentar reproduzir todo o código manualmente. Todo o código fonte será disponibilizado
no final da aula correspondente ao exercício resolvido.
ERRATA
Sempre que forem detetados erros neste manual, devem ser comunicados de imediato ao
docente para proceder á devida correção. Os possíveis erros podem ser comunicados de
imediato no decorrer da sessão ou através do e-mail rui.baptista@colgaia.pt
12. ANO
6
MULTIMÉDIA
DEFINIÇÃO
No livro Networked Multimedia Systems, S.V. Raghavan refere que “Multimedia refers
to the combination of two or more of these media [text, digitized voice, digitized video, still
digitized images and graphics] of which at least one is discrete and one is continuous”
Já Barker e Tucker propõem duas definições de multimédia tendo como base a cronologia:
• clássica: em que multimédia seria uma conjugação dos media que emanam (resultam)
de mecanismos de apresentação díspares (diferentes)
• moderna: em que multimédia seria a conjugação de media díspares que emanam
(resultam) de um único mecanismo de apresentação, o computador.
Por outro lado, e devido à confusão do termo multimédia, Dannenberg e Battner, assinalam
“Ainda não existe um consenso generalizado quanto ao significado do termo multimédia. Os
fabricantes tendem a definir multimédia em função do tipo de produtos que fabricam e mesmo
a comunidade académica utiliza o termo de forma inconsistente. A razão para estas diferenças
parece ter a ver com o grande número e variedade de disciplinas que contribuíram para o estudo
das interfaces com o utilizador”
Multimédia é um termo extensivamente usado mas de definição imprecisa. A etimologia

da palavra é a seguinte: Prefixo “multi” e base “média”. Multi vem do latim “multus” e significa
numerosos. Média vem do plural de medium, um nome que significa “meio”. Resumindo,
podemos afirmar que multimédia significa “Múltiplos meios”, ou seja, no âmbito digital, vários
suportes para transmitir ou comunicar informação.
ASSOCIAÇÃO
A utilização da palavra Multimédia está associada a várias áreas:
Tecnologias Multimédia – Conjunto de técnicas e áreas tecnológicas específicas que

permitem a existência de aplicações multimédia.
Aplicações Multimédia – Conjunto de funções que suportam a distribuição de um

serviço multimédia ao utilizador.
Rede Multimédia – Rede de comunicação de dados com uma performance adequada

ao transporte de tipos múltiplos de informação.
E ainda
• Mercado Multimédia;
• Produto Multimédia;
• Plataforma Multimédia;
• Posto de Trabalho;
• Multimédia.
12. ANO
7
IMPACTO
O impacto da Multimédia também está diretamente relacionado com os aspetos cognitivos e

sensoriais de cada indivíduo. A utilização de Multimédia aumenta a capacidade de...
• Perceção
• Retenção
• Raciocínio
• Apresentação
…porque intervém em vários canais. Assim, age sobre:
• Os sentidos
• A memória
• As reações
Significa também que existe o risco de sobrecarregar o utilizador com informação!
PROCESSAMENTO DA INFORMAÇÃO
É geralmente afirmado que a aquisição de informação se processa:
• 80% através da visão

• 11% através da audição
• 3,5% através do olfato
• Restante – tato e paladar
O nível de retenção da informação é de...
• 20 a 30% do que se vê ou ouve

• 40 a 50 % do que se vê e ouve
• 80% do que se vê, ouve e faz
TIPOS DE INFORMAÇÃO MULTIMÉDIA
Uma possível classificação dos tipos de informação Multimédia distingue a sua natureza
temporal e o seu processo de criação:
• Continua: Baseada no Tempo

• Discreta: Baseada no espaço que
ocupam
• Capturada: Mundo Real
• Sintetizada: Computador
Figura 1 - Tipos de informação multimédia
12. ANO
8
MULTIMÉDIA DIGITAL
A multimédia digital é a integração por computador de qualquer meio que possa ser
representado, armazenado, transmitido e processado digitalmente, nomeadamente texto,
gráficos, imagens, animação, vídeo e áudio e implica a combinação de (pelo menos) um meio
discreto (texto, gráficos e imagens) com (pelo menos) um meio contínuo (som, vídeo).
A representação digital permite ter uma abordagem universal: todos os tipos de dados
podem ser processados pelo mesmo equipamento, quer seja para armazenamento, transmissão
(menos sensibilidade ao ruído e maior capacidade de regeneração do sinal) e processamento
(possibilidade de reconhecimento de semânticas, criação de estruturas de indexação, facilidade
de edição, redução de ruídos, combinação de informação distinta, etc,).
Naturalmente existem algumas desvantagens, relacionadas com a distorção do sinal

original, com compromissos de qualidade vs. dimensão (em bits) e a necessidade de
sincronização intra e inter-media.
A utilização de informação no formato digital exige a conversão de sinais analógicos

(sinal contínuo tempo/espaço), capturados do mundo real em sequências de valores discretos
(amostras) e com precisão limitada.
INFORMAÇÃO DIGITAL
Informação em Formato Digital é a sequência de valores discretos e com precisão limitada.
Figura 2 - Digitalização da informação
Informação digital é a representação universal de todos os tipos de dados que podem ser
processados pelo mesmo equipamento. Relativamente ao armazenamento apenas existem
diferenças no volume dos dados. A transmissão é menos sensível ao ruído e tem capacidade de
regenerar do sinal. No processamento existe reconhecimento de semântica, estruturas de
indexação, facilidade de edição cut & paste, processamento para reduzir ruídos, possibilidade
de combinar informação distinta. Os problemas são a distorção do sinal, a qualidade está
diretamente relacionada com o tamanho e a sincronização pode ser problemática intra e inter-
medias.
12. ANO
9
APLICAÇÕES MULTIMÉDIA
DESENVOLVIMENTO
O desenvolvimento da Multimédia está diretamente ligado:
• Aos recentes avanços tecnológicos ao nível de dispositivos (captura, processamento,

armazenamento e visualização) e redes de transmissão.
o Gestão e Apresentação de Informação, Trabalho Colaborativo, Aquisição de
Conhecimento
• Iniciativas Governamentais
o Programas de difusão da Internet na Escola, ao nível do Ensino Secundário e
Básico
o Programas Europeus de investigação como Telematics, eContents, eLearning,
IST e FP7
• Alianças entre Indústrias
o Entre Produtores de Aplicações Informáticas e Operadores de Comunicações
o Entre Operadores de Televisão por Cabo e Produtores de Programas
o Entre Editores de Informação e Indústrias de Eletrónica de Consumo
o Entre Produtores de Aplicações Informáticas e Editores de Publicações
TAXONOMIA
Uma possível taxonomia (categorização) de aplicações multimédia baseia-se na diferença entre

os destinatários/originários da comunicação
Comunicação
entre Pessoas
Síncronas Assíncronas
Distribuição Troca de
Documentos
Teleconferência Correio
Multimédia
Conferência
Interpessoais
Assíncrona
Figura 3 - Taxonomia aplicação multimédia pessoa/pessoa
12. ANO
10
Comunicação
Pessoa / Sistema
Interativas Distribuição
Acesso Broadcast
Transação Multicast
Figura 4 - Taxonomia aplicação multimédia pessoa/sistema
Outra possível taxonomia, proposta pelo ITU – Institute for the Telecommunications Union, é a
seguinte:
o Conversação – aplicações correspondentes à interação entre humano e humano ou

sistema
o Mensagem – aplicações para troca assíncrona de documentos através de caixas de
correio
o Pesquisa – aplicações para acesso a servidores de informação
o Distribuição – aplicações para distribuição de informação com ou sem controlo da
apresentação pelo utilizador
Finalmente, outra taxonomia proposta por Gupta, é a seguinte:
o Aplicações centradas no conteúdo – editoras e documentação (enciclopédias,

dicionários, etc.)
o Aplicações centradas na apresentação – interação e apresentação (quiosques,
marketing, etc.)
o Aplicações centradas no utilizador – comunicação entre utilizadores por sistemas
eletrónicos
o Aplicações centradas nas operações – formação “just-in-time”, simulações, etc.
12. ANO
11
UTILIZAÇÃO
Do que foi dito atrás, ressalta que a interatividade das aplicações Multimédia influencia a
retenção e o impacto:
• Numa utilização passiva a sequência e natureza da

informação segue um trajeto pré-definido. O utilizador
só consegue decidir se vê ou não, podendo ter um
conjunto limitado de funções.
• Uma utilização interativa permite personalização quer

do tempo, ordem, velocidade e forma, a inclusão de
anotações e adaptações, o enriquecimento da
informação pelo utilizador e a apresentação em função Figura 5 - Aplicação multimédia: utilização
da interação. interativa
Um sistema pode ser multimédia sem ser

multissensorial. Por exemplo, uma apresentação com
animação e texto é uni sensorial (apenas depende da
visão).
A utilização de diferentes sentidos, por exemplo, visão

mais audição aumenta exponencialmente o impacto da
multimédia.
Figura 6 - Utilização multissensorial

A utilização de novas interfaces sensoriais (luvas,
coletes de impacto, etc.) cria novas possibilidades de
utilização e interação. Para além disso permite uma
interação mais natural e amigável, aumenta a
redundância de informação, permite a transmissão de
informação emocional e contempla utilizadores com
requisitos particulares.
Figura 7 - interface sensorial
HIPERTEXTO
Hipertexto é texto com ligações. Um documento hipertexto não é estritamente sequencial. Pode
ter ligações (ou referências) a outras partes do documento ou de outros documentos. Ted
Nelson (1965) refere que hipertexto é “Material escrito ou gráfico interrelacionado de uma
forma complexa que não pode ser representado convenientemente em papel"
12. ANO
12
HIPERMÉDIA
Conceito estendido a documentos multimédia. A hipermédia é hipertexto com uma diferença,

os documentos referenciados podem ser gráficos, animação, som ou vídeo, tal como texto. A
hipermédia é baseada na noção de link. Os links podem ser qualquer objeto no ecrã, mas,
normalmente são texto, um botão ou um gráfico.
PROJETO MULTIMÉDIA
Conjunto de atividades que permitem planear, conceber, produzir, testar e distribuir uma
aplicação multimédia interativa
Autoria multimédia – atividade que consiste em organizar a informação sob a forma de uma
apresentação que, na maior parte dos casos, é interativa. É uma das atividades no
desenvolvimento de um projeto multimédia.
FASES DE DESENVOLVIMENTO DE UM PROJETO MULTIMÉDIA
• Análise e planeamento
o “Brainstorming”, classificação de ideias e tópicos, calendarização de tarefas,
planeamento de competências e recursos, estimação de custos. Produz-se o
plano do projeto
• Design
o Conceção da aplicação multimédia, detalhando ao pormenor esquemas de
navegação, conteúdos e composições.
o Produz-se guião da aplicação e um protótipo
• Produção
o Autoria de conteúdos (aquisição / criação de conteúdos multimédia) e autoria
da aplicação (combinação dos conteúdos)
o Produz-se uma versão completa da aplicação
• Teste e validação
o Teste da interface e da funcionalidade da aplicação; controlo da conformidade
da aplicação aos objetivos iniciais
o Produz-se versão final da aplicação multimédia interativa
• Distribuição e manutenção
o Produto final no suporte escolhido
12. ANO
13
DESIGN
• Consiste na criação da aplicação multimédia interativa

• Envolve a conceção da funcionalidade e do aspeto da aplicação atendendo aos
requisitos e limitações das tecnologias; estabelece o modo como a aplicação
funcionará bem como o aspeto de todos os seus ecrãs.
• O documento resultante designa-se por guião
• A fase de design envolve pensar, escolher, construir e fazer, aperfeiçoar, rever, testar e
editar o guião da aplicação
• O design da aplicação consiste em traduzir as ideias e os conceitos presentes no plano
produzido durante a primeira fase, em elementos concretos e detalhados que serão
implementados durante a fase de produção
Na fase de design produz-se o guião cujos objetivos são:
• Identificar a estrutura da aplicação, isto é, o esquema de navegação

• Identificar cada ecrã da aplicação, isto é, os conteúdos que serão apresentados em
cada unidade de apresentação da informação, a respetiva disposição espacial, bem
como as suas características técnicas, tais com a qualidade e o formato
• Identificar a interface do utilizador que resulta da combinação dos conteúdos com os
elementos interativos que implementam o esquema de navegação
DESIGN DA ESTRUTURA DA APLICAÇÃO

• Consiste na conceção dos percursos que podem ser seguidos pelo utilizador para a
consulta da informação disponibilizada pela aplicação.
• O mapa de navegação ilustra as hiperligações que existem entre as várias unidades de
conteúdo e ajuda a organizar a apresentação de conteúdos e mensagens
O mapa de navegação cumpre os seguintes objetivos:
• Fornece um índice gráfico do fluxo lógico da interface interativa

• Descreve as hiperligações entre as unidades de conteúdo multimédia (ecrãs)
• Ilustra o que acontece quando o utilizador interage com a aplicação
ESTRUTURAS FUNDAMENTAIS DA NAVEGAÇÃO
Existem 4 estruturas fundamentais a nível da navegação:
Linear – o utilizador navega sequencialmente de um ecrã para o seguinte ou para o anterior
12. ANO
14
Hierárquica – o utilizador navega ao longo de ramos de uma árvore que reflete uma organização
lógica do conteúdo
Não-linear – o utilizador navega livremente por todo o conteúdo da aplicação sem lhe ser
imposta qualquer restrição, podendo escolher, em cada instante, o percurso que deseja para
consultar a informação disponível
Composta – o utilizador pode navegar livremente, mas existem ocasiões em que encontra
restrições, tais como apresentações lineares de sequências de vídeo ou de ecrãs contendo
informação considerada crítica ou, ainda, uma hierarquia de ecrãs
Alguns exemplos de mapas de navegação
Figura 9 - Rascunho de um mapa de navegação Figura 8 - Mapa de navegação do modelo UX
12. ANO
15
DESIGN DOS ECRÃS DA APLICAÇÃO (STORYBOARDS)

• Os storyboards devem descrever os ecrãs:
• Utilizando descrições textuais e esquemas suficientemente detalhados
• Especificando cada imagem, bloco de texto, efeito sonoro, objeto gráfico, sequência de
vídeo e animação que surgem em cada ecrã
• Detalhando a localização precisa dos elementos interativos que facilitam a navegação
• Especificando com muito pormenor os atributos e os formatos dos conteúdos a utilizar.
Ex: cores, sombras, fontes
• Permitem descrever com precisão a composição e a disposição dos conteúdos
multimédia (texto, gráficos, vídeo, áudio, animações) em unidades de apresentação da
informação
Figura 10 - Storyboard de uma aplicação mobile
12. ANO
16
DESIGN DA INTERFACE DO UTILIZADOR
A interface do utilizador (IU) ou em inglês User Interface (UI) é

uma mistura dos seus conteúdos multimédia e do seu sistema
de navegação. Se as mensagens e o conteúdo se encontrarem
desorganizados e forem difíceis de encontrar, e /ou se os
utilizadores se desorientarem ou ficarem aborrecidos, o projeto
pode falhar nos seus objetivos. O mesmo se passa se o design for
pobre.
Figura 11 - IU pobre
MIND MAPPING
Mind Mapping é um processo cognitivo que procura representar, com o máximo de detalhe
possível, o relacionamento conceptual existente entre
informações que normalmente estão fragmentadas,
difusas no início do processo criativo. Esta é uma
ferramenta que ilustra ideias e conceitos, dá-lhes forma
e contexto, traça os relacionamentos de causa, efeito,
simetria e/ou similaridade que existem entre elas e
torna-as mais palpáveis e mensuráveis, sobre as quais
se pode planear ações e estratégias para alcançar
objetivos específicos. Figura 12 - Mind Mapping
PROTÓTIPO
Jakob Nielsen, 2013 refere que "As maiores melhorias na interface de um produto são obtidas
através da recolha de dados de usabilidade nas fases inicias de seu desenvolvimento."
Na Engenharia de Software, protótipo é um sistema/modelo (um website ou outro software)

sem funcionalidades inteligentes (acesso a base de dados, por exemplo), podem conter apenas
funcionalidades gráficas. Utilizado para fins de ilustração e melhor entendimento, geralmente
em reuniões entre a equipa de Análise de Sistemas e o cliente.
O protótipo é a forma mais rápida e econômica de se definir e testar um projeto. Estes dois
motivos só por si já garantem a sua importância, porém, ainda assim é comum vermos sistemas
a tomar forma antes de qualquer rascunho.
Quanto mais avançado o projeto está, maiores são os impactos para se realizar correções ou
alterações de lógica. Alterar a programação de uma determinada funcionalidade num sistema
demora mais tempo que refazer um rascunho várias vezes. O tempo gasto na prototipagem é
inversamente proporcional ao tempo necessário para a programação, por outras palavras,
quanto mais se dedicar na fase de prototipagem, menor será o esforço/custo de
implementação.
12. ANO
17
VANTAGENS
• Tempo de desenvolvimento é reduzido e consequentemente, garante um custo baixo;
• Não requer conhecimentos avançados de softwares de edição gráfica;
• Facilita a visualização do produto pelo cliente desde a fase inicial;
• Possibilita receber o feedback do cliente em tempo útil;
• Facilita o levantamento de requisitos e funcionalidades;
• Possibilita estimar de forma mais precisa a complexidade e tempo de desenvolvimento;
• Possibilita a realização de testes de interação;
• Reduz o esforço de desenvolvimento.
Os protótipos são classificados de baixa fidelidade, média fidelidade e de alta fidelidade
BAIXA FIDELIDADE
Os protótipos de baixa fidelidade, também chamados de
rascunho ou esboço, são efetuados ainda na fase inicial do
projeto. São desenhados geralmente à mão utilizando lápis,
borracha e papel, as representações são feitas de maneira
rápida e superficial, apenas esboços da ideia do projeto e
definem superficialmente a interação com o utilizador, nesta
fase ainda não existe preocupação com os elementos da
interface, cores, localização, etc.
Figura 13 - Protótipo de baixa fidelidade
MÉDIA FIDELIDADE
Conhecidos também por wireframes, são protótipos
desenvolvidos na fase da arquitetura da informação, com
recurso a lápis e papel ou software de prototipagem, como
o moqups ou Axure, os documentos resultantes apresentam
a estrutura e o conteúdo da interface, definindo peso,
relevância e relação dos elementos, formando o layout
básico do projeto.
Figura 14 - Protótipo de média fidelidade
ALTA FIDELIDADE
Os mockups ou protótipos funcionais constituem a
representação mais próxima do sistema a ser
desenvolvido. Em alguns casos, é possível simular o
fluxo completo das funcionalidades, permitindo a
interação do utilizador como se fosse o produto final. A
aparência visual, as formas de navegação e
interatividade já são concebidas e aplicadas aos
protótipos de alta fidelidade. Figura 15 - Protótipo de alta fidelidade
12. ANO
18
EXPERIENCIA DO UTILIZADOR
Experiencia do utilizador (EU) ou em inglês User Experience (UX) refere-se às emoções e atitudes
de uma pessoa em relação ao uso de um determinado produto, sistema ou serviço. Inclui os
aspetos práticos, experienciais, afetivos, significativos e valiosos da interação homem-
computador e propriedade do produto. Além disso, inclui a perceção de uma pessoa de aspetos
do sistema, como utilidade, facilidade de utilização e eficiência. A experiência do utilizador pode
ser considerada de natureza subjetiva na medida em que se trata da perceção e pensamento
individual em relação ao sistema. A experiência do utilizador é dinâmica, pois é constantemente
modificada ao longo do tempo, devido à mudança de circunstâncias de uso e mudanças em
sistemas individuais, bem como o contexto de utilização mais amplo no qual os utilizadores se
encontram. No final, a experiência do utilizador é refere-se à forma como o utilizador interage
e testa um produto.
INTERFACES
As interfaces devem ser simples e acessíveis as interfaces são realizadas a pensar no utilizar.
Simples:
• Exige o menor esforço de aprendizagem por parte do utilizador (concebida de modo que
não seja necessário o estudo de qualquer manual para utilizar a aplicação)
• Consistente no seu aspeto e comportamento – utiliza metáforas conhecidas pelos
utilizadores
• Ex: ícone “caixote do lixo” para apagar ficheiros
• Cursor com a forma de uma “mão” para arrastar objetos
• “relógio” ou “ampulheta” para indicar uma pausa ou um intervalo de tempo
Acessível:
• Todas as pessoas devem ser capazes de a utilizar, mesmo os portadores de deficiência
“(…) dez princípios gerais do design de interface com utilizador. São chamados de
“heurística” porque estão mais na natureza de regras do que como diretrizes de usabilidade
específicos.” Jacob Nilsen
ESTILOS DE INTERAÇÃO
Estilos de interação incluem todas as formas como os utilizadores comunicam ou interagem com
sistemas computacionais. Estilos de interação mais comuns são:
LINHA DE COMANDO
• Permitem fornecer diretamente instruções ao computador, utilizando as teclas de
função, caracteres, abreviaturas ou comandos completos
• Fornecem o acesso direto às funcionalidades do sistema e podem ser combinadas de
modo sequencial
12. ANO
19
• São flexíveis na medida em que

permitem ajustar o seu
comportamento por meio da
parametrização
• O grau de flexibilidade permitida e
o seu potencial traduzem-se em
dificuldades de aprendizagem e
utilização pois os comandos devem
ser memorizados e variam muito
Figura 16 - Estilos de Interação: Linha de comandos
de sistema para sistema
MENUS
• As opções são selecionadas através da utilização do rato ou do teclado
• Interface menos exigente para a memória do utilizador, assentando no reconhecimento
de comandos
• As opções dos menus devem ser
agrupadas logicamente para ajudar no
processo de reconhecimento
• Os sistemas que utilizam este tipo de
interface podem ser baseados em texto
ou podem ter um componente gráfico
• Por vezes os utilizadores podem perder-se
ao consultar a hierarquia de menus
Figura 17 - Estilos de Interação: Menus
LINGUAGEM NATURAL
• Computador é capaz de interpretar e executar instruções expressas oralmente através
de palavras do vocabulário corrente do utilizador
• A ambiguidade da linguagem natural coloca
problemas à sua compreensão por parte da
máquina. Esta ambiguidade manifesta-se a
vários níveis:
• Sintaxe ou estrutura pode não ser clara
• Significado de uma palavra por ser ambíguo e
necessita do contexto para ser clarificado
Figura 18 - Estilos de Interação: Linguagem Natural
• Utilização de pronomes e termos relativos
DIÁLOGO BASEADO EM PERGUNTA / RESPOSTA

• Utilizador é confrontado por uma série de
perguntas do tipo sim / não, de escolha
múltipla ou perguntas baseadas em códigos
• Utilizador é conduzido passo a passo pelo
processo de interação
• Adequado para utilizadores com pouca
experiência ou utilizadores ocasionais Figura 19 - Estilos de interação: Diálogos
12. ANO
20
PREENCHIMENTO DE FORMULÁRIOS
• Utilizador tem à sua disposição um ecrã cuja conceção

se assemelha a um formulário em papel
• Adequado para a introdução de dados
• Fácil de aprender e utilizar por utilizadores com pouca
experiência
Figura 20 - Estilos de interação:

Preenchimento de formulários
DIÁLOGO BASEADO EM JANELAS, ÍCONES, MENUS E APONTADORES

Ambiente gráfico mais comum para as aplicações multimédia interativas
• Janelas
Podem conter texto, gráficos, imagens, animações, vídeo; podem ser

movidas ou redimensionadas.
Figura 21 - Janelas
• Ícones
Imagens ou gráficos de pequenas dimensões. Permitem visualizar em

simultâneo várias janelas prontas para serem abertas ou expandidas para
as suas dimensões máximas
➢ Poupam espaço no ecrã;

➢ Podem ser usados para representar outros aspetos do sistema;
➢ Podem assumir várias formas
Figura 22 - ícones
• Menus
Pull-down (expandem-se para baixo a partir de um título que é

selecionado);
Figura 23 - Pull-down
12. ANO
21
fall-down (expande-se para baixo logo que se passa cursor);
Figura 24 - fall-down
Side menu
➢ útil no BackOffice e muito utilizado em aplicações mobile
Figura 25 - side menu
pop-up
➢ permanecem ativos até se selecionar uma opção do menu
Figura 26 - pop-up
pin-up
➢ determinadas posições no ecrã e assim permanecem até serem

eliminados
Figura 27 - pin-up
Apontadores
➢ Representam uma localização ou
aponta a localização atual e função.
Figura 28 - Apontadores
12. ANO
22
DESIGN DE ELEMENTOS INTERATIVOS

• O design da aplicação deve fornecer botões que façam sentido para que as ações sejam
compreendidas de forma intuitiva pelo utilizador.
• É desaconselhável obrigar o utilizador a memorizar e a aprender ícones novos ou muito
específicos.
• É importante incluir em todos os ecrãs da aplicação botões ou ícones que desempenhem
funções de navegação tais como:
o Sair da aplicação em qualquer altura
o Cancelar uma atividade ou anular uma escolha
o Aceder a um mapa de navegação global
ORGANIZAÇÃO DOS ELEMENTOS DE INTERAÇÃO NAS INTERFACES

Os elementos de interação podem ser organizados da seguinte forma:
EIXO
O eixo é o princípio de organização mais básico e mais comum. Simplificado, o eixo é uma linha
imaginária que é usada para organizar um grupo de elementos num projeto. Nos diagramas, o
eixo é representado como uma linha tracejada.
ALINHAMENTO
O eixo é usado principalmente para alinhar elementos. Quando
os elementos estão dispostos em torno de um eixo, o design sente-
se organizado. Como acontece com a maioria das coisas na vida,
nós apreciamos as coisas que estão “alinhadas” porque
transmitem estabilidade, são mais confortáveis e acessíveis.
Um exemplo simples de eixo é a lista de álbuns na aplicação iTunes.

Neste projeto, um eixo vertical alinha perfeitamente as capas dos
álbuns no lado esquerdo do ecrã.
Figura 29 - Eixo
(Alinhamento)
REFORÇO
Embora o eixo seja uma linha imaginária, pode torná-lo mais
evidente se as bordas dos elementos circundantes estiverem bem
definidas. Um exemplo comum deste conceito em arquitetura é
uma rua da cidade. A rua da cidade é um eixo que é reforçado pelos
edifícios de ambos os lados. Se numa parte da rua estiver a faltar
um prédio de um ou ambos os lados, o eixo da rua não se sentiria
tão forte.
Um exemplo disso no design de produto é a linha do tempo no

aplicativo do Twitter. Neste projeto, um eixo vertical ajuda a definir
uma secção para avatares à esquerda e uma secção para o Figura 30 - Eixo
conteúdo do tweet à direita. (Reforço)
12. ANO
23
MOVIMENTO
Quando encontramos algo linear, como um eixo, seguimos
naturalmente a linha numa direção. Se chegarmos a uma rua,
caminhamos pela rua. Se abrimos um elevador para um longo
corredor, caminhamos pelo corredor. Linhas indicam
movimentos e interações. A direção do movimento depende dos
pontos finais. Um ponto final definido indica um local para iniciar
ou parar.
Um eixo que incentiva o movimento é o reprodutor de música na

aplicação SoundCloud. Neste design, reconhece o reprodutor
como um eixo esquerdo-direito e, naturalmente, desliza o Figura 31 - Eixo
(Movimento)
reprodutor para a direita até chegar ao final da música.
CONTÍNUO
Se um ponto final for indefinido, você seguirá o eixo até chegar a
algo de interesse ou ficar cansado de interagir com o eixo. Embora
o conceito de um ponto final indefinido na arquitetura seja
incomum, uma vez que, é difícil para algo arquitetónico prosseguir
para sempre, está se a tornar mais popular no design de produtos
com scroll infinito.
Um exemplo de um scroll infinito é o feed principal da aplicação

Pinterest. Neste projeto, o eixo vertical começa na parte superior
do ecrã e continua para baixo sem um ponto de paragem. Este
método encoraja o utilizador a percorrer a página enquanto estiver
interessado em ver conteúdos. Figura 32 - Eixo
(Contínuo)
SIMETRIA
A simetria existe quando os elementos estão dispostos da mesma maneira de ambos os lados
de um eixo. A simetria perfeita acontece quando os elementos são espelhados sobre o eixo e
exatamente o mesmo em ambos os lados.
EQUILÍBRIO
A simetria adiciona equilíbrio ao design. Quando os elementos são
iguais em ambos os lados de um eixo, o design parece mais
harmonioso. Se projetarmos uma rua com cinco casas de um lado
e cinco do outro, caminhar pela rua é mais confortável porque o
arranjo de casas é equilibrado.
Um exemplo de simetria é o arranjo de capas de música na

aplicação Rdio. Elementos em ambos os lados do ecrã são do
mesmo formato. Este tipo de layout é fácil de ler de cima para
baixo e da esquerda para a direita. Figura 33 - Simetria
(Equilíbrio)
12. ANO
24
ASSIMETRIA
Os desenhos são assimétricos se a disposição dos elementos for
diferente em ambos os lados de um eixo. Se desenharmos uma rua
com cinco casas de um lado e uma no outro, a rua ficará
desequilibrada e talvez desconfortável.
Um design assimétrico é o feed no aplicativo Pinterest. Embora as

colunas esquerda e direita tenham a mesma largura, a altura dos
elementos em cada coluna varia. As variâncias tornam difícil a
leitura a partir da esquerda-direita. Mesmo o mínimo de assimetria
pode eliminar o equilíbrio e o conforto do design.
Figura 34 - Simetria
(Assimetria)
HIERARQUIA
A hierarquia é quando um elemento aparece mais importante em comparação com outros
elementos num projeto.
TAMANHO
Um elemento aparecerá mais hierárquico se for maior do que outros
elementos de um projeto. Naturalmente, olhamos primeiro para o
maior elemento de um projeto. Se houver cinco janelas na frente de
um prédio, e uma é o dobro do tamanho dos outros, a nossa atenção
se concentrará primeiro na maior janela.
Um exemplo de hierarquia por tamanho é a lista de artigos no

aplicativo Pocket. O artigo do cabeçalho é apresentado no topo, com
uma imagem maior. Devido ao seu tamanho primeiro chama a nossa
atenção. Figura 35 -
Hierarquia
(Tamanho)
FORMA
Um elemento também pode aparecer mais hierárquico se for
diferente de outros elementos num projeto. Nós, naturalmente,
olhamos primeiro para a forma irregular de um design. Se houver
cinco das mesmas janelas e uma porta na frente de um edifício, a
nossa atenção se concentrará primeiro na porta.
Um exemplo de hierarquia por forma é a página de perfil no aplicativo

Instagram. A imagem de perfil circular é distintamente diferente das
publicações “quadrados”. Reconhecemos a imagem de perfil como
algo único e mais importante. Figura 36 -
Hierarquia (Forma)
12. ANO
25
LOCALIZAÇÃO
Por último, mas não menos importante, podemos colocar elementos em
posições mais hierárquicas. Dentro de um círculo, o centro é o mais
hierárquico. O fim de um eixo é naturalmente mais hierárquico do que
pontos ao longo da linha.
Um exemplo de hierarquia por posicionamento é a linha de tempo no

aplicativo Caminho. O avatar é o ponto de partida de um eixo longo e,
portanto, tem um maior nível de importância do que os avatares à
esquerda no fluxo. Figura 37 -
Hierarquia
(Localização)
RITMO
O ritmo é o movimento criado por um padrão repetido de formas.
PADRÕES
A melhor maneira de entender o ritmo é pensar numa música. As músicas
têm ritmo quando uma parte da música se repete. Ao ouvir uma música
com bom ritmo, reconhecemos o padrão e começamos a esperar batidas.
Um exemplo de ritmo no design do produto é o aplicativo Airbnb. Neste

feed, cada listagem é exibida com uma imagem, preço, localização e avatar
proprietário. Ao digitalizar o feed, começa a familiarizar-se com o ritmo e
sabe exatamente onde procurar elementos no padrão, como preço.
Figura 38 - Ritmo
(Padrões)
QUEBRAS
Uma rutura no ritmo parecerá mais hierárquica. Pense numa música.
Quando uma música tem um ritmo repetido e o ritmo é interrompido, algo
bastante especial geralmente acontece.
No Twitter, o feed de perfil tem um ritmo e é interrompido por uma secção

com sugestões de pessoas a serem seguidas. Esta rotura parece mais
hierárquica e é uma boa maneira de chamar a atenção.
Figura 39 - Ritmo
(Quebras)
12. ANO
26
UTILIZAÇÃO DA COR
A cor é como tudo o resto, é melhor usar com moderação. Para obter melhores resultados o
ideal é não usar mais do que três cores primárias no esquema de cores. A aplicação de cores a
um projeto tem muito a ver com o equilíbrio e quanto mais cores usar, mais complicado é
alcançar o equilíbrio.
“A cor não adiciona qualidade ao design – reforça-a.”
Pierre Bonnard
REGRA 60-30-10
A regra de design de interiores é uma
técnica de decoração intemporal que pode
ajudar a colocar um esquema de cores em
conjunto facilmente. A proporção de 60% +
30% + 10% destina-se a dar equilíbrio às
cores. Esta fórmula funciona porque cria
uma sensação de equilíbrio e permite que o
olho se mova confortavelmente de um
ponto focal para o outro. Também é
incrivelmente simples de usar.
Figura 40 - Regra 60-30-10
60% é a tonalidade dominante, 30% é de cor secundária e 10% é para cor de destaque.
SIGNIFICADO DA COR
Os cientistas estudaram os efeitos fisiológicos de certas cores durante séculos. Além da estética,
as cores são criadoras de emoções e associações. O significado das cores pode variar
dependendo da cultura e das circunstâncias. É por isso que as lojas de moda são na generalidade
pretas e brancas. Querem parecer elegantes e sublimes.
• Vermelho: paixão, amor, perigo

• Azul: Calma, Responsável, Seguro
• Preto: Mistério, Elegância, Mal
• Branco: Pureza, Silêncio, Limpeza
• Verde: Novo, Fresco, Natureza
ESCALA DE CINZA
Todos gostamos de brincar com cores e tons no início dos nossos projetos, mas esse
comportamento pode ser “traiçoeiro” e sem dar conta já passaram 3 horas a ajustar a cor... É
realmente tentador mas é de evitar essa atitude. Concentre-se no espaçamento e na colocação
de elementos. Vai poupar muito tempo. A abstração da cor pode ser muito produtiva.
Experimente tons diferentes se quiser dar uma boa aparência.
12. ANO
27
Figura 41 – Escala de cinzas
Lembre-se de adicionar sempre um pouco de saturação à sua cor. Subconscientemente,

parecerá mais natural e familiar para os utilizadores.
Figura 42 – Saturação da cor
ACREDITAR NA NATUREZA
As melhores combinações de cores são da natureza. Parecem sempre naturais. A melhor coisa
sobre procurar o meio ambiente para soluções de design é que a paleta está sempre a mudar.
Para nos inspirarmos, só precisamos de olhar em redor.
MANTER O CONTRASTE
Algumas cores ficam bem umas com as outras, enquanto outras entram em conflito. Existem
regras definitivas sobre como interagem, o que pode ser melhor observado numa roda de
cores. Você deve estar ciente desses métodos, mas não é necessário fazê-lo manualmente.
Figura 43 - Circulo cromático
Esquema nº 1: Combinações complementares

Cores complementares (conhecidas também como
suplementares ou de contraste), são tons que estão em lados
opostos uns aos outros no círculo cromático.
Esse esquema de combinações funciona muito bem quando se

quer que as cores criem um efeito de vida, energia e
principalmente quando se quer alcançar o máximo de saturação.
Figura 44 - Círculo cromático

(Cores complementares)
12. ANO
28
Esquema nº 2: Combinações análogas

Com este esquema poderá combinar de 2 até 5 cores (porém o
ideal é utilizar apenas 2 a 3), que são adjacentes umas das outras.
Assim cria uma impressão de calma e simpatia.

(Combinações análogas)
Esquema nº 3: A tríade – Combinação de três cores

Está é uma combinação de três cores que estão equidistantes uma
das outras dentro do círculo, produzindo um efeito de alto
contraste, sem perder a harmonia. Este tipo de composição cria
uma sensação “vibrante” mesmo quando utilizadas cores claras e
sem saturação.

(tríade)
Esquema nº 4: Combinação em fenda

Esta é uma variação da combinação de cores complementares.
Neste caso, poderá escolher uma cor primária e duas cores
complementares (tons que se encontram os dois diametralmente
opostos à cor primária). O efeito criado por este esquema tem mais
contraste, mas é um pouco menos intenso.

(Combinação em fenda)
12. ANO
29
Esquema nº 5: Combinação de quatro cores

Neste caso, basta utilizar uma cor primária e duas cores
complementares, além de uma cor adicional que acentua as
demais.

(Combinação de quatro cores)
Esquema nº 6: O quadrado
Poderá utilizar uma combinação de 4 cores equidistantes umas das
outras. Neste caso, os tons diferem uns dos outros, mas também
são complementares. Isso cria um efeito de dinâmica, vividez e
“diversão”.

(O quadrado)
INSPIRE-SE
Quando estamos a falar de Interface com o Utilizador (IU), então encontre o melhor lugar para
se inspirar. Quando quiser fazer pesquisas visuais sobre uma cor em particular procure em sites
da especialidade.
Figura 50 - Palete de cores
12. ANO
30
FERRAMENTAS
Coolors.co https://coolors.co/
Na aplicação coolors.com pode simplesmente bloquear uma cor e pressionar a tecla de espaço
para gerar uma palete. A coolors.co também oferece a capacidade de fazer upload de uma
imagem e fazer uma palete de cores associada. Aqui não está limitado a apenas um resultado,
em vez disso, possui um seletor que permite modificar o ponto de referência.
Figura 51 - ferramentas de cor (Coolors.co)
Kuler https://color.adobe.com/pt/create/color-wheel
Esta ferramenta da Adobe existe já há muito tempo. Está disponível no navegador e em versões
de desktop. A versão de área de trabalho, permite exportar um esquema de cores para o
Photoshop.
Figura 52 - ferramentas de cor (kuber ADOBE)
12. ANO
31
Combinações de cores individuais

• Branco: Combina com tudo, principalmente com azul, vermelho e preto;
• Bege: Combina com azul, castanho, verde-esmeralda, preto, vermelho e branco;
• Cinza: Combina com fúcsia (magenta), vermelho, violeta, rosa e azul;
• Rosa: Combina com castanho, branco, verde menta, verde azeitona, cinzento,
turquesa, azul claro;
• Vermelho: Combina com amarelo, branco, verde, azul e preto;
• Laranja: Combina com ciano, azul, lilás, violeta, branco e preto;
• Amarelo: Combina com azul, lilás, ciano claro, violeta, cinzento e preto;
• Verde: Combina com dourado, laranja, verde alface, amarelo, castanho, cinzento,
creme, preto e branco creme;
• Ciano: Combina com vermelho, cinzento, castanho, laranja, rosa, branco e amarelo;
• Preto (universal): Combina com todas as outras cores, especialmente com laranja,
rosa, verde alface, branco, vermelho ou amarelo.
PENSAMENTOS FINAIS
A cor é um conceito complicado para dominar, especialmente na era digital. As dicas
supracitadas facilitarão o trabalho de encontrar as cores certas. A melhor maneira de aprender
a criar esquemas de cores impressionantes é praticar.
FONTES
“Um excelente designer sabe trabalhar com texto, não apenas como conteúdo, ele trata o
texto como uma interface com o Utilizador.”
O texto é Interface com o utilizador. E, claro, a tipografia é muito mais do que apenas um tipo
de letra ou o texto numa aplicação. Trata-se de equilíbrio, posicionamento, hierarquia e
estrutura. A escolha do tipo de letra pode ser um grande problema.
Então, se voltarmos para os formatos raw, o que estamos exatamente a procurar numa
interface consistente? De que forma este formato é adequado para uma interface? Tobias
Frere-Jones, designer americano de renome disse uma vez: “Todo o texto precisa de tipos de
letra legíveis. Mas especialmente nas interfaces, os nossos olhos precisam de fontes que
colaborem em vez de resistir.”
Estas palavras fazem muito sentido, sabendo que a clareza é a principal característica da IU. A
citação de Frere-Jones sublinha a ideia de que, acima de tudo, precisamos de um tipo de letra
claro. Como uma interface é principalmente tipo, precisamos ter certeza absoluta de que a
fonte não apresenta fricção entre o produto e o utilizador.
Observem estes dois tipos de letra:
12. ANO
32
Clarendon é lindo. Mas, em toda a sua brilhante glória, grita

por atenção e pode distrair os utilizadores de tarefas e
objetivos. Na IU, queremos que o tipo de letra passe
despercebido e o utilizador faça as coisas. Roboto pode
parecer um pouco impessoal, mesmo chato à primeira vista,
mas é, de longe, uma escolha melhor.
Adicionalmente, numa boa IU deve ser utilizado um tipo de letra extremamente claro quando
utilizado em tamanhos de letra pequenos. Verifique a página inicial do seu smartphone. O
texto apresenta facilidade de leitura. Repare no Calendário iOS:
Figura 53 - Tipos de letra (calendário google)
À medida que o texto fica muito pequeno, deve procurar uma fonte com uma altura extra.
Dito isto, agora quase feche os olhos. Qual destes tipos de letra nos botões é mais legível?
A comunidade internacional fala

muito sobre Helvetica como uma
fonte de interface. Quando a
Apple lançou a Yosemite, a
comunidade de design comentou
fortemente a mudança. A
interface não ficou muito legível,
especialmente em tamanhos de
fontes pequenas em telas de
baixa resolução. Ficou pouco
clara.
12. ANO
33
Feche os olhos novamente e experimente olhe para a imagem seguinte:
Não há necessidade de
argumentar, Helvetica não é a mais
legível. No entanto, é notável o
desempenho do Ubuntu na captura
do ecrã. Especialmente, um tipo de
letra de interface deve fornecer
uma distinção suficiente entre seus
vários caracteres. Pense em
senhas, nomes de utilizador,
tabelas de dados, listas suspensas.
A interface deve exibi-los de forma
inequívoca.
Helvética sofre a mesma falta de clareza. Erik Spiekermann fez uma comparação visual entre
DB Sans e Helvetica que exemplifica isso mesmo. Deixe-me fazer o mesmo com Helvetica e
Fira Sans. Se fechar os olhos, provavelmente verá como os pares de caracteres em Neue
Helvetica se misturam muito facilmente. Confuso vs legível:
Agora que sabemos

o que procurar, resta
saber, naturalmente,
o que é uma boa
fonte para a IU? A
seguir vamos ver
algumas opções.
Primeiro há Lucida Grande. Desenhada por Charles Bigelow e Kris Holmes, foi usado em toda a
IU do Mac OS X de 1999 a 2014. Foi otimizada em 2013. É quase idêntica a Lucida Sans, mas
alguns caracteres foram adaptados para parecerem mais claros em tamanhos de fontes
pequenas no ecrã.
12. ANO
34
Embora a diferença entre um i maiúsculo e um L minúsculo possa ser mais difícil de distinguir
com pequenos tamanhos de fonte, ainda funciona.
Verdana, tal como a Geórgia, foi projetada por Matthew Carter para a Microsoft, e lançada em
1996. Foi sugerido manualmente até se tornar muito legível em tamanhos pequenos nos ecrãs
dos computadores. Foi dada especial atenção para enfatizar as distinções entre caracteres de
forma semelhante.
O Fira Sans é o tipo de letra do Firefox OS. Foi desenhado por Erik Spiekermann e Ralph Du
Carrois para o Mozilla e lançado em 2013. Recebeu uma grande atualização em 2014. O Fira
está intimamente relacionada ao Meta de Spiekermann, que é usado como tipo de letra da
Mozilla Foundation.
Roboto foi projetado por Christian Robertson para a Google. Ele substituiu o Droid como fonte
do sistema Android em 2011. Roboto estava sujeito a debate quando foi lançado inicialmente,
12. ANO
35
mas desde então foi refinado corrigindo extensivamente muitos "erros" anteriores. Roboto foi
"criado especificamente para os requisitos da IU e ecrãs de alta resolução".
O Ubuntu foi projetado por Dalton Maag e lançado em 2010 como o tipo de letra padrão do
sistema operacional Ubuntu. O Ubuntu foi desenvolvido principalmente para uso em
monitores. Provavelmente tem o aspeto mais distinto de todos as outras mencionadas aqui.
Outras notáveis incluem Segoe UI, introduzidas no Windows Vista e posteriormente refinada.
San Francisco, o tipo de letra do sistema para o próximo Apple Watch. Ainda, Droid Sans e
Open Sans, Aller Sans, Source Sans Pro, Azuro, PT Sans ...
Todos estes tipos de letra definitivamente não explodem com personalidade ou criatividade,
mas estão repletos de clareza. E no design da interface com o utilizador, é bom.
ERROS A EVITAR
• Cores berrantes e misturas de muitas cores
• Ecrãs repletos de informação textual e gráfica (confusão)
• Humor vulgar ou animações repetitivas
• Sons retumbantes (ex: sinos) que ocorrem quando o utilizador faz clique num botão
• Molduras grossas e preenchidas com vários padrões
• Citações famosas ou citações de filmes e/ou best-sellers
• Estruturas de navegação que exigem mais do que dois cliques do rato para sair da
aplicação
12. ANO
36
DESIGN TÉCNICO
Atividade geralmente realizada pelos membros da equipa cuja especialidade é a área da
programação ou a área da utilização de sistemas de autoria multimédia
Consiste na atividade pela qual se especifica a arquitetura de software que servirá de base à
futura aplicação multimédia interativa
A sua realização depende fortemente do tipo de aplicação que se pretende desenvolver
Exemplo:
• Apresentações multimédia dispensam o design técnico pois a arquitetura de software é

simples
• Aplicações comerciais complexas – é necessário
• Produz um documento que se integra no guião da aplicação a produzir durante a fase
de design do projeto multimédia, juntamente com os mapas de navegação e os
storyboards e interface do utilizador
• Este documento descreve o modo como a aplicação será desenvolvida durante a
produção e deve incluir as seguintes especificações:
o Definir a plataforma de desenvolvimento em termos de hardware
o Especificar as ferramentas de autoria de conteúdos a utilizar durante a
produção, bem como os formatos e conteúdos
o Especificar o ambiente de desenvolvimento a utilizar
o Descrever os módulos de software que constituem a aplicação
PRODUÇÃO
É nesta fase que a aplicação ganhar forma e vida. Os documentos produzidos nas fases
anteriores (guião, storyboards, mapas de navegação, design técnico) constituem o manual de
instruções a ser seguido
ATIVIDADES DE AUTORIA
Desenvolvimento dos conteúdos – criação e aquisição de todos os conteúdos MULTIMÉDIA
(textos, OBJETOS, gráficos, ícones, imagens, sequências de vídeo e de áudio e sequências
animadas); edição ou alteração dos conteúdos
Desenvolvimento do código da aplicação – autoria ou programação da aplicação envolvendo a

construção da estrutura da aplicação, a elaboração dos ecrãs, a importação de todos os
conteúdos para os ecrãs, a escrita de scripts para as ações associadas aos elementos interativos
e à interface do utilizador, e a verificação do funcionamento da interface e das escolhas
concebidas ao nível da navegação
ORGANIZAÇÃO TEMPORAL
Ciclo alfa – primeira implementação completa do guião, iniciando-se a autoria de conteúdos e
a autoria da aplicação
12. ANO
37
Ciclo beta – modificações necessárias – funcionalidade, conteúdos, interface Ciclo gama –

finalização do processo
CICLO ALFA
Verificar:
• Quantidade de computadores disponíveis para as tarefas e teste da aplicação

• Revisão das características dos computadores face às ATIVIDADES a desenvolver
• Implementação de sistema de backup
• Desenvolvimento de um sistema de organização de ficheiros que permita identificar
sem ambiguidade e armazenar em disco todos os ficheiros a desenvolver
• Verificação das escolhas efetuadas ao nível dos vários formatos gráficos, de texto, de
imagem, de áudio, de vídeo e de animação em que serão armazenados todos os
ficheiros.
• Escolha e verificação da versão e funcionalidades das ferramentas de software para a
autoria de conteúdos
• Escolha e verificação da versão e funcionalidades do sistema de autoria ou ambiente de
programação, a utilizar na autoria da aplicação
Esta versão deve integrar a totalidade da interface do utilizador, definida no guião, e deve
permitir utilizar todas as suas funcionalidades. Deve, também, conter alguns conteúdos
Ex: o guião pode especificar uma centena de imagens com qualidade fotográfica, duas
centenas de artigos textuais, duas dezenas de sequências de vídeo, cinquenta clips sonoros,
etc. A versão alfa deve apenas conter um subconjunto destes conteúdos, permitindo a
demonstração do aspeto final da aplicação
Neste ciclo dá-se início o desenvolvimento e discussão de outras componentes do produto

final:
• Documentação (manual do utilizador e outros documentos)

• Tipos de suporte em que a aplicação será distribuída; material adicional que será
incluído e o aspeto que os suportes deverão apresentar
• Métodos de avaliação que serão aplicados para conduzir os testes da aplicação junto
dos utilizadores finais bem como a lista das funcionalidades que deverão ser
avaliadas durante os testes
CICLO BETA
• Revisão completa do design da aplicação
• Realização dos primeiros testes com utilizadores
• Realização das últimas modificações ao design da aplicação
CICLO GAMA
• Encerra a fase de produção do projeto
• Completam-se a autoria de conteúdos e aplicação
• Completa-se o manual do utilizador e outros documentos de apoio, bem como os
pacotes e outros elementos que conterão o suporte físico escolhido
12. ANO
38
• Verificação de todos os elementos multimédia

• Verificação ortográfica e gramatical dos artigos textuais; correção de dados numéricos,
verificação da resolução e definição de imagens, ícones e outros objetos, verificação das
transições e efeitos de áudio e vídeo, etc.
TESTE E VALIDAÇÃO
Verificar se a aplicação final corresponde aos objetivos traçados; se funciona corretamente nas
plataformas a que se destina e se vai de encontro às necessidades do cliente ou do utilizador
final
Verificar o funcionamento de cada um dos elementos interativos, seu funcionamento em

conjunto e cada um dos possíveis percursos
Necessário manter noção das prioridades e da severidade dos erros
CARACTERÍSTICAS E PRIORIDADES DOS ERROS

• Falhas de design e sugestões – nível da interface e sugestões relativas ao
posicionamento e estilo de hotspots (zona sensível), disposição dos conteúdos nos ecrãs
• Erros de conteúdo – erros de escrita, de conceito, problemas de formatação dos
conteúdos e na sua qualidade
• Defeitos de software – erros técnicos quando se executa a aplicação
ERROS – PRIORIDADES
• Severidade do erro – escala de 1 (pouco severo) a 10 (muito severo)
• Obscuridade do erro – escala de 1 (muito obscuro) a 10 (muito óbvio)
• Dificuldade de correção – escala de 1 (muito difícil de corrigir) a 10 (muito fácil de
corrigir)
LISTA DE PRIORIDADES
Baixa – erro muito obscuro, com baixa severidade e com alta dificuldade de correção
Alta – erro pouco obscuro, com alta severidade e com baixa dificuldade de correção
TIPOS DE TESTES
• Módulos de software
• A realizar pela equipa de programação ou autoria
• Integração do software
• Verificar modo de funcionamento da aplicação. A realizar por pessoas que não fizeram
parte da equipa de construção da aplicação
• Compatibilidade
• Verificar a instalação da aplicação em vários tipos de plataformas de HW(Hardware) e
SW(Software)
• Facilidade de uso da interface do utilizador
• Identificar se a interface é simples, acessível e se os controlos desempenham as funções
que seriam de esperar
12. ANO
39
DISTRIBUIÇÃO
• Criação de uma versão executável da aplicação
• Criação de uma aplicação de instalação
• Cópia para o suporte de distribuição
• Distribuição aos utilizadores finais utilizando os canais apropriados
12. ANO
40

02 Multimedia Interfaces

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

02 Multimedia Interfaces

Enviado por

Direitos autorais:

Formatos disponíveis

CURSO CIENTÍFICO-TECNOLÓGICO DE

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Serve o presente manual como guia de apoio na

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Experiencia do utilizador ......................................................................................................... 19

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Figura 43 - Circulo cromático ...................................................................................................... 28

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

EXERCÍCIO| Resolva a ficha de exercícios N03

1. Normalmente consiste num conjunto de passos.

ATENÇÃO: Caixas como esta contêm informação importante, para não

NOTA: Notas, Dicas, fora do contexto deste manual

Outras convenções no texto:

• Novos termos e palavras importantes são representadas a negrito e itálico quando

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Multimédia é um termo extensivamente usado mas de definição imprecisa. A etimologia

Tecnologias Multimédia – Conjunto de técnicas e áreas tecnológicas específicas que

Aplicações Multimédia – Conjunto de funções que suportam a distribuição de um

Rede Multimédia – Rede de comunicação de dados com uma performance adequada

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

O impacto da Multimédia também está diretamente relacionado com os aspetos cognitivos e

…porque intervém em vários canais. Assim, age sobre:

Significa também que existe o risco de sobrecarregar o utilizador com informação!

É geralmente afirmado que a aquisição de informação se processa:

• 80% através da visão

O nível de retenção da informação é de...

• 20 a 30% do que se vê ou ouve

TIPOS DE INFORMAÇÃO MULTIMÉDIA

• Continua: Baseada no Tempo

Figura 1 - Tipos de informação multimédia

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Naturalmente existem algumas desvantagens, relacionadas com a distorção do sinal

A utilização de informação no formato digital exige a conversão de sinais analógicos

Informação em Formato Digital é a sequência de valores discretos e com precisão limitada.

Figura 2 - Digitalização da informação

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

O desenvolvimento da Multimédia está diretamente ligado:

• Aos recentes avanços tecnológicos ao nível de dispositivos (captura, processamento,

Uma possível taxonomia (categorização) de aplicações multimédia baseia-se na diferença entre

Figura 3 - Taxonomia aplicação multimédia pessoa/pessoa

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Figura 4 - Taxonomia aplicação multimédia pessoa/sistema

o Conversação – aplicações correspondentes à interação entre humano e humano ou

Finalmente, outra taxonomia proposta por Gupta, é a seguinte:

o Aplicações centradas no conteúdo – editoras e documentação (enciclopédias,

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

• Numa utilização passiva a sequência e natureza da

• Uma utilização interativa permite personalização quer

Um sistema pode ser multimédia sem ser

A utilização de diferentes sentidos, por exemplo, visão

Figura 6 - Utilização multissensorial

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

Conceito estendido a documentos multimédia. A hipermédia é hipertexto com uma diferença,

FASES DE DESENVOLVIMENTO DE UM PROJETO MULTIMÉDIA

INFORMÁTICA E TECNOLOGIAS MULTIMÉDIA

• Consiste na criação da aplicação multimédia interativa

Na fase de design produz-se o guião cujos objetivos são:

• Identificar a estrutura da aplicação, isto é, o esquema de navegação

DESIGN DA ESTRUTURA DA APLICAÇÃO

O mapa de navegação cumpre os seguintes objetivos:

• Fornece um índice gráfico do fluxo lógico da interface interativa