Buscar

Design para Web aula 05

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 17 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 17 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 17 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Prévia do material em texto

Design para Web
Aula 05: O projeto do website (parte 1 de 2)
Apresentação
A fase denominada Projeto do Website envolve a aplicação de conceitos, técnicas, metodologias, e boas práticas de
tecnologia aplicada para que o design da interface esteja em consonância com as necessidades de seus usuários,
aproveitando, na medida do possível, suas experiências na interação usuário-sistema.
Nessa aula veremos a aplicação de dois conceitos fundamentais para interface de qualidade. O primeiro, o design da
interação, provê ao website a possibilidade de apresentar produtos e serviços interativos cada vez mais necessários no
mercado atual para reter a atenção das pessoas.
O segundo, a arquitetura da informação, provê ao website uma boa navegação e um design com boa disposição das
informações, de forma que o usuário possa entender onde está e encontrar o que procura.
De forma a corroborar a aplicação dos conceitos acima expostos, vamos discorrer na aula seguinte sobre ferramentas de
modelagem da interface: Mapa do site e Wireframe.
Objetivos
Aplicar o design da interação no website;
Aplicar o conceito de arquitetura da informação no design do website;
Descrever ferramentas de modelagem da interface: Mapa do site e wireframe.
O design da interação no website
 Fonte: Shutterstock
Fundamentação e visão geral do design da interação
O website é elemento central na estratégia das empresas. Em determinados setores, como, por exemplo, o comércio de varejo,
a presença da marca na internet é mais do que estratégica, é questão de sobrevivência.
Diante da concorrência, o foco é manter a atenção do usuário, não apenas com preço e qualidade, que são preponderantes,
mas sobretudo por um ambiente agradável e um design que privilegie sua satisfação e permanência no website, de preferência,
comprando. Para isso, a procura pelo que deseja deve ser simples e fácil.
O design da interação é uma disciplina que estuda a relação usuário-sistema, tendo como meio para tal uma interface. Está
relacionado ao projeto de interfaces interativas, que propõe elementos da interface que privilegiem aspectos como design
grá�co, boa usabilidade, funcionalidade, e�ciência e legibilidade da interface como um todo.
O objetivo é entregar interatividade para manter as pessoas no website. A experiência do usuário depende de sua bagagem em
tecnologia e da expertise que acumulou sobre o negócio.
O design da interação tem competência sobre os seguintes aspectos:
Clique nos botões para ver as informações.
A legibilidade é o conceito que permite a compreensão do texto em função de todos os outros elementos envolvidos;
O website deve ser legível para os usuários, ou seja, fácil de compreender e interpretar. Deve-se, assim, atentar ao
design, disposição dos espaços e seleção de símbolos, fonte e ícones.
Legibilidade 
Na visão do usuário, a interface é o próprio software, na medida em que é através dela que são executadas as suas
tarefas;
A usabilidade da interface mede o quão fácil é a interação entre usuário e sistema. Nessa direção, o designer de
interação deve lançar mão de ferramentas como wireframe, mockups e protótipos.
Usabilidade 
A funcionalidade tem relação com a utilidade do website e os requisitos funcionais do sistema. No que tange à
funcionalidade, o website deve ser útil e entregar o resultado esperado a seus usuários.
Funcionalidade 
Designer de interação deve ter conhecimentos de programação que o permitam decidir sobre aspectos da
implementação do website. Ele não será o responsável pelo código, mas deve conhecer linguagens de programação
de front-end, back-end e banco de dados, já que terá que projetar os componentes que vão permitir a interatividade.
Programação 
Resume a percepção pelo usuário ao interagir com uma interface.
Estética 
Concluindo, o design de interação atua como ponto de equilíbrio entre a
funcionalidade do sistema e sua interatividade, visando evitar a decepção
com o produto.
Em projetos de websites de grande porte, os responsáveis pelo design de interação criam wireframes, mockups ou protótipos,
enquanto os outros pro�ssionais são responsáveis por planejar e criar a estrutura.
1
Wireframes
Representação grá�ca, em forma de rascunho, que destaca
a disposição dos elementos de interface de um website.
Como é apenas um rascunho, não há, obrigatoriamente,
necessidade de re�etirem o layout da versão �nal do
website;
2
Mockups
Imagens do projeto da interface depois de pronta, sendo
portanto mais próxima da realidade;
3
Protótipos
Têm o mesmo objetivo dos mockups, contudo são uma
versão teste do projeto e já mostram a interatividade. Vale
pontuar que não há compromisso com a verdade, logo os
dados usados são �ctícios, servindo para testar o sistema.
 Entenda melhor os aspectos do design da interação
 Clique no botão acima.
Legibilidade
Conforme a fundamentação, o conceito de legibilidade permite o entendimento do texto do website em função de
todos os demais elementos. Harmonia entre os elementos pode ser algo desejado. O design da interação estuda o
manuseio da interface do website pelos internautas (usuários), visando garantir o seu melhor desempenho nas
plataformas virtuais.
O design de interação estuda a relação entre um sistema e o usuário por meio de uma interface. Inicialmente, são
realizados testes com usuários típicos para entender como se comportam durante a navegação. Em seguida, com
base nesse comportamento demonstrado, as funcionalidades sofrem otimizações para que possam ser executadas
de maneira mais objetiva e simpli�cada possível.
O processo como um todo abrange o entendimento e a compreensão dos elementos da interface sempre que o
usuário abre o site, ou seja, considera a compreensão textual em conjunto com os demais elementos: Ícones, imagens,
vídeos, áudios etc.
A legibilidade abrange a seleção dos vocábulos, palavras, iconogra�a, fontes, espessuras, cores e espaçamento de
texto adequados.
Usabilidade
Segundo a ABNT (Associação Brasileira de Normas Técnicas) [NBR 13596], a usabilidade de uma interface evidencia a
facilidade para utilização do software e outros aspectos relacionados.
Requisito fundamental para a qualidade de um software, a interface precisa ser testada e avaliada. Uma das principais
abordagens para medir a qualidade de uma interface é a usabilidade, que enfatiza o esforço demandado pelo usuário
ao utilizar um software, através de sua interface, permitindo classi�cá-la como adequada ou não.
É tradicionalmente de�nida como a conjunção de cinco atributos [NIELSEN, 1993]:
1. Facilidade de aprendizado: O atributo mais relevante. Avaliado em função do tempo que usuário leva para adquirir
su�ciente grau de destreza no uso do software, de forma a executar suas tarefas (no software) com pro�ciência; 
2. Produtividade: Uma vez que o usuário tenha aprendido, a interface deve prover produtividade; 
3. Memorabilidade (facilidade de relembrar): A interface deve permitir que o usuário rapidamente relembre o uso do
software em caso de reaprendizado depois de um certo tempo de inatividade; 
4. Prevenção de erros: O contexto de erro que interessa à usabilidade refere-se à ação que não leva ao resultado
desejado. O software deve ter uma taxa mínima de erros, evitar ao máximo que usuários os cometam e, caso o façam,
o software deve permitir fácil recuperação, sem perda do trabalho já realizado; 
5. Satisfação subjetiva do usuário: O usuário, ao interagir com o software, deve sentir-se subjetivamente satisfeito. Tal
medição pode ser realizada por preenchimento de formulários e/ou entrevista com o usuário.
Segundo Nielsen, a usabilidade é a capacidade de um software ser operado de maneira e�caz, e�ciente e agradável,
num determinado contexto de operação, para a realização das tarefas de seus usuários [ISO 9241].
Medir a usabilidade implica em analisar os usuários, suas tarefas e, por �m, diagnosticar se a interface projetada
atende ou não às necessidades.
A usabilidade de interfaces pode ser medida pela aplicação de diferentes métodos e técnicas,cada um com seu
objetivo claramente de�nido, e em momentos distintos do processo de desenvolvimento sem e com a interface
implementada, com ou sem a presença de usuários, bem como com ou sem a presença de avaliadores de usabilidade.
Isso permite que a interface seja avaliada em momentos diferentes do processo de desenvolvimento do software.
Num primeiro momento, em papel ou usando alguma tecnologia de desenho à mão, e nos momentos mais avançados
do processo de desenvolvimento do software, avaliando a interface implementada.
A aplicação de testes de usabilidade é o principal meio para avaliar interfaces e, certamente, o mais tradicional, visto
que relata a utilização de tarefas típicas e críticas do sistema, com reais usuários e a interface implementada. Existem
ainda os métodos de inspeção, em que um especialista navega pela interface, em geral não implementada, em busca
de erros de usabilidade.
Projetar a interface, seguindo os bons preceitos de usabilidade, é uma boa prática, especialmente, em websites. Na
prática, nem sempre é possível que a interface contemple os cinco atributos propostos por Nielsen ou, dependendo do
contexto de uso do software, um ou outro atributo pode tornar-se prioritário em detrimento de outro(s).
Vamos considerar um sistema usado pelo caixa em uma agência bancária, em que há �la de atendimento e o fator
tempo é crítico. Nesse caso, os atributos “Produtividade” e, provavelmente, “Prevenção de erros” tornam-se muito
importantes, sendo até admissível sacri�car o atributo “Facilidade de aprendizado”, na medida em que o funcionário do
banco pode ser devidamente treinado para operar com destreza o software.
Em outra medida, em um website (software) de comércio eletrônico, é desejado que um amplo per�l de usuários, em
geral, consiga usá-lo. Nesse caso, os atributos “Facilidade de aprendizado” e “Satisfação subjetiva do usuário” são
prioritários.
Extrapolando os cinco atributos de Nielsen, outros atributos podem ser relevantes, conforme o tipo de software e sua
utilização. Em um sistema de navegação de avião, o atributo “precisão dos resultados” torna-se importante ar no
desenvolvimento da interface.
Funcionalidade
Durante muitos anos, a funcionalidade foi o elemento mais relevante no processo de desenvolvimento de software.
Importava produzir um software que fosse e�ciente, primeiramente em termos velocidade de processamento e, num
segundo momento, em sua completude.
A interface não era determinante, pois as entradas de dados eram repetitivas e, como o sistema trazia consigo
automação operacional, esse era o ponto crucial. A chegada da internet foi determinante para essa mudança de
paradigma, que passou a dar a devida importância ao elemento central de interação entre usuário e sistema, a
interface.
Para que os elementos da interface sejam compostos de forma harmoniosa e e�ciente, é preciso que sejam aplicados
os elementos de interface mais adequados, em conformidade com o tipo de processamento necessário à
funcionalidade.
O designer de interação deve também compreender a tecnologia necessária para que os websites operem
corretamente. Conhecer as linguagens de programação para o desenvolvimento de websites é fundamental, tanto para
o desenvolvimento front-end como para ao desenvolvimento back-end, conforme veremos abaixo no item
programação.
Programação
O designer de interação precisa ter noções de programação para implementar o website que projetou, tanto em nível
de código front-end como back-end, além da manipulação da base de dados, pois será dele a responsabilidade pela
criação de componentes de interatividade.
Ou seja, os conhecimentos de front-end são muito necessários, já que a interação ocorre no navegador, no lado cliente.
Contudo, muitas vezes um componente está associado a uma base de dados, como uma combo box ou uma lista
(com produtos de um e-commerce, por exemplo). Nesse caso, é importante conhecer a programação back-end, do
lado servidor.
Dentre as linguagens para desenvolvimento de front-end, destacam-se: HTML; CSS; javascript; para programação back-
end merecem destaque: PHP, java, ASP,e python.
Estética
Quando falamos em estética logo nos vem à cabeça o conceito de beleza, mas a estética pode ser vista como um
conjunto de atributos relacionados com a �loso�a e a arte, que tem por objetivo relacionar a aparência do website com
seu conceito.
Segundo Moran, para o usuário, a interface é o próprio sistema; assim sendo, o termo mais usado para referenciar a
estética de um website é Look & Feel (aparência e sensação), que destaca a sensação do usuário ao navegar e
interagir com o sistema, através da interface.
A estética nos permite diferenciar, no website, o essencial do secundário. Por exemplo, em sistemas de comércio
eletrônico podemos simpli�car a navegação, minimizando cliques e tempo de espera.
Arquitetura da Informação
 Fonte: Shutterstock
Manter o internauta conectado em um website (na verdade, no software, em geral), hoje em dia, não é simples, dada a urgente
necessidade da informação a ser consumida. Se for gasto muito tempo para localizar a informação desejada (o conceito de
informação aqui é tudo aquilo que o usuário busca no site, podendo ser um produto, por exemplo), o usuário perde o interesse e
vai buscar o que deseja na concorrência.
Igualmente importante é o usuário localizar com sucesso a informação desejada, sendo fundamental organizá-la
adequadamente. Nesse contexto, informação é: O conjunto de dados organizados, transformados e apresentados, com
signi�cado e sentido.
Assim sendo, podemos dizer que a arquitetura da informação é um processo que organiza os elementos do website (e do
software em geral), favorecendo a experiência do usuário, de forma a ajudá-lo na localização do conteúdo desejado.
Exemplo
Ao acessar uma página e entendermos, rapidamente, onde estamos e encontramos aquilo que procuramos, é porque os
pro�ssionais da arquitetura da informação, em uma atividade multidisciplinar, �zeram seu trabalho com competência.
Conclusão: A arquitetura da informação proporciona uma boa experiência ao navegarmos pelo website.
O trabalho da equipe de arquitetura da informação consiste em aplicar técnicas para estruturar as informações, para serem
classi�cadas e posteriormente localizadas por quem as procura. É intenso o trabalho dessa equipe em sites de notícias, como
nos principais jornais, por exemplo.
Um bom trabalho da equipe de arquitetura da informação permite:
1
Que as informações sejam facilmente identi�cáveis;
2
Uma navegação e�ciente e intuitiva;
3
Uma boa distribuição do conteúdo pela página web.
Segundo Rosenfeld e Morville (1998), são sete os verbos a serem usados pelo arquiteto de informação:
Organizar Navegar Nomear
Buscar Pesquisar Desenhar
Mapear
Rosenfeld e Morville (1998) dividem o trabalho da arquitetura da informação em quatro partes interdependentes:
Clique nos botões para ver as informações.
Compreende a forma de agrupar e categorizar (classi�car) o conteúdo informacional, tendo como objetivo de�nir onde
cada item das demais partes (abaixo) estará posicionado no layout.
Existem diversas formas de organizar a estrutura informacional, cada uma com sua finalidade, de acordo com o tipo de website a ser
desenvolvido.
Existem dois fatores que di�cultam a categorização de informação: Ambiguidade e heterogeneidade. Uma informação
ambígua di�culta, pois poderá ser classi�cada em mais de uma categoria, o que pode confundir não apenas o usuário,
mas também o desenvolvedor. A heterogeneidade tem relação com o conteúdo bem diferenciado de um determinado
website, tornando complexa a classi�cação.
Se a organização informacional do website estiver em conformidade com as expectativas dos usuários, haverá mais
chance de o site ser bem sucedido, pois lógica e organização coerentes permitem previsões favoráveis sobre a
localização que o usuário procura.
A informação organizada em sequência é uma forma simples, objetiva e fácil. A ordenação pode variar entre: Cronológica,
alfabética ou outroaspecto relevante conforme o website. Para sites de e-commerce pode-se pensar em valor dos
produtos como critério de ordenação. A categoria escolhida deve estar presente em todos os itens.
Por exemplo, em e-commerce: Se organizarmos por categoria de produtos, e faltar informação em algum produto,
teremos imprecisão, di�cultando a vida do usuário. Caminhos clássicos de organização informacional:
Categoria: Usada quando os itens estão relacionados e possuem características semelhantes. Por exemplo, em sites
de e-commerce, os produtos de determinado departamento (esportes etc.);
Tempo: Usada para eventos de duração �xa em que elementos são apresentados sequencialmente. Por exemplo, em
website de informações do mercado acionário, ou um calendário acadêmico, em website educacional;
Localização: Na maioria das vezes, organizamos informações provenientes de fontes ou lugares diferentes, como na
análise de indústrias de países diferentes;
Ordenação alfabética: A organização alfabética dos nomes de itens é muito útil para pesquisas em longas listas, tal
qual no dicionário;
Hierarquia: Ordena os itens por preço, tamanho, relevância ou outras características que existam em todos os itens.
Quando há muita informação, a hierarquia torna-se complexa, logo é mais factível em pequenos websites com
diversidade de conteúdo. 
Sistema de Organização 
Determina a navegação no website, ou seja, de que formas o internauta pode movimentar-se pelo conteúdo informacional.
Mais do que uma barra única no topo da página, são elementos que, em conjunto, levam o usuário a mover-se pelo site.
Tais elementos podem ser: Hyperlinks, botões, menus e outros que permitam acesso aos conteúdos.
A navegação e�ciente abarca todo o website e, com mais de um caminho para localizar a informação, de preferência. O
uso de mapa de sites é fundamental para uma navegação e�ciente, principalmente se o website for grande e complexo,
com muitas seções distintas. Um bom sistema de navegação permite ao usuário localizar com facilidade o que procura.
Con�ra abaixo os seguintes componentes de navegação:
Sistema de Navegação Embutido: Identi�ca o website e sua posição em relação à web como um todo;
Barra de Navegação Local: Conjunto de links para áreas-chave do website;
BreadCrumbs: Posiciona o internauta de sua localização na estrutura do website e provê links para os níveis
hierárquicos imediatamente superiores;
Cross Content: Disponibiliza, ao internauta, um set de links a�ns ao conteúdo da página.
Sistema de navegação 
Como representar e apresentar a informação, de�nindo signos a cada elemento necessário. Por exemplo, o rótulo “Sobre”,
no menu principal, indica ao usuário que, ao clicar ali, serão exibidas informações sobre quem criou o website. Podem ser
hyperlinks, itens ou títulos de seções. Ícones podem ser usados, porém são mais limitados do que palavras, para o usuário
associar.
Para tal, os principais conceitos a aplicar são:
Fale a língua do usuário, adaptando os rótulos do website aos dialetos e gírias de cada localidade;
Elimine a ambiguidade de um rótulo, evitando dupla interpretação e confusão sobre o que escolher e para onde ir por
parte do internauta.
Sistema de rotulação 
Útil para websites com muito conteúdo. O sistema de buscas de�ne o rol de perguntas e respostas que o internauta terá à
sua disposição. Cabe ressaltar, com relação aos quatro sistemas, que:
Um sistema de navegação, quando mal projetado, tende a afetar a usabilidade, na medida em que não orienta o
internauta sobre sua localização atual e opções de navegação;
Um sistema de rotulação mal feito pode deixar o usuário confuso, sem compreensão do que é apresentado no
website;
Um sistema de busca mal projetado di�culta que o usuário acesse aquilo que deseja.
A arquitetura da informação não foca a funcionalidade; contudo, estrutura e classi�ca em categorias o conteúdo,
facilitando a localização e seu uso pelo internauta. Sem um amplo e, preferencialmente, profundo conhecimento do per�l
do usuário, di�culta o agrupamento do conteúdo.
Sem entendimento do conteúdo, di�culta a criação de uma boa arquitetura de informação. Sem conhecimento do
contexto, torna-se inviável criar algo que funcione para as pessoas e para os negócios.
Sistema de busca 
Mapa do site e wireframe
 Fonte: Shutterstock
O mapa do site, útil em websites grandes e complexos, é uma estrutura hierárquica contendo todas as suas páginas e como
são acessadas pelo sistema de navegação. Pode-se, opcionalmente, descrever o conteúdo das páginas.
É considerado a planta baixa do site. Na planta baixa de um apartamento temos acesso ao tamanho do imóvel e informações
de cada cômodo: Sua localização e seu tamanho. No mapa do site, temos acesso às seguintes informações: Tamanho do site,
onde está cada conteúdo e como se chama cada “cômodo”.
Dentre as serventias do mapa do site, podemos citar:
Documentar o escopo do website;
Validar as seções, rótulos e hierarquias;
Aprovar com cliente, juntamente com wireframe (item a seguir), a estrutura, navegação e demais elementos das páginas
do website;
Ajudar o designer e o desenvolvedor na mensuração do esforço e acompanhamento do trabalho;
Ajudar o gerente do projeto na criação e atualização dos itens de cronograma (conjugado com as entregas);
Avaliar o melhor tipo de navegação, os elementos e se os rótulos estão adequados e coerentes com o que se deseja;
Ajuda de sobremaneira no melhor ranqueamento do website para as visitas, ao fazer pesquisas no Google. Se o mapa do
site ajuda o robô da GOOGLE na leitura, ele tende a priorizar o conteúdo do website. Ou seja, ele ajuda na estratégia de
SEO (estratégias de otimização de websites).
Abaixo, um exemplo de mapa do site.
 Fonte: GOPM
javascript:void(0);
Wireframe
É um desenho da interface. Geralmente em preto e branco, ou em sombras de cinza. É o documento em que são especi�cados
os elementos que compõem cada página, mostrando sua disposição e servindo como referência para o design �nal da
webpage. Inicialmente, pode ser feito à mão, e, após aprovação do cliente, parte-se para o design da página.
Dentre os elementos contidos no website, temos navegação, seções de conteúdo, imagens ou outra mídia, botões, edits, combo
box, grids etc. Podem conter ainda anotações sobre um elemento ou interação.
Os tipos possíveis de wireframe são:
1
Básicos
Têm baixa �delidade, são simples, em geral preto e branco.
São esquemas de páginas simples;
2
Anotados
É um wireframe básico, com detalhes de breves notas de
comentários;
3
Interativos de alta de�nição
Contém interações em um wireframe ou entre eles. Para ser
usada, precisa de software de apresentação e design
grá�co, ou de wireframing e prototipagem;
4
Fluxo de usuários
Quando a anotação não é su�ciente para exibir a navegação
ao usuário, mais informações podem ser necessárias.
Esses wireframes podem ser visualizações estáticas de um
wireframe totalmente interativo, e podem incluir uma
apresentação de slides ou uma coleção de wireframes em
série para exibir um �uxo de usuário principal, ou uma série
de �uxos de usuário.
Abaixo, con�ra algumas imagens com exemplos de wireframe:
Imagem 1: Wireframe básico | Fonte: Webframe
Imagem 2: Wireframe anotado| Fonte: Fonte: Webframe
Imagem 3: Wireframe �uxo de usuário | Fonte: Medium
javascript:void(0);
javascript:void(0);
javascript:void(0);
Imagem 4: Wireframe interativo | Fonte: Medium
Atividades
1. No que se refere ao design da interação, avalie as assertivas a seguir
I. Estuda a relação usuário-sistema, objetivando entregar interatividade. 
II. Tem por �nalidade manter a atenção do usuário no website. 
III. Foca em sites com boa usabilidade, legibilidade e estética, dentre outros fatores.
Com base em sua análise, assinale a única opção que apresenta as assertivas corretas:
a) Apenas II.
b) I e III.
c) Apenas III.
d) I e II.
e) I, II e III.
2. No que tange ao conceito de usabilidade, avalie as assertivas a seguir:
I. Mede a qualidade da interface, conjugando três e apenas três atributos: Facilidadede aprendizado, produtividade e satisfação
subjetiva do usuário. 
II. A interface com má usabilidade deve evitar que o usuário cometa erros. Mas, caso o erro de usabilidade aconteça, o website
deve guiar o usuário na solução. 
III. A interface com boa usabilidade deve permitir que o usuário relembre rapidamente como usar o site após algum tempo sem
uso. 
IV. Usabilidade é o mesmo que capacidade interativa do usuário.
Com base em sua análise das assertivas, assinale a única opção correta.
a) Apenas III.
b) I e III.
c) Apenas I.
d) II e III.
e) I, II e IV.
javascript:void(0);
3. Como se chama o processo que organiza os elementos do website, favorecendo a experiência do usuário e ajudando-o a
localizar o que precisa?
a) Mapa do site.
b) Wireframe.
c) Arquitetura da informação.
d) Usabilidade.
e) Design da interação.
4. Qual o tipo de wireframe adequado nos momentos iniciais para o designer desenvolver melhor as ideias da interação, sem
muita �delidade à realidade?
a) Básico.
b) Anotado.
c) Fluxo de usuário.
d) Interativo.
e) Degradativo.
5. O ___________, útil em websites grandes e complexos, é uma estrutura hierárquica contendo todas as suas páginas e como
são acessadas pelo sistema de navegação. Assinale a única opção que completa a frase acima:
a) Wireframe.
b) Design da interação.
c) Mapa da mina.
d) Plano de interface.
e) Mapa do site.
Notas
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente
uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da
indústria tipográ�ca e de impressos.
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente
uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da
indústria tipográ�ca e de impressos.
Referências
BEAIRD J Princípios do Web Design Maravilhoso Rio de Janeiro: Alta Books 2012
BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Alta Books, 2012.
https://integrada.minhabiblioteca.com.br/#/books/9788582601969/. Acesso em 20 jul. 2020.
KALBACH, J. Design de Navegação Web: Otimizando a Experiência do Usuário. Porto Alegre, RS: Bookman, 2009. Disponível
em: https://integrada.minhabiblioteca.com.br/#/books/9788577805310/. Acesso em 20 jul. 2020.
MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
MORVILLE, P.; ROSENFELD, L. Information Architecture for the World Wide Web. 3.ed. 2006.
NIELSON, J. Livro clássico, precursor, sobre usabilidade. Chestnut Hill, MA, Academic Press, 1993.
Próxima aula
Princípios da usabilidade no projeto digital;
Uso do design universal e analise ergonômica do site;
Design responsivo a projetos web.
Explore mais
Acesse o site para ferramentas de construção de wireframes
javascript:void(0);
javascript:void(0);
javascript:void(0);

Continue navegando