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

Você pode baixar um exemplo de arquivo predefinido que contém elementos que você pode usar em seu design para criar aplicativos daweb funcionais, úteis e fáceis de usar. Abra o arquivo de exemplo no Apps Studio, copiando e colando os elementos necessários para o seu 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.

Dica:

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.