09
Jul 10
publicado por ivogomes, às 14:26 | |

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

De Luis Carmona a 9 de Julho de 2010 às 16:10
pfff. tá feio!
Comentar:
De
  (moderado)
Nome

Url

Email

Guardar Dados?

Este Blog tem comentários moderados

(moderado)
Ainda não tem um Blog no SAPO? Crie já um. É grátis.

Comentário

Máximo de 4300 caracteres



Copiar caracteres

 



O dono deste Blog optou por gravar os IPs de quem comenta os seus posts.

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