Redesign of the interface of the menu of an interactive TV Pezzini, Marina; Mestre; UNIVILLE marinapzn@gmail.com Günther, Gabriel; Bacharel; UNIVILLE gaguenther@gmail.com Oliveira, Jan; Graduando; UNIVILLE jan_express@hotmail.com Resumo O presente artigo apresenta os resultados de uma pesquisa sobre a interface da Televisão Interativa. A proposta de redesign gerada buscou contribuir para a usabilidade e a acessibilidade do menu de interface de uma TV por assinatura nacionalmente relevante. Para isso, foi realizada uma revisão teórica, um questionário on-line com usuários, uma análise paramétrica e uma análise da interface atual. Os resultados apontaram para a necessidade de interfaces mais intuitivas, atrativas, personalizáveis e acessíveis, o que permitiu uma reflexão a respeito da contribuição do design para a qualidade de uso dos sistemas interativos digitais. Palavras Chave: TV interativa; usabilidade; design. Abstract This arcticle presents the results of a research on the interface of Interactive Television. The redesign proposition aimed to make a contribution to the usablity and the accessibility of the interface menu of a relevant brazilian payed TV. It was made a theorical revision, an on-line questionnaire, a parametrical analisys and an analysys of the present interface. The results point to the necessity of more intuitive, attractive, personalized and accessible interfaces. It lead to a reflection about the design contribution to the quality o use of the digital interactive systems. Keywords: interactive TV; usability; design.
Introdução Durante a década de 50, a televisão se firmou como um novo meio de comunicação, transformando os hábitos de interação de uma sociedade adaptada aos programas de rádio (GAWLINSKI, 2003, apud, BARROS, 2006, p.27). Com o tempo, várias tentativas de inserção da interatividade na televisão foram realizadas, desde o tele-texto, em que informações de texto simples e sem gráficos eram transmitidos por uma estação de televisão comum ou a cabo para o aparelho de um assinante, até a tentativa de unir e-mail, Internet e catálogo de compras, quando a televisão sofreu uma concorrência direta com a própria Internet (BARROS, 2006). Televisão interativa ou TVi é um termo utilizado para descrever os sistemas de televisão que vão além da troca de informações com som e imagem e que permitem a realização de ações pelo usuário além da seleção de canais. Conforme Lu (2005, p.1), trata-se de qualquer programa em televisão ou vídeo que incorpore conteúdo adicional ou algum tipo de interatividade. Atualmente, o objetivo da TVi é tornar a experiência mais relevante e satisfatória, através de uma interatividade controlada pelo usuário (LOIZIDES, 2005). O diferencial da TVi é transformar o perfil passivo dos usuários em um perfil ativo, sem que a atividade perca o caráter de relaxamento (GAWLINSKI, 2003). A transição da TV analógica para a digital criou um novo paradigma, um novo sistema de uso e, portanto, novas preocupações com a interface do indivíduo com o sistema de interação. Esse é o tema do trabalho aqui apresentado, cuja proposta é contribuir para a usabilidade e a acessibilidade do menu de interface de uma TV por assinatura, a partir de estudos de usabilidade. Para isso, foi realizada uma revisão teórica pertinente, um questionário on-line com usuários, uma análise paramétrica e uma análise da interface atual, que geraram requisitos projetuais a partir dos quais gerou-se um conceito e alternativas projetuais que resultaram em uma sugestão de redesign para o menu da SKY. A SKY nasceu em agosto de 2006 pela fusão entre SKY e DIRECTV, que atuam há quase 12 anos no Brasil, e é a única operadora que transmite todos os canais e serviços no sistema digital para o país todo. Foi a Tvi por assinatura escolhida para este trabalho, por ser a maior operadora desse tipo na América Latina e por possuir um número maior de usuários, cerca de 1.700.00 de assinantes. (SKY, 2009, WEB). A partir de experiências de usos e avaliações preliminares, puderam-se identificar na interface da SKY (Figura 01) problemas de atratividade visual, legibilidade e intuitividade das operações. Figura 01: Interface atual da SKY. Usabilidade de interfaces Os estudos de usabilidade de interfaces web foram fundamentais para este trabalho, por sua característica de uso análoga. Foi a partir dos princípios da usabilidade que o trabalho
se organizou para responder aos problemas de interação do menu da Tvi. De acordo com Cybis (2007, p. 17) a usabilidade é a qualidade que caracteriza o uso dos programas e aplicações. Já a norma ISO 9241-11 (1998), define usabilidade como a capacidade que um sistema interativo oferece a seu usuário, em determinado contexto de operação, para a realização de tarefas de maneira eficaz, eficiente e agradável, tendo como objetivo diminuir a margem de erros e levar o usuário a concluir a tarefa desejada sem barreiras e frustração. Sendo assim, a usabilidade tornou-se fundamental para melhorar a aceitabilidade dos sistemas por parte dos usuários e, atualmente, a avaliação da usabilidade é considerada um procedimento essencial para o desenvolvimento de bens de consumo (KWAHK & HAN, 2002). Ela busca assegurar que a utilização ou interação de produtos ou sistemas tenha eficácia, eficiência, segurança, utilidade, capacidade de aprendizagem, capacidade de memorização (PREECE et al, 2007). A interface da TVi é a forma de apresentação dos elementos gráficos e de interação na tela do aparelho televisor, tendo como estrutura de acesso às informações janelas, botões, abas, caixas de texto ou de checagem, ícones. Dada a interface analoga do computador, Filho afirma que (2004) esse formato de apresentação gráfica, ou o ambiente digital funcional, tornou a utilização do computador mais amigável devido às questões de forma e função, dialogando com os princípios básicos do design. Nesse sentido, o desenvolvimento de uma interface adequada deve considerar a linguagem visual. O resultado final deve ter uma unidade de cor, diagramação e tipografia, além de considerar a amigabilidade do sistema. O termo amigabilidade se refere a características da interface como o apelo estético e emocional da linguagem visual, além de características relacionadas ao desempenho cognitivo do usuário, como a facilidade de aprendizagem e a facilidade de re-aprendizagem do sistema. Ou seja, não há perda significativa do conhecimento do sistema após um breve período de inatividade, e as principais características do sistema são relembradas mesmo após um longo período de inatividade; o usuário consegue identificar facilmente quais funções do sistema devem ser utilizadas na maioria das situações; o sistema possui uma interface intuitiva, minimizando a margem de erro e possibilita a reversão no caso de uma ação errada; e transmite a sensação de segurança (MARMION, 2006). Requisitos levantados Através dos procedimentos metodológicos listados na Introdução, diversos requisitos projetuais foram levantados e organizados a fim de atingirem-se os objetivos de otimização da usabilidade e acessibilidade da interface do menu da SKY. Foram gerados requisitos projetuais de ergonomia, de acessibilidade, do usuário, de mercado, técnicos e estruturais, que estão organizados no texto que segue de acordo com os procedimentos de que resultaram, a fim de facilitar-se a compreensão sobre o desenvolvimento da pesquisa. Como resultados da revisão teórica, seguem os requisitos de ergonomia e acessibilidade. Os requisitos de ergonomia identificados como pertinentes a este projeto foram presteza, legibilidade, experiência do usuário e proteção contra erros, quatro das dezoito recomendações ergonômicas do Ergolist (CYBIS, 2009, WEB). Ainda como necessidade ergonômica observada informalmente, tem-se a personalização do sistema, um requisito emocional ligado à sua amigabilidade. Segundo Mont Alvão (2008), a primeira impressão de um produto é associada principalmente à percepção visual da interface, que deve agradar o usuário para estabelecer um vínculo emocional positivo. A personalização é uma alternativa amplamente utilizada em interfaces digitais para que esse vínculo seja promovido a partir do controle do usuário sobre, por exemplo, as cores do sistema. Além da percepção visual, outras funções cognitivas devem ser consideradas no desenvolvimento da interface de uma TVi: atenção, reconhecimento, memória, aprendizado,
resolução de problemas, raciocínio e tomada de decisões. A interface deve ser previsível (intuitiva), amigável (emocional), estimulante e gradual, para que o usuário se sinta motivado a aprender e memorizar uma nova experiência de uso, com mais facilidade e com uma margem decrescente de falhas. A maneira como as informações são apresentadas deve ser clara e ter pouca margem para erros, pois a finalidade principal do usuário é assistir ao programa desejado e não perder tempo com a navegação pelo menu (PREECE et al, 2007). Nesse sentido, uma característica interessante da interface da SKY é o uso de ícones idênticos aos botões encontrados no controle do padrão atual da operadora (Figura 01), facilitando a navegação pela programação. Os ícones nas interfaces digitais são análogos a botões nas interfaces físicas e, associados a um significado conhecido, permite-se a memorização de uma função conhecida na primeira vez que são vistos, ou seja, intuitivamente. Os três ícones destacados na Figura 02 são de retorno, consulta/ativação da tarja e sinopse ou de mudança de idioma. Figura 02: Ícones e controle da operadora SKY. Os requisitos de acessibilidade foram levantados em função da diversidade de usuários da TVi, que podem ser crianças, idosos, homens, mulheres, pessoas com diferentes habilidades cognitivos e repertórios tecnológicos (Figura 03). Por isso, buscaram-se os princípios do design universal, dentre os quais identificaram-se como de maior relevância para este trabalho o uso equitativo, o uso flexível e o uso simples e intuitivo. Segundo esses princípios, o projeto da interface deve ser utilizado essencialmente da mesma maneira por pessoas com habilidades e condições diferentes; deve acomodar uma ampla faixa de preferências e habilidades; deve ter uso simples e intuitivo, para que a experiência seja agradável; deve minimizar riscos e as consequências de um eventual erro que o usuário venha a cometer. Interfaces acessíveis são projetadas com o objetivo de facilitar e não tornar a experiência frustrante e desencorajadora (MELO, 2005; MELO, 2009; CASTRO, 2009). Figura 03: Painel da diversidade de usuários.
Foram também levantados como resultados da revisão teórica os requisitos técnicos. Segundo indicações da bibliografia, deve-se tomar alguns cuidados ao desenvolver uma interface para a TV: usar formas simples como curvas, gradientes, bordas suaves e alguns movimentos (BARROS, apud BBC, 2002); deixar uma borda de 5% espessura do tamanho da tela (action safe); textos e informações importantes devem obedecer uma borda de 10% do tamanho total chamada de title-safe equivalente a 512 por 384 pixels (BARROS, apud, GAWLINSKI. 2003), como pode ser observado na Figura 04 a seguir. Esses são os formatos de tela mais utilizados atualmente que possuem a relação entre a altura e largura de 4:3. Entretanto, deve ser considerada a tendência de mudança desse formato para o widescreen, que possui relação de largura para altura de 16:9, tornando a tela mais retangular (Figura 05). Figura 04: Área de tela tradicional. Figura 05: Área de tela widescreen. Ainda: não é recomendado utilizar cores muito saturadas ou com muita luminosidade (GAWLINSKI, 2003); as cores devem ser do padrão RGB e não ter valores menores que 16 e maiores que 236 em uma escala de 256 valores. (BARROS, apud BBC, 2002; TIRESIAS, 2006); conforme Gawlinski (2003), devem ser usadas fontes de no mínimo 18 pontos sendo o ideal o uso de 22 pontos ou maior e é preferível a utilização de fontes sem serifa. Assim, foi escolhida a fonte Humnst777 blk BT (Figura 06), que não possui serifa e cujas hastes são
largas e facilitam a leitura, com cores diferenciadas do fundo para proporcionar o contraste necessário para não causar confusão. Figura 06: Família tipográfica tarja padrão Como resultados do questionário on-line, os requisitos do usuário estão descritos neste parágrafo. O questionário on-line foi realizado com 115 pessoas sobre o uso do menu de interação da TV por assinatura SKY, por meio de uma página na Internet (www.analisesky.blogspot.com) divulgada em comunidades de usuários. Os resultados desse instrumento indicaram que a maioria dos usuários passa várias horas por dia interagindo com a TVi. Apesar de o questionário ter sido aplicado com usuários de vários níveis de experiência, 29% tem alguma dificuldade para realizar as tarefas, 50% acham os botões difíceis de usar e 48% não acessam as ferramentas desejadas rapidamente. Os entrevistados manifestaram maior dificuldade ao acessar as próximas programações e navegar no guia de programação. Dentre os aplicativos, a tarja de informações é mais utilizada que o guia de programação, por se tratar de um aplicativo mais rápido e dinâmico; o fato de a tarja de informações ficar sobre as legendas em alguns canais é um incômodo para a maioria dos entrevistados. Esses resultados resumem a voz do usuário na análise da interface do menu interativo da SKY e foram considerados no projeto de redesign. Como resultado da análise paramétrica, têm-se os requisitos de mercado. De aordo com Baxter (2000, p.72), a análise paramétrica serve para comparar os produtos em desenvolvimento com os produtos já existentes ou aqueles concorrentes, baseando-se em certas variáveis, chamadas de parâmetros comparativos. No caso da interface de TVi, esse procedimento foi importante para apontar as características que deveriam ser mantidas, retiradas ou agregadas ao novo menu. No caso deste trabalho, foram analisadas interfaces similares à TVi SKY e essa análise indicou que as ferramentas mais utilizadas são o guia de programação e a tarja de informações, mantendo as análises focadas nesses aplicativos. Os requisitos levantados como desejáveis para a nova interface foram: limpeza na tarja; destaque para os elementos mais importantes; presença do indicador de evolução do programa e da tela reduzida do programa sintonizado; sistema de navegação semelhante ao da SKY; aparência elaborada; funcionalidade; personalização. Por fim, como resultados da análise da interface atual, foram levantados os requisitos estruturais da interface, ou seja: as características indispenáveis da estrutura da interação com o usuário. Para isso, foram analisados os elementos indispensáveis da tarja de informações e o guia de programação, como são descritos a seguir. A tarja de informações SKY é acionada quando o usuário pressiona o botão? do controle remoto (Figura xx). A tarja desliza rapidamente de baixo para cima do vídeo como se estivesse escondida abaixo da área de visualização. Além de mostrar o programa do canal sintonizado, a tarja de informações SKY permite ao usuário a opção de navegar pelos horários até 24 horas à frente e pelos canais, por meio das setas horizontais e verticais do controle remoto e indicadas na própria tarja. A Figura 07 a seguir apresenta a tarja de informações, com destaque para os elementos estruturais analisados (nome e número do canal, relógio, horário de início e término do programa e ícones indicativos sobre o programa).
Figura 07: Elementos analisados da tarja de informações. Para uma visualização mais ampla do conteúdo televisivo, o usuário pode acessar o guia de programação (Figura 08). Após pressionar o botão guia de programação, a navegação é feita através das setas do controle remoto e as seleções são feitas com o botão em formato de círculo, entre as setas. Pode-se navegar por uma grade com canais e horários que se atualiza de meia em meia hora, ou seja, o tamanho da barra corresponde ao seu tempo de duração e quanto do programa já se passou ou ainda vai passar. O canal selecionado sempre está no centro do guia, mostrando dois canais acima e dois abaixo, para maior controle sobre o estado do sistema. Quando algum programa em um horário anterior ou à frente for selecionado, a sinopse do canal é disponibilizada na tela. Para sair do guia, deve-se clicar no botão de retornar, representado por uma seta curvada em formato de círculo. A Figura xx a seguir apresenta o atual guia de programação da SKY, com destaque para os elementos estruturais analisados (botão de navegação, indicadores de horário e relógio, ícones, idênticos aos do controle remoto, dia e nome dos canais por extenso, programa selecionado). Figura 09: Elementos analisados do guia de programação. Proposta projetual A partir dos requisitos levantados, gerou-se uma proposta de redesign com as características necessárias e desejáveis para a tarja de informações e para o guia de programação da SKY. Em um primeiro momento, uma estrutura básica com os requisitos ou características consideradas indispensáveis ao sistema. Nesse sentido, a tarja de informações e
o guia de programação foi desenvolvido sem muitos detalhes e efeitos pois, como foi apontado anteriormente, não se pode usar tais artifícios para uma interface de TV, porque a resolução da maioria dos aparelhos é limitada. A Figur 09 a seguir apresenta à esquerda a interface atual e à direita a estrutura básica gerada para o redesign da interface da SKY. Figura 09: Antes e depois da estrutura de interação. Em seguida, foi realizada uma geração de alternativas para a finalização da liguagem visual e dos elementos gráficos de interação. Através de uma lista de verificação, escolheu-se a alternativa que contemplava o maior número de requisitos levantados. É possível observar na Figura 10 que a versão finalizada da tarja possui elementos muito similares aos da estrutura, as mudanças foram na parte do canal, que ficou levemente destacado da tarja contendo seu nome e número do mesmo, a transparência continua, mas com um leve degradê, o indicador de evolução também foi destacado, mas ainda permanece na tarja maior, sendo envolvido por algo que mantém sua forma circular. As setas de navegação permanecem as mesmas assim como o ícone de sinopse e de indicação de censura.
Figura 10: Tarja de informação finalizada. A finalização do guia de programação foi desenvolvida a partir dos mesmos princípios, preservando-se as cores, a tipografia e os elementos de interação, como apresenta a Figura 11 a seguir. Figura 11: Guia de programação finalizado.
Para atender à necessidade de personalização identificada em vários procedimentos da pesquisa, foram gerados exemplos de opções que o usuário poderia escolher para sua interface, sendo elas um tema feminino e um infantil, conforme apresenta a Figura 12. Figura 12: Opções de personalização. Por fim, devido a uma tendência de consumo, o projeto desenvolvido em cima da plataforma 4:3 (formato mais utilizado atualmente nas TVs brasileiras), foi adequado para televisores com o formato widescreen, cuja relação altura/largura é de 16:9 (Figura 13). Figura 13: Guia de programação e tarja de informações no formato widescreen. Conclusão As pessoas são rodeadas em sua rotina por todo tipo de equipamento e ferramentas, físicas e virtuais, tais como computadores, celulares, jogos, e televisores. Todos esses meios de interação precisam ser projetados para que a experiência de uso seja satisfatória. A identificação da necessidade de otimizar interfaces digitais existentes foi dada com a observação das dificuldades de alguns usuários em interagir com a interface da Tvi durante a atividade de assistir TV e navegar pelo menu apresentado na maioria das plataformas. O desenvolvimento do projeto foi alcançado através dos estudos de ergonomia, usabilidade e design, bem como da realização de procedimentos metodológicos
sistematizados, que permitiram o desenvolvimento de uma interface de fácil aprendizagem e utilização, com um visual agradável, atrativo e personalizável, permitindo que vários tipos de usuários utilizem e aproveitem seus programas de TV com mais facilidade e sem estigmatização, contribuindo para a fidelização das operadoras de Tvi, aumentando a demanda por serviços desse mesmo caráter, valorizando a atuação do design e sua contribuição para o mercado e para a qualidade de vida do usuário. Interfaces digitais mais intuitivas, atrativas, personalizáveis e acessíveis tornam a experiência de uso dos sistemas digitais mais estimulante e agradável, o que conduz ao estabelecimento de um vínculo emocional que satisfaz de maneira mais plena e duradoura o usuário. Essa é uma contribuição do design que pode ser explorada com critério para que, com o passar do tempo, as interfaces digitais tornem-se sistemas menos frustrantes para usuários não especializados e de maior desempenho, para usuários especialistas. Referências BARROS, Gil Garcia de, Consistência da interface com o usuário para a TV interativa. 2006. 200 f. Dissertação (Mestrado em Engenharia) Escola Politécnica da Universidade de São Paulo, São Paulo. BAXTER, M. Projeto de Produto: guia prático para o desenvolvimento de novos produtos. São Paulo: Edgard Blücher, 1998. CASTRO, Eduardo Breviglieri Pereira de. Ergonomia, princípios do desenho universal, 2009. Disponível em: <http://www.engprod.ufjf.br/epd_ergonomia/desenho_universal.pdf>, Acesso em: 27 mai. 2009 CYBIS, Walter de Abreu; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e Usabilidade: conhecimentos, métodos e aplicações. São Paulo: Novatec Editora, 2007, p. 15 ERGOLIST, checklist, 2008, disponível em: <http://www.labiutil.inf.ufsc.br/ergolist/check.htm> acesso em: 25 mar.2009 FILHO, João Cesar Toledo. Estrutura visual, leitura da forma e diagramação digital. 2004 GAWLINSKI, Mark, Interactive Television Production. Focal Press, 2003, 288p. ISO (1998). ISO 9241-11 Ergonomic requirements for office work with visual display terminals Part 11, Guide on usability. KWAHK, Jiyoung; HAN, Sung H. A methodology for evaluating the usability of audiovisual consumer electronic products. Applied Ergonomics. v.33, p. 419-431, 2002. LU, Karyn Y. interaction design principles for interactive television. Georgia institute of technology, 2005. 202 p. LOIZIDES, Lydia, Interactive TV: Dispelling misconceptions in the Midia. ACM Computers in Entertainment, Vol. 3 No. 1, 2005.
MELO, Amanda Meincke. Design Universal, 2005. Disponível em: <http://styx.nied.unicamp.br:8080/todosnos/acessibilidade/textos/design_universal.html>, Acesso em: 03 abr.2009 MARMION, Jorge, IBRAU, Instituto Brasileiro de Amigabilidade e Usabilidade 2003-2006. Uma introdução à amigabilidade e à usabilidade disponível em: <http://www.ibrau.com.br/usabilidade.htm>, Acesso em: 02 abr. 2009 MONT ALVÃO, Claudia; DEMAZIO, Vera. Design, ergonomia e emoção Rio de janeiro: Mauad X: FAPERJ, 2008. PREECE, Jennifer; ROGRES, Yvonne; SHARP, Helen. Design de interação: além da interação homem-computador. Porto Alegre: Bookman, 2007.