UniRitter

INTERFACE HUMANO-COMPUTADOR
Prof. Rubem Pechansky

CONTEDOS

USABILIDADE, DESIGN E EXPERINCIA DO USURIO

Alguns conceitos importantes

UI (interface de usurio)

UX (experincia de usurio)

Usabilidade

rea: IHC (interao humano-computador) ou HCI

IHC: origem na ergonomia (human factors)

Cliente usurio

Design de interao design grfico de interfaces

Aplicaes da usabilidade

Software

Produtos de consumo
Bens durveis
Transportes
Acessibilidade
Instalaes industriais
Armamentos
Outras reas

Tipos de aplicaes mais comuns em IHC

Web site / portal web

Web-based DBMS (web-based database management systems)

Softwares desktop

Apps mobile

Interfaces digitais de hardware

Outras

PRINCPIOS DE DESIGN E USABILIDADE

Alguns princpios importantes de design

Equilbrio
Contraste
Limpeza
Alinhamento
Uso do espao
Unidade
Proporo

Lei de Fitts
Velocidade e preciso: alvos menores ou mais distantes necessitam de mais tempo de aquisio

Guidelines e princpios de usabilidade

Apple
Carroll
IBM
ISO 9241-110
Microsoft
Nielsen: 10 heursticas
Norman: princpios de design
Shneiderman: 8 regras de ouro

Princpios de Usabilidade (Hypervisual)

Autonomia
Consistncia
Eficincia
Familiaridade
Simplicidade
Tolerncia
Visibilidade

Algumas guidelines importantes

No me atrapalhe!
Feedback do estado do sistema
Controle, flexibilidade e liberdade do usurio
Reconhecimento em vez de memorizao
Preveno e tratamento de erros
Tolerncia e reversibilidade de aes do usurio
Imposio de restries (constraints)
Esttica e design visual

Heursticas de Usabilidade (Nielsen, 1994; 2005)

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

As 8 regras de ouro de Shneiderman (1998)

1.
2.
3.
4.
5.
6.
7.
8.

Consistncia
Atalhos para usurios assduos
Feedback informativo
Dilogos que indiquem trmino da ao
Preveno e tratamento de erros
Reverso de aes
Controle
Baixa carga de memorizao

Princpios de design de Norman (1988)

Visibilidade
Feedback
Restries
Mapeamento
Consistncia
Affordance

Mximas de usabilidade de Nielsen (selecionadas) (1994)

O usurio est sempre certo

O usurio no est sempre certo
Usurios no so designers
Designers 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

TCNICAS DE AVALIAO E IDENTIFICAO DE PROBLEMAS

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

Tcnicas mais comuns para avaliao de usabilidade

Testagem informal
Pesquisa formal com usurios (em laboratrio)
Avaliao heurstica
Verificao de mtricas
Check-lists

Exemplos de mtricas

Mximo de telas na aplicao

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
Mnimo/mximo de itens por grupo em formulrios
Mximo de grupos em formulrios
Mximo de itens em uma dropdown / combo box

Exemplos de itens de check-list

Todos os cones tm dicas (tooltips)?

Os controles no pertinentes ao contexto esto desabilitados em todas as telas?
Todos os problemas semelhantes possuem interfaces semelhantes?
Os textos das mensagens esto de acordo com os padres especificados?
etc.

METODOLOGIAS DE INTERVENO
Ferramentas

Ferramentas de software (ver apndice)

Relatrios de avaliao
Reviso de arquitetura
Reviso de requisitos e especificaes
Esboos / roughs
Paper prototypes
Wireframes / layouts / mockups / storyboards
Guias / manuais de implementao

Controles / widgets / componentes / containers mais usados

Aba (tab)
Accordion
rvore (tree / treeview)
Balo
Barra de ajuda (infobar)
Barra de ferramentas
Barra de inspeo (inspector window)
Barra de menus
Barra de progresso (progress bar)
Barra de rolagem
Barra de status
Boto
Botes de rdio
Breadcrumb
Caixa de dilogo
Campo de texto
Campo de texto multilinha
Check box
Combo box
Combo box
Grid / listagem (listview)
Grupo (ou subttulo)
cone
Janela
Janela modal
Label
Link
List box
Lista drop-down
Menu
Menu de contexto

Painel retrtil (collapsible panel)

Palette (utility window)
Ribbon
Slider
Spinner
Split button
Tooltip (hint)

Orientaes gerais para designers

Sempre exibir as opes disponveis

Utilizar fontes padro do sistema
Dar feedback visual para operaes longas
Memorizar o status do sistema sempre que possvel
Evitar solues criativas: usar solues padro e aplicar controles e widgets corretamente
Priorizar as operaes mais frequentes
Ordenar as informaes em nveis progressivos
Proteger o trabalho do usurio
Permitir personalizaes: temas, fontes, cores, etc.
Observar regras de acessibilidade
Realizar um design visualmente simples e agradvel

Orientaes gerais para desenvolvedores

Reduzir a latncia o mais possvel: evitar operaes longas (dar feedback visual para
operaes longas, se forem inevitveis)
Garantir a robustez da aplicao
Diviso em etapas / verses
Feature freezing
Evitar mensagens modais e mensagens de confirmao
Testagem precoce, frequente e em todas as plataformas (evitar a sndrome da ilha da
fantasia)

Usabilidade no tudo

Usabilidade segurana
Usabilidade marketing
Usabilidade custos

Problemas comuns

Resistncias do time
Resistncias dos usurios
Atrasos de cronograma

MOBILE
Diferenas em relao ao desktop

O usurio no percebe a distino entre hardware e software

Muitas limitaes em relao ao desktop (sem teclado, baixa preciso ao apontar, ateno
dividida, etc.)
Telas pequenas. Consequncias: textos truncados, excesso de rolagem, etc.
Mtricas mais restritivas
Grandes variaes de tamanho, proporo, densidade, orientao...

Formas possveis de implementao

Cdigo nativo
Framework
Mobile-aware (implementao via web)
Hbrido

Armadilhas nas aplicaes

Falta de experincia dos desenvolvedores

Mudanas de especificaes entre verses de OSs
Integrao com outros sistemas
A experincia do usurio precisa ser fluida
Evitar digitao e cadastros
Evitar mensagens de erro

Armadilhas do mercado

Primeira pergunta: h necessidade de estar na plataforma mobile? Sistemas mobile s fazem

sentido se forem teis e capazes de agregar valor
Anlise do impacto de fatores externos (como segurana) na usabilidade
o mercado que escolhe a plataforma
O mercado mobile muda muito rpido
Hoje muito fcil fazer uma app... ruim
Dificuldade de entrar nas stores / banning
Comentrios so annimos
Notas podem ser manipuladas
Apps no podem ser abandonadas
A comparao feita com o mainstream internacional
Comprometimento com atualizaes frequentes

Dicas de usabilidade para apps mobile

Minimizar o tempo de startup da aplicao

Evitar login sempre que possvel: avaliar segurana usabilidade
Usar somente campos absolutamente essenciais
Ocultar controles no pertinentes ao contexto
Texto: muito curto, simples e objetivo
Usar fontes de tamanho normal ou grande

Usar cones intuitivos

Poucas telas obrigatrias
Ajuda: se tiver, deve ser concisa e estar embutida na aplicao
Usar botes e controles grandes (rea reativa: mnimo 7 mm 7 mm, melhor 9 mm 9 mm
ou mais; considerar a lei de Fitts)
Evitar o uso do teclado
Privilegiar toques (tap) a operaes de arraste (drag)
Multitarefa, tempo limitado, interrupes frequentes, ateno dividida
Pensar pequeno: design para pequenos dispositivos
Pedir confirmao somente quando essencial
Considerar aspectos da privacidade do usurio

APNDICES
ALGUMAS FERRAMENTAS DE SOFTWARE
Prototipagem / Design de interface
Axure RP: http://www.axure.com/features
GUI Design Studio Express: http://www.carettasoftware.com/
Microsoft Expression FREE : http://www.microsoft.com/expression/
Microsoft Visual Studio Express FREE : http://www.microsoft.com/express/
Pencil Project FREE : http://pencil.evolus.vn/en-US/Home.aspx
QT FREE : http://qt-project.org

Desenho vetorial
Adobe Fireworks: http://www.adobe.com/products/fireworks/
CorelDRAW: http://www.corel.com.br/
Inkscape FREE : http://www.inkscape.org/
Xara Photo & Graphic Designer: http://www.xara.com/us/products/designer/
Xara Designer Pro X: http://www.xara.com/us/products/designer/

Utilitrios
FastStone Capture: http://www.faststone.org/
IrfanView FREE : http://www.microsoft.com/express/
Paint.NET FREE : http://www.getpaint.net/

REFERNCIAS
Livros e monografias
About Face 3: The Essentials of Interaction Design Alan COOPER
Design de interao: alm da interao homem- computador Yvonne ROGERS, Helen SHARP e Jennifer
PREECE
Design e avaliao de interface Anamaria de MORAES (Org.)
Design Emocional: Por que adoramos (ou detestamos) os objetos do dia-a-dia (Emotional Design) Donald A.
NORMAN
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

Designing the user interface: strategies for effective human-computer interaction Ben SHNEIDERMAN
Dialogue principles ISO 9241-110 / NBR 9241-11
Engenharia de Usabilidade: uma abordagem ergonmica Walter CYBIS
Ergodesign e Arquitetura de Informao: Trabalhando com o Usurio Luiz AGNER
Ergonomia Cognitiva Lia GUIMARES
Ergonomia e usabilidade: conhecimentos, mtodos e aplicaes Walter CYBIS, Adriana BETIOL e Richard
FAUST
Human Computer Interaction for Software Designers Linda MACAULAY
Human-Computer Interaction John M. CARROLL
Information Architecture for the World Wide Web Louis ROSENFELD e Peter MORVILLE
Living with Complexity Donald A. NORMAN
No me Faa Pensar! (Don't Make Me Think: A Common Sense Approach to Web Usability) Steve KRUG
O Design do Dia-a-dia (The Design of Everyday Things) Donald A. NORMAN
O Laptop de Leonardo Ben SHNEIDERMAN
Prioritizing Web Usability Jakob NIELSEN
Projetando Websites com Usabilidade ou Usabilidade na web: projetando websites com qualidade
(Prioritizing Web Usability) Jakob NIELSEN, Hoa Loranger
The Design of Future Things Donald A. NORMAN
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
Usabilidade de Interfaces Web Antnio ANDRADE
Usabilidade na Web: Criando Portais mais Acessveis Cludia DIAS
Usability Engineering (Interactive Technologies) Jakob NIELSEN
Windows User Experience Interaction Guidelines Microsoft

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/
Apple User Experience: http://developer.apple.com/DOCUMENTATION/UserExperience/
Comparison of frameworks: http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks
Don Norman's jnd website: http://www.jnd.org/
Gartner: http://www.gartner.com/
Gestalt: http://pt.wikipedia.org/wiki/Gestalt
How Little Do Users Read? Jakob NIELSEN http://www.useit.com/alertbox/percent-text-read.html
IBM design guidelines: http://www.ibm.com/software/ucd/initial/designinitial/guidelines.html

IBM Design principles: http://www-01.ibm.com/software/ucd/designconcepts/designbasics.html

IDG Now: http://idgnow.uol.com.br/
Iluses de ptica exemplos: http://www.ophtasurf.com/en/illusions.htm
Iluses de ptica: http://pt.wikipedia.org/wiki/Ilus%C3%A3o_de_%C3%B3ptica
Information and Design: http://www.infodesign.com.au/usabilityresources/design/default.asp
IUSR: http://zing.ncsl.nist.gov/iusr/
Jakob Nielsen: http://www.useit.com/papers/heuristic/
Ken Howe's GUI Standards: http://www.pbdr.com/guistd/index.htm
Mobilepedia: http://www.mobilepedia.com.br/
Nielsen Norman Group: http://www.nngroup.com/
Opera Developer Network: http://www.opera.com/developer/tools/
PC Magazine: http://www.pcmag.com/
Percepo visual: http://pt.wikipedia.org/wiki/Percep%C3%A7%C3%A3o_visual
Percepo: http://pt.wikipedia.org/wiki/Percep%C3%A7%C3%A3o
Ps-imagem: http://en.wikipedia.org/wiki/Afterimage
Scott Ambler UI Design principles: http://www.ambysoft.com/essays/userInterfaceDesign.html
SSW Rules: http://www.ssw.com.au/SSW/standards/rules/RulesToBetterInterfaces.aspx
STC: http://www.stcsig.org/usability/resources/toolkit/toolkit.html
Steven Pemberton: http://homepages.cwi.nl/~steven/
Ten Usability Heuristics Jakob NIELSEN <http://www.useit.com/papers/heuristic/heuristic_list.html>
TOG - First Principles of Interaction Design: http://www.asktog.com/basics/firstPrinciples.html
UCD: http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html
Universal Usability: http://universalusability.com/
UPA: http://www.upassoc.org/
Usability resources: http://www.infodesign.com.au/usabilityresources/design/default.asp
Usability.gov: http://www.usability.gov/pdfs/guidelines.html
UsabilityNet: http://www.usabilitynet.org/home.htm
Usernomics: http://www.usernomics.com/ergonomics-standards.html
W3C Mobile web / best practices: http://www.w3.org/standards/webdesign/mobilweb
Web style guide: http://www.webstyleguide.com/
Windows User Experience Guidelines: http://msdn.microsoft.com/en-us/library/aa511258.aspx