Diretrizes gerais de experiência do usuário

Introdução

Se você acaba de começar a desenvolver seu primeiro aplicativo e não tiver nenhuma experiência em design, talvez necessite de alguma ajuda e orientação sobre como desenvolver aplicativos. Esta página oferece informações práticas que você pode usar para criar seus aplicativos.

Exemplo de arquivo

You can download a predefined sample file that contains elements that you can use in your design to create useful, usable, and user-friendly web applications. Open the sample file in Apps Studio and copy-paste the elements needed for your design.

Como começar seu primeiro design

Antes de começar a criar seu primeiro aplicativo, recomendamos que planeje seu trabalho com antecedência. Antes de mais nada, considere o seguinte:

• Qual é o contexto do aplicativo?
• Quem serão os usuários? Qual é o objetivo, ocupação ou especialização deles?
• Qual é uma situação típica ou um caso mais frequente?
• Como você vai medir o sucesso do aplicativo?
• Quais são os efeitos positivos esperados do aplicativo?

Após criar esse plano, você poderá revisá-lo facilmente com seus pares e fazer eventuais alterações. Depois disso, poderá passar para os próximos passos com segurança:

1. Avalie outros casos, analisando cenários menos frequentes e casos do Edge. Grave-os e priorize.
2. Defina a melhor mídia ou formato para conseguir o melhor resultado. Nesta etapa você já consegue decidir se precisa de uma página, site ou alguns assistentes a partir de uma página.
3. Pesquise e identifique seus concorrentes para avaliar seus pontos fortes e fracos. Avalie como abordar problemas semelhantes.
4. Crie um protótipo preliminar do aplicativo. Você poderá discutir sobre o protótipo com seus pares para chegar à melhor solução.
5. Teste o protótipo e colete feedback. Recomendamos que compartilhe o protótipo com usuários potenciais para obter feedback melhor e melhorias.
6. Comece a criar a versão final do aplicativo.

Princípios de design

Para criar aplicativos úteis e fáceis de usar, há muitos princípios de design que devem ser seguidos. Para obter a melhor experiência de usuário, siga pelo menos os dois princípios abaixo.

Consistência

• Tanto quanto possível, utilize a mesma fonte e layout.
• Confira consistência ao seu design ao longo das páginas do aplicativo para melhorar a experiência do usuário.

Simplicidade

• Utilize somente os elementos necessários para fazer o trabalho.
• Evite usar mais elementos do que o necessário no design.
• Certifique-se de que tudo fique claro e que não ignore informações importantes que o usuário terá que pesquisar.

Cores

O uso de cores é muito importante na criação do design do aplicativo. Siga as diretrizes abaixo para obter a melhor experiência de usuário:

• Utilize as cores de maneira consistente por todo o aplicativo em relação aos elementos do mesmo tipo.
• Tente evitar as cores do semáforo, a menos que seja necessário. Utilize o vermelho para erros, o amarelo ou laranja para avisos e o verde para comunicar progresso positivo.
• Tente não confiar somente nas cores para apresentar as informações. Adicione sempre informações em formato de texto, ao lado do objeto colorido.

Observação:

Encontre as cores que proporcionem o contraste máximo, incluindo o contrate suficiente entre o conteúdo e o plano de fundo, de modo que o texto e as imagens não decorativas fiquem legíveis para qualquer pessoa com baixa visão ou daltônicas.

Alinhamento

O alinhamento dos elementos é uma etapa importante na criação de um design de sucesso. Certifique-se de que os elementos estejam alinhados de modo consistente.

Você poderá alinhar seus elementos na horizontal ou na vertical a partir da guia Estilo.

Exemplo

Apresentamos a seguir o exemplo de um elemento e o procedimento para criá-lo.

Etapa	Ação
1	Abra seu aplicativo existente ou inicie um novo.
2	Adicione um novo contêiner ao seu design com as seguintes propriedades: Layout: horizontal, superior, esquerda Tamanho: largura - 100%, altura - automática ou em branco
3	Adicione um container dentro do primeiro com as seguintes propriedades: Layout: horizontal, inferior, esquerda Tamanho da largura - 40%, altura - automático ou em branco
4	Adicione um controle de rótulo dentro do contêiner com as seguintes propriedades: Texto: Etiqueta
5	Adicione um segundo rótulo dentro do contêiner com as seguintes propriedades: Texto: * Estilo: cor - #c2320c
6	Adicione um novo contêiner dentro do principal com as seguintes propriedades: Layout: vertical, esquerda, superior Tamanho: largura - 60%, altura: automático ou em branco
7	Adicione uma caixa de texto dentro do contêiner com as seguintes propriedades: Texto da dica: Texto da dica
8	Adicione um rótulo dentro do mesmo contêiner, abaixo da caixa de texto, com as seguintes propriedades: Texto: este campo é obrigatório Outras propriedades: ocultas Estilo: cor - #c2320c

Observação:

Certifique-se de que as mensagens de erro fiquem ocultas, sendo visíveis apenas em caso de erro.

Após seguir o procedimento acima, a estrutura e o elemento ficarão como se vê nas imagens abaixo.