O documento discute conceitos de design de interface e usabilidade para sites, abordando tópicos como arquitetura da informação, heurísticas, mitos sobre usabilidade e métodos como personas, análise competitiva, modelo conceitual, levantamento de conteúdo e mapa do site.

2. Sobre a oficina... Tema: Design de Interface + Usabilidade Um “pouco” de Arquitetura da Informação Nosso foco está nos sites Infelizmente, não falaremos de testes Métodos: “o que”, “por quê” e “como”

3. Definições

4. HCI “ O comportamento humano não é sempre igual, mas cheio de surpresas, o que dificulta o estabelecimento de “simples verdades” sobre o que esperar das pessoas em determinadas situações”. Lin (1994).

5. HCI... É uma disciplina maior que engloba o relacionamento físico-psicológico da interação homem-máquina Busca desenvolver um modelo teórico de performance humana Criar ferramentas capazes de medir a facilidade de uso

6. HCI... Estudos nas áreas de: Ergonomia Projeto de Produto Desempenho Arquitetura da Informação Usabilidade Engenharia Semiótica Design Gráfico...

7. Arquitetura da Informação É a arte e ciência de estruturar e organizar sistemas de informação para auxiliar as pessoas a alcançarem seus objetivos Sistemas de Organização: Modelo Mental x Mapa de Conteúdo Categorizar Informação: Local , Alfabeto , Tempo , Categoria e Hierarquia

8. Arquitetura da Informação... Foco em: Organização Navegação Rotulagem Sistema de Busca “ Tornar o complexo claro” Richard Saul Wurman

9. Arquitetura da Informação... Conteúdo Contexto do Negócio Usuários AI

10. (Engenharia de) Usabilidade “ Conceito utilizado para descrever a qualidade da interação de uma interface diante de seus usuários”. Hix (1993) “ Capacidade, em termos funcionais humanos, de um sistema ser usado facilmente e com eficiência pelo usuário”. Shackel (1993)

11. (Engenharia de) Usabilidade... “ Está diretamente ligada ao diálogo na interface . É a capacidade do software permitir que o usuário alcance suas metas de interação com o sistema ”. Scarpin (1993).

12. Processo de comunicação... Emissor / Receptor Meio de Propagação Mensagem Resposta Canal de Propagação Ambiente

13. ...no contexto da interface Usuários + User Agent Web Conteúdo Resposta / Transformação Interface Ambiente social

14. Usabilidade Para Nielsen, é composta de 5 atributos: Ser fácil de aprender Ser eficiente em sua utilização Ser fácil de ser recordado Ter poucos erros Ser subjetivamente agradável Em poucas palavras: Bom Senso + Princípios-Chave

15. Desmistificando a Usabilidade

16. Mito 01 “ Usabilidade é a chave para o sucesso de um projeto web” É só uma parte da Experiência do Usuário O objetivo final pode valer o esforço Conteúdo é Rei! Se não for relevante, não vejo

17. Mito 01 “ Usabilidade é a chave para o sucesso de um projeto web” É só uma parte da Experiência do Usuário O objetivo final pode valer o esforço Conteúdo é Rei! Se não for relevante, não vejo Estratégia do Produto Experiência do Usuário Design de Interface Modelo de Negócios Atendimento ao Consumidor, Embalagem, Marketing, Gerenciamento de Conteúdo, Design Industrial, Design de Interiores, etc. Oportunidades Tecnológicas e Limitações Necessidades do Usuário Objetivos do Negócio Design Gráfico Design de Informação Design de Interação Arquitetura da Informação Wroblewski (2006)

18. Mito 01 “ Usabilidade é a chave para o sucesso de um projeto web” É só uma parte da Experiência do Usuário O objetivo final pode valer o esforço Conteúdo é Rei! Se não for relevante, não vejo Duney, Landay e Hong (2003) Design Centrado no Usuário Facilidade de Uso Conteúdo Performance Satisfação Valor da Marca

19. Chak (2004) Disponibilidade Usabilidade Confiança Desejo Disposição para realizar uma transação

20. Mito 02 “ Usabilidade não vence um conceito criativo” Quem é o seu público-alvo? O que ele deseja no seu site? Experiências Imersivas funcionam, mas são temporárias Não é uma disputa. É parceria!

21. Mito 03 “ Jakob Nielsen é o pai da usabilidade” HCI está por aí desde os primeiros softwares Nielsen popularizou o conceito de usabilidade Foi um expoente para agregar essas metodologias ao design de interface na rede Ele é o tio legal que te apresenta aos amigos!

22. Mito 04 “ Usabilidade é um conjunto de regras. Decorou, usou!” Não são regras, são conceitos Métodos servem como guias, não como muros A complexidade avança com a necessidade É casada com Arquitetura da Informação

23. Uma questão de Bom-Senso

24. Princípios da Usabilidade O usuário nunca está errado! Relação entre o mundo real x mundo virtual Hierarquização e relacionamento visual claros Torne óbvio o que é “clicável” Cada clique tem um preço

25. Elementos da Navegabilidade... Memória (2005) Nielsen, Krug e Lynch e Horton Parte inferior Navegação de rodapé Bernard Área central Conteúdo global e contextual Adkisson, Lida e Chaparro e Krug Parte superior, abaixo da marca da empresa Breadcrumbs Nielsen, Adkisson e Bernard Coluna da esquerda Navegação Local Nielsen, Adkisson e Krug Parte superior com links na horizontal Navegação Global Nielsen, Adkisson e Bernard Parte superior Busca Nielsen, Adkisson e Bernard Canto superior esquerdo Marca da Empresa Pesquisador Posicionamento Elemento de Interface

26. ...velhos conhecidos! Marca Navegação local Navegação Global Navegação de rodapé Breadcrumbs Conteúdo Global e contextual Conteúdo relacionado Search

27. Dicas para o Design de Interface Usuários não lêem a sua página... Escaneiam! “ Teste do Porta-Malas” (presente do Steve Krug) Que site é este? Identificação do site Em que página estou? Nome da página Quais são as seções principais desse site? Seções Quais são minhas opções neste nível? Navegação local Onde estou no esquema das coisas? Indicadores Como posso procurar? Busca

28. Dicas para o Design de Interface Quanto já andei? Links visitados (Nielsen) Home-page : um caso particular O que é isso? O que posso fazer aqui? Por que aqui e não em outro lugar? Por onde eu começo? Acima do scroll , de frente pro mar!

29. Heurísticas e Guidelines

30. Conceito Heurísticas > Guidelines > Padrões Dix (1999)

31. Heurísticas: regras gerais Para Preece (1994) e Hobbs (1996): Conheça seu usuário Reduza a carga cognitiva Projete para os erros Mantenha consistência e clareza

32. “ Os 10 mandamentos” Para Nielsen e Molich (1990): Diálogo simples e natural; Fala a língua do usuário; Minimiza a carga cognitiva do usuário; Consistência; Feedback;

33. “ Os 10 mandamentos”... Para Nielsen e Molich (1990): Saídas marcadas claramente; Atalhos (flexibilidade); Mensagens de erro precisas e construtivas; Prevenção de erros; Ajuda e Documentação.

34. Metodologias do Design de Interface

35. Mito 01 “ Usabilidade é a chave para o sucesso de um projeto web” É só uma parte da Experiência do Usuário O objetivo final pode valer o esforço Conteúdo é Rei! Se não for relevante, não vejo Duney, Landay e Hong (2003) Avaliação Design Prototipagem Levantamento de Dados Manutenção Produção Refinamento Criação Implementação

36. Tempo e Recursos limitados Voltando a realidade... Seu cliente pode não ter muitos recursos O prazo pode ser curto Equipe pequena Testes estão fora de cogitação Você pode entregar um produto de qualidade Construir as peças do quebra-cabeça

37. Mito 01 “ Usabilidade é a chave para o sucesso de um projeto web” É só uma parte da Experiência do Usuário O objetivo final pode valer o esforço Conteúdo é Rei! Se não for relevante, não vejo Duney, Landay e Hong (2003) Avaliação Design Prototipagem Levantamento de Dados Manutenção Produção Refinamento Criação Implementação

38. Mito 01 www.usabilitynet.org/tools/methods.htm

39. Mito 01 www.usabilitynet.org/tools/methods.htm

40. Documentação: assunto sério Geralmente documentos são entregas Toda documentação deve atender a normas: Formatação Respeitabilidade Consistência Controle (autor e versão)

41. Personas

42. Personas Também conhecido por: Perfil do Usuário ( user profiles ) Representação do Usuário ( user role definitions ) Perfil da Audiência ( audience profile )

43. Personas O que? Uma representação dos usuários focais do produto, descritos como pessoas reais, apresentando motivações e necessidades.

44. Mito 01 Brown (2006)

45. Personas Por quê? Seria o target em marketing (herança) Norteia as ações dos envolvidos Devem ser frutos de pesquisas e estatísticas Expressar o que o usuário quer e deseja Apoio para construção de cenários

46. Personas Como? Representar possíveis usuários (categorizar) Definir suas Motivações e Necessidades Com relação ao sistema: cenários , comportamentos e citações 3 tipos e momentos distintos...

47. Perfil dos Usuários Dados: Tipo de Usuário Classificação Citação Descrição

48. Mito 01 Brown (2006)

49. Detalhamento do Usuário Dados: Tipo de Usuário Classificação Citação Descrição

50. Mito 01 Brown (2006)

51. Personas Dados: Tipo de usuário Dados pessoais (até mesmo estimativas) Conhecimento técnico Necessidades (com relação ao site) Adaptar Detalhamento do Usuário ou descrever possível uso da ferramenta pelo usuário (presente e/ou futuro)

52. Mito 01 Brown (2006)

53. Personas 50% pessoal + 20% técnico + 30% relacionamento com o site Receita de Bolo (Dados):

54. Aplicando...

55. Análise Competitiva

56. Análise Competitiva Também conhecido por: Benchmark Análise da Concorrência

57. Análise Competitiva O que? Uma breve análise de projetos similares ao que você está trabalhando. As semelhanças entre os modelos de negócio e o design de interface devem ser destacadas e as diferenças , comparadas

58. Mito 01 Brown (2006)

59. Análise Competitiva Por quê? Conhecer categorias, nomenclaturas e padrões de fluxo. Descobrir bons modelos (convenções) e pontos de falha. O que foi e como (não) foi explorado? Avaliação dos elementos de navegabilidade

60. Análise Competitiva Como? Depende do seu foco 3 grandes abordagens: navegabilidade, conteúdo e funcionalidades Matriz: elemento analisado x concorrência Concluir com documentação das conclusões Pode-se trabalhar com...

61. Presença

62. Pontuação (macro ou detalhada)

63. Funcional (macro ou detalhada)

64. Navegabilidade (descritiva)

65. Navegabilidade (estrutural)

66. Modelo Conceitual

67. Modelo Conceitual Também conhecido por: Mapa Conceitual ( concept maps ) Diagrama de Afinidade ( affinity diagram )

68. Modelo Conceitual O que? Um diagrama para apontar os relacionamentos entre os usuários , o conteúdo e as funcionalidades existentes. É uma visão macro de como os elementos e as entidades “ conversam ”.

69. Mito 01

70. Mito 01

71. Mito 01

72. Por quê? Funciona mais com sites que tenham aplicações Para dar substância às idéias Ajuda na categorização das tarefas do site Checar possíveis desdobramentos Avalia o “poder” de cada tipo de usuário Modelo Conceitual

73. Como? Comece pelos usuários Adicione conteúdo e funcionalidades do site ( nós ) Nós (nodes) podem representar: - Tipos de conteúdo - Grupos ou Categorias - Processos - Pessoas, entidade ou atores - Eventos - Sistemas e etc... Função do nó: representação gráfica Modelo Conceitual

74. Mito 01

75. Como...? Conecte-os através de ações ( conectores ) Costumam a ser descritivos (verbos) ***** procura por **** ( ativo ) ou ***** é procurado por ***** ( passivo ) Determine a direção do fluxo e os mais importantes Essas linhas também podem falar ( legenda ) Modelo Conceitual

76. Mito 01

77. Mito 01

78. Mito 01

79. Mito 01

80. Mito 01

81. Aplicando...

82. Levantamento de Conteúdo

83. Levantamento de Conteúdo Também conhecido por: Análise do conteúdo ( content analysis ) Auditoria do conteúdo ( content audit )

84. O que? Uma lista de toda informação contida em um site , descrevendo a informação sobre uma série de pontos de vista (como audiência , prioridade , localização e responsabilidade ). Levantamento de Conteúdo

85. Por quê? Esse documento vai salvar a sua vida ! Define a responsabilidade , tipo e complexidade do conteúdo. Ajuda a definir templates e páginas dinâmicas É o principal apoio na construção do mapa do site Foca sua preocupação na interface Levantamento de Conteúdo

86. Como? Mais do que uma planilha Categorizar os dados : nome da página , tipo de conteúdo , localização ... Não há uma “receita de bolo” – avaliar parâmetros “ Responsável ” é a coluna mais importante Usar IDs é sempre uma boa idéia Levantamento de Conteúdo

87. Visão Macro

88. Levantamento Detalhado

89. Foco na Atualização

90. Mapa do Site

91. Mapa do Site Também conhecido por: Modelo Estrutural ( structure model ) Mapa ou árvore semântica ( semantic map) Modelo Navegacional ( navigation model )

92. O que? Uma representação visual da estrutura do site . Apresentação de todas seções e subseções, apresentado as conexões entre os diversos conteúdos em níveis diferentes . Geralmente organizada na forma de fluxograma no sentido vertical . Mapa do Site

93. Mito 01

94. Mito 01

95. Mito 01

96. Mito 01

97. Mito 01

98. Mito 01

99. Por quê? Na forma mais simples, um site é uma coleção de informações e funcionalidades Define níveis e hierarquias visualmente Ajuda na visualização Lembra da contagem de cliques ? Avaliação rápida aqui Ajuda a mapear as ações mais importantes Evita problemas futuros Mapa do Site

100. Como? É um organograma Sair sempre da Home-page Buscar uma profundidade máxima de 4 / 5 níveis Definir as rotas possíveis de navegação Jesse James Garret e seu Vocabulário Visual http://www.jjg.net/ia/visvocab Mapas de Fluxo Mapa do Site

101. Mapas de Fluxo

102. Mapas de Fluxo...

103. Card Sorting: teste com usuário Modelo Mental!

104. Card Sorting...

105. Aplicando...

106. Prototipagem

107. Prototipagem Também conhecido por: Wireframes Blueprints Pode derivar em: Storyboard

108. O que? Uma versão simplificada de como o conteúdo irá aparecer em cada tela do produto final , desprovido de qualquer elemento tratamento visual. Prototipagem

109. Mito 01 Brown (2006)

110. Por quê? Montando o esqueleto Foco na navegabilidade Conteúdo: áreas , descrição e prioridades . Checa as opções em curto espaço de tempo Descobrindo padrões de interação Facilita o projeto visual da interface Prototipagem

111. Como? PowerPoint , Visio ou até mesmo XHTML(?) Ponto de partida: Home-page Comece simples, depois aumente a complexidade Baixa, Média e Alta Fidelidade Case “UCRG” – Protótipo e Projeto Visual Pode ser horizontal e vertical Case “ Americanas.com ” Storyboard (foco na tarefa) Prototipagem

112. Prototipagem Horizontal

113. Prototipagem Vertical

114. Paper prototyping

115. Aplicando...

116. E sobre testes? Nada mesmo?

117. Testes de Usabilidade Case: Jornal do Brasil Puc-Rio (2002) Avaliação Conclusões

118. Bibliografia

119. Não me faça pensar , Steve Krug Projetando Web Sites , Jakob Nielsen Como Criar Sites Persuasivos , Andrew Chak Design para a Internet , Felipe Memória Communicating Design , Daniel M. Brown Emotional Design , Don Norman Bibliografia

120. Obrigado! [email_address] www.paulocoimbra.com Em breve: