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.
fonte
Respostas:
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.
fonte
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/
fonte
O Projeto Lápis é um complemento do Firefox que faz maquetes simples e agradáveis.
fonte
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? " )
fonte
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.
fonte
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").
fonte
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.
fonte
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.
fonte
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.
fonte
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)
Papel e caneta / lápis (geralmente para brainstorming para mim)
Arquivos estáticos HTML / CSS / JS no disco
Ferramentas de desenho vetorial - Illustrator / Inkscape / Visio / PowerPoint / Impress
Ferramentas gráficas de varredura - Photoshop / Gimp
Arte ASCII ;-)
fonte