10
Fev 12
publicado por ivogomes, às 11:30 | comentar | ver comentários (37)

O MEO Kanal surgiu há um ano e meio como uma simples ideia de poder dar aos clientes uma forma de partilharem os seus conteúdos na televisão criando um canal no MEO.

Essencialmente, poderiamos fazer upload de vídeos e fotos e esse conteúdo estaria disponível em qualquer box MEO, bastando aceder ao canal respectivo com o comando.

Como ideia, ficámos logo entusiasmados com o projecto, o conceito de base é brutal, mas cientes que seria um desafio complexo porque teríamos de adaptar conceitos de edição de vídeo, normalmente usados por profissionais e utilizadores mais avançados, e torná-los acessíveis ao máximo de utilizadores possível e com diferentes níveis de utilização.

O desafio principal: como é que podemos fazer com que os utilizadores possam criar uma grelha de programação para o seu canal?

Ainda com as especificações pouco ou nada definidas, juntámos as equipas de Usabilidade e de Design do SAPO e começámos a trabalhar em esboços do que poderia ser o interface de gestão e programação dos canais.

Tínhamos o objectivo de criar um serviço em que fosse possível criar um canal no menor número de passos possível, tendo sempre em conta o modelo de negócio e sabendo que fazer upload de conteúdos em vídeo (e em HD) é sempre uma tarefa que pode demorar tempo suficiente para quebrar o ritmo do processo de criar um canal, upload e encoding.

No meio deste "workflow" o uso de um interface tipo timeline parecia-nos ainda mais complexo, podendo rapidamente levar um utilizador a perder-se no meio de tantas opções e configuração, quando, por exemplo, ele só queria partilhar um conjunto de fotos com a família.

Testámos timelines horizontais, timelines verticais, timelines mistas... Etc...

Os primeiros testes foram sendo desenhados com papel e lápis.

 

Olhámos para a forma como outros softwares de edição de vídeo (ex: iMovie, Final Cut Pro) mostram os conteúdos e tentámos aplicar a mesma filosofia tendo por base os nossos próprios requisitos, ou seja, teríamos que contemplar uma programação diária (para cada dia da semana) juntamente com uma programação em playlist (apenas 24h seguidas de vídeos, sem horários). Teria também de ser fácil alternar entre os dois tipos de programação.

E tudo isto teria que funcionar no browser, em HTML.

Exemplo da timeline do iMovie

Pegando nos vários exemplos de timelines analisados, optámos por uma timeline mista (ao estilo do iMovie) porque não seria prático ter uma timeline horizontal (ou vertical) com 24 horas de programação sem que isso obrigasse a fazer um scroll imenso. 

Com uma timeline mista conseguimos reduzir bastante a quantidade de scroll e no caso da programação horária, cada linha iria corresponder a uma hora do dia (ou dependendo do nível de zoom, iria corresponder a um período definido do dia).

Depois, já com estas ideias consolidadas, começámos a desenvolver os wireframes.

E logo de seguida surgiram os primeiros protótipos da equipa de Design.

Nesta fase inicial ainda não tínhamos as especificações (nem as limitações técnicas) bem definidas e há muitas funcionalidades que foram pensadas inicialmente e que não viram (ainda) a luz do dia nesta primeira versão que foi lançada ao público.

Por outro lado, também houve algumas funcionalidades que não tinhamos pensado inicialmente e que foram sendo adicionadas durante o desenvolvimento do projecto, e não foram assim tão poucas :)

Tendo por base estes layouts e workflows, chegou a altura de passar à equipa técnica para fazer a implementação.

É de salientar o enorme esforço e dedicação da equipa de JavaScript do SAPO que conseguiu montar toda a interacção que foi pensada para o funcionamento do interface, bem como a restante equipa técnica que teve de lidar com todos os constrangimentos de implementar algo desta envergadura e propondo sempre soluções engenhosas para os problemas que iam surgindo ao longo do caminho.

Foram feitas dezenas de iterações diferentes, dezenas de testes de usabilidade, houve partes que foram feitas e refeitas, outras que foram desenhadas e redesenhadas até termos algo que consideramos ser ideal.

Na realidade, o Meo Kanal já estava a funcionar quase a 100% praticamente 6 meses antes da data de lançamento, mas teve de passar por um longo processo de testes e iterações até chegar àquilo que é hoje. 

Desde o início sempre soubemos que o processo de criação de um canal (upload, gestão de conteúdos, organização de uma playlist) é algo complicado e que requer sempre uma curva de aprendizagem. Nos testes que fomos fazendo, tentámos sempre ir simplificando todo este processo de modo a que a curva de aprendizagem fosse o mais reduzida possível e tentar que o processo fosse mais intuitivo a cada iteração.

O resultado final não é perfeito (porque não conseguimos eliminar totalmente a curva de aprendizagem) mas é sem dúvida algo do qual nos orgulhamos em ter conseguido fazer. 

E na TV...

Mas o Meo Kanal não vive apenas na web. Ao mesmo tempo que fomos trabalhando na parte web, tivémos também de desenhar todos os interfaces para a TV.

Inicialmente usámos como base o modelo de interacção do MEO Interactivo e começámos a desenhar os wireframes.

 

Mais uma vez, foram feitas várias iterações, testes, desenhos e redesenhos até se começar a chegar a algo mais parecido com o resultado final.

A interactividade na TV e a visualização dos canais implicou também um grande esforço por parte da equipa de design e desenvolvimento multi-plataforma, ao ponto de termos conseguido implementar algo que a própria Microsoft (o software da box do MEO é Microsoft) dizia ser impossível.

O resultado final

O resultado final está à vista e pode a partir de hoje ser usado por todos os clientes MEO para criarem os seus próprios canais e partilhá-los na TV com quem quiserem.

Como sempre, toda a equipa do SAPO está receptiva a receber os vossos comentários e sugestões para melhorar o serviço. Temos ainda muitas funcionalidades por desvendar em futuras releases e, obviamente, contamos sempre com o feedback dos nossos utilizadores.

Categorias: , , , ,
24
Set 10
publicado por ivogomes, às 17:35 | comentar | ver comentários (2)

Há cerca de 2 meses atrás foi lançado o Meo Interactivo. Foi um projecto que foi acompanhado pela equipa de UX do SAPO e que podem saber mais detalhes sobre todo o processo aqui.

Apesar de ter sido um projecto que foi acompanhado desde o início por nós, não houve a possibilidade de fazer testes com utilizadores na fase inicial. Os interfaces foram concebidos com base em regras de usabilidade, boas práticas, heurísticas e também pela nossa experiência de observação de centenas de testes de usabilidade em várias plataformas.

O resultado final, segundo os relatos de vários utilizadores, foi excelente. E a facilidade de utilização, bem como os conteúdos fornecidos, são um dos principais factores da satisfação dos utilizadores.

No entanto, sem uma observação da forma como os utilizadores usam o nosso produto, não é possível saber se o interface que por nós foi pensado se adequa à utilização de um utilizador normal sentado no sofá de sua casa. E como tal, esta semana fizémos um conjunto de testes de usabilidade com vários participantes. Uns já eram clientes Meo, outros nunca viram um comando do Meo à frente na vida.

Testes de Usabilidade ao Meo

Alguns dos resultados retirados dos testes foram:

A navegação pelos vários menus e a execução de acções como abrir as aplicações, adicionar e remover dos favoritos e ordenar os favoritos foram todas executadas com sucesso, mesmo pelos utilizadores que nunca tinham mexido num comando do Meo. O facto de tudo poder ser feito usando apenas as setas de direcção e a tecla de OK faz com que seja muito simples de usar o interface :)

Ordenação dos favoritos

Um dos principais problemas encontrados foi a dificuldade que os utilizadores que navegam pela primeira vez associarem que os ícones na Doca (acessível através da tecla azul) são as aplicações que adicionaram aos Favoritos. Só após alguma exploração é que associaram as duas coisas. Já temos algumas sugestões para tornar esta associação mais óbvia e em breve irão ser implementadas.

Um outro problema da Doca é que o item que dá acesso às restantes aplicações também não é totalmente perceptível. Vamos alterar a iconografia e a nomenclatura para o tornar mais fácil de perceber.

Gravação dos testes

Foram ainda testados alguns novos ecrãs que estamos a pensar introduzir e os resultados foram bastante positivos. Todos os problemas encontrados estão já a ser resolvidos mas alegra-nos que todos os utilizadores tenham conseguido executar com sucesso as tarefas que lhes foram dadas.

No final, cada participante levou para casa uma caixa com uma temporada completa de uma série :)

Prémios para os participantes

Se forem utilizadores regulares do Meo Interactivo e tiverem alguma sugestão de melhoria ou tenham um problema que costumam encontrar frequentemente, podem comentar aqui neste artigo e iremos tentar encontrar uma forma de o resolver.

09
Jul 10
publicado por ivogomes, às 14:26 | comentar | ver comentários (8)

Foi ontem lançado o MEO Interactivo, um projecto em que a equipa de usabilidade do SAPO esteve envolvida desde o início, juntamente com as equipas de multi-plataformas SAPO e MEO.

Este projecto tinha como objectivo levar a Internet para a TV (no formato widget) de modo a facilitar o acesso aos conteúdos web usando o principal objecto de interacção familiar em casa, a TV.

Além dos widgets, o MEO Interactivo inclui também uma espécie de App Store ou Marketplace onde o utilizador pode escolher os widgets que quer correr ou adicioná-los aos favoritos. Os widgets favoritos passam a poder ser acedidos através da tecla azul do telecomando directamente por cima da transmissão de TV.

Prototipagem

Como normalmente acontece, antes de começar a desenhar os interfaces é necessário estudar a plataforma (neste caso, desenhar para a TV é muito diferente e muito mais limitativo do que desenhar para a web) e a forma como a interacção iria ser feita (ecrãs, workflows, navegação, etc).

Em baixo, alguns exemplos dos esboços iniciais feitos apenas com papel e lápis:

Protótipos iniciais

Prototipagem

Um dos principais problemas que encontrámos inicialmente foi com a tecla "back" do telecomando. Muitas pessoas desconhecem a existência dessa tecla (muito por culpa da sua má localização no comando e má iconografia) e usam outros atalhos para sair dos menus (ex: clicar 2x na tecla "menu"). Com base nesta limitação, foi criado um modelo de navegação que funcionaria apenas usando as setas (cima, baixo, esquerda, direita), em que a tecla "esquerda" serviria para voltar atrás, e a tecla "direita" serviria para seguir em frente.

Navegação

Wireframes

Depois de várias reuniões e fechados os protótipos, passou-se para a fase de desenho dos wireframes.

Para desenhar os wireframes já é preciso ter uma noção das dimensões do ecrã e dos elementos que lá vão ser colocados. Apesar de hoje em dia a maior parte das TV já serem em alta definição (HD ou HD Ready), este sistema deveria funcionar em qualquer TV, e isso significa que um ecrã tem de funcionar igualmente bem numa resolução de 1080p como numa de 480p.

E depois há o problema das margens de segurança que é necessário ter quando estamos a trabalhar com TVs antigas com ecrãs CRT.

Em baixo, um exemplo de wireframes para o Marketplace (com as margens de segurança) e para uma Widget de meteorologia.

Marketplace

Widget

Desenvolvimento e Implementação

Depois dos wireframes finalizados e de mais algumas reuniões com a equipa de desenvolvimento onde foi discutida a viabilidade técnica das soluções apresentadas, passou-se finalmente ao desenvolvimento e design final da plataforma.

A fase de design também foi acompanhada de perto uma vez que algumas das soluções apresentadas em wireframe poderiam necessitar de ser reajustadas de modo a adaptarem-se a um ecrã real de TV (no wireframe não temos noção de todas as limitações a que estamos sujeitos numa TV) e só depois de testes reais com o comando e com a interacção é que se chegou ao design final.

E aqui está ele, disponível usando a tecla azul do telecomando do MEO (poderá ser necessário fazer restart à box para a actualizar). Em baixo alguns exemplos do resultado final:

A barra dos widgets favoritos (o primeiro item dá acesso ao MEO Interactivo, nome de código Marketplace, onde se podem correr outros widgets ou fazer a gestão dos favoritos):

Barra de Favoritos

A widget de meteorologia:

Widget Meteorologia

Uma das secções (entretenimento) do MEO Interactivo onde é possível navegar por todas as widgets disponíveis:

Marketplace

E finalmente a ordenação de widgets na barra de favoritos:

Ordenação dos favoritos

Esperemos que gostem, e no futuro poderá ser possível adicionar mais widgets ao MEO Interactivo (ainda não confirmado), quem sabe se não poderá ser a vossa própria widget :)

05
Jul 10
publicado por andr3, às 16:02 | comentar | ver comentários (2)

 

O Núcleo de Multimédia e E-Learning do Instituto Superior Técnico lançou há cerca de uma semana um projecto que nós, aqui no SAPO, muito apreciámos.

Trata-se do Banco de Padrões de Design do IST e no fundo é um resumo de vários padrões de interacção que encontramos hoje em dia na Internet. Mas o verdadeiro valor surge quando deixam de ser apenas uma colecção de padrões e passam a documentar aspectos importantes da implementação. É que para cada padrão mostram vários exemplos assim como uma série de dicas em forma de prosa e/ou lista para nos ajudar a cobrir todos os pontos importantes.

Exemplo

Por exemplo, todos nós já usámos e possivelmente criámos uma paginação num site. É assim que eles nos apresentam o padrão Paginação.

Quando usar
  • Quando o conteúdo for demasiadamente extenso para ser mostrado numa única página.
  • Para mostrar os resultados de uma pesquisa (normalmente agrupam-se os resultados em grupos de dez).
  • Para mostrar uma lista extensa de itens.
Como usar
  • Dividir a informação em várias páginas.
  • Fornecer um dispositivo de navegação para navegar nas páginas.
  • Mostrar os controlos de navegação como um conjunto de ligações (links).
  • Ter sempre no dispositivo de navegação a primeira e última páginas.
  • Ter sempre no dispositivo de navegação acessíveis entre cinco a dez páginas.
  • Nos casos em que existe um conjunto alargado de páginas, para além da primeira e da última páginas, e da página onde o utilizador se encontra, devem estar disponíveis no dispositivo de navegação as duas páginas anteriores e as duas páginas seguintes.
  • Nos casos em que existem mais de 20 páginas pode também existir uma caixa de inserção de texto que permita navegar até uma página através da introdução do seu número.
  • Ter uma seta nas pontas do dispositivo de navegação que permita avançar ou recuar uma página.
  • Quando não é possível avançar ou recuar,  as setas devem assumir uma cor diferente.
  • A área clicável do número das páginas deve ter um tamanho que permita ao utilizador clicar facilmente na página que pretende.

in http://bpd.ist.utl.pt/paginacao/

Com alguns dos padrões importados da biblioteca da Yahoo! (ao abrigo da licença (cc)), este é um trabalho que louvamos e faremos os possíveis para apoiar.

Um grande obrigado a toda a equipa: Gustavo Pimenta, João Alfaiate, Ricardo Baeta e Tiago Machado! E continuem! Para já, é subscrever a feed e salivar por mais!

Parece-nos uma muito boa evolução dum dos recursos com mais qualidade para identificar padrões de design e interacção disponíveis na web, ainda que pouco "oficial": Design Solutions @ Flickr, pelo Gustavo.

25
Jun 10
publicado por andr3, às 18:39 | comentar | ver comentários (0)

A dConstruct é um evento de um dia, organizada pela Clearleft em Brighton, que se foca sempre em temas interessantes para quem constrói sites e aplicações Web.

Ano após ano, tem sido não só um exemplo em termos de conteúdo mas também a nível dos fantásticos sites da própria conferência... o que nem sempre acontece em sites de eventos relacionados com a web ("Em casa de ferreiro..." hehe)

Podem confirmar os sites das edições anteriores: 2005, 2006, 2007, 2008 e  2009. Para confirmarem o conteúdo, espreitem a página do podcast do ano passado.

Este ano não desiludiram (2010), em que o site para além de bem construído a nível visual, inclui uns quantos pormenores a nível técnico para deliciar a audiência-alvo; para além do uso de microformatos (como já é hábito) inclui também bom uso de media-queries (CSS) para o site se adaptar aos vários tamanhos de ecrãs que podem aceder à página (experimentem com um Android ou iPhone).

Edição de 2010

Este ano o tema é Design & Criatividade e conta com nomes como:

A data está confirmada para dia 3 de Setembro e os bilhetes vão ser postos à venda no dia 6 de Julho às 11h (UK).

Adicionem aos vossos calendários: programa da conferência (subcrever), início da venda dos bilhetes.

18
Jun 10
publicado por andr3, às 16:55 | comentar | ver comentários (12)

Nos últimos anos tornou-se cada vez mais frequente encontrarmos com pequenos controlos na web que são enriquecidos com a magia do JavaScript.

Sejam eles tabs (abas em Português), paginações, votações, etc., o que interessa é que o controlo "quebra" o conceito de hiperligação (link) do hipertexto. Como conceito, os links servem para interligar hiper-documentos em que cada link refere um outro documento através do seu URL.

Ora, uma vez que o AJAX permite carregamento de conteúdo sem refrescar toda a página, esta é uma técnica perfeita para mostrar grandes quantidades de conteúdo que não são necessariamente acedidos em todas as visitas.

Exemplo do link Todo o SAPO na Homepage do SAPO

Evitar barreiras desnecessárias

Existem imensas formas de programar o comportamento do exemplo mostrado.

  1. <a href="#" onclick="mostrarTodoOSapo();">Todo o SAPO</a>

    O browser executa a função de JavaScript e segue o href, provocando às vezes um scroll para o topo. Sem JavaScript, nada acontece ao clicar/activar o link.

  2. <a id="todo-o-sapo" href="#">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

    O browser executa a função de JavaScript e não segue o href. Sem JavaScript, nada acontece ao clicar/activar o link.

  3. <a id="todo-o-sapo" href="/todo-o-sapo">Todo o SAPO</a> e num ficheiro à parte de JavaScript $('todo-o-sapo').onclick = function (){ mostrarTodoOSapo(); return false;};

    O browser executa a função de JavaScript e não segue o href. Sem JavaScript, o browser segue normalmente o href, logo que o documento servido nesse URL deve imitar a função desempenhada por JavaScript.

Neste último ponto, estamos a falar duma questão de acessibilidade visto que se trata de permitir acesso ao conteúdo. No entanto, ao resolver este problema estamos também a melhorar a usabilidade do link uma vez que passamos a permitir também que o utilizador opte por abrir o link numa nova Janela ou tab (opção "Abrir link numa nova Janela" do menu contextual).

Esta solução tem o custo de ter de desenvolver uma versão server-side da funcionalidade mas muitas vezes isso é bastante simples e justifica o investimento.

Exemplo prático

Quando desenvolvemos o sistema de tabs da Homepage do SAPO, tivemos todos estes cuidados. Para além disso, era crucial que o utilizador pudesse usar o endereço do browser para partilhar o link para determinada parte da homepage.

Assim sendo, adoptámos a seguinte estratégia...

location.hash = '/'+lnk.getAttribute('href');
//exemplo: http://www.sapo.pt/noticias => http://www.sapo.pt/#/noticias

Os links que tiveram esta atenção foram:

No entanto, não conseguimos resolver um cenário.

  1. Utilizador com javascript, partilha o endereço do browser: http://www.sapo.pt/#/noticias/tecnologia
  2. Utilizador sem javascript segue este link e vê a aba por omissão aberta e não a de tecnologia.

Nesta situação, não conseguimos que o link partilhado seja outro sem provocar um recarregamento da página. Também não conseguimos que o link partilhado funcione sem javascript porque a parte do endereço chamada "Hash" não é enviada para o servidor.

Se tiverem algumas ideias, deixem nos comentários em baixo.

Mais pormenores

Se ainda assim quiserem ler sobre esta técnica, normalmente apelidada de JavaScript Não-Obstructivo (Unobtrusive JavaScript), podem consultar os slides publicados em Abril de 2009 no Blog do Developers: JavaScript done right.

11
Jun 10
publicado por ivogomes, às 14:20 | comentar | ver comentários (0)

Além da componente de usabilidade e user experience, aqui no SAPO também damos grande valor à acessibilidade. O nosso objectivo é que todos os nossos sites e produtos sejam acessíveis, no entanto dado que há centenas deles (muitos já são bem antigos) não é fácil mudar tudo de um dia para o outro.

Felizmente, pouco a pouco vamos melhorando este aspecto e no mês passado realizámos alguns testes de acessibilidade com utilizadores com vários níveis de necessidades especiais: invisuais e doentes com paralisia cerebral (com vários graus). Normalmente quando se fala em acessibilidade na web, só se pensa nos screen-readers e nos invisuais, mas no decorrer dos testes verificámos que além disso é extremamente importante pensarmos também na destreza manual ou na forma como os utilizadores usam os vários sistemas apontadores para navegar.

Os resultados dos testes demonstraram que na maior parte das vezes estes utilizadores não procuram uma "versão acessível" do site, mesmo tendo lá o link para tal. Talvez seja por acharem que não precisam de uma versão acessível, ou por não estarem habituados a ter essa opção e por isso ignoram-na. Este facto vai de encontro com a recomendação de conceber um design universal, que funcione para todos. Esse design só tem é que se adaptar às várias circunstâncias (quer seja através do aumento do tamanho dos textos e controlos, quer seja através do aumento do contraste entre os elementos usando uma folha de estilo alternativa). Estes foram, aliás, os principais problemas encontrados nos testes com os doentes com paralisia cerebral (dificuldade de visão/pouco contraste para ler os textos; e controlos demasiado pequenos para conseguirem clicar eficientemente).

Dispositivo apontador para o GRID

Em cima: imagem de um dispositivo apontador usado pelos doentes com paralisia cerebral para controlarem o computador (usando o sistema GRID)

 

Durante as próximas semanas iremos continuar a realizar mais alguns testes. Se tiverem algum tipo de deficiência ou conheçam alguém com alguma necessidade especial e estejam disponíveis para participar, podem responder com um comentário a este post ou escrever-nos para: acessibilidade@sapo.pt

Teremos todo o gosto em receber-vos cá :)

Categorias:
02
Jun 10
publicado por andr3, às 11:56 | comentar | ver comentários (0)

No passado mês de Maio, ocorreu em Lisboa uma conferência que trouxe a terras Lusas alguns dos maiores nomes da nossa área: a UX LX.

Não é todos os anos que temos o Jared Spool e o Steve Krug (entre muitos outros) a assistir a uma palestra do Peter Merholz.

Toda a equipa do Departamento de Qualidade do SAPO este presente e todos concordamos que foi uma conferência extremamente rica em conteúdo e oradores—algo raro no nosso país.

Slides

Após a conclusão da conferência, os oradores começaram rapidamente a depositar no slideshare as suas apresentações. Algumas não funcionam muito bem sem as explicações do orador mas mesmo assim há importantes mensagens que se podem retirar examinando apenas os slides.

Slides da UX LX no Slideshare

Slides sugeridos

A equipa do Dept. de Qualidade e Usabilidade do SAPO, que esteve presente em massa no evento, juntou-se e elaborou uma lista de slides sugeridos para que começassem pelos melhores. Aqui ficam as nossas recomendações.

Gostávamos de poder destacar mais apresentações, mas muitas delas (ainda?) não foram partilhadas. Especialmente a do Web Dogma do Eric Reiss. ;)

Até para o ano!

Categorias: , , , ,
26
Mai 10
publicado por andr3, às 16:46 | |

Há umas semanas, Jakob Nielsen levantou uma questão pertinente no seu artigo "Stop Password Masking".

Será que devemos continuar a ocultar as palavras-passe nos formulários? (na web)

Os seus argumentos são fortes:

  • Muitas vezes estamos a navegar sozinhos sem ninguém a olhar-nos por cima do ombro;
  • Se os utilizadores puderem confirmar antes de submeter um formulário, poderão usar palavras-passe mais fortes e complexas.

Concordamos que questionar convenções e padrões que foram emergindo trazem sempre valor e se daí sair uma experiência mais segura devemos apostar nela.

Estaria o Nielsen certo?

No entanto, não basta levar uma questão hipotética e seguir o instinto. Assim sendo, conjuntamente com o Labs SAPO da Universidade de Aveiro (Ana Veloso & Óscar Mealha 1) conduzimos uma série de testes com utilizadores por forma a responder às seguintes questões:

Será que os utilizadores...

  • ...reparam num elemento novo no formulário de login?
  • ...compreendem o que esse elemento vai fazer antes de o activarem?
  • ...têm receio de usar ou usariam no dia-a-dia?

(saltar para a conclusão)

Para obter respostas, preparámos uma cópia do formulário do SAPO Login (o single-sign-on do SAPO) com uma checkbox adicional, como se pode ver na imagem.

Formulário de Login usado nos testes

Depois conduzimos uma série de entrevistas com utilizadores reais em que pedíamos para fazer login normalmente... seriam observados os movimentos dos olhos recorrendo a um eyetracker e no final do teste responderiam a um inquérito para avaliar a percepção da alteração.

Foram conduzidas 42 entrevistas (61% do sexo Feminino, 63% entre os 21-30 anos e 63% com mais de 20 horas semanais de uso da Internet).

Resultados

Conclusão (dos testes): A percentagem de utilizadores que viu a opção de mostrar a password coincide com os resultados do inquérito (38%). Dos que viram a opção, 22% não percebiam para que serviria e 15% tinham dúvidas.

O uso do eyetracker foi importante para avaliarmos a solução a nível de design. Deu para perceber se a introdução duma checkbox num sítio não muito próximo do fluxo normal do olhar seria o suficiente para obter a atenção (ie, olhar focado e não olhar periférico) do utilizador. Não o colocámos no fluxo do olhar para discernir entre o "Lembrar-se de mim nos próximos 15 dias", uma vez que muitos utilizadores não lêem as instruções neste caso.

Bom, aqui ficam os relatórios obtidos do eyetracker.

Heatmap dos olhares Áreas descobertas....

Pelos resultados, não vimos necessariamente nenhuns alertas graves. As pessoas geralmente não se assustaram pelo que faltava um derradeiro teste final. Colocar estas alterações num ambiente de produção mas controlado para medir o feedback dum parque de utilizadores bastante maior. Como o serviço de Mail estava a preparar-se para um lançamento duma nova homepage, a equipa montou este mesmo sistema no seu novo formulário de login.

Produção: o derradeiro teste de usabilidade

Apesar de termos conduzido os testes e entrevistas com utilizadores, o uso normal em casa tem uma série de factores e condicionantes impossíveis (ou mais difíceis) de replicar em laboratório. Este foi um destes casos.

Após o lançamento da nova homepage, a equipa do Mail manteve-se alerta em relação ao feedback desta pequena mudança. Receberam vários comentários no seu blog, de utilizadores transtornados com esta alteração devido a um cenário muito particular.

Cenário

Num ambiente familiar, vários utilizadores acedem ao mesmo computador e muito frequentemente não tiram partido das sessões separadas para cada um — algo que todos os Sistemas Operativos modernos oferecem.

Neste ambiente, os utilizadores não se importam que os familiares tenham acesso, por exemplo, ao seu email e usam o guardar palavra-passe do browser com regularidade.

Problema

Ao colocar ao alcance de todos, apenas tendo de clicar numa checkbox da página, o mostrar/esconder palavra-passe, quando o browser preenche a caixa de palavra-passe para facilitar o uso do utilizador, estamos também a permitir que qualquer utilizador terceiro possa descobrir qual a palavra-chave inserida.

Tal como referido anteriormente, os utilizadores não se importam que os familiares tenham acesso ao email. Já terem acesso à palavra-chave usada, o caso é bem diferente. Realmente, é algo que qualquer pessoa versada em javascript conseguirá de qualquer maneira. Alguns browsers até o permitem fazer a partir dos ecrãs de definições... mas a checkbox traz essa funcionalidade para a UI principal, que cobre 100% do parque de utilizadores.

Assim sendo... esta funcionalidade foi removida do SAPO Mail e não chegará a ser implementada no SAPO Login.

Conclusão final

O risco de revelar palavras-chave de utilizadores que usem o guardar palavra-passe dos browsers em ambientes mono-utilizador mas com computadores partilhados é demasiado grande para arriscarmos em prol duma experiência mais segura e cómoda.

Sim, pode ser argumentado que os utilizadores não deviam usar sessões partilhadas por questões de privacidade e segurança, mas a verdade é que isto acontece em muitos lares. Não só em Portugal, mas pelo mundo inteiro.

Podíamos prevenir que o browser consiga guardar a palavra-passe, mas isso seria quebrar uma funcionalidade do browser que muitos utilizadores usam e valorizam.

A conclusão a tirar deste caso é que por muito que se façam testes de usabilidade, um factor determinante é o contexto no qual o utilizador interage com as nossas aplicações.

E já agora... O Nielsen estava certo na sua motivação, mas há barreiras que impedem a implementação da sua sugestão.

1: Departamento de Comunicação e Arte - Univ. de Aveiro (http://www.ua.pt/ca/)CETAC.media - Centro de Estudos das Tecnologias e Ciências da Comunicação (http://www.cetacmedia.org/)

24
Mai 10
publicado por andr3, às 16:26 | comentar | ver comentários (5)

Voltámos.

Este é o post obrigatório e cliché após uma longa e prolongada ausência.

A programação do blog irá continuar dentro da normalidade, com posts em forma de discussão sobre certos temas relacionados com User Experience, problemas com que nos temos deparado no dia-a-dia, resultados de testes que temos feito e tudo mais que nos formos lembrando.

Se quiserem participar com algumas questões, também podemos fazer uma espécie de Consultório de UX. Podem deixar as vossas questões nos comentários.

Os posts começam a sair já de seguida... Até já!

Categorias:

Autores
Pesquisar
 
Posts recentes

Processo de criação do ME...

Testes de Usabilidade no ...

MEO Interactivo

Banco de Padrões de Desig...

dConstruct 2010

JavaScript não deve compr...

Acessibilidade no SAPO

Slides da UX LX - 2010

"Mostrar password" consid...

UX - O Regresso

Arquivo

Fevereiro 2012

Setembro 2010

Julho 2010

Junho 2010

Maio 2010

Setembro 2009

Julho 2009

Junho 2009

Maio 2009

Categorias

todas as tags

Subscrever feeds