DESIGN WEB

PADRES WEB
Prof.. Giorgia Barreto L. Parrio [2017]
 INTERFACE
Parte de um sistema computacional
com a qual a pessoa entra em contato
fsica, perceptiva e conceitualmente
(Moran,1981).

Uma boa interface amigvel, fcil

de usar, trabalha de maneira prevista
e consistente durante todo o
processo de interao.

Prof. Giorgia Barreto Lima Parrio 2

 INTERFACE AMIGVEL
A interface responsvel por promover estmulos
de interao para que o usurio obtenha
respostas relacionadas s suas atividades. Uma
interface amigvel apresenta as seguintes
caractersticas:
Bom Fluxo de Controle
Navegao Clara
Uso de Manipulao Direta
Feedback
Manipulao de Erros
 INTERAO
Interao , portanto, a troca que ocorre entre usurios e equipamentos, a exemplo
dos sistemas computacionais. Isso acontece por meio de aes bsicas e habituais, que
so as tarefas de interao.

Diferentes estilos de interao podem enriquecer o processo de comunicao, mas esta

deciso de especificao do comportamento da interface pode aumentar o grau de
dificuldade de interao.

Prof. Giorgia Barreto Lima Parrio 4

 INTERAO = Ao + Interpretao:
Processo de Comunicao entre pessoas e sistemas (Preece etal, 1994) .

SISTEMA
AO
USURIO Interface Funcionalidade

INTERPRETAO

Prof. Giorgia Barreto Lima Parrio 5

 INTERAO
Interao s. f.
1. Influncia recproca de dois ou mais elementos.
2. Psicol. Fenmeno que permite a certo nmero de indivduos constituir-se em grupo, e
que consiste no fato de que o comportamento de cada indivduo se torna estmulo para
outro.
3. Fs. Ao recproca que ocorre entre duas partculas.

6
Prof. Giorgia Barreto Lima Parrio 6
 ESTILOS DE INTERAO [L. COMANDO]
Organizao
Comandos simples
Comandos + parmetros
Comandos + opes + parmetros

Estrutura
Ordenao dos parmetros
Smbolos vs. palavras-chave
Estrutura hierrquica

Vocabulrio: Especifidade X generalidade (insert e delete X correct)

Estratgias de abreviao: truncar, eliminar vogais, primeira e ultima letras, primeira letra de cada palavra,
abreviaes padronizadas de outros contextos, fontica
 ESTILOS DE INTERAO - MENUS
ESTRUTURA LINEAR

Organizao
Grupos de itens logicamente semelhantes
Grupos cobrem todas as possibilidades
Sobreposies inexistentes
Itens ordenados
ESTRUTURA EM RVORE

Vocabulrio
Rtulos familiares
Opes bem distintas
 ESTILOS DE INTERAO - FORMULRIOS
Organizao
Agrupamento Lgico
Sequncia dos Campos
Layout

Vocabulrio
Ttulos e Rtulos
Instrues

Preveno e tratamento de erros

Prof. Giorgia Barreto Lima Parrio 9

 COGNIO
Cognio o ato ou processo de conhecer, que envolve ateno, percepo, memria,
raciocnio, juzo, imaginao, pensamento e linguagem.
Conjunto de processos mentais que permite aos usurios buscar, tratar, armazenar e
utilizar diferentes tipos de informao. (Cybis, 2007)
Pressupostos
Participao ativa do sujeito/usurio.
Anlise de situaes reais.
Tem carter interdisciplinar.

Prof. Giorgia Barreto Lima Parrio 10

 ERGONOMIA
A ergonomia a qualidade da adaptao de um dispositivo a seu operador e tarefa
que ele realiza, est na origem da usabilidade, pois quanto mais adaptado for o
sistema interativo, maiores sero os nveis de eficcia, eficincia e satisfao alcanado
pelo usurio durante o uso do sistema.
Eficcia: a capacidade que os sistemas conferem a diferentes tipos de usurios para
alcanar seus objetivos em nmero e com a qualidade necessria.
Eficincia: a quantidade de recursos (por exemplo, tempo, esforo fsico e cognitivo)
que os sistemas solicitam aos usurios para a obteno de seus objetivos com o sistema.
Satisfao: a emoo que os sistemas proporcionam aos usurios em face dos
resultados obtidos e dos recursos necessrios para alcanar tais objetivos.

Prof. Giorgia Barreto Lima Parrio 11

 ERGONOMIA COGNITIVA
Processos mentais: percepo, memria, raciocnio e resposta motora conforme afetem as
interaes entre seres humanos e outros elementos de um sistema.
Critrios:
Conduo.
Carga de Trabalho.
Controle Explcito.
Gesto de Erros.
Coerncia.
Significado dos Cdigos e Denominaes.
Compatibilidade.
 IHC
INTERFACE HOMEM-COMPUTADOR
 DEFINIO
Podemos definir IHC de vrias formas:
canal de comunicao entre o homem e o computador, atravs do qual interagem, com
vista atingir um objetivo comum.
conjunto de comandos de controlo do utilizador mais as respostas do computador,
constitudos por sinais (grficos, acsticos e tcteis).
parte de um sistema computacional com a qual uma pessoa entra em contato fsica,
perceptual e conceitualmente. [Moran, 1981]

inter e multidisciplinar, pois relaciona a cincia da computao a psicologia, ergonomia,

semitica, design, lingustica, sociologia e artes; envolvendo todos os aspectos relacionados com
a interao entre usurios e sistemas (Preece,1994; Carroll, 2003).
Prof. Giorgia Barreto Lima Parrio 14
INTER E MULTIDISCIPLINARIDADE
Informtica Sistemas Informacionais

Ergonomia Corpo Humano

Psicologia Mente

Design Funcionalidade / Esttica

Sociologia Relaes Socioculturais

Semitica Comunicao / Expresso

Prof. Giorgia Barreto Lima Parrio 15

 OBJETIVOS
Adaptao de sistemas computacionais aos seus usurios;
Auxiliar as pessoas na realizao de suas tarefas com eficcia;
Promover maior satisfao, segurana e produtividade.

Prof. Giorgia Barreto Lima Parrio 16

RESPONSABILIDADES
Projetar solues de interao.
Avaliar solues de interao.
Implementar sistemas computacionais interativos para uso humano.
Estudar fenmenos relacionados a interao.

17
Prof. Giorgia Barreto Lima Parrio 17
BENEFCIOS
Melhoria das condies de uso dos sistemas computacionais.
Novos dispositivos e paradigmas
Impactos sociais e comerciais
Mais acessibilidade
Sobrevivncia de produtos no mercado.

18
Prof. Giorgia Barreto Lima Parrio 18
 OBJETOS DE ESTUDO EM IHC
Caractersticas humanas
Natureza da Interao
Contexto de uso
Arquitetura de Sistemas Computacionais
Processo de Desenvolvimento

19
Prof. Giorgia Barreto Lima Parrio 19
FATORES BSICOS
1 2 3
USABILIDADE CONSISTNCIA FUNCIONALIDADE

Facilidade de Uso Manuteno dos Quantidade e

padres Complexidade de
Funes

Prof. Giorgia Barreto Lima Parrio 20

 PRINCIPAIS PROBLEMAS
Foco no sistema e no no usurio;
Desprezo pela interface;
Avaliao do impacto da introduo de novas tecnologias;
Embasamento terico dos desenvolvedores fraco ou inexistente;
Design desconsiderado;
Processo de desenvolvimento inadequado;
Ferramentas inadequadas;
Funcionalidades mal definidas;
Interao usurio-sistema no avaliada.
21
FOCO NO USURIO

Design
Desenvolvimento Mtodos de projeto e
Mtodos de produo que avaliao que gerem
gerem produtos com boa especificaes de interface
qualidade de programao e cuja implementao seja
desempenho . fiel ao projeto e proporcione
ao usurio uma experincia
agradvel e produtiva.
USURIO
Percepo
Os sentidos
A influncia do contexto
Organizao da informao
Codificaes

Memria
Raciocnio
Deduo
Induo
Ateno

Prof. Giorgia Barreto Lima Parrio 23

USABILIDADE
Um site com uma boa usabilidade no exige
raciocnios complexos, consistente e utiliza
pouco tempo para a execuo das tarefas.
Mantendo sempre o foco no usurio,
conhecendo seu perfil, suas caractersticas e
desejos.
O QUE ?
Viso e processo para implementar projetos com foco no usurio.

International Organization for Standardization, definiu que usabilidade a extenso

na qual um produto pode ser usado por usurios especficos para alcanar
objetivos especficos com efetividade, eficincia e satisfao em um contexto de uso
especfico (ISO 9241-11).

No conceito Web, define-se por um design que ajuda o internauta a encontrar

informaes, servios e produtos de forma intuitiva.

Prof. Giorgia Barreto Lima Parrio

26
 PRINCIPAIS CARACTERSTICAS
Usar dilogos simples e naturais:
Informaes suprfluas podem deixar o
usurio confuso. No force o usurio a ler
na tela e navegar por pginas e mais
pginas, para chegar ao contedo desejado.
Prof. Giorgia Barreto Lima Parrio
Falar a linguagem do usurio:
usar palavras, termos e expresses do
vocabulrio do seu pblico-alvo. Voc no
poderia usar uma linguagem tcnica no site
da Mormai. No faa o usurio pensar, faa-o
agir. Para isso ele no deve ter duvida sobre
o que significa aqueles texto ou expresso.
27
Minimizar a carga de memria:
O usurio de internet totalmente livre.
Ento no tente prende-lo em seu site ou
fazer com ele navegue por pginas que no
quer para conseguir as informaes que
precisa.
Prof. Giorgia Barreto Lima Parrio
Dar mensagens de erros claras e
oferecer alternativas equivalentes ao
usurio ou link direto com administrador
do site. Deve-se:
Fornecer mensagens de retorno
adequadas
Fornecer sadas claramente marcadas
Fornecer atalho de tarefas
Prevenir erros
28
Disperso dos elementos essenciais Hierarquia dos contedos. Habitualmente,
identificao e navegao no site. Os as chamadas para o contedo mais
elementos indispensveis navegao no importante esto colocadas no topo da
site devem estar dispostos de maneira a pgina, e, por conseguinte, no rodap estar
ajudar a navegao do usurio. Tudo deve o que menos importante, porque no
ser "bvio". imediatamente visvel.
Novas janelas: cuidado para no fazer o
usurio abandonar seu site sem querer...
Muitos links, ao invs de abrirem novas
janelas, carregam na mesma pgina,
fazendo com que o usurio se perca e acabe
esquecendo que estava no seu site.
Prof. Giorgia Barreto Lima Parrio
Onde esto os links? Pelas regras
tradicionais utiliza-se a cor azul para os
links, e roxa para os links j visitados. Por
isso, opte por outras solues j
conhecidas, como trocar a cor da palavra ou
colocar em negrito. Mas esteja ciente de
que voc no estar sendo completamente
bvio.
30
 ANLISE HEURSTICA
Formuladas em 1993 por Jakob Nielsen, este conjunto de descobertas so ainda hoje
fundamentais para se identificar falhas de usabilidade. Em geral, este teste feito por especialistas
no assunto, e listam uma srie de problemas identificadas em grau de importncia.
Construir dilogos simples e naturais
Falar a linguagem do usurio
Minimizar a necessidade de memorizao do usurio
Manter a consistncia
Oferecer feedback
Identificar claramente as sadas
Oferecer atalhos
Elaborar boas mensagens de erro
Evitar a ocorrncia de erros
Prover ajuda e documentao de apoio
 TESTES DE USABILIDADE
1. Permitem obter uma avaliao quantitativa do desempenho do sistema.
Conhecer:
O tempo de execuo mdio de cada tarefa.
A percentagem de utilizadores que completaram, com sucesso, cada tarefa.
O nmero de vezes que o utilizador recorreu documentao para cada tarefa.
O nmero e tipo (observaes e comentrios, no-crticos e crticos) de erros.
1. Observam e analisam o comportamento de navegao do usurio;
2. Descobrem as dificuldades do usurio no site: o que so, onde esto, quando, como e
porque aparecem;
3. Fornecem informaes valiosas para a deciso e julgamento do que melhor para o site;
4. mais efetivo quando feito com mais antecedncia e mais frequncia durante o projeto;
5. Posicionam o usurio no centro do processo de desenvolvimento, o que garante um resultado
mais satisfatrio a ele, usurio.
Permitem obter uma avaliao qualitativa do sistema opinio dos utilizadores sobre:
Tratamento automatico das informao (ecrs).
Terminologia e informao do sistema.
Aprendizagem.
Capacidades do sistema.

Prof. Giorgia Barreto Lima Parrio 34

 TIPOS DE TESTES DE USABILIDADE
Avaliao
Validao
Comparativo

Prof. Giorgia Barreto Lima Parrio 35

QUANDO APLIC-LOS? [RUBIN, 1994]

Na fase inicial de projeto: para estabelecer a intuitividade da implementao

teste exploratrio.

Na fase inicial e durante a fase de desenvolvimento: para medir a efetividade da

implementao teste de avaliao.

Na fase prxima do lanamento: para verificar que o produto corresponde ou

excede as expectativas e como que o produto se comporta como um todo teste
de validao.

A qualquer instante: para comparar o desempenho do sistema antes e depois de

determinada alterao teste comparativo.
 COMO PROCEDER?
1- Definir o pblico-alvo e os seus objetivos.
Quem vai utilizar o produto e o que pretende do mesmo?

2- Definir tarefas com base nesses objetivos.

As tarefas so cenrios tpicos de utilizao do produto pelo pblico-alvo.

3- Encontrar as pessoas adequadas.

Devem corresponder ao perfil do pblico-alvo ou aproximar-se o mais possvel.

4- Observ-las a executar as tarefas.

Tentar compreender o modelo mental dos utilizadores para que o produto os satisfaa.
Deve-se pedir ao utilizador que v dizendo o que pensa medida que utiliza o produto.
ACESSIBILIDADE
O PODER DA WEB NA SUA UNIVERSALIDADE
SER ACESSADA POR TODOS, INDEPENDENTE DAS
SUAS DEFICINCIAS E LIMITAES
(TIM BERNERS LEE INVENTOR DA WORLD WIDE WEB)
 O QUE ?
Condio para utilizao, com segurana e autonomia, total ou assistida, dos
espaos, mobilirios e equipamentos urbanos, das edificaes, dos servios de
transporte e dos dispositivos, sistemas e meios de comunicao e informao, por
pessoa portadora de deficincia ou com mobilidade reduzida. (Decreto Federal n
5.296/2004 [1], artigo 8, I)

um exerccio de cidadania, tanto para que a proporciona, como para que se

beneficia com ela.
Com ela podemos ter o uso pleno, seguro e independente dos espaos ou
equipamentos, dando condies de acesso a toda a populao, independente de
suas caractersticas fsicas, idade, sexo, etc.

Prof. Giorgia Barreto Lima Parrio 40

ACESSIBILIDADE E PADRES WEB
Fazer um site utilizando os padres web, fazer um site melhor acessvel a
qualquer plataforma ou dispositivo, sem qualquer esforo, ou ainda, sem fazer
uma verso especfica para um dispositivo especfico.

Acessibilidade para todos! Desde o usurio que tenta acessar o site do banco
pelo desktop usando um browser como Opera e Firefox no conseguindo acessar
corretamente o site, at aquele usurio que est preso no trnsito e aproveita
para tentar mandar um e-mail pelo seu PDA.
Cartilhas de Acessibilidade Nic.Br:
Fascculo 1: http://www.nic.br/media/docs/publicacoes/1/cartilha-w3cbr-acessibilidade-web-fasciculo-I.pdf
Fascculo 2: http://www.nic.br/media/docs/publicacoes/13/cartilha-w3cbr-acessibilidade-web-fasciculo-II.pdf
 VANTAGENS
Melhora da performance dos servios web.
Reduo no esforo da manuteno.

BENEFCIOS
Demonstrao de compromisso e responsabilidade social.
Refora a igualdade de acesso informao.

Prof. Giorgia Barreto Lima Parrio 42

 REQUISITOS DE DESIGN
Consistncia no layout.
Interao explcita com as pginas.
Identificadores explcitos.
reas do site bem determinadas.
Manter um padro de navegao e identidade visual.

Prof. Giorgia Barreto Lima Parrio 43

 REQUISITOS DE CONTEDO
Linguagem clara e objetiva.
Organizao e hierarquia do contedo.
Agrupar elementos e dar informao contextual.
Dividir a informao extensa em pequenos blocos.
Manter um padro de linguagem.

Prof. Giorgia Barreto Lima Parrio 44

 Assegurar a acessibilidade direta de interfaces do usurio integradas;
Projetar pginas considerando a independncia de dispositivos;
Utilizar solues de transio;
Utilizar tecnologias que se adaptem recomendaes do W3C;
Fornecer informaes de contexto e orientaes;
Fornecer mecanismos de navegao claros;
Assegurar o controle do usurio sobre as alteraes temporais do contedo;
Assegurar a clareza e a simplicidade dos documentos.

Prof. Giorgia Barreto Lima Parrio 45

 TIPOS DE TESTES
Automticos e semiautomticos;
Checklist do WCAG 1.0;
Simulao com usurios com limitaes e deficincias;
Compatibilidade com os padres Web;
Impresso;
Dispositivos mveis;
Outros ambientes e navegadores;
Contrastes de cores;
Testes com diferentes usurios.
 1...2...3...TESTANDO
Testar as pginas com um navegador textual: Lynx,Lynx Viewer (Simulador)
Testar em vrios navegadores grficos, com: som e grficos ativos; sem grficos;
sem som; sem mouse; sem carregar frames, programas interpretveis, folhas de estilo
ou applets.
Testar em vrios navegadores: antigos e recentes.
Testar em outras ferramentas: navegador de emisso automtica de fala; leitores
de tela: Jaws, Virtual Vision (em portugus), DosVox (gratuito e em portugus); tela
de pequenas dimenses, etc.

Prof. Giorgia Barreto Lima Parrio 47

 VALIDADORES DE CDIGO
Acessibilidade Sintaxe
WebXACT (antigo Bobby) W3C Markup Validation
Service
Cynthia Says
Wave
CSS
A-Prompt
W3C CSS Validation Service
Da Silva (em portugus)

Prof. Giorgia Barreto Lima Parrio 48

 DICAS
IMAGENS E ANIMAES: Use o atributo alt para descrever a funo de cada
elemento visual.
IMAGEMAPS: Use mapas client-side (o tag map) e texto para as regies
clicveis.
MULTIMDIA: Inclua legendas e transcries para o udio, e descries para o
vdeo.
HIPERLINKS: Utilize texto que faa sentido fora do contexto. Evite a frase
"clique aqui".
ORGANIZAO DA PGINA: Use cabealhos, listas e uma estrutura consistente.
Use CSS para layout e estilo sempre que possvel.
 GRFICOS E DIAGRAMAS: Sumarize o contedo ou use o atributo longdesc.
SCRIPTS, APPLETS E PLUG-INS: Para o caso de estarem desabilitados ou de no
serem suportados pelo browser, fornea contedo alternativo.
FRAMES: Use o tag noframes e empregue ttulos significativos.
TABELAS: Torne compreensvel a leitura linha a linha. Resuma.
VALIDE SEU TRABALHO: Use as ferramentas, checklist e os guias disponveis em
http://www.w3.org/TR/WCAG.

Prof. Giorgia Barreto Lima Parrio 50

 AI
ARQUITETURA DA INFORMAO
 DEFINIO
Arte e a cincia de organizar e catalogar websites, intranets, comunidades on-line e
software de modo que a usabilidade seja garantida.

Na Web, envolve tambm a estruturao do fluxo de navegao de uma site.

Uma boa AI estabelece as fundaes necessrias para que um sistema de informao

faa sentido para seus usurios.

Une 3 campos vitais: a Tecnologia, o Design e a Comunicao.

52
 IMPORTNCIA
As Tecnologias da Informao e Comunicao alteraram substancialmente o
modo como a informao organizada e acessada, assim como a
quantidade de informao disponvel.

OBJETIVO
Projetar estruturas (ambientes informacionais) que forneam aos internautas
os recursos necessrios para transformar suas necessidades em aes e
atingir seus objetivos de forma eficiente.
FOCO

Prof. Giorgia Barreto Lima Parrio 54

FUNDAMENTOS DA EXPERINCIA DO USURIO
PROCESSO CONSTRUTIVO
DA EXPERINCIA DO USURIO
 COMPONENTES

Sistemas de Organizao:
Determina como
apresentada a organizao e
categorizao do contedo.
Apresenta 2 Esquemas:
Sistemas de Rotulao: Define os signos verbais(terminologias) e visuais para
cada elemento informativo e de suporte navegao do internauta. Dividem-se
em:
Sistemas de Navegao: Especifica as formas de se mover atravs do espao
informacional. Nielsen (2000), define que um bom sistema de navegao deve, a
todo momento, responder a trs perguntas bsicas: Onde estou? Onde estive?
Aonde posso ir? H dois tipos de sistemas de navegao:

Embutido
Formado pelos elementos de
navegao que so apresentados
junto com o contedo.
Sua funo de contextualizar e
oferecer flexibilidade de movimento.
Exemplos: Logotipo; Barra de
navegao Global; Menu Local; Bread
Crumb; Passo a passo e Cross Content.
Remoto
Formado pelos elementos externos a
hierarquia do site.
Sua funo prover caminhos
complementares para se encontrar o
contedo e completar as tarefas.
Exemplos: Mapa do Site; ndice
Remissivo e Visita Guiada.
Sistemas de Busca: Determina as perguntas que o internauta pode fazer e as respostas que
ir obter nos mecanismos de busca.
So respostas dadas s dvidas dos usurios. No caso dos contedos em grande quantidade
muito importante existir um sistema de busca, que torna mais gil a pesquisa quando o
usurio tem algum questionamento em um determinado momento na navegao. a busca
das respostas para suas dvidas naquele momento.
 PRIORIDADE E HIERARQUIA
A definio da hierarquia das informaes crucial para o resultado de um trabalho de
AI.

Prioridades dos Usurios X Prioridades da Empresa

O usurio em primeiro lugar

Prof. Giorgia Barreto Lima Parrio 62

 AREAS
Venda
E-commerce
Atendimento
Dicas Brastemp

Prof. Giorgia Barreto Lima Parrio 63

 D

A B

A Atendimento
B Vendas
C E-Commerce
D Brastemp

Prof. Giorgia Barreto Lima Parrio 64

 PGINAS MODELOS
Para criar um site, o arquiteto no precisa desenhar os wireframes de todas as
pginas.

Com o mapa de navegao, ele deve identificar quais so as pginas modelo, a

serem seguidas pelas demais.

O ideal buscar padres que possam abarcar vrias pginas.

Prof. Giorgia Barreto Lima Parrio 65

Exemplo: CNN Internacional

Pgina Inicial
Homes Secundrias
 Pginas de Contedo

Prof. Giorgia Barreto Lima Parrio 68

DEFINIO DE TEMPLATES

Legenda

Prof. Giorgia Barreto Lima Parrio 69

 ATIVIDADE AVALIATIVA
1. Defina os principais templates do projeto (no mnimo 4).
2. Construa o mapa de navegao do site.
3. Definir como os menus sero exibidos na pgina e como funcionar a navegao entre os
nveis do menu.
4. Crie os wireframes do seu projeto, de acordo com os templates identificados no mapa de
navegao.

Prof. Giorgia Barreto Lima Parrio 70

 BIBLIOGRAFIA
AGNER, Luiz. Ergodesign e Arquitetura da Informao. Ed. Quartet.
MORAES, Anamaria de. Avaliao e Projeto no Design de Interfaces. Ed. 2AB.
DIAS, Cludia. Usabilidade na WEB: Criando Portais Mais Acessveis. Alta Books.
KRUG, Steve. No me faa pensar: uma Abordagem de Bom Senso Usabilidade na
Web. Alta Books.

Prof. Giorgia Barreto Lima Parrio 71

 Obrigada!
Obrigada!!!
Prof.. Giorgia Barreto

Prof. Giorgia Barreto Lima Parrio 72