Design Handoff: Parte 2

Exemplo de Aplicação do Design Handoff

Na Parte 1 deste tutorial para Design Handoff, você já conheceu o que é o Design Handoff e quando aplicar, além dos elementos utilizados e como adicioná-los à biblioteca de componentes do seu projeto. Agora, trago abaixo alguns exemplos esquemáticos para te ajudar a entender como aplicar cada um dos componentes mencionados anteriormente.

Lembrando que: os elementos usados neste Design Handoff já estão padronizados e em forma de componentes e podem ser acessados neste arquivo do Figma

1. Board (ou Quadro) de um Fluxo

O fluxo sobre o qual será realizado o Design Handoff deve ser enquadrado em um board (retângulo com cor de fundo neutra), contendo o nome do fluxo em seu cabeçalho, a fim de facilitar a identificação de qual feature ou etapa da jornada aquele fluxo representa.

Exemplo de fluxo enquadrado em um quadro (board). Esquema desenhado pela autora

Exemplo, desenhado pela autora, de cabeçalho contendo o nome do fluxo (zoom aplicado à imagem anterior)

2. Link para Styleguide

Com o intuito de facilitar o acesso dos programadores aos diferentes componentes do projeto, adiciona-se, no início de cada fluxo, a caixa de link redirecionando ao styleguide.

Esquema desenhado pela autora. Acima, em azul, você confere o componente caixa de link aplicado ao Design Handoff

Outra opção é, além de adicionar o link para o styleguide, copiar todos os componentes do styleguide e colar em uma nova página do arquivo Figma.

Exemplo de página criada para colar os componentes que foram copiados do styleguide. Print gerado pela autora

DICA: NÃO FAÇA alterações nos componentes colados no arquivo. Os componentes copiados e colados existem apenas para facilitar o acesso dos programadores, disponibilizando o styleguide no mesmo arquivo do fluxo. Contudo, esses componentes dispostos no arquivo do fluxo não são os componentes principais e as alterações realizadas neles não irão atualizar automaticamente nos elementos adaptados. Lembrando: alterações devem, sempre, serem realizadas nos componentes principais (main components).

3. Título da Tela

Acima de cada tela do fluxo, traga a caixa de título, contextualizando ao que a tela se refere e em qual cenário ou qual etapa da jornada o usuário tem acesso a ela.

Exemplo, desenhado pela autora, de localização e descrição dos títulos das telas

4. Comentários

Os comentários devem ser trazidos abaixo de cada tela e detalhar comportamentos dos elementos na tela, informações relevantes ou cenários existentes naquela etapa.

Exemplo, desenhado pela autora, de caixas de comentário detalhando o carregamento da tela (à esquerda) e as condições para que um botão fique habilitado (à direita)

5. Fluxo Principal

O fluxo principal é representado pelas setas de linha sólida. Para isso, deve-se conectar o elemento responsável pela ação à próxima tela do fluxo.

Exemplo, desenhado pela autora, de botão redirecionando ao início de um fluxo de cadastro

6. Fluxo Secundário

O fluxo secundário é representado pelas setas de linha tracejada. Ele se refere à detalhamentos como: o comportamento de um input ao ser preenchido, possíveis erros de preenchimento, entre outros. Assim como no fluxo principal, você conecta o elemento que gera a ação à tela que exemplifica seu possível estado (preenchimento, preenchido, erro, etc).

Exemplo, esquematizado pela autora, de inputs sendo preenchidos

Atenção: Nesse caso, as telas do fluxo secundário são válidas para demonstrar qual tipo de teclado (numérico, alfabético ou ambos) se habilitaria ao clicar no input. No caso de comportamento de componentes, isto deve ser representado no styleguide do projeto.

7. Botões de Interação

Os botões de interação são utilizados no handoff para demonstrar qual interação realizada pelo usuário exibe determinada informação. Eles são posicionados acima da linha da seta que direciona à informação exibida.

Exemplos, desenhados pela autora, de uso de botões indicando ações do usuário: arrastar e clicar (obs: a etapa 3.2 foi demonstrada à esquerda da tela 3 para que a imagem de exemplo ficasse horizontal, na prática, deve-se posicioná-la à direita da tela 3)

Exemplos, desenhados pela autora, de uso de botões indicando ações do usuário: clicar e deslizar para a direita

8. Cenários de Erro

Caso uma ação apresente mais de uma condição de erro, estas devem ser descritas nas caixas de comentário abaixo da tela de erro, trazendo as alternativas de mensagens possíveis para os diferentes cenários de erro.

Exemplo, desenhado pela autora, de caixas de comentário trazendo cenários de erro

9. Tela com Diversas Ações e Fluxos Possíveis

Exemplo, esquematizado pela autora, de uma tela em que o usuário pode realizar diversas ações

Em caso de muitas possibilidades de ação numa mesma tela existem três possibilidades:

• Se o novo fluxo já estiver desenhado e for ser desenvolvido na sprint, você deve ligar o elemento que inicia o fluxo ao board onde este está desenhado, na mesma página.

Exemplo de botão, ao final de um fluxo, direcionando a um novo fluxo, na mesma página. Esquema desenhado pela autora

• Se o fluxo já estiver desenhado, mas foi desenvolvido anteriormente, você deve ligar o elemento à caixa de link, redirecionando para a página ou o arquivo que contém o fluxo deste.

Exemplo de botão, ao final de um fluxo, direcionando a um fluxo antigo (em outra página ou em outro arquivo). Esquema desenhado pela autora

• Se o fluxo se trata de uma feature que ainda não foi desenhada, não é uma preocupação para o desenvolvimento naquele momento e, portanto, você não precisa se preocupar em linkar ele no seu handoff.

10. Fluxo Alterado

Se um fluxo sofrer alteração, a alteração deve ser indicada sobrepondo o antigo fluxo com um retângulo escuro e com uma seta cinza direcionando ao novo fluxo. Lembre-se de informar a data em que a alteração do fluxo foi realizada (novo fluxo validado, com o handoff finalizado e liberado para desenvolvimento).

Exemplo, desenhado pela autora, de representação de um fluxo que sofreu alteração

11. Outras Resoluções

Assim como mencionado na aba “antes do handoff”, a definição prévia do grid e do comportamento dos elementos definidos fará com que não seja necessário representar todas as resoluções possíveis de cada tela. Assim, você desenhará outras resoluções apenas para a primeira tela de cada fluxo ou para telas que necessitem mais detalhes sobre o comportamento dos elementos.

As demais resoluções desenhadas devem ser dispostas em um outro board na mesma página do arquivo Figma que contém o fluxo sobre o qual o Design Handoff foi realizado. Com isso, você conecta o cabeçalho do board do fluxo ao board contendo as demais resoluções.

Neste board, você adiciona o campo de título com o mesmo número e descrição da tela a qual as resoluções se referem.

Exemplo de fluxo desenhado em resolução mobile redirecionando para quadro contendo as mesmas telas, mas em resoluções diferentes. Esquema desenhado pela autora

Exemplo, desenhado pela autora, de título de board contendo outras resoluções e de caixa de título indicando a qual tela ela é referenciada

Em caso de fluxos mobile e desktop, onde haja diferença considerável nos componentes existentes, o handoff deve ser feito para ambas as resoluções.

[Design handoff] Acesse Aqui:

_

Parte 1: Conceito, Componentes e sua Aplicação