Você está na página 1de 148

Design de Interação

Carla Andrea Lopes Allegretti

Organizado por Universidade Luterana do Brasil

Design de Interação

Universidade Luterana do Brasil – ULBRA


Canoas, RS
2015
Conselho Editorial EAD
Andréa de Azevedo Eick
Astomiro Romais,
Claudiane Ramos Furtado
Dóris Cristina Gedrat
Kauana Rodrigues Amaral
Luiz Carlos Specht Filho
Mara Lúcia Salazar Machado
Maria Cleidia Klein Oliveira
Thomas Heimann

Obra organizada pela Universidade Luterana do Brasil.


Informamos que é de inteira responsabilidade dos autores
a emissão de conceitos.
Nenhuma parte desta publicação poderá ser reproduzida
por qualquer meio ou forma sem prévia autorização da
ULBRA.
A violação dos direitos autorais é crime estabelecido na Lei
nº 9.610/98 e punido pelo Artigo 184 do Código Penal.

Dados Internacionais de Catalogação na Publicação (CIP)

Setor Biblioteca EAD ULBRA Canoas

ISBN xxxxxxxxxxxxxxxx
Dados técnicos do livro
Diagramação: Jonatan Souza
Revisão: Igor Campos Dutra
Apresentação

P rezado(a) aluno(a), seja bem-vindo(a) ao estudo da disciplina de Design


de Interação!

Esta disciplina propõe conhecer o Design de Interação e identificar as


atribuições do profissional de design nessa área.

Como o Design de Interação é uma área ampla, este livro prioriza


algumas questões importantes sobre esse universo e tenta clarificar alguns
aspectos da profissão que por vezes se mistura a outras competências de
design. Seu objetivo é dar início aos estudos no âmbito da interação, com
foco direcionado para o desenvolvimento de sites e sistemas virtuais.

O livro está dividido em dez capítulos, alguns desmembrados em tó-


picos para a melhor organização e compreensão dos temas abordados.
Ao final de cada capítulo, há um resumo, apontando os aspectos mais
relevantes do conteúdo. Também, ao final de cada capítulo, são propostos
exercícios no intuito de revisar e fixar os conhecimentos adquiridos. Ainda,
as referências citadas possibilitam pesquisar as fontes utilizadas para com-
por os capítulos e permitem ao aluno aprofundar os aprendizados aqui
discutidos.

Bons estudos!

Professora Carla Andrea Lopes Allegretti.1

1 Mestre em Engenharia de Produção e graduada em Desenho e Plástica – UFSM,


professora dos cursos de Arquitetura e Urbanismo e Design de Moda – ULBRA Canoas.
Sumário

1 Design de Interação...............................................................1
2 Teoria X Prática....................................................................14
3 Um Método para Projetos com Foco na Interação.................27
4 PACT – Pessoas, Atividades, Contextos.................................40
5 PACT – Tecnologias..............................................................60
6 Personas e Cenários............................................................76
7 Usabilidade, Aceitabilidade e Acessibilidade........................91
8 Design para a Experiência.................................................104
9 Antecipação......................................................................118
10 Design de Sites..................................................................130
Carla Andrea Lopes Allegretti

Capítulo 1

Design de Interação
2   Design de Interação

Introdução

Por certo, você já se deparou com uma situação de dúvida em


relação à correta utilização de alguns equipamentos da vida
moderna. Controles remotos, celulares, aparelhos de som e
uma infinidade de equipamentos que só funcionarão adequa-
damente se você interagir da maneira certa.

No entanto, boa parte desses equipamentos parecem


pouco amigáveis, nada simples nem intuitivos quanto ao
seu correto uso e funcionamento. Você pode dizer que isso
acontece devido ao fato de possuírem um elevado número
de funções e, consequentemente, uma vasta possibilidade de
interações.

Se pousar o olho em um controle remoto, perceberá que,


para mais de 90% das vezes, seu uso estará resumido a três
ou quatro botões, e estes estarão perfeitamente camuflados
em meio a dezenas de funções que você nem faz ideia do que
fazem, e pior, quando descobre o que faz, percebe que para
você isso não tem qualquer importância.

Para esses casos, a solução pode acabar sendo usar um


pouco de criatividade!
Capítulo 1   Design de Interação   3

Figura 1  Contole remoto adaptado.


Fonte: <google.com.br>

1 O que é design de interação?

Segundo o Dicionário Aurélio, INTERAÇÃO significa a ação


que se exerce mutuamente entre duas ou mais coisas; entre
duas ou mais pessoas etc. Conforme Preece (2005): Design
de Interação é o design de produtos interativos que forneçam
suporte às atividades cotidianas das pessoas, seja no lar ou no
trabalho. Especificamente, continua ele, significa criar experi-
ências que melhorem e estendam a maneira como as pessoas
trabalham, se comunicam e interagem.

Então, Design de Interação é uma área do design especia-


lizada em desenvolver projetos de produtos ou sistemas que
terão uma interação com o ser humano e, a partir daí, oferecer
os resultados esperados. Ainda que possa ser encontrado em
4   Design de Interação

praticamente todo tipo de interação homem-máquina, desde


um controle-remoto até o forno de micro-ondas, teremos um
foco direcionado para o desenvolvimento de sites e sistemas
virtuais (Web, Hot ou Mobile) visando a comunicação empre-
sa/público-alvo.

A seguir, para ilustrar, algumas imagens de produtos intera-


tivos do nosso cotidiano e de produtos interativos com recursos
computacionais.

Figura 2  Esquerda superior, telefone. Fonte: <www.hiperativo.com>


Figura 3  Direita superior, iPad. Fonte: <idownloadblog.com>
Figura 4  Esquerda inferior, tela do refrigerador Electrolux. Fonte: <ifdeia.com.br>
Figura 5  Direita inferior, Crayoland. Fonte: <visbox.com>
Capítulo 1   Design de Interação   5

2 O que faz um designer de interação?

Percebemos que as interações que precisamos fazer com equi-


pamentos ou sistemas extremamente simples ainda tem um
potencial de erro para quem projeta o sistema. Quem nunca
se defrontou com a dúvida cruel diante daqueles dois botões
do elevador? Devo pressionar para cima porque quero subir,
ou devo pressionar para baixo porque quero que o elevador
desça até onde estou e depois eu possa subir? Se pressionar
várias vezes ele vem “mais rápido”? E quando não tem flechas
para cima e para baixo? Nesse caso, estamos falando de ape-
nas dois míseros botões e ainda assim, milhares de pessoas
pressionam de maneira equivocada botões de elevador em
todo mundo.

Algumas pessoas dirão que os botões de elevador são ab-


solutamente simples, praticamente a prova de erro, e culpam
as pessoas de não saber usá-los. No entanto, se você for o
dono da empresa que fabrica esses botões, terá um crescimen-
to enorme nas vendas se descobrir um sistema que possa ser
simples o suficiente para que ninguém mais erre.

Pensando nisso, como você imaginaria que pudesse ser o


design/interação de um elevador que fosse à prova de erros
ou dúvidas?
6   Design de Interação

É exatamente assim que pensa um Designer de Interação!


Essas pessoas – da mesma forma que os designers de produto
moldam nossas ações por meio de objetos que eles concebem
– acabam por moldar nossas vidas no que se refere às rela-
ções que desenvolvemos e as atividades que desempenhamos
por meio das tecnologias digitais interativas. O Designer de In-
teração cuida do desenvolvimento de produtos interativos que
fornecem suporte às nossas atividades cotidianas, garantindo
que as pessoas consigam efetivamente usar esses produtos,
ou seja, interagir de maneira correta com eles. Além de tornar
o produto interativo tecnologicamente possível e viável, que
é aquilo que não vemos quando estamos usando o produto,
esse profissional desenvolve uma INTERFACE para que as pes-
soas consigam usar esse produto. É por meio da interface que
o usuário vê o produto, e é também a interface do produto que
permite a interação com quem o está usando.

A seguir, exemplos de interface de produtos interativos,


para melhor compreensão do termo.
Capítulo 1   Design de Interação   7

Figura 6  Esquerda superior, interface do telefone celular Nokia.


Fonte: <mobilegazette.com>
Figura 7  Direita superior, Interface do Google.
Fonte: <google.com>
Figura 8  Esquerda inferior, interface do software Coreldraw.
Fonte: da autora
Figura 9  Direita inferior, interface do aplicativo Angry Birds. Fonte:
<estilivingston.com>
8   Design de Interação

3O
 perfil profissional do designer de
interação

O Designer de Interação, na visão de Saffer (2009), deve pos-


suir sete atitudes:

1. Focar sempre o usuário

Saber entender o usuário é a chave do sucesso no De-


sign de Interação, e a melhor forma de entendê-lo é
questionando suas escolhas e observando suas ações.
USUÁRIO, segundo o Dicionário Aurélio, é aquele que
usa ou desfruta algo (coletivo); utente.

2. Encontrar boas soluções

Desenvolver novos produtos e serviços implica criar as


escolhas. Quando se tem duas opções, deve-se buscar
sempre uma terceira.

3. 
Gerar muitas ideias e buscar uma prototipação rá-
pida

Designers encontram suas soluções a partir da geração de


muitas ideias. Para tangibilizar essas ideias, devem procu-
rar montar protótipos rápidos, pois assim péssimas ideias
são descartadas rapidamente após os primeiros testes.

4. Saber trabalhar de forma colaborativa

O design como ciência não está só, ele dialoga com


vários campos do conhecimento humano. E o designer,
da mesma forma, não deve se isolar. Ele deve trabalhar
Capítulo 1   Design de Interação   9

de forma colaborativa e utilizando vários recursos tecno-


lógicos de comunicação.

Como podemos verificar no diagrama a seguir, para que


os resultados possam ser adequados, o conhecimento de di-
versas áreas será necessário.

Figura 10  Design de Interação.


Fonte: Saffer (2009)

5. Criar soluções apropriadas

O designer deve criar soluções apropriadas para de-


terminado contexto em que os usuários estão inseri-
dos. O contexto de uso do objeto ou do serviço deve
10   Design de Interação

estar em conformidade com o contexto histórico-social


em que o indivíduo está inserido.

6. Desenvolver um amplo campo de influências

A interdisciplinaridade deve fazer parte do dia a dia do


designer de interação, e com isso ele deve se inspirar na
busca por novas soluções.

7. Saber incorporar a emoção para seus projetos

O aspecto emocional dentro do desenvolvimento de um


produto é o elo entre as pessoas e os aparatos tecno-
lógicos. Produtos sem o componente emocional estão
desconectados das pessoas e são produtos sem vida.

Recapitulando

Neste capítulo, vimos:

ÂÂO que é o Design de Interação.

ÂÂQual a diferença entre interação e interface.

ÂÂQuem são os usuários.

ÂÂO que faz um designer de interação e qual seu perfil.

Referências

Dicionário Miniaurélio Eletrônico versão 5.12.


Capítulo 1   Design de Interação   11

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. DESIGN


DE INTERAÇÃO. Porto Alegre: Bookman, 2005.

SAFFER, Dan. DESIGNING FOR INTERACTION. New York:


New Readers, 2009.

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas:

(  ) INTERAÇÃO significa a ação que se exerce mutuamente


entre duas ou mais coisas.

(  ) Design de Interação é o design de produtos interativos


que forneçam suporte às atividades cotidianas das pes-
soas.

( ) Design de Interação é uma área do design especiali-


zada em desenvolver projetos de produtos ou sistemas
que terão uma interação com o ser humano.

( ) Design de Interação é uma área do design especiali-


zada em desenvolver especificamente sites e sistemas
virtuais (Web, Hot ou Mobile).

2) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como verdadeira:

a) Interface é sinônimo de interação.


12   Design de Interação

b) Designers de Interação são responsáveis pela interface


dos produtos ou sistemas interativos, exclusivamente.

c) A interface torna a interação possível.

d) Interface é como, estritamente, os softwares se apre-


sentam.

3) Sobre o perfil profissional do Designer de Interação, mar-


que (X) somente nas assertivas verdadeiras:

(  ) Deve focar no usuário.

(  ) Precisa saber trabalhar de forma interdisciplinar.

(  ) Deve gerar muitas ideias.

(  ) Precisa saber incorporar a emoção para seus projetos.

4) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas.

Usuário é um termo comumente utilizado no design de in-


teração e quer dizer:

(  ) Cliente.

(  ) Aquele que usa.

(  ) Aquele que vai interagir com o produto ou sistema.

(  ) Aquele que vai comprar o produto ou sistema.

5) O Designer de Interação deve trabalhar de forma colabo-


rativa com as muitas áreas de conhecimento, entre elas:

(  ) Arquitetura da Informação.
Capítulo 1   Design de Interação   13

(  ) Design de Produto.

(  ) Design Gráfico.

(  ) Arquitetura.

Gabarito:
1) V, V, V, F

2) c

3) Todas corretas

4) V, V, V, F

5) V, V, V, V
Carla Andrea Lopes Allegretti

Capítulo 2

Teoria X Prática
Capítulo 2   Teoria X Prática   15

Introdução

Agora que você já tem um conceito básico sobre o que signi-


fica ser um designer de interação, vamos nos voltar um pouco
para a prática desse trabalho, considerando que nosso foco é
a interação via computador, em aplicações como blogs, sites
e ferramentas sociais.

1 O design de interação na prática

A preocupação em garantir que o usuário possa mais facil-


mente utilizar os recursos dos sites é antiga; no entanto, ela
estava inserida dentro das preocupações do designer gráfico
que criava e tentava evitar as dificuldades que ele conseguia
perceber, com base nele mesmo como usuário. Com o tempo,
experiência, e feedbacks ou retornos de clientes, esse especia-
lista passou a ter um know-how, um conhecimento, que abran-
gia as dificuldades levantadas pelo cliente, gerando correções
reativas, ou seja, retrabalhos com base nas reclamações.

Então, os bons profissionais começaram a considerar as ex-


periências passadas para as novas criações. Seguindo a máxima
que diz que aprende-se com os próprios erros, mas é mais bara-
to aprender com os erros dos outros, passaram a discutir entre o
grupo de designers gráficos sobre os desacertos cometidos e as
maneiras de evitar que eles ocorressem. Logo, incluíram nessas
discussões o usuário, considerando suas dificuldades inerentes
ou potenciais e direcionando seus esforços para um trabalho
que possa ser facilmente compreendido por esse público.
16   Design de Interação

Nesse caminho, algumas vertentes se mostraram inade-


quadas; ao tentar solucionar 100% dos problemas, percebeu-
-se que se gastaria mais tempo, e o retorno não seria financei-
ramente rentável. Em alguns casos, o desenvolvimento de um
sistema que impeça o erro pontual levantado por um número
diminuto de pessoas tomava mais de 50% do total do trabalho.
Em um mundo ideal, esses processos poderiam ser feitos, mas
as empresas estão presas a prazos, entregas, e a constantes
solicitações de mudanças por parte do cliente, que em parte
colocavam o trabalho realizado por água abaixo. Percebeu-se
então que as pesquisas eram vitais e que deveriam ser feitas
para um percentual representativo desse público. Ainda que
possível, não era competitivo para uma empresa desenvolver
um sistema pensando nas dificuldades que uma criança teria
ao acessar um site sobre Técnicas de Pilotagem Aérea, por
exemplo, já que esse não é o publico que o site quer atingir,
então eventuais dificuldades para quem não faz parte do foco
são aceitáveis.

Uma grande dificuldade estava em conhecer as necessida-


des do usuário que estava completamente distante do universo
conhecido do designer, afinal ele tinha de lidar com pontos
muitos específicos que nem sempre fazem parte do escopo
desse profissional. Era necessário considerar que o produto ou
serviço atendesse as expectativas do usuário, mas respeitasse
as definições do seu cliente. O cliente quer resultados, mas
não quer pagar nada além do que for possível. O cliente tem
prazos finais que muitas vezes não podem ser postergados,
afinal um site sobre o dia dos pais não pode ir ao ar depois
dessa data; então, a despeito de todos os problemas que pos-
Capítulo 2   Teoria X Prática   17

sam existir, a data final precisa ser respeitada. Dentro de todas


as etapas, qual aquela que pode ser suprimida ou realizada
apenas parcialmente, sem que isso impeça a entrega? O texto
não pode ser reduzido, a informação é básica para a comu-
nicação, a área gráfica não pode ser comprometida, o visual
ainda é um dos pontos mais importantes para conquistar a
visita do usuário a um site. A programação não pode ser redu-
zida, sob pena do site simplesmente não executar as funciona-
lidades mais básicas. É então que, na prática, vemos reduzido
o tempo destinado ao estudo sobre as interações e usabilidade
para um grau de menor detalhamento.

Se as grandes empresas acabam tendo dificuldades para


analisar as interações e a usabilidade – USABILIDADE, segun-
do o dicionário Priberam da Língua Portuguesa, usabilidade,
por definição geral, é a característica do que é simples e fá-
cil de usar – seja por ter seus processos engessados, falta de
disponibilidade, de tempo ou profissionais, as pequenas em-
presas descobriram no Designer de Interação e seu trabalho
um interessante nicho para garantir a qualidade diferenciada,
permitindo que essas empresas pudessem buscar uma parte
da fatia do mercado. Com profissionais dedicados exclusi-
vamente ao estudo e análise do comportamento humano e
suas reações diante das interações com os diversos tipos de
máquinas, essas empresas oferecem um sistema com um alto
grau de usabilidade. O tempo gasto pode ser reduzido com
a utilização de técnicas cada vez mais apuradas, que permite
conhecer como um usuário irá reagir diante de cada situação
e evitar situações de dubiedade.
18   Design de Interação

2 Breve histórico do Design de Interação

2.1 Como chegamos aqui


Segundo Benyon (2011), a revolução que nos trouxe ao ponto
que estamos hoje começou perto do fim da Segunda Guerra
Mundial, em 1945, com a criação dos primeiros computado-
res digitais. Eram máquinas enormes, operadas por cientistas,
programadores e operadores especializados que apertavam
botões, a fim de que esses aparelhos eletrônicos completas-
sem seus cálculos.

Figura 1  O primeiro computador eletrônico ENIAC (Eletronic Numerical


Integrator and Calculator), 1946.
Fonte: <http://cadinformatica.br.tripod.com/>
Capítulo 2   Teoria X Prática   19

Durante a década de 1960, a interação direta com o com-


putador ainda era mínima e, conforme Preece (2005), os en-
genheiros projetavam os sistemas para eles próprios utilizarem.

Em 1962, o cientista americano Joseph Carl Robnett Licklider


propôs, pela primeira vez, uma rede global de computadores.

Então o surgimento das primeiras telas de tubos, da In-


ternet, do mouse e do hipertexto começam a modificar esse
cenário.

Em 1972, foi enviado o primeiro e-mail, e o interesse pela


interação homem-máquina começa a crescer quando, no final
da década, os teclados e telas tornaram-se mais comuns.

Porém, só em 1982 surgem as primeiras interfaces que per-


mitiam a interação com o usuário, que podia apontar para
ícones e dispor de comandos agrupados em menus, na forma
dos computadores como o Apple Lisa.

Figura 2  O Lisa, de Steve Jobs.


Fonte: <http://www.hardware.com.br/guias/historia-informatica/lisa-macintosh.html>
20   Design de Interação

Segundo Benyon (2011), a década de 80 foi a década do


microcomputador e a década em que a interação humano-
-computador chegou à maioridade. Um dos maiores desafios
do início desses anos, como nos fala Preece (2005), foi desen-
volver computadores acessíveis e utilizáveis por outras pessoas,
além dos engenheiros, para a realização de tarefas que envol-
viam a cognição e a percepção humana, como, por exemplo,
escrever documentos ou gerenciar contas bancárias. Logo,
para tornar isso possível, cientistas da computação e psicólo-
gos envolveram-se com o design de interfaces de usuário: os
cientistas e engenheiros de software desenvolveram linguagens
baseadas em comando para auxiliar tais tarefas, enquanto os
psicólogos forneciam informações a respeito das capacidades
humanas, como, por exemplo, memória e decisão. Ainda, a
partir da metade da década 80, surgem novas tecnologias na
computação, incluindo reconhecimento de voz e multimídia,
que proporcionam mais interação e exigem um tipo diferente
de conhecimento, então especialistas em tecnologia educacio-
nal, psicólogos do desenvolvimento e especialistas em treina-
mento foram incorporados aos grupos de pesquisas.

Em 1990, cor e multimídia chegaram ao PC, que já ha-


via começado a dominar o mercado de computadores. Nessa
década, imagens, filmes, música etc. se tornaram disponíveis
para todos, no trabalho e em casa. O crescimento de sites
pessoais foi fenomenal, e a ideia de uma “aldeia global” total-
mente conectada tornou-se realidade. Nesse contexto, muitas
empresas sentiram a necessidade de expandir novamente suas
equipes multidisciplinares e incluir profissionais treinados em
mídia e design, como design gráfico, industrial, produção de
filmes e desenvolvimento de narrativas. Sociólogos, antropó-
Capítulo 2   Teoria X Prática   21

logos e dramaturgos também foram agregados às equipes,


todos com uma atitude diferente dos psicólogos quanto à inte-
ração humana. Esse conjunto de pessoas promoveria a combi-
nação certa de habilidades com a compreensão das diferentes
áreas de aplicação necessárias para projetar a nova geração
de sistemas interativos.

Portanto, compreendeu-se que o sucesso do Design de In-


teração depende do entendimento de como o usuário age e
reage a situações e que esse entendimento acarreta o envol-
vimento de profissionais de diferentes áreas, como psicólogos
e sociólogos. Esses, por sua vez, trabalham com outros vários
profissionais, designers gráficos, animadores, programadores,
fotógrafos etc., para projetar toda a sorte de mídias interativas
dos dias de hoje, em que qualquer coisa pode ser conectada
a qualquer coisa em qualquer lugar! Hoje, a proliferação dos
dispositivos móveis e a generalização dos computadores entre
todos os tipos de pessoas em todas as partes do mundo atra-
vés da Web, proporciona todo o tipo de experiências para o
usuário. Uma época fascinante para o designer de sistemas
interativos, conclui Benyon (2011).

2.2 Aonde vamos?


Ao que tudo indica, o Designer de Interação deve estar pre-
parado para lidar com novos produtos, modelos de negócio
e serviços e uma gama de outros recursos que devem surgir
rapidamente, ressalta Benyon (2011).

Em sua visão para a interação humano-computador –


IHC– a Microsoft, por exemplo, argumenta que a IHC “deve
22   Design de Interação

ir além da preocupação com produção e processamento de


informações, e sim criar sistemas que permitam alcançar os
valores humanos”. A empresa IDEO ilustra esse cenário e ex-
plora diferentes conceitos e ideias para identidades em vez de
simplesmente fazer novos produtos, tudo centrado no humano.

Figura 3  Medicamentos personalizados, com data e horário, IDEA.


Fonte: <http://www.ideo.com/work/disrupting-the-drugstore>

Recapitulando

Neste capítulo, vimos:

ÂÂComo funciona o Design de Interação na prática.

ÂÂQue as empresas de menor porte buscam diferenciais


de produtos e serviços a partir de análises de interação
e usabilidade.

ÂÂA definição do termo usabilidade.


Capítulo 2   Teoria X Prática   23

ÂÂOs primeiros computadores digitais eram máquinas


enormes, operadas por cientistas e surgiram em 1945.

ÂÂEm 1982, surgiram as primeiras interfaces que permiti-


ram a interação com o usuário.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Dicionário Miniaurélio Eletrônico versão 5.12.

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. DESIGN


DE INTERAÇÃO. Porto Alegre: Bookman, 2005.

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre o Design de Interação na prática:

(  ) Na prática, vemos reduzido o tempo destinado ao estu-


do sobre as interações e usabilidade para um grau de
menor detalhamento.

(  ) Na prática, as empresas de menor porte buscam dife-


renciais de produtos e serviços a partir de análises de
interação e usabilidade.
24   Design de Interação

(  ) Dentro de todas as etapas do projeto, a etapa de estudo


sobre as interações e usabilidade acaba, na prática de
grandes empresas, sendo suprimida ou realizada ape-
nas parcialmente.

(  ) Dentro de todas as etapas do projeto, a etapa de estu-


do sobre as interações e usabilidade acaba, na prática
das pequenas empresas, sendo suprimida ou realizada
apenas parcialmente.

2) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre a definição de USABILIDADE:

(  ) É a característica do que é simples e fácil de usar.

(  ) Qualidade do que é usável.

(  ) 
Capacidade de um objeto, programa de computa-
dor, página da Internet etc. de satisfazer as necessida-
des do usuário de forma simples e eficiente.

(  ) Usabilidade é um termo exclusivamente aplicado ao de-


sign de sistemas interativos.

3) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre os primórdios da computação:

(  ) Em 1945, foram criados os primeiros computadores di-


gitais.

(  ) Em 1960, a interação direta com o computador ainda


era mínima, e os engenheiros projetavam os sistemas
para eles próprios utilizarem.

(  ) Em 1972, foi enviado o primeiro e-mail.


Capítulo 2   Teoria X Prática   25

(  ) Em 1982, surgem as primeiras interfaces que permitiam


a interação com o usuário.

4) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como verdadeira:

(  ) Uma das primeiras interfaces que permitiam a interação


com o usuário, que podia apontar para ícones e dispor
de comandos agrupados em menus, na forma do com-
putador, foi Apple Lisa.

(  ) A década de 80 foi a década do microcomputador e a


década em que a interação humano-computador acon-
teceu de fato, por meio da Internet.

(  ) No início de 2000, cor e multimídia chegaram ao PC,


que já havia começado a dominar o mercado de com-
putadores.

(  ) Na década de 80, surge o design de interfaces, em fun-


ção de solucionar as questões relacionadas à interação.

5) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre interação:

(  ) A interação envolve a cognição e a percepção humana.

(  ) O envolvimento de psicólogos é importante para a in-


teração, pois fornecem informações a respeito das ca-
pacidades humanas, como, por exemplo, memória e
decisão.

(  ) Os grupos de pesquisa relacionados à interação, nos


anos 80, eram formados por engenheiros e cientistas.
26   Design de Interação

(  ) A necessidade de se pesquisar sobre interação e inter-


face, surgiu na década de 80, em função da realização
de tarefas no microcomputador, como escrever docu-
mentos ou gerenciar contas bancárias.

Gabarito:
1) V, V, V, F

2) V, V, V, F

3) V, V, V, V

4) Primeira correta

5) V, V, F, V
Carla Andrea Lopes Allegretti

Capítulo 3

Um Método para
Projetos com Foco na
Interação
28   Design de Interação

Introdução

Segundo Benyon (2011), existem quatro processos implicados


no design de sistemas interativos: entendimento, design, ante-
cipação e avaliação. Essas etapas, que orientam o projeto de
design de interação, formam uma metodologia.

Os projetos de Design, de qualquer natureza, são orien-


tados por um guia, um manual, chamado Metodologia Pro-
jetual. Segundo Cross (apud QUARESMA, 2014), a metodo-
logia projetual sistematiza o desenvolvimento de um projeto,
ela formaliza alguns procedimentos reduzindo os problemas
decorrentes da informalidade das atividades. Normalmente, as
metodologias de projeto, independentemente de cada autor,
contemplam as seguintes etapas:

1. Identificação do problema.

2. Levantamento de dados.

3. Geração de alternativas.

4. Aplicação sistêmica.

O infográfico a seguir propõe o que pode ser o desenho de


uma Metodologia Projetual para projetos de design com foco
na interação.
Capítulo 3    Um Método para Projetos com Foco na Interação    29

Figura 1  Metodologia Projetual.


Fonte: da autora, adaptado de BENYON (2011)

1 Entendimento

O entendimento trata do que o sistema tem de fazer e de como


ele tem de ser, são os requisitos do produto, sistema ou serviço,
conforme Benyon (2011). Requisitos são, segundo o dicionário
Aurélio, as condição necessárias para se alcançar certo obje-
tivo, ou seja, são as características, os atributos que o produto
interativo deve ter.

Segundo o autor, antes de se iniciar a etapa de design, é


essencial que o designer adquira um entendimento completo
das PESSOAS envolvidas no produto ou sistema, das ATIVIDA-
DES que são o foco do design, dos CONTEXTOS nos quais
essas atividades acontecem e das TECNOLOGIAS e suas im-
plicações no design. Essa análise de sigla PACT é uma ferra-
30   Design de Interação

menta, provavelmente a mais importante, a partir da qual são


gerados os requisitos para o produto ou sistema interativo.

Conforme Benyon (2011), os requisitos também podem ser


gerados por meio de outras técnicas de discussões e interações
com pessoas que usarão o sistema ou que serão afetadas por
ele. Ou podem ser formados observando problemas existentes
e, ainda, por meio de pesquisas em sistemas semelhantes.

Preece (2005), categoriza os requisitos, para melhor com-


preensão:

1. Requisitos funcionais

O que o produto ou sistema deve fazer. Por exemplo,


uma geladeira inteligente deve estar apta a informar
quando a gaveta de carnes estiver vazia.

2. Requisitos de dados

Tipo, tamanho e quantidade de dados exigidos, pois


todos os produtos interativos os utilizam em maior ou
menor quantidade.

3. Requisitos ambientais

Contexto em que se espera que o produto interativo


opere. Por exemplo, desenvolver um computador para
que os mergulhadores levem consigo em atividades su-
baquáticas.

4. Requisitos do usuário

Apreendem as características dos usuários em potencial.


Por exemplo, um usuário iniciante precisará de um pas-
Capítulo 3    Um Método para Projetos com Foco na Interação    31

so a passo do produto, um usuário especialista, não, e


desejará maior autonomia.

5. Requisitos de usabilidade

Captam as metas de usabilidade: eficácia, eficiência,


segurança, utilidade, capacidade de aprendizagem e de
memorização.

2 Design

2.1 Design conceitual


O design conceitual, segundo Benyon (2011), considera quais
informações e funções são necessárias para que o sistema
atinja seu propósito. Além disso, ocupa-se de criar um concei-
to claro do sistema e de como esse conceito será comunicado
às pessoas.

A característica-chave do design conceitual é manter as


coisas abstratas – concentrar-se no “o quê” e não no “como”
– e evitar fazer suposições a respeito de como as informações
e funções serão distribuídas.

2.2 Modelos mentais


Um design conceitual claro é fundamental para o desenvol-
vimento de sistemas que sejam compreensíveis, continua
Benyon (2011). O sistema precisa garantir que seu conceito
seja aprendido facilmente pelas pessoas e que elas desenvol-
vam um modelo mental correto dele.
32   Design de Interação

Segundo Preece (2005), modelos mentais baseiam-se em


um design conceitual ou modelo conceitual bem-sucedido.
Existem dois tipos de conhecimento denominado modelo men-
tal do usuário: como utilizar o sistema e, em um nível menor,
como ele funciona. Por exemplo, um bom modelo mental nos
possibilita utilizar o sistema com facilidade e, possivelmente,
saber o que fazer quando ocorre algo inesperado.

2.3 Modelos conceituais


Segundo Preece (2005), entende-se por Modelo Conceitual,
uma descrição do sistema proposto, um conjunto de ideias e
conceitos integrados a respeito do que ele deve fazer, como
deve se comportar e com o que deve se parecer. Além disso,
precisa ser facilmente compreendido pelo usuário.

Os modelos conceituais são baseados em Atividades ou


em Objetos.

Ou seja, no caso de um modelo conceitual baseado em


Atividades, o conceito do sistema ou do produto interativo é
concebido a partir das atividades que os usuários provavel-
mente estarão envolvidos quando estiverem interagindo com
o sistema. Como exemplo de atividades, temos: imprimir um
arquivo ou utilizar uma ferramenta de busca.

No caso de um modelo conceitual baseado em Objetos,


o conceito do sistema ou do produto interativo é concebido a
partir de uma analogia de algo com o mundo físico. Por exem-
plo, um livro-caixa que origina uma planilha virtual.
Capítulo 3    Um Método para Projetos com Foco na Interação    33

2.4 Metáforas em design


Metáfora, no dicionário Aurélio, é definida como quando a
significação natural de uma palavra é substituída por outra
com que tem relação de semelhança. Segundo Benyon (2011),
usar metáforas é tomar conceitos de um domínio e aplicá-los
em outro. Por exemplo, nos sites de compra, comumente en-
contramos o desenho de um carrinho de compras, assim asso-
ciamos ao carrinho físico o carrinho virtual e logo entendemos
que os itens que vão ali, no carrinho virtual, serão os itens que
desejamos comprar.

As metáforas, bastante aplicadas nas interfaces, combinam


um conhecimento já familiar com a funcionalidade de um novo
sistema. As metáforas fazem parte dos modelos conceituais e
facilitam a elaboração de um modelo mental para o usuário.

2.5 Design físico


Enquanto o design conceitual refere-se ao propósito geral do
sistema interativo, como um todo, o design físico preocupa-se
em traduzir esse conceito abstrato em um sistema interativo
concreto. Logo, trata do funcionamento, da aparência e da
percepção do produto.

O design físico possui três componentes:

1. Design operacional

Especifica o funcionamento, a estruturação do conteúdo


e seu armazenamento.

2. Design representacional
34   Design de Interação

Ocupa-se de questões formais e estéticas como cor,


leiaute, estilo etc.

3. Design de interação

Preocupa-se em alocar funções para os agentes huma-


nos e para a tecnologia, além da estruturação e sequên-
cia das interações.

3 Antecipação

Conforme Benyon (2011), o projeto do sistema interativo pre-


cisa ser visualizado, principalmente para ser avaliado. A ante-
cipação ocupa-se justamente disso, de encontrar uma mídia
apropriada para essa demonstração. Esboços, protótipos, ma-
quetes ou cenários são técnicas utilizadas nesse estágio.

4 Avaliação

A Avaliação é a verificação das etapas anteriores: os requisitos


foram atendidos? O produto funciona? Está de acordo com
seu conceito? De acordo com Benyon (2011), a Avaliação
está ligada diretamente à Antecipação, pois o produto final
deve ter os requisitos identificados nessa etapa.

A avaliação pode ser uma simples certificação do designer


para ter certeza de que algo está completo ou correto ou uma
Capítulo 3    Um Método para Projetos com Foco na Interação    35

avaliação formal de um protótipo funcional feita pelos futuros


usuários do sistema.

Segundo Preece (2005), a AVALIAÇÃO HEURÍSTICA, de-


senvolvida por Jakob Nilsen, por exemplo, é uma ferramenta
de avaliação do quesito usabilidade, com a qual se avalia se
os elementos da interface com o usuário – caixas de diálogo,
menus, ajuda on-line etc. – estão de acordo com os princípios
do design de interação.

A seguir, as dez principais heurísticas de Nielsen:

1. Visibilidade do status do sistema

Os usuários são mantidos informados a respeito do que


está acontecendo no sistema? É fornecido um feedback
apropriado?

2. Compatibilidade do sistema com o mundo real

A linguagem utilizada no sistema é simples e familiar ao


usuário?

3. Controle do usuário e liberdade

É possível que o usuário saia facilmente de lugares que


não esperaria encontrar-se?

4. Consistência e padrões

As maneiras de se realizar ações semelhantes são con-


sistentes?

5. Ajudar os usuários a reconhecer e corrigir erros

As mensagens de erro são úteis?


36   Design de Interação

6. Prevenção de erros

É fácil cometer erros? Onde e por quê?

7. Reconhecer em vez de relembrar

Os objetos e ações estão sempre visíveis?

8. Flexibilidade e eficiência no uso

São oferecidos atalhos para usuários mais experientes


realizarem suas tarefas mais rapidamente?

9. Estética e design minimalista

Existem informações desnecessárias e irrelevantes?

10. Ajuda e documentação

A ajuda oferecida é facilmente acessada e seguida?

Recapitulando

Neste capítulo, vimos:

ÂÂA metodologia projetual para projetos de design com


foco na interação possui quatro etapas: Entendimento,
Design, Antecipação e Avaliação.

ÂÂNa etapa de Entendimento, geram-se os requisitos.

ÂÂA etapa de Design compreende Design Conceitual e De-


sign Físico.

ÂÂNa etapa de Antecipação, são gerados os protótipos.


Capítulo 3    Um Método para Projetos com Foco na Interação    37

ÂÂA Avaliação Heurística é uma ferramenta da etapa de


Avaliação.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. DESIGN


DE INTERAÇÃO. Porto Alegre: Bookman, 2005.

QUARESMA, Débora Maria Macedo de. Introdução ao De-


sign Gráfico. Canoas: Ulbra, 2014.

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre as etapas de Metodologia Projetual para pro-
jetos interativos:

(  ) A etapa de Entendimento trata do que o sistema tem que


fazer e de como ele tem que ser.

( ) Ferramentas de análises e pesquisas são utilizadas na


etapa de entendimento.

(  ) A etapa de Design consiste em formatar o produto atra-


vés de prototipagem.

(  ) A etapa de Avaliação utiliza as Heurísticas de Nielsen.


38   Design de Interação

2) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como verdadeira, sobre a etapa de Enten-
dimento:

(  ) Dela fazem parte processos de criação.

(  ) Nela são gerados os requisitos.

(  ) Nela se define o leiaute do projeto.

(  ) Nela se aplica a Avaliação Heurística.

3) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como verdadeira, sobre a etapa de Design:

( ) Um Design Conceitual claro deve formar um modelo


mental correto para o usuário do sistema ou produto
interativo.

( ) No caso de um modelo conceitual baseado em Ob-


jetos, o conceito do sistema ou do produto interativo
é concebido a partir de uma analogia de algo com o
mundo físico. Como exemplo, podemos citar um carri-
nho de mercado físico que identifica os itens que que-
remos comprar.

(  ) O Design Físico ocupa-se da prototipagem do sistema


conceitual.

( ) O Design Físico trata exclusivamente da interface do


produto ou sistema interativo.

4) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre requisitos:
Capítulo 3    Um Método para Projetos com Foco na Interação    39

(  ) Requisitos Ambientais dizem respeito à sustentabilidade.


(  ) Requisitos do usuário apreendem as características dos
usuários em potencial.
( ) Requisitos de usabilidade captam as metas principais
de usabilidade: simplicidade e facilidade.
( ) Requisitos ambientais dizem respeito ao contexto em
que se espera que o produto interativo opere.

5) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre a etapa de Avaliação:

(  ) A Avaliação Heurística, desenvolvida por Jakob Nilsen


é uma ferramenta de avaliação do quesito usabilidade.

(  ) A Avaliação é realizada somente ao final do processo,


quando o produto ou sistema interativo está finalizado.

(  ) A Avaliação consiste na verificação de cada etapa de-


senvolvida anteriormente.

(  ) Ajudar os usuários a reconhecer e corrigir erros é uma


das dez principais heurísticas de Nielsen.

Gabarito:
1) V, V, F, V

2) Segunda correta

3) Primeira correta

4) F, V, V, V

5) V, F, V, V
Carla Andrea Lopes Allegretti

Capítulo 4

PACT – Pessoas,
Atividades, Contextos
Capítulo 4    PACT – Pessoas, Atividades, Contextos    41

Introdução

Existem diversas maneiras de analisar as necessidades e rele-


vâncias dentro dos sistemas interativos. Uma das ferramentas
mais importantes e completas é o PACT – PESSOAS, ATIVI-
DADES, CONTEXTOS E TECNOLOGIAS.

1 Pessoas

As tecnologias só têm a importância que as pessoas dão a


elas. O Orkut era uma ferramenta social muito melhor que
o Facebook e, no entanto, ele foi encerrado. As pessoas de-
cidiram migrar para o Facebook, e independentemente dos
motivos, eles passaram a ser os decisivos, os que importaram
nessa migração.

São as pessoas que usam as tecnologias, e elas decidem


qual tecnologia usar. Mas baseado em quê elas tomam essas
decisões? Não há como saber a não ser perguntando para
elas. Não basta pensarmos o que é importante na nossa visão,
mas o que é importante para quem vai usar o produto, serviço
ou tecnologia.

Dessa mesma maneira, são as pessoas que estabelecem


valores e requisitos para cada nova tecnologia, e essas, por sua
vez, modificarão a natureza das atividades que executamos, o
que pode resultar em uma nova necessidade de novas tecno-
logias, resultando em um fluxo circular e constante. E para que
isso possa ser levado adiante de maneira adequada, torna-se
42   Design de Interação

muito importante entender as diferenças entre as pessoas. Essas


diferenças podem ser de ordem física, psicológica ou social.

1.1 Diferenças físicas


Cada pessoa tem características que são suas únicas, carac-
terísticas físicas, como altura ou peso. Algumas são tão indivi-
duais que podem ser usadas como maneira de identificação,
como são as nossas digitais. A diferença que encontramos nos
cinco sentidos: visão, audição, olfato, tato e paladar tem sem-
pre uma enorme influência sobre quão acessível, utilizável e,
até mesmo, prazerosa uma tecnologia pode ser. Uma pessoa
que tenha daltonismo, por exemplo, faz parte de um grupo de
8% dos homens no lado Ocidental de nosso planeta. Proble-
mas visuais como miopia e hipermetropia podem ser encon-
trados em milhões de pessoas. Na Europa, temos cerca de
2,8 milhões de usuários de cadeiras de rodas. Os números
mostram que é indispensável considerar essas características
quando da aplicação de uma tecnologia para um determina-
do grupo. Outros diferenciais são mais sutis, afinal, nem todos
têm a mesma destreza para digitação que nós mesmos temos,
podendo encontrar maior dificuldade para digitar em peque-
nos botões nas minúsculas telas de celulares.

2 Ergonomia

Podemos definir ergonomia como o estudo das relações exis-


tentes entre as pessoas e o ambiente no qual elas estão inseri-
das. Esse ambiente deve incluir o “meio ambiente” (umidade,
Capítulo 4    PACT – Pessoas, Atividades, Contextos    43

temperatura, níveis de luz ou de ruído, e assim por diante) bem


como o ambiente de trabalho (exposição a elementos perigo-
sos, locais que oferecem riscos à saúde, design das máquinas
etc.). A ergonomia envolve elementos da anatomia e da fisio-
logia, assim como diversos aspectos da psicologia (fisiológica
e experimental), da física, da engenharia e diversos estudos
laborais; logo, podemos dizer que ela é multidisciplinar. En-
contramos a aplicação dos princípios do design quanto à er-
gonomia em todos os sistemas interativos que foram adequa-
damente projetados.

3 Design ergonômico

Quando se começou a falar em IHC, a ergonomia já era conhe-


cida há muito tempo, mas o fato de ser um assunto conhecido
desde muito tempo atrás, ela nunca foi algo considerado anti-
quado ou fora do foco, bem pelo contrário, é ela que pode nos
dizer muito a respeito do correto design de dispositivos interati-
vos. Um exemplo disso são os consoles portáteis de jogos que
enfrentam grandes desafios ergonômicos. Dentro do universo
da computação móvel, ter um tamanho pequeno é considerado
algo bom, mas quando é pequeno demais passa a ser ruim. A
ergonomia pode identificar isso de maneira inequívoca, utili-
zando uma fórmula matemática conhecida como a lei de Fitts.

4 Lei de Fitts

A Lei de Fitts (criada por Paul Fitts, em 1954) nos mostra, em


números, o quão difícil é atingir um determinado alvo consi-
44   Design de Interação

derando a distância do alvo e do tamanho desse alvo. Assim,


quanto maior é a área de um botão e quanto menor for a dis-
tância que sua mão estiver dele, mais fácil é de pressioná-lo.
Se você precisa clicar quatro botões na tela do computador e
cada um estiver em um canto da tela, você levará um tempo X,
se os quatro estiverem lado a lado, será muito mais simples e
rápido. Considere o mesmo, mas com botões minúsculos, essa
dificuldade aumenta, não é verdade?

Logo podemos entender essa razão conforme proposto


pela fórmula de Shannon (criada por Scott MacKenzie) para
cálculos de movimento sobre apenas uma dimensão:

Figura 1  Lei de Fitts.


Fonte: Benyon (2011)

- T é o tempo médio necessário para completar o movi-


mento. (Tradicionalmente, os investigadores têm usado o
Capítulo 4    PACT – Pessoas, Atividades, Contextos    45

símbolo MT para indicar movement time (tempo de movi-


mento em inglês).

- a e b são constantes empíricas, e podem ser determina-


das aproximando os dados medidos com uma linha reta.

- D é a distância desde o ponto inicial até o centro do


objetivo. (Tradicionalmente, os investigadores têm usado
o símbolo A para isso, indicando a amplitude do movi-
mento).

- W é a largura (width em inglês) do objetivo medida sobre


o eixo do movimento. Também pode entender-se W como
a tolerância de erro permitida na posição final, dado que
o ponto final do movimento deve ficar a +/- W/2 do cen-
tro do objetivo.

Percebemos na fórmula que há uma relação entre a velo-


cidade e a precisão, onde objetos menores e mais distantes
irão necessitar de mais tempo para que sejam alcançados de
maneira correta.

4.1 Diferenças psicológicas


Dentre as muitas diferenças que podemos ter entre as pessoas,
sem dúvida que as psicológicas são as mais sutis, pois elas po-
dem não se apresentar de imediato, não são visíveis e podem
ser instáveis. Algumas pessoas tem uma percepção espacial
perfeita. Um exemplo clássico é quando uma pessoa preci-
sa atravessar uma avenida de certo movimento de veículos
(considere que não existem sinaleiras). Algumas conseguem
facilmente avaliar em décimo de segundo a relação da distân-
46   Design de Interação

cia que vem um veículo ao longe, com a distância até onde


ele está e a sua própria velocidade de travessia, sabendo se o
tempo é adequado para que ela atravesse ou não. Outras têm
sérias dificuldades e somente atravessam quando não existe
qualquer veículo mesmo em uma longa distância.

Os designers precisam considerar as diferenças culturais


também, afinal a interpretação pode variar de acordo com a
forma de agir de um povo ou de uma cultura. Na Inglaterra,
o motorista fica à direita enquanto o passageiro à esquerda,
em virtude da “mão inglesa”. Toda a interação precisa ser pen-
sada para ser adaptada a essas situações, quando existente.
As diferenças de linguagem podem ser determinantes para o
correto entendimento da mensagem que queremos passar.

5 Diferenças individuais

Outra diferença que devemos considerar é que as pessoas têm


diversidades individuais que as diferenciam em várias caracte-
rísticas, tal como o fato de algumas pessoas lembrarem muito
facilmente de nomes, enquanto outras de fisionomia; algumas
têm facilidades com números, outras têm grande dificuldade
para registrar o que as rodeia sem que se concentre em cada
um dos pontos específicos. Algumas pessoas conseguem tra-
balhar com um nível de pressão enorme, enquanto outras não
admitem sequer um ruído mínimo.

A personalidade de cada pessoa é construída ao longo dos


anos, e uma mudança pode até ser possível, mas requer de-
Capítulo 4    PACT – Pessoas, Atividades, Contextos    47

dicação e um longo tempo. Tempo esse que não temos quan-


do criamos sistemas interativos para um determinado público.
Logo, é o designer de interação que precisa se adaptar ao
público e não o contrário.

6 Testes psicológicos

Diversos testes foram criados para que se possa descobrir es-


sas diferenças. Um dos mais conhecidos é o Indicador de Tipos
Myers-Briggs composto de uma série de testes que nos ofere-
cem como resultado uma classificação das pessoas dentro de
um universos de 16 personalidades diferentes. Já o sistema
OCEAN classifica as pessoas dentro de cinco personalidades
diferentes: Abertura à experiência, Conscienciosidade, Extro-
versão, Amabilidade, e Neuroticismo. O designer deve con-
siderar a extensão dessas diferenças entre indivíduos e com-
por as exigências de seu trabalho em cima das habilidades
psicológicas das pessoas a fim de obter os resultados mais
adequados.

7 Modelos mentais

Segundo Norman (1998, apud Benyon, 2011) o correto en-


tendimento bem como o conhecimento que nós temos das
coisas pode, frequentemente, ser chamado de Modelo Men-
tal. Caso uma pessoa não tenha um correto modelo mental
de algo, então ela apenas realizará ações por repetição. Se
48   Design de Interação

alguma coisa não funcionar adequadamente, ela não con-


seguirá entender o que ocorreu de errado e tentar corrigir o
rumo tomado. É como uma pessoa que não entendeu um de-
terminado conteúdo que precisa estudar para uma prova, en-
tão ela poderá repetir incessantemente as informações, mas
não significa que as entendeu, e poderá até mesmo ter um
bom resultado em uma prova de conhecimentos sobre aquele
assunto em específico quando ocorrido em um curto espaço
de tempo, porém rapidamente aquela informação irá embora,
pois faz parte de um castelo de cartas, e onde uma se perder,
toda a informação será perdida.

Um princípio básico para um bom design é projetar as


coisas para que as pessoas possam formar modelos mentais
úteis e adequado, que permita a elas mostrar como as coisas
podem funcionar, como obter os resultados que se necessita e
que é permitido.

8 Desenvolvendo um modelo mental

Uma das formas que as pessoas desenvolvem seus modelos


mentais é interagindo com os sistemas, e a partir de obser-
vações sobre a relação de causa e efeito, de suas ações e
do resultado que o sistema lhe entrega, lendo as instruções
e manuais sobre o funcionamento de um sistema (ainda que
no Brasil este não seja um costume primário). Dessa forma,
é muito importante que os designers disponibilizem todas as
informação possíveis na interface ou em documentação que
Capítulo 4    PACT – Pessoas, Atividades, Contextos    49

possa acompanhar o sistema. Dessa forma, permitirá que as


pessoas possam formar um modelo mental correto e preciso.

Eventualmente, esse processo de descrever o funcionamen-


to pode parecer fácil, no entanto muitas vezes os designers têm
uma concepção do sistema que desenvolveram nem sempre
exatamente correspondente ao que o sistema de fato realiza.

Isso sem contar que o desenvolvimento de grandes siste-


mas tem geralmente o trabalho de muitas pessoas, e que um
único designer não deterá todas as informações sobre o sis-
tema completo. Por mais que seja projetada uma imagem de
que tudo está muito claro, está de fato claro para quem o
projetou, e talvez para um público que tenha o mesmo per-
fil dessas pessoas, mas é indispensável pensar de forma mais
abrangente, avaliar o sistema sob a ótica de quem irá usar e
descrever com detalhes capazes de habilitar qualquer pessoa
que desconheça o sistema, a utilizar de forma correta e obter
os mesmos resultados que se esperava durante a concepção
do sistema. Isso permitirá que as pessoas possam criar a partir
daí o seu próprio modelo mental, e se isto acontecer, ela con-
seguirá utilizar e obter os resultados desejados não apenas por
repetição, mas por compreensão.

8.1 Diferenças sociais
Devemos também considerar que as pessoas usam os siste-
mas, produtos e serviços que oferecemos por razões diversas,
cada uma pode ter objetivos diferentes ao acessar determina-
do sistema, e enquanto algumas manterão um alto grau de
interesse por muito tempo, outras poderão perder o interesse
50   Design de Interação

rapidamente, devido a suas motivações que se alteram com o


passar do tempo. Muitas vezes, somos estimulados a comprar
um determinado produto por acreditar que temos aquela ne-
cessidade ou interesse, mas diversas vezes podemos entender
que de fato fomos movidos por um impulso que depois se
mostrou inadequado.

Precisamos também contar que o nível de experiência


prévia dos usuários é bastante variado e pode determinar
utilização e resultados diferentes. Enquanto os usuários mais
experientes aprendem rápido e facilmente, buscam interagir
sem maiores receios, os novatos precisam ser instigados e ins-
truídos para que possam buscar essa mesma interação, e de
maneira atraente, pois eles têm uma tendência a perder o inte-
resse facilmente por aquilo que não conseguem compreender
adequadamente.

Essas diferenças precisam ser reconhecidas em um primei-


ro momento, haja vista que é muito diferente o design para
grupos homogêneos do que para os heterogêneos. Para um
grupo de grande similaridade, podemos oportunizar poucas
maneiras, eventualmente apenas uma, de fazer algumas coi-
sas, porém para grupos muito diferentes, é importante que
se estude diversas maneiras para se chegar ao mesmo re-
sultado, pois cada grupo irá ficar satisfeito por ser possível
obter os resultados da maneira que julgam mais adequada.
Podemos perceber isso facilmente nos programas de compu-
tador. Em um software como um editor de texto, temos um
grande número de maneiras de conseguir o mesmo resulta-
do, seja clicando em um ícone, seja indo através de teclas
de atalho, por barras de menu ou até por comandos de voz,
Capítulo 4    PACT – Pessoas, Atividades, Contextos    51

dependendo de sua interface de entrada e saída. Muitas pes-


soas não usam mouse por acreditar que elas perdem muito
tempo clicando (Lei de Fitts) e realmente conseguem um re-
sultado muito mais rápido digitando, mas para isso todas as
funções devem ser possíveis de serem alcançadas com o uso
das teclas de atalho.

9 Atividades

Devemos considerar as diversas características das atividades


no trabalho de um designer. Para isso, é importante dar um
foco nos objetivos de cada atividade de um âmbito geral. As
principais características são:

1. Aspectos temporais

2. Cooperação

3. Complexidade

4. Segurança

5. Conteúdo

10 Aspectos temporais

Os aspectos temporais dizem respeito ao quanto as atividades


são regulares ou espaçadas. Algo que é realizado diariamente
pode ter um design que difere em muito de algo que só ocorre
52   Design de Interação

uma vez por ano. Cabe aos designers garantir que as tarefas


frequentes sejam as mais simples de realizar. No entanto, isso
é um embasamento primário para os sistemas criados e que
não são conhecidos ainda pelos usuários. Posterior a isso, ha-
verá o comprometimento desse aspecto pelo costume, o que
leva as pessoas a fazer as coisas do mesmo jeito que sempre
foram feitas porque estão acostumadas a isso, e o tempo que
levariam para se adaptar a um novo sistema faz com que o
usuário tenha uma alta taxa de rejeição, mesmo que o novo
sistema seja posteriormente mais fácil e rápido.

Um exemplo disso é o teclado do seu computador, que


tem as teclas distribuídas pelo sistema QWERTY. Consideran-
do que a letra “A” é a mais digitada, ela deveria ser posicio-
nada em um local onde o acesso para os dedos indicadores
fosse mais rápido e fácil, e no entanto ela se encontra no
ponto mais inacessível. Existiram teclados que tentaram ofe-
recer uma mudança, garantindo uma digitação mais confor-
tável e rápida, mas era tarde, pois as pessoas já estavam de-
masiadamente acostumadas, e o sistema QWERTY difundido
de forma a impedir que mesmo um design mais adequado
pudesse obter sucesso.

Dessa forma, é importante avaliar se um sistema poderá


ser bem-sucedido no momento em que você precisa, ou se
mesmo sendo uma boa implementação, ela pode não ser bem
recebida pelo cliente.
Capítulo 4    PACT – Pessoas, Atividades, Contextos    53

11 Outros aspectos temporais

Algumas atividades podem esperar uma resposta para sua in-


teração, e o tempo determinado de consulta a dados pode ser
uma verdadeira armadilha para o usuário. Eventualmente, pe-
quenos detalhes podem se tornar grandes problemas quando
precisam ser repetidos um grande número de vezes. Assim, se
o usuário está em meio a um procedimento que é interrompi-
do, aumenta a chance dele evadir. O usuário nunca pode se
sentir abandonado pelo sistema esperando uma resposta que
não acontece. Em websites, é indispensável que seja sempre
colocado um gráfico de loader quando ocorrer uma interação
que denote espera, a contagem regressiva do “carregador”
dá a ideia de que o sistema está trabalhando para o usuário
e não que ele está travado. Qualquer tempo que passe de 5
segundos sem que ocorra uma interação com o usuário tem
uma alta probabilidade de abandono, pois deixam as pessoas
confusas sobre o que está de fato acontecendo.

13 Segurança

Algumas atividades podem ser consideradas “críticas quanto à


segurança” em que qualquer erro pode resultar em ferimentos
ou em acidentes. Sempre que houver questões de segurança
envolvidas, os designers precisam estar atentos para garantir
que os erros não apresentem consequências drásticas. É im-
portante considerar que as pessoas cometem erros ou enga-
nos e que é o seu design que poderá permitir que esses erros
54   Design de Interação

sejam evitados. Imagine se sempre que você clicasse, mesmo


que sem querer, na tecla DEL do seu computador, o arquivo
em questão fosse deletado sem qualquer pergunta de confir-
mação, e sem possibilidade de reaver o mesmo, isso poderia
ser trágico no tocante aos dados e ao seu trabalho. No en-
tanto, não apenas ele fará a pergunta verificando se você tem
certeza de que apagará os dados, quando, de fato, não as
apaga, mas apenas as transfere para outra pasta, a conhecida
“lixeira”. Isso porque as pessoas podem cometer erros e é tra-
balho do designer minimizar os danos.

14 Contextos

As Atividades acontecem sempre dentro de um contexto, assim


é necessário analisar as duas coisas juntas. Podemos ter três
tipos de contextos:

1. Contexto Organizacional

2. Contexto Social

3. Contexto Físico

Contexto nem sempre é algo muito claro. Eventualmente,


será necessário vê-lo como algo que está em torno da ativi-
dade, enquanto que em outras vezes poderemos ver como as
características que garantem a integridade de uma atividade
permitindo manter sua coerência.

Veja o caso de uma atividade relativamente simples como


utilizar um caixa eletrônico. Uma análise do contexto nos
Capítulo 4    PACT – Pessoas, Atividades, Contextos    55

mostrará coisas como a localização do maquinário, o reflexo


possível na tela, considerações sobre segurança. O contexto
social mostraria o tempo que se leva para realizar uma transa-
ção e qual o impacto decorrente nos procedimentos bancários
tradicionais, pois muitos dos serviços realizados anteriormen-
te passaram a ser exclusivos dos sistemas automáticos, que
por outro lado passaram a necessitar de pessoas para garantir
esse funcionamento adequado ao usuário.

Da mesma maneira, o contexto físico é importante, pois ele


pode ser a razão de um bom funcionamento ou até mesmo de
um cliente que abandona o serviço por se sentir desamparado.
Podemos citar o caso do sol que bate na tela e torna impos-
sível de ler adequadamente o que está escrito nela, ou de um
desvio, causado por trepidação ou sujeira, no sistema de tela
sensível que pode resultar no cliente digitar um número e o
sistema entender outro.

Um cliente que deseja se conectar ao site do banco em


uma grande capital com Internet rápida enquanto que outro
pode estar acessando em uma cidade com Internet lenta ou de
celular. Se o design não for pensando nessas condições, tere-
mos uma forte desvantagem para quem não tem as melhores
possibilidades de navegação na Web.

O contexto social pode ditar o que é considerado aceitável


em determinadas condições ou locais onde uma atividade é im-
portante. Se houver sistemas de ajuda os usuários, poderão não
ter problemas, mas, em muitos casos, a pessoa estará sozinha e
precisa conseguir resultados satisfatórios. Podemos ter questões
que exijam privacidade, e nesses casos a interação com outras
pessoas podem ser inexistente de maneira obrigatória.
56   Design de Interação

As normas sociais podem definir a aceitabilidade de um


determinado design. Por exemplo, o uso de sistemas de som
pode ser inaceitável em um ambiente de trabalho compartilha-
do, mas pode ser muito eficaz se a pessoa estiver trabalhando
sozinha.

Por último, o contexto organizacional é também importante,


considerando que a tecnologia muda frequentemente e altera
a forma da comunicação, bem como as estruturas de poder,
podendo até mesmo alterar funções de maneira positiva ou
negativa. A maneira como as atividades acontecem também
variam e devem ser levadas em consideração.

15 Plasticidade das interfaces

Coutaz (2008, apud Benyon, 2011) apresenta a ideia do de-


sign que também busca a plasticidade estética das interfaces.
Elas seriam adaptáveis a diferentes formas e contextos, dando
uma importância, agregando valor à ideia do design. Os desig-
ners devem considerar os valores que estão buscando para as
pessoas dentro de um contexto específico. A interface deve ser
projetada para alcançar os valores exigidos nesses contextos.

Recapitulando

ÂÂSão as Pessoas que usam as tecnologias que estabe-


lecem os valores e requisitos delas. Para entendê-las,
Capítulo 4    PACT – Pessoas, Atividades, Contextos    57

deve-se conhecer suas diferenças físicas, psicológicas


ou sociais.

ÂÂOs aspectos mais relevantes das Atividades são os tem-


porais e de segurança.

ÂÂOs Contextos diferem em termos físicos, sociais e orga-


nizacionais.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Atividades

1) Leia com atenção as afirmações a seguir sobre Ergonomia


e marque apenas uma alternativa como correta:

(  ) É a relação de proporcionalidade das medidas do cor-


po humano.

(  ) É o estudo das relações existentes entre as pessoas e o


ambiente onde elas estão inseridas.

( ) É o sistema que determina a melhor tecnologia para


pessoas com deficiências físicas.

(  ) É o controle de qualidade realizado nos sistemas inte-


rativos.
58   Design de Interação

2) Leia com atenção as afirmações a seguir sobre o que a


Lei de Fitts é utilizada para calcular e marque apenas uma
alternativa como correta:

(  ) O quão difícil é atingir um determinado alvo conside-


rando a distância do alvo e o tamanho desse alvo.

(  ) A quantidade de links que um site pode ter dentro de um


sistema interativo.

(  ) O grau de influência que os itens do PACT tem sobre o


design.

(  ) A quantidade de interações feitas pelo usuário durante


um determinado período de tempo.

3) Marque apenas uma alternativa como correta nas afirma-


ções a seguir sobre as diversas diferenças que podemos
encontrar entre as pessoas, as que são consideradas as
mais sutis:

(  ) Diferenças Físicas.

(  ) Diferenças Sociais.

(  ) Diferenças Psicológicas.

(  ) Diferenças Culturais.

4) Leia com atenção as afirmações a seguir sobre Modelos


Mentais e marque apenas uma alternativa como correta:

(  ) Um padrão que serve de exemplo na criação de sites


mais realistas.
Capítulo 4    PACT – Pessoas, Atividades, Contextos    59

(  ) O correto entendimento e o conhecimento que nós te-


mos das coisas.

(  ) O fluxo de pensamento desordenado do subconsciente.

(  ) A ordenação de pensamentos em prol a levantar as pos-


sibilidades de um projeto na sua fase de entendimento.

5) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre as alternativas a seguir que são consideradas
características do item “Atividades” pertencente ao PACT:

(  ) Aspectos Temporais.

(  ) Cooperação.

(  ) Complexidade.

(  ) Custo.

Gabarito:
1) Segunda correta

2) Primeira correta

3) Terceira correta

4) Segunda correta

5) V, V, V, F
Carla Andrea Lopes Allegretti

Capítulo 5

PACT – Tecnologias
Capítulo 5   PACT – Tecnologias   61

Introdução

Um dos pontos mais importantes de análise antes do desenvol-


vimento é estudar e entender quais são as tecnologias envol-
vidas, quais delas podem oferecer algum tipo de problema, e
buscar alternativas para facilitar a interação com o uso do que
for mais adequado nesse sentido. Mostrar um sistema avan-
çado tecnologicamente pode ser muito interessante para um
determinado tipo de público, enquanto que para outros, isso
será exatamente um fator de afastamento, pois são pessoas
mais tradicionais, avessas às mudanças ou com dificuldade de
compreender o funcionamento desses gadgets modernos.

Os sistemas interativos consistem de componentes de har-


dware e software que estão em permanente comunicação en-
tre si, transformando a entrada de dados em resultados nos
periféricos de saída. Os sistemas interativos podem realizar
diversas funções e geralmente contêm uma boa quantidade
de informações e dados. Os usuários desses sistemas acabam
por se envolver em interações diretas ou indiretas. Saber como
usar o potencial dos equipamentos tecnológicos pode ser o di-
ferencial do trabalho entre ser apenas mais um bom trabalho,
ou ser um trabalho destacado positivamente.

1 Entendendo as tecnologias

As tecnologias interativas mudam em uma velocidade fan-


tástica e a melhor maneira para nos mantermos atualizados
quanto às opções disponíveis é manter-se informado sobre
62   Design de Interação

as novidades do mercado em sites dedicados a avanços tec-


nológicos. É muito difícil classificar as tecnologias, pois elas
frequentemente mudam a roupagem, passam por mudanças
com combinações entre mais de uma tecnologia. Inicialmente,
os celulares foram feitos apenas para falar com outra pessoa,
no entanto essa é uma das funções menos usadas atualmente
por grande parte de seus donos, que usam os novos celulares
como centrais de entretenimento e, por conta disso, acabam
tendo um enorme número de interações diferenciadas. Os de-
signers precisam estar atentos às possibilidades de entrada,
saída, comunicação e conteúdo para que possam fazer as me-
lhores escolhas diante da realidade que for apresentada.

2 Dispositivos de entrada

Esses dispositivos determinam a maneira como as pessoas co-


locam ou passam suas informações para um sistema. Quando
você gira uma chave para acender uma lâmpada, a chave é
seu dispositivo de entrada, a maneira como você se fez enten-
der pelo sistema, de que deseja que a lâmpada acenda.

2.1 Teclado
O teclado de um computador é um dos dispositivos de entra-
da mais comuns, e por mais que estejamos acostumados ao
sistema QWERTY tradicional, é importante que um designer
conheça outros sistemas, pois, dependendo de como ele for
atuar e para qual público, a resposta poderá ser diferente da-
quela esperada. Na França, por exemplo, usa-se o teclado
Capítulo 5   PACT – Tecnologias   63

de padrão AZERT; logo, se existe uma relação na entrada de


dados que necessite da limitação física de um teclado, não
considerar essa diferença poderá ter resultados equivocados
por parte da utilização final.

2.2 Mouse
Um dos dispositivos de entrada mais antigos para entrada de
dados é o mouse, que foi desenvolvido no Laboratório de Stan-
ford na década de 60. Ele consiste em um dispositivo do ta-
manho da palma da mão, que se move sobre uma superfície
plana. Seu modelo que mais durou (embora já esteja caindo
em desuso), consiste em uma pequena bola envolvida em bor-
racha que movimenta duas rodas que são colocadas em um
ângulo reto. Essas rodas traduzem a movimentação que você
dá ao mouse para sinais elétricos que podem ser entendidos
pelo computador. Alguns mouses tem até 12 botões, permitindo
que uma grande quantidade de possibilidades seja acessível di-
retamente através dele. Atualmente, temos mouses com sistema
infravermelho, com conexão via wireless (sem fio), melhorando
a acessibilidade e usabilidade para todos os usuários.

3 Apontadores

No sistema touch, os dedos em conjunto com a tela fazem a


parte do dispositivo de entrada e isso traz um grande benefício,
pois as pessoas sempre tem os dedos para fazer a interação.
Já uma caneta ótica permite realizar apontamentos e entrada
de informações, mas exige que sempre se tenha uma a mão,
64   Design de Interação

é fácil de acabar perdendo devido ao seu tamanho, e por isso


os smartphones com caneta acabaram sucumbindo aos siste-
mas touch, ainda que um determinado número de pessoas o
prefira; afinal, em alguns celulares, é bastante complicado de
se utilizar dedos grandes para acessar botões pequenos.

4 Outros dispositivos apontadores

O trackball não é tão conhecido, mas é um outro dispositivo


apontador que podemos explicar como um mouse deitado de
costas. Para movimentar o cursor, você precisa movimentar a
bola com a palma da mão. Alguns sistemas aviônicos ainda se
utilizam desse sistema e nada impede de termos algumas adap-
tações dele sobrevivendo ainda em novos hardwares.

Podemos ainda ter o uso de um dispositivo de entrada cha-


mado joystick, uma alavanca que se movimenta por um ponto
central. O joystick pode se movimentar para oito direções (cima,
baixo, esquerda, direita e seus pontos intermediários), e com
isso controla o movimento de um cursor, de uma espaçonave ou
qualquer que seja o objeto que você esteja controlando.

5 Apontando a distância

Com o lançamento do Nintendo Wii®, em 2007, toda uma


nova geração de meios de entrada de dados tornou-se possível.
O Wii® usa o infravermelho para registrar o movimento de um
bastão. Isso permite que os gestos sejam reconhecidos. Outros
Capítulo 5   PACT – Tecnologias   65

sistemas reconhecem gestos rastreando os movimentos de bra-


ços e pernas por meio da colocação de sensores ou câmeras.

6 Outros sensores

Sensores de ar comprimido, sensores acústicos, detectores de


vibrações, de infravermelhos ou ainda de movimento e até mes-
mo acelerômetros estão a sua disposição em tablets e celulares.
Sistemas que até bem pouco tempo atrás seriam desconsidera-
dos por conta de seus preços elevados, hoje estão à disposição
de qualquer pessoa a preços muito baixos e precisam ser consi-
derados no momento de avaliar as possibilidades de interação.

A atividade cerebral também pode ser utilizada de forma a


passar informações para um computador. Sistemas que captam
os sinais elétricos do cérebro possibilitam que pessoas sem o
movimento dos membros ou sem alguns dos sentidos tenham
uma possibilidade de expressar interação  detectada. Alguns
consoles de games possuem comandos para serem dados com
o uso da voz, o que elimina a necessidade de parar uma parti-
da que esteja em andamento para que alguma ação seja feita.
Um número cada vez maior de interfaces passam a utilizar tam-
bém a voz como forma de interação com o usuário.

7 Dispositivos de saída

Os dispositivos de saída são aqueles que oferecem os resul-


tados ao usuário, comumente após darmos entrada e termos
66   Design de Interação

essas informações processadas. Os monitores, impressoras


e caixas de som são dispositivos bem conhecidos de nosso
dia a dia (para quem trabalha com computadores de alguma
maneira).

Os primeiros monitores de “tubo” (CRT) ainda podem


ser encontrados em alguns sistemas, mas cada vez mais são
substituídos por telas de LCD, Plasma ou similares, oferecen-
do uma maior qualidade e um menor consumo. Algumas
telas possuem um sistema de imagem tridimensional, ainda
pouco explorados, mas que podem ocupar ainda um espaço
interessante, principalmente com o novo sistema de óculos
Rift, que possibilita ao usuário uma imersão total dentro das
imagens, tendo a impressão de estar completamente dentro
de um ambiente.

7.1 Impressoras 3D
Uma nova realidade que tem se apresentado no mercado e
que deve ser uma tendência para novos trabalhos é o uso das
impressoras que possibilitam a impressão de objetos tridimen-
sionais. Atualmente, temos algumas empresas que exploram
um nicho de mercado de impressão 3D de avatares das pró-
prias pessoas. É como sua câmera fotográfica mas em forma
de um boneco 3D. Esse tipo de impressora, por princípio pode
construir qualquer objeto desde que se tenha a matriz para
tanto. Já existem carros sendo construídos inteiramente com o
uso dessas impressoras.
Capítulo 5   PACT – Tecnologias   67

8 Hápticos

Háptico se relaciona com a sensação de toque. Dispositivos


hápticos permitem que possamos sentir vibrações, pressão,
nos dão uma sensação adicional, geralmente complementar
à visão. É comum ser utilizado em controles com force feedba-
ck (força de retorno) o que faz um controle/direção reagir de
forma mais real, pois quando você puxa uma direção de um
carro, sente uma força em sentido contrário, e esse sistema
procura fazer o mesmo.

Existem algumas luvas com diversos pontos de pressão,


que permitem que uma pessoa utilizando esse sistema possa
“sentir” algo que uma mão robótica está pegando em outro
lugar do mundo, permitindo por exemplo que um médico faça
uma operação a distância com grande precisão.

8.1 Comunicação
A conexão entre as pessoas e dispositivos é uma parte muito
importante do design de sistemas interativos. Questões como
largura de banda e velocidade podem ser decisivas. Outro
ponto chave é informar ao usuário sobre o status, o que está
acontecendo a cada momento e com isso impedir que ele des-
conecte e abandone.

Ao realizar o design, muitos problemas podem ser evitados


com o uso de imagens leves, com sistemas que estão claros e
não deixam margens para dúvida. Considere o tipo de tráfego
de dados que se dará e pense se todas as coisas esteticamente
agradáveis podem ainda ser usadas sem prejuízo de cone-
68   Design de Interação

xão. O cliente sempre tem uma preferência por animações,


transições, questões estéticas que podem ser utilizadas quando
temos a certeza de que funcionarão bem, mas não deixe de
verificar se a comunicação será feita de maneira adequada no
trânsito desses dados, ou o cliente nem chegará a perceber
que o site em questão era bem feito, ele abandonará na entra-
da da primeira tela.

9 Comunicação sem fio

A comunicação sem fio é um grande avanço e está se tornan-


do rapidamente o padrão. Atualmente, temos mais de 85%
da área das capitais cobertas por algum sistema wireless. Por
ocasião da Copa do Mundo no Brasil, ocorreu a implantação
do novo sistema 4G que permite um tráfego de dados tão rá-
pido quando em redes cabeadas, mas é importante salientar
que este não é o padrão, e as redes 3G têm uma grande ins-
tabilidade; logo, se o sistema que você irá trabalhar precisará
depender desse tipo de rede, é importante que isso seja visto
nas primeiras etapas. Dessa forma, todas as áreas poderão
trabalhar em prol a ter os mesmos resultados de comunicação,
mas com um cuidado no tocante ao carregamento das infor-
mações.

9.1 Comportamento dos dados


O conteúdo pode ser salvo e depois recuperado quando ne-
cessário  (tecnologia pull), ou pode ser enviado (tecnologia
Capítulo 5   PACT – Tecnologias   69

push) de um servidor para um dispositivo, e vice-versa. O e-


-mail push é usado no sistema BlackBerry®, mantendo sua
conta de e-mail sempre atualizada. Os feeds RSS, encontrados
em qualquer website, permitem uma atualização automática
quando o conteúdo do site é modificado. As características
desses dados são importantes para que se faça a escolha dos
métodos de entrada. Códigos de barra, por exemplo, só te-
rão sentido se os dados não sofrerem qualquer alteração. As
touchscreens serão realmente úteis se houver poucas opções.
A entrada de voz não será uma opção se houver uma grande
interferência de ruídos externos ou se existe uma grande quan-
tidade de comandos para serem executados, e o ambiente não
for privado.

10 Comportamento da mídia

A saída de dados em streamy (fluxo), como vídeo, música e


voz, têm algumas características diferentes das mídias chunky,
tais como ícones, texto ou fotos. O mais importante é que a
mídia de fluxo não tem o padrão de permanecer por muito
tempo.

Instruções recebidas como saída de voz têm de ser lem-


bradas; no entanto, se forem mostradas como texto, poderão
ser lidas novamente quando necessário. Animações são outro
meio, que está se tornando muito popular de apresentar con-
teúdo. Elas podem ser em 2D (como as geradas em Flash) ou
em 3D (como as feitas no Maya ou 3DS).
70   Design de Interação

11 D
 elimitando problema com o PACT

Podemos ter vários objetivos com o uso do design de sistemas


interativos onde o foco é o usuário, as pessoas que realmente
estarão envolvidas. O uso do PACT nos permite ter uma com-
binação perfeita das possibilidades envolvidas, das aplicações
que podem influenciar o bom funcionamento de um sistema
interativo.

É importante tentar entender o todo e isso é feito conhecen-


do as partes desse todo, conhecer a situação atual nos permite
prever o que deve acontecer no futuro. Avaliar erros e acertos,
nos dá uma maior chance de sucesso nos projetos que são
desenvolvidos.

O PACT é uma enorme lista sobre tudo que pode estar


envolvido quando analisamos Pessoas, Atividades, Contextos e
Tecnologias, que de uma maneira ou outra podem estar envol-
vidos no trabalho. Em alguns casos, teremos de estudar essas
possibilidades apenas para descartá-las de vez, pois somente
avaliando-as é que podemos ter certeza de que elas não serão
utilizadas.

Para as pessoas, o designer tem de pensar nas muitas di-


ferenças físicas, nas psicológicas e também nas sociais, assim
como essas diferenças mudam em circunstâncias diversas e
com o passar do tempo. O importante é que o designer consi-
dere todos os envolvidos dentro de um projeto.

Para as atividades, é necessário pensar em sua comple-


xidade (se é concentrada ou vaga, se é simples ou difícil, se
Capítulo 5   PACT – Tecnologias   71

tem poucas ou muitas etapas), nas características temporais


(a frequência, os altos e baixos, se é contínua ou se pode ser
interrompida), nas características de cooperação e também na
natureza dos dados.

Com relação aos contextos, devem ser considerados os ce-


nários físicos, o social e o organizacional.

Já quanto às tecnologias, o designer tem de se concentrar


em dispositivos de entrada, saída, na comunicação e no con-
teúdo.

11.1 Exemplo de PACT: Pessoas


Dentro de um laboratório em uma universidade, uma análise
de PACT poderia nos mostrar o seguinte: estudantes, profes-
sores e técnicos fazem parte dos grupos principais. Todos são
muito bem instruídos e entendem coisas com um grau maior
de complexidade como cartões magnéticos, senhas e assim
por diante.

Pessoas em cadeiras de rodas devem ser consideradas


quanto às limitações de movimento, assim como pessoas com
daltonismo. Os visitantes frequentes teriam uma relevância
maior, mas mesmo os de menor frequência devem ser con-
siderados na análise, mesmo que seja para verificar que não
seja necessário um design específico para um tipo de público
de rara frequência. Pessoas com acesso eventual como segu-
ranças, mesmo que acessem com uma frequência menor, tem
um nível de criticidade alto no ambiente.
72   Design de Interação

11.2 Exemplo de PACT: Atividades


O propósito geral da atividade é colocar algum tipo de libera-
ção de segurança e abrir a passagem/porta. É uma atividade
bem definida e que deve acontecer em apenas uma única eta-
pa. Acontece com frequência e tem momentos onde essa fre-
quência tem picos, como no início das sessões de laboratório.
O dado que deve ser inserido é um código alfanumérico bá-
sico. É uma atividade que não necessita de cooperação com
outros (ainda que possa ser feita com outros). Não é crítica no
tocante à segurança, ainda que seja um aspecto importante.

11.3 Exemplo de PACT: Contextos


Fisicamente, a atividade sempre acontece em um recinto fe-
chado, mas as pessoas podem ter variáveis como o fato de
estarem carregando livros e outras coisas que possam tornar
bastante difícil fazer alguma coisa mais complexa. Socialmen-
te, pode ocorrer em meio a um grande número de pessoas,
mas também pode acontecer próximo à noite, quando já não
há mais alguém por perto. Em termos organizacionais, o con-
texto é basicamente sobre segurança, sobre quem deverá ter
acesso a que sala e quando essas pessoas podem ter esse
acesso.

11.4 Exemplo de PACT: Tecnologias


Uma pequena quantidade de dados deve ser inserida de forma
rápida. A maneira de fazer isso precisa ser óbvia para acomo-
dar visitantes e as pessoas que possam não estão familiariza-
das com esse sistema. Ela precisa ser acessível à cadeirantes,
Capítulo 5   PACT – Tecnologias   73

inclusive. A saída da tecnologia precisa ser clara: se o dado de


segurança foi aceito ou se ele não foi, e a porta deve abrir se
o processo foi bem-sucedido. Pode ser necessária a existência
de uma comunicação com um banco de dados central para
que a entrada de dados seja validada, no entanto a aplicação
não deve ter muito mais conteúdo do que isso.

Recapitulando

ÂÂAs tecnologias diferem em termos de entrada, saída, de


comunicação e do conteúdo que suportam.

ÂÂRealizar uma análise PACT de uma situação complexa é


uma maneira útil e completa de delimitar um problema
de design.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre o que são considerados dispositivos de entra-
da:
74   Design de Interação

(  ) Teclado.

(  ) Mouse.

(  ) Monitor.

(  ) Caixas de Som.

2) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como correta sobre o que é um TrackBall:

(  ) Um sistema de rastreamento de visitas ao site.

( ) 
Uma referência circular dentro do site, impedindo o
bom funcionamento.

(  ) Um Dispositivo de Saída de dados.

(  ) Um dispositivo apontador similar a um mouse virado de


costas.

3) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre o que são considerados dispositivos de saída:

(  ) Impressora.

(  ) Mouse.

(  ) Teclado.

(  ) Caixa de Som.

4) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como correta sobre o que são os Disposi-
tivos Hápticos.

(  ) Dispositivos que imprimem objetos em 3D.


Capítulo 5   PACT – Tecnologias   75

(  ) Dispositivos que permitem criar hologramas.

(  ) Dispositivos que acionam sensores por aproximação.

(  ) Dispositivos que têm relação com a sensação de toque.

5) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como correta sobre a principal caracterís-
tica dos feeds RSS:

(  ) Atualizar de maneira automática o conteúdo de um site.

( ) Direcionar as solicitações do cliente para um servidor


central.

(  ) Reduzir os problemas de interação com o uso da tecno-


logia Push.

(  ) O controle da quantidade de dados armazenados em


um local único.

Gabarito:
1) V, V, F, F

2) Quarta correta

3) V, F, F, V

4) Quarta correta

5) Primeira correta
Carla Andrea Lopes Allegretti

Capítulo 6

Personas e Cenários
Capítulo 6   Personas e Cenários   77

Introdução

Personas são personagens fictícios criados para definir o públi-


co-alvo, ou seja, os usuários do produto ou sistema interativo.
Os Cenários são situações hipotéticas de utilização, pelas Per-
sonas, desse produto ou sistema interativo.

1 Personas

Independentemente da natureza do projeto de design, a aná-


lise do Público-Alvo é indispensável, já que será esse público
o consumidor do produto. Segundo a designer e professora
Cláudia Facca, do Instituto Mauá de Tecnologia, em São Cae-
tano do Sul – SP, devemos definir sobre o público alvo:

1. QUEM é o público do produto.

2. ONDE o produto será usado.

3. O QUE o produto deve fazer.

4. POR QUE as pessoas precisam do produto.

5. QUANDO o produto será usado.

6. COMO o produto será usado.

Para responder essas questões sobre o público-alvo e, em


vez de tentar projetar para todos os públicos, os designers utili-
zam as PERSONAS para focar um público-alvo mais específico
do produto.
78   Design de Interação

PERSONAS são, continua Facca (2012), personagens


fictícios criados para representar os diferentes tipos de usuá-
rio dentro de um alvo demográfico, atitude e/ou comporta-
mento definido, que poderia utilizar um produto ou serviço
de um modo similar. O termo PERSONA é usado comu-
mente em aplicações on-line e tecnológicas como parte de
um processo de design centrado no usuário, no intuito de
perceber as verdadeiras necessidades e preocupações dos
usuários reais. 

1.1 Quais as vantagens de se usar PERSONAS?


As personas, além de habilitar o designer a perceber as verda-
deiras necessidades e preocupações dos usuários reais, tam-
bém servem para comunicar as características do usuário de
maneira sintética e fácil de ser compreendida.

Ainda, uma vantagem em se utilizar de personas, e quem


sabe a sua maior, é a capacidade de trazer um rosto humano
para dados fatuais.

A seguir, temos um painel semântico com a persona Penny


ao centro.
Capítulo 6   Personas e Cenários   79

Figura 1  Exemplo de Persona.


Adaptado: <http://www.smartinsights.com/marketplace-analysis/customer-analy-
sis/web-design-personas/>

1.2 Como criar PERSONAS?


Segundo Facca (2012), antes de criar o perfil de uma persona,
deve-se identificar o consumidor ou o usuário ideal para o
produto. A persona deve representar o perfil médio ou os perfis
extremos dos usuários, podendo ser desenvolvido mais de um
personagem para o mesmo produto.

Para criar o perfil de uma PERSONA, deve-se montar uma


espécie de ficha, contendo:
80   Design de Interação

1. Foto e nome de uma pessoa.

2. Uma frase ou slogan que capture a personalidade dessa


pessoa, como, por exemplo, “Leonardo Silva, o empreen-
dedor inovador”.

3. Dados demográficos (sexo, idade, estado civil, família,


onde reside a pessoa).

4. Nível de educação.

5. Perfil profissional.

6. Histórico pessoal.

7. Aspectos gerais do estilo de vida.

8. Valores e atitudes.

9. Motivação.

10. Expectativas.

11. Necessidades.

12. Elementos do contexto de utilização do serviço/produto.

13. Cenário de uso.


Capítulo 6 Personas e Cenários 81

Além dos itens listados, o desenvolvimento de uma narrati-


va ajuda a fazer as personas mais convincentes.

Veja na figura a seguir um exemplo de perfil de persona.

Figura 2 Exemplo de perfil de Persona.


Fonte: <http://chocoladesign.com/criando-personas-no-design-de-produto>
82   Design de Interação

Figura 3  Exemplo de perfil de Persona.


Fonte: <http://chocoladesign.com/criando-personas-no-design-de-produto>
Capítulo 6   Personas e Cenários   83

2 Cenários com personas

Segundo Frederick van Amstel, editor do blog Usabilidoido,


CENÁRIOS são descrições de legítimas situações hipotéticas
em que são colocadas pessoas que interessam ao projeto. Essa
técnica é usada de maneiras muito diferentes, para auxiliar em
uma decisão crucial de projeto, para avaliar as características
do projeto ou para demonstrar as características do artefato
projetado em uso etc.

O que se segue a partir daqui, nessa frase, “suponha que


o usuário faça isso...”, trata-se de um cenário, completa van
Amstel (2014).

Cenários muito desconexos da realidade, fantasiosos, são


interessantes no início de projeto, quando o conceito do ar-
tefato ainda está em questão, mas nas demais etapas de de-
senvolvimento, é preciso estar cada vez mais conectado com
a realidade, com a prática de uso. Assim como melhor que
usar um usuário genérico em um cenário é utilizar um usuário
definido, como uma PERSONA, por exemplo.

Podemos criar o seguinte cenário com a persona chamada


Mariana, que é contadora:

Mariana precisa fazer uma planilha com cálculos comuns,


mas está em uma sala com várias outras pessoas falando alto.
Por isso ela não consegue se concentrar direito e ainda preci-
sa terminar o trabalho logo. Então ela procura alguma forma
automatizada de inserir os dados. Por sorte, o software possui
84   Design de Interação

assistentes para inserir dados passo a passo e fazer os cálculos


mais básicos. A ajuda do software resolve o problema, embora
o processo todo tenha demorado mais do que se ela tivesse
feito como sempre faz, manualmente.

Van Amstel (2014) alerta que cenários não se baseiam


em dados reais, são apenas imaginados, são prognósticos.
No entanto, se criados para dar vida às personas, eles não
levarão a concepções de projeto equivocadas. Se a persona
estiver embasada na realidade, o cenário também estará e,
consequentemente, a situação prevista terá alta probabilidade
de se concretizar. Ainda, durante os testes de usabilidade com
clientes reais, os cenários podem ser reaproveitados para criar
tarefas específicas e verificar se os usuários conseguem, de
fato, resolver os problemas.

2.1 Quais as vantagens de se usar CENÁRIOS?


Conforme Benyon (2011), cenários são histórias sobre pes-
soas realizando atividades em contextos, usando tecnologias.
Recentemente, o design baseado em cenários emergiu como
uma abordagem para o design de sistemas interativos. Carrol
(apud Benyon, 2011) defende o design baseado em cenários e
argumenta que eles são eficazes para lidar com cinco proble-
mas-chave do design, conforme mostra a figura:
Capítulo 6   Personas e Cenários   85

Figura 4  Problemas-chave do design.


Adaptado: BENYON, D. Interação humano-computador. São Paulo: Pearson, 2011. p. 34

Um exemplo do uso de personas em cenários, descrito por


Benyon (2011):

Para uma nova forma de interação, chamada Companion,


interfaces personalizadas que conhecem os seus “donos” e
adaptam a interação aos seus interesses e estados emocionais,
foram desenvolvidas personas e cenários, no intuito de investi-
gar sobre seu conceito. Uma Companion para lidar com fotos
digitais ajudaria organizando, buscando e editando imagens,
além de, talvez, conversar sobre fotos com seu dono e até
lembrar de eventos e pessoas.
86   Design de Interação

Agora, imagine o cenário no qual uma pessoa tem uma


coleção de fotografias e precisa achar uma, especificamente.
Acompanhe na figura a seguir:

Figura 5  Exemplo de Cenário.


Adaptado: BENYON, D. Interação humano-computador. São Paulo: Pearson,
2011. p. 36
Capítulo 6   Personas e Cenários   87

Recapitulando

Neste capítulo, vimos:

ÂÂPERSONAS são personagens fictícios criados para re-


presentar os diferentes tipos de usuário dentro de um
alvo demográfico, atitude e/ou comportamento defini-
do, que poderia utilizar um produto ou serviço de um
modo similar.

ÂÂOs designers utilizam as PERSONAS no intuito de focar


um público-alvo mais específico do produto.

ÂÂCENÁRIOS são histórias sobre pessoas realizando ativi-


dades em contextos, usando tecnologias.

ÂÂCENÁRIOS são utilizados para criar tarefas específicas e


verificar se os usuários conseguem, de fato, resolver os
problemas possíveis do uso da tecnologia.

Referências

AMSTEL, Frederick van. Personas e cenários para antecipar


o futuro. Disponível em: <http://www.usabilidoido.com.
br/personas_e_cenarios_para_antecipar_o_futuro_.html>.
Acesso em: 24/10/2014.

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.
88   Design de Interação

FACCA, Cláudia. Criando PERSONAS no design de produto.


Disponível em: <http://chocoladesign.com/criando-per-
sonas-no-design-de-produto> Acesso em: 24/10/2014.

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre PERSONAS:

(  ) PERSONAS ajudam na identificação de um público-alvo


mais específico.

(  ) As PERSONAS são utilizadas no intuito de perceber as


verdadeiras necessidades e preocupações dos usuários
reais do produto ou sistema interativo.

(  ) PERSONAS trazem um rosto humano para dados fatuais.

(  ) PERSONAS comunicam as características do usuário de


maneira sintética.

2) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre como criar PERSONAS:

(  ) A PERSONA deve representar o perfil médio ou os perfis


extremos dos usuários.

( ) Para criar o perfil de uma PERSONA, deve-se montar


uma espécie de ficha, contendo dados reais de pessoas
concretas, buscados anteriormente por meio de ques-
tionários.
Capítulo 6   Personas e Cenários   89

(  ) Fotografia, Nível de educação, Perfil profissional e His-


tórico pessoal são dados que devem constar na ficha de
criação de PERSONAS.

(  ) Narrativas, ou seja, contar uma história sobre esse per-


sonagem, ajuda a tornar as PERSONAS mais convin-
centes.

3) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como verdadeira, sobre Cenários:

( ) 
CENÁRIOS precisam ser desconexos da realidade,
para serem eficazes.

( ) CENÁRIOS permitem situações hipotéticas de uso do


produto ou sistema interativo, que não permitem avaliar
suas características e possíveis dificuldades no seu ma-
nejo, encontradas pelo usuário.

(  ) M elhor que usar um usuário genérico em um CE-


NÁRIO é utilizar um usuário definido, como uma
PERSONA.

(  ) CENÁRIO é uma ferramenta de Avaliação dos produtos


ou sistemas interativos.

4) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como incorreta:

(  ) PERSONAS e CENÁRIOS são amplamente utilizados em


projetos com foco no usuário.

(  ) CENÁRIOS permitem resolver problemas de design.


90   Design de Interação

(  ) O design baseado em CENÁRIOS emergiu recentemen-


te como uma abordagem para o design de sistemas in-
terativos.

(  ) PERSONAS são reais, porém os CENÁRIOS são sempre


fantasiosos.

5) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre quem são as PERSONAS:

(  ) São pessoas reais perguntadas em entrevistas ou pes-


quisas, a fim de avaliar o projeto de design.

(  ) São avatares de usuários reais.

(  ) São os usuários envolvidos no processo do sistema ou


produto interativo.

(  ) São representações dos prováveis usuários do produto


ou sistema interativo.

Gabarito:
1) V, V, V, V

2) V, F, V, V

3) Terceira correta

4) Quarta incorreta

5) F, F, F, V
Carla Andrea Lopes Allegretti

Capítulo 7

Usabilidade,
Aceitabilidade e
Acessibilidade
92   Design de Interação

Introdução

Segundo Benyon (2011), a usabilidade sempre foi o objetivo


da interação humano-computador. Porém, com o aumento das
pessoas, atividades, contextos e tecnologias, a acessibilidade,
hoje, também é um dos objetivos do design de interação. Jun-
ta-se isso às novas abordagens de design e a aceitabilidade
torna-se um ponto importante na adequação do contexto de
uso do artefato ou sistema interativo.

1 Usabilidade

Um dos principais objetivos do Design de Interação é a


Usabilidade. Segundo o dicionário Priberam da Língua Por-
tuguesa, usabilidade, por definição geral, é a característi-
ca do que é simples e fácil de usar. Shackel (apud Benyon,
2011) diz que a definição original de usabilidade é de que
os sistemas devem ser fáceis de usar e de aprender, flexíveis
e devem despertar nas pessoas uma boa atitude. As metas da
usabilidade, por sua vez, são vistas hoje, essencialmente, com
a preocupação, com a eficiência e eficácia dos sistemas.

Um sistema com alto grau de usabilidade, segundo Benyon


(2011), terá as seguintes características:

1. Será eficiente no sentido de que as pessoas poderão fazer


coisas mediante uma quantidade adequada de esforço.
Capítulo 7   Usabilidade, Aceitabilidade e Acessibilidade   93

2. Será eficaz no sentido de que conterá as funções e o con-


teúdo de informações adequadas e organizadas de forma
apropriada.

3. Será fácil aprender como fazer as coisas e será fácil lem-


brar de como fazê-las após algum tempo.

4. Será seguro de operar na variedade de contextos em que


será usado.

5. Terá um alto grau de utilidade no sentido de que fará as


coisas que as pessoas querem que sejam feitas.

Ainda, uma questão fundamental para a usabilidade é que


frequentemente a tecnologia atrapalha as pessoas e o que elas
querem fazer. Se compararmos o uso de um dispositivo inte-
rativo, como um controle remoto, ao uso de um martelo ou a
dirigir um carro, veremos o assunto com mais clareza. Muitas
vezes, quando estamos usando um sistema interativo, estamos
conscientes da tecnologia, pois temos que parar e apertar bo-
tões. Quando estamos martelando ou dirigindo, concentra-
mo-nos na atividade em si e não na tecnologia. A tecnologia
é algo “presente ao alcance”.

E como explicar usabilidade para alguém que nunca ouviu


falar disso?!

A seguir, segue um trecho da entrevista do professor Már-


cio Oliverio, da UNIP, feita ao designer Frederick van Amstel,
editor do blog Usabilidoido, explicando usabilidade de uma
maneira bem simples.
94   Design de Interação

Marcio: O que é usabilidade?

Frederick: Usabilidade é sinônimo de facilidade de uso.


Se um produto é fácil de usar, o usuário tem maior pro-
dutividade: aprende mais rápido a usar, memoriza as
operações e comete menos erros.

M: Onde ela é aplicada?

F: Sempre que houver uma interface, ou seja, um ponto


de contato entre um ser humano e um objeto físico (ex.:
cafeteira) ou abstrato (ex.: software), podemos observar
a usabilidade que esse objeto oferece.

Historicamente, o termo usabilidade surgiu como uma


ramificação da ergonomia voltada para às interfaces
computacionais, mas acabou se difundindo para outras
aplicações.

M: Como a usabilidade pode ajudar pessoas com ne-


cessidades especiais, terceira idade e problemas cogni-
tivos?

F: Usabilidade é uma medida relativa. O mouse é fácil


de usar, mas para quem? Uma trackball pode ser mais
fácil de usar por quem tem deficiência motora ou sofre
de LER. A interface ideal é aquela que está adaptada
às necessidades de seus usuários. O usuário de tercei-
ra idade pode precisar de textos com letras maiores e
o usuário com desvantagem cognitiva pode precisar de
alguns textos de ajuda a mais.

M: As empresas costumam investir na usabilidade?


Capítulo 7   Usabilidade, Aceitabilidade e Acessibilidade   95

F: No Brasil, poucas empresas reconhecem o valor da


usabilidade. A maioria prefere investir em uma campa-
nha publicitária que faça o produto parecer fácil do que
realmente torná-lo fácil através do envolvimento do usu-
ário durante seu projeto.

Acredito que isso seja consequência da visão míope do


empresariado brasileiro, que sobrevaloriza resultados
em curto prazo. Ao invés de estabelecer uma relação
duradoura com seus clientes, oferecendo um produto
ou serviço de alto nível, eles preferem obter o máximo
de lucro no menor tempo possível. Em última análise, é
fruto da consciência de elite predatória, que se estabele-
ceu nessas terras desde que os portugueses chegaram...

(AMSTEL, Frederick van. Afinal, o que é usabilida-


de? Disponível em: <http://www.usabilidoido.com.br/
afinal_o_que_e_usabilidade.html>. Acesso em: 18 de
dezembro de 2014.)

2 Aceitabilidade

No dicionário Michaelis, a palavra aceitação é sinônima de


aprovação e cita como exemplo a frase “ter boa aceitação
entre os consumidores”. A Aceitabilidade, segundo Benyon
(2011), trata de encaixar as tecnologias na vida das pessoas
e, diferente da usabilidade, só pode ser entendida no contexto
de uso.

As características-chaves da aceitabilidade são:


96   Design de Interação

1. Política

O design é politicamente aceitável? As pessoas confiam


nele? Em muitas organizações, novas tecnologias foram
introduzidas simplesmente por motivos econômicos, sem
considerar como as pessoas poderiam se sentir a respei-
to e como o emprego e a vida dessas pessoas poderia
mudar. No ambiente mais amplo, os direitos humanos
podem ser ameaçados por mudanças nas tecnologias.

2. Conveniência

Designs que são desajeitados ou que forçam as pesso-


as a fazer coisas podem se revelar inaceitáveis. O bom
design deve se encaixar sem esforço em uma situação.
Hoje, muita gente envia documentos eletronicamente,
mas há um grande número de pessoas que não acei-
ta a leitura de documentos on-line. Elas imprimem os
documentos, pois assim eles são mais convenientes de
carregar e ler.

3. Hábitos culturais e sociais

Se a aceitabilidade política se preocupa com as estrutu-


ras e os princípios do poder, os hábitos sociais e culturais
preocupam-se com a maneira como as pessoas gostam
de viver. Por exemplo, é falta de educação perturbar os
outros. O e-mail “spam” se tornou tão inaceitável que
algumas empresas desistiram dos e-mails como um todo.

4. Utilidade
Capítulo 7   Usabilidade, Aceitabilidade e Acessibilidade   97

Isso vai além das noções de eficiência e eficácia e se refere


à utilidade no contexto. Por exemplo, muitas pessoas consi-
deram a função agenda de seu PDA perfeitamente usável,
mas não suficientemente útil no contexto do dia a dia.

5. Economia

Há muitas questões econômicas que tornam uma tecno-


logia aceitável ou não, o preço é a mais óbvia delas, bem
como a relação custo/benefício. Mas as questões econô-
micas vão além conforme novas tecnologias podem mu-
dar completamente a maneira como as empresas funcio-
nam e ganham dinheiro. Um novo “modelo de negócios”
geralmente faz parte da aceitabilidade econômica.

3 Acessibilidade

O acesso aos espaços físicos para pessoas deficientes é, há


muito tempo, um requisito ético e legal importante. E isso é
cada vez mais verdadeiro também para os espaços de infor-
mação, conforme Benyon (2011). Acessibilidade, segundo
o dicionário Aurélio, é a qualidade daquilo que é acessível,
ou seja, acesso fácil para espaços físicos ou compreensível e
inteligível para espaços virtuais. Como nos espaços físicos, a
acessibilidade aos espaços virtuais também são, agora, am-
parados por leis e diretrizes no sentido de que todos tenham
acesso às informações transmitidas por meio das tecnologias
dos softwares.
98   Design de Interação

Figuras 4 e 5  Convenção da ONU sobre os Direitos da Pessoa com


Deficiência.
Fonte: <http://pt.slideshare.net/SustentavelSC/2012-02-14-cecop>
Capítulo 7   Usabilidade, Aceitabilidade e Acessibilidade   99

As pessoas podem ser excluídas do acesso aos sistemas


interativos de várias maneiras, conforme Benyon (2011):

1. Fisicamente

Por exemplo, um caixa eletrônico pode ser alto demais


para alguém em uma cadeira de rodas.

2. Conceitualmente

Por não compreender as instruções do sistema.

3. Economicamente

Por não ter meios para comprar uma tecnologia essen-


cial.

4. Exclusão cultural

Por exemplo, usar uma metáfora de futebol americano


na construção de um dispositivo interativo irá excluir
aqueles que não entendem do jogo.

5. Exclusão social

Por exemplo, quando o equipamento interativo só estiver


disponível para um determinado grupo social.

Recapitulando

Neste capítulo, vimos:

ÂÂUsabilidade é sinônimo de facilidade de uso do sistema


ou artefato interativo.
100   Design de Interação

ÂÂAcessibilidade diz respeito à remoção de barreiras que


excluiriam, totalmente, pessoas de usar o sistema ou ar-
tefato interativo.

ÂÂ Aceitabilidade se refere ao que contribui em um produto ou


sistema interativo, para que o usuário simpatize com ele.

Referências

AMSTEL, Frederick van. Afinal, o que é usabilidade? Dis-


ponível em: <http://www.usabilidoido.com.br/afinal_o_
que_e_usabilidade.html>. Acesso em: 18/09/2014.

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Dicionário Eletrônico Michaelis – UOL

Dicionário Miniaurélio Eletrônico versão 5.12.

“usabilidade”, in Dicionário Priberam da Língua Portuguesa


[em linha], 2008-2013, http://www.priberam.pt/DLPO/
usabilidade [consultado em 14-09-2014].

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre usabilidade:
Capítulo 7   Usabilidade, Aceitabilidade e Acessibilidade   101

( ) Usabilidade é o único objetivo da interação humano-


-computador.

(  ) Usabilidade é a característica do que é simples e fá-
cil de usar.

(  ) As metas da usabilidade são, essencialmente, a eficiên-


cia e eficácia dos sistemas.

(  ) A adequação do contexto de uso do artefato ou sistema


interativo também é uma meta de usabilidade.

2) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre as características de um sistema com alto
grau de usabilidade:

(  ) Será eficiente no sentido de que as pessoas poderão


fazer coisas mediante uma quantidade adequada de
esforço.

(  ) Terá um alto grau de utilidade no sentido de que irá


operar em funções diferentes, como um aparelho mul-
tifuncional.

(  ) Será fácil aprender como fazer as coisas e será fácil


lembrar de como fazê-las após algum tempo.

(  ) Será eficaz no sentido de ser ágil e rápida.

3) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre aceitabilidade:

(  ) A palavra aceitação é sinônima de aprovação.


102   Design de Interação

(  ) Aceitabilidade inclui a probabilidade de compra de um


produto.

(  ) A aceitabilidade faz parte das modernas abordagens do


design.

(  ) O preço do produto influencia na aceitabilidade.

4) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre acessibilidade:

(  ) A acessibilidade aos espaços virtuais também são am-


parados por leis e diretrizes.

(  ) Acessibilidade quer dizer poder ter acesso ao espaço


virtual, no contexto dos sistemas e artefatos interativos.

(  ) Acessibilidade é uma exclusividade dos deficientes físi-


cos.

(  ) Acessibilidade sempre foi um objetivo dos sistema inte-


rativos, assim como a usabilidade.

5) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre as muitas maneiras com que as pessoas po-
dem ser excluídas do acesso aos sistemas interativos:

(  ) Economicamente.

(  ) Fisicamente.

(  ) Conceitualmente.

(  ) Psicologicamente.
Capítulo 7   Usabilidade, Aceitabilidade e Acessibilidade   103

Gabarito:
1) F, V, V, F

2) V, F, V, F

3) V, V, V, V

4) V, V, F, F

5) V, V, V, F
Carla Andrea Lopes Allegretti

Capítulo 8

Design para a
Experiência
Capítulo 8   Design para a Experiência   105

Introdução

Utilizamos a palavra Design, comumente, tanto para nos refe-


rirmos a um projeto como para nos referirmos a um desenho.
Porém, segundo Maldonado (1961, apud Quaresma, 2014),
Design é uma atividade projetual que consiste em determinar
as propriedades formais dos objetos a serem produzidos indus-
trialmente. Por propriedades formais, entende-se não só as ca-
racterísticas exteriores, mas, sobretudo, as relações estruturais
e funcionais que dão coerência a um objeto, tanto do ponto
de vista do produtor quanto do usuário, continua ele.

Então, na verdade, o desenho em si, o traçado ou a repre-


sentação, é uma etapa no desenvolvimento desse projeto.

E, normalmente, a atividade de desenhar, riscar, traçar,


encontra-se na etapa de Geração de Alternativas, da metodo-
logia de projeto.

1P
 rincípios de design para sistemas
interativos

No decorrer dos anos, foram desenvolvidos muitos princípios


para o bom design de sistemas interativos. Esses princípios
orientam o designer quanto às características-chaves de um
design apropriado para produtos interativos e o sensibilizam
quanto a importantes questões do projeto.

Os princípios de design para sistemas interativos são regras


aplicadas com o objetivo de ajudar o usuário a acessar, apren-
der e memorizar o sistema.
106   Design de Interação

Conforme Benyon (2011), os princípios do bom design de


sistemas interativos são 12 e estão divididos em 4 grupos:

i. Grupo relacionado com a facilidade de aprendizagem


– princípios de 1 a 4.

ii. Grupo relacionado com a usabilidade – princípios de


5 a 7.

iii. Grupo relacionado com a segurança – princípios 8 e


9.

iv. Grupo relacionado com a adaptabilidade – princípios


de 10 a 12.

Princípio 1 – Visibilidade

Garanta que as coisas sejam visíveis, pois é mais fácil


reconhecer uma função do que lembrar dela.

Princípio 2 – Consistência

Sistemas semelhantes tem métodos padrões de trabalho.


Mantenha-os.

Princípio 3 – Familiaridade

Use linguagem e símbolos com os quais o futuro usuário


está familiarizado.

Princípio 4 – Affordance

Por exemplo, desenhe botões que se pareçam com bo-


tões para que as pessoas apertem.

Princípio 5 – Navegação
Capítulo 8   Design para a Experiência   107

Proporcione a boa movimentação pelo sistema, através


de mapas e sinais orientadores.

Princípio 6 – Controle

Deixe claro aquilo que o sistema faz e aquilo que não


faz.

Princípio 7 – Retorno

Retorne rapidamente para o usuário saber que efeito


sua ação causou.

Princípio 8 – Recuperação

Facilite o retorno da ação errada ou por engano.

Princípio 9 – Restrições

Impeça o usuário de cometer erros graves sem retorno


ou que danifiquem o sistema.

Princípio 10 – Flexibilidade

Propicie a personalização do sistema para cada usuário


de diferentes níveis.

Princípio 11 – Estilo

Projete um sistema atraente, através de referências esté-


ticas elegantes.

Princípio 12 – Sociabilidade

Um sistema interativo deve ser cortês, amistoso e agra-


dável.
108   Design de Interação

2D
 esign para a experiência: além da
usabilidade

No intuito de atrair e manter os clientes e obter lucro, os siste-


mas interativos devem ser mais que funcionais e/ou ter o con-
teúdo adequado: as pessoas precisam gostar de usá-los. Para
que isso aconteça, os sistemas interativos devem proporcionar
ao usuário ótimas experiências, sendo envolventes e estetica-
mente agradáveis.

A área do design de interação que se ocupa em criar expe-


riências de qualidade é comumente chamada de UX ou Experi-
ência do Usuário ou do Cliente (UX, User Experience, do inglês).

O design para a experiência tem três pontos principais:

Envolvimento
O envolvimento garante que a interação flua. Um meio é en-
volvente quando atrai as pessoas, cerca toda a atividade e
estimula a imaginação. Alguns de seus elementos-chave são:
a identificação do cliente com o produto, a personalização do
produto, a história do produto e a imersão propiciada pelo
produto.

Design para o prazer


Segundo o dicionário Aurélio, prazer significa sentimento de
alegria, satisfação. Conforme Jordan (apud Benyon, 2011), no
contexto dos produtos interativos, o design para o prazer con-
Capítulo 8   Design para a Experiência   109

tribui para benefícios emocionais, hedonistas e práticos; e é


tão importante quanto à usabilidade desse produto. O design
para o prazer significa para o usuário ter o produto, usá-lo e –
talvez – ser visto com ele.

Tiger (1992, apud Benyon, 2011), argumenta que há qua-


tro dimensões ou aspectos do prazer:

1. Fisioprazer

Preocupa-se com o corpo e os sentidos. Por exemplo,


a sensação agradavelmente firme, mas responsiva, de
tocar um teclado bem desenhado.

2. Socioprazer

Surge do relacionamento com os outros. Por exemplo,


as mensagens de texto que possibilitam a expansão da
comunicação.

3. Psicoprazer

É o prazer cognitivo ou emocional. Por exemplo, apren-


der a usar um novo modelo de telefone móvel, diferente
e mais complexo do que o anterior.

4. Ideoprazer

Refere-se aos valores das pessoas e suas aspirações. Por


exemplo, comprar um dispositivo mais caro em função
de um design criterioso e uma maior credibilidade do
fornecedor.
110   Design de Interação

Técnicas do design para o prazer


Analisar os produtos existentes é uma boa maneira de pensar
nos diferentes aspectos do prazer. Mas como usar essas ideias
para gerar novos conceitos de design? Um design focado no
prazer, diz Benyon, será mais adequado em alguns projetos do
que em outros, e delimitado isso podemos decidir com o que
encantar o cliente.

O prazer é um sentimento que varia de pessoa para pes-


soa. Então, a construção de uma Persona é uma técnica que
ajuda a refinar o público-alvo e personificar os quatro pra-
zeres. A persona de nome Mary, por exemplo, foi construída
para personificar mulheres instruídas e alegres que poderiam
comprar e usar determinado produto.

A tabela a seguir traz um perfil parcial dos prazeres de Mary


que pode ser usado para analisar que pontos do produto com-
binam com ela.

Figura 1  Os prazeres da Persona Mary.


Fonte: Benyon (2011)
Capítulo 8   Design para a Experiência   111

Outra técnica de design focada no prazer é a Lista de Veri-


ficação. Implica montar conjuntos de três ou quatro afirmações
para cada um dos quatro prazeres. Por exemplo: materiais re-
cicláveis me agradam – ideoprazer. Em um segundo momento,
essa lista de verificação é cruzada com a lista de características
do produto, identificando se elas seriam ou não apreciadas.

Ainda, a Laddering é outra técnica utilizada para o design no


prazer, derivada da pesquisa de mercado e indicada para explo-
rar o Ideoprazer. A ideia é que a partir da aceitação ou rejeição
de um produto, uma série de “porquês” sejam perguntados, até
que as respostas se esgotem, revelando assim a motivação prin-
cipal de aceitar ou não esse produto. Veja o exemplo a seguir:

Figura 2  Laddering.
Fonte: Benyon (2011)
112   Design de Interação

3O
 Design para o EU – a teoria do apego
ao produto

Zimmermam (2009, apud Benyon, 2011) discute como levar


a teoria do apego ao produto para o design de interação. O
apego ao produto tem a ver com os sentimentos que as pesso-
as têm pelos produtos e como eles adquirem significados para
elas. O “design para o eu” parte da perspectiva de as pessoas
perceberem a si mesmas a partir da interação com o produto.

Zimmerman, por meio de análises de produtos, chegou a


seis “construtos delimitadores” que devem estar presentes du-
rante todo o processo do design para o eu:

1. Suporte do produto para os diferentes papéis que as pes-


soas exercem na vida.

2. Controle das pessoas sobre o produto.

3. Atendimento das reais necessidades das pessoas.

4. Evitar que as pessoas cometam erros ou entreguem-se aos


seus maus hábitos.

5. Favorecimento das metas das pessoas.

6. Participação do produto em rituais importantes da vida das


pessoas.
Capítulo 8   Design para a Experiência   113

4 Estética

A Estética é uma área de estudos preocupada com a apre-


ciação humana da beleza. De um modo mais descompromis-
sado, associamos a palavra estética com os termos belo ou
harmonioso.

A estética dos sistemas interativos é um fator relevante do


design para a experiência. Lavie e Tracktinsky (2004, apud
Benyon, 2011) dividem a estética dos sistemas interativos em:

1. Estética Clássica – calcada em princípios formais (como a


simetria) e do design gráfico (como organização e clareza); e

2. Estética Expressiva – focada na originalidade e em efeitos


especiais e afirmam: o que é belo é usável.

Recapitulando

Neste capítulo, vimos:

ÂÂO desenho em si, o traçado ou a representação, é uma


etapa no desenvolvimento do projeto de design.

ÂÂDesign é uma atividade projetual que consiste em de-


terminar as propriedades formais dos objetos a serem
produzidos industrialmente.

ÂÂPrincípios de design para sistemas interativos são regras


aplicadas com o objetivo de ajudar o usuário a acessar,
aprender e memorizar o sistema.
114   Design de Interação

ÂÂDesign para a Experiência significa gostar de usar o pro-


duto ou sistema interativo.

ÂÂO Design para o Prazer é um pilar do Design para a Ex-


periência e contribui para benefícios emocionais, hedo-
nistas e práticos, tão importantes quanto a usabilidade
do produto.

ÂÂO Design para o EU tem a ver com os sentimentos que


as pessoas têm pelos produtos e como eles adquirem
significados para elas.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Dicionário Miniaurélio Eletrônico versão 5.12.

QUARESMA, Débora Maria de Macedo. Introdução ao de-


sign gráfico. Canoas: Ulbra, 2014.

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre os princípios do bom design de sistemas inte-
rativos:
Capítulo 8   Design para a Experiência   115

(  ) As Restrições são aquilo que o sistema não consegue


operar.

(  ) A Recuperação recupera dados perdidos pelo usuário.

(  ) A Affordance determina que as formas devem sugerir


de fato como elas devem ser utilizadas.

(  ) O Controle deixa claro aquilo que o sistema faz e aqui-


lo que não faz.

2) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre Design para Experiência:

(  ) O Design para a Experiência não contempla a usabili-


dade.

(  ) Ser envolvente e esteticamente agradável faz parte do


escopo da usabilidade.

(  ) A área do design de interação que se ocupa em criar ex-


periências de qualidade é comumente chamada de UX.

( ) Contar a história do produto ou do sistema interativo


envolve o usuário e faz parte do Design para Experiên-
cia.

3) Leia com atenção as afirmações a seguir sobre Design


para o Prazer e marque apenas uma alternativa como in-
correta:

(  ) Design para o Prazer significa, para o usuário, ter o


produto, usá-lo e talvez ser visto com ele.
116   Design de Interação

(  ) O Design para o Prazer está intimamente ligado ao he-


donismo.

(  ) O Design para o Prazer é uma abordagem de design


que só contempla o usuário, não reconhecendo outros
aspectos do projeto como relevantes.

(  ) Comprar um objeto ou sistema interativo em função


de um design criterioso e uma maior credibilidade do
fornecedor é denominado Socioprazer.

4) Leia com atenção as afirmações a seguir sobre Design


para o EU e marque apenas uma alternativa como correta:

(  ) É a produção de um artefato interativo exclusivo, per-


sonalizado.

(  ) É uma produção limitada de artefato ou sistema intera-


tivo focada em uma Persona específica.

(  ) Não atende às reais necessidades das pessoas, e sim


suas fantasias.

(  ) Abordagem de design que objetiva o apego do usuário


ao produto ou sistema interativo.

5) Leia com atenção as afirmações a seguir sobre Estética e


marque apenas uma alternativa como correta:

(  ) A estética dos sistemas interativos é um fator irrelevante


para o usuário, que preza sempre pela facilidade de
uso.

(  ) A home-page do site a seguir está associada à Estética


Expressiva.
Capítulo 8   Design para a Experiência   117

Fonte: <http://www.chanel.com>

(  ) Se é belo, não é usável.

(  ) A Estética Clássica é calcada em princípios formais de


simetria e do design gráfico, como organização e cla-
reza.

Gabarito:
1) F, F, V, V

2) F, F, V, V

3) Incorreta c

4) Quarta correta

5) Quarta correta
Carla Andrea Lopes Allegretti

Capítulo 9
?

Antecipação
Capítulo 9   Antecipação   119

Introdução

Segundo Benyon (2011), a antecipação preocupa-se em tor-


nar as ideias visíveis, ela traz à vida as ideias abstratas. Para
tanto, nessa etapa, utilizam-se os protótipos – modelos físi-
cos, dos mais simples – esboços, modelos de papelão – aos
mais complexos – um pedaço de metal prensado e moldado,
uma parte de um software.

A antecipação é necessária em um projeto de sistemas in-


terativos para representar o trabalho de design para a equipe
e para o cliente. Para um design centrado no humano a ante-
cipação é importante, pois permite ao designer ver o produto
ou sistema a partir da perspectiva de outros.

1 Técnicas básicas de prototipagem

A antecipação, como sugere o próprio termo, prevê possíveis


soluções. Para tanto, utiliza-se de técnicas de prototipagem,
algumas estão descritas a seguir:

1.1 Esboços
Ideias e pensamentos podem ser rapidamente materializados
a partir deles.
120   Design de Interação

Figura 1  Esboços.
Fonte: <http://www.agilemodeling.com/artifacts/uiPrototype.htm>

1.2 Storyboards
Técnica que permite a representação de momentos-chave da
experiência interativa, em um estilo de desenho animado.

Figura 2  Storyboards para projetos de interação.


Fonte: Benyon (2011)
Capítulo 9   Antecipação   121

1.3 Mapas de navegação


Segundo Benyon (2011) a navegação é uma característica-
-chave para muitos sistemas e os mapas de navegação mos-
tram como as pessoas se movimentam pelo site ou aplicativo.

O objetivo do mapa de navegação é programar a experi-


ência que as pessoas terão com um site, por exemplo: cada
página do site é representada por uma caixa e todas as pá-
ginas que puderem ser acessadas através dela deve derivar
dessa primeira caixa.

Figura 3  Mapa de navegação de um site.


Fonte: Benyon (2011)

1.4 Protótipos hi-fi


Os protótipos hi-fi diferenciam-se dos anteriores por apresentar
interatividade: algo acontece se apertarmos um botão, mesmo
que a ação seja descrita pelo designer em uma nota de rodapé.
122   Design de Interação

Os protótipos hi-fi, diz Benyon (2011), são semelhantes ao


produto final em termos de aparência, mas não necessaria-
mente, de funcionalidade. São produzidos em softwares e são
úteis para testes de usabilidade.

Figura 4  Protótipo hi-fi de um mecanismo de busca.


Fonte: Benyon (2011)

1.5 Protótipos lo-fi


Protótipos lo-fi são protótipos geralmente feitos em papel. São
amplamente utilizados quando é necessária sua manipulação
por muitas pessoas.

Esses protótipos são parte do design participativo, ou seja,


explorar e avaliar ideias de design envolvendo os futuros usu-
ários na concepção e construção do produto.
Capítulo 9   Antecipação   123

1.6 Design participativo:


Design Participativo, segundo Frederick van Amstel, editor do
blog USABILIDOIDO, é uma abordagem utilizada há décadas em
diversas áreas – Arquitetura, Design de Produtos e pela própria
Engenharia de Software. É uma prática em que as pessoas influen-
ciadas pelo que está sendo projetado participam ativamente de
suas definições. No Design de Interação, essa abordagem come-
çou a ser utilizada para a arquitetura de sistemas na Escandinávia,
nos anos 70. A partir dos anos 90, algumas empresas produtoras
de tecnologias passaram a incluir o design participativo em seus
métodos para a pesquisa e desenvolvimento de produtos.

No processo de design participativo de um software, a in-


terface é apenas a ponta do iceberg, segue Amstel, o tema
principal das discussões são as possibilidades de uso do
software, ou seja, para que ele servirá, como será apropriado
para cada participante, qual será o impacto em suas vidas etc.
O Design de Interação pela abordagem participativa repre-
senta uma forma de implementar, na prática, como a área se
autodefine: projetar interações entre seres humanos.

Figura 5  Protótipo em papel de uma tela de mensagens para um centro


de comunicação.
Fonte: Benyon (2011)
124   Design de Interação

1.7 Protótipos em vídeo


Também chamados de “vídeo branistorming” ou “vídeo proto-
tipação”, o protótipo em vídeo é uma ferramenta importante
no processo do design participativo.

Um dos métodos de protótipos em vídeo consiste na cria-


ção de uma maquete física do produto. Então é feito um vídeo,
com um ator interagindo com o modelo que, aparentemente,
responde as ações do ator. Essa simulação é feita por um pro-
grama de animação.

2 Softwares utilizados na prototipagem

Para caracterizar a interação de um sistema, pode-se lançar


mão de qualquer ferramenta técnica: uma página em HTML,
uma tela construída com software do tipo VB (Visual Basic),
DELPHI, JAVA ou lâminas de PowerPoint – este último sendo
o preferido devido a sua simplicidade e capacidade de de-
monstrar o produto final em alta fidelidade, ainda que sem as
interatividades funcionais. O necessário é que sejam exibidas
as propriedades da interação, para testes e discussões.

A seguir, estão alguns exemplos de prototipagem em dife-


rentes softwares:
Capítulo 9   Antecipação   125

Figura 6  Exemplo de protótipo em HTML.


Fonte: <http://www.agilemodeling.com/artifacts/uiPrototype.htm>

Figura 7  Exemplo de protótipo em DENIM.


Fonte: <http://www.techrepublic.com/article/denim-may-be-the-rapid-web-proto-
typing-tool-youre-looking-for/>
126   Design de Interação

Figura 8  Exemplo de protótipo em SILK.


Fonte: <http://www.dgp.toronto.edu%2F~jsheng%2Fdoc%2FSketching.
ppt&h=LAQ H6fE yd&s=1>

Figura 9  Exemplo de protótipo em AXURE.


Fonte: <http://nuxabril.files.wordpress.com/2009/07/au-introduction_environment.gif>
Capítulo 9   Antecipação   127

Recapitulando

Neste capítulo, vimos:

ÂÂNa etapa de Antecipação, utilizam-se os protótipos –


modelos físicos, dos mais simples; esboços, modelos
de papelão – aos mais complexos; um pedaço de metal
prensado e moldado, uma parte de um software.
ÂÂEsboços, Storybords, Mapas de Navegação, Protótipos
hi-fi, Protótipos lo-fi e Protótipos em vídeo são técnicas
de prototipagem.
ÂÂDesign Participativo é uma prática em que as pessoas
influenciadas pelo que está sendo projetado participam
ativamente de suas definições.
ÂÂHTML, DENIM, SILK, AXURE são softwares utilizados na
prototipagem.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Dicionário Eletrônico Michaelis – UOL

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design


de interação. Porto Alegre: Bookman, 2005.

AMSTEL, Frederick van. Design partcicipativo no design de


interação e na web. Disponível em: <www.usabilidoido.
com.br/design_participativo_no_design_de_interacao_e_
na_web_20.html>. Acesso em: 18/09/2014.
128   Design de Interação

Atividades

1) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas, sobre a etapa de Antecipação:

(  ) A Antecipação torna as ideias abstratas visíveis através


dos protótipos.

(  ) Protótipos são modelos físicos que representam o traba-


lho de design para a equipe e para o cliente.

(  ) Esboços e Storyboards são normalmente feitos manual-


mente.

(  ) Os Protótipos hi-fi são normalmente feitos em progra-


mas específicos.

2) Leia com atenção as afirmações a seguir sobre os protóti-


pos hi-fi e marque apenas uma alternativa como incorreta:

(  ) São semelhantes ao produto final em termos de apa-


rência.

(  ) São semelhantes ao produto final em termos de funcio-


nalidade.

(  ) Diferenciam-se por apresentar interatividade.

(  ) São produzidos em softwares.

3) Leia com atenção as afirmações a seguir sobre os protóti-


pos lo-fi e marque apenas uma alternativa como correta:
(  ) São produzidos para testes de usabilidade.
(  ) São protótipos tridimensionais geralmente feitos em papel.
Capítulo 9   Antecipação   129

(  ) São esboços feitos em papel, normalmente.


(  ) Fazem parte da abordagem de design colaborativo.
4) Assinalar (V) para as assertivas verdadeiras e (F) para as
falsas, para Design Participativo:
(  ) Consiste no profissional abdicar de seu papel de designer.
(  ) Todas as decisões são tomadas pelos participantes do
processo.
(  ) Os participantes apontam as possibilidades de uso do
artefato ou sistema.
(  ) É utilizado somente na área de design de interação.

5) Sobre softwares usados na prototipagem, assinalar (V)


para as assertivas verdadeiras e (F) para as falsas:
(  ) HTML.
(  ) Power Point.
(  ) DENIM.
(  ) JAVA.

Gabarito:
1) V, V, V, V

2) Segunda incorreta

3) Segunda correta

4) F, F, V, F

5) V, V, V, V
Carla Andrea Lopes Allegretti

Capítulo 10

Design de Sites
Capítulo 10   Design de Sites   131

Introdução

Segundo Benyon (2011), um produto que o designer de in-


teração certamente fará é o design de um site. Badre (apud
Benyon, 2011) identifica quatro principais tipos de site: notí-
cias, compras, informação e entretenimento.

A Arquitetura da Informação é uma área de estudo de-


dicada à construção de sites, diz Benyon (2011), ela estrutura
o site e ajuda os usuários a responder perguntas como onde
estou? E aonde posso ir? A arquitetura da informação orga-
niza e classifica o conteúdo dos sites, cria taxonomias, rotula
itens e categorias. Para tanto, utiliza técnicas específicas como
diagramas de afinidade e card sorts. Além de organizar e clas-
sificar o conteúdo, a arquitetura da informação ocupa-se dos
mecanismos de navegação.

1 Construção de sites

O design de sites deve seguir os 12 princípios do bom design


de interação e respeitar as etapas do projeto: entendimento
– análise PACT, construção de personas e cenários, foco de
Design, Antecipação com prototipagem e Avaliação. Um bom
design para sites prioriza a informação e a navegação, além
disso, deve ser eficiente, aprendível e adaptável.
132   Design de Interação

Jesse James Garrett (apud Benyon, 2011) divide a constru-


ção de um site em cinco elementos:

1. Estratégia

É a camada mais baixa e preocupa-se em entender o


objetivo geral do site, a natureza dos usuários do site
e o que eles esperam do site. Considera as metas de
negócios e a marca da empresa.

2. Escopo

Ocupa-se da funcionalidade e do conteúdo, além de


definir os requisitos.

3. Estrutura

Trata da arquitetura da informação e da especificação


do design. O objetivo aqui é estabelecer um modelo
conceitual claro.

4. Esqueleto

Cuida do Design de Informação, da navegação e da


interface.

Segundo a enciclopédia digital Wickipédia, Design de


Informação ou Infodesign, é uma área do design que lida
detalhadamente com a apresentação da informação. Seu ob-
jetivo principal é melhorar a forma como o usuário adquire in-
formação em sistemas de comunicação analógicos e digitais.

O wireframe é uma técnica usada para unir os três compo-


nentes desse elemento e colocá-los em um leiaute.
Capítulo 10   Design de Sites   133

Figura 1  Wireframe.
Fonte: Benyon (2011)

2 Superfície

Preocupa-se com as questões estéticas do site.

Normalmente, para obter um leiaute claro, lógico e agra-


dável, são utilizadas folhas de estilo – CSS. As folhas de estilo
formatam a aparência dos documentos da Web, suas cores e
fontes, especificando a linguagem visual.
134   Design de Interação

3 Design de interface

Cooper (apud Benyon, 2011) argumenta que o design de in-


terface é um componente fundamental do design de interação.
Portanto os designers de interação devem ter noção de design
gráfico, formas e cores.

As diretrizes do design de interface são extraídas de estudos


sobre percepção, desenvolvidos pela escola Gestalt.

1. Proximidade e Similaridade

Objetos semelhantes em forma ou função devem per-


manecer próximos.

Figura 2  Botões organizados por proximidade.


Adaptado: Benyon (2011)

Figura 3  Arquivos organizados pela similaridade.


Adaptado: Benyon (2011)
Capítulo 10   Design de Sites   135

4 Continuidade

Objetos que fazem parte de um todo maior e contínuo.

Figura 4  Menu desdobrável.


Fonte: CorelDraw

5 As cores no design

O uso de cores no design de sistemas interativos é complexo.

Aaron Marcus (apud Benyon, 2011) fornece as seguintes


regras para a aplicação da cor:

1. Use no máximo cinco cores.

2. Use com parcimônia cores centrais ou periféricas.

3. As áreas coloridas devem sofrer o mínimo de mudanças de


cor ou tamanho.
136   Design de Interação

4. Não use simultaneamente cores de alta pureza.

5. Use um código de cores consistente, familiar e com refe-


rências apropriadas.

A seguir, a conotação de algumas cores no Ocidente.

Vermelho Perigo, quente, fogo


Amarelo Cuidado, devagar, teste
Verde Siga, tudo bem livre, vegetação, segurança
Azul Frio, água, calma, céu
Cores quentes Ação, resposta necessária, proximidade
Cores frias Status, informação de fundo, distância
Cinza, branco e azul Neutralidade

Figura 5  Convenção de cores ocidentais.


Fonte: Benyon (2011)

A seguir, temos um exemplo de mapa de site de Garrett.


Uma explicação completa pode ser encontrada em seu site
http://blog.jjg.net/.
Capítulo 10   Design de Sites   137

Figura 6  Mapa de site de Garret.


Adaptado: Benyon (2011)
138   Design de Interação

Figura 7  Mapa de site de Garret.


Adaptado: Benyon (2011)

Alguns hot sites que são casos de sucesso da desenvolve-


dora gaúcha W3Haus:
Capítulo 10   Design de Sites   139

Figura 8  Página inicial do hot site de O Boticário.


Fonte: <http://vivalinda.boticario.com.br/radar-make-b/make-b-tropical-colors-
experience/>

Figura 9  Página inicial do hot site da LG.


Fonte: <http://www.lge.com/br/tecnologias-tv-lg/index.html>
140   Design de Interação

Figura 10  Página inicial do hot site da Petrobrás.


Fonte: <http://www.petrobras.com.br/infograficos/tecnologia-e-inovacao/tecnolo-
gias-do-futuro/index.html>

Recapitulando

Neste capítulo, vimos:

ÂÂA Arquitetura da Informação é uma área de estudo


dedicada à construção de sites, sua estrutura, organiza-
ção e classificação dos conteúdos.

ÂÂO design de sites deve seguir os 12 princípios do bom


design de interação e respeitar as etapas do projeto:
Entendimento – Design – Antecipação – Avaliação.

ÂÂUm bom design para sites prioriza a informação e a na-


vegação, deve ser eficiente, aprendível e adaptável.
Capítulo 10   Design de Sites   141

ÂÂA construção de um site é feita em cinco etapas: Estraté-


gia, Escopo, Estrutura, Esqueleto e Superfície.

Design de Informação ou Infodesign, é uma área do design


que lida detalhadamente com a apresentação da informação.

O design de interface é um componente fundamental do


design de interação, então os designers de interação devem
ter noção de design gráfico, formas e cores.

Referências

BENYON, D. Interação humano-computador. São Paulo:


Pearson, 2011.

Atividades

1) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como correta para a área de estudo dedi-
cada à construção, classificação e organização do conteú-
do dos sites:

(  ) Infodesign.

(  ) Design de Informação.

(  ) Arquitetura da Informação.

(  ) Engenharia da Informação.
142   Design de Interação

2) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas sobre os elementos que formam um site:

(  ) Estratégia: define com o site será vendido posteriormente.

( ) Escopo: ocupa-se da funcionalidade, do conteúdo e


dos requisitos.

(  ) Estrutura: o objetivo é a prototipagem.

(  ) Superfície: preocupa-se com a interface.

3) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas sobre Infodesign:

(  ) É o mesmo que Arquitetura da Informação.

(  ) Busca pelo conteúdo do site através de pesquisas atre-


ladas ao tipos de site: notícias, compras, informação e
entretenimento.

(  ) É responsável pela correção ortográfica dos textos do


site.

(  ) Seu objetivo principal é melhorar a forma como o usu-


ário adquire informação em sistemas de comunicação
analógicos e digitais.

4) Leia com atenção as afirmações a seguir e marque apenas


uma alternativa como incorreta para Design de Interface:

(  ) O Design de Interface ocupa-se de toda a parte gráfica


do site: tipografia, formas, imagens e cores.

(  ) O Design de Interface está diretamente ligado às ques-


tões estéticas do site.
Capítulo 10   Design de Sites   143

(  ) As diretrizes do Design de Interface estão relacionadas


aos estudos de percepção da forma da escola Gestalt.

(  ) Os menus desdobráveis são exemplos de Similaridade,


uma das diretrizes do Design de Interface.

5) Assinalar (V) para as assertivas verdadeiras e (F) para as


falsas sobre o uso da cor no Design de Interface:

(  ) Quanto mais cores, melhor para o usuário.

(  ) Cores puras podem ser usadas juntas, sem restrição.

(  ) Um site direcionado para crianças pode optar pelo uso


de cores puras ou quentes.

(  ) A tipografia deve ser escolhida no intuito de facilitar a


leitura ou ações necessárias no produto ou sistema.

Gabarito:
1) Terceira correta

2) F, V, F, V

3) F, F, F, V

4) Quarta incorreta

5) F, F, V, V

Você também pode gostar