Projetando um perfil de usuário: como usar substituições

Não importa o tipo de projeto de software que os designers de UI/UX tenham em suas mãos – aplicativos para fintech, blockchain ou e-commerce – quase todos os projetos compartilham uma tela em comum. Neste caso, estamos falando da parte de um aplicativo que contém as informações pessoais do usuário... seu perfil.

Sim, na superfície, tudo parece moleza. Devemos incluir uma imagem, nome, senha e botão salvar, além de várias configurações de opções. Embora tudo isso seja verdade, essa simplicidade se aplica apenas a cenários comuns. Ao mergulhar mais fundo em um caso de negócios concreto de um produto de software, a tela de perfil do usuário provavelmente se tornará um pouco mais complicada. Dos níveis internos ao faturamento e verificação – quando se trata da tela de perfil – o diabo está nos detalhes.

Se você tiver que projetar um caso de perfil de usuário rico em componentes, é hora de se preparar; você enfrentará alguns desafios definindo o melhor cenário de UX e escolhendo os componentes ideais para representá-lo. Então, depois de realizar testes de UX na iteração inicial do protótipo, é hora de mudanças e melhorias nos wireframes. E sim, precisaríamos fazer as melhorias no wireframe o mais rápido possível.

Além disso, vamos nos ater a esta frase familiar, "O mais rápido possível!", e deixe-me mostrar como usar os Sketch predefinidos com pixels perfeitos e padrões de Indigo.Design para construir nosso conceito de UX.

Let’s Begin

Com os esboços iniciais em papel já feitos, estamos na frente da tela e prontos para começar com Sketch. Aí vem a primeira surpresa legal (vamos usar a surpresa apenas para vibrações positivas):

Não precisamos perder tempo pensando em como começar da prancheta em branco quando usamos Indigo.Design UI Kits, porque podemos simplesmente inserir um dos padrões mais próximos do nosso conceito de design.

Como membro da equipe de produto Indigo.Design, estou animado para criar mais padrões que ajudarão em uma variedade de casos de uso. Portanto, se você precisar de um caso de uso específico, não hesite em nos enviar uma mensagem. Você pode até anexar uma maquete para ilustrá-lo melhor.

A próxima etapa é configurar o padrão de perfil de usuário existente de acordo com nossos requisitos específicos. Vou manter o padrão inicial ao lado do modificado para acompanhar as alterações:

Aqui está o resultado depois de escolher uma representação de imagem de perfil diferente.

A partir da opção situada em Avatar, podemos definir rapidamente a cor de fundo do ícone no canto inferior direito, o tipo de ícone, a cor do texto, o texto do espaço reservado, etc.

Como você pode ver, o padrão inicial fornece várias entradas, a primeira das quais é representada no estado de foco, enquanto o restante está no estado preenchido. Claro, se quisermos mudar o estado, isso pode ser feito facilmente nas opções de estado.

Para o exemplo atual, escolhi o estado ocioso, então recebo esse resultado. O que é bastante útil ao especificar uma entrada é descrever claramente seu comportamento. Por exemplo, observar se uma senha foi digitada incorretamente ou com sucesso. Isso pode ser configurado no menu suspenso Estado novamente. Depois de escolher o estado que queremos, as entradas são perfeitamente distribuídas verticalmente.

E se quisermos alterar o layout da entrada para mostrar caixas em vez de linhas? Não se preocupe, basta mudar assim...

… e você recebe uma entrada em caixa de pixel perfeita. Escusado será dizer que, se você preferir esse layout, é melhor segui-lo para todas as outras entradas.

Seguindo em frente, e se você quisesse ter entradas mais complicadas, incluindo sufixos, prefixos ou ícones? Nossa biblioteca fornece modelos facilmente editáveis que cobrem vários casos. Vamos começar com a condição inicial.

Em seguida, você pode ver como obter a entrada com ícones de prefixo e sufixo.

É provável que você só precise editar o ícone, que pode ser editado tanto para prefixo quanto para sufixo, cor e tipo de ícone.

Se quisermos ir ainda mais longe e usar outro componente em vez de uma entrada, teremos que separar nosso padrão de perfil e editar os componentes menores.

Muitas vezes, precisamos de uma opção de alternância ao editar um perfil, então vamos adicionar e editar esse componente da biblioteca Indigo.

Como o padrão já está desanexado, recomendo excluir uma entrada após adicionar outra opção, para usá-la como ponto base para alinhamento.

Após o alinhamento preciso, você pode simplesmente esticar o componente do interruptor para caber entre o deslocamento.

Por fim, basta excluir a entrada ou o campo que você não precisa e editar o rótulo do interruptor.

No caso de configurações de perfil mais complicadas, talvez seja necessário adicionar um item que leve o usuário a outra tela ou nível mais profundo. Se enfrentarmos esse caso, recomendo usar um item de lista.

Primeiro, nós o adicionamos como um componente da biblioteca, depois o colocamos onde quisermos na tela e simplesmente ajustamos sua largura para corrigir o tamanho da tela. Por fim, não se esqueça de alterar o rótulo.

Uma observação importante que eu gostaria de acrescentar: não adicione um componente do menu Substituições. Eu sei que é muito tentador, pois está posicionado no topo da lista de componentes, mas é melhor primeiro adicionar a forma inicial do componente do que configurá-lo no painel de opções direito.

Isso é tudo! Como prometido, o uso de nossa biblioteca de interface do usuário Sketch acelera sua produtividade. Mas isso é apenas o começo, pois recursos de Indigo.Design mais interessantes (como gerar seu design de código) serão revelados nos próximos artigos.