Blog

fluxograma-para-interfaces-digitais (1)

Fluxograma para interfaces digitais: transformando informações em requisitos de função e conteúdo

Estruturar processos de forma clara pode ajudar toda a equipe a compreender melhor o desenvolvimento de projetos. Alimentar as informações de projeto em um fluxo lógico pode ser o primeiro passo para reduzir a complexidade e deixar as atividades e as tomadas de decisão mais claras, lógicas e, claro, mais visuais!

No contexto da gestão de projetos, fluxogramas tornam-se aliados não apenas para conectar as etapas existentes, mas também para entender a relação e importância de cada informação na tomada de decisão. Já escrevi um post e publiquei diferentes materiais sobre isso (para saber mais clique aqui). Mas, agora vou mostrar como podemos aplicar essa mesma lógica no desenvolvimento de interfaces

Para isso, apresento o fluxograma a seguir, que tem como objetivo: conectar etapas do desenvolvimento de projeto de interfaces, determinando a relação e a importância de cada informação na tomada de decisão – desde o levantamento de informações iniciais até a avaliação da interface em diferentes planos projetuais.

Esse fluxograma alinha-se a proposta de Garrett (2010), o método dele serve para auxiliar na idealização da experiência do usuário por meio de cinco planos. Essa idealização começa da parte estratégica (e bem abstrata) e aos poucos vai se tornando mais concreta (uma interface). Os cinco planos, são denominados: estratégico, escopo, estrutural, esqueleto e superfície. De forma bem sucinta podemos dizer que:

 

O Plano Estratégico:  visa identificar o que se quer com o desenvolvimento da interface e o que o usuário precisa.

O Plano de Escopo: ajuda a transformar o plano estratégico em requisitos, que são desdobrados em recursos para a interface. Neste plano, são elencadas funções e conteúdos relacionados a interface.

O Plano Estrutural (hierarquia): aqui funções e conteúdos são apresentados segundo uma hierarquia que é estabelecida de acordo com características, aptidões, preferências e necessidades do usuário.

O Plano de Esqueleto (wireframes): aqui, torna-se possível a prototipação da da interface. Para isso, deve-se respeitar a hierarquia estabelecida no Plano Estrutural.

O Plano de Superfície: neste plano, o que foi produzido até então é unido e transformado em telas que servirão de base para a equipe de desenvolvimento e implementação.

 

Acompanhamento do desenvolvimento e implementação

 

O fluxos e as matrizes de decisão que serão apresentadas neste post em breve, auxiliaram a avaliação da interface e da solução em diferentes níveis projetuais. Inclusive, essas matrizes podem ser aplicadas desde o plano de escopo. E, após o desenvolvimento dos wireframes (plano de esqueleto) tais matrizes podem ser aplicadas para análise de usabilidade e satisfação (normalmente, elas são aplicadas de forma combinada com outros métodos, ferramentas e técnicas de avaliação).

 

Para saber mais sobre os planos e o método do Garrett, sugiro a leitura abaixo:

 

GARRETT, Jesse James. The elements of user experience: user-centered design for the web and beyond. Pearson Education, 2010.

 

 

A proposta a ser apresentada aqui consiste em incorporar a proposta de Garrett (2010), um grupo de procedimentos que facilitem a tomada de decisão no fluxo de projetos de interfaces. Consiste no Fluxograma para Interfaces Digitais. Nele, o levantamento de informações e análise dos dados mostram o quão essenciais a sua importância na construção de um projeto de interface mais sólido, considerando o peso, as características e as necessidades das persona.

 


Ainda não sabe o que é persona, ou quer saber como aplicar a técnica de forma mais robusta? Clique aqui!


 

Etapas de construção de um Fluxograma para Interfaces Digitais

 

1ª etapa – Levantamento de informações iniciais

 

01-levantamento-de-informacoes

Este é o momento de buscar informações sobre três frentes essenciais para o desenvolvimento de qualquer projeto: o mercado, o público e o produto. Sobre o mercado, busque dados que mostram as principais necessidades e desejos das pessoas. Isso auxiliará na idealização uma interface útil e relevante do ponto de vista mercadológico.

Conheça mais sobre o público para a qual a solução será destinada, considerando suas principais demandas e desejos. Após coletar essas informações, é essencial verificar também dados sobre o produto que será desenvolvido. Será que ele realmente vai ao encontro das necessidades do seu público?

 


Levante informações relevantes ao projeto, como: pesquisas sobre o produto ou serviço que será oferecido, informações sobre o público e o mercado que será atendido etc. Observe também as principais características e funções da interface que você pretende desenvolver. Caso necessário, realize entrevistas para validar/respaldar essas informações.


 

2ª etapa – Análise dos dados

 

02-analise-de-dados

Mapeie as oportunidades, as fragilidades e as potencialidades de mercado. Neste momento, pode-se inclusive analisar a jornada do usuário (ou jornada da persona), para identificar como a persona comporta-se, antes, durante e depois de ter contato com a interface e o produtos. Na etapa de análise é necessário também observar as principais funcionalidades e o conteúdo que será disponibilizado na interface.

 


Para realizar essa análise utilize mapas mentais ou painéis semânticos, por exemplo. É essencial, neste momento, tornar a visualização das informações mais fácil.


 

3ª etapa – Plano de Estratégia e Plano de Escopo

 

03-estrategia-e-escopo

É nessa etapa também que são definidas as variáveis e calculados os pesos do perfis/personas que serão impactadas pela sua solução. Esse cálculo é fundamental para avançar nas próximas etapas.

 

Como posso calcular as personas?

 

Escolha as variáveis que irão nortear o seu cálculo. Faz-se importante lembrar que as personas devem ter relação direta com o seu negócio. No exemplo abaixo foram escolhidas as variáveis “poder de compra” (eixo x) e “poder de persuasão”  (eixo y) – pois pessoas que podem influenciar outras pessoas a comprar o produto são muito importantes para esse negócio, Neste exemplo, para as personas Carlos e Maria Luiza. Dentro das coordenadas, é possível identificar o peso de Carlos e Maria Luiza. O gráfico mostra, no exemplo, que Maria Luiza tem um peso 8, enquanto Carlos somou o total de 6.

 

grafico-3a-etapa

Como esboçar o Plano de Escopo?

As personas serão fundamentais para definir o peso da interface visual de sua solução – principalmente do ponto de vista de função e conteúdo. No exemplo, foram divididos itens relacionados e atribuídas notas para cada um deles. Essas notas são atribuídas a partir das características das personas e da importância  que ela dá para cada um dos itens. Se deseja atribuir uma nota fundamentada, é possível realizar uma pesquisa prévia.

 

Como chegar nos resultados?

É só multiplicar a nota atribuída ao peso do perfil. Em seguida, some os resultados calculados em cada um dos itens. Esses números irão mostrar a ordem de importância de cada um deles. No exemplo, o pagamento on-line é a função mais importante, assim como o depoimento é o item mais relevante no que diz respeito ao conteúdo.

 


Quer saber mais sobre o cálculo do peso das personas? Então não deixe de conferir também o material Um passo a passo para transformar pesquisa informacional e personas em requisitos de projeto.


 

Print

 

4ª etapa – Plano Estrutural (hierarquia)

 

04-hierarquia

Após estabelecer as variáveis e calcular o peso das personas, chega a hora de estabelecer a hierarquia da interface visual de sua solução. Busque colocar as funções e conteúdos de maior valor na parte mais superior.

 

Print

Da mesma forma que na matriz anterior, você deve avaliar (por meio de uma nota) o quanto que cada alternativa de interface atende ao requisito/item listado. A nota atribuída deve ser multiplicada pelo peso do requisito (calculado anteriormente).

 

grafico-6a-etapa

 

 

 

5ª etapa – Plano de Esqueleto (wireframe)

 

05-wireframe

 

Com base na hierarquia estabelecida, deve-se estruturar o wireframe. Construa uma proposta que evidencie os itens de maior pontuação e desenvolva uma interface que corresponda aos anseios das personas.

 

6ª etapa – Superfície

 

06-superficie

 

Neste momento, é possível avaliar como o bloco de informação atende melhor a tabela construída na 4ª etapa.

Organizar as informações por meio de um fluxograma para interfaces digitais possibilita uma visualização facilitada de cada uma das etapas. Não esqueça também que essas informações podem ser transformadas em requisitos de projeto e quanto mais claras forem, mais completo será o seu fluxograma. Espero que o modelo apresentado no texto possa lhe ajudar na construção de um projeto ainda mais sólido.

 

Obrigado e até a próxima!

 

  • Quer saber mais sobre o fluxograma de projetos? Não deixe de baixar gratuitamente o material.  É só clicar aqui!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Assine a newsletter!

Deixe seu e-mail para receber contéudo exclusivo e gratuito!

Nome

Email