148
Design de Interação

DESIGN DE INTERACAO · 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

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: DESIGN DE INTERACAO · 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

Design de Interação

Page 2: DESIGN DE INTERACAO · 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

Design de Interação

Carla Andrea Lopes Allegretti

Organizado por Universidade Luterana do Brasil

Universidade Luterana do Brasil – ULBRACanoas, RS

2015

Page 3: DESIGN DE INTERACAO · 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

Conselho Editorial EAD

Andréa de Azevedo EickAstomiro Romais,

Claudiane Ramos FurtadoDóris Cristina Gedrat

Kauana Rodrigues AmaralLuiz Carlos Specht Filho

Mara Lúcia Salazar MachadoMaria 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)

ISBN xxxxxxxxxxxxxxxx

Dados técnicos do livro

Diagramação: Jonatan SouzaRevisão: Igor Campos Dutra

Setor Biblioteca EAD ULBRA Canoas

Page 4: DESIGN DE INTERACAO · 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

Prezado(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.

Apresentação

Page 5: DESIGN DE INTERACAO · 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

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

Sumário

Page 6: DESIGN DE INTERACAO · 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

Design de Interação

Carla Andrea Lopes Allegretti

Capítulo 1

Page 7: DESIGN DE INTERACAO · 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

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!

Page 8: DESIGN DE INTERACAO · 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

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

Page 9: DESIGN DE INTERACAO · 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

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>

Page 10: DESIGN DE INTERACAO · 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

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?

Page 11: DESIGN DE INTERACAO · 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

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.

Page 12: DESIGN DE INTERACAO · 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

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 autoraFigura 9 Direita inferior, interface do aplicativo Angry Birds. Fonte: <estilivingston.com>

Page 13: DESIGN DE INTERACAO · 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

8 Design de Interação

3 O 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

Page 14: DESIGN DE INTERACAO · 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

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

Page 15: DESIGN DE INTERACAO · 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

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.

Page 16: DESIGN DE INTERACAO · 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

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.

Page 17: DESIGN DE INTERACAO · 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

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.

Page 18: DESIGN DE INTERACAO · 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

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

Page 19: DESIGN DE INTERACAO · 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

Teoria X Prática

Carla Andrea Lopes Allegretti

Capítulo 2

Page 20: DESIGN DE INTERACAO · 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

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.

Page 21: DESIGN DE INTERACAO · 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

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-

Page 22: DESIGN DE INTERACAO · 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

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.

Page 23: DESIGN DE INTERACAO · 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

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/>

Page 24: DESIGN DE INTERACAO · 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

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>

Page 25: DESIGN DE INTERACAO · 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

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ó-

Page 26: DESIGN DE INTERACAO · 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

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

Page 27: DESIGN DE INTERACAO · 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

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.

Page 28: DESIGN DE INTERACAO · 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

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.

Page 29: DESIGN DE INTERACAO · 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

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.

Page 30: DESIGN DE INTERACAO · 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

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.

Page 31: DESIGN DE INTERACAO · 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

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

Page 32: DESIGN DE INTERACAO · 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

Um Método para Projetos com Foco na

Interação

Carla Andrea Lopes Allegretti

Capítulo 3

Page 33: DESIGN DE INTERACAO · 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

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.

Page 34: DESIGN DE INTERACAO · 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

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-

Page 35: DESIGN DE INTERACAO · 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

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-

Page 36: DESIGN DE INTERACAO · 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

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.

Page 37: DESIGN DE INTERACAO · 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

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.

Page 38: DESIGN DE INTERACAO · 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

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

Page 39: DESIGN DE INTERACAO · 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

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

Page 40: DESIGN DE INTERACAO · 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

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?

Page 41: DESIGN DE INTERACAO · 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

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.

Page 42: DESIGN DE INTERACAO · 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

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.

Page 43: DESIGN DE INTERACAO · 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

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:

Page 44: DESIGN DE INTERACAO · 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

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

Page 45: DESIGN DE INTERACAO · 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

PACT – Pessoas, Atividades, Contextos

Carla Andrea Lopes Allegretti

Capítulo 4

Page 46: DESIGN DE INTERACAO · 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

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

Page 47: DESIGN DE INTERACAO · 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

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,

Page 48: DESIGN DE INTERACAO · 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

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-

Page 49: DESIGN DE INTERACAO · 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

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

Page 50: DESIGN DE INTERACAO · 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

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-

Page 51: DESIGN DE INTERACAO · 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

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-

Page 52: DESIGN DE INTERACAO · 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

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

Page 53: DESIGN DE INTERACAO · 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

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

Page 54: DESIGN DE INTERACAO · 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

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

Page 55: DESIGN DE INTERACAO · 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

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,

Page 56: DESIGN DE INTERACAO · 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

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

Page 57: DESIGN DE INTERACAO · 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

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.

Page 58: DESIGN DE INTERACAO · 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

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

Page 59: DESIGN DE INTERACAO · 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

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

Page 60: DESIGN DE INTERACAO · 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

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.

Page 61: DESIGN DE INTERACAO · 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

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,

Page 62: DESIGN DE INTERACAO · 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

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.

Page 63: DESIGN DE INTERACAO · 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

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.

Page 64: DESIGN DE INTERACAO · 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

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

Page 65: DESIGN DE INTERACAO · 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

PACT – Tecnologias

Carla Andrea Lopes Allegretti

Capítulo 5

Page 66: DESIGN DE INTERACAO · 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

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

Page 67: DESIGN DE INTERACAO · 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

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

Page 68: DESIGN DE INTERACAO · 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

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,

Page 69: DESIGN DE INTERACAO · 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

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

Page 70: DESIGN DE INTERACAO · 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

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

Page 71: DESIGN DE INTERACAO · 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

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.

Page 72: DESIGN DE INTERACAO · 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

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-

Page 73: DESIGN DE INTERACAO · 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

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

Page 74: DESIGN DE INTERACAO · 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

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).

Page 75: DESIGN DE INTERACAO · 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

70 Design de Interação

11 Delimitando 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

Page 76: DESIGN DE INTERACAO · 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

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.

Page 77: DESIGN DE INTERACAO · 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

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,

Page 78: DESIGN DE INTERACAO · 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

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:

Page 79: DESIGN DE INTERACAO · 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

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.

Page 80: DESIGN DE INTERACAO · 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

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

Page 81: DESIGN DE INTERACAO · 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

Personas e Cenários

Carla Andrea Lopes Allegretti

Capítulo 6

Page 82: DESIGN DE INTERACAO · 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

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.

Page 83: DESIGN DE INTERACAO · 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

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.

Page 84: DESIGN DE INTERACAO · 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

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:

Page 85: DESIGN DE INTERACAO · 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

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.

Page 86: DESIGN DE INTERACAO · 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

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>

Page 87: DESIGN DE INTERACAO · 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

82 Design de Interação

Figura 3 Exemplo de perfil de Persona.Fonte: <http://chocoladesign.com/criando-personas-no-design-de-produto>

Page 88: DESIGN DE INTERACAO · 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

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

Page 89: DESIGN DE INTERACAO · 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

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:

Page 90: DESIGN DE INTERACAO · 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

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.

Page 91: DESIGN DE INTERACAO · 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

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

Page 92: DESIGN DE INTERACAO · 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

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.

Page 93: DESIGN DE INTERACAO · 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

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.

Page 94: DESIGN DE INTERACAO · 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

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.

( ) Melhor 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.

Page 95: DESIGN DE INTERACAO · 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

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

Page 96: DESIGN DE INTERACAO · 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

Usabilidade, Aceitabilidade e Acessibilidade

Carla Andrea Lopes Allegretti

Capítulo 7

Page 97: DESIGN DE INTERACAO · 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

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.

Page 98: DESIGN DE INTERACAO · 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

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.

Page 99: DESIGN DE INTERACAO · 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

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?

Page 100: DESIGN DE INTERACAO · 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

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:

Page 101: DESIGN DE INTERACAO · 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

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

Page 102: DESIGN DE INTERACAO · 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

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.

Page 103: DESIGN DE INTERACAO · 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

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>

Page 104: DESIGN DE INTERACAO · 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

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.

Page 105: DESIGN DE INTERACAO · 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

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:

Page 106: DESIGN DE INTERACAO · 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

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.

Page 107: DESIGN DE INTERACAO · 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

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.

Page 108: DESIGN DE INTERACAO · 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

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

Page 109: DESIGN DE INTERACAO · 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

Design para a Experiência

Carla Andrea Lopes Allegretti

Capítulo 8

Page 110: DESIGN DE INTERACAO · 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

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.

1 Princí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.

Page 111: DESIGN DE INTERACAO · 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

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

Page 112: DESIGN DE INTERACAO · 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

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.

Page 113: DESIGN DE INTERACAO · 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

108 Design de Interação

2 Design 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-

Page 114: DESIGN DE INTERACAO · 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

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.

Page 115: DESIGN DE INTERACAO · 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

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)

Page 116: DESIGN DE INTERACAO · 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

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)

Page 117: DESIGN DE INTERACAO · 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

112 Design de Interação

3 O 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.

Page 118: DESIGN DE INTERACAO · 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

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.

Page 119: DESIGN DE INTERACAO · 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

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:

Page 120: DESIGN DE INTERACAO · 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

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.

Page 121: DESIGN DE INTERACAO · 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

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.

Page 122: DESIGN DE INTERACAO · 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

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

Page 123: DESIGN DE INTERACAO · 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

Carla Andrea Lopes Allegretti

Capítulo ?

Antecipação

Carla Andrea Lopes Allegretti

Capítulo 9

Page 124: DESIGN DE INTERACAO · 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

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.

Page 125: DESIGN DE INTERACAO · 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

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)

Page 126: DESIGN DE INTERACAO · 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

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é.

Page 127: DESIGN DE INTERACAO · 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

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.

Page 128: DESIGN DE INTERACAO · 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

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)

Page 129: DESIGN DE INTERACAO · 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

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:

Page 130: DESIGN DE INTERACAO · 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

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/>

Page 131: DESIGN DE INTERACAO · 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

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>

Page 132: DESIGN DE INTERACAO · 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

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.

Page 133: DESIGN DE INTERACAO · 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

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.

Page 134: DESIGN DE INTERACAO · 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

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

Page 135: DESIGN DE INTERACAO · 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

Design de Sites

Carla Andrea Lopes Allegretti

Capítulo 10

Page 136: DESIGN DE INTERACAO · 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

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.

Page 137: DESIGN DE INTERACAO · 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

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.

Page 138: DESIGN DE INTERACAO · 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

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.

Page 139: DESIGN DE INTERACAO · 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

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)

Page 140: DESIGN DE INTERACAO · 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

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.

Page 141: DESIGN DE INTERACAO · 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

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/.

Page 142: DESIGN DE INTERACAO · 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

Capítulo 10 Design de Sites 137

Figura 6 Mapa de site de Garret.Adaptado: Benyon (2011)

Page 143: DESIGN DE INTERACAO · 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

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:

Page 144: DESIGN DE INTERACAO · 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

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>

Page 145: DESIGN DE INTERACAO · 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

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.

Page 146: DESIGN DE INTERACAO · 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

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.

Page 147: DESIGN DE INTERACAO · 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

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.

Page 148: DESIGN DE INTERACAO · 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

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