Usabilidade de Ferramentas

Ferramentas de
Desenvolvimento com
Boa Usabilidade:
É POSSÍVEL?
André Willik Valenti
DevCamp 2013 | Campinas-SP
DevInSampa 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

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

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ção
Apache 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

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ínima
b. 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 you@example.com
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
● 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

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 100
and 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
● Ferramentas de Desenvolvimento
com
Boa Usabilidade:
É POSSÍVEL???

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:
○ awvalenti@gmail.com
○ @awvFi

Usabilidade de Ferramentas

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Usabilidade de Ferramentas

Similaire à Usabilidade de Ferramentas (20)

Plus de André Willik Valenti

Plus de André Willik Valenti (6)

Usabilidade de Ferramentas