teorico_II

Prévia do material em texto

Design de Interação
Responsável pelo Conteúdo:
Prof. Me. Ivan Ordonha Cechinel
Revisão Textual:
Prof.ª Me. Sandra Regina Fonseca Moreira
Propondo Modelos
Propondo Modelos
 
 
• Trazer ao estudante informações essenciais ao dia a dia de quem lida profissionalmente com 
o desenvolvimento de soluções na área digital, listando os principais métodos e ferramentas 
utilizados no mercado de trabalho. 
OBJETIVO DE APRENDIZADO 
• Ferramentas do Design para Busca de Soluções;
• Pesquisas com o Usuário;
• Processo de Criação;
• Ideação, Prototipação e Testes de Usabilidades;
• Quem é o Usuário? Seus Objetivos;
• Ferramentas e Métodos.
UNIDADE Propondo Modelos
Ferramentas do Design 
para Busca de Soluções
Nos primórdios, a grande diretriz do design era:
A forma segue a função
O que hoje conhecemos como Design Thinking teve início na Alemanha nas primeiras 
décadas do século XX, em uma instituição chamada Bauhaus, que era uma grande 
escola de arquitetura, arte e design da época.
Lá colocavam o ser humano no centro do design e foram inovadores por isso. 
Criaram produtos de uso intuitivo como o berço abaixo, em que as formas circulares 
sugerem o “balançar” para ninar o bebê.
Figura 1 – Obra de Peter Keler, 1923
Fonte: Reprodução
O Design Thinking representa a busca de soluções para problemas de naturezas di-
versas, por meio de ideias e reflexões, mas de forma prática e sempre com criatividade.
Surgiu do Design, mas pode ser utilizado em qualquer área, em ambiente coor-
porativo ou não.
Pesquisas com o Usuário
Design Thinking na prática. Podemos definir os seguintes tópicos como os prin-
cipais a serem observados em um projeto que visa uma solução digital:
• Definição:
 » O que você e a equipe sabem sobre o problema?
 » Qual a diferença na vida das pessoas com o projeto? 
 » Sair do óbvio, pensar além, obter diversidade de opções. 
8
9
• Empatia:
» Imersão nos hábitos dos usuários;
» Questione tudo, inclusive o que você acha que já sabe;
» O que? Onde? Por quê?
» Acompanhe o usuário (mapa de empatia);
» Quais palavras, termos, eles usam? 
Liste ações, comportamentos, emoções, formas de ver o mundo. Aspectos que 
não se percebem logo de cara, é necessário interagir.
Assim conseguirá as pistas necessárias. 
Processo de Criação
Brainstorm é uma das ferramentas do Design Thinking que facilita o processo 
criativo. É uma dinâmica de grupo criada pelo publicitário americano Alex Osborn 
com o objetivo de resolver problemas específicos ou desenvolver novas ideias para 
um projeto.
cérebro tempestade Tempestade de ideias
Figura 2
O objetivo é, a partir da associação e analise de ideias, chegar a uma solução 
original para o problema.
É uma atividade simples que consiste em reunir o maior número de ideias em um 
determinado espaço de tempo (meia hora, por exemplo) sem filtrar ou julgar se as 
ideias levantadas são boas ou ruins. E, apenas em um segundo momento, as ideias são 
selecionadas e organizadas em grupos (o que constitui o chamado “mapa mental”).
Regras do Brainstorming
• Não critique, julgue ou avalie: Não há discussão sobre nenhuma ideia apre-
sentada, qualquer uma será aceita;
• Deixe fluir as ideias: Por mais louca que seja a ideia, fale ou a encoraje;
• Busque a quantidade de ideias: Solte o máximo de ideias que vier na sua ca-
beça. Quantidade gera qualidade;
9
UNIDADE Propondo Modelos
• Não se prenda à primeira ideia: Quando a próxima concepção desbloquear 
a primeira e o ciclo for estabelecido, outras opções mais adequadas vão certa-
mente surgir;
• Inspire-se nas ideias apresentadas: Utilize-se das ideias apresentadas pelos 
colegas, mude, melhore e crie a sua; 
• Tenha poder de síntese: A última dica, ou regra, não é menos importante do 
que todas as outras, nem as exclui. É essencial que você, ao comunicar sua ide-
alização, não se estenda e tente explicá-la.
O Brainstorm tem a função de organizar inicialmente o conjunto de ideias até se 
chegar à melhor. Depois da ideia escolhida é importante melhorá-la e refiná-la.
Figura 3
Fonte: Getty Images
Como fazer em grupo?
Comece no individual e depois para o grupo:
1. Reúna um grupo de pessoas;
2. Nomeie um participante como facilitador;
3. Nomeie um ou dois participantes como redatores;
4. Estabeleça o tempo máximo de duração da sessão de geração de ideias;
5. Defina o tema;
6. Inicie o processo de geração de ideias; 
7. Anote as ideias exatamente como foram faladas. Não as interprete; 
8. Todas as ideias apresentadas serão ouvidas por todos; 
9. Apenas uma ideia é apresentada por vez, deixe o processo organizado.
10
11
10. Conclusão do Processo:
» Esclareça o significado de todas as ideias; 
» Descarte as ideias não úteis; 
» Elimine duplicatas de ideias; 
» Selecione as melhores ideias/soluções por votação; 
» Selecione as três ideias mais votadas, destacando-as.
Como fazer individualmente?
Comece no individual e depois para o grupo: 
1. Defi na o tema;
2. Inicie o processo de geração de ideias;
3. Anote as ideias exatamente como foram pensadas. Não as interprete;
4. Esclareça o signifi cado de todas as ideias;
5. Descarte as ideias não úteis;
6. Elimine duplicatas de ideias;
7. Selecione as melhores ideias/soluções por grau de importância.
Visualização
Reúna ideias do Brainstorm, não descarte logo de cara uma ideia; Poderá usar 
votação da equipe para escolha da ideia.
Protótipo
Tire as ideias da mente para concretizá-las fisicamente; diversas técnicas podem 
ser utilizadas. Desde esboços simples feitos à mão até interfaces e layouts mais ela-
borados, confeccionados em softwares ou em ferramentas online, por exemplo. 
Pode-se ter baixa, média ou alta fidelidade.
Aperfeiçoamento 
Teste com uma parcela de usuários, mantendo naturalidade. Anote, desenhe, 
registre tudo que for necessário, para depois corrigir.
Então, a grande pergunta é: Para que? E não: O que? Ou seja: Para que você quer isso?
11
UNIDADE Propondo Modelos
Ideação, Prototipação e 
Testes de Usabilidades
Nos primórdios
Nos anos 90, recebia-se o “Briefing” e realizava-se o “Benchmark”, que era uma 
pesquisa de concorrentes, aí fazia-se o site e testava-se a usabilidade, simples assim.
A coisa evoluiu
No Design Thinking, o Benchmark passou a ser só um dos aspectos a serem ana-
lisados. A primeira grande etapa é a IMERSÃO ou DISCOVERY – que significa sair 
do escritório, ir a campo, vivenciar, ver se faz sentido, se é necessário desenvolver 
um aplicativo ou não, por exemplo, para resolver o problema do usuário.
As 3 etapas.
Imersão
“Vestir os sapatos do usuário” 
A grande palavra aqui é EMPATIA.
Verificar na prática que soluções o usuário necessita. Quais problemas reportam.
Levantar perfil do usuário, não só dados demográficos, mas sim pesquisa qualita-
tiva – traçar jornada. Designer “Shadow” acompanha a rotina sem interferir no dia-
-a-dia, para criar algo relevante. Realização de dinâmicas em grupo – “focus group” 
– ainda que não exista receita pronta.
Definição
Depois de identificado o ecossistema do usuário reúna tudo que você e a equipe 
descobriram na fase de IMERSÃO.
• Liste os problemas descobertos;
• Valide hipóteses (ver se o que você “achava” condiz mesmo com a realidade);
• E refletir sobre: O que eu quero responder com isso?? Será relevante para o 
usuário?? Isso varia para cada projeto.
Ideação
Proposta de solução para o problema. Cocriação (diferentes equipes trabalhando 
juntas). Aliás, esse é o grande princípio do Design Thinking.
12
13
• Aqui é realizado o Brainstorming (parte inicial da criação);
• Prototipagem/validação: (testes de usabilidade com o usuário ou internamente);
• O protótipo pode ser desenvolvido de diversas maneiras (apenas gestual ou layout
mais aprimorado) – depende também de prazos e investimento do projeto;
• Entra aí também UX (User Experience – faz toda pesquisa e prototipagem – 
profissional muito em voga na área de design atualmente - é o antigo arquiteto 
de informação) e UI (User Interface – antigo diretorde arte).
Quem é o Usuário? Seus Objetivos
Estudo/pesquisa de campo. É necessário sair de casa, do escritório e ir até o usuá-
rio. Observar o usuário utilizando o produto ou serviço para descobrir coisas comuns 
a esses usuários, ou seja, usuários que têm o mesmo objetivo não necessariamente 
apresentam o mesmo perfil demográfico.
• Utilizar como recurso entrevista escrita ou gravada (imagem e som);
• Se possível, pesquisar pelo menos 8 e comparar os 4 resultados mais próximos, 
mais semelhantes; 
• Perguntas centradas no serviço, por exemplo: “Como você imagina comunicar?” Re-
alizar determinado serviço dentro do app, e não apenas perguntar se “Achou legal”.
Persona
Representa conjunto de atributos e características, uma espécie de “ficha técnica” 
do usuário, define um perfil.
No viés do design, é uma pesquisa qualitativa, ou seja, uma persona de UX não 
é baseada apenas em estatísticas, em dados analíticos, ou no que você ou a equipe 
“acham”. Importante levantar qual o objetivo do usuário e não apenas dados demo-
gráficos. Mapear as necessidades do usuário e assim determinar qual será a solução 
digital mais adequada e necessária a ele.
O perfil definido é a justificativa para a tomada de decisão durante o processo 
de criação. Levantar hábitos e costumes, dentre outros, e se tem alguma dificuldade 
para realizar o objetivo. 
Criar uma ficha com detalhes do perfil e objetivos. A ficha é para ser consultada e 
não deve ser algo estático. Pode ser que se precise de mais conversas com o usuário 
para adquirir novos feedbacks.
13
UNIDADE Propondo Modelos
Ferramentas e Métodos
Escopo
• Representa estratégias – são os porquês do projeto;
• Escopo é o que é como;
• É onde se definem os conteúdos para o usuário (vídeos, texto, entre outros).
Por exemplo, se estiver sendo desenvolvido um aplicativo, definem-se quais tare-
fas o aplicativo oferecerá para ajudar o usuário, devendo ser fruto de uma pesquisa a 
respeito do que é mais relevante. Funciona como uma espécie de roteiro. 
Arquitetura de Informação 
Relaciona-se à experiência do usuário e muitas vezes acaba virando sinônimo de 
UX design, porém constitui apenas parte da experiência desse.
Dentro de um cenário ideal, geralmente trata de 5 aspectos principais:
Estratégia – escopo – estrutura (flUXograma) – wireframe – interface 
Organiza conteúdos definindo hierarquia da informação, nomenclaturas dos bo-
tões, itens do menu, e define de que maneiras a distribuição dos elementos que irão 
compor a interface facilitam ou permitem que o usuário consiga chegar em determi-
nado serviço dentro do site, sistema ou aplicativo.
Ou como os conteúdos se organizam em uma loja virtual, por exemplo. Este tra-
balho concretiza-se através do wireframe. 
Wireframe
Constitui a base (estrutura) para a interface e muitas vezes pode ser interativo. 
Tem por objetivo explicar o contexto de uso, por isso não apresenta a arte final. 
Nessa etapa, definem-se posição de imagens e texto, hierarquia de títulos, subtítulos, 
botões, itens do menu, entre outros.
Importante!
Existem ferramentas online e softwares para se desenvolver wireframes, como por 
exemplo, o Axure, Sketch app e o Adobe XD, contudo, eles também podem ser confeccio-
nados gestualmente com lápis e papel, por meio de esboços. 
O wireframe constitui fase de planejamento, e investir tempo nessa etapa será melhor, 
pois evitará retrabalho, desperdício de tempo e dinheiro, além de poder ser usado como 
“documentação” do processo criativo. 
14
15
Figura 4 – “Mostra a forma, não a aparência”
Fonte: Getty Images
Interface Intuitiva: Por exemplo, os padrões de ícones de reconhecimento universal, como 
a “lupinha”, geralmente acompanha o campo de busca indicando “pesquisa”, “procura”. 
Detalhes como este ajudam a fazer com que a interface se torne intuitiva. 
Abaixo, segue um exemplo de fluxograma com telas de um aplicativo represen-
tando o fluxo de navegação.
Tela inicial Tela inicialaba do menu
Tela
Prefácio
Tela
Capítulo 1
Tela
Capítulo 2
Tela
Capítulo 3
Figura 5
Podemos observar a seguir, exemplo de wireframe de algumas telas de um apli-
cativo concebido de maneira gestual. 
15
UNIDADE Propondo Modelos
Figura 6
Fonte: Acervo do conteudista
E, na sequência, os mesmos wireframes confeccionados com recurso computacional. 
Figura 7
Fonte: Acervo do conteudista
16
17
Figura 8 – Planejamento é essencial para se alcançar uma solução efi caz
Fonte: Getty Images
Mas, geralmente, é assim mesmo?
Isso tudo compõe o cenário ideal proposto pelo Design Thinking. Não significa 
que todas as equipes ou empresas o seguem. 
Contudo, se o projeto for sério e se realmente há o objetivo de se resolver pro-
blemas das pessoas e da sociedade de maneira efetiva e eficaz, pensando o desen-
volvimento do país e do mundo, o Design Thinking pode amparar estes objetivos.
Metodologias de trabalho 
Abaixo, uma lista com alguns métodos de trabalho que também são utilizados no 
dia a dia de quem lida com UX e UI:
• Design Sprint;
• Scrum; 
• Kamban;
• Lean;
• Métodos ágeis. 
17
UNIDADE Propondo Modelos
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
Lucidchart
Ferramenta online gratuita para criação de flUXogramas.
https://bit.ly/3kamKeO
Mockflow
Ferramenta online gratuita.
https://bit.ly/30tnCDT
Marvel
https://bit.ly/2Xnji76
MOQUPS
https://bit.ly/3i3RI6O
MOCKPLUS
https://bit.ly/3k9mKf5
Recursos de Acessibilidade
https://bit.ly/2ECNoNd
18
19
Referências
FERREIRA, A. R. Comunicação e aprendizagem: mecanismos, ferramentas e co-
munidades digitais. São Paulo: Erica, 2014. (e-book) 
IDEO. Org. Design Kit – The field guide. Disponível em: <http://www.designkit.
org//resources/1>.
WHITE, A. Mídias digitais e sociedade. São Paulo: Saraiva, 2017. (e-book) 
19