Como devo criar protótipos de interface do usuário lo-fi (não interativos)?

Atualmente, estou trabalhando para reunir alguns protótipos básicos, em parte para reunir requisitos e em parte para projetar a interface do usuário final.

No momento, estou tentando construir a tela usando Post-it, com notas amarelas para informações e rosa para ações (botões ou menus). A ideia é que você pode facilmente mover, remover e adicionar informações. Mas tenho certeza de que existem métodos mais eficientes por aí.

Qual é a maneira recomendada para os desenvolvedores criarem eficientemente protótipos de interface do usuário não interativos?

E porque?

Tentei algumas versões de caneta, papel e post-it e elas caíram como um balão de chumbo (provavelmente minhas habilidades de desenho). No final, usei o Balsamiq , que até agora é apreciado pela maioria dos usuários e eles obtêm o protótipo. Infelizmente, algumas pessoas ainda estão tendo problemas com a idéia de que o primeiro deve ter uma idéia do que o aplicativo deve fazer por meio de alguns protótipos de lo-fi e realmente deseja "ver algo na tela" antes de se comprometer com qualquer coisa.

Eu prefiro um quadro branco.

Isso facilita a mudança conforme você toma decisões sem redesenhar a coisa toda. É fácil compartilhar com outros desenvolvedores (próximos). É fácil anotar usando notas autoadesivas ou outras cores.

Os modelos do Balsamiq são geralmente o primeiro porto de escala, quase tão rápido quanto usar caneta e papel e reutilizáveis.

Além disso, você pode adicionar algum grau de interatividade, se desejar, vinculando páginas, por exemplo.

http://balsamiq.com/

O Projeto Lápis é um complemento do Firefox que faz maquetes simples e agradáveis.

O Pencil fornece várias coleções de formas internas para desenhar diferentes tipos de interface do usuário, que variam de desktop a plataformas móveis. A partir do 2.0.2, o Pencil é enviado com os estênceis de interface do usuário para Android e iOS pré-instalados. Isso facilita ainda mais a criação de protótipos de aplicativos com uma instalação simples.

Recursos populares de desenho também são implementados no Pencil para simplificar as operações de desenho ...

Eu uso uma combinação do MS Paint e Visual Studio. Eu uso o VS para arrastar / soltar todos os controles que eu quero em um formulário e depois capturá-lo na pintura do MS para reorganizá-los até que eu goste da aparência.

Dessa forma, posso usar ferramentas simples, familiares, gratuitas e sempre acessíveis (para mim) para simular minha interface do usuário, e o cliente pode ver a interface do usuário como provavelmente parecerá quando o aplicativo for concluído. Além disso, muitas vezes o VS acaba contendo o início do meu projeto para mim.

Edit: A resposta de Toby me levou ao Balsamiq , e agora é minha principal ferramenta de escolha para os modelos de interface do usuário serem apresentados a outras pessoas.

Ainda retiro o MSPaint ou a caneta / papel de vez em quando, mas isso geralmente ocorre apenas quando estou desenhando o design básico da interface do usuário para minha própria referência ou se quero apresentar ao cliente duas opções para uma tela concluída (por exemplo, " quer os botões Aqui ou Aqui? " )

Parece que você está usando bons métodos, mas está enfrentando resistência, fazendo com que as pessoas aceitem a utilidade da prototipagem rápida. Todo mundo gosta de codificar, mas se há meia hora, eles ainda estão brigando com o JScrollBars e você gerou 12 modelos, eles podem entender que a força dessas ferramentas está na iteração rápida .

Dito isto, as várias abordagens low-fi têm diferentes pontos fortes:

• A prototipagem do quadro branco é útil porque qualquer pessoa pode participar e ajuda a fundamentar idéias, mas é apenas uma ferramenta de discussão. Você quer algo um passo adiante se for iterar em um design, até porque é difícil apagar o marcador antigo. ;)

• A prototipagem de papel é útil porque as pessoas entendem que é impermanente e aberto a alterações, e você pode iterar rapidamente e ainda obter bons resultados. Faça um teste de usabilidade com alguns usuários em um protótipo de papel e você poderá obter ótimos comentários sobre um design muito rapidamente, a um custo bastante baixo. As pessoas ficam realmente envolvidas quando podem ver e sentir a interface no papel.

• Balsamiq é um atalho para criar rapidamente protótipos de papel reutilizáveis. Imprimo capturas de tela e as uso como protótipos de papel. Também o uso durante as reuniões para ajudar a simular as idéias que as temos - como na prototipagem do quadro branco. Eu também usei o Visio e o OmniGraffle para isso.

• Os protótipos de recortar e colar são bons para iterar em um design existente - faça uma captura de tela, corte-a em um editor de imagens e misture e combine com novos controles (da Balsamiq ou de outros lugares). Mais uma vez, seu objetivo é a rápida iteração do protótipo, não algo que pareça bom.

Eu nunca faço protótipos com usuários. Eu faço isso com a equipe de design, com base nos dados do usuário que temos. Usuários não são designers ; se você os trata como designers, acaba com molho de tomate aguado, café amargo (obrigado Malcolm Gladwell) e o carro The Homer. Reúna a entrada do usuário no seu design e use-a para refinar o design com a equipe de design.

Minhas primeiras maquetes são sempre lápis, papel ou quadro branco, mas uma vez que o básico é explicado, eu geralmente passo para o HTML. Eu tenho um monte de imagens de espaço reservado que simplesmente dizem "Cabeçalho", "Banner", "Imagem", "Gráfico" e similares. Algum CSS simples para definir as coisas de maneira um pouco saudável e pronto. Um pouco de JS preso a um controle pode fornecer uma aparência de funcionalidade, e as pessoas parecem "melhorá-lo".

O único problema com isso é que eu provavelmente sou o pior designer de interface do usuário vivo do mundo e, às vezes, tenho que lembrar às pessoas que estou apenas reunindo requisitos, não mostrando a elas como será a coisa concluída. Costumo definir o plano de fundo para rosa ou algo assim, sempre que alguém pergunta "Tem que ser rosa?" Posso responder com "Isso é apenas uma maquete, a coisa real parecerá diferente" (ou "Você terá que discutir isso com o designer").

Uso caneta e papel primeiro e, depois de desenhar a interface do usuário algumas vezes, tento fazê-la no powerpoint 2 ou 3 vezes. Ter 5 ou 6 iterações antes de entrar no editor real me ajuda a reduzir as UIs impraticáveis ​​(como gerar conteúdo Y com base na caixa de texto X quando o usuário ainda não viu o X). Eu vejo isso como uma chance de acabar com os estúpidos imediatamente.

Caneta e papel / quadro branco, e você também pode usar o Visio ou algo semelhante (o Visio vem com modelos de interface do usuário para controles comuns). Às vezes, tiro fotos da interface do usuário existente (semelhante) que temos e recortamos e colamos nela usando um programa de pintura como o Paint.NET.

Eu fiz prototipagem rápida em Delphi várias vezes. Isso facilita a junção rápida de um layout de tela, muito mais rápido do que no powerpoint ou no visio. O exe resultante pode ser anexado a emails sem exigir nenhuma dependência. Como eu o uso para prototipar aplicativos da Web, não há perigo de as pessoas confundirem o protótipo com uma versão parcialmente concluída.

Tentei fazer o mesmo com o Sencha Ext Designer, mas o sistema de layout do Ext JS é mais difícil de usar, e parecia mais um fardo do que uma conveniência para iterar idéias rapidamente.

Eu nem sempre uso a mesma abordagem. Algumas das técnicas que utilizo são (em ordem aproximada de frequência):

• Quadro branco (para prototipagem interativa / discussão. Tire uma foto depois!)

• Designer de GUI estilo RAD (Visual Studio, NetBeans, Delphi)

  • Fique bom nisso e pode realmente se tornar uma das maneiras mais rápidas de criar protótipos de um aplicativo "windows, widgets e forms". Bônus: os protótipos podem acabar parecendo muito profissionais, dependendo da rapidez com que você os reúne. Às vezes, eles podem até servir como ponto de partida para criar a coisa real, depois que um protótipo é aprovado.
    
    

• Papel e caneta / lápis (geralmente para brainstorming para mim)

• Arquivos estáticos HTML / CSS / JS no disco

  • Eu imaginaria que um aplicativo de design WYSIWYG não faria mal aqui, mas geralmente eu apenas uso o HTML bruto. Eu não faço muito disso, de qualquer maneira.
    
    

• Ferramentas de desenho vetorial - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Ferramentas gráficas de varredura - Photoshop / Gimp

• Arte ASCII ;-)