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.

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.

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/)

06
Jul 09
publicado por andr3, às 13:34 | comentar | ver comentários (0)

Don NormanÉ já hoje, pelas 18h de Lisboa, que teremos a honra de ter um dos maiores nomes da área da Usabilidade a discursar em solo Português.

A Universidade da Madeira, mais concretamente o Lab:USE (Laboratory for Usage-Centered Software Engineering), convidaram o grande Don Norman a dar a Keynote do evento MUSEIII (Madeira Usability and Software Encounters).

Irá falar-nos de "In favor of complexity" e o evento será transmitido ao vivo na página do evento.

Porque é que as coisas são tão complexas? Porque o mundo é complexo. As nossas ferramentas devem reflectir a realidade. A complexidade pode ser uma coisa boa e permite-nos ter uma vida cheia de experiências enriquecedoras. Devemos distinguir a complexidade da confusão, perplexidade e ininteligibilidade. O objectivo é termos complexidade mas com ordem, lucidez e compreensão.

No entanto, para quem se puder deslocar às instalações da Universidade da Madeira no Funchal, não perca a oportunidade de assistir ao vivo, até porque a entrada é livre!

Don Norman, para além de co-fundador do Nielsen-Norman Group com o J. Nielsen, conta com inúmeras publicações, nomeadamente os livros:

Para além das publicações, a não perder, é a sua TED Talk de 2003 entitulada Don Norman on 3 ways good design makes you happy.

Em resumo

Hoje às 18h00, Don Norman a falar sobre "In favor of Complexity" na Universidade da Madeira. Emissão online.

(Adicionar ao Calendário)

Categorias: ,
12
Jun 09
publicado por ivogomes, às 10:30 | comentar | ver comentários (0)

Durante a semana passada fizémos uma sessão de testes de usabilidade à nova versão do Cine SAPO (a aplicação do SAPO para o iPhone/iPod Touch onde se podem consultar os filmes em cartaz nos cinemas de todo o país).

Cine SAPO

Estes testes serviram para identificar possíveis problemas de usabilidade antes de actualizarmos a aplicação actual para esta nova versão. Fizémos testes com várias pessoas, com e sem experiência no uso de iPhones e da própria aplicação, e no final recolhemos uma lista dos principais problemas encontrados e que deverão ser corrigidos antes do lançamento ao público.

Testes de Usabilidade ao Cine SAPO

Testes de Usabilidade ao Cine SAPO

Os testes de usabilidade com utilizadores reais permitem-nos ter uma percepção de como as pessoas usam as nossas aplicações no dia-a-dia e quais os principais problemas sentidos durate esse uso.

No SAPO queremos que a experiência de utilização dos nossos serviços seja sempre a melhor possível e como tal, estes testes permitem-nos estar num processo de melhoria contínua :)

Categorias: , , ,

Autores
Pesquisar
 
Posts recentes

Testes de Usabilidade no ...

MEO Interactivo

Banco de Padrões de Desig...

JavaScript não deve compr...

Slides da UX LX - 2010

"Mostrar password" consid...

Don Norman na Universidad...

Testes de usabilidade no ...

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