Design minimalista. Uma estratégia visual à usabilidade


Se é certo que os usuários tem notável impaciência em relação ao tempo gasto de
navegação, para achar a informação que procuram, e se é certo que usuários tem insistência em gratificação imediata, do que lhe é fornecido, seja em sites B2C, portais ou blogs, a usabilidade deve ser bem planejada, pois ela governa a web.

Usabilidade exige clareza na arquitetura da informação, que exige qualidade visual e interface organizada. Sabendo disso, o estilo minimalista é uma estratégia visual, no
sentido “deconstrutivimismo”, onde através dos traços, objetos e cores, dá-se a devida importancia para o que é relevante ao usuário, excluindo tudo aquilo que pode ser irrelevante, dentro do contexto.

A aplicação do estilo minimalista na interface web, organiza a informação, de modo como elas devem ser interpretadas. Para cada propósito e segmento de mercado, o design cuida da aparência, como um sistema eficiente baseado na interface projetada ao usuário. Assim, onde a meta é disponibilizar informação de maneira eficáz e rápida, o sistema tem de permitir uma perfeita intereção com o usuário, que posteriormente deve levar consigo a satisfação pelo serviço prestado.

Pegamos como base de entendimento, o portal Terra

Terra

Sob uma breve análise de interface, podemos constatar que o Terra mantem um padrão visual; ícones, objetos, tipografia e cores. No estilo retangular arredondado, cada bloco possui os mesmos valores (tons e corpo de fonte), também nos banners de publicidade. Os blocos encontram-se posicionados por nível de importancia de conteúdo: navegação, publicidade, categorias/notícias em destaques, últimas notícias etc. Porém, fica devendo em Web Standards. Também, não passou no validador do W3C.

Como segundo exemplo, Yahoo Brasil

Yahoo

O Yahoo também mantém uma identidade, mesmo não mantendo no padrão, os botões e menus, por exemplo. Usa tons leves e de cores frias, como o azul e turquesa. Tem um design minimalista no estilo “quadradão” (bastante utilizado nos portais gringos). Na ordem de importância de informação, mantém as notícias em segundo plano, dando desque à s tags Yahoo. É fácil a localização no portal. Não foi possível validar no W3C. Deve em Web Standards.

Apesar de se falar tanto em Web Standards, podemos constatar que nem todos estão realmente seguindo os padrões, em favor à correta visualização nos demais dispositivos.

Em relação ao design das páginas iniciais do Yahoo e Terra, é possível perceber a diferença entre simplicidade e complexidade. O Yahoo mantém esse padrão minimalista, desde seu surgimento.

Deixando um pouco de lado os portais, peguemos dois blogs, como exemplo:

Kibe Loco

Kibe Loco

Layout não tem identidade. Há poluição de elementos na imagem de cabeçalho. O uso do tom amarelo (cor quente) foi trabalhado com objetos quadriculados que causam uma irritação; tenção. Há desorganização visual, na área dos artigos. Percebe-se que o Antonio Tabet não se preocupa com aparência, e sim com conteúdo, que é a questão relevante, do blog. Também não passou pelo validador do W3C.

Google Underground Blog

Google Underground Blog

Design minimalista, no padrão Google com tons claros e frios. Diferentemente do Kibe Loco, há organização de informação. Layout no estilo 3 colunas, com blocos de conteúdos, a interface organiza a área visual. Na lateral esquerda, encontra-se os links e bloco de anúncios. No centro, os artigos são visualizados em bloco, destacando como menus, “comentários”, “del.icio.us” e “E-mail”. Na lateral direita, encontra-se “Selos”, “Destaques”, “Mais buscados” etc. Não passou pelo validador.

Estes são exemplos básicos, de como um site deve ser bem projetado, para que ofereça aos usuários o que tem de especial e mais relevante, usando a interface projetada para servir como uma plataforma desenhada, especificamente para ser funcional e causar satisfação ao usuário/leitor.

Não se pode esquecer: design envolve gosto pessoal. Cuidado para não decepcionar seu target, usuário/leitor.

[tags]design, css, webdesign, usabilidade, webstandards, w3c[/tags]

Tema Portal WordPress - PortalPress


22 Responses to “Design minimalista. Uma estratégia visual à usabilidade”

  1. zidani

    Parabéns pelo post Thalis.

    Eu acredito que o design interfere bastante. Eu gosto deste tipo de layout simplista como o do Google. Acho que o orkut também entra na lista de sites com layout minimalista, não é?

    Dá pra juntar conteúdo com design

    Reply
  2. Felipe Ranieri

    Assim, acho bem legal a preocupação em desenvolver conforme as web standards, senti falta de um DOCTYPE no terra hehe por exemplo, mas também acho que validação não significa muita coisa, alias, quase nada se levarmos em consideração a semântica do código fonte. Validador não verifica semântica.
    Quanto a arquitetura, gostei das suas analises, foram bastante relevantes.
    Bastante interessante o seu post 🙂

    Abraços!

    Reply
  3. Romullo Pontes

    Thalis, gostei muito do seu blog e especialmente deste post. Escreveu muito bem sobre a interação entre o design e o código da página. Eu, sinceramente, não ligo muito para esta questão de deixar o cógido certinho, apesar de achar correto e reconhecer que melhora e muito o tempo de carregamento das páginas.

    Parabéns pelo blog. Abraço!

    Reply
  4. thalisvalle

    Felipe, pois é, só o fato de o terra não ter um DOCTYPE, já mostra que o todo poderoso não está muito preocupado com Web Standards. A impressão que eu tenho, é que eles fizeram essa migração de estrutura apenas pra dizer: olhem, também somos tableless.

    Romullo, valeu! ganhei um novo leitor. Seja bem-vindo. rs

    Reply
  5. Felipe Ranieri

    Pois é. Não duvido disso Thalis, mas acho que a “culpa” não deve ser da empresa em si, eu não acho que os cartolas do Terra estão preocupados com código, eles querem é o portal no ar, então eu (se fosse desenvolvedor do terra) faria o código certinho, pois certamente não houve uma pessoa que disse: olha, não quero um doctype declarado na minha página hehehehe.

    Falows!!

    Reply
  6. Igor Escobar

    Como diz Henrique Costa Pereira ( Revolução.etc.br ), Antes um site com semântica correta e bem estruturado do que somente validado.

    Validado = Escrito corretamente, o que não quer dizer muita coisa.

    Não estou dizendo que Seguir os padrões é besteira, só estou dando enfase ao site que se preucupa com a semântica e estrutura do seu código do que um código “escrito” seguindo os padrões da W3C.

    Reply
  7. Carlos Eduardo

    Gostei de sua análise. Breve, mas bem objetiva.

    O site KibeLoco tem um potencial muito grande, pois é bastante visitado, mas realmente, o visual deixa muito a desejar.

    Se eles possuem um tráfego grande, desta maneira, imagina com um visual mais trabalhado e conteúdo mais bem organizado? Poderia virar um verdeiro portal sobre os assuntos que ele aborda… =)

    Reply
  8. thalisvalle

    Felipe,
    você tem razão em dizer: “certamente não houve uma pessoa que disse: olha, não quero um doctype declarado na minha página”. Normalmente equipe de SEO e gestão de negócios nem sabem disso, se não souberem se comunicar com os desenvolvedores.

    Igor,
    também tens razão. Está dentro dos padrões e adequado semanticamente falando, quem investe em SEO. No Brasil é difícil, mas os gringos investem. Até Yahho. Por isso minha análise mostrou que eles estão devendo, não somente na escrita mas na semântica.

    GL,
    com certeza. Eles querem capital.

    Carlos,
    se o Kibe Loco tivesse um site diferenciado, esteticamente falando, o sucesso seria maior. Eu mesmo me sinto irritado ao visitar o site, por causa da “tosquice” aguda.

    Reply
  9. Patricia

    Oi, Thalis,

    muito interessante este teu post. O Yahoo está com um design novo, ainda não carrega “oficialmene”, mas você já pode optar por usá-lo ao invés deste que você colocou o print-screen no seu post. Eu gostei bastante, embora ainda esteja me adaptando a ele e ? localização das coisas – estava bem acostumada ? distribuição de links e informação anterior – mas já estou usando o design novo. O Yahoo sempre foi minimalista, optando por páginas leves que fossem carregadas rapidamente. Inclusive, eu tive a oportunidade de trabalhar fazendo campanhas no Yahoo e, já muitos anos atrás esta era uma prioridade para eles: os banners precisavam ser enviados com um limite de kbytes tal que, quando adicionados ? página, não somassem de forma a ultrapassar o limite máximo de kbytes que cada página deveria ter. Por isso o Yahoo sempre foi rápido.

    Me incomoda um pouco o visual do Terra – e também o do UOL – mesmo depois do redesign relativamente recente. A gente se acostuma, claro, mas a idéia da usabilidade é exatamente tornar a coisa intuitiva, o usuário não deveria ter que se acostumar com nada. No UOL e no Terra, o conteúdo briga com a publicidade, ambos evidentemente prioridades para os portais e nós, usuários, que estamos lá pelo conteúdo, acabamos nos acostumando a olhar seletivamente para o conteúdo, tentando ignorar a publicidade. Nesta tentativa, tudo o que não é conteúdo parece estar simplesmente poluindo nossa visão periférica. Mas aí já é outro assunto, meu ponto é que muito embora a usabilidade, webstandards, etc, sejam ideais no mundo do design, muitas vezes a realidade comercial se sobrepõe a estes ideais.

    Por isso é tão impressionante ver como o Google consegue ser tão bem-sucedido ao unir usabilidade e interesses comerciais, sem que um entre em detrimento do outro. Sim, eu sei que é um modelo de negócios diferente e que eles não vivem de notícias e conteúdo editorial, mas ainda assim, fazem um excelente trabalho em termos de usabilidade.

    Nossa, isso está virando um post! rs

    Parabéns pelo texto. 🙂

    Reply
  10. Patricia

    Ah, sim, e o “design” do Kibe Loco prejudica muito. No meu caso, chega ao ponto de me tornar resistente a visitá-lo. É feio, carregado, lento, poluído, cansativo aos olhos… Merecia um redesign caprichado. 🙂

    Reply
  11. Dudu Figueiredo

    A questão dos Padrões Web na sua relação de sites, é um tanto relativa, por exemplo o terra, o uol e o yahoo, tiveram ultimamente uma significante melhora no código, mas ainda pecam em um ponto ou outro, mas tenho certeza que eles tem seus motivos. E o fato de não passar em validação, é insignificante.
    Gosto de suas análizes de interface.

    Reply
  12. Ciro Feitosa

    Bem interessante a análise sobre Usabilidade.

    Concordo com a Patricia sobre o Kibe Loco. Evito visitá-lo, uma vez que trás cansaço visual.

    Só pra fixar, o Yahoo lançou sua nova home, ainda com foco em acessibilidade (Padrões Web). Mas podemos notar uma simplicidade ainda maior no acesso aos serviços.

    Abraço.

    Reply
  13. thalisvalle

    Patricia, pêna que o Tabet é “meio” tapado, em relação ao design… Muito bom seu comentário. rsrs

    Dudu, obrigado pelo comentário. Seja bem-vindo.

    Ciro, estou muito feliz em vê-lo aqui no meu blog. Tenho adicionado no bloglines, o seu blog a um bom tempo, e admiro bastante o seu trabalho. Seja bem-vindo.

    Joares, Seja bem-vindo!

    Fifa pathc, is very cool to know that somebody from Germany in my blog

    Reply
  14. thalisvalle

    Marcos, se você ler novamente o artigo, verá que eu não classifiquei o terra como minimalista. Abraços

    Reply
  15. Vanessa

    Bom Dia !!

    Esse conteúdo é bem bacana, apartir desse exemplo consigo ver imagens minimalisticas em outras propagandas imagens enfim, muito bacana.

    Gostei parabens !

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>