Interface, Navegação e Interação1

Prévia do material em texto

e-Book 1
Maria Goretti Menezes Miacci
INTERFACE, NAVEGAÇÃO 
E INTERAÇÃO
Sumário
INTRODUÇÃO ������������������������������������������������� 3
DESIGN DE NAVEGAÇÃO ������������������������������� 5
Teoria da carga cognitiva no ambiente virtual �������������������� 5
Navegação hipermidiática centrada no usuário ��������������� 18
Interface gráfica do usuário nas multiplataformas (GUI) 28
Usabilidade em multiplataformas ������������������������������������� 33
CONSIDERAÇÕES FINAIS ����������������������������44
REFERÊNCIAS BIBLIOGRÁFICAS & 
CONSULTADAS ��������������������������������������������45
3
INTRODUÇÃO
Para você iniciar os estudos sobre design de 
navegação, é interessante refletir sobre como 
ocorre o processo de navegação na internet por 
meio de páginas, aplicações e sites. Utiliza-se um 
navegador ou browser, no qual o usuário digita o 
endereço de um domínio chamado de Uniform 
Resource Locator (URL), que em português quer 
dizer “Localizador Padrão de Recursos”, para ter 
acesso ao hipertexto ou mídia, que são páginas 
web baseadas em textos com hiperlinks para se 
conectar a outras páginas internas (permanecendo 
no mesmo domínio) ou páginas externas (através 
de domínios de outro website de um servidor). 
Destacam-se as análises sobre a teoria da carga 
cognitiva nas multiplataformas�
Para levá-lo a entender a jornada do usuário, nas 
questões de design que serão centradas no ser 
humano, conforme Benyon (2011), destacam-se as 
perspectivas de diferentes contextos e com base 
na Interação Humano Computador (IHC).
É importante trazer para você os aspectos gerais 
do design de navegação aplicados no uso da in-
terface gráfica do usuário nas definições quanto 
às multiplataformas: web e mobile�
4
Atente-se também ao termo usabilidade para tornar 
qualquer sistema fácil de aprender e usar, perante 
a variedade de pessoas, atividades, contextos e 
tecnologias� Assim, você pode obter parâmetros de 
tempo consumido nas tarefas, número de erros e 
de como tornar um usuário competente com base 
nos critérios de avaliação da usabilidade�
55
DESIGN DE NAVEGAÇÃO
Neste tópico você conhecerá as principais ferramentas 
de produção de soluções multi e hipermidiáticas, 
que consistem na navegação hipertextual através 
de palavras-chave ou ícones, também chamados 
de nós, conforme afirmam Filatro e Cairo (2015), 
com dicas no uso de tecnologias como: programas 
(softwares), ferramentas de autoria e editoração 
eletrônica baseada em computação em nuvem 
com acesso a multiplataformas, pois “agora que 
estamos introduzindo a interação nos espaços de 
informação e a interação por meio de dispositivos, 
o mundo está se tornando um lugar mais complexo 
e mais rico em mídias” (BENYON, 2011, p. 406).
TEORIA DA CARGA COGNITIVA NO 
AMBIENTE VIRTUAL
É importante compreendermos o que é a carga 
cognitiva nos ambientes virtuais, ou seja, saber 
processar as informações de forma alinhada ao 
pensamento cognitivo humano. Segundo Filatro e 
Cairo (2015, p. 45), “o volume de informações ofe-
recidas ao aluno é compatível com sua capacidade 
de compreensão”, isso se comprova nas pesquisas 
da teoria da carga cognitiva desenvolvidas por 
John Sweller, psicólogo australiano especialista em 
66
cognição e instrução, professor da Universidade 
de New South Wales�
Ainda de acordo com Filatro e Cairo (2015), é es-
sencial sabermos dosar os tipos de carga cognitiva 
ao usuário, que podem ser:
 y Intrínseca – causada pela interação do usuário 
com elementos que são essenciais; como na reso-
lução de fórmulas matemáticas, basta particionar 
em tópicos ou seções;
 y Relevante – consiste no trabalho mental para 
aplicar a transferência do cognitivo do usuário 
em novas situações, para isso acontecer basta 
oferecer diferentes contextos�
 y Extrínseca ou irrelevante – manifesta em textos 
pouco claros, com ausência de padrões e excesso 
de elementos visuais que desviam a atenção do 
usuário�
Para que ocorra um balanceamento de carga cognitiva 
hipertextual, é preciso ter um senso de localização 
e direção das informações, que segundo Filatro e 
Cairo (2015) podem ser desenvolvidas pelo uso de 
mapas mentais (consiste em uma das formas de 
organizar e representar graficamente as ideias).
Ainda segundo as autoras, é necessário resgatar 
também a noção de esquemas mentais, que “equi-
valem às unidades de conhecimento armazenadas 
na memória de longo prazo” (FILATRO; CAIRO, 2015, 
77
p 297), ou seja, saber usar a rede cognitiva do usu-
ário, que interliga as unidades do conhecimento 
com as demais, ativando um ou mais conceitos 
da memória de longo prazo, resultando em um 
esquema significativo.
Na Tabela 1 destacam-se oito tipos diferentes de 
formas de ligação hipertextual para se criar links 
entre nós relacionados: bloco a bloco unidirecional; 
bloco a bloco bidirecional; string a bloco unidire-
cional; string a string unidirecional; um a muitos; 
muitos a muitos; links categorizados e estrutura 
rizomática:
Tabela 1: Tipos de ligação hipertextual�
Representação gráfica Tipos, vantagens e 
desvantagens
BLOCO A BLOCO UNI-
DIRECIONAL – simples, 
desenvolvido sem muito 
planejamento, porém o 
usuário fica sem referên-
cia do link, devido aos 
blocos longos�
BLOCO A BLOCO BIDIRE-
CIONAL – os usuários 
reconstituem seus pas-
sos, criando um senso de 
orientação, porém seria 
mais fácil se fosse no 
formato de glossário ou 
de disponibilização de 
imagens�
88
Representação gráfica Tipos, vantagens e 
desvantagens
STRING A BLOCO 
UNIDIRECIONAL – tem 
um senso de direção ao 
usuário, acrescentando 
retórica, e estimula o uso 
de diferentes tipos de 
anotações e ligação, po-
rém é desorientador, pois 
o usuário nesses blocos 
longos não sabe o bloco 
de chegada ao qual o link 
se refere�
STRING A STRING UNI-
DIRECIONAL – oferece 
ao usuário um caminho 
claro até a string de che-
gada, porém requer mais 
planejamento do que os 
links do bloco inteiro�
UM A MUITOS – utiliza 
a ramificação perso-
nalizada pelo usuário, 
dando uma visão geral 
do conteúdo; ajuda na 
orientação quando usa 
mapas ou menus, porém 
pode gerar uma sensa-
ção de textos atomizados 
e desconectados�
99
Representação gráfica Tipos, vantagens e 
desvantagens
MUITOS A MUITOS – mui-
to usado em glossários, 
tabelas e outros tipos 
de dados; destaca-se o 
reuso das informações 
e privilegia os usuários 
com diferentes níveis de 
conhecimento, devido à 
forma simples de gerar 
documentos�
Perfil
LINKS CATEGORIZADOS 
– ao rotular claramente, 
funciona como prévia de 
bloco de chegada (po-
p-up ou janelas), porém 
pode confundir a área de 
leitura ao gerar resulta-
dos diversos para quem 
segue os links�
Perfil
ESTRUTURA RIZOMÁ-
TICA – permite que se 
acrescentem informa-
ções a um hipertexto ini-
cial, portanto, a estrutura 
original cresce de forma 
dinâmica a partir da con-
tribuição dos usuários, 
conforme ocorre com o 
modelo do site Wikipedia, 
porém requer tratamento 
editorial permanente�
Fonte: Adaptado Filatro e Cairo (2015)
1010
Na Tabela 2 destacam-se três categorias de cri-
térios para seleção de links externos: altamente 
recomendados, arriscados e inapropriados�
Tabela 2: Categorias de links externos�
Categoria altamente recomendados – como 
critérios tem-se sites confiáveis, estáveis e perma-
nentes, como exemplos: organizações nacionais 
e internacionais reconhecidas; instituições aca-
dêmicas; sites governamentais (esferas: federal, 
estadual e municipal); arquivos abertos de jornais 
e revistas disponíveis on-line; associações e sin-
dicatos; supersites que indexam e classificam os 
sites de uma área de conhecimento ou prática�
Categoria arriscados – como critérios tem-se 
sites instáveis, pouco confiáveis e com alto risco 
de extinção ou indisponibilidade, como exemplos 
de páginas: mantidas por estudantes, mesmo que 
no nível de mestrado ou doutorado; mantidas por 
professores, que podem mudar de semestre para 
semestre e página pessoais (blogs).
1111
Categoria inapropriados – como critériostem-se 
sites com finalidade comercial ou sem origem 
comprovada, como exemplos: comerciais ou 
que disparam anúncios em caixas pop-up; sites 
que exijam inscrição de pagamento; existência 
de links quebrados ou que conduzam a conteúdo 
inapropriado; sites com conteúdo ofensivo ou 
com preconceito velado; sites com conteúdo 
impreciso ou excesso de erros ortográficos e 
gramaticais; sites de autoria desconhecida ou 
credibilidade duvidosa; sites sem autoria ou 
fonte explícita; sites que solicitam liberação de 
cookies (libera-se uma etiqueta em que várias 
informações de navegação do usuário no site 
serão armazenadas).
Fonte: Adaptado de Filatro e Cairo (2015)
Na Tabela 3 destacam-se quatro formatos de 
estruturas da informação: sequencial, em árvore, 
em rede e rizomática.
Tabela 3: Tipos de estrutura da informação�
Representação gráfica Características
Sequencial – apresenta os 
assuntos estruturados; o usu-
ário não controla o percurso 
e transcorre linearmente os 
tópicos, encontra-se em tex-
tos convencionais impressos�
1212
Representação gráfica Características
Em árvore – organiza os con-
teúdos a partir de uma ideia, 
um princípio e um conceito 
principal, subdivididos em 
tópicos descendentes (como 
o mapa mental), encontra-se 
em hipertexto com as opções 
de navegação no formato 
simples e o usuário possui 
várias possibilidades de 
escolha�
Em rede – consiste em uma 
riqueza de ligações entre 
diferentes tópicos de conte-
údo sem regra hierárquica, 
encontra-se em hipertexto, 
porém o usuário pode se per-
der devido à sobrecarga de 
múltiplas ligações possíveis 
e da necessidade de tomar 
decisões a cada novo item a 
consultar�
Rizomática – permite ao usu-
ário, ou usuários, inserir no-
vas informações ao material 
preexistente, encontra-se em 
livros digitais ou em páginas 
web colaborativas, também 
conhecida como processo 
wiki, assim a estrutura origi-
nal cresce dinamicamente�
Fonte: Adaptado de Filatro e Cairo (2015)
1313
É importante usar essas diretrizes dos quadros 1, 
2 e 3 na organização dos diversos conteúdos que 
podem ser apresentados ao usuário, como:
“Texto para mídias: livros impressos, guias, ma-nuais ou roteiros e estudo de caso;
Hipertexto: livros digitais;
Imagem: organizadores gráficos, infográficos, his-
tórias em quadrinhos e ilustrações multiquadros;
Áudio: podcasts;
Multimídia: apresentações de slides, animações, 
objetos de aprendizagem, jogos educacionais e 
simulações;
Vídeo: videoaulas, entrevistas e debates, noticiários, 
documentários, vídeos de modelagem de comporta-
mento e narrativas instrucionais (FILATRO e CAIRO, 
2015, p. 235).”
Outro ponto a se considerar na carga cognitiva 
é a motivação e organização do conteúdo para 
o usuário se manter em determinada atividade 
virtual, conforme Filatro e Cairo (2015) destacam 
nos modelos:
 y Modelo Atenção, Relevância, Confiança e 
Satisfação (ARCS) – leva em conta a expectativa 
e os valores como fatores determinantes; encaixa-
-se também o quinto princípio motivacional neste 
modelo, consideradas juntas: a volição e autode-
1414
terminação, portanto deve-se levar em conta as 
questões subjetivas e as necessidades do usuário 
(público-alvo), logo, é intrínseco montar um roteiro 
de perguntas-guia e estratégias motivacionais para 
aplicar no design a ser desenvolvido�
 y Modelo Analysis, Design, Development, Imple-
mentation and Evaluation (ADDIE) – é desenvolvida 
pelo profissional de Design Instrucional (DI), que 
executa os processos e aplicação das seguintes 
etapas: análise, design, desenvolvimento, imple-
mentação e avaliação para o ensino a distância 
(EaD) em ambientes virtuais do aluno (AVA) e 
massive open online course (MOOC), curso online 
aberto e massivo�
A seguir, vamos conferir as categorias do modelo 
ARCS, segundo Filatro e Cairo (2015):
 y Categoria atenção – usar atividades interati-
vas, humor, estudo de caso e situações problema 
para resolução;
 y Categoria relevância – destacar os objetivos 
e como alcançar e explorar a zona de desenvolvi-
mento proximal (ZDP), de Vygotsky. Aproveita-se 
a experiência real do usuário e as aquisições de 
novas potencialidades, com variações na forma 
de trabalhar e organizar as informações;
 y Categoria confiança – ajudar o usuário quanto 
ao sucesso dos critérios de avaliação; para isso 
acontecer, precisa-se montar atividades signifi-
1515
cativas com feedback da sua evolução e inserir 
contextos da gamificação. Engajar no ambiente 
virtual vai ajudar bastante no comprometimento 
para realizar as atividades;
 y Categoria satisfação – exemplificar o conteúdo 
ao usuário, destacar a gamificação como reconhe-
cimento do empenho nas atividades e deixar claro 
os critérios de avaliação�
 y Categoria volição e autodeterminação – des-
taca-se o poder de escolha do usuário.
Na prática do design de navegação, tem-se uma 
gama de inovações tecnológicas atualizadas 
constantemente e que podem ser veiculadas no 
processo de produzir hipermídias; destacam-se 
também as ferramentas de autoria e a editoração 
eletrônica�
Nas questões das inovações tecnológicas, con-
forme Filatro e Cairo (2015), destacam-se alguns 
programas (softwares), que devem ser pesquisados 
na internet, para download gratuito ou pago, pois 
sofrem constantes mudanças e atualizações, assim 
você terá como editar imagens, fotos, gráficos e 
desenhos; produzir, gravar e editar vídeo e áudio; 
criar simulações, tutoriais, exercícios e testes e 
que permitem a produção de formatos diversos 
de arquivos, como doc, ppt, pdf e xls, entre outros�
1616
As ferramentas de autoria “oferecem um conjunto 
de formulários predefinidos para a organização 
de tópicos em telas, apresentação de conteúdo, 
inserção de imagens, incorporação de áudio e ani-
mação” (FILATRO; CAIRO, 2015, p. 104), disponíveis 
gratuitamente na internet�
Conheça ferramentas disponíveis on-line para a criação 
de conteúdo
Para criar sites e blogs: WIX (https://pt.wix.com/) e 
BLOGGER (https://www.blogger.com/).
Para edição de mapas mentais: LUCIDCHART (https://
www.lucidchart.com/).
Para edição de documentos, planilhas, apresentações, 
formulários e desenhos: GOOGLE DOCS (https://www.
google.com/intl/pt-BR/docs/about/)�
Destaca-se também o uso de Shareable Content 
Object Reference Model (SCORM), ou Modelo de 
Referência de Objeto de Conteúdo Compartilhável, 
para os cursos implementados no AVA, que por 
meio de um único código torna-se compatível em 
diversos dispositivos (desktop, tablete e mobile, 
entre outros).
Quanto à editoração eletrônica, a internet facilitou 
a produção e distribuição de páginas web, já que 
SAIBA MAIS
1717
um documento, ao ser transferido para um servidor, 
torna-se imediatamente disponível para acesso 
ou visualização. Foram criados dois formatos 
adequados para a web:
“HTML (Hyper Text Markup Language ou Lin-guagem para Marcação de Hipertexto) Padrão de 
transmissão de hipertexto atualmente utilizado em 
toda a internet, corresponde a um arquivo-texto que 
contém, junto ao texto em si, informações sobre a 
formatação de textos e imagens�
XML (eXtensible Markup Language ou Linguagem 
de Marcação Extensível) Padrão de representação 
de dados que incrementa as funções de HTML, 
separando em dois arquivos o texto que se deseja 
transmitir e o padrão de formatação que se deseja 
aplicar (FILATRO; CAIRO, 2015, p. 104).”
Portanto, a criação desses formatos, sendo o HTML 
(front-end) projetado para exibir os dados e o XML 
(back-end) para carregar dados de um servidor, 
viabiliza a automatização das páginas webs�
Nesse ponto, podemos ter noção da importância 
da organização e atualização em tempo real das 
informações fornecidas na internet para balancear, 
viabilizar e facilitar a navegabilidade cognitiva do 
usuário�
1818
NAVEGAÇÃO HIPERMIDIÁTICA 
CENTRADA NO USUÁRIO
Para compreendermos como o usuário se compor-
tará na jornada hipermidiática, devemos conhecer 
algumas definições importantes sobre as mídias 
digitais:
“Multimídia – utilização tantode palavras (conteúdo em forma verbal, como texto falado ou impresso) 
quanto de figuras (conteúdo em forma pictorial, 
incluindo ilustrações, gráficos, diagramas, mapas, 
fotos, animações e vídeos).
Hipermídia – matrizes sonora, visual e verbal 
convergem, e conglomerados de informações em 
diferentes linguagens são acessados de modo não 
sequencial, por meio de palavras-chaves ou ícones.
Transmídia – conteúdos além dos limites de uma 
única mídia, possibilitam uma pluralidade de leitu-
ras, e dão espaço a múltiplos centros e variados 
discursos, como o QR Code (Quick Response) e SMS 
(Short Message Service – Serviço de Mensagem 
Curta) (FILATRO; CAIRO, 2015, p. 74).”
Através dos roteiros gráficos, possibilita-se a 
arquitetura da informação, sendo considerada a 
expressão máxima de hipertextualidade� As carac-
terísticas específicas da mídia digital que podem 
ser executadas pelo usuário são:
1919
 y Recursos de orientação – informa onde o usu-
ário se encontra dentro de um conjunto de textos 
hiperligados, como exemplo um roteiro ou trilha 
de navegação;
 y Recursos de monitoramento – chamados de 
“migalhas de pão”, consistem no registro dos links 
navegados ou visitados pelo usuário, como exemplo 
o histórico do browser. Os principais browsers ou 
navegadores para a internet são: Internet Explorer, 
Google Chrome, Mozilla Firefox, Microsoft Edge e 
Opera;
 y Recursos de sinalização – sinais de identidade, 
localização ou relação usados pelo usuário para 
amenizar a sensação de estar perdido, como o 
auxílio de ícones, esquema de cores e texturas 
de fundo;
 y Recursos de menus – estrutura como sumário 
de livros impressos, como acesso dinâmico a nós 
e a mapas mentais com o uso de hiperlinks�
Para permitir esses recursos na personalização da 
experiência do usuário, segundo Lee, Schneider e 
Schell (2005), precisamos levar em conta quatro 
tipos de layouts de página e navegação:
2020
Tabela 4: Recursos de layouts com base na experiência do 
usuário�
Ti
po
s 
de
 la
yo
ut
s
Menu 1
Banner
Navegação principal
Mais navegaçãoMenu 1
Item 1
Item 2
Item 3 Conteúdo
Menu 2 Pesquisar Ajuda
Re
cu
rs
os
Layout de página web grande – segue um padrão geral, 
com parte superior com logotipo da empresa (ocupada 
por banner), logo abaixo encontram-se os menus com sub-
menus, no lado direito está o conteúdo (texto, imagens, 
sons e vídeos) e na parte inferior no rodapé há os direitos 
autorais e funcionalidades�
Ti
po
s 
de
 la
yo
ut
s
Menu 1
Banner
Navegação principal
Rodapé
Conteúdo
Menu 2 Pesquisar Ajuda
Re
cu
rs
os
Layout de Windows Form grande – segue um padrão geral, 
com parte superior com logotipo da empresa (ocupa-
da por banner com botões para minimizar, maximizar e 
fechar), logo abaixo encontra-se a área de navegação, ba-
seada em listas, que vai gerar o conteúdo (texto, imagens, 
sons e vídeos), de formulário para formulário, e no rodapé 
há informações de suporte complementares�
2121
Ti
po
s 
de
 la
yo
ut
s
Menu 1
Banner
Navegação principal
Rodapé
Conteúdo
Menu 2 Pesquisar Ajuda
Mais navegaçãoMenu 1 > Escolha 1 | Escolha 2...
Re
cu
rs
os
Layout de página web pequena – segue um padrão geral, 
com parte superior com logotipo da empresa (ocupada 
por anúncio da web comercial), logo abaixo encontram-se 
muitos menus com submenus, abaixo o conteúdo (texto 
e imagens), de formulário para formulário, e no rodapé 
informações de suporte complementares�
Ti
po
s 
de
 la
yo
ut
s
Menu 1
Banner
Navegação principal
Conteúdo
Menu 2 Pesquisar Ajuda
SIP (Teclado Virtual)
Re
cu
rs
os
Layout de Windows Form pequeno – para aplicações 
Pocket PC, na parte inferior usa-se um teclado virtual, na 
parte superior tem um formulário e é ocupada por um ban-
ner com botão para fechar; logo abaixo o conteúdo (texto 
e imagens) com caixas de texto e listagem para entrada 
de dados. Na parte inferior do formulário fica a área de 
navegação principal�
Fonte: Adaptado de Lee, Schneider e Schell (2005, p. 78-82)
2222
As aplicações web podem ser desenvolvidas tam-
bém com os seguintes recursos, de acordo com 
Lee, Schneider e Schell (2005):
 y Recurso de personalização e customização 
– pode assumir várias formas, sendo: aparências 
(essa personalização pode ocorrer nos layouts de 
página, de navegação, de conteúdo e para ativar 
segundo plano e primeiro plano colorido e texto 
colorido); no acesso (depende da variedade de 
atributos ao usuário, desde identidade e grupo a 
direitos); no conteúdo solicitado personalizado 
(ativado pelo e-mail e uma lista de interesses) e 
conteúdo personalizado direcionado (ativado por 
“push”, trata-se de informações selecionadas).
 y Recurso de ajuda – estará sempre disponível 
no ambiente e poderá ser apresentado ao usuário 
de diversas maneiras: ajuda geral (no formato de 
informações textuais, gráficas e de glossário); 
ajuda sensível ao contexto (facilita a localização 
das informações corretas); ajuda personalizada 
(disponibilizada de acordo com o perfil ou privi-
légio do usuário) e ajuda não solicitada (oferece 
aconselhamento sobre ações).
 y Recurso de pesquisa – é muito útil fornecer ao 
usuário a possibilidade de procurar as informações 
por palavras-chaves.
2323
Logo, podemos obter uma organização textual para 
o usuário e acelerar seus esquemas mentais� Na 
prática, temos que:
“Criar títulos e subtítulos para cada tópico e subtópico, sinalizando as relações hierárquicas 
entre eles�
Estruturar o texto de modo que a cada tópico ou 
subtópico corresponde um único parágrafo�
Aplicar recursos gráficos, como negrito, cores ou 
listas com marcadores (bullets) para destacar 
tópicos e subtópicos�
Manter uma estrutura editorial uniforme, usando 
sempre o mesmo tipo de abertura de capítulo, 
seções, hipertextos, ícones, etc. (FILATRO; CAIRO, 
2015, p. 299).”
Portanto, é importante evitar o uso excessivo de mar-
cadores gráficos, para não sobrecarregar o usuário 
visualmente, e procurar criar soluções com base em 
um projeto gráfico editorial para obter as orientações 
que serão aplicadas na produção da mídia�
Segundo Benyon (2011, p. 415), não basta apenas 
ter a percepção do ambiente e sim entender como 
a navegação ocorre e como se movimenta, nas 
diferentes atividades. Para isso, deve-se incluir 
três atividades diferentes:
2424
“1-identificação de objeto que se preocupa em entender e classificar os objetos em um ambiente;
2-exploração, que se preocupa em descobrir um 
ambiente local e como esse ambiente se relaciona 
a outros;
3-descoberta do caminho que se preocupa com 
navegação em direção a um destino conhecido�”
Assim orienta Benyon (2011) sobre os impactos 
do design de navegação quanto aos estímulos ao 
usuário:
 y Muitas semelhanças entre áreas diferentes de 
um ambiente podem causar confusão;
 y Levar a reconhecer e lembrar do ambiente;
 y Entender seu contexto e uso;
 y Mapear o funcional em relação à forma física 
do espaço;
 y Obter conhecimento gradual do espaço através 
do uso;
 y Ter rotas alternativas para ambiente responsivo;
 y Facilitar a leitura dos pontos de referência, 
caminhos e distritos;
 y Possibilitar a realização de uma série de 
atividades�
Benyon (2011) também viabiliza a importância de 
se usar o design urbano na visão serial de Gordon 
Culler, que consiste em paisagens que mudam ao 
2525
transcorrer de um ambiente, adaptam-se. Essa 
teoria para site ocorre em três formas: sinalização, 
mapas e guias e navegação social�
Na sinalização, determina-se a ajuda ao usuário 
para que chegue ao seu destino, como também 
fornece alternativas� Quanto aos três tipos que os 
designers podem utilizar:
“Sinais informativos fornecem informação sobre objetos, pessoas e atividades e, portanto, auxiliam 
na identificação e classificação de objetos.
Sinais direcionais fornecem informações sobre 
notas e sondagem. Eles fazem uso frequentemente 
através de hierarquias de sinais com um tipo de sinal 
fornecendo orientações gerais e sendo seguido por 
outro que fornece orientaçõeslocalizadas.
Sinais de alerta e tranquilização fornecem retorno 
ou informação sobre ações reais ou potenciais 
dentro do ambiente (BENYON, 2011, p. 418).”
Assim, o usuário será capaz de distinguir diferentes 
tipos de sinais no transcorrer de sua navegação� 
Um exemplo de sinais são os cookies, gerados na 
visitação de um site, que servem para registrar, 
limpar, ativar e gerenciar suas preferências sobre 
os conteúdos armazenados em arquivos criados 
pelo website�
2626
Já no uso de mapas e guias, existem vários modelos, 
como os mapas esquemáticos (mapas da trajetó-
ria de metrôs) e mapas categorizados (mapas de 
sites). Benyon (2011, p. 216) diz que “mapas são 
coisas sociais – eles existem para dar informação 
e ajudar as pessoas a explorarem, entenderem e 
encontrarem seu caminho pelo espaço”, devem 
estar alinhados ao sistema de sinalização, ajudando 
o usuário a chegar ao seu destino�
A navegação social consiste em consultar outros 
usuários sobre a sua localização, para obter indica-
dores personalizados em administrar as atividades 
virtuais, ou seja, “toda a miríade de usos que as 
pessoas fazem de outras pessoas, seja direta ou 
indiretamente” (BENYON, 2011, p. 419).
Bates (2016) destaca as principais estrelas da 
navegação, sendo:
 y Tecnologias podem ser usadas de diferentes 
maneiras quanto ao uso holístico;
 y Desenvolvimento e aplicação de mídias com 
bases tecnológicas quanto ao número de dimen-
sões e características;
 y Exploração das principais mídias: texto, imagens, 
áudio (com falas – podcast), vídeo, computação 
(incluindo animações, simulações e realidade virtual);
 y Diferentes formatos, sistemas, símbolos e 
valores de mídias;
2727
 y Conhecer as diferentes potências e dimensões 
das novas mídias e tecnologias;
 y Identificar as três características como trans-
missora ou comunicativa; síncrona (ao vivo) ou 
assíncrona (gravada) e mídias simples ou ricas;
 y Ter um bom design para explorar as potencia-
lidades da mídia;
 y Determinar na mídia a previsão de objetivos a 
serem alcançados;
 y Mídias como ferramentas assíncronas podem 
se tornar mais ricas e poderosas;
 y A internet é uma mídia extremamente poderosa, 
pela combinação de ferramentas e mídias para 
abranger todas as características e dimensões�
Segundo Benyon (2011), torna-se muito importante 
a questão de navegação, de como se movimentar 
e traçar caminhos em uma estrutura de conteúdo, 
com uma boa arquitetura de informações; precisa-se 
destacar as seguintes características: consistência 
(recursos padrão da internet); flexibilidade (alterna-
tivas de rotas com links); recuperação e retorno e 
controle (como na compra de produtos em sites); 
restrições (analisar as imposições em sistema); 
sociabilidade (criação de comunidades virtuais) e 
estilo (uso da criatividade com animação e vídeos).
Podemos assim considerar alguns princípios para 
uma melhor navegação do website, sendo:
2828
1) Estruturar a navegação;
2) Seguir as normas padrão;
3) Adaptar o vocabulário ao plano de negócio;
4) Cuidados ao implementar menus reagentes 
(expansíveis e responsivos);
5) Explorar o rodapé;
6) Usar cores para nortear menus;
7) Não usar menus dropdown (link em um menu);
8) Organizar em categorias.
A elaboração de um bom design de navegação 
é crucial ao usuário para dar-lhe condições para 
explorar, encontrar caminhos e identificar objetos 
em um ambiente�
INTERFACE GRÁFICA DO USUÁRIO 
NAS MULTIPLATAFORMAS (GUI)
Para iniciar seu estudo de design de navegação em 
interface gráfica do usuário, você precisa entender 
sobre o desenvolvimento da cibercultura, a evolu-
ção das multiplataformas, traçados numa linha 
de tempo, a seguir, como sugere Lemos (2005):
 y Anos 1970 – Surgimento da microinformática 
com tecnologia convergente e surgimento do per-
sonal computer (PC);
2929
 y Anos 1980 e 1990 – Ascensão da internet 
com os PCs conectados em rede no ciberespaço, 
conhecido como computadores coletivos (CC);
 y Século 21 – Desenvolvimento da computação 
móvel e das novas tecnologias (laptops, palms, 
smartphones, tablets, notebooks, smart TVs).
Assim, surge neste século o termo era da conexão, 
em que se destacam:
 y Computação ubíqua – 3G, serviços de celulares, 
W-Fi e Wi-Max são padrões técnicos do Instituto 
de Engenheiros Eletricistas e Eletrônicos (IEEE);
 y Computação senciente – Radio Frequency 
Identification (RFID) caracteriza-se por etiquetas 
que emitem ondas de rádio que podem informar 
dados de produtos; bluetooth é um padrão de co-
nexão por redes sem fio, com alcance de até 10 
metros, usado para conectar impressoras, celulares 
e computadores, ou seja, substituem cabos seriais 
e Universal Serial Bus (USB), porta serial universal;
 y Computação vestível – Usuário vestindo ga-
dgets (dispositivos eletrônicos portáteis como 
relógios e Google Glass), trata-se de uma inovação 
da interação humano-computador.
Em plena mobilidade de computadores coletivos 
móveis (CCM), com o advento do Voice Over 
Internet Protocol (VoIP) e do touch screen (tela 
sensível ao toque), permite-se que o celular se 
3030
torne máquina fotográfica, televisão, guichê de 
compra de ingressos para o cinema, receptor de 
informações jornalísticas, execute aplicativos de 
redes sociais (WhatsApp e SMS), tocador de áudio 
(podcast – transmissão de voz – e podcasting – 
distribuição de arquivos de podcast com o uso 
do padrão Really Simple Syndication – RSS – da 
linguagem XML), difusor de e-mails, rode o Wireless 
Application Protocol (WAP), protocolo que permite 
que os telefones celulares tenham acesso à inter-
net, e Global Positioning System (GPS), sistema de 
posicionamento global. Como frisa Lemos (2005), 
o celular vira um “teletudo”, com comunicação em 
diversas instâncias�
Outro ponto importante, com base nessas tecnolo-
gias citadas, é a tendência de se usar a manipulação 
de informações digitais em servidores conectados, 
denominado cloud computing, computação em 
nuvem, que se trata de utilizar dados em memória 
e armazenamento; também é conhecida como 
computação em grade�
Assim, chegamos à real finalidade da interface 
gráfica do usuário ou GUI, que é considerada um 
elemento que proporciona uma ligação física ou 
lógica entre dois sistemas ou partes de um siste-
ma, ou seja, permite uma relação do usuário com 
o sistema�
3131
Segundo Lemes (2018), instaurou-se um diálogo 
entre ser humano e máquina, iniciado pela Apple 
Macintosh, que se tratava da manipulação de ícones 
com o mouse e de manuseio fácil nos processos 
cotidianos em pastas, arquivos e lixeiras, inspiradas 
no trabalho Palo Alto Research Center (PARC), da 
Xerox. Entre as décadas de 1980 e 1990, tem-se as 
empresas Microsoft Windows e Apple Macintosh 
ganhando mercado com o domínio de sistemas 
operacionais que utilizam a interface gráfica do 
usuário. Atualmente, tem-se os smartphones, cujos 
domínios das interfaces gráficas do usuário acon-
tecem através dos sistemas operacionais Android, 
do Google e iOS, exclusivo para os aparelhos da 
Apple�
Lemes (2018, p. 45) cita Jackon Nielsen (que 
pesquisa há mais de 25 anos a interface gráfica 
do usuário) com os dez princípios para usuários 
e desenvolvedores:
“1�visibilidade do status do sistema: a interface deve sempre mostrar as informações do que está 
acontecendo;
2�compatibilidade com o mundo real: a linguagem 
apresentada deve ser familiar ao usuário e ao jogador;
3�controle do usuário e liberdade: o usuário deve 
poder voltar e/ou cancelar opções que conduzem 
a um erro;
3232
4�consistência e estabilidade: não variar em termos 
e símbolos para mesmos significados, mantendo 
uniformidade;
5-prevenção de erros: avisar quando alguma inte-
ração pode ocasionar algum erro;
6-reconhecimento antes de recordação: diminuir a 
utilização da memória, mantendo ícones e outros 
objetos sempre visíveis;
7-flexibilidade e eficiência do uso: permitir aos 
usuários adaptar ações frequentes;
8-estética e design minimalista: evitar o uso de 
informações desnecessárias,deixando assim a 
quantidade de informações em tela menor;
9-ajudar os usuários identificando, diagnosticando 
e recuperando de erros;
10-ajuda e manual: mesmo quando não necessário, 
sempre é bom manter material de ajuda em lugar 
acessível e que permita rápida e fácil compreensão�”
Em destaque, mais algumas tecnologias da web 
3.0 para encaixar o usuário em outras experiências 
como: a internet of things (IoT), internet das coisas; 
Lei Geral de Proteção de Dados (LGPD) ou Lei de 
Proteção de Dados Pessoais (LPDP); inteligência 
artificial e realidades virtuais, entre outras.
As multiplataformas existentes nessa era de cone-
xão oferecem sempre novas dinâmicas de acesso 
quanto ao design de navegação, com transforma-
3333
ções constantes na interface gráfica do usuário, 
com base em mensagens, que sofrem adequações 
para auxiliar e viabilizar as interações.
USABILIDADE EM 
MULTIPLATAFORMAS
Você vai entender os principais fundamentos da 
usabilidade centrados no humano, desde conceitos 
de acesso e de acessibilidade e possíveis solu-
ções para definir design de sistemas aceitáveis, 
de acordo com a ABNT ISO 9241-11 (que contém 
especificações ou avaliações quanto a um dispo-
sitivo interativo visual para se obter os resultados 
de desempenho e satisfação do usuário).
Segundo Benyon (2011, p. 50), sobre o princípio 
do design universal, pode-se considerar:
“Uso equitativo – o design não prejudica ou estigmatiza nenhum grupo de usuários.
Flexibilidade no uso – o design acomoda uma ampla 
variedade de preferências e habilidades individuais�
Uso simples e intuitivo – o uso do design é fácil 
de entender independentemente da experiência, 
do conhecimento, das habilidades linguísticas ou 
do nível de concentração do usuário no momento�
Informação perceptível – o design comunica a 
informação necessária efetivamente ao usuário, 
3434
independentemente das condições do ambiente 
ou das habilidades sensoriais do usuário�
Tolerância no erro – o design comunica e minimi-
za perigos e consequências adversas de ações 
acidentais ou não intencionais�
Baixo esforço físico – o design pode ser usado 
eficiente e confortavelmente e com um mínimo 
de fadiga�
Tamanho e espaço para a aproximação e uso 
– tamanho apropriado e espaço são oferecidos 
para aproximação, alcance, manipulação e uso, 
independentemente do tamanho do corpo, posto 
ou mobilidade do usuário�”
Mas, antes, vamos relembrar os conceitos de 
mobilidade no contexto da computação móvel, 
segundo Lee, Schneider e Schell (2005, p. 5):
“Uso pelas pessoas de dispositivos móveis portáteis funcionalmente poderosos que ofereçam 
a capacidade de realizar facilmente um conjunto 
de funções de aplicação, sendo também capazes 
de conectar-se, obter dados e fornecê-los a outros 
usuários, aplicações e sistemas�”
As principais características de mobilidade são a 
portabilidade, permitir a transportabilidade portátil 
na palma da mão, considerando-se os seguintes 
fatores: tamanho e peso do dispositivo e dos aces-
3535
sórios; a usabilidade, permitir o uso por tipos de 
pessoas diferentes, incluindo usuário, ambiente e 
características do dispositivo; a funcionalidade, 
ou seja, possuir múltiplas aplicações, e a conec-
tividade, que é poder sempre estar conectado, 
parcialmente conectado ou nunca conectado a 
um sistema back-end (ações usuário e máquina) 
e front-end (saída da interface gráfica).
Na usabilidade, tem-se algumas características 
mais comuns, que são:
 y Usuário – trata-se de características pessoais 
quanto a: tamanho e força (diferença de manuseio 
de personal computer (PC) apenas por adultos e 
smartphone para adultos e crianças); flexibilida-
de e destreza (necessidade de adaptações aos 
teclados virtuais personal digital assistant (PDA); 
conhecimento e capacidade (dispositivo fácil de 
manusear);
 y Ambiente – trata-se de como a escolha de dis-
positivo é realizada pelo ambiente do usuário, tais 
como: nas condições normais de funcionamento 
(para trabalhar de pé, um PDA ou tablet podem ser 
mais adequados, assim como para cobrança em 
pedágios SEM PARAR) e em condições extremas 
(que envolve as mudanças climáticas de calor, frio, 
umidade e seca);
 y Dispositivo – trata-se de características físicas 
próprias dos dispositivos e leva em conta: o tempo 
3636
de inicialização (velocidade); a integridade de dados 
(tipos de armazenamento físico e cloud computing; 
a interface com o usuário (teclado, stylus, mouse 
etc.) e a robustez/resistência (evitar quebrar ao 
ser derrubado e ter mais resistência).
Em busca de equilíbrio, os designers devem, se-
gundo Benyon (2011), seguir os principais fatores 
da usabilidade, que são as pessoas; as atividades 
que querem realizar; os contextos da interação e a 
definição das tecnologias (hardware e software), 
assim, precisamos destacar também um framework 
importante para design interativo, que se chama 
Pessoas, Atividades, Contexto e Tecnologia (PACT), 
pois precisamos entender os usuários de sistemas 
e produtos�
Na década de 1990 iniciaram-se os estudos sobre 
a usabilidade. Marinho e Cruz (2020) destacam 
que existem alguns problemas persistentes, que 
são: links sem mudança de cor; alterar a função 
do botão voltar; abrir novas janelas de navegador 
e de pop-up; conteúdo vago, com modismos ou 
denso, e texto não escaneável� Logo, grande parte 
desses problemas estão relacionados ao bom uso 
da arquitetura de computação, para que o usuário 
possa ser atendido em seus objetivos básicos 
como: localizar, ler e entender as informações.
3737
Quanto às tendências na usabilidade para desen-
volvimento web, destaca-se, segundo Marinho e 
Cruz (2020): World Wide Web Consortium (W3C), 
para a criação de uma web acessível; linguagens 
estruturais: HTML, XML e XHTML; linguagem de 
apresentação: CSS e XSL e modelos de objeto: 
DOM e Scriping (ECMAScript).
Acesse o link a seguir e conheça um conjunto de nor-
mas, diretrizes, recomendações, notas, artigos, tutoriais 
sobre W3C:
https://w3c.br/
Um framework “é um modelo geral de classes e 
objetos e suas relações, sempre armazenados em 
funções específicas, prontos para serem aplicados 
a novas realidades” (MARINHO; CRUZ, 2020, p. 56). 
Podemos destacar alguns dos frameworks mais 
utilizados para a programação web baseada em 
tecnologia Java:
 y Front controller – controlador frontal deriva-
do da arquitetura MVC, responsável por: receber 
requisições; distribuir o processamento entre os 
demais componentes e fornecer uma resposta 
para o usuário;
SAIBA MAIS
3838
 y Inversão de controle (IoC – Inversion of Control) 
– estabelece o procedimento que será executado 
para um determinado evento, com o reaproveita-
mento do código;
 y Injeção de dependência (DI – Dependency 
Injection) – desacopla os componentes de uma 
aplicação, controlando suas instâncias por meio 
de um gerenciador;
 y Programação por convenção (CoC – Conver-
sation over Configuration) – usa os processos de 
composição e decomposição através de compor-
tamentos encapsulados para que atinjam mais 
que uma única classe. Um exemplo é uma página 
JSP, que faz parte dos arquivos de revisão com os 
seguintes benefícios: melhor modulação; reutili-
zação de módulos e facilitação de manutenção 
de software;
 y Hibernate – gratuito e distribuído como código 
aberto pela Lesser General Public License (LGPL), 
consiste em diferentes modelos de mapeamento 
de objeto;
 y Framework JavaServer Faces (JSF) para apli-
cativo web – possui algumas funções como: au-
mentar a produtividade; diminuir a complexidade 
na hora da manutenção da aplicação e melhorar 
a integração com outras tecnologias. Usa-se os 
seguintes componentes: API (UI – Interface com 
o Usuário); biblioteca de Tags;
3939
 y Framework Spring Web MVC – orientado a as-
pectos, destacam-se as seguintes características: 
divisão de papéis (controle, validador e objetos, entre 
outros), configuração descomplicada, altamente 
adaptável e capaz de reusar código de negócio.
 y Framework Grails – trabalhacom linguagem 
Gronvy, baseada em linguagem de scripting, roda 
na Java Virtual Machine (JVM) e aumenta a pro-
dutividade sem complexidade�
Conforme frisa Fernandes (2016, p. 4), as aplicações 
web sofreram mudanças de páginas estáticas para 
dinâmicas, “essa transformação só foi possível 
de ser alcançada com o surgimento de novas 
ferramentas, linguagens, plataformas e sistemas, 
com os avanços nas áreas de telecomunicações 
e comunicação de dados”� As soluções devem 
levar em conta: orçamento, requisitos, público-alvo, 
tipos de funcionalidades, benefícios, limitações e 
estratégias de projeto. Os tipos de desenvolvimento 
existentes são:
 y Aplicações web – são acessadas pelo nave-
gador e em qualquer dispositivo com internet, usa 
linguagem (PHP/Java) em desenvolvimento web 
(exemplo: plataforma WordPress).
 y Aplicações nativas – são acessadas em dis-
positivo móvel, desenvolvidas em um sistema 
operacional específico, com a utilização de appli-
cation programming interface (API – interface de 
4040
programação de aplicações), considerando rotinas 
e padrões de programação para acesso a um apli-
cativo de software�
 y Aplicações híbridas – usa as duas abordagens 
de aplicações: a web e a nativa; na codificação, usa 
frameworks (PhoneGap e Apache Cordova, entre 
outros) e nos componentes web (HTML5, CSS3 e 
JavaScript).
Podemos perceber alguns aspectos importantes 
da usabilidade atual e do mínimo aceitável e de-
sejado no desempenho das multiplataformas com 
acesso a dados armazenados na web, que são as 
tentativas positivas de sempre procurar produzir 
um modelo mental ou design conceitual de forma 
clara, simples e consistente, com resultados em 
robustez e segurança.
Exemplo
Imagine uma situação-problema em que uma imo-
biliária, para aumentar as vendas e as assinaturas 
de contratos de aluguéis, precisa inovar em suas 
redes sociais, com a inserção de imagens 360º dos 
imóveis, com o uso de um smartphone Android�
Como solução, é proposto: 1- usar o recurso de 
navegação 360º, através de um aplicativo chamado 
“Panorama 360 – VR Capture”; 2- baixar e instalar 
o aplicativo, 3- dirigir-se ao imóvel; 4- determinar os 
4141
ambientes desejados para a captura da imagem; 5- ao 
se iniciar a captura, posicionar o celular na vertical 
e movimentar a câmera para a direita, seguindo os 
marcadores; 6- em seguida, publicar a imagem nas 
redes sociais como o Facebook, e, por fim, 7- procurar 
direcionar as métricas para mensurar as visitações e 
assim calcular o retorno sobre o investimento (ROI).
Quer conhecer um site com vídeo de 360º? Acesse o site 
do Museu do Futuro, que em 2020 completou 5 anos, para 
fazer um tour virtual! Para acessar o site, use o link a seguir 
ou posicione a câmera do seu celular para ler o QR CODE:
https://museudoamanha.org.br/tourvirtualpratodomundo/
Existe uma mudança no padrão de produção da 
navegação, permitindo a sensação de imersão 
em espaços imagéticos. Segundo Pereira (2017), 
SAIBA MAIS
4242
isso se deve aos formatos mais narrativos, par-
ticipativos e sensoriais da Realidade Virtual (VR 
– Virtual Reality), usado em games que utilizam 
câmeras que fotografam e filmam em 360 graus, 
para serem jogados com headsets (dispositivo 
acoplado à cabeça) ou mesmo visualizados em 
aplicativos como o Facebook e Youtube, assim, 
fotos e vídeos 360 graus podem ser construídos 
também em HTML 5.
Pereira (2017, p. 3) destaca que as imagens 
esféricas “podem ser visualizas num ângulo de 
360 graus na horizontal e 180 na vertical”, já as 
imagens cilíndricas “têm visão vertical menor que 
180º”, sem ver o chão e o céu, mas com o ângulo 
horizontal de 360º; logo, nos vídeos e fotos 360 
graus, o observador é colocado no centro da esfera�
Precisamos entender a diferença entre imersão 
espacial, em que o usuário/explorador enxerga e 
escuta o mundo simulado, e imersão sensorial, 
que não depende do dispositivo e sim da narrativa, 
do storytelling�
Os principais aplicativos para a captura de fotos 
e vídeos em 360 graus, que acompanham os sis-
temas operacionais, são:
Android: Câmera Cardboard, Panorama 360 – VR 
Capture; Photaf Panorama�
4343
iOS: Photo Sphere Camera, Splash - 360 Video 
Camera;
Pagos: Pano; 360 Panorama;
Windows Phone/Windows 10 Mobile: Lumia 
Panorama;
Windows: Photosynth (consulte a compilação de 
serviços do Windows para a criação de imagens em 
360 graus para serem exibidas nas redes sociais).
Conheça os impactos das tecnologias na 
web, assista ao Ted Talk Os próximos 5�000 
dias da web : https://www.ted.com/talks/
kevin_kelly_the_next_5_000_days_of_the_web#t-349508�
O site Cartilha de Usabilidade possui recomendações para 
o desenvolvimento e manutenção de sites do governo, 
através de subsídios de testes, e trata da responsabili-
dade de se aplicar corretamente as normas: http://epwg.
governoeletronico.gov.br/cartilha-usabilidade. Acesso 
em: 18 nov. 2020�
No livro Cibercultura, de Pierre Lévy, você pode ler sobre 
as comunidades virtuais e a inteligência coletiva que a 
internet proporciona no ciberespaço: LEVY, P. A. Ciber-
cultura. Rio de Janeiro: Editora 34, 1999.
SAIBA MAIS
44
CONSIDERAÇÕES FINAIS
Neste e-book você percebeu que é necessário saber 
balancear nos ambientes virtuais os três tipos de 
cargas cognitivas, ou seja, reduzir o que for de carga 
irrelevante e aumentar o que for de carga relevante, 
desafiando assim o seu gerenciamento e balan-
ceamento de carga intrínseca ao conhecimento�
Esse conhecimento permitiu que você entendesse 
o fluxo do design de navegação e suas potenciali-
dades, como um ponto de partida para se ressaltar 
a constante busca de soluções para o ambiente 
virtual dos usuários como foco, no qual a percepção 
dos cinco sentidos é essencial na interpretação 
de diferentes sinais para obter o conhecimento 
topográfico para o usuário.
Você pôde compreender um pouco a evolução 
até a época em que vivemos através do design 
de navegação nas interfaces gráficas dos usuá-
rios, que ocorrem através dos dispositivos como 
computador, notebook, smartphone, TV interativa 
(smart TV, entre outros), para se conseguir boas 
práticas de uso para a navegabilidade�
Por fim, foi de suma importância a reflexão sobre 
designs junto aos usuários quanto à usabilidade 
de sistemas viáveis, na qual destacamos as aná-
lises na capacidade, efetividade e adaptação nas 
multiplataformas�
Referências Bibliográficas 
& Consultadas
BATES A. W. T. Educar na era digital: design, 
ensino e aprendizagem. Tradução João Mattar 
et.al. 1. ed. São Paulo: Editora Artesanato 
Educacional. 2017.
BENYON, D. Interação Humano-Computador� 
2. ed. São Paulo: Pearson Prentice Hall, 2011. 
[Biblioteca Virtual]�
COSTA, M. T. de A. Tecnologia assistiva: uma 
prática para a promoção dos direitos humanos� 
Curitiba: Intersaberes. 2020. [Biblioteca Virtual]
DELL, J. A. Digital Interface Design and 
Application. Nova York: Wiley, 2015.
FALCO, M.; ZUANON, R. Design de interface 
de aplicativos t-commerce: transações 
comerciais na televisão digital interativa. 2013. 
106 f. Dissertação (Mestrado em Design) – 
Universidade Anhembi Morumbi, São Paulo, 
2013.
FERNANDES, C. T. Aplicativos mobile 
multiplataforma. Valinhos: 2016.
FILATRO. A.; CAIRO, S. Produção de conteúdos 
educacionais. São Paulo: Editora Saraiva, 2015.
GEEST, T. Web Site Design is Communication 
Design� Amsterdam: John Benjamins Publishing 
Company, 2001.
KLEINA, C. Tecnologia Assistiva em Educação 
Especial e Educação Inclusiva� Curitiba: 
Intersaberes, 2012. [Biblioteca Virtual].
LEE, V.; SCHNEIDER, H.; SCHELL, R. Aplicações 
móveis: arquitetura, projetos e desenvolvimento� 
Trad� Amaury Bentes e Deborah Rudiger� São 
Paulo: Editora Pearson e Makron Books, 2005. 
[Biblioteca Virtual]�
LEMES, D. de O. Aspectos gerais de uso das 
interfaces gráficas de usuário. Teccogs – 
Revista Digital de Tecnologias Cognitivas, n� 18, 
p. 37-46, jul.-dez. 2018.
LEMOS, A. Cibercultura e mobilidade: a era da 
conexão� Razón y palabra, n� 41� Disponível em: 
http://www.razonypalabra.org.mx/anteriores/n41/alemos.html. Acesso em: 16 nov. 2020.
LEPIONKA. M. E. Writing and developing college 
textbook supplements. Gloucester: Atlantic Path 
Publishing, 2008.
LEUNG, L. Digital experience design: ideas, 
industries, interaction� [s�l�]: Intellect Books, 
2008.
MARINHO, A. L.; CRUZ, J. L. C. Desenvolvimento 
de aplicações para internet� 2� ed� São Paulo: 
Pearson Education do Brasil, 2020. [Biblioteca 
Virtual]�
MURRAY, J. Inventing the Medium: principles 
of interaction design as a cultural practice� 
Massachusetts: MIT Press, 2011.
PEREIRA, S. da C. Da fotografia ao vídeo: 
transformações no uso de imagens em 360º no 
G1. CIBERJOR8 – Congresso Internacional de 
Ciberjornalismo. Mato Grosso do Sul. Anais��� 
UFMS, Campo Grande, 2017.
PREECE, J. et al� Design de interação: além da 
interação homem-computador. Porto Alegre, 
Bookman, 2005.
SALGADO, L. A. Z. Arte Digital� Curitiba: 
Intersaberes. 2020. [Biblioteca Virtual].
SEGURADO, V. S. (org). Projeto de interface com 
o usuário. São Paulo: Pearson Education do 
Brasil, 2015. [Biblioteca Virtual].
	Introdução
	Design de navegação
	Teoria da carga cognitiva no ambiente virtual
	Navegação hipermidiática centrada no usuário
	Interface gráfica do usuário nas multiplataformas (GUI)
	Usabilidade em multiplataformas
	Considerações finais
	Referências Bibliográficas & Consultadas