Wireframe, documento cada vez mais importante

Como a etapa final do nosso trabalho é a criação de wireframes, postamos essa matéria que fala sobre a importância deste documento:

O primo pobre do layout é fundamental para o trabalho do arquiteto de informação porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.

Aliado ao sitemap, o wireframe é um documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação, apesar de não ser (e nem pretender ser) uma régua de estilos para o layout e a criação das páginas de um site, como é erroneamente interpretado por muitos webdesigners.

Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo.

Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade.

Além desta função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e sistema. Como as etapas de uma compra online, por exemplo, que vão da busca pelo produto, escolha de um dos resultados, confirmação de intenção, preenchimento do cadastro e opção de pagamento.

Para cada um destes passos de compra deve haver um wireframe que explique detalhamente todas as possibilidades de interação e o caminho percorrido pelo usuário.

Principais elementos de um wireframe

Na construção do wireframe o arquiteto busca representar esquematicamente todos os elementos que compõem a página. Imagens, textos, formulários, flash, mecanismos de busca são representados por variações gráficas de elementos similares - como quadrados e círculos, traços contínuos e pontilhados, palavras em negrito e sublinhadas, largura e altura das páginas - padronizados para todos os wireframes da documentação.

Para evitar descrições alongadas, que geram mais confusão do que entendimento, vamos diretamente analisar dois wireframes da home do Webinsider que foram construídos apenas para ilustrar as diferenças entre um trabalho mais aberto (com baixo detalhamento) e outro com guidelines mais definidas e marcações pré–estabelecidas pelo arquiteto.

Wireframe com baixo detalhamento (abre janela nova do browser).

O primeiro é um documento superficial, de baixo detalhamento e pouca influência no trabalho dos designers e das demais equipes do projeto. Ele traz apenas uma marcação de blocos de conteúdo.

Wireframe com alto detalhamento

Já o segundo modelo apresenta alto grau de detalhamento dos componentes da página e utiliza vários elementos gráficos para representá–la. Este modelo de wireframe é muito útil no desenvolvimento de um site e também em sua documentação posterior, para futuras consultas. Além, é claro, de valorizar o trabalho desenvolvido pelo arquiteto.

É só observar atentamente o segundo wireframe e já nos propomos algumas questões que envolvem as competências de um arquiteto de informação, tais como conhecimentos básicos de design, tecnologia, programação e redação.

É claro que o arquiteto não tem a obrigação de ser um especialista em cada uma destas disciplinas. Entretanto, o conhecimento dos principais conceitos de cada uma delas sem dúvida alguma enriquece o wireframe e apresenta à equipe de produção um projeto bem melhor resolvido e passível de implantação.

Usabilidade

Outro ponto de importância na construção de um wireframe é o que toca na questão da usabilidade. Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não cabe ao arquiteto, até por ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura. Fazemos análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico, apenas para que os envolvidos neste trabalho e os usuários por eles selecionados possam checar a eficiência do site em atender as expectativas do público alvo.

Porém o arquiteto pode contribuir com a usabilidade de um site no momento em que está construindo os wireframes, ao evitar conteúdos redundantes e sobreposição de conteúdo, além de layouts complexos ou links escondidos. O arquiteto deve prever em sua documentação alguns procedimentos de auxílio ao usuário do site, como maior rapidez de obtenção de resultados, supressão de etapas intermediárias, controle sobre o modo de exibição do conteúdo, menus e links sempre visíveis, padronizados e inteligíveis, entre outros detalhes.

Identidade e Marca

Por fim, é na construção do wireframe que o arquiteto vai garantir que todas as páginas mantenham uma unidade gráfica, padronizada e uma presença de marca relevante para o patrocinador do site, o cliente.

Um website raramente é uma ação isolada de uma empresa na tentativa de se comunicar com seu clientes, prestando serviços ou vendendo diretamente seus produtos. É muito importante que o site esteja, graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada nas demais ações na internet e mesmo nas mídias off–line, como jornais, revistas, TV, outdoors, ponto–de–venda etc. É claro que este envolvimento com a marca deve ater–se também ao respeito pelas características do universo digital e o objetivo individual de cada projeto, conjugando unidade e autonomia de atuação.

Alguns riscos e vantagens do wireframe

Riscos

– Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos conceitos mais básicos da AI, sentindo–se assim mais confortáveis em aprovar layouts de designers, por serem peças com grande impacto gráfico.

– Acomodar a equipe de criação de modo que os designers, por falta de tempo hábil ou insegurança, não mais inovem em seus projetos e sigam as indicações do wireframe à risca.

– Por não ser desenhado na exata escala em que será construído o site, pode gerar desencontros de entendimento da relevância de cada elemento na composição da página e seu impacto de visualização.

– Necessita de tempo, educação e insistência de uso até tornar–se corretamente entendido pelos profissionais envolvidos nas etapas de cada projeto.

Vantagens

– Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes.

– Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.

– Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas.

– Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade.

Principais softwares para construção de wireframes

Você pode criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos, porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função:

Visio
QuarkXPress
InDesign.

Fonte: Leonardo Oliveira

REFLEXÃO SOBRE A PRÁTICA DA PESQUISA EXPERIMENTAL

REFLEXÃO SOBRE A PRÁTICA DA PESQUISA EXPERIMENTAL

A escolha do tema rede sociais para o projeto experimental foi baseada nas discussões entre os participantes do grupo, assim como no interesse que o assunto tem gerado em nossos meios comunicacionais.

Inicialmente, foi cogitada a produção de uma rede mais ampla, que envolvesse a comunidade em sua forma mais geral, abordando a cidade de Belo Horizonte e seus cidadãos. Contudo, devido às particularidades metodológicas necessárias a um bom trabalho de pesquisa, foi definido que se levasse o estudo para o segmento universitário. De modo a fechar o foco no público envolvido com assuntos acadêmicos. Poderia estar comprometido o resultado, em função do tempo disposto para conclusão do trabalho e a possibilidade de executá-lo com melhor acuidade, se o mesmo fosse abordado de forma mais ampla e geral.

Falar sobre redes sociais já se mostrava um obstáculo a ser vencido, pois apesar de ser um tema que foi alvo de muitos estudos e publicações teóricas importantes, não existem muitas reflexões que analisem as redes sociais na internet, que é o objetivo final deste trabalho experimental. O segundo obstáculo seria a construção de uma rede social, mas não uma rede com as propostas já existentes, a meta seria oferecer novidades para os usuários. Depois de longas discussões e reflexões sobre as redes sociais e suas influências na comunidade estudantil, percebeu-se o espaço oportunamente encontrado para o desenvolvimento de uma rede social que envolvesse as atividades acadêmicas sociais e de entretenimento, com foco centrado no usuário inserido nas atividades universitárias.

À medida que os estudos evoluíam, perceberam-se características relacionais do usuário no que diz respeito à sociedade de consumo e seu papel como colaborador na web 2.0, o que foi moldando os rumos do projeto.

Todo o projeto foi detalhado passo a passo, pesquisas foram feitas para que a cada etapa a idéia do trabalho fosse sendo amadurecida. Toda essa junção trouxe diversas perspectivas que auxiliaram no desenvolvimento, indicando os caminhos a serem percorridos para que esse projeto fosse de importante valor ao campo da comunicação. Decisões antes tomadas foram sendo lapidadas e reconstruídas no percurso.

Análises e pesquisas de campo foram feitas para demonstrarem a relação entre o referencial teórico e os dias atuais. A análise das redes sociais (Ebah, Twitter, Facebook, Orkut, Myspace e Linkedin), ocorreu com o intuito de não só entender ferramentas, tipos de interação, publicidades aplicadas, mas que também fosse entendido o que havia de elementos bem aceitos e os não tão bem receptivos por usuários dessas redes. Estas análises ajudaram a definir quais as ferramentas eram bem aceitas, o melhor layout e a forma de apresentação que se adequasse à rede que se propôs construir. Realizou-se também uma pesquisa, onde os usuários respondessem a um questionário, informando seus gostos e desejos sobre as redes das quais fizessem parte. Na análise das respostas percebeu-se que a rede YOUP estava no caminho certo em sua formulação.

Com toda a rede planejada para os universitários como público alvo, o objetivo é promover a interação entre os usuários da rede social YOUP se valendo das informações obtidas no processo de análise e pesquisa realizadas. Para isso, diversos autores foram estudados como mostra a fundamentação teórica. Sendo que alguns relatados abaixo tiveram maior relevância.

Todos os autores foram de grande importância, mas no primeiro momento foi necessário entender como as redes surgiram desde o século XX, começando com Manuel Castells, que já pensava uma sociedade em rede, e Raquel Recuero, ajudando a entender as interações e apropriações das redes já existentes. O grupo percebeu como as redes se originavam e como as pessoas se apropriavam delas. Isso possibilitou o entendimento sobre a importância de um assunto específico para a rede, tal como a escolha de seu público alvo.

Através do livro de Alex Primo (2007), “Interação Mediada por Computador”, foi-se entendido ainda a forma pela qual se trabalharia a estruturação da rede quanto ao layout e às ferramentas que possibilitariam as interações, tornando a rede viva.

Ao tomar os assuntos citados acima como ponto de partida, o grupo entendeu as redes online como um espelho do offline, onde os indivíduos se conectam pelos mesmos motivos que conhecem pessoas no seu cotidiano. Com a evolução da web 2.0 e a nova forma de socialização na internet, deu-se espaço para as interações e, consequentemente, expansão das redes sociais. Percebeu-se ainda, que a rede é viva e que os usuários da mesma têm a opção de interação e ação como bem determinarem.

O estudo da cibercultura possibilitou o entendimento da cultura em rede e de como ela se projeta.

Teve como baliza os textos de Felipe Memória na aplicação de seus estudos para execução dos wireframes, e a objetividade pregada por Steve Krug, no que se refere à usabilidade e navegabilidade necessárias a um bom projeto website. Avaliaram-se os aspectos que promoveriam tais interações, como wireframes, logomarca, cores e etc. com a finalidade de atender às necessidades dos usuários.

A construção dos wireframes foi baseada na pesquisa qualitativa sobre as redes e nas respostas aos questionários. Seu layout foi elaborado, pensando-se nos signos representativos do universo acadêmico, para que a rede ficasse ainda mais caracterizada para este público.

Cada passo do estudo e análise deste projeto proporcionou aos integrantes do grupo um repertório, que os capacitou a elaborar o trabalho de criação da rede social YOUP, como objeto de estudo do campo da comunicação.

A criação da rede YOUP veio preencher uma lacuna nos meios comunicacionais utilizados na internet pela comunidade acadêmica, proporcionando uma grande satisfação e suprindo a carência de um canal interativo eficiente e com grandes desdobramentos na prática evolutiva e nos estudos da comunicação social.

Biz Stone, Co-fundador do Twitter quer criar rede social de notícias

Biz Stone, co-fundador do popular microblogs Twitter, está ansioso para usar a vasta quantidade de informação que seus usuários compartilham no serviço para criar uma rede social de notícias.

Uma rede de notícias do Twitter não seria operada pelo site, necessariamente, mas seria uma parceria entre o serviço de microblogs e diversas outras organizações de notícias, e seria um serviço aberto, segundo Stone.

‘Desde o começo, parece um terminal de notícias de todos os cantos do mundo’, disse Stone à Reuters Television nos bastidores de um evento de tecnologia em Oxford.

‘Creio que o Serviço de Notícias do Twitter será algo muito aberto e compartilhado por diversas organizações de notícias em todo o mundo’, afirmou.

Os 174 milhões de usuários registrados do Twitter enviam cerca de 95 milhões de mensagens de até 140 caracteres por dia para o microblog.

O site já compartilha as informações publicadas por seus usuários com os sites de busca Google, Yahoo e Bing, da Microsoft, mas Stone diz que imagina que outras organizações de notícias irão buscar um acesso mais especializado aos dados.

Redes sociais nos levarão a jornalismo mais honesto

Opinião é do editor de interatividade e mídias sociais na BBC News, no MediaOn

As redes sociais podem contribuir para um jornalismo mais transparente. Esse é o pensamento de Matthew Eltringham, editor de interatividade e desenvolvimento de mídias sociais na BBC News, que participou, nesta quarta-feira (10), do painel "Quem pauta quem e quem consome o que? - Mídias sociais x sites de jornalismo: a caça do furo e do leitor", no MediaOn 2010 - Seminário Internacional de Jornalismo Online, em São Paulo.

Para Eltrigham, nos sites de redes sociais como Facebook e Twitter os usuários exigem um jornalismo mais transparente. "As redes sociais nos levarão a um jornalismo mais honesto. Elas exigem transparência e prestação de contas. Sempre haverá alguém que sabe mais sobre o que você está dizendo", diz o editor, que apresentou ainda dados sobre o site da BBC e as mídias sociais. Segundo ele, usuários passam 1 minuto no site e 11 no Facebook. "Se você não estiver lá, estará perdendo audiência", sintetiza.

O painel, mediado por Silvia Bassi, publisher do IDG Brasil, contou também com palestra de Julian Gallo, jornalista argentino especializado em tecnologia e meios interativos.Gallo apoiou a interação com as mídias sociais, mas alertou que o bom jornalismo precisa investigar e duvidar de tudo o que é dito nas redes sociais. Para ele, os mecanismos para chegar a veracidade de uma informação são muitos, mas às vezes é um feito complicado. "Existem informações que são impossíveis de ser verificadas. É preciso ter senso comum sobre quais são as fontes confiáveis", opina.

Na quinta-feira (11), a partir das 9h30, começa o terceiro e último dia do MediaOn 2010, com o painel "O humor e o jornalismo digital", que falará sobre o papel do humor para engajar o público na Web e as técnicas utilizadas por humoristas para deixar os conteúdos mais palatáveis. O evento continuará tendo transmissão ao vivo pelo site oficial. A programação completa pode ser vista aqui. Acompanhe também os tweets sobre o MediaOn. JW.

Redes sociais atraem os holofotes

O fenômeno, que reúne crescente número de usuários na internet, atrai a atenção de fabricantes com o objetivo de integrá-lo às plataformas de comunicação empresarial.

De acordo com estudo da ComScore, em um ano, houve um aumento de 23% do número de usuários das redes sociais na internet. Facebook, Orkut e Linkedin são apenas alguns exemplos de serviços de colaboração e troca de informações entre os usuários na internet.

Mas e as empresas? Será que além de monitorar a postagem de informações a respeito das suas marcas, querem utilizar o recurso como plataforma de comunicação? A resposta, na opinião de quem trabalha noite e dia para manter acesa a chama da inovação tecnológica é positiva e já começa a ganhar corpo.

Do lado das próprias redes sociais, o Facebook abriu a segunda-feira desta semana com a informação de que planeja lançar (ainda sem data definida) um ambiente unificado de email, SMS e chat. A resposta do lado corporativo foi imediata. A Cisco apresentou na terça-feira, soluções para telepresença, colaboração e integração de redes sociais.

O certo é que as redes sociais estão atraindo os holofotes de todos os cantos, porque tem grande e crescente volume de usuários. O estudo da ComScore indica que 945 milhões de usuários únicos utilizaram as redes sociais somente no mês de julho de 2010. Um aumento de 23% ao ano, pois no mesmo período do ano passado a cifra se fixava em 770 milhões.

Dada a penetração em número de usuários, os Estados Unidos lideram o ranking confortavelmente. Atualmente mais da metade do país, ou seja, 174,429 milhões de pessoas, utilizam as redes sociais, frente aos 131 milhões registrados em 2009 – aumento de 33%.

A China é o segundo país com maior número de usuários no ranking da ComScore, com 97,151 milhões, embora não haja dados comparativos do ano passado. Seguindo em terceira posição, vê-se a Alemanha, que conta com 37,938 milhões de pessoas nos sites de relacionamento, ou seja, 47% a mais do que em julho de 2009, quando registrou 25,743 milhões.

No entanto, o país que apresentou maior crescimento de acesso nas redes sociais, no último ano, foi a Rússia, com alta de 74%, passando de 20,245 em 2009 para 35,306 em 2010. O Brasil possui um número de usuários únicos parecido, com 35,221 milhões e 47% de alta – em 2009 havia 23,966 milhões conectados.

Curioso é o caso da Índia, que, pela primeira vez, teve o Facebook enraizado como a rede social mais popular do país, com 20,873 milhões de usuários únicos. Até o momento, o dominante da região era o Orkut, com 19,871, um site do Google que não teve a mesma popularidade no resto do mundo, com exceção do Brasil.

Livro: Não me faça pensar! - Steve Krug

Livro usado na nossa fundamentação teórica:

O livro é uma verdadeira obra-prima de como explicar a aplicar conceitos de usabilidade da forma mais simples, rápida e eficiente possível. Steve Krug usa uma abordagem de bom-senso e consegue transmitir os ensinamentos de uma forma agradável e bastante divertida.

Como o nome do livro diz, a primeira grande lei da usabilidade aplicada em projetos web é não fazer o usuário pensar. Cumprindo essa lei, as chances de seu projeto obter sucesso e garantir retorno para quem nele investiu crescem exponencialmente. Parece simples (e de fato é), mas não é fácil.

Em rápidas 127 páginas, o autor nos ensina como o bom senso é o principal item na hora de projetar a filosofia de design centrado no usuário. Krug dá dicas sobre como projetar páginas para serem vistas e não lidas, como cortar palavras desnecessárias, como pensar a navegação e a recuperação de informações. Ele vai além, ensinando como fazer testes de usabilidade baratos, como lidar com as diversas opiniões de um time multidisciplinar na web.

Depois de ler o livro, tivemos uma noção bem mais clara sobre princípios de projeto web.

Livro Como Escrever na Rede: Manual de Conteúdo e Redação para Internet

Livro usado na nossa fundamentação teórica:

Escrito pelo jornalista carioca Leonardo Moura, é um manual de redação para quem pretende escrever e atuar na internet. O livro narra a evolução da grande rede e do mercado de jornalismo on-line, descrevendo conceitos e dicas de adaptação de texto para divulgação de notícias e venda de produtos. A idéia é mostrar como editar, escrever e preparar o conteúdo para Web. E o mais importante: como falar direto com o público que se pretende atingir. É um dos melhores livros já escritos na categoria do On-line.