Şaman Olma

Os trabalhos se iniciaram com um levantamento bibliográfico e uma revisão do estado da arte. A revisão bibliográfica incluiu tanto livros quanto artigos e compreendeu a prática de esboços tanto no design de interação quanto em outras áreas do design, como arquitetura e design de produto. Já a revisão do estado da arte teve seu foco específico em ferramentas que dessem suporte à atividade de esboços no design de interação.

O levantamento bibliográfico nos trouxe um embasamento teórico, com uma melhor compreensão do que é o esboço (Lawson 2004; Goldschmidt 2004) e como pode ser utilizado no design de interação (Buxton 2007). Além disto também trouxe informações importantes para a elaboração da técnica, como no caso da prototipação de papel (Snyder 2003).

Já na revisão do estado da arte estudamos diversas alternativas, que incluíram implementações experimentais (Aliakseyeu, Martens, Rauterberg 2006) e ferramentas desenvolvidas na academia (Obrenovic, Martens 2010; Lin, Thomsen, Landay 2002),

exemplificadas na Figura 27. Também analisamos softwares comerciais, como o Axure RP29 _e

Balsamiq Mockups30_{, vistos na Figura 28.}

29 _{http://axure.com/features}

Figura 27: Exemplos encontrados no levantamento inicial, da esquerda para a direita: Visual Interaction Platform, Sketchify e DENIM.

Estes dois aplicativos foram escolhidos por serem amplamente utilizados entre os profissionais da área e por seu caráter complementar. O Axure RP é mais voltado para

representações com acabamento mais detalhado (protótipos) e o Balsamiq Mockups visa criar desenhos mais rápidos (esboços). No entanto ambos permitem criar desde wireframes que simulam desenhos feitos à mão até protótipos navegáveis com acabamento igual ao produto final, mesmo que no caso do Balsamiq isto seja feito através de um outro aplicativo.

Figura 28: Exemplos doa aplicativos Axure RP e Balsamiq Mockups.

Apesar desta ampla pesquisa, não encontramos soluções similares à nossa proposta e o único trabalho que trouxe dados interessantes, foi a Interactive Sketching Notation (ISN) de Jakub Linowski31_{. O autor propõe algumas notações padronizadas para elementos de tela e}

eventos, e que exista uma lista definida para estes eventos. A proposta nos pareceu ser a mais

próxima do que os designers já estão acostumados a fazer mas continua apresentando os problemas decorrentes de utilizar a mesa digitalizadora.

Tendo então uma base teórica para o trabalho e dados interessantes para iniciar a elaboração da técnica, passamos para a etapa seguinte.

.: Elaboração da ActionSketch

A primeira versão da técnica foi criada baseada nas práticas de prototipação em papel (Snyder 2003) tendo em vista a elaboração de esboços, e não voltada para protótipos. Isto significava que desejávamos uma técnica que fosse muito ágil e flexível para auxiliar na visualização de alternativas diferentes, e não na confecção de uma alternativa a ser validada.

Partindo destas práticas de prototipação, em conjunto com uma série de conceitos genéricos, como o uso de camadas e a representação de ações do usuário, realizamos alguns exercícios para verificar como a técnica poderiam tomar uma configuração adequada, exemplificados na Figura 29.

Figura 29: Exercícios feitos para se desenvolver a versão 0.1 da ActionSketch.

Estes exercícios deram origem à primeira versão da técnica (v0.1), que era composta por seis camadas, sendo que algumas delas eram físicas (folhas de papel) e outras conceituais (tipos diferentes de conteúdo). Nesta versão eram utilizadas folhas transparentes (vegetal e transparências de retroprojetor) e folhas opacas (sulfite) para se reutilizar partes da tela enquanto outras eram modificadas.

Em termos práticos muito pouco desta versão existe na atual, mas alguns conceitos se mantém de forma bastante efetiva, como o conceito de camadas distintas de conteúdos e o uso de cores para diferenciar os elementos iniciais da tela, as ações do usuário e as ações do sistema.

Tendo uma primeira versão da técnica formalizada, fizemos uma comparação dela com as diferentes técnicas levantadas na revisão do estado da arte, em especial com a ISN, e uma nova versão foi proposta (v0.2), exemplificada na Figura 30. Nesta versão surgiram, por exemplo, os símbolos para a representação mais ágil de ações do usuário e do sistema.

Figura 30: Exemplo da ActionSketch na versão 0.2, que mistura símbolos com folhas transparentes.

A partir desta segunda versão utilizamos um processo iterativo de exercícios e geração de novas versões da técnica. Nestes exercícios alguns exemplos de interações particularmente difíceis de se esboçar foram escolhidos, como o uso de técnicas de arrastar e soltar (drag and

drop), validações de formulário em tempo real, sistemas de “autocomplete”, entre outros.

Estes exemplos eram documentados utilizando a técnica proposta e, ao fazer isso, era possível encontrar situações não previstas, imperfeições e oportunidades de melhoria, que eram utilizados como feedback para a geração de uma nova versão da técnica. Este processo foi realizado quatro vezes, gerando as versões 0.3, 0.4, 0.5 (com exemplos na Figura 31) e

finalmente a sexta versão da técnica (v0.6). Contando apenas a última iteração do processo foram desenhadas mais de 40 interações, que utilizaram mais de 100 quadros em quase 30 folhas.

Figura 31: Exemplos do desenvolvimento da técnica nas suas versões 0.4 e 0.5.

Ao chegar nesta versão a técnica já havia se modificado bastante. Por um lado cresceu para ser mais eficiente em casos específicos e diversas variantes surgiram. Por outro lado simplificou muito o número de camadas, que ficaram reduzidos às três que estão na versão atual: estado inicial, ações do usuário e ações do sistema. O uso de papéis diferentes (por exemplo, papel vegetal) foi descartado, em favor do uso de quadros em folhas sulfite. Também surgiram os modelos com uma, quatro e oito telas e um conjunto de boas práticas para a aplicação da técnica.

Estes exercícios encerraram a etapa de elaboração da técnica. Passamos então para o processo de refinamento através entrevistas com profissionais.