Validando a solução junto ao cliente com Mockups

Compartilho com vocês uma experiência na prática que tivemos recentemente em um cliente, sobre como nos ajudou, e muito, iniciar o desenvolvimento do software centrado na usabilidade do usuário.

Primeira reunião

Fizemos uma reunião presencial - na parte da manhã - de 2 horas no cliente para entender a necessidade de negócio. Parece simples, mas, tem uma questão muito importante nesta fase, que é separar o problema da solução. Pensando desta forma, conseguimos focar e entender os problemas atuais, suas causas e efeitos.

Após ter definido parte do conceito, achamos que, para validar o entendimento, seria legal rabiscar naquele momento alguns pré-protótipos frente ao cliente. Foi bem interessante pois conseguimos - além de verbalizar - mostrar no papel nosso entendimento, foi mais fácil para ambos, onde saímos mais confiantes.

Lição de casa

No mesmo dia, após o almoço - sem burocracia - voltamos e começamos um brainstorm com somente 2 pessoas, onde desenhamos na lousa e rabiscamos os primeiros protótipos no papel. O interessante neste processo, é que fizemos várias dramatizações - isso acontece direto, cada um encenando vários papeis relacionados ao negócio que estávamos resolvendo. Chega a ser engraçado, mas é muito produtivo e importante.

Ao final do dia, tínhamos em mãos toda uma visão da solução - centrada no usuário. Veja, fizemos tudo isso, em apenas um dia. Há, espera aí, você está me dizendo que desenho em lousa e papel é solução? E ainda tem mais, como já é solução se nem foi validada junto ao cliente. Direi como agimos para resolver esses fatos.

Validando junto ao cliente

No outro dia, logo cedo, estávamos conversando sobre a forma menos burocrática possível e ágil de validar a solução junto ao cliente. A forma que fazíamos em outros projetos era marcar outra reunião para levar todos os protótipos em papel e demonstrar ao cliente. Sempre foi muito ágil e produtivo. Neste caso, em praticamente 2 dias conseguiríamos validar toda uma visão de proposta de solução. Mas! Como sempre, queria conquistar algo diferente. Tinha na manga um jeito novo para testar.

Fui ao evento Ruby Conf 2011 nos dias 03 e 04 de novembro e assisti a palestra "Melhores Softwares através da Interface" do Daniel Lopes. Por sinal, excelente palestra. Ele enfatizou a importância do Designer de Interface saber programar, dos benefícios de começar o software pela interface, e uma forma diferente de validar propostas de solução - protótipos - junto ao cliente.

O que o Daniel passou de diferente do que já trabalhamos aqui na Cocento Tecnologia - e que achei muito legal - foi o jeito pragmático de validar junto ao cliente.

Validando a proposta de solução com Mockups

A idéia passada pelo Daniel Lopes é, em vez de validar os protótipos em papel ou photoshop/fireworks, é validar direto em protótipos funcionais - com fluxo entre as telas - já implementados em código - ruby/java/php/etc e html, css e js. E foi o que fizemos, logo na parte da manhã do segundo dia, criamos o projeto no GitHub implementamos as telas já em Ruby on Rails. Para isto, segue o conceito de Mockups apresentada pelo Daniel:

Definimos a rota:

Example::Application.routes.draw do

  scope '/mockups', :constraints => lambda { |e| not Rails.env.production? } do
    match '/:action', :controller => 'mockups', :actions => /[^/]+/
  end

end

Criamos o controller:

class MockupsController < ApplicationController
  def books_list
  end

  def new_book
  end
end

Para cada método do controller implementamos a view em HTML, CSS e JS para simular alguns comportamentos, por fim, linkamos os fluxos entre elas:

|~app/
| |+assets/
| |~controllers/
| | |-application_controller.rb
| | `-mockups_controller.rb
| |+helpers/
| |+mailers/
| |+models/
| `~views/
|   |~layouts/
|   | `-application.html.erb
|   `~mockups/
|     |-books_list.html.erb
|     `-new_book.html.erb

Resultado final

Tínhamos no final do segundo dia um protótipo totalmente funcional e bonito. Pera aí, como em um dia conseguiram deixar o layout bonito? Vou abrir o segredo com vocês :). Para agilizar o processo, usamos todo um padrão para o front-end do Twitter Bootstrap.

Fizemos a reunião no terceiro dia e o feedback foi excelente. Cliente muitíssimo satisfeito e a nossa equipe também. O importante é frisar que fizemos a primeira reunião de entendimento da necessidade até a codificação e validação em apenas 3 dias.

--

E você? Como faz para agilizar, diminuir os riscos e ser produtivo nas validações de proposta de solução junto ao cliente lá na sua empresa e/ou equipe? Um abraço.

Written in 17 Nov 2011 by Leandro Alvares da Costa