Engenharia de Software

Design de Interface

Profa. Thaiana Pereira dos Anjos, Dra. Eng.

thaiana.anjos@ifsc.edu.br
ERGODESIGN
“O Ergodesign é um importante conceito
desenvolvido para construir uma ponte e tornar
mais eficiente uma interação entre as
disciplinas de Design e Ergonomia”
 ERGODESIGN

Conceitos como “usabilidade”, “design centrado no usuário”,

“experiência do usuário”, “design emocional” etc., onde o foco é,
na verdade, o usuário e sua relação com uma interface qualquer.
 O que é?
• Interface fáceis e informações acessíveis
• Trabalha com o processo cognitivo
• Tem participação direta dos usuários
• É voltado para a navegação
• Tem apoio da arquitetura da informação
 O que é?
• Interface fáceis e informações acessíveis
• Trabalha com o processo cognitivo
• Tem participação direta dos usuários
• É voltado para a navegação
• Tem apoio da arquitetura da informação
 O que é?
• Interface fáceis e informações acessíveis
• Trabalha com o processo cognitivo
• Tem participação direta dos usuários
• É voltado para a navegação
• Tem apoio da arquitetura da informação
NAVEGAÇÃO
• Determina o modo de navegar ou mover no espaço
informacional (e hipertextual).

• Um sistema de navegação deve, a todo momento, responder

3 perguntas básicas.
Onde posso ir?
Onde estou?
Onde estive?
Navegação “embedded”: formada pelos elementos de navegação que são
apresentados integrados ao site. O objetivo é oferecer contexto e flexibilidade.

• Navegação Global
Navegação
• Navegação Local
“embedded”
• Navegação Contextual
• Navegação Global
Os elementos da navegação global proporcionam a mobilidade do usuário para
todas as grandes áreas do site.
• Navegação Global

97% dos sites a possui!

89% - com o menu normalmente localizados no topo da página
11% - com o meu na lateral superior esquerda
 Site Antigo

• Navegação Global

97% dos sites a possui!

89% - com o menu normalmente localizados no topo da página
11% - com o meu na lateral superior esquerda
• Navegação Local
Os elementos da navegação local permitem o aprofundamento em um
determinado assunto ou área do site. Ela funciona principalmente para
permitir a navegação dentro de uma área previamente escolhida pela
navegação global.
• Navegação Local

Esta forma de navegação é necessária quando a informação

secundária é importante e o site possui muito conteúdo.
• Navegação Contextual
A navegação contextual geralmente é feita a partir do próprio conteúdo
publicado e fica sujeito ao contexto. Os links, colocados dentro de um texto
permitem uma navegação contextual, já que permitem que o usuário
expanda um certo conceito mencionado pelo conteúdo.
• Navegação Contextual

Também pode-se oferecer ao usuário acesso à informações, artigos,

produtos e serviços que ele não havia pensado em procurar, mas que
poderiam ser classificados como similares ao assunto que ele buscou
• Navegação Contextual

Também pode-se oferecer ao usuário acesso à informações, artigos,

produtos e serviços que ele não havia pensado em procurar, mas que
poderiam ser classificados como similares ao assunto que ele buscou
• Navegação Contextual

Também pode-se oferecer ao usuário acesso à informações, artigos,

produtos e serviços que ele não havia pensado em procurar, mas que
poderiam ser classificados como similares ao assunto que ele buscou
• Navegação Suplementar
• Navegação Social
• Navegação por tags
• Navegação Suplementar
Sua função é oferecer caminhos complementares para se encontrar
o conteúdo e realizar tarefas
Rodapé
Mapa do site
SiteMap
Tutorial
• Navegação Social
Indica o comportamento de outros usuários
• Navegação por Tags
O usuário navega por palavras-chave
 ATIVIDADE 1

1 – Acesse 2 websites e verifique em cada um:

oQuais são as navegações global, local e contextual?

oQuais são as navegações social, complementar e por

tags?

Dê um print no site mostrando os tipos de navegações.

Envie pelo Sigaa.
ARQUITETURA DA
INFORMAÇÃO
Foi criada por Saul Wurman em 1976, com o objetivo de
organizar a informação, tornando simples o que é
complexo.
É o estudo que se aplica em website, buscando um
balanceamento entre usuário-conteúdo-contexto,
facilitando para as pessoas o acesso à informação.

Existem basicamente quatro sistemas, onde cada um

possui suas próprias regras e características, e quando
reunidas servem para organizar o ambiente
informacional de um website.
 Sistemas de
Navegação

Forma de navegar ou
mover no espaço
informacional.
 Sistemas de
Organização

Categorizar e organizar a
informação

Esquema de Organização Alfabética

 Sistemas de
Organização

Categorizar e organizar a
informação

Esquema de Organização por Assunto

 Sistemas de
Organização

Categorizar e organizar a
informação

Esquema de Organização por Tempo

Sistemas de Rotulação

Forma de representar a
informação.

São elementos fundamentais que

antecipam o que virá logo a seguir
após o click.
 Sistemas de
Pesquisa

Estabelece as dúvidas
(perguntas) executadas em
uma consulta de pesquisa
e como elas serão
respondidas.
WIREFRAME
É o rascunho das páginas do site. Deve mostrar quais
os elementos de navegação, quais os elementos de
maior destaque do conteúdo e a ordenação e o
agrupamento de componentes do conteúdo, além de
como priorizá-los. Pode indicar mas não define o
posicionamento dos elementos na tela ou os estilos.

O wireframe descreve o conteúdo e a informação a ser

incluída na arquitetura relativamente a espaços
confinados bidimensional, conhecida
como página.
WIREFRAME
Wireframe X Layout final do site
WIREFRAME
WIREFRAME
 WIREFRAME
Software desktop para criação de Wireframes
Adobe XD
 WIREFRAME
Software desktop para criação de Wireframes
Pencil Wireframe
 WIREFRAME
Software online para criação de Wireframes
Moqups - https://moqups.com/
 WIREFRAME
Software online para criação de Wireframes
Axure - https://www.axure.com/
 WIREFRAME
Software online para criação de Wireframes
Figma - https://www.figma.com/
 ATIVIDADE 2

Com base no seu programa:

oProduza os wireframes das suas telas

○ Inicie com a página principal
○ Depois desenhe as telas que aparecem na
Descrição Formal dos Casos de Uso.
 Dúvidas?
Profa. Thaiana Pereira dos Anjos Reis, Dra. Eng.
thaiana.anjos@ifsc.edu.br