usabilidade de ferramentas

Ferramentas de Desenvolvimento com

Boa Usabilidade:

É POSSÍVEL?

André Willik Valenti

DevCamp 2013 | Campinas-SPDevInSampa 2013 | São Paulo-SP

Sobre mim

● André Valenti● "Fi"

● São Carlos-SP

Sobre mim

● UFSCar○ Bacharelado em Ciência da Computação○ 2003-2007

● UNICAMP○ Mestrado em Ciência da Computação○ 2008-2011

Sobre mim

● Histórico profissional recente

○ 2013: SIn - UFSCar (São Carlos)

○ 2012: Daitan Group (Campinas)

○ 2010-2012: Dextra (Campinas)

Sobre mim

● Experiências recentes○ Groovy / Grails

○ PostgreSQL

○ Jogos HTML5

○ JavaScript / Node.js / CoffeeScript

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

Por que esta palestra?

● Anos e anos de frustração com falta de usabilidade em ferramentas

● Sonho de mudar esse cenário

Início

Alguém conhece estes celulares?

iPhone & Galaxy

● Satisfação● Produtividade● Confiabilidade● Fidelidade

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

iPhone & Galaxy

● Não é assim com todo mundo, claro!

● Mas é assim com muita gente

E este aqui?

Siemens CF62

● Frustração● Improdutividade● Desconfiança● Aversão

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!

Siemens CF62



Usabilidade

● Primeiro resultado no Google Imagens:

Ferramenta de desenvolvimento

● Bibliotecas● Frameworks● Automação de build

● Utilitários em linha de comando?● Linguagens de programação?● Sistemas operacionais?

Ferramenta de desenvolvimento

● No contexto desta palestra:○ QUALQUER software que seja usado para

desenvolver software

Usabilidade

● De celulares● De ferramentas de desenvolvimento

○ Semelhanças?○ Diferenças?

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?

Exemplo 1

● Precisa ficar mais ou menos assim:

<html>

<body>

<p>Olá, Maria</p>

<p>Pedido de número 1234 enviado!</p>

</body>

</html>

Exemplo 1

● Joãozinho disse:○ Legal! Vou usar esse tal de Velocity aí...

● Será que foi uma boa ideia?○ Vamos descobrir...

DemonstraçãoApache Velocity

Quais foram os problemas?

● Site complicado● Documentação prolixa● API complexa● Configuração difícil

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!

Usabilidade ruim



Aspectos de uma ferramenta

Três aspectos principais

● Site oficial● Configuração● Documentação

● Qual o papel de cada um?

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?

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)

Site oficial

● Se o site oficial não responder nenhuma dessas perguntas...

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)

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?)

● Deve ser:○ Óbvia de encontrar○ Fácil de entender○ Fácil de modificar

Configuração

Configuração

● Vamos pensar em dois tipos de configuração:a. Mínimab. Padrão

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

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"

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○ :(

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:

<!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

#ifndef _MINHACLASSE_H

#define _MINHACLASSE_H

...

#endif

Configuração

● 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

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?

Configuração

● Para quem usa terminal com Bash:○ Você gosta do ls colorido?

Configuração

● Para quem usa terminal com Bash:○ E do grep colorido?

Configuração

● Olhe o seu ~/.bashrc:○ alias ls='ls --color=auto'○ alias grep='grep --color=auto'

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"

Configuração

● Se você usa Git, por acaso ele está assim?

Configuração

● Sabia que dá para deixá-lo assim?

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

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

Documentação

● Minimamente, deve ser:○ Óbvia de encontrar○ Fácil de pesquisar

● Idealmente, deve:○ Possuir seções autocontidas

Documentação

● Para refletir:○ "A melhor documentação é a ausência de

[necessidade de] documentação." (André Valenti)■ Duvida?

Documentação

● Git○ Numa instalação zerada○ Ao fazer seu primeiro commit:

○

○

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 [email protected]

After doing this, you may fix the identity used for this commit with:

git commit --amend --reset-author

Documentação / Configuração

● Compare com uma instalação zerada do PostgreSQL:


fi@deskdofi:~$ sudo apt-get install postgresql

...

fi@deskdofi:~$ psql

psql: FATAL: role "fi" does not exist

(Hein?)


(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.)


fi@deskdofi:~$ psql -U postgres

psql: FATAL: Peer authentication failed for user "postgres"

(Hein?)

(Procura no Google... Procura no Google...)


(Ah tá! Preciso pôr a senha, que é postgres também!)

fi@deskdofi:~$ psql -U postgres -W

Password for user postgres: ********

(Agora vai!!)


psql (9.1.9)

Type "help" for help.

postgres=#

(Aêee!!!)


● Penamos um pouquinho, mas conseguimos entrar no console do Postgres!

● Só que...○ ...não○ Esse desfecho não é o verdadeiro!○ O verdadeiro foi assim:


fi@deskdofi:~$ psql -U postgres -W

Password for user postgres: ********

psql: FATAL: Peer authentication failed for user "postgres"

psql: FATAL: Peer authentication failed for user

"postgres"


(O certo é...)

fi@deskdofi:~$ sudo -u postgres psql


psql (9.1.9)

Type "help" for help.

postgres=#


(ou configurar o pg_hba.conf)

Alguns exemplos de ferramentas usáveis

(ao menos em alguns aspectos)

Ferramentas usáveis

● Mustache● Jasmine● Flyway● jQuery

Mustache

● http://mustache.github.io/

● Processador de templates● Similar ao Velocity

● Implementações em diversas linguagens● Demonstração no próprio site

Jasmine

● http://pivotal.github.io/jasmine/

● Framework de BDD (Behavior-driven Development) para JavaScript

● Documentação○ A própria ferramenta especificando a si mesma

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

jQuery

● http://jquery.com

● API extremamente intuitiva

Ideologia

Ideologia

● Merecemos ferramentas da hora!● Merecemos satisfação e produtividade!● Merecemos soluções intuitivas!

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

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

Ideologia

● Desenvolvedores querem:○ Soluções simples e intuitivas○ Resolver um problema de cada vez○ Ler manuais quando realmente necessário

Exemplos!

Ideologia

● Dê exemplos!○ De preferência, do mundo real

○ Exemplo: Jasmine■ Especifica a si mesmo usando a si mesmo

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' }

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 100and buyer.notifications.should_include confirmationEmail }

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

Conclusão

Conclusão

● Ferramentas de Desenvolvimento

com

Boa Usabilidade:

É POSSÍVEL???

Conclusão

SIM!

Conclusão

● A resposta curta é:

○ Coloque-se no lugar do seu usuário!

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

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!

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"

Obrigado :)!

● André Valenti / Fi

● Contatos:○ [email protected]○ @awvFi

usabilidade de ferramentas

Documents