Upcoming SlideShare
Published on
Usabilidade de Ferramentas
- 1. Ferramentas deDesenvolvimento comBoa Usabilidade:É POSSÍVEL?André Willik ValentiDevCamp 2013 | Campinas-SPDevInSampa 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 debuild...● Você já passou por algum destes problemasao tentar usar uma ferramenta dedesenvolvimento nova?○ Erros bizarros○ Documentação ilógica○ Conceitos obscuros
- 7. Por que esta palestra?● Anos e anos de frustração com falta deusabilidade 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 produtossimilares 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 paradesenvolver software
- 20. Usabilidade● De celulares● De ferramentas de desenvolvimento○ Semelhanças?○ Diferenças?
- 21. Exemplo 1● Joãozinho está trabalhando em um projetoJava para web, de compras online● Ele precisa gerar emails para os clientes dosite 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çãoApache 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 umaferramenta
- 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 nenhumadessas perguntas...
- 33. Site oficial● Para refletir:○ "Propaganda eu vejo na televisão. Fala logo o que aferramenta faz e deixa que eu decido se uso ounão!" (Andrei Tognolo)
- 34. Configuração● O que é?○ Mecanismo de ajuste para que a ferramenta façaexatamente 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 modificarConfiguração
- 36. Configuração● Vamos pensar em dois tipos deconfiguração:a. Mínimab. Padrão
- 37. Configuração● Tipos de configuração:○ Mínima■ O estritamente necessário para a ferramentafuncionar○ Padrão■ Aquela que vem de fábrica com a ferramenta, ouque 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 amesma coisa quando for usar a ferramenta○ É o tal do boilerplate○ Exemplos:
- 41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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...#endifConfiguração
- 43. ● Por que é bom a padrão oferecer recursosúteis já configurados (logging, cores, atalhosde teclado etc.)?○ Ninguém sabe da existência de todas asfuncionalidades 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çãomí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 seela 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 sozinhoque 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 configuredautomatically based on your username andhostname. Please check that they are accurate.You can suppress this message by setting themexplicitly:git config --global user.name "Your Name"git config --global user.email you@example.comAfter doing this, you may fix the identityused for this commit with:git commit --amend --reset-author
- 57. Documentação / Configuração● Compare com uma instalação zerada doPostgreSQL:
- 58. Documentação / Configuraçãofi@deskdofi:~$ sudo apt-get installpostgresql...fi@deskdofi:~$ psqlpsql: FATAL: role "fi" does not exist(Hein?)
- 59. Documentação / Configuração(Procura no Google... Procura noGoogle...)(Ah, tá! Não existe ainda o meuusuário no banco.)(Ah tá! Já vem um usuário chamadopostgres. Tenho que logar como ele.)
- 60. Documentação / Configuraçãofi@deskdofi:~$ psql -U postgrespsql: FATAL: Peer authenticationfailed for user "postgres"(Hein?)(Procura no Google... Procura noGoogle...)
- 61. Documentação / Configuração(Ah tá! Preciso pôr a senha, que épostgres também!)fi@deskdofi:~$ psql -U postgres -WPassword for user postgres: ********(Agora vai!!)
- 62. Documentação / Configuraçãopsql (9.1.9)Type "help" for help.postgres=#(Aêee!!!)
- 63. Documentação / Configuração● Penamos um pouquinho, mas conseguimosentrar no console do Postgres!● Só que...○ ...não○ Esse desfecho não é o verdadeiro!○ O verdadeiro foi assim:
- 64. Documentação / Configuraçãofi@deskdofi:~$ psql -U postgres -WPassword for user postgres: ********psql: FATAL: Peer authenticationfailed for user "postgres"
- 65. psql: FATAL: Peerauthenticationfailed for user"postgres"
- 66. Documentação / Configuração(O certo é...)fi@deskdofi:~$ sudo -u postgres psql
- 67. Documentação / Configuraçãopsql (9.1.9)Type "help" for help.postgres=#
- 68. Documentação / Configuração(ou configurar o pg_hba.conf)
- 69. Alguns exemplos deferramentas 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-drivenDevelopment) para JavaScript● Documentação○ A própria ferramenta especificando a si mesma
- 73. Flyway● http://flywaydb.org/● Framework de migração de banco de dadospara 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 deconhecimento○ 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 thenseller.points.should_have increased_by 100and buyer.notifications.should_includeconfirmationEmail }
- 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 DesenvolvimentocomBoa Usabilidade:É POSSÍVEL???
- 87. ConclusãoSIM!
- 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çãode 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 whatthey are creating"
- 92. Obrigado :)!● André Valenti / Fi● Contatos:○ awvalenti@gmail.com○ @awvFi
Be the first to comment