A interface do usuário tipográfica é um novo conceito de design, cuja filosofia é expressa em três palavras: a
interface é texto.Até recentemente, todos os conceitos de interface do usuário
(exceto para a linha de comando) pode ser entendida pelo design das formas dos elementos usados na interface. Estamos falando das formas de botões, menus, janelas e outros quadros. A aparência de qualquer interface do usuário foi inteiramente determinada pela visualização dessas mesmas formas, e o estilo da interface foi determinado apenas pelas abordagens da imagem dessas formas.
UI natural
Clássicos do gênero - estilo iOS. A aparência dessa interface é determinada principalmente pela forma dos ícones. O cânone de pintura de ícones do iOS é que a imagem do formulário simboliza ao máximo o conteúdo interno. Você vê a lente - significa que após o clique em que a câmera inicia, a engrenagem - significa dentro da configuração. Isso é semelhante ao realismo pictórico acadêmico: o que vejo é o que escrevo. Aparência corresponde ao conteúdo, a partir de pinturas rupestres. Somente a técnica da imagem é aprimorada, o realismo é aprimorado.
O grande Malevich chamou esse estilo de arte do selvagem: "Que vergonha ..." e o encorajou fortemente a abandonar: "O mundo da carne e dos ossos deve ir".
Kandinsky
Malevich não é o único revolucionário que desafiou a arte clássica. Também vale a pena notar o camarada Kandinsky, o fundador da arte abstrata. Como o abstracionismo não passou por cima dos produtos da direção da interface do usuário, vamos nos aprofundar nisso com mais detalhes.
Kandinsky não chegou ao abstracionismo de uma só vez, sofreu por muito tempo, pensou. Mas o trabalho dos impressionistas o levou à conscientização. Em particular, o trabalho de Monet "Haystack".
Cores não naturais, que não são encontradas na natureza, afetaram a percepção mais forte que as cores naturais. Kandinsky entendeu: se você pode abandonar as flores naturais, por que não ir além e não abandonar as formas naturais? Mudança realista para abstrato.
UI abstrata
A interface do usuário clássica pode ser considerada design Metro. Em contraste com a pintura de ícone natural do iOS, existem alguns azulejos coloridos diferentes.
Conscientemente, como Kandinsky, ou não, mas os desenvolvedores do conceito Metro passaram da natureza para a abstração. Provavelmente, isso é um acidente, caso contrário, o mercado estaria cheio de muitos exemplos dessa construção de interface do usuário. Por exemplo, círculos coloridos ou pílulas de Damien Hirst ficariam bem.
O conceito de abstracionismo no design de interfaces de usuário atualmente não é totalmente divulgado. Podemos dizer que os desenvolvedores do Metro só abriram as portas para um mundo novo, mas outros não têm pressa em usá-lo. É tudo sobre skeuomorfismo. Profundamente enraizado na mente dos desenvolvedores, ele não permite que essa porta seja aberta, uma vez que eles simplesmente não a veem à queima-roupa, isso não é natural para eles.
Vale a pena remover os antolhos e sair do barranco profundo, onde nada é visível, exceto a bunda natural do "camelo, carregado de lixo diferente" e criar esse barranco - à medida que novos mundos se abrem - de formas abstratas a mórbidas formas e mundos de informação pura.
Design disforme
O abstracionismo no design em comparação com o naturalismo é, obviamente, um movimento em direção ao minimalismo. Mas a que limites alguém pode ir continuando esse movimento? Quais são os limites da interface do usuário mínima? É possível abandonar completamente o formulário e o que permanecerá no final?
O caso extremo da interface do usuário mínima é de um pixel, não pode ser menor. Suponha que nossa interface do usuário consista neste pixel. Depois de clicar neste pixel, alguma função deve ser executada. Agora, vamos colocar nossa interface do usuário sobre o conteúdo, o que geralmente acontece, e tirar as imagens da obra-prima de Monet como conteúdo.
Como Veja nossa interface do usuário? Não ?! Mas ele é! O pixel é tão pequeno que se fundiu com o plano de fundo e não pode fornecer um nível aceitável de comunicação para uma pessoa. A interface de pixel pode ser adequada para robôs, mas não para humanos.
Portanto, a interface gráfica do usuário deve ser maior que um pixel. Mas quanto? Enfim, onde está a linha do minimalismo, depois da qual perdemos a possibilidade de comunicação normal?
Para tentar encontrar essa linha, sugerimos que você mude do tamanho máximo possível da interface do usuário para o mínimo, cortando tudo que for desnecessário ao longo do caminho.
A área máxima da interface do usuário é limitada à área de trabalho. Considere como a imagem máxima da interface do usuário, que ocupa 100% da tela. Tomemos a mesma obra-prima de Monet como tal imagem. E deixe que alguma função seja executada quando você clicar no palheiro.
Como você pode ver, o usuário não recebe nenhuma informação informando o que precisa ser feito para executar a função. Embora a área funcional da interface do usuário - pilha - represente quase um terço da tela, o usuário não conhece essa funcionalidade, não há nenhuma pista. Há muita informação visual, mas não está claro como interpretá-la.
No nosso caso, a interface do usuário máxima em termos de capacidade de transmitir informações úteis para a comunicação é comparável à mínima de um pixel. É tudo sobre entropia.
Quanto maior a entropia, menos o usuário entende o que está acontecendo. Caos. O fluxo visual é grande, mas vazio, toda a quantidade de informações transmitidas é dispersa. A eficiência é baixa. Quanto maior a entropia da interface do usuário, menor a eficiência da interface.
Entropia, ou indicador de incerteza da interface do usuário, é um indicador condicional, individual para cada um, pois é uma característica da percepção. Por exemplo, uma interface feita em cores que os daltônicos não conseguem distinguir terá uma grande entropia para eles, diferente de outras pessoas. É possível determinar a entropia da interface do usuário apenas empiricamente.
Mas voltando ao exemplo em que a interface do usuário é feita na forma de uma imagem ocupando 100% da tela. Basta escrever uma explicação no lugar certo - e a situação está mudando radicalmente.
Imediatamente ficou claro onde colher. Com esta inscrição, reduzimos acentuadamente a entropia. Não há nada mais específico que o texto.
Se, ao mesmo tempo, você descartar a própria imagem (formulário) e deixar apenas o texto, a qualidade da comunicação não será alterada, mas, ao mesmo tempo, a interface utilizará apenas alguns pixels da tela alocados para a inscrição. A interface do usuário lapidária, maior sua eficiência.
A imagem de Monet na interface é inútil. Embora seja uma grande obra de arte, essa não é uma razão para empurrá-la em todos os lugares. Quem quiser olhar para Monet irá à exposição, comprará um livro com reproduções ou assistirá a um documentário.
Da mesma forma com outras formas, por exemplo, ícones. Se os ícones com texto carregam as mesmas informações úteis para comunicação que o texto sem ícones, por que deixá-los? E daí? Para promover as criações de designers para as massas? Mas acima, nós justificadamente recusamos esse próprio Monet, apontando que a interface não é uma galeria de imagens.
Fixamos o que foi dito com um exemplo. Como conteúdo do plano de fundo, usamos as mesmas pilhas e, como interface do usuário, consideramos duas opções - com ícones na forma de círculos Hurst com texto e apenas texto.
Opção 1No primeiro caso, há uma sensação de mau gosto. A adição de duas obras-primas não oferece mais, mas menos. Esta regra funciona ao sobrepor quaisquer imagens. Isso é bem conhecido por quem trabalha com interfaces criadas sobre o conteúdo (por exemplo, em IPTV). Em casos extremos, a interface pode usar desenhos de contorno, que em essência podem ser considerados hieróglifos.
Opção 2A segunda opção com uma interface de texto textual parece melhor, mas a composição é prejudicada pela distribuição uniforme do texto. Esse estado na física é chamado de morte térmica. Mas a questão é corrigível, o problema pode ser resolvido de várias maneiras: movendo ou transformando as inscrições (seguindo o exemplo de como Kandinsky arrastou um ponto do centro para obter um novo som para a composição - ele chamou a posição no centro de um ponto silencioso) ou usando a animação (você precisa ser extremamente cuidadoso para evitar convulsões de epilepsia). Nos dois casos, as composições sem som de equilíbrio são perturbadas, aparece uma tensão positiva, que é claramente capturada pela percepção humana.
Como mostrado abaixo, todas as informações são agrupadas e ocupam um espaço mínimo, deixando ao usuário o direito de contemplar o conteúdo quando a interface do usuário está ativada. Este exemplo também mostra como, devido ao deslocamento, você pode selecionar o elemento selecionado, fixando a seleção com uma hashtag adicional.
Opção 3Compare isso com a opção 1. Veja quantas informações desnecessárias nos livramos sem perder informações, e quanto mais fácil a interface parece.
O texto na parte superior do conteúdo se assemelha à capa de uma revista brilhante, onde uma fonte selecionada corretamente, combinada harmoniosamente com a imagem, forma um todo. Se você tentar, poderá contar com o efeito da ressonância, quando o efeito da percepção do resultado da sobreposição de texto no conteúdo for várias vezes maior que o individual.
A interface do usuário sem formulários, consistindo apenas de texto, é uma tendência ousada do nosso tempo. Além disso, uma interface que usa uma linguagem baseada em alfabeto é mais mínima que pictogramas. A versão para robôs é a interface do usuário usando código binário.
Livre-se de formulários com informações gráficas desnecessárias que parasitam a atenção do usuário, cortam tudo desnecessário, enviam o formulário para a lixeira, fazem apenas o texto. A arte da caligrafia e da tipografia ajuda você. Daí o nome do conceito - UI tipográfica.
Agora, a tarefa de criar uma interface é reduzida para criar a composição desejada do texto na área de trabalho. Além disso, a mesma solução de composição pode diferir significativamente em termos de impacto visual no usuário devido à seleção de combinações de fontes. As fontes desempenham o papel de cores, definem o humor e o estilo. A caligrafia é a principal ferramenta do artista nessa interface.
Não há soluções universais adequadas para resolver todos os problemas. Não existe Santo Graal, isso é uma consequência dos teoremas da incompletude de Gödel e do teorema de Tarski sobre a inexprimibilidade da verdade. Mas na classe de interfaces para gerenciar a exibição de conteúdo, nossa abordagem é capaz de executar qualquer trabalho.
A UI tipográfica nasceu na ARES enquanto trabalhava no projeto IPTVPORTAL. TIPOGRAFIA - chamamos nossa interface de usuário para assistir televisão interativa. Foi demonstrado pela primeira vez no CSTB-2018.
PS
Para quem não encontrou a interface do usuário no 1º pixel. Dica.
Exemplos
