Livro Engenhariua de Usabilidade

ENGENHARIA DE USABILIDADE

autor

FABIANO GONÇALVES DOS SANTOS

1ª edição SESES rio de janeiro  2016

Conselho editorial  regiane burger; roberto paes; gladis linhares; karen bortoloti; helcimara affonso de souza Autor do original  fabiano gonçalves Projeto editorial  roberto paes Coordenação de produção  gladis linhares Coordenação de produção EaD  karen fernanda bortoloti Projeto gráfico  paulo vitor bastos Diagramação  bfs media Revisão linguística  amanda carla duarte aguiar Imagem de capa  kran77 | dreamstime.com

todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por quaisquer meios (eletrônico ou mecânico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem permissão escrita da Editora. Copyright seses, 2016.

Dados Internacionais de Catalogação na Publicação (cip) G635e Gonçalves, Fabiano

Engenharia de usabilidade / Fabiano Gonçalves



Rio de Janeiro : SESES, 2016.



136 p. : il.



isbn: 978-85-5548-234-2



1. Interface homem-máquina. 2. Interface humano-computador.



3. Usabilidade. I. SESES. II. Estácio. cdd 004.6

Diretoria de Ensino — Fábrica de Conhecimento Rua do Bispo, 83, bloco F, Campus João Uchôa Rio Comprido — Rio de Janeiro — rj — cep 20261-063

Sumário Prefácio 7 1. Conceituação 1.1  Ergonomia
 1.1.1  Ergonomia física e cognitiva 1.2  Usabilidade e Engenharia de Usabilidade 1.3  Interação Humano-Computador 1.3.1  A primeira geração (ENIAC) 1.3.2  Segunda geração (IBM 7030) 1.3.3  Terceira Geração (IBM 360) 1.3.4  Quarta Geração 1.4  Interfaces e o projeto de interação 1.4.1  Futuro da IHC

2. Conhecimento

9 11 12 16 21 23 24 25 26 28 31

35

2.1  Princípios Ergonômicos para IHC 2.2  Critérios Ergonômicos

37 37

2.2.1 Condução 2.2.2  A carga de trabalho 2.2.3  O controle explícito 2.2.4  Adaptabilidade 2.2.5  A gestão de erros 2.2.6  A homogeneidade/Consistência (coerência) 2.2.7  O significado dos códigos e denominações 2.2.8  A compatibilidade 2.3  Recomendações Ergonômicas para IHC 2.3.1  Objetos de interação 2.3.1.1  Painéis de controle 2.3.1.2  Controles complexos 2.3.2  Atributos de objetos de interação

38 39 40 40 41 41 42 42 43 44 46 49 52

3. Desenvolvimento 55 3.1  Introdução ao projeto de IHC 3.2  Um modelo de ciclo de vida simples para o projeto de IHC 3.3  Sobre os usuários 3.4  Técnicas de concepção 3.4.1 Brainstorming 3.4.2 CardSorting 3.4.3  Diagrama de afinidade 3.4.4 Storyboard 3.4.5  Maquetes – protótipos em papel 3.4.6  Prototipagem rápida 3.4.7  Prototipagem de baixa e alta fidelidade 3.5  Técnicas de modelagem de interface 3.5.1  The Bridge 3.5.2  Usercentered design 3.6  Considerações finais

57 60 61 63 63 64 66 67 68 69 70 71 72 72 76

4. Avaliação 79 4.1 Introdução 4.2  Por que avaliar? 4.3  O que avaliar?

81 81 82

4.4  Onde avaliar? 4.5  Quando avaliar? 4.6  Técnicas de Avaliação de Usabilidade 4.6.1  Técnicas prospectivas 4.6.2  Técnicas preditivas 4.6.2.1  Avaliação Heurística 4.6.2.2  Inspeção por meio de lista de verificação 4.6.3  Técnicas objetivas 4.6.3.1  Ensaio de Interação

83 84 85 85 86 86 91 95 95

5. Acessibilidade à Web 5.1  Introdução à acessibilidade 5.2  Acessibilidade na web e sua importância 5.3  A Web acessível 5.4  Componentes essenciais para acessibilidade na Web 5.4.1  Interdependência entre componentes 5.4.2  O ciclo de implementação 5.5  Projeto e desenvolvimento de um site acessível 5.5.1  Recomendações do W3C 5.5.1.1  Princípio 1 - Percepção 5.5.1.2  Princípio 2: Operável 5.5.1.3  Princípio 3: Entendível 5.5.1.4  Princípio 4: Robusto 5.5.2  Métodos e validadores de acessibilidade na web

103 105 108 110 111 114 115 117 118 119 119 120 120 121

Prefácio Prezados(as) alunos(as), Desenvolver sistemas é uma tarefa muito interessante e, se bem aproveitada, pode te dar um retorno financeiro bem interessante. Porém não basta conseguir analisar um problema e saber solucioná-lo usando uma linguagem de programação. Isto é importante, porém o desenvolvimento envolve muito mais detalhes do que se imagina. É muito comum ver programadores super experientes e conhecedores de frameworks como o Bootstrap, por exemplo. Mas será que, além do framework passa na cabeça deles que existem detalhes importantes a respeito de algo além de um programa bonito? Um dos detalhes é a questão da usabilidade. É importante que ao criar a parte que interage com o usuário, alguns detalhes sejam observados, como a questão da acessibilidade. Esta disciplina tem como objetivo introduzir você em um tópico no qual muitos desenvolvedores não pensam ou ao qual não dão importância, que é a questão da usabilidade. Como foi citado, não basta saber um bom framework; é necessário saber aplicá-lo corretamente. Esta disciplina envolve conhecimentos de diversas áreas, como: psicologia, sociologia, antropologia, sistemas de informação, ciência da computação, design gráfico e ergonomia. Porém, não vamos entrar a fundo em cada uma dessas áreas. O que é importante você saber é que desenvolver interfaces não é apenas uma questão de saber programação e um determinado framework de apresentação. Vai um pouco mais além. Nosso objetivo é despertar sua atenção para este conhecimento e colocá-lo em contato com algumas questões básicas destas áreas mencionadas. É interessante e, se você se dedicar, saiba em que é uma área que há grande demanda de bons profissionais. Bons estudos!

7

1 Conceituação

Neste capítulo vamos tratar de um assunto que é encontrado em várias áreas, comArquitetura, Engenharia de Produção, Engenharia de Segurança e Tecnologia da Informação: a ergonomia. A ergonomia trata basicamente da adequação das pessoas aos locais de trabalho e outros tipos de sistemas (não necessariamente computacionais). Além disso, vamos estudar uma introdução à usabilidade e à engenharia de usabilidade. A usabilidade é uma área da computação relacionada com outra grande área chamada Interação (ou Interface) Homem-Máquina (IHM). A IHM sempre foi um motivo de grande discussão, porque a tecnologia, evoluindo ao longo dos anos, proporcionou uma grande evolução nas interfaces que ligam os humanos ao computador e às máquinas em geral. A IHM, por sua vez, é uma área estudada pela Engenharia de Software, que é uma disciplina que também será vista no curso. A usabilidade tem ganhado muito destaque no desenvolvimento de sistemas, principalmente no desenvolvimento web. Atualmente, vários frameworks têm aparecido e ajudado os desenvolvedores a criarem sites mais interativos e intuitivos, e isso tem um grande relacionamento com usabilidade.

OBJETIVOS Ao final deste capítulo, você estará apto a: •  Entender e reconhecer questões relacionadas à ergonomia em geral; •  Saber os conceitos básicos de usabilidade e engenharia de usabilidade; •  Conhecer os principais conceitos da área de interface homem-máquina.

10 •

capítulo 1

1.1  Ergonomia


©© HBCS0084 | DREAMSTIME.COM

A ergonomia pode ser definida como “adaptação ou melhoria na adequação dos produtos aos indivíduos”. Ela existe desde a Pré-História quando o homem primitivo sentiu a necessidade de criar objetos e utensílios que o ajudassem a realizar as mais diversas tarefas, como armazenar água, cozinhar alimentos, fazer roupas para se proteger do frio e caçar (figura 1.1).

Figura 1.1  –  Primórdios da Ergonomia.

Com a evolução do homem também veio a evolução da ergonomia, que se preocupava com a necessidade de melhorar equipamentos de forma a tornar o uso mais simples e intuitivo. A ergonomia tomou uma conotação realmente relevante na Segunda Guerra Mundial, quando aviões, tanques de guerra e armas precisavam ser produzidos rapidamente. Entretanto, esses equipamentos foram produzidos sem a preocupação de adequação às características perceptivas e físicas dos usuários, o que levou a diversas mortes de soldados. É evidente que a perda de vidas implica em sérios problemas; dessa forma, houve um esforço conjunto de especialistas de diversas áreas para adaptar os equipamentos, a fim de desenvolver projetos que adaptassem sua interface de uso (alavanca, botões, pedais e painéis) e campo de visão a soldados que

capítulo 1

• 11

deveriam utilizá-los em situações extremas, quando sua maior preocupação deveria ser o combate, e não a forma de uso das armas e equipamentos. Após a Segunda Guerra Mundial a ergonomia ganhou grande avanço por meio da NASA e seu impressionante avanço tecnológico, atingindo os mais diversos setores das indústrias pela América do Norte e Europa. Atualmente, a ergonomia é uma área extremamente multidisciplinar que envolve desde engenheiros e físicos até médicos, fisioterapeutas e psicólogos na tentativa de solucionar a necessidade do ser humano em aplicar menos esforço mental e físico em suas tarefas cotidianas. Assim, algumas premissas devem ser “pretendidas" na criação de um sistema ergonômico: •  O usuário deve desempenhar somente as funções absolutamente essenciais, e que não possam ser desempenhadas pelo sistema, transferindo para o sistema uma função mesmo que ela possa ser desempenhada pelo usuário. •  O usuário deve ter de memorizar o mínimo possível. •  O usuário só deve ter de aprender o essencial para sua tarefa. •  O usuário não deve ter de aprender a terminologia, passos não relacionados à sua tarefa – instruções ou comunicações do sistema devem ser feitas ao longo da tarefa. •  Os comandos do usuário devem ter execução natural e simples, não devem ser complexos e compostos. •  O usuário deve ter frustração mínima.

1.1.1  Ergonomia física e cognitiva Imagine que você está em uma sala de cinema e, após 10 minutos de o filme ter começado, ocorre um problema, as luzes não se acendem e começa a soar o alarme de incêndio. As pessoas ao seu redor se desesperam e você começa a sentir o cheiro de fumaça. Você se mantém calmo e vê que ao lado esquerdo da tela, um pequeno painel com uma luz vermelha acesa, e logo abaixo vê uma porta e a associa à saída de emergência. Você sai em direção à porta e, em um único movimento empurra uma longa barra horizontal pouco acima da altura da sua cintura, saindo da sala que já está bastante esfumaçada, sentindo um grande alívio ao respirar ar fresco.

12 •

capítulo 1

©© EDITOR77 | DREAMSTIME.COM

O ponto-chave para que você pudesse se livrar desta situação foi a facilidade de achar e abrir a porta da saída de emergência. Essas saídas foram projetadas para que, em uma situação de perigo iminente, as pessoas possam ser encaminhadas para a saída sem pensar, de forma simples e instintiva, simplesmente ao ver um painel com uma luz vermelha. Da mesma forma, em relação ao sistema de abertura da porta, em uma situação de risco, a pessoa não terá tempo ou estará tão apavorada que não conseguirá encontrar uma maçaneta ou identificar uma forma de abrir a porta. Sendo assim, a porta se abre quando a pessoa empurra a barra, Figura 1.2  –  Saída de emergência com a o que é uma ação intuitiva, uma vez que barra horizontal. sua principal preocupação é fugir. Aqui podemos notar elementos claros de ergonomia física e cognitiva: o fato de a saída de emergência estar posicionada imediatamente ao lado da tela, faz com que você não precise procurar muito por ela, uma vez que, durante a seção, a sua atenção estará voltada para a tela; além disso, o fato de a barra horizontal estar posicionada um pouco acima de sua cintura faz com que você não precise fazer movimentos antinaturais, portanto abrir a portaserá o menor dos seus problemas. Temos então dois exemplos de ergonomia física que está relacionada a adaptação de um sistema a anatomia humana, antropometria, fisiologia e biomecânica. Ou seja, as ações a serem realizadas se aproximam ao máximo de movimentos naturais aos seres humanos. Podemos notar também elementos de ergonomia cognitiva, uma vez que a saída de emergência é indicada por uma luz vermelha, enquanto todas as luzes estão apagadas, sendo assim bastante visível, e também outro elemento é o fato de a porta se abrir quando a barra é empurrada, o que é um movimento bastante natural, que não requer grande carga de raciocínio. Nesse tipo de ergonomia, é levada em consideração a carga

capítulo 1

• 13

©© FRANCESCO ALESSI | DREAMSTIME.COM

mental de uma determinada ação, na tentativa de diminuir raciocínio, estresse e tomada de decisão. Este é um exemplo no qual é possível mostrar que a ergonomia não está relacionada apenas a equipamentos ou máquinas, uma vez que entendemos a sala de cinema como um sistema, e as pessoas como usuários. Existem outros exemplos mais diretos também , em que podemos notar elementos claros de ergonomia física e cognitiva. Por exemplo, a comparação entre dois controles remotos: um tem um formato quadrado (com uma pegada ruim), os botões são pequenos, seguindo o mesmo padrão, e os botões mais usados estão longe um do outro, exigindo que você olhe para o controle para executar qualquer ação; o outro é anatômico (seu formato encaixa na sua mão) os botões são grandes e em formatos diferentes de forma que você não precise se preocupar em olhar para o controle para executar qualquer ação, você identifica qual botão apertar apenas com o tato, são poucos botões, e o que diferencia a uma ação realizada da outra, é a forma como esses botões são manipulados, apertando, deslizando o dedo sobre o botão para um lado ou para o outro.

Figura 1.3  –  Controle remoto "ruim".

14 •

capítulo 1

©© PANYA CHITMEDHA | DREAMSTIME.COM

Figura 1.4  –  Controle remoto "bom".

Podemos identificar também esses elementos na evolução do interior dos carros. Antigamente os botões e as alavancas eram espalhados pelo painel do carro e, muitas vezes, para executar uma ação, você precisava desviar a atenção do trânsito para olhar para o painel e identificar o botão ou alavanca desejado. Hoje em dia, nos carros mais modernos, grande parte dos controles do carro estão no próprio volante, inclusive controle multimídia, ar-condicionado e trocas de marchas, fazendo com que o condutor foque sua atenção no trânsito, não precisando retirar as mãos do volante para quase nada. E, finalmente, no mundo da informática, podemos comparar os touchpads de diversos laptops com o touchpad desenvolvido pela Apple, que torna a experiência de uso do computador muito mais simples e intuitiva, uma vez que são adicionados elementos de percepção naturais multitouch como: para dar zoom em uma imagem, basta abrir dois dedos; para movimentar a barra de rolagem basta deslizar dois dedos para cima ou para baixo... Sendo assim, vistos esses exemplos, o desafio a ser vencido é criar softwares ergonômicos, ou seja, que exijam o menor esforço físico e cognitivo do usuário, evitando, frustrações, grande uso de raciocínio e memória do usuário.

capítulo 1

• 15

1.2  Usabilidade e Engenharia de Usabilidade Vamos supor outra situação: você está no escritório postergando o que precisa fazer: o manual formatado do software recém-produzido que havia prometido ao seu chefe há tempos, mas está tranquilo, pois o texto já está todo escrito e as figuras já estão todas prontas, a única coisa que falta é a formatação do arquivo. Já são duas horas da tarde, e, quando abre a caixa de e-mails, surpresa: uma cobrança do chefe dizendo que precisa desse manual pronto até o fim do dia. Você percebe que, se abrir mão do cafezinho das quatro horas, consegue terminar a formatação do arquivo. Porém, quando abre o editor de texto, nota que ele foi atualizado para a versão mais recente, com novas funcionalidades e um layout completamente diferente, as ferramentas que você estava acostumado a usar não estão mais onde sempre estiveram. Você procura, passa por todos os menus, mas a interface está muito diferente, as horas vão passando e após buscar por informações na internet, consegue encontrar algumas ferramentas e avançar um pouco na formatação, mas já são 16:30 e pensa: “Como uma empresa tão grande, não faz um interface mais fácil, mais intuitiva? Será que ninguém pensou na usabilidade deste software”? É evidente que, se os construtores do editor de texto realmente tivessem se preocupado com a usabilidade do software sua tarde teria sido muito mais tranquila, e você teria a certeza de que conseguiria entregar o manual pronto ao seu chefe, mas infelizmente o software, não era nem um pouco usual. Mas, então, o que seria a usabilidade? O termo usabilidade surgiu como uma parte, um ramo da ergonomia voltada para às interfaces computacionais, mas acabou se difundindo para outras áreas. Hoje o termo também é utilizado em contexto de produtos, como aparelhos eletrônicos, em áreas da comunicação e produtos de transferência de conhecimento, como manuais, documentos e ajudas online. Podemos definir usabilidade como a facilidade com que as pessoas têm ao manusear algum determinado objeto, de modo eficiente, intuitivo, sem provocar erros operacionais e oferecendo ainda satisfação aos usuários. Ou seja, podemos associar usabilidade à facilidade de uso. Se um produto é fácil de usar, o usuário tem maior produtividade: aprende mais rápido, memoriza o passo a passo das operações e erra menos. Veja a figura 1.5: Preciso ir para o primeiro andar. Como faço? Que botão eu aperto, o 0 ou o 2? Preciso ir por tentativa e erro? E o que seria o andar “-1”?

16 •

capítulo 1

©© TATABRADA | DREAMSTIME.COM

Pode ser o subsolo? Mas e se houvesse mais andares abaixo do solo? Seria “-2”, “-3”, etc? Isto não é um pouco estranho?

Figura 1.5  – 

©© DK88888 | DREAMSTIME.COM

Uma boa usabilidade costuma andar de mãos dadas com um bom design! Smartphones em geral tentam fazer com que a experiência de uso seja simples e fácil, uma vez que é necessária apenas a realização de movimentos naturais e intuitivos para a troca de páginas e seleção de operações e aplicativos.

Figura 1.6  –  O Iphone da Apple.

capítulo 1

• 17

©© MAKSYM GORPENYUK | DREAMSTIME.COM

Outro exemplo de usabilidade em produtos são controles remotos. O Weemote é um controle remoto focado em atender às necessidades de crianças e idosos com botões grandes e coloridos só com funções básicas. Nesse ponto podemos fazer uma associação entre usabilidade e interação. Assim, fica claro que a usabilidade não depende só das características do produto, mas também das características do usuário, da tarefa e do ambiente ao qual todos esses fatores estão incluídos, ou seja, a interface deve ser desenvolvida levando-se em consideração a causa e a forma de contato entre usuário e produto. Segundo (JORDAN, 1998), a usabilidade pode ser avaliada de acordo com alguns princípios: •  Evidência: Devem ser evidentes o modo de operação e a função do produto, como, por exemplo, maçanetas de portas de carros (figura 1.7):

Figura 1.7  –  Maçaneta de carro.

•  Consistência: Operações semelhantes devem ser resolvidas de formas semelhantes. Um exemplo é a atualização do editor de texto que mantém as ferramentas mais utilizadas em seus lugares, sem maiores alterações que confundam o usuário. •  Capacidade: As capacidades do usuário para cada função não devem ser ultrapassadas. Por exemplo, colocar os principais controles do carro no volante, faz com que ele seja capaz de fazer mais operações sem desviar sua atenção do trânsito. •  Compatibilidade: A experiência de uso deve ser compatível com as experiências socioculturais dos usuários. Para desenroscar uma tampa, é preciso girá-la no sentido anti-horário.

18 •

capítulo 1

•  Prevenção de erros: Os produtos devem evitar ao máximo procedimentos errados. •  Realimentação: O sistema deve dar um retorno ao usuário sobre o sucesso de sua tarefa, para que ações repetitivas sejam evitadas.

Figura 1.8  –  Retorno de uma ação do programa. Fonte: autor.

Mas, então, qual a diferença entre usabilidade e ergonomia, já que, em ambos os casos, vários dos mesmos exemplos podem ser utilizados? Atualmente, a palavra ergonomia se refere à característica de um sistema ou tarefa que se adapte ao usuário, e não o contrário. É uma área multidisciplinar que compreende diversos ramos da ciência, como: anatomia, antropometria, biomecânica fisiologia, psicologia etc. Baseia-se em conhecimentos adquiridos, nas habilidades e capacidades humanas para adaptar as mais diversas, atividades, ferramentas, máquinas e produtos, com o objetivo a torná-los mais seguros, eficientes e confortáveis para uso humano. Já a usabilidade, como mencionado anteriormente, é uma ramificação da ergonomia, preocupa-se em produzir uma interface que deve ser usada para se executar uma dada tarefa da forma mais simples possível, de modo a permitir que os usuários foquem apenas no trabalho que eles desejam executar

capítulo 1

• 19

(NORMAN, 1986). Segundo (ISO/IEC 9126), “usabilidade é a capacidade de uma aplicação ser compreendida, aprendida e utilizada, sendo atraente para o usuário, em condições específicas de utilização”. Isso significa que aquele editor de textos do início deste tópico deveria, entre outras coisas, ter as seguintes características: Quão fácil e quanto de treinamento os usuários precisam

APRENDIZAGEM

para realizarem tarefas básicas no primeiro contato que têm com a interface do sistema?

EFICIÊNCIA

Os usuários conseguem realizar as tarefas exigidas pelo sis-

MEMORIZAÇÃO

O usuário deve lembrar-se de como usar o sistema depois

ROBUSTEZ

Caso erros aconteçam, a interface deve avisar o usuário e

SATISFAÇÃO

tema, de forma eficiente, depois de quanto tempo de uso?

de um longo período sem utilizá-lo?

permitir a correção de modo fácil, sem gerar frustrações.

Quão agradável, confiável e satisfatória é a utilização do sistema?

É importante salientar que, nas áreas de Interação Humano-computador e na Ciência da Computação, muitas empresas têm consciência da importância da usabilidade. Porém, muitas delas ainda veem a usabilidade como um fator que consome tempo e recurso, como se ela representasse um custo adicional, fora do que é essencia,l que só encareceria seu produto. Entretanto, as empresas têm muito mais a perder ao minimizar a usabilidade dessa forma. De acordo com CYBYS, BETIOL e FAUST (2007): Dependendo da frequência com que o software é empregado, os prejuízos para as empresas podem também ser expressivos, não só em decorrência do absenteísmo e”

20 •

capítulo 1

da rotatividade do pessoal, mas também pela baixa produtividade, competitividade e menor retorno de investimento. Sistemas difíceis de usar implicam em erros e perda de tempo, fatores que se multiplicam com a frequência das tarefas e o número de usuários. A perda de dados e informações pode implicar na perda de clientes e de oportunidades. Acontecimentos deste tipo causam desde uma resistência ao uso do sistema até a sua subutilização e abandono completo, com o devido consentimento da empresa. O barato terá custado caro.

1.3  Interação Humano-Computador Vamos usar outra situação cotidiana para exemplificar: imagine um senhor que vai ao banco sacar o dinheiro de sua aposentadoria e sempre faz o mesmo “ritual” todo mês, indo até o caixa. Mas desta vez há uma diferença: ao chegar ao banco, vê uma fila enorme de pessoas à espera de as portas se abrirem, mas ainda faltavam 15 minutos para as 10 horas. Em vez de enfrentar a fila, o senhor pensou na possiblidade de mudar e tentar se atualizar e provar a si mesmo que conseguiria fazer o saque de sua aposentadoria no caixa eletrônico, afinal, não poderia ser tão complicado assim. Ele via pessoas tocando a tela e recolhendo seu dinheiro a todo momento. Ele ia tentar. Assim que a porta se abriu, o senhor correu para o caixa eletrônico, olhou para o lado e viu uma moça a toda pressa tocando no visor. Ele então toca no visor também, quando uma mensagem aparece: “Insira seu cartão”. Ele procura e vê um lugar onde colocar o cartão, quando outra mensagem aparece: “falha na identificação do cartão”. Ele imagina que colocou o cartão na posição errada, reposiciona e coloca novamente o cartão no local indicado, quando outra mensagem aparece: “digite sua senha”. Ele digita e, quando pensa estar dominado o assunto vem, a mensagem: “posicione seu dedo no leitor biométrico”. Ele o faz prontamente, mas uma mensagem aparece: leitura não efetuada. Repita a operação, ele olha para trás e a fila está aumentando, quando ele começa a ficar preocupado, repete a operação e uma série de quadrados aparecem na tela, com várias possibilidades, dentre elas o saque. Ele escolhe um quadrado e vários outros quadrados aparecem: conta corrente, poupança, conta salário, etc. Creio que você consegue imaginar o resto desta situação.

capítulo 1

• 21

Situações como essas ocorrem o tempo todo. Muitas pessoas não sabem como agir quando se deparam com uma máquina ou um sistema computacional. Por que essa interação é tão difícil? Existe uma área na Computação que estuda a interação de forma a deixá-la mas simples, objetiva e satisfatória, chamada de Interação Homem Computador (IHC). Essa necessidade surge no cotidiano com as mais diversas tarefas que envolvem máquinas que se utilizam de algum tipo de sistema computacional. Esses sistemas na maioria das vezes são criados e desenvolvidos para facilitar nossas vidas, mas em vários casos acabam atrapalhando, por não serem bem planejados, projetados e pensados, daí a necessidade de toda uma ciência multidisciplinar, envolvendo ciência da computação, psicologia cognitiva, psicologia organizacional e social, ergonomia e fatores humanos, engenharia, design, antropologia, sociologia, filosofia, linguística e inteligência artificial, por trás desse assunto, que estuda como interagimos com os computadores nas mais diversas situações, para tornar cada vez mais simples e natural a interação homem computador. Então uma definição para IHC seria: a interação HumanoComputador (IHC) é uma disciplina que diz respeito ao design, avaliação e implementação de sistemas de computação interativos para uso humano em um contexto social e com os estudos dos principais fenômenos que os cercam (Curricula for Human-Computer Interaction, 2009). Porém, a interação entre humanos e computadores necessita de um meio de comunicação que é chamado de interface, por meio da qual o usuário entra em contato com a máquina de forma física, perceptiva e cognitiva (NORMAN, 1986) A interface é o lugar onde ocorre contato entre duas partes. Toda forma de interação onde uma ação do usuário (entrada) leva a uma resposta do sistema (saída) é intermediada por uma interface. Podemos ter como exemplos, computadores, maçaneta, televisões, rádios, micro-ondas, aparelhos de telefone e etc. A interface permite que um agente (humano) faça uma ação por meio de uma interface (maçaneta) e tenha uma resposta do paciente (porta). A interface do computador provoca estímulos ao usuário de forma que ele manipule a interface por meio de dispositivos e tenha as respostas relacionadas à sua atividade de interesse. Para cada ação, uma nova resposta é esperada por ambos os lados: sistema e usuário.

22 •

capítulo 1

Mas será que desde o surgimento dos computadores a interação homem computador é a mesma? É evidente que não. Desde seu surgimento computadores e interfaces evoluíram juntos até chegar ao que conhecemos e convivemos hoje, de uma interface simples e rudimentar passando por apenas linhas de código, até chegarmos nas interfaces gráficas e intuitivas de hoje em dia. Todos sabem que os computadores atuais são fruto de uma intensa evolução tanto em termos de hardware quanto de software, mas o que poucos sabem é que, na década de 1950 já existiam computadores. É certo que eles não se pareciam nem um pouco com os computadores que conhecemos hoje, mas já eram capazes de fazer alguns cálculos de forma bem rápida para determinadas tarefas.

©© WIKIPEDIA

1.3.1  A primeira geração (ENIAC)

Figura 1.9  –  O ENIAC (https://en..org/wiki/ENIAC).

A interação com os primeiros computadores, os chamados ENIAC e UNIVAC, era muito complexa, já que naquela época não existia linguagem de programação,

capítulo 1

• 23

os computadores eram programados para resolver um problema em específico, se quisesse resolver outro problema todo computador deveria ser reprogramado. Eles eram enormes e tinham literalmente o tamanho de salas inteiras, pesando aproximadamente 30 toneladas, além de sofrerem com superaquecimento pois, em vez de utilizarem microprocessadores, eles utilizavam válvulas. Elas funcionavam de maneira parecida com uma placa de circuitos, sendo que cada válvula acesa ou apagada representava uma instrução à máquina. Cada um deles necessitava de cerca de 19 mil válvulas por ano, porque as válvulas queimavam com poucas horas de uso e precisavam ser substituídas.

©© WIKIPEDIA

1.3.2  Segunda geração (IBM 7030)

Figura 1.10  –  O IBM7030.

A segunda geração de computadores apresentou uma série de novidades e avanços em relação à primeira geração. O IBM 7030 foi o modelo de maior sucesso dessa geração, sua programação foi bastante simplificada, uma vez que utilizava a linguagens como Fortran e Cobol em vez de linguagens de máquina como era usado no ENIAC. Outros fatores também foram importantes para o sucesso do IBM 7030, ele era muito menor que o ENIAC, pesava “apenas“ 890 kg o que realmente é pouco

24 •

capítulo 1

©© WIKIPEDIA

diante das 30 toneladas do ENIAC. Essa considerável diminuição no tamanho só foi possível porque o IBM 7030 utilizava transistores em vez de válvulas, os transistores eram bem menores em relação às válvulas e os computadores ficaram mais econômicos com relação ao gasto de energia e também em relação ao custo das peças.

Figura 1.11  –  Réplica do primeiro resistor.

©© WIKIPEDIA

1.3.3  Terceira Geração (IBM 360)

Figura 1.12  –  O IBM 360.

No final da década de 1970, o emprego dos semicondutores fez com que os computadores da terceira geração tivessem um aumento significativo na velocidade

capítulo 1

• 25

e na eficiência. Nessa geração foram introduzidos teclados para digitação de comandos e monitores para visualização de sistemas operacionais primitivos e a possibilidade de fazer upgrades. Entretanto, os computadores dessa geração ficaram maiores do que os da geração anterior. O IBM 360 (modelo de maior expressão dessa geração), claramente pesava mais do que seus antecessores. Nessa época, os computadores já começaram a ficar mais acessíveis.

1.3.4  Quarta Geração

©© WIKIPEDIA

Na década de 1970 foram lançados os primeiros computadores da forma como conhecemos hoje, os microcomputadores. Esses computadores ficaram bem menores (pesando cerca de 20 kg), e a redução foi possível graças ao uso de componentes chamados microprocessadores. Com isso, os computadores ficaram muito mais acessíveis, tanto que era possível adquirir um computador como o Altair 8800 com um kit de montar vendidos por revistas especializadas nos Estados Unidos.

Figura 1.13  –  O Altair 8800.

26 •

capítulo 1

Nessa mesma época, Steve Jobs e Steve Wozniak criaram o Apple I, que tinha como objetivo ser um computador de fácil acesso para leigos e logo foi substituído pelo Apple II. O grande diferencial introduzido nesses computadores é que Jobs e Wozniak se basearam no BASIC para criar um sistema com interface gráfica, incluindo editores de texto, planilhas eletrônicas e bancos de dados. Isto contribuiu com a popularização dos computadores, saindo do meio científico e atingindo a população em geral. Posteriormente, a Apple também foi responsável pela adoção dos mouses, que tornou a experiência de interação humano computador mais amigável ainda. Pouco tempo depois, a Microsoft também lançou o seu sistema operacional gráfico, o Windows.

CONEXÃO BASIC – Beginner’s All-purpose Instruction Code, ou código de instruções de uso geral para iniciantes, é uma linguagem de programação criada por John George Kemeny e Thomas Eugene em 1964 para aprendizado dos sistemas computacionais. Veja mais em

©© WIKIPEDIA

http://www.vintage-basic.net/.

Figura 1.14  –  O Apple IIe.

capítulo 1

• 27

©© WIKIPEDIA

Figura 1.15  –  A primeira versão do MacOS.

Com isso nós temos um breve histórico da evolução dos computadores e da forma de interação homem computador até chegarmos aos tempos de hoje. É possível perceber que sempre hove preocupação para tornar a expereiencia de interação mais agradável, principalmente quando hove a evolução da criação de sistemas operacionais com interface gráfica.

1.4  Interfaces e o projeto de interação A comunicação entre usuário e computador deve permitir o diálogo e ela pode ocorrer de duas formas distintas: interface física ou interface virtual. É feita por meio de hardware e por meio físico,

INTERFACE FÍSICA

empregando materiais como cabos, fios, placas, ou dispositivos como mouses, teclado joystic, scanners, caixas de som etc.

28 •

capítulo 1

É feita por softwares meio cognitivo que faz uso de aspectos léxicos (funcionais), sintáticos (estruturais) e semânticos (conteúdo). Um aspecto importante das interfaces virtuais ou lógicas é o uso de metáforas e modelos mentais, que podem ser vistas nos principais sistemas operacionais utilizados atualmente. Elas são analogias a elementos naturais de forma a representar as abstrações contidas nos sistemas computacionais. A partir do

INTERFACE VIRTUAL OU LÓGICA

momento em que começaram a ser utilizados sistemas operacionais com interfaces gráficas, foram feitos usos de metáforas, por um exemplo o desktop ou área de trabalho é uma analogia a uma mesa onde são organizadas todas as tarefas, outra analogia são as pastas, que representam onde são guardados os documentos, também podemos notar a lixeira, onde são descartados os documentos e arquivos que não serão mais utilizados. Todos esses são esforços para deixar a experiência de uso o mais natural possível ao usuário.

Figura 1.16  –  Exemplo de uma área de trabalho, bem lotada e não organizada.

capítulo 1

• 29

A combinação de interfaces física e gráfica ou lógica em celulares exige um projeto de interação que leve em conta uma relação compreensível entre o aplicativo do aparelho e seus botões e teclado. Em avaliações feitas por alunos da disciplina de TASI utilizando princípios de projeto, metas de usabilidade, heurísticas, entre outros conceitos, foi possível verificar que o parelho Nokia é um dos mais simples de operar, enquanto o Motorola está entre os mais complicados. Mas, na verdade, quando falamos de interação de humanos e computadores, falamos de congruência de interfaces, que nada mais é do que a combinação de interfaces físicas e interfaces virtuais. Nesse sentido, é preciso entender que a combinação entre ambos os elementos precisa ser efetiva, clara e consistente, para que, por meio de dispositivos físicos, a interface gráfica reaja apresentando repostas aos estímulos de acordo com as expectativas dos usuários. Agora me diga, quem não fica louco de raiva quando o mouse para de funcionar? Entretanto, alguns novos dispositivos já vêm eliminando alguns elementos de interação física, como é o caso de dispositivos touchscreen.

ATENÇÃO Tanto interfaces físicas como virtuais devem levar em consideração as capacidades físicas e culturais dos seres humanos, e aqui um ponto de extrema importância e a acessibilidade desses sistemas, aos mais diferentes tipos de usuários que irão utilizar o sistema.

Sendo assim, independentemente de qualquer tipo de sistema que seja projetado, é preciso considerar os seguintes aspectos: •  Atender o tipo de atividade esperada pelo usuário; •  Estudar a interface mais apropriada para entrada e saída de dados, que seja apropriada às características do usuário. •  Oferecer funcionalidades complementares como forma de flexibilizar o processo de interação. Para o desenvolvimento de uma boa interface o que costuma ser chamado de uma interface amigável, deve-se levar em consideração: – Perfil do usuário (Para quem?) – Dispositivos de interação (Como?) – Tarefas (O que?/Quando?)

30 •

capítulo 1

Mas o que seria uma interface ideal? Amigável? É o conceito de que a interface de um sistema deve produzir uma experiência prazerosa, de fácil manuseio e aprendizado. Deve-se tentar agregar ao máximo características com as quais o usuário já esteja acostumado. Outro ponto a ser evitado são interfaces carregadas com muita informação. Ao contrário do que se possa imaginar, ao disponibilizar muita informação, a interface pode ficar tão confusa que o usuário não consiga encontrar o que ele está procurando. O sistema deve ter componentes que incentivem o aprendizado autônomo, ou seja, interfaces amigáveis devem ser invisíveis, de forma que o usuário somente se preocupe com a tarefa a ser realizada Ela não pode tomar mais atenção do usuário do que a própria tarefa e deve ser fácil de usar, aprender e memorizar.

1.4.1  Futuro da IHC É claro que nós ainda não alcançamos os níveis propostos pela ficção científica, mas podemos dizer que estamos caminhando, mesmo que lentamente para um novo paradigma na construção de softwares que trabalham segundo uma nova e diferente perspectiva de interface, uma evolução substancial já foi experimentada com a popularização de dispositivos touchscreen, como celulares e tablets, tecnologia que também já atingiu os computadores. Essa mudança de paradigma mudou drasticamente os tipos de interação, alterando também os níveis de abstração e os tipos de metáforas utilizadas nos softwares e aplicativos desenvolvidos. Os movimentos realizados em dispositivos touchscreen (movimentos de pinça) são mais naturais do que os realizados em desktops com o uso de mouses. Também podemos citar o kinect desenvolvido pela Microsoft que, com certeza, entrega uma experiência completamente nova, se levarmos em consideração o que foi produzido até hoje. Uma tecnologia que não se popularizou ainda, e é uma quebra de paradigma, é o recém-desenvolvido Google Glass, que permite uma experiência completamente diferente do que estamos acostumados.

capítulo 1

• 31

©© FALLOSTUPIDO | DREAMSTIME.COM

Figura 1.17  –  O Google Glass.

Ou seja, essa área ou ciência de interação humano computador ou humano máquina é bastante dinâmica e com certeza muitos paradigmas ainda serão quebrados, mas os profissionais devem estar preparados para as novas tendências do mercado e, mais do que isso, devem estare preparados para inovar e ditar as novas tendências do mercado. É uma área que exige criatividade, e recompensa muito bem por essa criatividade. Você pode conquistar o mundo, é só ter uma boa ideia. Alguém se habilita?

ATIVIDADES 01. Faça uma pesquisa na internet e procure o termo “tecnologia vestível”. O que é isso? 02. O que é engenharia de usabilidade? 03. O que fala a norma técnica ISO/IEC 9126 a respeito de usabilidade? 04. Por que a área de interface humano computador é tão importante?

32 •

capítulo 1

05. Faça uma pesquisa e explique como o JQuery e outras bibliotecas colaboram para as interfaces atualmente. 06. Faça outra pesquisa na internet e descreva resumidamente o que melhorou nas interfaces do Microsoft Windows, desde sua primeira versão até a versão 10.

REFLEXÃO A área de interface e de usabilidade realmente precisa ser levada a sério, e que bom que as empresas e a academia estão se preocupando com isso. Porém, é uma área multidisciplinar o pessoal da área de TI tem de entender que, sem profissionais com formação em design e comunicação, um novo sistema operacional, um site, ou qualquer outra forma de interação entre o computador e o homem, não serão adequadamente desenvolvidos. E vice-versa: o pessoal de design precisa da turma da TI para poder colocar em prática as ideias e conceitos que eles estão desenvolvendo. Pensando assim, grandes sites e sistemas operacionais foram desenvolvidos e fazem sucesso até hoje.

LEITURA Sugerimos os seguintes sites como recomendação e forma de aprimorar o que foi visto neste capítulo: O JQuery é uma biblioteca que proporcionou grandes avanços na área de interatividade na internet. Acesse o site do JQuery para ver o que é possível ser feito: https://jquery.com/ Apesar de ser um pouco antigo, o artigo a seguir mostra um estudo de caso envolvendo usabilidade: http://www.scielo.br/scielo.php?pid=S1415-65552003000200007&script=sci_arttext Ainda vamos falar muito do W3C, o World Wide Web Consortium. O W3C contém os padrões que são usados na web para o desenvolvimento de sites e aplicações. Este site deve ser visitado e estudado por todos aqueles que desenvolvem para a internet: http:// www.w3.org/standards/

capítulo 1

• 33

REFERÊNCIAS BIBLIOGRÁFICAS ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. NBRISO/IEC9126-1 Engenharia de software - Qualidade de produto - Parte 1: Modelo de qualidade. 2003. CURRICULA for Human-Computer Interaction. ACM SIGCHI, 2009. Disponivel em: . Acesso em: 1 jul. 2015. CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e usabilidade. São Paulo: Novatec, 2007. JORDAN, P. W. An introduction to usability. Philadelphia: Taylor & Francis, 1998. NORMAN, A. D. User centered systems design. New York: Lawrence Earlbaum Associates, 1986.

34 •

capítulo 1

2 Conhecimento

Toda vez que alguém precisa usar um programa novo, é aquela mesma história: Como faço isso? Como altero aquilo? Por que fazer um programa tão difícil? Será que ninguém pensa que o usuário não tem tempo para aprender a usar os programas? Ele tem que simplesmente executar uma tarefa sem precisar perder horas lendo manual. A maioria dos softwares específicos – aqueles que não atingem o grande público e que não são fabricados pelas gigantes do mercado – não é construída tendo uma grande preocupação com usabilidade. Para tal, é demandada uma intensa participação dos usuários, no processo de definição da interface, na realização de diversos testes e avaliações. Estes passos, além de aumentarem o prazo de construção do software, aumentam também o seu custo. Mas será que não existe um conjunto de regras e critérios para a construção de um programa ergonômico?

OBJETIVOS Este capítulo tratará dos princípios ergonômicos para IHC e fará com que você possa responder à seguinte pergunta: •  O que precisa ser feito para que um software seja minimamente agradável e utilizável?

36 •

capítulo 2

2.1  Princípios Ergonômicos para IHC Assim como o conceito de ergonomia visto na unidade 1, em que se mostrou que os produtos são planejados para atender às necessidades físicas, psicomotoras e cognitivas do ser humano, pode-se observar também a necessidade de construção de softwares ergonômicos que facilitem a vida das pessoas. A ergonomia em IHC tem como objetivo não só facilitar a vida do usuário, mas também adaptar os softwares e a forma de interação às capacidades dos usuários, dando conforto e satisfação. Hoje em dia é quase impossível uma empresa se estabelecer no mercado sem se preocupar com esses temas. Assim, a importância dessas características sobre como as mais diversas ferramentas serão usadas é clara. Portanto, foram desenvolvidas diversas técnicas utilizando-se as teorias existentes para desenvolver parâmetros para gerar softwares ergonômicos.

2.2  Critérios Ergonômicos Os critérios ergonômicos são parâmetros a serem seguidos que podem tornar a experiência de uso mais agradável e eficiente. Em 1993, Dominique Scapin e Christian Bastien propuseram um conjunto de critérios que tem como objetivo minimizar problemas na interação do usuários com o software baseados em dados de aplicação musical. Dois grupos de especialistas avaliaram a interface de uma base de dados de aplicação musical. Após a exploração da interface, as ações e os comentários dos avaliadores foram registrados junto ao estado corrente da aplicação. Posteriormente, uma segunda avaliação foi realizada. Em um grupo a avaliação foi realizada em uma interface utilizando critérios ergonômicos, e o outro grupo fez a avaliação sem critérios ergonômicos. Os resultados preliminares mostram que na primeira fase, ambos os grupos apresentaram problemas de usabilidade realizando avaliações semelhantes. Já na segunda fase a utilização de critérios ergonômicos fez com que os avaliadores encontrassem um numero maior de problemas do que o grupo que avaliou a interface sem levar os critérios ergonômicos em consideração. Sendo assim, ficou clara a utilidade dos critérios ergonômicos na identificação de falhas no projeto. A utilização desses critérios leva ao aumento da integridade do sistema e à diminuição do número de especialistas necessários para identificar possíveis falhas. São no total oito critérios que serão descritos a seguir: capítulo 2

• 37

2.2.1  Condução A condução tem como objetivo auxiliar usuários novatos a utilizar o sistema. A interface deve conduzir o usuário na realização das mais diversas tarefas, no sentido de aconselhar e informar o usuário na interação com o sistema. Quando o usuário é bem conduzido, pode ser observada uma diminuição significativa no número de erros cometidos, uma vez que o aprendizado é facilitado. Presteza: Permite que o usuário identifique em qual estado de interação ele se encontra, ferramentas de ajuda e o seu modo de acesso. Uma boa presteza facilita a navegação no software, diminuindo o erro, como por exemplo: •  Dirigir a entrada de dados indicando o formato adequado e os valores aceitáveis. •  Exibir as unidades de medidas dos dados a digitar. •  Indicar todas as informações sobre estado. •  Para cada campo de dados, fornecer um rótulo. •  Indicar o tamanho do campo quando ele é limitado. •  Quando necessário, fornecer no rótulo informações suplementares. •  Dar um título a cada janela. •  Fornecer ajuda on-line e orientação.

Agrupamentos e distinção entre os itens: Este item diz respeito à distribuição espacial dos itens na tela. Com isso é possível que o usuário faça uma rápida compreensão da tela, para identificar os itens de seu interesse. O critério de distribuição e distinção dos itens se divide em dois: Permite ao usuário identificar semelhanças ou diferenças nos itens segundo o padrão de organiza-

AGRUPAMENTO E DISTINÇÃO POR LOCALIZAÇÃO

ção espacial deles na tela, por exemplo: itens com conteúdos parecidos estão mais próximos. • Organizar os itens em listas hierárquicas. • Organizar as opções de um diálogo por menus, em função dos objetos aos quais elas se aplicam.

38 •

capítulo 2

Permite ao usuário identificar semelhanças ou diferenças entre diferentes classes de itens de acordo com características gráficas. Clareza: Refere-se as características que podem auxiliar ou atrapalhar na leitura das informações textuais. Recomenda-se levar em considera-

AGRUPAMENTO E DISTINÇÃO POR FORMATO

ção características cognitivas e perceptivas dos usuários.

Feedback imediato: refere-se às respostas do computador referentes às ações dos usuários. O computador deve responder a todas as ações dos usuários o mais rapidamente possível. Para os usuários, ausência ou demora no feedback podem ser consideradas como falhas no sistema.

2.2.2  A carga de trabalho Este critério se preocupa em fazer com que o usuário diminua a carga cognitiva e perceptiva, sendo subdividido em brevidade e densidade informacional.

BREVIDADE

CONCISÃO

AÇÕES MÍNIMAS

Este critério leva em

Diminui a carga de traba-

Tenta facilitar ao máximo

consideração o respeito

lho, cognitiva e perceptiva

a carga de trabalho do

que se deve ter com as

com relação às entradas

usuário, simplificando e

capacidades cognitivas,

e saídas do software.

minimizando as ações

perceptivas e motoras

Apresenta títulos, rótulos,

necessárias para que

dos usuários.

denominações curtas.

uma tarefa seja rea-

Fornece o preenchimen-

lizada. Presença de

to automático de vírgulas,

atalhos, com imagens

pontos decimais e zeros

representativas.

à direita da vírgula nos campos de dados.

capítulo 2

• 39

2.2.3  O controle explícito Este critério se refere tanto ao controle que o usuário tem sobre a interface do sistema quanto ao processamento e respostas dados pelo sistema ao usuário. Se refere ao processamento e resposta dados pelo siste-

AÇÕES EXPLÍCITAS

ma a uma ação executada pelo usuário por intermédio da interface. Deve ficar explicito que o sistema só irá executar estritamente o que foi solicitado pelo usuário.

O usuário deve estar no controle, e o sistema deve

CONTROLE DO USUÁRIO

retornar estritamente o que lhe foi solicitado, entretanto é interessante que o sistema se antecipe e o ofereça opções que lhe auxiliem a executar determinadas ações, mas sempre deixando o usuário no controle da situação.

2.2.4  Adaptabilidade Não é possível uma interface atender às necessidades de todos os seus usuários. Sendo assim, ela deve ser capaz de se adaptar segundo as preferências dos usuários. Permite que uma tarefa possa ser realizada de diversas

FLEXIBILIDADE

formas, dando ao usuário a possibilidade de escolher a estratégia com a qual mais se familiarize.

O sistema deve prever que existem usuários de diferentes níveis (iniciantes e especialistas) e que esses usuários

EXPERIÊNCIA DO USUÁRIO

têm necessidades diferentes. Muitos diálogos são entediantes e maçantes para usuários experientes, ao passo que a falta deles torna a experiência de uso inviável para usuários iniciantes.

40 •

capítulo 2

2.2.5  A gestão de erros Este critério se refere a todos os mecanismos disponíveis no sistema capazes de reduzir a ocorrência de erros, e, caso eles ocorram, que a sua correção seja facilitada.

PROTEÇÃO CONTRA OS ERROS

Refere-se aos mecanismos disponíveis para detectar e prevenir os erros de entrada de dados.

Refere-se à qualidade, clareza e legibilidade da mensagem

QUALIDADE DAS MENSAGENS

de erro apresentada ao usuário, qual foi o erro e o que deveria ter sido feito para que esse erro não ocorresse ou o que deve ser feito para corrigir o erro?

CORREÇÃO DE ERROS

Quais são os recursos disponíveis para que o usuário possa corrigir eventuais erros?

2.2.6  A homogeneidade/Consistência (coerência) Neste critério, o objeto das interfaces são idênticos para contextos idênticos, e diferentes para contextos diferentes. •  Localização similar dos títulos das janelas. •  Formatos de telas semelhantes. •  Procedimentos similares de acesso às opções dos menus. •  Na condução, sempre utilizar as mesmas pontuações e as mesmas construções de frases. •  Apresentar na mesma posição os convites (prompts) para as entradas de dados ou de comandos. Os formatos dos campos de entrada de dados devem ser sempre os mesmos.

capítulo 2

• 41

2.2.7  O significado dos códigos e denominações A significância dos códigos se refere à adequação expressão/objeto dos códigos empregados na interface com o usuário. Adequar o vocabulário de rótulos, títulos, cabeçalhos, mensagens, opções de menu, bem como, definir figuras significativas para os ícones e abreviaturas significativas.

2.2.8  A compatibilidade A organização das saídas e entradas de uma dada aplicaçãodeve estar de acordo com as características dos usuários (memória, percepção, hábitos, competências, idade, expectativas, etc.) e da tarefa. Um método de avaliação com base em critérios constitui uma abordagem analítica. Como tal, os critérios são não se destinam a substituir outros métodos de avaliação (por exemplo, "baseada em modelo" métodos, questionário, entrevista, etc).

ATENÇÃO A abordagem de utilização de critérios é um meio de garantir a conformidade com as diretrizes de design de software. Assim, pode ser usada antes do teste do usuário para descobrir e corrigir eventuais falhas no projeto inicial. Entretanto, os critérios devem ser vistos como um suplemento a outros métodos de avaliação, e são usadas somente abordagens analíticas sem em nenhum momento contar com métodos de avaliação baseados em questionários, entrevistas e etc.

PROJEÇÕES FUTURAS – Estender o conteúdo de cada critério, aumentando os níveis de detalhamento, incluindo um conjunto completo de "regras" específicas para cada um dos critérios. – Definir um conjunto de prioridades para a avaliação para cada critério. Por exemplo: Para usuários inexperientes, a orientação deve ser priorizada em relação à flexibilidade ou ao desempenho. O foco no desempenho deve ser adicionado aos poucos, de acordo com a experiência do usuário.

42 •

capítulo 2

PROJEÇÕES FUTURAS – Definir os pré-requisitos para a avaliação, ou seja, definir quais são todas as características necessárias aos usuários para aplicação de cada critério. – Definir formas de avaliar sistematicamente os elementos e estados da interface (telas, janelas, sequências de tarefas, etc.). – Utilização de ferramentas de apoio para um completo sistema de avaliação (help).

2.3  Recomendações Ergonômicas para IHC As recomendações ergonômicas representam a fonte de conhecimentos mais utilizada pelos ergonomistas em suas intervenções. A maior parte dos padrões para IHC têm orientações e recomendações ergonômicas que vêm sendo desenvolvidas pelos órgãos de normalização, International Organização de Normalização (ISO) e Internetional Electrotechnical Comission (IEC), ao longo dos últimos 20 anos. Esses padrões são desenvolvidos por grupos de peritos ao longo de vários anos. Nas fases iniciais, os documentos podem mudar significativamente de uma versão para outra, até que um consenso seja atingido. A partir do momento em que o padrão se torna mais ”maduro”, uma votação formal ocorre através da participação de membros de órgãos de normalização. Uma das funções das normas é impor consistência. Houve uma tentativa de fazer isso por meio das normas ISO / IEC para componentes de interface, tais como: ícones, scripts, controle de cursor, etc. No entanto, para essas áreas os padrões definidos pela indústria foram mais influente do que as normas ISO. Sendo assim, elas não foram amplamente adotadas. As normas podem ser: •  Oficiais, concebidas por organismos de padronização. •  Guias de estilo, concebidos por grandes companhias. As normas tiveram maior impacto a partir da norma ISO 9241 e ficaram mais centradas em atividades necessárias para produzir produtos utilizáveis a partir da norma ergonômica ISO 13407. Estes princípios foram refinados e ampliados em um modelo de boas práticas de usabilidade que pode ser utilizados para

capítulo 2

• 43

avaliar a capacidade de uma organização em desenvolver um design centrado no usuário com a norma ISO TR 18529. A norma ISO PAS 18152 estende esses conceitos para a avaliação da maturidade de uma organização na execução dos processos que fazem um sistema utilizável, saudável e seguro. As normas relativas à usabilidade abordam principalmente temas como: 1. Eficácia, eficiência e satisfação na utilização do produto. 2. Interação do usuário com a interface. 3. O processo utilizado no desenvolvimento do produto. 4. Design centrado no usuário.

ATENÇÃO Um ponto fraco da maioria dos padrões estabelecidos para IHC é que eles são discutidos e desenvolvidos com base em teorias, e não em processos práticos, ou seja, as normas não são desenvolvidas om base na resposta dos utilizadores ao interagirem com os sistemas testando protótipos durante o desenvolvimento. Outra limitação das normas internacionais é que o processo de desenvolvimento é lento, e o conteúdo depende do esforço voluntário de especialistas apropriados.

2.3.1  Objetos de interação Há algum tempo, na história dos computadores, a interação com os usuários era extremamente difícil. Somente especialistas eram capazes de interagir com o computador, enviando-lhe comandos e recebendo respostas. Não vamos aqui traçar uma nova linha do tempo descrevendo novamente a história dos computadores, mas acho que todos já tiveram a oportunidade de ver o que era a famosa linha de comando.

44 •

capítulo 2

Figura 2.1  –  O prompt do DOS no MS Windows.

Antigamente toda a interação era assim, escreviam-se comandos específicos, que por vezes mais pareciam códigos, e esperavam-se as repostas na tela em formato texto. Contudo, desde o Apple 2, esse conceito foi modificado com o intermédio da interface gráfica, onde são geradas imagens para interagir com os usuários, que podem ser manipulados (aumentados, diminuídos, movimentadas), sendo organizados por uma estrutura de janelas, menus, barra de ferramentas etc., utilizando metáforas do mundo real e linguagem natural para tornar a interação dos usuários com o computador mais fluida e intuitiva.

Figura 2.2  –  Pasta sendo usada como metáfora do mundo real.

capítulo 2

• 45

Com a evolução da informática foram estabelecidos alguns elementos e objetos de interação entre usuário e computador que serão explorados a seguir. 2.3.1.1  Painéis de controle Janelas As janelas devem ter um layout padronizado para toda aplicação, geralmente tem um título, em sua parte superior, centralizado ou à esquerda, tendo os principais comandos à vista do usuário. Quando for possível abrir várias janelas simultaneamente, a janela ativa deverá estar destacada.

Figura 2.3  –  Figura 3: Uma janela simples.

Caixas de diálogo As caixas de diálogo apoiam operações específicas, não contendo menus ou barras de tarefas. E, assim como nas janelas, os títulos devem ser centralizados ou deslocados para a esquerda, tendo botões que executem a ação referida rapidamente, além do fechamento rápido da caixa de diálogo.

46 •

capítulo 2

• Caixas de diálogo modal: impedem o usuário de realizar qualquer outro tipo de ação nos sistema, exigindo dele atenção exclusiva.

Figura 2.4  –  Figura 4: Caixa de diálogo.

• Caixas de diálogo não modal: Não exige atenção exclusiva do usuário, permitindo que ele realize outras ações, enquanto a caixa de diálogo fica em segundo plano.

Figura 2.5  –  Figura 5: Caixa de diálogo.

Formulários: Este tipo de caixa de diálogo está destinado especificamente à entrada de dados. O layout deve ser autoexplicativo, agrupando de forma lógica e intuitiva os diferentes tipos de dados. As ações de entrada devem iniciar-se pelo preenchimento do primeiro campo, no alto, à esquerda, que deverá estar com o foco das ações quando da apresentação dele.

capítulo 2

• 47

•  Campos de preenchimento obrigatório devem ser diferenciados visualmente e, se possível, os campos que contenham dados críticos para o sistema devem ser identificados e protegidos contra acidentes de operação. Mensagem que advirta sobre os efeitos da ação e solicite a confirmação do usuário, deve ser apresentada sempre que o campo for modificado.

Figura 2.6  –  Um formulário para ambiente desktop.

Figura 2.7  –  Um formulário para web.

48 •

capítulo 2

Caixas de Mensagens: São utilizadas para informar o usuário sobre: •  O que fazer nas interações; •  Em que estado se encontra o sistema; •  A resposta do sistema a uma ação sua; •  Uma situação perigosa, de erro ou de anormalidade; •  Como recuperar a normalidade de um sistema. Normalmente, essas mensagens são do tipo modal, ou seja, o usuário precisa tomar conhecimento clicando em algum botão (Ok, por exemplo), para continuar usando o sistema. Quando a mensagem se destina a solicitar a confirmação de uma ação destrutiva, a opção default deve recair sobre a anulação, e não sobre a confirmação da ação. Caixas de mensagens envolvendo ações perigosas (formatar disco rígido) devem ser destacadas pelo uso de cor vermelha, pelo efeito de intermitência (pisca) ou ainda por um som.

Figura 2.8  –  Caixa de mensagem.

2.3.1.2  Controles complexos São objetos com estrutura complexa de navegação interna, que permitem a seleção de outros controles e comandos.

capítulo 2

• 49

•  Painel de menu São menus dispostos verticalmente, uns abaixo dos outros.

Figura 2.9  –  Menu do Windows 10.

•  Barra de menu Contém as opções do menu principal e leva às opções secundárias relacionadas ao menu selecionado.

Figura 2.10  –  Barra de menu.

50 •

capítulo 2

•  Barra de ferramentas Menu sem submenus, com opções em forma de ícones associadas a comandos ou ferramentas.

Figura 2.11  –  Barra de ferramentas.

•  Lista de seleção É uma lista de valores possíveis predefinidos pelos desenvolvedores, deve ter de 5 a 9 itens de visualização imediata.

Figura 2.12  –  Lista de seleção.

capítulo 2

• 51

•  Caixa de combinação (ou Combo Box) Deve ser ordenada seguindo ordem alfabética numérica ou por ordem de uso.

Figura 2.13  –  Uma caixa de combinação

2.3.2  Atributos de objetos de interação Os atributos de interação representam símbolos e sinais arbitrários com representação concreta, ou seja, são os modificadores dos objetos de interação. Podemos exemplificar: •  Ícones •  Denominações •  Abreviaturas •  Cores •  Fontes •  Textura •  Vídeo Reverso •  Intermitência Visual (pisca-pisca)

52 •

capítulo 2

ATIVIDADES 01. Os critérios de software apresentados servem para qualquer tipo de plataforma digital? Tablets, smartphones ... 02. Sobre o critério de controle do usuário. Dê um exemplo de auxílio ao usuário sem tirar o seu poder de decisão. 03. Qual a relação entre o critério "Agrupamentos e distinção entre os itens” e o conceito de ergonomia cognitiva? 04. Qual a importância de construir um software seguindo as normas sobre IHC? Qual o benefício no resultado final? 05. Cite 3 exemplos de novas metáforas com o mundo real que poderiam ser utilizadas como objetos de interação com o usuário.

REFLEXÃO Construir um programa voltado para usabilidade levando em consideração critérios ergonômicos não é uma tarefa fácil. Existe a necessidade de uma equipe multidisciplinar, altamente treinada, e a paciência necessária para a interação e participação dos usuários nos processos de determinação das interfaces do sistema. Apesar de encarecer o produto, a utilização de elementos ergonômicos no software torna a experiência de uso mais agradável, colocando o software alguns pontos acima no mercado. Logo essa será uma a exigência do mercado e softwares que não forem construídos segundo princípios ergonômicos cairão naturalmente em desuso. Em contrapartida, novas ferramentas e plataformas vêm cada vez mais ganhando, com novas propostas e novas formas de interação. Mas será que os princípios ergonômicos para esses dispositivos devem ser diferentes, uma vez que a forma de interação é diferente? Essa é uma área em grande ascensão, em que profissionais gabaritados estão em falta. A grande pergunta que fica é: os critérios ergonômicos mudam conforme a forma de interação com o dispositivo?

capítulo 2

• 53

LEITURA As normas podem ser adquiridas (compradas) diretamente da ISO ou por meio de outras organizações. Para um maior e completo entendimento sobre toda a abrangência das normas, é recomendada vista ao site www.iso.org/iso/en. Leia mais sobre os tipos de objetos de interação. No tutorial da linguagem Java existem vários suportados pela linguagem: https://docs.oracle.com/javase/tutorial/uiswing/components/index.html Para a parte de web, veja os principais componentes que podem ser usados na série de tutoriais da W3Schools. Este link é excelente: http://www.w3schools.com/html/html_forms.asp

REFERÊNCIAS BIBLIOGRÁFICAS BARBOSA, S.; SANTANA, B. Interação Humano-Computador. Rio de Janeiro: Campus-Elsevier, 2010. BASTIEN, J. M. C. Ergonomic criteria for the evaluation of human computer interfaces. Research Gate, Lorraine, maio 1993. BEVAN, N. International Standards for HCI. International Journal of Human Computer Studies, Londres, 4, 1 out. 2001. 533-552. Disponivel em: . Acesso em: 1 jul. 2015. OREN, T.; YILMAZ, L. Quality Principles for the Ergonomics of Human-Computer Interfaces of Modeling and Simulation Software. Publications - School of Electrical Engineering and Computer Science, Ottawa, 01 maio 2005. ? Disponivel em: . Acesso em: 1 jul. 2015. ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação. Porto Alegre : Bookman, 2013.

54 •

capítulo 2

3 Desenvolvimento

Neste capítulo, vamos estudar a parte de desenvolvimento de interfaces homem-computador, ou IHC, também conhecida por interface homem-máquina ou IHM. Esta área é muito abrangente e tem vários desdobramentos, mas, neste capítulo vamos estudar alguns assuntos que compõem, de maneira geral, a parte de desenvolvimento de IHC e em especial as técnicas de concepção e de modelagem de interfaces. A interface de um software é algo bastante determinante para o seu sucesso. É muito difícil encontrar um software de sucesso cuja interface não esteja de acordo com sua proposta ou agrade. Até mesmo em jogos eletrônicos: existem alguns sucessos recentes que, mesmo não tendo gráficos realísticos e sofisticados, tiveram uma grande aceitação pelo mercado, e a interface tem grande parcela de responsabilidade nisso. Como exemplo, veja o jogo “FlappyBird”, disponível originalmente para o iphone. Feito em 2013, ele se destacou principalmente pela sua jogabilidade e dificuldade. Outros jogos mais “pesados” se destacam pelos efeitos realísticos de última geração, os quais são verdadeiras produções de Hollywood (literalmente, uma vez que alguns estúdios de jogos são em Los Angeles). Enfim, a interface é um fator que determina o sucesso final de um software.

OBJETIVOS Ao final deste capítulo, você estará apto a: •  Entender o fluxo de desenvolvimento de interfaces gráficas, passando pelas técnicas de concepção e de modelagem de interfaces.

56 •

capítulo 3

3.1  Introdução ao projeto de IHC Em primeiro lugar, precisamos definir o que é projeto, ou design, de IHC. Segundo BARBOSA e SANTANA (2010), podemos dividir o design de IHC em duas partes; a primeira é o Design: •  O Design parte de uma concepção intelectual da experiência do usuário. Cada usuário temsuas experiências e visões a respeito da forma como gostaria que um determinado software fosse. •  A partir daí, o design passa a ser uma concretização desta concepção em uma representação que pode ser implementada. •  A segunda é a parte “de IHC”: •  Neste caso, estamos falando da experiência do usuário, ou seja, como ele vai interagir com o computador, e isto tem a ver com o projeto do software, porém não é sinônimo de projeto de software. Experiência do usuário ou também chamada de UsereXperience (UX), compreende vários fatores sobre o que o usuário sente em relação ao uso de um determinado produto, sistema ou serviço. A ISO 9421-210 define que a experiência do usuário são “as percepções e reações de uma pessoa que resulta do uso ou utilização prevista de um produto, sistema ou serviço”. Na prática, a experiência envolve todo o acúmulo de preferências, respostas, sensações e comportamentos que o usuário possui e adquire com o uso de um software.

De acordo com o trabalho de ROGERS, SHARP e PREECE (2013), o processo de projeto de IHC possui quatro atividades básicas como: 1. Identificação das necessidades e estabelecimento dos requisitos. Nesta atividade, as necessidades dos usuários são levantadas e listadas a fim de serem analisadas para poder ser contempladas futuramente na interface. Desta forma, os requisitos são estabelecidos e documentados. 2. Desenvolver designs alternativos. Nesta atividade, a exploração de vários aspectos com relação ao visual e usabilidade do software podem ser investigados. Novos cenários de interação podem ser criados a fim de avaliá-los e perceber o quanto contribuem com a experiência do usuário. 3. Construir versões interativas dos designs. Atualmente existem vários softwares que ajudam nesta tarefa. Ter uma representação “usável” do software

capítulo 3

• 57

é muito importante, porque também é uma forma de esclarecer os requisitos para a interface. Entre os softwares mais usados para este tipo de versão estão os softwares do tipo wireframe, entre eles:

Figura 3.1  –  BalsamiqMockup.

Figura 3.2  –  Axure.

58 •

capítulo 3

Figura 3.3  –  Microsoft Visio.

Alguns destes softwares têm versões para estudante e, embora sejam pagos quando usados em empresas, são gratuitos para estudantes. 4. Avaliar o design. Uma vez que designs alternativos foram testados e modelados em uma ferramenta de simulação como as apresentadas, as alternativas de design são avaliadas e classificadas por meio de critérios incluindo o número de erros que os usuários cometem ao usar a alternativa avaliada. Além disso, outros critérios como aparência, quantidade de requisitos satisfeitos e outros também são usados. Mesmo com estas atividades mostradas, qualquer processo de design de IHC tem algumas características essenciais que devem ser prezadas durante todo o processo: 1. O foco deve ser mantido sempre no usuário; 2. A experiência que se deseja que o usuário tenha deve ser clara e com os objetivos bem definidos; 3. Deixar o processo iterativo.

capítulo 3

• 59

3.2  Um modelo de ciclo de vida simples para o projeto de IHC Para deixar o processo iterativo, como vimos no final da seção anterior, ROGERS, SHARP e PREECE (2013) elaboraram um modelo de ciclo de vida para representar o modo como as atividades estão relacionadas. O uso de ciclos de vida é uma atividade bem característica da engenharia de software, como o modelo em cascata, o modelo espiral e as aplicações de desenvolvimento rápido. A área de IHC, também usa os modelos de ciclo de vida para a área de projeto de IHC como o modelo Estrela e o modelo da ISO 13407. Estabelecer os requisitos

Design de alternativas

Avaliar

Prototipar

Produto final

Figura 3.4  –  Modelo simples de ciclo de vida de design de interação. Fonte: ROGERS, SHARP, PREECE, 2013.

A figura 3.4 mostra um modelo simples de ciclo de vida de projeto de IHC. Existem vários modelos, e cada um tem a sua complexidade. Podem ser usados em projetos de diferentes. Em projetos nos quais a equipe é pequena, mas experiente, um modelo simples como o da figura pode ser usado. E é claro que, em projetos maiores, envolvendo vários desenvolvedores e muitos usuários, o ciclo de vida deve ser adequado (veja o box).

CONCEITO De acordo com ROGERS, SHARP e PREECE (2013), existem 4 abordagens para o projeto de IHC: • Design centrado no usuário: o usuário é quem sabe o que é melhor e é o único guia do projetista. O projetista implementa aquilo que o usuário propôs.

60 •

capítulo 3

• Design centrado na atividade: neste caso, as tarefas específicas é que são o foco do projeto. O usuário ainda é importante, mas o seu comportamento é que influi neste caso. • Design de sistemas: é uma abordagem estruturada e mais rigorosa. Portanto, ela é mais formal e mais adequada para projetos maiores, pois o sistema como um todo é que se torna o foco. O usuário define os objetivos do sistema. • Design genial (genius design): neste caso, é mais informal e está baseado nas experiências e preferências de um designer. O usuário, neste caso, valida as ideias do designer.

O modelo apresentado na Figura 4 apresenta as quatro atividades do projeto e os três princípios de projeto centrado no usuário. Como já foi comentado, dependendo do projeto, este modelo pode não ser usado em todos os aspectos e podem ser adicionados novos detalhes para adequar o modelo a algum projeto real. Para poder tratar o ciclo de vida de maneira mais adequada, precisamos responder a algumas perguntas: •  Quem são os usuários? •  Quais são as necessidades? •  Como criar designs alternativos? •  Como escolher uma alternativa entre as demais? •  Como integrar as atividades de projeto com outros modelos de ciclo de vida?

3.3  Sobre os usuários Você deve ter percebido que tratamos várias vezes, neste texto, do sobre o quanto o usuário é importante em todo o processo da engenharia de usabilidade. E não é para menos, ele é o principal elemento que vai absorver todos os conceitos que temos tratado aqui. Mas, quem são os usuários? (Parece ser uma pergunta estranha, mas, antes de continuar lendo, tente responder à pergunta). Existem duas principais categorias de usuários: •  Os usuários são as pessoas que usam o sistema. Essa é a resposta mais natural para a pergunta que foi feita.

capítulo 3

• 61

•  Mas também podem ser qualquer pessoa que tem algum tipo de relação com quem usa o sistema (superiores, subordinados, terceiros, etc). Esta é a outra parte da resposta à pergunta. Nem sempre identificamos aqueles que dependem dos usuários principais como sendo usuários também. Existem também os usuários primários, secundários e terciários, os quais devem ser levados em consideração:

USUÁRIOS PRIMÁRIOS

São aqueles que usam o software com frequência.

USUÁRIOS SECUNDÁRIOS

São aqueles que usam o software esporadicamente ou que

USUÁRIOS TERCIÁRIOS

São aqueles afetados pela introdução do sistema ou os ge-

tem intermediários.

rentes que determinam a sua introdução. Também chamados de stakeholders.

De qualquer forma, todos os tipos de usuários têm necessidades que devem ser contempladas pelo projeto da IHC. A principal pergunta que é feita é “Do que você precisa”? Esta pergunta é respondida pelo próprio usuário e/ou por pessoas envolvidas no atendimento destas necessidades. Alan Curtis Klay, um dos fundadores da linguagem Smalltalk e um dos criadores do conceito de orientação a objetos, disse uma vez que “a interface é o programa”. Klay também é conhecido por conceber a arquitetura das atuais GUI (GraphicsUser Interface – Interface gráfica de usuário). O projeto de uma IHC não é um trabalho de uma equipe formada de pessoas da área de TI exclusivamente. É uma atividade multidisciplinar, que envolve informática, ergonomia, psicologia, linguística, design visual, entre outras. E tradicionalmente não faz parte da formação de profissionais da área de informática.

62 •

capítulo 3

3.4  Técnicas de concepção Neste tópico vamos apresentar algumas técnicas usadas para a implementação de especificações para a interface e usabilidade. Concepção significa “geração” e este tópico vai tratar de algumas técnicas apontadas na literatura a respeito de como gerar um projeto de interface homem máquina que seja eficiente e adequado. Dentre as técnicas que vamos apresentar estão: •  Brainstorming •  Cardsorting •  Diagrama de afinidade •  Storyboard •  Maquetes •  Prototipagem rápida •  Protótipos de baixa fidelidade •  Protótipos de alta fidelidade

3.4.1  Brainstorming Esta técnica tem um nome que deriva de duas palavras da língua inglesa: “Brain”, que significa cérebro, e “Storm” que significa tempestade. Logo, “brainstorming” é uma palavra que pode ser traduzida como tempestade cerebral, ou melhor, tempestade de ideias. Na língua “caipirês”, brainstorming pode ser traduzido como “toró de parpites”. Ela foi concebida em 1938 por Alex Osborn, que era presidente de uma agência de propaganda. É uma técnica usada não apenas para a concepção de interfaces, mas para qualquer área que exige que uma equipe exponha as suas ideias para que sejam discutidas em grupo, incentivando a criatividade e a colaboração. Brincadeiras à parte, o brainstorming é uma técnica muito interessante. Ela é feita em grupo de no mínimo 2 (obviamente) pessoas e no máximo 12. O objetivo principal é criar e discutir as ideias surgidas em grupo, de forma participativa e colaborativa. Esta técnica reúne várias pessoas para resolver um determinado problema e também para criar produtos ou, no nosso caso, interfaces e sistemas.

capítulo 3

• 63

Em grupo é mais fácil a compreensão do problema, sua análise e resolução. As discussões são abertas e deixadas livres para o grupo, porém deve existir um intermediador para poder comandar e anotar os resultados. Normalmente tem duas etapas principais: •  A geração das ideias; •  E a crítica das ideias. Embora seja uma técnica bastante interessante, ela tem algumas desvantagens, entre elas: por ser uma discussão aberta, quando uma crítica ocorre e não é bem aceita elo grupo, outras pessoas podem ficar inibidas e deixar de dar uma ideia que seja relevante; além disso, as ideias podem surgir de uma maneira confusa e impedir que exista um detalhamento em cada uma, dificultando a avaliação.

3.4.2  CardSorting O cardsorting ou classificação de cartas tem como objetivo descobrir o modelo mental dos usuários em relação aos itens de informação para uma aplicação. Ou seja, esta técnica tenta descobrir como o usuário classifica uma determinada informação na sua mente. Normalmente é usada com usuários inexperientes em design os quais são guiados a criar uma árvore de categorias, chamada taxonomia. Esta técnica é muito útil para a arquitetura de informação, fluxos de trabalho, estruturas de menu ou caminhos de navegação em um site. Basicamente é uma técnica que não depende de muita tecnologia. Consiste em escrever as categorias em papel e espalhá-las em uma área para visualmente fazer a classificação.

64 •

capítulo 3

Figura 3.5  –  CardSorting.

Veja na figura 3.5 um exemplo dos cartões. Neste caso, são cartões autoadesivos, espalhados na área de estudo. Normalmente um usuário é escolhido para fazer a classificação em grupos. Resumindo, a técnica funciona de acordo com o seguinte método: 1. Um usuário recebe um grupo de cartões previamente nomeados por um analista. Neles está escrita a funcionalidade que se deseja da interface; 2. Esta pessoa classifica os termos em grupos lógicos (o que foi chamado de taxonomia) e acha uma categoria para cada grupo; 3. O processo é repetido entre um conjunto de situações ; 4. O resultado depois é analisado para que os padrões sejam identificados e definidos. Enquanto as sessões são realizadas, o analista pode conversar com o usuário sobre a classificação que foi feita e registrá-la. Após as sessões, as escolhas feitas pelos usuários que participaram das sessões são analisadas conjuntamente, e os termos comuns são numerados com uma porcentagem de concordância. Quanto maior o número, maior é sua indicação para ser usado.

capítulo 3

• 65

No final do processo, o analista terá uma quantificação dos dados e tem condições de criar um relatório resumindo e cruzando o que foi anotado e também terá a taxonomia sugerida pela média dos usuários.

3.4.3  Diagrama de afinidade O diagrama de afinidade foi criado em 1960 por JiroKawakita com a finalidade de organizar um grande número de ideias de acordo com seus relacionamentos naturais. Basicamente esta técnica é usada quando existe um grande número de ideias, opiniões ou preocupações sobre um determinado assunto. Normalmente é usada na fase de planejamento e, assim como as outras técnicas apresentadas até agora, são usadas para a criação e organização das ideias sobre IHC. A técnica possui o objetivo de estimular a criatividade e a participação total do grupo, que deve ser de um tamanho limitado a no máximo 8 pessoas que trabalham juntas se possível. Esta técnica é muito relacionada com o Brainstorming, pois pode ajudar com a organização das ideias. Existe um pequeno roteiro de construção do diagrama: 1. Após o brainstorm, gerar os dados para a construção do diagrama. 2. Espalhar os dados em uma área que seja visível a todos. 3. Agrupe os dados, contendo no máximo 5 com alguma característica em comum. 4. Nomeie o grupo de acordo com a característica comum de agrupamento e coloque como um cartão título, diferenciando-o dos demais. 5. Cada grupo é preso ao seu cartão título correspondente. O cartão título deve permanecer visível dos demais. 6. Repetir os passos 3, 4 e 5 usando os cartões título como cartões de dados 7. Repetir os passos 3, 4 e 5 para cada conjunto novo de cartões título que foram criados até que se tenha apenas um grupo com 5 cartões título. 8. O diagrama será construído a partir dos pequenos grupos iniciais. Fazer um retângulo envolvendo cada grupo. 9. No lado superior do retângulo, coloque o cartão título do grupo. 10. Faça outro retângulo sobre os retângulos cujo título forma um grupo.

66 •

capítulo 3

Veja um exemplo de um diagrama de afinidades na figura 3.6. Desenvolver estratégias para aumentar o nível de qualidade dos produtos oferecidos

Informações

Tema

Elevar o grau de entusiasmo dos funcionários

Elevar o nível de controle da empresa

Aprimorar o Sistema de Garantia da Qualidade

Elevar a motivação do pessoal de vendas

Aprimorar o controle da lucratividade

Perseguir uma imagem de qualidade superior à dos concorrentes

Incentivar o espírito de busca por desafios

Melhorar o nível dos profissionais de controle

Alcançar “nível zero” de reclamações dos clientes

Título do Grupo

Aprimorar as habilidades técnicas da empresa

Bordas Certificar know-how técnico de empresas afiliadas

Alcançar liderança em tecnologia na indústria

Elevar o número de patentes obtidas anualmente

Figura 3.6  –  Diagrama de afinidades.

3.4.4  Storyboard Esta é uma técnica mais relacionada com a concepção do que as anteriores. Se você percebeu com atenção, as técnicas anteriores são úteis para organizar e criar novas ideias. A partir desta vamos ver técnicas relacionadas com a concepção especificamente. O storyboard é uma forma de representar as interações entre os usuários e o sistema em seu ambiente de trabalho. O storyboard é muito usado em outras situações como por exemplo na pré-visualização de um filme, de uma animação e outras semelhantes. Na verdade o grande criador e difusor desta técnica foi ninguém menos que Walt Disney! É claro que para ele a finalidade é outra, mas para nós, o storyboard é usado na melhoria da documentação dos requisitos de IHC.

CONEXÃO Para quem gosta de música dos anos 1980, o grupo musical A-Ha lançou um videoclipe que é baseado em um storyboard. Assista ao vídeo em https://www.youtube.com/watch?v=djV11Xbc914 para relaxar um pouco dos estudos!

capítulo 3

• 67

O storyboard é feito para detalhar um cenário do sistema por meio de uma sequência de desenhos. Os softwares indicados anteriormente podem ajudar nesta situação. Os desenhos também podem ser feitos em papel e colocados em uma área visível aos outros membros das sessões de discussão. Por meio desta exposição, os desenhos podem ser avaliados e discutidos entre os usuários e designers e devem estar baseados em princípios de usabilidade.

Figura 3.7  –  Exemplo de um storyboard para software.

3.4.5  Maquetes – protótipos em papel As maquetes também são usadas em várias áreas diferentes da área de informática e IHC, entre elas a arquitetura e a engenharia. Você já deve ter visto na televisão que as maquetes são úteis em filmes, como Star Wars, para a construção de situações de batalhas no espaço. As maquetes na IHC contribuem bastante para esclarecimento e desenvolvimento de requisitos específicos para a interface do programa e, da mesma forma como ocorrem nos filmes, elas servem para simular e testar as interações com o usuário. Por ela servir como uma forma de simulação, a técnica permite a prévia identificação de problemas com usabilidade. A técnica também tem um ciclo de atividades, definido como: 1. Conceito: nesta atividade são elaborados os aspectos conceituais e as estruturas gráficas das telas. 2. Iteração: nesta atividade as navegações entre as telas são organizadas.

68 •

capítulo 3

3. Projeto das telas: é a atividade em que os vários tipos de componentes são colocados nas telas. 4. Teste das telas: nesta etapa, com os componentes alocados aos seus lugares, questões como combinação de cores e outros elementos gráficos são testados.

Figura 3.8  –  Exemplo de protótipo de uma tela em papel.

3.4.6  Prototipagem rápida Observando novamente a figura 3.1, a figura 3.2 e a figura 3.3, percebemos que existem softwares que auxiliam bastante o processo de prototipação das telas. A prototipagem rápida utiliza estes softwares para simular o sistema final com mais fidelidade do que as telas em papel. As telas em papel são ótimas, mas não permitem ver como fica a navegação entre as telas realmente. O problema deste tipo de software é que é necessário passar um tempo para criar os protótipos e este tempo, se não estiver bem definido durante o planejamento do projeto, pode significar em uma perda valiosa de tempo da parte de desenvolvimento. Usando os protótipos em software, é possível obter um feedback mais rápido e fiel sobre a interface e desta forma saber os problemas e vantagens da interface em desenvolvimento.

capítulo 3

• 69

MULTIMÍDIA Assista a alguns vídeos do Axure, um software bastante usado para prototipação: http://www.axure.com/learn. Os vídeos vão ajuda-lo a entender como estes softwares contribuem para o processo de prototipação.

3.4.7  Prototipagem de baixa e alta fidelidade As técnicas que foram apresentadas anteriormente são baseadas em protótipos. Um protótipo é uma manifestação de um projeto que permite aos stakeholders interagirem com ele e explorarem sua adequação. É na verdade um modelo, uma representação do que pode ser o produto final. Um protótipo de baixa fidelidade é aquele que não se parece muito com o produto final. Por exemplo, podemos usar impressões 3D para representar um novo modelo de um telefone celular. Os protótipos de baixa fidelidade são úteis porque são simples e de rápida produção. Mas não é porque são simples significam que são baratos e rápidos de serem modificados. O storyboard é um exemplo de protótipo de baixa fidelidade, assim como o cardsorting. A prototipação de alta fidelidade, como se espera, utiliza materiais que estarão no produto final. Você já deve ter visto aqueles carros conceito que as montadoras produzem e expõem nos salões automotivos, certo? É um bom exemplo de protótipo de alta fidelidade. Na informática é possível criar protótipos com linguagens rápidas de desenvolvimento como o Visual Basic por exemplo, para que o usuário tenha noção de como vai ficar o software final. O protótipo de alta fidelidade é útil para vender ideias para as pessoas e para testar questões técnicas. TIPO Protótipo de baixa fidelidade

70 •

VANTAGENS

DESVANTAGENS

- custo mais baixo de desenvolvimento - avalia múltiplos conceitos de design - instrumento de comunicação útil - aborda questões de layout de tela - útil para identificação de requisitos de mercado - demonstração de que o conceito funciona

- verificação limitada de erros - especificação pobre em detalhe do código - mais facilitado - utilidade limitada após estabelecimento dos requisitos - utilidade para testes de usabilidade limitada - limitações de fluxo e navegação

capítulo 3

TIPO Protótipo de alta fidelidade

VANTAGENS - funcionalidade completa - totalmente interativo - dirigido aos usuários - define claramente o esquema de navegação - uso para exploração e teste - mesma aparência do produto final - serve como uma especificação viva - ferramenta de venda e marketing

DESVANTAGENS - desenvolvimento mais caro - sua criação demanda tempo - ineficiente para demonstrações que o conceito funciona - não serve para coleta de requisitos

Tabela 3.1  –  Eficácia relativa dos protótipos de baixa vs alta fidelidade (ROGERS, SHARP e PREECE, 2013).

Alguns autores concordam com o fato de que mais projetos deveriam usar a prototipação de baixa fidelidade porque os problemas existentes na prototipação de alta fidelidade, podem prejudicar o andamento do projeto. Alguns problemas dos protótipos de alta fidelidade são: •  Levam muito tempo para serem desenvolvidos; •  A equipe de teste tem a tendência de comentar mais sobre aspectos superficiais do que o de conteúdo; •  Como os desenvolvedores levam tempo para criar o protótipo, eles acabam sendo relutantes de mudar alguma coisa depois; •  Um protótipo em software pode criar expectativas muito altas; •  Um bug em um protótipo de alta fidelidade já pode parar os testes. Outras vantagens e desvantagens encontradas nos protótipos estão mostradas na tabela3.1.

3.5  Técnicas de modelagem de interface Uma vez que vimos as técnicas para a concepção de interface, vamos agora apresentar algumas técnicas relacionadas com a modelagem de interface. Estas técnicas são um conjunto de etapas e atividades para a definição de elementos concretos partindo de elementos abstratos. Vamos analisar duas técnicas: •  The bridge, criada por Tom Dayton em 1996 •  Design centrado no usuário, criada por LaryConstantinee Lucy Lockwood em 1999

capítulo 3

• 71

3.5.1  The Bridge A metodologia The Bridge (“A Ponte”) é, de acordo com seus autores, uma metodologia abrangente e integrada para projetar rapidamente interfaces de usuário gráficas orientadas a objeto e multiplataforma. A metodologia lida em grande parte com a questão da criação da tarefa de modelos de interação e os processos que são necessários para que isso aconteça (WARREN, 1997). Esta técnica se baseia em uma sequência de sessões de projeto envolvendo várias pessoas (usuários, programadores e analistas) que criam uma “ponte” entre os requisitos dos usuários e da organização e o projeto de uma interface que apoie estes requisitos. As atividades principais deste método são: •  Expressar os requisitos de usuários por meio de um fluxo de tarefas: nessa etapa, os envolvidos definem um fluxograma de trabalho para o sistema a ser executado pelo usuário. •  Mapear os fluxos de tarefa em objetos da tarefa: uma vez que os fluxogramas de tarefas estão definidos, eles são analisados e transformados em objetos de tarefa. Estes objetos correspondem a janelas, caixas de diálogo e caixas de mensagens. •  Mapear objetos da tarefa em objetos de interface: os protótipos dos objetos de interface definidos nesta etapa devem ter sua usabilidade testada pelos usuários que participaram das sessões de projeto. Início Hóspede solicita vefirificação de reserva

Atendente solicita nome do hóspede

Atendente encontra a reserva

Atendente escolhe um quarto

Rsultado Hóspede oculpa um quarto

Figura 3.9  –  Exemplo de fluxograma de trabalho.

3.5.2  Usercentered design O usercentered design (UCD) ou design centrado no usuário também é conhecido por processo de design centrado no usuário e, devido a isto, é utilizado em várias áreas da manufatura, arquitetura e outras. Existem exemplos na internet do uso desta técnica no design de automóveis (WORLD WIDE WEB CONSORTIUM (W3C), 2004).

72 •

capítulo 3

A norma 9241-210:2010 também estabelece que “o design centrado no usuário é uma abordagem para o desenvolvimento de sistemas interativos que focam especificamente em fazer sistemas usáveis. É uma atividade multidisciplinar. No design centrado no usuário, todos os processos de desenvolvimento têm o usuário como foco. O design centrado no usuário, de acordo com Rubin (1984), pode ser representado como dois círculos: •  Os usuários estão no centro; •  O círculo interno contém: Contexto, objetivos, ambiente e metas; •  O círculo externo contém: Detalhe das tarefas, conteúdo das tarefas, organização de tarefas e Fluxo de Tarefas.

Organização de tarefas

Metas

Detalhes das tarefas

Contexto

Conteúdo das tarefas

Objetivos

Ambiente Fluxo das tarefas Figura 3.10  –  Design centrado no usuário (RUBIN, 1984).

O design centrado no usuário possui os seguintes princípios: •  Foco inicial em usuários e tarefas o Reunião sistemática de informação estruturada: é importante que toda informação estruturada seja juntada e analisada pela equipe. o Designers treinados por especialistas antes de conduzir as sessões de coleta de dados: antes de os dados serem coletados pelos

capítulo 3

• 73

designers, é importante que os especialistas passem sua experiência para os designers. •  Medidas empíricas e teste de uso do produto o Foco na facilidade de aprendizagem e facilidade de uso. o Teste de protótipos com usuários atuais. •  Design iterativo o Produto projetado, modificado e testado repetidamente. o Permite uma revisão completa e revisão do design por testes preliminares de modelos conceituais e ideias de design. O objetivo do design centrado no usuário é criar um processo de design que aumenta a usabilidade do produto. Iniciação

Requisitos

Especificação

Projeto

Implementação

Design centrado no usuário: O usuário é envolvido aqui

Testes

Modelo clácissico: O usuário é envolvido aqui

Tabela 3.2  –  Diferença do estágio onde o usuário é envolvido.

O design centrado no usuário é uma forma de abordagem que pressupõe que os designers irão prever como os usuários usarão o produto e também vão testar a validade do que foi levantado com os usuários reais. Segundo Woodson (1981), o design centrado no usuário pode ser entendido como uma prática de criar produtos de forma que os usuários sejam capazes de usá-los com o mínimo de stresse e o máximo de eficiência. A participação dos usuários, como estamos percebendo, é fundamental neste tipo de abordagem. Eles são importantes para que: 1. As ideias sejam validadas; 2. Novas ideias surjam a partir da equipe envolvida; 3. Diminuir custos e retrabalho; 4. Evitar o desenvolvimento de funcionalidades inúteis e o excesso de informação.

74 •

capítulo 3

Existem algumas técnicas que podem ajudar nesta abordagem:

ENTREVISTAS COM USUÁRIOS E STAKEHOLDERS

Já vimos que envolver quem vai usar o produto é fundamental. Se eles são os maiores interessados no resultado, envolvê-los juntamente com quem patrocina o produto é importante.

É outra técnica bastante interessante. Por meio da

OBSERVAÇÃO EM CAMPO

observação do comportamento no seu ambiente de trabalho, é possível perceber como ele poderá usar o produto.

O uso de questionários é muito incentivado. Se forem anônimos, pode ser ainda melhor, pois muitas vezes

QUESTIONÁRIOS

os usuários podem se sentir acanhados ou incomodados de alguma forma quando estão em sessões diretas e pessoais. Um questionário pode afastar a inibição e recolher requisitos preciosos para o produto.

CARDSORTING

Já vimos esta técnica antes e estudamos que ela classifica os requisitos de maneira bastante eficiente.

Outra ideia interessante é a incorporação de papéis pelos usuários, ou personificação. Por meio das personas criadas, o usuário pode dar sinais do que

PERSONAS

é necessário no produto final. O papel de usuário é definido como um tipo de usuário que apresenta necessidades, interesses, expectativas, comportamentos ou responsabilidades específicas em relação ao produto ou sistema.

PROTOTIPAÇÃO

Outra técnica que já foi vista anteriormente.

capítulo 3

• 75

TESTES COM USUÁRIOS

Os protótipos são muito usados e a utilização de testes certamente é outra forma de colocar o usuário como validador do que foi prototipado.

São semelhantes aos casos de uso da UML. São

CASOS DE TAREFAS

definidos como narrativas estruturadas e simplificadas de interação realizada pelo usuário desempenhando seu papel por meio do sistema.

3.6  Considerações finais Vimos várias técnicas para obter os requisitos dos usuários e stakeholders para construir melhores produtos. Quando tratamos dos projetos relacionados com IHC, podemos resumir as várias características favoráveis das técnicas para o bom projeto: •  Envolver as soluções relacionadas aos aspectos essenciais da interface no início; •  Prever a descrição de soluções em termos abstratos inicialmente, e detalhar progressivamente conforme o projeto avança; •  Prever transformações, representando com mapeamento os aspectos de uma representação e outra; •  Prever diversas oportunidades para que tais definições sejam repartidas e validadas pelos usuários. Portanto, quando consideramos o usuário, a abordagem de projeto centrado ao usuário, leva em conta o ser humano em cada etapa do desenvolvimento de um produto ou serviço. E tudo que o usuário experimenta deve ser resultado de uma decisão consciente da parte do projetista.

76 •

capítulo 3

ATIVIDADES 01. Quem você acha que pode ser os stakeholders de um sistema para caixa de um grande supermercado? 02. Quais são os principais tópicos do design centrado no usuário? 03. Faça um storyboard para a reserva de um quarto de hotel pela web. 04. Por que o uso de protótipo em algumas situações pode não ser uma boa ideia como forma de obter requisitos do usuário? 05. Falamos algumas vezes sobre Bootstrap. O que é isso? Pesquise no site www.getbootstrap.com e liste suas principais características.

REFLEXÃO Criar interfaces gráficas não é uma tarefa tão fácil quanto parece. Vemos em muitas empresas uma certa despreocupação com esta parte tão importante do software. Atualmente existem várias facilidades técnicas para criação de interfaces como o Bootstrap, o AngularJS, o JQuery e não basta ser um craque nestas tecnologias, o que vimos aqui neste capítulo é fundamental. Tente aplicar estes ensinamentos nos projetos que você participar. Certamente eles serão um belo diferencial entre você e outros que não se preocupam com isso e só com a parte técnica.

LEITURA Abaixo estão listados alguns links que podem ser úteis no seu estudo sobre design de interfaces: Informações sobre IHC no Brasil: http://www.sbc.org.br/ihc Este link é legal porque contém várias referências sobre IHC. Vale a pena dar uma boa olhada: http://www.usernomics.com/hci.html A ACM (AssociationofComputingmachinery) é uma entidade que dita vários padrões para a computação em geral. Eles têm um grupo de estudos específicos na área de IHC: http://www.acm.org/sigchi/ Este é um link de um livro online a respeito de IHC. Bastante interessante também: http://brazil.joelonsoftware.com/uibook/chapters/1.html

capítulo 3

• 77

REFERÊNCIAS BIBLIOGRÁFICAS BARBOSA, S.; SANTANA, B. Interação Humano-Computador. Rio de Janeiro: Campus-Elsevier, 2010. DIX, A. et al. Human-Computer interaction. [S.l.]: Prentice-Hall International, 2004. FERNANDES, J.; GODINHO, F. Publicações. Unidade Acesso, 2013. Disponivel em: . Acesso em: 1 jul. 2015. POPLADE, T. Como tornar seu site acessível. Tableless, 2010. Disponivel em: . Acesso em: 01 jul. 2015. QUEIROZ, M. A. D. Métodos e Validadores de Acessibilidade Web. Acessibilidade Legal, 2008. Disponivel em: . Acesso em: 1 jul. 2015. ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação. Porto Alegre : Bookman, 2013. RUBIN, J. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests. New York: John Wiley and Sons, 1984. TIDWELL, J. Designing interfaces. [S.l.]: O'Reilly Media, 2010. W3C. Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation, 2008. Disponivel em: . Acesso em: 01 jul. 2015. W3C. Acessibilidade na Web. W3C, 2011. Disponivel em: . Acesso em: 1 jul. 2015. W3C-WAI. W3C Web Acessibility Iniciative. World Wide Web Consortium, 2013. Disponivel em: . Acesso em: 1 jul. 2015. WARREN, P. Computer review categories. UML.org, 1997. Disponivel em: . Acesso em: 1 jul. 2015. WOODSON, W. E. Human factors design handbook: information and guidelines for the design of systems, facilities, equipment and products for human use. New York: Mc Graw Hill, 1981. WORLD WIDE WEB CONSORTIUM (W3C). Web Acessibility Iniciative (WAI). WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities, 2004. Disponivel em: . Acesso em: 1 jul. 2015. WORLD WIDE WEB CONSORTIUM. Acessibility. W3C, 2015. Disponivel em: . Acesso em: 01 jul. 2015. INTERNATIONAL STANDARDS ORGANIZATION. Ergonomicsofhuman-system interaction: Part 210: Human-centred design for interactive systems. Vernier, Geneva, 2010. 32 p. (9241-210:2010).

78 •

capítulo 3

4 Avaliação

Imagine uma situação na qual você desenvolveu um site, após ter passado pelas etapas de desenvolvimento que estamos vendo ao longo deste livro, implantou o site e ele está pronto para ser mostrado ao grupo de usuários-alvo: um grupo de adolescentes (por exemplo, um site para vestibular). Como é possível saber se eles se interessarão pelo site e vão de fato usá-lo? É necessária de uma avaliação. Mas como avaliar? Assim como qualquer outra parte do design, a avaliação é integrante do processo de desenvolvimento. Quem vai fazer a avaliação precisa pegar as informações sobre a experiência do usuário ou possíveis experiências quando estão interagindo com um protótipo, um sistema de computador, um componente de um sistema, etc. Isto é feito para melhorar o design, e a avaliação tem como foco melhorar a usabilidade e a experiência do usuário ao interagir com o sistema. Neste capítulo vamos estudar alguns assuntos relacionados com a avaliação e te dar elementos que podem ser expandidos em uma situação real por você ou pela sua equipe. Nunca se esqueça de avaliar o produto que está sendo entregue e nunca se esqueça de que a avaliação deve fazer parte do projeto da interface. Vamos lá? Bons estudos e bom trabalho!

OBJETIVOS Após ler e estudar este capítulo, você estará apto a: •  Entender os principais conceitos e termos na avaliação; •  Conhecer alguns tipos de avaliação, entre elas: o Avaliação analítica o Avaliação heurística o As listas de verificação o O percurso cognitivo o A inspeção preventiva de erros

80 •

capítulo 4

4.1  Introdução Atualmente vemos o mercado receber vários tipos de produtos diferentes em relação aos dispositivos móveis, não é? Principalmente os grandes players do mercado, como Apple, Samsung, Motorola, Asus, Sony e outros a cada dia lançam produtos semelhantes, mas com alguma característica que os tornam diferentes. O iPod, iPad, os e-readers (como o Kindle, o Lev, o Kobo, por exemplo) aumentaram muito a percepção dos usuários quanto à usabilidade, porém há um detalhe: será que o que os designers acham que vai ser usado por todos, que é tão natural, realmente será usado? Para ilustrar isso, assista ao filme Jobs da Universal Pictures, produzido em 2015. Ele retrata resumidamente a vida de Steve Jobs, e em uma certa parte do filme ele e sua equipe estão discutindo sobre o Lisa, um computador pessoal que poderia revolucionar o mercado com sua interface gráfica e uso do mouse, porém, foi um fracasso comercial para a Apple. Portanto, a avaliação é importante. Temos certeza, que a Apple fez as devidas avaliações, afinal, estamos falando da Apple! Porém trabalhar com uma hipótese de que os usuários aceitarão o produto baseado nas preferências dos designers é um risco alto. Existem vários métodos de avaliação diferentes. Decidir qual usar é uma tarefa difícil e que de uma certa forma está relacionada com a cultura da equipe de desenvolvimento. As avaliações normalmente abrangem a observação do usuário ao usar o produto e medir o seu desempenho por meio de testes de usabilidade, experimentos ou estudos de campo. Existem outros métodos que não envolvem diretamente a participação do usuário, como a modelagem do comportamento do usuário. Estes últimos aproximam-se de previsões do que os usuários podem fazer na interação com a interface. Vamos estudar a importância da avaliação e o que precisa ser avaliado para podermos entender melhor este assunto.

4.2  Por que avaliar? É claro que é importante que um produto, um sistema, no nosso caso, seja usável e bonito. Porém, os usuários certamente esperam mais do que isso: esperam

capítulo 4

• 81

também que ele tenha uma experiência agradável no uso e que seja envolvente. Portanto, a avaliação é mais do que justificável. Se formos considerar a parte de negócios, um produto com bom design vende. E isto torna mais um bom motivo para que a avaliação seja importante. A avaliação é uma atividade que permite corrigir erros no produto antes que este seja colocado em produção e seja vendido. Vamos pegar um exemplo para ilustrar: Chame um jovem adolescente e um adulto para conversar a respeito do Facebook e faça algumas perguntas como: – você posta fotos frequentemente? – que tipos de fotos você posta? – qual foto você tem como imagem do seu perfil? – que aplicativos você usa no Facebook? – já apagou alguém da sua lista de amigos? Estas perguntas feitas a dois tipos de usuários diferentes vão nos levar a uma avaliação do produto (o Facebook). Um adolescente provavelmente usa o Facebook para algumas finalidades do adulto, que na maioria das vezes é menos extrovertido os adolescentes. Sendo assim, o produto está preparado para estes dois perfis? (Não precisa responder, apenas pense que estamos avaliando o produto). O produto contém recursos para estes dois tipos de perfis? Resumidamente, o motivo de avaliar está relacionado com: •  Determinar o valor de algo; •  Apreciar; •  Julgar; •  Ponderar, examinar, considerar; •  Calcular, estimar. Ou seja, a avaliação de IHC tem a finalidade de julgar a qualidade de interação de um sistema ou outro artefato computacional.

4.3  O que avaliar? Basicamente, a avaliação vai depender do “tamanho da encrenca”, ou seja, pode ser avaliar protótipos de baixa tecnologia a sistemas completos e mais complexos, com apenas uma tela de interação ou que possui vários módulos interligados.

82 •

capítulo 4

Por exemplo, os desenvolvedores de um novo navegador para a web podem querer saber se os itens que eles desenvolveram nas telas são encontrados mais rapidamente na nova versão, enquanto também podem querer saber se as novas telas alteram o comportamento do usuário. Uma empresa que desenvolve media players (tipo o Winamp) pode querer saber se usuários diferentes, de países diferentes, gostam da mesma aparência da tela, etc. Ou seja, devemos avaliar os aspectos cognitivos e funcionais relacionados à realização das tarefas apoiados pelo sistema, como: •  É rápido? •  É de fácil aprendizado? •  É confiável? •  Permite reverter erros realizados com facilidade? •  Permite ser lembrado depois de algum tempo sem usar? Além disso, aspectos socioculturais do uso da solução e dos contextos previstos também devem ser avaliados. E aspectos afetivos do sistema, como se as pessoas vão gostar, se é bonito e agradável, etc.

4.4  Onde avaliar? Novamente, a localização da avaliação vai ocorrer dependendo do projeto e do que está sendo avaliado. Quando vamos avaliar acessibilidade na web, é melhor avaliar dentro de um laboratório, a fim de verificar e controlar se todos os requisitos necessários estão sendo cumpridos. Isso ocorre também com as escolhas de design, como o layout e o tamanho das teclas de um telefone celular. Outros aspectos como a experiência do usuário, como crianças experimentando um novo brinquedo também podem ser avaliadas. Neste caso, o tempo em que a criança brinca com o brinquedo, é medido até que ela se canse e afaste o brinquedo. Nestes exemplos, o melhor lugar para avaliar seria em ambientes naturais do usuário, chamados também de estudos na natureza (ROGERS, SHARP e PREECE, 2013). Em outras situações, como redes sociais, a avaliação pode ser feita nas próprias casas dos usuários, podendo ser realizadas para avaliar as interações naturais de um grande número de usuários.

capítulo 4

• 83

4.5  Quando avaliar? A fase de avaliação do produto ocorre em uma determinada parte do ciclo de vida do seu desenvolvimento e também depende do tipo de produto. Como exemplo, vamos supor que um produto totalmente novo está sendo desenvolvido ou sendo atualizado para uma nova versão. Neste caso, quando o produto é novo, haverá um tempo para a criação de protótipos, levantamento de requisitos e pesquisa de mercado. Quando os requisitos forem obtidos, a criação dos protótipos, esboços, storyboards levará um tempo para o desenvolvimento. Logo, a avaliação neste caso é feita durante o design. Quando a avaliação é feita durante o design, ela é chamada de avaliação formativa (RUBIN, 1984). As avaliações deste tipo abrangem uma grande parte de processos de design, desde o desenvolvimento de esboços iniciais e protótipos até a fase final do design. Existem também as chamadas avaliações somativas. Estas são usadas para medir o sucesso de um produto acabado. Se o produto está em atualização, então a avaliação vai se concentrar em adicionar (somar) novos requisitos ao produto, uma vez que os requisitos iniciais já foram obtidos anteriormente. Neste caso, como novos requisitos podem ser adicionados, é possível que problemas de usabilidade ocorram. De qualquer maneira, algumas agências reguladoras, como o National Institute of Standards and Technology (NIST), nos EUA, e a International Standards Organization (ISO), e a sociedade britânica, têm padrões nos quais a avaliação do produto é determinada em uma parte do ciclo de vida do produto.

MULTIMÍDIA Momento Vintage: Assista a estes vídeos a respeito do Apple Lisa e como era a ideia de interface com o usuário nos anos 1980. https://www.youtube.com/watch?v=OKrvMStjbIU E veja o seu promocional, de 1983: https://www.youtube.com/watch?v=-G9S-h2w2dU

84 •

capítulo 4

4.6  Técnicas de Avaliação de Usabilidade Possíveis problemas de usabilidade podem ocorrer durante o processo de construção de um software; isto é natural e aceitável. O objetivo do uso de técnicas de avaliação é evitar que esses problemas passem desapercebidos e venham causar algum tipo de desconforto ou descontentamento ao usuário. Serão avaliadas as funcionalidades do sistema e a usabilidade da interface, levando em consideração aspectos como: interatividade e comunicabilidade, bem como desempenho, aprendizado, memorização, planejamento e satisfação dos usuários. Basicamente existem três tipos de técnicas de avaliação que são geralmente utilizadas:

TÉCNICAS PROSPECTIVAS

neste tipo de técnica, busca-se a opinião do usuário sobre a experiência de uso e interação com o sistema.

TÉCNICAS PREDITIVAS/ANALÍTICAS

Neste tipo, a busca de prevenção de erros na

TÉCNICAS OBJETIVAS/EMPÍRICAS

As informações sobre problemas na interface são

interface é feita sem a participação direta de usuários.

obtidas enquanto o usuário é observado interagindo com o sistema.

4.6.1  Técnicas prospectivas Este tipo de técnica se baseia em saber a opinião do usuário com relação à sua interação com o sistema, avaliando o seu nível de satisfação em relação à experiência de uso. Geralmente esses métodos são realizados por meio de entrevistas e questionários. Quando se tem um número reduzido de usuários, as entrevistas são indicadas, pois é possível identificar o nível de ansiedade do usuário ao interagir com

capítulo 4

• 85

o sistema, entretanto, por parecer um método mais informal, por vezes pode ser mais difícil obter resultados confiáveis e válidos. Já os questionários são indicados quando o número de usuários é muito grande, tendo perfis diferentes.

4.6.2  Técnicas preditivas Estão baseadas em conhecimento heurístico ou teórico de um avaliador que é especialista. Neste caso, não é preciso envolver os usuários, porque os especialistas usam o seu conhecimento sobre os usuários e as situações típicas de uso. É uma alternativa interessante em relação a custo. Vamos ver algumas destas técnicas. 4.6.2.1  Avaliação Heurística A avaliação heurística identifica possíveis problemas ou barreiras que possam ser encontradas pelos usuários ao interagirem com o sistema permitindo uma avaliação contínua a um baixo custo. Ela pode ser aplicada tanto no desenvolvimento do projeto, quanto após a sua implementação Ela foi proposta por Jakob Nielsen (NIELSEN, 1994) e, segundo ele, “o objetivo da avaliação heurística é encontrar os problemas de utilização na concepção, de modo que eles possam ser atendidos como parte de um processo iterativo de design. ” Nielsen chamou de heurística porque são regras no âmbito geral e não diretrizes específicas de usabilidade. Neste tipo de técnica é considerado que somente uma pessoa não é capaz de encontrar todas as possíveis falhas do sistema; por isso, para a avaliação, é proposta a seleção de um pequeno grupo avaliadores que submetem o sistema aos princípios heurísticos. Com isso eles podem estabelecer o que realmente é importante e necessário para a construção de um modelo consistente. Eles se baseiam em regras gerais que descrevem propriedades comuns à construção de interfaces. O design é examinado em busca de elementos que violem essas regras. São atribuídos valores de gravidade para cada problema encontrado em cada passo, segundo uma escala proposta por Nielsen e Mack (1994): 0. Não é considerado em sua totalidade um problema de usabilidade.

86 •

capítulo 4

1. Problema apenas estético: não é necessário consertá-lo, a menos que se tenho tempo extra no projeto. 2. Problema menor de usabilidade: deverá ser dada baixa prioridade ao conserto desse tipo de problema, não é tão importante consertá-lo. 3. Problema maior de usabilidade: deverá ser dada alta prioridade ao conserto deste problema, é importante consertá-lo. 4. Catástrofe de usabilidade: É obrigatório consertá-lo, antes de o produto ser divulgado. A motivação principal do método é facilitar e acelerar o processo de avaliação de interfaces, maximizando o papel da experiência do avaliador, para enfrentar a cada vez mais crescente demanda de boas interfaces. As etapas principais são: 1. Preparação 2. Sessões curtas de avaliação individual 3. Consolidação das avaliações individuais 4. Priorização dos problemas encontrados 5. Relatório conclusivo final Preparação

Sessões curtas

Consolidação

Priorização

Relatório final

Diversos autores de maior influência na área de IHC propuseram métodos que avaliam sites e interfaces em todos os casos, sendo possível encontrar algumas semelhanças nos métodos propostos por eles. Entretanto, dentre esses autores, o que tem maior relevância em relação aos demais por ter proposto o termo e ter criado uma lista de dez heurísticas que são imprescindíveis para a melhora na usabilidade das interfaces, é Jakob Nielsen.

capítulo 4

• 87

VISIBILIDADE DO ESTADO DO SISTEMA CORRESPONDÊNCIA ENTRE O SISTEMA E O MUNDO REAL CONTROLE E LIBERDADE DO USUÁRIO

Mantenha os usuários informados sobre o que está acontecendo por meio de feedback adequado e no tempo certo.

Utilize conceitos, vocabulário e processos familiares aos usuários.

Forneça alternativas e “saídas de emergência” e possibilidades de voltar e refazer (undo e redo).

Palavras, situações e ações semelhantes devem

CONSISTÊNCIA E PADRONIZAÇÃO

significar conceitos ou operações semelhantes. Caso haja convenções para o ambiente ou plataforma escolhidos, estas devem ser obedecidas.

Tente evitar que o erro aconteça informando o usuário

PREVENÇÃO DE ERRO

sobre as consequências de suas ações ou, se possível, impedindo ações que levariam a uma situação de erro.

AJUDA AOS USUÁRIOS PARA RECONHECEREM, DIAGNOSTICAREM E SE RECUPERAREM DE ERROS RECONHECIMENTO

88 •

capítulo 4

Mensagens de erro em linguagem simples, sem códigos, indicando precisamente o problema e sugerindo de forma construtiva um caminho de recuperação.

Em vez de memorização, torne os objetos, ações e opções visíveis e compreensíveis.

FLEXIBILIDADE E EFICIÊNCIA DE USO

Ofereça aceleradores e caminhos alternativos para uma mesma tarefa e permita que os usuários customizem ações frequentes.

Evite porções de informação irrelevantes. Cada unida-

DESIGN ESTÉTICO E MINIMALISTA

de extra de informação em um diálogo compete com as unidades de informação relevantes e reduz sua visibilidade relativa.

AJUDA E DOCUMENTAÇÃO

Devem ser fáceis de buscar, focadas no domínio e na tarefa do usuário, e devem listar passos concretos a serem efetuados para atingir seus objetivos.

O procedimento de execução desta técnica é feito da seguinte maneira, por meio de etapas: A apresentação deve ser decidida entre papel, ou por

DETERMINAÇÃO DA PROPOSTA DE DESIGN

meio de um protótipo ou por produto acabado. É feita uma verificação das condições gerais da inspeção, a fim de verificar se o material completo e inspecionável está a contento.

NAVEGAÇÃO GERAL PELO SISTEMA (OU SUA REPRESENTAÇÃO) DETERMINAÇÃO DO PERFIL DOS USUÁRIOS

Determinação de qual o sentido geral o avaliador vai dar ao sistema que vai analisar em detalhes.

Quem são os usuários e suas características e contextos individuais, sociais e culturais. E o que desejam como objetivo com o produto.

capítulo 4

• 89

DETERMINAÇÃO DE CENÁRIOS DE USO

Em quais as situações prováveis, mas plausíveis, os usuários poderiam encontrar-se? Ou seja, no que os avaliadores estão pensando quando fazem sua inspeção?

Algumas vezes os avaliadores fazem inspeções de uma maneira mais geral, sem instanciar usuários específicos ou cenários de uso. Todos os avaliadores juntos discutem as avaliações individuais e examinam as divergências encontradas. Em seguida elaboram uma lista consensual de violação das heurísticas, cada qual com o respectivo grau de severidade estabelecido em comum acordo. Eles também atribuem prioridades de correção para todas as violações listadas e geram um relatório final do grupo com as suas conclusões e comentários. Portanto, para se aplicar o método, existem as seguintes maneiras: 1. Criar um conjunto de tarefas para ser aplicado pelos avaliadores; 2. Fornecer aos avaliadores os objetivos da aplicação e deixar que eles criem suas próprias tarefas; 3. Pedir para os avaliadores testarem os elementos de diálogo. A escolha do método de aplicação a ser usado vai depender do tempo disponível para teste e dos avaliadores. Por exemplo, se o grupo de avaliadores é formado por crianças, o mais apropriado é usar um conjunto de tarefas criado e executado pelos avaliadores.

EXEMPLO Como exemplo, vamos citar o trabalho de Budd (BUDD, 2007) sobre heurísticas para questões de web design. •  Clareza: torne o sistema o mais claro, conciso e significativo possível para os usuários finais. o Escreva de forma clara e concisa. o Somente utilize linguagem técnica quando houver um público técnico específico. o Escreva textos que sejam claros e significativos. o E use ícones que realmente representam o que eles se propõem. •  Diminua a complexidade desnecessária e a carga cognitiva: torne o sistema o mais simples possível para os usuários concluírem suas tarefas. o Tire as funcionalidades, as etapas de processo e poluições visuais que não sejam necessárias.

90 •

capítulo 4

o Use a comunicação progressiva para esconder recursos avançados. o Divida processos complicados em várias etapas. o Priorize o uso de tamanho, forma, cor, alinhamento e proximidade. •  Forneça um contexto aos usuários: as interfaces devem dar aos usuários um contexto em relação ao tempo e espaço. o Dê um nome claro e um objetivo para o site. o Destaque a seção atual na navegação. o Forneça um caminho de navegação. o Use mensagens de feedback apropriadas. o Mostre um número de etapas em um processo. o Reduza a percepção de latência, dando pistas visuais (um indicador de progresso por exemplo), ou deixe que os usuários completem outras tarefas enquanto estão esperando. •  Faça com que o usuário tenha uma experiência agradável e positiva: o usuário deve ser tratado com respeito, e o design deve ser esteticamente agradável e promover uma experiência gratificante. o Crie um design agradável e atraente. o Crie objetivos facilmente atingíveis. o Recompense o uso e a progressão.

4.6.2.2  Inspeção por meio de lista de verificação A lista de verificação é um checklist, ou seja, são vistorias baseadas em uma lista em que existem itens a serem verificados por meio de profissionais, não necessariamente especialistas em ergonomia, como por exemplo, programadores e analistas, que diagnosticam os problemas gerais e repetitivos das interfaces rapidamente. Ao contrário das avaliações heurísticas, são as qualidades da ferramenta (checklist), e não dos avaliadores, que determinam as possibilidades para a avaliação. Checklists bem elaborados devem produzir resultados mais uniformes e abrangentes, em termos de identificação de problemas de usabilidade, pois os inspetores são conduzidos no exame de interface por meio de uma mesma lista de questões a responder sobre a usabilidade do projeto.

capítulo 4

• 91

As inspeções por listas de verificação não precisam necessariamente ser realizadas por profissionais especialistas em ergonomia.Podem ser realizadas por programadores e analistas, isto porque quem determina a qualidade da avaliação são as questões contidas na lista, e não os avaliadores. Se o questionário for bem elaborado, a inspeção por lista de verificação tende a produzir resultados mais consistentes, uma vez que todos os avaliadores são conduzidos por uma lista questões para realizar a avaliação de usabilidade do sistema. Portanto, este tipo de avaliação apresenta uma série de vantagens: •  O conhecimento ergonômico está contido na própria lista de verificação, sendo assim, não são necessários profissionais especializados em IHC, que são mais escassos no mercado. •  Existe a garantia de que os resultados serão mais estáveis mesmo que forem aplicados separadamente por diferentes avaliadores, isso porque as questões da lista sempre serão verificadas. •  As especificidades das questões da lista fazem com que problemas de usabilidade sejam facilmente encontrados. •  Redução da subjetividade dos processos de avaliação. •  Reduzir os custos da avaliação, pois é um método de rápida aplicação, não necessita de pessoal especializado. Entretanto, para que essas listas sejam realmente efetivas, é necessário reduzir ao máximo o número de questões subjetivas que possam colocar o avaliador em dúvida, ou exigir dele competências a níveis de usabilidade ou ergonomia que ele não possui. Outros fatores que podem interferir na economia da inspeção são conteúdos incompletos ou mal organizados ou muito extensos, que podem não ser aplicáveis ao sistema. Podemos ver, no exemplo de uma lista de verificação desenvolvida pelo LabUtil chamada Ergolist (http://www.labiutil.inf.ufsc.br/ergolist/check.htm), que existem diversos tópicos que são abordados e para cada um dos tópicos existe uma série de questões que serão respondidas pelos avaliadores.

92 •

capítulo 4

capítulo 4

• 93

Figura 4.1  –  Exemplo de checklist.

94 •

capítulo 4

Figura 4.2  –  Continuação do checklist.

4.6.3  Técnicas objetivas

©© ALPHASPIRIT | DREAMSTIME.COM

As técnicas objetivas também são chamadas de técnicas empíricas e são baseadas na participação direta dos usuários. Apesar de existirem outras técnicas, vamos estudar com mais destaque a técnica “Ensaio de Interação”.

4.6.3.1  Ensaio de Interação Como o próprio nome da técnica sugere, um ensaio de interação consiste em “ensaiar” o uso de um sistema, quase que literalmente, como se fosse um ensaio de uma peça de teatro ou de uma banda. No nosso caso, um ensaio de interação é o uso simulado de um sistema em que as pessoas que vão utilizá-lo participam das sessões e tentam fazer tarefas usuais típicas que fariam com um protótipo do sistema. A preparação para o ensaio necessita de um trabalho detalhado de reconhecimento do usuário final e de sua tarefa típica para a composição dos cenários e procedimentos que vão ser aplicados durante a realização das sessões de testes.

capítulo 4

• 95

Os ensaios de interação têm o objetivo de identificar problemas na interfaces e pontos que atrapalhem a facilidade de uso. Dele participam pessoas integrantes do seu público-alvo (usuários), realizando as mais diversas tarefas de interação com o sistema. Esse tipo de ensaio é importante, pois mostra que nem todos pensam da mesma forma. É possível comparar a forma de interação dos diferentes usuários com o sistema e ver que eles interagem com o sistema de diferentes formas. Esse tipo de observação permite que os analistas observem os pontos de falha do sistema, o que pode fornecer novas ideias ao projeto. Montagem de ensaio de interação Análise preliminar Reconhecimento do software Pré-diagnóstico ergonômico Definição dos cenários e da amostra Reconhecimento do usuário Coleta de informações sobre o usuário e sua tarefa Definição de tarefas para o usuário Realização dos ensaios Obtenção das amostras de usuário Ajustes nos scripts e cenários Preparação dos ensaios Realização dos ensaios Coleta e análise dos dados Diagnóstico e relatório final Figura 4.3  –  Montagem do ensaio de interação.

96 •

capítulo 4

A figura 4.3 mostra um diagrama geral da montagem do teste de interação de acordo com uma situação de responsabilidade. Percebemos que está dividida em 3 partes: •  Análise preliminar; •  Definição dos scripts, cenários e da amostra; •  Realização dos ensaios. Análise Preliminar No processo de preparação do teste, é necessário determinar o escopo do teste, ou seja, o que se quer descobrir ao observar os usuários. Para tal, é preciso conhecer cada usuário e saber quais são as tarefas que eles mais utilizam. Instruções são dadas aos usuários no momento da aplicação do teste; são distribuídos também blocos para anotações. Ao realizar as tarefas, os usuários são observados e avaliados, são verificadas todas as suas ações e reações durante todo o processo de interação. Todas essas tarefas são observadas pelos avaliadores com auxílio de dispositivos de áudio e vídeo, marcação de tempo, espelhos falsos, tudo isso para saber quais são as ações e as reações dos usuários ao interagirem com a interface do sistema. Os ensaios também podem ser gravados, para que a avaliação seja realizada posteriormente. A fase de análise preliminar é aquela em que os analistas entram em contato com o software e o seu contexto de desenvolvimento e fazem um pré-diagnóstico dos problemas de ergonomia de sua interface com o usuário. Reconhecimento do software Naturalmente, para o software ser reconhecido, são feitas algumas sessões de entrevistas com as pessoas que projetaram e desenvolveram para trazer informações sobre o que foi projetado e desenvolvido. As questões que são feitas a essa equipe são de várias naturezas, como o tempo de desenvolvimento, para quem o software foi desenvolvido, dados sobre o sistema, situação no mercado e etc. Esse levantamento é feito para comprender o ciclo de desenvolvimento do software e dar fundamentos para o pré-diagnóstico.

capítulo 4

• 97

Pré-diagnóstico Com base nas informações obtidas pelos analistas, o software é examinado primeiro para que as funcionalidades sejam conhecidas e depois para identificar as funções mais problemáticas. O pré-diagnóstico pode ser obtido por meio de uma avaliação do tipo heurística ou ainda por meio de um checklist para inspeção ergonômica. Os critérios, recomendações e normas ergonômicas servem como ferramenta de apoio. O resultado é apresentado como um conjunto de hipóteses sobre problemas de usabilidade do software que serão testadas posteriormente durante os ensaios de interação.

Definição dos scripts, cenários e da amostra de usuários Os scripts se referem ao conjunto de tarefas que uma amostra de usuários finais deverá realizar durante os ensaios. O cenário se refere ao ambiente de execução, envolvendo questões organizacionais. Os scripts e cenários são montados de acordo com as informações obtidas no reconhecimento do software e de seu pré-diagnóstico ergonômico e das informações obtidas pelo reconhecimento do perfil do usuário e de sua tarefa. Reconhecimento do perfil do usuário A primeira tarefa desta parte é contatar os usuários finais e verificar se eles têm o mesmo perfil imaginado pelos projetistas. Nesta etapa já é possível estimar o grupo que participará dos ensaios. Coleta de informações sobre o usuário e sua tarefa Dependendo do público-alvo, pode ser que seja necessário um detalhamento da coleta de informações sobre os usuários e suas tarefas. Por meio de questionários, os projetistas podem buscar mais dados dos usuários em uma amostra maior de pessoas. Estes questionários podem servir como roteiros de entrevistas presenciais ou a distância. Os questionários podem coletar vários tipos de dados, como: •  recursos disponíveis (tanto técnicos como físicos) para a realização de uma tarefa; •  do contexto da tarefa; •  do nível dos usuários; •  da utilização do sistemas.

98 •

capítulo 4

Definição dos scripts de tarefas para os ensaios Algumas tarefas são selecionadas para definir os scripts dos ensaios: •  tarefas relacionadas com os objetivos principais do software, do ponto de vista dos projetistas; •  as hipóteses dos projetistas de ergonomia, feitas no pré-diagnóstico; •  as amostras de tarefas dos usuários que foram obtidas com os questionários; •  as funcionalidades do sistema consideradas mais e menos importantes pelo usuário; •  as funcionalidades mais acionadas pelos usuário no uso do software. Combinando estes parâmetros, é possível criar um script, sempre considerando a questão custo-benefício dos ensaios. O importante é saber avaliar criticamente sob o ponto de vista do usuário e de sua tarefa. Os testes podem ocorrer em ambientes naturais, tendo como vantagem ser o ambiente real de utilização do software pelo usuário, mas com algumas desvantagens: •  Possível descontrole sob as condições do teste; •  Problemas técnicos; •  Interferências durante o teste. Ou podem ser realizados em laboratórios, que dão condições melhores aos avaliadores, mas podem gerar certos desconfortos aos usuários: •  Condições artificiais; •  Fora de contexto; •  Inibição. Após a aplicação do teste, a satisfação dos usuários é avaliada por meio de questionários e entrevistas.

ATIVIDADES 01. Informe as características você gostaria de avaliar para os seguintes sistemas: a) Um tocador de música pessoal, como o iPod; b) Um site para vender roupas.

capítulo 4

• 99

02. Veja o Box sobre as heurísticas para web design no texto. Selecione um site que você conhece bem e o avalie segundo as heurísticas do Box. a) Essas heurísticas o ajudam a identificar questões importantes de usabilidade e experiência do usuário? b) Saber das heurísticas influencia de alguma forma o modo como você interage com o site? 03. Agora use as 10 heurísticas comentadas no texto para avaliar um site que vende roupas (por exemplo). a) Como você pode usá-las para avaliar o site? b) As heurísticas o ajudam a se concentrar mais no site do que se você não as estivesse usando? c) Usar menos heurísticas poderia ser melhor? O que poderia ser combinado e quais são as suas compensações? 04. Você conhece as barras de ferramentas da Microsoft, não é? Elas têm uma forma de exibir uma pequena descrição abaixo de cada ícone. Por que ferramentas com esta descrição podem ser acessadas mais rapidamente? (Suponha que o usuário conheça a ferramenta e não necessite da descrição para identificá-la).

REFLEXÃO Se você estiver trabalhando no mercado de desenvolvimento, ou vai entrar em breve, você notará que ainda existem empresas que não dão a devida atenção à avaliação de interfaces, como vimos neste capítulo. Você deve ter lido o box sobre as heurísticas para a web. Percebe que ali são dicas práticas e objetivas e até mesmo intuitivas e óbvias, mas a quantidade de empresas e equipes que nem imaginam que elas existem é ainda muito grande. Esperamos que você, como futuro profissional, exerça o seu papel e use estas técnicas que foram introduzidas aqui e ajude para melhorar a qualidade do software e das interfaces que geramos atualmente. E nunca se esqueça das questões relacionadas com acessibilidade, que já vimos em outro capítulo.

100 •

capítulo 4

LEITURA Na Universidade Federal de Santa Catarina existiu até 2003 o LabIUtil (Laboratório de Utilizabilidade). Porém, o laboratório ainda deixa alguns resultados disponíveis, entre eles o Ergolist, que é um sistema de checklist bem interessante, desenvolvido em 1997 com apoio da Softex. Link: http://www.labiutil.inf.ufsc.br/ergolist/ Obs.: “Utilizabilidade” é um neologismo da palavra francesa “utilisabilité”. Atualmente a palavra foi substituída por “usabilidade”. Mas o nome do laboratório permaneceu com o neologismo. Para quem quiser se aprofundar mais sobre design para web, este livro é muito bom: KOYANI, S. J.; BAILEY, R. W.; NALL, J. R. Research-based Web design and usability heuristics. Computer Psycology, 2004 Outro livro bem legal, agora em português: CARRION, W. Design para webdesigners: princípios de design para web. Rio de Janeiro: Brasport, 2008 Este livro também é interessante e o autor é o Jakob Nielsen, “pai” das heurísticas que estudamos: LORANGER, H.; NIELSEN, J. Usabilidade na web: projetando websites com qualidade. Rio de Janeiro: Campus, 2007

REFERÊNCIAS BIBLIOGRÁFICAS BUDD, A. Heuristics for Modern Web Application Development. Blogography, 2007. Disponivel em: . Acesso em: 01 jul. 2015. CYBIS, W. A. Engenharia de usabilidade: uma abordagem ergonômica. Florianópolis: Universidade Federal de Santa Catarina, 2003. MORAIS, É. M. D. UM ESTUDO SOBRE A VALIDADE E FIDEDIGNIDADE DE MÉTODOS DE AVALIAÇÃO DE INTERFACES. Universidade Estadual de Maringá. Maringá, p. 116. 2007. (Dissertação (Mestrado em Ciência da Computação)).

capítulo 4

• 101

NIELSEN, J. Heuristic evaluation. In: NIELSEN, J.; MACK, R. L. Usability inspection methods. New York: John Wiley & Sons, 1994. ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação. Porto Alegre : Bookman, 2013. RUBIN, J. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests. New York: John Wiley and Sons, 1984.

102 •

capítulo 4

5 Acessibilidade à Web

Acessibilidade é uma palavra composta por duas partes: acessível, que é originada da palavra “acesso”, de accedere, que por sua vez é formada por ad (“a”) e cedere (“ir”, “mover-se”). O sufixo “dade” é colocado em adjetivos para formar substantivos que expressam estado ou quantidade. Portanto, fica mais do que claro que acessibilidade é um estado acessível e uma possibilidade de ir a algum lugar. Só quem tem alguma necessidade especial ou parentes e amigos portadores é que sabe o quanto os lugares ainda precisam ser acessíveis e também na internet: se a internet é de todos, como dizem, não se pode deixar de lado as pessoas portadoras de necessidades especiais. Muito já foi feito e muito ainda precisa ser feito. Na verdade, quem não possui deficiência ou até mesmo mobilidade reduzida, ou não está envolvido com pessoas que possuem, não conseguem imaginar tantas situações que discriminam as pessoas que sofrem com uma situação inadequada, como um banheiro não adaptado, uma calçada sem rebaixamento, e até mesmo um site na internet. Quando se trata de acessibilidade na web, existem muitos pontos que precisam ser considerados. A W3C (World Wide Web Consortium) tem um grupo de trabalho que recomenda algumas ações a serem feitas em sites para poder atender às pessoas com necessidades especiais. Neste capítulo vamos estudar estas recomendações e compreender a sua importância.

OBJETIVOS Final deste capítulo, você estará apto a: •  Saber a importância de desenvolver sites acessíveis; •  Projetar sites acessíveis básicos.

104 •

capítulo 5

5.1  Introdução à acessibilidade Antes de entrarmos com tudo na questão da web, é interessante conceituar acessibilidade de maneira geral. Basicamente, todos deveriam ter as mesmas oportunidades e, por incrível que pareça, esta preocupação começou a tomar mais força nos últimos anos. Veja por exemplo alguns teatros antigos, suntuosos e famosos: eles não tinham rampas de acesso e elevadores até há pouco tempo. É interessante observar que este tipo de construção antiga não tinha referência alguma em relação à acessibilidade. Até mesmo nas nossas ruas. É difícil encontrar em algumas cidades calçadas rebaixadas, sinalização para pessoas com necessidades visuais, cadeirantes e muitas outras melhorias que certamente colaborariam para que todas estas pessoas tenham as mesmas oportunidades que os outros. E é um dever do estado que isto seja assegurado. De acordo com a lei nº 10.098/2000, a acessibilidade é conceituada como a possibilidade de dar às pessoas com necessidades especiais o alcance e uso, com segurança e autonomia, de espaços, imobiliários e equipamentos urbanos, edificações, transportes e sistemas e meios de comunicação. Portanto, o acesso à internet está incluído nesta lei. Em relação à parte que cuida da comunicação, a lei prevê a eliminação de barreiras na comunicação e procura estabelecer alternativas técnicas que deixem os sistemas de comunicação e sinalização acessíveis. A acessibilidade é um assunto não tão recente. No Brasil, a questão tomou maior discussão em 1981, quando este foi chamado de Ano Internacional dos Portadores de Deficiência pela ONU. Em 1982, a ONU criou o Programa Ação Mundial para Pessoas com Deficiência, no qual prevalecia que as pessoas nestas condições têm o mesmo direito que os demais cidadãos às mesmas oportunidades e usarem em condições de igualdade. Em 1985 o Brasil publicou a primeira norma técnica que trata de questões relacionadas com o tema, a NBR 9050/1985. Porém trata de adequação das edificações e do mobiliário urbano à pessoa deficiente. Nesta norma, acessibilidade é: “possibilidade e condição de alcance, percepção e entendimento para a utilização com segurança e autonomia de edificações, espaço, mobiliário, equipamento urbano e elementos”.

capítulo 5

• 105

Portanto, cada definição, seja na lei ou na norma, enfoca que acessibilidade significa alcançar alguma coisa com autonomia, mesmo que seja assistida. Em relação à internet, a preocupação com o conteúdo acessível começou pelo W3C, em 1999, por meio da iniciativa chamada Web Assistive Iniciative (WAI). Nesta ocasião, foi elaborado o primeiro documento para auxiliar os desenvolvedores de páginas a tornarem suas páginas mais acessíveis. Este documento foi o Web Content Acessibility Guidelines. O WAI foca em três linhas: Navegadores para web

players de multimídia

tecnologias assistivas

Veja as figuras a seguir com exemplos de lugares e situações acessíveis:

Figura 5.1  –  Balanço acessível.

106 •

capítulo 5

©© WIKIPEDIA

Figura 5.2  –  Piscina acessível.

Figura 5.3  –  Piso tátil.

capítulo 5

• 107

5.2  Acessibilidade na web e sua importância Uma vez que conceituamos acessibilidade, vamos agora tratar da acessibilidade na web. Sabemos que a web foi fundada por Tim Barners-Lee e este é diretor do W3C. O W3C, por sua vez, é uma comunidade internacional em que várias empresas membro e uma equipe dedicada integralmente, junto com o público, desenvolvem padrões para a web. O objetivo principal do W3C é obter todo o potencial da web. Sem dúvida, o W3C é a principal referência e detentora das principais diretrizes para se estabelecer um padrão de construção de sites e demais elementos. Portanto, as diretrizes e guias do W3C serão usadas neste capítulo como referência para a acessibilidade na web. O W3C possui padrões relacionados com a acessibilidade. Por meio de seu site (WORLD WIDE WEB CONSORTIUM, 2015), podemos perceber que a acessibilidade é um assunto prioritário para eles. Segundo o site, a web é fundamentalmente projetada para ser usada por todas as pessoas, não importando o hardware, software, língua, cultura, localização ou habilidade física ou mental. A acessibilidade na web é importante porque nos faz lembrar que grande parte da população que consome materiais que estão na web tem algum tipo de deficiência e isto pode significar perda ou limitação de oportunidades da vida em comunidade em condições de igualdade com as demais pessoas. Segundo (FERNANDES e GODINHO, 2013), o uso de acessibilidade no desenvolvimento de páginas e aplicações na web não se caracteriza uma limitação, mas, ao contrário, os elementos de acessibilidade, com seus padrões e regras, tornam os documentos mais flexíveis, abrangentes e fáceis de se usar.

MULTIMÍDIA Este link mostra um vídeo sobre acessibilidade na web para celebrar o Dia Internacional das Pessoas com Deficiência, que ocorreu em 3 de dezembro de 2012 e encerrou a Virada Inclusiva na escultura da Mão, no Memorial da América Latina, em São Paulo. https://goo.gl/saZc1L

O W3C tem escritório no Brasil, o W3C Brasil, o qual desenvolve ações locais para o desenvolvimento dos padrões web. Eles têmum grupo de trabalho

108 •

capítulo 5

exclusivo para os padrões de acessibilidade, o qual lançou uma cartilha com 7 fascículos que serve para orientar as pessoas sobre a importância da acessibilidade na web. Segundo a cartilha (W3C, 2011), a acessibilidade na web está compatível com os conceitos que vimos sobre acessibilidade e é uma atividade complexa. E sugere a consideração de alguns aspectos para abordar a complexidade do problema: •  A importância, abrangência e a universalidade da web: a web é um ambiente multimídia, com várias possibilidades e muito abrangente. Segundo o W3C, uma pessoa com deficiência deveria acessar a web em melhores condições, pois já tem dificuldades em acessar as mesmas informações no mundo físico. •  Reciprocidade: a acessibilidade não é apenas uma questão de “mão única”, ou seja, podemos ser induzidos a pensar que as pessoas são apenas receptoras. Segundo o W3C, a pessoa com deficiência também contribui para a web. Logo, quanto mais pessoas puderem acessar, mais a web terá contribuições. •  Multiplicidade e diversidade de fatores envolvidos: a acessibilidade na web é alcançada considerando-se uma série de fatores segundo o W3C: o Conteúdo; o Navegadores, ou agente do usuário; o Tecnologia assistida: é a tecnologia usada por pessoas com deficiência e mobilidade reduzida; o Conhecimento do usuário para o uso da web; o Desenvolvedores e usuários; o Ferramentas da autoria; o Ferramentas de avaliação. Segundo a cartilha, a acessibilidade na web é “permitir que qualquer pessoa, usando qualquer tecnologia de navegação, visite qualquer site e obtenha completo entendimento das informações contidas nele, além de ter total habilidade de interação”. Ou seja, ter um ambiente que não seja diferente para qualquer tipo de pessoa.

CURIOSIDADE Um exemplo de acessibilidade e de que não só a web, mas a tecnologia em geral, é usada em prol da acessibilidade é a vida do físico Stephen Hawking, um dos mais consagrados cientistas da atualidade.

capítulo 5

• 109

©© WIKIPIDIA

Figura 5.4  –  Stephen Hawking.

Stephen usa um aparelho, chamado Equalizer, o qual fala as palavras por Stephen por meio de suas mãos. Com este aparelho, Stephen consegue escrever livros, ensaios e proferir palestras pelo mundo. Quando ele perdeu o movimento das mãos, passou a controlar o aparelho por meio de sua bochecha. Assista ao vídeo a seguir, o qual mostra o funcionamento do aparelho (e aprenda também um pouco sobre o que ele acha do universo): https://www.youtube.com/watch?v=85IzieOYCq0

5.3  A Web acessível A partir de uma web acessível, vários cenários que poderiam ser impossíveis de ocorrer se tornam viáveis, não só para pessoas com deficiência, mas para qualquer categoria de usuário. Segundo a cartilha, podem ocorrer esses casos: •  Uma pessoa cega usando um leitor de telas pesquisando o site da Receita Federal; •  Um usuário cego e sem braços procurando sua ex-professora em um sistema de busca usando um programa de reconhecimento de voz para entrar comandos e receber a resposta a partir do leitor de telas;

110 •

capítulo 5

•  Um usuário com paralisia cerebral e com dificuldades motoras usando o computador com um dedo só e navegando nas redes sociais; •  Um usuário com deficiência motora usando um mouse adaptado fazendo compras pela internet; •  Uma pessoa tetraplégica usando um ponteiro na cabeça procurando informações sobre células-tronco em sites especializados; •  Um usuário com deficiência intelectual fazendo exercícios pela web para melhorar sua comunicação; •  E outros. Os exemplos anteriores são apenas poucas das situações que podem ocorrer envolvendo acessibilidade e web. Portanto, precisamos encontrar mecanismos para ajudar nessas situações.

5.4  Componentes essenciais para acessibilidade na Web Segundo o WAI (Web Acessibility Iniciative) (W3C-WAI, 2013), a acessibilidade na web depende de vários componentes trabalhando conjuntamente e melhorias em componentes específicos. Estes componentes incluem: A informação em uma página da web ou em uma aplicação incluindo:

CONTEÚDO

o

informação natural como textos, imagens e

sons o

código ou marcação que define estrutura,

apresentação, etc.

NAVEGADORES, PLAYERS DE MÍDIA TECNOLOGIA ASSISTIDA

E outros agentes de usuário

Em alguns casos, leitores de tela, teclados alternativos, software de rastreamento, etc.

capítulo 5

• 111

CONHECIMENTO DO USUÁRIO

Experiências e em alguns casos, estratégia adaptativas usando a web.

Projetistas, programadores, autores, etc., incluindo

DESENVOLVEDORES

desenvolvedores com deficiências e usuários que contribuem com conteúdo.

SOFTWARES DE AUTORIA FERRAMENTAS DE AVALIAÇÃO

Softwares que criam web sites.

Ferramentas de avaliação de acessibilidade na web, validadores de HTML, validadores de CSS, etc..

Figura 5.5  –  Como os componentes estão relacionados.

A figura 5.5 mostra como os componentes citados estão relacionados: os desenvolvedores normalmente usam softwares de autoria e ferramentas de avaliação para criar conteúdo. Os usuários usam navegadores, players de mídia, tecnologias assistivas ou outros agentes de usuário para acessar e interagir com o conteúdo.

112 •

capítulo 5

As figuras a seguir mostram exemplos de tecnologias assistivas. A figura 5.6 mostra um deficiente visual usando um leitor de tela para poder ler o que está sendo mostrado. A figura 5.7 mostra um leitor de textos impressos. O leitor escaneia o texto impresso e o traduz em voz alta para deficientes auditivos. A Figura 8 é um leitor de tela em Braille. Neste dispositivo, o conteúdo impresso da página é transformado em caracteres Braille para os deficientes visuais poderem ler.

Figura 5.6  –  Deficiente visual usando um leitor de tela.

Figura 5.7  –  Leitor de impressos.

capítulo 5

• 113

Figura 5.8  –  Leitor de Braille.

5.4.1  Interdependência entre componentes Existe uma interdependência significativa entre os componentes, ou seja, os componentes devem trabalhar conjuntamente, com o objetivo de deixar a web acessível. Por exemplo, para um texto alternativo nas imagens:

CONCEITO Texto alternativo nas imagens: em HTML, na tag para imagens existe uma opção de usarmos um texto alternativo, por exemplo: Esta tag posiciona uma figura na tela e, quando o mouse for colocado sobre a figura, irá aparecer o texto “Smiley face”. No caso da acessibilidade, como o deficiente visual não vê a imagem, o texto alternativo é impresso no leitor de tela.

ESPECIFICAÇÕES TÉCNICAS

Estabelecem textos alternativos (por exemplo, o HTML define o atributo alt na tag img)

A WAI apresenta alguns guias que definem

GUIAS DA WAI

como implementar os textos alternativos para acessibilidade nos diferentes componentes.

114 •

capítulo 5

DESENVOLVEDORES

Fornecem as palavras apropriadas para se

FERRAMENTAS DE AUTORIA

Possibilitam, facilitam e promovem o texto

colocar no texto alternativo.

FERRAMENTAS DE AVALIAÇÃO

alternativo em uma página.

São usadas para ajudar a checar quais textos alternativos existem.

AGENTES DE USUÁRIO

Fornecem interface humana para o texto

TECNOLOGIAS ASSISTIVAS

Fornecem os textos alternativos em várias

USUÁRIOS

Sabem como pegar o texto alternativo do

alternativo.

modalidades.

agente do usuário e/ou tecnologia assistiva.

5.4.2  O ciclo de implementação Quando as características de acessibilidade são implementadas efetivamente em um componente, possibilita a implantação nos outros componentes . Conteúdo Navegadores, Players de mídia Ferramentas de autoria Tecnologias assistivas Conteúdo

capítulo 5

• 115

•  Quando os navegadores, players de mídia, tecnologias assistivas e outros agentes de usuário suportam uma característica acessível, os usuários ficam mais propensos a demandar esta característica, e os desenvolvedores ficam mais propensos a implementá-la no conteúdo. •  Quando os desenvolvedores querem implementar um recurso de acessibilidade em seu conteúdo, eles são mais propensos a exigir que a sua ferramenta de criação torne a implementação mais fácil. •  Quando as ferramentas de criação tornam um recurso fácil de ser implementado, os desenvolvedores ficam mais propensos a implementá-lo em seu conteúdo. •  Quando um recurso de acessibilidade é implementado no conteúdo, desenvolvedores e usuários ficam mais propensos a exigir que os agentes de comecem a apoiá-lo. Se um componente de acessibilidade não é implementado em um componente, há uma pequena motivação para o outro componente implementá-lo quando não resulta em uma experiência do usuário acessível. Por exemplo, desenvolvedores não são propensos a implementar uma característica de acessibilidade que as ferramentas de autoria não suportam e que a maioria dos navegadores ou tecnologia assistiva não implementa consistentemente. Se um componente de acessibilidade tem um suporte ruim, algumas vezes outros componentes podem compensar por meio de um “work around”, que requer muito mais esforço e não é tão bom para acessibilidade no geral. Por exemplo: •  Desenvolvedores podem ter mais trabalho para compensar alguma falta de suporte à acessibilidade em ferramentas de autoria, por exemplo, programando diretamente em HTML em vez de usar uma ferramenta. •  Usuários podem ter mais trabalho para compensar alguma falta de suporte de acessibilidade nos navegadores, players de mídia e tecnologia assistiva e falta de acessibilidade de conteúdo, por exemplo, usando diferentes navegadores ou tecnologias assistivas para superar as diferentes questões de acessibilidade. No entanto, na maioria dos casos, esses “work-arounds” não são implementados, e o resultado ainda é uma fraca acessibilidade. Além disso, por vezes, um suporte ruim de acessibilidade em um componente não pode ser razoavelmente ultrapassado por outros componentes, e o resultado é a inacessibilidade, o

116 •

capítulo 5

que torna impossível para algumas pessoas com deficiência a usar um determinado site, página ou recurso.

5.5  Projeto e desenvolvimento de um site acessível A elaboração de um site acessível é um assunto bastante amplo. A amplitude está relacionada com alguns fatores, como se o site vai ser acessível por realmente se importar com pessoas portadoras de necessidade especial ou se é por alguma imposição da empresa ou até mesmo para se atingir um novo público. Vamos estudar alguns pontos técnicos que podem ajudá-lo a criar um site acessível e ajudá-lo no projeto de um site deste tipo segundo (POPLADE, 2010): Veja a primeira linha de um site: 1.



O charset presente na tag informa ao navegador qual é a codificação da página. No caso do Brasil, a codificação “ISO-8859-1” caracteriza os caracteres em português e também auxiliam o leitor de tela com a correta leitura das palavras presentes na página. Outra tag importante é a