Design Melhor e Mais Rápido Com Prototipagem Rápida

O velho adágio, “uma imagem fala mil palavras” capta o que é protótipo de interface de usuário: usar visuais para descrever o valor de milhares de palavras de especificações de design e desenvolvimento que detalham como um sistema deve se comportar e parecer. Em uma abordagem iterativa ao design da interface do usuário, a prototipagem rápida é o processo de escarnecer rapidamente o estado futuro de um sistema, seja ele um website ou uma aplicação, e validá-lo com uma equipe mais ampla de usuários, interessados, desenvolvedores e designers.

Fazer isso rapidamente e iterativamente gera feedback no início e muitas vezes no processo, melhorando o design final e reduzindo a necessidade de mudanças durante o desenvolvimento.

Leitura adicional sobre o SmashingMag:

• Optimizando seu design para testes rápidos de protótipos
• Selecionando a ferramenta correta de protótipo
• Protótipo de conteúdo em Web Design Responsivo
• Protótipos de interface do usuário (sem criação de zumbis)

Protótipos que vão desde esboços em papel até simulações interativas que parecem e funcionam como o produto final. As chaves para o sucesso da prototipagem rápida estão revisando rapidamente com base no feedback e usando a abordagem apropriada de prototipagem. A prototipagem rápida ajuda as equipas a experimentar múltiplas abordagens e ideias, facilita a discussão através de imagens em vez de palavras, assegura que todos partilham um entendimento comum e reduz o risco e evita requisitos perdidos, levando a um melhor design mais rápido.

O processo de prototipagem rápida

Protótipo rápido envolve múltiplas iterações de um processo de três passos:

1. Protótipo Converter a descrição dos utilizadores da solução em maquetas, tendo em conta os padrões de experiência do utilizador e as melhores práticas.
2. Revisão Compartilhar o protótipo com os usuários e avaliar se ele atende às suas necessidades e expectativas.
3. Refinar Com base no feedback, identificar áreas que precisam ser refinadas ou mais definidas e esclarecidas.

O protótipo geralmente começa pequeno, com algumas áreas chave zombadas, e cresce em largura e profundidade em várias iterações conforme as áreas necessárias são construídas, até que o protótipo seja finalizado e entregue para o desenvolvimento do produto final. A rapidez do processo é mais evidente nas iterações, que vão desde alterações em tempo real até ciclos de iteração de alguns dias, dependendo do escopo do protótipo.

Scoping A Prototype

A palavra protótipo muitas vezes conjuga imagens de uma versão codificada, totalmente funcional de uma aplicação ou interface. Os protótipos rápidos não se destinam a evoluir para soluções totalmente funcionais, mas sim a ajudar os utilizadores a visualizar e elaborar a experiência do utilizador do produto final. Com isso em mente, quando se faz o escopo de um protótipo, decidir sobre algumas questões-chave antes de iniciar qualquer trabalho de protótipo.

O que precisa ser prototipado?

Bom candidatos para prototipagem incluem interações complexas, novas funcionalidades e mudanças no fluxo de trabalho, tecnologia ou design. Por exemplo, a prototipagem de resultados de pesquisa é útil quando você quer sair significativamente da experiência de pesquisa padrão; digamos, para introduzir a pesquisa facetada ou a capacidade de pré-visualizar um documento sem deixar os resultados da pesquisa.

Quanto deve ser prototipado?

Uma boa regra geral é focar nos 20% da funcionalidade que será usada 80% do tempo; ou seja, a funcionalidade chave que será usada com mais frequência. Lembre-se, o objetivo da prototipagem rápida é mostrar como algo vai funcionar ou, em etapas posteriores, como será o design, sem prototipar todo o produto.

Conhecer a História

Após identificar as áreas a serem prototipadas, tecê-las em um ou mais cenários: identificar os caminhos coerentes através da experiência do usuário que o protótipo simula. Para um site que vende sapatos, um cenário poderia ser “Boring Joe” comprando exatamente os mesmos sapatos de corrida Nike que ele comprou seis meses atrás, enquanto outro cenário poderia ser “Exploring Sam” navegando pelo tamanho 10s para encontrar um par de Oxfords e um par de mocassins que lhe interessam.

Planje suas Iterações

O protótipo inteiro normalmente não é construído em uma única iteração, mas sim peça por peça. Uma boa abordagem é começar a prototipagem de forma ampla e ampla e depois mergulhar profundamente em áreas selecionadas da solução. Para um website, isto significaria construir a página inicial e páginas de aterragem para as secções principais na primeira iteração (por vezes referida como um protótipo horizontal) e depois rever e rever essa estrutura. As iterações seguintes poderiam se aprofundar em uma ou mais seções do site (um protótipo vertical); para um site de download de mídia, estes poderiam ser os passos que um usuário daria para encontrar um vídeo e baixá-lo, ou como eles gerenciariam a mídia em sua biblioteca online.

Selecionar a Fidelidade Apropriada

Fidelidade se refere ao quão próximo um protótipo se assemelha à solução final. Existem múltiplas dimensões de fidelidade, e os protótipos podem estar em qualquer parte do espectro para cada uma destas dimensões. Dependendo do estágio do processo de design e dos objetivos do protótipo, selecione a fidelidade apropriada para cada uma das seguintes dimensões:

• Fidelidade visual (esboçado ↔ styled) O aspecto é a dimensão mais perceptível da fidelidade de um protótipo e, se não for corretamente selecionado, pode desviar as revisões do protótipo. Vá para o hi-fi muito cedo e os usuários se concentrarão no design visual, que não é apropriado em estágios iniciais. Do ponto de vista visual, os protótipos não precisam ser perfeitos em pixels, mas devem ser proporcionais; por exemplo, se a área de navegação esquerda tiver que ocupar um quinto de uma tela de 1024 pixels, não precisa ter exatamente 204 pixels de largura, desde que seja proporcionalmente representada no protótipo. À medida que o protótipo avança no ciclo de design, aumente a fidelidade visual conforme necessário, introduzindo elementos de estilo, cor, marca e gráficos.
• Fidelidade funcional (estático ↔ interativo) O protótipo revela como a solução vai funcionar (estático) ou parece ser totalmente funcional e responder à entrada do usuário (interativo)? Esta dimensão é menos uma distração para os usuários, mas adicionar interatividade nas iterações subsequentes aumenta a fidelidade funcional e permite que o protótipo seja usado para testes de usabilidade e treinamento e comunicações.
• Fidelidade de conteúdo (lorem ipsum ↔ conteúdo real) Outra dimensão que muitas vezes distrai os usuários é o conteúdo que é exibido no protótipo. Linhas Squiggly e texto dummy como lorem ipsum são úteis para evitar em fases iniciais de prototipagem. Mas como o protótipo é refinado, avalie a necessidade de substituir o texto dummy por conteúdo real para ter uma idéia de como ele afeta o design geral.

The Prototyping Spectrum

Low Fidelity

A maneira mais rápida de começar a prototipagem também é a mais fácil: colocando caneta(cil) no papel. Esboçar no papel é uma abordagem de baixa fidelidade que qualquer pessoa pode fazer; não é necessária nenhuma ferramenta especial ou experiência. Mais frequentemente usado durante os estágios iniciais de um ciclo de desenho, o esboço é uma maneira rápida de criar maquetes de abordagens e conceitos de desenho e obter feedback dos usuários. A prototipagem de papel é ideal durante o brainstorming e conceptualização e pode ser feita sozinha em um cubículo com um caderno de esboços ou em um grupo com um flip chart (ou quadro branco) e marcadores.

Deitado na extremidade de baixa fidelidade do espectro de prototipagem, os protótipos de papel são estáticos e geralmente têm baixa fidelidade visual e de conteúdo. Isto força os utilizadores a focarem-se em como irão utilizar o sistema em vez de como ele será, e torna os designers mais abertos a mudanças baseadas no feedback do utilizador.

Protótipo de baixa fidelidade presta-se à prototipagem rápida. Não tem curva de aprendizado, mas permite fazer mudanças fácil e rapidamente.

Medium Fidelity

Como começamos a usar ferramentas baseadas em computador como Visio e Omnigraffle para protótipos, a fidelidade aumenta na maioria das frentes, produzindo protótipos de média-fidelidade. Wireframes, fluxos de tarefas e cenários que são criados com essas ferramentas levam mais tempo e esforço, mas parecem mais formais e refinados. Enquanto elementos visuais de branding, cores e estilo podem ser introduzidos, os protótipos muitas vezes ficam longe deles, concentrando-se em demonstrar o comportamento da aplicação. A interatividade pode ser simulada ligando páginas ou telas, mas a fidelidade funcional aqui é, na melhor das hipóteses, média. Estes protótipos são mais adequados para determinar se as necessidades do usuário são atendidas e se a experiência do usuário é ótima.

Há duas razões pelas quais se pode intencionalmente fazer um protótipo de média fidelidade não parecer um protótipo de média fidelidade:

• A primeira é que, ao utilizar stencils Balsamiq ou sketchy Visio para fazer o protótipo parecer de baixa fidelidade, você força os usuários a vê-lo como um rascunho ou trabalho em andamento, em vez de um produto polido e acabado.
• O segundo é que, ao dar ao protótipo uma alta fidelidade visual (por exemplo, em um layout abrangente feito no Photoshop), você faz com que o usuário se concentre no design visual e na aparência, incluindo cor, fontes, layout, logotipo e imagens.

A velocidade de prototipagem de média fidelidade é alcançada com templates, stencils e widgets e elementos reutilizáveis. Fica mais rápido à medida que você se torna mais proficiente com suas ferramentas de escolha.

High Fidelity

Protótipos de alta fidelidade são os mais realistas e são muitas vezes confundidos com o produto final, mas geralmente são demorados. Alguns anos atrás, a única maneira de criar protótipos de alta fidelidade era realmente codificar usando uma linguagem de programação, o que muitas vezes exigia que o designer e o desenvolvedor trabalhassem juntos. Hoje em dia, porém, as ferramentas de simulação de aplicativos permitem que usuários não técnicos arrastem e soltem widgets UI para criar protótipos de alta fidelidade que simulam a funcionalidade do produto final, mesmo para lógica de negócios e interações com bancos de dados. Axure e iRise são alguns exemplos de ferramentas de simulação de aplicações que podem ser usadas para criar protótipos de alta fidelidade.

Estes protótipos são apropriados quando é necessária uma alta fidelidade visual e funcional; por exemplo, quando se introduz uma nova tecnologia (digamos, quando se muda de uma aplicação mainframe – sim, eles ainda existem!- para uma solução baseada na Web. A maioria destes protótipos não pode ser convertida em código utilizável, mas eles servem como uma excelente referência para os desenvolvedores. Eles também são úteis para conduzir testes de usabilidade e treinamento de usuários.

Protótipo de alta fidelidade é relativamente rápido, considerando o nível de interatividade e fidelidade envolvido, e pode ser acelerado usando ferramentas de simulação de arrastar e soltar. Além disso, algumas dessas ferramentas facilitam a coleta de feedback dos usuários e a documentação dos requisitos, acelerando ainda mais o processo de projeto. Mesmo que você não precise aprender uma nova linguagem de programação, estas ferramentas têm uma curva de aprendizado.

Selecionando um nível de fidelidade

Na escolha do protótipo de fidelidade, não há uma abordagem correta. A maioria dos projetos de novos produtos é melhor começar com esboços, depois passar para protótipos de média ou alta fidelidade, dependendo da complexidade do sistema e dos requisitos das dimensões de fidelidade.

No trabalho com um cliente em particular na indústria farmacêutica, passamos de quadros brancos para protótipos interativos que tinham alta fidelidade funcional e de conteúdo, mas baixa fidelidade visual. Eles se preocupavam menos com o visual do que com a adesão às diretrizes corporativas.

Para outro cliente, este do varejo, nosso protótipo interativo tinha que ter alta fidelidade visual e funcional. A fidelidade do conteúdo não importava porque eles iriam reutilizar o conteúdo e já estavam familiarizados com ele. Para eles, o visual e a experiência interativa eram mais importantes porque esta era a primeira implementação do SharePoint, e eles queriam fazer o portal parecer “non-SharePointy”!

Selecting Tools

Dependente da sua abordagem, você tem uma grande variedade de ferramentas para escolher. Dan Harrelson compilou uma lista de ferramentas populares de prototipagem no blog Adaptive Path.

Cada ferramenta tem o seu próprio conjunto de características e pontos fortes. Com base em suas necessidades e nos requisitos dos projetos em que você trabalha, avalie qual ferramenta seria a mais apropriada. Aqui estão algumas questões a considerar ao avaliar ferramentas:

• Quão fácil é aprender e usar a ferramenta?
• É flexível para suportar protótipos para Web, pacotes e aplicações de software personalizadas, bem como aplicações desktop e móveis?
• Existe um repositório de stencils reutilizáveis, templates ou widgets disponíveis?
• Quão fácil é compartilhar o protótipo com outros para revisão? O seu feedback pode ser capturado usando a ferramenta?
• Quão fácil é fazer alterações na hora ou incorporar feedback?
• Tem algum recurso de colaboração, como permitir que várias pessoas trabalhem nele ao mesmo tempo?
• Quais são os termos e custos de licenciamento?

Dos E Não Fazem

Quando você começar, aqui estão alguns pontos sobre prototipagem rápida eficaz para ter em mente:

Fazer…

• Trabalhar em colaboração com os utilizadores, as empresas e as partes interessadas de TI enquanto se faz uma prototipagem rápida. Além de dar um feedback valioso, eles também ganham um senso de propriedade do produto final.
• Evite o “rastejo do protótipo” estabelecendo expectativas para o processo, incluindo aquelas que afetam o propósito, fidelidade, escopo e duração. Lembre a todos, incluindo você mesmo, que a prototipagem rápida é um meio para um fim, não um fim em si.
• Ao criar protótipos e simulações interativas de alta fidelidade, crie atrasos realistas (por exemplo, para atualização da tela ou para mover-se através de etapas de uma transação), para que os usuários não esperem tempos de resposta instantânea do produto final.
• Reutilizar, reutilizar, reutilizar. Para protótipos baseados em computador, isto significa salvar modelos reutilizáveis, stencils, padrões e widgets para projetos futuros.
• Mais importante, comece cada sessão de revisão de protótipos com o aviso de que isto é apenas um protótipo, um mock-up, não a solução real. Isso lembra aos usuários que este é um trabalho em andamento, encoraja o feedback, e no caso de protótipos de alta fidelidade, evita que os usuários o confundam com uma solução funcional.

Não….

• Não faça protótipos de características ou funcionalidades que não podem ser implementadas – muitas vezes um problema com implementações de pacotes de software. Quando em dúvida, confirme com os desenvolvedores antes de iniciar.
• Não tome todas as alterações ou solicitações que saiam de uma revisão de protótipo como um novo requisito. O prototipagem rápida ajuda a capturar requisitos perdidos, mas esses novos requisitos devem ser avaliados cuidadosamente. Alguns podem ser implementados, enquanto outros são empurrados para uma versão futura.
• Não inicie sessões de revisão de protótipos sem diretrizes claras para feedback. Seja muito específico sobre o tipo de feedback que você está procurando. (Os passos estão organizados logicamente? A navegação é clara e intuitiva?) Se não, esteja preparado para: “Eu não gosto do azul no cabeçalho” ou “Não podemos usar esta fonte em vez disso?” ou “Você pode fazer isto maior, mais arrojado, em vermelho e piscando?”
• Não seja um perfeccionista. Na maioria dos casos, a prototipagem rápida não tem de ser 100% perfeita, apenas o suficiente para dar a todos um entendimento comum.
• Não prototipe tudo. Na maioria das vezes, você não precisa.

Outros Recursos

• Se você precisar de um empurrão para começar a esboçar, experimente o livro de Dan Roam The Back of the Napkin.
• Saiba mais sobre prototipagem de papel no livro de Carolyn Snyder Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, uma técnica para explorar e refinar conceitos.
• Need low-fidelity content? Gerar texto Lorem Ipsum para o seu protótipo.
• Quer fazer o seu esboço de papel parecer de alta fidelidade? Experimente estes stencils da Web, iPad e iPhone.
• Ferramentas de desenho e protótipo para aplicações iPhone
• Desenho e protótipo simples no Firefox com o add-on Lápis.
• Esboços, Wireframing e Modelos PDF para Anotações Gratuitas
• 50 Kits de Wireframing, Recursos e Arquivos Fonte gratuitos de UI e Web Design

(al)