Uma coisa que estou começando a perceber é muito importante: uso adequado do contraste.
Olhe para a primeira foto. É um contraste por todo o lado! O céu está claro, o horizonte está escuro, então a grama distante está clara, então o fundo está escuro. O fundo lado a lado varia muito entre extremamente brilhante e extremamente escuro. Tudo isso é não-informação. Desordem visual. As partes importantes reais - os círculos - são abafadas por todas as mudanças de contraste.
Agora olhe para a segunda foto. O fundo é escuro e relativamente monótono. Há uma borda brilhante em todo o campo de jogo. O fundo lado a lado é principalmente escuro, com finas linhas brancas em locais importantes. De repente, você pode realmente ver o quebra-cabeça, porque é uma das coisas mais contrastantes do mercado.
Pessoalmente, eu ainda o ajustaria um pouco - tornaria o campo de jogo mais sujo também. Essas linhas brancas para mostrar as divisões da grade são importantes, mas o cérebro humano é realmente bom em extrapolar características retas, e essas podem ser muito mais escuras e até fragmentadas.
A grande coisa que me tira dessa interface é a barra inferior. É brilhante, está na sua cara e é difícil ler o texto. Essa última parte é importante - a razão pela qual é difícil ler o texto é, novamente, por causa do contraste. Lemos o texto parcialmente procurando a borda das letras, mas infelizmente as letras se combinam bem com partes da barra inferior.
O que eu faria: Reajuste a barra inferior para se ajustar bem ao plano de fundo principal, em termos de contraste. Faça uma borda mais clara entre ele e o plano de fundo principal para entender o fato de que é separado. Então, livre-se da maior parte do texto. "Diamante" pode se tornar um diamante real. "Átomos restantes" podem se tornar uma visão pictórica de alguns átomos. O "tempo restante" pode se tornar uma ampulheta, um relógio de pulso ou um relógio de bolso. "Next" pode desaparecer completamente - você diz "você tem que jogar para ver quais átomos obtém", mas essa é uma mecânica de jogo irritante. Transforme-o em uma pilha de átomos à direita, sentado em uma correia transportadora surrada, com uma pequena pista de maquinário visual para a qual é a próxima na fila. Tada! Quebra-cabeça melhorada, interface melhorada, tudo parece menos confuso.
Se você não precisa usar texto, há duas maneiras de contraste garantia. Primeiro, coloque seu texto em algo com baixo contraste. Se tiver um fundo escuro, use texto claro. Se tiver um fundo claro, use texto escuro. Se você não pode fazer isso (e às vezes não consegue), não hesite em usar o efeito de brilho externo. É uma ótima maneira de fornecer o contraste da borda direita, independentemente do seu texto.
Quando estiver jogando com interfaces, abra um editor de imagens, troque-o para monocromático e tente duas coisas: desfoque e detecção de borda. Quando sua interface do usuário está monocromática borrada, sua visão deve gravitar automaticamente nas áreas importantes. Quando estiver na detecção de borda, as áreas importantes devem ser destacadas. Exemplos:
Compare esses dois. O primeiro é quase ilegível - com certeza, algumas das jóias são visíveis, mas muitas delas não são. No segundo, a grade se destaca instantaneamente, assim como a caixa de diálogo. Embora exista apenas uma jóia no tabuleiro, você pode ver instantaneamente onde ela está.
O primeiro enfatiza massivamente as arestas da grade. Algumas das gemas são quase invisíveis. O segundo enfatiza aqueles ainda (e mais do que eu pessoalmente faria), mas também enfatiza muito fortemente a borda do quebra-cabeça, e a gema é significativamente mais (embora ainda não perfeitamente) visível.
Este método não é uma panacéia de forma alguma, mas pode ajudá-lo a rastrear as coisas que devem ser corrigidas. Lembre-se de que a visão humana se baseia em bordas e contraste e projete sua interface do usuário para ser legível por humanos.
