A história do wireframing e prototipagem

Recentemente, analisamos um pouco o mundo dos wireframes e protótipos e o que eles podem fazer pelo processo de design e desenvolvimento. No entanto, ainda estamos para tocar na história dessa disciplina, especificamente na história dos wireframes. Neste post vamos fazer exatamente isso.

De onde veio o termo 'wireframe'?

O termo wireframe na verdade é anterior ao seu uso em web design. Originalmente, os wireframes eram usados para mostrar objetos 3D no Computer Aided Design (CAD). Você provavelmente reconheceria o estilo, usado na fabricação para retratar o design de carros sem a necessidade de detalhes, deixando o desenho parecendo feito de fios - daí, você adivinhou, o termo 'wireframe'.

No web design, 'wireframes' são guias visuais que representam a estrutura esquelética de uma página ou tela de aplicativo. Eles geralmente descrevem layout funcional: incluindo elementos de interface e sistemas de navegação. O wireframe geralmente carece de estilo tipográfico, cor ou gráficos, pois o foco principal está na funcionalidade, comportamento e prioridade do conteúdo. Esta é uma consequência direta de seu histórico de DAC. Em outras palavras, ele se concentra no que uma tela faz, não na aparência.

A história do humilde wireframe é complexa, e há algum debate sobre quem cunhou o termo para uso na web e com aplicativos. Como é comum com esse tipo de coisa, parece que várias partes cunharam o mesmo termo na mesma época.

Os wireframes geralmente assumem a forma de esboços fiéis a lápis e papel, embora as versões de maior fidelidade tenham seu lugar, assim como as versões animadas e clicáveis (que é onde os protótipos realmente se destacam).

Wireframes realmente funcionais são ótimos para desenvolvedores, mas oferecem menos meios de realizar uma avaliação visual. Ferramentas como o nosso próprio Indigo Studio suportam esses tipos de wireframes, bem como variedades muito mais 'projetadas' e até mesmo storyboards completos de casos de uso.

Essa mudança de designs estáticos para wireframes com mais gráficos (e até animação) foi impulsionada pela necessidade de acomodar um UX maduro, que está se tornando cada vez mais importante com a popularidade dos aplicativos crescendo exponencialmente. A escolha dos wireframes de uma maior consideração pela experiência do usuário é semelhante ao seu irmão de armas: o protótipo.

The Prototype Timeline

Em termos de cronogramas, o protótipo tem um relativamente curto. Abaixo está uma breve linha do tempo sobre o progresso que esta disciplina fez desde os anos 70:

1970– Winston Royce apresenta o modelo Waterfall

1980– Surgem os primeiros protótipos básicos – semelhantes a fluxogramas

1985– A prototipagem em papel é integrada para testes de usabilidade

1987– Microsoft PowerPoint – agora uma ferramenta comum para criar wireframes ásperos

1988 – Boehm founds The Spiral Model

1990– Adobe Photoshop – a ferramenta favorita de muitos designers de UX

1991 – IBM introduces RAD (Rapid Application Development) software development

2001 – Agile Manifesto released

2005– A prototipagem baseada na Web (SaaS) torna-se mais influente

2008 – Lean UX movement is born

2010– Os avanços tecnológicos permitem a prototipagem SaaS de alta fidelidade sem codificação

 

E isso nos atualiza. É fácil ver os avanços que a prototipagem fez e não mostra sinais de desaceleração. Tanto os wireframes quanto os protótipos estão em constante adaptação e evolução para facilitar o trabalho dos desenvolvedores.

E quanto ao futuro?

Hoje em dia, à medida que os wireframes se tornam mais interativos e os protótipos se tornam mais úteis, os dois termos estão se fundindo. Pergunte a qualquer bom designer de UX ou desenvolvedor de interface do usuário e eles os verão como um e o mesmo. Sempre haverá a necessidade de diferentes tipos de wireframe e protótipo – lo-fi, hi-fi, animado, esboço etc... E cada um, é claro, tem prós e contras, dependendo da necessidade do projeto.

As ferramentas de design também precisam reagir à medida que a disciplina amadurece e muda. A versão mais recente do Indigo Studio permite que os usuários criem wireframes estáticos, protótipos clicáveis e tudo mais. O Indigo Studio ainda permite prototipar sem escrever uma única linha de código.

Nosso novo recurso de storyboard é particularmente útil no mundo dos protótipos mais interativos. Ele ajuda a unir e desenvolver a história do usuário e a história do aplicativo. Isso realmente ajuda a prototipar a experiência, e não apenas o aplicativo.

Os storyboards fornecem uma variedade de cenas que você pode arrastar e soltar, criando sua própria história que retrata um cenário ou caso de uso da vida real. O Indigo ajuda a desenvolver como o aplicativo será usado de forma muito mais completa do que se você apenas conectasse telas definidas.

Com o Indigo, você não precisa simplesmente dizer às pessoas o que seu aplicativo pode fazer ao mostrar um protótipo. Agora, você pode envolvê-los em toda a experiência, levando a um envolvimento mais rico e, finalmente, a um produto final melhor.