INTERFACES

DE SISTEMAS
COMPUTACIONAIS

Prof. Dr. Alfredo BOENTE

alfredo.boente@uva.br
Semana 03
Interaction Design
Interaction Design
Design de Interação

O que é o design de interação?

Interaction Design (IxD Design), ou Design de Interação como é conhecido em português, é

a área de conhecimento responsável por entender, elaborar e melhorar todos os processos de
interatividade de usuários com sistemas, sejam eles digitais ou físicos.

Por ser uma profissão relativamente recente, ela exige conhecimentos que vão de design de
informação e user experience, até programação e desenvolvimento front-end.

Mostrando-se uma profissão com amplo campo de atuação e inúmeras possibilidades para
quem se interessa pela área.
Interaction Design
Design de Interação

É de extrema importância para qualquer empresa saber como o consumidor enxerga a sua
marca e quanto ele gosta do seu produto, já que uma boa visão por parte dos clientes é um
dos fatores que determina o sucesso de uma organização.

Além disso, esse conhecimento permite que reclamações sejam atendidas de maneira mais
fácil.

Na verdade, diante um mercado altamente competitivo, globalizado e desleal, uma verdadeira

selva de pedra, as empresas buscam obter Vantagem Competitiva, diante seus concorrentes.
Interaction Design
Design de Interação

https://www.youtube.com/watch?v=O0rlzDmsN18
Interaction Design
Design de Interação

Para que serve o design de interação?

O design de interação possui diversas finalidades, afinal, isso se dá por qual das suas
abordagens ele é executado. De maneira geral, existem quatro fundamentações principais.

A primeira delas é centrada no usuário. Ou seja, o design de experiência (UX) voltado para
atender demandas do mesmo, com base em suas necessidades. Nessa abordagem, o
designer deve traduzir no produto ou serviço o interesse do usuário final.

Já o segundo viés é centrado nas atividades. Os designers de interação tem o papel de criar
ferramentas necessárias para que as ações e tarefas sejam concluídas. Ou seja, os outros
setores e gerentes de produtos idealizam, enquanto a área de design de interação precisa
materializar isso.
Interaction Design
Design de Interação

Para que serve o design de interação?

A abordagem de sistemas se parece muito com a anterior. No entanto, o foco nesse cenário
é voltado para componentes globais e interligados. Além disso, o profissional garante que
todos os requisitos para a execução de um programa sejam cumpridos.

Por fim, há a abordagem em que a área de design de interação é responsável pela

idealização e materialização do processo. Com isso, o cliente final passa a ser apenas um
componente validador do processo, não participando do seu desenvolvimento.

No entanto, vale ressaltar que independente da abordagem utilizada, o design de interação

tem um foco em comum: otimizar a interação entre algo e o seu usuário final.
Interaction Design
Design de Interação

Quais as aplicações do design de interação?

Para qualquer sistema que exija interação, existem possibilidades para a aplicação de
técnicas de design de interação para melhorar a experiência do usuário. Dentre as suas
interfaces, é possível utilizá-la para criar ambientes mais interativos, que levem em
consideração relações emocionais, aspectos sociais e outros milhares de detalhes.

Dessa forma, o designer de interação cria produtos que sejam úteis no dia a dia de um público
específico. Para isso, sempre leva em consideração algumas competências principais.
Vejamos cada uma delas a seguir!
Interaction Design
Design de Interação

Compreensão ou Legibilidade

Um dos pilares para a aplicação do design de interação é a legibilidade. Em termos práticos,

ele significa que produto desenvolvido sempre faz parte de uma solução completa que leva
em consideração funcionalidades, como:

•Facilidade de compreensão pelo usuário;

•Interpretação intuitiva da proposta do serviço;

•Navegação espontânea.
Interaction Design
Design de Interação

Usabilidade

Mais específica, outra funcionalidade importante do design de interação é a usabilidade. Esta tem

relação direta com o manuseio dos sistemas de maneira simples.

Para o teste dessa função, os designers podem utilizar mecanismos como mockups (versão

reduzida ou tamanho real do projeto), wireframes e protótipos.

Funcionalidade

Nessa competência o design de interação tem o objetivo claro de responder a uma pergunta: o

programa é útil e entrega os resultados que foram esperados com o seu desenvolvimento?

Esta etapa demanda a interação do que foram as ideias com a materialização das mesmas. Por

isso, ela depende em grande parte da abordagem escolhida apresentada no tópico anterior.
Interaction Design
Design de Interação

Visualização

O IxD se baseia também no design de experiência (UX DESIGN) e, por isso, a maneira com
que se apresenta a interface com o usuário é essencial.

Com isso, o designer deve se atentar aos seguintes aspectos:

•Representação visual, como imagens, vídeos e templates;

•Tempo de carregamento de páginas e recursos utilizados;

•Comportamento do usuário nas páginas e interação com os recursos.

Além disso, para essa competência a satisfação do cliente é fundamental. Por isso,
aconselha-se a fazer pesquisas para coletar feedbacks e ter insumos para os processos de
melhoria contínua.
Interaction Design
Design de Interação

Programação e processamento de dados

Outra aplicação comum do design de interação é na apresentação de projetos desenvolvidos por

profissionais responsáveis por programação e processamento de dados. Afinal, com isso
conseguem garantir as demais competências.

Idealmente, os designers de interação devem ter conhecimento também de programação, para

garantir que não haverá falhas tanto de funcionamento quanto de usabilidade.

Apesar do design de interação ser mais utilizado por programadores front-end, ele também pode ser
um diferencial para quem trabalha com foco em back-end.
Interaction Design
Design de Interação

Mockups

Mockup consiste em uma representação de um

determinado projeto, que pode ser feita em escala
ou em tamanho real. Ele é aplicado na apresentação
de ideias de maneira mais elaborada, possuindo o
design bastante próximo ao projeto final.

O mockup simula o tamanho, formato, perspectiva,

textura, cor e demais aspectos de um produto.
Dessa forma, a visualização do projeto final ocorre
de forma bem mais facilitada, contribuindo para a
aprovação da ideia ou para fazer as devidas
alterações.
Interaction Design
Design de Interação

Quais as vantagens do design de interação?

Como você já deve ter percebido, o uso do design de interação é uma forma de manter o foco
no cliente e na sua experiência com um produto ou serviço.

Visto isso, é possível destacar algumas vantagens competitivas que empresas que adotam a
metodologia possuem. Confira a seguir:
•Criação e melhoria contínua do desempenho dos produtos para que estejam cada vez mais
adaptados às necessidades dos clientes e usuários finais;
•Monitoramento das atividades nas interfaces e interações com o usuário buscando adquirir
feedbacks pelos seus comportamentos;
•Foco em um produto que seja ao mesmo tempo útil, funcional e com fácil interpretação;
•Elaboração de projetos que visam contribuições mais assertivas de todas as áreas
envolvidas, dando insumos alinhados para todas.
Interaction Design
Design de Interação

Acesse o www.miro.com/app/dashboard, para usar as ferramentas que veremos a seguir:

Interaction Design
Design de Interação

Navegação e Prototipagem

Wireframes

Segundo Teixeira (2015), Wireframes

são: Um guia visual que representa a
estrutura da página, bem como sua
hierarquia e os principais elementos
que compõem.
Útil para discussão de ideias como
o time e como os clientes, e também
para informar o trabalho dos diretores
de arte e desenvolvedores.
Interaction Design
Design de Interação

Navegação e Prototipagem

Os Wireframes definem primitivamente o Design Visual do projeto, são os primeiros sketches

(proposta de desenho) e consistem na representação diagramada das informações e das
estruturas do design final do aplicativo, ou seja, apresenta formas geométricas e
funcionamentos de todas as ações. Com isso, desenvolver Wireframes é um passo necessário
neste processo de criação, visto que, ajuda a esclarecer todos elementos individuais de cada
tela do projeto.

Dessa forma, é possível estabelecer as áreas de interações, fluxos e o próprio design do

aplicativo.
Interaction Design
Design de Interação

Navegação e Prototipagem

Com isso, desenvolver Wireframes é um passo necessário neste processo de criação, visto
que, ajuda a esclarecer todos elementos individuais de cada tela do projeto,
independentemente se o projeto é para Web Site ou Mobile App.

Dessa forma é possível estabelecer as áreas de interações, fluxos e o próprio design do

aplicativo, independentemente se for um Web Site ou Mobile App. É importante ressaltar que,
para ambos os casos, pode-se utilizar o miro.com, como suporte.
Interaction Design
Design de Interação

Navegação e Prototipagem

Durante o processo de criação dos Wireframes alguns fatores são considerados, tais como,
garantir que o aplicativo seja criado de acordo com os objetivos definidos, oferecer caminhos
de navegação focados na usabilidade e no público alvo. Além de, fornecer os feedbacks dos
usuários, diminuindo a quantidade de erros de usabilidade.

Perguntas mais comuns para buscar compreender a ideia para a criação de Wireframes:

- Qual será o primeiro elemento que usuário visualizará?

- Quais campos de entrada de texto, caixas de seleção, menus e botões devo colocar na tela
para otimizar o uso?

- Tem alguma consideração em particular que julgue importante a fazer?

Interaction Design
Design de Interação

Navegação e Prototipagem

A partir de uma boa arquitetura de informação, os Wireframes devem apresentar os

elementos necessários de navegação, mostrar os caminhos percorridos pelos usuários,
entender possíveis comportamentos e respostas a interface.

A utilização de Wireframes no projeto é de extrema importância, dado que facilitam na

concepção do layout final. Vale lembrar, que os Wireframes são experimentações do
projeto e podem sofrer alterações durante o processo.

Desse modo, são feitos em sua maioria a mão utilizando papel, caneta/lápis e pode,
também, serem criados através de programas computacionais.
Interaction Design
Design de Interação

Navegação e Prototipagem

em papel
Interaction Design
Design de Interação

Navegação e Prototipagem

em computador
Interaction Design
Design de Interação

Navegação e Prototipagem

Os Wireframes são desenvolvidos utilizando o Card Sorting e Site Map como base, muda-se
da ramificação de palavras com suas funções e começa a ganhar suas características visuais
organizadas por tela.

Os Wireframes profissionais podem ser criados por ferramentas computacionais, plataformas

digitais específicas para UX e UI design, como é o caso do Figma e Adobe XD, por exemplo.
Interaction Design
Design de Interação

Navegação e Prototipagem

Figma: WebSite ou WebSystem Wireframe

Interaction Design
Design de Interação

Navegação e Prototipagem

Figma: Mobile App Wireframe

Interaction Design
Design de Interação

Navegação e Prototipagem

Protótipo

Protótipos são a materialização de uma

Ideia de forma rápida, para que possa ser
aprimorada antes do desenvolvimento ou
de ser replicada em larga escala.
Pode-se dizer que é um experimento.
Protótipos navegáveis são aqueles
construídos de acordo com os princípios
da matéria digital: ao contrário de
documentos estáticos, no protótipo
navegável você clica e navega.
(NAHRA, 2018).
Interaction Design
Design de Interação

Navegação e Prototipagem

Protótipo
Interaction Design
Design de Interação

Navegação e Prototipagem: Desktop System

https://www.youtube.com/watch?v=6lS-T0-nQ0U
Interaction Design
Design de Interação

Navegação e Prototipagem: WebSystem

https://www.youtube.com/watch?v=9dJqJJYLYCk
Interaction Design
Design de Interação

Navegação e Prototipagem: WebSite

https://www.youtube.com/watch?v=JAjkqLYWEO8
Interaction Design
Design de Interação

Navegação e Prototipagem: Mobile App

https://www.youtube.com/watch?v=VX0pgwV0mqE
Interaction Design
Design de Interação

UI Design: Moodboards

Segundo Teixeira (2015),

Moodboards são coleções de
imagens e referências que
eventualmente se transformarão
no estilo visual do produto.
Interaction Design
Design de Interação

UI Design: Moodboards

Moodboards também conhecidos como painéis semânticos, são referências visuais, de fotos a
texturas, carregam uma série de elementos que favorecem a visualizar as ideias que poderão
se tornar uma referência para o projeto final.

Através dos moodboards, torna-se as ideias mais claras e dão uma identidade para a
interface. As inspirações para esse projeto são formas geométricas simples, cores
contrastantes, utilização de imagens e de ícones pictográficos para melhorar a tomada de
decisão dos usuários.
Interaction Design
Design de Interação

UI Design: Moodboards

Vale lembrar que o moodboard são

primeiras ideias de como serão os
elementos do projeto, pois durante as
próximas etapas eles podem ser
modificando de acordo com os testes
de aplicação feitos.
Interaction Design
Design de Interação

UI Design: UI Elements

UI Design, ou User Interface Design

(Design de Interface do Usuário), é o meio
pela qual uma pessoa interage e controla
um dispositivo, software ou aplicativo.
Esse controle pode ser feito por meio de
botões, menus e qualquer elemento que
forneça uma interação entre o
dispositivo e o usuário.
(MATIOLA, 2018).
Interaction Design
Design de Interação

UI Design: UI Elements

O Design da Interface é o início da concepção do projeto final, através dele é possível

visualizar os elementos visuais, a usabilidade, a arquitetura da informação, a navegação e a
transição de telas, ou seja, todos os recursos que agregam e melhoram a forma dos usuários
a interagir com o aplicativo.

Mas, contudo, não se pode considerar somente a interface visual, os elementos devem ser
funcionais e transmitir os conceitos de usabilidade dentro do projeto.
Interaction Design
Design de Interação

https://www.youtube.com/watch?v=5CxXhyhT6Fc
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Cliente
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Cliente
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Cliente
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Cliente
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Profissional
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Profissional
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Profissional
Interaction Design
Design de Interação

Telas de um Protótipo de Projeto

Usuário Profissional
Interaction Design
Wireframe WebSite x Mobile App

ATIVIDADE ASSISTIDA

Elabore o wireframe do seu projeto para desenvolvimento de um protótipo da interface

com o usuário, para certo WebSite ou WebSystem, responsivo, Mobile App, baseados
em UX e UI: