Usabilidade de Ferramentas

1,240 views
1,193 views

Published on

Erros bizarros, documentação ilógica, conceitos obscuros… Você já passou por isso ao tentar usar uma ferramenta de desenvolvimento nova, seja ela uma biblioteca, framework ou ferramenta de automação de build?

Você já quebrou a cabeça por horas até perceber a falta da vírgula no arquivo de configuração? Você já googlou por horas até finalmente encontrar no StackOverflow o bendito nome da variável de ambiente?

Em maior ou menor grau, todos passamos por isso. E acabamos nos acostumando… Mas será que deveríamos?

Antigamente, os celulares eram complicados e vinham com manuais enormes. Hoje, muitos deles são óbvios e até tataravós conseguem usá-los. Se já somos capazes de fazer produtos finais com excelente usabilidade, por que ainda estamos patinando quando o assunto são ferramentas de desenvolvimento?

Nesta palestra, discutiremos exatamente esse problema e buscaremos soluções. Como quebrar o tabu do manual gigante? Como conciliar funcionalidades poderosas com utilização simples? Como proporcionar satisfação e bons resultados ao desenvolvedor em pouco tempo de uso e estudo? A resposta curta é: coloque-se no lugar do seu usuário! A resposta longa é: assista à palestra e veja como empatia, agilidade, didática e encapsulamento podem trabalhar juntos a seu favor, tornando mais usável e atrativa a ferramenta que você desenvolve.

Demonstração e exemplos práticos inclusos!

Público-alvo: desenvolvedores de ferramentas de código aberto, desenvolvedores de ferramentas de código fechado, desenvolvedores de não-ferramentas de código aberto ou fechado.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,240
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Usabilidade de Ferramentas

  1. 1. Ferramentas deDesenvolvimento comBoa Usabilidade:É POSSÍVEL?André Willik ValentiDevCamp 2013 | Campinas-SPDevInSampa 2013 | São Paulo-SP
  2. 2. Sobre mim● André Valenti● "Fi"● São Carlos-SP
  3. 3. Sobre mim● UFSCar○ Bacharelado em Ciência da Computação○ 2003-2007● UNICAMP○ Mestrado em Ciência da Computação○ 2008-2011
  4. 4. Sobre mim● Histórico profissional recente○ 2013: SIn - UFSCar (São Carlos)○ 2012: Daitan Group (Campinas)○ 2010-2012: Dextra (Campinas)
  5. 5. Sobre mim● Experiências recentes○ Groovy / Grails○ PostgreSQL○ Jogos HTML5○ JavaScript / Node.js / CoffeeScript
  6. 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. 7. Por que esta palestra?● Anos e anos de frustração com falta deusabilidade em ferramentas● Sonho de mudar esse cenário
  8. 8. Início
  9. 9. Alguém conhece estes celulares?
  10. 10. iPhone & Galaxy● Satisfação● Produtividade● Confiabilidade● Fidelidade
  11. 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. 12. iPhone & Galaxy● Não é assim com todo mundo, claro!● Mas é assim com muita gente
  13. 13. E este aqui?
  14. 14. Siemens CF62● Frustração● Improdutividade● Desconfiança● Aversão
  15. 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. 16. Siemens CF62● Não é assim com todo mundo, claro!● Mas é assim com muita gente
  17. 17. Usabilidade● Primeiro resultado no Google Imagens:
  18. 18. Ferramenta de desenvolvimento● Bibliotecas● Frameworks● Automação de build● Utilitários em linha de comando?● Linguagens de programação?● Sistemas operacionais?
  19. 19. Ferramenta de desenvolvimento● No contexto desta palestra:○ QUALQUER software que seja usado paradesenvolver software
  20. 20. Usabilidade● De celulares● De ferramentas de desenvolvimento○ Semelhanças?○ Diferenças?
  21. 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. 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. 23. Exemplo 1● Joãozinho disse:○ Legal! Vou usar esse tal de Velocity aí...● Será que foi uma boa ideia?○ Vamos descobrir...
  24. 24. DemonstraçãoApache Velocity
  25. 25. Quais foram os problemas?● Site complicado● Documentação prolixa● API complexa● Configuração difícil
  26. 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. 27. Usabilidade ruim● Não é assim com todo mundo, claro!● Mas é assim com muita gente
  28. 28. Aspectos de umaferramenta
  29. 29. Três aspectos principais● Site oficial● Configuração● Documentação● Qual o papel de cada um?
  30. 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. 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. 32. Site oficial● Se o site oficial não responder nenhumadessas perguntas...
  33. 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. 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. 35. ● Deve ser:○ Óbvia de encontrar○ Fácil de entender○ Fácil de modificarConfiguração
  36. 36. Configuração● Vamos pensar em dois tipos deconfiguração:a. Mínimab. Padrão
  37. 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. 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. 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. 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. 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. 42. #ifndef _MINHACLASSE_H#define _MINHACLASSE_H...#endifConfiguração
  43. 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. 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. 45. Configuração● Para quem usa terminal com Bash:○ Você gosta do ls colorido?
  46. 46. Configuração● Para quem usa terminal com Bash:○ E do grep colorido?
  47. 47. Configuração● Olhe o seu ~/.bashrc:○ alias ls=ls --color=auto○ alias grep=grep --color=auto
  48. 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. 49. Configuração● Se você usa Git, por acaso ele está assim?
  50. 50. Configuração● Sabia que dá para deixá-lo assim?
  51. 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. 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. 53. Documentação● Minimamente, deve ser:○ Óbvia de encontrar○ Fácil de pesquisar● Idealmente, deve:○ Possuir seções autocontidas
  54. 54. Documentação● Para refletir:○ "A melhor documentação é a ausência de[necessidade de] documentação." (André Valenti)■ Duvida?
  55. 55. Documentação● Git○ Numa instalação zerada○ Ao fazer seu primeiro commit:○○
  56. 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. 57. Documentação / Configuração● Compare com uma instalação zerada doPostgreSQL:
  58. 58. Documentação / Configuraçãofi@deskdofi:~$ sudo apt-get installpostgresql...fi@deskdofi:~$ psqlpsql: FATAL: role "fi" does not exist(Hein?)
  59. 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. 60. Documentação / Configuraçãofi@deskdofi:~$ psql -U postgrespsql: FATAL: Peer authenticationfailed for user "postgres"(Hein?)(Procura no Google... Procura noGoogle...)
  61. 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. 62. Documentação / Configuraçãopsql (9.1.9)Type "help" for help.postgres=#(Aêee!!!)
  63. 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. 64. Documentação / Configuraçãofi@deskdofi:~$ psql -U postgres -WPassword for user postgres: ********psql: FATAL: Peer authenticationfailed for user "postgres"
  65. 65. psql: FATAL: Peerauthenticationfailed for user"postgres"
  66. 66. Documentação / Configuração(O certo é...)fi@deskdofi:~$ sudo -u postgres psql
  67. 67. Documentação / Configuraçãopsql (9.1.9)Type "help" for help.postgres=#
  68. 68. Documentação / Configuração(ou configurar o pg_hba.conf)
  69. 69. Alguns exemplos deferramentas usáveis(ao menos em alguns aspectos)
  70. 70. Ferramentas usáveis● Mustache● Jasmine● Flyway● jQuery
  71. 71. Mustache● http://mustache.github.io/● Processador de templates● Similar ao Velocity● Implementações em diversas linguagens● Demonstração no próprio site
  72. 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. 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. 74. jQuery● http://jquery.com● API extremamente intuitiva
  75. 75. Ideologia
  76. 76. Ideologia● Merecemos ferramentas da hora!● Merecemos satisfação e produtividade!● Merecemos soluções intuitivas!
  77. 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. 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. 79. Ideologia● Desenvolvedores querem:○ Soluções simples e intuitivas○ Resolver um problema de cada vez○ Ler manuais quando realmente necessário
  80. 80. Exemplos!
  81. 81. Ideologia● Dê exemplos!○ De preferência, do mundo real○ Exemplo: Jasmine■ Especifica a si mesmo usando a si mesmo
  82. 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. 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. 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. 85. Conclusão
  86. 86. Conclusão● Ferramentas de DesenvolvimentocomBoa Usabilidade:É POSSÍVEL???
  87. 87. ConclusãoSIM!
  88. 88. Conclusão● A resposta curta é:○ Coloque-se no lugar do seu usuário!
  89. 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. 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. 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. 92. Obrigado :)!● André Valenti / Fi● Contatos:○ awvalenti@gmail.com○ @awvFi

×