DesigndaInteraçãoFolhetos

Interface Homem-Máquina

Email: kelma.madeira@gmail.com

 Interação é qualquer comunicação entre o usuário

e o computador, seja direta ou indireta (Dix et al, Hix et al):

• Interação direta envolve um diálogo com feedback

e controle durante a realização de uma tarefa. Exemplo: Utilização de Caixa Eletrônico (Banco)

• Interação indireta pode envolver processamento de

fundo ou em lotes. O importante é que o usuário está interagindo com o computador com algum objetivo. Exemplo: Verificação programada de antivírus.

Dix, A., J. Finlay, G. Abowd, R. Beale. Human- Computer Interaction, segunda edição. New York: Prentice Hall, 1998. 7. Hix, D., H. R. Hartson. Developing User Interfaces : ensuring usability through product e process. Nova Iorque: John Wiley, 1993.

Hix, D., H. R. Hartson. Developing User Interfaces : ensuring usability through product e process. Nova Iorque: John Wiley, 1993.

 Design da Interação é:

 Para [Sharp, Rogers e Preece ,2002], o design de produtos

interativos que fornecem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho.

 Para [Winograd,1997], “O Projeto de espaços para

comunicação e interação humana”.

 Mas afinal o que é isso?

 A atividade de design de interação propõe criar

experiências que buscam entender como os usuários realizam suas tarefas, como as pessoas usam/trabalham, se comunicam e interagem. Demanda uma natureza de conhecimento além do computacional, mais ligado à lógica.

 O Design de Interação surgiu nos anos 80, o

termo foi concebido por Bill Verplank e Bill Moggridge, quando a área de Design começou a se interessar pela participação em projetos de softwares e outros dispositivos computacionais.

 A partir do final dos anos 90, com a popularização

dos microcomputadores e da internet, a demanda por design de interação cresceu muito e a área se consolidou, tanto na academia, quanto no mercado.

Fonte: Design da Interação, Bookman

 O designer de interação é responsável por desenvolver o

conteúdo, comportamento e aparência do design de interação [Hix, Hartson, 1993].

 Pessoas neste papel são diretamente responsáveis por

assegurar a usabilidade, incluindo performance e satisfação do usuário.

 Estes profissionais estão preocupados com elementos

críticos de design, tais como:  funcionalidade,

 seqüenciamento,

 conteúdo e acesso à informação,  detalhes como aparência de menus,  formatação de formulários,

 assegurar consistência através da interface.

 Grande parte do trabalho do designer está relacionada em:  avaliar designs de interação com usuários e

 fazer redesigns baseados na avaliação dos usuários.

“As atividades do designer de interação transcendem a aparência da interface e definição de guias de estilo, pois é dele a responsabilidade de definir como a aplicação se comunica com o usuário [Hix, Hartson, 1993].” “Isso implica não apenas em escolher componentes de

interação de acordo com cada ocasião, por exemplo: menus, listas, campos de texto, alertas, o tipo da interface, se tem janelas ou tabs, etc., mas definir a forma como estes componentes orientam a ação dos usuários através da aplicação”.

Um designer de interação pode, por exemplo, utilizar as heurísticas como as propostas por Norman para guiar o usuário, fazendo com que:

i)  a memória de trabalho não seja sobrecarregada, disponibilizando informações de forma eficiente; ii)  simplificando as estruturas da tarefa;

iii)  fazendo as coisas visíveis;

iv)  mapeando os dados com a representação de forma correta;

v)  explorando as restrições; vi)  projetar prevendo erros e; vii)  padronizar.

 Desenvolver produtos com boa usabilidade.

E quais são as Metas de Usabilidade?

 Ser eficaz no uso (faz o que se propõe)

 Ser eficiente no uso (fazer o que se espera dele

de forma segura, usando menos recursos)

 Ser de boa utilidade (funcional)

 Ser fácil de apreender (learnability)

 Ser fácil de lembrar como se usa (memorability)

 Proporcionar satisfação ao usuário (proporcionar

experiência agradável ao utilizar)

•  Design da Interação busca envolver os usuários

no processo de design!

E como fazer isso?

Aplicando técnicas que integram os usuários no Processo de Desenvolvimento de um Software, ou ainda, fazendo com que os especialistas conheçam mais sobre as experiências dos usuários, tais como:

•  Experience Prototyping;

• User Prototyping;

•  Etc.

 

Devemos considerar:

  Quem são os usuários

  Quais atividades eles desempenham

  Aonde a interação se dar

 

Devemos considerar também a

necessidade de otimizar a interação que o

usuário tem com o produto

 como essa interação pode ajudar em suas

tarefas e quais são as necessidades dos usuários.

 Considerar no que as pessoas são boas ou não;

 Considerar o que pode auxiliar as pessoas na sua

atual maneira de fazer as coisas;

 Pensar o que pode proporcionar experiências de

qualidade ao usuário;

 Ouvir o que as pessoas querem e envolvê-las no

design;

 Utilizar técnicas baseadas no usuário “testadas e

aprovadas” durante o processo de design.

Qual é o lado da porta que devemos empurrar?

www.baddesigns.com

Botões do Tape próximo ao dispositivo de CD, e Botões do CD próximo ao dispositivo de Tape.

www.baddesigns.com

Botão para chamar serviço de bordo, botão para acender a luz, e em cima deles uma confusão!

www.baddesigns.com

Para visualizar as horas, se faz necessário o desbloqueio do aparelho, pois a mensagem exibida a sobrepõem!

www.baddesigns.com

Falta de seqüência lógica na numeração!

Aonde abre?

www.baddesigns.com

O que estas imagens querem transmitir?

www.baddesigns.com

Faltou uma seqüência lógica!

Aumentar e diminuir o Volume, ficou confuso...

www.baddesigns.com

Por que a maçaneta da porta abre para um lado contrário do movimento do giro da chave!

Qual é mesmo a entrada do dispositivo do teclado e mouse? www.baddesigns.com

 É um conjunto de conhecimentos baseados

em um conjunto de teorias, experiências e senso comum.

 Serve para orientar os designers:

 a refletir sobre os aspectos diferentes de

seu design,

 sua utilização, e

 o que evitar em uma interface.

 Visibilidade  Repetição  Restrições  Affordances  Mapeamento  Consistência  Feedback

 Visibilidade

 Quanto mais visíveis forem as funções, mais

usuários saberão proceder (cuidado com o excesso!).

 Quando as funções estão “fora de alcance”,

torna-se mais difícil encontrá-las e saber como utilizá-las.

 É importante tornar as partes mais relevantes

visíveis.

 É importante tornar óbvio o que deve ser feito.

 Visibilidade

 A falta de visibilidade é que torna muitos dispositivos

controlados por computadores difíceis de serem operados.

 Objetos que têm dicas visíveis de sua operação,

geralmente possuem um bom design, são fáceis de interpretar e entender.

 Objetos difíceis e frustrantes de usar geralmente

possuem um design pobre. Eles não provêem indicações ou o que é muito pior, provêem, muitas vezes, falsas dicas.

Painel de controle de um elevador. Como ele funciona? Devemos passar um cartão… Não é explicito o que devemos fazer!

www.baddesigns.com

…você deve inserir o seu crachá com código de barras ou tarja magnética para que o elevador funcione!

Como podemos tornar isso mais

 tornar a leitora mais óbvia

 utilizar uma mensagem de alerta, a qual indica o que fazer

 disponibilizar uma etiqueta com cores de alerta com instruções de como utilizar o crachá para acionar o elevador

Muitas vezes empurramos as portas quando devemos puxar, ou ainda abrimos para direita quando deveria ser para esquerda…

 Repetição

 Geralmente a repetição, na medida certa, é

benéfica.

 A repetição é um bom artifício para atender

aqueles usuários iniciantes, mas lembre-se de fornecer atalhos para aqueles usuários mais experientes.

Office (Antigo) - Temos a possibilidade de formatar o texto através de comandos dentro do menu, assim como comandos expostos (escolhidos pelos usuários).

 Restrições

 O conceito de restrição refere-se a determinação das

formas de delimitar o tipo de interação que pode ocorrer em um determinado momento.

 Restrições permitem apenas que alguns tipos de

ações possam ser executadas.

 O benefício disto é que ajuda a prevenir que o

usuário selecione opções incorretas.

 Segundo (Norman, 1999) existem 3 tipos de

restrições: física; cultural e lógica.

 Refere-se como os objetos ou

formas restringem o movimento

◦ Exemplos:

◦ apenas um lado correto para

inserir um disquete no drive ou um dispositivo na porta USB;

◦ colocação dos cabos de um

computador

 Quantas formas possíveis nós

temos para inserir um CD ou um DVD no respectivo drive no computador?

 Qual é a restrição física que

existe?

 Qual a diferença entre o drive de

CD e o disquete quanto às formas de inserir a mídia?

 Dependem do senso comum dos indivíduos a

respeito das ações e suas conseqüências.

 Ou seja, é o desenvolvimento de um design que

dependem do entendimento que as pessoas tem sobre a maneira que o mundo funciona.

Qual o sexo dos respectivos bebês?

 Onde conectar o mouse?

 Onde conectar o teclado?

 Conector de cima ou o

debaixo?

 O ícones coloridos

ajudam?

www.baddesigns.com

Mapeamento direto entre a legenda e o conector

As Cores são utilizadas para associar os conectores com as respectivas legendas

www.baddesigns.com

 

Aprendemos convenções

arbitrárias como por exemplo,

um triângulo vermelho para

alertas e avisos.

 

Podem ser universais ou

culturalmente específicas.

= Paz

= Linux = Java

 Affordances

 Termo definido para se referir às

propriedades percebidas e propriedades reais de um objeto, que deveriam determinar como ele pode ser usado.

 Ou seja, refere-se ao atributo

de um objeto que permite às pessoas saber como utilizá-lo.

 exemplo: o botão do mouse

convida a clicar, o trinco da porta convida a ser rotacionado, etc.

 Affordances

 Norman (1988) definiu

Affordances como um termo como “dar uma pista”, introduzindo o termo para falar sobre o design de objetos de uso diário.

 Desde então, o conceito foi muito

popularizado, sendo utilizado para descrever como objetos de interface deveriam ser projetados de maneira a tornar óbvio o que se pode fazer com eles.

 exemplo: scrollbars, ícones,

etc.

Como é o affordance dos objetos aqui apresentados? São óbvios?

 Quando se tem a predominância da affordance o

usuário sabe o que fazer somente olhando, não sendo preciso rótulos ou instruções.

 Objetos complexos podem requerer explicações,

mas objetos simples não.

 Lembrem-se que quando os objetos necessitam

rótulos ou instruções é porque o seu design não está bom (intuitivo)!

 Mapeamento

 Relação entre os controles, suas ações e o

resultado no mundo real.

Por quê o mapeamento dos botões abaixo é pobre?

Por quê o mapeamento abaixo é melhor?

Porque os botões estão mapeados de acordo com a seqüência de ações

Quais os botões correspondem a quais queimadores?

A B C D

Decorrente do mapeamento realizado, a relação entre as bocas do fogão e seus respectivos botões melhorou.

 Consistência

 Projetar as interfaces com consistência é

projetar de modo que as operações

semelhantes e elementos semelhantes sejam realizados através de tarefas similares.

 Uma interface consistente é aquela que segue

regras, tais como o uso da mesma operação para selecionar todos os objetos.

 O maior benefício é que as interfaces

tornam-se fáceis de tornam-se aprender de tornam-se utilizar.

Office: mantém a consistência de atalho para funções, por exemplo:

◦ ctrl+C = Copiar (Copy), ◦ ctrl+I = Inclinado (Italico), ◦ ctrl+O = Abrir (Open).

Esta consistência ainda se extende para outros programas do pacote

Office (Excel, Word…)

Quando a consistência é quebrada  O que acontece se houver mais de um

comando começando com a mesma letra?

◦ exemplo: save, spelling, select, style

 Temos que encontrar outras iniciais ou quebrar

a consistência encontrando outras combinações de teclas.

◦ Exemplo: ctrl+S, ctrl+Sp, ctrl+shift+L

 Isto acarreta:

 Aumento do esforço para o usuário aprender  Aumento da probabilidade de erros, por

exemplo, CTRL + B = negrito (Bold) / Salvar ?

Layout do teclado numérico

1 2 3 4 5 6 7 8 9 0 7 8 9 1 2 3 4 5 6 0 Layout numérico de telefones

e controles remotos Layout numérico de calculadoras e teclados de computador

Quem nunca se atrapalhou?

 Feedback

 Retornar ao usuário a informação, seja do que

foi executado, do status da execução, uma mensagem de sucesso/erro, etc.

 Lembre-se que o Feedback pode ir além das

Telas de Diálogo, podendo incluir sons, brilhos, animações e a combinação de todos esses elementos.

 É importante retornar Feedbacks úteis!

Exemplos:

 quando o botão é clicado ele

retorna um som,

 quando o botão é clicado

apresenta uma borda vermelha ao redor,

 quando um link já foi clicado

 Exemplo: MSN,

quando um usuário manda mensagem, é acionado um aviso desta ação através da emissão de um som.

 O DI preocupa-se com o projeto de produtos

interativos que apóiem os indivíduos em sua vida diária e em seu trabalho.

 O DI é um grande negócio! Muitas empresas o

querem, mas poucas sabem como fazê-lo!

 Os usuários devem estar envolvidos no

desenvolvimento do projeto.

 A usabilidade específica e as metas decorrentes da

experiência do usuário devem ser identificadas, claramente documentadas e acordadas no início do projeto.

 A interação é imprescindível.

 O DI requer que se leve em consideração vários

fatores interdependentes, incluindo o contexto de uso, o tipo de tarefa e o tipo de usuário;

 As metas decorrentes da experiência do usuário

estão preocupadas em criar sistemas que melhorem esta experiência;

 Os princípios de design e de usabilidade constituem

heurísticas úteis para analisar e avaliar aspectos de um produto interativo.

 O DI é multidisciplinar, envolvendo muitas

contribuições de uma ampla variedade de disciplinas e áreas, tais como:

◦ IHC ◦ Fatores humanos ◦ Engenharia cognitiva ◦ Ergonomia cognitiva ◦ Sistemas de informação ◦ Design gráfico ◦ Design de produto ◦ Design artístico ◦ Design industrial ◦ Etc.

 Uma equipe multidisciplinar significa muito mais

idéias sendo geradas, novos métodos sendo desenvolvidos e designs mais criativos e originais sendo produzidos.

 Reunir tantas pessoas com formações e

treinamentos diferentes significa muito mais idéias sendo geradas…

 A maior dificuldade pode ser a comunicação e o

desenvolvimento em uma única direção diante de inúmeros designs e propostas.

 O design de interação é agora um

grande negócio:

◦ Grupo Nielsen-Norman: “ajuda as

companhias a entrarem na era do consumidor, projetando produtos e serviços centrados no usuário”

◦ Swim: “proporciona uma visão

detalhada da usabilidade e do design do produto feita por um especialista”

◦ IDEO: “criar produtos, serviços e

ambientes para as companhias é uma forma pioneira de agregar valor aos seus clientes”

O designer de interação do New York Times percebeu um padrão de uso: Pessoas costumam marcar o

texto na tela à medida que vão lendo. Ou poderia

ser um outro padrão de uso: Pessoas marcam um

texto durante a leitura de um artigo se querem copiar e colar esse texto para algum lugar e,

normalmente, esse lugar é um mecanismo de busca. Depois de descobrir o padrão de uso, criaram um novo padrão de interação para a página on line do Jornal: Assim que algum texto em um artigo for marcado, dar ao leitor uma opção de pesquisa pelo termo marcado. Outubro/2009 Quando o texto é marcando, aparece um pequeno sinal de “?” na tela, ao clicar na interrogação, somos direcionado ao sistema de busca do New York Times com os resultados da busca pela(s) palavra(s) marcadas!

 Elabore e/ou reavalie as telas de Alta Fidelidade

elaboradas no Trabalho da AV1, baseado nos:

 Princípios do Design da Interação apresentados;

 Heurísticas de Norman.