Design de Interface: Os desafios projetuais para os designers de aplicações T-Commerce

Documentos relacionados
Interface Homem-Computador

A PÁGINA DISCIPLINAR DE MATEMÁTICA DO PORTAL DIA A DIA EDUCAÇÃO

Sumário. Computação Gráfica Illustrator

Oficina de Multimédia B. ESEQ 12º i 2009/2010

ANÁLISE E DESENVOLVIMENTO DE SISTEMAS TURMA º PERÍODO - 7º MÓDULO AVALIAÇÃO A4 DATA 22/10/2009 ENGENHARIA DE USABILIDADE

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna

Design 3D. Formação em Web WEB DESIGN 3D 1

Sistema de Mídia Digital

Trilha TV DIGITAL. Prof. Me. Marcelo Falco

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Análise sobre projeto Passo Certo

DESENVOLVIMENTO DE UM SOFTWARE NA LINGUAGEM R PARA CÁLCULO DE TAMANHOS DE AMOSTRAS NA ÁREA DE SAÚDE

ÍNDICE MANUAL SITE ADMINISTRÁVEL TV. 1. Introdução 2. Acessando o site administrável/webtv SITE ADMINISTRÁVEL 3. CONFIGURAÇÕES

Princípios de Design TRADUÇÃO DE TATIANE CRISTINE ARNOLD, DO ARTIGO IBM DESIGN: DESIGN PRINCIPLES CHECKLIST.

EDITAL SENAI SESI DE INOVAÇÃO. Caráter inovador projeto cujo escopo ainda não possui. Complexidade das tecnologias critério de avaliação que

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;

GUIA RÁPIDO DE UTILIZAÇÃO DO PORTAL DO AFRAFEP SAÚDE

Channel. Visão Geral e Navegação. Tutorial. Atualizado com a versão 3.9

ATIVIDADE DE NEGOCIÇÃO

ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO

Microsoft Office PowerPoint 2007

Identidade Digital Padrão de Governo

VERSÃO 1 PRELIMINAR MÓDULO 3 - PRESENCIAL

Amadeus-TV: Portal Educacional na TV Digital Integrado a um Sistema de Gestão de Aprendizado

BASES PSICOLÓGICAS DO PACTO SOCIAL

Manual Básico do Usuário. Monitoramento de Iniciativas Estratégicas. Planejamento Estratégico - ANVISA

Corporativo. Transformar dados em informações claras e objetivas que. Star Soft.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

Windows 7. Professor: Jeferson Machado Cordini

U NIFACS ERGONOMIA INFORMACIONAL PROFª MARIANNE HARTMANN

Fundamentos de design

MINISTÉRIO DO DESENVOLVIMENTO AGRÁRIO SUBSECRETARIA DE PLANEJAMENTO, ORÇAMENTO E ADMINISTRAÇÃO COORDENAÇÃO-GERAL DE MODERNIZAÇÃO E INFORMÁTICA

SUA ESCOLA, NOSSA ESCOLA PROGRAMA SÍNTESE: NOVAS TECNOLOGIAS EM SALA DE AULA

Fundamentos de design

Esse tutorial visa apresentar as principais funcionalidades do Editor de Roteiro de Aprendizagem do Portal Clickideia.

Sistemas Distribuídos

Análise e Projeto de Software

A Parceria UNIVIR / UNIGLOBO- Um Case Focado no Capital Intelectual da Maior Rede de TV da América Latina

Relatório referente ao período de 24 de abril de 2007 a 29 de maio de 2007.

2 Diagrama de Caso de Uso

1 O Problema 1.1 Introdução

WordPress Institucional UFPel Guia Rápido

Desenvolvimento de um CMS 1 para a criação e publicação de web sites acessíveis por deficientes visuais.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

EMENTAS DAS DISCIPLINAS

A TV DIGITAL COMO INSTRUMENTO DE ENSINO DE MATEMÁTICA. Adriano Aparecido de Oliveira, Juliano Schimiguel

Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres

Número de pessoas com acesso à internet passa de 120 milhões

Conectando sonhos e negócios.

Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line)

TUTORIAL DO ALUNO. Olá, bem vindo à plataforma de cursos a distância da Uniapae!!!

Abordagem de Processo: conceitos e diretrizes para sua implementação

Menus Personalizados


THE BRAND GUIDE BOOKLET

Tópicos de Ambiente Web Web Design

11 de maio de Análise do uso dos Resultados _ Proposta Técnica

COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS

Sumário. 1 Tutorial: Blogs no Clickideia

Desenvolvimento de Sistemas Orientados a Objetos com UML UP/RUP: Projeto

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

CLUBE DE PROGRAMAÇÃO NAS ESCOLAS: NOVAS ERSPECTIVAS PARA O ENSINO DA COMPUTAÇÃO. IF Farroupilha Campus Santo Augusto; joaowinck@hotmail.

Disciplina: Programas de Edição de Textos Professora: Érica Barcelos

DIRETRIZES PARA A CONSTRUÇÃO DE UM MARCO REGULATÓRIO DO VÍDEO SOB DEMANDA Minuta de resolução do Conselho Superior de Cinema Dezembro de 2015

Design Web - Percepção. Elisa Maria Pivetta

ANIMAÇÕES WEB AULA 2. conhecendo a interface do Adobe Flash. professor Luciano Roberto Rocha.

CURSOS OFERECIDOS. seus objetivos e metas. E também seus elementos fundamentais de Administração, como: PLANEJAMENTO, ORGANIZAÇÃO E CONTROLE.

DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3

Mídias sociais como apoio aos negócios B2C

Sistemas de Informação I

II. Atividades de Extensão

DICAS PARA SE APERFEIÇOAR NO WINDOWS 7

CHAMADA PÚBLICA PARA CADASTRO E SELEÇÃO DE OBRAS AUDIOVISUAIS BRASILEIRAS

O Tour Virtual é uma ferramenta capaz de apresentar cada detalhe do ambiente e tornar o seu produto mais. atraente.

TIC TECNOLOGIA DA INFORMAÇÃO E COMUNICAÇÃO - DOC CONTABILIDADE DE OLHO NA TECNOLOGIA

CENTRO UNIVERSITÁRIO CATÓLICA DE SANTA CATARINA PRÓ-REITORIA ACADÊMICA NÚCLEO DE EDUCAÇÃO EM AMBIENTES DIGITAIS NEAD

INTRODUÇÃO AO AMBIENTE MOODLE DA UFPA. Guia rápido

Soluções que funcionam. Manual de Identidade Visual

UNIVERSIDADE FEDERAL DE SANTA CATARINA GRADUAÇÃO EM SISTEMAS DE INFORMAÇÃO DEPARTAMENTO DE INFORMÁTICA E ESTATÍSTICA DATA MINING EM VÍDEOS

A Dehlicom tem a solução ideal em comunicação para empresas de todos os portes, sob medida.

UNIVERSIDADE LUSÍADA DE LISBOA. Programa da Unidade Curricular PRODUÇÃO DE DESIGN MULTIMÉDIA Ano Lectivo 2014/2015

PESQUISA SOBRE O PERFIL DE ALUNOS NA UTILIZAÇÃO DE UM SITE DOCENTE DO ENSINO SUPERIOR

atube Catcher versão 3.8 Manual de instalação do software atube Catcher

O PAPEL DA ERGONOMIA NO DESIGN DE INTERIORES

4. Qual seria o impacto da escolha de uma chave que possua letras repetidas em uma cifra de transposição?

OS CONHECIMENTOS DE ACADÊMICOS DE EDUCAÇÃO FÍSICA E SUA IMPLICAÇÃO PARA A PRÁTICA DOCENTE

Projeto Incubadora no SecondLife

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

REFORMULAÇÃO SITE ARCA BRASIL

Personalizações do mysuite

3 Abordagem Sistêmica

Composição dos PCN 1ª a 4ª

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim.

OFICINA BLOG DAS ESCOLAS

Guia de criação de layout de Loja Virtual

Análise de Dados do Financeiro

Unificação Fechamento Continuidade

OBJETOS DE APRENDIZAGEM EM EDUCAÇÃO AMBIENTAL: CONHEÇA O AMBIENTE ATRAVÉS DO WIKI Rosane Aragón de Nevado 1 ; Janaína Oppermann 2

Transcrição:

Design de Interface: Os desafios projetuais para os designers de aplicações T-Commerce Interface Design: Projective challenges for designers of t-commerce applications FALCO, Marcelo; Mestrando; PPG em Design, TVDi Design Lab, Universidade Anhembi Morumbi mfalco@gmail.com ZUANON, Rachel; Doutora; PPG em Design, TVDi Design Lab, Universidade Anhembi Morumbi rzuanon@anhembi.br Resumo O design de interfaces para aplicações T-Commerce (Televisão) vem apresentando fortes semelhanças ao E-Commerce (Web). As interfaces, em sua maioria, mostram-se pouco elaboradas em termos projetuais, e não atendem os padrões e especificidades da linguagem televisiva para o desenvolvimento de aplicações à Televisão Digital Interativa (TVDi). O artigo expõe os resultados obtidos na análise de interfaces de aplicações T-Commerce, tendo como referência o estudo da percepção visual definido pelas leis da Gestalt, com o objetivo de ampliar o escopo dos elementos projetuais a serem considerados no design de interfaces T- Commerce, especialmente aqueles envolvidos na organização e tratamento visual da informação. Palavras Chave: Design de Interface; Gestalt; Televisão Digital Interativa (TVDi); T- Commerce. Abstract The interface design for T-Commerce applications (TV) has been showing strong similarities to E-Commerce (Web). In most cases, the interfaces are poorly designed in projective terms and do not match the standards and specificities of television language for developing applications for Interactive Digital Television (idtv). This paper presents the results obtained in the analysis of interfaces T-Commerce applications, based on the study of visual perception defined by the laws of Gestalt, in order to broaden the scope of projective elements to be considered in interface design for T-Commerce, especially those involved in organizing and processing visual information. Keywords: Interface Design, Gestalt, idtv, T-Commerce.

Introdução Os desafios da pesquisa em design de interface 1 para Televisão Digital Interativa (TVDi) são amplos e ainda não totalmente investigados. Neste contexto, a interface gráfica atua como mediadora no processo de comunicação entre interator e conteúdo e, segundo BRENNAND e LEMOS (2007), a função do design de interface é fornecer signos 2 interpretáveis pelo interator que permita a manipulação da informação por meio das metalinguagens 3. A interface de uma aplicação interativa é composta por informações alocadas da forma mais conveniente a propiciar uma eficaz leitura do conteúdo no meio digital, viabilizando a comunicação entre pessoas e algoritmos 4 (CYBIS, 2003). Para MORAN (1981), [...] a interface de usuário deve ser entendida como sendo a parte de um sistema computacional com a qual uma pessoa entra em contato física, perceptiva ou conceitualmente. Em conformidade, COOPER (2007) aponta que cada elemento de uma composição visual tem um número de propriedades, tais como forma e cor, e que elas funcionam em conjunto para criar significado na interface. BOY (2002) concebe a interface como uma forma de apresentação de conteúdos, constituída por elementos textuais, gráficos e sonoros como, por exemplo, janelas, ícones, menus, entre outros conteúdos estáticos ou dinâmicos, a serem diretamente perceptíveis e acessados pelo interator. FREEMAN (2003) enfatiza a televisão como uma atividade de lazer, que tem a necessidade de contemplar uma interface acessível ao tele-interator 5, na qual a falta de solidez no design de interfaces para TVDi tem impactos negativos, causando problemas para todos os envolvidos na sua produção. Assim, posto que as interfaces gráficas são elementos fundamentais para uma aplicação interativa ser assimilada com êxito, o design de interfaces mais próximas das necessidades dos interatores, que representem soluções ao invés de problemas, deve considerar como a informação é aplicada, organizada e distribuída na interface; o deslocamento pelo conteúdo (navegação) a ser realizado pelo tele-interator para obtenção dessa informação; e a interação com os elementos da interface, a partir do controle remoto. Neste sentido, a fim de ampliar o escopo dos elementos projetuais a serem considerados no design de interfaces para TVDi, especialmente aqueles envolvidos na organização e tratamento visual da informação, este artigo, em um primeiro momento apresenta uma análise do cenário atual das interfaces para TVDi, mais especificamente das transações comerciais para televisão (T-Commerce). Em acréscimo, são apontadas algumas iniciativas da British Broadcasting Corporation (BBC), no que concerne à identificação de elementos projetuais envolvidos no design de interface para TVDi. Posteriormente, são apresentados os resultados obtidos na análise de interfaces de aplicações T-Commerce, tendo como referência o estudo da percepção visual definido pelas leis da Gestalt, com vistas ao design de interface mais adequado à realização de transações comerciais pela TVDi. 1 Uma superfície de contato, de tradução ou articulação entre dois espaços, duas espécies, duas ordens de realidade diferentes. (LEVY, 1993). A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra. (JOHNSON, 2001) 2 Signo é toda coisa que substitui outra, representando-a para alguém, sob certos aspectos e em certa medida (PIGNATARI, 2002). O signo está representando outra coisa, está no lugar daquilo que lhe deu origem, gerando associações nas mentes dos indivíduos e diversas reações. 3 Linguagem que se utiliza para descrever outra linguagem ou qualquer sistema de significação. 4 Operação ou processo de cálculo. 5 Conforme Squirra e Becker (2009) a interatividade representa um avanço para os novos contextos de uso e criação de interfaces para aplicações interativas. Elas transformam as relações entre a televisão e seu público, demovendo-o da condição passiva de telespectador à posição ativa de tele-interator. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

1. O Design de Interface nas aplicações para T-Commerce: uma análise do cenário atual Uma análise do cenário atual das interfaces para TVDi, mais especificamente das transações comerciais para televisão, também chamadas de T-Commerce, permite observar que a maioria das aplicações estão relacionadas aos conceitos definidos por GAWLINSKI (2003), entre eles o de TV Expandida, que consiste em serviços interativos relacionados ao programa de televisão; e a Internet na Televisão, que permite ao tele-interator conectar-se à internet para efetuar as transações comerciais, ainda vinculadas aos serviços de E-Commerce. Contudo, independente de ambas as condições, atualmente, a principal referência ao design de interfaces para aplicações T-Commerce constitui-se nas interfaces das aplicações para E- Commerce, nas quais a internet se apresenta como a plataforma voltada às oportunidades de negócio. O E-Commerce permite aos interatores um efetivo instrumento de comercialização de bens e serviços, onde é possível realizar transações comerciais a qualquer hora e em qualquer lugar, pela conexão à rede de acesso móvel. Essa referência explícita, quase mimética, às interfaces E-Commerce para o design de aplicações T-Commerce desconsidera as especificidades da linguagem audiovisual televisiva e, neste sentido, as distinções entre o design de interface para televisão e para internet. Segundo Squirra e Becker (2009), a televisão age de forma ativa, ao oferecer programas sem exigir qualquer atitude do telespectador, que assume, neste contexto, uma condição passiva. Por outro lado, a internet apresenta-se como um meio passivo, sendo o usuário a figura ativa que precisa agir para gerar interação. (...) a interatividade representa um avanço considerável para novos usos e, eventualmente, para novos contextos de uso. As interfaces, e por que não, as aplicações interativas dependem e devem ser desenvolvidas em função desses contextos. [Squirra, Becker, 2009] Conforme SQUIRRA e FECHINE (2009), o design de interface para T-Commerce utilizase de quatro formas básicas para apresentar os elementos na interface: aplicações com redimensionamento da imagem 6 ; aplicação com ocultação parcial da imagem; aplicação com transparência sobre a imagem; e aplicação em tela cheia. Nas aplicações com redimensionamento da imagem, o vídeo é reduzido a uma parte da interface e as demais áreas são ocupadas pela aplicação, como pode ser observado na aplicação T-Commerce History Shop (figura 01), do canal norte-americano History Channel, que oferece informações sobre produtos em paralelo ao vídeo do programa. Vídeo Produtos Figura 01: T-Commerce da History Channel <fonte:http://www.wekellergroup.com/blog/?tag=t- Commerce, acessado em: 08/02/2012.> 6 Conforme [SQUIRRA,FECHINE, 2009] a palavra imagem aqui deve ser entendida como o conteúdo televisivo "tradicional" - imagem e som. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)

Já nos casos com ocultação parcial da imagem, a aplicação se localiza parcialmente sobre o vídeo, como no T-Commerce Shop By Remote, do canal de vendas Home Shopping Network (HSN) (figura 02). Esta proposta pode dificultar o entendimento do programa devido à extensão da área ocupada pelo aplicativo. Vídeo Produtos Figura 02: HSN Shop By Remote <fonte: http://myportfolio.usc.edu/justinek/2010/11/ the_revolutionary_move_itv-commerce.html, acessado em: 08/02/2012.> A aplicação com transparência sobre a imagem é similar à anterior, entretanto, esta utiliza-se de componentes 7 com transparência, como, por exemplo, na aplicação desenvolvida pela empresa brasileira de tecnologia Brava itv (figura 03), onde pode ser observada maior ênfase ao vídeo. Vídeo Produtos Figura 03: T-Commerce da Brava itv <fonte: http://tisc.com.br/inovacao/t-commercecatarinense-na-set-2010/, acessado em: 08/02/2012.> Enquanto na aplicação tela cheia, o programa televisivo é completamente omitido pelo aplicativo, impossibilitando a visualização simultânea destes pelo tele-interator, conforme evidenciado em SeaChange T- Commerce Application Suite (figura 04), destinada à venda de produtos audiovisuais (DVDs, séries, jogos de videogames, entre outros). Nesta proposta, o conteúdo da aplicação não apresenta qualquer vínculo projetual ao vídeo do programa sobreposto, visto que ambos são independentes. Produtos Figura 04: SeaChange T-Commerce Application Suite <fonte: http://www.schange.com/en- US/Products/SubscriberExperience/T-Commerce, acessado em: 08/02/2012.> Os quatro modelos apresentam e organizam os elementos na interface replicando os modelos transacionais para Web e, com isso, descaracterizam a linguagem audiovisual 7 Elementos que compõem a interface e influenciam a navegação. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

televisiva. Como por exemplo, ao se comparar a interface do Shop NBC, E-Commerce do canal de televisão norte-americano NBC à interface do History Shop, T-Commerce da History Channel, é possível observar que, em ambos os casos, as interfaces são compostas por um vídeo em destaque, acompanhado por uma aplicação, semelhante a um menu, localizada nas laterais (figura 05). Aplicação Vídeo Vídeo Aplicação Interface do E-Commerce NBC <fonte: http://tv.shopnbc.com/, acessado em: 08/02/2012.> Interface T-Commerce da History Channel <fonte: http://www.wekellergroup.com/blog/?tag=t- Commerce, acessado em: 08/02/2012.> Figura 05: Mimese das interfaces E-Commerce e T-Commerce O mesmo pode ser notado quando banners são aplicados como elemento de interface em um T-Commerce, a exemplo do aplicativo da Dish Network, empresa norte-americana de TV por assinatura (figura 06). Esse método é tradicionalmente utilizado por sites e portais na internet, com o objetivo de chamar a atenção do interator para uma determinada marca ou produto, similar ao empregado pelo site de vídeos Youtube. Banner Banner Interface do Youtube <fonte: http://www.youtube.com, acessado em: 25/02/2012.> Interface TVDi da Dish Network <fonte: http://www.brightlineitv.com/video/chase- Blueprint.html, acessado em: 25/02/2012.> Figura 06: Aplicação de banners nas interfaces E-Commerce e T-Commerce A partir deste contexto e em vista da necessidade de apontar caminhos projetuais específicos para o design de interfaces para a TVDi, e especialmente, no caso da pesquisa que subsidia a proposta deste artigo, para aplicações T-Commerce, alguns padrões e 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)

particularidades precisam ser considerados na concepção de interfaces para este meio, conforme discorrido a seguir. 2. Aspectos projetuais do Design de Interface para TVDi HANSEN (2012) apresenta algumas iniciativas da British Broadcasting Corporation (BBC), no estabelecimento de diretrizes para o design de interface. De uma forma geral, o guia de estilo discute aspectos relacionados a elementos projetuais para TVDi considerando a área visível e formatos de tela, paleta de cores, tipografia, design de navegação, design de interação e funções do controle remoto. O formato da tela da televisão no sistema digital é o widescreen, que possui uma proporção de 16:9 (figura 07), semelhante às telas de cinema. Enquanto o sistema analógico opera na proporção 4:3. Figura 07: Formato de tela Digital e Analógica. Fonte: http://g1.globo.com/noticias/tecnologia/foto/0,,33345535-fmm,00.jpg, acessado em: 03/03/2012. Os grids e malhas para TVDi são projetados para utilizar uma área de 640 por 480 pixels. Eles respeitam um espaço de área segura para texto e imagem, também denominado SAFE AREA (figura 08), visando garantir que o conteúdo seja transmitido por completo, sem cortes/perda de imagem, em todos os tipos de televisores. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

Área segura para imagens Vídeo Área segura para textos Figura 08: Grid da área segura para textos e imagens. Fonte: http://www.tvdi.inf.br/site/artigos/guia%20de%20estilo%20e%20usabilidade%20-%20bbc%20londres/itv- DesignTrigger_v1.pdf>. Acesso em: 19 Fev. 2012. O uso das cores nas interfaces para TVDi é mais restrito se comparado ao seu emprego na Web. O guia de estilo aconselha não utilizar cores muito saturadas ou com muita luminosidade, visto que estas podem causar distorções na imagem, gerando linhas sobrepostas ou efeito fantasma (figura 09). Em acréscimo, elementos com muitos detalhes podem causar o surgimento dos padrões de moiré 8. Assim como a cor branca no fundo da interface deve ser evitada, devido à distorção de imagem, e consequente fadiga visual do tele-interator, que esta pode provocar. Figura 09: Exemplo de cores saturadas e padrão de moiré. Fonte: http://www.tvdi.inf.br/site/artigos/guia%20de%20estilo%20e%20usabilidade%20-%20bbc%20londres/itv- DesignTrigger_v1.pdf>. Acesso em: 19 Fev. 2012. Conforme as especificações apontadas pelo guia de estilos da BBC, o tamanho da fonte para títulos ou corpo dos textos não devem ser menores que 24 pontos, assim como para outras aplicações recomenda-se a utilização de tipos iguais ou maiores que 18 pontos, tendo em vista, em ambos os casos, garantir satisfatórias legibilidade e leiturabilidade das informações textuais. É indicada, ainda, a adoção da tipografia Gill Sans 9 ou Tirésias 10 (Figura 10), evitandose sempre o uso de fontes serifadas 11. 8 Padrão de interferência criado, por exemplo, quando duas grades apresentam movimento relativo entre si em referência a um observador, gerando um determinado padrão por meio de franjas. 9 Projetada por Eric Gill (Gill 2005). 10 Projetada pelo núcleo de Pesquisas liderado pelo Dr. john Gill, do Royal National Institute for the Blind (Tirésias, 2005). 11 Pequeno traço ou espessamento que remata, de um ou ambos os lados, os terminais das letras não lineares de caixa-alta e caixa-baixa 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)

Figura 10: Fonte Tiresias e Gill Sans recomendadas para as Interface de TVDi. Fonte: http://www.tvdi.inf.br/site/artigos/guia%20de%20estilo%20e%20usabilidade%20-%20bbc%20londres/itv- DesignTrigger_v1.pdf>. Acesso em: 19 Fev. 2012. Outro elemento predominante nas interfaces para TVDi são os ícones 12. Eles sintetizam visualmente as principais características de conteúdos relevantes, para os quais também propiciam o acesso ao tele-interator como, por exemplo, na aplicação da Chase BluePrint que transmite instruções de navegação e interação por meio dos ícones dispostos na parte superior da interface (Figura 11), ou podem, ainda, ser utilizados para indicar a existência de uma interação durante uma programação, como no exemplo do programa Shark, da Discovery Channel (Figura 12). Figura 11: Interface Chase BluePrint <fonte: http://www.brightlineitv.com/video/chase- Blueprint.html, acessado em: 25/03/2012.> Figura 12: Interface Shark da Discovery Channel <fonte: http://www.youtube.com/watch?v=l- MLqH0lHQU, acessado em: 13/03/2012.> Em acréscimo, atualmente, o controle remoto é indispensável para realizar as interações entre o tele-interator e a interface da televisão. A navegabilidade por meio deste ocorre basicamente com o uso dos botões coloridos, setas direcionais e o botão OK (figura 13). É aconselhável o uso de listas para a escolha de conteúdos na interface, assim como, diferenciá-los pela cor correspondente ao botão (HANSEN, 2012). 12 Representação gráfica de um objeto, conceito ou ação. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

Figura 13: Botões para navegação e interação nas interfaces para TVDi. Fonte: http://www.tvdi.inf.br/site/artigos/guia%20de%20estilo%20e%20usabilidade%20-%20bbc%20londres/itv- DesignTrigger_v1.pdf>. Acesso em: 19 Fev. 2012. O processo de criação e desenvolvimento de interfaces para TVDi requer cuidados e envolve necessidades a serem atendidas. De acordo com COOPER (2007), as interfaces devem: apresentar uma clara hierarquia informacional para a navegação pelos elementos na interface; utilizar imagens coerentes e contextualmente adequadas; propiciar a integração entre aspectos estéticos e funcionais; bem como, evitar ruído e desorganização visuais. Neste sentido, e com o objetivo de ampliar o escopo dos elementos projetuais a serem considerados no design de interface para T-Commerce, especialmente aqueles envolvidos na organização e tratamento visual da informação, o presente artigo expõe os resultados obtidos na análise de interfaces de aplicações T-Commerce, tendo como referência o estudo da percepção visual definido pelas leis da Gestalt 13, conforme apresentado a seguir. 3. Elementos projetuais para o Design de Interface de aplicações T-Commerce: uma análise pela perspectiva dos conceitos da Gestalt Dentre as diversas categorias conceituais que constituem os estudos da Gestalt, foram identificadas treze evidências das suas aplicações nas interfaces para T-Commerce: a Simetria; a Assimetria; o Contraste; o Contraste de Cor; o Contraste Horizontal e Vertical; a Minimidade; a Exageração; o Arredondamento; a Transparência Física; a Opacidade; a Redundância; a Sequencialidade e a Sobreposição (GOMES FILHO, 2004). O conceito de simetria está relacionado ao equilíbrio da interface, que pode estar presente em um ou mais eixos, nas posições horizontal, vertical, diagonal e inclinada. Nas interfaces da TV Coreana CJ-TMall, por exemplo, é possível observar formulações visuais simétricas, ou seja, as unidades de um lado apresentam-se simetricamente dispostas em relação as do outro (Figura 14). Em contrapartida, a assimetria consiste exatamente no 13 Também conhecida como teoria da forma, na sua origem, representada por Max Wertheimer (1810/1943), Wolfgang Kohler (1887/1967), Kurt Koffka (1861/1941), passando por design gráfico voltados para melhores resultados que objetivam aperfeiçoar a percepção visual dos seres humanos até os estudos de usabilidade para interfaces gráficas interativas, todos esses estudos visam minimizar a carga de trabalho e maximizar os efeitos positivos no entendimento das ações para os processos de ensino e de aprendizagem. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)

oposto, nenhum dos lados da interface possuem qualquer elemento de semelhança entre os eixos horizontal, vertical ou diagonal, conforme evidenciado nas aplicações da HSN, emissora de TV norte-america dedicada à venda de produtos (Figura 15). Figura 14: Interface do CJ-TMall <fonte: http://jeremy68.tistory.com/39, acessado em: 13/03/2012.> Figura 15: Interface da HSN <fonte: http://medianomad.egloos.com/308837, acessado em: 13/03/2012.> No que concerne ao contraste, este conceito é perceptível por meio da presença ou ausência de luz. E pode ser verificado na construção de elementos da interface que auxiliam a navegação do tele-interator, como por exemplo, nas interfaces dos aplicativos da rede de pizzaria Pizza Hut, nas quais o tele-interator seleciona itens no menu de opções do Delivery (Figura 16). Figura 16: Interface do aplicativo da Pizza Hut <fonte: http://medianomad.egloos.com/308837, acessado em: 13/03/2012.> O contraste de cor pode ser empregado para expressar e reforçar a informação visual, como no exemplo da interface proposta pela HSN (Figura 17), na qual a escolha e seleção do produto é realçada com o uso de cores que destacam o produto a ser adquirido. Enquanto o contraste vertical e horizontal diz respeito ao tamanho e forma dos elementos na interface. Neste sentido, as formas horizontais tendem a sugerir a sensação visual de solidez e estabilidade sobre o plano em que se assentam, ao contrário das verticais como no exemplo do aplicativo disponibilizado pelo Banco do Brasil para consulta de saldo e extrato de contas (Figura 18), que, nessa posição, transmite a sensação de leveza e instabilidade. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

Figura 17: Interface HSN <fonte: http://medianomad.egloos.com/308837, acessado em: 13/03/2012.> Figura 18: Interface Banco do Brasil <fonte: http://www.thedevelopersconference.com.br/ arquivos/tdc/2011/tdc2011sp-tvdigital-02-t- Commerce-e-T-Banking.pdf, acessado em: 13/03/2012.> Já o conceito de minimidade visa realçar a clareza e a simplicidade da função do elemento na interface, indicando a aplicação apenas do elemento essencial para estimular a interação como, por exemplo, as mensagens de produtos relacionados à programação propostos pelos aplicativos da Brava itv (Figura 19). Por outro lado, a exageração considera exatamente o oposto, trata-se da disposição dos elementos na interface de forma extravagante, intensa e amplificada, como pode ser observador nas aplicações do supermercado Walmart ocupando a interface em sua totalidade (Figura 20). Figura 19: Interface de T-Commerce da Brava itv <fonte: http://bravaitv.com.br/platz/inicial, acessado em: 13/03/2012.> Figura 20: Interface do Walmart <fonte: http://www.thedevelopersconference.com.br/ arquivos/tdc/2011/tdc2011sp-tvdigital-02-t- Commerce-e-T-Banking.pdf, acessado em: 13/03/2012.> O conceito de arredondamento tem como característica marcante a suavidade e a maciez visuais das formas orgânicas (Figura 21), conforme observado nas formas dos elementos gráficos utilizados no aplicativo da rede de pizzaria Domino's Pizza. Enquanto a transparência física é utilizada com o intuito de permitir a visualização do vídeo mesmo com a aplicação sobreposta a ele, como no exemplo do aplicativo proposto pela Brava itv, que propicia o preenchimento, pelo tele-interator, dos dados bancários sem omitir o vídeo (Figura 22). 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)

Figura 21: Interface Dominos Pizza <fonte: http://conteudo.imasters.com.br/ 18036/tivo_dominos_pizza-480x359.jpg, acessado em: 13/03/2012.> Figura 22: Interface T-Commerce Brava itv <fonte: http://bravaitv.com.br/platz/inicial, acessado em: 13/03/2012.> Em contrapartida, o conceito de opacidade consiste exatamente no oposto e implica no bloqueio ou ocultação da interface. Por exemplo, durante a transmissão de uma partida de futebol a visualização de parte do vídeo é omitida com a sobreposição da aplicação T- commerce da Netshoes, para aquisição de artigos esportivos, relacionados ao conteúdo exibido (Figura 23). Já a redundância caracteriza-se pela repetição ou excesso de elementos iguais na interface (Figura 24), como no exemplo do portal interativo do canal de TV SBT, no qual as informações relacionadas à programação, notícias, participação do tele-interator e ao SBT Store (Loja de Produtos) são dispostas na interface de forma idêntica. Vídeo Aplicação Figura 23: Interface da Netshoes <fonte: http://www.behance.net/gallery/social-tv- Design/2530593, acessado em: 23/04/2012.> Figura 24: Interface do Portal Interativo do SBT <fonte: http://ztop.com.br/2012/04/09/hands-on-gingapara-tv-digital-2012-sim-ele-existe-e-funciona/, acessado em: 10/04/2012.> O conceito de sequencialidade apresenta-se similar ao conceito de redundância, entretanto se refere à ordem dos elementos e sua organização de modo contínuo e lógico em uma interface. No aplicativo da CJ-Tmall, a sequencia pode ser observada no alinhamento lado a lado dos produtos, bem como na ordem numérica associada a estes (Figura 25). Enquanto a sobreposição é traduzida pela organização de elementos dispostos uns sobre os outros (Figura 26), como nas interfaces do QVC, um canal de TV dedicado a venda de produtos, nas quais é possível visualizar camadas informacionais sobrepostas: dados do produto sobrepõem-se ao respectivo vídeo, que apresenta-se sobreposto à imagem de fundo. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

Figura 25: Interface CJTMall <fonte: http://jeremy68.tistory.com/39, acessado em: 13/03/2012.> Figura 26: Interface QVC <fonte: http://cfs7.tistory.com/image/21/tistory/ 2008/08/01/10/20/489264f7beedd, acessado em: 13/03/2012.> A identificação destes elementos projetuais pela perspectiva dos conceitos da Gestalt visa ampliar o escopo de aspectos a serem considerados para o design de interfaces de aplicações T-Commerce. Para tanto, a articulação entre estes elementos deve ser realizada em acordo com a proposta conceitual do aplicativo T-Commerce em questão, bem como com as especificidades da linguagem audiovisual televisiva. Por exemplo, uma das características do vídeo na televisão é o de ser apresentado em sua totalidade. Quando um aplicativo sobrepõese à camada do vídeo, é preciso preservar elementos fundamentais da linguagem audiovisual, para que os elementos visuais da aplicação interativa não comprometam a estética do vídeo e, conseqüentemente, o seu significado. Assim, categorias conceituais da Gestalt, como exageração, opacidade, redundância e sobreposição podem comprometer o design de interfaces para aplicações T-Commerce, visto que estas contribuem para a omissão total/parcial, redução ou bloqueio da visualização do programa televisivo. Ou seja, o vídeo, em sua plenitude, é o principal recurso empregado nas transmissões televisivas, sejam elas analógicas ou digitais, e deve ser utilizado de forma integrada aos elementos interativos. Neste sentido, conforme afirma FRANÇA (2008), não é recomendado interromper uma programação para efetuar uma transação comercial, enquanto há outras pessoas na sala assistindo ao mesmo programa. Um outro cuidado para o qual os designers devem atentar-se, no desenvolvimento projetual de aplicações T-Commerce, consiste em considerar como as informações transacionais se organizam na interface de modo a correlacionarem-se à segurança da informação, assunto este a ser plenamente desenvolvido em artigo específico. Conclusões A linguagem visual das interfaces para televisão estão em constante transformação. Na televisão analógica, muitos padrões e paradigmas foram criados ao longo de sua existência, estabelecendo uma linguagem estética própria do meio, bem como uma rede sólida de produção de conteúdo, envolvendo agências, produtoras e emissoras. Na televisão digital, a programação interativa está passando por um processo de pesquisa e definições sobre padrões de produção e modelos de negócios viáveis. Neste cenário abrem-se muitas possibilidades para se projetar e estabelecer novas interfaces de interação com o público. As pessoas estão 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)

cada dia mais conectadas e mais participativas, o que as tornam mais exigentes e em busca de interfaces e narrativas mais customizadas. Neste contexto, o design de interface tem muito a contribuir para a criação, design e aprimoramento das aplicações T-Commerce, visando a criação de aplicativos mais adequados à realização de transações comerciais pela televisão, considerando também a segurança da informação no ato da compra. Assim, elaborar projetos de design que considerem as especificidades da linguagem televisiva, sem replicar os padrões visuais do design de web, consiste em um dos grandes desafios para os designers de interface para TVDi. Para tanto, compreende-se a necessidade em ampliar o escopo de elementos projetuais, a serem considerados para o design de interface de aplicações T-Commerce, tendo em vista colaborar com a indicação de definições projetuais, no âmbito da interface gráfica, que propiciem a plena integração entre o vídeo e os elementos de interatividade. Neste sentido, a aproximação às categorias da Gestalt mostrou-se relevante para os estudos do design de interface em aplicações T-Commerce, visto que propiciou a identificação de outros elementos projetuais a serem considerados neste contexto, para além dos contemplados em HANSEN (2012) e SQUIRRA e FECHINE (2009). Referências BOY, G. L'ingénierie cognitive: IHM et cognition. Paris: Hermès Science, 2002. BRENNAND, E.; LEMOS, G. Televisão Digital Interativa: reflexões, sistemas e padrões. São Paulo: Ed. Horizonte, 2007. COOPER, A.; REIMANN, R.; CRONIN, D. About Face 3: The Essentials of Interaction Design. Indianapolis: Wiley Publishing Inc., 2007. CYBIS, W. A. Engenharia de usabilidade: uma abordagem ergonômica. Florianópolis: Labiutil, 2003. FRANÇA, D. Televisão sob demanda: a revolução digital da mídia. Monografia de mídia televisão. Prêmio de Mídia Estadão, 2008. FREEMAN, J.; LESSITER, J. Easy TV 2002 Research Report. London: University of London, 2003. GAWLINSKI, M. Interactive Television Production. Oxford, England: Focal Press, 2003 GOMES FILHO, J. Gestalt do objeto: sistema de leitura visual da forma. 6. ed. São Paulo: Escritura Ed., 2004 JOHNSON, S. Cultura da interface: como o computador transforma nossa maneira de criar e comunicar. Rio de Janeiro: Zahar, 2001. LÉVY, P. As tecnologias da inteligência: o futuro do pensamento na era da informática. Trad. Carlos Irineu da Costa. Rio de Janeiro: Ed. 34, 1993. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA).

MORAN, T. (1981) The Command Language Grammars: a representation for the user interface of interactive computer systems. International Journal of Man-Machine Studies 15:3-50, Academic Press. PIGNATARI, D. Informação, linguagem, comunicação. São Paulo: Ateliê, 2002. SILVA, J.C. Merchandising no varejo de bens de consumo. São Paulo: Atlas, 1990. SQUIRRA, S.; BECKER, V. TVDigital.br - Conceitos e estudos sobre o ISDB-TB. São Paulo: Ateliê Editorial, 2009. SQUIRRA, S.; FECHINE, Y. Televisão Digital - Desafios para comunicação. Porto Alegre: Editora Sulina, 2009. 10º Congresso Brasileiro de Pesquisa e Desenvolvimento em Design, São Luís (MA)