Design Na Web e Dispositivos Móveis

Design na Web e
Dispositivos
Móveis
Prof. Gabriel Marante de Oliveira
Indaial – 2022
1a Edição
Copyright © UNIASSELVI 2022
Elaboração:
Revisão, Diagramação e Produção:

Equipe Desenvolvimento de Conteúdos EdTech
Centro Universitário Leonardo da Vinci – UNIASSELVI
Ficha catalográfica elaborada pela equipe Conteúdos EdTech UNIASSELVI
O48d
Oliveira, Gabriel Marante de
Design na web e dispositivos móveis. / Gabriel Marante de Oliveira
– Indaial: UNIASSELVI, 2022.
152 p.; il.
ISBN 978-65-5663-778-5
ISBN Digital 978-65-5663-773-0
1. Design de interfaces. - Brasil. II. Centro Universitário Leonardo
da Vinci.
CDD 004
Impresso por:
APRESENTAÇÃO
Olá, acadêmico! Seja bem-vindo ao Livro Didático Design na Web e Dispositivos
Móveis. O objetivo deste livro é capacitar o aluno a construir e avaliar o design de
interfaces na web e dispositivos móveis. Para tanto, serão estudados os fundamentos
da área de design e computação, além das técnicas e ferramentas direcionadas para
o desenvolvimento design de sistemas digitais. Inicialmente, analisaremos a evolução
do design e das técnicas que se aplicam na perspectiva da interface e usabilidade
desses ambientes. A seguir, serão estudados os conceitos específicos da área, suas
particularidades, fundamentação teórica da tecnologia dominante e a aplicação de
técnicas e ferramentas que irão preparar para a prática profissional.
Na Unidade 1, será abordada a evolução do design digital, os fundamentos de

design, os fundamentos de interação entre o humano e o computador e a caracterização
tecnológica do ambiente web e dispositivo móvel.
Em seguida, na Unidade 2, será estudada a usabilidade e as técnicas e padrões

de análise de interface, as abordagens de ergonomia e as técnicas de UI (User Interface)
e UX (User eXperience).
Por fim, na Unidade 3, serão estudadas as arquiteturas de informação, os

padrões de arquitetura, os métodos de avaliação de sistemas para web e dispositivos
móveis, e os panoramas de evolução dos designs.
Bons estudos!
GIO
Você lembra dos UNIs?
Os UNIs eram blocos com informações adicionais – muitas

vezes essenciais para o seu entendimento acadêmico
como um todo. Agora, você conhecerá a GIO, que ajudará
você a entender melhor o que são essas informações
adicionais e por que poderá se beneficiar ao fazer a leitura
dessas informações durante o estudo do livro. Ela trará
informações adicionais e outras fontes de conhecimento que
complementam o assunto estudado em questão.
Na Educação a Distância, o livro impresso, entregue a todos os

acadêmicos desde 2005, é o material-base da disciplina. A partir
de 2021, além de nossos livros estarem com um novo visual
– com um formato mais prático, que cabe na bolsa e facilita a
leitura –, prepare-se para uma jornada também digital, em que
você pode acompanhar os recursos adicionais disponibilizados
através dos QR Codes ao longo deste livro. O conteúdo
continua na íntegra, mas a estrutura interna foi aperfeiçoada
com uma nova diagramação no texto, aproveitando ao máximo
o espaço da página – o que também contribui para diminuir
a extração de árvores para produção de folhas de papel, por
exemplo. Assim, a UNIASSELVI, preocupando-se com o impacto
de ações sobre o meio ambiente, apresenta também este
livro no formato digital. Portanto, acadêmico, agora você tem a
possibilidade de estudar com versatilidade nas telas do celular,
tablet ou computador.
Junto à chegada da GIO, preparamos também um novo

layout. Diante disso, você verá frequentemente o novo visual
adquirido. Todos esses ajustes foram pensados a partir de
relatos que recebemos nas pesquisas institucionais sobre os
materiais impressos, para que você, nossa maior prioridade,
possa continuar os seus estudos com um material atualizado
e de qualidade.
QR CODE
Olá, acadêmico! Para melhorar a qualidade dos materiais ofertados a
você – e dinamizar, ainda mais, os seus estudos –, a UNIASSELVI disponibiliza materiais
que possuem o código QR Code, um código que permite que você acesse um conteúdo
interativo relacionado ao tema que está estudando. Para utilizar essa ferramenta, acesse
as lojas de aplicativos e baixe um leitor de QR Code. Depois, é só aproveitar essa facilidade
para aprimorar os seus estudos.
ENADE
Acadêmico, você sabe o que é o ENADE? O Enade é um
dos meios avaliativos dos cursos superiores no sistema federal de
educação superior. Todos os estudantes estão habilitados a participar
do ENADE (ingressantes e concluintes das áreas e cursos a serem
avaliados). Diante disso, preparamos um conteúdo simples e objetivo
para complementar a sua compreensão acerca do ENADE. Confira,
acessando o QR Code a seguir. Boa leitura!
LEMBRETE
Olá, acadêmico! Iniciamos agora mais uma
disciplina e com ela um novo conhecimento.
Com o objetivo de enriquecer seu conheci-

mento, construímos, além do livro que está em
suas mãos, uma rica trilha de aprendizagem,
por meio dela você terá contato com o vídeo
da disciplina, o objeto de aprendizagem, materiais complementa-
res, entre outros, todos pensados e construídos na intenção de
auxiliar seu crescimento.
Acesse o QR Code, que levará ao AVA, e veja as novidades que

preparamos para seu estudo.
Conte conosco, estaremos juntos nesta caminhada!

SUMÁRIO
UNIDADE 1 - FUNDAMENTOS DE DESIGN PARA WEB E DISPOSITIVOS MÓVEIS................ 1
TÓPICO 1 - FUNDAMENTOS DE INTERFACE..........................................................................3

1 INTRODUÇÃO........................................................................................................................3
2 FUNDAMENTOS DE INTERFACE.........................................................................................3
2.1 COMUNICAÇÃO HUMANO COMPUTADOR........................................................................................ 4
2.2 PROPRIEDADES DA INTERFACE NO AMBIENTE DIGITAL.............................................................7
2.3 ENGENHARIA SEMIÓTICA.................................................................................................................... 9
2.3.1 Inspeção Semiótica.................................................................................................................... 11
2.3.2 Avaliação de comunicabilidade............................................................................................. 13
RESUMO DO TÓPICO 1.......................................................................................................... 15
AUTOATIVIDADE................................................................................................................... 16
TÓPICO 2 - DESENVOLVIMENTO DE SOFTWARE PARA WEB............................................. 19

1 INTRODUÇÃO...................................................................................................................... 19
2 AMBIENTE DE DESENVOLVIMENTO WEB........................................................................ 20
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA WEB.................................................24
2.2 CAMADAS DE INTEGRAÇÃO WEB....................................................................................................25
RESUMO DO TÓPICO 2..........................................................................................................27
AUTOATIVIDADE.................................................................................................................. 28
TÓPICO 3 - DESENVOLVIMENTO DE SOFTWARE PARA DISPOSITIVOS MÓVEIS.............. 31

1 INTRODUÇÃO...................................................................................................................... 31
2 AMBIENTE DE DESENVOLVIMENTO DISPOSITIVOS MÓVEIS.......................................... 31
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA MOBILE...........................................32
RESUMO DO TÓPICO 3......................................................................................................... 35
AUTOATIVIDADE.................................................................................................................. 36
TÓPICO 4 - DESIGN NA WEB E DISPOSITIVOS MÓVEIS..................................................... 39

1 INTRODUÇÃO..................................................................................................................... 39
2 PADRÕES DE PROJETO DE DESIGN................................................................................ 39
2.1 TIPOS DE DESIGN................................................................................................................................. 41
2.2 FERRAMENTAS DE DESENVOLVIMENTO.......................................................................................43
3 DESENVOLVIMENTO DE PROTÓTIPO DE INTERFACE ................................................... 45
3.1 DESENVOLVIMENTO DE PROTÓTIPO ............................................................................................45
LEITURA COMPLEMENTAR................................................................................................. 46
RESUMO DO TÓPICO 4......................................................................................................... 49
AUTOATIVIDADE.................................................................................................................. 50
REFERÊNCIAS...................................................................................................................... 52
UNIDADE 2 — USABILIDADE E INTERFACE COM O USUÁRIO........................................... 55
TÓPICO 1 — ERGONOMIA E USABILIDADE EM PLATAFORMAS DIGITAIS..........................57

1 INTRODUÇÃO......................................................................................................................57
2 FUNDAMENTOS DE ERGONOMIA......................................................................................57
2.1 A ERGONOMIA NO AMBIENTE DIGITAL............................................................................................59
2.2 A INSERÇÃO DE NOVOS USUÁRIOS E A USABILIDADE.............................................................60
RESUMO DO TÓPICO 1......................................................................................................... 65
AUTOATIVIDADE.................................................................................................................. 66
TÓPICO 2 - INTERFACE HUMANO COMPUTADOR............................................................. 69

1 INTRODUÇÃO..................................................................................................................... 69
2 PADRÕES DE INTERFACE................................................................................................. 69
2.1 COR NO DESIGN GRÁFICO .................................................................................................................71
2.1.1 Padrões de criação de layout de dispositivos móveis....................................................... 72
3 CAMADAS DE INTERFACE.................................................................................................76
3.1 TÉCNICAS DE ANÁLISE DA INTERFACE.......................................................................................... 77
RESUMO DO TÓPICO 2..........................................................................................................79
AUTOATIVIDADE.................................................................................................................. 80
TÓPICO 3 - UI – USER INTERFACE...................................................................................... 83

1 INTRODUÇÃO..................................................................................................................... 83
2 TERMINOLOGIA UI............................................................................................................ 83
2.1 DESIGN DE INTERAÇÃO..................................................................................................................... 84
2.2 DESIGN VISUAL....................................................................................................................................85
RESUMO DO TÓPICO 3......................................................................................................... 86
AUTOATIVIDADE...................................................................................................................87
TÓPICO 4 - UX – USER EXPERIENCE.................................................................................. 89

1 INTRODUÇÃO..................................................................................................................... 89
2 TERMINOLOGIA UX........................................................................................................... 89
2.1 PESQUISA COM O USUÁRIO..............................................................................................................90
2.2 ESTRATÉGIAS DE CONTEÚDO..........................................................................................................92
LEITURA COMPLEMENTAR................................................................................................. 94
RESUMO DO TÓPICO 4..........................................................................................................96
AUTOATIVIDADE...................................................................................................................97
REFERÊNCIAS.......................................................................................................................99
UNIDADE 3 — ARQUITETURA E AVALIAÇÃO DE SISTEMAS PARA WEB

E DISPOSITIVOS MÓVEIS............................................................................103
TÓPICO 1 — ARQUITETURA DA INFORMAÇÃO NA WEB E DISPOSITIVOS MÓVEIS.........105

1 INTRODUÇÃO....................................................................................................................105
2 ASPECTOS DA ARQUITETURA DA INFORMAÇÃO NA WEB E DISPOSITIVOS MÓVEIS........106
2.1 FUNDAMENTOS DE ARQUITETURA DA INFORMAÇÃO E SISTEMAS...................................... 107
2.2 MODELOS DE ANÁLISE DA ARQUITETURA...................................................................................111
2.3 CAMADAS DE INTERAÇÃO MVC.....................................................................................................113
RESUMO DO TÓPICO 1........................................................................................................ 116
AUTOATIVIDADE..................................................................................................................117
TÓPICO 2 - GRÁFICOS E EDIÇÃO DE IMAGENS................................................................ 119

1 INTRODUÇÃO.................................................................................................................... 119
2 INSERÇÃO DE GRÁFICOS EM INTERFACE...................................................................... 119
2.1 FUNDAMENTOS DE EDIÇÃO DE IMAGENS ................................................................................. 123
2.2 AVALIAÇÃO GRÁFICA E DE IMAGEM NAS INTERFACES........................................................... 124
RESUMO DO TÓPICO 2........................................................................................................126
AUTOATIVIDADE................................................................................................................. 127
TÓPICO 3 - MUNDO DIGITAL, MOBILIDADE E SUAS INOVAÇÕES....................................129
1 INTRODUÇÃO....................................................................................................................129
2 EVOLUÇÃO DIGITAL.........................................................................................................129
2.1 INOVAÇÃO DIGITAL.............................................................................................................................130
2.2 ADAPTABILIDADE DAS TECNOLOGIAS ÀS NOVAS REALIDADES.......................................... 133
RESUMO DO TÓPICO 3........................................................................................................134
AUTOATIVIDADE.................................................................................................................135
TÓPICO 4 - TÉCNICAS DE AVALIAÇÃO E APRIMORAMENTO DE INTERFACE................. 137

1 INTRODUÇÃO.................................................................................................................... 137
2 TÉCNICAS DE AVALIAÇÃO MULTIDIMENSIONAL........................................................... 137
2.1 CAMADAS DE ANÁLISE DA INTERFACE........................................................................................ 139
3 PERSPECTIVAS DE ANÁLISE DA INTERFACE................................................................143
LEITURA COMPLEMENTAR................................................................................................146
RESUMO DO TÓPICO 4........................................................................................................148
AUTOATIVIDADE.................................................................................................................149
REFERÊNCIAS..................................................................................................................... 151
UNIDADE 1 -
FUNDAMENTOS DE
DESIGN PARA WEB E
DISPOSITIVOS MÓVEIS
OBJETIVOS DE APRENDIZAGEM
A partir do estudo desta unidade, você deverá ser capaz de:
• compreender as interações entre o usuário e como os sistemas computacionais

evoluíram, analisando essas evolução, sob a perspectiva do software, do hardware
e da interface entre o usuário e o sistema;
• analisar o design nos ambientes digitais com base em técnicas apresentadas,

demonstrando como essas técnicas têm evoluído em seus aspectos visuais, de
acessibilidade e de integração de novos recursos;
• saber como são estruturados os sistemas de web e dispositivos móveis pela

perspectiva das linguagens computacionais, apresentado os fundamentos das
linguagens utilizadas no desenvolvimento dos sistemas e do design;
• conhecer os padrões de design, os tipos predominantes de design e como

implementar esses padrões no desenvolvimento do design das interfaces, além das
ferramentas que auxiliam o desenvolvimento de sistemas digitais e como aplicar
essas ferramentas na avaliação dos design;
• saber quais são os designs predominantes e como evoluíram os designs.
PLANO DE ESTUDOS
Esta unidade está dividida em quatro tópicos. No decorrer dela, você encontrará
autoatividades com o objetivo de reforçar o conteúdo apresentado.
TÓPICO 1 – FUNDAMENTOS DE INTERFACE

TÓPICO 2 – DESENVOLVIMENTO DE SOFTWARE PARA WEB
TÓPICO 3 – DESENVOLVIMENTO DE SOFTWARE PARA DISPOSITIVOS MÓVEIS
TÓPICO 4 – DESIGN NA WEB E DISPOSITIVOS MÓVEIS
CHAMADA
Preparado para ampliar seus conhecimentos? Respire e vamos em frente! Procure
um ambiente que facilite a concentração, assim absorverá melhor as informações.
1
CONFIRA
A TRILHA DA
UNIDADE 1!
Acesse o
QR Code abaixo:
2
UNIDADE 1 TÓPICO 1 -
FUNDAMENTOS DE INTERFACE
1 INTRODUÇÃO
Nas últimas décadas, a evolução dos computadores e das interfaces foi enorme.
Desde as primeiras telas monocromáticas aos atuais smartphones houve uma grande
mudança na interação com o usuário.
As alterações ocorreram para tornar o design mais intuitivo, fácil, ágil e agradável na
relação do usuário com a interface dos aparelhos, seja um computador ou um dispositivo
móvel. Muito da evolução tecnológica tem focado na relação do usuário com o dispositivo.
Os objetivos desta unidade visam apresentar ao aluno os fundamentos técnicos

de design no ambiente web e dos dispositivos móveis; apresentar as perspectivas do
design, interface e usabilidades no ambiente web e mobile; apresentar os conceitos
específicos da área, suas particularidades, fundamentação teórica da tecnologia
dominante; e, por fim, mostrar a aplicação de técnicas e ferramentas que irão preparar o
aluno para a prática profissional.
Nesta unidade, mais especificamente, serão estudados os fundamentos

de design e bases computacionais dos sistemas web e dos dispositivos móveis. As
seguintes perguntas serão norteadoras deste capítulo: como as interações entre o
usuário e os sistemas computacionais evoluíram? O que é design nos ambientes digitais?
Como compreender a interface dos sistemas? Como são estruturados os sistemas de
web e dispositivos móveis pela perspectiva das linguagens computacionais? Como são
estabelecidos os padrões de design? Quais são os designs predominantes?
Nos tópicos a seguir, serão analisadas todas essas questões e, por fim, a primeira
parte do desenvolvimento de uma interface.
2 FUNDAMENTOS DE INTERFACE
A partir daqui, serão apresentados os principais fundamentos sobre interface
e seu histórico. Serão analisados os tópicos acerca da relação entre o humano e o
computador, o que é a semiótica e Engenharia Semiótica e a relação dessas áreas
com o design de interfaces.
3
2.1 COMUNICAÇÃO HUMANO COMPUTADOR
Inicialmente, “design” é um termo bastante amplo. De modo geral, pode-se
definir design como o processo de criação de um produto com o objetivo de oferecer ao
usuário um produto fácil de usar, intuitivo e agradável, atingindo o seu objetivo final. No
caso do ambiente web e dos dispositivos móveis, o design está intimamente ligado a
dois aspectos, sendo: os aspectos físicos do dispositivo (tamanho, espessura, desenho
etc.) e a apresentação das informações dispostas na tela e a forma de acesso a essas
informações no dispositivo. Esta disciplina é focada no segundo aspecto, a apresentação
das informações na tela e a interação do usuário com essas informações.
Desde o surgimento dos computadores, e durante várias décadas, o usuário de

sistemas computacionais se deparava com uma tela escura e com as informações em “fósforo-
verde”, nada agradável de usar. Isso afetava diretamente a produtividade dos funcionários,
visto o fato de ter que trabalhar várias horas por dia com uma interface pouco amigável.
FIGURA 1 – TELA DOS PRIMEIROS COMPUTADORES
FONTE: O autor
As telas dos primeiros computadores eram monocráticas e continham somente

texto, o que tornava entediante e cansativo o trabalho diário. A grande virada iniciou com o
surgimento das telas superpostas do Windows, do mouse, das telas em cores, da internet e
de diversas possibilidades de apresentação da informação. Apareceram nas telas imagens,
filmes e áudio, colocando o design como foco de atenção. Assim, a relação do usuário com
os sistemas começou a ser objeto de estudos dos desenvolvedores de sistemas.
A evolução passou por várias etapas. Com o surgimento dos sites na internet, não
era raro encontrar uma página extremamente carregada de informações, com cores fortes,
muitas figuras (algumas em movimento) e pouco amigável. Muitas vezes o usuário tinha
dificuldade de encontrar o que realmente queria, devido a um excesso de informações
e imagens, levando a desistir de usar o sistema na web, como apresentado na Figura 2.
4
FIGURA 2 – ATENÇÃO AO EXCESSO DE INFORMAÇÕES
FONTE: O autor
Diante desse panorama, os cientistas da computação perceberam a necessidade

de elaborar melhores designs, estudar melhor o comportamento do usuário e sua relação
com os sistemas computacionais, desenvolvendo métodos e ferramentas específicas
de avaliação, que visam aprimorar a relação do humano com o computador. Surgiu,
nesse ponto, o profissional de design em sistemas de informação.
IMPORTANTE
No Brasil, foi criada uma legislação direcionada a garantir a acessibilidade,
inclusive a acessibilidade em ambientes digitais. Ela foi criada em 2004,
a partir do Decreto n° 5.296, em que são estabelecidas normas para a
promoção da acessibilidade, garantindo o acesso global à informação. Quer
saber mais? Confira: https://bit.ly/3tcb1lm.
O designer deve ter uma atenção muito grande na apresentação das informações,
qualquer que seja essa informação. Então, como definir o profissional de designer de ambientes
digitais? Rocha e Baranauskas (2003, p. 7), definem a profissão do designer de software como:
Designers de software têm explorado maneiras melhores de organizar

informação graficamente. Eles têm desenvolvido linguagens de con-
sulta e facilidades visuais para entrada, busca e saída de informação.
Têm usado sons (música e voz), representações tridimensionais, ani-
mação e vídeo para melhorar o conteúdo e a expressão das interfaces.
Técnicas como manipulação direta, telepresença e realidade virtual
mudam a maneira de interagir e de pensar sobre computadores.
É possível perceber a importância da relação do ser humano com os dispositivos

que utiliza, principalmente pelo uso excessivo no cotidiano. A relação humano/
computador concentra, também, os aspectos a seguir:
5
• Existe uma integração cada vez maior de diferentes usuários com os sistemas
computacionais (idosos, com limitações físicas e psicológicas, diferenças sociais
etc.), ou seja, o perfil do usuário tem-se alterado, necessitando que os sistemas se
adaptem aos diversos tipos de público.
• Várias mídias e recursos têm integrado (texto, áudio, vídeo, validações biométricas
digitais e faciais, telas “touch-screen” etc.).
O designer precisa seguir fundamentos que o auxiliem no desenvolvimento de

uma boa interface. Inicialmente, Segundo Benyon (2011, p.381), os primeiros aspectos a
serem analisados são os “princípios do design universal”:
• Uso equitativo: a interface não pode excluir nenhum grupo.

• Flexibilidade de uso: a interface deve englobar uma grande
possibilidade de uso.
• Uso simples e intuitivo: a interação do usuário com o sistema
deve ser de fácil aprendizagem.
• Informação perceptível: a comunicação da interface deve fornecer
as informações corretas e necessárias para a utilização do sistema.
• Tolerância ao erro: a interface deve evitar ao máximo situações
onde possam ocorrer erros de entrada ou saída de dados.
• Baixo esforço físico: o design deve ser confortável e evitar fadiga.
• Tamanho e espaço para aproximação e uso: condições de ergonomia
são fundamentais para evitar esforço desnecessário para o usuário.
Dias (2006, p. 42), elenca quais as variáveis devem ser analisadas ao se

desenvolver uma interface:
• Facilidade de uso – o usuário quer ter acesso imediato à

informação que deseja.
• Facilidade de reuso – o usuário pode desfazer uma ação incorreta.
• Eficiência – o usuário espera que o sistema execute o que se espera.
• Poucos erros – o usuário não quer se deparar com mensagens
indesejáveis.
• Autoaprendizagem – o sistema deve se adaptar ao usuário.
• Satisfação e prazer – o sistema não deve ser entediante ou cansativo.
• Percepção favorável do usuário – o usuário deseja ter boa
impressão do uso do sistema.
• Entradas dos campos pré-definidos – os campos devem ser
fáceis de operar.
• Crítica às entradas – o sistema deve barrar ações incorretas.
• Atualização dos dados já fornecidos – os campos devem ser
atualizados.
• Capacidade de selecionar dispositivos de entrada/saída –
integração fácil entre dispositivos.
• Possibilidade de formatação da saída – o sistema deve se
adaptar a cada usuário.
• Saídas padronizadas e identificadas – os campos devem ser
padronizados.
• Existência de sistema de ajuda – o usuário espera contar com
ajuda automática do sistema.
• Documentação abrangente – deve haver uma documentação
com informações importantes para o usuário.
• Procedimentos dos manuais são suficientes para executar as
tarefas – os manuais devem ser claros.
6
Portanto, elaborar o design de uma interface requer uma análise detalhada sobre vá-
rios aspectos. O designer deve elaborar um plano de desenvolvimento de uma interface, ana-
lisando vários aspectos a serem considerados. Essa elaboração será iniciada nesta unidade.
FIGURA 3 – A BUSCA PELO USO INTUITIVO E DE FÁCIL MANIPULAÇÃO
FONTE: <https://bit.ly/3hhXF1r>. Acesso em: 31 jan. 2022.
No processo de desenvolvimento do design de uma interface, é fundamental

compreender com clareza a relação humano computador, considerando os seus
diversos aspectos físicos, psicológicos e sociais. A seguir, serão analisadas com mais
detalhes quais são as propriedades da interface no ambiente digital.
2.2 PROPRIEDADES DA INTERFACE NO AMBIENTE DIGITAL

Diante da evolução dos dispositivos computacionais, a interface ganhou um status
especial, seja um computador desktop ou um aparelho celular. O papel do designer deve con-
siderar a elaboração de um esquema de propriedades a serem analisadas durante todo o
desenvolvimento do design do dispositivo. Rocha e Baranauskas (2003, p. 36) consideram
que o designer deve elaborar um esquema que considere as propriedades elencadas a seguir:
• Visibilidade: apenas as coisas necessárias têm que estar visíveis

para indicar quais as partes podem ser operadas e como e para
indicar como o usuário interage com um dispositivo. Visibilidade
o mapeamento entre ações pretendidas e as ações reais.
• Modelo conceitual: um bom modelo conceitual permite prever o
efeito de ações. Sem um bom modelo conceitual opera-se sob
comando, cegamente.
• Mapeamento: mapeamento é o termo técnico para denotar o
relacionamento entre duas entidades. No caso de interfaces,
indica o relacionamento entre os controles e seus movimentos
e os resultados.
• Feedback: retornar ao usuário informação sobre as ações
que foram feitas, quais os resultados obtidos, é um conceito
conhecido da teoria da informação e controle.
7
No ambiente web, Rocha e Baranauskas (2003), explicam que, além das variáveis
citadas anteriormente, o designer deve considerar alguns aspectos no processo de
criação de um design:
• Clareza na arquitetura da informação: é essencial que o usuário consiga

discernir o que é prioritário e o que é secundário no site, ou seja, inicialmente, é
preciso chegar a um bom arranjo da informação.
• Facilidade de navegação: uma máxima é que o usuário deveria conseguir acessar
a informação desejada no máximo em três cliques.
• Simplicidade: quem navega quer encontrar o mais rápido possível o objetivo da
busca. Portanto, a pirotecnia deve ser evitada, dando ao usuário paz e tranquilidade
para que possa analisar a informação.
• Relevância do conteúdo: se nas revistas ou na televisão, por exemplo, a sedução
passa muito pela beleza das imagens, na Web o conteúdo é o que mais importa para
atrair e prender a atenção do usuário.
• Manter a consistência: como para qualquer outro tipo de software, a consistência
é um poderoso princípio de usabilidade na Web. Quando as coisas acontecem
sempre do mesmo jeito, os usuários não precisam se preocupar a respeito do que
irá acontecer.
• Tempo suportável: o tempo de carga das páginas deve ser necessariamente curto.
Estudos indicam que dez segundos é o máximo de tempo antes que as pessoas
percam o interesse.
• Foco nos usuários: novamente, todos os princípios podem ser sumarizados em
um só, o foco deve estar nas atividades dos usuários.
• O designer também deve considerar as questões de estética da interface, como:
o Cores: devem ser agradáveis e que não cansam a visão. Cores muito fortes
agridem a visão; e cores muito fracas dificultam a leitura das informações.
o Tamanho dos textos: é importante utilizar fontes agradáveis e de tamanho
adequado para que o usuário não fique cansado com um esforço grande de
leitura das informações.
o Imagens: devem ser usadas imagens que realmente facilitem o entendimento
das informações. Não deve haver excessos desnecessários.
o Ícones bem definidos: os ícones não podem gerar dúvidas sobre a sua função
ou usar o mesmo ícone para funções distintas.
o Uso correto dos recursos: devem ser usados com coerência recursos como
listas de opções, campos autocompletantes, informações de erro etc.
o Distribuição uniforme dos campos e informações: telas carregadas de
campos para preenchimento tornam confusa a execução.
o Uso coerente de áudios e filmes: deve haver uso correto de recursos de áudio
e vídeo para que não haja uma carga muito grande de informações.
O designer deve considerar os diversos tipos de usuários que utilizarão o

sistema. Se for dirigido aos jovens, idosos ou público em geral, as estratégias de design
são alteradas. A criação da interface deve se adaptar às características de cada público.
8
Junto a essa abordagem, a evolução da interface e do design de sistema evoluiu de
forma rápida e com o surgimento de técnicas e métodos que são fundamentais.
Nessa evolução, um conceito importante do desenvolvimento do design entrou

em cena: a Semiótica. A seguir, será analisado o conceito de Semiótica e Engenharia
Semiótica e a relação dessas áreas com o desenvolvimento do design.
2.3 ENGENHARIA SEMIÓTICA

É fundamental que o designer de sistemas computacionais tenha claro o que
é a semiótica e sua aplicação do desenvolvimento de interfaces no ambiente digital.
Rocha e Baranauskas (2003, p. 160), explicam o surgimento da semiótica:
Semiótica como disciplina teve seu desenvolvimento a partir dos

trabalhos do filósofo norte-americano Charles Sanders Peirce (1839-
1914) e do linguista suíço Ferdinand de Saussure (1857-1915). [...] A
Semiótica objetiva estudar os signos e sistemas de signos. Um signo
é qualquer coisa que está no lugar de outra coisa sob determinados
aspectos ou capacidades, para alguém.
Benyon (2011, p. 392) complementa o sentido de semiótica:
Semiótica ou semiologia é o estudo dos sinais e símbolos e de como

eles funcionam. Os sinais podem assumir uma variedade de formas,
como palavras, imagens, sons, gestos ou objetos. Um sinal consiste
em um signo, um significado e um significante.
Diante desses conceitos expostos, é possível compreender que, no momento

que o usuário interage com a interface de um computador ou dispositivo móvel, existe
uma série de signos. O que são esses signos na interface? São os ícones, os campos
a serem preenchidos, as imagens, os vídeos, os sons e os objetivos de estarem na tela
naquele momento e, fundamentalmente, suas funções na interface.
Um signo é codificado pelo designer para estabelecer a comunicação com os usuários.

São estabelecidos três conceitos centrais na semiótica: o signo, o interpretante e o significante.
Como exemplo, podemos usar a operação de “salvar o documento” por um botão com o rótulo
“salvar”. A Figura 4 traz a interpretação do signo, do interpretante e do significante:
9
FIGURA 4 – EXEMPLO DE SIGNO ILUSTRANDO A RELAÇÃO DO SIGNO COM SEU OBJETO E SEU INTERPRE-
TANTE. SIGNO QUE REPRESENTA UM OBJETO FÍSICO E SIGNO DE INTERFACE
FONTE: Adaptada de Barbosa e Silva (2010)
A interface de um sistema é um grande conjunto de símbolos e suas interações

com o usuário. No momento em que o designer é capaz de “se colocar no lugar” do
usuário e tentar compreender como ele se comportaria diante dos sistemas, surge a
“metacomunicação”. Muitas vezes, são pontos de vista muito diferentes entre quem
desenvolve a interface e de quem usa o sistema no dia a dia. Por exemplo, um jovem
desenvolve uma interface sem saber das dificuldades de um idoso ou de um deficiente
físico. Mesmo questões de gênero e questões sociais devem ser consideradas. Homens
e mulheres têm visões diferentes do mundo, como, por exemplo, as cores que são
socialmente relacionadas ao gênero. Nordestinos e sulistas podem ter interpretações
diferenciadas de um mesmo símbolo, além de questões linguísticas e regionalismos.
Como exemplo, na Figura 4, a operação para “salvar” um arquivo está

representada pelo desenho de um disquete. Provavelmente, quem utiliza esse símbolo
na interface, faz parte de uma geração mais antiga. Será que um usuário jovem, hoje,
em pleno ano de 2022, saberá o que é um disquete? A maioria, talvez, nunca viu um.
Podemos, então, levantar uma questão interessante: atualmente, qual símbolo seria
usado para estabelecer a relação de “signo” e “significante” para salvar um arquivo?
Por outro lado, os usuários interpretam a visão do desenvolvedor. Essa ação ocorre
de forma gradual, à medida que usa o sistema, buscando atribuir sentido aos signos. Essa
interação, que se denomina “metacomunicação”, é demonstrada na Figura 5.
10
FIGURA 5 – METACOMUNICAÇÃO DESIGNER-USUÁRIO E COMUNICAÇÃO USUÁRIO-SISTEMA NO PROCES-
SO DE DESENVOLVIMENTO DE UMA INTERFACE
FONTE: Adaptada de Barbosa e Silva (2010)
Por outro lado, a Engenharia Semiótica compreende um aprofundamento da

organização conexa dos diversos signos e as suas funções no design de uma interface,
focando na relação humano/computador. Para Aramuni e Maia (2018, p. 47), a Engenharia
Semiótica tem como função:
[...] a Engenharia Semiótica se concentra na identificação e prevenção

de interrupções no processo de comunicação entre designer e
usuário por meio de uma abordagem, que visa colocar o designer
como interpretante dos problemas e necessidades dos usuários
finais, ajudando-os a suprir suas demandas adequadamente.
A Engenharia Semiótica engloba dois métodos de avaliação de design: inspeção

semiótica e avaliação de comunicabilidade. Segundo Barbosa e Silva (2010, p. 78), os
fundamentos das técnicas da Engenharia Semiótica são:
• Processos de significação, que envolvem signos e semiose.

• Processos de comunicação, que envolvem intenção, conteúdo
nos níveis de comunicação.
• Os interlocutores envolvidos no processo de significação e
comunicação.
• O espaço de design de IHC, baseado no modelo que envolve a
comunicação em termos de emissores, receptores, contextos,
códigos, canais e mensagens.
2.3.1 Inspeção Semiótica

A inspeção semiótica tem como objetivo avaliar a comunicabilidade de uma
interface por meio da inspeção sistemática. O objetivo principal da inspeção semiótica é
avaliar a qualidade da emissão da metacomunicação do designer. Os usuários não são
envolvidos nessa técnica. Na inspeção semiótica, segundo Barbosa e Silva (2010), os
signos são classificados em três tipos:
11
• Signos estáticos: signos que expressam o estado do sistema e cujo significado é
interpretado independentemente de relações causais e temporais da interface. Eles
podem ser interpretados a partir de um retrato da interface num momento do tempo.
São exemplos de signos estáticos: o layout geral e os elementos distribuídos na tela.
• Signos dinâmicos: signos que expressam o comportamento do sistema, envolvendo
aspectos temporais e causais da interface. Estão vinculados à própria interação e
devem ser interpretados fazendo referência a ela. São exemplos de signos dinâmicos:
a associação entre a escolha de um item de menu e a exibição do diálogo.
• Signos metalinguísticos: são signos principalmente verbais e que se referem a
outros signos de interface, sejam eles estáticos, dinâmicos ou mesmo metalin-
guísticos. Em geral, ocorrem na forma de mensagens de ajuda e de erro, alertas,
diálogos de esclarecimento, dicas e semelhantes.
A tabela a seguir mostra as atividades da inspeção semiótica:
TABELA 1 – INSPEÇÃO SEMIÓTICA
INSPEÇÃO SEMIÓTCA
ATIVIDADE TAREFA
• Identificar os perfis dos usuários.
• Identificar os objetivos apoiados pelo sistema.
Preparação
• Definir as partes da interface que serão avaliadas.
• Escrever cenários de interação para guiar a avaliação.
Coleta de • Inspecionar a interface simulando a interação descrita pelo
dados cenário de interação.
• Analisar os signos metalinguísticos e reconstruir a metamensagem
correspondente.
• Analisar os signos estáticos e reconstruir a metamensagem
Interpretação
correspondente.
• Analisar os signos dinâmicos e reconstruir a metamensagem
correspondente.
• Contrastar e comparar as metamensagens reconstruídas nas
Consolidação
análises de cada tipo de signo.
de resultados
• Julgar os problemas de comunicabilidade encontrados.
Relato dos • Relatar a avaliação da comunicabilidade da solução de IHC, sob o
resultados ponto de vista do emissor da metamensagem.
FONTE: Barbosa e Silva (2010, p. 331)
Segundo Barbosa e Silva (2010), é fundamental compreender o comportamento

do usuário frente ao sistema. Para isso, os autores elencam algumas questões
importantes:
12
• [Quem você, usuário, é?] A quem a mensagem do designer está endereçada?
Quais os perfis desses destinatários?
• [Quer ou precisa fazer?] Na visão do designer, o que os usuários vão querer co-
municar ao sistema? Por quê?
• [De que maneira prefere fazer?] Como, onde e quando o designer espera que os
usuários se engajem nessa comunicação? Por quê?
• [Este, portanto, é o sistema que projetei para você?] O que o designer está co-
municando? Que conteúdo e expressão estão utilizando nessa comunicação? Qual
é a sua visão de design?
• [A forma como você pode ou deve utilizá-lo?] Como essa metacomunicação
privilegia certos desejos e necessidades dos usuários, em detrimento a outros?
Como essa metacomunicação indica diferentes estratégias de comunicação que o
usuário pode seguir ao se comunicar com o preposto do designer? Como a comuni-
cação do usuário com o preposto do designer é facilitada em certos contextos, em
detrimento a outros? Por quê?
• [Alcançar uma gama de objetivos?] Que efeito o designer espera que sua comunica-
ção cause? Que objetivos ele espera que o usuário alcance por meio dessa comunicação?
2.3.2 Avaliação de comunicabilidade

A avaliação de comunicabilidade avalia a qualidade da recepção da metacomunicação
realizada pelo designer em direção ao usuário. São elencados usuários para executarem tarefas
de um sistema em um ambiente controlado. Esses controles são realizados por meio de ques-
tionários, câmeras de vídeo e outros dispositivos. As tarefas são observadas e registradas. Os
avaliadores analisam cada registro para compreender como foi realizada a interação do usuário
com o sistema. A tabela a seguir mostra as atividades da avaliação de comunicabilidade.
TABELA 2 – AVALIAÇÃO DE COMUNICABILIDADE
AVALIAÇÃO DE COMUNICABILIDADE
ATIVIDADE TAREFA
• Inspecionar os signos estáticos, dinâmicos e metalinguísticos.
• Definir tarefas para os participantes executarem.
Preparação • Definir o perfil dos participantes e recrutá-los.
• Preparar material para observar e registrar o uso.
• Executar um teste-piloto.
Coleta de • Observar e registrar sessões de uso em laboratório.
dados • Gravar o vídeo da interação de cada participante.
Interpretação • Etiquetar cada vídeo de interação individualmente.
Consolidação • Interpretar as etiquetagens de todos os vídeos de interação.
de resultados • Elaborar perfil semiótico.
Relato dos • Relatar a avaliação da comunicabilidade da solução de IHC, sob o
resultados ponto de vista do receptor da metamensagem.
13
Na atividade de preparação e avaliação de design, é realizada uma breve
inspeção dos signos estáticos, dinâmicos e metalinguísticos, para orientar a definição
dos cenários de tarefas que os usuários deverão realizar. A atividade de coleta dos dados
deve conter o questionário pré-teste, a sessão de observação e a entrevista pós-teste.
Nesse ponto, é muito importante que o designer compreenda os fundamentos

computacionais envolvidos na estrutura tecnológica. A seguir, serão estudados os
fundamentos que fazem parte da relação humana computador.
14
RESUMO DO TÓPICO 1
Neste tópico, você adquiriu certos aprendizados, como:
• A importância dos fundamentos da interface para o desenvolvimento de designer.
• A interface é o contato do usuário com o sistema, é onde o usuário navega e busca

as informações que necessita.
• A interface, quando bem desenvolvida, torna a interação do usuário uma tarefa

fluída atingindo os objetivos esperados do aplicativo.
• É fundamental que o designer saiba equilibrar todas as informações na interface,

imagens e ferramentas de utiização.
15
AUTOATIVIDADE
1 O designer de interfaces computacionais precisa conhecer os princípios do chamado
“design universal”. Esses princípios orientam o designer a elaborar os principais pontos que
farão sentido para o usuário final no momento da utilização do dispositivo computacional,
sejam um computador desktop ou um aparelho celular. A seguir, são apresentados alguns
princípios do “design universal” e a sua explicação. Acerca da relação entre o princípio do
design universal e a sua explicação, assinale a alternativa CORRETA:
a) ( ) Flexibilidade de uso significa que a interface deve englobar em várias telas.

b) ( ) Uso equitativo significa que a interface não pode excluir nenhum grupo.
c) ( ) Tolerância ao erro significa que existe um nível de tolerância a erros.
d) ( ) Informação perceptível significa que a cor das fontes deve ser escura.
2 Ao se elaborar um design de um dispositivo computacional, o designer deve elencar

diversas varáveis que serão avaliadas durante o processo de implantação do sistema
e de todo seu uso. As variáveis procuram elevar a relação humano computador a um
alto nível de qualidade. Acerca desses princípios, analise as sentenças a seguir:
I- O usuário pode desfazer uma ação incorreta.

II- O usuário deve se adaptar ao sistema.
III- O sistema deve barrar ações incorretas.
Assinale a alternativa CORRETA:
a) ( ) As sentenças I e II estão corretas.

b) ( ) Somente a sentença II está correta.
c) ( ) As sentenças I e III estão corretas.
d) ( ) As sentenças II e III estão corretas.
3 A interface atingiu um patamar especial diante da evolução dos dispositivos computa-

cionais. O papel do designer deve considerar a elaboração de um esquema de proprie-
dades a serem analisadas durante todo o desenvolvimento do design do dispositivo.
Sobre o exposto, classifique V para as sentenças verdadeiras e F para as falsas:
( ) Visibilidade considera que apenas as coisas necessárias têm que estar visíveis.
( ) Modelo conceitual é o termo para denotar relacionamento entre entidades.
( ) Mapeamento permite prever o efeito de ações.
16
Assinale a alternativa que apresenta a sequência CORRETA:
a) ( ) V – F – F.
b) ( ) V – F – V.
c) ( ) F – V – F.
d) ( ) F – F – V.
4 Existem algumas diferenças entre o ambiente web e de dispositivos móveis que o

designer deve considerar ao elaborar um design. Disserte sobre as características
próprias do ambiente web que devem ser considerados pelo designer.
5 O designer deve saber com bastante propriedade qual a importância da semiótica e

da Engenharia Semiótica ao se desenvolver um design digital. Disserte sobre o que é
a Inspeção Semiótica na Engenharia Semiótica.
17
18
DESENVOLVIMENTO DE SOFTWARE PARA WEB
1 INTRODUÇÃO
É fundamental que o designer tenha o conhecimento básico da estrutura
tecnológica que existe por trás da tela. O objetivo não é o de se aprofundar nas técnicas
de linguagem, mas é importante que o designer tenha o conhecimento mínimo da
estrutura que existe entre o usuário e o dispositivo computacional. As pesquisadoras da
área de designer Rocha e Barauskas (2003, p. 15) sustentam essa importante relação:
Novas tecnologias provêm poder às pessoas que as dominam. Siste-

mas computacionais e interfaces acessíveis são novas tecnologias
em rápida disseminação. Explorar o poder do computador é tarefa
para designers que entendem da tecnologia e são sensíveis às capa-
cidades e necessidades humanas.
Como ponto de partida, a relação de toda a estrutura humano/computador se

divide em duas partes: o “front end” e o “back end”. Front end compreende a tecnologia
responsável pela apresentação das informações na tela do dispositivo, como são
estruturadas essas informações, como essas informações interagem com o usuário e
como elas são transmitidas ao back end. O back end, por sua vez, compreende a tecnologia
responsável pelo processamento, integração e armazenamento das informações.
DICA
Foram desenvolvidos sistemas que são capazes de avaliar o nível de
acessibilidade de sites. Na análise, é gerado um relatório em que são
descritos os problemas encontrados. Entre esses programas está um
brasileiro do governo federal que executa a avaliação de acessibilidade:
Avaliador e Simulador e Acessibilidade em Sítios – ASES. Quer saber mais?
Acesse o link: https://asesweb.governoeletronico.gov.br/.
Os conceitos fundamentais do front end são: “HTML”, “CSS”, “JavaScript” e

“PHP”. Do lado do back end, os conceitos centrais são: “Java” e “SGBD”. Na Figura 6 é
demonstrada essa estrutura. Todos esses conceitos serão explicados a seguir
19
FIGURA 6 – REPRESENTAÇÃO DA RELAÇÃO HUMANO/COMPUTADOR COMPREENDENDO AS FRONTEIRAS
DO FRONT END E BACK END E A ESTRUTURA COMPUTACIONAL INTEGRANTE
FONTE: O autor
Tendo conhecido essa base, necessária para a compreensão de front-end

e back-end, a seguir, será estudado o ambiente de desenvolvimento e estrutura
tecnológica do ambiente web.
2 AMBIENTE DE DESENVOLVIMENTO WEB

Quando acessamos um site, toda a apresentação visual é realizada pelo HTML
(HyperText Markup Language), que significa: "Linguagem de Marcação de Hipertexto".
É por meio do HTML que o desenvolvedor de sites elabora onde as informações estarão
dispostas na tela (lembrando que informação não é só textual, mas também imagens,
vídeo, áudio etc.).
Além da disposição das informações, no HTML são definidas as características

desses dados, como tamanho, cor etc. Na Figura 5, tem-se uma tela de cadastro de um
site de Gestão Imobiliária. Nesse site, tem-se as informações básicas a serem preenchidas,
como disponibilidade (venda ou aluguel), tipo (apartamento, casa etc.), estado, cidade,
bairro, endereço e complemento de informações complementares do imóvel.
20
FIGURA 7 – TELA DE CADASTRO DE UM SITE DE GESTÃO IMOBILIÁRIA
FONTE: O autor
As informações presentes na tela são denominadas “objetos”. Cada objeto contém

funções e propriedades. Analisando cada informação contida na tela, são objetos:
• Título da tela, que é um objeto tipo “span”.

• A opção de disponibilidade do imóvel, que é um objeto “radiobox”.
• O tipo de apartamento, estado, cidade e bairro, que são objetos tipo “listview”,
• Os campos de endereço e complemento, que são objetos “input”.
Um objeto “span” tem como função apresentar uma informação puramente

explicativa. O objeto “radiobox”, da opção de disponibilidade, indica que o usuário deve
escolher uma das opções, e somente uma. Os objetos “listview”, do tipo de imóvel,
estado, cidade e bairro, quando selecionados, exibirá uma lista de opções a serem
escolhidas pelo usuário. Os objetos “input”, do endereço e complemento, representam
campos livres, onde o usuário tem a liberdade de escrever a informação.
No entanto, como é escrito o HTML dessa tela? Na Figura 6 está exibido código
dessa tela.
21
FIGURA 8 – CÓDIGO HTML DA TELA DE CADASTRO DE UM SITE DE GESTÃO IMOBILIÁRIA
FONTE: O autor
Analisando o código da figura anterior, é possível perceber que, tudo o que

está escrito, está em três cores: azul, vermelho e preto. A cor azul está representada de
duas formas diferentes. Algumas palavras em azul têm o símbolo “<” no início, e outras
palavras em azul estão entre aspas. O que tudo isso significa?
• As palavras em azul, iniciadas com o símbolo “<”, indicam o objeto a ser representado
na tela. Essa palavra é chamada de “tag”.
• As palavras escritas em vermelho indicam quais as características que o objeto
possui.
• As palavras em azul entre aspas indicam o conteúdo assumido pela característica.
• As palavras em preto indicam textos a serem exibidos, na tela.
Agora, analisaremos cada tag do código:
• A tag inicial é “<font”. Isto significa que, na tela, os textos exibidos após essa linha
terão as seguintes características: a fonte será Arial, a cor da fonte será preta e a
fonte terá tamanho 16.
• Na linha seguinte, tem a tag “<span>, que indica que será apresentado um texto na
tela com a frase “Cadastro de imóvel”, seguindo as características de fonte descritas
na tag anterior.
• Logo após, a fonte é alterada para a cor marrom, com o tamanho de 12. Assim, os
textos exibidos após essa linha terão essas características.
• Tag <label> indica que é apresentado um rótulo de um campo a ser manipulado pelo
usuário. Nessa tela, temos essa tag nos “labels” disponibilidade, venda, aluguel, tipo,
estado, cidade, bairro, endereço e complemento.
22
• Abaixo de cada “label”, tem uma tag que representa a interação entre a interface e
o usuário, sendo:
o “<Input>, que representa uma “entrada” de informação a ser fornecida pelo
usuário. Esse “input>”. O primeiro “input” dessa tela tem a característica de ser
um tipo “radio”, ou seja, o usuário deve “escolher” entre as opções dispostas. Ele
é identificado como venda e aluguel.
o Logo após, tem-se os “labels”>: tipos, estado, cidade e bairro; a que são tags
são do tipo <select>, que indica que o usuário tela uma “lista vire”, ou seja,
aparecerá uma série em lista de opções, para apenas uma ser escolhida. A Figura
7 representada a <select>: tipo.
o Por fim, as tags endereço e complemento são representados pela tag <input>,
mas, nesse caso, são caracterizadas pelo tipo “text”, diferente do “label” <input>,
radio da opção disponibilidade.
Por fim, diversos objetos e tags são utilizados na construção de um site. O uso
correto e coerente será papel fundamental do designer da tela do site.
O outro conceito fundamental no ambiente front end, relacionado à exibição

das informações, é o CSS. Quando são utilizados diversos sites, é possível perceber que
vários “estilos” são exibidos. Esses estilos determinam um conjunto de exibição que
pode tornar mais agradável a utilização do sistema. Designs mais modernos, ícones
mais amigáveis, fontes mais fáceis de ler etc. Essa é a função do CSS na interface.
Cascading Style Sheets – CSS é traduzido como "folha de estilo". O CSS interage com
a sintaxe HTML, alterando as possibilidades de exibição das informações. As principais
vantagens de se utilizar o CSS são:
• Facilita as mudanças no visual e estética da interface.

• Um mesmo CSS pode ser usado em diversas páginas e interfaces.
• Facilita a visualização e manutenção do código.
• Chamados “estilos”, os CSS de uma interface HTML pode ser definida por dois meios:
• Definindo o estilo em uma tag <style> anterior a declaração antes das outras tags.
• Usando do CSS por meio de uma biblioteca remota. O acesso ao CSS é realizado
utilizando a cláusula “class” na tag a que esse CSS será aplicado.
A seguir, segue a exibição de um código HTML usando CSS. No decorrer deste

estudo, será explicado cada tag da tela.
23
FIGURA 9 – CÓDIGO HTML COM AS TAGAS <STYLE> E <LINK> QUE SE REFEREM AOS CSS QUE SERÃO
UTILIZADOS NA EXIBIÇÃO DAS INFORMAÇÕES DA INTERFACE
FONTE: O autor
A tag <style> indica, nesse caso, que a área de todos os vídeos contidos nessa
tela terá a mesma configuração. Ou seja, todos os vídeos terão largura de 20 pixels,
altura de 30 pixels e a cor de fundo de todos os vídeos será branco. Ou seja, quando são
declaradas as tags <vídeo> duas vezes no site (ou seja, nessa interface serão exibidos
dois vídeos), eles serão apresentados com as mesmas características, não sendo
necessário repetir essas configurações para cada vídeo.
A tag <link> indica que, quando essa página for carregada no computador ou
dispositivo, será importada uma biblioteca CSS chamada de “toastr”. Essa biblioteca
contém CSS com fontes e recursos que tornam a aparência da interface mais agradável
para o usuário. As tags no final do HTML <span> e <input> utilizam a declaração do CSS
importado pela declaração “class=” e “toastr”’. Isto quer dizer que serão utilizados cores
e fontes originadas dessa biblioteca, facilitando o desenvolvimento do site e tornando a
usabilidade mais agradável para o usuário.
A seguir, serão analisadas as linguagens de desenvolvimento utilizadas na

interface computacional.
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA WEB

Quando utilizamos um site, a interface é a parte mais próxima do usuário. No
entanto, quando esse usuário, por exemplo, preenche um formulário de um site de
compras e pressiona a tecla “CONFIRMAR”, uma série de processamentos são carregados.
O HTML e CSS não são consideras “linguagens”, pois as suas funções são
puramente estáticas, HTML e CSS não possuem recursos de manipulação dos dados e
nem de transferir as informações para o back end. Para isso, são utilizadas as linguagens
JavaScript e PHP no front end.
24
A linguagem de programação JavaScript interage diretamente com o HTML. Por
exemplo, ao cadastrar o CPF em um site, esse CPF deverá ser validado pelo seu código
identificador. Caso o CPF esteja incorreto, o site emitirá uma mensagem de erro e não
permitirá a conclusão de preenchimento de um formulário.
É o JavaScript que processa essa verificação do CPF, por meio de um algoritmo

de processamento. Esse processamento ocorre pela cláusula “onKeyPress=()”. Isto quer
dizer que, quando o usuário clicar no CPF, será efetuada uma função de validação do
CPF. A Figura 10 demonstra como é utilizada a chamada de uma função. A seguir, será
dada a explicação do código.
FIGURA 10 – CÓDIGO HTML COM AS TAGAS “<SCRIPTA” DECLARAÇÃO “ONKEYPRESS()”, UTILIZAM CÓDIGO
DESENVOLVIDO EM JAVASCRIPT
FONTE: O autor
No <input> do CPF é declarada uma cláusula onKeyPress=”ValidaCPF(CPF)”. Isso

quer dizer que, quando clicar no CPF, a ação será direcionada para um código em Java
Script que fará a sua validação. Não faz parte do escopo desta disciplina mostrar o
código em JavaScript, mas, veja que tem uma tag <script> com uma “palavra “Function
ValidaCPF(CPF)” – É nessa parte que é codificada a validação do CPF e retornado para
o site se o CPF foi aceito ou não.
É fundamental que o designer faça exaustivos testes para verificar se todas

as validações estão sendo realizadas corretamente antes de colocar o site em
disponibilidade para o público.
A seguir, serão explicadas as linguagens PHP, Java e o conceito de SGBD. O

PHP faz a integração entre o front end e o back end. Já o uso da linguagem Java e os
fundamentos do SGBD, encontram-se no back end.
2.2 CAMADAS DE INTEGRAÇÃO WEB

Para vários sites, é necessário gravar as informações. Por exemplo, nas
plataformas de compra, cadastro de clientes, plataformas de ensino EAD e os mais
diversos. No entanto, as informações não ficam gravadas no aparelho do usuário, mas
sim em um banco de dados. É aí que se encontra o back end.
25
Inicialmente, para que essas informações sejam enviadas para o back end, é
necessária uma linguagem específica, aí encontra-se o PHP.
PHP (Hypertext Preprocessor) é uma linguagem voltada à conexão entre os

servidores e a interface do usuário. É o PHP que transfere os dados do usuário para
serem gravados, alterados, consultados ou excluídos de uma base de dados. Quem é
responsável pelo gerenciamento dessas ações é o SGBD – Sistema Gerenciador de Baco
de Dados. O PHP também está integrado ao HTML, mas contém os recursos necessários
para conectar com bases e sistemas externos ao front end.
INTERESSANTE
Flor, Vanzin e Ulbricht (2013), desenvolveram um estudo apresentando uma
pesquisa sobre a comunicação entre surdos no âmbito da acessibilidade
da web. É realizada uma revisão bibliográfica sobre o assunto e o reflexo
da acessibilidade no contexto da educação. Quer ler mais? Acesse o link:
https://bit.ly/35sy3MA.
Do lado do back end são desenvolvidos os códigos de inserção, alteração,

exclusão e consulta de todas as informações que são exibidas na tela de um site. Essas
informações serão enviadas pelo PHP.
Por vezes, é necessário que haja ainda alguma manipulação de informações no

back end. Atualmente, a linguagem mais utilizada é o Java. Segundo o site oficial do
Java (2021):
Java é uma linguagem de programação e plataforma computacional

lançada pela primeira vez pela Sun Microsystems em 1995. [...] O
Java é rápido, seguro e confiável. De laptops a datacenters, consoles
de games a supercomputadores científicos, telefones celulares à
Internet, o Java está em todos os lugares.
Por fim, o Sistema Gerenciador de Banco de Dados é o sistema que gerencia todo
o processo físico de armazenamento nos bancos de dados, tornando ágil o processo de
busca das informações.
26
RESUMO DO TÓPICO 2
• Como são estruturadas as tecnologias front end e back end do ambiente web.
• É fundamental para o profissional de design compreender com clareza como são

estruturados os ambeintes front end e back end das aplicações.
• É muito importante que se saiba como são formadas as linguagens de

desenvolvimento e como são interliçagdas as camadas de integração web.
• É preciso que o designer saiba como diferenicar a linguagem de estrutuação do

ambiente web, que é o HTML, as linguagens JavaScriopt, PHP e os fundamentos
dos Sistemas Gerenciadores de Bancos de dados.
27
AUTOATIVIDADE
1 A análise da estrutura tecnológica que existe entre o usuário e o sistema é dividido
em duas partes, que são o front end e o back end. Sobre qual a tecnologia que faz
parte da estrutura do back end, assinale a alternativa CORRETA:
a) ( ) HTML.
b) ( ) JavaScript.
c) ( ) SGBD.
d) ( ) PHP.
2 A chamada linguagem de marcação – HTML – exibe as informações na tela segundo

uma série de definições contidas no código. Pelos fundamentos do HTML, analise as
sentenças a seguir:
I- A tag <input type=”text”> significa uma entrada de dados em que o usuário deve
digitar um texto livre.
II- A tag <input type=”radio”> significa que o usuário tem uma lista de opções onde ele
pode escolher mais de uma opção.
III- A tag <select> significa que o usuário pode entrar com um texto, mas esse texto não
pode ser livre.

b) ( ) Somente a sentença I está correta.
3 Cascading Style Sheets – CSS é traduzido como "folha de estilo". O CSS interage com
a sintaxe HTML, alterando as possibilidades de exibição das informações. Sobre o
exposto, classifique V para as sentenças verdadeiras e F para as falsas:
( ) O CSS facilita as mudanças no visual e estética da interface.

( ) Um CSS pode ser usado somente em uma página.
( ) O CSS facilita a visualização e manutenção do código.
a) ( ) V – F – F.
b) ( ) V – F – V.
28
c) ( ) F – V – F.
d) ( ) F – F – V.
4 A linguagem JavaScript ocupa um lugar especial no desenvolvimento de uma página

da web. Disserte sobre qual o papel do JavaScript nesse contexto.
5 Do lado do back end, existem duas tecnologias predominantes que são a linguagem
Java e o SGBD. Descreva o que é SGBD.
29
30
DESENVOLVIMENTO DE SOFTWARE PARA
1 INTRODUÇÃO
O ambiente de dispositivos móveis agrega muito do desenvolvimento do ambiente
web. No entanto, ele contém algumas diferenças, como a diferenciação entre aplicativo e
site responsivo. As interfaces dos dispositivos móveis devem se adequar ao tamanho da
tela, que é diferente da tela de um computador. Aí encontra-se a grande diferença.
Nesse sentido, é necessário que o profissional de design saiba adequar um a interface

de um aplicativo desenvolvido exclusivamente para dispositivos móveis e outro para um
sistema desenvolvido para web. Nos próximos subtópicos, serão exploradas as características
tecnológicas pertinentes aos dispositivos móveis e sua relação com o design da interface.
2 AMBIENTE DE DESENVOLVIMENTO DISPOSITIVOS MÓVEIS

A primeira diferença que se percebe na interface e design dos dispositivos
móveis é o tamanho da tela. As informações devem ocupar menos espaço, serem mais
concisas e objetivas.
Também é importante ter em mente no planejamento de um design para

dispositivo móvel a ausência de um teclado físico. Para a maioria dos usuários é mais
difícil digitar textos no teclado virtual de um dispositivo móvel.
No entanto, é possível “baixar” um aplicativo por meio de um Play Store, ou

acessar um site pelo dispositivo móvel diretamente de um navegador. Há pouco tempo,
as páginas web não se adaptavam ao tamanho das telas dos dispositivos móveis,
ficando confuso de utilizar, pois as informações ficavam muitas vezes ocultas na tela.
Atualmente, surgiu o HTML responsivo, isso significa que uma mesma tela de um site
na tela de um computador “se adapta automaticamente” quando é carregada em um
dispositivo móvel. Esse processo torna a usabilidade mais agradável.
Para Aramuni e Maia (2018, p. 51), que estudam a experiência do usuário nos
dispositivos móveis, “o designer de interface deve possuir conhecimentos que transitam
não somente nas tecnologias, ferramentas e técnicas do design, mas também em tudo
aquilo que o usuário final precisa para trabalhar bem com os sistemas”.
A seguir, serão estudadas as noções básicas das linguagens orientadas para o

desenvolvimento de aplicativos em dispositivos móveis.
31
2.1 NOÇÕES DE LINGUAGEM DE DESENVOLVIMENTO PARA
MOBILE
Os dispositivos móveis podem ser agrupados em dois grandes grupos: Android
e Apple, sendo que o sistema Android é predominante do mercado. Contudo, qual é a
importância do sistema operacional Android?
Conforme explicado por Pilar (2013, p. 43), “o Android é uma plataforma móvel
de código livre, baseada em Linux desenvolvida pela Google, com o objetivo de operar
em dispositivos com toque na tela, como smartphones e tablets”. Ainda segundo Pilar
(2013, p. 44), as principais características do Android são:
• Utilização de widgets: pequenos ícones que ficam na tela inicial,

onde é possível escolher entre seus aplicativos favoritos, tendo
acesso a atualizações sem sair da tela principal.
• Tela de notificações: onde é possível visualizar em um só lugar as
notificações de novas ligações, mensagens e e-mails.
• Multitarefa: é possível executar diversos aplicativos ao mesmo
tempo e alternar a visualização entre eles.
• Escrita por voz: possibilidade de escrever e-mails, SMS e qualquer
tipo de texto, através da voz.
• Compartilhamento de imagens: possibilidade de explorar, editar
e compartilhar rapidamente nas redes sociais e as fotos tiradas
direto do celular.
• Compartilhar com o toque: compartilhamento de fotos e
vídeos com outros celulares com a mesma tecnologia, apenas
encostando-os. Também é possível parear dispositivos via
bluetooth apenas encostando os aparelhos.
• Fotos panorâmicas de 360°: através do Photo Sphere, é possível
tirar fotos panorâmicas de todo o seu redor e realizar upload
do resultado direto para o Google Maps, onde outros usuários
poderão visualizá-la.
• Múltiplos usuários: nos tablets, é possível criar múltiplos usuários,
cada um com sua tela inicial, aplicativos e jogos.
Por outro lado, todas as linguagens de programação para Android contam com,
ao menos, um de dois kits de desenvolvimento nativos do Android. O primeiro é o NDK
(Kit de Desenvolvimento Nativo), e o segundo kit de desenvolvimento é o Android SDK
(Kit de Desenvolvimento de Software ou DevKit).
O Android SDK inclui projetos de exemplo com código fonte, ferramentas de

desenvolvimento, emulador e outras bibliotecas que auxiliam os desenvolvedores
a utilizarem a plataforma. A linguagem predominante no ambiente Android é
o Java, sendo utilizado, também, C/C++ e C#, que são linguagens de antigas
gerações e já consolidadas no ambiente de desenvolvimento computacional.
As linguagens JavaScript, HTML e CSS também pertencem ao universo de
desenvolvimento de dispositivos móveis.
32
NOTA
Os aplicativos móveis, que incluem calendários, navegadores e mapas
interativos, fazem parte da vida da maioria das pessoas hoje em dia. A maioria
dos aplicativos móveis é de usuário único; e eles não permitem a colaboração
síncrona entre os usuários. A colaboração móvel permite que vários usuários
em diversos locais combinem sinergicamente suas contribuições de maneira
conveniente. Os pesquisadores Pichiliani e Hirata (2014) investigaram o
potencial de criar aplicativos colaborativos com base em aplicativos móveis de
usuário único. Nesse trabalho, foi proposta uma técnica de adaptação, baseada
na reutilização de SDKs (Software Development Kits) de fabricantes para criar
aplicativos protótipos multiusuários.
FONTE: <https://bit.ly/3JXhckc>. Acesso em: 3 fev. 2022.
Além dessas, novas linguagens de programação têm sido desenvolvidas para o

ambiente Android, sendo elas:
LUA (Corona SDK)
• Simples, fácil de aprender e poderoso.

• É uma linguagem de programação muito rápida de usar.
• Suporte para todas as bibliotecas nativas, podendo publicar em várias plataformas.
• Emulador que permite ver sem compilar o código.
KOTLIN
• Suporte a Java Virtual Machine.

• Não faz com que o tamanho dos arquivos aumente.
• Não causa desaceleração.
• É simplificado.
• Ideal para começar com Android.
• Suporta Android Studio.
Existem dois modelos de sistema operacional predominantes nos dispositivos

móveis: Android, da Google, e iOS, da Apple. Ambos têm recursos bastante parecidos,
porém, em alguns aspectos, existem diferenças, sendo uma delas a possibilidade de
customizar a aparência e as funcionalidades consideravelmente maiores no Android. Outra
grande diferença entre os sistemas operacionais é que o Android foi desenvolvido como código
aberto, permitindo que cada fabricante personalize a plataforma com layout próprio. Por outro
lado, o iOS tem mais restrições na experiência da tela inicial e menus.
33
Design e usabilidade são pontos fortes no iOS. Além disso, uma das principais
vantagens para quem tem um iPhone é aproveitar a conectividade com outros
equipamentos e gadgets da própria Apple.
Por outro lado, o Android tem vantagem na liberdade e nas possibilidades, na

conexão com dispositivos variados e no universo de aplicativos criados para a loja do Google.
34
RESUMO DO TÓPICO 3
• Como são estruturadas as tecnologias front end e back end do ambiente mobile.
• Compreender as diferenças e semelhanças no desenvolvimento de programas e

interfaces para os ambientes distintos entre web e dispositivos móive. No entanto,
essas diferenças estão cada vez menos notórias para o usuário final.
• Verificar as difernças entre as lingaugens utilizadas e que, no ambiente de dispositivos

móiveis, existem modelos diferentes de sistema operacional, interferindo do
processo de desenvolvimento da interface.
• Por fim, foi apresentado como se organiza as camadas existentes no ambiente de

dispositios móveis.
35
AUTOATIVIDADE
1 O Android é o sistema operacional predominante nos dispositivos móveis. É importante
que o designer saiba todos os recursos que o Android oferece. Acerca da descrição do
Android, assinale a alternativa CORRETA:
a) ( ) É Unitarefa.
b) ( ) Utiliza de widgets.
c) ( ) É Monousuário.
d) ( ) Por segurança, não compartilha fotos.
2 O designer deve ter o conhecimento básico das linguagens e kits de desenvolvimento

contidas no processamento dos dispositivos móveis. Sobre o exposto, analise as
I- O primeiro kit de desenvolvimento foi o Android SDK.

II- O kit de desenvolvimento NDK surgiu para sanar os erros do SDK.
III- O Android suporta as linguagens de desenvolvimento C/C++ e C#.

b) ( ) As sentenças II e III estão corretas.
d) ( ) Somente a sentença III está correta.
3 O ambiente de dispositivos móveis agrega muito do desenvolvimento do ambiente

web. Com relação ao ambiente de dispositivos móveis, classifique V para as sentenças
verdadeiras e F para as falsas:
( ) O HTML responsivo faz com que uma tela de um site se adapte automaticamente
quando é carregada em um dispositivo móvel.
( ) A ausência de um teclado físico não altera a usabilidade dos dispositivos móveis e
não precisa ser considerado pelo designer.
( ) Os dispositivos móveis podem ser agrupados em dois grandes grupos: Android e
Apple, sendo que o sistema Android é predominante do mercado.
a) ( ) V – F – F.
b) ( ) F – F – V.
36
c) ( ) F – V – F.
d) ( ) V – F – V.
4 Além das linguagens tradicionais, surgiram novas linguagens para serem utilizadas
no ambiente de dispositivos móveis. Disserte sobre essas linguagens e uma
característica delas.
5 O Android permite o uso de widgets. Descreva o que são widgets e o que é SGBD.
37
38
DESIGN NA WEB E DISPOSITIVOS MÓVEIS
1 INTRODUÇÃO
Os padrões de projeto surgiram da proposta de que cada padrão é uma regra
com três partes, que expressa a relação entre: contexto, problema e solução
É importante saber que Projeto é um empreendimento temporário, realizado

de maneira coordenada, que visa alcançar objetivos específicos com característica
própria. É temporário porque deve possuir um início e um fim bem definidos, enquanto
característica singular significa nunca ter sido feito antes.
ATENÇÃO
O W3C (World Wide Web Consortium) funciona como uma organização
responsável por padronizar toda a web por meio do desenvolvimento de
protocolos e fóruns abertos, que promovem a evolução e asseguram a
interoperabilidade na rede pública, de forma gratuita. Esses padrões são
bastante úteis a designers e desenvolvedores, não só no que diz respeito
à acessibilidade, mas também à compatibilidade e à interoperabilidade
da web. Essas publicações estão disponíveis em português no site da
W3C Brasil: www.w3c.br.
2 PADRÕES DE PROJETO DE DESIGN

É fundamental que todo profissional qualificado tenha as noções básicas de
gestão de projetos. Para conhecer os fundamentos de gerenciamento de projetos, pode-
se acessar o Guia conhecido como PMBOK – Project Management Book of Knowledge,
onde está registrado o conjunto de conhecimentos em gerenciamento de projetos.
A partir daqui, focaremos nos projetos direcionados ao desenvolvimento do

design de um dispositivo.
• O contexto: refere- se ao conjunto das informações nas quais o padrão de projeto

pode ser aplicado.
• O problema: trata do conjunto de objetivos e limitações que ocorrem dentro do contexto.
• A solução: uma estrutura formal para ser aplicada na resolução do problema.
39
Um projeto de design deve ser desenvolvido com o objetivo de apresentar uma
relação dos diversos signos (conforme a semiótica) aos critérios de usabilidade da interface.
Todos os projetos de design devem ter o usuário centrado no processo de

desenvolvimento. Portanto, a interface deve atender às necessidades dos seus usuários.
O escopo do projeto é construído sobre os chamados requisitos. Os requisitos são
divididos em dois grupos: funcionais e não funcionais. Os requisitos funcionais dizem
respeito à interação direta entre o usuário e a interface. Os requisitos não funcionais
dizem respeito à qualidade do sistema, descrevendo suas facilidades. A não atenção a
esses critérios é um dos principais motivos de insatisfação dos usuários.
Os requisitos funcionais são agrupados em duas categorias: aqueles relacionados

à exibição e à entrada de dados.
• Requisitos relacionados à exibição da informação:

o Consistência.
o Feedback.
o Níveis de habilidade.
o Percepção e cognição.
o Metáforas.
o Baixa carga de memória.
o Classificação funcional dos comandos.
o Projeto independente da resolução do monitor.
• Requisitos relacionados à entrada de dados:

o Mecanismos de ajuda.
o Prevenção de erros.
o Tratamento de erros.
Os requisitos não funcionais são agrupados como:
• Apresentação visual.
• Uso adequado da combinação de cores.
• Comportamentos inesperados.
• Uso de diversos nomes para um mesmo assunto.
• Uso de um mesmo ícone para funções diferentes.
É importante para o profissional de design saber que o gerenciamento de pro-

jetos representa uma aplicação de conhecimentos, habilidades, ferramentas e técnicas
para a execução das atividades do projeto, a fim de atender aos requisitos deste, sejam
requisitos funcionais e não funcionais.
O gerenciamento de projetos direciona um projeto no sentido de trazer visão,

objetivo e padronização. A falta de gerenciamento de projetos compromete todas as
atividades da organização.
40
Existem várias ferramentas e software de gerenciamento de projetos
disponíveis. Alguns exemplos são: Bitrix24, Wrike, Asana, Monday. Basecamp. A seguir,
serão analisados quais são os tipos de designs responsivos e como eles se estruturam
para oferecer uma experiência de usabilidade mais agradável para o usuário.
2.1 TIPOS DE DESIGN

Os padrões responsivos são os mais atuais nos projetos de design. No entanto, o
que isso significa? Que o “layout”, ou seja, a disposição das informações na tela, adequa-
se à tela utilizada para o mesmo sistema.
Há muitos padrões estabelecidos que funcionam bem em dispositivos móveis

e computadores. A maioria dos layouts usados por páginas da Web responsivas pode
ser categorizada em um de cinco padrões: mostly fluid, column drop, layout shifter, tiny
tweaks e off canvas. A seguir, veremos cada uma delas:
Mostly fluid
O padrão mostly fluid consiste, principalmente, em uma grade fluida. Em telas

grandes ou médias, ele geralmente permanece do mesmo tamanho, apenas ajustando
as margens quando necessário.
FIGURA 11 – PROJETO DE DESIGN MOSTLY FLUID
FONTE: O autor
Column drop
Para layouts de várias colunas de largura completa, o column drop empilha as

colunas verticalmente, conforme a largura da janela.
41
FIGURA 12 – PROJETO DE DESIGN CLUMN DROP
FONTE: O autor
Layout shifter
O padrão layout shifter é o padrão mais responsivo, com vários pontos de

interrupção em várias larguras de tela. Esse layout determina a forma com a qual o
conteúdo se orienta.
FIGURA 13 – PROJETO DE DESIGN LAYOUT SHIFTER
FONTE: O autor
Tiny tweaks
O tiny tweaks realiza mudanças no layout, como ajustar o tamanho da fonte,

redimensionar imagens ou mover o conteúdo.
FIGURA 14 – PROJETO DE DESIGN TINY TWEAKS
FONTE: O autor
42
Off canvas
O padrão off canvas remove o conteúdo usado com menos frequência — como
menus de navegação ou de aplicativo — mostrando-os apenas quando o tamanho da
tela for suficiente.
FIGURA 15 – PROJETO DE DESIGN OFF CANVAS
FONTE: O autor
Portanto, é possível realizar o desenvolvimento do design de uma interface

utilizando ferramentas que auxiliam a formatação das telas e facilitam a navegação e a
visualização das informações de forma mais intuitiva.
A seguir, serão demonstradas quais são as principais ferramentas de

desenvolvimentos nos ambientes web e de dispositivos móveis.
2.2 FERRAMENTAS DE DESENVOLVIMENTO

É essencial que os profissionais de design conheçam as principais ferramentas e
conceitos de desenvolvimento dos sistemas desenvolvidos para o ambiente web e mobile.
Inicialmente, é necessário compreender o que é IDE – Integrated Development Environment,
ou “Ambiente de Desenvolvimento Integrado”, um utilitário que tem como objetivo escrever
códigos para apoiar o desenvolvimento de aplicações, otimizando diversos processos
envolvidos, ou seja, integra diversas ferramentas em uma única interface.
Os componentes que compõem um IDE são: editor de textos, compilador,

verificadores de sintaxe, complementos e assistentes de código, prompt integrado, blocos
de código, ferramentas de auxílio para conexão com banco de dados, automatizador de
tarefas e editor de interface gráfica. Um IDE pode ser dedicado para geração de sistemas
em ambiente desktop ou mobile. A seguir, será analisado o IDE Netbeans, direcionado
para o desenvolvimento em ambiente desktop, que utiliza a linguagem Java. Segundo
Tosin (2022, s.p.):
43
O NetBeans possui um conjunto de ferramentas capaz de gerar
código e arquivos de configuração, auxiliar no empacotamento e
instalação de aplicações, renomear elementos do código, entre
outras. Tudo isto através de assistentes, que dão o suporte necessário
que o desenvolvedor precisa para se preocupar mais com a lógica de
negócio e menos com implementações secundárias.
O Netbeans é um dos ambientes de desenvolvimento mais utilizados pelos

desenvolvedores em Java. Além das facilidades que ele oferece, ele é gratuito. Segundo
o site da Oracle (2022), o Nertbeans é sempre o primeiro IDE a suportar as versões mais
recentes de JDK. Um JDK significa Java Development Kit, que é um pacote que inclui tudo o
que é necessário para escrever aplicações. Alguns dos principais recursos do Netbeans são:
• Editor de código fonte integrado.

• Visualizador de classes integrado ao de interfaces, que gera automaticamente o
código dos componentes de forma organizada.
• Suporte ao Java Enterprise Edition, plataforma de programação de computadores,
que faz parte da plataforma Java voltada para aplicações multicamadas.
• Plugins para UML (Unified Modeling Language).
• CSS, funcionalidades para editar folhas de estilos.
• Ajuda local e on-line.
• Debug apurado de aplicações e componentes.
• Suporte a banco de dados.
• Atalhos para copiar linhas inteiras de código.
Por outro lado, para o desenvolvimento em ambiente mobile, tem-se o Android

Studio. Este é um IDE para desenvolvimento de aplicativos mobile para o sistema
operacional Android. A plataforma é gratuita tendo sido criada pelo Google. O Android
Studio é simples e intuitivo, facilitando a criação de um aplicativo. O Android Studio pode
ser instalado em Windows, Linux e Mac OS X. Os principais recursos do Android Studio:
• Sistema de compilação flexível baseado em Gradle.

• Emulador rápido com inúmeros recursos.
• Ambiente unificado que possibilita o desenvolvimento para todos os dispositivos
Android.
• Modelos de código e integração com GitHub, para ajudar a criar recursos comuns de
apps e importar exemplos de código.
• Frameworks e ferramentas de teste.
Por fim, o XCode é um IDE para desenvolvimento para aplicativos iOS. Com o
XCode é possível criar a interface de usuário, programar, testar, depurar e enviar apps
para a App Store em um fluxo de trabalho unificado.
44
3 DESENVOLVIMENTO DE PROTÓTIPO DE INTERFACE
A partir do que foi visto, o objetivo deste estudo envolve levar o estudante a
uma reflexão da prática do design, solucionando problemas encontrados na profissão
de designer.
3.1 DESENVOLVIMENTO DE PROTÓTIPO

Na Figura 4, a operação para “salvar” um arquivo está representada pelo desen-
ho de um disquete. Atualmente, qual símbolo você usaria para estabelecer essa
relação de “signo” e “significante” para salvar um arquivo?
DICAS
Para complementar seus estudos, faça uma leitura do artigo “A
experiência do usuário em meios de pagamentos digitais móveis”, de
João Morisso e Marcelo Gitirana. Confira em: https://bit.ly/3HjXg9l.
45
LEITURA
COMPLEMENTAR
UX DESIGN: O DESENVOLVIMENTO DE INTERFACES DIGITAIS
CENTRADAS NA EXPERIÊNCIA DO USUÁRIO
Michaela Dafne da Silva

José Carlos Corrêa
O meio digital se destaca cada vez mais no universo da comunicação. A expansão da

internet e sua intervenção na vida das pessoas tem sido significativa, inclusive no campo da
publicidade e no marketing digital. A internet não só agrega valor às marcas, como também
estimula a interação entre as pessoas e as trocas econômicas, o que contribui para acelerar
o crescimento da quantidade de usuários conectados. A internet passou a fazer parte do
planejamento das marcas, sendo utilizadas nas ações de marketing implementadas pelas
empresas, agências de propaganda e profissionais dedicados à comunicação digital. Cada
vez mais as marcas identificam a importância de se lançar nesse ambiente virtual.
Entretanto, é possível perceber que as marcas ainda estão se adequando ao

meio virtual, tentando descobrir os caminhos que possam conduzi-las ao domínio da
cultura digital para que melhor se relacionem com o cliente final. O mundo virtual é
complexo, frequentado por um público informado e exigente, sendo necessário que as
organizações encontrem maneiras de promover uma experiência única ao usuário para
impactar as suas emoções. Em um mundo no qual o tempo é cada vez mais escasso, a
informação deve se dar de forma clara, direta e atrativa, proporcionada, no meio digital,
por uma navegação intuitiva, gerando motivos para que o usuário retorne à fonte da
informação e repasse o conteúdo a outras pessoas.
Um dos profissionais que vêm se destacando no mercado publicitário virtual

é o User eXperience designer, termo conhecido pela sigla UX, que, em português,
significa Designer de Interação. Trata-se do profissional responsável por entender,
planejar e projetar interfaces de maneira a melhorar a experiência do usuário durante
o relacionamento com a marca em diversas plataformas, tais como aplicações mobile,
sites, hotsites, e mídias sociais. Criar uma interface analisando como o cliente irá com
ela interagir é uma atividade complexa que exige que o responsável pela ação conheça
o seu público-alvo. É necessário o uso de diagramação, arquitetura e elementos visuais
que se identifiquem com a experiência do cliente e o leve até as informações que esteja
buscando. Uma das ferramentas mais usadas no desenvolvimento de interfaces é
o wireframe, um protótipo ou desenho, também conhecido como mapa do site, que
demonstra a estrutura de como a aplicação ficará contendo as informações essenciais
do projeto. O wireframe deve apresentar, de forma clara, a estrutura e os objetos que irão
compor o modelo final. Entretanto, de acordo com Teixeira (2014), designer de interação
46
na agência R/GA, mesmo que o wireframe seja uma das principais ferramentas, ele é
apenas uma parte do trabalho já que a missão de construir um ambiente digital agradável
começa antes, na busca por entender os hábitos e as necessidades do usuário. Com
a transformação digital, as marcas, em sua maioria, passaram a perceber vantagens
em se aproximar do seu público através da internet, considerando que o usuário está
cada vez mais atualizado com as novas tecnologias. Há poucos anos, a web fornecia
ao usuário uma tecnologia de poucos recursos e a conexão com a web era acessível
a poucas pessoas. Os conteúdos disponíveis na internet eram poucos e praticamente
não existia interação entre a marca e o usuário. Esse cenário mudou, principalmente
com o advento das redes sociais. Atualmente, a interação entre a marca e o público-
alvo se tornou imprescindível nas estratégias de marketing digital, desafiando os
especialistas a desenvolver plataformas cada vez mais intuitivas que analisem, desde o
início do processo de sua elaboração, a experiência que o usuário terá durante o contato
com a marca. Diante deste contexto, o presente artigo procura relacionar os temas
comunicação, design e internet, e responder à questão: considerando a importância do
UX Design na intercomunicação digital, quais são as precauções que devem ser tomadas
no desenvolvimento de interfaces mobile centradas na experiência do usuário?
De acordo com Bordenave (2001), ao se comunicar o indivíduo transforma a

realidade que o cerca, além da sua própria realidade. Martino, Hohlfeldt e França (2001,
p. 14) explicam a comunicação como o "processo de compartilhar um mesmo objeto de
consciência". Scharam (1967 apud MELO, 1970) afirma que, quando o indivíduo se comunica,
estabelece uma comunidade, ou seja, compartilha informações, atitudes ou ideias. De acordo
com Centeno (2009, p. 2), as ferramentas da comunicação são a chave e a explicação do
comportamento humano; e a comunicação concede permissão ao homem para “conhecer
as regras da interação entre os indivíduos com o ambiente”. Dessa forma, entende-se que o
ato da comunicação é parte primordial da sociedade, é a forma que o ser humano encontra
de compartilhar com o mundo as suas ideias e experiências. Nota-se, então, que, sem a
comunicação, a sociedade se encontraria em um estado primitivo, sem aprendizado e
desenvolvimento. Segundo Melo (1970, p. 23), “a comunicação é um veículo de transmissão
de cultura ou um formador de bagagem cultural de cada indivíduo na sociedade".
O Web Design pode ser entendido como uma extensão do design que visa à
criação de interfaces disponíveis através da World Wide Web. Esta vertente do design
tem tendência a ser multidisciplinar; portanto, ela exige conhecimentos não só
sobre arquitetura de informação, como também sobre o próprio design, usabilidade,
acessibilidade e comportamento do consumidor. Segundo Radfahrer (2008, p. 3-4), a
internet "abriu fronteiras inacreditáveis" e "pela primeira vez os profissionais de layout e
artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a qualquer
instante". De acordo com Macdonald (2003), o design voltado para Web é a área do design
mais significante criada nos últimos 20 anos. O autor ainda afirma que o profissional de
Web Design compartilha com as outras áreas do design a forma de pensar, sendo que
todas elas têm a função de resolver problemas de um produto ou cliente e os resultados
são mensuráveis de alguma forma. Segundo Macdonald (2003), muitos dos desafios
47
do profissional de Web Design são sobre como desenvolver uma interface eficaz entre
pessoas e tecnologia. Esta área do design é responsável por fornecer informações ao
usuário fazendo com que ele atinja os seus objetivos ao utilizar uma interface digital.
A internet, que antes era considerado como um meio que somente entregava
dados, passou a ser um canal direto de comunicação com o usuário que possibilita
interação e troca de experiências. O consumidor, cada vez mais, procura informações
e realiza compras pela internet, o que torna o projeto de interfaces que satisfaçam as
necessidades do cliente e sejam cada vez mais amigáveis um novo desafio para os
profissionais de comunicação e marketing. Projetar essas interfaces é a tarefa do UX
Design, uma tendência crescente no design para o meio digital que procura pensar
e projetar a experiência do usuário enquanto ele estiver em contato com a marca. O
termo “UX Design” é uma abreviação do termo “User Experience”, ou seja, o design
orientado pela experiência do usuário. Segundo Chandler e Unger (2009), UX Design
é o desenvolvimento e sincronização dos elementos que afetam a experiência do
usuário com uma determinada marca ou empresa com a intenção de influenciar as
suas percepções e comportamentos. Esses elementos podem incluir ações nas quais
o indivíduo pode ouvir, tocar, cheirar o produto e, também, elementos com os quais o
usuário entra em contato como interfaces digitais (aplicativos e sites).
Para Kelway (2012), o UX Design poderá conter um modelo de seis camadas.

A primeira camada é composta pela persuasão, o coração da indústria do marketing.
A segunda é o comportamento, o resultado proveniente da persuasão. A terceira é
composta pelo visual, a primeira camada mensurável com que o usuário tem contato.
A quarta é a usabilidade. Se não houvesse a usabilidade, a interação com o objeto
iria produzir um efeito negativo e, consequentemente, uma experiência ruim. Já a
quinta camada é a interação, responsável por tocar, sentir, e produzir um feedback. A
sexta e última camada é o conteúdo. Segundo Kelway (2012), o UX pode associar as
mais variadas áreas para desenvolver algo realmente especial e único e que ignorar o
usuário não é uma opção. Para o mesmo autor, o UX precisa possuir a necessidade de
desenvolver coisas melhores, mais eficientes e inteligentes. O Design de UX representa
a interseção entre o ser humano e a tecnologia. De acordo com Kraft (2011, p. 1), o termo
“User Experience” é definido pelo órgão ISO standards – de padrões internacionalmente
aceitos pelos especialistas – como a resposta e percepção de um indivíduo após o uso de
um produto, sistema ou serviço. O autor aponta que User Experience é o sentimento que
o usuário sente ao realizar a utilização do produto e isso significa que esse sentimento
pode ir de amor ao ódio, de felicidade à irritação, de paixão à indiferença. Kraft (2011)
explica também o termo “Curva da Experiência do Usuário”. Segundo o autor, enquanto
o usuário utiliza um produto ou serviço, é possível identificar os sentimentos que ele
está experimentando. No caso de sentimentos negativos, a Curva de Experiência se
inclina para baixo; no caso de sentimentos positivos a curva se inclina para cima. Se
a curva está caindo muito, ou repetidamente, existe uma grande possibilidade de a
empresa estar perdendo o cliente, mesmo após a compra ter sido efetuada.
FONTE: <https://bit.ly/3Ht3dRC>. Acesso em: 3 fev. 2022.
48
RESUMO DO TÓPICO 4
• Os padrões de design para as interfaces de sistemas web e aplicativos, sua

estruturação e a importância de seguir os padrões, tornando o trabalho de design
mais profissional e de alto nível.
• Foi possível compreender como são esquematizados os diversos tipos de design e

como eles são ajustados dependendo do dispositivo onde o aplicativo está sendo
utilizado. Pois, é fundamental para o profissional de design ter conhecimento sólido
dos diversos tipos de design, suas evoluções e a aplicação correta nos diversos
aparelhos disponíveis.
• Compreendeu-se como utilizar as ferramentas de gerenciamento de projetos e

como aplicar o modelo correto de padrão de design.
49
AUTOATIVIDADE
1 A elaboração de um projeto compreende uma série de requisitos que devem ser muito
bem analisados antes de se iniciar o desenvolvimento de um design. Com relação aos
requisitos funcionais relacionados à exibição da informação e quanto ao que não faz
parte desse grupo de requisitos, assinale a alternativa CORRETA:
a) ( ) Projeto independente da resolução do monitor.

b) ( ) Classificação funcional dos comandos.
c) ( ) Metáforas.
d) ( ) Prevenção de erros.
2 Os padrões de projeto surgiram da proposta de que cada padrão é uma regra com três
partes. No ambiente do design digital, essas partes têm alguns aspectos específicos.
Sobre essas partes, analise as sentenças a seguir:
I- O contexto se refere ao conjunto das informações do padrão de projeto.

II- O problema trata do conjunto de objetivos e limitações dentro do contexto.
III- A solução é uma estrutura informal para ser aplicada na resolução do problema.

3 No desenvolvimento de uma interface, é necessário que o designer saiba quais são

os requisitos funcionais e não funcionais. Sobre esses requisitos, classifique V para as
sentenças verdadeiras e F para as falsas:
( ) Uso adequado de combinação de cores é um requisito funcional.

( ) Prevenção de erros é um requisito não funcional.
( ) Consistência é um requisito funcional.
a) ( ) V – F – F.
b) ( ) F – F – V.
c) ( ) F – V – F.
d) ( ) V – F – V.
50
4 Atualmente, uma grande evolução com relação ao design em dispositivos
computacionais é chamada de padrões responsivos. Disserte sobre os padrões
responsivos.
5 Entre os diversos padrões, existe um que é mais responsivo. Explique qual é e padrão
de projeto que se apresenta como o mais responsivo e o porquê.
51
REFERÊNCIAS
ARAMUNI, J. P. C.; MAIA, L. C. G. A Influência da Engenharia Semiótica na
experiência do usuário de aplicativo mobile. Revista Cta Semiótica Et Lin-
guística. Paraíba, v. 23, n. 2, p. 44-53, dez., 2018. Disponível em: https://bit.
ly/352UpVr. Acesso em: 29 set. 2021.
BADARÓ, M. Introdução. In: GRAU, N. C. et al. Gestão pública e participação.

Cadernos da Fundação Luís Eduardo Magalhães. Salvador: FLEM, 2005.
BARBOSA, S. D. J.; SILVA, B. S. Interação humano-computador. Rio de Ja-

neiro: Editora Elsevier, 2010.
BARCELLOS, V. et al. A democracia na era do governo eletrônico. Busca Legis, Flo-

rianópolis, 2006. Disponível em: https://bit.ly/3HlX1uu. Acesso em: 13 maio 2021.
BENYON, D. Interação humano-computador. 2. ed. São Paulo: Editora Pear-

son Prentice Hall, 2011.
BORDENAVE, J. O que é comunicação. São Paulo: Brasiliense, 2001.
BRASIL, C. Guia internet de conectividade. 14. ed. São Paulo: Senac, 2008.
BRASIL. Ministério do Planejamento, Orçamento e Gestão. Secretaria de Lo-

gística e Tecnologia da Informação. Avaliação de 200 sítios e-serviços do
governo eletrônico brasileiro. Brasília: MP, 2011. Disponível em: https://bit.
ly/3t8kyd9. Acesso em: 31 jan. 2022.
CENTENO, J., A., S. Sensoriamento remoto e processos de imagens digi-

tais. Curitiba: Editora UFPR, 2009.
DEDIS, L. S. A. Padrões de Design Responsivo. 2017. Trabalho de Conclusão

de Curso (Bacharelado em Sistemas de Informação) – Escola de Informática
Aplicada, Universidade Federal do Estado do Rio de Janeiro, Rio de Janeiro.
DIAS. C. Usabilidade na web: criando portais acessíveis. 2. ed. Rio de Janeiro:

Alta Books, 2007.
DIAS, F. S. Avaliação de Sistemas de Informação. Análise da literatura científica

no período 1985-2005. 2016. Dissertação (Mestrado em Ciência da Informação).
Escola de Ciência da Informação, Universidade Federal de Minas Gerais, 2016.
DIDONI, B. Acessibilidade web para os deficientes: um desafio que se inicia pelo

e-gov. RECIFIJA – Revista Científica das Faculdades Integradas de Jáu, São
Paulo, v. 11, n. 1, 2014. Disponível em: https://bit.ly/353ozYB. Acesso em: 31 jan. 2022.
52
FERRER F.; SANTOS, P. (Orgs.). E-government: governo eletrônico no Brasil.
São Paulo: Saraiva, 2004.
FERREIRA, M. G. G, MORISSO, J. G. D. A experiência do usuário em meios de

pagamentos digitais móveis: uma revisão dos métodos de avaliação. Revista
de Design, Tecnologia e Sociedade, Brasília, v. 8, n. 1, p. 73-92, dez., 2020.
Disponível em: https://bit.ly/3BPWlfT. Acesso em: 31 jan. 2022.
FLOR, C. S; VANZIN, T; ULBRICHT, V; Recomendações da WCAG 2.0 (2008) e a

acessibilidade de surdos em conteúdo da Web. Revista Brasileira de Edu-
cação Especial, São Paulo, v. 19, n. 2 p. 161-168, jun., 2013. Disponível em:
https://bit.ly/3vk9fkX. Acesso em: 16 fev. 2022.
FRANÇA, F. S. Web design responsivo: caminhos para um site adaptável. Inter-

faces. Científicas – Exatas e Tecnológicas, Aracaju, v. 1, v. 2, p. 75-84, jun.
2015. Disponível em: https://bit.ly/36JoxWb Acesso em: 31 jan. 2022.
GOMES, W. Ciberdemocracia: possibilidades e limites. In: CONFERÊNCIA INAU-

GURAL DO II CONGRESSO IBÉRICO DE COMUNICAÇÃO, 18., 2007, Covilhã. New
Media and Society, 2007, p. 849‐869.
KRAFT, C. User experience innovation: user centered design that works.

New York: Springer Verlag, 2011.
KRESS, G. Multimodality: a social semiotic approach to contemporary com-

munication. London: Routledge, 2010.
MACDONALD, N. What is web design. East Sussex: RotoVision, 2003.
MARTINO, L. C.; HOHLFELDT, A.; FRANÇA, V. (org). Teorias da comunicação:

conceitos, escolas e tendências. Petrópolis: Vozes, 2001.
MELO, J. M. Comunicação social: teoria e pesquisa. Rio de Janeiro: Vozes, 1970.
ORACLE. Site oficial da Oracle Brasil. https://www.oracle.com/br/index.html.

2022. Acesso em: 16 fev. 2022.
PILAR, C. P. Avaliação das Arquiteturas de Desenvolvimento para Dispo-

sitivos Móveis. Universidade de Caxias do Sul. 2013. Trabalho de Conclusão
de Curso (Bacharelado em Sistemas de Informação) – Universidade de Caxias
do Sul, Caxias do Sul.
PRADO, O.; LOUREIRO, M. R. G. Governo eletrônico e transparência: avaliação

da publicização das contas públicas das capitais brasileiras. Alcance, São
Paulo, v. 13, n. 3, p. 355-372, 2006. Disponível em: https://siaiap32.univali.br/
seer/index.php/ra/article/view/126/106. Acesso em: 31 jan. 2022.
53
RADFAHRER, L. Design/web/design: 2. [S.l.] 2008. Disponível em: https://bit.
ly/3M3eVpl. Acesso em: 17 jan. 2022.
ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de interfaces

humano-computador. Campinas: NIED/UNICAMP, 2003.
SANTOS, Z. B., TIBURTIN, V. As contribuições da Semiótica Social Multimodal

para apreciação de infográficos digitais no contexto da pandemia da COVID-19.
Texto Digital, Florianópolis, v. 17, n. 1, p. 169-190, jan./jun. 2021. Disponível em:
https://bit.ly/3ta4O9F. Acesso em: 31 jan. 2022.
TAKAHASHI, T. (Org). Sociedade da Informação no Brasil: Livro Verde. Brasí-

lia: Ministério da Ciência e Tecnologia, 2000.
TEIXEIRA, F. As funções responsáveis por projetar a experiência do

usuário (UX). E-commercebrasil. 2014. Disponível em: https://bit.ly/3sjdT0I.
Acesso em: 17 jan. 2022.
TONHATI, T. Governo Eletrônico, Globalização e perspectivas da gestão pública

para a democracia digital. Revista Democracia Digital e Governo Eletrôni-
co. São Paulo, n. 5, p. 1-13, 2011. Disponível em: https://bit.ly/3BQWMGF. Aces-
so em: 31 jan. 2022.
TOSIN, C. E. G. Introdução ao NetBeans. DEVMEDIA Revista Java Magazine,

n. 91 [Explorando o NetBeans 7.0.] 2011. Disponível em: https://bit.ly/3vr352i.
Acessado em: 14 jan. 2022.
54
UNIDADE 2 —
USABILIDADE E INTERFACE
COM O USUÁRIO
• compreender com mais profundidade a relação entre o humano e o computador;
• relacionar a ergonomia a outros sistemas dos ambientes digitais;
• saber qual a importância desta relação no desenvolvimento de interfaces no

ambiente digital;
• entender as técnicas de implantação e análise de usabilidade e interface no

ambiente digital;
• diferenciar e aplicar os princípios de UI (User Interface e e UX (User eXperience) no

desenvolvimento do design;
• aplicar os fundamentos de UI e UX com o design para web e dispositivos móveis.
PLANO DE ESTUDOS
TÓPICO 1 – ERGONOMIA E USABILIDADE EM PLATAFORMAS DIGITAIS

TÓPICO 2 – INTERFACE HUMANO COMPUTADOR
TÓPICO 3 – UI – USER INTERFACE
TÓPICO 4 – UX – USER EXPERIENCE
CHAMADA
55
CONFIRA
A TRILHA DA
UNIDADE 2!
Acesse o
QR Code abaixo:
56
UNIDADE 2 TÓPICO 1 —
ERGONOMIA E USABILIDADE EM
PLATAFORMAS DIGITAIS
1 INTRODUÇÃO
Neste tópico, serão estudados os fundamentos de ergonomia e a relação da
ergonomia com o desenvolvimento de design em ambientes digitais. Essa relação entre
ergonomia e os dispositivos têm como ponte a usabilidade. A origem da ergonomia
está centrada nos estudos sobre o trabalho e esforço necessário para executar um
determinado trabalho ou manusear um dispositivo. Está muito relacionado à postura e
às condições físicas do ser humano.
O que é ergonomia e como este campo de estudo se relaciona com o design

digital? Como relacionar a ergonomia à usabilidade e interface? Qual a importância na
ergonomia no mundo digital? Tudo isso será estudado e seguir.
2 FUNDAMENTOS DE ERGONOMIA
Inicialmente, questiona-se: o que vem a ser “ergonomia”? Todas as definições
de ergonomia procuram mostrar o foco na saúde do usuário, com o trabalho que está
sendo executado. Como descrito por Lida (2005, p. 2):
o objeto de estudo é a interação entre o homem e o trabalho no sistema

homem-máquina-ambiente, ou mais precisamente, as interfaces
desse sistema, onde ocorrem trocas de informações e energias entre
o homem, máquina e ambiente, resultando na realização do trabalho.
É possível compreender que, em torno desse assunto, diversas áreas se cruzam:

medicina laboral, psicologia, tecnologia, administração etc. Ainda, segundo Lida (2005,
p. 2), ressalta-se que a melhor definição é da Associação Brasileira de Ergonomia (2012),
que adota a seguinte definição:
Entende-se por Ergonomia o estudo das interações das pessoas com

a tecnologia, a organização e o ambiente, objetivando intervenções e
projetos que visem melhorar, de forma integrada e não dissociada, a
segurança, o conforto, o bem-estar e a eficácia das atividades humanas.
Concluindo, a ergonomia pode ser compreendida como o grupo de regras,

procedimentos e forma de interações entre o ser humano e os equipamentos, tendo
como objetivo cuidar da saúde do usuário no momento da interação.
57
IMPORTANTE
Foi criada no Brasil uma legislação direcionada a garantir a acessibilidade.
Essa legislação foi criada em 2004, sendo o Decreto nº 5.296, em que são
estabelecidas normas para a promoção da acessibilidade, garantindo o
acesso global à informação. Para saber mais: https://bit.ly/3tcb1lm.
Levando essa base conceitual para o ambiente de design nos dispositivos,

podemos compreender a ergonomia como sendo o grau de esforço do usuário ao
executar as funções do aplicativo.
FIGURA 1 – ERGONOMIA NO AMBIENTE DIGITAL
FONTE: <https://bit.ly/3viwprS>. Acesso em: 31 jan. 2022.
Segundo a Associação Brasileira de Ergonomia (ABERGO, 2012), a ergonomia

pode ser dividida em:
• Ergonomia física – avaliação dos aspectos físicos do ambiente, como iluminação,

temperatura, ruído e qualidade de equipamentos e ferramentas utilizadas.
• Ergonomia organizacional – nesse caso, deve ser analisado quais processos e
políticas internas se adaptam ao trabalho remoto, como jornada de trabalho,
demandas e rotina de atividades.
• Ergonomia cognitiva – essa área está diretamente ligada aos processos mentais
e como eles afetam as interações do colaborador, como o senso de vigilância, a
tomada de decisão, o desempenho e a habilidade. Nesse caso, o objetivo é adotar
medidas para reduzir o estresse e a ansiedade.
É possível concluir que as bases da ergonomia são as condições que possibilitam

a uma pessoa realizar uma atividade adequando os recursos e o meio a sua utilização.
O objetivo final é prevenir acidentes, corrigir erros e diminuir riscos, aumentando o
58
conforto, a saúde e a segurança do usuário. O estudo da ergonomia busca promover
a integração ideal entre as capacidades e limitações do usuário, suas condições de
utilização e a eficiência de todo o aparato utilizado.
Portanto, a ergonomia é uma tecnologia de projetos que tem como fim a melhor
adequação dos objetos para aqueles que os utilizam, considerando a segurança, o
conforto, e eficácia. Os ergonomistas têm tido uma contribuição considerável nos
projetos e avaliação das tarefas, trabalhos e produtos, ambiente e sistemas.
É interessante perceber com a ergonomia, até pouco tempo, aplicava-se à

questão de postura e o manejo de objetos de trabalho, visando criar problemas físicos e
que pudessem afastar o trabalhador das suas funções, sendo a inserção da ergonomia
informacional e digital um campo relativamente recente de atenção.
A seguir, será aprofundado o tema da ergonomia no ambiente digital, os

impactos na produtividade do trabalhador e como tal assunto é tratado atualmente.
2.1 A ERGONOMIA NO AMBIENTE DIGITAL

A evolução tecnológica tem diversos impactos na sociedade. Esses impactos têm
seu lado altamente positivo, como a aceleração das atividades e processos das empresas,
agilidade das tarefas, acesso às informações de forma mais ágil etc. Contudo, existem impactos
negativos, o esforço para ler e trabalhar continuamente no computador, tablet ou celular pode
trazer problemas físicos de toda natureza. Até pouco tempo, a sociedade, de modo geral, estava
acostumada a ter um trabalho sobre papel e caneta. Essa realidade tem mudado principalmente
no mundo pós-pandemia, com a prática mais frequente do trabalho remoto.
Conforme mencionado anteriormente, a ergonomia pode ser física, cognitiva ou

organizacional. Além dessas, Chammas, Quaresma e Mont’alvão (2013, p. 26) explicam
a ergonomia informacional: “a ergonomia informacional envolve a análise e design da
informação de forma que possa ser usada de maneira eficaz e eficiente pelos usuários,
tendo como consequência a sua satisfação e respeitando a sua diversidade em termos
de habilidades e limitações”.
No caso específico do design em ambientes digitais, a ergonomia informacional

é a que merece atenção, ou seja, podemos compreender que a ergonomia informacional
tem uma forte relação com o design e na maneira de acesso às informações. Conforme
descrito por Neves (2017, p. 32):
O design pode ser considerado uma atividade criativa com o objetivo

de planejar objetos ou sistemas de comunicação visual levando em
consideração aspectos produtivos, funcionais e ergonômicos. Essa
definição leva em consideração a necessidade de organização da
atividade criativa (método), a especificação do processo produtivo
(projeto) e a adequação às necessidades humanas (ergonomia).
59
O design sempre tem como alvo uma solução criativa de um problema em que o
processo está condicionado a uma série de fatores, como restrições dos métodos de produção,
tempo de desenvolvimento, necessidades funcionais, questões de viabilidade comercial, além
de necessidades cognitivas, funcionais e culturais do seu público que se destina o sistema.
De acordo com Souza (2004), a ergonomia informacional aborda parâmetros

ergonômicos que são considerados na linguagem verbal, como:
• Legibilidade: indica a facilidade com que as partes podem ser reconhecidas e

organizadas num modelo coerente.
• Visibilidade: qualidade de um caractere ou símbolo que torna possível sua separação
visual do suporte em que é apresentado ou em seu entorno.
• Leiturabilidade: qualidade responsável pelo reconhecimento da informação textual
quando apresentada em grupamentos significativos, como palavras, sentenças ou
textos contínuos.
• Compreensibilidade: qualidade de entendimento correto do significado do símbolo,
como também a compreensão da informação para tomar ou tornar segura a decisão
de um ato.
• Orientabilidade: define uma sequência lógica de mensagens para facilitar a
locomoção em uma edificação.
É fundamental que o profissional de design em ambientes digitais compreenda

e saiba aplicar no processo de elaboração da interface os princípios da ergonomia da
informação. A seguir, serão demonstrados os princípios que regem as inserções dos
novos usuários no ambiente digital e como a usabilidade se adapta aos novos usuários.
2.2 A INSERÇÃO DE NOVOS USUÁRIOS E A USABILIDADE

É extremamente importante ressaltar que um aplicativo pode ser considerado
amigável para um usuário e não amigável para outro, visto que as necessidades diferem
entre os usuários. Nessas diferenças, Pressman (1995, p. 611) os classifica como:
1. Principiantes: sem conhecimento sintático do sistema e pouco conhecimento

semântico da aplicação ou uso do computador em geral.
2. Usuários instruídos e intermitentes: razoável conhecimento semântico da aplicação,
mas relativamente pouca lembrança de informações sintáticas para usar a interface.
3. Usuários instruídos e frequentes: bom conhecimento semântico e sintático, o que
frequentemente leva à “síndrome de usuários com poder”, ou seja, indivíduos que
procuram atalhos e modos abreviados de interação.
Nesse aspecto, é importante ressaltar a questão da “acessibilidade” nos designs

dos dispositivos digitais. Para João (2017, p. 69), “[acessibilidade] é garantir que uma
interface seja acessível a pessoas com deficiência de todos os tipos ou que atenda os
60
tipos ou que atenda a qualquer necessidade”. Segundo os autores Barbosa e Silva (2010,
p. 32), “o critério de acessibilidade está relacionado com a capacidade de o usuário
acessar o sistema para interagir com ele, sem que a interface imponha obstáculos”.
O que se tem, na verdade, são sistemas desenvolvidos que levam em consideração

as limitações de alguns usuários, fazendo com que eles tenham acesso a todas as
facilidades que os outros usuários possuem. Durante a interação do usuário com um
sistema, são empregados segundo Barbosa e Silva (2010, p. 32), alguns aspectos:
• A habilidade motora para usar os dispositivos de entrada.

• Os sentidos de visão, audição e tato.
• A capacidade de percepção para captar as respostas dos sistemas emitidos pelos
dispositivos de saída.
• A capacidade cognitiva de interpretação e de raciocínio para empreender as
respostas dos sistemas.
Portanto, se a interface coloca alguma barreira que impeça o usuário de interagir

integralmente com o sistema, ele não será capaz de utilizar todas as funcionalidades oferecidas.
Para o desenvolvedor, é fundamental que a interface de um sistema seja desenvolvida para
incluir o máximo de usuários, e não excluir o grupo de usuários que não tenha qualquer
limitação, ou seja, o sistema deve oferecer “mais” possibilidade de inserção de usuários.
Esses usuários podem ter diversos tipos de limitações, como auditivas, visuais,
cognitivas, limitações de mobilidade e, inclusive, as limitações decorrentes da idade,
tanto na infância, quanto na velhice. No quadro a seguir, serão descritos cenários
demonstrando a importância da acessibilidade, segundo Barbosa e Silva (2010).
QUADRO 1 – CENÁRIOS EVIDENCIANDO A IMPORTÂNCIA DA ACESSIBILIDADE (TRÊS CASOS DE DEFICIÊNCIA)
Deficiência Demonstração da acessibilidade

Paulo é um deficiente auditivo que acessa à Internet frequentemente sem
grandes dificuldades. A sua conexão com a Internet parou de funcionar
em casa e ele precisa entrar em contato com seu provedor de acesso.
Deficiência
Como ele se sentiria ao descobrir que, para ter acesso ao suporte do seu
auditiva
provedor de Internet, ele será obrigado a utilizar um sistema interativo
por telefone? Todo o seu esforço para aprender o Português, além da
Língua Brasileira de Sinais (Libras), não seria útil nesse caso.
João maneja bem o teclado e o mouse. Entretanto, no último mês, ele
descobriu uma tendinite crônica nas mãos e sente muitas dores ao
Deficiência
manipular esses dois dispositivos de entrada. Certamente, João ficaria
motora
feliz se, pelo menos, até que sua dor diminuísse, alguns comandos
pudessem ser ativados via voz.
61
Joana é uma jovem brasileira, deficiente visual e interessada em conti-
nuar estudando. Ela ouviu no noticiário da TV que o vestibular de várias
universidades públicas levará em conta a nota no Enem (Exame Nacional
do Ensino Médio). Utilizando um leitor de telas, ela conseguiu acessar o
site de inscrição do Enem para obter informações a respeito do exame. No
site, ela descobriu que precisava do número de identidade e CPF, mas não
Deficiência
conseguiu encontrar um link para iniciar a inscrição, nem percebeu que o
visual
período de inscrição terminou. Por que ela não percebeu essas informa-
ções? Se analisarmos, perceberemos que o link para iniciar a inscrição era
uma figura, e a informação de que o período de inscrição terminou se en-
contrava dentro dessa figura. Nenhuma dessas informações pôde ser lida
pelo leitor de tela, e ela não teve acesso a informações sobre um serviço
que o Estado deveria oferecer para toda a população brasileira.
Nesses exemplos, as limitações físicas dos usuários dificultam ou impossibilitam

o acesso aos sistemas interativos. A interação tornou-se improdutiva ou impossível em
função das dificuldades para agir com o sistema por meio dos dispositivos de entrada, e
para interpretar os resultados emitidos pelos dispositivos de saída.
É importante ressaltar que a acessibilidade se estende a todas as situações em

que o usuário tenha impossibilidade de interagir com o sistema, tenha ou não problema
físico. Um exemplo é quando um motorista utiliza um aplicativo de trânsito. Por lei, ele
não pode retirar as mãos do volante para interagir com o sistema.
Conseguir encontrar soluções para as barreiras de acessibilidade é bastante

desafiador para o desenvolvedor de interface. Segundo João (2017), duas abordagens
são utilizadas: o design universal e o design inclusivo. O design universal considera
tudo o que envolve o design, não somente sistemas interativos. De acordo com essa
abordagem, tudo deve ser desenvolvido para qualquer pessoa. Segundo Benyon (2011),
são utilizados princípios do design universal:
• Uso equitativo: a interface não pode excluir nenhum grupo.

• Flexibilidade de uso: a interface deve englobar uma grande possibilidade de uso.
• Uso simples e intuitivo: a interação do usuário com o sistema deve ser de fácil
aprendizagem.
• Informação perceptível: a comunicação da interface deve fornecer as informações
corretas e necessárias para a utilização do sistema.
• Tolerância ao erro: a interface deve evitar ao máximo situações em que possam
ocorrer erros de entrada ou saída de dados.
• Baixo esforço físico: o design deve ser confortável e evitar fadiga.
• Tamanho e espaço para aproximação e uso: condições de ergonomia são
fundamentais para evitar esforço desnecessário para o usuário.
62
Por outro lado, o design inclusivo é uma abordagem mais pragmática, pois
considera que uma universalidade é impossível de ser atingida. Para Benyon (2011), o
design inclusivo leva em consideração quatro premissas:
• Os usuários alteram suas habilidades com o decorrer do tempo, desde a infância à

velhice, como também as habilidades cognitivas.
• Um design deve servir a todos os usuários, incluindo, e não excluindo.
• As pessoas devem se sentir confortável, afetando o bem-estar, sentindo-se
independentes e com controle.
• Usabilidade e estética são mutuamente compatíveis e complementares.
Para poder escolher uma melhor solução de acessibilidade, Benyon (2011, p. 51)
define a chamada “árvore de decisão”, que contêm critérios de estabilidade e incidência de
uma característica humana e custo de desenvolvimento, conforme apresentado na Figura 2:
FIGURA 2 – ÁRVORE DE DECISÃO PARA ANÁLISE DE INCLUSIVIDADE CONSIDERANDO OS TIPOS DE ESTA-

BILIDADE E INCIDÊNCIA
FONTE: Benyon (2011, p. 51)
Dessa forma, Benyon (2011), indica algumas sugestões para que designers
possam garantir que um sistema seja acessível:
• Devem ser incluídas pessoas com necessidades especiais nos testes dos sistemas.
• Deve ser analisado se novas características irão alterar usuários com necessidades
especiais.
• Considerar as diversas diretrizes e avaliar situações contrárias a elas.
• Incluir usuários com necessidades especiais em todos os testes.
63
Conforme descrito por Barbosa e Silva (2010), as limitações físicas, mentais
e de aprendizado dos usuários não podem ser desprezadas, sejam elas limitações
permanentes, temporárias ou circunstanciais. É desejável que um sistema interativo
seja acessível a qualquer pessoa, mas a acessibilidade depende das características dos
usuários que pretendemos atender e dos contextos de uso pretendidos.
64
RESUMO DO TÓPICO 1
• Foi possível compreender o que é ergonomia e a sua relação com o design de

interfaces gráficas.
• Foram estudados, também, como os sistemas devem estar preparados para servir
para todos os grupos de usuários e as suas características e limitações.
• Foi possível compreender a estreita relação que existe entre os ambientes digitais e
a ergonomia, principalmente pelo uso intenso dos aparelhos móveis.
• A relação do humano com o computador passa pela postura com os dispositivos, pelo
tempo de uso, acesso às informações e toda a estrutura que envolve a ergonomia.
65
AUTOATIVIDADE
1 Ergonomia é o conjunto de regras e procedimentos que visam os cuidados com a
saúde do profissional, dentro e fora do seu ambiente de trabalho. Hoje em dia, é difícil
pensar em bem-estar sem falar de ergonomia. Sobre os princípios da ergonomia e
quanto ao fundamento de ergonomia, assinale a alternativa INCORRETA:
a) ( ) O objeto de estudo é a interação entre o homem e o trabalho no sistema homem-

máquina-ambiente.
b) ( ) Por ergonomia, entende-se o estudo das interações das pessoas com a
tecnologia, a organização e o ambiente.
c) ( ) A ergonomia foca as relação de intolerância entre os níveis organizacionais,
gerando desgaste psicológico.
d) ( ) A ergonomia pode ser compreendida como o grupo de regras, procedimentos e
forma de interações entre o ser humano e os equipamentos.
2 Estudos mostram que empresas que investem no bem-estar dos trabalhadores são
muito mais eficientes. Esse dado só comprova a importância de conhecer a fundo os
fundamentos da ergonomia. Seus principais tipos, diferenças e como esse cuidado
impacta na vida dos colaboradores e nos resultados do negócio. A ergonomia pode
ser dividida em três tipos. Segundo esses tipos, analise as sentenças a seguir:
I- Ergonomia física – avalia os aspectos físicos do funcionário.

II- Ergonomia organizacional – analisa os processos e políticas do trabalho.
III- Ergonomia cognitiva – analisa os processos mentais.

c) ( ) As sentenças II e III estão corretas.
3 A ergonomia informacional pode ser entendida como a disciplina que estuda o arranjo
dos dispositivos de sinalização, informação e comando, com vistas a aperfeiçoar as
condições de percepção do trabalhador, visando a preservação da segurança da
pessoa. A ergonomia informacional aborda parâmetros ergonômicos. Nesse sentido,
classifique V para as sentenças verdadeiras e F para as falsas:
66
( ) A legibilidade indica a facilidade com que as partes podem ser reconhecidas e
organizadas num modelo coerente.
( ) A compreensibilidade e qualidade de um caractere ou símbolo que torna possível
sua separação visual do suporte em que é apresentado.
( ) A leiturabilidade é a qualidade responsável pelo reconhecimento da informação
textual quando apresentada em grupamentos significativos.
a) ( ) V – F – F.
b) ( ) F – V – F.
c) ( ) V – F – V.
d) ( ) F – F – V.
4 Na década de 1970, surgiram os primeiros métodos de apoio ao enfrentamento de

situações específicas, nas quais um tomador de decisão, atuando com racionalidade,
deveria resolver um problema em que vários eram os objetivos a serem alcançados de
forma simultânea. Daí, surgiu a Árvore de Decisão, um dos mais importantes métodos
de análise de decisão, pautado em conceitos como o de risco e retorno. Disserte
sobre o fundamento da árvore de decisão.
5 O design segue uma série de princípios que devem ser seguidos por esse profissional.
Esses princípios orientam os profissionais para que desenvolvam interfaces
agradáveis, de uso facilitado, que orientem o usuário para uma boa experiência de
uso e que se consiga alcançar o objetivo desejado pelo usuário, executando a tarefa
correta quando se necessita. Descreva esses princípios.
67
68
INTERFACE HUMANO COMPUTADOR
1 INTRODUÇÃO
Conforme evoluem as tecnologias, mais o ser humano depende destas para
suas tarefas diárias. Com a integração dos recursos e acesso à internet nos dispositivos
móveis, essa dependência é evidente. Os aplicativos têm tomado conta do dia a dia
das pessoas: Whatsapp, Uber, Ifood etc. já fazem parte do nosso cotidiano. Portanto, a
interação do humano com o computador é peça fundamental no design dos aplicativos.
Nesse aspecto, são diversas as variáveis que são estão relacionadas na interface
humano computador. Essas variáveis vão desde a seleção de cores e fontes à facilidade
de acesso às informações etc. Nesse sentido, foram criados diversos padrões com o
objetivo de facilitar o desenvolvimento de designer em dispositivos computacionais.
Esses padrões serão estudados a seguir.
2 PADRÕES DE INTERFACE
Com garantir o desenvolvimento de um design profissional? Os padrões de
interface são os parâmetros do desenvolvimento. No entanto, o que são os padrões
de interface? Os princípios e padrões de design de interação são aplicados durante
o processo de desenho da interface, ajudando os designers a traduzir os requisitos
definidos para o produto em estruturas e comportamentos na interface.
DICA
Filmes como “MinorityReport” (2002), anteciparam conceitos e tecnologias
que estão cada vez mais presentes em nosso dia a dia: ubiquidade, projeções
holográficas e incríveis displays touchscreen. Entretanto, o cinema também
fez uso estético da IHC. Esse é o caso de “A Senha: Swordfish” (2001), que
traz um sofisticado aparato tecnológico em 3D para representar a formação
de um vírus. Confira algumas dessas cenas visionárias selecionadas por
Schmitz: https://www.youtube.com/watch?v=rjumeQhhPmU.
Os princípios de design de interação são chamados de guidelines ou regras,

baseadas em um conjunto de valores que os designers têm, assim como nas experiências
em questões de comportamento, forma e conteúdo de uma interface.
69
Outras abordagens de padrões são consideradas as soluções recorrentes para
problemas comuns, soluções que se consolidaram como práticas comuns e testadas.
Padrões de design de interação se preocupam com a estrutura e organização dos
elementos da interface e com o comportamento dinâmico e mudanças nesses elementos
em resposta às ações do usuário. A formalização dos padrões de interface permite:
• Reduzir o tempo e esforço de design em novos projetos.

• Melhorar a qualidade das soluções de design.
• Facilitar a comunicação entre designers e programadores.
Os padrões de interface englobam:
• Contexto de uso é caracterizado por toda situação relevante para interação com
o sistema. Inclui-se no contexto quando o sistema é utilizado e onde ocorre a
interação (o ambiente físico, social e cultural).
• Interação é a possibilidade de interação que acontece quando um sistema oferece
uma interface para o usuário agir.
• Interface é o contato entre o usuário e o sistema. Trata-se da porção do sistema que
mantém o contato durante a interação. O hardware e softwares utilizados durante a
interação possibilitam o contato físico na interface.
• Affordance tem como exemplo um botão desenhado na interface gráfica de um
sistema, sugerindo ao observador a possibilidade de pressionar (um tipo de uso)
para atingir um objetivo. Então ele usa o mouse para isso.
A aceitação dos padrões de interface considera a aceitabilidade. A aceitabilidade

caracteriza-se como social, diz respeito à aceitação do sistema. Significa que os usuários
acreditam que o sistema pode melhorar o andamento de suas atividades sem entraves.
Existe, também, a aceitabilidade prática, que diz respeito aos parâmetros como custo,
compatibilidade e confiabilidade etc., e uma categoria denominada “usefulness”.
FIGURA 3 – O DESIGN É FUNDAMENTAL COM UMA INTERFACE AMIGÁVEL, DE FÁCIL USABILIDADE E COM
INFORMAÇÕES CONFIÁVEIS
FONTE: <https://bit.ly/3pyWRKh>. Acesso em: 1 fev. 2022.
70
Na categoria “Usefulness”, verifica-se se um sistema pode ser usado para
atingir um determinado objetivo; trabalha-se com atributos de utilidade e usabilidade.
Sobre a utilidade, verifica-se se o sistema faz o que deve ser feito conforme o objetivo
proposto. Já usabilidade, esta está relacionada a quão bem os usuários podem utilizar
uma ferramenta do sistema, com o intuito de realizar uma tarefa específica. Como
parâmetros de padrões de interface, alguns tópicos podem ser elencados.
2.1 COR NO DESIGN GRÁFICO

O designer deve trabalhar as cores de um projeto visual de acordo com o
contexto, devendo saber aplicar aos efeitos causados pelas combinações de cores e
atenção para que expresse realmente o que deseja.
A cor exerce influência nas ações e no grau de satisfação dos usuários no

ambiente virtual, interferindo, inclusive, em seus sentidos, emoções e intelecto. O designer
da interface deve ter domínio ao utilizar esse recurso para que seja favorável ao projeto,
pois o mau uso das cores pode influenciar no tempo de resposta do usuário. Por exemplo:
• Contraste: os tipos básicos de contraste são o contraste de matiz, de saturação, ou

de cores complementares, e contraste quente/frio.
• Harmonização cromática: a harmonia das cores também deve ser observada, para
garantir a consistência e uniformidade.
o Monocromática: usa uma única cor e suas variações de saturação. De fácil
composição, mas pode se tornar pouco atrativa.

o Harmonia análoga: usa duas ou três cores próximas, o que possibilita combinações
versáteis. Também pode se tornar monótona, pelo baixo contraste.

o Harmonia complementar ou oposta: usa as cores complementares na
composição. Os resultados podem ser mais vibrantes e atraentes, porém podem
causar problemas de legibilidade, devido ao alto contraste.
o Harmonia complementar dividida: não é usada para complementar direta, mas
sim as duas cores próximas a ela.

o Harmonia complementar duplamente dividida: dupla divisão nas complementares.
o Harmonia tripla ou tríade: usa três cores igualmente espaçadas no disco de cores
Segundo diversos estudos, as cores exercem um papel fundamental no design

de sistemas. Pequenas mudanças de cor podem fazer uma grande diferença. As cores
podem ser definidas conforme a temperatura. As cores quentes têm a propriedade
de serem revigorantes e ativas, mas se usadas de forma demasiado dominante ou
distribuídas de forma pouco harmoniosa, também podem criar inquietação.
Por outro lado, as cores frias têm um efeito calmante e sério. É interessante
saber a influência das cores no cérebro. O amarelo é a cor que o olho humano percebe
primeiro. O vermelho atrai a atenção. A cor laranja transmite inspiração e confiança.
O verde está no meio do espectro de cores e é, portanto, a cor mais equilibrada. Azul
71
significa relaxamento, tranquilidade, calma, liberdade, profundidade, lealdade e saudade.
O preto é nobre, moderno e funcional, e o branco reflete pureza, inocência e perfeição.
A seguir, serão explicados os padrões de criação de layout, ferramenta essencial

para o design de web e dispositivos móveis.
2.1.1 Padrões de criação de layout de dispositivos móveis

Existem, também, padrões de interface especificamente para os dispositivos
móveis. Esses padrões são:
• Posicionar o call-to-action, ou CTA, que significa qualquer chamada – visual

ou textual – que leva o usuário de uma página a realizar alguma ação, na
frente e no centro, para que as pessoas o vejam facilmente.
• Deixar os menus curtos e claros.
• Simplificar a navegação do site usando seu logotipo como um link para a página inicial.
• Não deixar que as promoções poluam a página inicial ou interfiram na navegação.

• Deixar a pesquisa no site visível em todas as páginas.
72
• Tornar as pesquisas no site relevantes para que os usuários encontrem as
informações que procuram.
• Incluir filtros de pesquisa para proporcionar resultados precisos aos usuários.
• Facilitar o processo. Preencher os campos com os dados dos usuários já registrados.
• Usar botões “clique para ligar”, para que o usuário entre em contato com um
operador, caso precise de ajuda.
73
• Fornecer um teclado numérico quando os usuários precisarem preencher números.
• Escolher as maneiras mais fáceis para os usuários inserirem informações:

listas suspensas, caixas de marcação etc.
• Fornecer um calendário visual para facilitar as reservas e o planejamento.
74
• Oferecer instruções claras e usar a validação em tempo real para reduzir erros,
informando aos usuários quando eles tiverem inserido uma informação incorreta.
• O formato dos formulários é importante. A chave é mantê-los curtos e fáceis de ler.
• Desenvolver o website de forma que todas as páginas sejam otimizadas para

dispositivos móveis.
• As imagens e o layout devem estar sempre legíveis.
• Incluir closes de alta qualidade das imagens principais, como fotos do produto.
• Informar aos usuários se é melhor visualizar seu website no modo retrato ou

paisagem.
• Manter os usuários em uma única página do navegador.
75
• Usar indicadores de visualização para dispositivos móveis ou desktop.
• Permitir aos usuários localizar lojas ou produtos “próximos a mim”.
Os padrões fornecem soluções para desafios comuns de design. Os padrões

auxiliam o desenvolvimento, pois são formas já estabelecidas no mercado, além de não
sobrecarregarem o designer com interfaces prontas e estabelecidas no mercado.
A seguir, serão demonstradas as camadas de interface, que compreende a

comunicação entre os diversos sistemas e módulos do aplicativo.
3 CAMADAS DE INTERFACE
Interface é entendida como a camada de comunicação entre dois sistemas ou grupos.
Uma pessoa e uma ferramenta, por exemplo. Na maior parte dos casos, interface é a algo que
alguém vê e manipula com o mouse ou tocando na tela (no caso de dispositivos touch).
INTERESSANTE
Os jornais tradicionais em papel estão sendo substituídos pelos jornais
on-line. Diversos sites estão sendo desenvolvidos para que os usuários
possam ter acesso às notícias, além dos jornais tradicionais, também em
ambiente virtual. Você sabia que têm sido desenvolvidas pesquisas de
usabilidade utilizando a avaliação heurística para sites de jornais virtuais?
Saiba mais lendo o artigo escrito por Rosa e Veras (2013): https://brapci.inf.
br/index.php/res/v/38862.
76
A interface é importante, pois é a tradução, realização e “esperança” do usuário
realizar a sua tarefa\objetivo de maneira eficiente. As ideias de designs da interface do
usuário sempre desempenham um papel fundamental para ajudar os designers a criar
um excelente design para aplicativos móveis.
O design de interfaces para quaisquer dispositivos, especialmente os móveis,

deve ser simples, de fácil navegação e com tarefas realizadas em poucos passos. No
entanto, antes de tudo, é necessário realizar uma análise bastante assertiva da interface.
É preciso estabelecer requisitos e necessidades para estruturar o

design [interface] de dispositivo móvel, é importante antes de mais
considerações identificar quais serão os utilizadores e quais as
funcionalidades desejam que este dispositivo móvel possua, a partir
deste ponto estabelecer e definir a interface (SANTOS, 2013, p. 53).
Portanto, do ponto de vista do usuário, a interface é uma das partes mais

importantes dos sistemas computacionais, porque por meio dela o usuário vê, ouve, sente
e realiza toda as ações necessárias para atingir o objetivo ao qual o aplicativo se propõe.
INTERESSANTE
Alan Turing foi o "pai" dos computadores, o primeiro informático. Em
um artigo publicado em 1936, teorizou que uma máquina muito simples
seria capaz de resolver qualquer problema matemático, desde que ele
pudesse ser representado sob a forma de um algoritmo. Leia mais em
Cassol, Lopes e Riva (2010): https://bit.ly/3K8seTy.
A seguir, serão apresentadas e analisadas as técnicas de análise de interface.

Esse tópico é extremamente significativo no trabalho de desenvolvimento de uma
interface digital, visto que a análise da interface é uma das principais etapas do
desenvolvimento de uma interface.
3.1 TÉCNICAS DE ANÁLISE DA INTERFACE

As análises de interface têm tido grande interesse para os vários pesquisadores,
expandindo-se por diversos campos. Como citado por Santana e outros (2016, p. 84):
A relação entre humanidade e informação foi profundamente

alterada, não só pelo surgimento da Internet, mas pelo contexto
SMAC (Social, Mobile, Analytice Cloud), proporcionado pela tecnologia
contemporânea que permite aos usuários livre e ilimitado acesso à
informação, independente de lugar (onde), de tempo (quando) e do
dispositivo utilizado(como).
77
As técnicas de análise de interface irão variar consideravelmente do objetivo
da análise, do objeto a ser analisado e dos mecanismos de análise. Existem diversas
técnicas de avaliação de interface, que podem ser classificadas de várias maneiras:
• Observação dos usuários: envolve ver e ouvir os usuários.

• Metas, questões e paradigmas: proporcionam o foco da observação, por exemplo
identificar ou confirmar os objetivos da usabilidade.
• Observação: ferramentas básicas de coletas de dados (observação direta, anotações,
vídeos etc.), e em laboratório.
• Identificação de tendências ou padrões nas respostas.
As técnicas de avaliação da interface de interfaces visam verificar se elas

atendem aos requisitos do usuário, de forma que as funcionalidades do sistema sejam
realizadas de modo efetivo, eficiente e que satisfaça as expectativas do usuário.
De forma geral, as avaliações da usabilidade de diferentes versões de interfaces

devem ser realizadas no decorrer do processo, como forma de minimizar erros e reduzir
custos de produção do sistema. Conforme posto por Koizume e Castro (2018, p. 8):
A interface é a parte do sistema com a qual o usuário interage

fornecendo os dados de entrada, através da dimensão física (teclado,
mouse, etc.) e recebendo os resultados de suas ações (dimensões
perceptivas), que são interpretados por ele para definir suas próximas
ações (dimensão conceitual, resultado da interação do usuário com
o computador), assim, a interface em outras palavras é o meio
de comunicação entre o usuário a máquina, e esse processo de
comunicação entre usuário e máquina é denominado
Por fim, é fundamental compreender as técnicas, fundamentos e padrões de

interface, ainda que seja para dispositivos móveis ou sistemas web, pois ele é, além da
porta de entrada, o “cartão de visita” do aplicativo ou sistema.
78
RESUMO DO TÓPICO 2
• Foi possível compreender o que é ergonomia e a sua relação com o design de

interfaces gráficas.
• Foram estudados, também, como os sistemas devem estar preparados para servir
para todos os grupos de usuários e as suas características e limitações.
• Compreendemos que a ergonomia está estreitamente associada ao design e à

criação da interface.
• Além disso, os aplicativos sistemas devem ser desenvolvidos para todos os usuários,
adaptando-se as suas limitações, sejam físicas ou cognitivas. Temos como exemplo
os idosos, deficientes visuais e pessoas com limitações de mobilidade.
• O designer deve estar ligado às variáveis e às dimensões que estarão ligadas ao

design e aplicativo que está sendo desenvolvido.
79
AUTOATIVIDADE
1 A avaliação de usabilidade de um sistema de informação consiste em mensurar o
nível de esforço que o usuário emprega na utilização de um sistema. Os sistemas
devem ser fáceis de usar, intuitivos, eficientes na recuperação da informação, rápidos
e confiáveis. Esses são os critérios mínimos que os usuários esperam de um sistema.
São considerados tempo de resposta, abrangência e funcionalidade, consistência,
corretude, continuidade, entre outros critérios. É fundamental que o cientista da
computação tenha pleno conhecimento dos mais diversos métodos de avaliação,
para que sejam desenvolvidos sistemas com alto grau de qualidade. Sobre os critérios
de usabilidade de um sistema de informação, analise as sentenças a seguir:
I- O percurso cognitivo serve para orientar os avaliadores a encontrarem os problemas

de usabilidade durante o processo de design.
II- A abrangência tem a função de verificar se o sistema executa todas as rotinas para
o completo funcionamento.
III- A avaliação heurística tem como objetivo avaliar o quanto é fácil para o usuário
aprender a usar o sistema.
IV- A tempestividade considera a rapidez que a informação é liberada e integra o
conjunto de métricas da funcionalidade.
a) ( ) As sentenças II e IV estão corretas.

b) ( ) As sentenças I, II e III estão corretas.
d) ( ) Somente a sentença I está correta.
2 Em uma avaliação de usabilidade de um sistema, a recepção da comunicação é avaliada

pela qualidade da metacomunicação. Nesse método de avaliação, denominada de
avaliação de comunicabilidade, são convidados usuários para executarem tarefas em
um ambiente controlado por meio de câmeras de vídeo, questionários e avaliadores
que observam e registram todas as atividades realizadas, pesquisas efetuadas,
momentos em que os usuários não obtiveram sucesso, caminhos utilizados para
as pesquisas no sistema e demais atividades inerentes à avaliação de usabilidade.
Quanto à avaliação de comunicabilidade, assinale a alternativa CORRETA:
a) ( ) As tarefas de definir as funções que serão executadas pelos usuários, definir o

perfil do usuário e preparar o material para observar e registrar o uso do sistema
fazem parte da atividade de consolidação dos resultados.
80
b) ( ) São utilizadas etiquetas – tags – onde o avaliador analisa o comportamento do
usuário, focando nas suas falhas. Em seguida, são etiquetadas no vídeo com
expressões que identificam o problema a ser analisado.
c ( ) Faz parte do processo de avaliação pelo método de comunicabilidade analisar o
aprendizado do usuário. Isso se dá pelo fato de os usuários serem filmados, sendo
analisado o seu comportamento na busca da informação.
d) ( ) Existe uma tarefa fundamental do método de avaliação de comunicabilidade que
é inspecionar os signos estáticos, dinâmicos e metalinguísticos. Essa tarefa faz
parte da atividade de interpretação.
3 Os princípios e padrões de design de interação são aplicados durante o processo de

desenho da interface, ajudando os designers a traduzir os requisitos definidos para
o produto em estruturas e comportamentos na interface. Os princípios de design
de interação são guidelines ou regras, tipicamente baseadas em um conjunto de
valores e crenças que os designers possuem. Com relação aos padrões de interface,
( ) Devem-se deixar os menus curtos e claros em todas as opções do aplicativo.

( ) As pesquisas devem ficar visíveis somente na primeira página do aplicativo.
( ) O preenchimento deve possibilitar ser autopreenchido pelo usuário.
a) ( ) V – F – F.
b) ( ) F – F – F.
c) ( ) F – F – V.
d) ( ) V – F – V.
4 As técnicas de análise de interface vêm trabalhando a estruturação da informação

e a aplicação de princípios da usabilidade nas etapas iniciais de desenvolvimento
das interfaces, podendo proporcionar uma melhor utilização futura do sistema pelos
usuários. Disserte sobre as técnicas de análise de interface.
5 Interface é o nome dado a toda a porção de um sistema com a qual um usuário

mantém contato ao utilizá-lo, tanto ativa quanto passivamente. A interface engloba
tanto software, quanto hardware (dispositivos de entrada e saída, tais como: teclados,
mouse, tablets, monitores, impressoras etc.). Nesse sentido, disserte sobre as técnicas
de análise de interface.
81
82
UI – USER INTERFACE
1 INTRODUÇÃO
Na análise do contexto do UX/UI, o conceito de persona é central e fundamental.
Compreender a Persona significa identificar o verdadeiro usuário de um determinado
produto ou serviço, e, ao identificar a persona, o UX/UI designer consegue desenvolver uma
solução mais correta e que satisfaça de forma mais assertiva às necessidades dos clientes.
Pode-se considerar, então, que a persona é como uma pessoa real, com
aspirações, gostos, necessidades e problemas reais. Antes de analisar melhor sobre
personas, é importante diferenciar persona de público-alvo.
O público-alvo é um grupo de pessoas que compartilham características

semelhantes, como comportamentos e classe social. Por outro lado, persona é
representada por um cliente ideal fictício com uma definição específica de características.
É formada a partir de uma pesquisa de comportamento e características reais de seus
clientes com informações elaboradas.
O UI, ou User Interface, é um termo comumente utilizado para explicar como serão
feitas as interações entre pessoas e softwares ou aplicativos. As melhores práticas de UI
envolvem a pesquisa com os usuários. É importante recolher o feedback dos clientes para
o desenvolvimento de uma interface que atenda às necessidades que eles têm, que seja
realmente útil e que traga resultados para a empresa. É preciso estar empenhado em
saber o que os usuários esperam da aplicação. Esse objetivo envolve pesquisas iterativas
e testes de usabilidade, em que os clientes podem interagir com a página, oferecendo
seu feedback. Isso gera um processo de melhoria contínua até se chegar no produto, que
também pode receber alterações, conforme o feedback dos usuários ao longo do tempo.
2 TERMINOLOGIA UI
Para o UX designer, a persona é uma ferramenta que auxilia a entender mais
profundamente sua audiência e, com isso, criar soluções centradas nos usuários do
projeto. Não basta apenas ter diversos dados sobre o público-alvo, é preciso segmentá-
los, agrupá-los e humanizá-los, para identificar quem realmente é sua persona. Devem-
se seguir os princípios elencados a seguir:
• Ter sempre em mente para quem está projetando.

• Tomar decisões de acordo com o perfil da persona.
• Ter um objetivo e foco em comum.
83
• Criar uma persona para seu projeto e da equipe, referências pessoais específicas.
Isso faz com que o time se direcione a partir de dados reais, e não de presunções
pessoais de cada um.
O seu principal objetivo da persona é criar representações confiáveis de seus

principais segmentos, para referências e desenvolvimentos futuros. Deve-se juntar um grande
público em um só personagem, ajudando as empresas a lançarem produtos ou serviços
mais personalizados. É necessário entender melhor a pessoa que utiliza suas soluções e se a
empresa consegue atingir nichos específicos dentro de um grande e competitivo mercado.
Como a persona representa grandes grupos de usuários de forma específica, é

essencial que o profissional consiga definir de maneira alinhada aos objetivos do projeto.
Para fazer isso, o UX/UI designer precisa realizar diversas pesquisas, em especial as
qualitativas, que são essenciais para captar reações sinceras com potenciais usuários.
2.1 DESIGN DE INTERAÇÃO

Nos últimos anos, os times de UX design passaram a incorporar protótipos em
seu fluxo de trabalho com muito mais frequência. Apesar de os wireframes estáticos
continuarem firmes e fortes, os protótipos surgem para responder algumas necessidades
que se tornaram essenciais no dia a dia do designer de interação.
Sejam eles criados diretamente em HTML+CSS+JS ou por uma ferramenta

de prototipagem (Axure, Invision, Balsamiq, entre outras), os objetivos da criação de
protótipos funcionais continuam os mesmos: representar links entre telas, detalhar
as interações entre um estado e outro do sistema, ser mais fiel na representação da
interface e facilitar os testes com usuários.
Sketches, wireframes e protótipos são todos membros de uma mesma família.

Enquanto o sketch, ou “rabiscoframe”, representa a interface com baixa fidelidade, os
protótipos moram na outra extremidade do espectro e representam interfaces de forma
muito mais próxima do produto. Qual critério usar para decidir entre um e outro? Na
verdade, é no plural: critérios.
Segundo o artigo do Teixeira (2018), existem vários aspectos que devem ser
levados em conta ao se elaborar um design de interação, sem que haja uma ainda
unanimidade sobre o assunto.
Mais importante do que tentar dizer se protótipos interativos são melhores ou

piores do que wireframes estáticos, o objetivo é clarear e relembrar pontos que podem
passar batidos na hora de fazer essa escolha. Parar um momento antes de o projeto
iniciar para tomar essa decisão é muito melhor do que simplesmente sair fazendo um
ou outro e depois se arrepender no meio do caminho.
84
Por fim, criar uma interface bonita é importante, mas o trabalho não se limita
somente a isso, já que a usabilidade deve estar em primeiro lugar, ou seja, é preciso
pensar na boa experiência do usuário, no quanto tudo que está sendo pensado será útil
e o estético virá como uma consequência.
2.2 DESIGN VISUAL

Um aspecto para levar em conta é o momento em que o projeto se encontra.
O primeiro momento é o de geração de conceitos: se o time deseja criar várias versões
diferentes de uma mesma ideia para testar qual funciona melhor; wireframes de baixa
fidelidade podem garantir mais rapidez e “desapego” à solução criada.
Os aplicativos móveis, que incluem calendários, navegadores e mapas

interativos, fazem parte da vida da maioria das pessoas hoje em dia. A maioria dos
aplicativos móveis é de usuário único; e eles não permitem a colaboração síncrona
entre os usuários. A colaboração móvel permite que vários usuários em diversos locais
combinem sinergicamente suas contribuições de maneira conveniente.
Outro momento de validação de conceito é se o time já optou por um caminho

criativo e agora deseja testar a fundo se ele funciona, protótipos de alta fidelidade
tendem a ser mais efetivos na hora de validar com usuários reais.
Por fim, o momento de produção: se o produto já está sendo desenvolvido,

a decisão fica, na maior parte das vezes, a critério do time de programadores. Qual o
melhor jeito, para eles, de receber a documentação? Alta ou baixa fidelidade? Em alguns
casos, eles nem mesmo precisam “receber” o material; pois a dupla de UX designer e
desenvolvedor podem resolver o trabalho com muito menos burocracia.
Quando o produto que está sendo criado depende fortemente de uma interação
específica (exemplo: arrastar o bonequinho do Google Maps sobre uma rua para ativar o Street
View), talvez o melhor jeito de saber se essa interação funciona seja criando um protótipo
funcional. Quando você tenta documentar esse mesmo tipo de interação através de wireframes
estáticos, é preciso detalhar muito mais o que acontece em cada um dos passos (seja através
de uma descrição em texto, seja quebrando o desenho da interação em vários quadros).
Leve em conta, também, se o design é responsivo ou não. Dependendo da sua

escolha de ferramenta, serão necessárias horas a mais ou a menos para representar
como a interface se adapta para diferentes resoluções de tela.
85
RESUMO DO TÓPICO 3
• Na análise do contexto do UX/UI, o conceito de persona é central e fundamental.
• O UI, ou User Interface, é um termo comumente utilizado para explicar como serão
feitas as interações entre pessoas e softwares ou aplicativos.
• Não basta apenas ter diversos dados sobre o público-alvo, é preciso segmentá-los,
agrupá-los e humanizá-los, para identificar quem realmente é sua persona.
• Apesar de os wireframes estáticos continuarem firmes e fortes, os protótipos

surgem para responder algumas necessidades que se tornaram essenciais no dia a
dia do designer de interação.
• Criar uma interface bonita é importante, mas o trabalho não se limita somente a
isso, já que a usabilidade deve estar em primeiro lugar.
• Se o produto já está sendo desenvolvido, a decisão fica, na maior parte das vezes, a
critério do time de programadores.
86
AUTOATIVIDADE
1 A análise de contexto por meio da User Interface considera diversos conceitos
pertinentes a essa área. É muito importante que o profissional de design de interfaces
tenha um bom conhecimento desse conceito, a fim de aplicar no uso da UI. Acerca do
conceito de Persona, assinale a alternativa INCORRETA:
a) ( ) Persona quer dizer que deve ser identificado o responsável principal pelo desenho
de uma interface.
b) ( ) Persona significa que toda a corporação deve ter conhecimento de quem deve
assumir os erros do sistema em desenvolvimento.
c) ( ) Persona compreende todos os usuários de todos os sistemas da corporação,
independentemente da posição hierárquica.
d) ( ) Persona significa identificar o verdadeiro usuário de um determinado produto ou serviço.
2 O User Interface – ou interface do usuário – é tudo aquilo que é perceptível visualmente

em alguma plataforma e leva o usuário a uma interação positiva, com o sistema
proporcionando uma experiência agradável ao usar a plataforma. Com relação às
melhores práticas de User Interface, analise as sentenças a seguir:
I- As melhores práticas de UI envolvem a pesquisa com os usuários.

II- As melhores práticas de UI envolvem conhecer a estrutura hierárquica.
III- As melhores práticas de UI pesquisa somente com os gerentes de projetos.

3 Personas são uma importante ferramenta do design de interação, que podem ser
criadas a partir de pesquisas apropriadas e permitem o entendimento de como as
pessoas se comportam, quais são as suas frustrações, seus desejos e como utilizam
os produtos e serviços estudados. Sobre identificar os personas de um sistema,
( ) Ter sempre em mente para quem está projetando.

( ) Ter um objetivo e foco em comum da persona
( ) Tomar decisões de acordo com o perfil oposto da persona.
87
a) ( ) V – F – F
b) ( ) F – F – F
c) ( ) V – V – F.
d) ( ) F – F – V
4 O design de interação é a parte da TI que estuda, planeja e aplica pontos de

interatividade em sistemas digitais e físicos, também conhecido como interaction
design, ou IxD design, este visa otimizar a relação entre o usuário e o produto. Existem
necessidades que se tornaram essenciais no dia a dia do designer de interação.
Disserte sobre as necessidades essenciais do designer de interação.
5 O design visual ou visual design é um ramo do design que se debruça ao estudo da

comunicação visual. Para tanto, um bom profissional da área precisará ter expertise
no manuseio dos softwares gráficos. Disserte sobre os princípios de design visual.
88
UX – USER EXPERIENCE
1 INTRODUÇÃO
UX é a abreviação do termo User Experience e se refere à experiência do usuário.
O UX design, ou User Experience Design, é essencialmente sobre como o usuário se
sente ao realizar uma determinada tarefa em um contexto físico ou digital.
O que a experiência do usuário faz é reduzir atritos para que o usuário atinja
um determinado objetivo da forma mais simplificada possível, gerando um sentimento
positivo durante esse processo. Para isso, a disciplina considera aspectos como
usabilidade, percepção de valor, eficiência na execução de tarefas, entre outras variáveis.
LEMBRETE
Existem estudos sobre o percurso cognitivo que é específico para determinados tipos de
sistema. A navegação em hipertextos tem sido objeto de estudos por parte
de vários pesquisadores interessados em analisar como são processados
os estados cognitivos em busca da informação em hipertextos. Será que o
processo de busca, análise e avaliação em hipertextos se diferenciam dos
textos tradicionais? As ferramentas de navegação em hipertextos, quando
desenvolvidos pelos cientistas da computação, consideram os processos
cognitivos dos seus usuários? Para saber mais, leia o artigo publicado por
Lima (2004): https://bit.ly/3IJcia4.
A experiência do usuário, no entanto, vai além de fornecer aos clientes apenas

aquilo que os usuários querem. UX é sobre construir a experiência mais fluida durante a
jornada de interação do usuário final com produtos e serviços de uma empresa.
UX é uma visão de negócio, uma convicção. Assim, podemos definir a experiência

do usuário como a busca pela máxima sinergia em todos os pontos de contato de uma
empresa, de forma a colaborar para os objetivos do negócio.
2 TERMINOLOGIA UX
Na abordagem de design centrado no usuário, a pesquisa do usuário é parte
fundamental para se chegar a um produto que possa levar a uma boa experiência de
uso. A partir de uma pesquisa com usuários é que se torna possível descobrir quais são
89
as suas reais necessidades e comportamentos. Entretanto, essa pesquisa deve ser feita
de modo organizado e estruturado, para que consigamos obter informações relevantes
e que possam ser traduzidas em insumos para o projeto.
FIGURA 4 – USUÁRIO É FIGURA CENTRAL EM TODAS AS ETAPAS DO DESENVOLVIMENTO DE UM SISTEMA
FONTE:https://bit.ly/3HCUzjd . Acesso em: 2 fev. 2022.
Basicamente, nós, como designers, projetamos produtos para a solução de

algum problema, certo? Então, a pesquisa do usuário entra justamente nessa questão,
pois ela nos ajuda a entender qual é o problema real, quem são os usuários de verdade,
quais são as necessidades deles, quais são suas dificuldades e expectativas, além de
outros aspectos. Com todas essas informações, conseguimos criar soluções e produtos
que irão realmente solucionar o problema do nosso público-alvo.
Entretanto, não adianta perguntar para o usuário o que ele quer, porque muitas vezes
ele nem vai conseguir dizer – é aquela famosa frase de Steve Jobs: “As pessoas não sabem o
que querem, até mostrarmos a elas”. É preciso entender quais são suas necessidades e como
ele faz para alcançar seus objetivos, e quais são os meios que ele busca para alcançá-los.
Quando se trabalha com muito conteúdo informacional, não só as questões de

apresentação da informação e organização precisam ser trabalhadas; que conteúdo será
exposto e qual é o seu papel nos diversos momentos de interação é parte estratégica do
produto na experiência do usuário. Diversos fatores como linguagem, tipo de mensagem,
tom e voz são extremamente importantes para que a experiência seja consistente e única.
2.1 PESQUISA COM O USUÁRIO

A UX Research é, na prática, uma maneira de testar todas as suposições e
validar a construção de aplicativos, produtos e serviços na perspectiva do cliente-final.
O objetivo é entender tudo, ou quase tudo, sobre essas pessoas e como elas realmente
vão se beneficiar com a solução que está em desenvolvimento. Para isso, a pesquisa de
UX Research é elaborada em duas etapas:
90
• Realização da coleta de dados.
• Análise dos dados obtidos para compreender a usabilidade.
A primeira parte da pesquisa consiste em saber qual a necessidade do cliente

com a realização de entrevistas, observação do comportamento de potenciais clientes
e transformação desses dados em ideias e insights para os projetos.
A segunda etapa da UX Research é executada enquanto o produto está sendo

desenvolvido, para aprimoramento, principalmente com testes de usabilidade, a fim de
obter percepções e possíveis alterações que melhorem a experiência do usuário.
• Pesquisa quantitativa: o objetivo é identificar números e dados mensuráveis,

como porcentagem de usuários que consegue usar um produto, quantos cliques
foram realizados em determinados botões, entre outros dados.
• Pesquisa qualitativa: a intenção é compreender a ação do usuário, por que ele clicou
em determinado botão, quais motivos levam a executar uma ação, quais foram as
principais interações em uma página, entre outros comportamentos e seus motivos.
• Pesquisa de dimensão atitudinal e comportamental para UX Research: essa
metodologia de UX Research é aplicada para confrontar o que as pessoas falam
com o que elas realmente fazem. É o discurso versus a ação, sendo que a pesquisa
atitudinal é voltada para as crenças do usuário.
• Pesquisa de contexto de uso para UX Research: o contexto para UX Research
precisa identificar duas informações importantes sobre o produto: se o material
está sendo usado e como ele é útil para as pessoas. Na pesquisa de contexto, os
próprios usuários podem ser estimulados a realizarem alterações no produto, com a
finalidade de melhorar a experiência e atender as suas necessidades.
A UX Research é elaborada junto com o desenvolvimento de um produto. A

preparação da pesquisa acontece logo na etapa da estratégia, a fase inicial do produto,
quando os designers precisam de novas ideias e estão abertos a muitas possibilidades.
Nesse caso, os dados podem ser coletados em uma pesquisa de campo ou em

entrevistas on-line, por exemplo. A pesquisa também pode ser feita com análise de
dados on-line.
As pesquisas da etapa de execução são realizadas para melhoramento contínuo

do produto, para redução de riscos, alterações de formatos, entre outras tarefas. Nesse
caso, os testes de UX Research são realizados com protótipos, e-mails de clientes,
estudos de campo, classificações e segmentações, design participativo com os usuários
e experiências de usabilidade.
Na fase de avaliação, a UX Research é voltada para entender o desempenho do

produto, com o objetivo de fazer comparações com os concorrentes, em busca de melhorias.
91
Os métodos podem ser de avaliação on-line, pesquisas, testes A/B e
benchmarking de usabilidade. Nessa fase, é essencial ter em mente: quem é a sua
persona? E o problema que você precisa solucionar para ela.
No início do trabalho de design, é necessário ter em mente quais dados serão

importantes para o desenvolvimento do produto. Então, basta escolher o método de UX
Research para iniciar as pesquisas.
Veja alguns métodos bem eficientes, de maneira resumida:
• Feedback do cliente: os clientes entregam dados preciosos em formulários, e-mail

com opinião sobre produtos, através do uso de amostras do produto ou em testes
de comportamento quando usam botões ou links de produtos digitais.
• Eyetracking: método de pesquisa para saber para onde os usuários estão olhando
quando estão usando um produto, como aplicativos e sites. Também pode ser usado
em interações com ambientes ou produtos físicos.
• Grupos Focais: participantes são reunidos para discutir sobre o produto, realizar
exercícios e oferecer um feedback no momento de uso.
• Pesquisas de interceptação: o usuário é convidado a participar de uma pesquisa
no momento de uso, sendo interceptado pelo designer.
• Análise de fluxo de cliques: a pesquisa é feita através dos cliques dos usuários,
com registros de páginas e telas, visualizações, utilizando um software específico
para a coleta de dados.
• Estudos de desejabilidade: os usuários recebem várias versões de design visual
e entregam ao designer informações sobre os principais atributos dos modelos
apresentados, tanto em pesquisas quantitativas como qualitativas.
• Classificações de cartões: os usuários são convidados a classificar ou a criar
categorias para os produtos em testes de usabilidade ou em entrevistas. Assim,
o designer pode compreender melhor as relações entre os conteúdos e criar
hierarquias para os produtos digitais.
2.2 ESTRATÉGIAS DE CONTEÚDO

A estratégia UX é o processo que deve ser iniciado primeiro, antes do início do
projeto ou desenvolvimento de um produto digital. É a visão de uma solução que precisa
ser validada com clientes potenciais reais para provar que é desejada no mercado.
Embora o UX design englobe muitos detalhes, como design visual, mensagens

de conteúdo e o quão fáceis são para um usuário realizar uma tarefa, a estratégia de UX
é a grande questão. É onde você pode alcançar um ou mais objetivos de negócios em
condições de incerteza.
92
Para diferenciar a estratégia de UX e o UX design, podemos dizer que o UX
design está preocupado com a usabilidade, o conteúdo e o design de interação,
enquanto a estratégia de UX se preocupa com o todo, ou seja, a direção do produto
e os objetivos comerciais.
Criar uma ótima estratégia de UX requer muita pesquisa, ou seja, isso pode ser cansativo.
É necessário se comunicar com vários grupos diferentes, para obter uma compreensão completa
do que as pessoas que visitam seu site ou usam seu aplicativo desejam e esperam. Uma vez
que você tem uma boa ideia do que os usuários desejam e precisam do seu site ou aplicativo,
você pode começar a esboçar o design. Fazer os primeiros sketches.
O designer ou a equipe de design fará uma série de brainstorming antes de

desenvolver wireframes ou protótipos. Mapeie bem o caminho da experiência do usuário
através do design. Como e o que cada usuário deve fazer enquanto navega no site ou
usa o aplicativo? Defina métricas para medir esses resultados. Isso é importante. Testes
de usabilidade e lançamentos beta podem ser alguns dos dias mais perturbadores da
vida profissional de um designer. Será que os usuários vão fazer da forma que você
espera? As pessoas vão visitar o site? Será que vai ser um fracasso ou um sucesso?
Por fim, a User Experience (UX) é a forma como as pessoas interagem com
um produto ou serviço, seja no ambiente on-line, seja no mundo físico, englobando
as relações de toda a estrutura empresarial. O UX deve seguir métodos e práticas já
consolidadas no mercado de desenvolvimento de sistemas, no caso de desenvolvimento
de interfaces para todos os ambientes digitais, realizando os testes necessários para
compreender a real demanda do usuário.
DICA
A maneira como uma pessoa se sente sobre o uso de um produto, sistema
ou serviço resulta em percepções do usuário sobre os aspectos práticos,
tais como utilidade, facilidade de uso e eficiência do sistema. Leia o TCC
"Ux-design introduzido no desenvolvimento de interface gráfica" de A. P.
C. Pinheiro (2016) , disponível em: https://bit.ly/3Ke5n9n.
93
LEITURA
COMPLEMENTAR
INTERFACE DE APLICATIVOS MÓVEIS: DESIGN DE TELAS COM FOCO EM PÚBLICO
ESTUDANTIL JOVEM
Cibele Koizume Ascoli de Oliva Maya

Adriane Belluci Belório de Castro
[...]
A interface é a parte do sistema com a qual o usuário interage fornecendo os
dados de entrada, através da dimensão física (teclado, mouse etc.) e recebendo os
resultados de suas ações (dimensões perceptivas), que são interpretados por ele para
definir suas próximas ações (dimensão conceitual, resultado da interação do usuário
com o computador). Assim, em outras palavras, a interface é o meio de comunicação
entre o usuário a máquina, e esse processo de comunicação entre usuário e máquina
é denominado “Interação”. Nesse cenário, durante a criação do produto, se encontra o
UI Design (User Interface Design), que se refere ao projeto da interface de usuário, e o
“UX” (User Experience), que se refere ao design de experiência do usuário, elementos
cruciais para a elaboração de uma interface, que funcionam juntos. (LAMPRECHT,
2017). Em outras palavras, o UI Design é o meio pelo qual o usuário interage e controla
o dispositivo, podendo ser através de toques, botões, menus ou qualquer elemento
que forneça interação entre o usuário e o dispositivo, de maneira mais específica é
o desenho do da parte visual do produto, bem como dos elementos que forneçam a
interação; e o UX, seria a parte que foca na experiência do usuário, como ele se sente
ao utilizar o produto, o que ele pensa sobre o produto. Ainda de acordo com Lamprecht
(2017), visando facilitar o processo de criação e destacar as necessidades do usuário, as
interfaces atualmente são projetadas baseadas nesses dois conceitos de design com
o intuito de fornecer uma interação humano-computador o mais “amigável possível”,
ou seja, de forma com a qual o usuário se sinta mais confortável e encorajado a utilizar.
Sendo assim, a facilidade de uso e navegabilidade do software são aspectos que não
podem ser ignorados na criação da interface, se o objetivo é garantir uma alta qualidade
de uso do seu software. O conceito geral da qualidade de uso de um software está
estreitamente relacionado com a capacidade e facilidade dos usuários atingirem suas
metas com eficiência e satisfação. Dessa forma, a qualidade de uso do software está
amplamente ligada ao conceito de Usabilidade de um software.
A tecnologia mobile destaca-se entre as outras mídias interativas, pois além

de promover um rápido acesso a informações, e outros meios ainda possuem os
quesitos “portabilidade” e “mobilidade” que atualmente são termos que estão em alta
na Tecnologia de Informação (TI). A popularização desses dispositivos móveis se dá pelo
94
fato dessa tecnologia fornecer um acesso rápido e fácil a informações de todo o mundo,
de qualquer lugar, a qualquer momento, e como bônus, disponibilizando e fornecendo,
outras funcionalidades, como meios de comunicação e serviços personalizados, bem
como a capacidade de se mover utilizando essa tecnologia, algo que não é possível com
os clássicos computadores de mesa. Devido a esse grande acesso a uma rede infinita
de informações, junto a mobilidade proporcionada, os dispositivos móveis foram muito
bem-sucedidos em atrair diversos públicos-alvo, mas principalmente a geração mais
nova, que já nasceu em um mundo onde o conceito de tecnologia já estava bastante
difundido. Sendo assim, a visão de jovens, adultos e até de crianças, possuírem acesso
a uma boa parte dessa tecnologia, já não é um fato que gera estranheza. Mesmo que
os dispositivos móveis se encontrem citados como “vícios” e “prejudiciais” em alguns
casos, o fato de que a tecnologia mobile pode auxiliar de maneira significativa na área
da educação, que é onde se encontra a maioria de seu público-alvo, é inegável.
[...]
FONTE: <http://cietenped.ufscar.br/submissao/index.php/2018/article/download/267/537/>. Acesso em: 2 fev. 2022.
95
RESUMO DO TÓPICO 4
• A importância do User Interface e User eXperience e sua relação com o design para
interfaces digitais.
• Foi analisada como são realizadas as pesquisas com o usuário, e as técnicas e

avaliação de interface e usabilidade.
• Foi possível compreender que o User Experience (UX) é um método da Engenharia

de Usabilidade, que criam sistemas onde os usuários devem ser incluídos no
processo de design por meio de pesquisas com os usuários e testes de usabilidade.
• Foi importante compreender a relação entre design e UX, pois desenvolver aplicativos
utilizando a metodologia UX permite entender o que faz sentido para o usuário.
96
AUTOATIVIDADE
1 Nos últimos anos, os arquitetos de informação foram reciclados no mercado de
trabalho profissional, pois agora querem ser conhecidos como UX designers, designers
de interação e especialistas em usabilidade. Como o UX design é multidisciplinar,
traz para o mercado uma diversidade de profissionais, formados em diversas áreas. A
prática de pesquisa com o usuário é tema fundamental da UX. Acerca do fundamento
de “Pesquisa com Usuário”, assinale a alternativa INCORRETA:
a) ( ) A pesquisa com o usuário é elaborada em duas fases.

b) ( ) Uma das fases da pesquisa com o usuário é a coleta de dados.
c) ( ) Uma das fases da pesquisa é saber das necessidades do cliente.
d) ( ) Não deve haver insights na pesquisa com o usuário.
2 A pesquisa com o usuário engloba diversas pesquisas. Essas pesquisas são divididas
em diversos tipos que devem ser complementados, a fim de encontrarem o melhor
caminho para compreender a real necessidade dos usuários. Sobre os tipos de
pesquisas com o usuário, analise as sentenças a seguir:
I- A pesquisa quantitativa tem o objetivo de identificar números e dados mensuráveis

para elaborar cenários possíveis.
II- A pesquisa de contexto de uso para UX Research identifica duas informações
importantes sobre o comportamento do usuário.
III- A pesquisa atitudinal serve para confrontar o que as pessoas falam com o que elas
realmente fazem.

d) ( ) As sentença I e III estão corretas.
3 A UX Research compreende uma série de métodos para que as pesquisas sejam

iniciadas. É fundamental que o método correto seja escolhido, sendo aquele que
melhor se adapta às necessidades dos clientes e para que a empresa tenha condições
de aplicar determinado método. Sobre os métodos da UX Research, classifique V para
as sentenças verdadeiras e F para as falsas afirmativas:
( ) Eyetracking é o método de pesquisa para saber para onde os usuários estão

olhando quando estão usando um produto.
97
( ) Pesquisas de interceptação é o método de pesquisa onde o usuário é convidado a
participar de uma pesquisa no momento de uso, sendo interceptado pelo designer.
( ) Grupos Focais é o método de pesquisa feita através dos cliques dos usuários, com
registros de páginas, utilizando um software específico para a coleta de dados.
a) ( ) V – F – F.
b) ( ) F – F – F.
c) ( ) V – V – F.
d) ( ) F – F – V.
4 A estratégia UX é o processo que deve ser iniciado primeiro, antes do início do projeto
ou desenvolvimento de um produto digital. É a visão de uma solução que precisa
ser validada com clientes potenciais reais para provar que é desejada no mercado.
Disserte sobre as diferenças existentes entre as estratégias de UX e UX design.
5 De forma geral, as estratégias de conteúdo consideram obter a informação necessária

para desenvolver ações precisas, visando, em um primeiro momento, a qualidade de vida
do consumidor, e, por consequência, a relação com o produto e o relacionamento entre
ele e a sua interface. Disserte sobre as estratégias de conteúdo relacionadas com o UX.
98
REFERÊNCIAS
ABRAHAO, J.et al. Introdução a ergonomia: da prática a teoria. Brasil: Edgard
Blucher, 2009.
BARBOSA, S. D. J.; SILVA, B. S. Interação humano-computador. Rio de Ja-

neiro: Elsevier, 2010.
BENYON, D. Interação humano-computador. 2 ed. São Paulo: Pearson

Prentice, 2011.
BRASIL. ASSOCIAÇÃO BRASILEIRA DE ERGONOMIA. O que é ergonomia. Rio

de Janeiro: ABERGO, 2012. Disponível em: https://www.abergo.org.br/. Acesso
em: 22 set. 2021.
BRASIL. INSTITUTO NACIONAL DE ESTUDOS E PESQUISAS EDUCACIONAIS.

Inep divulga dados inéditos sobre fluxo escolar na educação básica.
2017. Disponível em: https://bit.ly/3KdAHVD . Acesso em: 9 ago. 2021.
BENYON, D. Interação Humano-Computador. 2. ed, São Paulo: Pearson

Prentice Hall, 2011.
BONSIEPE, G. Design do material ao digital. Florianópolis: Lab Bras Design, 1997.
BONSIEPE, G. Design, cultura e sociedade. São Paulo: Blucher, 2011.
BORMIO, M, F; PLÀCIDO, J, C, S; PACCOLA, S, A, O. O papel da ergonomia de informa-

ção (sinalização) no ambiente de trabalho. XIII SIMPEP - Bauru, SP, Brasil, nov., 2006
CHAMMAS, A.; QUARESMA, M.; MONT’ALVÃO, C. Um enfoque ergonômico sobre

a metodologia de design de interfaces digitais para dispositivos móveis. Ar-
cso Design. Rio de Janeiro, v. 7, n. 2, dez., 2013. Disponível em: https://bit.
ly/34a7xHC. Acesso em: 3 fev. 2022.
CSIKSZENTMIHALYI, M. Flow: the psychology of optimal experience. New York:

Harper Perennial, 1990.
FADEL, L. M. et al. Gamificação na educação. São Paulo: Pimenta Cultural, 2014
GORDON, I. Marketing de relacionamento: estratégias, técnicas e tecno-

logias para conquistar clientes e mantê-los para sempre. 4. ed. São Paulo:
Futura, 1998
99
GUÉRIN, F.; et al. Compreender o trabalho para transformá-lo: a prática da
Ergonomia. São Paulo: Edgard Blücher LTDA, 2001.
HMELO-SILVER, C. E.; BARROWS, H. S. Goals and Strategies of a Problembased

Learning Facilitator. Interdisciplinary Journal of Problem-based Learning,
Indiana, v. 1, n. 1, p.1-39, May 2006. Disponível em: https://bit.ly/3IIl6Np. Acesso em: 3
fev. 2022.
IIDA, I. Ergonomia: projeto e produção. São Paulo: Edgard Blücher, São Paulo, 2005.
JOÃO, B. Usabilidade interface homem máquina. São Paulo: Pearson Edu-

cation, 2017.
JOHNSON, S. Cultura da interface: como o computador transforma nossa

maneira de criar e comunicar. Rio de Janeiro: Jorge Zahar Editor. 2011.
KAPP, K. M.; BLAIR, L.; MESCH, R. The gamification of learning and instruc-
tion fieldbook: ideas into practice. United States: Pfeiffer, 2013.
LAMPRECHT, E. CAREER FOUNDRY. The Difference Between UX and UIDesign

A Layman’s Guide. Berlin. c2017. Disponível em: https://bit.ly/3K8GlZ2. Acessa
em: 17 jan. 2022.
LIMA, G. A navegação em sistemas de hipertexto e seus aspectos cognitivos. Revis-

ta Associação Portuguesa de Bibliotecários, arquivistas e documentalistas.
v. 1, n. 1, 2004. Disponível em: https://bit.ly/3MgGPyt. Acessa em: 17 jan. 2022.
LOWDERMILK, T. Design Centrado no Usuário: um guia para o desenvolvi-

mento de aplicativos amigáveis. São Paulo: Novatec, 2013.
MATTOS, T. Vai lá e faz: como empreender na era digital e tirar ideias do papel.
Caxias do Sul: Belas Letras, 2017.
MELO, C, V, A; CURSIO, R, M; SANTOS, V, M, V. Estudo da ergonomia informa-

cional sobre o uso de mapa de riscos e sinalizações voltados as rotas de fuga,
existentes numa planta de processamento. XXVII Encontro Nacional de Enge-
nharia de Produção. Anais [...]. Foz do Iguaçu, PR, Brasil, out., 2007.
NEVES, A. S. O. Aspectos do design gráfico, da usabilidade e da ergono-

mia informacional no ambiente virtual prosimulador: um estudo de caso.
2017. Dissertação (Mestrado) – Universidade Federal de Pernambuco, Centro
de Artes e Comunicação, Pernambuco.
NIELSEN, J.; LORANGER, H. Usabilidade na Web projetando sites com qua-

lidade. Rio de Janeiro: Elsevier, 2007.
100
PASCHOARELLI, L.C. Design e Ergonomia. São Paulo: Unesp, 2009.
PRENSKY, M. Digital game-based learning. United States: Paragon House, 2001.
PRESSMAN, R. S. Engenharia de software. São Paulo: Markron Books, 1995.

ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de interfaces
humano-computador. Campinas: UNICAMP-IC-NIED, 2003.
GRÖNROOS, C. Marketing: gerenciamento e serviços. Rio de Janeiro: Campus, 2009.
ROGERS, Y.; SHARP, H.; PREECE, J. Design de Interação: além da interação

humano-computador. 3. ed. Porto Alegre: Bookman, 2013
SHARP, H., ROGERS, Y., PREECE, J. Design de interação: além da interação

humano-computador. 3 ed. Porto Alegre: Bookman, 2013.
SANTANA, C, A; ALCANTRA, R, A; SIEBRA, S. A, ÁVILA, B. T. Comparando Métodos de

Avaliações de Usabilidade, de Encontrabilidadee Experiência do Usuário. Informa-
ção & Tecnologia (ITEC), Marília/João Pessoa, v.3, n.1, p.83-101, jan./jun., 2016.
SANTOS, J. Interfaces para dispositivos móveis. Dissertação (Mestrado

em Tecnologia da Inteligência e Design Digital). 2013. Pontifícia Universidade
Católica de São Paulo, São Paulo.
SILVA, T. B. P. Um campo epistemológico para o Design. Revista de Design,

Tecnologia e Sociedade. Brasília, v. 2, p. 23-41, set., 2016. Disponível em:
https://bit.ly/3sGfwWA. Acesso em: 3 fev. 2022.
SILVA, M, P, B; SILVA, S, P. Ergonomia informacional: aplicabilidade na biblioteca

universitária. Biblionline, João Pessoa, n. esp., p. 16-22, 2010. Disponível em:
https://brapci.inf.br/index.php/res/download/100761. Acesso em: 22 fev. 2022.
TEIXEIRA, A, S. Ciência da Informação e design de interação: conceitos, refle-

xões e interfaces com profissionais. Ci. Inf, Brasília, DF, v. 43, n. 3, p. 168-188,
set/dez., 2014.
TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do

Código, 2014.
101
102
UNIDADE 3 —
ARQUITETURA E AVALIAÇÃO
DE SISTEMAS PARA WEB E
• analisar como é estruturada a arquitetura da informação na web e dispositivos móveis;
• operacionalizar a inserção de gráficos e imagens nas interfaces dos aplicativos e

sistemas;
• analisar a relação entre mobilidade e os sistemas digitais;
• compreender as técnicas de avaliação de interfaces.
PLANO DE ESTUDOS
TÓPICO 1 – ARQUITETURA DA INFORMAÇÃO NA WEB E DISPOSITIVOS MÓVEIS

TÓPICO 2 – GRÁFICOS E EDIÇÃO DE IMAGENS
TÓPICO 3 – MUNDO DIGITAL, MOBILIDADE E SUAS INOVAÇÕES
TÓPICO 4 – TÉCNICAS DE AVALIAÇÃO E APRIMORAMENTO DE INTERFACE
CHAMADA
103
CONFIRA
A TRILHA DA
UNIDADE 3!
Acesse o
QR Code abaixo:
104
UNIDADE 3 TÓPICO 1 —
ARQUITETURA DA INFORMAÇÃO NA WEB E
1 INTRODUÇÃO
O profissional de design de interfaces web e de dispositivos móveis está inserido
em um universo bem amplo e complexo. Esse é o mundo da ciência da computação. É de
importância fundamental que o profissional de design tenha um bom conhecimento dos
princípios da computação relacionados à arquitetura da informação e de sistemas. Em
todo esse contexto, é importante para o desenvolvimento de interfaces, o domínio de
inserção de gráficos e figuras, como também a avaliação de interfaces e o conhecimento
dos novos movimentos sociais de mobilidade e inovação tecnológica.
Portanto, o objetivo deste capítulo é aprofundar nas perspectivas da arquitetura

da informação, conhecer a estrutura arquitetônica dos aplicativos, seus padrões, as
inserções de elementos gráficos e a avaliação de interfaces. É fundamental para o
profissional de design em ambientes digitais tenha domínio desses temas.
Na esfera do design, também é importante saber como implantar objetos como

gráficos e imagens nas interfaces. A seguir, será apresentado como avaliar a interface e
usabilidade dos sistemas web e de dispositivos móveis, sendo demonstradas as principais
técnicas de avaliação. Por fim, será obtida uma visão da perspectiva atual e futura do design
e da usabilidade no ambiente digital, constituindo, assim, a última fase do desenvolvimento
do design. As perguntas elencadas a seguir serão norteadoras deste capítulo:
• O que é Arquitetura da Informação e de Software?

• Como implantar objetos de gráfico e imagens no design?
• Como aplicar as técnicas de avaliação de design e de usabilidade de sistemas?
• Quais os novos panoramas da evolução do design no ambiente digital?
Esses temas serão amplamente analisados para que o profissional de design

tenha uma base sólida dos fundamentos das interfaces e suas múltiplas facetas. Os
temas postos neste Livro Didático servem como parâmetros para que as interfaces
construídas estejam de acordo com os princípios de usabilidade e operacionalidade dos
sistemas e aplicativos.
105
2 ASPECTOS DA ARQUITETURA DA INFORMAÇÃO NA
WEB E DISPOSITIVOS MÓVEIS
Inicialmente, o que é “arquitetura da informação”? Há diversas definições para
essa pergunta. A fonte original do termo se deve a Richard Saul Wurman (ROBREDO, 2008),
desenhista gráfico e arquiteto. Wurman cunhou, em 1976, o termo em função da eminente
quantidade de informações geradas de forma excessiva e sem nenhum critério. Wurman
percebeu o surgimento de uma sociedade sem controle da absorção das informações,
principalmente das informações qualitativas. Nessa definição, é possível identificar um
viés social da arquitetura da informação e da disseminação da informação. Por outro lado,
os pesquisadores da área de design na web, Ferreira e Reis (2008) definem:
A arquitetura da informação pode ser vista como a responsável

por transformar as ideias e conceitos do planejamento estratégico
na organização da informação, na estrutura sobre o que todas as
demais partes do design de um website – projeto gráfico, redação,
programação etc. – irão apoiar-se (FERREIRA; REIS, 2008, p. 286).
O foco desse conceito de arquitetura da informação se concentra na relação

entre as informações da organização e os sistemas desenvolvidos, especificamente na
web. Esse conceito está intimamente ligado à estruturação das informações disponíveis
no ambiente profissional. Ampliando essa perspectiva, Scheeren (2008), define:
A arquitetura da informação é caracterizada por focar o desenvolvimento

no usuário final. Durante todo o processo, a equipe de desenvolvimento
trabalha pensando no público-alvo e pensando como tais pessoas se
sentiriam ao visitar a página. A AI também integra os diversos setores
da empresa ao incluir representantes de diferentes departamentos para
pensar no todo (itens que estarão ou não presentes no site, a forma de
apresentá-los, como dividi-los em grupos etc.). Além disso, a AI busca
criar um ambiente clean, ou seja, com o mínimo de poluição visual, a
fim de que os usuários consigam encontrar de maneira mais intuitiva e
simples aquilo que procuram (SCHEEREN, 2008, p. 11).
Por fim, Camargo e Vidotti (2011) definem arquitetura da informação como:
[...] uma área do conhecimento que oferece uma base teórica

para tratar aspectos informacionais, estruturais, navegacionais,
funcionais e visuais de ambientes informacionais digitais, por meio
de um conjunto de procedimentos metodológicos, a fim de auxiliar
no desenvolvimento e no aumento da usabilidade de tais ambientes
e de seus conteúdos (CAMARGO; VIDOTTI, 2011, p. 24).
Diante de todas essas definições, pode-se compreender que arquitetura da

informação é uma área do conhecimento que procura definir caminhos para estruturar
melhor a grande gama de informações disponíveis na sociedade, nas organizações e
nos sistemas computacionais. O que acontece, então, é a criação de modelos e métodos
para esse fim, disponibilizando informações para o usuário de forma concisa, coerente
e de fácil acesso. No ambiente de design, relaciona-se arquitetura da informação às
106
informações necessárias, criteriosamente organizadas, para serem utilizadas pelo
usuário e a sua disposição na interface. A arquitetura engloba, portanto, diversas
dimensões que se completam para oferecer um melhor produto aos usuários.
A seguir será aprofundado no tema de arquitetura da informação e sua

integração com o design de sistemas desenvolvidos para web e dispositivos móveis.
2.1 FUNDAMENTOS DE ARQUITETURA DA INFORMAÇÃO E

SISTEMAS
É notória a quantidade de informações geradas de forma excessiva, sem nenhum
critério de seleção, organização, filtro e disseminação, fazendo surgir um verdadeiro des-
controle e influenciando a absorção das informações, sejam elas sociais ou empresariais. Na
mídia, têm-se informações distorcidas e manipuladas. No âmbito empresarial, durante dé-
cadas ocorreu um surgimento de diversos sistemas que não se comunicavam, criando uma
verdadeira “Torre de Babel” de informações desencontradas. O excesso de informações na
web é prova disso. Na Figura 1, veja um exemplo de onde se tem uma página web de um jor-
nal digital norte-americano, onde as informações são carregadas automaticamente. A dis-
posição das informações e seus meios de acesso fazem parte da arquitetura da informação
FIGURA 1 – EXEMPLO DE UMA PÁGINA DINÂMICA DE UM JORNAL NORTE-AMERICANO
FONTE: Lemay, Colburn e Tyler (2002, p. 9)
107
A organização é pilar fundamental da arquitetura informacional. Para esse fim, diversos
autores como Scheeren (2008), Ferreira e Reis (2008) e Silva et al. (2011) descrevem quais são
os componentes de organização da arquitetura da informação e como eles se relacionam.
• Escopo
Define-se o escopo da arquitetura da informação como sendo as informações que

são elencadas, quais são as funcionalidades e qualidades da informação e como o projeto de
design será conduzido por essas informações. É necessário definir a estrutura da interface,
como ela será organizada, quais são suas limitações e como ela será acessada pelos
usuários. Essa etapa é o esqueleto fundamental do design, no momento que é esboçada no
papel a organização da interface, seus elementos e funcionalidades para o usuário.
• Modelo mental
Os modelos ou mapas mentais são uma forma de organização e hierarquização da

informação, que privilegia a correlação entre os termos e conceitos. A representação, por
ser visual, permite que, seguindo a lógica do modelo mental, faça uma representação do
comportamento de um público do sistema. A partir daí, é possível desenhar os melhores
caminhos para determinadas informações. Na figura 2, é demonstrado o mapa mental do
conceito “Redes Neurais” utilizado no desenvolvimento de um trabalho científico.
FIGURA 2 – MAPA MENTAL DO CONCEITO “REDES NEURAIS”
FONTE: Dias (2010, p. 117)

108
• Hierarquização
Hierarquização representa a maneira como a estrutura de uma informação

é construída, como uma árvore que se expande em galhos de outras categorias
e subcategorias. É a forma mais comum e familiar de arquitetura da informação em
ambientes digitais, além de uma das mais inteligíveis para o usuário, pois a ideia é
justamente facilitar ao máximo que ele vá do ponto A ao ponto B.
Complementado o conceito de hierarquia, tem-se que “hierarquia da

informação” é a organização de elementos gráficos por ordem de importância. Essa
hierarquia compreende aspectos como tamanho, tipografia, cor e contraste, e pode
ser determinante para que um usuário escolha ou não pelo seu acesso. Para criar a
hierarquia da informação em um design, é fundamental fazer as seguintes perguntas:
• Para onde se deseja atrair a atenção dos usuários?

• Que tipo de ação os usuários devem tomar?
• Para onde se direciona, de forma espontânea, a visualização dos usuários?
Segundo diversos pesquisadores e empresas responsáveis por criar designs,

existem dois padrões de hierarquia da informação:
• Padrão F: é mais utilizado para interfaces com mais texto, como uma página de um
blog, por exemplo. Esse padrão “fala” que o usuário tende a “escanear” o conteúdo
de cima para baixo e, assim, consegue identificar palavras ou termos de interesse,
lê o conteúdo normalmente, da esquerda para a direita.
• Padrão Z: é mais utilizado ao visualizar páginas com mais elementos e menos texto,
como um aplicativo ou site, por exemplo. Esse padrão diz que o usuário percorre da
esquerda para a direita a partir do topo da página. Em seguida, desce pela diagonal
até a parte inferior esquerda da página e finaliza com a leitura novamente da direita
para a esquerda.
Na figura 3, tem-se um exemplo do padrão “Z”:
109
FIGURA 3 – REPRESENTAÇÃO DO PADRÃO DE HIERARQUIZAÇÃO “Z”
FONTE: <https://bit.ly/3C9Q3YD>. Acesso em: 20 nov. 2021.
Além desses padrões, as boas práticas de design orientam uma série de outros
padrões de hierarquização e organização das informações.
• Padrões de leitura
Esse padrão indica que é preciso se colocar no lugar do usuário e identificar para
onde ele vai olhar assim que entrar em contato com o material da sua marca.
De forma global, as pessoas olham de cima para baixo. Entretanto, há variações

nas formas como se lê na horizontal – algumas culturas leem da esquerda para a direita,
ao passo que menos pessoas leem da direita para a esquerda.
Esses padrões ajudam a delimitar os conteúdos de acordo com cada parte da

página, seja um material impresso ou site.
• Tamanho dos elementos
O tamanho das letras e elementos em uma página tem importante papel na

hierarquia da informação. É um recurso importante para ranquear os elementos do design.
• Cores e contrastes
A psicologia das cores diz que elas têm o poder de evocar diversas emoções e
têm conotações culturais e sociais. Isso, inclusive, é uma das premissas utilizadas na
criação de logos.
• Espaços em branco
Espaços em branco dão um respiro ao leitor e, também, fazem parte da hierarquia

visual. Não é preciso preencher uma página inteira com textos, fotos, imagens e outros
elementos; quando tudo parece importante, mas se, de fato, parece relevante.
110
• Proximidade e repetição criam unidade
Quando se coloca vários elementos juntos, passa a ideia de que os conceitos

estão relacionados.
• Fluxos de navegação
O fluxo representa as formas possíveis que o usuário pode acessar a mesma

informação no sistema, ou seja, quantos caminhos estão disponíveis. Por meio de um
fluxograma, é possível desenhar quais são os possíveis caminhos de navegação.
• Wireframes
Wireframes são protótipos da interface final, onde é possível desenhar, organizar e

testar as categorias e funcionalidades do aplicativo. Assim, é possível visualizar a arquitetura
informacional do conteúdo e criar wireframes em papel, editores gráficos e em HTML.
A seguir, serão mostrados os modelos de análise da arquitetura informacional e

como estes modelos se aplicam ao design de sistemas e aplicativos.
2.2 MODELOS DE ANÁLISE DA ARQUITETURA

Segundo o site oficial da Microsoft (2021), a forma como se organizam os sites
e aplicativos – e os seus conteúdos – dependerá da composição de sua organização e
das necessidades e objetivos de seus usuários. Por exemplo, segundo Microsoft (2021),
se o objetivo é permitir aos trabalhadores da linha de frente com locais e documentos
específicos, pode-se decidir aperfeiçoar a navegação para um dispositivo móvel. Outro
exemplo pode ser se o objetivo é criar um espaço de colaboração para sua equipe, pode
decidir projetar seu site de equipe do SharePoint para se alinhar com o Microsoft Teams.
Os métodos comuns de análise da organização do projeto de navegação são:
• Por departamento – a maioria dos usuários já tem um modelo mental bem definido
para navegação, dividido por departamento.
• Por localização geográfica – a organização por localização geográfica é uma maneira
eficaz de reunir pessoas de semelhantes disciplinas para colaborar e construir uma
comunidade. Para organizações grandes ou internacionais, a localização pode ser um
importante fator de tomada de decisão para os usuários. A organização por região pode ser
importante quando certos tópicos têm diferentes leis e mandatos dependendo da região.
Por exemplo, sites de gerenciamento de crise ou orientações de recursos humanos.
• Por tarefa ou cenário – a organização por cenário dentro da navegação ajuda os
usuários a aprenderem sobre um conceito geral, por exemplo, as páginas "sobre
nós". A organização por tarefas comuns, e frequentemente usada, é útil da mesma
forma, por exemplo, tarefas como "ser reembolsado".
111
• Por portfólio – às vezes, o conteúdo é mais bem organizado por tipo ou portfólio,
para exibir conteúdo em grupos naturais ou para públicos específicos. A organização
da sua navegação por portfólio oferece flexibilidade à medida que sua empresa se
dimensiona e cresce.
Conforme descrito por Ferreira, Gonçalves e Wangneheim (2019), independen-

temente do tipo de software ou aplicação, o poder computacional pode ficar severa-
mente comprometido se a interface é mal projetada, podendo afetar diretamente a
habilidade do usuário de absorver o conteúdo na íntegra. No entanto, nota-se que, na
literatura, a abordagem às recomendações para o design de interfaces de aplicativos
em smartphones é realizada de forma genérica e as orientações para o desenvolvimen-
to das interfaces para esses sistemas ainda são escassas.
Segundo Garret (2011), a experiência do usuário tem influência sobre a

percepção do produto, podendo gerar um diferencial. A responsabilidade de assegurar a
qualidade da experiência do usuário não se restringe a um especialista de usabilidade,
todas as etapas do processo devem convergir para esse fim. Nesse sentido, Garret (2011)
desenvolveu um framework relativo ao design dos elementos da experiência do usuário,
estruturado nos seguintes planos: estratégia, escopo, estrutura, esqueleto e superfície.
O projeto sensorial e a apresentação dos arranjos lógicos que compõem o esqueleto
do produto estão inseridos na camada de superfície. Essa camada é composta por
conteúdo, funcionalidade e estética, as quais estão juntas para produzir um design
acabado que agrade os sentidos sensoriais enquanto cumpre todos os objetivos dos
outros quatro planos, como representado na Figura 4.
FIGURA 4 – PLANOS DO FRAMEWORK DE GARRETT
FONTE: Ferreira, Gonçalves e Wangneheim (2019, p. 85)
Tendo claro como se estrutura a arquitetura informacional e os possíveis

frameworks e os modelos na perspectiva do usuário, agora será demonstrado o que são
as camadas da arquitetura interna de um sistema.
112
A seguir, serão tratadas as arquiteturas das camadas de software. É importante
que o profissional de design tenha conhecimento dessas camadas para que possa
dialogar com propriedade com a equipe de desenvolvimento.
2.3 CAMADAS DE INTERAÇÃO MVC

É fundamental que o profissional de design conheça os padrões de arquitetura
do desenvolvimento de sistemas. Isso facilita o diálogo com a equipe de desenvolvimento
durante a criação do design de um aplicativo.
Os padrões mais utilizados são o MVC e MVVC. O que vem a ser isso? O padrão
MVC (Model-View-Controler) é amplamente utilizado na produção de sistemas por seus
diversos benefícios. O MVC é um padrão de design do sistema que permite separar a
lógica de negócios e a lógica de apresentação e dados (MICROSOFT, 2021).
Entre alguns dos benefícios, o padrão MVC permite que o controle de navegação
seja centralizado, ou seja, é possível saber exatamente onde as requisições dos clientes
irão chegar e o que fazer com elas. Além disso, ele possui manutenção fácil para grandes
aplicações, divisão entre lógica de negócios, lógica de apresentação e de dados e, ainda,
garante a manutenção mais fácil do código fonte.
O padrão MVC é ilustrado na Figura 3 como controlador, visão e modelo, na

qual é possível perceber que as requisições do cliente, ilustradas por um computador
e uma seta direcional, são todas recebidas pela entidade controlador, responsável por
decidir se deve enviar notificação para a camada de visão, modelo ou ambas. Somente a
camada de modelo tem acesso aos dados e aos bancos de dados. Compreende-se que
a camada de visão é responsável por projetar o que será devolvido ao usuário, ou seja, o
que o cliente vai ver na tela do computador.
FIGURA 5 – ESQUEMA DO MODELO MVC – MODELO – VISÃO – CONTROLE E SUAS INTERAÇÕES
FONTE: O autor
113
Assim, ao fazer uso do padrão MVC, o usuário faz a requisição diretamente ao
controlador, que tem como responsabilidade comunicar com o modelo para realizar as
operações que necessitam de resgate de dados. O controlador também escolhe qual
visão e como provê-la com dados resgatados do modelo, bem como o que deverá ser
enviada ao cliente para visualização.
Outro exemplo que ajuda a entender os benefícios do padrão MVC é quanto às

mudanças, que podem ocorrer com o tempo de execução da aplicação. Sabemos que
geralmente a interface lógica muda com mais frequência que a lógica de negócios.
DICA
Tanto a visão quanto o controlador dependem do modelo. Por outro
lado, o modelo não depende da visão ou do controlador. Essa separação
permite que o modelo seja construído e testado de forma independente
da apresentação visual.
• Modelo
No padrão MVC, o modelo representa as entidades que executam a lógica do

negócio da aplicação. A lógica do negócio deve ser encapsulada dentro do modelo,
juntamente com qualquer implementação para persistência dos dados. Vale lembrar
que nenhuma atividade de geração de visualização dos dados é tratada aqui, somente
os dados de forma geral.
Nas aplicações, de uma forma geral, não temos essa divisão de tarefas entre
as abstrações, vantagem presente no padrão MVC. Embora o desenvolvimento de uma
aplicação que contenha em um único local informações da visão, controle e modelo
possa ser mais fácil de ser produzido a longo prazo; para as aplicações médias e grandes,
é uma prática desaconselhável.
• Visão
As visões são responsáveis por apresentar o conteúdo ao usuário por meio da

interface. As visões não devem concentrar lógicas (caso isso aconteça, devem ter o
mínimo possível), uma vez que elas se concentram na exibição dos dados para melhor
experiência do usuário.
114
• Controle
Os controladores são os componentes do padrão MVC que lidam com as requisições

dos usuários do sistema. O controlador é responsável por encaminhar as requisições do
usuário para as visões apropriadas, a partir dos dados fornecidos pelos modelos. Em resumo,
a visão somente exibe os dados; o controlador recebe e responde as requisições de dados e
de interação do usuário com o sistema, e, por fim, o modelo gerencia os dados.
Esses modelos integram a arquitetura interna de um software, que é uma

evolução natural do desenvolvimento de sistemas.
115
RESUMO DO TÓPICO 1
• O que é arquitetura da informação e suas diversas facetas.
• Como o conceito de arquitetura da informação é utilizado na avaliação e no

desenvolvimento e interfaces.
• Quais são os modelos de arquitetura e como se aplica a arquitetura da informação

no desenvolvimento de sistemas utilizando o modelo MVC.
• Compreendeu o que é a arquitetura da informação no âmbito social, empresarial e

na organização da informação nos ambientes digitais.
• Quais são os modelos de arquitetura da informação e de análise destas arquiteturas

e as técnicas de estruturação da informação nos designs.
• Como é a arquitetura da informação sob a perspectiva do desenvolvedor dos

sistemas, onde o modelo MVC (Modelo-Visão-Controle) serve como um padrão de
referência.
116
AUTOATIVIDADE
1 O conceito de arquitetura da informação tem várias vertentes, desde uma visão social
até uma visão focada no usuário, passando pela perspectiva empresarial. A seguir, são
apresentados alguns princípios de “arquitetura da informação”. Acerca do princípio de
arquitetura da informação, assinale a alternativa INCORRETA:
a) ( ) Transforma ideias do planejamento estratégico na organização da informação.

b) ( ) Foca na relação entre as informações da organização e os sistemas.
c) ( ) Procura definir caminhos para estruturar melhor a grande gama de informações.
d) ( ) Gerenciar invasão de hackers nos sistemas organizacionais.
2 A análise da arquitetura da informação engloba alguns componentes que se interligam

para compreender a sua lógica na totalidade. Acerca desses componentes, analise as
I- O escopo da arquitetura da informação são as informações elencadas e as suas

funcionalidades.
II- O modelo mental procura compreender como o usuário imagina o sistema antes do
seu lançamento na organização.
III- A hierarquização representa a maneira como a estrutura de uma informação é
construída, como uma árvore.

3 Existem modelos de análise da arquitetura que auxiliam os designers a projetar

melhores interfaces. Existem alguns métodos comuns de análise da organização da
arquitetura. Sobre esses métodos, classifique V para as sentenças verdadeiras e F
para as falsas:
( ) O método por departamento utiliza uma navegação orientada à estrutura

organizacional.
( ) O método de localização geográfica se aplica somente às multinacionais dispersas
em vários países.
( ) O método da organização por cenário ajuda os usuários a aprenderem sobre um
conceito geral.
117
a) ( ) V – F – F.
b) ( ) V – F – V.
c) ( ) F – V – F.
d) ( ) F – F – V.
4 É importante que o profissional de design de interface tenha um bom conhecimento

da estrutura da arquitetura interna de um sistema, nesse aspecto, a arquitetura de
padrão MVC. Descreva algumas vantagens em se utilizar o padrão MVC.
5 O padrão de arquitetura MVC agrega diversas vantagens para o desenvolvedor de

sistemas, auxiliando na manutenção e correção do código. No padrão MVC, descreva
qual o sentido de “visão”:
118
GRÁFICOS E EDIÇÃO DE IMAGENS
1 INTRODUÇÃO
Ter boas ferramentas para desenvolver o design é de extrema importância,
principalmente quando o uso de recursos visuais auxilia a relação entre o usuário e
a interface. No entanto, não basta apenas o uso da ferramenta. O uso adequado da
edição de imagens pode ajudar o usuário a encontrar conteúdos relevantes, gerar
sinais de comportamento e aumentar a produtividade, já que publicações com imagens
melhoram o engajamento das páginas.
2 INSERÇÃO DE GRÁFICOS EM INTERFACE

A inserção de gráficos no design de um aplicativo dependerá do objetivo do
gráfico e do ambiente onde ele está inserido. Esta análise é necessária para que o
usuário possa compreender qual o objetivo daquele gráfico estar naquela tela naquele
momento. Gráficos, mapas e infográficos ajudam os usuários a entenderem dados
complexos, encontrar padrões, e identificar tendências.
A seguir, serão descritos os principais modelos de gráficos, baseando-se no

documento descritivo da UFSC (2011).
• Comparação
Gráficos de comparação são usados para comparar um ou mais conjuntos de

dados. Eles podem comparar itens ou mostrar diferenças ao longo do tempo.
• Relação
Gráficos de relacionamento são usados para mostrar uma conexão ou correlação

entre duas ou mais variáveis.
• Composição
Os gráficos de composição são usados para exibir partes de um todo e mudar

ao longo do tempo.
• Distribuição
Gráficos de distribuição são usados para mostrar como as variáveis são

distribuídas ao longo do tempo, ajudando a identificar valores discrepantes e tendências.
119
É fundamental saber aplicar o tipo de gráfico corretamente no design de um
sistema. Gráficos de linhas, barras e colunas representam mudanças ao longo do tempo.
Pirâmides e gráficos de pizza exibem partes de um todo, enquanto gráficos de dispersão
e mapas de árvores são úteis caso haja muitos dados para visualizar.
DICA
O uso da tecnologia de aplicativos para cuidados em saúde tem crescido
consideravelmente. Na área de nutrição, encontram-se disponíveis com o
objetivo de levar a mudança de comportamento para que indivíduos reflitam
sobre escolhas alimentares. O artigo escrito por Caivano, Ferreira e Domene
(2014) tem por objetivo avaliar a percepção dos usuários em relação à
usabilidade do Guia Alimentar Digital (GAD): https://bit.ly/3HDeH4L.
Um gráfico de linhas revela tendências ou mudanças ao longo do tempo. Os

gráficos de linhas podem ser usados para mostrar relacionamentos em um conjunto de
dados contínuo e podem ser aplicados a uma ampla variedade de categorias, incluindo
o número diário de visitantes de um site ou variações nos preços das ações.
Práticas recomendadas para criar gráficos de linhas:
• Nomear claramente seus eixos – verifique se o espectador sabe o que está avaliando.
• Remover elementos gráficos dispersos – grids, cores variadas e legendas volumosas
podem distrair o espectador de ver rapidamente a tendência geral.
• Aproximar o zoom no eixo y se o seu conjunto de dados começar acima de zero –
em certos casos, alterar a escala do eixo y facilita.
• Evitar comparar mais de 5-7 linhas – você não quer que seu gráfico fique confuso ou
difícil de ler. Visualize os dados que você precisa para contar sua história, nada mais.
O gráfico de pizza é um dos tipos de gráfico mais usado pela facilidade de

visualização da relação entre as partes.
120
FIGURA 6 – EXEMPLO DE UM GRÁFICO DE PIZZA DE UM ESTUDO DE DISTRIBUIÇÃO DOCUMENTAL
FONTE: Dias (2006, p. 71)
Gráficos de pizza são usados para mostrar partes de um todo. Um gráfico de

pizza representa números em porcentagens e a soma total de todos os segmentos
divididos é igual a 100%.
Práticas recomendadas para criar gráficos de pizza:
• Verificar se seus segmentos somam 100 – parece óbvio, mas isso é um erro comum.
• Manter limpo e consistente. Compare apenas algumas categorias para obter o seu
ponto de vista. Se as fatias de pizza tiverem aproximadamente o mesmo tamanho,
considere usar um gráfico de barras ou colunas.
Gráficos de barras e colunas são usados para comparar itens diferentes. As

barras em um gráfico de colunas são verticais, enquanto as barras em um gráfico de
barras são horizontais.
Gráficos de barras geralmente são usados para ajudar a evitar desordem quando
a legenda de dados é longa ou se você tiver mais de 10 itens para comparar. Eles são
fáceis de entender e criar.
Práticas recomendadas para criar gráficos de barras e colunas:
• Iniciar o eixo y em zero – nossos olhos são sensíveis à área das barras em um gráfico.
Se essas barras estiverem truncadas, o espectador pode tirar conclusões erradas.
• Nomear os eixos – rotular os eixos fornece contexto ao visualizador.
• Colocar legendas de valor nas barras – isso ajuda a preservar as linhas limpas dos
comprimentos das barras.
• Evitar usar muitas cores “efeito arco-íris” – usar uma única cor ou vários tons da
mesma cor é uma prática muito melhor. Você pode destacar uma barra em particular,
se essa for a mensagem que você deseja transmitir.
121
Os mapas de árvore permitem visualizar tendências e fazer comparações rapidamente,
especialmente se uma cor for particularmente proeminente. Enquanto as planilhas podem
exibir várias linhas de dados, os mapas de árvore podem acomodar centenas de milhares de
itens em uma exibição organizada, facilitando a identificação de padrões em segundos. Além
disso, se feito corretamente, eles fazem uso muito eficiente do espaço.
Práticas recomendadas para criar um mapa de árvore
• Começar com dados limpos e uma mensagem clara – os mapas de árvore podem
envolver muitos dados, por isso, é importante saber exatamente o que você deseja
destacar.
• Usar cores brilhantes e contrastantes para que cada região seja facilmente definida
– lembre-se de evitar o “efeito arco-íris”. Escolha suas cores com sabedoria.
• Rotular apropriadamente cada região com texto ou números – é mais fácil para o
espectador avaliar seu mapa de árvore rapidamente, sem erros.
• Evitar confundir seu mapa de árvore com muitas caixas – mapa de árvores podem
conter qualquer número de caixas, mas o espaço é limitado! Você não quer que seu
mapa de árvore seja difícil de ler.
Os gráficos de área são muito parecidos com gráficos de linhas, com algumas
diferenças sutis. Eles podem mostrar mudanças ao longo do tempo, tendências gerais e
continuidade em um conjunto de dados. No entanto, embora os gráficos de área possam
funcionar da mesma maneira que os gráficos de linhas, o espaço entre a linha e o eixo
é preenchido, indicando volume.
Práticas recomendadas para criar gráficos de área
• Facilitar a leitura – evite a oclusão. Isso acontece quando uma ou mais camadas
cobrem informações importantes no gráfico.
• Usar um gráfico de áreas empilhadas – se você tiver vários conjuntos de dados e
quiser enfatizar os relacionamentos da parte para o todo.
• Usar gráficos de área para ver a foto maior – pegue a população, por exemplo: os
gráficos de linhas são bons para mostrar a mudança líquida na população ao longo
do tempo, enquanto os gráficos de área são bons para mostrar a população total ao
longo do tempo.
• Evitar comparar muitos conjuntos de dados. Use, em vez disso, um gráfico de linha,
é mais simples.
• Dar o contexto adequado com rótulos e legendas apropriadas.
Gráficos de pirâmide são uma maneira de visualizar os relacionamentos

baseados em fundação. Eles aparecem na forma de um triângulo que foi dividido
em seções horizontais com categorias rotuladas de acordo com sua hierarquia. Eles
podem ser orientados para cima ou para baixo, dependendo dos relacionamentos que
representam. As camadas empilhadas também podem mostrar a ordem das etapas em
um processo específico.
122
Melhores práticas para criar gráficos de pirâmide
• Escolha um tópico e identifique claramente suas subcategorias – decida quais informações

você deseja transmitir com sua pirâmide e identifique claramente suas camadas.
• Organizar suas subcategorias – decida a ordem e o valor de cada seção em sua
pirâmide.
• Organizar as subcategorias com base em sua hierarquia.
• Ser consistente – mantenha o espaçamento de suas seções e escolha uma paleta
de cores agradável.
• Ter o mínimo de subcategorias. Adicionar muitas camadas e cores pode dificultar a
leitura da sua pirâmide.
Portanto, conhecer os fundamentos de inserção se torna ponto central do conhecimento

do profissional de design. A seguir, serão tratados os fundamentos de edição de imagens.
2.1 FUNDAMENTOS DE EDIÇÃO DE IMAGENS

A imagem é a primeira coisa que o usuário vê enquanto navega pela internet ou
acessa um aplicativo. Isso faz toda a diferença no momento da utilização do sistema, já
que fotos de baixa qualidade e desatualizadas afetam a experiência do usuário em um site.
DICA
Para um bom desenvolvimento de sistema e de design, é importante que
os profissionais de tecnologia tenham acesso ao planejamento estratégico
empresarial, buscando alinhar os sistemas às bases estratégicas da
organização.
A edição de imagens é parte fundamental no desenvolvimento de um design. A edição

de imagens compreende, também, a edição de vídeos ou sons que podem acompanhar as
imagens e vídeos. A seguir, apresenta-se algumas dicas para edição de imagens:
• Ampliar ou reduzir uma foto para que haja harmonia na interface.

• Fazer ajustes e aplicar filtros.
• Recortar a imagem para exibir as opções para recortar uma foto ou vídeo.
• Girar a imagem quando for necessário e posicioná-la de forma equilibrada na tela.
• Aprimorar uma foto ou vídeo com ferramentas como Paint Brush, CoreDraw etc.
123
A edição de imagens deve seguir uma lógica bem baseada no equilíbrio entre os textos
e a dimensão da tela, não sobrecarregando a interface de forma desnecessária. O profissional
de design tem como uma das principais funções ter base sólida sobre a edição de imagens,
considerando a grande importância desse recurso no design dos aplicativos e sistemas.
A seguir, será estudado como são os métodos de avaliação gráfica e de imagens

nas interfaces de dispositivos.
2.2 AVALIAÇÃO GRÁFICA E DE IMAGEM NAS INTERFACES

A avaliação da qualidade de imagens é de especial importância em diversas
interfaces, como por exemplo, na compressão, onde pode ser utilizada para regular a taxa
que deve ser empregada para que haja a máxima diminuição do tamanho do arquivo de
modo a não comprometer a qualidade. Esses elementos formam as composições que
são vistas. São os elementos:
• Linha
É uma forma que conecta dois ou mais pontos, podendo ser grossa ou fina,
ondulada ou irregular, dando a possibilidade de formar muitos outros estilos. As linhas
estão sempre presentes no design, como em desenhos, ilustrações e elementos
gráficos, como texturas e padrões.
• Forma
Forma é qualquer área bidimensional com um limite reconhecível, ou seja,

círculos, quadrados, triângulos etc. Elas são divididas em duas categorias: geométrica
ou regular e orgânica, em que são mais livres. As formas são importantes para
comunicar ideias visualmente, pois lhes dão peso e as tornam reconhecíveis. Graças
a elas, entendemos sinais de trânsito, símbolos e, em grande medida, a arte abstrata.
• Objetos
Quando uma forma possui propriedades 3D, são chamados de objeto. Ela pode
existir no mundo real ou ser simulada na composição usando técnicas como luz, sombra
e perspectiva para criar a ilusão de profundidade. Em designs bidimensionais, os objetos
dão um toque mais real ao trabalho. Sem eles, uma bola de borracha saltitante é apenas
um círculo, ou um edifício 3D é apenas uma série de retângulos.
• Textura
É a qualidade física de uma superfície e, assim como os objetos, podem ser

tridimensionais e dar uma ideia de como é na vida real. No design, a textura acrescenta
124
profundidade e tato em imagens planas. Os objetos podem ter aparência de lisos,
ásperos, duros ou macios, dependendo dos elementos.
• Equilíbrio
É uma boa distribuição do peso visual e pode ser afetado por muitas coisas,
incluindo cor, tamanho, número e espaço em branco. Dominar o equilíbrio pode ser
complicado no começo, já que é necessário ter intuição. Felizmente, o mundo do design
está repleto de exemplos onde você pode ter uma base de como fazer.
125
RESUMO DO TÓPICO 2
• Foi possível compreender técnicas de inserção de gráficos e imagens nas interfaces

do design, e como esses itens são relevantes na interação do usuário com as
informações disponíveis no sistema
• Analisar os fundamentos da edição de imagens e gráficos, como a comparação,

relação, composição e demais elementos a serem analisados, aumentando a
qualidade da interface do sistema
• Entender como funciona o processo de avaliação dos gráficos e imagens nas

interfaces digitais.
• Compreender como aplicar boas práticas de criação de gráficos e imagens, aplicando

essas práticas na construção de design e tornando a relação entre o usuário e o
sistema mais efetiva.
126
AUTOATIVIDADE
1 Os gráficos auxiliam enormemente na visualização das informações quantitativas. É
uma ferramenta muito utilizada, principalmente em gestões empresariais. Acerca do
modelo de gráfico, assinale a alternativa CORRETA:
a) ( ) Comparação: gráficos conexão entre variáveis.

b) ( ) Composição: usados para exibir partes de um todo.
c) ( ) Distribuição: gráficos para comparar conjuntos distintos.
d) ( ) Relação: usados para analisar dados internos e externos da organização.
2 Existem práticas que são recomendadas para uma melhor utilização de gráficos nas
interfaces. Segundo essas práticas, analise as sentenças a seguir:
I- Para criar gráficos de barras e colunas e iniciar o eixo y em zero.

II- Para criar um mapa de árvore e rotular cada região com texto ou números.
III- Para criar gráficos de pirâmide e organizar subcategorias com base em hierarquia.
a) ( ) As sentenças I, II e III estão corretas.

c) ( ) Somente a sentença I está correta.
3 É fundamental que o designer exerça a avaliação gráfica das imagens contidas na

interface. Existem alguns elementos de análise da avaliação gráfica. Acerca desses
elementos, classifique V para as sentenças verdadeiras e F para as falsas:
( ) Textura é a qualidade física de uma superfície.

( ) Objetos são formas que possuem propriedades 3D.
( ) Equilíbrio é qualquer área bidimensional com um limite reconhecível.
a) ( ) V – F – F.
b) ( ) V – F – V.
c) ( ) V – V – F.
d) ( ) F – F – V.
127
4 A inserção de gráficos na apresentação de um sistema é de fundamental importância,
pois possibilita ao usuário obter uma visão eficiente dos dados disponíveis, além
da análise mais efetiva das informações. Nesse sentido, qual a melhor uso de
apresentação dos dados usando gráficos de barras:
5 A utilização de imagens em uma interface torna muita rica a apresentação e é atraente

para o usuário do sistema. Imagens dizem muito e podem ser altamente significativas
no design. Assim sendo, qual o sentido do conceito de “objeto” na inserção de imagens
na interface?
128
MUNDO DIGITAL, MOBILIDADE E SUAS
INOVAÇÕES
1 INTRODUÇÃO
As tecnologias têm diversas facetas, como auxiliar pessoas e empresas com
todas as possibilidades. A mobilidade digital faz parte da transformação digital; ela pode
ser dividida em duas partes: a primeira em auxiliar a parcela da população que tem
algum tipo de limitação, física ou cognitiva, e a outra consiste em utilizar a tecnologia
para melhorar o desempenho da empresa, solucionar problemas, alcançar resultados e
ainda causar uma melhor experiência digital aos seus clientes e colaboradores.
A sociedade atual está sempre conectada à internet, executando dezenas de tarefas

por meio de aplicativos, como, por exemplo, solicitar serviço de transporte, comprar comida,
fazer cursos, abrir uma conta bancária, ler e-books, comunicar-se com as pessoas etc.
2 EVOLUÇÃO DIGITAL
A evolução digital segue uma curva exponencial. Quando e onde estiver, o
usuário tem total liberdade para fazer quase tudo que necessita, tanto do ponto de
vista profissional quanto pessoal. As evoluções digitais atravessaram as margens
das plataformas virtuais em razão do home office, utilizando em exaustão o Cloud
Computing, aplicações para negócios SaaS (Software as a Service) e XaaS (Everything
as a Service), e-commerce e o delivery, que proporcionaram a estrutura de serviços e
atividades relevantes para a sociedade.
IMPORTANTE
É muito importante que o profissional de design observe a sociedade
como um todo, compreendendo que existem grupos com limitações
físicas e cognitivas que podem ser usuários do sistema que está sendo
desenvolvido. Por exemplo, será que o aplicativo está disponível com fala
para pessoas que possuem deficiência visual?
129
O foco é o usuário, a interface, a usabilidade, a facilidade de acesso às informações,
rapidez e confiança. Condições inerentes a qualquer sistema e, obviamente, no design do
sistema. A internet das coisas, impressoras 3D, Inteligência Artificial, holografias, hiper-
conectividade, casas e escritórios hiper-inteligentes já estão disponíveis no mercado. A
inovação segue a passos largos, e vai muito além. Nos grandes centros de pesquisa, os
assuntos pesquisados sobre inovação computacional giram em torno da relação cada
vez mais estreita entre o humano e o computador. Conforme descrito por Queiroz (2007,
p. 10) “semiótica computacional, vida artificial, robótica cognitiva e criaturas semióticas
computacionais” são temas intrínsecos das grandes inovações. Nos últimos anos, os
grandes avanços da Inteligência Artificial têm sido notórios.
Do ponto de vista do design, o paradigma do touch screen, da integração dos

celulares com a internet e do surgimento do sistema operacional Android, elevou à
enésima potência a necessidade de se criar interfaces e designes cada vez melhores. A
seguir, serão exploradas as evoluções digitais e seus impactos no desenvolvimento de
design de sistemas na web e dispositivos móveis.
2.1 INOVAÇÃO DIGITAL

É fundamental compreender que a inovação digital traz impactos nas organizações.
Para que esse impacto seja absorvido e aproveitado, é necessária uma mudança de postura,
de cultura e de medidas práticas. Nesse contexto, não se pode pensar na atualização
tecnológica como uma medida estratégica. Ela precisa entrar na pauta prioritária das
organizações, que precisam ter à disposição hardwares e softwares que permitam criar
uma infraestrutura e um ambiente digitalmente inovador. É primordial que haja um bom
alinhamento estratégico entre as estratégias empresariais e as inovações tecnológicas.
DICA
É muito importante que o profissional de design tenha sólido conhecimento
do mundo da computação. A origem da ciência da computação, seus
fundamentos e a evolução. O livro “História da computação” apresenta
uma linha de tempo descrevendo todos os inventos e ideias que tiveram
influência na história da computação, iniciando na Pré-história, passado pela
Era clássica e as diversas invenções gregas, e chegando finalmente aos dias
de hoje. Referência do livro “História da Computação”, de Raul Wazlawick.
130
Não basta a empresa ter equipamentos. Ela precisa atualizar sua maneira de pensar.
Os recursos tecnológicos deixam de ser meros auxiliares dos processos, que passam a ser
desenhados a partir das possibilidades proporcionadas por essas ferramentas.
Para que os sistemas sejam integrantes inovadores do Planejamento Estratégi-

co, é necessário modelar o alinhamento entre os dois. A não modelagem desse alinha-
mento é o grande responsável pela falta de retorno empregado em tecnologia e siste-
mas de informação. Para Rezende e Abreu, “é necessário que as organizações tenham
seus planejamentos empresariais e de TI integrados, coerentes e com sinergia. [...] o
alinhamento estratégico dos negócios e da TI é muito importante para a sobrevivência
das organizações, principalmente quando é utilizado como ferramenta de gestão” (RE-
ZENDE; ABREU, 2003, p. 31). O modelo é representado na Figura 7.
FIGURA 7 – DESENHO DA VISÃO GERAL DO MODELO PROPOSTO DE ALINHAMENTO DO PETI AO PEE
FONTE: Rezende e Abreu (2002, p. 31)
O Planejamento Estratégico não é um processo estático e delimitado. Na

realidade, é um processo altamente dinâmico e em constante evolução. Segundo
Rezende e Abreu (2003, p. 32), “o Planejamento Estratégico é um processo dinâmico e
interativo para determinação de objetivos, políticas e estratégias (atuais e futuras) das
funções empresariais e dos procedimentos de uma organização”. O modelo proposto
por Rezende e Abreu (2003, p. 33) é sustentado pelos vetores a seguir:
• Tecnologia da Informação.
• Sistemas de Informação e do Conhecimento.
• Recursos Humanos.
• Contexto Organizacional.
131
Portanto, o alinhamento entre estratégia e inovação tecnológica forma a interseção
entre as dimensões. O esquema fornece uma visão geral de conceitos, modelos, métodos e
ferramentas de tecnologias necessárias para facilitar a estratégia de negócios e suportar as
decisões e ações empresariais. O alinhamento entre estratégia e inovação se constitui a partir
da relação vertical, horizontal, transversal, dinâmica e sinergética das funções empresariais,
que promovem o ajuste ou a adequação estratégica das tecnologias disponíveis de toda a
organização, como uma ferramenta de gestão empresarial contemplada pelos conceitos de
qualidade, produtividade e inteligência competitiva.
Para que a inovação digital seja significativa, é fundamental que seja ajustada
às demandas do mercado e às necessidades dos seus clientes. Para não desperdiçar
recursos e esforços, a empresa não pode simplesmente investir em plataformas digitais
sem considerar se elas alcançam seu público-alvo ou não.
É preciso fazer uma sondagem para mapear os hábitos dos consumidores.

Somente com esses dados será possível escolher as melhores formas de se relacionar
com eles, facilitando a solução de demandas e criando uma percepção positiva da marca.
Um dos primeiros passos para a inovação é a implementação constante de

melhorias e sua progressiva integração ao ambiente digital.
Essa transição é importante para que a empresa participe desse processo em

etapas, proporcionando o tempo necessário para a adaptação de sua equipe e, também, dos
consumidores e parceiros, que nem sempre estão acostumados a esse tipo de experiência.
É fundamental agregar à equipe um grupo de profissionais que tenham visão

digital – a capacidade de encontrar oportunidades de inovação na área de expertise
do seu negócio – engenheiros de software, especialistas em experiência do cliente em
plataformas digitais, programadores e designers gráficos são alguns exemplos.
Para obter tecnologia de ponta, é necessário empregar dinheiro. Entretanto, a diferença

entre um recurso bem empregado e o desperdício é a sua aplicação. Embora seja fundamental
adquirir equipamentos corporativos de ótima qualidade, não vale a pena comprar tudo.
Tudo isso encarece o preço da infraestrutura de TI, além de os recursos

se tornarem obsoletos cada vez mais rapidamente. Por esse motivo, hoje é possível
encontrar soluções por assinatura e baseadas na nuvem, de acordo com os modelos
SaaS (software as a service) e IaaS (infrastructure as a service), entre outras opções.
A seguir, serão aprofundados os tópicos sobre a adaptabilidade das tecnologias

para as novas realidades da sociedade.
132
2.2 ADAPTABILIDADE DAS TECNOLOGIAS ÀS NOVAS
REALIDADES
Diversos setores estão passando por mudanças drásticas por causa de diferentes
fatores, como a inovação tecnológica emergente, a mobilidade e as regulamentações
federais e governamentais. Inteligência artificial, big data, processos digitais e tantas
outras tecnologias habitam nosso dia a dia, transformando completamente nossas formas
de viver, mercados, processos e, principalmente, as relações interpessoais. A indústria 4.0
ou quarta revolução industrial impacta todos e traz uma nova realidade: não é o mais forte
que sobrevive, nem o mais inteligente, mas o que melhor se adapta às mudanças.
DICA
As funcionalidades de aplicativos móveis estão se aproximando cada vez
mais de áreas ainda não exploradas por essa tecnologia. Para isso, foi
desenvolvido um sistema de comunicação sem fio na plataforma Android
aplicada a sistemas de irrigação. Leia mais no artigo escrito por Rocha, Silva,
Avelino e Costa (2014): https://bit.ly/34bX7qZ.
Nas empresas, o fato de conhecer e reconhecer sua estrutura, sua cultura, seus
conhecimentos, processos e macro ambiente onde está inserida, numa visualização
estática (mapeada em um dado momento do tempo), é muito importante para garantir
sua operacionalização. No entanto, conhecer suas tendências através de cenários
possíveis, é fundamental para sua sobrevivência, tanto para criação e elaboração da sua
estratégia quanto para a forma de como esta será implementada, avaliada e repensada,
e ainda quais instrumentos tecnológicos e informacionais (Business Intelligence – BI,
por exemplo) serão utilizados para isso.
É necessário estabelecer as fundações tecnológicas, integrar a arquitetura às

estratégias, modernizar constantemente a base tecnológica e investir em novas plataformas.
133
RESUMO DO TÓPICO 3
• O Planejamento Estratégico não é um processo estático e delimitado. Na realidade,

é um processo altamente dinâmico e em constante evolução.
• Sobre a importância do profissional de design compreender os conceitos de

evolução e inovação digital, como essa evolução tem ocorrido, suas características
e projeções para o futuro tecnológico, das interfaces e do design.
• Os impactos e a necessidade das organizações se adequarem às novas realidades

e tecnologias.
• A adaptabilidade das tecnologias para as novas realidades da sociedade.
134
AUTOATIVIDADE
1 As tecnologias têm evoluído vertiginosamente, alcançando níveis antes inimagináveis.
A evolução digital está presente na realidade das organizações. Acerca da inovação
digital atualmente, assinale a alternativa INCORRETA:
a) ( ) Software as a Servive.
b) ( ) Inteligência Artificial.
c) ( ) Internet das coisas.
d) ( ) Planejamento Estratégico.
2 É fundamental que haja um bom alinhamento estratégico entre as estratégias

empresariais e as inovações tecnológicas. Segundo o modelo de Rezende e Abreu
(2003), sobre alinhamento estratégico e tecnologia e quanto às variáveis que fazem
parte desse modelo, analise as opções a seguir:
I- Contexto Organizacional.
II- Recursos Humanos.
III- Concorrência
a) ( ) As opções I, II e III estão corretas.

b) ( ) As opções I e III estão corretas.
c) ( ) As opções I e II estão corretas.
d) ( ) Somente a opção III está correta.
3 Para que a inovação digital seja significativa, é fundamental que seja ajustada às
demandas do mercado e às necessidades dos seus clientes. Existem alguns
elementos de análise da inovação. Acerca desses elementos, classifique V para as
sentenças verdadeiras e F para as falsas:
( ) É preciso fazer uma sondagem para mapear os hábitos dos consumidores.

( ) É fundamental agregar das equipes profissionais que tenham visão digital.
( ) Para obter tecnologia de ponta, é necessário empregar dinheiro.
a) ( ) V – V – V.
b) ( ) V – F – V.
c) ( ) V – V – F.
d) ( ) F – F – V.
135
4 A evolução tecnológica tem evoluído a passos largos, tanto na esfera pessoal quanto
na esfera empresarial. Esta evolução trouxe consigo inúmeras novidades, como o
Software as Service e Everything as Serive. No entanto, no mundo empresarial, não
basta adquirir novos equipamentos ou serviços. Descreva qual outro aspecto que
deve ser adaptado às inovações tecnológicas.
5 O Planejamento Estratégico é uma ferramenta empresarial de suma importância nas

organizações, devendo ser desenvolvido em todas as áreas da organização. Esse
alinhamento deve ser realizado, também, com a área de tecnologia, para que os
investimentos se justifiquem. Descreva, pelo modelo proposto de Rezende de Abreu,
quais são os vetores que sustentam o alinhamento estratégico entre tecnologia e o
Planejamento Estratégico Empresarial.
136
TÉCNICAS DE AVALIAÇÃO E APRIMORAMENTO
DE INTERFACE
1 INTRODUÇÃO
Tradicionalmente, a utilização de sistemas incompatíveis se proliferou nas
empresas, os quais armazenavam dados vitais, sem mecanismos de busca e acesso
a tais dados, ou transferência entre sistemas. A proliferação do uso dos sistemas de
informação levou à fragmentação das informações, sendo que os principais problemas
dessa fragmentação são a dificuldade de obtenção de informações consolidadas e a
inconsistência de dados redundantes armazenados em mais de um sistema.
De acordo com Oliveira (2002, p. 149), "um sistema é uma rede de componentes
interdependentes que trabalham em conjunto para tentar realizar o objetivo do sistema".
Isso significa que as partes que compõe um sistema não são partes isoladas, mas ligadas
entre si de forma a se complementarem.
INTERESSANTE
Para realizar testes de aceitação e limites de erro dos sistemas, são
desenvolvidos “robôs” de testes que executam testes de forma exaustiva e
automática do sistema.
Nesse sentido, podemos considerar os sistemas como sistemas abertos, que

dependem do ambiente e da interação com esse para sobreviverem, podendo ter seu
desempenho analisado segundo critérios de eficiência e eficácia. Além disso, os sistemas
possuem os três componentes básicos de um sistema: recebem dados como entrada,
processam e fornecem informações como saída. Dessa forma, pode-se perceber a importância
de analisar o funcionamento dos sistemas para posteriormente estudar os sistemas.
2 TÉCNICAS DE AVALIAÇÃO MULTIDIMENSIONAL

Para o profissional de design, é necessário saber aplicar as técnicas de avaliação
e os seus componentes na interface. De acordo com Oliveira (2002, p. 23), um sistema
apresenta em seu funcionamento alguns componentes:
137
• Objetivos: própria razão de existência do sistema, ou seja, a
finalidade para qual o sistema foi criado.
• Entradas: tudo o que o sistema necessita para realizar suas operações,
sendo que essas entradas são obtidas no meio ambiente com o qual
o sistema interage. São exemplos de entradas para o sistema a mão
de obra ou pessoal, a matéria-prima ou materiais, as informações ou
leis, normas e padrões estabelecidos, tecnologias e máquinas.
• Processo de transformação: possibilita a transformação da
entrada em um produto, serviço ou resultado, caracterizado
como a saída do sistema.
• Saídas: resultados do processo de transformação. As saídas
devem ser coerentes com os objetivos do sistema e devem
ser quantificáveis de acordo com os critérios e os parâmetros
previamente estabelecidos.
• Controle e avaliação do sistema: permitem verificar se as saídas
estão de acordo com os objetivos estabelecidos.
• Retroalimentação ou realimentação (feedback): considerada como
a reintrodução, no sistema, de uma saída sob forma de informação.
Quando avaliamos um sistema, podemos utilizar diversos modelos para atingir tal
objetivo. Uma das maneiras de realizar essa avaliação é levando em consideração a qualidade das
informações geradas pelo sistema. É fundamental determinar qual informação é necessária e a
qualidade dessa informação quando o sistema está sendo avaliado, pois quando se implementa
um SI, espera-se que este forneça informações com a qualidade esperada.
Diversos são os métodos para avaliar os sistemas. É importante que a escolha do

método seja baseada em que se pretendem avaliar e que a avaliação não esteja centrada
apenas no retorno financeiro do investimento em sistemas, mas também nos benefícios
intangíveis que esse SI pode proporcionar e nas informações que ele pode disponibilizar.
Independente do modelo a ser utilizado para avaliar os sistemas é fundamental que

o sistema seja avaliado para que a empresa possa saber se o sistema implantado está ou
não atingindo os objetivos previamente estabelecidos. As variáveis a serem analisadas são:
• Funcionalidade.
• Interface de usuário.
• Disponibilidade de informações.
• Facilidade de acesso.
• Flexibilidade.
• Apresentação.
• Completude.
• Exatidão/Confiabilidade.
• Concisão.
• Relevância.
• Compreensibilidade.
• Consistência.
Tendo sido explanadas as técnicas de avaliação, a seguir, serão demonstradas

as camadas de análise da interface, suas propriedades e características da análise.
138
2.1 CAMADAS DE ANÁLISE DA INTERFACE
A maioria dos estudos sobre o comportamento de busca do usuário e as camadas
de análise da interface de um sistema digital engloba as características a seguir:
• Princípio do menor esforço
O sistema deve ser fácil de usar e possibilitar ao usuário encontrar as informações

de forma objetiva e sem dualidade
• Resistência à mudança
As mudanças no sistema devem ser realizadas de maneira gradual e evolutiva,

sem criar um impacto negativo na usabilidade.
• Quantidade de informação necessária
O sistema deve ser planejado de tal maneira a atender às necessidades objetivas

do usuário.
• Pesquisas orientadas
Os sistemas devem estar planejados com a capacidade de possibilitar pesquisas

orientadas e abertas aos usuários.
INTERESSANTE
A realidade virtual está sendo cada vez mais utilizada nos diversos
setores. Foi descrita uma ferramenta a partir da utilização da realidade
virtual utilizando o sistema operacional Android no setor imobiliário
(Vrinmotion), como sendo uma ferramenta de marketing. Leia mais em
Carvalho et al (2011): https://bit.ly/370tKJo.
• Temporalidade
As informações disponíveis devem ser atualizadas no menor espaço de tempo

para não haver conflito na tomada de decisão.
139
• Qualidade
As informações disponibilizadas pelo Sistema devem ter alto rigor de precisão e

confiabilidade. Segundo Dias (2001), as variáveis para avaliar um Sistema de Avaliação devem
considerar:Relevância: importância de determinada informação no contexto da busca.
➢ Apresentação: critérios de usabilidade.

➢ Formato: representação da informação (apresentação textual, tabelas e gráficos).
Quantidade: sobrecarga de informação na apresentação.
➢ Atualidade: confiabilidade na informação.
➢ Rapidez: tempo de espera para encontrar a informação necessária.
➢ Completeza: associação da informação com assuntos correlatos que podem agregar
valor à pesquisa.
➢ Facilidade: usabilidade de aprendizagem da informação. Medidas de sucesso da busca.
➢ Está associado às questões de usabilidade (tempo de acesso, facilidade de busca,
volume de informações etc.).
• Consistência
Variável associada ao desempenho do sistema de acordo com as expectativas

do usuário.
• Continuidade
Está associado à capacidade do Sistema de não haver ininterrupção que

prejudique o andamento normal do trabalho do usuário.
• Corretude
Quantidade de erros enfrentados pelo usuário no processo de busca da

informação.
• Precisão
Está associado aos fatores de usabilidade de software (portabilidade, extensibilidade).
• Satisfação do usuário
Realização de pesquisas semiestruturadas, que possibilitem acompanhar e

adaptar o sistema para um “estado da arte”. Os fatores ligados às variáveis da informação
que explicitam o perfil dos usuários.
140
Segundo Dias (2001, p. 2) “pode-se avaliar o sistema de informação a partir de
seus benefícios e dos custos decorrentes de sua adoção”. Os aspectos mais importantes
a serem considerados são:
• Tempo de acesso à informação.

• Significado da informação e seu valor agregado percebido pelo usuário no processo
de tomada de decisão.
• Apresentação da informação.
Dias (2001) esquematizou os níveis de avaliação de sistemas de informação e a

relação com os aspectos a serem avaliados.
FIGURA 8 – VARIÁVEIS DE AVALIAÇÃO DOS SI E OS ASPECTOS COMPUTACIONAIS
- Abrangência - Interface c/ usuário - Eficiência

- Funcionalidade - Operacionalidade - Consistência
- Flexibilidade - Continuidade
- Corretude
- Precisão
- Tempestividade
- Satisfação do usuário
FONTE: Dias (2001, p. 34)
141
A partir desses aspectos, é possível identificar características mais particulares
de avaliação e suas variáveis específicas, como:
• Abrangência
Verifica se o sistema executa todas as rotinas responsáveis pelo seu completo

funcionamento. Verifica-se pela razão entre a quantidade de rotinas que foram
automatizadas e que contribuem para o atendimento das necessidades dos usuários e
a quantidade das rotinas solicitadas pelo usuário.
• Funcionalidade
É o conjunto de métricas (DIAS, 2001), para o bom atendimento às necessidades

do usuário final. Para reparar uma deficiência, cada serviço ou modificação pode
representar uma métrica para avaliação. Quantificado pela razão entre quantidade de
requisitos atendidos e a quantidade de requisitos solicitados pelo usuário.
• Usabilidade
Considera as características de influenciam na Interface Homem-Máquina:
• Facilidade de uso.
• Facilidade de reuso.
• Eficiência.
• Poucos erros.
• Autoaprendizagem.
• Satisfação e prazer.
• Percepção favorável do usuário.
• Software
São os aspectos relativos à qualidade do software e sua capacidade de se

adequar às necessidades do usuário e facilidade de uso, sendo eles:
• Entradas dos campos são pré-definidos.

• Crítica às entradas.
• Atualização dos dados já fornecidos.
• Capacidade de selecionar dispositivos de entrada/saída.
• Possibilidade de formatação da saída.
• Saídas padronizadas e identificadas.
• Existência de sistema de ajuda.
• Sistema de ajuda apresenta propostas.
• Documentação abrangente.
142
• Procedimentos dos manuais são suficientes para executar as tarefas.
• Material didático suficiente.
• Material didático que aborda todas as funções.
• Operacionalidade
Engloba as seguintes características categorias de desempenho do sistema:
➢ Tempestividade: rapidez que a informação é liberada.

➢ Métricas:
o Intervalo de tempo entre atualizações.
o Tempo para informação ficar disponível.
o Tempo de acesso.
➢ Eficiência: recursos e tempo envolvido na operação estejam compatíveis com o

nível de desempenho requerido pelo usuário.
Portanto, é possível compreender como as técnicas de análise podem ser úteis

para a elaboração do projeto de design. A seguir, serão analisadas as perspectivas de
análise da interface, ponto fundamental de construção de um design.
3 PERSPECTIVAS DE ANÁLISE DA INTERFACE

Na análise da interface, o usuário e sistema trocam turnos em que um “fala” e
o outro “ouve”, interpreta e realiza uma ação. Essa ação pode ser tão simples quanto
dar uma resposta imediata à fala do outro, ou consistir em operações complexas que
alteram o estado do mundo. Uma definição de interface utiliza as perspectivas físicas,
perceptivas e conceituais.
A dimensão física inclui os elementos de interface que o usuário pode manipular,

enquanto a dimensão perceptiva engloba aqueles que o usuário pode perceber. A
dimensão conceitual resulta de processos de interpretação e raciocínio do usuário
desencadeados pela sua interação com o sistema, com base em suas características
físicas e cognitivas, seus objetivos e seu ambiente de trabalho.
LEMBRETE
Os profissionais de design devem sempre estar atentos às novas
formas de avaliação das interfaces, buscando ferramentas que
auxiliem nessa tarefa.
143
As interfaces mais comuns envolvem elementos visuais e sonoros, com entra-
da de dados via teclado e mouse. Outros tipos de interfaces, como interface via voz e
entrada de dados através de canetas, estão se tornando frequentes, devido à dissemi-
nação de dispositivos móveis.
É importante saber se a interface apoia adequadamente os usuários nas suas

tarefas e no ambiente em que será utilizado. Assim como testes de funcionalidade são
necessários para se verificar a robustez da implementação, a avaliação de interface é
necessária para se analisar a qualidade de uso de um software. Quanto mais cedo forem
encontrados os problemas de interação ou de interface, menor o custo para consertá-los.
Alguns dos principais objetivos de se realizar avaliação de sistemas interativos são:
• Identificar as necessidades de usuários ou verificar o entendimento dos

projetistas sobre essas necessidades.
• Identificar problemas de interação ou de interface.
• Investigar como uma interface afeta a forma de trabalhar dos usuários.
• Comparar alternativas de projeto de interface.
• Alcançar objetivos quantificáveis em métricas de usabilidade.
• Verificar conformidade com um padrão ou conjunto de heurísticas.
Os avaliadores podem analisar os dados coletados de forma preditiva, interpretativa

ou experimental. A análise preditiva é realizada quando os avaliadores, ao analisarem os
dados coletados de especialistas, tentam prever que tipo de problemas os usuários
enfrentarão. Essa análise pode ser feita através de uma inspeção da interface ou em
função de técnicas de modelagem.
A análise interpretativa é realizada quando, ao analisarem os dados coletados a

partir da interação do usuário com o sistema, os avaliadores procuram explicar os
fenômenos que ocorreram durante essa interação. Normalmente, considera-se a análise
como sendo interpretativa quando ela é feita sobre dados coletados em ambientes
naturais, sem a interferência dos observadores nas atividades dos usuários.
Os dados coletados em ambientes controlados, como laboratórios, precisam ser

analisados em função das variáveis sendo observadas. Embora essa análise também
dependa da interpretação do avaliador. Os pontos relevantes a serem considerados
estão elencados a seguir:
• Determinar os objetivos gerais que a avaliação deverá tratar.

• Explorar perguntas específicas a serem respondidas.
• Escolher o paradigma e as técnicas de avaliação.
• Identificar questões práticas que devem ser tratadas.
• Decidir como lidar com questões éticas.
• Avaliar interpretar e apresentar os dados.
144
A avaliação analítica ou por inspeção é utilizada geralmente para buscar
problemas de usabilidade em um projeto de interface existente, e analisar esses
problemas com vistas a fazer recomendações para consertá-los, melhorando a
usabilidade do projeto.
DICA
Os primeiros sites na época da WEB 1.0 possuíam muitos textos,
poucas imagens e utilizavam somente tecnologia HTML. Não utilizavam
sons e animações, nem quaisquer outros sistemas multimidiáticos
para deixar o ambiente WEB atrativo ao usuário e pouco se falava de
acessibilidade. Para saber mais, leia o artigo de Ribas, Vanzin e Ulbritcht:
https://estudosemdesign.emnuvens.com.br/design/article/view/266.
145
LEITURA
COMPLEMENTAR
UM ENFOQUE ERGONÔMICO SOBRE A METODOLOGIA DE DESIGN DE INTERFACES
DIGITAIS PARA DISPOSITIVOS MÓVEIS
Adriana Chammas
Manuela Quaresma
Cláudia Mont'Alvão
O mercado de smartphones atingiu a maturidade ao alcançar uma relativa

homogeneidade de funcionalidades – em um processo de contínuo desenvolvimento
tecnológico – respeitadas as diferenças de categorias no escopo do produto. O diferencial
desse mercado são as opções de função personalizáveis de seus aplicativos, também
chamados apps, que cada fabricante permite rodar em seu sistema operacional. Para
ilustrar a relevância dos aplicativos para mobile no cotidiano dos usuários, a pesquisa
mundial feita pelo instituto Nielsen aponta o Brasil em segundo lugar (74% dos usuários)
no consumo de aplicativos para mobile, atrás da Coréia do Sul (81%). Os tipos de
aplicativos para mobile mais usados entre os brasileiros são: games (68%), redes sociais
(67%), sistemas de orientação (mapas, navegação e busca) (51%), filmes (49%), notícias
(45%), tempo (37%), instituições financeiras (36%), compras (26%) e produtividade (24%),
nessa ordem. Os apps são aplicativos desenvolvidos para rodar em dispositivos mobile,
disponíveis on-line e adequados ao sistema operacional do fabricante do dispositivo que
se propõem a incrementar a produtividade do usuário. Entre os sistemas operacionais
(os) para smartphones existentes, quatro destacam-se em termos de expressividade no
mercado desses aplicativos, são eles: ios, Android, Windows Phone e Blackberry.
Os sistemas operacionais diferem-se pela estrutura de navegação e pelo vínculo

às lojas de aplicativos (app stores), a plataforma de distribuição digital desses aplicativos.
Estas lojas disponibilizam o download imediato dos aplicativos, normalmente dispostos
em categorias (entretenimento, produtividade, games etc.) e obedecem às regras de
comercialização dos fabricantes do aparelho e/ou do os. Não limitadas à comercialização,
essas regras também abrangem conteúdo e qualidade desses aplicativos.
Existem basicamente dois tipos de aplicativos desenvolvidos para smartphones:

os apps nativos e os web-apps. Os apps nativos são aplicativos dedicados a sistemas
operacionais específicos, têm acesso irrestrito a recursos do sistema operacional do
aparelho, bem como aos componentes do hardware (gps, acelômetro e câmera), e
oferecem uma rica experiência ao usuário. Os apps nativos precisam seguir um pacote de
desenvolvimento de software específico do os para o qual estiver sendo desenvolvido, o
sdk – Software Development Kit. Os sdks são disponibilizados pelas fabricantes dos OSs
146
para que os desenvolvedores se adequem a eles. Já os web-apps são aplicativos que
rodam exclusivamente em navegadores (browsers), funcionam de forma similar a sites
versão mobile, têm acesso limitado ao hardware do sistema operacional e funcionam
exclusivamente on-line. A decisão de desenvolver um ou outro, ou seja, nativo ou
web-app, depende de fatores como objetivos do negócio, da audiência, dos requisitos
técnicos entre outros.
Apesar das similaridades em algumas interações, os sistemas para mobile

diferem em vários aspectos relacionados à estrutura e à navegação. Embora
essas diferenças devam ser pontuadas, o mais importante é a preocupação que
os desenvolvedores devem ter em adaptar as linhas de código, considerando todos os
elementos que possam afetar a experiência holística do usuário. Skeldon (2011) tem como
situação ideal combinar as funcionalidades dos aplicativos nativos à conectividade dos
web-apps. Wroblewski (2011) comenta em seu livro Mobile First que, se uma proposta
de criar um aplicativo nativo para cada plataforma fosse cumprida, os custos de
manutenção se tornariam proibitivos. Para driblar algumas das restrições técnicas dos
diferentes OS, como o tamanho e a resolução das telas, por exemplo, os desenvolvedores
têm se dedicado a criar soluções híbridas de web-apps, nas quais os elementos da
arquitetura se apresentam de forma idêntica ao usuário independente da plataforma.
Com um mercado tão atraente, é natural – e esperado – que as empresas

desenvolvedoras de aplicativos precisem entregar cada vez mais rápido seu produto
para os clientes e, por conseguinte, inseri-los nas apps stores. O balizador dessa
engrenagem é o desafio dos desenvolvedores, que além de trabalhar sob restrições
orçamentárias e temporais (cronogramas restritos), precisam ainda levar em conta os
diferentes sistemas operacionais e as diferentes características de cada aplicativo, ou
seja, se serão aplicativos nativos ou web-apps.
FONTE: <https://www.e-publicacoes.uerj.br/index.php/arcosdesign/article/viewFile/12188/9547>. Acesso

em: 30 out. 2021.
147
RESUMO DO TÓPICO 4
• Quais são as técnicas de avaliação multidimensional de interfaces, onde se

encontram diversos tipos de modelos e métodos de avaliação, cada um se
adequando ao sistema e ao contexto empresarial.
• Compreender as camadas de análise, suas variáveis e componentes, e como aplicar

essas variáveis na avaliação e aprimoramento do design das interfaces.
• Aplicar as diversas perspectivas de análise de interface, como a identificação das

necessidades, comparação e conformidade para que o design obtenha um alto
poder de interação com o usuário.
• Compreender e saber aplicar as divers técnicas de avaliação nos desenvolvimentos

de projeto de design e interfaces digitais, tornando o produto com qualidade
satisfatória, cumprindo o seu objeto de forma eficiente e eficaz junto ao usuário.
148
AUTOATIVIDADE
1 A análise da interface digital pode ser realizada por camadas. Essas camadas têm
as características próprias. Acerca dessas características, assinale a alternativa
INCORRETA:
a) ( ) Princípio do menor esforço – o sistema deve ser fácil de usar.

b) ( ) Resistência à mudança – mudanças devem ser realizadas de maneira gradual.
c) ( ) Quantidade de informação – o sistema deve ter o máximo de informações.
d) ( ) Temporalidade – informações devem ser atualizadas no menor espaço de tempo.
2 As informações disponibilizadas pelo sistema devem ter alto rigor de precisão e

confiabilidade. Nesse sentido, as variáveis para avaliar um sistema de avaliação devem
considerar alguns elementos. Acerca desses elementos, analise as opções a seguir:
I- Relevância
II- Atualidade.
III- Completeza.
a) ( ) As opções I, II e III estão corretas.

b) ( ) Somente a opção II está correta.
c) ( ) Somente a opção I está correta.
d) ( ) Somente a opção III está correta.
3 Existem níveis de avaliação de sistemas e a relação com os aspectos a serem

avaliados. Acerca desses níveis, classifique V para as sentenças verdadeiras e F para
as falsas:
( ) Abrangência verifica se o sistema executa todas as rotinas responsáveis pelo seu

completo funcionamento.
( ) Usabilidade considera as características de influenciam na Interface Homem-
Máquina
( ) Operacionalidade são os aspectos relativos à qualidade do software e sua
capacidade de se adequar às necessidades.
a) ( ) V – V – V.
b) ( ) V – F – V.
149
c) ( ) V – V – F.
d) ( ) F – F – V.
4 A avaliação de interface é de extrema importância no desenvolvimento de um projeto

de design. Independente do modelo a ser analisado, alguns princípios devem ser
seguidos. Cite e explique, pelo menos, três desses princípios.
5 Sobre a avaliação das interfaces, são usados métodos que consideram as camadas
da interface. O que significa a camada do “princípio do menor esforço”?
150
REFERÊNCIAS
CAMARGO, L. S. de A. de; VIDOTTI, S. A. B. G. Arquitetura da informação:
uma abordagem prática para o tratamento de conteúdo e interface em am-
bientes informacionais digitais. Rio de Janeiro: Editora LTC, 2011.
DIAS, F. S. Avaliação de sistemas de informação: análise da literatura cientí-

fica no período 1985-2005. 2006. 161 f. Tese (Doutorado em Ciência da Informa-
ção) – Escola de Ciência da Informação, Universidade Federal de Minas Gerais,
Belo Horizonte. Disponível em: https://bit.ly/370uQot. Acesso em: 7 fev. 2022.
DIAS, R. Métricas para Avaliação de Sistemas de Informação. Brasília:

Instituto de Assistência Técnica da AEUDF, 2001.
DIAS, F. S. Migração conceitual entre sistemas de recuperação da in-

formação e Ciências Cognitivas: uma análise discursiva. 2011. 178 f. Tese
(Doutorado em Ciência da Informação) – Escola de Ciência da Informação,
Universidade Federal de Minas Gerais, Belo Horizonte. Disponível em: https://
bit.ly/3vHCbDP. Acesso em: 7 fev. 2022.
FERREIRA, S. M. S. P.; REIS, G. A Prática de arquitetura de informação de web-

sites no Brasil. Revista Transinformação, Campinas, v. 20, n. 3, p. 285-307,
set/dez. 2008. Disponível em: https://bit.ly/3C9nvhX. Acesso em: 8 fev. 2022.
FERREIRA, M. N. F.; GONÇALVES, B. S.; WANGNEHEIM, C. G. V. Design visual

para interfaces de aplicativos: análise de modelos de referência. Rev. Educa-
ção Gráfica, Bauru, v. 23, n. 1, p. 79-95, abril, 2019. Disponível em: https://bit.
ly/36Pygdss. Acesso em: 8 fev. 2022.
GARRETT, J. J. The Elements of User Experience: User-Centered Design for

the Web and Beyond, Second Edition. Berkeley: New Riders, 2011.
LEMAY, L.; COLBURN., R.; TYLER, D. Aprenda a criar páginas Web com HTML
e XHTML em 21 dias. São Paulo: Pearson Education do Brasil, 2002.
MICROSOFT. Site oficial. Documentação técnica da Microsoft. c2021. Dispo-

nível em: https://docs.microsoft.com. Acesso em: 1 out. 2021.
OLIVEIRA, D. P. R. Sistemas de Informações Gerenciais. 2. ed. São Paulo:

Atlas, 2002.
QUEIROZ, J. Sobre a síntese de sistemas e criaturas semióticas: Compu-

tação, cognição e semiose. Bahia: EDUFBA, 2007.
151
ROBREDO, J. Sobre arquitetura da informação. Rev. Ibero-americana de
Ciência da Informação, Brasília, v.1, n.2, p. 115-137, jul./dez. 2008. Disponível
em: https://bit.ly/3pA7fS5. Acesso em: 8 fev. 2022.
REZENDE, D. A.; ABREU, A. F. TI Aplicada à Sistemas de Informações Em-

presariais. 3. ed. São Paulo: Atlas, 2003.
SCHEEREN, F. M. A Arquitetura de Informação na Prática: o desenvolvi-

mento do acervo digita. 2008. 66 f. UFRS. Trabalho de Conclusão de Curso
(Graduação em Ciência da Informação) – Curso de Ciência da Informação, Uni-
versidade Federal do Rio Grande do Sul, Porto Alegre. Disponível em: https://
bit.ly/3KdZXLp. Acesso em: 8 fev. 2022.
SILVA, M. A. T. et al. O que é arquitetura da informação. Rev. Biblionline, João

Pessoa, v. 7, n. 1, p. 11-21, 2011. Disponível em: https://bit.ly/35JAiLJ. Acesso
em: 8 fev. 2022.
UNIVERSIDADE FEDERAL DE SANTA CATARINA (UFSC). Comissão de Acom-

panhamento e Validação de Materiais Didáticos – CVMD/UFSC. Florianó-
polis, 2011. Disponível em https://bit.ly/3Ki3XdN. Acesso em: 1 out. 2021.
152

Design Na Web e Dispositivos Móveis

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design Na Web e Dispositivos Móveis

Enviado por

Direitos autorais:

Formatos disponíveis

Design na Web e

Prof. Gabriel Marante de Oliveira

Revisão, Diagramação e Produção:

Ficha catalográfica elaborada pela equipe Conteúdos EdTech UNIASSELVI

Na Unidade 1, será abordada a evolução do design digital, os fundamentos de

Em seguida, na Unidade 2, será estudada a usabilidade e as técnicas e padrões

Por fim, na Unidade 3, serão estudadas as arquiteturas de informação, os

Os UNIs eram blocos com informações adicionais – muitas

Na Educação a Distância, o livro impresso, entregue a todos os

Junto à chegada da GIO, preparamos também um novo

Com o objetivo de enriquecer seu conheci-

Acesse o QR Code, que levará ao AVA, e veja as novidades que

Conte conosco, estaremos juntos nesta caminhada!

TÓPICO 1 - FUNDAMENTOS DE INTERFACE..........................................................................3

TÓPICO 2 - DESENVOLVIMENTO DE SOFTWARE PARA WEB............................................. 19

TÓPICO 3 - DESENVOLVIMENTO DE SOFTWARE PARA DISPOSITIVOS MÓVEIS.............. 31

TÓPICO 4 - DESIGN NA WEB E DISPOSITIVOS MÓVEIS..................................................... 39

UNIDADE 2 — USABILIDADE E INTERFACE COM O USUÁRIO........................................... 55

TÓPICO 1 — ERGONOMIA E USABILIDADE EM PLATAFORMAS DIGITAIS..........................57

TÓPICO 2 - INTERFACE HUMANO COMPUTADOR............................................................. 69

TÓPICO 3 - UI – USER INTERFACE...................................................................................... 83

TÓPICO 4 - UX – USER EXPERIENCE.................................................................................. 89

UNIDADE 3 — ARQUITETURA E AVALIAÇÃO DE SISTEMAS PARA WEB

TÓPICO 1 — ARQUITETURA DA INFORMAÇÃO NA WEB E DISPOSITIVOS MÓVEIS.........105

TÓPICO 2 - GRÁFICOS E EDIÇÃO DE IMAGENS................................................................ 119

TÓPICO 4 - TÉCNICAS DE AVALIAÇÃO E APRIMORAMENTO DE INTERFACE................. 137

• compreender as interações entre o usuário e como os sistemas computacionais

• analisar o design nos ambientes digitais com base em técnicas apresentadas,

• saber como são estruturados os sistemas de web e dispositivos móveis pela

• conhecer os padrões de design, os tipos predominantes de design e como

• saber quais são os designs predominantes e como evoluíram os designs.

TÓPICO 1 – FUNDAMENTOS DE INTERFACE

Os objetivos desta unidade visam apresentar ao aluno os fundamentos técnicos

Nesta unidade, mais especificamente, serão estudados os fundamentos

Desde o surgimento dos computadores, e durante várias décadas, o usuário de

FIGURA 1 – TELA DOS PRIMEIROS COMPUTADORES

As telas dos primeiros computadores eram monocráticas e continham somente

Diante desse panorama, os cientistas da computação perceberam a necessidade

Designers de software têm explorado maneiras melhores de organizar

É possível perceber a importância da relação do ser humano com os dispositivos

O designer precisa seguir fundamentos que o auxiliem no desenvolvimento de

• Uso equitativo: a interface não pode excluir nenhum grupo.

Dias (2006, p. 42), elenca quais as variáveis devem ser analisadas ao se

• Facilidade de uso – o usuário quer ter acesso imediato à

FIGURA 3 – A BUSCA PELO USO INTUITIVO E DE FÁCIL MANIPULAÇÃO

FONTE: <https://bit.ly/3hhXF1r>. Acesso em: 31 jan. 2022.

No processo de desenvolvimento do design de uma interface, é fundamental

2.2 PROPRIEDADES DA INTERFACE NO AMBIENTE DIGITAL

• Visibilidade: apenas as coisas necessárias têm que estar visíveis

• Clareza na arquitetura da informação: é essencial que o usuário consiga

O designer deve considerar os diversos tipos de usuários que utilizarão o

Nessa evolução, um conceito importante do desenvolvimento do design entrou

2.3 ENGENHARIA SEMIÓTICA

Semiótica como disciplina teve seu desenvolvimento a partir dos

Benyon (2011, p. 392) complementa o sentido de semiótica:

Semiótica ou semiologia é o estudo dos sinais e símbolos e de como

Diante desses conceitos expostos, é possível compreender que, no momento

Um signo é codificado pelo designer para estabelecer a comunicação com os usuários.

FONTE: Adaptada de Barbosa e Silva (2010)

A interface de um sistema é um grande conjunto de símbolos e suas interações

Como exemplo, na Figura 4, a operação para “salvar” um arquivo está

FONTE: Adaptada de Barbosa e Silva (2010)

Por outro lado, a Engenharia Semiótica compreende um aprofundamento da

[...] a Engenharia Semiótica se concentra na identificação e prevenção