Prévia do material em texto

PRINCÍPIOS DE DESIGN
E PROTOTIPAÇÃO
W
B
A
04
89
_v
1.
0
2
Marcelo Henrique dos Santos
Londrina 
Editora e Distribuidora Educacional S.A. 
2020
PRINCÍPIOS DE DESIGN E PROTOTIPAÇÃO
1ª edição
3
2020
Editora e Distribuidora Educacional S.A.
Avenida Paris, 675 – Parque Residencial João Piza
CEP: 86041-100 — Londrina — PR
e-mail: editora.educacional@kroton.com.br
Homepage: http://www.kroton.com.br/
Presidente
Rodrigo Galindo
Vice-Presidente de Pós-Graduação e Educação Continuada
Paulo de Tarso Pires de Moraes
Conselho Acadêmico
Carlos Roberto Pagani Junior
Camila Braga de Oliveira Higa
Carolina Yaly
Giani Vendramel de Oliveira
Henrique Salustiano Silva
Mariana Gerardi Mello
Nirse Ruscheinsky Breternitz
Priscila Pereira Silva
Tayra Carolina Nascimento Aleixo
Coordenador
Henrique Salustiano Silva
Revisor
Juliano Schimiguel
Editorial
Alessandra Cristina Fahl
Beatriz Meloni Montefusco
Gilvânia Honório dos Santos
Mariana de Campos Barroso
Paola Andressa Machado Leal
Dados Internacionais de Catalogação na Publicação (CIP)__________________________________________________________________________________________
Santos, Marcelo Henrique dos
S237p Princípios de design e prototipação/ Marcelo Henrique
dos Santos, – Londrina: Editora e Distribuidora Educacional
S.A. 2020.
44 p.
 ISBN 978-65-5903-074-3
1. Princípios 2. Design 3. Usabilidade I. Título.
CDD 745 
____________________________________________________________________________________________
Raquel Torres - CRB: 6/2786
© 2020 por Editora e Distribuidora Educacional S.A.
Todos os direitos reservados. Nenhuma parte desta publicação poderá ser 
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, 
eletrônico ou mecânico, incluindo fotocópia, gravação ou qualquer outro tipo de 
sistema de armazenamento e transmissão de informação, sem prévia autorização, 
por escrito, da Editora e Distribuidora Educacional S.A.
4
SUMÁRIO
Conceitos gerais sobre UI design ____________________________________ 05
A usabilidade nas interfaces web e mobile _________________________ 20
User Interface e Design system _______________________________________ 35
Design System e prototipação ________________________________________ 51
PRINCÍPIOS DE DESIGN E PROTOTIPAÇÃO
5
Conceitos gerais sobre UI design
Autoria: Marcelo Henrique dos Santos
Leitura crítica: Juliano Schimiguel
Objetivos
• Aprender e aplicar os princípios de design.
• Desenvolver interfaces seguindo boas práticas web.
• Desenvolver interfaces seguindo boas práticas 
mobile.
6
1. Princípios de design
Encontramos na literatura diversas definições e características sobre 
princípios de design. Sobre princípio, encontramos as seguintes 
definições: técnica, metodologia, dados, experiência, exemplo, 
recomendação, sugestão, afirmação e proposição. Termos como diretriz 
são usados para definir princípios, e são, frequentemente, usados em 
ambientes informais.
Os princípios não são universalmente aplicáveis, eficazes ou verdadeiros 
em um determinado contexto. São normalmente baseados em 
experiências, exemplos ou evidência empírica.
A aplicação de princípios pode ter contexto e/ou problema, mas deve 
ser mais generalizável do que algumas instâncias isoladas. Os princípios 
são usados como bases para a compreensão e para o desenvolvimento 
de métodos, técnicas e ferramentas de suporte. Os princípios de design 
são fundamentais para a definição dos métodos da engenharia e para a 
racionalização no design. Eles são caracterizados por uma prestação de 
ajuda plausível ou direção na solução de um problema. A categorização 
e classificação são essenciais para o desenvolvimento dos princípios 
de design, pois a categorização facilita a representação de grandes 
quantidades de informações em uma forma compacta (ALEXANDER et 
al., 1977).
O design cuidadoso da interface de usuário é uma parte essencial 
do design geral do processo de desenvolvimento. Se um sistema de 
software atingir todo o seu potencial, é essencial que a interface de 
usuário seja projetada para corresponder às habilidades, experiências e 
expectativas de seus usuários. Um bom design de interface de usuário 
é fundamental para a confiabilidade do sistema. Muitos dos chamados 
“erros do usuário” são causados pelo fato de que as interfaces de 
usuário não consideram as capacidades dos usuários reais e seu 
7
ambiente de trabalho. Uma interface de usuário ruim, significa que os 
usuários provavelmente não conseguirão acessar alguns dos recursos 
do projeto, e, consequentemente, cometerão erros e sentirão que o 
sistema atrapalha a execução das tarefas (ou rotinas).
Ao tomar decisões de design de interface do usuário, você deve levar 
em consideração as capacidades físicas e mentais das pessoas que 
usam o software. Por exemplo, alguns fatores importantes que devemos 
considerar são:
1. As pessoas têm uma memória de curto prazo limitada, portanto, 
se você apresentar aos usuários muitas informações ao mesmo 
tempo, eles podem não ser capazes de compreendê-las.
2. Todos cometemos erros, especialmente quando temos que lidar 
com muitas informações ou estamos sob estresse. Quando os 
sistemas apresentam algum problema e emitem mensagens de 
aviso e alarmes, muitas vezes coloca-se mais estresse sobre os 
usuários, aumentando assim as chances de cometerem erros 
operacionais.
3. Temos uma ampla gama de capacidades físicas. Algumas pessoas 
veem e ouvem melhor do que outras, algumas pessoas são 
daltônicas e algumas são melhores do que outras na manipulação 
física. Você não deve projetar para suas próprias capacidades e 
supor que todos os outros usuários serão capazes de lidar com 
esse cenário.
1.1 Métodos de prototipagem de design
Um protótipo é um artefato que se aproxima de um recurso (ou vários 
recursos) de um produto, serviço ou sistema. Design e prototipagem 
foram entrelaçados ao longo da história. Michelangelo usou protótipos 
físicos para comunicar os detalhes da construção e para desenvolver o 
marketing aos investidores (SASS; OXMAN, 2006).
8
Palladio, por exemplo, usou protótipos de madeira em escala real 
de elementos arquitetônicos para planejar os trabalhos em pedra. 
Conforme Sass e Oxman (2006), Henry Ford explorou pelo menos 
dezenove modelos (alguns dos quais eram protótipos) antes de finalizar 
o modelo revolucionário T design.
Existem tendências gerais em como as indústrias abordam a 
prototipagem. De acordo com Schrage (1993), alguns projetos são 
impulsionados pelo cumprimento de especificações, enquanto outros 
– normalmente empresas mais ágeis –, focam na prototipagem para 
explorar e desenvolver um novo conceito.
Assim, cada esforço de prototipagem requer uma certa estratégia única 
para resolver um problema ou oportunidade de design. Essa estratégia 
influencia a natureza da informação que pode ser explorada e aprendida 
com o protótipo, portanto, uma estratégia de prototipagem deve ser 
cuidadosamente planejada.
Os designers podem considerar, explicitamente, que tipo de teste será 
realizado com o protótipo; para isso; existem diversas taxonomias 
detalhadas de protótipos que foram propostas ao longo da história.
Uma típica divisão taxonômica, pode ser observada entre os protótipos 
que tratam da forma e aqueles que tratam da função. Outra distinção 
comum, segundo Stowe (2008), é o nível da variável de fidelidade 
de um protótipo com respeito ao modelo, uma distinção também é 
tipicamente feita entre virtual (simulações, visualização ou aproximações 
computacionais de comportamento) e modelos físicos.
Existem muitos objetivos potenciais para projetar a prototipagem. O 
refinamento é o processo de melhorar gradualmente um design. Vários 
dos benefícios da prototipagem estão relacionados ao refinamento do 
conceito de design. A prototipagem é usada para validar requisitos, 
revelar preocupações críticas de design, reduzir erros, para identificar a 
9
melhoria de desempenho, otimização de recursos de design por meio 
do testesequencial e manipulação de parâmetros e o refinamento do 
design a partir do uso simulado (OTTO; WOOD, 2001).
Os protótipos permitem a observação da interação do usuário real uns 
com os outros e com o design; eles são valiosos para a comunicação de 
conceitos dentro da equipe de design. Este objetivo, assim, abrange a 
usabilidade e os testes para explorar os fatores humanos no design.
Já a exploração é o processo de busca de novos conceitos de design. 
Dois processos em design com os quais a prototipagem pode ser 
associada, são divergências e convergências. A divergência implica em 
reunir informações e gerar uma gama de novos conceitos, enquanto a 
convergência implica em selecionar um conjunto menor de conceitos 
refinados.
A aprendizagem ativa é o processo de obtenção de novos 
conhecimentos sobre o design, neste contexto, a aprendizagem 
ativa não se aplica apenas no sentido educacional, mas em termos 
de desenvolvimento mental ou analítico do designer e nos modelos 
de interações fenomenais. O suporte das atividades práticas 
de prototipagem, ganha o conhecimento tácito dos fenômenos 
complexos que podem ser observados. Dessa forma, os modelos 
físicos demonstram flexibilidade em uma variedade de disciplinas, e 
geralmente apoiam a educação em design. Como dizem Otto e Wood 
(2001), a construção do modelo físico também pode ajudar a identificar 
diferenças entre um conceito e um comportamento real.
1.2 Desenvolvimento de interfaces para web
A usabilidade pode ser vista como um componente avaliável da interface 
de usuário de um produto ou serviço que existe para uma determinada 
função. O atributo de usabilidade pode ser utilizado para medir a 
facilidade com que um usuário encontra a interface de uso, além de 
10
não ser exatamente uma entidade única, mas sim uma propriedade 
multidimensional.
De acordo com Nielsen (2003), existem cinco atributos que são 
associados à usabilidade:
1. Quão fácil é o sistema ou site para os usuários aprenderem? 
(Aprendibilidade).
2. Depois que os usuários aprenderam o sistema ou site, com que 
rapidez eles podem concluir as tarefas? (Eficiência).
3. Os usuários devem ser capazes de aprender/utilizar os sites 
depois de algum tempo; sem usar o sistema e quando eles 
voltarem a usar novamente, devem ser capazes de usar o sistema 
com certa facilidade. (Memorabilidade).
4. Quando um usuário comete um erro, com que facilidade ele pode 
se recuperar? (Erros).
5. A satisfação de usar o site. (Satisfação).
Incluir a usabilidade como uma questão de design pode aumentar o 
número de visitantes nos sites, levando a uma renda maior para um site 
de comércio eletrônico, por exemplo. É por esta razão que um design 
de site eficaz deve incluir usabilidade como um requisito central. Um 
resultado lógico da usabilidade em um site é que a satisfação do cliente 
aumenta, o que, por sua vez, leva ao aumento da fidelidade, à confiança 
do cliente e ao aumento dos lucros da organização.
Um site que é percebido como utilizável, também ganha confiabilidade e 
geralmente oferece benefícios incluindo um aumento do retorno sobre 
o investimento (ROI – Return over Investment). Os aspectos relacionados 
ao ROI, incluem aumento da participação de mercado da empresa e 
vendas e receitas para uma organização.
Acredita-se que, caso os clientes não visitem o site novamente, é 
justamente pelo fato de não terem uma boa experiência no início. Isso 
11
pode fazer com que o usuário visite outros sites, visto que há muitas 
opções para realizar uma compra, por exemplo.
Interface do usuário de e-commerce
A interface de usuário desempenha um papel fundamental no ciclo de 
vida de desenvolvimento de software. A maioria das pessoas acredita 
que as soluções de desenvolvimento de interface do usuário para sites 
são baseadas em HTML, CSS e JavaScript, mas a interface de usuário vai 
muito além desses termos técnicos. O objetivo da interface de usuário 
é tornar a interação do usuário o mais simples e eficiente possível, em 
termos de cumprimento dos objetivos do usuário.
O usuário experimenta apenas as interações front-end (a aparência do 
site) e, em um primeiro momento, não observa as informações que 
estão sendo processadas a partir do back-end ou o que está escrito e por 
quê. Os usuários precisam se sentir envolvidos e à vontade ao visitar 
o site. É aí que o processo de desenvolvimento da interface de usuário 
entra em cena para cumprir essa tarefa.
O design do site de comércio eletrônico envolve questões complexas, 
incluindo carrinho de compras, grandes catálogos, pagamentos, 
problemas relacionados à segurança etc.
Por esse motivo, os sites devem incluir um processamento de 
pagamento fácil e preocupar-se com o rastreamento de usuário e de 
segurança. Além disso: as informações da empresa precisam ser fáceis 
de encontrar, pois os clientes devem ter razões claras para visitar o site 
(apresentando uma interface atraente e a navegação deve ser clara e 
simples).
Em um site de e-commerce, por exemplo, as seções relacionadas ao 
cadastro e carrinho de compras, ou a região/seção de consulta sobre as 
informações de produtos, são algumas das principais funcionalidades de 
12
um site de comércio eletrônico. Portanto, o projeto deve atender essas 
demandas.
Outro ponto importante que devemos levar em consideração é a 
diversidade das preferências dos usuários; o público apresenta grandes 
diferenças nas preferências de design do site, acesso aos detalhes do 
produto, navegação e disponibilidade dos produtos. Para atender às 
necessidades do grande público, o projeto deve se preocupar com todos 
esses detalhes.
1.3 Desenvolvimento de interfaces para dispositivos 
móveis
Hoje em dia, os dispositivos móveis estão mais difundidos e são 
cada vez mais usados para diversos propósitos. Poucos clientes em 
todo o mundo usam os dispositivos móveis apenas como uma única 
unidade de função. Gradualmente, esses dispositivos se tornaram uma 
plataforma para uma ampla gama de aplicações, como tirar e enviar 
fotos, ouvir música, assistir a vídeos, receber informações via GPS, 
obter informações da internet e outros. Os dispositivos móveis também 
fornecem uma oportunidade para a realização de aprendizagem móvel.
A tecnologia de interface de usuário móvel está no meio de uma fase 
evolutiva. Telefones e tablets que usam o sistema operacional iOS da 
Apple (iPhone, iPod Touch e iPad), ou utilizam a arquitetura Android 
do Google, ou ainda o sistema operacional Blackberry, webOS da HP 
ou o sistema operacional móvel Windows® Phone oferecem diversas 
abordagens de design. A diversidade da interface é intencional. As 
plataformas devem diferenciar-se para conquistar uma fatia de 
mercado.
Na plataforma Android, as operadoras e fornecedores de dispositivos 
também devem diferenciar seus produtos, criando ainda mais 
diversidade. Embora a diversidade de produtos resultante seja 
13
necessária para a melhoria competitiva, ela cria desafios para 
desenvolvedores e designers que estão criando aplicativos e sites 
para esses dispositivos. Para criar aplicativos que são executados 
nativamente em vários tipos de dispositivos, as equipes de 
desenvolvimento precisam dos seguintes princípios:
1. Habilidades em diversas tecnologias de desenvolvimento.
2. Conhecimento das capacidades de uma vasta gama de 
dispositivos em constante mudança.
3. Conhecimento das diferentes convenções e padrões de estilo de 
IU.
4. Vários esforços de programação e portabilidade cruzada.
5. Esforços de teste dispendiosos de vários dispositivos e 
plataformas.
A interface de usuário (interface homem-máquina ou interação humano-
computador), inclui os métodos pelos quais os usuários interagem com 
um dispositivo. A interface de usuário oferece duas opções básicas: 
entrada, por meio da qual os usuários podem controlar e interagir com 
um dispositivo; e saída, que reflete as ações dos usuários.
O desenvolvimento de interface de usuário para os dispositivos móveis, 
merece uma atenção especial, poisapresenta algumas limitações, por 
exemplo, a resolução da tela e o teclado são menores em comparação 
com os computadores desktop. Isto é a razão pela qual a interface 
de usuário para dispositivos móveis deve ser bem desenhados e 
implementados.
Atualmente, são usados dois tipos principais de interface de usuário 
móvel:
• A interface gráfica de usuário (GUI), que leva as informações de 
entrada do usuário por meio da interação a partir do teclado e/
14
ou apontador dos métodos que reagem à tela (touch screen). A GUI 
exibe informações relevantes sobre a tela dos dispositivos móveis.
• A interface de usuário baseada na web, aceita uma solicitação do 
usuário, transmite-a ao servidor da web, recebe a resposta e exibe 
as informações na tela do dispositivo móvel utilizando o navegador 
da web móvel.
Uma interface de usuário móvel (UI mobile) é a tela gráfica e geralmente 
sensível ao toque em um dispositivo móvel, como um smartphone ou 
tablet, que permite ao usuário interagir com os aplicativos, recursos, 
conteúdo e funções do dispositivo.
Os requisitos do design da interface de usuário móvel são 
significativamente diferentes daqueles para computadores desktop. 
O tamanho menor da tela e os controles da tela de toque, criam 
considerações especiais no design da interface para garantir usabilidade, 
legibilidade e consistência.
Em uma interface móvel, os símbolos podem ser usados mais 
extensivamente, e os controles podem ser ocultados automaticamente 
até serem acessados. Os próprios símbolos, também devem ser 
menores e não há espaço suficiente para acrescentar rótulos de texto e 
labels em toda a tela, o que poderia, potencialmente, causar confusão na 
interação pelo usuário.
Paradigmas de navegação móvel
Atualmente, uma variedade de esquemas de navegação para os 
dispositivos móveis é aplicada. Muitas vezes, uma navegação com guias 
e/ou menus de navegação localizados nos lados esquerdo e direito do 
conteúdo principal são usados. Eles são adequados para uso em PCs, 
notebook com tela de alta resolução, teclado e mouse de tamanho 
normal.
15
Esses esquemas populares, não são aplicáveis aos dispositivos móveis, 
pois possuem uma tela e teclado pequenos, além de métodos limitados 
de navegação.
O método preferido durante o desenvolvimento de esquemas de 
navegação móvel para os dispositivos móveis está usando uma lista 
vertical numerada de opções que estão associadas aos números 
correspondentes (0-9) do teclado do telefone. No entanto, a 
orientação da tela deve ser levada em consideração, e recomenda-se 
que o esquema de navegação suporte dois campos com navegação 
– na parte superior e inferior da tela e a informação deve ser 
visualizada entre eles.
Requisitos para a realização da interface do usuário
De acordo com Schrage (1993), os seguintes requisitos devem ser 
aplicados na construção da interface dos dispositivos móveis (em 
relação à navegação):
• A navegação deve ser intuitiva, localizada na parte superior e/ou 
inferior da tela, e deve suportar trabalho com teclados de dispositivos 
móveis.
• Para reduzir a re-visualização do menu principal e submenus de 
cada tela (página) é apropriado colocá-los em telas individuais, e a 
navegação deve suportar links para essas telas.
• Os botões de navegação devem ser grandes o suficiente para 
trabalhar com eles usando a caneta ou tela de toque.
• Os elementos de navegação devem ser visualizados da mesma forma 
no celular e nos dispositivos com resolução de tela diferente.
• A rolagem horizontal do texto deve ser evitada.
16
• A possibilidade de alterar o tamanho da fonte deve ser fornecida. Isso 
vai dar oportunidade para os usuários aumentarem ou diminuírem o 
tamanho da fonte quando necessário.
• Devido à baixa resolução da tela, fontes de texto serifadas devem ser 
usadas.
• O texto deve ser de fácil leitura e, para esse fim, deve ser contrastado 
com o fundo.
• O tamanho das imagens gráficas (em pixels) deve ser consistente com 
o tamanho da tela.
• É apropriado separar os gráficos do texto, por exemplo, separar as 
telas (páginas) que devem ser exibidas apenas por solicitação do 
usuário. Isso vai aumentar a velocidade de carregamento das páginas 
contendo, principalmente, informações de texto.
• Se o aplicativo inclui áudio e se destina a ser controlado pelo usuário, 
seria apropriado fornecer uma tela separada na qual os elementos de 
controle deveriam ser exibidos (de forma dinâmica).
• Se o aplicativo incluir vídeo, uma tela separada para sua reprodução 
também deverá ser providenciada.
• Na implementação de testes é apropriado que as perguntas e tarefas 
apareçam em telas separadas.
• É melhor usar perguntas do tipo “verdadeiro-falso” ou de “múltipla 
escolha”, ao invés de possibilitar aos usuários preencher um campo 
em branco, pois o texto a ser digitado não deve ser muito longo 
(lembre-se que os usuários estão utilizando os dispositivos móveis).
• Se durante os testes for dado um tempo específico para a sua 
realização, deve ser dado um tempo maior aos usuários que estão 
utilizando os dispositivos móveis (devido às limitações conhecidas).
17
Design responsivo
O principal desafio do design para aplicativos da web móvel é a forma 
como devemos criar as experiências do usuário, de forma positiva para 
um aplicativo que aparece em telas de alguns centímetros em tablets e 
smartphones em contrapartida com as telas maiores dos laptops e PCs 
(OTTO; WOOD, 2001).
A web responsiva é a filosofia de design e o conjunto de técnicas que 
tentam resolver esse problema. O objetivo da web design responsiva é 
fazer com que cada site ou aplicativo da web represente para o usuário 
que foi projetado, especificamente, para cada dispositivo e navegador 
em que é exibido.
A web sempre lidou com problemas de exibição de conteúdo em 
navegadores não maximizados e em monitores de tamanho e resolução 
variados. Os tamanhos menores e a diversidade dos dispositivos móveis 
simplesmente aumentaram este desafio. A implementação responsiva 
da web depende do uso de CSS, consultas de mídia e JavaScript para 
adaptar a apresentação do conteúdo aos dispositivos.
Figura 1 – Representação do designer responsível
Fonte: milindri /iStock.com. 
18
A prototipagem é um processo passo a passo de superar os fatores 
de falha de design relacionados à forma, estrutura e operação de 
acordo com os conceitos de design. O processo é importante porque as 
falhas de projeto estão potencialmente relacionadas à qualidade dos 
resultados do projeto.
Existem dois tipos de falhas que são tratados por meio do processo de 
prototipagem. Primeiro, é possível definir as causas ou características 
dos fatores de falha, mas é difícil quantificar ou medir os fatores 
potenciais de perda e dano com precisão.
Em segundo lugar, os fatores de falha são interpretados de maneira 
diferente ou o grau de aceitação é diferenciado. O processo de 
prototipagem envolve a definição de hipóteses – planejamento de 
experimentos – avaliação e verificação para identificar e abordar os 
fatores de falha com precisão.
A este respeito, o processo de prototipagem é semelhante ao processo 
de pesquisa. Eliminar ou minimizar esses fatores de falha, desempenha 
um papel importante na compreensão da validade da tecnologia a ser 
introduzida com antecedência e na melhoria e precisão.
A prototipagem é um processo de design integrado. Vários fatores do 
ambiente de design devem ser considerados para que o processo de 
prototipagem possa ser aplicado de forma prático. Por exemplo, os 
recursos no ambiente de trabalho, a natureza da ferramenta de design e 
as regras ou comportamento habitual dentro da organização, devem ser 
considerados.
Referências Bibliográficas
ALEXANDER C. et al. Pattern languages. Center for Environmental Structure, vol. 2, 
1977.
19
LOWDERMILK, Travis. Design Centrado no Usuário: Um Guia para o 
Desenvolvimento de Aplicativos Amigáveis. 1. ed. São Paulo: Novatec, 2013.
SASS, L.; OXMAN, R. 2006 Materializing design: the implicationsof rapid prototyping 
in digital design. Design Studies, Delft, v. 27, ed. 3, p. 325–355, maio/2006.
SCHRAGE, M. The culture(s) of prototyping. Design Management Journal 
(Former Series) 4, 55–65, 1993. Disponível em: https://www.sciencedirect.com/
science/article/abs/pii/S0142694X05000864. Acesso em: 18 jan, 2021.
STOWE, D. T. Investigating the role of prototyping in mechanical design using 
case study validation. 2008. 270 f. Dissertação (Mestrado em Ciências) – Clemson 
University, Clemson, 2008. Disponível em: https://tigerprints.clemson.edu/all_
theses/532/. Acesso em: 18 jan. 2021.
OTTO K.; WOOD K. Product Design: Techniques in Reverse Engineering and New 
Product Design. Prentice-Hall: Upper Saddle River, 2001.
NIELSEN, J. Usability 101: Introduction to usability. Nielsen Norman Group. 
Fremont, 3 de janeiro de 2003. Disponível em: http://www.useit.com/
alertbox/200308825. Acesso em: 18 jan. 2021.
https://www.sciencedirect.com/science/article/abs/pii/S0142694X05000864
https://www.sciencedirect.com/science/article/abs/pii/S0142694X05000864
https://tigerprints.clemson.edu/all_theses/532/
https://tigerprints.clemson.edu/all_theses/532/
http://www.useit.com/alertbox/200308825
http://www.useit.com/alertbox/200308825
20
A usabilidade nas interfaces web 
e mobile
Autoria: Marcelo Henrique dos Santos
Leitura crítica: Juliano Schimiguel
Objetivos
• Criar e propor soluções criativas nas interfaces web.
• Criar e propor soluções criativas nas interfaces 
mobile.
• Desenvolver um portfólio com projetos de UI.
21
1. Princípios da usabilidade
A principal razão para aplicar usabilidade e as suas técnicas no 
desenvolvimento de um sistema de software é aumentar a eficiência e 
satisfação do usuário e, consequentemente, a produtividade. Técnicas 
de usabilidade, portanto, podem ajudar qualquer sistema de software 
alcançar seu objetivo, ajudando os usuários a executar suas tarefas.
De acordo com Cimler et al. (2015), a usabilidade é crítica para a 
aceitação do projeto (site ou aplicativo), pois caso os usuários não 
perceberem que o projeto irá ajudá-los a realizar suas tarefas, ou 
cumprir com a sua função de auxiliá-los, eles estarão menos propensos 
a aceitá-lo. Se nós não compreendermos corretamente as tarefas 
e necessidades do usuário, não seremos capazes de atender às 
necessidades.
Não devemos forçar o usuário a se adaptar a um projeto com baixa 
usabilidade, porque essa adaptação pode influenciar negativamente 
na eficiência, eficácia e satisfação. A usabilidade é um aspecto-chave 
do sucesso de um produto de software. Portanto, devemos lidar com 
a usabilidade do sistema em todo o processo de desenvolvimento. O 
teste de usabilidade por si só não é suficiente para produzir um produto 
altamente utilizável, porque o teste de usabilidade revela, mas não 
corrige problemas de design.
Além disso, o teste de usabilidade foi visto por Cimler et al. (2015), 
como semelhante a outros tipos de testes de garantia de qualidade, 
então os desenvolvedores, muitas vezes, aplicam as técnicas no final do 
ciclo de desenvolvimento – quando os problemas de usabilidade são 
observados nessa oportunidade a correção, se torna muito complexa, 
fato que inviabiliza a correção. Portanto, é fundamental avaliar todos os 
resultados durante o processo de desenvolvimento do produto, o que 
leva a um processo de desenvolvimento iterativo.
22
Para conseguir atingir os objetivos propostos, é fundamental buscar 
informações sobre as pessoas que usarão o projeto (site e/ou aplicativo). 
Seguem algumas perguntas que podem auxiliar nesse processo:
1. Quem são os usuários?
2. O que eles precisam fazer?
3. Como o sistema deve fornecer o que eles precisam?
O processo de usabilidade, ajuda os designers de interação com o 
usuário a responder a essas perguntas durante a fase de análise e 
oferece suporte ao design na fase de design.
1.1 Fase de análise de usabilidade
Primeiro, temos que conhecer os usuários e as suas necessidades, 
expectativas, interesses, comportamentos e responsabilidades, todos os 
quais caracterizam sua relação com o sistema.
Existem inúmeras abordagens para coletar informações sobre os 
usuários, dependendo das características do projeto e do esforço e 
tempo que serão empregados para a realização dessa fase. Alguns dos 
métodos que podemos destacar são: visitas in loco, grupos de foco, 
pesquisas, dados derivados e análise de tarefas.
Uma das fontes de informações do usuário são as visitas in loco. Os 
desenvolvedores observam os usuários em seu ambiente de trabalho, 
utilizando os recursos disponíveis para a execução de suas tarefas 
(que em alguns casos são a partir de um sistema, site ou aplicativo 
que será substituído, ou executando suas tarefas de forma manual). 
Além disso, os desenvolvedores entrevistam os usuários para entender 
sua motivação e a estratégia por trás de suas ações. Um método bem 
conhecido para fazer a análise do usuário em conjunto com a tarefa 
é justamente a investigação contextual. De acordo com Cimler et 
23
al. (2015) este método fornece uma maneira estruturada de reunir e 
organizar as informações.
Um grupo de foco é uma discussão organizada com um grupo 
selecionado de usuários. O objetivo é coletar as informações sobre 
suas opiniões e as experiências relativas a um tópico. Essa dinâmica é 
adequada para obter vários pontos de vista sobre o mesmo tópico, por 
exemplo, se houver um produto de software específico para discutir – 
e obter insights sobre a compreensão das pessoas que irão utilizar o 
recurso.
Em uma pesquisa, a qualidade das informações depende da qualidade 
das perguntas. As pesquisas são uma fonte unilateral, porque muitas 
vezes é difícil – ou mesmo impossível – ter um retorno confiável dos 
usuários. Na pesquisa é fundamental organizar e planejar muito bem 
como ocorrerá o processo para conduzir e projetar a pesquisa de forma 
satisfatória.
Os dados derivados incluem relatórios de linha direta (comunicação 
enviada e direcionada pelo próprio cliente), como o envio de cartas de 
reclamação do cliente, e assim por diante. Pode ser uma boa fonte de 
implicações de usabilidade, mas geralmente é difícil de interpretar. A 
limitação mais importante é que essa fonte é unilateral. Os usuários 
relatam apenas os problemas e não apontam sobre os recursos que os 
usuários gostaram ou que permitiram um uso eficiente.
A análise da tarefa descreve um conjunto de técnicas que as 
pessoas usam para fazer as coisas. De acordo com Machacek et al. 
(2012), o conceito de tarefa é análogo ao conceito de caso de uso 
no desenvolvimento de software orientado a objetos; uma tarefa é 
uma atividade que possui um significado para o usuário. A análise 
do usuário, deve ser realizada a partir da entrada para ser possível 
analisar as tarefas, pois podemos usar essa dinâmica para observar a 
manipulação do usuário e testar o design da interface ao longo do ciclo 
24
de desenvolvimento do produto. Focar em um pequeno conjunto de 
tarefas ajuda a racionalizar o esforço de desenvolvimento. Portanto, 
sugerimos priorizar o conjunto de tarefas por importância e frequência 
para obter um pequeno conjunto de tarefas. Esta abordagem, garante 
que você construirá as funcionalidades mais importantes no sistema, 
e que o produto estará o mais próximo das necessidades do usuário. 
Essas tarefas devem ser o ponto de partida para o desenvolvimento 
do sistema. Depois de ter analisado as tarefas que o nosso sistema 
suportará, podemos construir uma primeira tentativa de design 
conceitual da interface, que será mais bem avaliada na próxima iteração.
1.2 Design conceitual
Durante a fase conceitual de design, definimos a interação usuário-
sistema básica, os objetos da interface e os contextos em que a 
interação ocorre. As descobertas do usuário e a análise das tarefas 
é a base para o projeto conceitual. Os resultados desta fase são, 
normalmente, obtidos, construindo os protótipos de papel ou maquetes 
de tela e uma especificação que descreva o comportamento dainterface. 
O design conceitual é crucial na fase do processo, porque define a base 
para todo o projeto. Infelizmente, o design é um processo muito criativo 
e não pode ser automatizado com um método. Existe um conjunto de 
princípios e regras de design que devemos adaptar criativamente para 
resolver um determinado problema de design. Conhecer os princípios 
de design de usabilidade (feedback, reutilização, simplicidade, estrutura, 
tolerância e visibilidade) é a base para um bom design.
Uma forma de melhorar a capacidade de design é examinar a interface. 
Analisar as interfaces de usuário de cada aplicativo de software que 
você pode acessar é muito útil, e pode ser uma fonte de inspiração 
para encontrar soluções alternativas e inovadoras. A fase de projeto 
conceitual, também termina com a avaliação dos resultados. É uma boa 
ideia testar os protótipos de papel contra os conjuntos de tarefas para 
25
verificar se todas as tarefas foram contempladas. Nesta fase, o último 
teste deve ser executado com os usuários como um teste de usabilidade 
ou inspeção de usabilidade do protótipo de papel.
Tendo concluído o design conceitual, a etapa final em nosso processo 
é o design visual, onde definimos a aparência da interface. Isso cobre 
todos os detalhes, incluindo o layout de telas e caixas de diálogo, uso de 
cores e widgets e design de gráficos e ícones.
Existem, ainda, regras e princípios para a construção do design visual, 
abordando o uso de cores, texto, layout de tela, uso de widget, design de 
ícone e assim por diante.
De acordo com Machacek et al. (2012), as técnicas de prototipagem 
ajudam a realizar os testes de usabilidade e requerem pouco esforço 
de implementação. Nessa etapa, podemos criar os protótipos 
para testar juntamente com os usuários, por meio das técnicas de 
avaliação de usabilidade. As técnicas de prototipagem com as quais os 
desenvolvedores de software geralmente estão familiarizados, incluem:
Maquetes de papel: no início do processo de design, o designer cria 
protótipos de papel – geralmente desenhos a lápis ou impressões de 
designs de tela. O designer atuará como o computador, mostrando ao 
usuário o próximo elemento quando ocorre uma transição entre os 
elementos gráficos.
Técnica do “Mágico de Oz”: um especialista atua como o sistema e 
responde às solicitações do usuário. O usuário interage normalmente 
com a tela, mas em vez de usar software, um desenvolvedor se senta 
em outro computador (conectado à rede do usuário) e responde às 
perguntas. O usuário tem a impressão de trabalhar com um sistema 
de software real, e este método é mais barato do que implementar um 
protótipo de software real.
26
Cenários e storyboards: um cenário descreve uma estória fictícia de 
um usuário interagindo com o sistema em uma situação particular. 
Os storyboards são sequências de imagens que se concentram nas 
principais ações em uma situação possível.
Estes recursos, fazem com que a equipe de design consiga pensar sobre 
a adequação do design para um contexto real de uso e ajudam no 
processo centrado no usuário.
1.3 Avaliação de usabilidade
A avaliação de usabilidade é uma atividade central no processo de 
usabilidade. Pode determinar o nível de usabilidade da versão atual e 
se o design funciona. O teste de usabilidade, descreve a atividade de 
desempenho da usabilidade nos testes que foram realizados em um 
laboratório com um grupo de usuários e registra os resultados para 
análise posterior. Não podemos prever a usabilidade de um sistema de 
software sem testá-lo com usuários reais.
Segundo Norman (1990), primeiro, devemos decidir quais grupos de 
usuários queremos abortar para testar o sistema e quantas pessoas 
de cada grupo tentaremos recrutar como participantes do teste. Então, 
devemos projetar as tarefas de testes e solicitar aos participantes para 
realizar a dinâmica.
Algumas características do teste requerem consideração, tais como:
1. O participante pode pedir ajuda do avaliador?
2. Quais informações os participantes receberão sobre o sistema 
antes do teste?
3. Devemos incluir um período de acesso ao sistema, após concluir 
as tarefas predefinidas para obter a impressão geral do usuário 
sobre o sistema?
27
Depois de preparar o teste e recrutar os usuários que irão participar 
da seção, executamos os testes, e se houver necessidade, a equipe 
poderá gravar a seção com câmeras de vídeo ou áudio para registrar as 
ações dos usuários no sistema para análise posterior. Ao finalizar esse 
processo é necessário analisar os dados e reunir os resultados para a 
construção da análise.
1.3.1 Pensando alto
A avaliação formativa, busca compreender quais aspectos detalhados da 
interação são bons e como melhorar o design de interação.
Isso se opõe à avaliação somativa, que é realizada no final do processo 
de desenvolvimento, após o sistema estar construído. Os resultados 
da avaliação somativa não ajudam a moldar o produto, pois este já foi 
finalizado.
Pensar em voz alta (Think aloud protocol), ajuda a equipe de 
desenvolvimento a ter um desempenho formativo nas avaliações dos 
testes de usabilidade. A dinâmica desse teste consiste na solicitação 
dos participantes em pensar em voz alta enquanto utilizam o projeto 
(sistema, site, aplicativo etc.) em um teste de usabilidade, para verbalizar 
suas ações para que possamos coletar as observações.
Por exemplo, um participante pode dizer: “Primeiro, eu abro o arquivo e 
clico uma vez neste ícone. Nada acontece. Não sei por que isso não está 
funcionando como a web. Eu pressiono a opção “Digite a chave” e ela 
abre. Agora eu quero alterar a cor de fundo; então eu procuro no menu 
“Ferramentas”, mas não consigo encontrar nenhuma opção para realizar 
essa alteração”.
As observações do usuário obtidas em testes de usabilidade podem 
fornecer um feedback muito rico que pode ser utilizado no aprimoramento 
do projeto. Ao detalhar o processo mental, os participantes do teste podem 
descobrir problemas de usabilidade que até então estavam ocultos.
28
1.3.2 A avaliação formativa
A avaliação formativa é a forma usual da avaliação em um processo de 
usabilidade, combinando os dados qualitativos coletados de comentários 
do usuário com os dados quantitativos para verificar os benchmarks 
(estratégia aplicada para definir os parâmetros sobre um projeto – site, 
sistema, aplicativo etc.) de usabilidade previamente definidos.
1.3.3 Avaliação heurística
Um especialista em usabilidade, pode realizar uma avaliação heurística 
do sistema para fazer algumas iterações de desenvolvimento mais 
curto e para realizar mais iterações no processo de desenvolvimento. 
O especialista fará uma crítica fundamentada em sua experiência de 
design de interação e em geral nas diretrizes de usabilidade aceitas, 
como as características citadas por Jakob Nielsen (2003).
Os especialistas fornecem um tipo de feedback diferente dos usuários 
finais por meio de testes de usabilidade. As sugestões de especialistas 
para a realização das modificações são geralmente aplicáveis, e são 
precisas sobre os problemas de usabilidade subjacentes, como falta de 
consistência ou navegação.
Por outro lado, o teste de usabilidade deve ser realizado com usuários 
reais para identificar os problemas específicos de usabilidade. A 
avaliação heurística pode complementar, mas não substituir, o teste de 
usabilidade.
1.3.4 Inspeção de usabilidade colaborativa
Uma inspeção de usabilidade colaborativa é um exame sistemático de 
um sistema acabado, design ou protótipo do ponto de vista do usuário 
final. A equipe de desenvolvedores, usuários finais ou especialistas em 
29
domínio e especialistas em usabilidade, realizam a revisão de forma 
colaborativa. As inspeções de usabilidade colaborativa, utilizam os 
recursos e técnicas de avaliação heurística, tutoriais de usabilidade 
pluralistas e as avaliações de especialistas, e são menos caras e menos 
rápidas do que o teste de usabilidade.
Por trás dessa técnica observamos um conjunto de regras restritaspara 
evitar problemas que normalmente surgem caso os usuários finais 
discutam seu trabalho junto com designers ou desenvolvedores.
Além da eficiência, uma vantagem desse recurso é que as pessoas 
com múltiplas perspectivas conseguem examinar o objeto de teste de 
forma clara. Outra vantagem é que os desenvolvedores participantes 
desenvolvem as habilidades e know-how sobre como tornar o software 
mais utilizável.
1.4 User experience (UX)
A experiência do usuário (UX – User experience) foi definida por ISO 
(2010, [s.p.]) como “a experiência combinada do que um usuário sente, 
percebe, pensa, e reage fisicamente e mentalmente antes e durante 
a utilização de um produto ou serviço”. Basicamente, um conceito 
importante na UX é o processo pelo qual os usuários formam as 
experiências desde que encontraram o produto pela primeira vez e 
como o produto é usado ao longo de um período.
UX pode ser explicado por três características. A primeira é a sua 
natureza holística, que abrange uma ampla gama de qualidades, e não 
inclui apenas os aspectos visuais, táteis e auditivos do sistema, mas 
também como o sistema funciona sob um uso apropriado (em um 
ambiente ou contexto). A segunda característica é que o foco da UX está 
fortemente inclinado para a perspectiva do usuário.
30
UX é muitas vezes confundido com UI (interface do usuário), porém, a 
interface do usuário tende a inclinar-se em direção ao computador, e as 
avaliações são frequentemente submetidas a avaliações quantitativas 
ou teste de usabilidade. UX, em contraste, preocupa-se em como os 
usuários pensam, sentem e se comportam. A terceira característica é 
que UX tem valor estratégico no desenvolvimento da empresa, de um 
produto ou serviço. UX, recentemente, se tornou um importante tópico 
que merece consideração pelos altos executivos.
O objetivo de se projetar para UX é encorajar sentimentos positivos 
(por exemplo, satisfação, prazer, empolgação, motivação e diversão) 
e minimizar sentimentos negativos (por exemplo, chatice, frustração, 
irritação). Ao contrário dos objetivos da usabilidade, a UX apresenta as 
qualidades subjetivas e relacionadas com a maneira com que o usuário 
se sente ao utilizar o projeto (site, aplicativo, sistema etc.).
Apesar da usabilidade e UX serem diferentes, não são completamente 
separadas. Na verdade, a usabilidade faz parte da experiência do 
usuário. Por exemplo, um produto que é visualmente agradável, pode 
evocar uma experiência positiva de primeiro contato; no entanto, se sua 
usabilidade for inadequada, poderia prejudicar a experiência geral do 
usuário.
Diversidade do usuário
Desenvolver sistemas, sites e aplicativos que possam ser usados por 
todos os usuários é uma tarefa árdua; o desafio é tentar atender a 
maioria dos usuários, garantindo que os produtos sejam flexíveis e 
adaptáveis às necessidades e preferências individuais. Para realizar 
os objetivos de design universal é necessária a compreensão da 
diversidade do usuário.
Existem várias dimensões da diversidade do usuário que podem 
diferenciar grupos de usuários. Para Stephandis (2014), a primeira 
31
dimensão é a deficiência, quando os principais esforços dos estudos 
foram estudar os próprios usuários, suas necessidades para a realização 
da interação, modalidades apropriadas, dispositivos interativos e 
técnicas para atender às suas necessidades.
A pesquisa inclui a deficiência visual, deficiência auditiva, motora e 
deficiências físicas e cognitivas. As deficiências visuais, afetam muito 
a interação humana com a tecnologia, pois o ser humano depende 
da visão para operar o computador. As deficiências visuais abrangem 
uma ampla gama de problemas de visão relacionados à acuidade, 
acomodação (capacidade focar em objetos a diferentes distâncias dos 
olhos), adaptação de iluminação, percepção de profundidade e visão 
de cores. Deficiências visuais menores, conforme descreve Stephandis 
(2014), geralmente podem ser tratadas ao ampliar o tamanho dos 
elementos interativos, aumentando a cor, contraste ou selecionando 
combinações de cores apropriadas para os usuários daltônicos.
Ao contrário das deficiências visuais, a cegueira se refere a uma 
perda total ou quase total da visão. Os usuários cegos, se beneficiam 
da modalidade de áudio e tátil para entrada e saída de dados. Eles 
são suportados por leitores de tela, dispositivos de entrada e saída, 
e displays Braille. As deficiências auditivas, também podem afetar a 
interação com a tecnologia. As deficiências podem variar em grau, 
de leve a grave. A maioria das pessoas com deficiência auditiva, 
geralmente perderam a audição com o envelhecimento. Eles têm 
percepção parcialmente perdida de frequência, intensidade (precisa 
de sons mais altos), sinal para ruído (distraído pelo ruído de fundo) e 
complexidade. Algumas estratégias para lidar com as deficiências de 
audição são fornecer legendas para áudio, contendo a tradução em 
linguagem de sinais dos conteúdos. Deficiências motoras e físicas, 
interferem com a interação tecnológica. Conforme Stephandis (2014), 
os problemas comuns enfrentados por indivíduos com deficiências 
32
motoras, incluem músculos frágeis, artrite, fraqueza e fadiga, 
dificuldade para andar, falar e alcançar os objetivos, paralisia total ou 
parcial, falta de sensibilidade, falta de coordenação de movimentos 
finos e falta de membros.
A principal estratégia para lidar com as deficiências motoras é minimizar 
o movimento e esforço físico necessário para a entrada de dados, 
por exemplo, usando previsão de texto, captura de voz, dispositivos de 
controle de comutação e rastreamento ocular. Além das deficiências 
mencionadas, deficiências cognitivas também podem limitar a interação 
do usuário com a tecnologia. As deficiências cognitivas limitam a 
capacidade do usuário de pensar, lembrar (a longo ou curto prazo), 
sequenciar os seus pensamentos e ações, e ainda para compreender os 
símbolos. Entre as estratégias para ajustar esse recurso, seria manter a 
interface do usuário de forma simples, fornecer métodos para lembrar, 
prover o feedback contínuo sobre a posição no sistema, fornecer mais 
tempo para concluir as tarefas e apoiar a atenção do usuário.
Outra dimensão que podemos relacionar é a idade. A idade influencia 
fisicamente as qualidades e habilidades (cognitivas) e como uma 
pessoa percebe e processa as informações. Os idosos e as crianças 
são os dois principais grupos de idade que dependem de alguns 
requisitos. Existem várias definições de criança; alguns estudos, 
incluem a adolescência (13-18 anos) até a infância, enquanto outros 
se concentram apenas em crianças menores de 12 anos de idade. 
Assim como o grupo de crianças, não há um consenso sobre a 
terceira idade. A maioria dos pesquisadores consideram o marco dos 
55 anos como o início da velhice. Mesmo assim, como afirma Petrie 
(2001), existem enormes diferenças nas habilidades e problemas 
dentro do grupo de idosos; por exemplo, pessoas com 55 anos e 
pessoas com 90 anos são extremamente diferentes.
33
Figura 1 – Integração de um idoso e uma criança com um dispositivo 
eletrônico
Fonte: NanoStockk /iStock.com.
A terceira idade está associada a declínios na visão, audição, função 
motora e cognição. Os idosos geralmente têm problemas com acuidade 
visual, profundidade de percepção, visão de cores, em ouvir sons de 
alta frequência, controlar a coordenação e o movimento, memória de 
curto e longo prazo e informação relacionada com a velocidade de 
processamento. As crianças têm características únicas, pois elas não 
possuem os mesmos níveis das capacidades físicas e cognitivas como 
os adultos. Elas têm habilidades motoras limitadas, memória espacial, 
atenção, memória de trabalho e linguagem específicas com a sua idade. 
Assim, segundo Petrie (2001), as características gerais dos idosos e das 
crianças, precisam ser consideradas ao desenvolver sites, aplicativos e 
sistemas para essas duas faixas etárias.
A próxima dimensão é a cultura. Diferenças culturais incluemo 
formato de data e hora, interpretação de símbolos, significado da cor, 
gestos, direção do texto e linguagem. Portanto, os designers devem ser 
34
sensíveis a essas diferenças durante o processo de desenvolvimento e 
evitar tratar todas as culturas da mesma maneira.
A última dimensão é a experiência em informática. Alguns 
grupos de usuários, não estão familiarizados com a tecnologia, por 
exemplo, os adultos mais velhos e aqueles com pouca ou nenhuma 
escolaridade. Algumas estratégias para lidar com as diferenças no 
nível de especialização, incluem o fornecimento de opções de ajuda e 
explicações, e a definição de uma nomenclatura consistente, (adotando 
uma convenção) para auxiliar a memória e interface de usuário, 
auxiliando na gestão da atenção do usuário.
Referências Bibliográficas
CIMLER R. et al. Security issues of mobile application using cloud computing. 
Advances in Intelligent Systems and Computing, 334, p. 347-357, 2015.
ISSO. International Organization of Standardization. ISO 9241-210: 2010. 
Ergonomics of human-system interaction – Part 210: humancentred design for 
interactive systems.. 2010. Disponível em: https://www.iso.org/standard/52075.
html. Acesso em: 15 set. 2020.
LOWDERMILK, Travis. Design Centrado No Usuário: Um Guia para o 
Desenvolvimento de Aplicativos Amigáveis. 1. ed. São Paulo: Novatec, 2013.
MACHACEK Z. et al. Advanced system for consumption meters with recognition of 
video camera signal. Elektronika Ir Elektrotechnika, v. 18, n. 10, p. 57-60. 2012
NIELSEN, J. Usability 101: Introduction to usability. Nielsen Norman Group. 
Fremont, 3 de janeiro de 2003. Disponível em: http://www.useit.com/
alertbox/200308825. Acesso em: 18 jan. 2021.
NORMAN, D. A. The Design of Everyday Things. New York: Doubleday, 1990.
PETRIE, H. Accessibility and usability requirements for ICTs for disabled and elderly 
people: a functional classification approach. Inclusive Design Guidelines for HCI. 
NICOLLE, C.; ABASCAL, J. (Eds.). Abingdon: Taylor & Francis, 2001.
STEPHANDIS, C. Design for all. In: NORMAN, Don A. The Encyclopedia of Human 
Computer Interaction, Interaction Design Foundation. 2. ed. 2014, https://
www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-
interaction-2nd-ed/design-4-all. Acesso em: 15 set. 2020.
https://www.iso.org/standard/52075.html
https://www.iso.org/standard/52075.html
http://www.useit.com/alertbox/200308825
http://www.useit.com/alertbox/200308825
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/design-4-all
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/design-4-all
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/design-4-all
35
User Interface e Design system
Autoria: Marcelo Henrique dos Santos
Leitura crítica: Juliano Schimiguel
Objetivos
• Aprender sobre Design System.
• Compreender sobre User Interface.
• Construir projetos utilizando os princípios de Design 
System.
36
1. User Interface
O design da interface do usuário (UI – User Interface), possui quatro 
elementos principais: usabilidade, visualização, funcionalidade e 
acessibilidade. Os elementos de design podem entrar em uso somente 
depois de analisarmos nossos usuários potenciais. As interfaces devem 
sempre considerar as necessidades dos usuários finais e atender às suas 
demandas.
Para tornar a experiência do usuário agradável, há algumas coisas 
que devem ser consideradas antes de entrar no processo de 
desenvolvimento. Isso vai economizar o tempo do desenvolvedor e o 
trabalho do designer ocorrerá de forma satisfatória.
Os usuários não gostam de páginas inconsistentes. A inconsistência 
torna as coisas complexas, enquanto a consistência fornece clareza. 
Alguns elementos básicos de uma interface de usuário que a equipe 
necessita oferecer: consistência com o esquema de cores, estilo, 
bordas, tipo e fontes, tamanho, imagens de fundo e efeitos. As escolhas 
sábias devem ser feitas combinando o tema de uma interface a serem 
projetada, por exemplo, se estivermos criando páginas para uma 
cafeteria, poderíamos utilizar a cor “marrom café” no fundo em vez de 
usar uma cor rosa brilhante, que seria mais favorável em um site de 
venda de brinquedos de pelúcia para crianças.
As escolhas desses elementos são muito subjetivas, mas podem ser 
medidas e definidas com a obtenção de informações suficientes sobre 
os usuários finais que darão uma ideia sobre quais padrões de IU 
a serem utilizados. A consistência também significa realizar tarefas 
semelhantes de maneira similar, por exemplo, clicando no botão home 
ou no logotipo da empresa ou ainda no banner que deve sempre levar o 
usuário para a página inicial em todos os momentos. O layout de página 
consistente, deve conter, por exemplo, cabeçalho, rodapé e corpo. 
37
Não importa em que página do site estejamos, encontraremos esses 
elementos nas mesmas posições.
A consistência pode ser alcançada por meio de um design cuidadoso, 
pesquisa de usuários finais em potencial, usando páginas mestras e CSS 
durante o desenvolvimento, ou seja, a consistência ajuda os usuários a 
se lembrarem de seu design. Ao exibir os usuários diferentes tipografias 
em distintas páginas, diversos tamanhos e cores sem nenhum 
significado ou razão, certamente irá afastar os usuários do seu projeto. 
Exemplo de consistência: a interface de usuário consistente do pacote 
Microsoft Office, deixa claro o conceito de consistência. Ao tornar uma 
IU consistente, o usuário irá se familiarizar com o sistema rapidamente. 
Depois que o usuário aprende um dos aplicativos do pacote Office, 
torna-se fácil para ele aprender os demais. Ele não terá que aprender 
uma interface totalmente nova novamente; ele pode apenas aprender 
recursos destinados a uma aplicação específica, já que os demais 
elementos da estrutura do layout são similares.
O usuário pode achar muito chato ficar esperando em um site e se 
perguntar como reagir para uma determinada situação. Por exemplo, 
quando o usuário envia suas informações por meio de um formulário, 
ele espera algum tipo de resposta do site dizendo que o registro falhou 
ou foi bem-sucedido e leva você a uma determinada página. Em vez 
disso, se ele for redirecionado para uma página em branco, sem opção 
de voltar ou nenhuma informação do processo de registro, terá um 
impacto negativo no uso futuro do site.
A ideia básica de um site ser responsivo é ele responder às ações 
dos usuários, caso a página demore para carregar, pode-se fornecer 
alguns gráficos visuais ou alguma representação com qualquer texto 
simples que sugira que a página está carregando ou informar o status 
de progresso. O uso de gráficos pesados pode aumentar o tempo de 
resposta de uma página web. Portanto, minimizar os tamanhos e usá-
los o mínimo possível, pode ajudar a minimizar o problema. Segundo 
38
MSDN (2013), o uso de alternativas também ajuda, por exemplo, se 
uma imagem não foi carregada por alguma razão, um texto alternativo 
informando do que se trata essa imagem ajuda o usuário a pelo menos 
entender a ideia por trás do problema.
O uso de termos familiares de outros sites, ajuda os usuários a se 
familiarizarem com o seu projeto mais rapidamente. Por exemplo, 
palavras como produtos e carrinho de compras são muito comuns no 
comércio eletrônico. Ao mesmo tempo, em sites gerais, palavras como 
compartilhamento, inscrição e login são comuns, então usá-las nas 
páginas recém-projetadas ajudará os usuários a “pular” a compreensão 
dessas partes do site, o que ajudará a minimizar o processo de 
aprendizagem.
Simplificar a experiência significa melhorar a navegação de um site, 
tornando-a mais consistente e agradável. O uso de páginas ou caminhos 
de navegação desnecessários devem ser evitados. O site deve ser 
simples e a navegação clara; o fluxo de navegação de nível superior deve 
ser predefinido. Cada página pode, por exemplo, terum banner que, ao 
clicar, leva o usuário à primeira página, ou comumente conhecida como 
página inicial. Além disso, todas as páginas devem conter links para as 
informações de contato da empresa.
Existem outras maneiras simples de tornar a experiência do usuário 
melhor. Vamos considerar um exemplo de um formulário de 
registro em um site. Se o formulário tiver vários campos obrigatórios 
desnecessários e irrelevantes para a finalidade do site, o usuário pode 
não querer preenchê-lo e se registrar. Ao ajustar os campos de acordo 
com as necessidades e ao oferecer a opção de preencher ou não em 
certos campos, fará com que os usuários se sintam respeitados e, 
eventualmente, poderão realizar o cadastro de forma voluntária e 
espontânea. Caso não exista a real necessidade de possuir diferentes 
níveis de usuários, todo o processo de registro deve ser opcional. 
39
Os usuários não gostam de ser incomodados desnecessariamente. 
Qualquer coisa indesejada, deve ser evitada.
Não há prova de que os usuários seguirão um caminho direto ao 
usar um site. Mesmo se eles fizerem, podem se deparar com muitos 
problemas que os deixarão frustrados com o design do site. Um 
exemplo muito comum seria preencher informações de envio ou 
registrar-se em um site e, acidentalmente, navegar para alguma página 
errada e ter que inserir todos os dados novamente quando voltar 
à página. Isso é realmente frustrante, porque os formulários terão 
muitos campos para preencher. Esse problema específico, pode ser 
controlado, por exemplo, alertando os usuários de que estão saindo 
do formulário ou solicitando que salvem seus dados antes de sair do 
formulário. Conforme Sommerville (2000 apud SHANKAR, 2012), outra 
solução é salvar os detalhes do usuário por um curto período (pois pode 
haver problemas de segurança para salvar os dados por mais tempo) e 
fornecer a possibilidade da realização do preenchimento automático. 
Esse preenchimento automático é promovido e possibilitado em grande 
parte pelos visualizadores de páginas internet (browsers).
Designers e desenvolvedores podem encontrar muitos problemas de 
usabilidade relatados após o lançamento do site, caso o trabalho de 
casa não for feito corretamente. Se o trabalho de design está sendo feito 
para um determinado público-alvo, a pesquisa sobre os usuários-alvo 
ajudará a resolver este problema, e se o trabalho está sendo feito para 
os usuários em geral, a pesquisa sobre os produtos ajudará. O objetivo 
do design nunca deve ser esquecido, e o foco deve ser sempre mantido. 
Os usuários devem sempre ser capazes de desfazer a operação, pois, em 
alguns momentos, os usuários podem executar uma tarefa por engano. 
Eles devem ter uma chance e permissão para cancelar suas operações 
equivocadas; por exemplo, podem, acidentalmente, adicionar um 
produto às suas compras no carrinho ou, após colocá-lo, decidem que 
não o querem mais. Os usuários devem ser capazes de excluir o produto 
40
do carrinho. Isso os ajuda a se sentirem seguros, pois não são obrigados 
a comprar nenhum produto se não quiserem.
Não é apenas suficiente pensar em problemas de usabilidade que 
podem ocorrer, mas igualmente importante orientar os usuários sobre 
os problemas que estão ocorrendo. Isso diz respeito ao tratamento de 
erros ou à resposta a erros. As mensagens de erro que um usuário pode 
receber, poderiam não corresponder aos critérios de validade. Além 
disso, a página pode ter levado mais tempo do que o necessário para 
carregar. As mensagens de erro devem seguir critérios simples. Segundo 
Young (2009), elas devem ser “educadas”; pois os usuários não gostam 
de mensagens indelicadas.
As mensagens de erro ajudam o usuário a entender o que ele fez de 
errado para que, na próxima tentativa, não cometa os mesmos erros. 
Por exemplo, quando o usuário insere um nome de usuário que já foi 
cadastrado na base de dados, o sistema imediatamente emite uma 
mensagem de erro dizendo algo como “Este nome de usuário já foi 
escolhido, digite outro”. Isso fará com que o usuário reconsidere o nome 
de usuário. As mensagens de erro podem ser apoiadas com algumas 
sugestões. Alguns links de ajuda, também podem ser colocados junto 
com as mensagens de erro sempre que necessário.
O design dos projetos deve ser criado de modo que as pessoas 
entendam imediatamente o que devem fazer com o botão ou campo 
de pesquisa ou qualquer outra opção. Assim, muitas opções a serem 
percorridas, apenas desmotivarão os usuários a usar o aplicativo ou 
site enquanto eles percorrem as informações. Não é necessária muita 
informação para fazer um bom design, as coisas devem sempre ser 
mantidas de forma simples, e elementos desnecessários devem sempre 
ser omitidos. Ocultar é outra opção para manter o recurso necessário 
disponível para o usuário, ainda fazendo a interface de forma simples 
para os usuários utilizarem. Um bom exemplo, apontado por MSDN 
(2013) é a sugestão de sinônimos (recurso do MS-Word), está disponível, 
41
mas não interfere no trabalho dos usuários. Sempre que o usuário 
quiser, ele pode usar o recurso.
Quando o trabalho de design está sendo feito, os designers se deparam 
com milhares de possibilidades. Infelizmente, não é possível agradar 
a cada usuário que visita o site. É possível fornecer algumas opções 
para facilitar o processo de uso para alguns usuários, mas não se pode 
colocar muitos recursos adequados para todos os usuários possíveis 
(que poderão utilizar o projeto). Por exemplo, quando o trabalho 
de design está sendo feito para um site de comércio eletrônico, não 
podemos torná-lo utilizável por usuários de todas as faixas etárias. 
Precisamos descobrir qual é o grupo ativo de usuários da internet e qual 
grupo inclui um site de comércio eletrônico conforme o projeto que está 
sendo implementado. Pode-se pensar em coisas extras para os últimos 
grupos, como incluir um recurso simples de aumentar o tamanho da 
fonte ou uma pequena representação gráfica que sugere que esse 
recurso pode ser colocado em uma parte visível de cada página do site. 
Os layouts e design padrão devem ser sempre destinados ao grupo-alvo, 
sempre que possível. Se não, pelo menos eles devem ser centrados no 
produto. Projetos centrados no alvo, apresentam as melhores opções.
1.1 Design System
De acordo com Suarez et al. (2019), na década de 1960, a tecnologia da 
computação começou a ultrapassar a velocidade de programação de 
software. Os computadores se tornaram mais rápidos e baratos, mas 
o desenvolvimento de software permaneceu lento, difícil de manter e 
sujeito a erros. Em 1968, na conferência da OTAN sobre engenharia de 
software, Douglas McIlroy apresentou o desenvolvimento baseado em 
componentes como uma possível solução para esse dilema. Baseado no 
desenvolvimento em componentes, McIlroy forneceu uma maneira de 
acelerar a programação, tornando o código reutilizável, eficiente e mais 
fácil de escalar. Com isso, reduziu-se o esforço e aumentou a velocidade 
42
de desenvolvimento de software. Atualmente, 50 anos depois, estamos 
enfrentando um desafio semelhante, mas desta vez no design.
Figura 1 – Representação da criação do design de um projeto digital
Fonte: PRImageFactory /iStock.com. 
Suarez et al. (2019), afirmam que os sistemas de design permitem que as 
equipes criem produtos melhores com mais rapidez tornando o design 
reutilizável – a reutilização torna a escala possível. Este é o coração e o 
valor principal dos sistemas de design. Um sistema de design, assim, é 
uma coleção de componentes reutilizáveis, guiados por padrões claros, 
que podem ser montados juntos para construir qualquer número 
de aplicações. Muitas empresas estão investindo no design, pois 
reconhecem que a experiência do cliente e de seus produtos oferece 
uma vantagem competitiva, atrai e retém clientes, além de reduzir 
os custos de suporte. Aqui estão as coisas que geralmente aparecem 
dentro de uma empresa que está investindo em design:
1. A equipe de design está crescendo.
43
2. O design é incorporadoàs equipes de toda a empresa, talvez em 
vários locais.
3. O design está desempenhando um papel fundamental em todos 
os produtos em todas as plataformas.
De acordo com Chapman et al. (1992), o design é uma atividade criativa 
– consequentemente, não há processo que garantirá bons projetos, 
mas existem alguns princípios que irão aumentar a probabilidade de 
obter um bom design. Usar esses princípios, também tornará o produto 
reutilizável para sistemas futuros e ajudará a reduzir os custos de 
redesenho quando os requisitos mudam. Claro, o cliente pode exigir ou 
excluir o uso de alguns ou de todos esses princípios. Segue a lista de 
alguns deles que podemos relacionar:
• Utilize os modelos para projetar sistemas.
• Utilize o design hierárquico de cima para baixo.
• Classifique os itens em prioridades (priorize os itens de alto risco).
• Controle o nível das entidades que interagem.
• Projete as interfaces.
• Produza os designs de forma satisfatória.
• Mantenha um modelo atualizado do sistema.
• Utilize o desenvolvimento evolutivo.
• Entenda sua empresa.
• Liste os requisitos funcionais nos casos de uso.
• Aloque cada função a apenas um componente.
44
• Não permita a execução de funções não documentadas.
• Forneça os estados observáveis.
• Aplique a prototipagem rápida.
• Desenvolva iterativamente e teste imediatamente.
• Crie módulos e bibliotecas de objetos reutilizáveis.
• Utilize padrões abertos.
• Identifique as coisas que podem mudar.
• Escreva pontos de extensão.
• Utilize a ocultação de dados.
• Escreva um glossário de termos relevantes.
• Crie margens de design.
Segundo Chapman et al. (1992), esses princípios de design vêm da 
experiência de centenas de engenheiros e gerentes, em que é muito 
importante utilizar modelos para projetar sistemas. O projeto do 
sistema, pode ser baseado em requisitos, baseado em função ou 
baseado em modelo. A engenharia e o projeto do sistema baseado 
em modelo, têm a vantagem de gerir os modelos executáveis que 
melhoram a eficiência do projeto. Já em sistemas baseados em modelos, 
a engenharia depende de ter e usar modelos bem estruturados que são 
apropriados para o domínio de problema.
Ao utilizar o design hierárquico de cima para baixo, é possível traduzir 
as necessidades do cliente em objetivos, capacidades e funções; estes 
fornecem a orientação para todos os desenvolvimentos futuros. 
Trabalhe em funções de alto nível primeiro porque, embora as funções 
45
de alto nível são menos propensas a mudar, quando elas mudam, 
forçam outras mudanças. Decompor sistemas em subsistemas, 
subsistemas em outros subsistemas menores etc. (CHAPMAN et 
al.,1992).
1.1.2 Padrões
Compreender não apenas o quê, mas o porquê, por trás do design de 
um sistema é fundamental para a criação de uma experiência de usuário 
excepcional. Definir e aderir a padrões, auxilia no processo de criação, 
pois isso remove a subjetividade e a ambiguidade que muitas vezes cria 
atrito e confusão dentro das equipes de produto. Os padrões abrangem 
design e desenvolvimento.
Padronizar coisas, como convenções de nomenclatura, acessibilidade, 
requisitos e a estrutura do arquivo, ajudará as equipes a trabalharem 
de forma consistente e evitar erros. A linguagem visual é uma parte 
essencial dos seus padrões de design.
Definindo a finalidade e o estilo de cor, forma, tipo, ícones, espaço e 
movimento são essenciais para criar uma marca alinhada e desenvolver 
uma experiência do usuário consistente. Cada componente do seu 
sistema, deve incorporar esses elementos, e eles desempenham um 
papel integral na expressão da personalidade da marca.
Sem padrões, as decisões se tornam arbitrárias e difíceis de gerenciar. 
Isso não só não escala, mas também cria uma inconsistência e uma 
experiência do usuário frustrante. Os componentes padronizados 
devem ser usados de forma consistente para auxiliar na criação dos 
projetos (sites, sistemas, aplicativos) de forma previsível e fácil de 
entender. Os componentes padronizados, também permitem que 
os designers gastem menos tempo focados no estilo e mais tempo 
desenvolvendo uma melhor experiência do usuário.
46
1.1.3 Componentes
Os componentes são partes do código reutilizável dentro do seu 
sistema, e servem como os blocos de construção da interface. Os 
componentes variam em complexidade. Reduzindo os componentes 
para uma única função, como um botão aumenta a flexibilidade, 
tornando-os mais reutilizáveis. Os componentes complexos, como 
tabelas para os tipos específicos de dados, podem servir bem para a 
resolução dos casos de uso, mas essa complexidade limita o número de 
cenários aplicáveis. Quanto mais reutilizável for os componentes, mais 
fácil será a construção dos projetos.
O desenvolvimento baseado em componentes reduz a sobrecarga, 
tornando o código reutilizável. Os padrões regem ao propósito, estilo 
e o uso desses componentes. Sua linguagem visual pode transcender 
plataformas para criar uma continuidade na web, iOS, Android e e-mail.
1.1.4 Projeto de escala
Conforme as equipes crescem, é comum que os designers se 
concentrem em áreas discretas de um aplicativo, como pesquisa e 
descoberta. Isso pode levar a um visual fragmentado – como uma Torre 
de Babel de design –, com cada designer falando sua própria língua. Isso 
acontece quando designers tentam resolver os problemas de forma 
individual e não de forma sistemática. Sem uma linguagem de design 
comum para unir o produto, a experiência do usuário começa a falhar, 
assim como o design.
As críticas de design tornam-se improdutivas quando há uma escassez 
de convenções de design. Para criar o alinhamento dentro das equipes, 
deve haver uma fonte compartilhada da verdade – um lugar para a 
gestão dos padrões e estilos oficiais de referência.
47
1.1.5 Gerenciar sua dívida
Conforme os aplicativos e suas equipes envelhecem, eles aumentam as 
dívidas. Não estamos falando da dívida financeira, mas a dívida técnica e 
de design. A dívida é adquirida construindo o projeto para o curto prazo. 
A dívida de design é composta por uma superabundância de estilos 
não reutilizáveis e inconsistentes, e o interesse é a tarefa impossível de 
mantê-los. Com o tempo, o acúmulo dessa dívida torna-se um grande 
peso que retarda o crescimento.
1.1.6 Protótipo mais rápido
Trabalhar dentro de um sistema de design existente, permite que 
você manipule de forma unificada os fluxos e as interações. Isso 
permite construir uma quantidade infinita de protótipos e variantes 
para experimentação, ajudando a equipe a obter insights e dados 
rapidamente.
Seja evoluindo o estilo da IU ou fazendo mudanças na construção 
da UX, usar um sistema de design reduz o esforço de centenas de 
linhas de código com apenas alguns caracteres. Isto possibilita a 
criação das interações de forma rápida e indolores, potencializando a 
experimentação.
1.1.7 Melhore a usabilidade
Convenções de interface inconsistentes, dificultam a usabilidade. 
Quando temos inúmeras linhas no arquivo de CSS e JavaScript, para 
manipular os inúmeros elementos de interface e suas interações, 
aumentam a carga cognitiva e o peso da página. Isto acarreta uma 
experiência de usuário muito ruim.
48
Usando um sistema de design, você pode evitar esses conflitos ao 
construir uma biblioteca holística de componentes, em vez de incluir 
essas funcionalidades na própria página, ou seja, isso significa reduzir o 
tempo para lidar com a garantia de qualidade.
A acessibilidade pode ser implementada no nível do componente para 
otimizar o acesso de pessoas com deficiência, em velocidades lentas de 
internet, ou em computadores antigos.
1.1.8 Mitos de sistemas de design
Mesmo com todos os seus benefícios, a adesão para a criação de um 
sistema de design ainda pode ser difícil de vender. Designers podem 
se sentir limitados ou contidos, mas, muitas vezes essas fraquezas 
percebidas são os maiores pontos fortes de um sistema de design.
Suarez et al. (2019), apresentam alguns mitos comuns que alguns 
profissionaisapresentam quando estamos tentando implementar a ideia 
de criar um sistema de design.
Mito 1: muito limitante.
Mito: os designers incorporados em áreas discretas de um aplicativo, 
site ou sistema veem qualidades que podem ser diferentes de outras 
áreas. Por causa disso, um sistema universal é percebido como sendo 
muito limitante, e pode não atender às necessidades dessas áreas 
específicas.
Realidade: muitas vezes, os designers acabam criando soluções 
personalizadas para melhorar áreas discretas do aplicativo, sistema ou 
site, adicionando funcionalidades ao design. Com um sistema de design, 
novas soluções podem ser criadas e a dinâmica de retroalimentar o 
sistema acontece.
49
Mito 2: perda de criatividade.
Mito: se os designers estão restritos a usar um sistema de design, então 
os designers não serão mais livres para explorar o estilo. Os backlogs de 
front-end geralmente estão cheios de atualizações de estilo de design. 
Em evolução, o estilo do visual de um aplicativo normalmente não é uma 
tarefa fácil.
Realidade: os componentes de um sistema de design são 
interdependentes. Isso significa que quando uma mudança é feita em 
uma localização, a mudança será herdada em todo o sistema. Isso torna 
as atualizações de estilo dentro de um sistema triviais sem esforço, mas 
muito maior em impacto. O que antes eram semanas – se não meses de 
trabalho –, agora pode ser realizado em uma única tarde.
Mito 3: o trabalho é concluído ao final do projeto.
Mito: uma vez que o sistema de design é projetado e construído, o 
trabalho está completo.
Realidade: um sistema de design é “vivo”, o que significa que exigirá a 
manutenção contínua e melhorias conforme as necessidades surgem, 
pois seu aplicativo, site ou sistema é alimentado por componentes 
reutilizáveis do seu sistema, no entanto, o projeto herdará, 
automaticamente, as melhorias para o sistema, reduzindo o esforço 
para manter o projeto. Este é o poder da aplicação do dimensionamento 
que um sistema de design oferece.
Os sistemas de design não são um modismo ou mesmo uma hipótese 
não testada. Para que o design encontre a escala necessária para 
corresponder ao rápido crescimento da tecnologia, o design baseado 
em componentes e o desenvolvimento precisaram ser uma solução 
comprovada e confiável.
50
Referências Bibliográficas
CHAPMAN, William L.; BAHILL, A. Terry; WYMORE, A. Wayne. Engineering Modeling 
and Design. Boca Raton: CRC Press, 1992.
MICROSOFT. Chapter 4: Design and Layout. MSDN, Redmond, 28 de agosto de 2013. 
Disponível em: http://msdn.microsoft.com/en-us/library/hh404087.aspx. Acesso: 24 
set. 2020.
SOMMERVILLE, Ian. 2000. In: SHANKAR, J. User Interface Design. San Francisco: 
Slide Share, 2012. Disponível em: http://www.slideshare.net/jaishas/user-interface-
designsommerville-bangalore-university. Acesso : 24 set. 2020.
SUAREZ, Marco et al. Design Systems Handbook. Design Better.Co, 2019. 
Disponível em: https://s3.amazonaws.com/designco-web-assets/uploads/2019/05/
InVision_DesignSystemsHandbook.pdf. Acesso em: 24 set. 2020.
YOUNG, S. User Interface Design With Markup. Cambridge: Machine Intelligence 
Laboratory Cambridge University Department of Engineering, 2009.
http://msdn.microsoft.com/en-us/library/hh404087.aspx
http://www.slideshare.net/jaishas/user-interface-designsommerville-bangalore-university
http://www.slideshare.net/jaishas/user-interface-designsommerville-bangalore-university
https://s3.amazonaws.com/designco-web-assets/uploads/2019/05/InVision_DesignSystemsHandbook.pdf
https://s3.amazonaws.com/designco-web-assets/uploads/2019/05/InVision_DesignSystemsHandbook.pdf
51
Design System e prototipação
Autoria: Marcelo Henrique dos Santos
Leitura crítica: Juliano Schimiguel
Objetivos
• Compreensão do processo de criação de protótipo 
de interfaces web e mobile.
• Aprender sobre Design System.
• Compreender sobre prototipação.
52
1. Design System
São sistemas cuidadosamente projetados, em que as abstrações certas 
são combinadas da maneira correta, e geram um sistema que seja fácil 
de aprender, fácil de mudar, agradáveis de usar e trabalhar.
Uma das tarefas mais interessantes e difíceis que podemos empreender 
em nossas carreiras como engenheiros ou cientistas da computação são 
o projeto de um sistema inteiro. Um sistema é um conjunto de partes 
interativas, geralmente muito grande para ser construído por uma única 
pessoa, criado para algum propósito específico. Trabalhamos com sistemas 
o tempo todo. Os sistemas operacionais que controlam nossas máquinas 
são sistemas. As camadas de hardware e software que permitem que os 
programas interajam com as máquinas umas com as outras em uma rede 
são sistemas – mesmo a maioria dos aplicativos que usamos.
Como engenheiros, é esperado saber que a maneira de resolver um 
grande problema é dividi-lo em um conjunto de problemas menores 
interativos. Cada um desses problemas, pode ser decomposto em até 
mesmo problemas menores, até depois de iterações suficientes, temos um 
problema que pode ser resolvido por conta própria. Cada decomposição, 
nos dá um conjunto de componentes, e decidir quais componentes são e 
como eles se encaixam é a atividade da construção do projeto de sistema.
Dentro dessa perspectiva, o software é um sistema que tem um design 
no processo de caracterização. Esse software será organizado em torno 
de métodos ou procedimentos ou funções ou qualquer abstração para 
este tipo de decomposição; cada um desses métodos, representará uma 
decomposição e uma abstração de um problema que deve ser resolvido 
para o software ser executado.
Projetar um sistema, requer que alguém pense sobre a maneira certa 
de decompor a funcionalidade e como criar um pequeno conjunto de 
53
abstrações que podem ser reutilizados e combinados para fornecer as 
informações necessárias da funcionalidade. A noção de que qualquer 
coisa que mostre algum tipo de design é, portanto, o resultado de 
alguma atividade consciente de design. É uma “confusão” que se baseia 
em uma ambiguidade no termo design.
1.1 Criação de protótipo de interfaces web e mobile
A prototipagem é uma forma eficaz de testar e avaliar novas ideias de 
design e ver como elas funcionam na prática. De acordo com Preece, 
Rogers e Sharp (2007), o uso de modelos e protótipos, também fortalece 
a comunicação entre a equipe de design, bem como os fornecedores os 
stakeholders, evitando, dessa forma, os mal-entendidos sobre como a 
ideia do design deve parecer, funcionar e ser experimentada.
Os protótipos são, portanto, adequados para o uso no processo de 
design, porque oferecem a possibilidade de testar soluções diferentes 
em cada estágio do projeto, e facilita a tomada de decisão para as 
próximas etapas do desenvolvimento. Não há regras sobre como um 
protótipo deve ser construído, desde que cumpra o seu propósito de 
comunicar as ideias de design. Portanto, os protótipos podem ser desde 
os esboços de papel a versões mais complexas do sistema/aplicativo 
sendo desenvolvidas. Os protótipos são, geralmente, descritos como 
protótipos de alta ou wireframe. Os protótipos de baixa fidelidade 
são caracterizados por maquetes simples que mostram partes do 
site/aplicativo. Esses tipos de protótipos são baratos, e podem ser 
construídos em tempo relativamente curto. Protótipos de alta fidelidade 
tendem a ter mais funcionalidade, e são usados para testar mais partes 
finalizadas do produto. É importante observar que o desenvolvimento 
dos protótipos de alta fidelidade, não significa, necessariamente, que o 
design seja sólido e tipos de protótipos podem ser usados em qualquer 
estágio do processo de design.
54
Os protótipos também podem utilizar características de ambos os tipos 
para permitir que os usuários tenham uma ideia de como um sistema/
produto pode ser usado. Um exemplo disso é um site onde algumas 
páginas funcionam como pretendido, mas outras são apenas estáticas, 
sem qualquer funcionalidade. Assim, a prototipagem é uma abordagem 
de desenvolvimento usada para melhoraro planejamento e a execução 
de projetos de software. É muito adequada para avaliar as experiências 
em novas áreas de aplicação e para suporte do desenvolvimento de 
software incremental ou evolutivo.
Gordon e Bieman (1995) fizeram um balanço e apresentaram uma 
pesquisa com diversos relatórios de experiência publicados e ainda 
não publicados. Eles identificaram três tipos de relatos de experiência: 
comercial, acadêmico e militar. O foco dessa pesquisa se pautou na 
análise a partir de uma visão de processo e produto, resultando em 
conclusões sobre os benefícios e possíveis problemas em áreas, como 
qualidade de design e participação do usuário final.
A prototipagem é um dos meios para gerar ideias sobre como a 
interface do usuário pode ser projetada, além de ajudar na avaliação 
da qualidade de uma solução em um estágio inicial. Esta é a razão 
por que a prototipagem da interface do usuário é aplicada em um 
número crescente de projetos. Para classificar as abordagens de 
prototipagem, Floyd (1984 apud BUDDE et al., 19884) apresenta três 
modelos: prototipagem exploratória, prototipagem experimental e 
prototipagem evolutiva.
A prototipagem exploratória, serve para esclarecer os requisitos 
e soluções potenciais. Isso resulta em discussões sobre o que deve 
ser alcançado por uma tarefa e como pode ser suportado com 
as Tecnologias da Informação. Geralmente, os resultados são a 
construção de protótipos de apresentação e protótipos funcionais. 
Já a prototipagem experimental, possui o seu foco na técnica de 
realização dos requisitos selecionados. Isso resulta na experiência sobre 
55
a adequação e viabilidade de um design/implementação particular. 
Os resultados são a construção de protótipos e placas de ensaio, 
geralmente funcionais. Por fim, a prototipagem evolutiva é um 
processo contínuo para ser adaptado em um sistema de aplicação para 
mudanças rápidas e restrições organizacionais. Não é apenas usado em 
um contexto de um único projeto. Embora no processo de prototipagem 
evolutiva de todos os tipos de protótipos possam ser construídos, a 
construção de uma versão preliminar (piloto) é de suma importância.
Além de classificar as diferentes abordagens para a construção de 
protótipos, também é importante classificar os diferentes tipos de 
protótipos que podem ser construídos. Os protótipos de apresentação 
são construídos para ilustrar como uma aplicação pode resolver 
determinados requisitos. Enquanto eles são frequentemente usados 
como parte da proposta do projeto, eles estão fortemente focados na 
interface do usuário. Nos protótipos funcionais, as partes importantes 
da interface do usuário e das funcionalidades de um aplicativo planejado 
são implementadas de forma estratégica. As placas de ensaio, por 
exemplo, servem para investigar aspectos técnicos, como a arquitetura 
do sistema ou funcionalidade de uma aplicação planejada. Elas são feitas 
para investigar certos aspectos de risco especial, e não se destinam para 
serem avaliadas pelos usuários finais. Por fim, os sistemas pilotos são 
protótipos muito maduros que podem ser aplicados na prática.
Diferenças no desenvolvimento mobile e web
Ao projetar as páginas web para a plataforma móvel, você tem uma 
série de considerações que precisam ser levadas em consideração que 
diferem da web voltada para usuários de desktop.
One Web é um termo descrito por WC3 (World Wide Web Consortium) e 
expressa a ambição do desenvolvimento do conteúdo web de forma 
acessível, dentro do razoável, em qualquer dispositivo habilitado para 
web em que o usuário esteja acessando as páginas. Isso não significa, 
56
necessariamente, que a experiência do usuário, a apresentação e as 
informações devem ser exatamente as mesmas em todos os dispositivos, 
mas o conteúdo deve ser tratado de acordo com o contexto do usuário e do 
dispositivo. Alguns serviços apelam mais para as experiências de desktop, 
enquanto outros, para as experiências dos usuários a partir dos dispositivos 
móveis. O provedor de serviços deve promover as necessidades, os pontos 
fortes e as limitações de cada dispositivo e projetar as experiências do 
usuário de acordo o consórcio W3C.
Ao projetar uma página web é fundamental incluir a análise da 
experiência de desktop e a possibilidade do acesso a partir dos 
dispositivos móveis (tablets e smartphones). As empresas e os 
desenvolvedores da web terão que começar a direcionar esses 
dispositivos para uma maior medida, e isso mudará as estratégias das 
empresas na web, onde elas devem fornecer os devidos suportes para 
os dispositivos.
Os sites para celular são facilmente acessíveis por qualquer pessoa com 
um smartphone ou tablet, independentemente de qual navegador da 
internet, sistema operacional, dispositivo ou rede é usada. Os clientes 
ou clientes potenciais, podem acessar pela internet por meio de um 
plano de dados adquirido de um provedor sem fio ou por qualquer 
conexão sem fio. Ao desenvolver o site em um dos padrões compatíveis, 
os navegadores de internet em smartphones e os tablets funcionam da 
mesma maneira que a internet nos navegadores no laptop ou desktop, 
embora o espaço disponível para exibição é muito mais limitado.
Embora qualquer URL possa ser acessado a partir do navegador em um 
smartphone ou tablet, se não for formatado para uso móvel, pode ser 
praticamente inutilizável. Seu conteúdo deve estar disponível em um 
formato consistente com os dispositivos móveis.
Os aplicativos móveis fornecem recursos adicionais que não estão 
prontamente disponíveis por meio de um navegador da internet, mas 
57
eles o fazem a partir de um custo de desenvolvimento e complexidade. 
A maioria das funções óbvias e mais usadas é a geolocalização (a partir 
das informações do dispositivo móvel), o que permite ao aplicativo 
identificar a localização e fornecer alguns serviços relacionados a 
posição do usuário. Além disso, os aplicativos móveis podem usar o 
poder de processamento do telefone para interagir com o usuário de 
maneiras mais fluídas da forma como ocorre nos navegadores.
Diversidade de plataformas e dispositivos móveis
Em contraste com os computadores pessoais, os dispositivos móveis 
não possuem um padrão para ser seguido. Claro, existem poucas 
plataformas – como o Google Android e Apple iOS – com participações 
de mercado significativas, mas para cobrir 90% de todos os usuários 
móveis, é necessário escrever um aplicativo para as diferentes 
plataformas existentes no mercado, como o Android, iOS, Symbian, 
Blackberry etc. Além disso, não é apenas uma série de plataformas, mas 
também várias versões de software e dispositivos fisicamente diferentes 
que causam muitos problemas para os desenvolvedores de software.
Existem centenas de dispositivos Android que estão no mercado, com 
ampla variedade de especificações de hardware. Para cobrir todos os 
dispositivos Android, um aplicativo deve ser compatível com cerca de 
dez versões diferentes da API do Android, e ser capaz de se adaptar a 
dezenas de resoluções de tela diferentes. Claro, outras plataformas móveis 
não são tão fragmentadas. A Apple com o seu sistema operacional iOS, 
por exemplo, é uma plataforma muito mais homogênea usada apenas 
em alguns dispositivos móveis. No entanto, para desenvolver e manter 
um aplicativo que cobre a maioria dos dispositivos móveis, requer uma 
quantidade notável de trabalho e um amplo conjunto de habilidades. 
Este princípio, não significa apenas o conhecimento de uma linguagem 
de programação, mas também ferramentas de desenvolvimento 
personalizadas, kits de desenvolvimento de software (SDKs) e APIs 
proprietárias que os desenvolvedores devem lidar – separadamente para 
cada plataforma móvel.
58
O único componente de software que é relativamente compatível em 
todas as plataformas e dispositivos móveis é um navegador da web. 
Todos os smartphones modernos e os dispositivos móveis fornecem 
um navegador capaz de interpretar o código JavaScript e visualizar 
componentes gráficos da IU escritosem HTML e CSS. Naturalmente, 
existem muitas desvantagens e problemas em escrever um aplicativo 
usando tecnologias da web, mas os novos recursos de HTML5 e CSS3 
estão fechando a lacuna entre os aplicativos da web e os aplicativos 
nativos em dispositivos móveis.
1.2 Comportamento do usuário
Os telefones celulares são, em sua essência, um dispositivo de comunicação 
em que as pessoas ficam conectadas ao longo do dia. Eles são dispositivos 
altamente pessoais e o tipo do telefone que o usuário utiliza e como 
e quando é usado, depende da personalidade do usuário, de suas 
necessidades e do ambiente. Os telefones celulares modernos também 
são muito versáteis, e podem ser usados de inúmeras maneiras. Mas, 
o que distingue o uso móvel é que os telefones celulares são usados 
principalmente em curtos períodos de atividades voltadas para um objetivo.
Figura 1 – Representação do comportamento do usuário
Fonte: fizkes/iStock.com.
59
Portanto, os sites para celular seriam idealmente projetados para tarefas 
específicas em que o usuário pode realizar em um curto espaço de 
tempo. Sites para celular devem ser capazes de lidar com interrupções 
e os designers devem assumir que o telefone móvel é usado em uma 
variedade de contextos. A maioria dos usuários, também carrega seus 
telefones com eles o tempo todo, e isso faz com que o telefone celular 
seja um produto muito interessante para projetar os serviços. Conforme 
Forum Nokia (2011), a vantagem para o usuário é que a informação está 
sempre disponível, instantaneamente, enquanto a desvantagem é que 
os telefones celulares podem interromper e quebrar a harmonia em 
nosso ambiente familiar ou corporativo.
Por causa do forte acoplamento entre o usuário e o telefone celular, 
os usuários podem sentir-se desconectados se não estiverem com 
o telefone; já os amigos e familiares, podem ficar extremamente 
preocupados quando ninguém atende o telefone. Tornou-se uma norma 
social que estamos sempre acessíveis onde quer que estejamos – o que 
pode ser estressante para muitas pessoas.
Ao projetar os serviços da web para computadores desktop, o contexto é 
relativamente estável. Segundo Forum Nokia (2011), o usuário de celular, 
por outro lado, usa seu celular durante o dia, onde quer que esteja, no 
ônibus, na rua ou na loja. Isso pode criar muitos desafios de design para 
os dispositivos móveis e diferentes condições ambientais, como clima, 
ruído e brilho pode tornar alguns métodos de interação impossíveis.
Os usuários também terão que dividir sua atenção entre o celular 
e o mundo real, e eles usarão o telefone celular de forma diferente 
dentro de diferentes contextos. Isso torna difícil prever como um 
determinado usuário pode usar seu telefone em uma dada situação. 
Portanto, ao projetar para dispositivos móveis é impossível conhecer 
todos os usuários e o contexto do ambiente em que o dispositivo 
pode ser usado.
60
Os serviços da web para dispositivos móveis não precisam “implorar” 
por atenção total do usuário em todos os momentos. Mas, a mudança 
e o contexto dinâmico também oferecem uma grande possibilidade 
para os designers projetarem para uma variedade de contextos. As 
tecnologias para os dispositivos móveis, como acelerômetro, sensores 
ou reconhecimento de localização dos dispositivos, aumentam as 
possibilidades de um design de interação inovador. Portanto, enquanto 
o designer não pode estar preparado para todas as situações possíveis, 
um aspecto importante do design móvel é mantê-los simples e tentar 
se concentrar nas funções mais importantes para o celular do utilizador 
(HÄKKILÄ; MÄNTYJÄRVI, 2006).
1.3 Melhores práticas
Gong e Tarasewich (2004) revisaram e editaram as Golden rules of 
interface design (Regras de Ouro do Design de Interface), propostas por 
Schneiderman para construir as diretrizes para o design de interface 
móvel. O conjunto de diretrizes produzidas são gerais para o design 
de interface móvel, principalmente voltado para sistemas operacionais 
e formulários. Muitos deles são aplicáveis a aplicativos da web e 
mobile, enquanto outros não são tão adequados. A seguir, alguns dos 
conceitos de Gong e Tarasewich (2004) que podem ser aplicados no 
desenvolvimento dos protótipos.
 1. Permitir que usuários frequentes usem atalhos
Lembre-se de reduzir as operações necessárias para evitar as repetições 
com frequência. Os usuários de celular, frequentemente, navegam na 
web enquanto estão em trânsito, e se eles tiverem que passar por uma 
série complicada de operações para completar uma tarefa simples, é 
provável que percam o interesse.
61
 2. Projete diálogos para produzir fechamento
Quando há uma sequência de ações que precisam ser realizadas, é bom 
agrupá-las. Conduza o usuário pelas ações necessárias em etapas e 
forneça maneiras de saber qual é a próxima etapa e a anterior em todos 
os momentos. Isto também é importante para fornecer um feedback 
para concluir as tarefas para torná-las claras para o usuário.
 3. Ofereça feedback informativo
É importante fornecer um feedback informativo para as operações dos 
usuários e o seu progresso. Às vezes, pode ser problemático fornecer 
um bom feedback visual sobre as plataformas móveis devido ao 
tamanho pequeno da tela. Em alguns casos, outros tipos de feedback 
podem ser considerados como ruído ou som.
 4. Suporte local de controle interno
É importante que o usuário sinta que está no controle do aplicativo e 
não o contrário. Os usuários precisam sentir que estão iniciando as 
ações, não simplesmente respondendo a ações predefinidas. Então, 
embora seja uma boa ideia projetar os aplicativos da web para ajudar o 
usuário, dando dicas sutis sobre o que fazer e sugerir comportamentos, 
o usuário sempre precisa estar no comando.
 5. Consistência
Os sites devem fornecer uma aparência consistente em várias 
plataformas. Um usuário que está acostumado com a versão desktop 
de um site deve se sentir em casa ao visitar o site no dispositivo móvel. 
A consistência é uma regra de ouro no design, pois, para fornecer 
uma experiência de qualidade aos seus usuários, é essencial que você 
seja consistente tanto no design quanto no conteúdo de seus sites. A 
consistência é o maior fator que separa uma experiência negativa de 
uma positiva.
62
 6. Design para pequenos dispositivos
Ao projetar interfaces de usuário para os dispositivos móveis modernos, 
você deve, principalmente, tomar cuidado com a colocação de telas de 
toque pequenas. O tamanho limitado requer mais cuidado e devemos 
viabilizar quais informações são mais importantes para mostrar em 
comparação com o design para desktop web. As telas sensíveis ao toque, 
também precisam de pontos de interação maiores do que as telas de 
desktops regulares, pois não existe a mesma precisão com o dedo em 
relação ao ponteiro do mouse. Portanto, é importante tornar o ponto de 
interação tal como links, campos de texto e botões grandes o suficiente 
para interações de toque.
 7. Design para atenção limitada e dividida
Normalmente, os usuários de celular têm muitas atividades e podem 
precisar se concentrar em mais de uma tarefa ao mesmo tempo. 
Portanto, os sites para dispositivos móveis não precisam exigir atenção 
total do usuário em todos os momentos.
 8. Design para interação “de cima para baixo”
Por ser limitada a quantidade de informações em uma única 
visualização, é necessário ser capaz de compreender a visão geral, as 
informações mais importantes do conteúdo, à primeira vista. Isso pode 
ser alcançado com títulos ou textos curtos que podem ser expandidos 
caso o usuário queira saber mais. Design de uma coluna com o mínimo 
de rolagem e a possibilidade de zoom (quanto for possível e/ou 
necessário) é uma opção recomendada.
 9. Design para diversão
Funcionalidade e usabilidade são fatores-chave ao projetar para 
experiência na web. No entanto, ter grande funcionalidade e usabilidade 
por si só não tornará a experiência completa. A estética e as interações 
63
úteis, também são fatores-chave,pois fornecem aos usuários uma 
experiência memorável na web. O uso cuidadoso de cores e pequenos 
gráficos otimizados para celular podem melhorar a impressão do 
usuário sobre o celular e sobre a experiência na web.
1.4 Métodos de design de interação
A motivação para usar esses métodos é que a maioria são bem 
conhecidos, tanto para nós quanto para o campo do design de interação, 
e têm se mostrado benéficos para o processo de design de interação por 
inúmeros estudos e designers de interação praticantes.
1.4.1 Análise das partes interessadas
Identificar os principais interessados é importante para descobrir 
como eles podem ser influentes na tomada de decisão do processo de 
desenvolvimento de aplicativos. Uma parte interessada é uma pessoa, 
organização ou grupo de usuários que influenciará ou será afetado pelo 
sistema (trata-se de sinônimo de stakeholders). Quando as principais 
partes interessadas são identificadas, é importante analisar suas 
funções, objetivos da tarefa e responsabilidades para o projeto. Isso é 
feito para obter uma visão geral das necessidades de comunicação e o 
que é necessário de cada grupo de partes interessadas.
1.4.2 Identificação dos requisitos do usuário
Entrevistas de requisitos do usuário, como o próprio nome já diz, são 
usadas para identificar os requisitos dos usuários, das partes interessadas 
e de especialistas no domínio. É uma ótima técnica que ajuda a reunir 
as informações sobre as necessidades do usuário e o domínio do 
problema, pois o foco das entrevistas é explorar o domínio do problema, 
semiestruturado ou não estruturado, além de serem usadas principalmente 
onde os entrevistados têm permissão para expandir suas respostas.
64
Também é um ótimo método para envolver as partes interessadas e 
usuários finais no início do projeto e fazê-los participar das decisões de 
design iniciais.
1.4.3 Brainstorming
O brainstorm é provavelmente o método mais amplamente usado e 
conhecido para gerar ideias e soluções para um determinado problema. 
É simples e usado no design de interação para gerar ideias de design 
e encontrar novas maneiras de apoiar os usuários. O brainstorming 
também permite que os designers discutam ideias de design em um 
fórum aberto onde todas as ideias devem ser levadas em consideração e 
não deve ser debatido ou criticado. Também é encorajado a pensar “fora 
da caixa”, além de ser uma ferramenta eficaz especialmente ao projetar 
para áreas contextuais não conhecidas pelos designers. Projetando para 
dispositivos móveis envolve muitos aspectos contextuais e, portanto, o 
brainstorming é um ótimo método para incluir o contexto ao gerar ideias.
1.4.4 Use Cases
Os casos de uso se originaram da engenharia de software orientada a 
objetos no início dos anos 1990, mas, desde então, foram adaptados 
em um sentido mais amplo do que quando introduzidos pela primeira 
vez. O foco da construção nos casos de uso em cenários é a descrição 
da forma como o usuário interage com um sistema. A perspectiva dos 
cenários é do ponto de vista do usuário (chamado ator) e não do sistema 
(PREECE; ROGERS; SHARP, 2007).
1.4.5 Prototipagem rápida
Existem diferentes interpretações de prototipagem rápida. A base 
da prototipagem rápida, desenvolve um método para construir a 
prototipagem enquanto envolve os usuários. O teste é feito em iterações 
65
em que os protótipos aumentam, gradualmente, em fidelidade. O 
retorno dos usuários, no entanto, deve ser recebido rapidamente e 
implementado tão rapidamente quanto possível, de preferência dentro 
de alguns dias. Um usuário é um termo amplo na prototipagem rápida, 
pois pode representar os usuários no sentido tradicional, mas também 
designers, desenvolvedores e partes interessadas.
A prototipagem rápida é feita em iterações onde a partir dos feedbacks; 
é possível realizar as avaliações seguido do refinamento do protótipo 
com base nas informações coletadas. Após essa dinâmica, poderemos 
entrar na próxima iteração.
1.4.6 Wireframes
Os wireframes são usados, principalmente, para criar protótipos e 
maquetes das GUI iniciais para testar e avaliar as ideias da equipe. A 
função dos wireframes é comunicar a estrutura da GUI e descrever a 
forma da navegação para o usuário.
Wireframes podem variar de desenhos estruturais simples a simulações 
interativas de alta fidelidade do sistema, com animações, links funcionais 
e interações complexas.
1.4.7 Prototipagem em papel
Semelhante a wireframes, podemos criar uma simulação baseada em 
papel de uma interface para testar com os usuários a interação e a 
proposta de desenvolvimento.
Quando o protótipo de papel foi preparado, um membro do projeto 
da equipe senta-se com os usuários e simula o funcionamento do 
computador movendo os elementos da interface ao redor, de acordo 
com as ações do usuário.
66
A prototipagem em papel, normalmente é utilizada na primeira etapa de 
prototipagem do processo de design.
Referências Bibliográficas
FLOYD, C. A Systematic Look at Prototyping. In: BUDDE, R. et al. (eds.). Approaches 
to Prototyping. Springer-Verlag, 1984.
FORUM NOKIA. Forum Nokia Library. 2011. Disponível em: http://library.forum.
nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-
E97C-4DA0-95F6-F464ECC995BC_cover.html. Acesso em: 5 out. 2020.
GONG, J.; TARASEWICH, P. Guidelines for Handheld Mobile Device Interface Design. 
Proceedings of DSI 2004 Annual Meeting. p. 3751-3756. Boston: 2004.
GORDON, S. S.; BIEMAN, J. M. Rapid Prototyping: Lessons Learned. IEEE Software, p. 
85-96, jan./1995.
HÄKKILÄ, J.; MÄNTYJÄRVI, J. Developing Design Guidelines for ContextAware Mobile 
Applications. Mobility ‘06 Proceedings of the 3rd international conference on 
Mobile technology, applications & systems (p. 1-7). Bangkok: ACM, 2006.
PREECE, J.; ROGERS, Y.; SHARP, H. Interaction Design: beyond humancomputer 
interaction. West Sussex: John Wiley & Sons, 2007.
W3C. Media Queries. 2011, W3C, [s.l.], 27 de julho de 2010. Disponível em: http://
www.w3.org/TR/css3-mediaqueries/. Acesso em: 19 set. 2020.
http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html
http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html
http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-A8DF3EB8-E97C-4DA0-95F6-F464ECC995BC_cover.html
http://www.w3.org/TR/css3-mediaqueries/
http://www.w3.org/TR/css3-mediaqueries/
67
BONS ESTUDOS!
	Sumário
	Conceitos gerais sobre UI design
	Objetivos
	1. Princípios de design
	Referências Bibliográficas
	A usabilidade nas interfaces web e mobile
	Objetivos
	1. Princípios da usabilidade
	Referências Bibliográficas
	User Interface e Design system 
	Objetivos
	1. User Interface
	Referências Bibliográficas
	Design System e prototipação 
	Objetivos
	1. Design System
	Referências Bibliográficas