Ferramentas de apoio à construção de interfaces

Prévia do material em texto

Ferramentas de apoio à construção 
de interfaces
Apresentação
A preocupação por criar uma interface amigável, e que ao mesmo tempo seja efetiva e fácil de 
utilizar, é uma das grandes preocupações do designer de interfaces, pois é a partir dela que o 
usuário irá se comunicar com o sistema computacional para realizar as suas tarefas. A utilização de 
diferentes técnicas para a construção de interfaces é essencial para que a equipe de design 
compreenda o que deve ser apresentado, como estruturar a informação e como a interação irá 
ocorrer.
Ademais, essas ferramentas são valiosas para se antecipar o processo de avaliação, saindo de 
propostas de baixa fidelidade para interfaces de alta fidelidade, semelhantes ao sistema final. Com 
o avançar do projeto, o sistema irá sendo construído e, com isso, a utilização de diferentes 
ferramentas para apoiar a criação e a estruturação de interfaces deverá ser utilizada. Dessa forma, 
o designer deve conhecer as principais ferramentas do mercado que estão disponíveis para que ele 
faça o melhor proveito do poder computacional oferecido.
Nesta Unidade de Aprendizagem, você aprenderá técnicas para a criação de artefatos visuais que 
apoiarão o processo de compreensão do problema e a criação da solução, saindo de apresentações 
de baixa fidelidade, como mockups, a protótipos de alta fidelidade. Você também aprenderá sobre 
APIs e frameworks disponíveis no mercado que auxiliam no desenvolvimento de interfaces de 
sistemas. Por fim, você conhecerá algumas ferramentas automatizadas para a avaliação de 
interfaces, visando a uma boa comunicabilidade, usabilidade, experiência do usuário e 
acessibilidade do sistema.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Identificar ferramentas para a construção de mokups, wireframes e protótipos.•
Analisar ferramentas, bibliotecas e APIs para a implementação de interfaces de usuário.•
Aplicar ferramentas de avaliação automatizada em interfaces.•
Desafio
A construção de diferentes representações gráficas e visuais, como storyboards, wireframes e 
mockups, é uma ótima fonte para a validação do entendimento e da proposta apresentada. A 
utilização desses métodos pode trazer uma vantagem competitiva e uma maior aceitação do 
produto desenvolvido.
Dessa forma, o uso de ferramentas corretas, que auxiliam o designer na construção visual da 
proposta de sistema, favorece a criação desses materiais de forma rápida e simples. Considerando 
as vantagens adquiridas com a utilização desses métodos, a empresa Desenvolve! recomenda que 
suas equipes de design realizem tais atividades no processo de desenvolvimento.
Você foi alocado em um novo projeto que visa a produzir uma aplicação móvel para auxiliar os 
usuários a registrar queixas, junto à Prefeitura, de problemas referentes à cidade, tais como: luz do 
poste queimou, buraco na pista, limpeza urbana, entre outros problemas.
A descrição do projeto pode ser vista a seguir.
O projeto ainda está na fase inicial. Você e sua equipe já realizaram algumas atividades para o 
entendimento do problema e criaram um mapa mental do que poderia ser a proposta de solução.
Nesse momento, a sua tarefa é criar um wireframe – fique livre para usar a ferramenta que desejar 
–, apresentando a sua visão de uma possível solução.
Infográfico
No processo de desenvolvimento de sistemas, a criação de interfaces é uma etapa que exige um 
comprometimento da equipe de design, a fim de produzir um sistema de qualidade. A utilização de 
ferramentas e frameworks auxilia a equipe na realização dessas atividades, apresentando 
componentes que facilitam o processo de criação. Após a estruturação da solução a ser 
desenvolvida, o web designer é um profissional responsável por criar interfaces web e materializá-
las, e ele deve conhecer as principais linguagens para a criação destas páginas: CSS, HTML e 
JavaScrit. Essas linguagens possibilitam a estruturação e o design, além de permitir a elaboração de 
funcionalidades mais complexas. 
Acompanhe, no Infográfico a seguir, as principais linguagens para a criação de páginas.. 
 
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/507c1a8d-a2af-43a3-acc0-2f7a32e7890d/a60270c7-e611-4797-b513-7f3795dbc63c.jpg
***DG, segue as imagens utilizadas no ppt em resolução melhor, utilizar:
IMAGEM 1 INFOGRAFICO
IMAGEM 2 INFOGRAFICO
IMAGEM 3 INFOGRAFICO
https://statics-marketplace.plataforma.grupoa.education/sagah/3401a376-0ebf-4f26-ba2f-8b17e19f25ed/41eaa54b-8f74-4075-aab4-eaf3c5c68c1d.png
https://statics-marketplace.plataforma.grupoa.education/sagah/baa356e1-e59f-4b04-b4bd-0ba6cfdc0c61/4a38fa9d-d804-4d02-bfb3-c7ae71dc6e76.png
https://statics-marketplace.plataforma.grupoa.education/sagah/9a2dcd31-0ec3-4597-9209-ae7e7099ebc0/e84057af-22f6-497e-881f-f1b4e1a449e6.png
Conteúdo do Livro
A aceitação do sistema computacional é o objetivo que guia todo o fluxo de desenvolvimento. 
Dessa forma, a equipe de design está em constante busca por utilizar métodos, técnicas e 
ferramentas que ampliem as características do sistema, potencializando a sua vantagem e 
efetividade para a realização das tarefas dos usuários.
A realização de avaliação não somente ao final da construção do sistema, mas ao longo do fluxo de 
desenvolvimento, é uma técnica que possibilita a identificação e a correção de problemas antes 
mesmo da implementação do sistema, o que favorece em uma maior economia de custo e 
cronograma.
O conhecimento de ferramentas, APIs e frameworks também é de essencial importância para a 
construção do sistema, quando este já está definido. Esses frameworks oferecem ao desenvolvedor 
um ambiente com componentes e artefatos que podem ser utilizados, facilitando o processo de 
codificação.
Por fim, a realização da avaliação na fase final do processo de desenvolvimento é de grande valia 
para compreender se o sistema oferece uma boa usabilidade e experiência ao usuário. Ferramentas 
manuais e automatizadas podem ser utilizadas para a realização desse processo.
No capítulo Ferramentas de apoio à construção de interfaces, da obra Interface Humano-
Computador, você estudará sobre a importância da criação de respostas visuais ao longo do 
processo de concepção da ideia, como, por exemplo, a criação de mockups, wireframes e protótipos, 
conhecerá as principais ferramentas utilizadas para o desenvolvimento do sistema computacional, 
transformando a solução desenhada em um sistema real, e por fim, conhecerá algumas ferramentas 
para a avaliação dos sistemas computacionais.
Boa leitura.
INTERFACE 
HUMANO-
COMPUTADOR
Leonara de Medeiros Braz
Ferramentas de apoio à 
construção de interfaces
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
  Identificar ferramentas para construção de mokups, wireframes e 
protótipos.
  Descrever ferramentas, bibliotecas e API para a implementação de 
interfaces de usuário.
  Aplicar ferramentas de avaliação automatizada em interfaces.
Introdução
A realização da avaliação se configura como a terceira parte fundamental 
no processo de desenvolvimento de sistemas computacionais. Porém, 
para uma maior efetividade, essas tarefas devem ser realizadas não apenas 
no final do ciclo de desenvolvimento, quando o sistema já está totalmente 
construído, mas ao longo do processo. 
No entanto, o desenvolvimento de sistemas funcionais tem um custo 
elevado e demanda muito tempo. Dessa forma, a utilização de técnicas 
para a construção parcial do sistema, tal como a arquitetura da infor-
mação, interfaces estáticas, interfaces dinâmicas, entre outras partes 
do sistema, auxilia a equipe de design a avaliar se a proposta de sistema 
está adequada às necessidades de seus usuários. Nesse sentido, várias 
ferramentas podem ser utilizadas para auxiliar na construção desses 
protótipos e em sua avaliação. 
Neste capítulo, portanto, vocêvai aprender sobre a importância da 
criação de storyboards e protótipos, tanto de baixa quanto de alta fide-
lidade. Além disso, vai conhecer algumas ferramentas que podem ser 
utilizadas para a criação de artefatos visuais e frameworks atuais que 
possibilitam ao desenvolvedor dar vida ao projeto desenhado, trans-
formando a solução visual em linhas de código. Por fim, vai conhecer 
algumas ferramentas para realizar a fase de avaliação do sistema com-
putacional, seguindo os critérios estabelecidos pela área de interação 
humano-computador: usabilidade, comunicabilidade, acessibilidade e 
experiência de usuário.
1 Ferramentas para a criação 
de artefatos visuais
O uso de esboços e rabiscos pode ser uma ótima ferramenta para a identifi -
cação das necessidades dos usuários em um primeiro momento. De acordo 
com McElroy (2016), os protótipos de baixa fi delidade são ótimos para uma 
avaliação inicial, pois sua construção é rápida e não exige conhecimentos 
avançados nem um orçamento elevado, pois é feita com materiais disponíveis 
no dia a dia.
No entanto, esses protótipos possuem limitações, pois uma baixa fide-
lidade pode confundir o usuário final no teste, gerando, assim, resultados 
incertos para análise. Além disso, podem surgir muitas dúvidas na hora de 
implementar a parte visual se não houver certas especificações. Dessa forma, 
outros protótipos, com níveis de fidelidades diferentes, devem ser utilizados 
para realizar a avaliação das propostas apresentadas.
Storyboards
Os storyboards buscam representar a história de forma pictórica, criando 
um cenário, de forma visual, para melhor entendimento de como a ação será 
realizada. Essa técnica é utilizada para a estruturação da produção de desenhos 
e fi lmes (HART, 1998), potencializando-se com as produtoras de vídeos e 
mostrando cenários, atores, ângulos e enquadramentos. 
Porém, os storyboards, devido a suas vantagens de utilização, estão sendo 
utilizados em vários outros setores de estudo, incluindo o desenvolvimento de 
sistemas centrado no usuário. Para Knapp (2013), os storyboards auxiliam a equipe 
de design na compreensão das ideias que estão sendo apresentadas pela equipe, 
de forma que todos tenham o mesmo entendimento do que está sendo proposto.
Os principais recursos utilizados para a criação de storyboards são papel, 
lápis e caneta. Porém, existem ferramentas, gratuitas e pagas, que são uti-
lizadas para auxiliar esse processo. Alguns exemplos são: Photoshop, Toon 
Boom StoryBoard Pro, Storyboarder, Plot e Canva. As ferramentas Photoshop, 
Toon Boom StoryBoard Pro são ferramentas pagas, enquanto as demais são 
ferramentas gratuitas.
Ferramentas de apoio à construção de interfaces2
A ferramenta Photoshop é amplamente utilizada por profissionais de design, 
pois oferece um leque completo de funcionalidades; no entanto, é uma ferramenta 
que requer conhecimento avançado para a sua utilização. O Storyboard Pro é 
uma solução que busca combinar todas as necessidades do designer em uma 
ferramenta, apresentando funcionalidades de desenho, script, controle de câmera, 
recursos de criação de animações e som; como o Photoshop, é uma ferramenta 
voltada para profissionais, de modo que são necessárias habilidades específicas 
para sua utilização, que contém avançados controles de som e edição.
O Plot é uma ferramenta gratuita e on-line que busca oferecer suas fun-
cionalidades de forma simples e descomplicada. Seu lema é “Gaste seu tempo 
experimentando ideias, não lutando com software volumoso” (PLOT, 2020). 
Dessa forma, apresenta-se como uma ferramenta que não é tão poderosa e 
completa, mas permite a edição das telas de forma descomplicada, o que é 
interessante para uma primeira etapa do processo de desenvolvimento de 
sistemas. A Figura 1 apresenta a tela inicial da ferramenta — o painel de 
edição contém várias ferramentas para que o designer utilize sua criatividade.
Figura 1. Ferramentas do Plot.
Fonte: Adaptada de Plot (2020). 
A ferramenta Storyboarder é uma ferramenta desktop gratuita e de código 
aberto. Os criadores desenharam essa ferramenta por sentirem necessidade de 
funcionalidades que não encontravam nas que já existiam. Assim, foram incluí-
das todas as ferramentas que eram necessárias para um desenho rápido e foram 
removidas todas as outras não necessárias (WONDER UNIT, 2019). O usuário 
3Ferramentas de apoio à construção de interfaces
também pode importar os storyboards feitos em papel para a plataforma por meio 
de fotos — a ferramenta automaticamente importará os frames no projeto criado. 
Adicionalmente, o StoryBoarder possibilita uma edição mais avançada com 
o Photoshop; dessa forma, se o designer precisar de mais controle e detalhe, 
basta clicar no botão de edição que será redirecionado para o outro aplicativo. 
A ferramenta também possibilita exportar o arquivo para GIF, PDF, Final Cut 
e Premiere (ferramentas de edição de vídeo). A Figura 2 apresenta a página 
inicial da ferramenta.
Figura 2. Apresentação dos elementos disponíveis na ferramenta StoryBoarder.
Fonte: Adaptada de Wonder Unit (2019). 
Wireframes
Um wireframe representa o design do sistema em um grau de fi delidade bem 
baixo, mostrando os grupos de informações que devem aparecer no sistema e 
onde (a arquitetura) eles aparecem. Os wireframes podem ser vistos como um 
esqueleto do sistema — não apresentam cor, forma ou informações; seu principal 
objetivo é representar o sistema, contendo todas as suas partes importantes. 
A criação de wireframes deve ser feita de forma rápida e, por isso, não existe 
uma preocupação estética da interface do sistema e eles geralmente são desenhados 
em preto e branco. A escolha de ícones ou espaços reservados deve ser representada 
por um retângulo vazio com um x no meio, de modo que o designer não tome 
tempo escolhendo imagens representativas. Os wireframes são interessantes para 
a comunicação interna da equipe, permitindo que todos tenham um entendimento 
sobe a proposta apresentada e que o projeto seja bem documentado.
Ferramentas de apoio à construção de interfaces4
O Balsamiq (2020) é uma ferramenta que possibilita a criação de wirefra-
mes. Observe na Figura 3 que os elementos apresentados não são refinados 
ou bonitos, mas, simples, mostrando “como” as informações básicas serão 
apresentadas no sistema, “o que” será ou não inserido como informação e 
“onde” essas informações serão apresentadas.
Figura 3. Ferramenta Balsamiq.
Fonte: Balsamiq (2020, documento on-line).
Mockups
Os mockups são moldes ou representações em escala do sistema desenvolvido. 
Caracterizam-se por uma representação mais realista do que a dos storyboards 
e wireframes, aumentando um pouco mais o seu grau de fi delidade. Os mockups 
são utilizados para apresentar um estado do projeto (design proposto) antes 
que esteja pronto. 
Com a utilização de mockups, pode-se solicitar ao usuário que entenda 
melhor a estruturação do sistema e o design, pois, nesse momento, o designer 
pode apresentar formas, cores, tamanho, texturas e qualquer outro atributo 
importante para a validação do sistema (CRISTIAN, 2018). Adicionalmente, 
o uso de mockups auxilia o desenvolvedor a ter um melhor entendimento da 
proposta de solução.
A ideia principal da utilização de mockups é a validação da ideia do produto 
antes de produzi-lo. Trata-se de um meio-termo entre os wireframes — que 
possuem pouca informação visual e estética para ser apresentada ao usuário 
5Ferramentas de apoio à construção de interfaces
e, por isso, possuem uma maior resistência — e protótipos de alta fidelidade 
— que necessitam de mais tempo e recurso para sua criação. Dessa forma, os 
mockups apresentam mais informações sobre a arquitetura da interface (em 
comparação aos wireframes) e não consumem muito tempo e recurso para a 
sua criação (em comparação aos protótipos de alta fidelidade). Ademais, se 
mudanças forem solicitadas, é mais barata sua modificação com a utilização 
dos mockpus do que nos protótipos.
O Moqups (2020) é umaferramenta que possibilita ao designer a criação, 
o teste e a validação de mockups detalhados de forma rápida. Ele suporta 
a evolução da aplicação, movendo-se de projetos de baixa fidelidade para 
alta fidelidade de acordo com a evolução do projeto. A Figura 4 apresenta a 
ferramenta Moqups com sua gama de funcionalidades.
Acesse o link a seguir, que apresenta um site com grande variedade de fontes de 
mockups, de forma grátis, para seus usuários.
https://qrgo.page.link/Qmb2H
Figura 4. Ferramenta Moqups.
Fonte: Moqups (2020, documento on-line).
Ferramentas de apoio à construção de interfaces6
Protótipos
Os protótipos são representações, de baixo a alto nível, da aplicação a ser 
desenvolvida. Eles servem para auxiliar a equipe de design a “aguçar” a 
criatividade e validar o entendimento do problema a ser solucionado. 
Os protótipos de alta fidelidade são criados em um momento mais “estável” 
do processo de desenvolvimento, quando a arquitetura e o design do sistema já 
estão mais avançados e definidos. Segundo McElroy (2016), eles são utilizados 
para testar a interação do sistema e seus detalhes.
A criação de protótipos funcionais exige um cuidado para que se pareça 
ao máximo com o sistema final. Outro fato importante é que o protótipo 
funcional, apesar de possibilitar a avaliação da interação, não possui back-
-end (parte funcional, que utiliza linguagem de programação), ou seja, essa 
independência reduz o custo e o tempo de desenvolvimento, pois, apesar de 
exigir mais tempo que as demais técnicas apresentadas, é muito mais rápida 
do que programar todo o sistema.
Algumas das ferramentas que auxiliam o designer na prototipação são: 
Justinmind, In Vision, Proto.io, Marvel e Adobe XD.
O Justinmind é uma ferramenta — que apresenta uma versão gratuita — 
para a prototipação de sistemas Web, mobile e desktop. O aplicativo possui 
painéis e eventos: os painéis possibilitam a inserção em tela dos diferentes 
elementos desejados, enquanto os eventos permitem informar as ações que 
devem ser realizadas ao interagir com os elementos.
A ferramenta In Vision, além de permitir a prototipagem do sistema, 
possibilita o compartilhamento, em tempo real, do projeto com os clientes, 
oferecendo um feedback mais rápido. Ademais, utiliza uma estrutura simples, 
possibilitando que os clientes compreendam as propostas apresentadas.
O Proto.io oferece a prototipação de aplicativos mobile e permite a proto-
tipação e o gerenciamento de animações utilizadas na aplicação. Além disso, 
possibilita que o designer atribua eventos aos elementos da interface para 
que a interação seja avaliada. O aplicativo Marvel é outra alternativa a todos 
esses aplicativos apresentados.
Já o Adobe XD é uma ferramenta da família Adobe que é recente, mas 
que se mostra muito eficaz para a prototipação de diferentes sistemas com-
putacionais, tais como websites, aplicações móveis, interfaces por voz, jogos 
e muito mais. A ferramenta também possibilita a criação colaborativa entre 
os membros da equipe, o compartilhamento com clientes e stakeholders e a 
reutilização de elementos em/de outros sistemas.
7Ferramentas de apoio à construção de interfaces
Implementação de interface 
Com o avançar do projeto, é importante que os artefatos criados evoluam 
para que novos conceitos sejam avaliados e novas informações possam ser 
coletadas. Dessa forma, a equipe de desenvolvimento avançará no projeto.
Além dos protótipos de alta fidelidade, é importante que a equipe inicie o 
processo de desenvolvimento do sistema utilizando ferramentas, bibliotecas 
e APIs (Application Programming Interface ou, em português, interface de 
programação de aplicativos) que os auxiliem nessa tarefa. 
Um API fornece um conjunto de padrões que devem ser seguidos, guiando 
a construção do aplicativo. Seu principal objetivo é disponibilizar recursos 
e detalhes de como o sistema deve ser implementado. Pode ser disponibili-
zado em diferentes formas, como plug-ins e frameworks. Os plug-ins são 
extensões que podem ser instaladas em programas maiores para adicionar 
novas funcionalidades ao sistema computacional, enquanto os frameworks 
são ferramentas que auxiliam o desenvolvedor a trabalhar com determinada 
linguagem de programação, contribuindo para a utilização de funcionalidades. 
Os frameworks apresentam uma estrutura definida, exigindo que o desenvol-
vedor apenas adapte ao seu programa; nesse caso, há diversos frameworks 
que podem ser utilizados.
Algumas linguagens de programação fornecem ferramentas que auxiliam 
o designer na construção das interfaces do sistema computacional. Podemos 
dividir o sistema em duas partes complementares: o front-end e o back-end. 
O front-end é como uma abstração do sistema, simplificando os componentes 
utilizados e apresentando de forma amigável, para o usuário, as informações de 
como a interação vai ocorrer. O back-end pode ser visto como a parte funcional 
do sistema, em que há processamento das informações apresentadas pelo 
usuário. O usuário não precisa ter ciência de como as informações inseridas 
por ele serão processadas; o que é necessário é entender o que o sistema está 
informando e o que é solicitado como entrada para que a interação seja efetiva.
Os frameworks front-end possibilitam o desenvolvimento de interfaces, 
fornecendo ferramentas que facilitam a tarefa de desenvolver a arquitetura das 
informações que serão passadas aos usuários por meio da interface do sistema. 
Alguns dos frameworks front-end utilizados pela comunidade de desenvolvi-
mento são: Pure, Material-UI, Semantic-UI, Materialize, Foundation e Bootstrap.
O Pure foi criado com o intuito de ser utilizado em qualquer projeto Web. 
Dessa forma, trabalha apenas com códigos que utilizam as linguagens HTML 
e CSS. O Pure é de fácil aprendizado, com aplicações leves e simples de serem 
compreendidas, principalmente por não utilizar a linguagem JavaScript. Em seu 
Ferramentas de apoio à construção de interfaces8
site, o Pure se apresenta como “ridiculamente pequeno” e também possibilita 
a criação de layouts responsivos, ou seja, que se adequam a qualquer tamanho 
de tela. Adicionalmente, possibilita ao designer adicionar novos códigos CSS, 
permitindo a personalização da aparência de acordo com o seu desejo.
O Material-UI utiliza o padrão Material Design desenvolvido pela Google, 
trazendo formas mais geométricas e coloridas aos aplicativos. Esse framework tem 
como base o framework React do JavaScript, que possui uma boa aceitação pela 
comunidade, trazendo um foco maior para a melhoria da experiência do usuário.
O Semantic-UI é um projeto livre e de código aberto que tem como diferen-
cial uma linguagem “compatível com humanos”, como o próprio site apresenta, 
utilizando uma sintaxe de linguagem natural, vinculando os conceitos de forma 
mais intuitiva. O framework oferece aos designers diferentes definições, como: 
elementos, coleções, visualizações, módulos e comportamentos que abrangem 
toda a gama de design de interface. A Figura 5, a seguir, apresenta alguns dos 
elementos disponíveis no framework Semantic-UI. 
Figura 5. Elementos oferecidos no framework Semantic-UI.
Fonte: Semantic-UI (2020, documento on-line).
Semelhante ao Material-UI, o framework Materialize utiliza o Material 
Design como ferramenta para a utilização de cores, formatos e ícones, incorpo-
rando componentes e animações e fornecendo um maior feedback aos usuários. 
Esse framework se mostra como uma ótima ferramenta para desenvolvedores 
iniciantes, com uma documentação detalhada e canal aberto de comunicação.
O Foundation se apresenta como um framework para qualquer disposi-
tivo, mídia e acessibilidade. É semântico, legível, flexível e completamente 
9Ferramentas de apoio à construção de interfaces
personalizável, utilizando marcações simples sem sacrificar a funcionalidade 
e velocidade. Ademais, ele possibilita ao designer personalizar o framework, 
incluindo e excluindo os elementos além de definir tamanho, cores e fontes.
O frameworkFoundation é baseado no pré-processador SASS, permitindo uma cons-
trução mais rápida, pois chama funções de estilo prontas. Para saber mais sobre 
pré-processadores, veja a matéria disponível no link a seguir.
https://qrgo.page.link/UeTm1
O Bootstrap é visto como o framework número um no desenvolvimento de 
interfaces e se destaca devido a sua farta documentação e a uma comunidade 
ativa, além da infinidade de componentes que estão disponíveis para serem 
utilizados. O Bootstrap é uma ferramenta gratuita para desenvolvimento 
HTML, CSS e JS.
Existem diversas outras ferramentas e bibliotecas disponíveis para auxiliar 
a equipe de desenvolvimento no processo de criação da interface do sistema 
computacional. O conhecimento dessas características é importante para que 
a escolha da ferramenta seja assertiva e apoie de forma efetiva a construção 
do sistema. Além disso, as habilidades e os conhecimentos do desenvolvedor 
também devem ser considerados no processo de escolha do framework.
2 Avaliação automatizada em interfaces
Além das técnicas e ferramentas utilizadas para a criação de interfaces amigá-
veis, outro conceito-chave que deve ser considerado na garantia da qualidade 
é a usabilidade. Criar sistemas amigáveis efi cientes e fáceis de usar é requisito 
mínimo que deve ser cumprido para a aceitação do sistema oferecido. Para 
auxiliar na avaliação da usabilidade dos sistemas computacionais, Nielsen 
(1994) apresenta um conjunto de dez heurísticas de usabilidade que guiam a 
avaliação da interface proposta. 
As heurísticas de Nielsen, os critérios ergonômicos (BASTIEN; SCAPIN, 
1993) e as normas ISO voltadas para o princípio de design de interface já são 
Ferramentas de apoio à construção de interfaces10
bem conhecidas e utilizadas, mas Santos et al. (2017) acreditam haver carência 
de ferramentas em algumas áreas da produção de sistemas computacionais, o 
que faz com que a sua realização seja manual.
Observando a necessidade de uma ferramenta computacional que apoie o 
designer no processo de avaliação da interface de sistemas computacionais, a 
ferramenta THEM (Tool for Heuristic Evaluation Methods) foi desenvolvida 
(SANTOS et al., 2017, documento on-line) “[...] de modo que suas funcionali-
dades contemplassem as principais etapas e artefatos da avaliação heurística 
e que os avaliadores pudessem colaborar durante a avaliação”.
Segundo Santos et al. (2017), a ferramenta apresenta uma sequência de exe-
cução similar ao passo seguido no modo tradicional utilizado para a realização 
da avaliação heurística. Com a utilização da ferramenta, os avaliadores podem: 
  criar um novo projeto; 
  incluir e gerenciar novos avaliadores colaboradores; 
  definir quais são as heurísticas que serão avaliadas (o avaliador pode 
escolher não realizar uma inspeção de todas as heurísticas, focando 
naquelas em que tem mais interesse) e seu nível de gravidade; 
  reportar os problemas encontrados; 
  gerar relatório da avaliação realizada. 
A Figura 6 apresenta a tela da ferramenta THEM, em que o avaliador pode 
inserir os problemas encontrados na interface.
Figura 6. Cadastro do problema.
Fonte: Santos et al. (2017, documento on-line).
11Ferramentas de apoio à construção de interfaces
Ao final da realização da avaliação, a ferramenta apresenta um compilado 
de informações, como o nome e o número de heurísticas quebradas, bem como 
a gravidade associada e um relatório apresentando a incidência das quebras 
dessas heurísticas. A Figura 7 apresenta um resumo com as indicações da 
avaliação realizada.
Figura 7. Resumo da avaliação.
Fonte: Santos et al. (2017, documento on-line).
Outro trabalho que busca melhorar a usabilidade do sistema computacional 
foi desenvolvido por Lima (2014), que também toma como base as heurísticas 
de Nielsen (1994) para a realização da avaliação. O diferencial da proposta 
de Lima (2014) é que, ao invés de um avaliador, que é experiente no processo 
de design de interface, é o usuário final que avalia o sistema. Dessa forma, 
o autor criou um instrumento de avaliação que busca auxiliar os usuários no 
entendimento das heurísticas, que possuem uma linguagem formal, traduzindo-
-as para uma linguagem mais simples de ser compreendida por pessoas que 
não têm conhecimento em construção de sistemas computacionais — o autor, 
no entanto, não realizou a avaliação com os usuários.
Dando continuidade ao trabalho de Lima (2014), Silva (2016) utilizou o 
instrumento criado e a ferramenta UX Check para a realização da avaliação 
heurística por usuários do sistema. O UX Check é um plug-in para o Google 
Chrome que possibilita ao usuário criar um checklist com base nas heurísticas 
de Nielsen e consegue identificar os elementos dispostos na interface por meio 
Ferramentas de apoio à construção de interfaces12
da leitura do seu script. Com essa identificação, possibilita ao usuário selecionar 
partes dessa interface. Ao selecionar a parte que deseja marcar, uma caixa de 
diálogo é aberta, permitindo ao usuário informar a heurística que ele acredita 
estar sendo violada, o grau de severidade que quer atribuir e um comentá-
rio que deseje anexar para uma melhor compreensão nas fases posteriores. 
Ao final da avaliação, é possível gerar um documento para compartilhamento 
com a equipe. A Figura 8 apresenta a estrutura do UX Check.
Figura 8. Interface do UX Check.
Fonte: Santana (2016, documento on-line).
Em seu trabalho, Santos et al. (2017) apresentam e comparam uma variedade 
de ferramentas que auxiliam a equipe de designer na avaliação do sistema 
desenvolvido. Não só a avaliação heurística pode ser suportada por ferramentas 
automatizadas, mas também a avaliação de acessibilidade, como o Wave e 
ATRC Accessibility Checker, que seguem as diretrizes de acessibilidade do 
WCAG 2.0, e a avaliação de comunicabilidade, utilizando o método de inspeção 
semiótica (MIS), como o MISTool (REIS, 2010). A usabilidade, acessibilidade e 
comunicabilidade se estabelecem como os principais critérios de qualidade em 
IHC (BARBOSA; SILVA, 2010) e, por isso, devemos considerar a criação de 
sistemas computacionais que atendam os conceitos de qualidade estabelecidos 
para que o sistema seja aceito pelos usuários.
13Ferramentas de apoio à construção de interfaces
BALSAMIQ. Alternates. [S. l.: s. n.], 2020. Disponível em: https://balsamiq.com/wireframes/
desktop/docs/alternates/. Acesso em: 5 fev. 2020.
BARBOSA, S.; SILVA, B. Interação humano-computador. Rio de Janeiro: Elsevier Brasil, 2010.
BASTIEN, C.; SCAPIN, D. RT-0156: ergonomic criteria for the evaluation of human-com-
puter interfaces. Rapport technique INRIA, May, 1993. Disponível em: http://www.inria.
fr/rrrt/rt-0156.html. Acesso em: 5 fev. 2020.
CRISTIAN, L. O que é um mockup? In: CLUBE DO DESIGN. [S. l.: s. n.], 2018. Disponível 
em: https://clubedodesign.com/2018/o-que-e-um-mockup/. Acesso em: 5 fev. 2020.
HART, J. The art of the storyboard: storyboarding for film, tv, and animation. Massachu-
setts: Focal Press, 1998.
KNAPP, J. The 8 steps to creating a great storyboard. Fast Company, dez. 2013. Disponível em: 
https://www.fastcompany.com/1672917/the-8-steps-to-creating-a-great-storyboard. 
LIMA, C. H. T. C. Um instrumento para usuários avaliarem a interação de sistemas compu-
tacionais. 2014. 66 f. Monografia (Graduação) - Universidade Federal do Ceará, Campus 
de Quixadá, Curso de Sistemas de Informação, Quixadá, 2014.
MCELROY, K. Prototyping for physical and digital products. In: O’REILYY. [S. l.: s. n.], 2016. 
Disponível em: https://www.oreilly.com/ideas/prototyping-physical-digital-products. 
Acesso em: 5 fev. 2020.
MOQUPS. [S. l.: s. n.], 2020. Disponível em: https://moqups.com/. Acesso em: 5 fev. 2020.
NIELSEN, J. Usability engineering. San Francisco: Morgan Kaufman, 1994.
PLOT. The easiest way to storyboard your videos. [S. l.: s. n.], 2020. Disponível em: https://
theplot.io/. Acesso em: 5 fev. 2020.
REIS, M. M. Mistool, uma ferramenta para aplicação colaborativa do método de inspeção 
semiótica.2010. 60 f. Monografia (Graduação) - Universidade Federal de Ouro Preto, 
Ouro Preto, 2010.
SANTANA, N. Ferramentas de UX: checklists e guidelines. Coletivo UX, nov. 2016. Disponível 
em: https://coletivoux.com/ferramentas-de-ux-checklists-e-guidelines-b27fb8cd1265. 
Acesso em: 4 fev. 2020.
SANTOS, F. et al. THEM: Ferramenta colaborativa para suporte a avaliações de interfa-
ces baseadas na Avaliação Heurística. In: CONGRESSO DA SOCIEDADE BRASILEIRA DE 
COMPUTAÇÃO, 37., SIMPÓSIO BRASILEIRO DE SISTEMAS COLABORATIVOS, 14., 2017. 
Anais […]. São Paulo, 2017. Disponível em: http://csbc2017.mackenzie.br/anais. Acesso 
em: 4 fev. 2020.
Ferramentas de apoio à construção de interfaces14
Os links para sites da Web fornecidos neste capítulo foram todos testados, e seu fun-
cionamento foi comprovado no momento da publicação do material. No entanto, a 
rede é extremamente dinâmica; suas páginas estão constantemente mudando de 
local e conteúdo. Assim, os editores declaram não ter qualquer responsabilidade 
sobre qualidade, precisão ou integralidade das informações referidas em tais links.
SEMANTIC-UI. [S. l.: s. n.], 2020. Disponível em: https://semantic-ui.com/. Acesso em: 4 
fev. 2020.
SILVA, T. V. Trazendo o usuário para realizar a avaliação heurística. 2016. 92 f. Monografia 
(Graduação) - Universidade Federal do Ceará, Quixadá. 2016.
WONDER UNIT. StoryBoarder. [S. l.: s. n.], 2019. Disponível em: https://wonderunit.com/
storyboarder/. Acesso em: 4 fev. 2020.
Leituras recomendadas
FREE MOCKUP. [S. l.: s. n.], 2020. Disponível em: https://www.free-mockup.com/. Acesso 
em: 5 fev. 2020.
GONÇALVES, T. Pré-processador CSS? Sass? O que é e por onde começar! BeCode, 2017. 
Disponível em: https://becode.com.br/pre-processador-css-sass/. Acesso em: 5 fev. 2020.
15Ferramentas de apoio à construção de interfaces
Dica do Professor
A avaliação de sistemas computacionais geralmente é realizada de forma manual, mas existem 
diferentes ferramentas disponíveis que automatizam a realização da avaliação. Uma dessas 
ferramentas é o WAVE. 
Este possibilita a avaliação de acessibilidade de site, por meio das diretrizes estabelecidas pelo 
WCAG 2.0, apresentando rupturas que dificultam a interação de usuários com deficiência. Assista 
ao vídeo da Dica do Professor para conhecer mais sobre o WAVE. 
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
 
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/d8cd742a4fc69d8b038096bf45c45ad7
Exercícios
1) O storyboard é uma técnica utilizada no processo de design para compreender o problema a 
ser trabalhado, guiar o processo criativo e comunicar para o restante da equipe as ideias que 
surgiram ao longo das atividades de concepção. Existem diversas ferramentas que podem 
ser utilizadas para guiar o desenho de storyboards. Sobre as ferramentas para desenvolver 
storyboards, analise as afirmativas a seguir e assinale a alternativa correta:
I – O Photoshop é uma ferramenta completa, amplamente utilizada pelos desenvolvedores, 
principalmente por ser simples de ser compreendida por usuários novatos.
II – O Plot fornece funcionalidades simples e descomplicadas para a edição de telas. Apesar 
de sua simplicidade, ela é uma ferramenta paga.
III – O Storyboarder é uma ferramenta desktop gratuita e de código aberto. Um dos seus 
diferenciais é que o usuário pode importar os storyboards feitos em papel para a plataforma.
A) Apenas a I está correta.
B) Apenas a II está correta.
C) Apenas a III está correta.
D) Apenas a I e a II estão corretas.
E) Apenas a II e a III estão corretas.
2) Com o avançar do projeto de desenvolvimento, as técnicas utilizadas para a construção da 
interface vão mudando, a fim de atender às necessidades emergentes. Dessa forma, a 
criação de mockups e wireframes se torna uma importante fase no processo de estruturação 
da interface e avaliação do projeto. Sobre wireframes e mockups, considere as afirmativas a 
seguir e assinale alternativa correta:
I – Os mockups são um meio termo entre representações de baixa fidelidade e protótipos de 
alta fidelidade, que são mais complexos de serem construídos.
II – Os wireframes têm uma representação mais realista, com um maior grau de fidelidade da 
interface do produto final.
III – Para a criação dos mockups, ainda não existe uma preocupação com a estética do 
sistema. Busca-se avaliar como as informações serão apresentadas.
A) Apenas a I está correta.
B) Apenas a II está correta.
C) Apenas a III está correta.
D) Apenas a I e a II estão corretas.
E) Apenas a I e a III estão corretas.
3) Os protótipos de alta fidelidade possibilitam a avaliação da estrutura da informação, 
interação e design. A partir de uma validação do projeto, a equipe de desenvolvimento dará 
vida ao sistema desenhado. Dessa forma, ferramentas podem ser utilizadas para guiar o 
desenvolvedor na realização dessa tarefa. Sobre o processo de implementação da interface, 
considere as afirmativas a seguir e assinale a alternativa correta:
I – Uma Interface de Programação de Aplicativos (API) fornece padrões que devem ser 
seguidos para a construção da aplicação.
II – Os Plugins são pequenos programas instalados em programas maiores, que apresentam 
uma extensão em suas funcionalidades.
III – Os frameworks facilitam a comunicação do desenvolvedor com linguagens de 
programação. Podem existir frameworks para desenvolvimento front-end e back-end.
A) Apenas a I está correta.
B) Apenas a II está correta.
C) Apenas a III está correta.
D) Apenas a II e a III estão corretas.
E) I, II e III estão corretas.
A implementação de interface é um processo a ser realizado quando a estrutura da interface 
já está definida, para que não haja desperdício de tempo e recurso. Para o desenvolvimento 
de interfaces, vários frameworks minimizam o esforço do desenvolvedor, apresentando 
diversos recursos que facilitam a implementação. Sobre os principais frameworks disponíveis, 
avalie as alternativas a seguir e assinale a correta:
I – O Pure utiliza as linguagens HTML e CSS para o projeto de interface web, possibilitando a 
criação de interfaces responsivas.
4) 
II – O Semantic-UI é um framework livre e de código aberto, que utiliza o padrão Material 
Design da Google e tem como diferencial uma linguagem “compatível com humanos”.
III – O Foundation é um framework para qualquer dispositivo, sendo completamente 
personalizável, possibilitando a inclusão e a exclusão de elementos.
A) Apenas a I está correta.
B) Apenas a II está correta.
C) Apenas a III está correta.
D) Apenas a I e a II estão corretas.
E) Apenas a I e a III estão corretas.
5) O processo de avaliação da interface tem por principal objetivo encontrar erros antes do 
sistema ser entregue ao cliente, diminuindo o transtorno e a ocorrência de problemas 
futuros. A realização da avaliação se faz importante, mesmo a equipe de desenvolvimento 
tendo seguido um processo de qualidade. Em IHC, existem quatro critérios que são 
estabelecidos como qualidade em uma aplicação. Considere as afirmativas a seguir e assinale 
a alternativa correta:
I – A realização da avaliação automatizada necessita de um sistema funcional para a sua 
aplicação.
II – A ferramenta THEM possibilita a avaliação automatizada do sistema computacional, 
considerando as heurísticas de Nielsen.
III – O Wave é uma ferramenta desktop que possibilita avaliar a comunicabilidade dos 
sistemas computacionais.
A) Apenas a I está correta.
B) Apenas a II está correta.
C) Apenas a III está correta.
D) Apenas a I e a II estão corretas.
E) Apenas a I e a III estão corretas.
Na prática
O desenvolvimento de interfaces computacionais é uma tarefa que pode ser auxiliada pelo uso de 
frameworks que auxiliam o designer a estruturar a interface, concedendo padrões e design de 
forma mais simples e fácil de ser trabalhada. Existem diversos frameworks e ferramentas 
disponíveis, apresentando diferentes estruturas, fontes e componentes,e cabe ao desenvolvedor 
conhecê-las. Veja, Na Prática, o caso de Aline, entusiasta por programação Front-End de interfaces 
móveis e web. Aline está em constante busca por novas tecnologias e ferramentas que possam 
auxiliar no seu trabalho. Recentemente, ela conheceu o BootStrap, framework que possibilita 
desenhar sistemas responsivos.
Mesmo sem conhecer a ferramenta, ela buscou estudá-la e aplicá-la em seu novo projeto.
Conteúdo interativo disponível na plataforma de ensino!
 
Saiba mais
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
BootStrap
Este link redireciona para um curso introdutório ao BootStrap, para que você possa aprender mais, 
tirar dúvidas, etc.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
As skills de um desenvolvedor Front-End
Os autores apresentam, neste vídeo, algumas das tecnologias que atualmente consideram mais 
importantes para quem quer entrar no mercado do desenvolvimento Front-End.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
THEM: Ferramenta colaborativa para suporte a avaliações de 
interfaces baseadas na avaliação heurística
Os autores apresentam a ferramenta THEM (Tool for Heuristic Evaluation Methods), que busca 
auxiliar no processo de avaliação de interfaces, baseado na avaliação heurística desenvolvida por 
Nielsen.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://getbootstrap.com.br/docs/4.1/getting-started/introduction/?v=375034141
https://www.youtube.com/embed/TWy2rxyZLrE
https://sol.sbc.org.br/index.php/sbsc/article/view/9954/9840
Análise comparativa de ferramentas computacionais para 
prototipação de interfaces
Os autores apresentam diferentes ferramentas para a criação de wireframes e protótipos, 
mostrando a sua importância no projeto de interface.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.aedb.br/seget/arquivos/artigos13/39418400.pdf