Saltar para: Posts [1], Pesquisa [2]

UX sapo

Apontamentos sobre usabilidade no SAPO

UX sapo

Apontamentos sobre usabilidade no SAPO

MEO Interactivo

09.07.10, ivogomes

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

Banco de Padrões de Design do Técnico

05.07.10, andr3

 

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.