padroes de projeto de interface para aplicativos android ... antonio barbosa... · universidade...

70
UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB Padrões de Projeto de Interface para Aplicativos Android para o Google TV Nelson Antonio Barbosa Prof. Me. Munif Gebara Júnior Orientador Maringá - Paraná 2013

Upload: letuyen

Post on 11-Sep-2018

215 views

Category:

Documents


0 download

TRANSCRIPT

UNIVERSIDADE ESTADUAL DE MARINGÁ

CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA

ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB

Padrões de Projeto de Interface para Aplicativos Android para o Google TV

Nelson Antonio Barbosa

Prof. Me. Munif Gebara Júnior

Orientador

Maringá - Paraná

2013

1

UNIVERSIDADE ESTADUAL DE MARINGÁ

CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA

ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB

Nelson Antonio Barbosa

Padrões de Projeto de Interface para Aplicativos Android para o Google TV

Trabalho submetido à Universidade Estadual de Maringá como

requisito para obtenção do título de Especialista em

Desenvolvimento de Sistemas para Web.

2

UNIVERSIDADE ESTADUAL DE MARINGÁ

CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA

ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB

Nelson Antonio Barbosa

Padrões de Projeto de Interface para Aplicativos Android para o Google TV

Profo. Me. Munif Gebara Júnior (Orientador) Ass.:________________________

Profo. Dr. Yandre Maldonado e Gomes da Costa Ass.:________________________

Profo. Me. Flávio Rogério Uber Ass.:________________________

Maringá - Paraná

2013

3

Dedico este trabalho

à minha esposa, Teresa Kazuko Teruya e,

à minha filha Vanessa Retrovato Barbosa.

4

Agradecimentos

Ao meu Orientador Professor Me. Munif Gebara Júnior, pelo apoio e confiança;

Aos Professores Dr. Yandre Maldonado e Gomes da Costa e Me. Flávio Rogério Uber,

pela aceitação em participar da banca de defesa desta monografia;

Ao Coordenador do curso Professor Dr. Wesley Romão;

Aos professores do DIN - Departamento de Informática da UEM que compartilharam

seus conhecimentos;

Aos colegas da turma, pela amizade e compartilhamento de conhecimentos.

5

Lista de Figuras

Figura 1 estatística da evolução dos celulures no mundo 11

Figura 2 layout otimizado para TV 35

Figura 3 resoluções e dimensões 37

Figura 4 seleção e foco 43

Figura 5 padrão de grade para navegação UI 44

Figura 6 alinhamento de rolagem e layout de grade 45

Figura 7 tamanha de telas comparativas 46

Figura 8 zonas de aplicação 47

Figura 9 exemplo de aplicação 48

Figura 10 zonas do aplicativo de exemplo 49

Figura 11 zonas de TV 50

Figura 12 padrões de TV 50

Figura 13 zona Tablet 51

Figura 14 patterns Tablet 51

Figura 15 zonas de telefone 52

Figura 16 padrões de telefonia 52

Figura 17 padrões e zonas 53

Figura 18 padrão prateleira de conteúdo 54

Figura 19 padrão grade de conteúdo 54

Figura 20 padrão lista de conteúdo 55

Figura 21 padrão lista de conteúdo em cascata 55

Figura 22 padrão detalhe restante 56

Figura 23 padrões de guias de subseção 56

Figura 24 tipo de padrão de filtro 57

Figura 25 tipo de padrão de filtro ampliado 58

Figura 26 várias listas de opções, minimizada 58

Figura 27 várias listas de opções, expandida 59

Figura 28 a zona de organização de padrão desejável 60

Figura 29 zona indesejável e padrão de layout 61

6

Lista de Tabelas

Tabela 1 categoria dos padrões projetos (GOF) 17

Tabela 2 padrões projetos criacionais 17

Tabela 3 padrões projetos estruturais 18

Tabela 4 padrões projetos comportamentais 18

Tabela 5 padrões de navegação primários e secundários 19

Tabela 6 Outras categorias de padrões e antipadrões de interface 20

Tabela 7 padrões de projeto para o Android 21

Tabela 8 antipadrões de projeto para o Android 29

Tabela 9 padrões de Java JEE 30

Tabela 10 configurações do Android para Google TV 34

7

Sumário

1 Considerações Iniciais 10

1.1 Introdução 10

1.2 Objetivo Geral 12

1.3 Objetivo Específico 12

1.4 Definição do Problema 13

1.5 Justificativa 13

1.6 Motivação 14

1.7 Metodologia 14

2 Fundamentação Teórica 15

3 Definição e Contextualização 32

3.1 Designers Patterns Google TV 32

3.1.1 The 10ft Environment (Meio Ambiente 10 pés) 33

3.1.2 TVs Displays (Displays de TV) 34

3.1.3 Sound and the UI (O som e a interface do usuário) 39

3.1.4 Navigation Design (Projeto de Navegação) 40

3.1.5 User Interface Desing (Projetos de interface do usuário) 46

3.1.6 UI Zones and Patterns (zonas de interface do usuário e padrões) 47

3.1.7 UI Performace (Desempenhos UI) 61

3.1.8 Additional Tips (Dicas adicionais) 62

4 Resultado da pesquisa 64

5 Considerações finais 66

Referência bibliográfica 68

8

Resumo

Este estudo apresenta uma pesquisa bibliográfica sobre os padrões de projetos existentes

e utilizados no desenvolvimento de aplicativos em Android. O objetivo é investigar os

padrões de projetos de interface existente e utilizados no desenvolvimento de

aplicativos para plataforma Android Google TV. Descreve a existência de vários

padrões de projetos utilizados no desenvolvimento de projeto de software, nas diversas

linguagens de programação disponíveis no mercado. Aponta um conjunto de

recomendações sobre padrões de projetos de interface aplicados no desenvolvimento de

aplicação para o Google TV.

Palavras-chaves: Padrões de projetos; Aplicativo; Android; Plataforma;

Desenvolvimento.

9

Abstract

This paper presents a bibliography research about project patterns developed for use in

Android applications. The main purpose of this study is to investigate the interface

patterns used in platform for building Android Google TV applications. It describes the

existence of many project patterns used in the building of software project and in the

variety of programming languages available in the market. It indicates an entirety of

recommendations about interface Android project patterns for use in the building of

Google TV.

Keywords: Project patterns; application; Android; Platform; Building.

10

1 Considerações Iniciais

1.1 Introdução

O mercado para aplicativos móvel tem crescido nos últimos tempos, uma tendência que

despertou o interesse das maiores empresas e de profissionais de desenvolvimento de

software que tem como objetivo criar aplicações para comercializá-las. “A gama de

opções atualmente em um dispositivo móvel é imensamente superior alguns anos atrás”

(MORAIS, 2012, p. 1) com mais recursos do que antes.

Segundo Lecheta (2012, p.16) “a disputa no mercado de mobilidade está extremamente

acirrada, com diversas inovações e lançamentos acontecendo em todos os lugares, e

mesmo os especialistas sentem dificuldade em acompanhar tamanha evolução”. A

figura 1 ilustra um gráfico com a evolução dos celulares no mundo.

Figura 1 – estatística da evolução dos celulures no mundo (Teleco – Inteligência em

Telecomunicações. Estatísticas de Celular no Mundo, 2013).

O desenvolvimento de aplicativos móveis para iOS (sistema operacional) da Apple,

Android do Google, e também para plataforma do Google TV “É um mercado grande,

que acena com oportunidades a quem se interessar por ele” (Aplicativos para celular,

Vida Digital, 03/06/2011).

11

Para efetuar a publicação de aplicativos no Google Play é preciso criar uma conta com o

perfil de desenvolvedor, também é necessário concordar com o contrato de distribuição

do desenvolvedor e pagar um taxa de registro com cartão de crédito no Google

Checkout. Se não possuir uma conta no Google Checkout, é preciso configurar uma

durante o processo de registro. Para vender aplicativos no Google Play precisa

configurar uma conta para cobrança de cartão de crédito no Google Checkout.

(DEITEL, 2012, p. 44-45).

Na Apple existem três modalidades de licenciamentos: licença Simples não comercial;

licença Standart e licença Enterprise. O processo de aquisição das licenças é todo

realizado no site iOS Developer Center. O processo todo pode levar alguns dias, pois

depende da análise e aprovação da Apple. (MILANI, 2012, p.17-18).

O crescente desenvolvimento de aplicações móveis e a competição no mercado

surgiram à necessidade de aumentar a qualidade, manutenibilidade e a clareza do código

desenvolvido, dessa forma é preciso aplicar padrões de projetos para programação de

aplicativos para esses dispositivos, seja eles: Symbian, iOS (sistema operacional da

Apple), Android ou Windows Fone.

Segundo Nudelman (2012, p.18), o conceito de “padrão de projeto (no original, em

inglês, design pattern) é uma solução replicável que resolve um problema particular

dentro de um contexto específico. [...] O que torna os padrões de projeto singularmente

eficazes é a forma pela qual eles transmitem boas práticas, ao mesmo tempo em que

tratam as complexidades existentes em problemas reais de projetos”.

O design patterns são utilizados por muitas empresas que buscam a implementação de

novos projetos de softwares ou melhorarem os antigos. Teve início com “Cristopher

Alexander, um professor de arquitetura em Berkeley” (FREEMAN, 2009, p.452), que

desenvolveu uma técnica de solução de problemas relacionados à engenharia civil.

O ambiente dos dispositivos móveis é limitado, especialmente pelo tamanho dos

dispositivos. Portando, surge a necessidade de aplicar padrões de interface gráfica.

Dentre esses padrões, existem os de navegações que são classificados em: “padrões

primários [...] e padrões secundários [...]” (NEIL, 2012, p.17).

12

Este estudo foi baseado nas pesquisas sobre o sistema operacional Android no

desenvolvimento de aplicativos para a plataforma do Google TV. Foram pesquisados os

padrões de projetos para as interfaces gráficas existentes utilizadas no desenvolvimento

de aplicativos em Android para a plataforma Google TV.

Existem vários sistemas operacionais para dispositivos móveis no mercado, por

exemplo: o iOS que é o sistema operacional da Apple; o Android do Google e o

Windows Fone da Microsoft. Diante disso, este trabalho focou nas pesquisas sobre a

utilização dos padrões de projetos para desenvolvimento de aplicativos destinados a

esses sistemas operacionais.

1.2 Objetivo Geral

- investigar quais os padrões de projetos de interface existente e utilizados no

desenvolvimento de aplicativos para plataforma Android Google TV.

1.3 Objetivos Específicos

- pesquisar os padrões de projetos utilizados no desenvolvimento de aplicativos para o

sistema operacional Android.

- investigar exclusivamente a existência dos padrões ou recomendações para a

plataforma Android do Google TV.

13

1.4 Definição do Problema

O problema é: Quais os padrões de projeto de interface gráfica que poderá ser utilizado

no desenvolvimento de aplicativos para plataforma Android da Google TV. Existe ou

não padrão específico, e será possível ou não a sua aplicação?

1.5 Justificativa

Esta pesquisa justifica-se pela necessidade de investigar a existência de padrões de

projetos específicos e sua aplicabilidade no desenvolvimento de aplicativos em Android

para o Google TV. O sistema operacional Android tem a vantagem sobre outras

plataformas, que é o desenvolvimento em linguagem de programação Java. Esta é uma

das linguagens de programação mais utilizada no mundo.

Existem vários padrões de projetos que são utilizados no desenvolvimento de projeto de

software, nas diversas linguagens de programação disponíveis no mercado. Dentre esses

padrões, têm-se o Designer Patterns Gang of Four ou GoF, que conta com 23 padrões

aplicados no desenvolvimento de produto de software. Na programação em Java

existem os padrões Java EE. “O catálogo atual (setembro/2003) define 21 padrões [...]”

(ROCHA, 2003, p. 30) dividido em 3 camadas, sendo: 8 na camada de apresentação; 9

na camada de negócios e 4 na camada de integração. No desenvolvimento para

aplicações para o Android “há 58 padrões de projeto de interação essenciais, que lidam

com os principais aspectos na construção de aplicativos” (NUDELMAN, 2012, p.18).

Além dos 58 padrões, “há 12 antipadrões que descrevem os erros mais comuns a serem

evitados” (NUDELMAN, 2012, p.19) nas aplicações para o Android. Além dos padrões

já mencionados, existem ainda 10 padrões de navegação de interface gráfica utilizado

no desenvolvimento de aplicativos para plataforma móveis, os quais classificam em

“padrões primários de navegação [...] e padrões secundários de navegação [...]” (NEIL,

2012, p.17).

14

1.6 Motivação

Embora, os padrões de projetos estejam muitos difundidos nas aplicações

convencionais, como aplicativos desktop, web e alguns desses padrões podem ser

utilizados em aplicativos móveis, como Android por exemplo. Portanto, qual padrão de

design de interface poderá ser utilizado no desenvolvimento de aplicativos para o

sistema operacional Android para o Google TV.

1.7 Metodologia

Com base na pesquisa bibliográfica, foram analisados os padrões de projeto de interface

que poderão ser aplicados no desenvolvimento de aplicativos para plataforma Google

TV, focando no padrão de projeto de interface gráfica. O estudo realizado focou no

desenvolvimento de aplicativo para essa plataforma, visando à facilidade de navegação

pelo usuário.

15

2 Fundamentação Teórica

Segundo Milani (2012, p.14) “o mercado de aplicações para dispositivos móveis está

em altíssimo crescimento”. “O mercado é muito grande e segue com uma taxa muito

alta de crescimento” (MILANI, 2012, p.15). Diante disso, nota-se a evolução do

mercado de dispositivos móveis. “A gama de opções atualmente em um dispositivo

móvel é imensamente superior alguns anos atrás” (MORAIS, 2012, p. 1). Com esta

evolução contínua, hoje tem muito mais recursos. “Um smartphone é um telefone

inteligente” (MORAIS, 2012, p. 1), com muito mais recursos do que antes. Não é

apenas um telefone com as funções restritas: ligar, desligar, agenda, calculadora, mas

possui recursos de um computador portátil, como: acessar internet, editar documentos,

tirar fotos, ouvir música, assistir vídeos, jogar, entre outras funcionalidades. Para que

esta evolução ocorra, precisa de uma plataforma (sistema operacional), um software

sobre o qual as aplicações do aparelho são construídas. A plataforma faz a comunicação

entre as aplicações e o hardware.

Existem mais de uma plataforma, com fabricantes diferentes. As principais plataformas

existentes hoje para dispositivos móveis são: Symbian OS da Nokia – Atualmente a

plataforma mais utilizada no mundo, mas está perdendo espaço para as novas

plataformas que estão surgindo; Windows Fones da Microsoft – Plataforma baseada em

Windows para dispositivos móveis; iOS da Apple – Plataforma da Apple para iPhone e

iPad; Android do Google – Plataforma gratuita e de código aberto criada pela Open

Handset Alliance , com iniciativa da Google.

Além dos aplicativos móveis, surgiram também, os aplicativos para o Google TV que

utiliza a plataforma Android para seus aplicativos.

A primeira geração de telefones Android foi lançada em outubro de

2008. De acordo com a Gartner, as vendas de telefones baseados em

Android nos Estados Unidos aumentaram 707% no primeiro trimestre

de 2010, em relação ao ano anterior (DEITEL, 2013, p. 4).

Diante da necessidade de desenvolver produto de software de qualidade, surge a

implementação dos Padrões de Projetos com o livro Design Patterns Elements of

Reusable Object-Oriented Software em 1995 por Eric Gamma, Richard Helm, Ralph

Johnson e John Vlissides, também conhecido como a “Gangue dos Quatro (Gang of

Four, ou GoF)” (FREEMAN, 2009, p. 451), que descreveu 23 padrões de

16

implementações baseadas em suas experiências. “Os padrões não começaram com a

GoF, eles começaram com Cristopher Alexandre, um professor de arquitetura em

Berkeley” (FREEMAN, 2009, p. 452).

O design patterns é utilizado por muitas empresas que buscam implementar novos

projetos de software ou melhorar os antigos. Teve início com “Cristopher Alexander,

um professor de arquitetura em Berkeley” (FREEMAN, 2009, p. 452), que desenvolveu

uma técnica de solução de problemas relacionados à engenharia civil.

A técnica foi migrada para engenharia de software podendo ser trabalhada em RUP ou

UML. A implementação de Design Patterns não é muito simples, pois não existe um

modelo definido. “No mundo do software, um padrão é uma manifestação tangível da

memória tribal de uma organização” (ZANDTRA, 2009, p.117).

O design pattern apresenta muitas vezes uma solução comum para determinado

problema, a solução é descrita e feita de uma forma abstrata, permitindo ao engenheiro

determinar detalhes e algumas especificações de um design patterns. “Portanto, um

estudo sobre padrões de projeto pode oferecer mais de uma solução específica num

contexto”. (ZANDTRA, 2009, p. 123).

Os padrões de projetos ou design patterns foram criados para facilitar e diminuir a

complexidade da implementação de sistemas, dessa forma, as empresas não poderiam

deixar de utilizar em suas plataformas e disponibilizar em seus SDKs componentes e

estruturas que fizessem uso de tais padrões. “Os padrões de projeto demonstram e

aplicam princípios de projeto orientado a objeto” (ZANDTRA, 2009, p. 123).

A força crescente no desenvolvimento de aplicações móveis e a competição no mercado

surgiram à necessidade de aumentar a qualidade, manutenibilidade e clareza do código

desenvolvido, dessa forma é preciso aplicar padrões de projeto para programação de

aplicativos para esses dispositivos, seja eles: Symbian, iOS (sistema operacional da

Apple), Android ou Windows Fone.

Diante desse mercado de dispositivos móveis em expansão e a necessidade de

desenvolver aplicativos de qualidade para essas plataformas. Dessa forma, é

17

recomendado no desenvolvimento de aplicações para essas plataformas, o uso de

padrões de projeto para interfaces gráficas. Estes padrões é um conjunto de práticas

amplamente aplicadas que aprimora a experiência do usuário. Seguir padrões de design

garantirá o melhor aproveitamento dos valiosos recursos do aplicativo.

O ambiente de dispositivos móveis difere dos de aplicações convencionais desktop ou

web. Eles são limitados, especialmente pelo tamanho do dispositivo, a velocidade do

processador, tamanho da memória, e também pela capacidade da bateria. Em virtude

dessas limitações, o desenvolvimento tradicional de software precisa ser adaptado para

dispositivos móveis. A programação para dispositivos móveis deve levar isso em

consideração, e a programação deve adaptar-se às propriedades do dispositivo.

Segundo Freeman (2009, p. 444), “os padrões de projetos (Gang of Four ou GoF)

dividem em três categorias distintas com base na sua finalidade: criacionais, estruturais

e comportamentais”, conforme tabela 1.

Categorias Descrição

Criacionais Envolvem a criação de instâncias de objetos; todos fornecem

alguma maneira de desconectar o cliente dos objetos a partir

dos quais serão geradas instâncias.

Estruturais Permitem que organize classes ou objetos em estruturas

maiores.

Comportamentais Preocupam-se com a forma como as classes e objetos

interagem e com a distribuição de responsabilidades.

Tabela 1 – categoria dos padrões projeto (GOF).

Os padrões de projetos de criação são os seguintes, conforme tabela 2.

Criacional

Buider Separar a construção de objeto complexo da representação

para criar representações diferentes com mesmo processo.

Prototype Especificar tipos a criar usando uma instância como

protótipo e criar novos objetos ao copiar este protótipo.

Singleton Garantir que uma classe só tenha uma única instância, e

prover um ponto de acesso global a ela.

Factory Method Definir uma interface para criar um objeto, mas deixar

que subclasses decidam que classe instanciar.

Abstract Method Prover interface para criar famílias de objetos

relacionados ou dependentes sem especificar suas classes

concretas.

Tabela 2 – Padrões de projetos criacionais.

18

Os padrões estruturais são os seguintes, conforme tabela 3.

Estrutural

Adapter Converter a interface de uma classe em outra interface

esperada pelos clientes.

Bridge Desacoplar uma abstração de sua implementação para que

os dois possam variar independentemente.

Composite Permitir o tratamento de objetos individuais e

composições desses objetos de maneira uniforme.

Decorator Anexar responsabilidades adicionais a um objeto

dinamicamente.

Facade Oferecer uma interface única (e simples) de nível mais

elevado para um conjunto de interfaces de um subsistema.

Flyweight Usar compartilhamento para suportar eficientemente

grandes quantidades de objetos complexos.

Proxy Prover um substituto ou ponto através do qual um objeto

possa controlar o acesso a outro.

Tabela 3 – Padrões de projetos estruturais.

Os padrões comportamentais são os seguintes, conforme tabela 4.

Comportamental

Interpreter Dada uma linguagem, definir uma representação para sua

gramática por meio de um interpretador.

Template Method Definir o esqueleto de um algoritmo dentro de uma

operação, deixando alguns passos ser preenchidos pelas

subclasses.

Chain of Responsibility Compor objetos em cascata para, através dela, delegar

uma requisição até que um objeto a sirva.

Command Encapsular requisição como objeto, para clientes

parametrizarem diferentes requisições.

Iterator Prover uma maneira de acessar elementos de um objeto

agregado seqüencialmente sem expor sua representação

interna.

Mediator Definir um objeto que encapsula a forma como um

conjunto de objetos interagem.

Memento Armazenar o estado interno de um objeto para que ele

possa ter seu estado restaurado posteriormente (undo).

Observer Definir uma dependência um para muitos entre objetos

para que quando um objeto mudar de estado, os seus

dependentes sejam notificados e atualizados

automaticamente.

State Permitir a um objeto alterar o seu comportamento quanto

o seu estado interno mudar.

19

Strategy Definir uma família de algoritmos, encapsularem cada um

e fazê-los intercambiáveis.

Visitor Representar uma operação a ser realizada sobre os

elementos de uma estrutura de objetos. Permite definir

uma nova operação sem mudar as classes dos elementos

nos quais opera.

Tabela 4 – Padrões de projetos comportamentais.

Segundo Neil (2012, p. 17), “os padrões de navegação de interface gráfica para

aplicativos móveis são classificados em: padrões primários de navegação e padrões

secundários de navegação. Além desses, classifica ainda nas seguintes categorias de

padrões: formulários; tabelas e listas; busca ordenação e filtragem; ferramentas;

gráficos; convites; feedback e affordance; ajuda e antipadrões” [...]. A tabela 5 descreve

os padrões de navegações primários e secundários.

Padrões primários de navegações

Springboard Caracteriza-se por uma página inicial de opções de

menu que agem como um ponto de partida para o

aplicativo.

Menu de listas Caracteriza-se na forma de lista, pode ser simples,

agrupadas e avançadas com recursos adicionais para

busca, navegação ou filtragem. Cada item da lista é

um ponto de partida para o aplicativo.

Menu de abas Caracteriza-se pelo seu design na forma de abas, que

pode ser superior ou inferior.

Galeria Caracteriza-se pela exibição na forma de itens de

conteúdo que podem ser organizados em um

carrossel, uma grade ou em slide show.

Dashboard Caracteriza-se pela forma de painéis de instrumento

que fornece resumo de indicadores principais de

desempenho (Key Perfomance Indicators – KPIs).

Metáfora Caracteriza-se por uma pagina inicial modelada para

refletir a metáfora do aplicativo. Pode ser utilizado

para ajudar a catalogar e categorizar itens em um

aplicativo.

Megamenu Caracteriza-se por um grande painel sobreposto com

formatação e agrupamento personalizados das opções

de menu.

Padrões secundários de navegações

Carrossel de páginas Caracteriza-se pelo gesto de arrastar os dedos para

navegar rapidamente em um conjunto de páginas.

20

Carrossel de imagens Caracteriza-se pelo uso em dimensões 2D ou

coverflow (uma interface tridimensional para

navegação em biblioteca).

Lista expandida Caracteriza-se pela permissão de que em uma única

tela seja acessada para revelar mais informações.

Tabela 5 – padrões de navegação primários e secundários.

Além dos padrões de interface de navegação primários e secundários, a tabela 6

descreve outras categorias de padrões e antipadrões.

Padrão Classificação

Formulários Login, checkout, formulário de busca, multipassos,

formulário longo.

Tabelas e listas Tabela básica, tabela sem cabeçalhos, linhas

agrupadas, coluna fixa, listas em cascata, tabela

editável, tabela com indicadores visuais, visão geral e

dados.

Busca, ordenação e filtragem Busca explícita, autocompletar, busca dirigida, salvos

e recentes, critérios de busca, resultados de busca,

ordenação na tela, seletor de ordem, formulário de

ordenação, filtro na tela, gaveta de filtragem, diálogo

de filtragem, formulário de filtragem.

Ferramentas Barras de ferramentas, menu de opões, ferramentas

contextuais, ações contextuais, botão de chamada de

ação, botão de múltiplos estados, ações em lote.

Gráficos Gráfico com filtros, visão geral de dados, janela de

visualização, detalhes do ponto de dados, expansão,

zoom, tabela dinâmica, sparklines.

Convites Diálogo, dica, tour, demo, transparência, primeira

vez, persistente, detectável.

Feedback & Affordance Padrões de feedback: erros, confirmação, status do

sistema.

Padrões de affordance: toque, deslizar, arrastar.

Ajuda Como fazer, folha de notas, tour.

Antipadrões Idéia inovadora, discrepância de metáfora,

discrepância de controle, discrepância de ícone,

discrepância de modelo mental, caixa idiota, lixo de

gráfico, oceanos de botões.

Tabela 6 – Outras categorias de padrões e antipadrões de interface.

Segundo Nudelman (2013, p. 18-19), “há 58 padrões de projetos de interação

essenciais, que lidam com os principais aspectos na construção de aplicativos para o

Android, como experiência de boas-vindas, tela principal, navegação, busca, ordenação

e filtragem, entrada de dados e formulários. Além dos 58 padrões, há 12 antipadrões que

21

descrevem os erros mais comuns a serem evitados”. A tabela 7 descreve estes 58

padrões.

Classificação/Padrão Descrição

Experiência de boas vindas Animação de boas-vindas É um pequeno clip de animação dando boas-

vindas quando o aplicativo é aberto pela primeira

vez e apresentando a marca. Não deve ser longa,

recomenda-se uma duração entre 3 e 5 segundos. Tutorial A ajuda integrada diretamente ao uso do

aplicativo de forma simples e fácil utilização.

Tela principal Lista de links A tela principal funciona como um concentrador,

que apresenta muitos links ou ícones de funções

primárias ou visualizações que podem ser obtidas

com o aplicativo. Painel Ao abrir o aplicativo visualiza o estado atual

como um painel mostrando uma visão geral na

forma de gráfico ou tabelas. Atualizações Sempre que tiver uma regularidade de

informações personalizada de interesse do

usuário, utilize esse padrão na tela principal do

aplicativo. Deve mostrar uma ou mais mensagens

a partir do fluxo de atualizações. Navegação (Browse) Devem ser utilizado quando a tela principal é

carregada exibindo alguns itens e categorias de

itens que são de fato, de interesse do usuário. Mapa Quando a tela principal é carregada, mostrando

um mapa das redondezas de onde o usuário se

encontra, apontando itens de interesse. Deve ser

utilizado sempre que informações geocêntricas

forem interessantes e puderem ser exibidas em

um mapa. Histórico A tela principal mostra uma lista de links ou itens

que representam buscas prévias recentes, com a

mais recente lista em primeiro lugar. Usar

quando o aplicativo estender por múltiplas

sessões.

Busca Busca por voz Uma pergunta por voz, feita por meio de um

microfone embutido, é usada como entrada para

a busca. A digitação no telefone é difícil e sujeita

a erros. Isso torna a entrada de áudio uma

excelente alternativa ao texto. A maioria dos

aplicativos que possuem uma caixa de busca

pode, também, usar esse padrão. Autocompletar e autossugerir Quando o usuário digita um ou mais caracteres

no campo de busca, o sistema mostra uma

22

camada de sugestões adicional, contendo uma ou

mais combinações possíveis de palavras que, de

alguma forma, correspondem ao que digitou. A

qualquer momento o usuário tem a opção de

seguir digitando ou selecionar umas das

sugestões oferecidas pelo sistema. Toque preditivo O toque preditivo implementa a autossugestão

palavra por palavra, através de um refinamento

passo a passo, criando uma espécie de navegação

em palavras-chave. Puxe para atualizar Os resultados de busca são atualizados quando o

usuário desliza para baixo a tela com os

resultados. É um ótimo padrão para recarregar

resultados que são atualizados com freqüência. Busca a partir do menu È uma opção que pode ser acessada a partir do

menu da barra de navegação. O usuário deve

tocar o botão correspondente ao menu da

navegação onde estão os botões Voltar, Home e

Recente e, então selecionar a opção de busca. Busca a partir da barra de ações O usuário pode acessar a busca através de um

botão dedicado na barra de ações do aplicativo.

O botão de busca é mostrado na barra de ações

superior ou inferior. Depois que tocar na busca, a

página de resultados mostra uma ou mais opções.

Buscas salvas, refinamento de opções de busca,

buscas populares, locais próximos e assim por

diante. Busca dedicada A caixa de busca é colocada no topo dos

resultados de busca e não rola junto com eles. A

caixa de busca fica fixa no topo dos resultados da

buscas, o que permite aos usuários a rápida

edição e ajuste no texto de pesquisa. Busca na página de conteúdo A caixa de busca está no topo dos resultados de

busca e é parte da página de conteúdo; assim ela

rola juntamente com o restante do conteúdo. A

premissa básica desse padrão é que a caixa de

busca é parte integral da página de conteúdo.

Ordenação e filtragem Página de refinamento Os resultados de busca permitem o acesso a

opções de ordenação e filtragem em uma página

separada ou lightbox. Quando o usuário quer

refinar sua busca, pode acessar uma página

dedicada com opções de filtragem e ordenação,

acompanhada por algum tipo de botão, como: Ir,

Buscar, Seguir. Barra de filtragem É uma pequena seção horizontal da tela,

mostrando a pesquisa por palavra-chave e os

filtros aplicados a ela. Depois que a pesquisa é

efetuada, todo o seu conteúdo é exibido ao

usuário em uma fina barra de filtragem.

23

Arquitetura paralela As telas de buscas básicas e avançadas formam

duas trilhas paralelas para os resultados de

pesquisas. Os resultados podem ser acessados de

duas maneiras: por meio de uma busca simples

ou avançada, com mais opções. Abas São abas no topo da página que permitem aos

usuários trocarem as visualizações ou aplicarem

opções populares de ordenação e filtragem.

Quando os resultados de busca são exibidos ao

usuário, eles são segregados em duas ou mais

visualizações mostradas como abas no topo da

página.

Evitando resultados nulos ou indesejados Você quis dizer? Quando o usuário digita uma palavra-chave que

não é reconhecida pelo sistema, ele recebe um

conjunto de substituições vindas de um

vocabulário controlado, baseado no soletramento

criativo da pesquisa original do usuário. O

padrão utilizado pelo Google para recuperação

de resultados nulos é o Você quis dizer? Correspondência parcial É usado para a recuperação a partir de resultados

nulos, que permite a busca de novos resultados

ao omitir alguns termos de busca na pesquisa. A

Correspondência parcial reexecuta a pesquisa,

mas utilizando menos palavras-chave que as

digitadas, isto é, o sistema remove uma ou mais

palavras-chave. Resultados locais É utilizado na recuperação de resultados nulos

aproveitando o inventário local de resultados que

podem ser obtidos com o uso do GPS embutido.

Quando ocorre uma condição de resultados

nulos, o sistema oferece alguns resultados locais

com base em uma pesquisa de correspondência

parcial ou fornecendo um conjunto de resultados

locais em destaque.

Entrada de dados Controle deslizante (Slider) É o ajuste de parâmetro em um intervalo de

valores pré-definidos quando o usuário move o

marcador. Controles deslizantes podem ser

usados em conjunto com rótulo para mostrar os

valores ajustados. Este padrão apresenta-se de

duas maneiras: simples e duplos. Controle de passo (Stepper) Utilizado quando a tarefa exige a entrada de um

número inteiro pequeno, de 0 a 5. O controle de

passo é nativo do Android, que consiste em um

estreito campo de texto ladeado por botões com

sinais de mais e menos. Calendário com rolagem (Scrolling

Calendar) É usado quando é necessário fornecer uma data.

O controle do calendário é uma faixa de rolagem

contínua, com as datas em colunas fixa

24

ordenadas pelo o dia da semana e os meses

separados por uma linha mais grossa. Roleta de data e horário Utiliza-se este padrão quando precisar selecionar

uma data. O usuário toca no campo de data e

tempo é exibido um lightbox com todos os

componentes da data em um formato vertical

para a escolha. Listagem suspensa (Drop Down) É uma lista suspensa de valores possíveis.

Quando o usuário toca no valor do controle, uma

caixa sobreposta é exibida, com todos os valores

possíveis para a seleção, que substitui o valor

padrão pelo novo valor. O toque em uma região

externa sobreposta cancela a ação de seleção. Seleção múltipla O controle de seleção múltipla permite ao

usuário a escolha de um ou mais grupos da lista.

É usado quando uma seleção única a partir de

uma lista suspensa não é o suficiente em uma

tarefa que exige que o usuário escolha múltiplos

valores a partir de uma lista. Entrada de texto livre O usuário toca no campo de texto e o teclado

virtual surge a partir da parte inferior da tela,

enquanto o foco é colocado no campo de texto.

Esse padrão é o controle tradicional para a

entrada de texto por meio do teclado no Android. Caixa de texto com máscara de

entrada É utilizado quando um campo aceita apenas

dados específicos, como um email, número de

telefone, CPF, CEP, o sistema pode oferecer o

tipo correto de teclado para facilitar a entrada de

dados. Caixa de texto com entidades atômicas São caixas de texto usadas como um tipo de

busca para a localização e inserção de objetos

discretos e indivisíveis, chamados de entidades

atômicas. O usuário começa a dizer alguns

caracteres que identificam a entidade atômica e o

sistema realiza uma pesquisa dinâmica,

retornando as autossugestões, usualmente na

forma de uma lista suspensa abaixo da caixa de

texto.

Formulários Mensagem de erro em linha É usado para correção de erro durante o

preenchimento do formulário. Quando ocorre um

erro de entrada, o sistema notifica o usuário

sobre os campos a serem corrigidos. Geralmente,

pode recorrer a dois componentes de mensagem

de erro de linha: um indicador de erro relativo ao

campo e uma mensagem geral de erro

(normalmente no topo da tela). Alerta torradeira (Toast alert) A camada de alerta rola para cima a partir da

parte inferior da tela, como um pedaço de pão

saltando de uma torradeira. Quando a condição

25

que gera o alerta é correspondida, a tela exibe

uma pequena camada sobreposta com uma

mensagem específica, um ícone ou ambos.

Depois de um período de tempo determinado

(alguns segundos), a janela alerta desaparece. Alerta sobreposto (Pop-up) Utiliza esse padrão quando ocorre uma condição

de alerta, o sistema exibe uma lightbox,

frequentemente escurecendo o plano de fundo

com a tarefa em execução. A mensagem

sobreposta exige que o usuário escolha uma das

ações exibidas, apresentando até três botões na

parte inferior da janela. Validação de retorno (Callback

validation) Este padrão é equivalente a uma chamada Ajax

que permite o acesso assíncrono ao servidor para

validações mais sofisticadas e dinâmicas, por

meio de bases de dados. É usado quando os

dados inseridos pelo usuário necessitam ser

validado no servidor, o sistema detecta quando a

entrada de dados está completa e envia uma

chamada assíncrona ao servidor para que ele

valide os dados, retornando um entre dois

estados: OK ou Falha(Fail). Cancel/OK Esse padrão descreve como posicionar os botões

de ação: OK/Cancel ou Cancel/OK. Os botões

são posicionados como Cancel/OK na parte

superior ou inferior do formulário. Esse é um

padrão tradicional que deve ser usado para todos

os formulários do aplicativo. Alinhamento superior de legendas Esse padrão descreve que as legendas do

formulário apresentadas ao usuário devem

aparecer acima dos campos. Sempre que

apresentar ao usuário um formulário para

dispositivos móveis, utilizar o alinhamento

superior de legendas. Obtendo informações do ambiente É a utilização dos dados lidos a partir de seus

sensores embarcados (voz, gestos, acelerômetro,

localização, imagens, vídeos e luz ambiente)

como entradas para o formulário. Sempre que

tiver que preencher um formulário, deve

imediatamente perguntar: que tipo de informação

pode obter do ambiente? Usar gestos,

localização, imagens em vez do teclado e outros

controles nativos de entrada? Aceleradores de entrada Descreve a forma de reter dados entre visitas e

apresentar esses dados entre visitas e apresentar

em pontos estratégicos do fluxo de trabalho. Usa

quando o usuário executa tarefas longas e

complexas de entrada de dados, como a digitação

de datas e endereços, o sistema lembra-se do que

já foi digitado e apresenta essa informação no

26

momento apropriado.

Serviços bancários para dispositivos móveis Acelador de login Este padrão permite maior velocidade de entrada

do usuário no aplicativo móvel através do uso de

um código curto, ou um reconhecimento facial

ou de voz, enquanto fornece um nível de

segurança aceitável. Algumas instituições

financeiras oferecem aos seus usuários a opção

de adicionar seus aparelhos a uma lista de

dispositivos aprovados, instalando um código

especial no dispositivo, de um jeito similar à

instalação de um cookie em um navegador. Página dedicada de seleção È usado para fazer uma seleção a partir de uma

lista. Quando o usuário precisa selecionar um

valor a partir de uma lista longa, ele toca no

controle seletor e uma página dedicada de

valores se abre. Depois de selecionar um valor na

página dedicada de seleção, a página se fecha e o

sistema exibe novamente o formulário com a

seleção mostrada no controle de seleção. Primeiro o formulário (Form first) É a copia do formato utilizado em aplicativos

web para desktop para preencher formulário

longo. Ocorre quando um usuário precisa inserir

alguns dados, primeiro é mostrado a ele um

formulário. Todas as telas de inserção de dados

subseqüentes retornam o usuário ao primeiro

formulário antes de ir para a próxima inserção de

dados. Páginas dedicadas com assistente de

fluxo Este padrão é complemento otimizado para uma

tela pequena. O formulário inteiro nunca é

mostrado aos usuários. Em vez disso, eles vêem

uma série de páginas otimizadas para o tamanho

de um dispositivo móvel, com controles

apropriados de inserção de dados. Normalmente,

ao final são apresentadas ao usuário a página de

verificação e a página de confirmação. Assistente de fluxo com formulário Este padrão é usado quando o fluxo inclui uma

ou mais páginas dedicadas de seleção. Elas são

primeiramente apresentadas como um assistente.

Depois de o usuário ter feito suas escolhas

necessárias para as páginas dedicadas de seleção.

É apresentado a ele um formulário que contém os

elementos que faltam. É o padrão ideal para o

uso com o padrão de páginas dedicadas de

seleção. Verificação-Confirmação É usado quando tiver um formulário com uma

carga transacional complexa ou emocional, é

necessária uma verificação e uma confirmação da

ação. Funciona quando o formulário estiver

completo e pronto para submissão, o sistema

27

apresenta uma última tela para que os usuários

verifiquem a informação antes de enviar. Após

isso, o sistema apresenta a página de

confirmação, mostrando os detalhes da transação. Comunicação por proximidade (Near

field communication, NFC) Este padrão utiliza uma tecnologia de conexão

em curta distância. Conectar-se utilizando esse

padrão (NFC) geralmente inicia aplicativos ou

outros sistemas dentro do dispositivo. Essa

tecnologia permite fácil acesso a esses

aplicativos, apenas encostando dois dispositivos

equipados com NFC um no outro ou encostando

um dispositivo com qualquer leito NFC a uma

tag NFC.

Nvegação Carrossel O usuário vê várias imagens de produtos ao

longo de uma linha. Para explorar mais produtos,

o usuário pode deslizar pela linha para navegar

horizontalmente para o próximo conjunto de

produtos. Uma seta indicando a direção do

movimento do carrossel é geralmente fornecida

como uma dica para a interação necessária. O

padrão carrossel pode ser usado toda vez que

tiver um pequeno conjunto de 8 a 20 produtos ou

itens que são facilmente reconhecíveis por sua

imagem. Menu sobreposto Neste padrão quando o usuário toca no elemento

representando ações, ou flecha, o menu

sobreposto de ações é aberto, revelando mais

escolhas em um elemento sobreposto no topo do

conteúdo existente. Usar sempre que necessitar

de mais ações disponíveis ao usuário do que as

permitidas pelo espaço confinado do dispositivo

móvel. Marca d’água O padrão marca d’água fornece dica essencial

que permite a seus usuários a descoberta de

gestos multitoque e ações do acelerômetro, que

podem ser usados para a navegação. Quando há

gestos multitoque e movimentos de acelerômetro

no sistema, a tela exibe uma marca d’água

semitransparente. O seu uso pode ser a qualquer

momento em que utilizar gestos além do simples

toque. Esse padrão ajuda os usuários a

descobrirem e lembrarem os gestos e evitarem

confusões. Navegação canivete suíço (Swiss-

Army-Knife Navigation) Esse padrão dedica-se a explorar as tendências

experimentais que fazem com que a navegação

fique em segundo plano, permitindo total

destaque ao conteúdo. Usar sempre que precisar

dedicar mais espaço de tela ao conteúdo e

promover um estado de fluidez nas atividades

28

dos usuários. Integração: A fronteira final O uso desse padrão é quando as necessidades do

usuário excedem as capacidades do aplicativo,

sendo preciso navegar para um aplicativo

diferente, que continue a tarefa para o usuário.

Usar esse padrão sempre que o aplicativo

precisar fornecer serviços que já são bem

desenvolvidos em diferentes aplicativos com os

quais o usuário está familiarizado.

Padrões para tablets Fragmentos Os fragmentos formam o principal padrão

Android puro para projeto da Interface do

usuário (UI). O conteúdo da tela é quebrado em

retângulos (tiles), chamados de fragmentos. Cada

fragmento é posicionado com base no tamanho e

na orientação do dispositivo, de modo que ocupe

da melhor forma, o espaço disponível. A rolagem

de cada pedaço individual é limitada, de forma

que os elementos essenciais, tais como os botões

de ação, não rolem para fora da tela. Visualização composta Sempre que o tablet estiver na orientação

horizontal, existe a possibilidade de apresentar a

lista juntamente com a visualização dos detalhes.

Esse formato é chamado de visualização

composta. Usa-se geralmente em dispositivos

menores, a visualização da lista é apresentada

primeira e, após isso, o usuário pode se

aprofundar na visão dos detalhes. Para retornar à

visão da lista deve pressionar o botão voltar. Conteúdo com navegação/Gestos

multitoque O uso desse padrão para tablets é necessário

utilizar sempre que possível o conteúdo em si

como elemento de navegação, evitando pequenos

botões que precisam ser pressionados

cuidadosamente. Cada elemento do conteúdo é,

também, um elemento navegável, que pode ser

acessado através de diversos gestos multitoque. 2-D Mais itens similares O 2-D Mais itens similares é um padrão simples,

porém poderoso, de navegação no conteúdo. Os

resultados de pesquisa são posicionados em um

formato de galeria por meio de várias linhas, com

cada linha representando uma subdivisão

particular do conjunto de resultados. As linhas

podem ser criadas a partir de qualquer divisão

que faça sentido, assim como as subcategorias,

marcas, data ou faixa de preço. Cada linha é

equipada com um controle carrossel.

Padrão experimental Navegação lateral A navegação lateral coloca a funcionalidade

principal na orientação acima/abaixo ao longo do

lado esquerdo e direito do dispositivo, onde ela

29

fica fácil e ergonomicamente acessível. Para usar

esse padrão deve considerar a ergonomia

cuidadosamente, especialmente em tablets

grandes. Deslizamento em C ( C-Swipe) O deslizamento em C é um padrão futurista e

experimental que forma uma base para um

esquema de navegação alternativo. Pode ser

usado para trazer à tona um menu contextual, em

qualquer lugar da tela sensível, utilizando um

arco semicircular natural, descrito pelo polegar

do humano ao longo da superfície da tela plana

sensível ao toque. Esse gesto é parecido com o

formato de uma letra C. O deslizar do polegar

proporciona a exibição de um menu semicircular

contextual. Ao clicar na função que deseja e o

menu desaparece, mais uma vez, quando a ação é

executada.

Tabela 7 – Padrões de projeto para o Android.

Os 12 antipadrões de projetos que descrevem os erros mais comuns a serem evitados

estão descritos na tabela 8.

Antipadrão Descrição

Experiência de boas-vindas Licenças de uso para usuário final É o requerimento de concordância de

licença tipo EULA quando o aplicativo é

aberto pela primeira vez. Impedimentos de contato São dificuldades de acesso ao suporte

técnico. Exemplo formulário de contato

longo, exigindo tempo e esforço do

usuário. Registro/Entrada(Sign up/Sign In) São extenso formulário de registro de

entrada no sistema antes do usuário

decidir usar ou não o aplicativo.

Busca Busca e refinamento separados São situações que acontece quando a caixa

de busca por palavra-chave está separada

por dois ou mais toques dos outros

refinamentos de busca.

Ordenação e filtragem Refinamento aleijado É a limitação das opções de refinamento

de pesquisa em um único passo

comprometendo o fluxo da experiência de

busca, o qual deveria ser meio de

30

múltiplos passos de refinamento.

Evitando resultados nulos ou indesejados Ignorar a visibilidade do estado do sistema Ocorre quando o sistema toma alguma

ação significativa sem informar isso ao

usuário. Falta de eficiência de interface Ocorre quando uma condição de resultado

nulo e é mostrado como um estado de erro

oficial do Android exigindo um toque

extra do usuário para prosseguir. Controles inúteis Ocorre em páginas com resultados nulos

que são tratadas da mesma maneira que

páginas que apresentam resultados.

Navegação Vai e vem (Pogosticking) É quando há uma visualização em lista

conectada a uma visão mais detalhada

com informação adicional. Múltiplas áreas em destaque Surge sempre que há mais de um tipo de

resultado em destaque.

Tabela 8 – Antipadrões de projeto para o Android.

O autor menciona a existência de 12 Antipadrões, porém foram descritos somente 10,

conforme listados na tabela 8.

Segundo Rocha (2013, p. 30-38), “existem 21 padrões Java EE” dividido em camadas,

conforme tabela 9.

Padrão Descrição

Camada de Apresentação Intercepting Filter Viabiliza pré- e pós-processamento de requisições.

Front Controller Oferece um controlador centralizado para gerenciar o

processamento de uma requisição.

Context Object Encapsula estado de forma independente de protocolo para

compartilhamento pela aplicação.

Application Controller Centraliza e modulariza o gerenciamento de Views e de

ações.

View Helper Encapsula lógica não-relacionada à formatação.

Composite View Cria uma View composta de componentes menores.

Service to Worker Combinam Front Controller com um Dispatcher e Helpers.

Concentra mais tarefas antes de despachar a requisição.

Dispatcher View Combinam Front Controller com um Dispatcher e Helpers.

Realiza mais processamento depois de despachar a

requisição.

Camada de Negócio Business Delegate Desacopla camadas de apresentação e de serviços.

Service Locator Encapsula lógica de consulta e criação de objetos de

serviço.

Session Façade Oculta complexidade de objetos de negócio e centraliza

controle.

31

Application Service Centraliza e agrega comportamento para oferecer uma

camada de serviços uniforme.

Business Object Separa dados de negócios e lógica usando modelo de

objetos.

Composite Entity Implementa Business Objects persistentes combinando

Entity beans locais e POJOs (Plain Old Java Objects).

Transfer Object Antigamente chamado de Value Object ou DTO. Reduz

tráfego e facilita transferência de dados entre camadas.

Value List Handler Lida com execução de queries, caching de resultados.

Transfer Object Assembler Antigamente chamado de Value Object Assembler.

Constrói um Value Object composto de múltiplas fontes.

Camada de Integração Data Access Object Abstrai fontes de dados e oferece acesso transparente aos

dados.

Service Activator Facilita o processamento assíncrono para componentes

EJB.

Domain Store Oferece um mecanismo transparente de persistência para

objetos de negócio.

Web Service Broker Expõe um ou mais serviços usando XML e protocolos

Web.

Tabela 9 – Padrões de Java JEE.

32

3 Definição e Contextualização

Diante do crescente mercado de dispositivos móveis, surge a necessidade de

desenvolver aplicativos de qualidade para essas plataformas. Para isso, uma prática

recomendada é o uso de padrões de projeto para interfaces gráficas. Estes padrões se

referem a um conjunto de práticas já conhecidas e amplamente aplicadas que visam

aprimorar a experiência do usuário.

3.1 Designers Patterns Google TV

As aplicações para Android não se limitam mais a celulares ou tablets, mas também

para o Google TV. Os seus aplicativos para essa nova plataforma é construída sobre as

ferramentas de desenvolvimento para Android. Os aplicativos para o Google TV são

baseados no Android, mas possui algumas características diferentes dos aplicativos para

celulares e tablets. Os dispositivos do Google TV, não suportam alguns recursos que

podem estar disponíveis em outros dispositivos. Além das diferenças internas entre uma

aplicação Android para um telefone e uma para o Google TV, há diferenças na interface

do usuário.

O Google dispõe de um guia contendo um conjunto de recomendações sobre padrões de

desenvolvimento de projeto de aplicativos para o Google TV. Essas recomendações são

as seguintes:

The 10ft Environment (Meio Ambiente 10 pés);

TV Displays (Displays de TV);

Sound and the UI (O som e a interface do usuário);

Navigation Design (Projeto de navegação);

User Interface Design (Projeto de interface do usuário);

UI Zones and Patterns (As zonas de interface do usuário e padrões);

UI Performance (Desempenho UI);

Additional Tips (Dicas adicionais).

33

3.1.1 The 10ft Environment (Meio Ambiente 10 pés)

É uma interface de usuário (GUI) projetado para exibição em uma tela grande de uma

televisão ou similar. Os elementos exibidos na interface, como menus, botões, texto,

assim por diante, são teoricamente ergonomicamente grande o suficiente para ler

facilmente a uma distância de 10 pés (3 metros) a partir do visor, uma televisão por

exemplo.

Segundo o Google, o ambiente de visualização de televisão é normalmente referido

como o ambiente de dez pés e a tela de televisão, como a interface 10 pés. Quando cria

aplicativos do Android para o meio ambiente 10 pés, é preciso ter em mente, alguns

conceitos básicos que diferencia o ambiente a partir de computadores ou dispositivos

móveis. A televisão tem sido tradicionalmente um veículo passivo, somente com o

objetivo de enviar informações para as pessoas. O Google TV muda esse conceito a

partir de uma transmissão para um sistema interativo de duas vias. Mudança assim pode

trazer dificuldades para alguns e facilidades para outros telespectadores. Para melhorar a

interatividade é preciso observar os seguintes conceitos:

O ambiente de 10 pés é tradicionalmente para consumir conteúdo. É um

ambiente divertido e não de trabalho que geralmente e geralmente é social, e não

único do usuário;

A experiência de visualização para uma UI 10 pés é uma mistura de computador

e TV. As telas da TV e do computador, apresentam características distintas;

TVs têm som de alta qualidade. Os televisores possuem sistema de som de

melhor qualidade do que os computadores;

A UI 10 pés requer sistema de navegação simples e visível. O progresso deve ser

configurado da esquerda para direita e de cima para baixo. É preciso limitar a

necessidade de um mouse e fornecer feedback visual ao usuário;

A UI 10 pés funciona melhor com os padrões de interface do usuário bem

estabelecidas com base em zonas de conteúdo.

34

3.1.2 TV Displays (Displays de TV)

Quando projetar para uma TV é preciso lembrar que a exibição Google TV é

fundamentalmente diferente da de um computador ou dispositivo móvel. Apesar de seu

tamanho, ele exibe menos informações em geral do que um computador ou UI móvel. É

preciso fornecer menos UI e automatizar algumas tarefas em vez de pedir interação com

o usuário. Abaixo algumas diretrizes para a interface do usuário:

Usar um telefone celular como o modelo para a interface do usuário. O tamanho

de uma TV moderna é enganoso. “Apesar das TVs serem geralmente maiores do

que 40” na diagonal, a percepção do espectador é que a TV é menor que um

monitor. Para simular esta experiência, usar um celular como modelo quando

criar a interface do usuário;

Para evitar uma aparência desordenada na tela, fornecer mais espaço em branco

entre os elementos da página. Para fazer isso, usar uma combinação de margens

maiores;

TVs estão sempre em paisagem. Em uma TV, o espaço disponível é executado

da esquerda para a direita e não de cima para baixo. Colocar os controles de

navegação na tela do lado esquerdo ou direito e economizar espaço vertical para

o conteúdo.

Resoluções de tela: as TVs (mesmo os mais modernos) têm uma resolução de tela com

base em linhas de varredura. O Google TV disponibiliza três valores de linha de

digitalização: 720p, 1080i e 1080p, que representam 720 linhas progressive scan, 1080

linhas de varredura entrelaçado e 1080 linhas progressivas (os dois últimos são

equivalentes no Android). O valor de 720 significa que a TV pode tratar de 720 linhas

distintas a partir da parte superior para a parte inferior do ecrã, 1080 significa que a TV

se dirige 1080 linhas de cima para baixo. As configurações usadas pelo Android para o

Google TV estão listadas na tabela 10.

Definiçao Resolução (px) Identicador Densidade

720p 1280x720px tvdpi

1080p 1920x1080px xhdpi

Tabela 10 – configurações do Android para Google TV (Google Developers. Padrões de Projeto

Google TV).

35

O tamanho da tela de um dispositivo Google TV é classificada como grande e não como

um xlarge. Se o aplicativo fornece vários diretórios de recursos para diferentes

tamanhos de tela, o Google TV atribuirá automaticamente como grande. Um dispositivo

Google TV com uma tela de TV 1080p a densidade da tela é classificada com o xhdpi.

Em uma tela de TV 720p, a densidade é classificada com o tvdpi. Se o aplicativo

fornecer vários diretórios de recursos para diferentes densidades, o Google TV vai

carregar os recursos com base na densidade da tela.

Projeto Layouts Paisagem: as telas de TV é sempre na orientação paisagem, o

ambiente referido é de 10 pés (3 metros). Para construir e otimizar layouts em paisagens

e fornecer aos usuários uma experiência útil e agradável, recomenda-se:

Fornecer recursos adequados para o modo paisagem;

Garantir que o texto e os controles são grandes o suficiente para ser visível à

distância;

Fornecer bitmaps de alta resolução e ícones para telas de TV em HD;

Os controles de navegação devem estar do lado esquerdo ou direito da tela;

Dividir as interfaces em seções usando fragmentos e grupos GridWiew em vez

de ListView para melhor utilização do espaço de tela horizontal;

Usar grupos de exibição, como RelativeLayout ou LinearLayout para organizar

pontos de vista. Isso permite que o sistema Android ajuste a posição vistas para

o tamanho, alinhamento, formato e densidade de pixels da tela da TV;

Adicionar margens suficientes entre controles de layout para evitar uma UI

desordenado.

A figura 2 ilustra exemplo de um layout otimizado para TV.

Figura 2 - layout otimizado para TV (Fonte: Google Developers. Otimizando Layouts para TV).

36

No layout na figura 2 acima, os controles estão no lado esquerdo. A interface do

usuário é exibido dentro de um GridView, que é bem adequada para a orientação

paisagem. Neste esquema, tanto GridView quanto o Fragment têm a largura e altura do

conjunto de forma dinâmica, para que possam ajustar-se à resolução da tela. Os

controles são adicionados ao fragmento ao lado esquerdo programaticamente em tempo

de execução. O quadro 1contêm exemplo de código do layout mostrado na figura 2.

Quadro 1 – exemplo de código do layout da figura 2 (Google Developers. Otimizando Layouts para

TV).

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<fragment

android:id="@+id/leftsidecontrols"

android:layout_width="0dip"

android:layout_marginLeft="5dip"

android:layout_height="match_parent" />

<GridView

android:id="@+id/gridview"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</RelativeLayout>

Overscan: são as margens que o fabricante coloca ao lado exterior do tamanho da tela

normal da TV, são para configurar itens da barra de ação no lado esquerdo da tela,

também pode incluir a biblioteca na barra esquerda de navegação do aplicativo para

criar itens de ação no lado esquerdo da tela, em vez de criar um fragmento para

adicionar controles endereçáveis pelo circuito, e não são usados para exibir à imagem.

Estas margens são a área de overscan. Aplicativos em Android não pode exibir no

overscan.

A quantidade de overscan varia conforme o fabricante, desse modo a margem em torno

da UI também varia. Para projetar a interface do usuário para a TV que tem overscan

significativo, poderá usar inadevertidamente o overscan como uma margem entre a

interface do usuário e a moldura da TV. Se executar o aplicativo em uma TV com quase

nenhum overscan, a interface terá quase nenhuma margem, assim os elementos podem

serem difíceis de ler.

37

Para resolver o problema de overscan, é preciso proporcionar uma margem extra de

10% para a interface do usuário, e usar um layout que não usa posicionamento absoluto.

O diagrama da figura 3 ilustra isso.

Figura 3 - resoluções e dimensões (Google Developers. Padrões de Projeto Google TV).

38

Cores: a tela de TV tem contraste e níveis de saturação maiores do que monitores de

computadores. Recomenda-se seguir as diretrizes abaixo ao trabalhar com cores sólidas:

Usar branco puro (# FFFFFF) com moderação, pois causa vibração ou

imagem fantasma em telas de TV;

Evitar os brancos brilhantes, vermelhos e laranjas, pois eles causam

distorção;

É preciso ciência dos vários modos de exibição que as TVs podem ter,

incluindo Standard, Vivo, Cinema / Teatro, Jogo, e assim por diante. É

preciso testar a aplicação em todos estes modos;

Evitar o uso de gradientes, eles podem resultar em faixas;

É importante testar o aplicativo em telas de qualidade inferior, que podem ter

baixa gama de configurações de cores.

Textos: o desenvolvimento de aplicativo para TV recomenda-se o uso da fonte sans-

serif e utilização de anti-aliasing para aumentar a legibilidade. Evitar fontes leves ou

que tenham ambos os cursos muito estreita ou muito amplo. Atualmente, o Google TV

suporta apenas as Droid ou Droid da família Sans Serif, mas pode usar a incorporação

de fontes para criar uma aparência mais personalizada. No entanto, a incorporação de

fontes diminui o desempenho do sistema. Abaixo algumas recomendações para

melhorar a legibilidade do texto:

Limitar o parágrafo no máximo até 90 palavras;

Quebrar o texto em partes pequenas para que os usuários possam digitalizar

rapidamente;

Manter o comprimento da linha entre 5 a 7 palavras. Nunca menor que 3 ou

maior que 12 palavras por linha;

Cor do texto claro sobre um fundo escuro é mais fácil de ler em uma TV, em

comparação com o texto escuro sobre um fundo claro;

Usar o tamanho da fonte padrão do Android. Por exemplo, o padrão de

tamanho pequeno da fonte é 14sp, o que resulta em 28, o texto ponto na tela

1080p;

Utilizar espaçamento maior na vertical mais à esquerda.

39

Por fim certificar-se que todos os widgets são grandes o suficiente para ser claramente

visível para alguém sentado 10 pés (3 metros) de distância da tela (esta distância é

maior para as telas muito grandes). A melhor maneira de fazer isso é usar o layout,

dimensionamento relativo ao invés de absoluto, e as unidades de densidade de pixels

independentes em vez de unidades de pixel absolutas. Por exemplo, para definir a

largura de um widget, use wrap_content em vez de uma medida de pixel, conforme o

exemplo no código do quadro 2.

Quadro 2 - exemplo no código de definição de largura de um widget (Google Developers.

Otimizando Layouts para TV).

<TextView

android:id="@+id/atext"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:singleLine="true"

android:textAppearance="?

android:attr/textAppearanceMedium"

/>

3.1.3 Sound and the UI (O som e a interface do usuário)

O uso de som no aplicativo Google TV recomenda o seguinte:

Usar sons que são apropriados para um ambiente de sala de estar;

Padrão para um volume baixo;

Fornecer opções simples para silenciar a aplicação;

O Android tem o conceito de foco de áudio, que permite aos aplicativos solicitar

acesso exclusivo para a reprodução de áudio. Então, se a aplicação depende de

áudio, deve solicitar foco exclusivo de áudio.

40

3.1.4 Navigation Design (Projeto de Navegação)

Os dispositivos do Google TV, inclui um teclado e um dispositivo indicador que

controla o cursor. Os dois podem ser combinados num único dispositivo físico, e este

dispositivo pode também incluir um controlador de mouse. Os usuários de

computadores podem não ter muita prática com um D-pad ou cursor, mesmo os mais

experientes, irão achar que usar um mouse em uma TV é difícil. Abaixo algumas

diretrizes para a concepção da interface de navegação para aplicativos Android no

Google TV:

Utilizar D-pad em vez de mouse para a navegação. Os usuários estão mais

familiarizados com a navegação por D-pad, que faz parte do controle remoto de

TV;

Na navegação por mouse, é preciso criar botões clicáveis grandes, de modo a

facilitar o posicionamento do ponteiro do mouse sobre eles;

Evitar a navegação complexa ou que precisa de mouse. Não use drag-and-drop

ou menus drop-down. Estes são difíceis de controlar no ambiente de televisão;

É recomendável fornecer feedback UI para navegação. Destacar a área

selecionada ao receber o foco. É preciso usar transições e movimentos que

fornecem opções visuais para avançar ou voltar, por exemplo, avançar para uma

página à direita, podem ser compreendida intuitivamente que pressionando o

D-pad da esquerda irá retornar à página anterior.

O televisor não é um computador, nem um dispositivo móvel, a tela não é sensível ao

toque, e o mouse (caso tem) é de difícil controle. Portanto, é preciso fornecer um

esquema de navegação fácil no qual o usuário poderá aprender rapidamente navegar no

aplicativo.

Navegações D-pad: o controlador D-pad limita o movimento para cima, para baixo,

esquerda e direita. A ação sob o cursor é acionado por um botão Enter ou OK no centro

do D-pad. Portanto, a interação do usuário precisa ser fácil e rápida, visto que, o usuário

navega a distância. Para criar navegação para D-pad, segue as orientações:

41

Certificar-se de que as teclas de seta podem navegar para todos os controles

visíveis na tela;

Para teclas de seta para rolar uma lista, é necessário certificar-se que os usuários

podem selecionar um elemento na lista e que a lista ainda rola quando um

elemento é selecionado;

Se houver vários itens a serem selecionados na aplicação é preciso verificar-se

qual o item está selecionado;

Verificar-se que todos os itens que foram selecionados e focados na UI da

aplicação serão navegáveis por D-pad.

Navegações por mouse: em uma tela de TV, a seta do ponteiro do mouse é pequena e

distante. O seu controle é difícil, porque geralmente não é o controle tradicional, em

forma de disco. Para ajudar os usuários com o mouse é preciso seguir as recomendações

seguinte:

Ampliar a visão de cada controle de interface de usuário que é um alvo onde

o ponteiro do mouse está posicionado, como um link ou botão, por exemplo;

Adicionar mudança na aparência do objeto quando o controle do mouse está

sobre ele;

Usar indicador de seta para informar aos usuários que o conteúdo está

disponível off-screen.

Assistências à navegação: a navegação em um ambiente de 10 pés poderá ser nova

para o usuário. Portanto, é preciso fornecer por escrito suporte de ajuda ao usuário. Isso

deve ser feito adicionando um botão de ajuda ou ícone da barra de ferramenta. Alguns

tópicos recomendado são:

As teclas de seta D-pad: será que se move entre as páginas? Podem abrir

contexto ou menus de navegação?

O botão voltar: será que retorna a uma página anterior? Ele pode desfazer

uma ação? Fechar um pop-up, por exemplo?

42

Teclas de mídia: O que significa play / pause e o que faz? O avançar e

retroceder o que faz?

Outras teclas: cancelar ou para fechar um pop-up? Por exemplo, o ESC para

fechar uma janela pop-up?

O diálogo de ajuda pode ser exibido automaticamente quando o usuário iniciar o

aplicativo pela primeira vez.

Rolagens verticais: a rolagem da página na vertical é fundamental em um navegador

desktop, porém não será tão atraente em uma TV. A rolagem vertical pode ser irregular

e lenta, e as informações importantes podem ser escondidas fora da tela.

Recomenda-se usar layouts horizontais, e proporcionar transições visuais entre as

páginas. Para usar a rolagem vertical, é preciso limitar a área de detalhes no centro da

página, deixando a barra de navegação à esquerda fixa. Além de manter um contexto

compreensível, terá melhor desempenho na navegação.

Navegações da categoria: para as categorias (itens menu ou abas), recomenda-se usar o

lado esquerdo da tela (menu a esquerda). A tela de TV tem espaço abundante nas

laterais, mas o espaço vertical é precioso. É importante manter a seleção de categoria na

tela em todos os momentos. Para isso, pode ter que reduzir o número de categorias. Para

migrar de um aplicativo móvel existente para TV, considerar a necessidade de refazer

ou pelo menos testar adequadamente a navegação que usa muitas subcategorias.

Seleção: na TV, o posicionando do cursor para a seleção pode ser inexata. Para ajudar

o usuário nas seleções, observar estas orientações:

Destacar o objeto selecionado quando o ponteiro do controle está sobre ele

em estado suspenso;

Criar controles de seleção grande com um espaço extra ao redor do rótulo do

texto;

Não usar inerentemente pequenos controles, como fechar as caixas em um

canto da janela. Eles não são visíveis ou difíceis de escolherem;

Evitar o uso de cliques do mouse para fechar os diálogos pop-up. Pois esse

tipo de controle não é evidente no ambiente 10pés. Em vez disso, utilizar-se

43

controle explícito para fechar o diálogo e garantir que a navegação D-pad

pode acessá-lo;

Não exigir que o usuário selecione o controle principal para torná-lo ativo.

Portanto, é importante deixar o controle primário ativo ou default destacado

para assim o indicar;

Recomenda-se que seja permitido o deslocamento de uma parte da janela ou

caixa de diálogo, quando necessário, sem ter foco. Exigir que o usuário

clique em um elemento antes da rolagem é intrusivo.

Contextos, seleção e foco: o estado atual de um aplicativo inclui um contexto, uma

seleção, e um foco. O contexto é geralmente um conjunto de categorias, enquanto a

seleção é a categoria que o usuário tenha selecionado. O foco é o controle ou elemento

do ponteiro. Cada um deles deve ter seu próprio destaque distinto, e o esquema

destacado deve permanecer coerente em toda a aplicação.

Por exemplo, se o usuário está olhando para uma tela cheia de filmes, o aplicativo pode

fornecer uma linha de guias contextuais que oferecem diferentes categorias, tais como

"Todos os filmes", "Novos Lançamentos", "popular", "Escolhas do Editor", e assim por

diante. Se o usuário selecionar uma das guias, o estado selecionado da guia deve

permanecer visualmente distinta do estado do foco em movimento que indica a posição

da tela atual para a navegação, como demonstrado na figura 4.

Figura 4 - seleção e foco (Google Developers. Developing Google TV User Interface).

44

Nas aplicações Google TV, o foco do D-pad é equivalente ao estado do hover do

mouse. É a principal forma dos usuários visualizarem o estado do aplicativo, e ajuda os

usuários a prever como eles devem mover o foco ou fazer uma seleção.

A distinção entre elementos focados e aqueles que não podem obter o foco é uma

maneira que pode ajudar o usuário a entender a UI. Outra forma é alinhar os elementos

em uma grade, conforme a figura 5.

Figura 5 - padrão de grade para navegação UI (Google Developers. Developing Google TV User

Interface).

A grade é o mapeamento mais óbvio para controles Up-Down-esquerda-direita de um

D-pad. Se não usar uma grade, em seguida, os elementos podem alinhar na diagonal ou

em diferentes linhas de base ou em diferentes centros verticais. Isso força o usuário a

mudar várias vezes de cima para baixo da esquerda para a direita, ou deixa o usuário

confuso sobre a decisão correta a tomar.

45

Alguns elementos como listas de rolagem pode trazer dificuldade ao exato alinhamento

da grade, conforme demonstrado na figura 6. Neste caso, deve colocar o foco o mais

próximo possível da grade.

Figura 6 - alinhamento de rolagem e layout de grade (Google Developers. Developing Google TV

User Interface).

Os indicadores visuais: é boa prática adicionar indicadores ou destaques para os itens

selecionáveis e navegáveis na UI. Estes são chamados de affordance. Espera-se que os

usuários explorem a interface para descobrir o que é e não é selecionável.

Transição: as transições nos aplicativos podem ajudar ou confundir o usuário. Diante

disso, Algumas orientações:

Evite recarregar a página inteira, porque faz com que aumente a latência

percebida;

Para qualquer ação que afeta apenas um fragmento, a transição deve ser

mantida inteiramente dentro do fragmento;

Criar barra de progresso específico animadas indicando o andamento da

operação;

46

Não mostrar animação de carregamento para cada elemento em uma grade.

Uma barra de progresso com muitos elementos na mesma grade resulta em

uma interface confusa e difícil de assistir.

3.1.5 User Interface Design (Projetos de interface do usuário)

Para criar a interface do usuário, observar as seguintes diretrizes:

Manter o design consistente;

Manter comportamento de elemento consistente;

No ambiente de 10 pés é necessário manter todos os elementos, ações e

opções importantes visíveis, incluindo busca, configurações, e assim por

diante.

UIs através de dispositivos: para migrar de um aplicativo móvel de um pé, por

exemplo, para um ambiente de UI 10 pés. É importante lembrar que o maior nem

sempre é melhor. A figura 7 ilustra os tamanhos comparativos de telas.

Figura 7 - tamanha de telas comparativas (Google Developers. Padrões de Projeto Google TV).

47

Uma tela 42 parece ter maior capacidade, mas este não é o caso. Um telefone inteligente

geralmente tem mais poder de processamento do que a TV. O vídeo HD e o áudio de

uma TV são pré-processados, pois tudo o que precisa é uma ligação de banda larga para

transmissão. Em outras palavras, a maioria do processamento para a TV normal é feito

pelo emissor, não pelo aparelho de TV.

Para melhorar isso, desenvolver aplicações que minimizam interação do usuário.

Quanto mais o aplicativo fazer para o usuário, é melhor.

3.1.6 UI Zones and Patterns (As zonas de interface do usuário e padrões)

A maneira mais fácil de fazer uma boa UI TV é usar uma estrutura de zonas e padrões.

Juntos, eles enfatizam uma experiência limpa e concisa, construído a partir de um

vocabulário visual dos elementos de interface do usuário.

As zonas são uma parte fundamental de uma TV UI Google para navegar em conteúdo.

Cada zona corresponde a um componente da atividade do Android. Para o Google TV,

usar uma hierarquia da esquerda para a direita em vez da hierarquia topo e rodapé (top-

to-bottom) de telefone e computador. Isso reflete ao aspecto de tela horizontal de uma

TV, bem como, a necessidade de uma navegação simples, conforme ilustra a figura 8.

Figura 8 - Zonas de aplicação (Google Developers. Padrões de Projeto Google TV).

48

Uma tela de TV contém três zonas (figura 8) da esquerda para a direita. O seu tamanho

pode ser ajustado para atender às suas necessidades da aplicação, ou poderá usar o

tamanho padrão.

Zonas globais: a região global persiste durante todo ciclo de vida da aplicação, dessa

forma não deve ocupar muito espaço na tela. Em contrapartida, a zona de detalhes

contém o material que os usuários querem ver, então esse espaço na tela deve ser

ampliado, tanto quanto possível. A figura 9 é um exemplo de uma interface baseada em

zonas.

Figura 9 - exemplo de aplicação (Google Developers. Padrões de Projeto Google TV).

49

A região global (zona 1 na figura 10) é a mais à esquerda da tela. Esta zona contém

todos os itens de nível superior global na hierarquia da aplicação. Ele fornece acesso

rápido às operações que os usuários podem querer usar a partir de qualquer lugar da

aplicação. Ele também contém todas as categorias para a aplicação.

Figura 10 - zonas do aplicativo de exemplo (Google Developers. Padrões de Projeto Google TV).

Zonas Contextuais: a zona contextual (área 2 na figura 10) do lado direito da região

global nos casos de adicionar detalhes ou opções baseadas em contexto. Além dos

detalhes que identificam contexto, a zona contextual pode conter sub-padrões, como

paginação, menus, filtros. Esta zona é opcional.

Zonas de Detalhe: o detalhe da zona (zona 3 na figura 10) é mais à direita. Geralmente

é a maior zona, e exibe o conteúdo do aplicativo. Como a zona contextual, a zona de

detalhe pode conter diferentes sub-padrões, incluindo prateleiras conteúdo, navegadores

episódio, listas e assim por diante.

As imagens a seguir mostram exemplos de zonas e padrões para interface de TVs,

tablets e telefones.

50

A figura 11 mostra exemplo de zonas de tela de TV.

Figura 11 - Zonas de TV (Google Developers. Padrões de Projeto Google TV).

A figura 12 mostra um exemplo de padrão de interface para TV.

Figura 12 - Padrões de TV (Google Developers. Padrões de Projeto Google TV).

51

A figura 13 mostra exemplo de zonas de tela para tablet.

Figura 13 – Zona Tablet (Google Developers. Padrões de Projeto Google TV).

A figura 14 ilustra o padrão de interface para tablet.

Figura 14 – Patterns Tablet (Google Developers. Padrões de Projeto Google TV).

52

A figura 15 mostra exemplo de zonas de tela de telefone.

Figura 15 - Zonas de telefone (Google Developers. Padrões de Projeto Google TV).

A figura 16 ilustra padrão de interface para telefone.

Figura 16 - Padrões de telefonia (Google Developers. Padrões de Projeto Google TV).

53

Padrões (Fragmentos): os padrões são subestruturas de zonas que contém controles de

interface do usuário e displays. Normalmente, é implementação de padrão individual,

como um fragmento no Android. O Android fornece layouts de interface do usuário e

widgets que ajudam a implementar muitas das necessidades básicas de aplicações. A

figura 17 mostra alguns padrões dentro do sistema de zona do Google TV.

Figura 17 - Padrões e zonas (Google Developers. Padrões de Projeto Google TV).

Os modelos padrão fornecidos pelo Android incluem guias esquerda, menus, listas,

filtros, paginação e assim por diante. Padrões de TV do Google correspondem

diretamente aos padrões familiares em outros dispositivos, para que possa reutilizá-los.

Por exemplo, uma lista em um aplicativo de telefone, pode colocar a mesma lista em

uma zona apropriada na UI do Google TV. Isso simplifica e acelera a portabilidade das

aplicações.

Padrões básicos: os padrões básicos de interface para aplicativos Android do Google

TV, são estes: prateleira de conteúdo; grade de conteúdo; lista de conteúdo; lista de

conteúdo em cascata; detalhes restantes; guias de subseção. As figuras 18 a 23 ilustram

esses padrões.

54

A figura 18 ilustra um exemplo de padrão prateleira de conteúdo.

Figura 18 – padrão prateleira de conteúdo (Google Developers. Padrões de Projeto Google

TV).

A figura 19 mostra exemplo de padrão grade de conteúdo.

Figura 19 – padrão grade de conteúdo (Google Developers. Padrões de Projeto Google TV).

55

A figura 20 ilustra um exemplo de padrão lista de conteúdo.

Figura 20 – padrão lista de conteúdo (Google Developers. Padrões de Projeto Google TV).

A figura 21 mostra exemplo de padrão lista de conteúdo em cascata.

Figura 21 – padrão lista de conteúdo em cascata conteúdo (Google Developers. Padrões de Projeto

Google TV).

56

A figura 22 ilustra exemplo de padrão grade detalhe restante.

Figura 22 – padrão detalhe restante conteúdo (Google Developers. Padrões de Projeto Google TV).

A figura 23 demonstra exemplo de padrão de guias de subseção.

Figura 23 – padrões de guias de subseção conteúdo (Google Developers. Padrões de Projeto Google

TV).

57

Classificando e filtrando: para fornecer meios para que os usuários classifiquem os

dados através de filtros e listas na UI. Em uma tela de computador ou de toque,

normalmente estas opções são fornecida por meio de menu drop-down na parte

superior da lista do lado esquerdo da tela. No entanto, é preciso lembrar as

limitações de navegação D-pad. Diante disso, é importante rever algumas forma de

implementar a interface no ambiente de 10 pés. Na figura 24, a área de laranja

marca o padrão que controla a classificação e filtragem da lista.

Figura 24 - Tipo de padrão de filtro conteúdo (Google Developers. Padrões de Projeto Google TV).

58

Quando mover a área, o filtro se expande (figura 25) para expor todas as opções

disponíveis, e também apresenta a opção que está selecionada no momento.

Figura 25 - Tipo de padrão de filtro ampliado conteúdo (Google Developers. Padrões de Projeto

Google TV).

Pode precisar mais do que uma lista de opções para os estados minimizados e

expandidos. A figura 26 mostra a versão do tipo de padrão de filtro, em seu estado

minimizado.

Figura 26 - Várias listas de opções, minimizada conteúdo (Google Developers. Padrões de Projeto

Google TV).

59

A figura 27 mostra um exemplo da versão do tipo e padrão de filtro no estado

expandido com várias listas de opções.

Figura 27 - Várias listas de opções, expandida conteúdo (Google Developers. Padrões de Projeto

Google TV).

Nota-se que a visão ampliada demonstra várias maneiras de fazer seleções e destacá-los.

As opções ficam em negrito quando são selecionadas. Sob B, mostra exibe todas as

opções quando selecionadas. C usa caixas de seleção para indicar quais opções estão

selecionadas. D mostra o resultado, se nenhuma opção for selecionada.

Deve se possível, atualizar a lista para o usuário ao selecionar as opções. Isso fornece

informações úteis para o usuário, e faz com que o aplicativo parece mais ágil. Ele

também elimina a necessidade de um botão específico Aplicar Filtros e de atualização

de tela cheia. É importante lembrar-se que como o usuário navega para trás, para a

esquerda ou para a barra de navegação da lista, deve minimizar as opções uma vez, e

exibir as opções escolhidas no momento.

D-pad armadilhas da interação: a interação da navegação D-pad com esses padrões

de interface enfatiza ainda mais o benefício de uma hierarquia da esquerda para a

direita. No exemplo em verde na figura 28, as três zonas fornecem lista e contexto de

confirmação. À medida que o usuário diminua a seleção da categoria de item para a

confirmação, eles se movem da esquerda para a direita. Qualquer navegação inter-zona

60

se limita para cima e para baixo. Isto torna mais fácil para selecionar um item de uma

longa lista e, em seguida, confirmar a seleção.

Figura 28 - A zona de organização de padrão desejável conteúdo (Google Developers. Padrões de

Projeto Google TV).

No exemplo em vermelho indesejável (figura 29), a hierarquia é a mesma, mas é

colocado para fora na vertical. Os usuários podem navegar para cima e para baixo para

mover de zona. A navegação intra-zona é inconsistente, na parte superior e inferior da

navegação. Dentro da zona a navegação é da esquerda para a direita, mas no centro é

para cima e para baixo.

Em um dispositivo touchscreen, este esquema é relativamente fácil de manusear, pois os

usuários podem pular as zonas, já que podem tocar em qualquer área da UI. No entanto,

em um dispositivo D-pad, os usuários não podem pular zonas. Para deslocar de uma

região global no topo para os botões de confirmação no fundo, devem percorrer todos os

itens na lista, na zona centro. Isso é difícil se a lista é grande, contendo 50 itens ou mais

por exemplo. Usando hierarquia da esquerda para direita impede essa armadilha.

61

Figura 29 - Zona indesejável e padrão de layout conteúdo (Google Developers. Padrões de

Projeto Google TV).

3.1.7 UI Performance (Desempenhos UI)

Estudos mostram que os usuários preferem aplicações rápidas, por isso deve equilibrar o

visual com desempenho rápido. Além disso, dispositivos de TV variam

consideravelmente, eles não podem tornar tão rápido quanto um computador. Antes de

usar um grande número de animações complexas na aplicação, é preciso analisar e testar

o impacto na satisfação do usuário.

À medida que desenvolvem o aplicativo, tentar medir o desempenho do aplicativo em

termos de quanto tempo certo as operações têm ou quantas instâncias de objetos são

criadas usando as ferramentas de teste do Android. No entanto, esses indicadores não

são importantes para os usuários finais.

O caminho para alcançar o melhor desempenho nem sempre é o mesmo para obter o

melhor desempenho absoluto mais rápido. Verificar se o aplicativo não executa código

tanto que o tempo de execução não é capaz de atualizar freqüentemente a tela e recolher

a entrada do usuário. Em alguns casos, a realização deste equilíbrio envolve a divisão de

62

uma tarefa do programa em partes de modo que durante a execução a tela pode ser

atualizada em parte. Aqui estão algumas perguntas de desempenho que pode fazer:

A aplicação inicia imediatamente?

As animações da aplicação ela é suave ou agitada?

O conteúdo do vídeo tem um olhar suave ou agitado?

Os clipes de áudio reproduzem continuamente, ou pausa e continua?

As janelas são flicker ou transforma em branco, durante o funcionamento de

uma longa operação?

Quando digita o texto na aplicação, mantém a entrada de texto?

Clicando na interface do usuário a resposta é imediata, ou há um atraso?

As outras aplicações respondem mal quando o aplicativo está sendo

executado?

3.1.8 Additional Tips (Dicas adicionais)

As UIs de TV de sucesso são simples tanto em conceito e design. Dicas para a produção

de uma interface fácil de entender e usar:

Identificar as partes principais da interface antes de começar a desenvolver;

Agrupar o conteúdo, controles e interações por prioridade;

Descartar elementos não essenciais;

Usar um modo visível de navegação ou uma hierarquia de informações;

Alcançar a ação principal em um clique;

Não esconder características-chave em um menu;

Usar apenas algumas características-chave;

Exibir sempre uma maneira fácil para retornar à posição anterior. Não

confiar no botão de volta;

Antecipar e selecionar a próxima ação quando puder;

Evitar a tentação de usar ícones abstratos;

Usar rótulos claros, curtos e testá-los com os usuários;

Limitar a rolagem vertical;

63

Pensar como o conteúdo será ampliado quando aumentar o tamanho;

Se tiver que rolar, certificar-se que uma parte da seção mais baixa é sempre

visível na tela;

Usar widgets de aplicativos;

Widgets de aplicativos são um conjunto limitado de recursos que os usuários

podem ligar a partir da tela inicial;

Usar atalhos de informações. Por exemplo, um widget de relógio para exibir

a hora;

Usar as diretrizes de ícone do Android;

Ícones ajudam a orientar os usuários através da interface;

Personalizar qualquer parte do aplicativo, incluindo os ícones, mas no

desenvolvimento sob encomenda pode não aparecer o mesmo em futuras

versões do Android;

Consultar o Guia do Android Developers para obter mais informações sobre

os ícones.

64

4 Resultado da pesquisa

O presente estudo depois de analisados os dados coletados, identificou a existência de

vários padrões de projetos que são utilizados no desenvolvimento de projeto de software

para aplicativos que roda no sistema operacional Android. Os padrões identificados

foram:

23 Designer Patterns, também conhecido como Gang of Four ou GoF, que são

aplicados no desenvolvimento de produto de software em Java e outras

linguagens. Os aplicativos para Android é baseado na linguagem de

programação Java, dessa forma, os padrões de projetos chamado de Gangue dos

Quatros (Gof), são também aplicados nos software desenvolvidos para

dispositivo que roda sob esta plataforma;

21 padrões Java EE, que são aplicados no desenvolvimento de aplicação em

linguagem de programação Java. Estes padrões em muitos casos aplicam-se na

programação para sistema em Android, visto que, o Android é baseado na

linguagem de programa Java;

58 padrões de projeto de interação essenciais, que lidam com os principais

aspectos na construção de aplicativos móveis. Estes são padrões de interface

gráfica (GUI) para aplicação Android;

12 antipadrões que descrevem os erros mais comuns a serem evitados nas

aplicações para o Android;

10 padrões de navegação de interface gráfica utilizado no desenvolvimento de

aplicativos para as diversas plataformas móveis existentes;

8 padrões sobre desenvolvimento de aplicativos para o Google TV.

A plataforma Google TV é baseada no Sistema Operacional Android. Os aplicativos

para o Android é desenvolvido em linguagem de programação Java. Dessa forma, é

aplicados os padrões de projetos conhecido como a Gangue dos Quatro ou Gof e Java

EE, uma vez que esses padrões se aplica em produtos de software dessa linguagem de

programação, tendo em vista, que o código das aplicações para o Android é baseado na

linguagem Java de programação.

65

Os padrões de interface usados nos aplicativos Android, também se aplicam aos

produtos de software para o Google TV, pois esses padrões tratam de facilitar a

navegação nesses dispositvos.

Os aplicativos para plataforma Google TV, não suportam alguns recursos que podem

estar disponíveis em outros dispositivos. Além das diferenças internas entre uma

aplicação Android para um telefone e uma para o Google TV, há diferenças na interface

do usuário. Dessa forma, o Google recomenda 8 padrões de desenvolvimento de projeto

exclusivos para essa plataforma, permitindo melhor navegação do usuário.

Diante da existência dos diversos padrões de projetos, que pode ser usados nos

aplicativos para o Android e Google TV. Embora todos eles sejam importantes, querem

na organização e reaproveitamento de código, como os padrões de projeto Gang of Four

(Gof). Os padrões Java EE para a programação em camadas, especialmente para os

aplicativos que necessita navegar pela web. Não pode deixar mencionar os padrões de

interface para as aplicações de dispositivos móveis, que torna e interface mais amigável,

assim facilita a navegação pelo o usuário do sistema. Todos estes padrões são

recomendáveis para melhor qualidade e desempenho das aplicações. Todavia, cabe

ressaltar, a observância dos padrões de projetos recomendados pelo Google, para o

desenvolvimento de aplicações para a plataforma Android do Google TV. As aplicações

para essa plataforma, embora as funcionalidades sejam parecidas com os aplicativos

para dispositivos móveis, todavia ela possui característica própria. A sua navegação é

diferente de um celular ou tablet. Os padrões recomendados ajudam na criação de

aplicações que facilita a navegação e a interação com a interface do dispositivo, pois

neles estão inclusos os conceitos de usabilidade.

66

5 Considerações finais

Este estudo analisou os padrões de projeto existentes, utilizados no desenvolvimento de

aplicativos em Android e que poderá ser aplicado à plataforma Google TV. Foi baseada

em análise bibliográfica sobre padrões de projeto de interface aplicada no

desenvolvimento de aplicativos para plataforma Google TV. O foco de estudo foi o

desenvolvimento de aplicativo para essa plataforma e a utilização de padrões de

interface, visando facilitar a navegação.

O presente trabalho apresentou os vários sistemas operacionais no mercado, como: o

iOS da Apple, o Android do Google, o Windows Fone da Microsoft. Portanto, a base de

estudo foi o sistema operacional Android no desenvolvimento de aplicativos para a

plataforma do Google TV e a utilização de padrões de projeto para o desenvolvimento

de aplicativos para essa plataforma.

Os padrões de projetos utilizados no desenvolvimento de projeto de software para

diversas linguagens de programação estão disponíveis no mercado. Há guia contendo

um conjunto de recomendações sobre padrões de desenvolvimento de projeto de

aplicativos para o Google TV. A utilização dos padrões recomendados ajuda os

desenvolvedores na produção de software com melhor interface, facilitando a

navegação e a interação do usuário com o dispositivo, pois neles estão inclusos os

conceitos de usabilidade.

O desenvolvimento de aplicações móveis especificamente em Android necessita rodar

na plataforma do Google TV. Existem diversas literaturas referentes aos padrões de

projetos de software para celulares e tablets, porém há uma carência de publicações,

especialmente em língua portuguesa, sobre padrões para o desenvolvimento de

aplicativos, especificamente para o Google TV. Dessa forma, pretendeu-se contribuir

para a comunidade de desenvolvedores de software para essa plataforma.

O conhecimento sobre o uso desses padrões nas aplicações para TV ainda é incipiente e

necessita de novas pesquisas, pois quanto mais estudos forem realizados ampliará o

67

conhecimento sobre esses padrões, tanto por parte dos profissionais desenvolvedores,

como no meio acadêmico da área do ensino de desenvolvimento de software.

.

68

Referências

PONTUAL, Jorge. Aplicativos de celular batem recorde de downloads no fim do ano.

04/01/2012. Disponível em: http://g1.globo.com/jornal-da-

globo/noticia/2012/01/aplicativos-de-celular-batem-recorde-de-downloads-no-fim-do-

ano.html. Acesso em: 05-10-2012.

Aplicativos para celular e tablet animam mercado bilionário. Vida Digital. Disponível

em: http://veja.abril.com.br/noticia/vida-digital/aplicativos-para-celular-e-tablet-

animam-mercado-bilionario. Acesso em: 05-10-2012.

A arte de fazer aplicativos. Vida Digital. Disponível em:

http://veja.abril.com.br/multimidia/infograficos/a-arte-de-fazer-aplicativos. Acesso em:

05-10-2012.

ANDROID 4.1 para desenvolvedores. Disponível em:

http://developer.android.com/about/versions/jelly-bean.html. Acesso em: 06/11/2012.

MORAIS, Jaqueline Oliveira de. Android – Como preparar um ambiente para

desenvolvimento e criar a primeira aplicação. Scribd. Disponível em:

http://pt.scribd.com/doc/54776510/Tutorial-Android. Acesso em: 06/11/2012.

Google Developers. Padrões de Projeto Google TV. Disponível em:

https://developers.google.com/tv/android/docs/gtv_android_patterns?hl=pt-BR

Acesso em: 10/09/2013.

Google Developers. Developing Google TV User Interface. Disponível em:

https://developers.google.com/tv/android/docs/gtv_displayguide?hl=pt-BR

Acesso em: 10/09/2013.

Google Developers. Otimizando Layouts para TV. Disponível em:

http://developer.android.com/training/tv/optimizing-layouts-tv.html. Acesso em:

10/09/2013.

Teleco – Inteligência em Telecomunicações. Estatísticas de Celular no Mundo, 2013.

Disponível em: http://www.teleco.com.br/pais/celular.asp. Acesso em: 23/09/2013.

ROCHA, Lincoln Souza. Padrões do Catalogo J2EE, 2003. Disponível em:

https://www.google.com.br/#q=livro+padr%C3%A3o+J2EE. Acesso em:21/11/2013.

MILANI, André. Programando para iPhone e iPad. São Paulo: Novatec, 2012.

LECHETA, Ricardo R. Google Android para Tablets. São Paulo: Novatec, 2012.

DEITEL, Paul; DEITEL, Harvey; DEITEL Abbey; MORGANO, Michael. Android

para Programadores - Uma abordagem baseada em aplicativos. Porto Alegre:

Bookman, 2013.

69

ZANDTRA, Matt. Objetos PHP, Padrões e Prática. 2. ed. Rio de Janeiro: Alta Books,

2009.

NEIL, Theresa. Padrões de Design para Aplicativos Móveis. São Paulo: Novatec,

2012.

FREEMAN, Eric; FREEMAN, Elisabeth. Use a Cabeça Padrões e Projetos. 2. ed. Rio

de Janeiro: Alta Books, 2009.

NUDELMAN, Greg. Padrões de Projeto para o Android. 1. ed. São Paulo: Novatec

Editora Ltda, 2013.