![Documentação
● Para refletir:
○ "A melhor documentação é a ausência de
[necessidade de] documentação." (André Valenti)
■ D...](https://image.slidesharecdn.com/usabilidadedeferramentas-130521215539-phpapp01/85/usabilidade-de-ferramentas-54-320.jpg?cb=1369173579)
Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
Usabilidade de Ferramentas
- 1. Ferramentas de Desenvolvimento com Boa Usabilidade: É POSSÍVEL? André Willik Valenti DevCamp 2013 | Campinas-SP DevInSampa 2013 | São Paulo-SP
- 2. Sobre mim ● André Valenti ● "Fi" ● São Carlos-SP
- 3. Sobre mim ● UFSCar ○ Bacharelado em Ciência da Computação ○ 2003-2007 ● UNICAMP ○ Mestrado em Ciência da Computação ○ 2008-2011
- 4. Sobre mim ● Histórico profissional recente ○ 2013: SIn - UFSCar (São Carlos) ○ 2012: Daitan Group (Campinas) ○ 2010-2012: Dextra (Campinas)
- 5. Sobre mim ● Experiências recentes ○ Groovy / Grails ○ PostgreSQL ○ Jogos HTML5 ○ JavaScript / Node.js / CoffeeScript
- 6. Por que esta palestra? ● Bibliotecas, frameworks, automação de build... ● Você já passou por algum destes problemas ao tentar usar uma ferramenta de desenvolvimento nova? ○ Erros bizarros ○ Documentação ilógica ○ Conceitos obscuros
- 7. Por que esta palestra? ● Anos e anos de frustração com falta de usabilidade em ferramentas ● Sonho de mudar esse cenário
- 8. Início
- 9. Alguém conhece estes celulares?
- 10. iPhone & Galaxy ● Satisfação ● Produtividade ● Confiabilidade ● Fidelidade
- 11. iPhone & Galaxy ● Satisfação ○ Uso o produto porque fico feliz com o resultado ● Produtividade ○ Resolvo rápido o que eu preciso resolver ● Confiabilidade ○ Boto fé que o produto continuará funcionando bem ● Fidelidade ○ Voltarei a ter outro produto desses ou produtos similares da mesma marca
- 12. iPhone & Galaxy ● Não é assim com todo mundo, claro! ● Mas é assim com muita gente
- 13. E este aqui?
- 14. Siemens CF62 ● Frustração ● Improdutividade ● Desconfiança ● Aversão
- 15. Siemens CF62 ● Frustração ○ Só uso porque sou obrigado ● Improdutividade ○ Demoro uma vida para fazer qualquer coisa ● Desconfiança ○ A qualquer momento, posso ficar na mão ● Aversão ○ Na primeira oportunidade, tchau!
- 16. Siemens CF62 ● Não é assim com todo mundo, claro! ● Mas é assim com muita gente
- 17. Usabilidade ● Primeiro resultado no Google Imagens:
- 18. Ferramenta de desenvolvimento ● Bibliotecas ● Frameworks ● Automação de build ● Utilitários em linha de comando? ● Linguagens de programação? ● Sistemas operacionais?
- 19. Ferramenta de desenvolvimento ● No contexto desta palestra: ○ QUALQUER software que seja usado para desenvolver software
- 20. Usabilidade ● De celulares ● De ferramentas de desenvolvimento ○ Semelhanças? ○ Diferenças?
- 21. Exemplo 1 ● Joãozinho está trabalhando em um projeto Java para web, de compras online ● Ele precisa gerar emails para os clientes do site quando alguém faz uma compra ● Como ele vai implementar isso?
- 22. Exemplo 1 ● Precisa ficar mais ou menos assim: <html> <body> <p>Olá, Maria</p> <p>Pedido de número 1234 enviado!</p> </body> </html>
- 23. Exemplo 1 ● Joãozinho disse: ○ Legal! Vou usar esse tal de Velocity aí... ● Será que foi uma boa ideia? ○ Vamos descobrir...
- 24. Demonstração Apache Velocity
- 25. Quais foram os problemas? ● Site complicado ● Documentação prolixa ● API complexa ● Configuração difícil
- 26. Usabilidade ruim ● Frustração ○ Só uso porque sou obrigado ● Improdutividade ○ Demoro uma vida para fazer qualquer coisa ● Desconfiança ○ A qualquer momento, posso ficar na mão ● Aversão ○ Na primeira oportunidade, tchau!
- 27. Usabilidade ruim ● Não é assim com todo mundo, claro! ● Mas é assim com muita gente
- 28. Aspectos de uma ferramenta
- 29. Três aspectos principais ● Site oficial ● Configuração ● Documentação ● Qual o papel de cada um?
- 30. Site oficial ● O que é? ○ Primeiro e principal meio de comunicação ○ Visto por 99% dos usuários ○ Cartão de visitas da ferramenta ● Qual o objetivo? ○ Fornecer todas as informações básicas do projeto ■ Quais?
- 31. Site oficial ● MINIMAMENTE, precisa deixar claro: ○ Que problemas a ferramenta resolve ○ Como instala ○ Como roda um exemplo básico ("Hello, World") ● Altamente desejável incluir também: ○ Por quê vale a pena usá-la ○ Quando vale a pena usá-la ○ Quando NÃO vale (melhor usar outra ou nenhuma)
- 32. Site oficial ● Se o site oficial não responder nenhuma dessas perguntas...
- 33. Site oficial ● Para refletir: ○ "Propaganda eu vejo na televisão. Fala logo o que a ferramenta faz e deixa que eu decido se uso ou não!" (Andrei Tognolo)
- 34. Configuração ● O que é? ○ Mecanismo de ajuste para que a ferramenta faça exatamente o que se quer ● Qual o objetivo? ○ Adequar a ferramenta às necessidades do usuário ■ Ou seja: configs devem fazer sentido para ele ■ (encapsulamento? serviços?)
- 35. ● Deve ser: ○ Óbvia de encontrar ○ Fácil de entender ○ Fácil de modificar Configuração
- 36. Configuração ● Vamos pensar em dois tipos de configuração: a. Mínima b. Padrão
- 37. Configuração ● Tipos de configuração: ○ Mínima ■ O estritamente necessário para a ferramenta funcionar ○ Padrão ■ Aquela que vem de fábrica com a ferramenta, ou que pode ser gerada com um comando óbvio
- 38. Configuração ● Mínima ○ A exigida para um "Hello, World" ○ Deve ser óbvia de achar ("Getting Started") ○ Idealmente, é vazia (faz o básico sem configuração) ● Padrão ○ A que já vem embutida no pacote da ferramenta ■ Ou gerada por comando que venha embutido (rails new app, grails create-app app) ○ Idealmente, é a mínima + recursos úteis (logging, cores, atalhos de teclado etc.) ■ "Usável, por padrão"
- 39. Configuração ● Padrão ⊇ Mínima (contém) ○ É só baixar e já pode brincar ○ :) ● Padrão ⊉ Mínima (não contém) ○ Só pode brincar depois de fazer a lição ○ :(
- 40. Configuração ● Padrão ⊇ Mínima (contém) ○ Evita decoreba ○ Evita trabalho repetitivo do desenvolvedor ○ (alguma relação com encapsulamento?) ● Padrão ⊉ Mínima (não contém) ○ Obriga o desenvolvedor a escrever sempre a mesma coisa quando for usar a ferramenta ○ É o tal do boilerplate ○ Exemplos:
- 41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html> Configuração
- 42. #ifndef _MINHACLASSE_H #define _MINHACLASSE_H ... #endif Configuração
- 43. ● Por que é bom a padrão oferecer recursos úteis já configurados (logging, cores, atalhos de teclado etc.)? ○ Ninguém sabe da existência de todas as funcionalidades ao começar a usar algo ○ Muitas funcionalidades, porém, são úteis para todos ○ Não espere que alguém procure-as. Exponha-as! ○ Entregue a ferramenta "Usável, por padrão" Configuração
- 44. Configuração ● Para refletir: ○ "Se você não consegue decorar a configuração mínima, está complicada demais." (André Valenti) ○ "A configuração padrão é a que será usada por 90% dos usuários." (André Valenti) ■ Duvida?
- 45. Configuração ● Para quem usa terminal com Bash: ○ Você gosta do ls colorido?
- 46. Configuração ● Para quem usa terminal com Bash: ○ E do grep colorido?
- 47. Configuração ● Olhe o seu ~/.bashrc: ○ alias ls='ls --color=auto' ○ alias grep='grep --color=auto'
- 48. Configuração ● Você sabia disso? ● Mais importante: ○ Você PRECISAVA saber disso? ● Mais importante ainda: ○ Você saberia da existência dessa funcionalidade se ela não viesse ativa por padrão? ○ Alguém já pensou nisso e entregou-nos o Bash "Usável, por padrão"
- 49. Configuração ● Se você usa Git, por acaso ele está assim?
- 50. Configuração ● Sabia que dá para deixá-lo assim?
- 51. Configuração ● E como é que faz isso? ○ git config --global color.ui auto ● Como eu descobri isso? ○ Eu usava Windows + Git Bash (MSYS modificado) ■ Git Bash já vinha colorido de fábrica ■ Ao mudar pro Linux, não vi cores no git ■ Googlei "git colors" e descobri o comando acima ○ Pergunta pra mim se eu teria imaginado sozinho que o git tinha o recurso de cores
- 52. Documentação ● O que é ○ Detalhamento da ferramenta e de suas partes ● Quais os objetivos? ○ Ensinar a ir além do básico ○ Indicar soluções para problemas mais específicos ○ Explicar detalhes da API
- 53. Documentação ● Minimamente, deve ser: ○ Óbvia de encontrar ○ Fácil de pesquisar ● Idealmente, deve: ○ Possuir seções autocontidas
- 54. Documentação ● Para refletir: ○ "A melhor documentação é a ausência de [necessidade de] documentação." (André Valenti) ■ Duvida?
- 55. Documentação ● Git ○ Numa instalação zerada ○ Ao fazer seu primeiro commit: ○ ○
- 56. Committer: André Willik Valenti <fi@deskdofi.(none)> Your name and email address were configured automatically based on your username and hostname. Please check that they are accurate. You can suppress this message by setting them explicitly: git config --global user.name "Your Name" git config --global user.email you@example.com After doing this, you may fix the identity used for this commit with: git commit --amend --reset-author
- 57. Documentação / Configuração ● Compare com uma instalação zerada do PostgreSQL:
- 58. Documentação / Configuração fi@deskdofi:~$ sudo apt-get install postgresql ... fi@deskdofi:~$ psql psql: FATAL: role "fi" does not exist (Hein?)
- 59. Documentação / Configuração (Procura no Google... Procura no Google...) (Ah, tá! Não existe ainda o meu usuário no banco.) (Ah tá! Já vem um usuário chamado postgres. Tenho que logar como ele.)
- 60. Documentação / Configuração fi@deskdofi:~$ psql -U postgres psql: FATAL: Peer authentication failed for user "postgres" (Hein?) (Procura no Google... Procura no Google...)
- 61. Documentação / Configuração (Ah tá! Preciso pôr a senha, que é postgres também!) fi@deskdofi:~$ psql -U postgres -W Password for user postgres: ******** (Agora vai!!)
- 62. Documentação / Configuração psql (9.1.9) Type "help" for help. postgres=# (Aêee!!!)
- 63. Documentação / Configuração ● Penamos um pouquinho, mas conseguimos entrar no console do Postgres! ● Só que... ○ ...não ○ Esse desfecho não é o verdadeiro! ○ O verdadeiro foi assim:
- 64. Documentação / Configuração fi@deskdofi:~$ psql -U postgres -W Password for user postgres: ******** psql: FATAL: Peer authentication failed for user "postgres"
- 65. psql: FATAL: Peer authentication failed for user "postgres"
- 66. Documentação / Configuração (O certo é...) fi@deskdofi:~$ sudo -u postgres psql
- 67. Documentação / Configuração psql (9.1.9) Type "help" for help. postgres=#
- 68. Documentação / Configuração (ou configurar o pg_hba.conf)
- 69. Alguns exemplos de ferramentas usáveis (ao menos em alguns aspectos)
- 70. Ferramentas usáveis ● Mustache ● Jasmine ● Flyway ● jQuery
- 71. Mustache ● http://mustache.github.io/ ● Processador de templates ● Similar ao Velocity ● Implementações em diversas linguagens ● Demonstração no próprio site
- 72. Jasmine ● http://pivotal.github.io/jasmine/ ● Framework de BDD (Behavior-driven Development) para JavaScript ● Documentação ○ A própria ferramenta especificando a si mesma
- 73. Flyway ● http://flywaydb.org/ ● Framework de migração de banco de dados para Java ● Tem seções explicando: ○ O que é migração de banco de dados ○ Como a ferramenta funciona ○ Como começar a usar
- 74. jQuery ● http://jquery.com ● API extremamente intuitiva
- 75. Ideologia
- 76. Ideologia ● Merecemos ferramentas da hora! ● Merecemos satisfação e produtividade! ● Merecemos soluções intuitivas!
- 77. Ideologia ● Software ○ Feito por seres humanos para seres humanos ● Comunicação é falha ○ Lide com isso ○ Esclareça, repita, frise ● Erro é inevitável ○ Verifique suas premissas (Pragmatic Programmer) ○ Avise o que deu errado ○ Sugira maneiras de corrigir
- 78. Ideologia ● Pessoas têm diferentes níveis de conhecimento ○ Presuma o mínimo de conhecimento prévio ○ Explique brevemente os conceitos básicos ■ Ex: Flyway ○ Ou referencie páginas que os expliquem
- 79. Ideologia ● Desenvolvedores querem: ○ Soluções simples e intuitivas ○ Resolver um problema de cada vez ○ Ler manuais quando realmente necessário
- 80. Exemplos!
- 81. Ideologia ● Dê exemplos! ○ De preferência, do mundo real ○ Exemplo: Jasmine ■ Especifica a si mesmo usando a si mesmo
- 82. Ideologia ● Evite exemplos bobos e batidos: ○ OO: classe Ponto ■ { private x; private y; getX, getY, setX, setY } ○ TDD: soma ■ { assert soma(a, b) == a + b } ○ BDD: pilha ■ { when i push('x') then pop().should_equal 'x' }
- 83. Ideologia ● Prefira exemplos concretos e úteis: ○ OO: nós de uma árvore (p. ex., sintática) ■ { public abstract String gerarCodigo(); } ○ TDD: teste um algoritmo complicado ■ { arvore.inserir(nóEsquisito); assert arvore.indiceDeBalanceamento == 7 } ○ BDD: teste uma regra de negócio ■ { when i buy(product) from seller then seller.points.should_have increased_by 100 and buyer.notifications.should_include confirmationEmail }
- 84. Ideologia ● DEAE: ○ Didática: saiba explicar, saiba ensinar ○ Empatia: coloque-se no lugar do usuário ○ Agilidade: entregue uma funcionalidade por vez ○ Encapsulamento: somente informação relevante
- 85. Conclusão
- 86. Conclusão ● Ferramentas de Desenvolvimento com Boa Usabilidade: É POSSÍVEL???
- 87. Conclusão SIM!
- 88. Conclusão ● A resposta curta é: ○ Coloque-se no lugar do seu usuário!
- 89. Conclusão ● A resposta longa é DEAE: ○ Didática: saiba explicar, saiba ensinar ○ Empatia: coloque-se no lugar do usuário ○ Agilidade: entregue uma funcionalidade por vez ○ Encapsulamento: somente informação relevante
- 90. Conclusão ● Vários desafios envolvidos: ○ Alcançar simplicidade ■ Dá trabalho! ○ Escrever documentação objetiva e completa ■ Dá trabalho! ○ Conciliar boa curva de aprendizado com evolução de funcionalidades ■ Dá trabalho!
- 91. Conclusão ● Grande fonte de inspiração: ○ Inventing on Principle (Bret Victor) ■ http://vimeo.com/36579366 ○ "Creators need an immediate connection to what they are creating"
- 92. Obrigado :)! ● André Valenti / Fi ● Contatos: ○ awvalenti@gmail.com ○ @awvFi