UNP DL - Roterio de Estudos

Prévia do material em texto

11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 1/15
Introdução
As técnicas de prototipação de interface têm grande utilidade no processo de desenvolvimento
de software , games e produtos. Elas permitem extrair e apresentar informações mais
completas à equipe de desenvolvimento e aos usuários, aproximando-os do que realmente
precisam, mesmo antes de iniciarem qualquer desenvolvimento ou criação.
No mercado, muitas empresas acabam ignorando sua valiosa importância no período de
concepção do projeto. Nesse momento, os membros da equipe de negócios precisam entender
qual é a necessidade real do cliente e identi�car o grau de di�culdade da aplicação,
aperfeiçoando ainda mais o produto (já com testes de usabilidade) e identi�cando as melhorias
de que o sistema necessita, para obter a satisfação do cliente com agilidade e e�ciência. Isso
facilitará o serviço, por meio do nível de �delidade de prototipagem, que, quanto mais
avançado, mais realidade trará ao cliente.
Protótipos de Interface
Roteiro de Roteiro de 
EstudosEstudos
Autor: Adilson Soares da Silva
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 2/15
Trabalhando Melhor a
Usabilidade e a Prototipação na
Entrega do Projeto
Utilizamos a usabilidade para descrever a interação do usuário com a aplicação. Esta qualidade
agiliza o uso da aplicação, ao diminuir os possíveis erros.
Algumas vantagens notadas com a utilização da usabilidade relacionada à aplicação são:
aprendizado facilitado; aumento da produtividade de acordo com a baixa complexidade; menor
taxa de erros; e maior satisfação do usuário.
Para que a aplicação sobreviva, ou seja aceita pelo mercado, a usabilidade é fundamental.
Imagine um site , por exemplo. Caso ele apresente algum grau de di�culdade para ser
navegado, como menus complicados, as pessoas não o utilizarão; se o que é ofertado ou
vendido não estiver indicado de forma clara, não será possível assegurar o acesso do cliente; e,
se não atender prontamente ao que o usuário espera, possivelmente este vai preferir acessar o
mesmo conteúdo em outro site .
Dicas de usabilidade podem se aplicar a diversos cenários, como desenvolvimento de produto,
sistemas, sites e outros. Neste caso, é de grande valia utilizar a avaliação heurística, método
tradicional de avaliação de usabilidade criado por Nielsen e Molich, usado pela primeira vez em
1994, em um sistema web realizado pela Sun Microsystems.
10 Recomendações Heurísticas que Melhoram a
Usabilidade de um Sistema
1. Diálogo simples e natural : adicione apenas informações relevantes; evite que seu
usuário perca tempo com informações desnecessárias.
2. Falar a linguagem do usuário : clareza nas respostas. Será que meu usuário entenderá o
que estou falando?
3. Minimizar a sobrecarga de memória do usuário : facilite a lembrança do usuário; traga
o que ele precisa de forma rápida e exata.
4. Ser consistente : mantenha padrões de acesso; evite realizar vários atalhos para uma
mesma coisa.
5. Dar feedback : mantenha o usuário informado do que está ocorrendo. Exemplo: “Enviou
um arquivo? Aguarde, estamos processando”.
6. Saídas claramente marcadas : mantenha o usuário alerta ao sair do sistema e, se
possível, salve o estado atual da tela, para que não seja necessário refazer tudo.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 3/15
7. Fornecer atalhos : disponibilize atalhos, para que a produtividade seja aumentada.
8. Boas mensagens de erro : explique o erro de forma simples e direta, e explique ao
usuário como efetuar a correção.
9. Prevenir erros : evite possibilidades de erros; por exemplo, em um campo de
preenchimento que só aceita números, prepare a aplicação para aceitar somente
números.
10. Ajuda e documentação : disponibilize o manual da aplicação e documentação de forma
simples e objetiva, e mantenha o usuário atualizado sobre as mudanças que foram
implementadas em uma nova versão do sistema.
E agora? Seguimos as instruções das setas ou dos botões laterais?
Figura 1 - As setas descrevem os botões ao lado delas? 
Fonte: Examples... (2010, on-line ).
Vantagens de Usar os Níveis de
Prototipagem de Forma Correta
Para que tenhamos êxito no desenvolvimento dos nossos projetos, é importante entendermos
os níveis de prototipação e de que forma utilizá-los, para facilitar a �delização da entrega ao
cliente.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 4/15
Antes de qualquer criação de protótipo, é interessante entender para qual público ele está
sendo criado. Quem usará este protótipo que você está criando?
Desenvolvedor: foco no desenvolvimento da aplicação. 
Patrocinador/Cliente: foco na validação para aprovação do produto. 
Usuário: foco na funcionalidade e no feedback ; basta buscar melhorias ou mudanças.
A prototipagem rápida lança mão dos recursos computacionais no intuito de simular
características e comportamentos de como será o sistema no �nal. Assim, ela proporciona ao
usuário uma experiência mais próxima do produto �nal.
Usamos, de forma inicial e simples, o protótipo de baixa �delidade. Ele conta com baixo nível
de detalhamento, baixo custo, agilidade na prototipação, permite trabalhar algumas
funcionalidades e consegue ser usado de forma rápida. Apesar de existirem alguns softwares
para tal �nalidade, é possível usar apenas papel e caneta; nesta fase, não se preocupe tanto
com layout ou cores. A etapa de baixa �delidade é fundamental para a de�nição do produto e o
levantamento de requisitos. Ela também é prática e �exível.
Figura 2 - Protótipo de baixa �delidade 
Fonte: Elaborada pelo autor.
Ainda com relação aos protótipos de baixa �delidade, eles podem ser implementados por meio
da disposição de telas em sequência (como no exemplo acima). Seu grau de funcionalidade e a
similaridade de interação não são fundamentais nessa tipologia de protótipo; assim, a
veri�cação limitada de erros é uma de suas desvantagens.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 5/15
Embora ainda exista uma preocupação com o design , o protótipo de média �delidade possui o
design realista como uma de suas vantagens. Ele também é conhecido como wireframes ,
desenvolvido na parte de arquitetura da informação, e trabalha com prioridade à informação e
à navegação. Ele utiliza simulação simples, com interação com botões. Geralmente, é
considerado o primeiro passo em processos de design , e um de seus aspectos positivos é o
próprio design .
É possível usar algumas ferramentas para apoio em seu desenvolvimento. Balsamiq ou
Draw.io, por exemplo, oferecem elementos para apoio, como botões, formulários e menus ,
facilitando o protótipo e fazendo com que ele conte com um pouco mais de interação.
Figura 3 - Protótipo de média �delidade 
Fonte: Yadav (2019, on-line ).
Quando trazemos algo de forma mais avançada e com design muito bem elaborado, usamos a
prototipagem de alta �delidade. Ela é muito �dedigna ao produto �nal do cliente e possui
conteúdos, �uxos de navegação e interação. Após apresentá-la ao cliente, já se tem uma
sensação de proximidade da entrega; o cliente �ca mais seguro e satisfeito, com maior certeza
da “funcionalidade”. Ela costuma ser completamente interativa.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 6/15
Figura 4 - Protótipo de alta �delidade 
Fonte: Medfox (2020, on-line ).
Também é possível classi�caros protótipos entre horizontais ou verticais. Coutinho (2006, p.
22) a�rma que os horizontais possuem a maior abrangência como característica. E pelo fato de
se constituírem em representações mais distantes do real, os testes de usabilidade tornam-se
difíceis. Os verticais consistem no contrário e “contemplam um menor número de
características, contudo essas características são apresentadas como uma representação mais
próxima do sistema �nal”.
Mayhew (1999) fala sobre as dimensões que de�nem a �delidade dos modelos: detalhamento
(a medida dos detalhes suportados), grau de funcionalidade (o alcance dos detalhes quando
operados pelo usuário), similaridade de interação (o quão análogo o modelo é do produto �nal)
e o re�namento estético (o quão próximo da realidade é o modelo).
Souza e Silva (2013), ao citarem os trabalhos de Barbosa e Silva (2010), destacam três métodos
de avaliação: investigação (busca reunir informações sobre os usuários do sistema), inspeção (o
avaliador busca se colocar no lugar do usuário) e observação (observa-se o usuário
manuseando).
Modelo Conceitual, Wireframe e
Mockup , Trazendo a Realidade
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 7/15
mais Próxima da Entrega dos
Projetos aos Clientes
Esta fase é o momento em que os designers de interação entregam valor visual ao cliente. Muito
usados para sites e aplicativos, os mockups , ao apresentarem um �uxo de interação, trazem
interatividades e riquezas de valores surpreendentes, como se o projeto já estivesse pronto.
Figura 5 - Modelo de prototipagem com Adobe XD 
Fonte: Portillo (2019, on-line ).
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 8/15
Figura 6 - Modelo de prototipagem com o InVision 
Fonte: Portillo (2019, on-line ).
Ferramentas de Prototipagem
Paredes (2019) elenca algumas ferramentas para prototipar, e vamos citar algumas delas. O
Justinmind consiste em um software para wireframe interativo. Ele oferece uma gama de
componentes interativos, possibilitando criação para as plataformas iOS, Android, dentre
outras. Ele também conta com um simulador de aplicativo e com uma função de exportação
em HTML interativo.
Paredes (2019) também sugere o Proto.io, que consiste em uma ótima ferramenta para criar
aplicativos para iOS e Android. A sua linha do tempo integrada é a sua principal característica.
O Mockups.me possui versões para desktop e on-line e apresenta versões gratuitas e pagas. A
sua grande vantagem consiste na possibilidade de projetar para interfaces de toque, o que
permite uma melhor simulação do produto �nal (PAREDES, 2019).
GAIA Protótipo
Oliveira (2018) propõe um framework de prototipação para o desenvolvimento de software , que
possui as seguintes fases: preparação, planejamento, desenvolvimento, evolução e
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%2… 9/15
implantação.
A fase de preparação possui quatro etapas: levantamento de requisitos, de�nição de
tecnologias, veri�cação e validação. No planejamento também há quatro etapas: análise de
risco, divisão da equipe, distribuição de tarefas e de�nição de sprints . No desenvolvimento há
cinco etapas: codi�cação, reuniões diárias, troca de experiências, atualização de tarefas e
protótipo. Na evolução há três etapas: veri�cação e validação, reunião e atualização de tarefas.
Atente-se à etapa de veri�cação e validação, presente tanto na fase de preparação como na de
evolução. Quando nos referimos a ela, na fase de preparação, nos referimos ao fato do
protótipo de interface ser desenvolvido com base no levantamento de requisitos realizado. Já
na fase de evolução, nos referimos ao momento de comunicação com o cliente para apresentar
o protótipo e validá-lo.
Prototipação Evolutiva
Como o nome sugere, nesta técnica de prototipagem, adicionam-se funcionalidades conforme
o andamento do projeto, e “o sistema vai sendo ampliado, de acordo com o grupo de
funcionalidades que vai sendo incorporado ao protótipo, a terminar por ter um protótipo muito
semelhante ao produto �nal” (COUTINHO, 2006, p. 27).
Prototipagem Descartável
Este tipo de prototipagem é normalmente utilizado para mitigar os riscos com os requisitos.
Assim, desenvolve-se o protótipo a partir de uma especi�cação inicial, ele segue para avaliação
e, então, é descartado. Assim, ao começar com aqueles requisitos que não são bem
compreendidos, ele tem por objetivo validar ou derivar os requisitos do sistema (AEP,2017).
Prototipação rápida
A Associação Empresarial de Portugal, Câmara do Comércio e Indústria (AEP, 2017) compartilha
que o uso da prototipação rápida pode incrementar os custos diretos de um projeto, porém, ao
prover mais segurança no processo, pode permitir um bom custo-benefício. O primeiro
processo desse nível a aparecer foi o SL/SLA Estereolitogra�a. O SLS é o mais utilizado nos EUA
e na Europa e permite a utilização de pós de aço ou cobre revestidos de polímero.
Facilidade de Compreensão do
Usuário a Partir do Uso de
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%… 10/15
Elementos de Interface
Toda interface é composta de um conjunto de elementos que dão ação às solicitações do
usuário, como controle de entradas, componentes de navegação e informativos.
Controle de Entradas: Composições de Elementos que
Recebem Informação dos Usuários
Botões : bem comuns e importantes na aplicação, sua função é chamar para uma determinada
ação, como no caso de formulários e menus .
Ícones : botões ou links que trazem uma informação clara aos usuários. São bastante usados
para navegação.
Caixa de seleção : permite ao usuário selecionar mais de uma opção. Exemplo: em um sistema
de venda de sorvete, o cliente pode escolher mais de um sabor, como morango e baunilha.
Radio : permite ao usuário escolher apenas uma opção. Exemplo: em um formulário de
cadastro de cliente, permite escolher apenas um gênero, masculino ou feminino.
Slide bar : bem comum em limitador de valores ou percentuais. Exemplo: em um site de busca
de hotéis, permite que as diárias sejam �ltradas de R$ 110,00 –R$ 250,00.
Lista suspensa com botão : apresenta as informações após a seleção. Exemplo: no cadastro
de cliente, ao clicar em UF, aparecerão os estados que compõem a Federação, como Paraíba,
Pernambuco, Bahia, São Paulo, Rio de Janeiro etc.
Lista suspensa : semelhante à anterior, porém não é necessário pressionar um botão.
Exemplo: após ter escolhido a UF, a listagem contendo as cidades já é apresentada.
Ativar/Desativar : botões que permitem habilitar ou não uma determinada função. Exemplo:
desativar noti�cação de mensagens em um sistema — ao pressionar “não”, você deixará de
receber as mensagens.
Caixas de entradas de textos : caixas para recebimentos de inputs , entradas de texto.
  Exemplo: em um sistema que permite cadastrar e-mails para receber notícias diversas, o
campo que recebe o e-mail a ser cadastrado é uma caixa de entrada.
Data e hora : função que permite selecionar datas e horas. Exemplo: em um sistema de
consulta, permite marcar uma consulta para o paciente, selecionando a data e a hora. Muito
usado também em reservas de hotel ou passagens aéreas.
Componentes de Navegação
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%… 11/15
Menus : são itens de navegação. Exemplo: em um sistema de vendas, oferecem a opção de
cadastrar produtos e clientes.
Figura 7 - Menus de navegação 
Fonte: Diego Alies / 123RF.
Campo de pesquisa : facilita a busca de o que o cliente precisa.Exemplo: no celular, basta
digitar as iniciais da palavra, e o sistema apresenta as funções que se iniciam com aquelas
letras. Exemplo: ao digitar “mens”, o ícone de mensagem é apresentado.
Breadcrumbs : são os “caminhos de pão”. Proporcionam mais facilidade ao usuário. Exemplo:
em um sistema de delivery , inclui a sua localização e apresenta os restaurantes próximos a
você ou promoções.
Paginação : muito comum em sites e blogs que possuem muito conteúdo. Exemplo: um blog
com notícias de viagens apresenta as opções 1, 2, 3, 4, 5 e assim por diante, para você
selecionar a página que desejar.
Slides : permitem que os usuários deslizem por opções. Exemplo: um sistema de delivery tem
várias categorias com imagens, como entrega grátis, pratos saudáveis, pratos até R$ 9,90 etc.
Com isso, os usuários podem passar para a opção que mais lhes agrade.
Carrossel : semelhante aos slides , é bastante utilizado para imagens.
Tags : forma de acesso rápido por meio de palavras-chave. Exemplo: em sites de notícias, ao
clicar na pesquisa de acesso, digitar a palavra negócios e mandar buscar, você obterá apenas
notícias relacionadas a negócios.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%… 12/15
Informativos
Trazerem informações dos componentes de interação do usuário, erros ou alertas.
Noti�cações :   informações para os usuários por meio daquela aplicação.   Exemplo: em um
aplicativo de venda, o cliente é noti�cado pelo app que a compra foi aprovada. Em um site , ao
digitar um endereço de e-mail inválido, o usuário é noti�cado imediatamente.
Figura 8 - Noti�cações 
Fonte: georgejmclittle / 123RF.
Barra de progresso : indica progressão de determinada etapa de um sistema. Exemplo: em um
sistema de compras, a etapa 1 consiste no preenchimento dos dados pessoais; a etapa 2, nas
informações de compra e assim por diante. É usada também em caso de atualização de uma
aplicação, para apresentar o progresso da ação.
Tooltips : são caixas de dicas e informações relevantes, para que o cliente saiba mais sobre
determinada ação. Exemplo: nova função do menu x; leia mais sobre etc.
Caixa de mensagens : caixa-alerta que permite indicar ou perguntar algo ao cliente a respeito
da aplicação. Exemplo: “Deseja cancelar a venda?”; “Venda realizada com sucesso”; “Imprimindo
o cupom �scal” etc.
Pop-up : janela que permite interação com o usuário, bastante usada para “segurar” o cliente
no acesso ou passar informações importantes. Exemplo: “Antes de sair, veja isso”; “Último dia
da promoção, não perca” etc.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%… 13/15
Usando Padrões e Princípios do
Design de Interação, Aprenda a
Entregar Valor ao Cliente
Já pensou nas boas experiências ou facilidades que os objetos trazem ao seu dia a dia ou nas
muitas complexidades que são passadas para coisas tão simples? Exemplo: um elevador com
inúmeros botões, sendo que você precisa apenas da função de mudar de andar; um ar-
condicionado, que, para ligar, exige que várias funções sejam con�guradas; ou, ainda, um
aplicativo para pedir lanche, cujas funções não são intuitivas, e você desiste de utilizá-lo.
Segundo Don Norman, “pai” da usabilidade e cofundador da Nielsen Norman Group, empresa
norte-americana de pesquisa e consultoria especializada em UX,   existem seis princípios
fundamentais da interação, baseados no design centrado no usuário (NIELSEN, 2012). São eles:
Visibilidade : torne visível o que os usuários necessitam.
Feedback : dê retorno ao cliente, de acordo com a ação executada.
Restrições : evite erros. Exemplo: só permita submeter um formulário após o usuário
preencher as informações obrigatórias ou deixe-o desabilitado e vá habilitando-o
gradativamente, conforme o preenchimento.
Mapeamento : associação de função ao design . Exemplo: um botão volume aumenta e diminui
o som, mas também é importante que apresente o desenho de uma caixa de som ou fones
aumentando e diminuindo o volume.
Consistência : curva de aprendizagem rápida e padrões que auxiliem os usuários a assimilar
melhor seu sistema.
A�ordances : atributo de um objeto que disponibiliza determinada interação. Exemplo: a
dobradiça de uma porta permite movimentá-la de um lado para o outro.
Motta (2016) propõe uma aproximação entre design de interação, enquanto disciplina
projetual, e sociossemiótica. Em sua pesquisa, ele explora a noção de interação sob uma
perspectiva projetual e enfatiza a discussão dos conceitos e diretrizes de usabilidade, bem
como das possibilidades abertas por uma perspectiva semântica dos artefatos.
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%… 14/15
Conclusão
Existem inúmeras ferramentas que auxiliam na entrega do projeto ao cliente. A prototipação
auxilia em todo esse processo, o que garante a obtenção de resultados bem-sucedidos, ou seja,
sem retrabalhos desnecessários e com boa funcionalidade, separando o que é de grande valia
para o cliente e o que é desnecessário, como um custo extra possível de ser evitado.
A utilização dessas ferramentas permite que o cliente visualize, de fato, o que ele precisa e
consiga ter assertividade em sua escolha. Isso gera maior segurança para o desenvolvimento
do projeto e satisfação para o cliente.
Seguindo todos os processos de prototipação de interface até os padrões e princípios de
interação, a possibilidade de realizar entregas bem-sucedidas — e, em consequência disso,
satisfazer o cliente — é bastante alta.
Referências
COUTINHO, J. R. T. S. Prototipagem Rápida como Forma de Envolvimento de Usuário em
Metodologia Ágil de Desenvolvimento de Software . 2006. Trabalho de Conclusão de Curso
(Bacharelado em Ciência da Computação) – Universidade Federal de Pernambuco, Recife, 2006.
Disponível em: https://www.cin.ufpe.br/~tg/2006-1/jrtsc.pdf . Acesso em: 17 ago. 2021.
EXAMPLES of bad design. Blog Shreevatsa , jun. 2010. Disponível em:
https://shreevatsa.wordpress.com/2010/06/29/examples-of-bad-design-2/ . Acesso em: 05 out.
2020.
GUIA Prototipagem. AEP, 2017. Disponível em: https://docplayer.com.br/72823782-Ficha-
tecnica-propriedade-projeto-colaboracao-comunicacao-entidade-beni�ciaria-data-
coordenacao-novo-rumo-a-norte-design.html . Acesso em: 17 ago. 2021.
MAYHEW, D. J. The Usability Engineering Lifecycle . San Francisco: Morgan Kaufmann, 1999.
MEDFOX. Medfox, 2020. Disponível em: https://medfox.cz/en/contact/ . Acesso em: 05 out.
2020.
MOTTA, R. G. Design de interação entre usabilidade e semântica . 2016. Dissertação
(Mestrado em Design) – Centro de Artes, Universidade do Estado de Santa Catarina,
Florianópolis, 2016. Disponível em:
udesc.br/arquivos/ceart/id_cpmenu/1229/Rafael_Garcia_Motta_15087704102105_1229.pdf .
Acesso em: 05 out. 2020.
https://www.cin.ufpe.br/~tg/2006-1/jrtsc.pdf
https://shreevatsa.wordpress.com/2010/06/29/examples-of-bad-design-2/
https://docplayer.com.br/72823782-Ficha-tecnica-propriedade-projeto-colaboracao-comunicacao-entidade-benificiaria-data-coordenacao-novo-rumo-a-norte-design.html
https://medfox.cz/en/contact/
http://udesc.br/arquivos/ceart/id_cpmenu/1229/Rafael_Garcia_Motta_15087704102105_1229.pdf
11/23/22, 3:01 PM Roteiro de Estudos
https://student.ulife.com.br/ContentPlayer/Index?cd=a29fGcmquLJdzkC5jhynpQ%3d%3d&l=bnMOddnu2TW3qx4Pfvcefg%3d%3d&lc=R4mpi%… 15/15
NIELSEN, J. Usability 101 : introduction to usability. NN Group, 03 jan. 2012. Disponível em
http://www.useit.com/alertbox/20030825.html . Acesso em: 05 out. 2020.
NORMAN, D. A. Design of everyday things : revised and expanded. Nova Iorque: Basic Books,
2013.
OLIVEIRA, B. C. Gaia Protótipo : um modelo de prototipação para processos de
desenvolvimento de software. 2018. Trabalho de Conclusão de Curso(Bacharelado em Ciência
da Computação) – Universidade Estadual de Londrina, Londrina, 2018. Disponível em:
http://www.uel.br/cce/dc/wp-content/uploads/TCC-BRUNO_CARAZATO_DE_OLIVEIRA-BCC-UEL-
2017.pdf . Acesso em: 1º out. 2020.
PAREDES, A. 20 ferramentas de prototipagem, UX e usabilidade na web. IEBS , maio 2019.
Disponível em: https://www.iebschool.com/pt-br/blog/analitica-web/usabilidade-e-ux/20-
ferramentas-de-prototipagem-e-usabilidade-na-web/ . Acesso em: 05 out. 2020.
PORTILLO, R. Wireframe, mockup ou protótipo? Velho Bit , jan. 2019.   Disponível em:
https://velhobit.com.br/design/wireframe-mockup-ou-prototipo.html . Acesso em: 05 out. 2020.
SILVA, P. R. P.; SOUZA, J. H. B. Desenvolvimento e avaliação do protótipo de interface de um
aplicativo para tablets baseado na rede social Sow Life . 2013. Trabalho de Conclusão de
Curso (Graduação em Tecnologia em Análise e Desenvolvimento de Sistemas) – Universidade
Tecnológica Federal do Paraná, Ponta Grossa, 2013. Disponível em:
http://repositorio.roca.utfpr.edu.br/jspui/bitstream/1/5980/1/PG_COADS_2012_2_11.pdf .
Acesso em: 17 ago. 2021.
YADAV, P. Wireframes in UX Design: what, Why, When and How? Prototypr , maio 2019.
Disponível em: https://blog.prototypr.io/wireframes-in-ux-design-what-why-when-and-how-
�07bb513c89 . Acesso em: 05 out. 2020.
http://www.useit.com/alertbox/20030825.html
http://www.uel.br/cce/dc/wp-content/uploads/TCC-BRUNO_CARAZATO_DE_OLIVEIRA-BCC-UEL-2017.pdf
https://www.iebschool.com/pt-br/blog/analitica-web/usabilidade-e-ux/20-ferramentas-de-prototipagem-e-usabilidade-na-web/
https://velhobit.com.br/design/wireframe-mockup-ou-prototipo.html
http://repositorio.roca.utfpr.edu.br/jspui/bitstream/1/5980/1/PG_COADS_2012_2_11.pdf
https://blog.prototypr.io/wireframes-in-ux-design-what-why-when-and-how-ff07bb513c89