Wireframes, wireflows e casos de uso

Segundo Kalbach (2009), wireframes são esboços preliminares das telas do produto nas quais podem ser observadas a estrutura, organização, ordem e natureza dos elementos e a hierarquia e densidade da informação. Além disso, também facilitam a descoberta de possíveis problemas de ordem navegacional e de usabilidade. Para o autor, wireframes precedem o design visual e, portanto, não devem ser usados como parâmetro para análise dos elementos estético-formais. Por outro lado, quando o designer gráfico definir o leiaute das telas, terá que observar e manter a arquitetura da informação estabelecida nos wireframes. Em muitos casos, ela é aprovada pelos clientes através da apreciação dos wireframes e se for alterada, não corresponderá mais àquilo que foi planejado. Porém, o designer terá flexibilidade para desenvolver os estilos gráficos da identidade gráfico-visual, conforme será abordado na etapa de identidade.

De acordo com Meurer e Szabluk (2012), para representar os passos de uma tarefa ou a navegação dentro de determinado conteúdo, define-se uma sequência lógica de wireframes, chamada wireflow. Unger e Chandler (2009) e Cybis (2010) compreendem essa sequência como sendo uma espécie de protótipo. Em essência, segundo Meurer e Szabluk (2010), wireflows são importantes para orientar todos os profissionais envolvidos na equipe de projeto, pois exibem em detalhes, elementos e modelos interativos fundamentais que constituirão o produto final. Podem ser usados também para realização de testes de interação com usuários finais, pois já apresentam todas as metáforas necessárias para que os mesmos possam navegar e realizar tarefas. Recomenda-se aos alunos a realização sequencial das seguintes técnicas e métodos:
i. ‘Wireflows simplificados’ dos Cenários hipotéticos (modelos em papel). No intuito de motivar a habilidade do planejamento através da expressão gráfica e o trabalho em equipe, recomenda-se definir em papel, uma simulação simplificada e ordenada de toda estrutura informacional das telas e toda a navegação possível entre elas. É importante que os alunos demonstrem o fluxo das tarefas de ferramentas e funcionalidades, todos os conteúdos estruturados e hierarquizados e a inter-relação/navegação entre eles. Os acionamentos e conexões (botões, ícones e hiperlinks) devem ser de alguma maneira destacados para que remetam diretamente a ações do produto.
ii. Caso de uso relacionado ao wireflow simplificado. Possuem a função de explicar a função de cada wireframe e o que acontece entre eles. Ex. Usuário digita login e senha e em seguida, clica em entrar. Aplicação verifica dados do usuário e oferece menu de opções. Usuário escolhe ‘verificar exames’…
iii. Wireframes Arquiteturais detalhados. Recomenda-se escolher as principais telas de conteúdo e as ferramentas e funcionalidades mais importantes do produto e definir a arquitetura da informação através de wireflows detalhados e bastante precisos (figura 16). Estes wireframes apresentam riqueza de detalhes e são importantes para a realização de testes com usuários, validação junto aos clientes e para a documentação do produto. Pela sua complexidade estrutural, Meurer e Szbluk (2012) recomendam o uso de grids para desenhá-los.

wireflow

Fonte:Elaborado por Lucas Winck Santi. Design Uniritter, disciplina de Projeto Gráfico IV, 2012.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL