Testando Websites em Browsers de Video Games

Por Anna Debenham

Artigo traduzido com autorização da A List Apart Magazine e do autor.

—

De acordo com os estudos de 2010 e 2011, mais de um em cada oito usuários de internet no Reino Unido, EUA e França – e aproximadamente um em cada quatro adolescentes americanos - usam video games para ficarem online [1].

Isso não é novidade. Os recursos de internet foram introduzidos nos consoles em 1997 com o Game.com, que permitia aos usuários fazer upload de seus scores, conectando-se a um modem dial-up, e até mesmo checar e-mails ou navegar por websites se tivessem um cartucho de internet.

Hoje existem três consoles principais (Xbox 360 da Microsoft, Playstation 3 da Sony e o Wii da Nintendo) e todos são compatíveis com a internet. O Xbox 360 é o único entre eles sem um navegador próprio, mas a Microsoft anunciou que o lançamento do IE9 para o console será em breve. Algumas empresas foram tão longe ao ponto de projetarem experiências especificas para consoles, como a versão do Reader do Google 2007 para o Wii, que agora é destinado a qualquer smart tv.

Mesmo sabendo que há 15 anos já podíamos acessar a internet através desses aparelhos, nos mais variados tamanhos, formatos e inclusive na vasta variedade de video games portáteis – como a linha PSP da Sony e DS da Nintendo -, até o momento, falamos pouquíssimo sobre os navegadores dos consoles.

É hora de mudarmos isso.

Diagrama de navegação na web utilizando os controles dos video-games.

Os consoles de hoje em dia podem proporcionar experiências abaixo da média com a escolha de navegadores alternativos, mas isso não significa que devemos ignorá-los. Apesar de tudo, “Não podemos prever um comportamento futuro à partir de uma experiência atual desagradável” como diz Jason Grigsby.

Quanto mais as produtoras de consoles fornecerem aparelhos compatíveis com a internet - assim como as smart tvs que continuam a entrar no mercado – será o momento de planejar como nossos sites se adequarão à estes novos contextos. E isto significa: ficar confortável no cenário atual dos consoles.

Quem usa o navegador do video game?

Os video games usados nas TVs não são apenas para gamers. Agora eles são comercializados e vendidos para desempenharem funções de outros serviços, tais como acessar o Netflix e assistir filmes em Blue-ray. Alguns consoles  também possuem aplicativos para Twitter, Facebook, Skype e Foursquare, ou seja, há uma grande chance de um usuário visitar o seu site através de um video game.

De acordo com a organização Pew Internet, 80 por cento dos adolescentes americanos, entre 12 e 17 anos de idade, possuem um video game, e metade deles possui um aparelho portátil. Os video games portáteis são mais populares entre os adolescentes mais jovens, com dois terços daqueles com 12 e 13 anos de idade possuindo um.

Entre os adultos, a Pew constatou que no geral, os homens são ligeiramente mais propensos à adquirirem um video game, mas as mulheres são ligeiramente mais propensas à adquirirem um console portátil.

No Reino Unido, os jovens adultos de 16 à 24 anos de idade, são mais propensos à adquirirem um video game, e 20 por cento deles o utilizam para acessar websites. Dentre as crianças de 5 a 15 anos, 5 por cento delas acessam a internet com mais frequência usando um video game do que por qualquer outro aparelho. Na verdade, esta faixa etária é mais propensa à acessar a internet usando um video game do que usando um telefone celular ou tablet. [2]

Entre todas as faixas etárias, os video games são aparelhos mais populares para se navegar na internet que os tablets, possivelmente pelo fato de as pessoas serem mais propensas a adquiri-los.

Resumindo, todos os tipos de pessoas estão usando os navegadores dos video games para os mais diversos fins. Um exemplo disso, é quando o video game se torna uma alternativa adicional e conveniente de se navegar na internet, caso haja competição pelo uso do único PC da residência. Video games portáteis também são populares entre os pais que não querem dar um smartphone caro aos seus filhos. O Nintendo DS é particularmente popular entre as crianças do primário, pois algumas escolas o utilizam em algumas tarefas.

Nós cometemos erros no passado ao supor quais tarefas os usuários de celulares pretendiam realizar. Mas, assim como os milhares de clientes do eBay – que compravam carros pelos celulares semanalmente – alguns usuários de video games já fazem coisas consideradas “avançadas” ao navegarem na internet – como se inscrever num banco pelo PS3, a exemplo das tentativas de vinte pessoas no Kiwibank no ano passado.

Testando os navegadores de consoles

Enquanto você não for capaz de testar seus sites em cada video game por ai à fora, será muito útil reconhecê-los e entender suas peculiaridades, assim você poderá desenvolver a melhor experiência para quantas pessoas forem possíveis. Para isso, considere todos os três principais tipos de video games:

1. Video games que são conectados em um televisor, assim como o Wii da Nintendo, o PS3 da Sony e o Xbox 360 da Microsoft.

2. Video games portáteis, como o PSP da Sony e o Nintendo DS.

3. Video games em celulares, projetados primeiramente como celulares mas com botões de video game (ao contrário dos video games com recursos de um celular).

Com o surgimento dos locais comunitários para testes ao redor do mundo, faz sentido levar um pouco de cada um desses tipos de video games para dentro deles - especialmente aqueles com os recursos mais diversificados.

Tratando-se de testar um aparelho de video game na TV, o Wii da Nintendo dispõe de um motion controller que é útil para se testar navegando num site. Há também o novo Wii U chegando em breve, que terá um touchscreen no controle que o linkará à TV. O Sony PS3 é útil para se testar a facilidade da navegação através de um controle convencional de games, enquanto o Xbox 360 será um aparelho importante de se experimentar quando o IE9 for lançado para ele.

As duas séries mais populares de video games portáteis são o Nintendo DS e o Sony PSP. O video game portátil mais recente da Sony é o PS Vita, que tem um modelo 3G opcional e que também pode ser usado como um controle opcional para o PS3. Os modelos portáteis com acesso à internet mais antigos da Sony são: PSP-1000, PSP-2000, PSP-3000 e PSP Go (o PSP-E1000 não possui recursos de internet).

Quanto a linha DS, o DSi e o 3DS são úteis por possuírem navegadores diferentes. Ao invés de terem navegadores já pré-instalados ou disponíveis via download, o DS mais antigo e o DS Life requerem um cartucho físico do navegador, tornando bem provável que poucas pessoas naveguem na internet através deles.

Testando em smart tvs

O tamanho da tela de uma televisão não quer dizer que sua definição seja melhor, pois o texto pode vir a ser pixelado e difícil de ler, principalmente quando o navegador aumenta a escala de conteúdo. Mesmo que as telas das TVs sejam normalmente maiores do que as telas dos computadores desktop, os telespectadores devem se sentar mais afastados delas para que esses defeitos diminuam.

SONY PLAYSTATION 3

O navegador NetFront do PS3, cuja base é o WebKit (linha de código aberto encontrado também no Chrome e Safari), tem seu tamanho limitado, sendo bem mais estreito que o tamanho da TV.

Os controles analógicos movem o cursor e rolam a página. O botão L1 (na parte superior esquerda) é o botão retroceder e o botão R1 (na parte superior direita) é o avançar. Pressionando o botão triângulo, faz surgir um menu de ações como search e bookmark, e o D-pad desloca o cursor entre os links da página.

Múltiplas janelas podem ser abertas e acessadas usando o L3 (pressionando o analógico esquerdo) e usando L2 e R2 (os botões inferiores de esquerda e direita) pode alternar sucessivamente entre cada janela aberta.

Suporte do Navegador

- Suporte no HTML5: 68/500 (no html5test.com)
- Suporte no CSS3: 38% (no css3tesst.com)

NINTENDO WII

O Wii tem o navegador Opera 9 com 800 pixels de largura (cuja altura varia dependendo do tamanho da tela). O controle remoto, usado como um apontador laser, vibra ao pairar em cima de um link. A página rola enquanto o controle é movido pelo canto da tela com o gatilho pressionado. Os botões + e – servem para aproximar e afastar o zoom. Pressionando o botão 1 do controle remoto, surgirá o menu de favoritos; o botão 2 mostra uma versão da página sem estilos de layout.

Quando os links são muito pequenos e próximos uns dos outros, o manuseio do controle remoto pode tornar-se um trabalhoso problema ao navegar por um site, a não ser que as áreas clicáveis sejam grandes. Pois optar entre os links e digitar por um tempo prolongado torna-se cansativo e dá a impressão de que o controle remoto está pesado.

Normalmente, um site iniciaria carregando, travaria e imediatamente voltaria a tela inicial do console sem qualquer aviso ou erro.

- Suporte para HTML.5: Falha ao executar
- Teste do CSS3: Falha ao executar

Testando em consoles portáteis

Como os televisores modernos, os video games portáteis são em telas widescreen, em vez de telas altas semelhantes as dos telefones celulares em modo portrait. Isto significa que muitos websites responsivos mostram uma versão do site em tela grande, mesmo que um layout para tela pequena seja mais apropriado.

SONY PS VITA

O Vita é o console portátil mais recente da linha PS e é o primeiro a incluir uma opção 3G. Na parte de trás dele há um touchpad, usado em alguns jogos para manter os polegares fora do caminho enquanto estiver jogando-o, mas o navegador não tira proveito disso.

O navegador do Vita é uma versão do Netfront baseado no WebKit. É estranhamente  identificado como Silk entre o conjunto de strings dos navegadores, pois esse é o mesmo nome do navegador do tablet Kindle Fire da Amazon.

Os sites podem ser visualizados apenas no tamanho 960×544 em 220dpi, assim a maioria é mostrada numa exibição otimizada para telas widescreen, ao invés de uma visão para telas pequenas. Até oito janelas podem ser abertas simultaneamente.

Embora o Vita seja um produto Sony, a experiência proporcionada não se iguala ao do PS3 – o navegador depende muito do touchscreen e usá-lo não parece ser mais vantajoso que usar os controles convencionais de jogos do aparelho.

Suporte ao Navegador.

- Teste do HTML.5: 58/500
- Teste do CSS3: 32%

Nintendo DSI

A linha DS é inconfundível por ter duas telas e canetas Stylus. A tela inferior é uma touchscreen resistiva, como a tela da parte traseira do assento de um avião, ao contrário da tela capacitiva, como de um smartphone. As telas do DSi tem dimensões relativamente pequenas (256×192) e baixo ppi.

O DS aproveitará as duas telas para exibir um site otimizado para telas pequenas, tratando-as como uma única coluna alta. Em sites não otimizados, o site é espelhado em ambas as telas: em uma estará ampliado e em outra afastado. Não há multi-touch (interpretação de dois toques distintos na tela), então não é necessário pressionar para ampliar a tela, dificultando a leitura de longas linhas de texto. Não há estilização de fonte (como o negrito ou tão pouco o itálico) e o tamanho do texto é limitado a um certo alcance. [3]

Suporte ao navegador

- Teste do HTML.5: 89/500
- Teste do CSS3: Falha ao executar

Nintendo 3DSXL

Este aparelho tem uma caneta Stylus e três câmeras: duas na parte de trás para fotos e videos 3D e outra na parte frontal. Não é necessário o uso de óculos especiais pra ver o conteúdo em 3D, no entanto o ângulo e a distância do aparelho devem ser mantidos corretamente. A profundidade do efeito pode ser ajustada através do cursor do próprio aparelho.

Apenas a tela de cima é 3D, e ela é mais larga do que a de baixo, que é uma touchscreen resistiva em 2D. As telas são fisicamente maiores que as do modelo menor do 3DS, mas a dimensão dos pixels são iguais (800×240 na superior e 320×240 na inferior), emblocando o texto. Quando se rola a página na tela de cima, aparecem lacunas em ambos os lados por conta da diferença de tamanho entre as duas telas.

Os modelos mais antigos do DS vinham com o navegador Opera, mas em suas versões mais recentes é instalado por padrão o navegador NetFront, acessível a partir da tela inicial.

Sites são mostrados em 2D, mas as imagens do tipo MPO podem ser vitas em 3D na tela superior – imagem MPO é a combinação de duas imagens JPEG, o que resulta em um único arquivo JPEG (as imagens são sobrepostas de forma a gerar o efeito de profundidade visto em imagens 3D) – O problema é que atualmente as imagens MPO não podem ser vistas usando-se o navegador instalado no aparelho. Para vê-las em 3D é preciso fazer o download da imagem e abri-la como um arquivo local.

O D-pad é usado para alternar entre os links; uma linha é desenhada ao redor dos elementos selecionados. O analógico é usado para rolar a página. Assim como os ícones de zoom no touchscreen, os botões X e Y também são usados para aproximar e afastar. E os botões laterais avançam ou retrocedem pelo histórico do navegador.

Ao aproximar o zoom, a quebra automática de texto força o comprimento da linha a se adequar a largura da janela. O navegador pode ser usado enquanto o jogo permanece pausado ao fundo, permitindo aos jogadores procurarem por tutoriais e orientações de como jogar na internet. Eu ouvi falar que isso também pode ser realizado em outros video games.

Em testes, o carregamento de alguns sites foram interrompidos por serem muito grandes e por falta de memória no sistema, que também foi um problema comum no DSi.

Suporte ao navegador

- Teste do HTML.5: 98/500
- Teste do CSS3: 42%

Testando em console phones

Desde 2003, os fabricantes vêm tentando combinar os video games portáteis aos celulares, como no Nokia N-Gage. Hoje, o mais interessante entre esses é o Sony Ericsson Xperia Play, que se parece com um celular, mas possui controles slide-out semelhantes aos do Playstation.

A qualidade da tela é muito superior à do PS Vita e em qualquer momento que o game-pad é aberto, sua orientação passa a ser horizontal. Ele executa o sistema Android 2.3 (Gingerbread). No geral, os sites ficam com uma aparência agradável e seu navegador é tão competente quanto qualquer outro encontrado em smartphones modernos.

Mesmo que se assemelhe mais com um telefone do que com um video-game, é importante considerar este aparelho híbrido. Como os celulares competem com os video games portáteis, é bem provável que vejamos outros aparelhos como ele.

Suporte ao navegador

- Teste do HTML.5: 212/500
- Teste do CSS3: 42%

Perspectivas para o Futuro

Estão a caminho todo um conjunto de aparelhos com novos desafios aos designers e desenvolvedores. A navegação na internet deve aumentar conforme os fabricantes de video games lancem novos recursos e navegadores melhores – Estarão presentes no Wii U funções como micropagamentos por NFC (Near-Field Communication – Comunicação à Curta Distância) e com a chegada do navegador IE9 para o Xbox 360, será possível usar o controle de voz e o controle de gestos pelo Kinect. Já ocorreram alguns experimentos interessantes com as interfaces gestuais para oKinect e com a extensão DephtJS.

Segunda Tela

Todos os três principais video games para tv já possuem ou irão possuir uma segunda tela. Quando conectados, alguns dos jogos do Playstation 3 já podem ser diretamente jogados no portátil PS Vita (Vita Remote Play) ou ele pode ser usado também como um segundo controle.

Algo similar será lançado pela Nintendo, o Wii U: um video game atualizado e gamepad portátil com um touchscreen que pode ser usado como um teclado. Os usuários podem compartilhar o conteúdo que estão acessando, lançando-o do gamepad em direção a TV.

Enquanto isso, a Microsoft anunciou o lançamento do SmartGlass, que possibilitará aos seus usuários conectarem um smartphone ao Xbox e ainda usá-lo como uma segunda tela. O dispositivo sob medida não é só mais um para se conectar, pois com ele o video game interage com qualquer celular ou tablet.

Com o SmartGlass e um Kinect, será possível até mesmo “lançar” o conteúdo de uma tela para a outra, como foi demonstrado no Aral Balkan’s hack.

NOVOS APARELHOS

Com os novos jogadores, aparelhos interessantes também estão surgindo no mercado. Uma dessas novidades é o Razer Switchblade, que é metade computador Windows e metade video game portátil. As imagens mostradas nas teclas do teclado mudam dependendo do conteúdo que está sendo visto no aparelho. Com o formato semelhante à um notebook, ele possui um trackpad (dispositivo sensível ao toque que substitui o mouse) localizado próximo ao teclado e que pode ser transformado em uma segunda tela em miniatura também. Há rumores de que usa uma versão do IE7 com uma baixa pontuação de 40 em testes com o HTML5.

O Ouya é um video game para TVs que foi anunciado e financiado pela Kickstarter e deverá ser lançado em Março de 2013. Ele contará com um controle convencional e o video game executará o sistema Android. Ainda não se sabe qual será seu navegador, mas ele possuirá recursos de internet.

Projetando com os video games em mente

Os navegadores de video games vivem em uma zona desconfortável entre o celular e o tablet, entre o desktop e a TV. Normalmente eles agem como navegadores para celular e desktop, mas a maneira que interagimos com eles é muito diferente.

Jason Grigsby trata sobre esse desafio ao expor suas idéias no The Immobile Web: HDTVs e iMacs possuem as mesmas dimensões de pixels, mas o desktop está a apenas alguns centímetros de distância do usuário, enquanto a TV a alguns metros. Efetivamente, o design linear, comum em telas pequenas, pode ser mais apropriado que um design para telas widescreens. A diferença não está na largura da tela, mas sim na distância da visualização. O fato é que os designs padrões para TVs do Google sugerem que você simule esta experiência usando um celular como “modelo” enquanto estiver projetando.

Também é muito difícil saber se um site está sendo aberto em TVs, pois os strings dos navegadores não são métodos confiáveis e tão pouco amigáveis para serem encontrados, tendo em vista que muitos imitem os strings de outros navegadores. As formatações que adequam os sites aos diferentes tipos de mídias são frequentemente ignoradas, como notado por Patrick Lauke.

Se pensarmos na possibilidade de estarem navegando em um site pela TV, e ainda interagindo com ela através da tela de outro aparelho, essa mistura ficará ainda mais complicada.

O que podemos fazer agora?

“Estamos projetando para mouses e teclados, para keypads T9, para controles de jogos portáteis, para interfaces sensíveis ao toque. Resumindo, estamos mais do que nunca diante de um número maior de dispositivos, modos de entrada e navegadores”. (Ethan Marcote,  Responsive Web Design)

Não podemos adaptar experiências para possíveis usos em cada aparelho, mas podemos usar nosso conhecimento sobre o acesso à internet nos video games para proporcionar a melhor experiência para todos. Como quando o uso da internet nos video games, enquanto ainda tínhamos em mente os telefones móveis, repercutiu para que os demais aparelhos também tivessem acesso.

Busque constantemente por melhorias, pois assim as pessoas terão acesso ao conteúdo do seu site mesmo através de um aparelho que não reconheça certas características. Otimize para que o carregamento seja breve. Insira pontos de interrupção nas media queries – Media Queries definem regras para a utilização de um CSS específico - onde for apropriado para o conteúdo, e não com base na largura já conhecida dos aparelhos existentes. Considere como alguém preencherá um formulário pelo video game e se atente em adicionar o reconhecimento de voz para estes campos.

É tentador focar em experiências em telas do tipo retina screen, mas precisamos considerar  como o site será visto em outros tamanhos de tela também. As pessoas não costumam substituir seus televisores tanto quanto substituem outros aparelhos, então certifique-se que o design tenha um bom funcionamento mesmo quando visto em telas má  configuradas, pixeladas ou de baixo contraste. E mais, como notado por Cennydd Bowles, enquanto as densidades dos pixels aumentam em certos lugares, em outros ocorrerá sua diminuição na mesma velocidade que os aparelhos com telas baratas surgem.

Já vimos isto antes! Como o site Future Friendly nos alertou, é inevitável nos amedontrarmos com o desafio de criar um design para um número maior de contextos. Se formos nos importar em criar sites que sejam acessíveis a todos, então teremos que enxergar além dos computadores desktops e telefones móveis. É hora de começarmos a levar os video games a sério.

Nota de rodapé

[1] De acordo com o relatório da Ofcom em 2011 (PDF) e com o estudo da internet da Pew em 2010, a Ofcom é o regulador independente da indústria de comunicações e executa inspeções no mercado de comunicações internacionais e britânicas. O Centro de Pesquisas da Pew é um “tanque de fatos” sem fins lucrativos que fornece informações de assuntos, atitudes e modismos Americanos.

[2] As estatísticas do Reino Unido são novamente dos relatórios de 2011 da Ofcom: o primeiro relatório trata dos aparelhos usados para acessar websites por idade e o outro trata da alfabetização midiática de crianças do Reino Unido (PDF).

[3] Você pode ler um artigo aprofundado sobre o navegador do DSi em meu blog pessoal.

—

Traduzido por: Vinícius Alves

Acesse o artigo original no A List Apart

---