12 Dicas para Wireframes

Wireframe cartoon

O planeamento da arquitectura da informação não pode ser descurado, e o Wireframing é um dos primeiros passos para o melhor planeamento e definição de esquemas de interfaces. Nada como começar com um esboço em papel e desenhar os procedimentos em Wireframes. Em seguida enumero 20 dicas e ferramentas para um bom planeamento através de wireframing.

Através do investimento no melhor planeamento de uma aplicação, baixa drasticamente o investimento no desenvolvimento, visto que o custo associado a uma vertente de planeamento é bem menor do que resoluções em ambiente de desenvolvimento, podendo comprometer a conclusão de projecto ou a mudança de finalidade e objectividade de desenvolvimento. 

• Seja assertivo com os objectivos
  Existe sempre a tentação por parte dos desenvolvedores para acelerar o processo de construção começando a codificar de imediato. Contudo, em projectos com uma dimensão considerável deve ser de haver um elevado grau de planeamento no desenvolvimento, para que se consiga contornar e ser-se pró-activo na despistagem de problemas complexos. Um Wireframe ajuda a visualizar questões de maior complexidade com menos necessidade de tempo e custo. Isto porque alterações no planeamento são bem mais exequíveis do que em milhares de linhas de código.

• Faça-o Funcional, não bonito.
  Na esquematização de um Wireframe, deve-se focar nas funcionalidades do produto e não nos elementos de design. Tem de ser sobre como irá funcionar e não com design ou performances. Por exemplo, quantas e onde colocar caixas de texto, botões, menus…

• Desenhe com base na sua Experiência de utilizador
  Não necessita de ser um guru do design ou da usabilidade. Pela sua experiencia como utilizador com base no bom senso, conseguirá detalhar um Wireframe. Obviamente quanto mais experiência tiver, melhor será essa percepção.

• Sensibilidade pela óptica do cliente.
  O produto será financiado pelo cliente, logo o esforço de esquematização tem que satisfazer as necessidades do cliente. Mas não deve permitir a gestão completa do processo, mas terá de existir uma relação de satisfação e responsabilização pelo output do Wireframe.

• Envolva toda a gente
  É mais produtivo quando os utilizadores a relacionar com o produto, são envolvidos neste processo de planeamento. Através de input’s dos utilizadores reais, estes podem trazer uma visão mais aprofundada da complexidade do produto. Contudo, numa primeira fase talvez não devam de ser envolvidos muitos utilizadores, para que se consiga controlar a objectividade nas reuniões de projecto. Apresentado á priori aos responsáveis uma versão “Draft”, e á medida que se aumenta a consistência do Wireframe devem de ser envolvidos outros utilizadores.

• Defina um Deadline para completer o Wireframe
  Para um melhor controlo da gestão de projecto, é fundamental definir períodos de tempo e deadlines de entrega. As sessões de Wireframing podem demorar um a vários dias dependendo da complexidade da aplicação.

• Keep it clean
  Um Wireframe “imaculado” permite uma melhor percepção do esquema apresentado, indo ao encontro de uma prototipagem concisa, objectiva e não ambígua. Se determinada página deve de ter quatro caixas de texto e um menu, deve ser apresentado isso mesmo, nem mais, nem menos.

• Evite o design (em demasia) no Wireframe
  Para um Wireframe de 2º instância, as componentes de design devem de ter lugar, contudo sempre com uma boa sensibilidade para os excessos de elementos ou “floreados”. A máxima a seguir são: Quais são os objectivos, funcionalidades, a navegação de conteúdos e o layout. Evite colocar elementos que distraiam a audiência, senão irá perder muito tempo a debater os gráficos, cores, tamanhos, etc.

• Não seja preguiçoso
  Para um trabalho minucioso, não deve de ser descurado nenhuma pagina mesmo que seja simples ou obvias, tal como páginas de Login. Assegure-se que o Wireframe é o espelho de toda a aplicação e que o estudo e planeamento são abrangentes. No final irá obter um a documentação que simula na perfeição a aplicação a desenvolver.

• Estruture o Wireframe por secções
  A estrutura do Wireframe deve de estar distribuido por secções, tal como noticias, eventos, conta do utilizador. Divida o Wireframe em várias partes para conseguir uma estrutura final para a aplicação. Repare que pode ser dividido por processos, tal como para registo de utilizador ou compras a realizar, detalhando cada passo ou acção que o utilizador terá de realizar.

• Aplicação da publicidade (Ads)
  Em muitos sites, a publicidade é um tipo de rentabilização do negócio, tal como o Google Ads, no entanto deve de ser incluído para a visualização final e maximização de resultados da publicidade.

• Escolha as melhores ferramentas
  Inicialmente, o papel e a caneta devem de ser a melhor ferramenta para se conseguir a sistematização abstracta do produto. Tem a vantagem de ser mais rápido, facil e barato.
  Após criar o documento inicial, deverá utilizar ferramentas mais complexas mas também mais eficazes. A escolha terá de cair na ferramenta que se sinta mais confortável, como por exemplo o Microsoft Visio,  Powerpoint ou mesmo o Adobe Fireworks. Contudo existe mais ferramentas disponibilizadas on-line para a realização de wireframes com uma grande facilidade de uso tal como, o Lumzy.

Outros artigos relacionados:

O que é um Wireframe?
As instâncias de Wireframes