english   italiano   español
 
4 June 2012
  • Imprimir   | EN| ES

    Princípios De Design Da Informação Para A Web 2.0: Seja Simples E Social

    Trabalhar em design na web hoje em dia requer princípios sadios de alavancamento de boas técnicas de informações testadas ao mesmo tempo em que se aumenta o nível de interação e componentes "sociais" a oferecer aos leitores.

    be-simple-be-social-engage-them.gif
    Capa do livro "Don't Make Me Think", remixado por Robin Good - Crédito da foto: Steve Krug - Amazon

    A onda da Web 2.0 tem, aparentemente, trazido relevante inovação no design, na forma de bordas arrendodadas, cores pastéis, botões em 3D brilhantes com relevo , imagens em espelho e legendas grandes e muitas outras funcionalidades que os designers começaram a adotar e tomaram para si, dentro desse novo jeito mais simples, mais impactante visualmente e fortemente legível que é o estilo de comunicação 2.0.

    Mas as diferenças entre esses enfeites 2.0 e a verdadeira inovação no design é a habilidade que os arquitetos da informação e os web designers têm de orquestrar com muito talento as múltiplas formas de interação e fidelização que os novos serviços e tecnologias 2.0 vieram oferecer: navegação multi-dimensional, favoritação social, busca de comunidades, sugestões e comentários de leitores, contribuições e conteúdos gerados pelo usuário, componentes de vídeo e chats, notícias populares, e muito mais.

    É nessa direção que os designers da informação devem mirar no futuro: partir da simples organização visual básica de elementos para entrar no domínio da simplicidade de técnicas sociais onde a leitura, a contribuição e a troca dos elementos de informação sejam coreografados de forma a torná-los sinergéticos e participativos.

    Intro por Robin Good

     






    Design da Informação Para a Nova Web

    por Ellyssa Kroski

    O design da informação na web mudou.

    As pessoas estão mudando a maneira de consumir informação online e também a forma como esperam recebê-la. A natureza social da rede traz consigo uma expectativa de interação com a informação e design moderno.

    Agora existem formas alternadas de navegação que incluem navegar por usuários, nuvens de tags, abas, etc. Avanços na tecnologia e mudanças nas expectativas do usuário estão afetando a maneira com que a informação se apresenta em uma página web.

    Os sites de hoje tentam focar em interfaces usáveis que evoluem continuamente em resposta às necessidades do usuário. Os designers abordam o tema de modo diferente e tentam desenvolver designs simplificados, sites interativos que incorporam os avanços de interface, filosofias atuais da rede, e as necessidades dos usuários.

    O design da informação para a nova web é simples, social e abraça novas formas de navegação.



    Simplicidade

    Simplicidade em Aplicações da Rede

    Em seu artigo Paradox of Choice (paradoxo da escolha), Barry Schwarz aborda a questão da tirania das pequenas decisões e como a proliferação das decisões em nossa sociedade precisa do investimento significativo do nosso tempo, ansiedade, dúvida e medo para assuntos triviais.

    Ele também questiona a razão pela qual gastamos um dia inteiro para comprar uma calça jeans hoje em dia.

    E explica que esta sobrecarga de escolhas pode nos causar frustrações que nos transformem de pessoas que tomam decisões cuidadosas em pessoas que simplesmente pegam qualquer coisa dentro de um turbilhão de opções que passam pela nossa frente o tempo todo. Todo mundo já teve essa sensação com a rede e com outras aplicações da informática, assim como na vida cotidiana.

    O design das aplicações atuais da web está sendo conduzido por um princípio de simplicidade.

    Designers de aplicações estão criando softwares com menos funcionalidades e com uma curva de aprendizado mais baixa para os consumidores finais. A funcionalidade incluída é a que realmente se precisa, nada além disso. Redes sociais incluem funcionalidades como perfis, que são essenciais - mas não incluem informações sobre a previsão do tempo ou a cotação do dólar, por exemplo.

    Os dias das aplicações cheias de funcionalidades já estão acabando. Os programas de software atuais dão mais poder ao usuário, pois não precisam de um manual de uso, são simples e intuitivos. Não é preciso instalar os softwares e, em muitos, o compromisso de ter que registrar-se para testá-lo não é necessário. É um modelo de serviço faça-você-mesmo que mune as pessoas apenas com o que é necessário e nada mais.

    Esta filosofia de mais é menos é encontrada na produtividade das ferramentas atuais, como o Google Docs e as planilhas eletrônicas (antigamente conhecidas como Writely), e os 37 Signals’ Writeboards, entre muitas outras aplicações da rede. Novos buscadores verticais, como o Healia, vasculham apenas um setor da rede, o que os torna superiores semanticamente dentro de um nicho específico, enquanto aplicações como adição social de favoritos, compartilhamento de fotos, e ferramentas para compartilhamento de vídeos brigam por excelência para tentar propiciar serviços de qualidade aos consumidores finais. Este novo tipo de site é guiado pela singularidade da proposta e pela simplificação da funcionalidade.



    Simplicidade no Design

    A nova tendência de simplicidade nas funcionalidades de aplicações web se espelha no design e no estilo das páginas de internet de hoje em dia. Enquanto se tentava publicar a maior quantidade possível de informação e, de preferência, "na parte superior da dobra" da página, atualmente os designers estão se aventurando em eliminar tudo o que não for necessário ao mesmo tempo em que exibem uma interface limpa e simples para os visitantes. Tentam fidelizar a atenção dos usuários direcionando o seu olho para o que é importante, em vez de tentar prover-lhes com todo o tipo de recurso que existe.

    Muitas das novas mudanças de design na web têm tido a influência de tendências de estilo de interface da Apple e do Mac OSX. Um léxico moderno de design foi desenvolvido para a rede e se estabeleceu como sendo design com propósito, e não apenas design por si só.

    • Design Centrado – Como não precisamos mais nos preocupar se a página está sobrecarregada de adereços, conseguimos dispor a informação em um tipo de orientação limpo e centrado. Esta escolha no design também tem a ver com praticidade porque acaba sendo muito mais compatível com vários tamanhos e resoluções de telas.



    • Bordas Arredondadas – A tendência atual é de arredondamento das bordas, até mesmo para as fontes - sem apresentar nada duro ou muito reto. É um reflexo da atitude informal e do tom casual da internet de hoje em dia.



    • Fontes Sans Serif e em Caixa-Baixa – Para ficar harmonioso com o tom casual da atual internet, e com a tendência de bordas arredondadas, existem vários tipos de fontes sem serifas (sans serif) nos novos sites. Da mesma maneira, utiliza-se a caixa-baixa, especialmente em logotipos para transmitir uma idéia de conforto e casualidade ao usuário.



    • Fontes Grandes – São frequentemente usadas por novos sites para indicar conceitos principais ou conduzir, através do negrito, uma mensagem simples e clara sobre o propósito do site ou o que seria o seu "discurso de elevador".



    • Navegação Simples e Pesistente – A navegação dos novos sites deve ser distinta e óbvia, separada do conteúdo e do corpo da página. Na maioria das vezes, está situada no topo. É persistente no sentido de aparecer em cada página por todo o site.



    • Logos em Negrito – As novas aplicações da rede tendem a ser audaciosas e seguras e por esta razão, os logos das empresas que representam trazem as suas marcas em negrito.



    • Cores Fortes – São usadas pelos sites atuais para enfatizar conceitos importantes, assim como para distinguir as áreas das páginas entre si.



    • Cores Complementares – Sites modernos tendem a não ser monocromáticos, mas ricos em cores. Muitas páginas novas estão utilizando cores complementares como o azul e o laranja e tons de amarelo e roxo para enriquecer o seu design.



    • Uso Sutil de 3D – Você não encontrará efeitos em 3D ou ilusões de ótica gritantes nos sites de hoje, e sim um uso sutil de sombreamento, gradientes, e superfícies espelhadas que agreguem uma terminação realística à interface.



    • Superfícies Reflexas – A tendência de criar o efeito reflexo ou uma superfície espelhada pode ser encontrada em muitas páginas recentes, geralmente ao redor de um logotipo.



    • Ícones Simples – Por causa da natureza genuína das novas aplicações da rede, existe pouco estoque de fotografias para se usar. No lugar dessas imagens de marketing que mostram pessoas apertando as mãos, aparecem ícones que representam ações que podem ser interpretadas pelo usuário.



    • Espaços em Branco – Designers de sites andam mantendo um layout simples, bem zen, através do aumento na altura das linhas e da adição de muitos espaços em branco nas páginas. Em vez de abarrotá-la com excesso de informação, estão se concentrando no que é essencial e produzindo páginas limpas e refrescantes.



    • Balões-Estrela – Estas formas animadas que explodem estão muito em voga nos sites atuais. É possível encontrá-las por toda a rede, e são utilizadas, na maioria dos casos, para promover e destacar um serviço gratuito.




    Avanços nas Interfaces do Usuário

    Além de nos estilos do design, tem acontecido uma série de avanços recentes nas interfaces para os usuários que têm transformado a rede em uma espaço simples de se utilizar.

    AJAX - representou uma verdadeira revolução na interface que permite o processamento da informação sem a atualização da página. Tal avanço trouxe consigo várias novas habilidades para o design de páginas web.

    Abas Grandes - Desde que se tornou possível clicar nas abas sem ter que atualizar a página inteira, os designers têm aprimorado o uso delas.



    Arrastar & Soltar – A funcionalidade "arrastar e soltar", que o AJAX tornou possível, permite criar experiências ricas e interativas para os usuários. Muitas das aplicações pessoais iniciais da atualidade usam esta função que permite arrastar widgets para dentro de um espaço customizado.



    AutoComplete – Preencher formulários nunca foi tão fácil desde o surgimento do AutoComplete (também possibilitado pela linguagem AJAX), através do qual os desenvolvedores dos sites podem dar sugestões de palavras a ser mostradas quando o usuário digita em um campo.





    Mapas – Poucos anos atrás, era ridículo pensar que se pudesse combinar qualquer informação a um mapa do mundo e permitir que o visitante desse um zoom para ver o nível da rua ou até mesmo acessar a uma foto de satélite da região. No entanto, o mapeamento de regiões tem se tornado um lugar-comum e parte integral da experiência do usuário de hoje em dia. E já é uma funcionalidade que se espera encontrar nos sites.





    WYSIWYG – Não é mais necessário saber mexer com HTML para gerar conteúdo online. Os blogs, as páginas wikis, os sistemas de gerenciamento de conteúdo, e outras aplicações com base na rede já estão propiciando o surgimento de aplicações do tipo "what you see is what you get" (WYSIWYG - que significaria algo como "o que se vê é o que existe"), que imitam uma interface ao estilo do Word para a criação de conteúdo.





    Previews – Os visitantes já não precisam mais clicar em um termo e acessar uma nova página para descobrir o que há nela. Com aplicativos como o Snap, é possível mostrar previews de todos os tipos de links.





    Social

    Existem pelo menos duas tendências emergindo do novo conceito de design de páginas na atualidade e, crescentemente, há cruzamento entre os dois.

    A Socialização das Mídias e das Aplicações

    Tem surgido na web uma tendência de socialização de coisas que não são de natureza social, em princípio, como por exemplo, notícias, relatórios e posts, tanto quanto o são livros, fotos, vídeos e textos. Isso se estende às aplicações da rede, tais como projetos de gerenciamento colaborativos como o Basecamp, aplicações de compartilhamento de documentos, como o Google-Docs & as Planilhas Eletrônicas, e muitos outros. Junto com essas mudanças, surge uma expectativa entre os usuários que agora pensam que poderão interagir com todo tipo de informação que encontrarem pela rede. Essas novas tendências e expectativas precisam que as interfaces de hoje incluam uma linha base de funcionalidades sociais.

    Fazer Comentários – visitantes já não são leitores passivos, tem postura ativa e querem se juntar à discussão e agregar a sua opinião.



    Dar Notas e Fazer Análises – Notas e análises são habilidades que estão se tornando rapidamente requisitos de sites com produtos e mídias sociais.



    Enviar Para um Amigo – Designers experientes permitem que os seus membros façam o marketing por eles, dando-lhes ferramentas de envio de artigos, vídeos, fotos e produtos para os seus amigos.



    Compartilhar - O usuário da atualidade é colaborativo e espera encontrar aplicações, documentos, calendários e outras ferramentas de criação online que sejam compartilháveis com uma equipe.



    Assinar – Quando os visitantes e um site descobrem uma coluna, artigo, post, vídeo ou pessoa que interessam a eles, sentem vontade de assinar e acompanhar a fonte no ato.



    Salvar – Usuários multi-tarefa esperam poder favoritar artigos para ler mais tarde, assim como vídeos engraçados e salvar outros tipos de conteúdo online com o seu próprio serviço de favoritação, usando apenas um clique.



    Websites não podem mais ser ilhas - os visitantes querem encontrar pontes por toda parte. Não basta fornecer conteúdo atraente e de qualidade se não propiciar formas de conectar-se com a comunidade global que agora é a rede.



    O Que os Outros Andam Dizendo? – Quando os leitores encontram uma notícia interessante, querem saber o que os outros estão dizendo sobre o assunto. Isso é possível usando serviços como o SphereIt, entre outros.



    Compartilhar Descobertas - Quando os visitantes encontram novas notícias, listas de "os dez mais", ou posts controversos, eles querem ter a possibilidade de compartilhar as suas descobertas com o mundo, e ter o devido crédito em redes sociais, como o digg.



    Criar Coisas Novas – Existem milhares de mashups na rede atualmente porque usuários avançados gostam de remixar conteúdos únicos através de seus APIs ou feeds RSS.

    O design dessas ferramentas sociais básicas precisa ser simples, de fácil acesso, e estar visível. Não basta os usuários saberem que podem ir ao del.icio.us para favoritar um artigo ou um post, os leitores esperam que o link esteja bem ali, na base do artigo. Não deveria ser necessário clicar para ver os comentários. Para ser eficientes, as ferramentas precisam estar à mão.




    O Social Pelo Social

    Além de sites que socializam mídias e aplicativos, existem aqueles que são sociais apenas por essa mesma característica. Tais sites tratam de conectar pessoas e construir comunidades. São as redes sociais, como o Orkut, MySpace, Facebook, e o Ning. O componente primário destes sites é o perfil do usuário em volta do qual a navegação e a atividade acontecem. A sua interface também precisa de uma linha base com funcionalidades sociais.



    Perfil dos Usuários – O ingrediente principal de qualquer rede social é o perfil do usuário que pode ser feito à mão para combinar com a sua personalidade.



    Listas de Amigos – De que adianta se juntar a uma comunidade social se você não fizer amigos? As listas de amigos permitem criar a própria rede social de conexões e exibi-la para o mundo.



    Comentários – São deixados de usuários para usuários. São os alertas, os recados no muro deixados no perfil de uma pessoa.



    Comunicação – Parte integral de qualquer rede social e é um meio pelo qual comunicar-se com os demais membros de um sistema de mensagens interno, e-mail, IM ou chat ao vivo.



    Assinar – Assim como em sites de mídia social, os membros de uma rede social esperam encontrar ferramentas que permitam assinar os perfis de seu interesse.



    Grupos – Estas subcomunidades dentro de um eco-sistema social permitem a associação entre um grupo focado de mesmo interesse, profissão ou característica definida.



    Ferramentas de Expressão Pessoal – Redes sociais populares trazem ferramentas para a criação de conteúdo, como diários e blogs, assim como a possilidade de carregar fotos, vídeos, slides e widgets de todos os tipos.



    Semelhante ao que acontece em sites de mídias sociais, estas redes têm um design fácil, à mão e óbvio para os usuários.




    Navegação Alternativa

    Os designers atuais estão abraçando caminhos alternativos para a informação. O modo antigo fazia com que o usuário acessasse um site e navegasse nele da forma como o desenvolvedor acreditava que eles deveriam ver o mundo. Agora, os sites oferecem caminhos alternativos e orgânicos para a navegação de um conteúdo que esperam ser mais eficaz. Muitas dessas novas formas tratam de dar ao visitante ferramentas para que façam descobertas por si só, enquanto outras trazem uma representação visual do que é importante, oferecendo ao usuário multi-tarefa, louco por tempo, uma seleção instantânea de informações.





    Pelo Usuário - Já não basta apenas encontrar a informação, as pessoas têm vontade de explorar umas as outras e encontrar seus pares. Este tipo de navegação é natural em redes sociais, onde o propósito principal é conectar-se com os demais membros.



    A Nuvem de Tags – Esta é uma taxonomia complementar ao vocabulário controlado criado por designers, que é orgânico para o usuário das comunidades. Não há instruções para essa ferramenta intuitiva que é clicável e frequentemente escrita em fonte sans serif.



    Os Top – Incluir listas de os mais populares, os mais buscados, os mais recentes, os mais comentados, os mais votados e os mais enviados por e-mail propicia uma forma de escanear o que é mais importante dentro de uma comunidade a qualquer instante. Ainda há espaço aqui para o trabalho dos designers em trazer as principais funcionalidades para estas listas.



    O Zeitgeist – É um container para a maioria destas listas de tops assim como para nuvens de tags que permite dar uma olhada na cultura e na personalidade de uma comunidade.



    Informações Relacionadas – Nem todos os caminhos para a informação precisam levar a um conteúdo dentro do mesmo site. Navegar agora passa a tratar de tecer para dentro e para fora dos sites e de fontes que dêem ao visitante o conteúdo relevante. O SphereIt, assim como ferramentas customizadas, podem fornecer esta funcionalidade.



    Mapas de Calor – Sites como o CrazyEgg e o Summize estão usando mapas de calor como ferramentas visuais para ajudar os usuários na navegação e no encontro de informações selecionadas.



    Mapas de Relacionamentos – O Digg Labs está experimentando representações inovadoras, interativas e visuais de informação com o Swarm, Stack, e o BigSpy.



    Ferramentas de Tempo– Nos sites atuais, os visitantes podem até viajar no tempo e navegar temporariamente pela informação.



    Mapas – Colocar camadas de informação em um mapa, especialmente com o acesso aos mapas do Google e do Yahoo! é uma habilidade lugar-comum dos novos sites, como forma de navegar pela informação. É crucial principalmente para sites de e-commerce com sedes físicas.



    Widgets– Dispositivos são outra forma de navegar por sites. São dados agregados customizados em um só lugar que permitem a navegação através deles. Sites já não são simplesmente uma vitrine de textos, mas aplicações que contêm outras aplicações.



    Mashups – Usuários estão criando a sua própria forma de navegar através da informação, remixando conteúdos de diferentes serviços para criar novas aplicações.






    Princípios de Design da Informação Para a Nova Web

    • Seja Simples - Inclua apenas funcionalidades necessárias e exiba um design limpo e eficiente.
    • Seja Social - Vá de encontro às expectativas dos usuários através de conexões com ferramentas sociais.
    • Ofereça Navegação Alternativa – Abrace caminhos alternativos para a informação, incluindo ferramentas visuais.




    Novas Filosofias da Rede

    • Evolua – Os desenvolvedores de hoje não têm medo de tentar o novo. Não há resposta certa e as coisas não precisam ser milimetricamente calculadas.
    • Seja Ágil – Responda aos avanços tecnológicos e necessidades do mercado. Esteja disposto a abandonar idéias ruins.
    • Seja Aberto – Desenvolva dispositivos API e widgets para os seus usuários – ou eles o farão por você.




    Referências




    Artigo original de Ellyssa Kroski, publicado pela primeira vez em 2 de abril de 2007, sob o título "Information Design for the New Web" para InfoTangle.



    Sobre a autora

    Ellyssa_Kroski.jpg

    Ellyssa Kroski é uma bibliotecária da Columbia University e consultora independente da informação. Tem trabalhado com informação e tecnologias para a internet há mais de 10 anos e oferece serviços em treinamento da tecnologia, desenvolvimento de conteúdo, escrita, palestras e habilidades estratégicas para tecnologias da rede e bibliotecas.

    Ela dá seminários sobre desenvolvimento profissional em Nova York e é membro da Library Honor Society. Também tem um MLIS pela Long Island University. Já publicou obras no campo da ciência bibliotecária e é palestrante em eventos e congressos nacionais. Está escrevendo um livro para a editora Neal-Schuman sobre Web 2.0 e bibliotecas.

    InfoTangle é onde ela publica artigos de seu interesse, sobre tecnologias emergentes, Web 2.0, informação, e bibliotecas.

     
    Comentários dos leitores    
    blog comments powered by Disqus

     

     


     

    Feed RSS de Notícias Diárias

     

     

    Curated by

    Publisher MasterNewMedia.org - New media explorer - Communication designer

     

     


    Real Time Web Analytics