O mercado exige

USABILIDADE

Seu software est preparado?

Instrutor: Rubem Pechansky

APRESENTAO
Introduo
Com o objetivo de auxiliar as empresas nacionais de desenvolvimento de software a ganhar
competitividade, qualificando ao mximo seus produtos, a Hypervisual montou o Curso de Usabilidade
baseado nas melhores referncias acadmicas e nas mais atuais prticas de mercado, embasada por
seus mais de 18 anos de prtica profissional. O evento ensina os participantes a detectar e solucionar
problemas em seus aplicativos. Esse assunto, pouco abordado no mercado nacional, hoje
considerado um fator decisivo para o sucesso de um produto.

Objetivos
Com o Curso de Usabilidade, as empresas ficaro aptas a:

Questionar seu produto do ponto de vista do usurio/cliente

Iniciar melhorias imediatamente, de forma embasada

Otimizar prazos e recursos e diminuir custos de tentativa e erro

Aprender a identificar problemas e a encaminhar possveis solues de interface de usurio

Iniciar uma cultura interna de usabilidade

USABILIDADE E DESIGN
Alguns conceitos importantes

Usabilidade

UI (interface de usurio) UX (experincia de usurio)

Design grfico design de interao

UCD (user-centered design)

Cliente usurio

Design thinking
Metodologia para anlise de problemas e proposta de solues (Tim Brown Ideo)

Empatia

Criatividade

Razo
Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

Inovao

Pensar e trabalhar como os designers

Usabilidade algumas definies

Medida da eficcia, eficincia e satisfao alcanada por um conjunto especfico de usurios com um
determinado produto no desempenho das tarefas especificadas.
Termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou
objeto a fim de realizar uma tarefa especfica. A usabilidade pode tambm se referir [...] ao estudo
dos princpios por trs da eficincia percebida de um objeto.

Aplicaes da Usabilidade

Software

Produtos de consumo

Bens durveis

Transportes

Instalaes industriais

Armamentos

Outras reas

Usabilidade na TI(C)

Interfaces de software

Sistemas de grande porte

Softwares para computao e telefonia mvel

Interfaces digitais de hardware

Elementos e princpios de desenho selecionados (Wucius Wong)

Formato

Tamanho

Cor

Textura

Direo

Posio

Espao

Repetio

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

Estrutura

Similaridade

Gradao

Contraste

Textura

Lei de Fitts sobre velocidade e preciso

Alvos menores ou mais distantes necessitam de mais tempo para aquisio.

Algumas leis da Gestalt relevantes

Lei da Similaridade

Lei da Proximidade

Lei da Continuidade

Lei do Fechamento

Gestalt o estudo da percepo. Veja alguns exemplos simples de uso das leis da Gestalt abaixo:

PRINCPIOS DE USABILIDADE
No que diz respeito ao consumidor, a interface o produto. Jef Raskin (1943 2005) Especialista
em HCI; iniciou o projeto do Macintosh para a Apple no final dos anos 1970.

Guidelines e princpios de usabilidade

Apple

Carroll

Google (Android)

IBM
Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

ISO 9241-110

Microsoft

Nielsen: 10 heursticas

Norman: princpios de design

Shneiderman: 8 regras de ouro

Compilao de guidelines e princpios de usabilidade

No me atrapalhe!

Simplicidade

Visibilidade

Feedback do estado do sistema

Familiaridade e compatibilidade do sistema com o mundo real

Consistncia e padres

Controle, flexibilidade e liberdade do usurio

Reconhecimento em vez de memorizao

Busca da eficincia

Preveno e tratamento de erros

Tolerncia e reversibilidade de aes do usurio

Imposio de restries (constraints)

Esttica e design visual

Dez Heursticas de Usabilidade para design de interfaces de usurio (Nielsen,

1994)
1. Visibilidade do status do sistema
2. Concordncia entre os sistemas e o mundo real
3. Controle e liberdade para o usurio
4. Consistncia e padronizao
5. Preveno de erros
6. Reconhecimento em vez de uso da memria
7. Flexibilidade e eficincia de uso
8. Design esttico e minimalista
9. Ajudar a reconhecer, diagnosticar e remediar erros
10. Ajuda e documentao

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

As 8 regras de ouro de Shneiderman

1. Consistncia
2. Atalhos para usurios assduos
3. Feedback informativo
4. Dilogos que indiquem trmino da ao
5. Preveno e tratamento de erros
6. Reverso de aes
7. Controle
8. Baixa carga de memorizao

Princpios de design de Norman

Visibilidade

Feedback

Restries

Mapeamento

Consistncia

Affordance

Mximas de usabilidade de Nielsen (selecionadas)

O usurio est sempre certo

O usurio no est sempre certo (deve-se auxiliar o usurio a encontrar solues)

Designers e projetistas no so usurios

Diretores no so usurios

Menos mais

Os detalhes so importantes

A ajuda no ajuda: um bom sistema de documentao no capaz de melhorar uma m

usabilidade; o ideal que a ajuda no seja muito necessria

Princpios de Usabilidade (Hypervisual, 2011)

Autonomia

Consistncia

Eficincia

Familiaridade

Simplicidade
Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

Tolerncia

Visibilidade

TCNICAS DE AVALIAO E IDENTIFICAO DE PROBLEMAS

Tcnicas mais comuns para usabilidade

Avaliao heurstica

Testagem informal

Pesquisa com usurios

Prototipagem com wireframes e mockups

Mtricas de UI

Ferramentas de implementao

Relatrios de avaliao

Arquitetura

Especificaes

Esboos / roughs

Paper prototypes

Wireframes

Layouts / mockups

Guias / manuais de implementao

Reviso tcnica

Reviso de design

Documentao tcnica

Check-lists

Exemplos de mtricas

Mximo de telas

Nmero de elementos por navbar / tab bar / toolbar

Mximo de elementos por tela

Mximo de elementos de lista visveis por pgina

Mxima profundidade dos menus / listas aninhadas

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

Mnimo de itens por grupo em formulrios

Mximo de itens por grupo em formulrios

Mximo de grupos em formulrios

etc.

Algumas orientaes de usabilidade para desenvolvedores

Reduzir a latncia o mais possvel

Garantir a robustez da aplicao

No inventar solues criativas

Dar feedback visual para operaes longas

Memorizar o status do sistema

Testar cedo, sempre e em todas as plataformas-alvo

Exemplo de check-list (por tela / por aplicao)

Todas as listagens e rvores possuem menu de contexto?

Todos os cones tm dicas (tooltips)?

Itens de menu de contexto duplicados no menu principal?

O guia visual foi consultado?

Todas as caixas de dilogo so de tamanho fixo?

Os textos das mensagens esto de acordo com os padres?

Os cones das mensagens esto de acordo com os padres?

As mtricas foram respeitadas?

Todos os itens de menu possuem uma tecla aceleradora?

etc.

Viabilizando melhorias de usabilidade no ambiente de desenvolvimento

Incluir requisitos de usabilidade no projeto

Integrar com metodologias geis

Dividir a implementao em etapas / verses

Implementar feature freezing

Testagem informal

Implementar planilha de controle (ver abaixo)

Mtodo para tomada de decises de usabilidade Hypervisual

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

(Adaptado de anlise GUT gravidade, urgncia, tendncia)

A planilha a seguir um exemplo fictcio que mostra diversas combinaes entre os valores das
colunas prioridade, esforo e status. Ao ordenar os itens segundo os valores dessas colunas, fica claro
quais so as pendncias que devem ser realizadas em primeiro lugar e quais devem ser postergadas.

Pendncia

Prioridade

Esforo

Revisar o texto de abertura de login segundo novos padres

Alta

Baixo

Pendente

Flexibilizar formato do campo CPF na tela de cadastro

Alta

Baixo

OK

Eliminar mensagens de erro / warnings (v. erros.txt)

Alta

Baixo

Pendente

Implementar mudana de data na tela Compromissos

Alta

Mdio

Em produo

Implementar nova tela de documentao

Alta

Mdio

Em produo

Implementar novas permisses de usurio

Alta

Alto

Em produo

Completar relatrios pendentes

Alta

Alto

Em produo

Revisar detalhamento de requisitos para cada relatrio

Alta

Alto

Pendente

Remover borda dos componentes somente leitura

Mdia

Baixo

Em produo

Alinhar campos nmericos esquerda

Mdia

Baixo

Em produo

Implementar tela de boas-vindas

Mdia

Mdia

Pendente

Implementar novo clculo do IR para o ano que vem

Mdia

Alto

No nesta verso

Implementar sistema de ativao online

Mdia

Alto

Pendente

Implementar nova imagem na tela de login

Baixa

Baixo

Em produo

Revisar fonte das telas do administrativo

Baixa

Baixo

Em produo

Modificar espaamentos e margens segundo layouts

Baixa

Mdio

No nesta verso

Revisar cdigos numricos de tratamento de erros (internos)

Baixa

Mdio

No nesta verso

Implementar novo padro na rea administrativa (interna)

Baixa

Alto

No nesta verso

Usabilidade no tudo

Usabilidade segurana

Usabilidade marketing

Usabilidade custos

Problemas comuns

Procurar bons benchmarks

Resistncias do time

Resistncias dos usurios

Atrasos de cronograma

Acreditar em frmulas mgicas

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

Status

10

DOCUMENTAO
Leis da documentao de Nielsen
1. Os usurios no leem a documentao.
2. Se eles leem a documentao mesmo assim, porque esto em apuros e precisam de resposta para
um problema especfico.
As pessoas no tm tempo para ler. Ver Nielsen (2008) How Little Do Users Read? (estudo de leitura
na web) <http://www.useit.com/alertbox/percent-text-read.html>

Problemas comuns com a documentao

Desatualizada / verso obsoleta

Inexistente

Muito tcnica

Muito extensa

Chata de fazer

De difcil manuteno

Pouco utilizada

uma cpia da estrutura do aplicativo

Onde est a documentao / formatos

No help online

No manual do usurio (context-sensitive)

Na interface do usurio

No Windows: formato CHM

Outros formatos: HTML, PDF, DOC

Em outras plataformas: usar o formato nativo

Em dispositivos mveis: avaliar

A documentao no precisa...

Mostrar todas as telas

Mostrar cada item de cada tela

Explicar todos os detalhes

Espelhar a arquitetura da aplicao

Fazer o usurio aprender cdigos e termos especiais

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

11

Usar termos tcnicos, jargo de TI e glossrios

Documentar casos raros e situaes excepcionais

Dizer o que o usurio j sabe

Dizer o que o usurio no precisa saber

A documentao precisa...

Focar nas questes do usurio e em suas respostas

Responder como em vez de o qu

Mostrar os passos para efetuar tarefas

Manter os tpicos curtos

Referenciar outros tpicos atravs de hyperlinks

Mostrar os contedos do mais simples at o mais complexo

Usar itens em vez de texto corrido sempre que possvel

No usar mais de 3 nveis hierrquicos

Etapas para documentao

Conhecer o pblico-alvo

Conhecer o produto

Conhecer as necessidades dos usurios

Definir a arquitetura dos contedos

Redigir o texto

Definir o design grfico

Incorporar as imagens

Gerar a documentao

Revisar, testar, corrigir, ampliar, atualizar e manter atualizado

Estilo e linguagem: como escrever

Tom neutro, informativo, conciso

Linguagem simples (no-tcnica)

Evitar termos estrangeiros

Nomenclatura padro e conhecida

Usar a lngua culta padro

Evitar erros e problemas comuns: acentuao, crase, digitao, gramtica, ortografia

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

12

Orientaes para documentao

Compatibilidade

Consistncia

Mtricas

Imagens: somente as necessrias

No usar multimdia (udio, animaes, interao)

Evitar o uso de vdeo

Observar caracteres tipogrficos e internacionais

Arquitetura dos contedos

Para produtos em mdulos: um tpico por mdulo ou uma pasta por mdulo, na rvore de
contedos

Contedos: ir do mais simples at o mais complexo

Incluir informaes de referncia, se ajudarem o usurio (exemplos: atalhos de teclado,

estrutura dos menus, como encontrar a tela, etc.)

Cada tpico pode ser uma tarefa ou caso de uso

Grandes casos de uso podem ser reunidos dependendo do mdulo

No criar glossrios de termos tcnicos

No espelhar a arquitetura da aplicao

No usar mais de 4 nveis de navegao (quanto menos melhor)

Criar uma pasta Como..., Instrues ou equivalente

No usar numerao sequencial (1.1, 1.1.1, 1.1.2, 1.2, etc.); se usar numerao, usar no
mximo um nvel

Sempre criar um sumrio de contedos

Exemplo de tabela de contedos

O exemplo dado com um mdulo fictcio de folha de pagamento.
Antes
SISMO - MDULO CADASTROS - SMFP verso 1.2.067B
INTRODUO - VERSO 1.2.067B
SUMRIO
APRESENTAO
1.1 DIRETRIZES INICIAIS
1.1.1 Diretrizes Operador
1.1.2 Diretrizes Tcnicas do SISMO
1.1.3 Lista de Cdigos Fixos e Variveis
Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

13
1.2 PROCEDIMENTOS DE CADASTRO
1.2.1 Cadastros das Pessoas
1.2.1.1. Pessoa Fsica
1.2.1.2. Pessoa Jurdica
1.2.2 Cadastro Hierarquia Corporativa
1.2.3 Cadastros (lei n 12345/99)
...

Depois
SISMO MDULO CADASTROS
Apresentao
Conhecendo o sistema
Como usar menus, listas e formulrios
Onde obter informaes e ajuda
Viso geral do sistema
Como funciona o sistema
Um rpido passeio
Primeiros passos
Cadastrando pessoas
Inserindo os dados de sua empresa
Subdividindo sua empresa em unidades
Cadastrando estabelecimentos
...

Uma leitura atenta dos exemplos acima mostra que, alm das diferenas de formatao no contedo,
os itens que compem o documento so bastante diferentes. A abordagem foi invertida: em vez de
partir das telas do produto (o que faz esta tela) e explicar cada uma (com as inevitveis obviedades
como dizer o que so Nome e CEP), os itens so, em geral, respostas a perguntas do tipo como
eu fao determinada tarefa?.
Deve-se sempre evitar o uso de frases ou expresses em maisculas, exceto nos ttulos gerais. Os
destaques podem ser feitos em negrito. Cdigos, numerao sequencial, nmeros de verso no ttulo e
outras informaes que no sejam teis aos usurios devem ser evitados.
Os usurios novatos, que podem ficar perplexos com itens como diretrizes (do) operador ou lista de
cdigos fixos e variveis, devem ser induzidos a ler e estudar o material atravs de termos simples
como como funciona ou primeiros passos. Dessa forma os leitores podero aprofundar seu
conhecimento gradualmente no processo de aprendizagem.
Ao mesmo tempo em que no conveniente criar um grande nmero de itens, deve-se ter cuidado
para limitar o contedo de cada pgina. Isso significa que sempre melhor uma documentao
concisa do que uma extensa.

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

14

INTERNACIONALIZAO
Aspectos importantes

Traduo real Traduo literal

O tradutor tem que saber escrever

Diferenas (nomenclatura / grafia) entre verses do mesmo idioma

Diferenas culturais

Implementao multi-idioma no sistema

Itens a observar (coisas que variam entre idiomas / locales)

Formatos de data / hora

Fuso horrio

Moeda

Formatos monetrios e numricos

Cdigos telefnicos e postais

Atalhos de teclado

Layouts de teclado

Codificao de caracteres (hoje: Unicode pode resolver de forma simples)

Unidades de pesos e medidas

Sistemas numricos

Ordenao dos caracteres

RTL

Significados de imagens e smbolos

Traduo de textos em imagens

FERRAMENTAS DE SOFTWARE
Pintura
Adobe Photoshop: https://www.adobe.com/br/products/photoshop.html
Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

15

Paint.NET (free): http://www.getpaint.net/

PhotoFiltre (free): http://photofiltre.free.fr/frames_en.htm

Desenho vetorial
Inkscape (free): http://www.inkscape.org/
Adobe Illustrator: http://www.adobe.com/br/products/illustrator.html

Desenho vetorial e pintura

Xara Designer: http://www.xara.com/us/products/designer/
CorelDRAW Graphics Suite: http://www.coreldraw.com/br/product/software-de-design-grafico/
Fireworks: https://creative.adobe.com/pt/products/fireworks

Layout
Visual Studio Express (free): http://www.microsoft.com/express/
SharpDevelop (free): http://www.icsharpcode.net/OpenSource/SD/

Utilitrios
IrfanView (free): http://www.microsoft.com/express/
XnView (free): http://www.xnview.com/en/

REFERNCIAS
Assuntos: Design, simplicidade e complexidade, documentao, usabilidade e outros

Bibliografia selecionada
About Face 3: The Essentials of Interaction Design Alan COOPER
De onde vm as boas ideias Steven JOHNSON
Designing for the Digital Age: How to Create Human-Centered Products and Services Kim GOODWIN
Designing Interactions Bill MOGGRIDGE
Designing Interfaces: Patterns for Effective Interaction Design Jenifer TIDWELL
Design de interao: alm da interao homem-computador PREECE, ROGERS, SHARP
Design Thinking: Uma Metodologia Poderosa para Decretar o Fim das Velhas Ideias Tim BROWN
Designing the user interface: Strategies for effective human-computer interaction Ben SHNEIDERMAN

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.

16
Dialogue principles ISO 9241-110 / NBR 9241-11
Ergonomia e usabilidade: conhecimentos, mtodos e aplicaes CYBIS, BETIOL, FAUST
No Me Faa Pensar! Uma Abordagem de Bom Senso Usabilidade na Web Steve KRUG
Human Computer Interaction Jenny PREECE, Yvonne ROGERS, Helen SHARP
Human Computer Interaction for Software Designers Linda MACAULAY
Human-Computer Interaction John M. CARROLL
Interaction Design: Beyond Human-Computer Interaction Jenny PREECE
O Design do Dia-a-dia; Design Emocional: Por que adoramos (ou detestamos) os objetos do dia-a-dia; The
Design of Future Things; Living with Complexity Donald A. NORMAN
Projetando Websites com Usabilidade; Prioritizing Web Usability; Usability Engineering (Interactive
Technologies); Usabilidade na Web Jakob NIELSEN
The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques
Wilbert O. GALITZ
The humane interface: new directions for designing interactive systems Jef RASKIN
The Laws of Simplicity: Design, Technology, Business, Life John MAEDA
Universal principles of design LIDWELL, HOLDEN, BUTLER
Windows User Experience Interaction Guidelines Microsoft

Alguns web sites

Android User Interface Guidelines: http://developer.android.com/guide/practices/ui_guidelines/index.html
Apple iOS Human Interface Guidelines: http://developer.apple.com/library/ios/
Jakob Nielsen: http://www.useit.com/papers/heuristic/
Modelo de princpios de usabilidade: http://www.lume.ufrgs.br/handle/10183/49087
Nielsen Norman Group: http://www.nngroup.com/
User Experience Professionals Association: http://uxpa.org
Universal Usability: http://universalusability.com/
Usability.gov: http://www.usability.gov/pdfs/guidelines.html
W3C Mobile web / best practices: http://www.w3.org/standards/webdesign/mobilweb
Windows User Experience Guidelines: http://msdn.microsoft.com/en-us/library/aa511258.aspx

Copyright 2014 Hypervisual. Todos os direitos reservados. Proibida a cpia ou reproduo.