Upload
letuyen
View
217
Download
0
Embed Size (px)
Citation preview
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.