# Princípios de design

![](https://3964539261-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZZdfaW29jJwq55yaxn%2F-M_VrtlCyOVQzO3oEkEI%2F-M_VsFl3aPBef5OF3FjL%2Fprinci%CC%81pios.png?alt=media\&token=3931d8a5-bdce-43c3-bd20-9119523705e9)

> "Design principles are shared guidelines that capture the essence of what good design means for the team, and advice on how to achieve it." — Alla Kholmatova

## Camadas

Como ponto de partida, buscamos enxergar o design em três camadas. Dessa forma, saberemos ancorar os princípios nos lugares certos.

Na ordem de prioridade, temos:

1. **Valor de negócio:** O que construímos resolve uma dor real da pessoa usuária.
2. **Usabilidade:** O que construímos é fácil de ser usado.
3. **Estética:** O que construímos dá vontade de usar.

### Anatomia de um princípio

| Anatomia de um princípio |                                                         |
| ------------------------ | ------------------------------------------------------- |
| Nível                    | Valor de negócio / Usabilidade / Estética               |
| Nome                     | -                                                       |
| Descrição                | Ponto de vista do princípio e resultados esperados      |
| Pergunta-chave           | Pergunta que pode ser usada em sessões de design review |
| Boas práticas            | Podem ser usadas como checklist no dia-a-dia            |

## Sucesso através de contexto

#### Nível: valor de negócio

Preferimos contextualizar e comparar as experiências do que isolá-las na plataforma. Assim aumentamos as chances de sucesso mais rápido.

Acreditamos que todos os talentos são únicos. Porém, recrutamento é uma atividade de comparação por natureza. Profissionais comparam empresas. Empresas comparam profissionais. Isolar essas experiências (tratando-as como incomparáveis) deixa as pessoas usuárias alienadas sobre elas em relação ao mercado.

Ter contexto do que as outras pessoas estão fazendo, das boas práticas e do que é sucesso reduz a ansiedade e as chances de erro. Sabemos o que tem pra fazer e se estamos indo bem ou não. Nos sentimos confiantes.

**Pergunta-chave**

*Quais partes poderiam dar mais contexto para as pessoas usuárias?*

| **Boas práticas**                                                                                          | **Exemplos**                                            |
| ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| Os resultados que uma pessoa usuária pode gerar ao interagir com uma funcionalidade estão claros para ela. | Usar blank state para mostrar possibilidades e caminhos |
| Está claro para a pessoa usuária o que é o sucesso da tarefa que ela está executando                       | Olhar X perfis em X tempo                               |
| Usuário vê os resultados contabilizados do que ele já gerou de resultado                                   | Horas economizadas                                      |

## Eficiência através de direção

#### Nível: usabilidade

Preferimos direcionar as ações da pessoa usuária do que deixá-la explorando a plataforma. Assim, reduzimos seu tempo por tarefa.

Temos três motivos para *pegar na mão* das pessoas usuárias:

1. Podemos dizer que o mercado de HR Tech ainda está amadurecendo no Brasil. Empresas, principalmente, não têm anos de experiência no uso de ferramentas online de recrutamento;
2. Nosso modelo de negócio é diferente: não trabalhamos ofertando vagas, como a maioria dos outros players.
3. Estamos também aumentando nosso portfólio de produtos, com modelos mais disruptivos do que já temos.

**Pergunta-chave**

*Quais partes do produto e do processo estão permitindo que o usuário se perca?*

| **Boas práticas**                                                                                                          | **Exemplos**                           |
| -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| Pessoa usuária tem clareza da próxima ação sempre que termina o que estava fazendo                                         | Sugestão de próximos passos            |
| Pessoa usuária consegue desfazer e reverter tarefas sempre que possível                                                    | Botão voltar, alterações no perfil     |
| Pessoa usuária consegue aproveitar dados gerados em outras partes do produto e em ferramentas diferentes para ganhar tempo | Integração com Linkedin, ATS com Prime |

## Intuição através de simplicidade

#### Nível: estética

Preferimos trabalhar com baixa densidade de informação. Assim reduzimos a inércia da pessoa usuária para começar e terminar tarefas.

É difícil falar sobre estética. Bonito, feio, clean, leve: é tudo muito subjetivo, é pouco acionável. Para nós, a camada estética tem a ver com remover inércia. Se nosso produto gera valor para os usuários e ele faz a mesma tarefa mais rápido lá dentro, o que falta para ele ser incrível então?

Falta a camada mais visceral. Quando a pessoa bate o olho, ela sente vontade de começar. E de voltar depois. Para chegar lá de forma objetiva, observamos que isso só é possível ao reduzirmos a densidade de informação na tela. Quanto menos informação, menos escolhas, menos inércia.

**Pergunta-chave**

*Quais partes estão sobrando?*

| **Boas práticas**                                                                                      | Exemplos                                                              |
| ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- |
| Pessoa usuária realiza a tarefa em passos menores, não encarando tudo de uma vez                       | Fluxo de sign up faseado                                              |
| Usamos metáforas do mundo real para construir as interações                                            | Board de gestão de talentos                                           |
| Pessoa usuária acessa o mínimo possível de informação para seguir com a tarefa sem depender da memória | Informações sobre a vaga na mesma tela para conversar com os talentos |

**Observações**

* Usar animação para dar contexto e senso de espaço, não dependendo apenas de texto e imagens para informar (Ex.: gif explicando como copiar informações do LinkedIn)
* Não escrevemos por escrever. Cada palavra é uma oportunidade de fazer a pessoa usuária avançar. Usamos gatilhos psicológicos para embasar nossas decisões de copy.
