Design para Web aula 07

Prévia do material em texto

Design para Web
Aula 07: Protótipo web
Apresentação
Nessa aula, daremos continuidade às demandas do projeto do website, estudando os princípios e boas práticas de
usabilidade da interface. Veremos ainda como aplicar o conceito de design universal no projeto do website, de forma a
torná-lo mais acessível a uma diferente gama de usuários.
Abordaremos o conceito de Design Responsivo, no qual o layout do website se adequa às propriedades do dispositivo de
exibição de dados (tela) e permite ao usuário uma interação mais agradável. Nessa aula, já com o projeto de interface
ajustado e melhorado, vamos discutir as vantagens em construir wireframes tendo como base os requisitos do projeto.
Desenvolveremos um protótipo do website visando possibilitar que o usuário possa validá-lo antes de sua implementação
�nal, o que envolve a programação de suas funcionalidades.
O protótipo pode servir como instrumento de realização de testes de usabilidade com usuários reais.
Objetivos
Identi�car os benefícios do wireframe;
Construir wireframe com base nos requisitos;
Construir protótipos.
Wireframe e seus benefícios
 (Fonte: Shutterstock).
Na aula 5 introduzimos o conceito de wireframe , possíveis tipos e formas de representação. Vamos agora aprofundar o
conhecimento discutindo seus benefícios e utilização.
Podemos usar wireframe para o projeto não apenas de um website, mas de um app (aplicativo mobile). Então, sempre que me
referir a produto, aqui nesse contexto, será um website ou app.
Wireframes são soluções baratas e fáceis de elaborar e não intencionam conceber o layout e sim mostrar como será
organizada a informação de cada janela do produto. Não precisa ser bonito, e sim comunicar bem o que se propõe.
1
Wireframe1
Tradução de wireframe: Estrutura de arame.
https://estacio.webaula.com.br/cursos/go0413/aula7.html
 (Fonte: Shutterstock).
Revendo o que vimos na aula 5, a ideia central do wireframe
é a construção do esqueleto do produto (website ou app),
ou seja, o escopo (conjunto de requisitos) traduzido em
elementos. A versão inicial, de criação, em geral, acontece
em papel.
A construção do wireframe permite ao designer pensar na
proposta de valor que se pretende entregar ao usuário. Essa
construção, em geral, é um processo cíclico e não linear, ou
seja, sempre retomando ao início, revendo e alterando os
elementos do wireframe. Ao �nal, teremos uma visão geral
do escopo do projeto.
A versão inicial do wireframe contém as janelas, o �uxo entre elas, os elementos de cada uma e como esses elementos se
relacionam. Essa versão inicial deve ser simples e o mais minimalista possível, de forma que os membros da equipe de
desenvolvimento do produto possam dialogar e discutir os elementos centrais do produto.
Atenção
O wireframe serve como instrumento de comunicação nessa fase do projeto. Os usuários também podem participar nessa fase
inicial e a simplicidade deve permitir que se concentrem no layout e não se distraiam com elementos visuais, cores e outros não
relevantes para o atual momento.
 (Fonte: Shutterstock).
O segundo passo, ou seja a segunda versão do wireframe,
mais detalhado, já deve usar um software para transpor os
wireframes do papel (cartolina) para o software, incluindo
mais detalhes de cada wireframe, já visando seu uso pelos
pro�ssionais que, de fato, vão construir a interface e
implementar as funcionalidades do produto.
Agora devemos descrever cada elemento de cada janela do
wireframe, adicionando interatividade e permitindo visualizar
as ações de cliques em botões, menus e outros elementos
de interação.
Essa segunda visão do wireframe o torna um elemento de documentação, na medida em que apoia a equipe que seguirá no
projeto, implementando (design �nal e codi�cação na linguagem de programação) o produto.
Abaixo, na Tabela 1, vemos um resumo das duas versões discutidas até aqui:
Tipo de wireframe Características
Versão Inicial – em
papel (cartolina)
Ideias, wireframe rápido, em papel, podendo gerar N versões até gostar; 
 
Foco: Comunicação da equipe de design; 
 
Esqueleto do layout: Sem conteúdo, imagens, identidade (marca) ou cores; 
 
Apoio à criação visual; 
 
Base: Escopo (requisitos); 
 
Quais as janelas? O que terá em cada uma? Quais os elementos? Como os elementos se relacionam? Como é
o fluxo do produto (como as janelas se comunicam)?
Segunda Versão – em
software
Detalhamento da tarefa; 
 
Wireframe em software; 
 
Foco: Documentação para equipe de design criar a versão final do layout do produto e descrição das tarefas
para equipe de desenvolvimento; 
 
Recurso da interatividade, ou seja, simule o clique em botões e outros elementos de ação.
Tabela 1: Resumo dos dois tipos de wireframes
Cabe ressaltar que o wireframe pode ser usado também na manutenção do website, para, por exemplo, mostrar a ideia do
acréscimo de uma nova funcionalidade.
Além de todos os benefícios já descritos, podemos citar em complemento:
Clique nos botões para ver as informações.
Ter um wireframe feito ajuda muito na diagramação e/ou aplicação da identidade visual do produto. Evita problemas com
retrabalho e atraso nas entregas, principalmente.
Apoio ao designer 
Base para modi�cação do produto: Inclusão, alteração e exclusão de funcionalidades ou �uxo de operação dos usuários.
Base para mudanças no produto (manutenção) 
Com o wireframe, especialmente sua segunda versão, mais detalhada e envolvendo uso de software para sua elaboração.
Facilita a percepção visual de como será o produto e sua interatividade com ele, permitindo melhor alinhamento com o
cliente e aumentando suas expectativas com relação à versão �nal e implementada do produto.
Facilita a comunicação com o cliente 
Usando wireframes, a interface projetada poderá cumprir sua proposta de forma assertiva. O wireframe pode ser revisado,
alterado ou até mesmo descartado sem que se tenha saído do campo das ideias, no papel.
Possibilitar criar interfaces de boa usabilidade (amigável e intuitiva) 
Construindo wireframes
Fornecemos abaixo algumas dicas de como elaborar wireframes e, na sequência, apresentamos alguns exemplos de wireframe
nas duas versões: Inicial, com lápis e papel; e mais detalhada, usando tecnologia de software.
Clique nos botões para ver as informações.
Antes de iniciar, busque inspiração em projetos anteriores simulares. Procure wireframes em portfólios de UX Design.
Procure inspirar-se e ter referências 
Antes de começar a desenhar, mapeie o �uxo que deseja que o usuário siga. A ideia é estruturar a interface, de forma que
os usuários sejam autossu�cientes e naveguem de forma intuitiva, podendo diminuir seu nível de frustração e manter-se
usando o produto com satisfação.
Tenha em mente o �uxo dos usuários 
Devem ser considerados os elementos gerais e básicos que o produto deve ter, considerando incluir nos wireframes:
Cabeçalhos: Posicionamento da logo, caixa de pesquisa;
Navegação: Menus, botões, links;
Rodapés: Contatos, mapa do site;
Barras laterais com navegação;
Áreas de conteúdo: Sem apresentar o conteúdo propriamente, ou seja, apenas de�nindo onde e como será.
O detalhamento do wireframe pode variar em função de sua �nalidade. Se for usado por pro�ssionais como designers e
programadores, bem como clientes, deve ser mais elaborado e detalhado.
O que deve constar no wireframe? 
 Organize o wireframe
 Clique no botão acima.
Em geral, um website é seccionado, sendo importante organizar logicamente o wireframe em, por exemplo: Home,
página de contatos ou produtos, e em blocos. Numere os wireframes e dê nomes a cada janela, de forma que possa
conhecer o caminho que o usuário faz, de forma mais clara.
Abaixo, vemos dois exemplos de wireframe de website: Na versão inicial, papel e caneta, mostrando os principais
elementos da Home.
Na Imagem 1, referente ao wireframe da Home de um website corporativo, de�nimos quatro seções básicas do
website, conforme a Tabela 2 abaixo.
Na Imagem 2, referente ao wireframe da Home de um Homebank digital, de�nimos duas janelasdo website,
mostrando, além dos elementos de cada uma, a relação entre elas.
Cada Janela foi rotulada: A primeira de Home e a segunda de Acesso à conta. Vejamos agora as seções e elementos
de cada janela, conforme as Tabelas 3 e 4 a seguir:
 Imagem1: Website de uma empresa | Fonte: Autor
Seção Descrição e Elementos
Cabeçalho Logo da empresa; 
 
Descritivo ou slogan de relevância da
empresa, associado a marca.
Navegação Menu principal do website;
Área de
conteúdo
Contendo as informações relevantes, em
ordem de prioridade e hierarquia definidas
pela arquitetura da informação (momento
anterior do projeto); 
 
Área de scroll, do próprio navegador.
Rodapé Mapa do site; 
 
Fale conosco (telefone, e-mail e contatos nas
redes sociais).
Tabela 2: Seções do wireframe da Home do site
corporativo referentes à Imagem 1.
 Imagem 2: Website de um banco digital | Fonte: Autor
A relação entre as janelas Home e Acessar conta ocorre pelo acionamento do botão (ou opção do menu), de rótulo
Acesso conta (relação entre os dois wireframes).
A equipe resolveu levar os wireframes aos clientes (diretores do Homebank) para validação da interface.
As ponderações dos clientes foram:
1. Janela Home:
a. Inclusão de um rodapé contendo a Logo, dados de contato (telefone, e-mail e endereço), além
dos contatos das redes sociais (twitter, instagram e facebook);
b. Eliminação da opção do menu, de rótulo Abrir conta, pois a empresa não pretende mais, como
previsto inicialmente, abrir a conta remotamente;
c. No lugar de Abrir conta, incluir opção de nome Operacional, em que devem ser apresentados
todos os produtos do banco e suas características.
d. Link para voltar à Home.
2. Janela Acesso à conta:
a. Usuário pediu o seguinte �uxo, na ordem:
i. Usuário informa apenas seu código. Com link esqueceu código do cliente;
ii. Ao clicar em Con�rmar ou teclar [Enter] sistema localiza o cliente, diz Olá
XXXXXX, em que XXXXXX é seu nome e então solicita a senha. Não precisa de
teclado virtual com letras, pois código e senha são apenas numéricos. Pediu
para usar botões combinando dois números. Com link esqueceu a senha.
iii. Link para voltar à Home.
Na hora, durante a reunião, a equipe já redesenhou o wireframe (vantagem de usar inicialmente lápis e papel).
Abaixo, segue a versão melhorada, apresentada na Imagem 4, em que a janela Acessar conta foi desmembrada em
duas novas janelas, com os rótulos Acesso à conta: Código Cliente e Acesso à conta: Senha.
Seção Descrição e Elementos
Cabeçalho Logo da empresa; 
 
Descritivo ou slogan de relevância da empresa, associado à marca.
Navegação Menu principal do website;
Área de
conteúdo
Contendo as informações relevantes, em ordem de prioridade e hierarquia definidas pela arquitetura da
informação (momento anterior do projeto); 
 
Área de scroll, do próprio navegador.
Janela: Home
Tabela 3: Seções do wireframe da Home do site de Homebank referente à Imagem 2.
Seção Descrição e Elementos
Cabeçalho Logo da empresa; 
 
Link para voltar a Home.
Entrada de
dados
Dados de entrada código cliente e senha; 
 
Teclado virtual para digitação de ambos (somente números ambos).
Área de
conteúdo
Contendo as informações relevantes, em ordem de prioridade e hierarquia definidas pela arquitetura da
informação (momento anterior do projeto); 
 
Área de scroll, do próprio navegador.
Botões e
Links
Botão Acessar: Completa o login na conta; 
 
Botão Cancelar: Cancela a operação e retorna à página Home; 
 
Link para relembrar código do cliente e senha, em caso de esquecimento (1 link para código e 1 link para
senha).
Janela: Acessar à conta
Tabela 4: Seções do wireframe da janela Acesso à conta do site de Homebank referente à Imagem 2.
 Imagem3: Wireframes de login do Homebank | Fonte: Autor
A Imagem 4 a seguir mostra o wireframe Home reformulado, juntamente com o link para as também reformuladas
janelas de Acesso à conta (código e senha).
 Imagem 4: Todos os wireframes do website do Homebank. | Fonte: Autor
Protótipos
 Fonte: Shutterstock
Antes de iniciarmos nosso conteúdo de protótipos, vamos compreender o que nos diz o termo: Protótipo deriva do grego
Protós + Typos; Protós signi�ca primeiro, Typos signi�ca tipo, modelo.
Ou seja, protótipo é o primeiro modelo, em fases de estudo, planejamento ou testes.
Uma vez mapeadas as ideias do design na elaboração dos wireframes, é hora de elaboramos os protótipos, chamados de alta
�delidade. Representação mais próxima do produto �nal em termos de interface, permite interatividade, baseada em
computador ou dispositivos móveis.
Esse tipo de protótipo já é bem próximo do design �nal, no que tange às funcionalidades oferecidas, sem necessariamente
implementá-las, pois o foco é a interface e a interação, e não as funcionalidades em si. Com isso, conseguimos colocar o
usuário no centro do processo, validando o protótipo e, consequentemente, a interface do produto.
Os protótipos de alta �delidade permitem, ainda, testar a usabilidade do
produto, com usuários reais interagindo e realizando tarefas típicas de seu
dia a dia, e assim permitindo avaliar seu comportamento. Os testes de
usabilidade, aliados à Avaliação Heurística, já realizada com base nos
wireframes (papel ou software), permitem análise mais completa da
usabilidade.
Os protótipos interativos podem ajudar a equipe de desenvolvimento a ter uma ideia mais clara do comportamento do produto,
além de permitirem a identi�cação de novos requisitos, e possíveis problemas, tendo como consequência: Mais lucro a longo
prazo e riscos menores na implementação.
Mas nem tudo são �ores; dentre as desvantagens dos protótipos interativos, podemos destacar:
1
Consomem recursos de tempo, pessoal e dinheiro;
2
Requer equipe de maior conhecimento técnico.
Os protótipos podem ser criados pelas linguagens HTML5 + CSS 3+ Javascript ou por ferramentas especí�cas de
prototipagem, em que destacam-se Axure, Invision, Balsamiq, entre outras.
No protótipo de alta �delidade o foco é o design: Uso de cores, arranjo grá�co, os tipos etc. Enfatiza a precisão. A Imagem 5, a
seguir, mostra um exemplo de protótipo de alta �delidade.
Com o protótipo, aumentam as chances de decisões acertadas com relação a elementos que condizem com o layout, sendo
comum o projeto ser alterado ao ser criado seu protótipo de alta �delidade.
Comentário
Nesse momento, não se preocupe em demasia com o conteúdo do website.
Outro ponto a ser veri�cado, após ajustar o design do protótipo, é veri�car se de fato o seu design responsivo funcionou,
veri�cando o layout nos dispositivos móveis. Se o layout não �car adequado no celular, haverá reclamação e desistência de
uso, pois o tráfego pelo aparelho é mandatório hoje em dia.
 Imagem 5: Exemplo de janela de um protótipo de alta fidelidade | Fonte: Sites Google
O protótipo de alta �delidade é elaborado após o amadurecimento do projeto, pois demanda mais recursos (tempo, custo e
mão de obra). A produção do protótipo terá boa parte do que será usado na versão aprovada do website.
Cabe ressaltar que o processo de prototipação não é sequencial e, sim, cíclico, logo sempre pode haver mudanças.
Os recursos (tempo, mão de obra e custo) gastos na prototipação são inversamente proporcionais aos consumidos na
programação; logo, quanto maior o foco e a dedicação ao protótipo, menor será o custo de sua implementação.
Comentário
Conclusão: A técnica de prototipagem visa a relação custo-benefício e insere a experiência do usuário no centro do processo.
Assim, é possível uma melhor previsão da maioria dos problemas, ganhando tempo para sua solução durante o processo de
desenvolvimento, o que é mais barato do que fazê-lo no pós desenvolvimento. Dessa forma, economizamos tempo e dinheiro.
 Ferramentas gratuitas de prototipação
 Clique no botão acima.
javascript:void(0);
Listaremos a seguir algumas ferramentas gratuitas de prototipação que possuem recursos limitados. Caso elas não se
adequem às suas necessidades, avalie as opções pagas.
1. GIMP (Linux, Windows, MAC e outros):Criação e edição de imagens. Sistema de código aberto;
2. Invision (MAC, Android, IOS e web): Mais usada pelos designers. Pode ser compartilhado com cliente para que ele
forneça feedback pela ferramenta;
3. Adobe XD (MAC, Windows, Android e IOS): Focada para design de páginas para web e app (aplicativos mobile).
Dispõe de bibliotecas de estilo e aplica o design responsivo em seus projetos. Ferramenta intuitiva, gerando
rapidez;
4. Marvel (Android, IOS e web): Permite criar layouts de baixa �delidade usando fotos de wireframes. Através da
inserção de imagens com rascunhos, ou objetos inseridos, possibilita a exibição de um design personalizado,
bem próximo da interface que intencionamos criar;
5. O AXure é uma ferramenta híbrida (permite criar wireframes e protótipos): Uma vez tendo feito os wireframes
(usando software), basta acrescentar links e interações entre as janelas projetadas. Junto com protótipos, o
Axure permite a criação de sitemaps e �uxo de usuários. 
 
�. A última versão permite o compartilhamento de projetos para trabalho colaborativo, em que pode incluir, além da
equipe de trabalho, os usuários que validarão o design no protótipo. Com ele, pode-se realizar o trabalho desde a
elaboração de wireframes clicáveis até a validação dos protótipos de alta �delidade;
7. Sketch é para os desenvolvedores do MAC OS x, similar ao Adobe. Pode exportar seu projeto para outras
ferramentas e permite compartilhá-lo com equipe e usuários.
Atividade
No que se refere ao conceito e benefícios da elaboração de wireframes, avalie as assertivas a seguir:
I. Os wireframes são protótipos de baixa �delidade usados nos momentos iniciais do projeto de design, para validar as
ideias.
II. Wireframes podem ser elaborados à mão (papel e caneta) ou por software. Nos momentos iniciais, a mão é uma boa
opção pois, se a ideia não agradar, basta amassar o papel e começar de novo.
III. Wireframe é o primeiro passo para criarmos interfaces com boa usabilidade.
IV. Wireframe não é uma boa ferramenta para comunicar com usuários.
Com base em sua análise, assinale a opção que apresenta as assertivas corretas:
a) Apenas I.
b) Apenas III.
c) II e III.
d) I e II.
e) I, II e III.
2. A versão inicial do wireframe contém os principais aspectos do design. Deve ser simples e o mais minimalista possível, de
forma que os membros da equipe de desenvolvimento do produto possam dialogar e discutir seus elementos centrais.
Os usuários também podem participar nessa fase inicial, e a simplicidade deve permitir que se concentrem no layout e não se
distraiam com elementos visuais, cores e outros não relevantes para o atual momento. Contém as janelas, o �uxo entre elas, os
elementos de cada uma e como esses elementos se relacionam.
Assinale a opção errada sobre o contexto de elaboração da versão inicial de wireframes:
a) Preocupação de como será cada elemento do layout.
b) Deve conter o fluxo entre as janelas do website.
c) Deve conter os principais elementos de cada janela do website.
d) Deve conter a relação entre as janelas do website.
e) Não deve conter detalhes de conteúdo.
3. Estudamos um procedimento de quatro passos para elaborar o wireframe inicial. Assinale a opção que não consta desse
procedimento:
a) Selecione as cores adequadas.
b) Conheça o fluxo do usuário.
c) Organize o wireframe.
d) Selecione os elementos.
e) Inspire-se e busque referências.
4. Avalie as assertivas a seguir no que se refere ao protótipo de alta �delidade:
I. Deve, preferencialmente, ser elaborado antes dos wireframes.
II. Ajudam a testar a usabilidade do produto, já que, com o wireframe, é possível realizar a avaliação heurística.
III. Colocam o usuário no centro do processo de desenvolvimento.
IV. É totalmente dispensável, já que a elaboração do wireframe tem os mesmos propósitos.
Com base em sua análise, assinale a opção que apresenta as assertivas corretas:
a) Apenas I.
b) Apenas III.
c) I, II e III.
d) I e II.
e) II e III.
5. Comente a frase a seguir:
Cabe ressaltar que o processo de prototipação não é sequencial e, sim, cíclico; logo, sempre pode haver mudanças.
Notas
Referências
BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Alta Books, 2012. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788582601969/. Acesso em 28 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 28 jul. 2020.
MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
NIELSON, J. Livro clássico, precursor, sobre usabilidade. Chestnut Hill, MA, Academic Press, 1993.
SANTA ROSA, J.G. Avaliação do Projeto no design de interfaces. Teresópolis, RJ: 1.ed., 2AB editora, 2012.
Próxima aula
Layout como elemento comunicador da marca;
Cores em interfaces digitais;
Paleta de cores para site.
Explore mais
Acesse ferramenta gratuita para construção de wireframe.
Acesse ferramenta e�ciente e gratuita de criação de wireframes.
javascript:void(0);
javascript:void(0);
javascript:void(0);
javascript:void(0);