Interface e interação TEMA1

Prévia do material em texto

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 1/68
Objetivos
Módulo 1
Interface e o design de interação
Reconhecer a atividade de design de interação e os principais dispositivos de interação.
Acessar módulo
Módulo 2
Plataformas
Analisar os requisitos de cada plataforma e as posturas requeridas de aplicativos.
Acessar módulo
Módulo 3
Interface e interação
Prof.ª Flávia Garcia de Carvalho
Descrição
A área de atuação do design de interação e suas diferenças quanto a outras áreas de atuação. Recomendações,
heurísticas e procedimentos para a projeção de interfaces de usuários.
Propósito
Entender o real propósito do trabalho do designer de interação é essencial para a qualificação do profissional, o seu
posicionamento no mercado e a sua atuação em equipes de trabalho. Adicionalmente, dominar as principais questões
que devem ser levantadas antes de se iniciar um projeto de criação de interface confere eficiência ao processo de
trabalho e garante que o profissional alcance os objetivos do projeto.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 2/68
Funcionalidade, usabilidade e acessibilidade
Diferenciar funcionalidade, usabilidade e acessibilidade, além de suas recomendações em projetos de interface.
Acessar módulo
Módulo 4
Analogias, abstrações, metáforas, métodos e técnicas
Aplicar as metáforas de interface e os métodos e técnicas de projeto de interface.
Acessar módulo
Introdução
Hoje em dia, diariamente usamos dispositivos, como smartphones ou computadores, para executar todo tipo de tarefa, desde o trabalho, nossas
obrigações como cidadãos e o acesso a produtos e serviços até o simples contato com nossos entes queridos. Precisamos interagir todos os dias
com aplicativos e softwares usando interfaces, que estão à vista nas telas de nossos dispositivos.
Atividades que, no passado, eram feitas por atendimento presencial mediante o preenchimento de formulários em papel ou graças a curtos (ou, o
que é pior, longos) telefonemas foram obrigatoriamente convertidas para soluções digitais. Tais soluções obrigaram essas pessoas a usar
aplicativos e softwares com interfaces para interação.
Você já teve dificuldade ao tentar utilizar um aplicativo, considerando-o “mal feito”? Sentiu-se perdido, sem saber como fazer uma tarefa?
Provavelmente, sua resposta é sim!
Com o grande número de aplicativos e sites que inundou o mercado de forma obrigatória, alguns realmente não apresentavam boas interfaces. Elas,
afinal, deveriam ajudar o usuário a interagir de maneira fácil – e não o contrário.
É importante que essas interfaces sejam projetadas com um bom design de interação! Por conta disso, neste conteúdo, falaremos sobre elas,
explicando a importância de seu design e de sua capacidade de interação.
1

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 3/68
Interface e o design de interação
Ao final deste módulo, você será capaz de reconhecer a atividade de design de interação e os principais dispositivos de interação.
Ligando os pontos
Você sabe o que é design de interação? Quais as competências de um profissional dessa área?
Para entendermos melhor essa área profissional, vamos simular uma situação em uma empresa fictícia de desenvolvimento de aplicativos.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 4/68
Imagine que você começou a trabalhar recentemente em uma empresa de desenvolvimento de aplicativos. É uma empresa antiga, que começou há
20 anos e naquele início contratava web designers para criarem sites. Desde então, a empresa já passou por muitas mudanças para acompanhar as
transformações do mercado e recentemente contratou você como designer de interação.
Hoje, dificilmente a empresa recebe um pedido para “criar um website”. Na maioria das vezes os pedidos são para a criação de um aplicativo para
dispositivos móveis adaptando funcionalidades de um site existente ou então são projetos maiores que envolvem a criação de um site e também o
desenvolvimento de um aplicativo para dispositivos móveis.
Atualmente, a empresa se apresenta como uma agência especializada em desenvolvimento de aplicativos móveis, plataformas Web e produtos
digitais, sempre centrados no fator humano e analisando sempre qual será o fluxo mais intuitivo para o usuário.
Você participa da sua primeira reunião com colegas de trabalho e um cliente, para os primeiros passos do planejamento de uma solução digital.
Junto com o cliente, a equipe vai começar a levantar o objetivo da nova solução digital, o público alvo, quais atividades que esse público deve
desempenhar, em quais contextos essas atividades serão desempenhadas e as possíveis tecnologias que serão envolvidas.
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?
Questão 1
Como designer de interação nessa equipe, todas essas informações que estão sendo levantadas são importantes para o seu trabalho? Por quê?
A
Sim, porque essa é a melhor oportunidade para descobrir as cores preferidas do cliente, que serão usadas como paletas de
cores do projeto.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 5/68
Questão 2
Nesta reunião, você terá a oportunidade de entender melhor o escopo do projeto para começar o planejamento do projeto de interface do novo
aplicativo. Considere algumas informações que podem ser obtidas com o cliente:
I. Mostrar templates de diversas interfaces e pedir para o cliente escolher suas preferidas.
II. Do que se trata o negócio da empresa do cliente e que serviços ela atualmente fornece.
III. Quem são os concorrentes ou serviços similares aos que a empresa do cliente fornece.
IV. Qual seria o diferencial do serviço que o cliente pretende fornecer em relação a seus concorrentes.
Em sua visão de designer de interação, alinhado com a maneira que a empresa em que trabalha se posiciona no mercado, escolha as
informações que devem ser levantadas com o cliente.
B
Não, pois nas reuniões com cliente são abordados todos os temas possíveis, e nem todos interessam a todas as
especialidades de cada membro da equipe.
C
Sim, porque você criará todo o aplicativo, enquanto os demais membros da equipe fazem parte do setor administrativo da
empresa e trabalharão para garantir os insumos necessários.
D
Sim, porque o design de interação é uma atividade que tem por fim projetar produtos interativos que facilitam a comunicação
e a interação das pessoas. O foco está sempre no usuário final.
E
Não, pois essa reunião é somente uma formalidade e todas as informações necessárias serão levantadas depois, por outra
equipe.
Responder
A I, II e III
B II, III e IV
C I, III e IV
D I e III
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 6/68
Questão 3
Você acredita que o cliente deve estar sempre a par da maneira com que a equipe trabalha e das etapas do projeto? Justifique sua resposta.
Digite sua resposta
Exibir solução
Design de interação
Não foram somente as interfaces que invadiram o mercado. Você já deve ter esbarrado em termos, como “design de interação”, “design de
interface”, “web design”, “UX”, “UI” e “IxD”.
Todos eles se relacionam de alguma forma com essa questão. Conheceremos o uso desses termos para podermos entender melhor o mercado de
design de interação.
Conceitos iniciais sobre design de interação
Primeiramente, vamos entender o significado de design. Trata-se de um termo muito popular, sendo aplicado em muitos lugares e contextos.
Embora muitas pessoas chamem de "design" belos trabalhos visuais, ele definitivamente não é sinônimo de "desenho".
O design está relacionado com a atividade de projetar soluções para atingir objetivos, os quais resultam em um
produto com forma e funcionalidade.
O designgráfico é uma atividade de criação ou aplicação de soluções visuais para itens a serem produzidos pela indústria gráfica. Já em outros
exemplos de design, as soluções projetadas não são necessariamente visuais, como é o caso do design instrucional, cujo propósito é criar materiais
didáticos que atinjam objetivos pedagógicos de forma sistemática.
O que é então um design de interação?
Trata-se da atividade de projetar produtos interativos que facilitam a comunicação e a interação das pessoas.
Talvez você já tenha ouvido falar em design de sistemas interativos, design de interface do usuário, projeto de software, web design, design centrado
no usuário, design de produto e design de experiência. Saiba que o termo “design de interação” aparece em todos esses assuntos.
E I e IV
Responder
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 7/68
O objetivo do design de interação é entregar uma interface com a qual o usuário:
Possa interagir de maneira fácil.
Sinta-se seguro.
Consiga realizar as tarefas.
Mas o design de interação significa criar interfaces bonitas? Na verdade, ele não é só isso... vamos analisar melhor a seguir!
E as siglas UX, UI e IxD?
Provavelmente você já deve ter visto essas siglas em algum lugar. De uma forma ou de outra, elas também se relacionam com o design de
interação.
IxD: Considerado um sinônimo de design de interação.
UX: Design de experiência do usuário.
UI: Design de interface.
Talvez você já tenha ouvido falar em UX como sinônimo de design de interação, porque realmente existe uma sobreposição entre essas duas
atividades. A verdade é que o UX está relacionado à projeção da experiência de usar um produto, o que vai além da interação, mas a maior parte
disso envolve justamente o design de interação.
O UX é uma grande categoria guarda-chuva, uma vez que engloba o design de interação e muitas outras atividades relacionadas à experiência do
usuário.
Já o UI está mais relacionado com o trabalho de selecionar os elementos certos da interface, como botões, campos de texto e listas. A verdade é
que ele também está relacionado ao design de interação, embora o foco do UI esteja mais voltado para a interface do que para a interação, tendo
um caráter mais material e gráfico.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 8/68
Ilustração das semelhanças e das diferenças entre UX, UI e IxD.
De forma resumida, podemos dizer que o design de interação (ou IxD) está na sobreposição entre o design de experiência de usuário (UX) e o de
interface de usuário (UI).
Interface x Interação: Relacionamento e diferenciação
O que é interface?
Originalmente, uma interface configura uma superfície de contato entre coisas diferentes. Se você colocar água e óleo em um copo, a água irá para
a parte de baixo; o óleo, para a de cima. A superfície de contato entre os dois é chamada de interface.
Aqui, porém, empregaremos o termo “interface” em outro contexto: o uso de ferramentas. No dia a dia, nós as utilizamos a todo momento para
possibilitar ou facilitar nossas tarefas. Essas ferramentas podem ser analógicas ou digitais.
Mas o que acontece quando se trata de uma ferramenta digital, como um aplicativo instalado no celular? Você, que é feito de “carne e osso”, não vai
conseguir interagir diretamente com o aplicativo, que se trata, afinal, de um software de computador!
Para interagir com o aplicativo, portanto, você vai precisar de uma interface. Por terem naturezas tão diferentes, pessoas e computadores não
podem se conectar diretamente; para isso, a interface, elemento que possibilita que duas coisas de naturezas diferentes se comuniquem, se faz
Exemplo
Quando usa um abridor de latas, você pode interagir diretamente com ele, manipulando-o para abrir a lata.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 9/68
necessária.
Mas não se engane: nem toda interface é criada para possibilitar a interação entre pessoas e softwares. Existem interfaces entre máquinas
diferentes, por exemplo. Por isso, também é usado o termo interface do usuário para especificar as interfaces entre as pessoas e um aplicativo.
Muitas vezes, a imagem de uma interface é chamada de “tela”, o que ocorre quando alguém opina que achou uma tela bonita ou com um layout
atraente. Trata-se também de um significado para tela.
Fazendo uma analogia com as obras de artes visuais, algumas pessoas se referem a uma obra como uma “tela”. No entanto, a tela é o suporte em
lona da pintura que o artista criou. Em uma loja que vende insumos para pintura, há “telas em branco” prontas para serem adquiridas por pintores.
Seguindo essa analogia, vamos considerar a tela um dispositivo de interação, o suporte que exibirá a interface.
A interação ocorre por meio da interface
Enquanto a interface é um “lugar” para a interação entre pessoas e aplicativos, a interação constitui um processo comunicacional entre as pessoas
e os computadores.
Exemplo
Em um computador em que esteja instalado o sistema operacional Windows, a área de trabalho é uma interface, pois ela mostra os
comandos do sistema e apresenta ao usuário todas as opções de ações que ele poderá realizar usando o computador.

Comentário
Não confunda isso com o significado de tela que adotaremos aqui: quando nos referirmos à tela de um aparelho, estaremos tratando da
parte física (também chamada de display). Trata-se de um dispositivo de interação que exibe a imagem da interface e, em muitos casos, é
sensível ao toque (touch screen), além de possibilitar a entrada de comandos. Veremos mais sobre esse assunto em breve quando
falarmos sobre os dispositivos de interação.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 10/68
Área de trabalho do Windows 95.
No exemplo da interface da área de trabalho do Windows, a interação do usuário acontece com o preenchimento de senhas e ao “clicar” em
imagens de botões na tela – que, principalmente em suas primeiras versões, representavam pastas de papel e gaveteiros de arquivos – os quais
permitem acessar aplicativos ou conteúdos apresentados em janelas.
Nos smartphones, a interação ocorre quando nós tocamos na tela para:
Digitar senhas ou fazer reconhecimento de nossa impressão digital.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 11/68
Clicar em imagens de botões para acessar aplicativos.
Deslizar os dedos para “arrastar” janelas de aplicativos para os lados.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 12/68
Por que o design de interação é tão importante para criar a interface?
A interface deveria ajudar nossa comunicação com o aplicativo. No entanto, você provavelmente já teve alguma dificuldade durante sua interação
com uma interface.
O papel da interface não é ser bela. Ela não deve ser pensada só para deixar um sistema bonito: seu principal
objetivo é ajudar o usuário a executar uma tarefa.
Quando está interagindo com a interface, o usuário deve se sentir seguro – e nunca confuso ou perdido. Além disso, ele tem de ser capaz de
executar sua tarefa da forma mais simples possível.
Tipos de interface
Atualmente, existe uma grande diversidade de interfaces. Rogers, Sharp e Preece (2013) criaram uma lista com 20 tipos de interface:
Tipo de interface Veja também
1. Baseada em comando
2. WIMP e GUI
3. Multimídia WIMP e web
4. Realidade virtual Realidade aumentada e mista
5. Visualização da informação Multimídia
6. Web Móvel e multimídia
7. Eletrônicos de consumo e eletrodomésticos Móvel
8. Móvel Realidade aumentada e mista
9. Fala
10. Caneta Compartilhável e toque
11. Toque Compartilhável e gestos
12. Gestos Tangível
13. Háptica Multimodal
14. Multimodal Fala, caneta, toque, gestos e háptica
15. Compartilhável Toque16. Tangível
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 13/68
Tipo de interface Veja também
17. Realidade aumentada e mista Realidade virtual
18. Vestível
19. Robótica
20. Cérebro-computador
Tabela: tipos de interface.
Essa tabela foi desenvolvida como um catálogo pelas autoras para que elas organizassem preocupações de projeto de acordo com esses tipos de
interface. Tais tipos foram listados por elas na ordem em que foram desenvolvidos: o tipo “Baseado em comando” é o mais antigo; o tipo “Cérebro-
computador”, o mais recente (sem muito rigor, pois se trata de uma classificação feita por conveniência).
Os critérios para a distinção entre tipos também são variados: você pode notar que parte deles se diferencia de acordo com o dispositivo de
entrada/saída (Fala e caneta), enquanto outros são baseados na plataforma (Móvel e eletrônicos). É possível ainda que um mesmo produto apareça
em mais de uma categoria.
WIMP é a forma predominante no mundo dos computadores pessoais há décadas. Ele se baseia no conceito de manipulação direta em uma área
gráfica na qual existem janelas, imagens e ícones com os quais o usuário interage por meio de um apontador direcionado para o lugar escolhido a
fim de arrastar, clicar, marcar e cortar, entre outras ações. O dispositivo de interação mais popular que direciona o apontador é o mouse.
Já o GUI consiste em um modelo de interface do usuário que permite a interação por elementos gráficos. A verdade é que uma WIMP também é
uma GUI.
Dispositivos de interação
Para acionarmos os controles na interface, precisamos usar dispositivos de interação que fazem parte do hardware.
Qual é a diferença entre dispositivos de entrada e saída?
Dispositivos de interação podem funcionar como dispositivos de entrada, de saída ou os dois ao mesmo tempo.
Exemplo
Um smartphone figura na categoria Móvel e, ao mesmo tempo, na categoria Toque.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 14/68
Dispositivos de saída
São responsáveis por exibir ou comunicar informações do computador para o usuário. Os principais exemplos são monitores, impressoras,
caixas de som e óculos de realidade virtual.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 15/68
Teclados: os mais tradicionais
Entre os dispositivos de interação apresentados aqui, o teclado é, sem dúvida, o mais antigo e tradicional – e ele está longe de tornar-se obsoleto!
Sua origem remonta ao período anterior ao do advento dos computadores: ela reside, na verdade, na máquina de escrever do século XIX, que já
adotava o formato QWERTY.
Teclados de diferentes épocas.
Nos primeiros PCs, a forma de interação primordial era a inserção de comandos de texto digitados no teclado para que a máquina executasse
tarefas. Ainda hoje, os atalhos de teclados são importantes para permitir que seus usuários executem tarefas de maneira ágil.
Mouse: a primeira revolução da interação
A chegada dos mouses ao mercado nos anos 1970 representou uma grande evolução das formas de interação, pois seus comandos eram bastante
intuitivos se comparados com os comandos de textos, uma vez que emulavam movimentos mais naturais do corpo.
Hoje em dia, eles continuam sendo utilizados amplamente nos desktops.
Entre os jogos digitais, muitos jogadores preferem jogar usando o mouse e o teclado em vez do gamepad. Apesar de haver especulações sobre seu
fim, eles estão longe de se tornarem obsoletos!
Dica
Nos smartphones, as telas sensíveis ao toque podem ser consideradas tanto dispositivos de entrada quanto de saída.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 16/68
Controles de videogame
Tais controles são usados principalmente em consoles de videogame, mas também podem ser empregados como um periférico de um PC.
Diferentes dos mouses, cuja função principal é posicionar o cursor na tela, eles são projetados principalmente para comandar movimentos nela.
Os controles de jogo têm as seguintes vantagens:
São ergonômicos.
São projetados para serem manipulados com as duas mãos.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 17/68
Não demandam apoio sobre uma mesa.
Telas: os dispositivos mais usados
Inicialmente, as telas eram somente dispositivos de saída. Isso só mudou com a criação de telas sensíveis ao toque (touch screen), que invadiram o
mercado.
Há vários tipos diferentes de tela touch screen, cada uma com uma tecnologia distinta. As mais comuns são as telas capacitivas, as quais, após
serem tocadas com os dedos, reagem a eles mediante a condução de eletricidade. Hoje em dia, essas telas estão amplamente difundidas pelos
smartphones.
Controle remoto
Os controles remotos são mais popularmente usados para as TVs. A partir dos anos 1970, começaram a surgir aqueles com comunicação via
infravermelho. Esse tipo é o mais frequente até hoje, apesar de já haver controles remotos que funcionam via bluetooth.
Controles de captura de movimento
O uso mais popular para os controles de captura de movimento está nos videogames, pois eles renovaram os jogos como uma forma de capturar os
movimentos de todo o corpo.
O Nintendo Wii produziu uma grande inovação ao lançar o Wii Remote, um dispositivo apontador portátil que detecta o movimento em 3D.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 18/68
Um par de controles de captura de movimento Wii Remote em uso.
Já o Kinect da Microsoft contém câmera e projetor de infravermelho para a captura do movimento em 3D e em tempo real. Ele também possui
microfone para comando de voz.
Duas pessoas dançam e têm seus movimentos capturados pelo Kinect.
Realidade virtual
Os dispositivos de realidade virtual criam a sensação de presença em um ambiente virtual com gráficos 3D ou imagens em 360°.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 19/68
Smart speakers
Dispositivos de entrada e saída conectados à internet, os smart speakers são capazes de realizar uma série de tarefas por meio de comandos de
voz do usuário.
Exemplo de smart speaker.
Esse tipo de dispositivo está diretamente relacionado aos conceitos de casas inteligentes e de internet das coisas (IoT).
Os smart speakers são compostos de:
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 20/68
Microfone para recebercomandos de voz.
Inteligência arti�cial.
Caixa de som para o aparelhodar retorno ao usuário.
Interface e design de interação
Veja o que é design de interação e o conceito de interface.
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.


12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 21/68
Módulo 1 - Vem que eu te explico!
IxD, UX e UI, que áreas são essas?
Módulo 1 - Vem que eu te explico!
Interface ou tela?
Questão 1
Entre as alternativas a seguir, marque a que melhor define a atividade de design de interação.

Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
A Atividade de desenhar telas atraentes para o usuário a fim de valorizar a marca.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 22/68
Questão 2
Entre as alternativas a seguir, aponte a que melhor define uma interface para o design de interação.
B Atividade que usa softwares, como o Figma, o Adobe XD ou o Sketch.
C Sinônimo de UX, que é uma atividade de desenvolvimento de experiências de usuário.
D Atividade de projetar interfaces de produtos que facilitam a interação das pessoas.
E Sinônimo de UI, que é somente uma atividade de designde interface de usuário.
Responder
A Layout das telas que visualizamos em um aplicativo.
B Fina película entre a água e o óleo.
C Elemento que possibilita às pessoas “se comunicar” com computadores.
D Tela sensível ao toque (touch screen) dos smartphones.
E Periféricos de computadores.
Responder

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 23/68
2
Plataformas
Ao final deste módulo, você será capaz de analisar os requisitos de cada plataforma e as posturas requeridas de aplicativos.
Ligando os pontos
Você sabe o que são plataformas? Como diferentes plataformas influenciam a interface e a interação?
Para entendermos melhor o assunto, vamos retomar o case da empresa fictícia de desenvolvimento de aplicativos.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 24/68
Você é um designer de interação e durante a reunião da equipe com o cliente, você pôde ver que a empresa do cliente já possui um grande site com
muitas informações sobre a empresa e os serviços que ela presta.
Você viu que hoje o único lugar onde os usuários interagem é no website da empresa, pois não há outras formas disponíveis.
O site possui um menu com muitas abas, muitas páginas com textos longos e detalhados, que refletem a estrutura organizacional da empresa,
como em um organograma.
No contexto da interface e da interação, vamos definir que as plataformas são um tipo de sistema composto por hardware e sistema operacional,
que define como pode ser usado e quais softwares ou aplicativos são compatíveis.
Nesse exemplo de website, ele foi projetado para as plataformas que são desktops ou notebooks com sistema operacional e navegador de Internet.
Mais especificamente, o website pode ser usado em PCs com o sistema operacional Windows e navegador que pode ser o Microsoft Edge, Google
Chrome, Opera, Firefox etc., e também em Macs da Apple com sistema operacional macOS e navegador Safari ou Chrome, Firefox etc.
Dessa forma, a interface deste site foi planejada para usuários interagindo usando os dispositivos de interação teclado e mouse (ou touchpad, no
caso do notebook).
Como os smartphones possuem navegadores de Internet, é possível abrir o site em um smartphone, mas o site claramente não foi projetado para
ser visualizado assim.
A partir da reunião com o cliente, ficou definido que seria criado um aplicativo para dispositivos móveis com funcionalidades específicas para os
clientes da empresa acessarem seus serviços de forma mais rápida e fácil. Junto com a sua equipe, você vai projetar uma interface para esse novo
aplicativo.
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?
Questão 1
Analisando as características da interface do site, além de concluir que ele foi desenvolvido para plataformas de desktops e notebooks, você
também pode perceber que:
I. a interface do website não foi projetada de maneira centrada na experiência do usuário, mas sim na estrutura da empresa.
II. no início da concepção do projeto, também é fundamental saber que plataformas os usuários usarão para interagir com a interface.
III. provavelmente é um website antigo, que com certeza vai requerer um redesenho da marca e identidade visual.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 25/68
IV. como é possível abrir o site usando-se um smartphone, parece desnecessário criar uma versão própria só para dispositivos móveis como
plataforma.
Em sua visão de designer de interação, alinhado com a maneira com que a empresa em que você trabalha se posiciona no mercado, escolha as
conclusões corretas:
Questão 2
Desktops e dispositivos móveis são plataformas bem diferentes. Sabendo disso, neste projeto você vai considerar que:
A I, II e III
B II, III e IV
C I e II
D III e IV
E I e IV
Responder
A o aplicativo de instalação do novo aplicativo será o mesmo, independentemente da plataforma.
B para cada plataforma, há um aplicativo específico, que ainda pode apresentar funcionalidades diferentes.
C para cada plataforma há um software instalador específico, porém o modo de exibição nas telas é idêntico.
D para cada plataforma há um software instalador específico, porém são conservadas exatamente as mesmas funcionalidades.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 26/68
Questão 3
Pensando nesse exemplo fictício, que reflete muitos casos reais, explique a diferença na maneira com que o website e o aplicativo deverão se
diferenciar em relação às funcionalidades que oferecerão aos usuários.
Digite sua resposta
Exibir solução
Introdução
Para qualquer solução de interface, devemos ter em mente para qual plataforma ela está sendo criada. Para Cooper (2007), uma plataforma pode
ser pensada como uma combinação de hardware e software que permite ao produto funcionar tanto em termos de interações do usuário quanto em
relação às operações internas do produto.
São exemplos de plataformas:
E em cada plataforma, o aplicativo deve apresentar diferentes cores e identidades visuais.
Responder
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 27/68
Consoles de videogame
Smart TVs
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 28/68
Smartphones
Posturas dos aplicativos nas plataformas
Cooper (2007) destaca quão importante é prestar atenção na postura dos aplicativos em cada plataforma.
Vamos chamar de postura a forma de apresentação da interface que afeta a maneira com que os usuários interagem com um aplicativo. Essa
maneira, afinal, influencia a própria usabilidade do aplicativo.
A aparência e o comportamento de um aplicativo precisam refletir a maneira com que ele deve ser usado. Segundo a perspectiva da postura, isso
não é uma questão puramente estética, e sim comportamental. A plataforma tem um papel importante nessa postura.
Nos jogos digitais, essa diferença de postura parece ser ainda mais destacada. Basta comparar o momento em que reservamos um dia em casa
para ligar o console de videogame e jogar um game 3D e aquele no qual, entediados no metrô, nos distraímos com um jogo no celular enquanto
esperamos a chegada da próxima estação.
Cooper e demais autores (2007) listam três categorias de postura:
Exemplo
Existe uma diferença palpável na maneira com que usamos uma caixa de e-mails no nosso PC quando estamos sentados à mesa de
trabalho e quando a conferimos rapidamente no celular antes de entrar no metrô.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 29/68
Soberana
Transitória
Daemônica
Como cada categoria descreve um conjunto diferente de atributos comportamentais, cada uma delas também é responsável pela descrição de um
tipo diferente de interação do usuário. Essas categorias nos ajudam a ter um ponto de partida para projetar uma interface.
A seguir, descreveremos as três categorias de postura.
Postura soberana
Os aplicativos de postura soberana são aqueles que ocupam a tela inteira e monopolizam a atenção dos usuários por longos e contínuos períodos
de tempo. Trata-se dos aplicativos que também oferecem um grande conjunto de funcionalidades para o usuário.
Listaremos alguns exemplos:
Processador de textos Word.
Editor de imagens Photoshop.
Editor de vídeos After Effects.
Motor de jogo Unity.
Nesses exemplos, esses aplicativos se mantêm “soberanos”, mesmo que outros aplicativos sejam usados ao mesmo tempo para tarefas de
suporte.
Postura transitória
Quando usamos um aplicativo soberano, algumas vezes precisamos utilizar rapidamente algum outro, que abre uma janela com somente uma
função e poucos controles, fechando-o rapidamente em seguida para continuar nosso trabalho.
Esse tipo de aplicativo é conhecido como depostura transitória, porque ele vem e vai. Ele aparece, faz seu trabalho
e sai rapidamente. Um exemplo de aplicativo de postura transitória é o Windows Explorer.
Saiba mais
Os jogos digitais, em sua grande maioria, seguem essa postura de forma mais intensa, ficando em tela cheia por padrão.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 30/68
Muitas vezes, ao usar um aplicativo soberano, como o Photoshop, abre-se o Windows Explorer rapidamente para encontrar uma fotografia, o qual é
fechado logo depois para se retomar o trabalho no Photoshop. Perceba que, nesse momento, o Windows Explorer não ocupa toda a tela: ele abre
uma janela menor, se sobrepondo ao aplicativo soberano para o usuário não perder sua atividade principal de vista.
Postura daemônica
Programas que normalmente não interagem com o usuário são aplicativos de postura daemônica. Esses aplicativos funcionam de forma silenciosa
e invisível em segundo plano, realizando tarefas possivelmente vitais sem a necessidade de intervenção humana.
No entanto, os aplicativos daemônicos devem ocasionalmente ser instalados e removidos, assim como também precisam, de forma ocasional, ser
ajustados. É só nessas horas que o usuário interage.
A interação entre um usuário e um aplicativo daemônico sempre é de natureza transitória – e todas as recomendações de design de interface
relativas aos aplicativos transitórios também valem aqui. A diferença é que os ícones dos aplicativos com tal postura devem sempre ser discretos
para não concorrer pela atenção do usuário.
Desktops, notebooks e dispositivos móveis
Como todo trabalho de design constitui uma conversa com materiais, também é importante para o design de interação entender as limitações e as
oportunidades associadas a cada plataforma. Sendo assim, faremos algumas considerações sobre as posturas apresentadas e algumas
plataformas.
Desktops e notebooks
O design de interação tem suas raízes no software de desktop. Os desktops podem ter uma grande variedade de configurações, indo das mais
básicas até as mais avançadas, tendo ainda a capacidade de sofrer alterações e trocas de peças para seu upgrade. Já os notebooks, hoje em dia,
são plataformas muito similares aos desktops, tendo uma grande capacidade de processamento.
Exemplo
Um driver de impressora ou uma conexão de rede.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 31/68
Os desktops são a principal plataforma para os aplicativos de postura soberana. São usados neles os principais aplicativos para o desempenho de
trabalhos que exigem muito processamento da máquina, assim como um grande treinamento e o desenvolvimento de habilidades do usuário, uma
vez que reúnem muitas funcionalidades.
Eis algumas recomendações para a postura soberana em desktops:
Otimizar a interface, priorizando os usuários que já possuem um conhecimento intermediário em vez de funcionar como se fosse sempre a
primeira vez de cada usuário.
Ocupar toda a tela para exibir uma grande quantidade de funcionalidades ao mesmo tempo.
Seguir um estilo visual minimalista para não concorrer pela atenção do usuário ou sobrecarregar sua visão.
Criar um feedback visual, mas seguindo ao máximo a regra da sutileza minimalista.
Disponibilizar muitas formas de entradas de dados, como digitação no teclado, atalhos de teclado, caixas de diálogo, cliques e movimentações
de seta.
A postura transitória, como o próprio nome diz, diz respeito aos aplicativos que funcionam de forma temporária. Como não ficam muito tempo na
tela, os usuários não têm tempo de se familiarizar muito com eles.
Suas recomendações, assim, são praticamente o oposto daquelas listadas para a interface soberana:
Não desenhar uma janela que ocupe toda a tela.
Desenhar botões grandes.
Usar letras grandes e fáceis de entender.
Colocar legendas de instruções com frases curtas, porém claras, em vez de só palavras-chave que o usuário pode esquecer.
Dar poucas opções para que o usuário não cometa erros.
Não exigir habilidade motora do usuário, preferindo botões e não colocando a barra de rolagem.
Tudo que o usuário precisa fazer tem de estar visível na tela.
Os desktops também reúnem uma série de aplicativos que funcionam com uma postura daemônica. Eles operam, na maioria das vezes, sem
receber comandos do usuário, o qual, por sua vez, passa a maior parte do tempo sem lembrar que eles existem. Eventualmente, contudo, ele pode
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 32/68
precisar buscá-los para fazer escolhas.
Um exemplo são as configurações de monitores no Windows. Mesmo já tendo usado tais configurações antes, o usuário pode se esquecer de seus
comandos. Isso é facilitado com uma busca textual para alcançar a respectiva janela. Trata-se de uma interface simples que antecipa as
necessidades do usuário.
Dispositivos móveis
Sem dúvida, eles são atualmente o tipo de plataforma mais difundido e o que evolui mais rápido. Diversas limitações antigas dos dispositivos
móveis já foram superadas, embora haja muitas diferenças de interação em relação aos desktops que precisam ser observadas.
Os aplicativos assumem uma postura soberana em dispositivos móveis de forma mais limitada. Eles não podem ter uma quantidade tão grande de
funcionalidades quanto os aplicativos para desktop, mas podem ser projetados para longas sessões de trabalho do usuário. O aplicativo para
pintura digital Procreate é um exemplo, tendo inclusive gráficos minimalistas.
Nos smartphones, alguns aplicativos possuem funções transitórias em apoio a outro aplicativo de postura soberana.
A forma com que sua interface é projetada acaba seguindo algumas das recomendações que listamos para o desktop.
Em smartphones, muitos aplicativos operam com uma postura daemônica. Entretanto, eles consomem a energia da bateria. Por isso, desativá-los e
ativá-los deve ser simples e fácil, enquanto a interface é simples e minimalista.
Exemplo
O Instagram seria considerado de postura soberana, enquanto o aplicativo Repost, usado somente para repostar algo do feed de outra
conta no nosso feed, teria uma postura transitória.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 33/68
Já o Spotify é um exemplo de aplicativo que tem uma função daemônica, mesmo não sendo classificado dessa maneira. Ele, afinal, continua
fazendo o streaming de músicas mesmo após fecharmos a tela do aplicativo e possui um controle discreto para encerrar o streaming.
Smart TVs, media streaming e consoles de videogame
Smart TVs e media streaming
As smart TVs já obtiveram grandes avanços em suas funcionalidades, conectando-se à internet e usando uma série de aplicativos de streaming de
vídeo e música.
Entretanto, para controlar suas funcionalidades, prevalecem ainda os controles remotos, cujo formato é muito semelhante ao dos antigos controles
que se limitavam a “trocar de canal”. Esses controles impedem a interface de exibir uma grande quantidade de funcionalidades, pois seria muito
difícil navegar entre elas usando um controle remoto.
Apesar de suas poucas funcionalidades, prevalecem as demais recomendações da postura soberana para os aplicativos de smart TVs:
Ocupar toda a tela.
Ser minimalista ao máximo para não concorrer pela atenção do usuário, não “enfeitando” janelas com molduras.
Exemplo
A opção de ligar e desligar a conexão de internet móvel, o bluetooth e o ajuste de brilho de tela.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 34/68
Usar fundos sempre escuros e sem cor, seguindo a mesma luminosidade das telas de créditos tradicionais ao final de filmes e de séries.
Disponibilizar comandos simples que dependem de movimentações (para cima ou para baixo, assim como para a direita e para a esquerda),
acrescentando um apertar debotão para aceitar como “OK”.
Para não aumentar os comandos dos controles remotos e dificultar a interação, não há aplicativos com postura transitória em smart TVs.
Na verdade, os aplicativos possuem uma postura predominantemente soberana, embora sigam algumas recomendações da postura transitória:
Desenhar botões grandes.
Usar letras grandes e fáceis de entender.
Colocar legendas de instruções com frases curtas, porém claras, em vez de só palavras-chave que o usuário pode esquecer.
Dar poucas opções para que o usuário não cometa erros.
Não exigir habilidade motora do usuário, preferindo botões e não colocando a barra de rolagem.
A postura daemônica aparece nos ajustes da smart TV, como o ajuste do brilho da tela e da conexão de internet, além dos controles parentais.
Dentro do aplicativo de streaming, eles permitem o ajuste de idiomas e legendas.
Consoles de videogame
Nesse caso, as interfaces de controle do console devem se assemelhar às interfaces dos jogos mais comumente jogados no console e ser
adaptadas para as possibilidades dos controles de videogame.
Assim como nas recomendações para as smart TVs, a interface dos consoles de videogame deve ser fácil de navegar, usando movimentos para
cima ou para baixo e para a esquerda ou para a direita, além de botões do gamepad para dar “OK”.
Porém, ao contrário das interfaces das smart TVs, as interfaces nos consoles podem ter um visual bem menos minimalista, com cores, texturas e
efeitos sonoros para a entrada de botões e telas – e até mesmo com uma trilha sonora de fundo.
Exemplo
Você deve ter percebido que não abrimos novas janelas uma por cima da outra quando usamos as smart TVs. Isso tornaria a navegação
muito difícil com o controle remoto.

Exemplo
Em um console para jogar jogos usando óculos de realidade virtual e controles de captura de movimentos, a interface também precisa ser
construída em realidade virtual em 3D, enquanto seus controles devem envolver movimentos da cabeça (usando os óculos de realidade
virtual) e das mãos (segurando os controles de captura de movimentos).

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 35/68
A interface para consoles tem de ser projetada como uma extensão dos jogos do console para que o usuário jogador não sinta um choque e um
contraste entre a postura de um jogo que ele acabou de jogar e a da interface do console.
Plataformas e posturas de seus aplicativos
Veja as diferentes plataformas e as respectivas posturas de seus aplicativos.
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
Módulo 2 - Vem que eu te explico!
Um típico aplicativo de postura soberana
Exemplo
Após terminar uma sessão em 3D com muitos efeitos sonoros, texturas, cores e movimentos, o usuário jogador abre uma interface
completamente minimalista, flat, sem cores, escura e silenciosa, causando nele um estranhamento e a sensação de que o console está
aquém do jogo, como se a plataforma não fosse adequada para os jogos.



12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 36/68
Módulo 2 - Vem que eu te explico!
Um aplicativo de postura transitória
Questão 1
Entre as alternativas a seguir, escolha a que mostra o funcionamento de um aplicativo de postura soberana da melhor forma.

Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 37/68
Questão 2
Escolha a alternativa mais adequada quanto à relação entre as plataformas e as posturas de seus aplicativos.
A O aplicativo é chamado para executar uma tarefa rapidamente, sendo, em seguida, fechado.
B
O usuário passa muito tempo usando esse aplicativo, que funciona principalmente em tela cheia e possui muitas
funcionalidades.
C Abre-se uma janela pequena no meio da tela com um botão grande e chamativo.
D O aplicativo funciona de forma constante no computador, sem que o usuário o veja todo o tempo.
E Seu melhor exemplo é o Windows Explorer.
Responder
A Independentemente da plataforma utilizada, as interfaces devem assumir as mesmas posturas.
B Uma interface de postura soberana tem as mesmas características independentemente da plataforma na qual ela é usada.
C Os desktops são a plataforma que suporta aplicativos com o maior número de funcionalidades na postura soberana.
D
Os dispositivos móveis podem ter um grande número de aplicativos ativos na postura daemônica sem que o usuário possa
fazer escolhas sobre isso.
E Para os desktops, não é recomendada a criação de interfaces de postura transitória.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 38/68
3
Funcionalidade, usabilidade e acessibilidade
Ao final deste módulo, você será capaz de diferenciar funcionalidade, usabilidade e acessibilidade, além de suas recomendações em projetos de
interface.
Ligando os pontos
Você sabe o que é usabilidade? Acessibilidade também é um conceito importante. Qual seria a diferença entre usabilidade e acessibilidade?
Já falamos sobre funcionalidades, quando demos exemplos de tipos de softwares que oferecem mais ou menos funcionalidades. Além de oferecer
funcionalidades, um aplicativo também precisa ter uma boa usabilidade e ser acessível.
Para entendermos melhor o assunto, vamos retomar o case da empresa fictícia de desenvolvimento de aplicativos.
Responder

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 39/68
Você é um designer de interação e depois da reunião da equipe com o cliente, ficou acordada a possibilidade de sua equipe trabalhar em uma
atualização do site da empresa do cliente, além da criação do novo aplicativo para dispositivos móveis.
Nesse momento, você ficou responsável por fazer uma avaliação listando as funcionalidades do website, se ele atende às dez heurísticas de Jakob
Nielsen para a usabilidade no design de interação e se ele atende aos quatro princípios de acessibilidade (Web Content Accessibility Guidelines) do
Consórcio World Wide Web (W3C). Primeiro, você consultou os dois websites onde estão disponíveis e explicados esses princípios de acessibilidade
e heurísticas de usabilidade.
Com base nisso, você estruturou um relatório que foi bem trabalhoso de se fazer e ficou bem longo.
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?
Questão 1
Você sabia que muitas pessoas são daltônicas? Além disso, algumas nunca se deram conta de sua condição. Existem formas diferentes de
daltonismo, mas podemos dizer que na maioria delas as pessoas não enxergam bem o vermelho. Pensando nisso, escolha uma opção que
corresponde à uma escolha de acessibilidade que ajudará a maioria dos daltônicos a enxergar melhor as cores do site.
A As letras são grandes e em fonte bastão.
B A cor predominante na interface é o azul.
C Existe uma opção para fundo escuro.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 40/68
Questão 2
A usabilidade está relacionada à qualidade de uso de uma interface, com a facilidade com que as pessoas usam a interface. Dentre as
características abaixo que você colocou no seu relatório sobre o atual website, qual corresponde especificamente a um problema de
usabilidade?
Questão 3
Considere o seguinte cenário: na sua avaliação de acessibilidade do site, você resolveu já ir anotando sugestões de possíveis oportunidades de
melhorias para a nova versão que está sendo feita. A marca da empresa responsável é vermelha, uma cor bem comum em marcas, por isso textos
importantes em geral estão escritos em vermelho. Adicionalmente, quando o usuário escreve a senha errada, a borda da caixa de texto se torna
vermelha, para sinalizar o erro. Para preservar o layout, nãohá opção de aumento do tamanho das letras. Explique sobre que melhorias poderiam ser
feitas para esse pequeno item se adequar melhor a princípios de acessibilidade.
D Pode ser navegado usando atalhos de teclado.
E É compatível com tecnologias assistivas.
Responder
A Não mostra mensagens de alerta para ações importantes do usuário que podem ser um erro.
B Não fornece legendas escritas para os vídeos.
C Não pode ser navegado com atalhos de teclado.
D Não é compatível com tecnologias assistivas.
E Não é possível aumentar o tamanho e o contraste dos textos.
Responder
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 41/68
Digite sua resposta
Exibir solução
Introdução
Já vimos que o designer de interação precisa trabalhar para que o usuário consiga interagir o mais facilmente possível com a interface. Para isso,
esse designer precisa ter certos princípios em mente.
Por isso, apresentaremos adiante os conceitos de funcionalidade, usabilidade e acessibilidade. Como os três constituem conceitos de qualidade do
aplicativo, as pessoas podem confundi-los: preste atenção em cada um deles.
Funcionalidade
A funcionalidade está relacionada ao fator utilidade ou aplicabilidade de um sistema, ou seja, ao conjunto de funcionalidades necessárias para o
usuário realizar as tarefas desejadas.
Eis alguns exemplos de funcionalidade:
Cadastro de usuários.
Login.
Geolocalização.
Busca por listas.
Geração de relatórios.
Chat.
Notificações.
Push.
Como requisito de qualidade, a funcionalidade de um software diz respeito à satisfação de necessidades que deram origem ao projeto. Além de
abranger requisitos implícitos e explícitos, ela está intimamente ligada à qualidade do código criado.
Resumindo
A funcionalidade, portanto, está relacionada com a capacidade do aplicativo de executar funções. O desenvolvimento de um aplicativo

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 42/68
Usabilidade
A usabilidade se atém à qualidade de uso de uma interface. Seu foco está no usuário, e não nas funcionalidades do sistema. Ela está relacionada,
em suma, com a facilidade com que as pessoas usam uma ferramenta para realizar uma tarefa.
Trata-se da capacidade de uma interface permitir que o usuário tenha sucesso na execução de suas tarefas. A usabilidade pode ser vista também
como um atributo de qualidade que avalia quão fácil é usar uma interface.
Dez heurísticas de usabilidade para o design de interação
Jakob Nielsen (2020) é uma das nossas maiores referências em usabilidade. Em seu site, ele disponibiliza 10 heurísticas de usabilidade para o
design de interação:
requer testes de funcionalidade para verificar a robustez da implementação.
1. Visibilidade do estado do sistema 
2. Correspondência entre o sistema e o mundo real 
3. Controle e liberdade do usuário 
4. Consistência e padronização 
5. Prevenção de erro 
6. Reconhecimento em vez de memorização 
7. Flexibilidade e eficiência de uso 
8. Design estético e minimalista 
9. Auxílio na resolução de um erro 
10. Ajuda e documentação 
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 43/68
Acessibilidade
A acessibilidade inicialmente estava relacionada à possibilidade de acesso ao sistema de pessoas portadoras de alguma deficiência física. Hoje em
dia, contudo, as diretrizes de acessibilidade são pensadas para a projeção de produtos a serem utilizados, sem modificações, pelo maior número de
pessoas, e não por grupos pequenos.
A ideia geral também é que, desse modo, uma interface será melhor e mais fácil para todos usarem.
O consórcio World Wide Web (W3C) disponibiliza em seu site as WCAG 2.0, que são as diretrizes de acessibilidade para conteúdo web (WORLD
WIDE WEB CONSORTIUM, 2012). Seus princípios de acessibilidade são uma referência até hoje.
Vamos conhecer melhor tais princípios!
Princípios de acessibilidade
Princípio 1: Perceptível
“As informações e os componentes da interface do usuário devem ser apresentados em formas que possam ser percebidas pelo usuário” (WORLD
WIDE WEB CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso:
Fornecer alternativas em texto para todo o conteúdo não textual.
Dar alternativas, como legendas escritas ou audiodescrição.
Criar conteúdo que possa ser apresentado de diferentes formas.
Facilitar aos usuários a audição e a visão dos conteúdos.
Saiba mais
Você encontra tais heurísticas, assim como outros exemplos e vídeos, no site que Jakob Nielsen vem mantendo e atualizando desde 1994
(sua atualização mais recente é de 2020). Para achar a página de Nielsen, basta digitar em uma ferramenta de busca “10 usability
heuristics for user interface design”.

Exemplo
Mesmo as pessoas que não são surdas podem não ouvir algum som do aplicativo, pois elas se encontram em um lugar barulhento ou não
estão usando fones de ouvido.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 44/68
Princípio 2: Operável
“Os componentes de interface de usuário e a navegação devem ser operáveis” (WORLD WIDE WEB CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso:
Fazer com que toda a funcionalidade fique disponível a partir do teclado.
Proporcionar aos usuários tempo suficiente para eles lerem e utilizarem o conteúdo.
Não criar um conteúdo de visual vibrante (ele pode causar convulsões em pessoas sensíveis).
Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão.
Princípio 3: Compreensível
“A informação e a operação da interface de usuário devem ser compreensíveis” (WORLD WIDE WEB CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso:
Tornar o conteúdo textual legível e compreensível.
Fazer com que as páginas da Web apareçam e funcionem de forma previsível.
Ajudar os usuários a evitar e corrigir os erros.
Princípio 4: Robusto
“O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, incluindo
tecnologias assistivas” (WORLD WIDE WEB CONSORTIUM, 2012).
Para contemplar esse princípio, é preciso maximizar a compatibilidade com as tecnologias assistivas.
Em alguns sistemas, a acessibilidade configura uma característica desejável. No entanto, em outros, ela é fundamental, como é o caso dos sistemas
do governo que oferecem aos cidadãos serviços on-line.
Daltonismo: veja como é fácil atender os usuários que não visualizam
algumas cores
As cores são importantes para comunicar conceitos e sentimentos.
Saiba mais
No Brasil, a Lei nº 10.098, de 19 de dezembro de 2000, estabelece normas gerais e critérios básicos para promover a acessibilidade e
garantir o acesso a cidadãos com deficiência, colocando a acessibilidade como exigência no desenvolvimento de sistemas interativos
públicos. No site brasileiro Governo digital, procure por “acessibilidade digital” e saiba mais sobre modelos, ferramentas e padrões. Esse
conteúdo é fundamental em concursos públicos da área.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 45/68
No entanto, a interface não deve depender só das cores para comunicar coisas importantes para o usuário; afinal, seu usuário pode ser daltônico.
Os nossos olhos possuem células de três tipos para “detectar” as cores vermelha, verde e azul.
Os daltônicos são pessoas que nascem sem alguns desses tipos. Observe uma ilustração dos efeitos na visão de cada tipo de daltonismo, os quais
podem ser chamados mais especificamente de deuteranopia, protanopia e tritanopia:
Simulação da alteração da visão de três tipos de daltonismo.
Isso não quer dizer que você não possa usar cores ao criar uma interface! No exemplo adiante, colocaremos lado a lado uma versão colorida e outra
em tons de cinza de uma mesma caixa de diálogo.
Noteque as cores ajudam a identificar o erro e encontrar a solução. Contudo, sem elas, também conseguimos perceber o destaque pelo sinal de
exclamação e podemos ler a mensagem de erro do sistema. Veja:
Exemplo
O uso do vermelho, hoje em dia, constitui um padrão para alertar o usuário sobre perigos e erros.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 46/68
Versão colorida e em preto e branco da mesma caixa de diálogo.
Mesmo para quem enxerga todas as cores perfeitamente, cuidar do contraste e da ordem das mensagens e usar sinais e símbolos tornam a
interface melhor. A verdade é que, quando uma interface atende a quem não visualiza as cores, ela também é mais fácil de compreender e de usar
para todas as pessoas!
Usabilidade e acessibilidade
Veja as diferenças entre funcionalidade, usabilidade e acessibilidade e as principais recomendações para a criação de interfaces simples e
acessíveis.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 47/68
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
Módulo 3 - Vem que eu te explico!
Exemplo de usabilidade
Módulo 3 - Vem que eu te explico!
Exemplo de acessibilidade


12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 48/68
Questão 1
Escolha a alternativa com a melhor definição sobre a acessibilidade.
Questão 2
Indique a alternativa com exemplos de heurísticas de usabilidade.
Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
A Está relacionada à qualidade de uso de uma interface.
B Diz respeito ao fator utilidade ou aplicabilidade de um sistema.
C Trata-se de recursos adicionais acrescentados ao final de um projeto de interface.
D É sinônimo de funcionalidade e usabilidade.
E
É a capacidade da interface de permitir que o número máximo de pessoas e o mais diverso possível consiga usá-la com
facilidade, mesmo aquelas com alguma alteração física.
Responder
A Perceptível e operável.
B Visibilidade do estado do sistema e correspondência entre o sistema e o mundo real.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 49/68
4
Analogias, abstrações, metáforas, métodos e técnicas
Ao final deste módulo, você será capaz de aplicar as metáforas de interface e os métodos e técnicas de projeto de interface.
Ligando os pontos
C Compreensível e robusto.
D Maximização da compatibilidade com as tecnologias assistivas.
E Fornecimento de alternativas, como legenda escritas ou audiodescrição.
Responder

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 50/68
Depois de ver tantos conceitos você deve estar se perguntando quando finalmente vai poder “colocar a mão na massa” e desenhar a interface!
Mas, calma! Ainda temos que fazer um levantamento de requisitos antes de começar a desenhar.
Para entendermos melhor como é essa etapa, vamos retomar o case da empresa fictícia de desenvolvimento de aplicativos.
Todos nós tivemos nossa vida transformada com o surgimento da pandemia de covid-19, o mundo digital também sofreu grandes transformações.
A principal delas foi relacionada com a necessidade de distanciamento social, que criou uma grande reorganização dos espaços físicos e causou
uma grande expansão do trabalho remoto.
Nesse sentido, a legislação que rege a relação entre psicólogos e pacientes passou a permitir o teleatendimento, gerando uma grande oportunidade
de lançamento de novos aplicativos com o objetivo de atender novas necessidades dos usuários.
Nesse contexto, a empresa em que você trabalha foi procurada por um cliente para criar um aplicativo para facilitar a realização de sessões de
terapia entre pacientes e psicólogos.
Após a tradicional reunião da equipe com o cliente, a equipe se reuniu para fazer um levantamento de requisitos para o novo projeto de interface.
Você sabe que existem várias maneiras de se fazer um levantamento de requisitos, mas nesse momento a empresa e a equipe optam por padrão a
fazer uma análise PACT (Pessoas, Atividades, Contextos e Tecnologias) de Benyon.
Baseados no PACT, a equipe se reúne e chega a algumas conclusões, como por exemplo:
Pessoas – o novo aplicativo deveria atender dois perfis de usuários bem diferentes, que seriam os psicólogos e os pacientes. Todos acordam que
devem fazer mais pesquisas sobre esses usuários.
Atividades – foram consideradas as diversas características das atividades. Há questões de legislação da saúde envolvidas, como a garantia de
sigilo, documentação, procedimentos para o uso de planos de saúde.
Contextos – foi apontado, por exemplo, que consultas remotas realizadas em horários mais flexíveis, fisicamente alocadas em ambientes mais
íntimos à escolha dos usuários, poderiam até aumentar a qualidade das consultas, em relação às tradicionais consultas presenciais.
Tecnologias – a plataforma principal seriam os dispositivos móveis ligados à wi-fi ou Internet móvel, os smartphones, pois a principal atividade
nos aplicativos seriam as teleconferências realizadas em um clima mais intimista e de maior mobilidade à escolha do usuário, conforme os
contextos levantados. Entretanto, surgiu também a necessidade de uma opção a ser acessada por navegadores de Internet usando um desktop
ou notebook.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 51/68
Somente depois que todo o levantamento de requisitos estiver pronto é que você poderá finalmente começar a desenhar seguindo as etapas de
Wireframe, Prototipagem e Teste de Usabilidade!
Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos? 
Questão 1
Como você viu, no levantamento de requisitos PACT, o primeiro item são as pessoas. Usuários são pessoas e envolver o usuário é fundamental,
porque ele é a figura central dos objetivos na criação de uma interface. Escolha abaixo os procedimentos corretos que poderão ser feitos para
continuar complementando o levantamento sobre as “pessoas”.
I. Eleger somente uma pessoa real famosa para representar todos os possíveis usuários.
II. Criar personas fictícias representando cada perfil de usuário.
III. Recorrer à pesquisa com possíveis usuários reais do novo aplicativo.
IV. Usar resultados de pesquisas com usuários para aprimorar as personas.
Entre os procedimentos listados, você considera como corretos:
Questão 2
Cada parte do levantamento de requisitos PACT reserva espaço para etapas complexas do planejamento do projeto. No exemplo acima do novo
aplicativo, dentro do PACT abordamos outros tópicos referentes a outros conhecimentos já trabalhados no nosso conteúdo. Como se o PACT
pudesse ser usado para organizar a aplicação de todo o conhecimento adquirido. No exemplo do item “tecnologias”, podemos aplicar os
tópicos:
I. dispositivos de interação: dispositivos de entrada e saída.
II. plataformas.
III. tipos de interface.
IV. analogias e metáforas.
A I, II e III.
B II, III e IV.
C I e II.
D III e IV.
E I e IV.
Responder
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 52/68
Escolha que tópicos já estudados se adequariam corretamente em “tecnologias”:
Questão 3
Com esse exemplo prático, ficou mais claro por que afirmamos que o trabalho de design de interação é muito mais que “criar telas bonitas” de uma
interface. Escreva um resumo em torno de 10 linhas sobre como é o trabalho do designer de interação e suas principais competências ou
atribuições no caso da interface do novo aplicativo do case.
Digite sua resposta
Exibir solução
Analogias, metáforas e abstrações
A princípio, a analogia e a metáfora são figuras de linguagem bem parecidas e muito utilizadas por nós no dia a dia.
Quando usamosuma metáfora, transferimos o nome de uma coisa para outra, fazendo uma comparação. Um exemplo simples é dizer que alguém
“é uma flor de pessoa”.
A pessoa, nesse caso, é comparada com algumas características de uma flor, como delicadeza e suavidade. Repare que, nessa metáfora, não
estamos dizendo que a pessoa é um vegetal ou que possui folhas, e sim que há características mais sutis de uma flor nela.
A I, II e III
B II, III e IV
C I e II
D III e IV
E I e IV
Responder
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 53/68
Na analogia, também comparamos as coisas. Ela, porém, é mais objetiva e menos poética. É necessário, portanto,
encontrar pontos de semelhança entre as ideias comparadas.
Um exemplo seria dizer que a pessoa “é forte como um touro”. Note que aqui também há uma figura de linguagem, mas a comparação é mais direta
que na metáfora.
A abstração, por sua vez, faz um caminho oposto ao percorrido pela analogia e pela metáfora. Ela é uma operação intelectual que isola seu conceito
dos demais, o qual, por isso, funciona além dos detalhes do nosso mundo físico.
Por outro lado, o conceito abstrato de bola também é útil para a distinguir de outros conceitos, como o de “quadrado”.
Mas o que isso tem a ver com o design de interação? Resposta: essas figuras de linguagem da língua portuguesa também podem ser usadas de
maneira visual – e sempre com o objetivo de ajudar o usuário a entender e interagir com a interface.
Basicamente, os aplicativos operam com uma linguagem que não é a das pessoas. Entretanto, como a linguagem dos aplicativos é muito abstrata
para os usuários, é preciso lançar mão de metáforas e analogias para criar relações com a realidade do usuário e, com isso, interfaces mais
intuitivas e fáceis de usar.
Metáforas de interface
No design de interface, optamos por falar em metáforas de interface. No entanto, você deve notar que as analogias vão aparecer aqui junto com as
metáforas. Sendo assim, considere que, quando falamos em metáforas de interface, não excluímos as analogias embutidas nelas.
Exemplo
O conceito abstrato de bola está além das características físicas de uma bola de couro. Também conseguiremos reconhecê-la como “bola”
se ela for feita de plástico ou até se for um modelo em 3D na tela do computador.

Exemplo
Um triângulo é uma forma abstrata, pois ele não existe no nosso mundo real. Pode até haver coisas com o formato parecido com o de um
triângulo, mas elas não são triângulos, porque eles são uma abstração matemática.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 54/68
Interface do Microsoft Paint.
As metáforas de interface são elementos figurados que comparam a interação com um aplicativo com os elementos do mundo real. Um exemplo
bem simples no Paint pode ser o uso de ícones de lápis para indicar a ferramenta de desenho livre, de borracha para apagar e de balde de tinta para
preencher.
Mas não encare as metáforas de interface como uma mera questão de ilustração. O foco é basear-se nas experiências do usuário – tanto as
passadas quanto as atuais – relacionadas com o funcionamento do software.
Quanto mais próxima for a lógica da metáfora da lógica do funcionamento do software, mais fácil será a interação do usuário. As metáforas de
interface, portanto, são criadas para ajudar o usuário a saber o que fazer em uma interface.
Segundo Fernandes (2005), é possível dividir as metáforas em dois tipos principais:
Metáforas de familiarização
(ou metáforas de interface virtual)
Metáforas de transporte
(ou metáforas de interface verbal)
Metáforas de familiarização
As metáforas de familiarização são projetadas para novos usuários ainda não familiarizados com o uso do aplicativo. O exemplo mais clássico é a
metáfora da área de trabalho do sistema operacional Windows, porque ela se baseia nas experiências de trabalho em um ambiente de escritório
com seus vários objetos e utilidades disponíveis.
Para facilitar o aprendizado, essas metáforas estão mais relacionadas à lógica e à estrutura do uso.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 55/68
 1 de 2 
Metáforas de transporte
As metáforas de transporte se baseiam em elementos visuais que representam objetos físicos familiares aos usuários. Existe um vínculo forte
entre o objeto concreto (que é conhecido do usuário) e a aparência da interface.
Os exemplos mais comuns são as telas de calculadoras e a tela de discagem de números de telefone. Seus botões possuem formas e posições
semelhantes à interface analógica de botões físicos de antes.
 1 de 2 
Conforme já discutimos, as interfaces estão presentes e são muito importantes no dia a dia de todos nós. Dessa maneira, novas metáforas de
interface são aprendidas e acabam rapidamente se integrando na nossa linguagem comum.
Uma história do botão de “salvar”
Itens de uma antiga mesa de trabalho.
Telefone com botões físicos.
Exemplo
Pessoas que falam em navegar pela internet, curtir, ativar o sininho ou seguir alguém.

 
 
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 56/68
Os disquetes (ou floppy disks) foram muito usados para gravar, armazenar e transportar arquivos e softwares até meados dos anos 2000. Depois
disso, eles foram substituídos pelos compacts disks (CDs), os quais, hoje em dia, já são bem pouco usados devido às facilidades dos serviços na
nuvem.
Os antigos disquetes que ainda fazem parte da metáfora de “salvar”.
Hoje em dia, localizado entre os ícones usados em botões para a ação “salvar”, o ícone representando um disquete ainda está presente em versões
bem atuais de softwares da Microsoft, enquanto outros passaram a adotar a metáfora do download da nuvem. Veja:
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 57/68
Ícones usados para a ação de salvar ou baixar um arquivo disponíveis para uso no editor de textos Word.
Técnicas e métodos aplicados
Levantamento de requisitos
Requisitos são os atributos que o produto interativo deve ter para se alcançar certo objetivo. Segundo Benyon (2011), ao se projetar uma interface
antes de iniciar a etapa de design, é essencial que o designer adquira um entendimento completo sobre:
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 58/68
Pessoas envolvidas
Atividades realizadas no aplicativo
(também chamadas de tarefas)
Contextos
(nos quais essas atividades acontecem)
Tecnologias
(também conhecidas como plataformas)
As quatro palavras em destaque formam a sigla PACT. Essa análise de PACT constitui uma importante ferramenta a partir da qual são gerados os
requisitos para o aplicativo.
Daremos mais detalhes sobre os itens do PACT a seguir:
Envolvendo usuários na concepção
Se uma interface é desenvolvida para a interação de pessoas, os usuários precisam estar no centro da concepção do aplicativo desde o início.
A primeira forma de envolvimento dele na concepção é a criação de personas, isto é, personagens fictícios que representam um público-alvo mais
específico do produto. Em seguida, as possibilidades da relação da persona com a interface são pensadas na construção da jornada do usuário.
As personas são criadas para se entender o perfil do usuário. Para isso, fazer a si mesmo algumas perguntas pode ser crucial:
O usuário é jovem ou idoso?
Quais são as motivações dele?
O que ele está fazendo?
Como ele resolve o problema atualmente sem o novo aplicativo que você está criando?
Pessoas 
Atividades 
Contextos 
Tecnologias 
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 59/68
Você precisa entender o contexto do usuário antes de criar uma solução que o ajude a realizar tarefas. O objetivo é perceber as verdadeirasnecessidades e as preocupações dos usuários reais.
Para um mesmo projeto, você ainda pode precisar criar mais de uma persona.
Siga as seguintes dicas para criar uma persona:
Cenário e jornada do usuário
Cenários são descrições de situações hipotéticas em que o público-alvo se coloca. Um cenário pode ser construído por meio de uma frase como
“Suponha que o usuário realize a tarefa de...”.
Para que o cenário não fique muito desconectado com a realidade, em vez de pensarmos em um usuário genérico realizando as tarefas, devemos
criar cenários onde atuam as personas.
A jornada do usuário deve ser criada para entendermos como é o cenário em que o usuário atua, como é a
experiência de uma pessoa realizando uma tarefa.
Exemplo
Em um aplicativo para consultas médicas, há, no mínimo, duas personas bem diferentes: uma, que representa o público de médicos; outra,
o público de pacientes.

Crie um nome e uma imagem (ilustração ou fotogra�a) que a represente.
Estabeleça o per�l demográ�co.
Liste as tarefas que o usuário deve realizar.
Elenque as dores (ou problemas, preocupações etc.) dos usuários.
Anote as possíveis soluções para essas dores.
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 60/68
Deve mapear como o usuário faz antes, durante e depois do uso do seu novo aplicativo. Para cada persona criada, você deve criar também uma
jornada que descreva:
Estágios da jornada.
Tarefas realizadas em cada estágio.
Sentimentos associados a cada tarefa (frustação, impaciência, angústia, alívio etc.).
Oportunidades para o usuário retornar valor a cada estágio da jornada.
Prototipagem
Segundo Benyon (2011), a antecipação (ou prototipagem) preocupa-se em tornar as ideias visíveis. Para tanto, utilizam-se os protótipos, os quais
podem ser modelos físicos, como esboços a lápis ou modelos digitais.
Para um design centrado no usuário, a prototipagem é importante, pois ela permite ao designer ver o aplicativo a partir da perspectiva de outros.
O que é wireframing?
Wireframing é a atividade de criação de modelo ou de esquema de tela que desenhamos para ser um guia visual da estrutura do esqueleto de um
aplicativo. O wireframe constitui um esboço das telas e aponta como elas vão se comunicar entre si, mostrando, de maneira simples, como o
aplicativo funcionará.
Wireframes de baixa resolução.
Elementos de um bom wireframe
Um wireframe de qualidade deve incluir um bom planejamento das telas do aplicativo. Esse planejamento tem de mostrar:
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 61/68
Como o conteúdo será apresentado.
Como cada parte do conteúdo será priorizada.
Distribuição de espaço.
Ações planejadas.
Recursos e funções disponíveis.
Transições entre telas.
Criar um wireframe é como fazer um mapa mental de etapas e procedimentos sobre como se começa um desenvolvimento de aplicativo móvel.
Ele fornece uma ideia clara sobre a hierarquia de conteúdo, as categorias de objetos, os elementos de tela, as ações possíveis e a posição dos
elementos visuais da marca.
É possível planejar no wireframe o estabelecimento de uma hierarquia visual forte para a interface, isto é, uma ordem explícita para a visualização de
diferentes elementos visuais. Também se consegue destacar as bordas dos elementos visuais que compõem um eixo como uma maneira de
reforçar a divisão dos itens na organização hierárquica de uma interface.
Prototipagem do wireframe
Comece fazendo um wireframe de baixa fidelidade: para que o desenho do wireframe possa fluir de forma ágil e criativa, a recomendação é que ele
seja “rabiscado” inicialmente com papel e lápis. Tal processo pode durar dias. O próximo passo é prototipá-lo.
Depois dessa primeira fase no papel, é recomendado que o protótipo continue sendo desenvolvido como wireframe, mas, dessa vez, usando uma
ferramenta digital de desenho de interface. Isso atualizará instantaneamente o seu trabalho de caixas de texto, criando conexões entre essas caixas
para ver se o seu wireframe está funcionando.
Assim como o wireframe no papel, o wireframe prototipado é uma ferramenta essencial, ajudando a identificar pontos cegos e falhas ocultas. Ele
permite que você corrija os erros de design antes de apresentar o projeto final de wireframe.
As principais ferramentas do mercado para isso são o Figma, o Adobe XD e o Sketch. Elas nos ajudam a criar uma documentação clara do projeto e
facilitam o trabalho em equipe, já que as outras pessoas podem visualizar e editar o mesmo documento a distância e em tempo real.
Atenção!
No wireframe, ainda não é o momento de colocar cores, tipografia, elementos de design, fotos ou logotipos. Evite ao máximo antecipar
essas soluções estéticas, pois elas desviam o foco da real interação e tornam o trabalho mais demorado e custoso. O wireframe deve
receber modificações de forma mais ágil para experimentação e correções de problemas mais livre.

Exemplo
Conectar imagens e botões específicos a seus respectivos menus suspensos e às suas páginas de destino.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 62/68
Wireframes desenhados no Figma.
Tais ferramentas possibilitam ainda que todas as telas desenhadas sejam relacionadas em uma simulação de protótipo. Primeiramente, essa
simulação precisa ser testada e refinada pela equipe para, em seguida, ser testada por usuários, como veremos a seguir.
Teste o protótipo com usuários
Ainda em sua fase de wireframe prototipado, o projeto de aplicativo deve ser testado por usuários que representam o público-alvo do aplicativo.
Esse será seu primeiro teste de usabilidade. Não deixe de fazê-lo! As próprias ferramentas Figma, o Adobe XD e Sketch são capazes de produzir um
protótipo interativo para esse teste.
Outra opção é usar o aplicativo Marvel instalado no smartphone. Com ele, você pode importar ou capturar as telas do wireframe e criar um
wireframe prototipado interativo no próprio smartphone. Depois é só fazer o teste!
Reunimos mais dicas para você testá-lo:
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 63/68
Metáforas, métodos e técnicas
Veja o que são as metáforas de interface, os métodos e as técnicas de projeto de interface. Conheça ferramentas e o passo a passo para se chegar
ao protótipo e envolver os usuários no desenvolvimento.
Você precisará de 6 a 10 participantes que representam o público-alvo do novo aplicativo.
Observe, ouça e tome notas.
Se possível, grave som e vídeo dos participantes e da tela do protótipo.
Deixe-os à vontade e peça para eles executarem uma tarefa usando o protótipo.
Peça para eles fazerem comentários em tempo real durante a experiência.
Leve os dados obtidos para avaliá-los com sua equipe e fazer mudanças no wireframe.

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 64/68
Vem que eu te explico!
Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.
Módulo 4 - Vem que eu te explico!
Buscando referências para se inspirar
Módulo 4 - Vem que eu te explico!
Prototipagem no Figma

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 65/68
Questão 1
Escolha o exemplo que define uma metáfora de familiarização da melhor forma.

Vamos praticar alguns conceitos?
Falta pouco para atingir seus objetivos.
A O procedimento para deletar um arquivo é arrastá-lo usando o cursor para depositar em uma pasta nomeada como “lixeira”.
B A ferramenta de pintura é representada por um pincel.
C
A tela da calculadora do celular tem um layout e formatos de botões semelhantes aos de uma calculadora antiga de botões
físicos.
D O lugar para descartar arquivos é representado pelo ícone de uma lixeira.
E A ferramenta para apagar um desenho é representadapor uma borracha.
Responder
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 66/68
Questão 2
Escolha a opção que contém a representação de um bom wireframe.
Considerações �nais
Chegamos ao fim de uma jornada, mas seu caminho no design de interface está só começando! Primeiramente, vimos neste conteúdo do que se
trata a área do design de interação e a comparamos com outras áreas semelhantes que estão atualmente em voga. Entendemos ainda a real
missão do designer de interação: projetar interfaces de maneira centrada nos usuários para que eles possam executar ações interagindo com
facilidade.
Explicamos o que é uma interface, apresentando os principais dispositivos de interação e suas plataformas. Focados nos usuários, entendemos o
significado das funcionalidades e conhecemos as recomendações para usabilidade e acessibilidade. Adicionalmente, elencamos metáforas úteis
para fazer com que o usuário aprenda a usar uma nova interface de maneira mais fácil.
Por fim, conhecemos métodos e técnicas fundamentais para a criação de um projeto de interfaces e para o envolvimento do usuário nas fases
iniciais de criação. Afinal, nosso maior objetivo é ajudá-lo a usar o novo aplicativo que será lançado.
A Mostra a paleta de cores da marca.
B
Mostra como o conteúdo será apresentado, cada parte priorizada, a distribuição no espaço, as ações e as funções
planejadas, assim como as transições de tela.
C Mostra a tipografia escolhida para testes de legibilidade com usuários.
D Deve ter poucas telas para mostrar somente os principais layouts da interface.
E Deve ser desenhado em programas vetoriais, como o Adobe Illustrator.
Responder

12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 67/68
Podcast
Para encerrar, ouça uma demonstração prática das etapas de trabalho de design de interação que podem ser necessárias durante o
desenvolvimento de uma interface.
00:00 13:29
1x


Referências
BENYON, D. Interação humano-computador. 2. ed. São Paulo: Pearson Prentice Hall, 2011.
COOPER, A.; REIMANN, R.; CRONIN, D. About face 3: the essentials of interaction design. 3. ed. Indianapolis: Wiley Publishing, 2007.
FERNANDES, G. G. Paradigmas e avaliação de interface humano-computador: evolução, caracterização e ícones de interface computacional.
CONGRESSO INTERNACIONAL EM AVALIAÇÃO EDUCACIONAL. Anais... UFC/FACED/NAVE, 2005.
NIELSEN, J. 10 usability heuristics for user interface design. Nielsen Norman Group. Publicado em: 15 nov. 2020.
ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação humano-computador. 3. ed. Porto Alegre: Bookman, 2013.
WORLD WIDE WEB CONSORTIUM. Diretrizes de acessibilidade para conteúdo web (WCAG) 2.0. Recomendação W3C de 11 de dezembro de 2008.
Tradução autorizada em português europeu. Publicado em: 24 out. 2014.
Explore +
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html
12/03/23, 15:33 Interface e interação
https://stecine.azureedge.net/repositorio/00212ti/04119/index.html# 68/68
Confira o que separamos especialmente para você!
O livro de Rogers, Sharp e Preece, indicado nas referências, apresenta uma lista detalhada de tipos de interface e de suas implicações na criação e
avaliação de interfaces. Leia: Design de interação: além da interação humano-computador.
Pesquise o artigo Paradigmas e avaliação de interface humano-computador, indicado nas referênias, e veja sua classificação de tipos de interfaces
e de metáforas de interfaces:
Jakob Nielsen é uma grande referência em usabilidade. Pesquise o texto 10 usability heuristics for user interface design e você encontrará cada
heurística bem explicada e ilustrada.
O World Wide web Consortium (W3C) é uma comunidade internacional que trabalha desenvolvendo padrões web. No site da W3C, procure a Web
Accessibility Initiative (WAI). Você também encontra traduções desses conteúdos para o português. Pesquise: Diretrizes de acessibilidade para
conteúdo web (WCAG) 2.0.
No site Governo digital, procure por acessibilidade digital e conheça mais sobre modelos, ferramentas e padrões.
 Baixar conteúdo
javascript:CriaPDF()