it-swarm-pt.com

Como você define interações em uma maquete?

Sou programador e designer de UX/UI. Quando eu projeto as coisas, geralmente faço imagens estáticas da aparência da interface. O problema é que a maioria das UIs não é estática; eles mudam e redimensionam a partir da entrada do usuário. Obviamente, eu sei exatamente como a interface deve responder a essa entrada, mas, para grandes projetos, o cliente e outros programadores precisam ser capazes de pegar meus modelos e entender as interações. Então, como você mostra em uma maquete como seu design interage e responde ao usuário?

17
Jonathan Dumaine

A melhor maneira de descrever a interação é modelá-la com um protótipo interativo.

Existem várias ferramentas de prototipagem, como Axure ou a que estamos desenvolvendo, Artesanato Qualquer que você use, o ponto é que eles permitem que você mostre ao seu cliente, colegas etc. o que acontece quando você interage com elementos da maquete. Você obterá resultados muito melhores usando um protótipo para mostrar interatividade do que com uma maquete clicável. É possível mostrar alterações básicas de estado com maquetes, e há uma fase no processo de design em que isso pode ser útil, mas há algumas coisas que são difíceis de descrever com imagens estáticas, como animações (vitais em determinadas situações), capacidade de resposta ( um elemento-chave da interatividade) e, no caso de aplicativos nativos ou da Web, a "sensação" de usar essa plataforma específica.

7signals fala muito sobre como eles pulam os wireframes e vão diretamente para o HTML. Escrevi m post no blog há alguns meses atrás sobre uma palestra que eles deram na qual descreveram seu processo.

No entanto, se você deseja enriquecer maquetes estáticas, Interactive Sketching Notation de Jakub Linowski é um bom ponto de partida para uma maneira semelhante à UML de descrever a interação:

interactive sketching notation

Consulte Prós/contras de PSD versus modelos de HTML para uma discussão semelhante:

Se você estiver criando um site ou aplicativo, as maquetes em HTML são muito superiores porque você está criando a maquete no formato o mais próximo possível do produto final. Isso permite que você defina as expectativas com muito mais facilidade, restringe o que é possível no produto final e oferece uma flexibilidade muito maior.

25
Rahul

Quando uma maquete interativa não for uma opção, tente o texto. Você pode adicionar números que apontam para partes da imagem estática ou estrutura de arame e fornecer notas de interação para cada número.

alt text

Acima: um exemplo de um número apontador.

5
JeromeR

Se você não tem a opção de algo como o Axure (ou outra ferramenta de prototipagem interativa ou mesmo HTML ou Flash), acho que sua melhor aposta é criar uma estrutura de arame da visualização "padrão" ou "padrão" e mostrar em fios adicionais os estados alternativos de módulos específicos.

Em minha experiência, contar com anotações baseadas em texto para transmitir as alterações geralmente é insuficiente - já fiz muitos projetos em que os wireframes perfeitamente anotados foram mal interpretados ou construídos incorretamente porque clientes/desenvolvedores/etc. perdeu detalhes textuais importantes que seriam melhor capturados visualmente.

2
Michael Histen

Sei que este tem meio ano, mas como ninguém o mencionou ainda, vou:

Bill Buxton escreveu um livro chamado "Desenhando experiências do usuário" que lida com o problema de "desenho" do design de interação - como podemos transmitir conceitos e padrões de interação de maneira exploratória, ou seja, rápido e de baixo custo, mas não é muito abstrato?

2
Jan