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


Autores
Pesquisar
 
Posts recentes

Processo de criação do ME...

Testes de Usabilidade no ...

MEO Interactivo

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