Pagina inicial » UI / UX » Flat 2.0 e como resolve os problemas de usabilidade do Flat Design

    Flat 2.0 e como resolve os problemas de usabilidade do Flat Design

    Design plano tem sido em torno desde a década de 1950, quando o estilo tipográfico internacional foi desenvolvido. Nos últimos tempos, ganhou grande popularidade desde o lançamento do novo design metropolitano focado em geometria e tipografia idioma, inicialmente no novo Windows Phone em 2010, depois no Windows 8 em 2012.

    Design plano é caracterizado pela falta de efeitos tridimensionais e elementos visuais brilhantes a fim de alcançar limpeza, minimalismo, e clareza. Isso vai contra o estilo de design predominante anteriormente, o skeuomorphism que faz uso de botões brilhantes e ilustrações imitando objetos 3D da vida real.

    O design plano visa essencialmente simplificar os websites, aumentar o foco no conteúdo, oferecer interações mais intuitivas e proporcionar uma experiência de usuário mais rápida e funcional. Também é fácil usar seus elementos simples em forma de caixa e layouts baseados em grade para um design responsivo.

    Problemas de usabilidade do design plano

    Enquanto o design plano nos oferece uma tremenda ajuda e um excelente kit de ferramentas para fornecer a nossos usuários sites rápidos e sem bagunça, ele pode causar certos problemas de usabilidade, especialmente quando é usado em demasia..

    Nenhum significante visual de clicabilidade

    Se usarmos efeitos tridimensionais, isso naturalmente dá uma ilusão de profundidade aos nossos projetos. Isso ajuda os usuários rapidamente encontrar elementos interativos, aqueles que podem ser clicados (como botões e ícones) ou preenchidos (como campos de formulário). Uma das principais preocupações sobre o design plano é que torna difícil para os usuários reconhecer elementos clicáveis.

    Antes da era plana, os web designers geralmente indicavam clicabilidade usando soluções visuais como gradientes, texturas, bordas elevadas ou sombras para fazer com que os botões e outros objetos clicáveis ​​pareçam ser pressionados.

    O design plano não possui esses significados visuais e precisa resolver a mesma tarefa com um conjunto de ferramentas muito menor: cores, formas, proximidade, e elementos contextuais.

    Por que isso é um problema? Vamos tentar um experimento.

    Veja esta imagem abaixo. Tente adivinhar quais elementos são clicáveis ​​com base nessa captura de tela. Não são aqueles em que você pensaria primeiro. Podemos encontrar muitos outros problemas de usabilidade semelhantes em toda a web.

    Descoberta reduzida por causa de nenhum eixo Z

    As pessoas na vida real encontram objetos e se movem em três dimensões: os eixos x, y e z. Quando eles se deparam com um site plano e minimalista, sem efeitos 3D, eles obtêm uma experiência diferente do que estão acostumados, com o que estão familiarizados.

    Isso significa que eles precisam use mais esforço para descobrir relacionamentos entre objetos, e entender a hierarquia visual do site. Por exemplo, precisamos passar mais tempo na página inicial da Rede de Desenvolvedores da Microsoft para decodificar visualmente as informações e a finalidade dos diferentes elementos no site..

    A regra geral no design UX é sempre tentar minimizar a carga cognitiva do usuário para maximizar a usabilidade. Como podemos ver em muitos casos, isso nem sempre acontece com o design plano.

    Baixa densidade de informação

    O design plano também foi criticado por arriscar a baixa densidade de informações pelo especialista em UX Nielsen-Norman Group.

    Em suas críticas à usabilidade do Windows 8, eles usaram exemplos de aplicativos da Windows Store e o site do Los Angeles Times para mostrar os problemas que baixa densidade de informação (tendo poucas histórias na tela inicial, manchetes sem resumos, agrupamento pouco reconhecível, etc.) pode causar do ponto de vista de usabilidade.

    Em outro aspecto, menos informações também podem ser vistas como remover distrações, permitindo que os usuários se concentrem apenas em coisas importantes, mas se o minimalismo for exagerado, pode facilmente sacrificar o objetivo principal de um site, ou seja, transformar informações para os espectadores.

    A ascensão do plano 2.0

    À medida que mais e mais designers reconhecem as falhas de usabilidade do design plano, uma nova versão mais madura surgiu, chamada “Flat 2.0” ou “Quase plano” desenhar. Enquanto a mudança do skeuomorfismo para o plano era radical, a evolução do design plano é muito mais evasiva.

    O novo estilo ainda é plano, mas adiciona um pouco de tridimensionalidade de volta para os projetos na forma de sombras sutis, destaques, e camadas. O Flat 2.0 - se bem usado - pode corrigir os problemas de usabilidade acima mencionados, trazendo de volta um pouco de realismo (skeuomorphism) e adicionando profundidade e detalhes, mantendo as vantagens do minimalismo, como sites otimizados, clareza e tempo de carregamento de página mais rápido.

    IMAGEM: Cavalheiros Dapper

    Design material

    A nova linguagem de design do Google, chamada Material Design, é provavelmente o exemplo mais notável do estilo Flat 2.0. O Google lançou o Material Design com o Android L em 2014. Embora o Material Design mantenha as principais características do design plano, ele usa certas metáforas da física para ajudar os usuários a encontrar rapidamente analogias entre o mundo real e o mundo digital.

    Design de material usa o eixo z, dá profundidade sutil para o design, e inteligentemente faz uso de camadas por separando-os com sombras e animações. O Google tem uma descrição super legal sobre como ele funciona e vale a pena lê-lo para entender seus principais princípios e regras.

    Conclusão

    Como bons designers sempre buscam melhorar a experiência de seus usuários, a indústria de web design está em constante mudança. Design plano substituiu o skeuomorfismo rapidamente, resultando em layouts minimalistas baseados em grade e elementos simplistas que ultimamente invadiram a web (isso gerou algumas conversas sobre o design da web se tornar chato ou até mesmo morrer, mas não poderia estar mais longe da verdade).

    Flat 2.0 dá respostas aos problemas percebidos do design plano. É um compromisso inteligente entre funcionalidade, estética e usabilidade. Claro, não precisamos usar os kits de Material UI em toda parte, mas entender a filosofia por trás disso pode nos dar uma base sólida sobre como desenvolver nosso próprio estilo de acordo com as últimas descobertas em design de experiência do usuário.