# Princípios de design

![](/files/-M_VsFl3aPBef5OF3FjL)

> "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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://revelo.gitbook.io/playbook/design/untitled-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.