A versão beta foi lançada dia 17 de Novembro conjuntamente com um inquérito de satisfação. Propositadamente o inquérito foi minimalista e directo para aferir em traços gerais a justeza das opções tomadas nesta versão. Durante esta fase foi recolhido feedback dos utilizadores com o propósito de fazer ajustes finais antes do lançamento.

Feedback recolhido:

A pergunta: "Como classifica a nova Homepage do SAPO quanto aos seguintes tópicos"

Área de notícias, Destaques temáticos, Widgets

Estas três questões incidem essencialmente sobre layouts novos e em alguns casos (notícias) mecânicas de navegação novas. O feedback é largamente positivo sendo que os indicadores de “pior” oscilam entre os 14% e os 16%.
 

A segunda questão incidiu sobre as cores: "Como classifica o novo esquema de cores da Homepage do SAPO?"

Quer pelo feedback interno, quer pelo que foi dado pelos utilizadores através do questionário, conclui-­se que este é sem dúvida o aspecto mais polémico.

Ainda assim, as apreciações negativas ao novo esquema de cores ficam pelos 29%, com 13% neutros e 58% positivos. Interessante é também olhar para alguns excertos das respostas em texto livre que nos são dadas na “caixa de sugestões”. Por norma, esta opção é preenchida por quem não gosta de algum dos aspectos da nova homepage e quer fazer vingar a sua opinião.

Responderam à última questão (facultativa), 29% do universo de utilizadores. Curiosamente, o valor percentual é rigorosamente igual ao número de apreciações negativas ao esquema de cores. Aqui ficam algumas respostas seleccionadas (as mais consensuais entre os que preencheram esse campo)

Prós

• Muito interessante o novo site! Boas cores e carrega facilmente, simples e rápido é o que se quer, bom trabalho!
• Simplificaram drasticamente a página em relação à versão actual. só isso é um excelente passo em frente, na minha opinião. por favor, continuem a apostar na simplicidade das interfaces como veículo para uma navegação eficiente.
• Está mesmo muito bom. Tem um aspecto sóbrio e limpo mantendo uma interface web 2.0.
• Refrescante, ao ponto de o tornar homepage! :)
• Gosto muito da nova homepage. Graficamente está mais apelativa e consigo chegar mais rápido ao que me interessa.
• Está melhor, mais fácil de navegar e um visual mais moderno e funcional

Contras

• Aquele roxo não fica nada bem, piorou mesmo muito.
• Acho a nova Homepage uma lufada de ar fresco, só tenho uma sugestão, acho que deviam de adicionar uma opção com algumas esquemas de cores personalizados, por exemplo tinham 3 ou 4 esquemas de cores e o utilizador escolhia qual o que prefere, uma espécie de opção de temas como aqueles que existem no Gmail.
• A nova pagina esta menos confusa. mas a escolha das duas cores na minha opinião não foi muito feliz, roxo com verde acho que nao combina muito bem.
• MUDEM AS CORES....
• Falta a tab "homem" ...
• Eu usava a barra de canais para ir aos sítios.....(mail, desporto, banca de jornais) agora trocaram-­me as voltas.
• Identifico também algum espaço vazio entre a imagem do sapo.pt e a caixa de pesquisa, dando assim um desequilíbrio ao cabeçalho da página.
• Peço desculpa por ferir susceptibilidades, mas de facto o layout é demasiado "last night". Os cantos arredondados, os gradientes, aquele lilás/roxo/beringela que morre imenso não espelham uma imagem clean, jovem, arrojada, moderna.
   

Da análise exaustiva do inquérito de satisfação resultaram uma série de alterações que efectuámos entretanto.

Destacam-se

• Permitir personalização de cores
• Personalização de widgets (para breve)
• Incluir destaques mobile
• Incluir forma de recolher sugestões para a Tab Radar (façam-no neste blog)
• Abrir o link "Todo o SAPO" na zona inferior
• Alterar o ícone que abre a notícia completa

(entre outros bugs detectados)

O passo final foi a escolha da cor "default" da Homepage. Diz-se que os gostos não se discutem. A equipa prefere a "Cor púrpura". Os utilizadores, em inquérito feito exclusivamente sobre a combinação de cores, revelaram uma relação amor/ódio com essa alternativa. Foi das que mais reacções extremadas gerou.

Deste inquérito sobre cores chegámos a uma shortlist. "Verde claro" e "Cinza claro".

O resultado como vemos é um empate técnico.

Por "default" a Homepage ficou a cinza claro; no entanto quem preferir outra combinação de cores pode aceder à personalização onde tem várias combinações por onde escolher.

Conclusão

À semelhança da versão anterior da HP, este foi um processo longo e metódico em que muita gente participou (inclusive os utilizadores).

Nos próximos meses teremos novidades. A personalização dos widgets é uma delas.

Fiquem atentos.

Nota:

Este é o terceiro e último post com a história por trás da nova Homepage do SAPO.

Se não o fez, leia também a Preparação e os Wireframes e Design

Wireframes e Webdesign

Uma vez feita a análise, ouvidos os utilizadores e identificados os objectivos, partimos para a fase de prototyping, wireframing e webdesign.
Nesta fase procurámos traduzir em elementos na página, as várias conclusões obtidas.

Cada uma das secções foi alvo de análise específica com soluções diferentes. Umas avançaram, outras não como esta para a personalização das tabs

A área de notícias foi naturalmente trabalhada em várias iterações

Tal como a dos destaques...

E chegámos a um wireframe global...

Ao nível do webdesign foram trabalhados os estilos e alternativas de cores. 10 alternativas.

A opção foi no sentido da ruptura com os habituais degradees e tons leves. Se um dos nossos objectivos passa por atingir novos segmentos e faixas etárias, o design deve reflectir isso mesmo. Daí a opção mais ousada e menos consensual. A famosa "cor púrpura". A frase mais ouvida depois da escolha feita foi “ao princípio estranha-­se, mas depois entranha-­se”

Inovação tecnológica


Desde a versão anterior (2006) até hoje, muito mudou. Por um lado os LCDs com maiores resoluções massificaram‐se. Por outro, o advento dos netbooks com écrans mais reduzidos.

Novos browsers, novas tecnologias e o advento do HTML5 foram aspectos determinantes.

Quem trabalha na área Web, sabe bem das dificuldades que existem em criar sites que por um lado sejam tecnologicamente inovadores e por outro mantenham compatibilidade com os diferentes browsers instalados. IE 7 e 6 ainda predominam nos PCs dos utilizadores e as diferenças entre ambos são enormes. Por outro lado, o crescimento de browsers mais seguidores dos standards como o Firefox e os baseados em Webkit é francamente notório.

Apesar de tudo, decidimos apostar no HTML5. Qualquer outra opção significaria que a nova Homepage iria precisar de uma revisão total em menos de um ano. Por outro lado não iríamos tirar partido das inovações entretanto introduzidas.

Naturalmente que isto nos obrigou a um esforço adicional para manter compatibilidade com o IE6. Esperemos que os números deste browser baixem muito nos próximos tempos para descontinuarmos o seu suporte.

Oficialmente, suportamos IE6, IE7 e IE8 (com javascript), Firefox, Safari, Chrome e Opera (com e sem javascript). A maioria dos derivados do Webkit e Gecko também é naturalmente suportada.

A homepage foi montada por forma a ser totalmente acessível. Isto significa que é de uso amigável por screen readers e outros equipamentos para cegos e amblíopes. Na versão final terá a classificação AAA de acessibilidade (WCAG 1.0).

Ao nível do Javascript foram introduzidos vários pequenos detalhes com impacto muito positivo na navegação. Coisas simples como garantir que o botão back (após seguir uma notícia) volta à homepage na TAB correcta, são exemplo disso.

Também é agora possível fazer bookmarks directamente para dentro de uma TAB ao contrario da versão anterior.

Próximo post (e final): Versão beta e inquéritos

Ou veja o post anterior: A preparação

Seguem-se vários artigos que descrevem com algum detalhe todo o processo que culminou no lançamento da Versão 2009 da Homepage do SAPO.

É o trabalho conjunto de várias pessoas ao longo de vários meses. Os vossos comentários são naturalmente bem-vindos.

Introdução

A Homepage do SAPO é desde há vários anos o portal mais visitado em Portugal. Com 85 milhões de pageviews e 32 milhões de visitas por mês, aparece sistematicamente no topo do ranking Netscope com mais do dobro de visitas do segundo classificado.

Esta é só uma das razões pelas quais qualquer mexida na HP é feita de forma ponderada e com um método que, embora seja sempre questionável, obedece a critérios claros e bem definidos.

A HP actual já tinha mais de 2 anos de vida. Desde o seu lançamento foi sendo pontualmente alterada e adaptada à realidade do momento mas já não era possível continuar a fazê-­lo sem desvirtuar os critérios originais da sua concepção. Por este motivo decidimos avançar de armas e bagagens para a construção da nova Homepage do SAPO.

Preparação

Antes de desenhar a nova Homepage era fundamental proceder a uma análise critica da versão actual.
Usámos os seguintes instrumentos para essa análise:

Análise estatística de clicks nas diferentes áreas da HP Heatmaps em equipamento de eyetracking
Inquéritos a utilizadores
Sessões de usabilidade
Brainstorming

Análise estatística

As estatísticas são obviamente um instrumento fundamental na tarefa diária de escolha de destaques. Para tal dividimos a homepage em diferentes áreas de monitorização.

Notícias, barra, pesquisa, acesso, utilitários, comunidade e votações

Cada uma destas áreas é objecto de análise dos clicks efectuados em tempo real. Para tal instalámos na redacção do SAPO vários LCDs que de forma gráfica e leitura fácil apresentam em tempo real os dados estatísticos de clicks das notícias da homepage.

Só assim é possível à redacção medir o sucesso dos destaques e reagir atempadamente às flutuações de notoriedade dos diferentes tópicos do dia.

Os clicks são recolhidos via javascript em tempo real, processados e visualizados através de uma composição em Quartz Composer.

Heatmaps

O SAPO criou recentemente um departamento de Qualidade e Usabilidade. Este departamento foi equipado por forma a ser capaz de fazer testes de eyetracking em equipamento adquirido para o efeito.

Os testes de eyetracking permitem medir o movimento dos olhos na página e aferir o número de fixações do olhar em diferentes áreas, bem como o tempo em que dedicam a cada uma delas. Desta forma conseguimos descortinar as zonas mais “quentes” e as que despertam menor grau de atenção dos utilizadores.

Realizámos testes com dois grupos de utilizadores: visitantes frequentes e conhecedores da estrutura da homepage e utilizadores que raramente visitam a HP do SAPO.

Aos frequentes foi pedido que navegassem da forma que habitualmente fazem no SAPO.

A vermelho, as zonas que tiveram maior número de fixações. Esta análise permite‐nos obter esta imagem reveladora do que os utilizadores realmente vêm.

Aos que mal conheciam a HP do SAPO foi pedido que navegassem livremente pela página sem nenhum direccionamento específico.

Aqui ficam os resultados comparativos

Com base nos testes realizados, chegámos às seguintes conclusões:

• Utilizadores frequentes vão directos à zona de conteúdo que querem consultar;
• Perdem pouco tempo na navegação;
• Pouco uso da pesquisa;
• A secção de Links é “invisível”;
• Maior foco nas notícias;
• Widgets com pouca visibilidade;
• Comunidade com pouca visibilidade;
• Áreas mais visíveis: Notícias, Destaques e Mercado

Inquéritos aos utilizadores

Realizar inquéritos é uma experiência muitíssimo interessante. Por mais análises estatísticas e de eyetracking que se façam, um inquérito respondido pelos utilizadores enquanto usam o seu próprio equipamento nas condições mais diversas imagináveis revela sempre grandes surpresas. Mais do que as surpresas, são interessantes as respostas em texto livre que nos dão.

Ao mudar a HP do SAPO temos em mente objectivos macro bem determinados. O primeiro é naturalmente o de melhorar a experiência dos que nos visitam habitualmente enquanto o segundo consiste em chegar a segmentos em que temos menos penetração.

Em detalhe:

• Obter algumas personas actualizadas a partir de perfis de utilizadores reais;
• Perceber se a opinião dos utilizadores equivale aos números das estatísticas de utilização;
• Quais as áreas mais usadas/memoráveis;
• Quais as áreas menos relevantes;
• O que os utilizadores esperam duma nova HP;
• Quais os hábitos de navegação (1a página);
• Os que não usam a HP, porquê?

Para tal, delineámos dois inquéritos diferentes distribuídos em dois canais de comunicação bem distintos.

Aos frequentes convidámo-los a responder ao inquérito dentro da própria homepage. Aos outros convidámos em sites cuja audiência predominante pertence aos segmentos a que queríamos chegar.

As questões que colocámos aos utilizadores frequentes:

• Dados pessoais (sexo, idade, utilização da internet)
• A Homepage do SAPO é a primeira página que visita quando navega na Internet?
• Com que frequência visita a Homepage do SAPO?
• Classifique os seguintes temas noticiosos por nível de interesse.
  • Últimas
  • Desporto
  • Economia
  • Vida
  • Local
• Classifique os seguintes temas de acordo com o seu interesse.
  • Jogos
  • Música
  • Televisão
  • Cinema
  • Astrologia
  • Bebé e família
  • Conteúdo Mulher
  • Saúde
  • Receitas e Restaurantes
  • Casamentos
  • Agenda/Cultura
  • Livros
  • Conteúdo infantil
  • Ambiente
  • Entretenimento e multimédia
• Quando utiliza a Pesquisa, que tipos de pesquisa faz?
  • Web
  • Imagens
  • Notícias
  • Blogs
  • Produtos
  • Directório
  • Páginas amarelas
• Quais as três áreas que mais usa na Homepage do SAPO?
  • Pesquisa
  • Notícias
  • Destaques
  • Comunidade
  • Mercado
  • Lista de Serviços / Canais SAPO
  • Widgets (Mail, Amigos, Horóscopo, Tempo, Trânsito, Inquérito (perguntas)
• Que acções desempenha com maior frequência na Homepage do SAPO?
  • Pesquisa de Informação
  • Leitura de Notícias
  • Acesso aos Canais da rede SAPO
  • Acesso ao Horóscopo
  • Acesso ao Tempo / Meteorologia
  • Entretenimento
  • Consulta de artigos do Mercado
  • Votação nos Inquéritos o Consulta do Mail
  • Consulta do estado do Trânsito
  • Outra, por favor, especifique.
• Que temas gostaria de consultar/encontrar na área de Destaques
• O que tem a dizer dos destaques de Comunidade? (blogs, fotos, vídeos, spot e links)
• Gostaria de ter opções personalizadas mediante um login?
• Se pudesse remover dois elementos da Homepage actual, quais seriam?
  • Pesquisa
  • Notícias
  • Destaques
  • Comunidade
  • Mercado
  • Lista de Serviços / Canais SAPO
  • Widgets (Mail, Amigos, Horóscopo, Tempo, Trânsito)
  • Outro, por favor, especifique
• Se pudesse adicionar dois novos elementos à Homepage actual, quais seriam
• Gostaria de ver mais conteúdo multimédia? De que tipo?
• Classifique o conteúdo que gostaria de ver na Homepage do SAPO quanto ao seu interesse.
  • Desporto
  • Tecnologia
  • Conteúdos Mulher
  • Entretenimento
  • Humor o Vídeo e Multimédia

Aos utilizadores não frequentes fizemos um inquérito mais generalista sobre hábitos de navegação, mantendo a coerência temática com o outro grupo.

Em pouco mais de 1 semana chegámos às 26000 respostas, o que nos deu uma excelente base para análise.

Os resultados foram revistos à luz das diferentes “personas” que havíamos identificado.

De entre as diversas conclusões a que chegámos, uma sobressaiu. Aos utilizadores, a plataforma A, o serviço B ou o media C não dizem nada. Quem visita a homepage do SAPO está interessado em áreas temáticas muito concretas. Não está interessado em vídeos ou blogs ou multimedia, mas sim em música, ambiente, politica, etc, independentemente de esses conteúdos estarem em blogs, vídeos, notícias ou fotos.

• Utilizadores são muito leais. 90% visita mais que uma vez por dia.
• Mulheres representam 30% de audiência.
• Maiores de 21 anos representam 83.6%.
• Sentem necessidade da pesquisa mas principalmente para Web e Notícias
• Lista de Serviços ocupa imenso espaço e elevada percentagem optava por removê-la. (talvez repensá-la)
• Conteúdo Mulher (obviamente) não é consensual mas é unânime no público feminino.
• Tecnologia e Entretenimento são muito pedidos e não são desinteressantes para muita gente.
• Nas Notícias há um interesse desmesurado nas Últimas;
• Não seleccionar automaticamente o campo da pesquisa

Munidos da análise feita, foi possível organizar um mapa temático para a nova Homepage.
 

Sessões de usabilidade

Fizemos várias sessões de usabilidade em que observámos e entrevistámos diferentes utilizadores enquanto usavam a homepage do SAPO.

Destas sessões foram retiradas as seguintes conclusões:

• Separar mais os conteúdos noticiosos.
• Demasiado texto e pouco espaço em branco;
• Diminuir a altura do header;
• Remover a barra de serviços, fazendo com que ela aparecesse onmouseover (ocupa demasiado espaço);
• Diminuir a largura da barra de serviços;
• Permitir adicionar conteúdos personalizados/personalizar a homepage;
• Alterar a cor dos links, demasiado azul em toda a página;
• Os links para as tabs de notícias aparecem repetidos na barra lateral. Remover da barra lateral;
• Widgets têm um aspecto pouco profissional, parecem mais direccionadas para crianças do que para adultos;
• Remover a publicidade;

Sessões de brainstorming

Optámos por limitar o número de participantes nestas sessões. Pela nossa experiência passada, sessões demasiado alargadas serviam para nos desfocar do verdadeiro objectivo. Invariavelmente acabávamos por discutir pormenores em vez do “big picture”. Estiveram presentes 7 ou 8 pessoas de cada vez, representando todas as áreas do Portal: editorial, comercial e técnica.

O mote das sessões era simples: pela nossa experiência pessoal enquanto utilizadores, autores, técnicos ou comerciais, analisar de forma critica e aberta todos os aspectos da homepage actual, destacando o que achávamos que havia corrido bem e identificando o que estava mal. Daqui resultaram alguns pontos chave:

A nossa percepção do que estava a correr bem

• A criação de áreas temáticas noticiosas separadas por tabs
• Dinâmica de destaques noticiosos com ligações a notícias próprias do SAPO ou a parceiros
• A tab “Vida” em especial em que os conteúdos “Fama” tiveram grande preponderância
• Dinâmica de especiais e logos SAPO personalizados
• Destaques de blogs
• Separação clara entre espaços de conteúdos e de publicidade
• Área de votações
• Espaço PT no topo com as marcas do grupo
• O Widget do mail e do tempo

A nossa percepção do que estava menos bem

• Ausência de solução para destaques de novos canais na rede
• Falta de flexibilidade e “real estate” na zona de destaques
• Ausência de áreas próprias de entretenimento e multimédia
• Demasiados automatismos em algumas áreas de destaque
• Ausência de enquadramento editorial para os destaques de comunidade
• Falta de qualidade de alguns destaques de conteúdos da comunidade
• Os widgets de de Messenger e trânsito
• A personalização de cores foi raramente usada
• A resolução de 800x600 já não se justificava pois 96% dos utilizadores eram capazes de ver a página a resoluções iguais ou superiores a 1024x768

 Próximo post desta série de 3: Wireframes e Webdesign

Após meses de preparação, estudo e implementação, ficou hoje no ar a nova Homepage do SAPO, versão 2009.

Ao longo dos próximos dias iremos mostrar com grande detalhe todo o processo desde a fase de análise e inquéritos até à versão final que hoje foi lançada.

O blog da Homepage terá também uma dinâmica renovada. Com a introdução de novas tabs, nomeadamente a tab "Radar", iremos estar especialmente atentos às vossas sugestões de pequenos excertos de textos do Twitter ou comentários em blogs, que achem dignos de destaque.

Podem fazê-lo usando os comentários deste blog.