USABILIDADE: Que bicho é esse? Instrutor: Rubem Pechansky pechansky@hypervisual.com.br

USABILIDADE: Que bicho é esse? Instrutor: Rubem Pechansky pechansky@hypervisual.com.br

2 USABILIDADE E DESIGN Alguns conceitos importantes Usabilidade UX (experiência de usuário) UCD (user-centered design) Design de interação design gráfico Cliente usuário Usabilidade algumas definições Medida da eficácia, eficiência e satisfação alcançada por um conjunto específico de usuários 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 específica. A usabilidade pode também se referir [...] ao estudo dos princípios por trás da eficiência percebida de um objeto. Aplicações da Usabilidade Software Produtos de consumo Bens duráveis Transportes Instalações industriais Armamentos Outras áreas Usabilidade na TI(C) Interfaces de software Sistemas de grande porte Softwares para computação e telefonia móvel Interfaces digitais de hardware Princípios de design Equilíbrio Contraste Limpeza Alinhamento Uso do espaço Unidade Proporção

3 PRINCÍPIOS 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 princípios de usabilidade Apple Carroll IBM ISO 9241-110 Microsoft Nielsen: 10 heurísticas Norman: princípios de design Shneiderman: 8 regras de ouro Compilação de guidelines e princípios de usabilidade A principal regra é: não me atrapalhe! Simplicidade Visibilidade Feedback do estado do sistema Familiaridade e compatibilidade do sistema com o mundo real Consistência e padrões Controle, flexibilidade e liberdade do usuário Reconhecimento em vez de memorização Busca da eficiência Prevenção e tratamento de erros Tolerância e reversibilidade de ações do usuário Imposição de restrições (constraints) Estética e design visual Dez Heurísticas de Usabilidade para design de interfaces de usuário (Nielsen, 1994) 1. Visibilidade do status do sistema 2. Concordância entre os sistemas e o mundo real 3. Controle e liberdade para o usuário 4. Consistência e padronização 5. Prevenção de erros 6. Reconhecimento em vez de uso da memória 7. Flexibilidade e eficiência de uso 8. Design estético e minimalista 9. Ajudar a reconhecer, diagnosticar e remediar erros 10. Ajuda e documentação

4 As 8 regras de ouro de Shneiderman 1. Consistência 2. Atalhos para usuários assíduos 3. Feedback informativo 4. Diálogos que indiquem término da ação 5. Prevenção e tratamento de erros 6. Reversão de ações 7. Controle 8. Baixa carga de memorização Princípios de design de Norman Visibilidade Feedback Restrições Mapeamento Consistência Affordance Máximas de usabilidade de Nielsen (selecionadas) O usuário está sempre certo Designers e projetistas não são usuários Diretores não são usuários Menos é mais Os detalhes são importantes A ajuda não ajuda: um bom sistema de documentação não é capaz de melhorar uma má usabilidade; o ideal é que a ajuda não seja muito necessária Princípios de Usabilidade (Hypervisual) Autonomia Consistência Eficiência Familiaridade Perceptibilidade Simplicidade Tolerância

5 TÉCNICAS DE AVALIAÇÃO E IDENTIFICAÇÃO DE PROBLEMAS Técnicas mais comuns para usabilidade Avaliação heurística Testagem informal Pesquisa com usuários Design de interface Design de interação Prototipagem com wireframes e mockups Métricas Orientações Sempre exibir as opções disponíveis Reduzir a latência o mais possível Garantir a robustez da aplicação Não inventar soluções criativas Desabilitar controles não pertinentes ao contexto Criar um guia visual para aplicações Utilizar fontes padrão do sistema Exibir ícones, cursores e demais elementos gráficos adequados Testar cedo, sempre e em todas as plataformas-alvo Dar feedback visual para operações longas Memorizar o status do sistema Ferramentas Relatórios de avaliação Arquitetura Especificações Esboços / roughs / paper prototypes Wireframes Layouts / mockups Guias / manuais de implementação Revisão técnica Revisão de design Documentação técnica Check-lists Usabilidade não é tudo Usabilidade segurança Usabilidade marketing Usabilidade custos

6 DOCUMENTAÇÃO Leis da documentação de Nielsen 1. Os usuários não leem a documentação. 2. Se eles leem a documentação mesmo assim, é porque estão em apuros e precisam de resposta para um problema específico. As pessoas não têm 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 documentação Desatualizada / versão obsoleta Inexistente Muito técnica Muito extensa Chata de fazer De difícil manutenção Pouco utilizada É uma cópia da estrutura do aplicativo Onde está a documentação / formatos No help online No manual do usuário (context-sensitive) Na interface do usuário No Windows: formato CHM Outros formatos: HTML, PDF, DOC Em outras plataformas: usar o formato nativo Em dispositivos móveis: avaliar Etapas para documentação Conhecer o público-alvo Conhecer o produto Conhecer as necessidades dos usuários Definir a arquitetura dos conteúdos Redigir o texto Definir o design gráfico Incorporar as imagens Gerar a documentação Revisar, testar, corrigir, ampliar, atualizar e manter atualizado Estilo e linguagem: como escrever Tom neutro, informativo, conciso

7 Linguagem simples (não-técnica) Evitar termos estrangeiros Nomenclatura padrão e conhecida Usar a língua culta padrão Evitar erros e problemas comuns: acentuação, crase, digitação, gramática, ortografia Orientações para documentação Compatibilidade Consistência Métricas Imagens: somente as necessárias Não usar multimídia (áudio, animações, interação) Evitar o uso de vídeo Observar caracteres tipográficos e internacionais

8 PLATAFORMAS MÓVEIS Diferenças em relação ao desktop O usuário não distingue bem entre hardware e software Muitas limitações em relação ao desktop Telas pequenas. Consequências: textos truncados, excesso de rolagem, etc. Métricas mais restritivas Grandes variações de tamanho, proporção, densidade, orientação... Três métodos de desenvolvimento Atenção! 1. Código nativo: acesso completo aos recursos da plataforma (hardware e software); alta performance gráfica; muito difícil 2. Framework: multi-plataforma, manutenção e debugging simplificado 3. Mobile Aware: tecnologia padrão (CSS, JavaScript, XHTML, HTML 5...), não depende de aprovação Variações de tamanho, proporção, densidades de tela, orientação (retrato / paisagem) Evitar digitação e cadastros Evitar mensagens de erro Gadgets são muito atraentes: cuidado com o deslumbramento O mercado mobile muda muito rápido É muito fácil fazer uma app... ruim Dificuldade de entrar nas stores / banning Os maus comentários dos usuários podem acabar com um produto Os padrões devem ser muito mais altos que os normalmente praticados no Brasil Experiência do usuário precisa ser fluida Suporte técnico e atualizações constantes

9 REFERÊNCIAS Assuntos: Design, simplicidade / complexidade, língua portuguesa, documentação, usabilidade, plataformas móveis Livros About Face 3: The Essentials of Interaction Design Alan COOPER Designing for the Digital Age: How to Create Human-Centered Products and Services Kim GOODWIN 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 Dicionário Houaiss da Língua Portuguesa Antônio HOUAISS Don't Make Me Think: A Common Sense Approach to Web Usability 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 Moderna Gramática Portuguesa Evanildo BECHARA Nova Gramática do Português Contemporâneo Celso CUNHA Novo Dicionário Aurélio da Língua Portuguesa AURÉLIO Buarque de Holanda Ferreira 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) 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 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/ BlackBerry Smartphones UI Guidelines: http://docs.blackberry.com/en/developers/deliverables/17965/ 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/ Ilusões de óptica -- exemplos: http://www.ophtasurf.com/en/illusions.htm Ilusões 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

10 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/ Percepção visual: http://pt.wikipedia.org/wiki/percep%c3%a7%c3%a3o_visual Percepção: http://pt.wikipedia.org/wiki/percep%c3%a7%c3%a3o Pós-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/ Sua Língua Cláudio MORENO <http://wp.clicrbs.com.br/sualingua/> 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