Interface Design — A essência dos Wireframes

Interface Design — A essência dos Wireframes

No artigo anterior, fizemos uma introdução sobre o conceito de User Experience, ou simplesmente UX. Abordamos os benefícios desse modelo de desenvolvimento de layouts e agora iremos nos aprofundar em um dos aspectos que compõem esta experiência, chamada Interface Design.

É a interação do ser humano com qualquer ferramenta que se comunique com produtos e serviços da sua empresa, sendo ela digital ou não. Para facilitar sua compreensão, podemos citar alguns exemplos existentes na web, como aplicativos de entrega de refeições, internet banking, etc, sendo assim o meio pelo qual você interage com determinada empresa.
Há também referências fora da web: os pedais, volantes e painel de um veículo é um clássico exemplo de uma interface de interação entre o homem e a máquina.

Só por estas ilustrações já é possível ter uma ideia da importância do estudo e planejamento de uma interface gráfica para que seus respectivos projetos cumpram bem sua função e para que os usuários também tenham facilidade em compreender e utilizar.

O objetivo final do Interface Design é gerar um material chamado Wireframe, que nada mais é que um desenho simplificado sem cor mapeando todos os elementos visuais necessários para construir e modelar a navegação do layout final.

Interface Design Concept (Imagem: I2R Digital)

Entenda a metodologia I2R Digital no desenvolvimento de interfaces gráficas:

1. Objetivo

Cada página de um site, blog, e-commerce ou aplicativo deve exercer uma função específica na navegação geral da sua aplicação, e também deverá cumprir com os objetivos organizacionais estabelecidos por sua empresa.
Para ficar mais claro, pense na última loja virtual que você visitou. Lembre-se que em determinado momento você teve que se cadastrar, navegar por sessões até encontrar uma categoria, depois comparou e escolheu produtos, confirmou a compra e por fim adicionou informações de entrega e método de pagamento.

Observe que nesse processo você navegou por sessões que cumpriam com funções diferentes. Então, é necessário que cada página tenha uma missão bem clara para seu cliente não ficar “perdido”, sem saber o que fazer nela. Esse problema costumeiramente acontece em home de portais, sites e aplicativos. São exibidas uma infinidade de ofertas, call to actions e categorias que deixam o seu cliente sem saber por onde começar. Muitas vezes eles se cansam da confusão e vão embora sem conhecer o que você oferece.

2. Arquitetura de Informação

É o processo de conhecer todas as informações básicas necessárias pela TI da sua empresa para que qualquer atividade funcione de acordo com as regras de negócio da organização.

Imagine um formulário com informações de CPF, nome, telefone e e-mail para criar um cadastro em um determinado serviço na internet. Pense também nos botões necessários para que o usuário interaja e possa confirmar as informações ou desistir do processo.

Nesse exemplo há muita coisa para se pensar e combinar com a TI da sua organização. A I2R Digital costuma realizar esse trabalho sempre em parceria: TI conhece muito bem as limitações e características técnicas, a área de negócio conhece bem as necessidades dos clientes, e nós sabemos como deixar os clientes da sua empresa satisfeitos.

3. Intuitivo

Um pouco acima comentamos sobre botões e formulários. Agora tenha em mente também todos os menus existentes no seu app ou web, processos de cadastros, funcionalidades, compras, aquisição de serviços, customização de produtos entre outros.

A coisa toda pode se tornar bem complexa para seu cliente se os processos não ficarem bem claros. Aquilo que era pra ser divertido se torna maçante e as pessoas desistem.

Gostamos de fazer tudo de uma forma que fique muito fácil de usar — os próprios botões, conteúdo e elementos visuais devem dar a dica de como o cliente tem que interagir naquela página para ele chegar onde deseja, tem que revelar como aquilo funciona.
Uma aplicação inteligente é acessível para uma criança de 6 anos, um jovem da internet, um adulto executivo, e principalmente um vovô também.
Obs.: Steve Jobs sabia das coisas…

4. Simples

Quanto mais simples e limpa for a navegação mais fácil será a adaptação do seu usuário. Evite criar complexidades que apenas um “heavy user” da internet saberia usar. Pode até parecer fácil, mas a medida que você avançar nas definições com sua TI e a área de Negócio, a simplicidade se tornará um artigo de luxo.
Não desista desse processo e terá descoberto inovações digitais para o seu setor.

Obs.: Repare como um iPhone com um único botão substituiu rapidamente um Blackberry de 30 teclas no mercado de telecomunicações.

5. Modular

Após mapear todas as páginas necessárias para sua aplicação existir, volte a examinar todas elas com um novo olhar: Procure por sessões que possam ser exatamente iguais em todas estas páginas. Podemos te adiantar uma das respostas: Header e Rodapé.

Muito provavelmente, em qualquer página do seu portal ou loja virtual, estes dois elementos se repetirão, então não tenha medo e repita mesmo. Reuso é a palavra-chave no desempenho e facilitará a gestão quando algo for alterado, e naturalmente será replicado em todas as páginas em que eles aparecerão.

E tem mais, padronize sessões de conteúdos, descrições, exibição de produtos, post e notícias. Quando for necessário você poderá reaproveitá-las em outras páginas mantendo o mesmo padrão da navegação ganhando muito tempo no desenvolvimento.

Então é muito importante considerar que cada categoria ou sessão do seu site poderá ser reutilizada em algum outro momento. Tudo o que você for criar, pense nesse sentido e economizará muitas horas de esforço.


Você também pode se interessar:

Parte 1 — Porque empreendedores digitais devem conhecer User Experience?
Parte 2 — Interface Design, a essência dos wireframes.
Parte 3 — Os princípios de um bom Layout.
Parte 4 — Criando layout responsivo com Think Mobile.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.