ti-enxame.com

Como devo criar protótipos de IU lo-fi (não interativos)?

Atualmente, estou trabalhando na criação de alguns protótipos básicos, em parte para reunir requisitos e em parte para projetar a IU final.

No momento estou tentando construir a tela usando post-its, 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 protótipos de IU não interativos com eficiência?

E porque?


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

10
mlk

Eu prefiro um quadro branco.

Isso torna mais fácil mudar conforme você toma decisões sem redesenhar tudo. É fácil compartilhar com outros desenvolvedores (próximos). É fácil fazer anotações usando notas adesivas ou outras cores.

14
Fishtoaster

Maquetes Balsamiq são geralmente o primeiro ponto de parada, quase tão rápido quanto usar uma caneta e papel e reutilizáveis.

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

http://balsamiq.com/

7
Toby

Eu uso uma combinação de MS Paint e Visual Studio. Eu uso o VS para arrastar/soltar todos os controles que desejo em um formulário e, em seguida, capture-os no MS Paint para reorganizá-los até que goste de sua aparência.

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

Editar: resposta de Toby leva-me a Balsamiq , e essa é agora minha principal ferramenta de escolha para modelos de IU apresentarem a outras pessoas.

Eu ainda pego o MSPaint ou caneta/papel ocasionalmente, mas isso geralmente é apenas quando estou esboçando um design de IU básico para minha própria referência, ou se desejo apresentar ao cliente duas opções para uma tela completa (ex. "Você quer os botões Aqui ou Aqui?")

5
Rachel

The Pencil Project é um addin do Firefox que faz maquetes legais e simples.

O Pencil fornece várias coleções de formas integradas para desenhar diferentes tipos de interface de usuário, desde desktop a plataformas móveis. A partir de 2.0.2, o Pencil é fornecido com Android e estênceis de IU do iOS pré-instalados. Isso torna ainda mais fácil iniciar a prototipagem de aplicativos com uma instalação simples.

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

5
Andrew Lewis

Parece que você está usando bons métodos, mas está encontrando resistência quando as pessoas aceitam a utilidade da prototipagem rápida. Todo mundo adora codificar, mas se meia hora depois eles ainda estiverem lutando com JScrollBars e você tiver gerado 12 modelos, eles podem entender que a força dessas ferramentas está na iteração rápida .

Dito isso, as várias abordagens de baixa fidelidade têm diferentes pontos fortes:

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

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

  • Balsamiq é um atalho para criar rapidamente protótipos de papel reutilizáveis. Eu imprimo capturas de tela e as uso como protótipos de papel. Eu também o uso durante reuniões para ajudar a criar ideias conforme as temos - semelhante à prototipagem de quadro branco. Também usei o Visio e o OmniGraffle para isso.

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

Nunca faço prototipagem com usuários. Eu faço isso com a equipe de design, com base nos dados de usuário que temos. Os usuários não são designers; se você tratá-los como designers, acabará com molho de tomate aguado, café amargo (obrigado Malcolm Gladwell) e o carro de Homer. Reúna a entrada do usuário para o seu design e use-a para refinar o design com a equipe de design.

2
Alex Feinman

Minhas primeiras maquetes são sempre lápis e papel ou quadro branco, mas uma vez que o básico é definido, 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 assim por diante. Um CSS simples para definir as coisas de maneira sensata e pronto. Um pequeno JS anexado a um controle pode dar a você alguma aparência de funcionalidade, e as pessoas simplesmente parecem "entendê-lo" melhor.

O único problema com isso é que provavelmente sou o pior designer de IU vivo do mundo e, às vezes, tenho que lembrar às pessoas que estou apenas reunindo requisitos, não mostrando a elas como ficará a coisa concluída. Costumo definir o fundo como rosa ou algo assim, então sempre que alguém pergunta "Tem que ser rosa?" Posso responder com "Este é apenas um mock-up, a coisa real terá uma aparência diferente" (ou "Você terá que discutir isso com o designer").

2
TMN

Já fiz prototipagem rápida em Delphi várias vezes. Torna mais fácil criar um layout de tela muito rapidamente, muito mais rápido do que no PowerPoint ou Visio. O exe resultante pode ser anexado a e-mails sem exigir nenhuma dependência. Como eu o uso para fazer protótipos de aplicativos da web, não há perigo de as pessoas confundirem o protótipo com uma versão incompleta.

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 ideias rapidamente.

1
Joeri Sebrechts

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

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

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

    • Seja bom nisso, e isso pode realmente se tornar uma das maneiras mais rápidas de criar protótipos de um aplicativo de "janelas, widgets e formulários". Bônus: os protótipos podem acabar parecendo muito profissionais, dependendo da rapidez com que você os monta. Às vezes, eles podem até servir como um ponto de partida para a criação da coisa real, uma vez que um protótipo seja aprovado.

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

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

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

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

  • Ferramentas de gráficos raster - Photoshop/Gimp

  • Arte ASCII ;-)

1
Mike Clark

Eu uso caneta e papel primeiro, depois de desenhar a IU algumas vezes, tento fazer no PowerPoint 2 ou 3 vezes. Ter 5 ou 6 iterações antes de entrar no editor real me ajuda a reduzir UIs impraticáveis ​​(como gerar conteúdo Y com base na caixa de texto X quando o usuário nem mesmo viu o X ainda). Eu vejo isso como uma chance de sair imediatamente dos estúpidos.

1
Morgan Herlocker

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

1
JohnL