Interface Com o Usuário
Técnicas de Projeto
Tipos de Aplicativos e
Arquiteturas
Introdução
Existem dois aspectos estruturais relacionados ao
projeto de software de IHC:
 1. O aspecto lógico, que descreve as relações
entre os documentos e define as ligações entre os
documentos; e
 2. O aspecto físico, que descreve onde o
documento está hospedado, por exemplo: em
CDROM ou num servidor Web.
É importante observar que, para o usuário, a
estrutura lógica de navegação em um projeto é mais
importante do que sua estrutura física.
Interface com o Usuário
2
Relacionamento usuários x interface
Usuários não se preocupam com a origem da
informação;
Não necessitam saber que acionadores de discos
contém qual dado;
Nem como se deve organizar sua árvore de
diretórios;
Portanto não se deve expor aos usuários o
caminho dos documentos, isto é, sua estrutura
física;
O projetista deve sempre ter o conhecimento da
estrutura física do sistema, mas não o usuário.
Interface com o Usuário
3
Exemplo
Um arquivo em particular está situado numa
região profunda na árvore de diretórios em um
sistema de gerenciamento de arquivos com um
caminho do tipo:
D:\Documentos\Cursos\IHC\Aulas\Semana01\S01-Teoria.doc
entretanto, na perspectiva do usuário o mesmo
arquivo pode ser visualizado a partir da
seguinte URL:
http://www.ici.unifei.br/ramos/download/S01-Teoria.doc
Interface com o Usuário
4
Mapas de movimentação
Servem para mapear a estrutura de movimentação do usuário através
de um sistema de software
Um mapa de movimentação é um gráfico do fluxo lógico da interface
interativa.
São 4 as estruturas fundamentais de organização da movimentação:
1.
Estrutura Linear, os usuários movimentam-se seqüencialmente, de
um quadro ou campo de informação para outro;
2.
Hierárquica, a movimentação é ao longo das ramificações de uma
estrutura de árvore formada pela lógica natural do conteúdo;
3.
Não-Linear, os usuários movem-se livremente através do conteúdo
do projeto, livres de caminhos predeterminados;
4.
Composta, movimentação livre (de forma não-linear), mas
ocasionalmente são obrigados a apresentações lineares de
movimentos ou informações.
Interface com o Usuário
5
Estrutura Linear
É a mais conhecida de todas as estruturas de navegação em
documentos, devido a influência do estilo de organização dos
tradicionais meios impressos.
Por exemplo:
Livros são geralmente escritos uma página após a outra em
uma ordem linear.
A forma de apresentações à moda linear normalmente é muito
útil em procedimentos de apresentação passo a passo,
entretanto existem momentos em que uma informação
complementar torna-se necessária.
As formas lineares podem ser um pouco modificadas para
permitir maior flexibilidade, entretanto corre-se o risco da
degeneração em outras formas mais complexas.
Interface com o Usuário
6
Estrutura linear básica
A organização puramente linear facilita a progressão
ordenada através da informação.
Normalmente utilizada em apresentações de slides
que permitem ao usuário conhecer melhor a respeito
de um assunto.
Utilizando a forma linear o projetista tem a certeza
de que o usuário receberá a informação na forma
desejada.
Interface com o Usuário
7
Características do estilo linear
É altamente previsível e o projetista sabe exatamente para onde o
usuário irá na próxima interação.
Assim, é possível realizar uma operação de pré-carga (preload ou
precache) da próxima tela de interação de modo a aumentar a
performance do sistema, principalmente se for uma apresentação
pela internet.
Por exemplo:
Enquanto o usuário recebe a informação de uma tela, as imagens da
próxima tela podem ser carregadas para a área de arquivos
temporários da internet (cache) do navegador (browser).
Quando o usuário avançar para a próxima tela, esta será carregada
diretamente da área de arquivos temporários, dando ao usuário a
ilusão de que as páginas carregam rapidamente.
A pré-carga só é uma solução viável quando o próximo passo do
usuário possa ser antecipado, como no caso da organização linear.
Interface com o Usuário
8
Facilidades de navegação linear
Devido ao fato de só existir navegação para frente ou para trás, o
usuário poderá se sentir “preso” utilizando a forma linear de
navegação.
Assim, é importante fazer com que o usuário sempre saiba onde ele
se encontra na estrutura linear e quais são as informações prévias e
as informações seguintes à tela que está sendo assistida.
Isso pode ser feito simplesmente colocando o título “Página X de Y”
onde X corresponde ao número da página atual e Y é o número
total de páginas.
Interface com o Usuário
9
Estrutura linear alternativa
A organização linear é útil para apresentar informação
em uma ordem predeterminada, pois ela fornece poucas
formas de interação entre o usuário e a informação.
O modelo de organização Linear com Alternativa simula
a interatividade fornecendo duas ou mais formas de
navegar pela interface, que eventualmente terminam
com o usuário tendo que voltar para a página anterior
numa seqüência.
Interface com o Usuário
10
Exemplo de aplicação
Um questionário onde o usuário necessita responder com “Sim”
ou “Não” a uma pergunta em cada página, fazendo o usuário
avançar para a próxima página com base na sua resposta.
Embora possa parecer ao usuário que exista alguma tecnologia
por trás da aplicação, na verdade os dois caminhos já foram pré
estabelecidos, mas são transparentes para o usuário que acaba
tendo uma ilusão de interatividade.
Apesar da aparência, a estrutura linear com alternativas preserva
a linearidade geral da navegação pela interface.
Entretanto, as possibilidades múltiplas de caminhos de interação
compromete a pré-carga das páginas no caso de utilização na
internet tornando sua interatividade mais lenta.
Interface com o Usuário
11
Estrutura linear com opções
É um bom tipo de estrutura quando deseja-se preservar
o caminho principal, mas acomodando pequenas
variações nesse caminho, tal como saltando algumas
telas (páginas) em particular.
É útil para inspeções on-line onde alguns usuários
poderiam saltar algumas questões.
Permite a linearidade de navegação com a opção de
pular para frente em várias telas de navegação na
estrutura.
Interface com o Usuário
12
Exemplo de utilização
A apresentação de uma fábrica de bicicletas:
Enquanto algumas páginas podem ser comuns a
todas as bicicletas, certas páginas podem ser puladas
por um usuário interessado particularmente em
mountain bikes ou em bicicletas de pista.
Este tipo de organização também simula um sistema
inteligente embora seja simplesmente um conjunto
de arquivos estáticos.
Interface com o Usuário
13
Estrutura linear com linhas paralelas
Permite diversos tipos de controle.
Ainda que o usuário possa realizar uma pequena
navegação para fora da linha principal, a estrutura o
forçará o seu retorno para a seqüência principal,
preservando o fluxo original.
Interface com o Usuário
14
Exemplo de utilização
Um artigo a respeito do funcionamento do sistema de
combustível de um automóvel é apresentado em uma forma
linear.
Nesse caso poderia existir um link em uma palavra particular, tal
como pressão, que o levaria a uma página tangencial com a
definição da palavra ou talvez a um pequeno conjunto de telas
(ou páginas) discutindo qual a relação entre o combustível e a
pressão no motor do automóvel.
Eventualmente pode existir um caminho em paralelo finalizando a
interação ou retornando para a tela principal.
Uma navegação em paralelo pode ser, por exemplo, um link para
um artigo de uma revista.
Ao invés de tirar a concentração do usuário do assunto principal,
esta pequena quantidade de informação poderá aumentar sua
experiência
Interface com o Usuário
15
Estrutura de Grade
Tipo de estrutura dual apresentando tanto um relacionamento
entre as telas de navegação no sentido vertical quanto no sentido
horizontal.
Devido ao fato da grade possuir uma representação espacial, é
muito utilizada em coleções de itens.
Uma estrutura de grade “pura” não é
muito comum em
sistemas de
navegação.
Interface com o Usuário
16
Características de projeto
Quando projetada corretamente, a grade proporciona
orientação tanto na navegação vertical quanto na
horizontal de modo que o usuário nunca se sentirá
perdido no hiperdocumento.
Por exemplo:


Os itens de um catálogo de roupas podem ser organizados em
categorias, tais como, camisas, calças e jaquetas.
Outro modo de organizar a informação poderia ser pelo preço.
O estilo de grade permitirá ao usuário observar
facilmente o preço da roupa bem como uma marca
particular.
Interface com o Usuário
17
Estrutura Hierárquica
A estrutura mais comum de navegação em um texto
corresponde a forma de árvore ou hierárquica.
Mesmo não permitindo a estrutura espacial da
estrutura de grade ou mesmo a previsibilidade e
controle da estrutura linear, a estrutura hierárquica é
muito importante porque pode ser enormemente
modificada ou expor muito mais informação que o
necessário.
Interface com o Usuário
18
Características de projeto
Estruturas hierárquicas começam com uma página
raiz (página principal, página de entrada ou home
page) que é a página de entrada no aplicativo.
Esta página funciona como um marco e normalmente
tem uma aparência muito diferente das outras
páginas do aplicativo.
As páginas principais ou home pages são
fundamentais para o sucesso da interação com o
usuário.
É desta página que são apresentadas várias opções
(ou caminhos) para a navegação pelo aplicativo.
Interface com o Usuário
19
Estrutura árvore de profundidade
Este tipo de estrutura apresenta poucas escolhas mas
pode necessitar muitos cliques do mouse para encontrar
seu destino final;
Esta organização enfatiza a profundidade ao invés da
largura.
Interface com o Usuário
20
Exemplo de uso
Um site web para um serviço de empregos geralmente
possui dois tipos principais de audiência: empregados
e empregadores.
Fazendo esta distinção óbvia na home page e
solicitando que o usuário escolha sua categoria,
aumentará a velocidade e facilitará o acesso para
seções importantes do site.
Expandir as escolhas do nível do topo da árvore para
incluir opções que seriam específicas para quem
procura emprego ou para quem oferece emprego pode
causar
Interface com o Usuário
21
Dicas de projeto
A árvore de profundidade pode necessitar que o
usuário faça muitas escolhas para encontrar uma
página final (página folha), mas em alguns casos tornase um meio muito útil para “selecionar” os usuários
para uma categoria específica.
Um meio de entender se a hierarquia do site é muito
estreita é quando existem muitas páginas em que
clicando em “voltar” simplesmente retornam para
página principal.
É importante lembrar que os usuários necessitam de
um retorno e clicar infinitamente pelas páginas pode
ser ainda mais frustrante.
Interface com o Usuário
22
Estrutura árvore de superfície
Este tipo de hierarquia baseia-se na largura das escolhas.
Sua principal desvantagem deve-se ao fato de que pode
apresentar tantas opções quantas páginas a navegar.
Enquanto o usuário necessita de um ou dois cliques para
encontrar o conteúdo, o tempo gasto em sua procura por
todas as escolhas iniciais pode ser improdutiva.
Muitas pessoas acham que tudo o que for importante deve
estar na página principal.
Interface com o Usuário
23
Estrutura árvore web
Na verdade estruturas puramente de árvores
hierárquicas não são muito comuns nas páginas Web
que estamos acostumados a navegar.
Em uma estrutura de árvore pura, não existe
cruzamento de links, assim é necessário retornar para
encontrar outras partes da árvore.
Se um usuário encontrar-se
na página A na estrutura
da figura; para encontrar a
página B, ele deverá retornar
dois níveis acima e então
prosseguir descendo na
árvore no sentido da página B.
Interface com o Usuário
24
Características de projeto
Enquanto na Web é possível retornar utilizando o botão
“Voltar” do navegador, links são normalmente adicionados às
páginas de modo que os usuários podem encontrar a página
sem necessitar navegar por todo o caminho de volta.
Em muitos casos, páginas possuem links cruzados utilizando a
barra de navegação ou explicitamente links de retorno para
ajudar os usuários navegar rapidamente pela estrutura do
site.
Com a barra de navegação, pode ficar muito mais fácil saltar
de uma seção para outra sem um grau significativo de
retornos.
Interface com o Usuário
25
Exemplo de mapa de navegação
Um diagrama de site pode ser muito complexo.
Os links de retorno e os links cruzados dentro do site aumentam
muito a sua complexidade.
Neste caso, deve-se considerar somente as seções principais com
links cruzados
Interface com o Usuário
26
Estrutura de malha cheia
Aplicativo onde todas as páginas estão interligadas umas com as
outras.
Em uma estrutura malha cheia, o numero de ligações (L) é igual
ao número de páginas (NP) multiplicado pelo número de páginas
–1, ou seja:
L = NP * (NP –1)
Isso significa que:
Um aplicativo com 10 páginas, existirão:
NP = 10
=> L = 10 * 9 = 90 ligações.
Um aplicativo com 100 páginas, existirão:
NP = 100 => L = 100 * 99 = 9.900 ligações.
A estrutura malha fechada não deve ser utilizada em aplicativos
com mais de 7±2 links por página, em um aplicativo de no
máximo 10 páginas.
Interface com o Usuário
27
Mapa de navegação
Interface com o Usuário
28
Estruturas mistas
Apesar da estrutura de árvore de superfície
apresentar um número muito grande de
escolhas logo no início da navegação, a
estrutura de árvore de profundidade esconde
uma grande quantidade de informação.
Por outro lado uma estrutura linear fornece
poucas escolhas para o usuário enquanto a
estrutura árvore web oferece muitas escolhas.
Interface com o Usuário
29
Mapa de navegação
Em alguns casos faz-se necessário aumentar o nível
de hierarquias para que seja possível permitir um
retorno rápido do usuário para o topo do aplicativo,
este tipo de estrutura é chamada estrutura mista ou
hierarquia mista, sendo que a forma de árvore domina
a estrutura
Interface com o Usuário
30
Exemplo de uso
Um exemplo de uso deste tipo de hierarquia é um site
onde existe um botão Download ou algo semelhante
que força um salto em profundidade na estrutura do
site.
Pode-se dizer que esta trata-se de uma estrutura linear
com saltos.
Outros sites podem conter caminhos lineares somente
para certas páginas no site.
Embora a organização espacial não seja a mesma que
em outras estruturas de sites, este tipo de hierarquia é
muito comum na maioria dos sites mistos.
Interface com o Usuário
31
Estruturas hub and spoke
Muitos sites consistem de páginas principais, denominadas hubs, que
centralizam outras sub-páginas que são acessadas via spokes (links
de ligação).
Para visitar outras páginas no site, o usuário é forçado a voltar à
página hub.
Muitos portais utilizam esse estilo de modo a fazer com que os
usuários re-visitar a página principal.
Entretanto, não existe diferença entre
o modelo hub and spoke (2) e o
modelo típico de árvore (1).
Interface com o Usuário
32
Benefícios
O único benefício de estruturas hub and spoke é
que ele fornece uma maneira mais fácil de
visualizar um site
Interface com o Usuário
33
Estrutura web
Quando muitos links cruzados, saltos para o topo da página ou para
páginas bem acima ou abaixo na hierarquia, e outros tipos de
modificações são realizadas em um documento estruturado, sua
forma poderá tornar-se pouco clara para o usuário.
Quando um aplicativo possui uma estrutura cuja forma é difícil de
classificar, esta é denominada Web Pura.
Interface com o Usuário
34
Benefícios
Um benefício de uma forma menos estruturada é que ela pode
fornecer um grande teor de expressividade.
Por exemplo, num texto técnico podem existir links relacionados a
diagramas, comandos, dicas e utilização, bem como partes de
outros textos.
A organização de um site para esse tipo de aplicação não pode ser
facilmente adaptada a nenhuma das formas mais estruturadas
vistas anteriormente.
Apesar de estruturas web puras permitirem a confusão do usuário e
podem causar a perda do foco e também tornar difícil aos usuários
a formação de um mapa mental do site, elas podem não ser um
problema quando a informação ou tarefa for projetada
apropriadamente.
Interface com o Usuário
35
Exercício
O objetivo desta prática é fazer com que o aluno saiba aplicar
os conceitos de técnicas de navegação para o desenvolvimento
IHC, vistos nas aulas teóricas.
Qual foi o modelo de navegação utilizado para o
desenvolvimento da página para cadastro de currículos de
alunos, projetada em aula teórica em linguagem Html?
Emitir um relatório de conformidade com o modelo escolhido
para o projeto.

O exercício deve ser salvo como um arquivo de texto, que
deve ser chamado Ex19.doc
Interface com o Usuário
36