Para você que se interessa pelo tema ou está em dúvida sobre quais os pontos fortes de cada plataforma, a Ponto Frio disponibilizou na internet um infográfico sobre app stores que reúne diversas informações relevantes e interessantes sobre o tema.

O conteúdo aponta, por exemplo, quais os aplicativos mais vendidos na Apple Store (iPhone), cujo líder é o game Angry Birds, e também na Android Market, liderada pelo jogo Cut the Rope. Outra informação muito útil é a média de preço dos conteúdos, sendo a Apple a mais barata, com US$ 2,75, e o Google um pouco mais caro, com US$ 4,50 de média. No entanto, apesar de custar mais, 65% de todo o conteúdo Android é grátis, contra apenas 30% da Apple App Store.

Já com relação ao número de downloads de cada app store, também é possível encontrar números muito interessantes, capazes até de prever tendências para os próximos anos. Por mês, o Android registra cerca de 640 milhões de downloads em todo mundo. A Apple registra um número maior que o dobro levando em conta o mesmo período de tempo (30 dias): 1,45 bilhão de downloads. Para os próximos anos, é previsto um enorme crescimento do Android, que deve empatar no número de vendas com a Apple em maio de 2013 e liderar o mercado de downloads já em 2014.

Infográfico: A batalha das App Stores | PontoFrio.com.

Posts Relacionados

• Style Guide para Android
• Versionamento inteligente para mobiles

Este ano eu estou trabalhando a maior parte do tempo em um monitor fullHD. Notei uma diferença gritante ao digitar código pela primeira vez em um monitor desses. E não são apenas os monitores que estão mudando para uma resolução decente. Também, seguindo o ciclo natural, dispositivos menores estão recebendo a dádiva de ter a alta resolução em suas telas. E isso, meu caro, é uma dádiva para o usuário, para você é mais trabalho.

Pixels não são mais como eram antigamente

Na minha época de escola – nem tanto tempo assim – os professores me ensinaram que o átomo era indivisível. Era incrível por que eu, como criança, me divertia tentando entender como algo poderia ser tão pequeno que não pudesse ser partido ao meio, ficando menor… Mas aí eu descobri que os prótons, os elentrons e outras partículas subatomicas existiam também…

A mesma coisa aconteceu com o pixel. O pixel sempre representou a menor unidade da sua tela. Para os designers, o pixel é a unidade central. É onde tudo se baseia: medidas, tamanhos, alinhamentos etc… Mas o pixel não é mais como era antigamente.

Com o advento das telas HD em aparelhos móveis, o conceito de pixel mudou um pouco muito. Quando a tela retina display do iPhone 4 foi lançada o queixo de todo mundo caiu. A Apple conseguiu apertar quatro pixels onde apenas caberia um. Logo o pixel pode ser definido como a menor unidade na tela, como você já conhece ou pode ser baseada em uma unidade chamada hoje em dia de “pixel referência” ou do inglês reference pixel: que significa que esse novo “pixel” é uma referência ótica de unidade.

Para entrar em detalhes, leia o que é um pixel. Vai te ajudar a entender melhor.

Densidade de pixels

A sigla DPI significa Dots Per Inch, ou seja, é o número de pixels que seu dispositivo pode conter em uma polegada. Quanto mais pixels em uma polegada, mais nítida a imagem é.

Os aparelhos como o iPhone 4 e outros que carregam Android tem uma densidade de pixels muito alta. Ou seja, eles conseguem comprimir um grande número de pixels em suas telas, tornando as imagens melhores. O problema é que as imagens que criamos hoje podem parecer ruins nesses dispositivos. Algo parecido como aumentar uma imagem pequena no Photoshop, entende? Ela fica toda pixelada, sem qualidade nenhuma. Isso por que você está aumentando o tamanho de uma imagem que é pequena e não tem pixels suficientes para dividir pelo tamanho que você definiu.

Entenda fazendo um teste: Vá até o site da Apple utilizando SAFARI. Agora, dê um zoom em alguma imagem. Veja como ela parece pixelada por causa do zoom. Agora abra o Inspector do seu navegador, vá até o console e coloque as duas linhas abaixo:

A imagem foi trocada para uma imagem com o dobro de tamanho da imagem original para que ela ficasse melhor em telas com alta densidade de pixels… Veja a diferença. Eu vi esse truque aqui.

Ações para otimizar

Existem algumas atitudes que vocês já pode tomar agora para poder chavear estes aparelhos e entregar uma experiência melhor para seus usuários.

Utilize media queries

Media Queries são um chuchuzinho. Você pode utilizar uma regra chamada device-pixel-ratio para detectar qual CSS servir dependendo do pixel-ratio do dispositivo. Não precisa ser maníaco e servir vários CSS para vários pixel-ratios… Você vai ficar doido se fizer isso.

Abaixo veja uma tabela de exemplos de aparelhos com seus valores de pixel-ratios:

Agora, como seria o CSS:

Eu sugiro que você se limite apenas para o pixel-ratio 2. Do jeito que as coisas estão andando, os aparelhos de pixel-ratio menor do que 2 desaparecerão logo e os aparelhos com pixel-ratio igual a 1 são maioria e você já faz versões para eles, já que não precisam de fallbacks.

Considere chavear versões de imagens

Este é um problema que ainda não existe uma solução inteligente e definitiva.
A ideia é tentar evitar que o usuário baixe duas imagens iguais, mas de tamanhos diferentes para cada tipo de necessidade. Logo, existem vários fallbacks, em Javascript ou linguagens server-side para servir apenas a imagem necessária.

O pessoal da Clound Four escreveu um artigo muito interessante sobre isso.

Há outros artigos bons por aí. Eu estou dando uma lida em vários para tentar escrever um artigo mais simples aqui no Tableless. Mas o assunto é muito vasto e ninguém tem uma opinião definida ainda. Isso não é útil apenas para a situação dos aparelhos hires, mas também para encontrarmos maneiras de servir imagens menores para versões de sites mobiles.

Text rendering

Você consegue melhorar muito a leitura dos usuários utilizando a propriedade text-rendering.

Esta propriedade melhora muito a leitura quando o usuário dá o zoom nos aparelhos móveis e também corrige suporte de ligaduras e kerning. Coisa linda.

Text Smoothing

A propriedade font-smoothing é útil agora! A leitura melhora demais em monitores normais e previne serrilhamentos ocasionais quando utilizandos @font-face.

Tente usar CSS3

Tente usar e abusar dos efeitos do CSS como sombras, gradientes, bordas arredondadas e etc. Além de facilitarem sua vida evitando a criação de imagens desnecessárias, elas ajudam na velocidade de carregamento do site.

Considere utilizar SVG

Já tem alguns que estão começando a utilizar SVG para facilitar a vida. Para ícones, SVG é ótimo. Você consegue reutilizá-los em diversos tamanhos, aumentando o diminuindo de acordo com a sua necessidade e também do aparelho. Veja um exemplo que a Smashing Magazine escreveu.

Novo elemento HTML

O W3C já criou um grupo chamado Responsive Images Community Group para a criação de elementos do HTML que facilitam a entrega de assets dependendo do contexto. Eles estão propondo um novo elemento que identifica as dimensões do dispositivo, velocidade de rede, densidade de pixels e outros pontos para servir melhor imagens e outros assets dependendo do contexto.

Muitos artigos para ler

• How to make your web content look stunning on the iPhone 4′s new Retina Display
• Retina Display and CSS Background Images
• Designing for the Retina Display (326ppi)
• How to use hi-res images in web apps for iPhone4
• Targeting High Screen Densities with CSS Media Queries
• A Pixel Identity Crisis
• optimizing web experiences for high resolution screens

Posts Relacionados

• ePub: Aprenda a criar um livro digital
• Boas práticas de Acessibilidade
• Experiência deve ter começo, meio e fim
• Estruturação de Client-side – Parte 1: Préprocessadores, Framewoks e Bibliotecas
• Adobe e os Padrões Web

Agora, a bola da vez é criar designs responsivos como se não houvesse o amanhã. É aí que entra a pergunta: você precisa de um design responsivo?

A maioria dos browsers para dispositivos móveis fazem um bom trabalho em websites que não tem versão específica para mobiles. Desde a vinda do iPhone, todos os browsers para mobiles se adequaram de uma forma que antes apenas o Opera abordava. Hoje, quando navegamos em qualquer website, tendo ou não versão para mobile, temos uma boa experiência. Aí vem o ponto: será que criar um site responsivo é o mais importante para o negócio do seu cliente? Produzir um website mobile friendly não é apenas modificar sua carinha, colocar ícones bonitinhos e pronto. Há outros pontos a serem abordados que são tão ou mais importantes que este.

Veja um comentário do Brad Frost em seu artigo:

Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken.

Entende o que eu quero dizer? Um dispositivo móvel já é mais dinâmico por natureza que os desktops. Os aparelhos móveis de hoje em dia nos fazem querer os resultados mais rapidamente. Se você tiver um website desenhado apenas para desktops, mas mesmo assim ele é rápido, os usuários de mobile vão agradecer. Já vi muitos websites mobiles que foram apenas adequados… Isso não é produzir um site mobile. Se seu site é bem desenhado e sua usabilidade impecável, ter um design responsivo passa a ser secundário e você passa a dar atenção coisas mais importantes, por que mesmo sendo uma versão desktop, o usuário conseguirá navegar sem muitos problemas.

Mas você quer dizer que sites mobile não importam?

Não, não quero dizer isso. Pelo contrário, eles importam e muito. A experiência do usuário é muito melhor se houver uma versão mobile, sem sombra de dúvida. Mas do que adianta ter uma versão mobile se o site demora 20 segundos para carregar? O dev cria a versão mobile, mas ele não faz adaptação nenhuma nas imagens (e não estou falando apenas de mudar a dimensão dela), não usa com inteligência o font-face, que embora seja maravilhoso, come muita banda… Acontece que ter carinha bonita não quer dizer que é fácil de usar.

Experiência de usuário é o foco

O foco é buscar a melhor experiência possível que o usuário pode ter em seu dispositivo. Nós usamos responsive web design para levar a experiência do usuário para outro nível. Não apenas por que está todo mundo fazendo. Você não precisa fazer seu site se adequar ao redimensionar a janela. É bonito? Sim, claro, mas só pra impressionar, porque não é muito útil se você parar para pensar.

No front-end, a experiência do usuário vai muito além do design. Responsive web design não é uma modinha é mais uma ferramenta para usarmos em pról da boa experiência do usuário. É por isso que na construção dos nossos projetos, podemos iniciar o trabalho pensando primeiramente nos mobiles e depois nos desktops. Isso nos faz mirar em objetivos mais importantes, não apenas para mobiles, mas para os desktops também, bem como tablets, tvs e todo o resto que vem por aí.

Alguns artigos para você dar uma olhada:

• Why is Responsive Web Design Such A Big Deal? Seriously…You Tell Me
• responsive web design: missing the point
• Which One: Responsive Design, Device Experiences, or RESS?
• Mobile First – A arte de pensar com foco
• A usabilidade deve ser pensada por todos

Posts Relacionados

• Qualidade de Imagens e densidade de pixels
• Utilizando APPs em vez de browsers
• Mobile First – A arte de pensar com foco
• Sites para Dispositivos Móveis – MediaType
• Sobre Internet Explorer para Mobile – Breve impressão

Você realmente acha que vai escrever CSS e HTML como escreve hoje em um cenário como este?
Você já parou para pensar onde CSS/HTML e Javascript se encaixam em um ambiente onde a web é praticamente camuflada por APPs específicos? Eu não estou me referindo a estes Apps como conhecemos hoje. Podem ser Apps instaladas ou WebApps, neste futuro, dá na mesma. Não há diferença.

Pior do que pensar o lugar que CSS e HTML estarão é pensar em como VOCÊ se colocará em um ambiente tão novo quanto este. O que realmente iremos fazer? Qual será o papel de cada um? Será que a metodologia de trabalho será a mesma?

Você também já deve ter visto o vídeo acima. Veja como os personagens utilizam seus gadgets e como tudo está sincronizado. A discussão aí não é se é melhor criar uma App ou uma aplicação Web, é se o seu produto é realmente relevante e se vai ajudar realmente a vida das pessoas. A forma como isso é oferecido não importa, porque em um cenário como esse tudo é igual. Não faz diferença nenhuma. A Web não é só o seu browser.

É por isso que eu acho que os desenvolvedores precisam acordar. Urgente.
Eu perco as contas de quantos desenvolvedores me castigam quando eu digo para ignorar totalmente os browsers antigos. Você acha que um futuro como mostrado nos vídeos ou qualquer outro tipo de futuro, vai ficar esperando um browser ser adequado aos padrões? Aliás, browsers existirão?

Você precisa repensar o que realmente é vida digital. Qual a real utilidade de se carregar um celular dispositivo móvel. Repense o que será design responsivo. Eu sei que a necessidade de hoje é adaptar websites e aplicações para as diversas telas, mas entende que isso é só uma necessidade que vai passar rápido? Vai passar rápido não porque é uma modinha sem importância, mas porque isso deverá ser padrão daqui pra frente. Assim como o Tableless. Lembra que falavam que isso era uma modinha e que já já passaria? Pois é.

Experimente fazer o exercício de entender o futuro da web. É algo que todo profissional web deveria fazer, principalmente os desenvolvedores. Não importa qual linguagem de programação você vai precisar aprender ou desaprender, o que importa é como ela será aplicada. Isso muda tudo.

Embora a ideia não seja apenas direcionada a Mobile mas para todos os meios de acesso, vale muito a pena ver a apresentação que o Michel Lent fez. Dá uma olhada:

Posts Relacionados

• GoMo – Teste seu site mobile
• Agora é a vez dos desenvolvedores
• Boas práticas de Acessibilidade
• Experiência deve ter começo, meio e fim
• Manipulando a metatag Viewport

A boa experiência no design de impresso depende muito da arte inspiradora do designer, qual o papel usado, que tipo de impressão, da gráfica… em web dependemos muito do tamanho da tela, do dispositivo utilizado, do browser, da configuração do texto, velocidade da internet e do computador. São muitas variações para tentarmos manter o controle de cada detalhe.

Quando um designer faz peças para uma campanha ou algum projeto offline, dependendo do caso é necessário criar peças para diversos formatos de veiculação em outdoors, revistas, posters etc. Em relação a web, nós temos todos os formatos de telas que envolvem tablets, notebooks, monitores, TVs e celulares… Com um diferencial: cada uma dessas telas tem um tipo de comportamento diferente dependendo da manipulação do dispositivo e também do usuário. Em alguns dispositivos como tablets e mobiles em uma tela temos dois formatos: retrato e paisagem. Já no impresso não há manipulação pelo usuário. A estimulo é totalmente visual e muitas vezes tátil. Mesmo assim, a experiência que a web entrega é totalmente outra.

No design impresso, quanto mais proporcional, harmoniosa e equilibrada for a peça, melhor será recebida. No design para web também, mas os layouts precisam ser harmoniosos em cada um dos dispositivos, precisa ser proporcional em cada navegador, além da acessibilidade para alcançar usuário distantes.

Mas em ambas a personalidade é a plataforma para a emoção do usuário. Seja online ou offline, o layout, a forma com que o usuário o consome deve leva-lo para uma experiência diferente do normal. E não estou falando de hotsites feitos em flashs ordinários puramente comerciais.

Eu queria ser designer para entender melhor os conceitos que envolvem esse assunto e talvez explicar tudo isso com mais propriedade.

Assim como não é possível escrever uma linha de código sem saber os porquês da importância do código semântico e acessível, não é possível desenhar um website sem ter a plena certeza de que qualquer usuário terá uma experiência envolvente e agradável.

O design para web está mudando de novo outra vez por causa da explosão de novos dispositivos. Se você ainda não parou para pensar, pense: faça as contas das telas: notebooks, monitores, tablets e smartphones. Sendo que cada uma destes tipos de telas tem diversas variações de tamanho e principalmente de resoluções. Já disse que a experiência do usuário precisa ser cross-device, caso contrário, algo se perde.

Eu queria mesmo era fazer um carro.

Posts Relacionados

• Experiência cross-device
• Adobe e os Padrões Web
• Qualidade de Imagens e densidade de pixels
• Agora é a vez dos desenvolvedores
• CSS1K

O Google lançou recentemente um guia de estilo para desenvolvedores do Android. Neste artigo eles conversam sobre como é difícil manter um sistema operacional para mobiles que pode ser instalado e portado para praticamente qualquer dispositivo. Quando um sistema tem essa flexibilidade, as chances da usabilidade e acessibilidade das aplicações e também do sistema tem grandes chances de dar carquinha. Outro problema é desenvolver aplicações para um sistema que vive em constante atualização. O style guide criado pelo Google vem para tentar facilitar todo o processo.

O site é cheio de dicas sobre a interface do sistema, sempre se baseando na última versão do sistema, atualmente a 4.0, Ice Cream Sandwich. O site é praticamente um pequeno manual de boas práticas e guias para os desenvolvedores fazerem um bom trabalho visual nos seus apps.

É uma boa iniciativa que veio tarde. A Apple e a Microsoft martelam esse assunto faz tempo em seus sistemas. Eu já fui usuário dos três sistemas e de longe o Android tinha as Apps com os visuais mais estranhos. Acho que agora o Google dará um jeito na bagunça.

• User Interface Guideline do Android
• User Experience Design Guidelines for Windows Phone
• iOS Human Interface Guidelines

Posts Relacionados

• Adobe e os Padrões Web
• Qualidade de Imagens e densidade de pixels
• Responsive Web Design – focando a coisa certa
• ePub: Aprenda a criar um livro digital
• Boas práticas de Acessibilidade

O tráfego medido pela comScore mostra o market share dos principais players do mercado de mobile em Novembro. O Android continua ganhando, logo atrás vem o iPhone que foi impulsionado pelas vendas do 4S. Todas as outras plataformas perderam campo. Outra coisa, o report da comScore não conta com iPads nem iPods.

Os mobiles Android represetam algo em torno de 47% e o iPhone 30%.

O mais importante são os números abaixo que mostram o uso de conteúdo por estes dispositivos pelos usuários:

Acho que pouquíssimas pessoas, mesmo nos seus computadores, entram no site do Twitter para escrever em vez de usar algum App, não é verdade? Mesmo assim acho que o futuro não estão nos Apps. Eles sempre ficarão lá, firmes e fortes, mas aos poucos muitas empresas irão reformular seus sistemas web para ficar o mais parecido possível com as apps. Esse é o mais inteligente já que você não precisa reprogramar tudo novamente como é feito hoje. A mudança do CSS será o trabalho mais importante nesse caso, já que a interface “precisa” ser diferente em cada um aparelhos.
Na verdade não precisa… Mas é bom manter a interface nativa de cada um dos aparelhos para que os usuários não estranhem a utilização. Não seria bom que a interface do twitter no Windows Phone fosse igual a do iPhone ou a do Android. Confunde bastante. Não, é?

Só uma observação: estes números refletem a realidade lá dos states, ok? Provavelmente esse comportamento pode ser multiplicado em outros países, como aqui.

Posts Relacionados

• Qualidade de Imagens e densidade de pixels
• Responsive Web Design – focando a coisa certa
• Um pensamento sobre design para web
• Experiência cross-device
• Simuladores de Browsers Mobiles

O artigo do Scott Jenson começa dizendo que a popularização dos smartphones são apenas o começo. Juntando o barateamento das peças para a produção destes aparelhos com a criação sistemas de baixo custo e acessíveis como o Android, não só estão surgindo dispositivos baratos capazes de fazer tarefas que antes eram possíveis apenas em computadores, mas dispositivos baratos baseados na web, trazendo uma experiência cross-device nunca antes experimentada. Um exemplo disso é quando utilizamos estes dispositivos integrados com aplicações como o sistema de som Sonos. O Scott Jenson chamada de Zombie Apocalypse dos eletrônicos.

O paradigma dos computadores desktops estão nos impedindo de enxergar novos caminhos não tão longes assim. Isso é totalmente evidente quando falamos sobre smartphones, no qual nós sabemos que não são computadores desktops e tão somente por isso nós temos outras experiências e outras abordargens quando estamos usando aparelhos deste tipo. Perceba que diversos serviços e aplicações estão sendo portados para os dispositivos móveis porque fazem mais sentido nesse meio. O Twitter mesmo foi criado inicialmente para publicações vindas apenas pelos smartphones. Foi um processo reverso.

Me lembro que aqui no Brasil o recebimento de SMS internacional era um problema em algumas operadoras. Muitos queriam utilizar o Twitter, mas não podiam atualizar suas timelines ou receber as atualizações dos seus colegas porque o Twitter, naquela época, era baseado em SMS. Foi aí que a plataforma se popularizou mais lá fora e então a possibilidade de atualizar sua timeline por outros meios surgiu.

Há uma frase interessantíssima no artigo de Scott Jenson onde ele diz assim:

This problem is simple, but pernicious: designers think of new technologies in terms of yesterday’s tasks, failing to clearly see the real potential of the new technologies.

Minha tradução livre: “O problema é simples mas pernicioso: os designers pensam nas novas tecnologias baseando-se nas tarefas de ontem, falhando em ver claramente o real potencial das novas tecnologias.”

Muito óbvio. É por isso que o Windows Mobile falhou! A Microsoft durante muito tempo liderou o mercado de sistemas para mobiles com um sistema ruim, bugado e muito, mas muito inútil, simplesmente porque eles eram praticamente os únicos. O problema com o sistema deles foi a tentiva de portar os conceitos, experiências, comportamentos e tarefas do sistema dos desktops para os mobiles. Claramente um grande erro. Com o Windows Phone eles mudaram (tarde) o cenário. Eles criaram o Windows Phone levando em consideração os atos e comportamentos do usuário em aparelhos deste tipo. Não há nenhuma analogia aos desktops. E mais uma vez, algo que foi criado primeiramente para aparelhos móveis será portado para os desktops, que é o caso da interface Metro levada para o Windows 8.

Os PCs de hoje serão apenas hubs num futuro próximo. No cenário de hoje você escolhe entre Mac ou PC e baixa aplicativos que muito provavelmente funcionarão apenas para um destes sistemas. O modelo ideal, que já é mais real do que imaginamos, é que cada pessoa possa usar múltiplos dispositivos acessando um mesmo dado, uma mesma informação, normalmente pela núvem.

O exemplo do serviço de música via streaming Pandora é perfeito. Ele permite que nós possamos utilizar seus serviços em uma variedade gigante de dispositivos. Sempre sincronizando suas músicas via internet. Tudo sempre integrado. Aqui no Brasil, como o Pandora não funciona, talvez não seja a sua realidade… Entretanto estamos vivendo em um mundo onde o software, a aplicação, o serviço, define qual aparelho você vai comprar.

O Sonos é um aparelho de som Wi-Fi. Além do Pandora você pode sincronizar sua biblioteca de músicas de diversos outros serviços como iTunes ou o Spotify. Quando o conheci eu o quis sem pensar. Nada de iPod ou iPhone plugado no aparelho de som. Nada de fio p2-p2 para ligar meu celular ao aparelho de som… Eu quero ouvir minhas músicas livremente pelo serviço que eu mais gosto no sistema de som da minha casa. Mas quando eu for pra rua e quero continuar ouvindo a mesma biblioteca de música, só que agora no meu fone de ouvido. Essa integração entre dispositivos e softwares é incrível. Perceba que não estamos falando sobre um ecosistema fechado como o da Apple. Estamos falando de hardware e software de fabricantes diferentes, que prestam diferentes serviços, mas que se integram.

Entende o que é a experiência do usuário nesse cenário?

Posts Relacionados

• Um pensamento sobre design para web
• Vote no Especialista em Usabilidade para Presidente
• Sites para Dispositivos Móveis – MediaType
• Sobre Internet Explorer para Mobile – Breve impressão
• Adobe e os Padrões Web

Os dispositivos móveis se tornaram uma febre e vieram para ficar. É a melhor forma de fazer a inclusão digital para aqueles que não tem uma forma de ter um notebook ou um desktop em casa. Não estou falando daqueles smartphones de R$1500, mas dos muitos smartphones, com teclados qwerty, prontos para internet e que custam R$200. Isso sim é inclusão digital para as massas de verdade.

Alguns números

As vendas de smartphones já passaram as de PCs. A utilização de emails pelos dispositivos móveis aumentou em 36%. Sem contar que o tráfego de visitação de websites utilizando smartphones cresceu 600% em 2010!

O Paypal tempos atrás recebia algo em torno de $10 Milhões de dólares em pagamentos via mobiles. Por dia! Eles tem uma predição de movimentar algo em torno de 6 Bilhões só este ano! E em 2016 serão $31 Bilhões!

As perspectivas globais são enormes. Abaixo, veja um inforgráfico que o blog The Meta Cloud preparou. Cuidado para não se assustar.

O conceito

Você consegue entender estes números? Se sim, você vai entender que o conceito do Mobile First faz muito sentido, mas vai contra toda uma tradição de desenvolvimento de sites que você está acostumado. A ideia do Mobiles First é que comecemos a desenvolver e planejar projetos web, desde um pequeno site até um grande sistema, primeiramente para dispositivos móveis e somente depois para desktops/notebooks.

Algumas vantagens

Se o mundo inteiro está passando mais tempo acessando a internet com dispositivos móveis, não é muito sensato pensarmos primeiramente em fazermos sites para desktops/notebooks, não é? O fato é que ao colocar os mobiles primeiro lugar, desfrutamos de uma série de vantagens:

• As capacidades técnicas são mais interessantes. Com o mobiles você pode brincar com o acelerometro, GPS, multitouch, giroscópio e etc. Isso amplia a experiência do usuário para um patamar que o desktop nunca terá.
• Foco. Quem já teve que adaptar um site para mobiles entende que informação demais prejudica. Se focar nas ações essenciais que o usuário executará ao acessar seu site com um dispositivo móvel é o básico.
• A atenção em áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada. Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto a programação server-side ou um HTML bem feito.
• Te prepara para outros cenários. Fazer sites mobile é só o primeiro passo. Mas e os grandes formatos como SmartTVs ou outros dispositivos? Não vai demorar muito para acessarmos a internet de qualquer dispositivo sem bloqueios ou restrições.

O design

O design também precisa ser revisto. Na verdade, o design mais do que nunca conta com as respostas e os conceitos de AI, Acessibilidade e Usabilidade. Se antes fazíamos festa porque a resolução dos desktops aumentaram e agora temos mais espaço para trabalharmos, nos mobiles o cenário é completamente o contrário.

Arquitetura de Informação

As informações que você previa no desktop precisam ser remanejadas, diminuidas e retrabalhadas para que se adaptem nas telas menores. A maioria dos celulares tem algo em torno de 320×480 pixels. Se não tomarmos cuidado, toda a informação pode se perder em uma tela tão pequena. No mundo mobile o simples é a palavra que manda.

Você pode perceber que alguns websites conseguiram resolver bem seus problemas de excesso de informação promovendo em seus websites mobiles apenas as ações realmente importantes e dando foco ao conteúdo que provavelmente o usuário irá consumir quando estiver utilizando um pequeno dispositivo.

Se você é usuário do Flickr, conhece aquele bando de opções que ele guarda em seu menu principal. São centenas de opções e ações que certamente não cabem em uma tela tão pequena.

Um estudo profundo certamente deve ser feito para que você saiba exatamente quais informações e ações serão mais úteis na versão mobile.

Mantendo informações importantes

Existem também outras formas de acomodar um grande número de informações sem que isso atrapalhe o usuário. Uma delas é criando menus dropdown ou separando uma tela que guarda as informações que serão menos utilizadas mas que são igualmente importantes para a utilização do site/sistema. Veja abaixo dois bons exemplos vindo dos sites Gmail e ESPN.

Onde os usuários utilizam seus mobiles e visitam seu site? Bem, de todo lugar. Algumas pessoas acham que usuários utilizam apenas quando estão em filas, ônibus, parados no trânsito etc. Mas algumas pesquisas mostram que 84% dos usuários usam seus dispositivos em casa. Isso mesmo… em casa. Veja bem: quando as pessoas estão em casa, elas preferem utilizar seus smartphones em vez do notebook/desktop!
62% utilizam enquanto assistem a TV. Até a TV perde atenção quando briga com os mobiles.

Não existem mais desculpas. Os browsers para mobiles estão tão modernos quanto os dos desktops. O hardware está muito mais poderoso, mais do que poderíamos imaginar a dois anos atrás. Existe um número gigante de usuários utilizando estes dispositivos, isso os torna potenciais visitantes e claro, compradores. Porque desperdiçar esta oportunidade?

Você pode ler mais sobre este assunto neste livro esperto escrito por LUKE WROBLEWSKI. Aproveite!

Posts Relacionados

• Sobre Internet Explorer para Mobile – Breve impressão
• Mobilidade na cabeça
• Sites para Dispositivos Móveis – Breve introdução
• Browsers dos Dispositivos Móveis
• Responsive Web Design – focando a coisa certa

A intenção dessa denominação é chamar a atenção para o fato de que a os métodos, técnicas e ferramentas de usabilidade que possuímos hoje precisam ser revistos para contemplar a evolução tecnológica e as especificidades dos interesses dos usuários.

O problema com os testes de usabilidade

Os testes de usabilidade como conhecemos hoje (realizados em laboratório) passam a não ter o mesmo grau de eficiência nestes novos cenários de uso.

Testes de usabilidade geralmente são realizados sob um ambiente controlado. Os avaliadores têm controle sobre todas as variáveis (o contexto) que se refere à interação entre usuário e aplicação. No cenário real, o uso pode ser bem distinto e endereçar problemas imprevistos.

Um exemplo: um teste de usabilidade de um tablet realizado em laboratório, onde o usuário interage com o tablet em cima de uma mesa, sentado corretamente em uma cadeira. Este é o cenário real de uso? O mais comum seria o usuário utilizar o tablet nas mãos, no colo, durante uma aula, uma palestra, checando os e-mails antes de dormir, entre outros.

Entretanto, os testes de usabilidade não perderam sua relevância, apenas precisam de uma abordagem reciclada. Além disso, cada vez mais os atributos a serem avaliados passam a ser mais qualitativos do que quantitativos. Como testar a concentração de um usuário com dispositivo móvel em um cenário real de uso? Como mensurar isso?

“A maioria dos testes de usabilidade, e experiência em design de interação, tem sido desenvolvida no contexto de uma pessoa diante de um computador, onde você tem o luxo de atenção integral da pessoa, em um ambiente confortável com distrações em um nível administrável. Dispositivos informacionais, por outro lado, precisam trabalhar em situações de baixa atenção ou onde a atenção do usuário precisa ser canalizada através do dispositivo enquanto ele caminha, fala ou realiza qualquer outra atividade do dia-a-dia que seria rotineiramente classificada como “distração”.” [Thomas e Macredie, 2002]

Os pontos-chave da Nova Usabilidade

A nova usabilidade estende os conceitos fundamentados na usabilidade tradicional. Fatores como Comunicação, Colaboração, Ética e Valor Agregado tornam-se mais relevantes e pertinentes às aplicações desenvolvidas atualmente e, com isso, passam a representar pontos críticos da interação que têm impacto na satisfação de uso.

Pontos chaves da Nova Usabilidade

Comunicação

As aplicações são cada vez mais interativas entre pessoas do que entre usuário-máquina. A Interação Humano-Computador passa a ser cada vez mais vista como Interação Humano-Computador-Humano, onde o dispositivo é o meio que garante esse intercâmbio de informações e a qualidade da mensagem transmitida.

Colaboração

Realização de atividades mútuas entre usuários, com participação colaborativa em determinadas tarefas.

Ética

Com aplicações cada vez mais sociais, as aplicações devem estar atentas à questão de conduta, que pode também ser influenciada pelo projeto da interface.

Eficiência de Interação

Facilidade de execução das tarefas.

Eficácia de Interação

Capacidade da tarefa ser realizada de forma completa e correta

Segurança

Refere-se ao nível de confiança da aplicação. Com o uso de wi-fi e cloud computing, a segurança que o usuário tem ao utilizar a aplicação determina até que ponto ele confia e se dispõe a utilizar os recursos que a aplicação oferece.

Confiabilidade

Se refere ao sentimento que as pessoas possuem com relação a acreditar ou não na forma de interação proposta. Isto está diretamente relacionado com a comunicação e a colaboração.

Privacidade

É a liberdade de escolha do usuário de tornar públicas ou não determinadas informações suas. Este fator está relacionado à segurança.

Valor Agregado

O quanto as funcionalidades de sua aplicação trazem de contribuição para a vida de seus usuários, o quanto de impacto e de valor agregado ele traz para a rotina das pessoas que o utilizam.

Concluindo…

Este série de posts não foi de conteúdo técnico. Sim, é totalmente teórico. Mas são questões que temos que nos colocar a pensar quando falamos de atender novas demandas computacionais.

A usabilidade deve evoluir para se flexibilizar à avaliação e garantia de qualidade em interfaces disponíveis em diferentes dispositivos.

Embora o termo tenha sido cunhado há quase uma década, ainda estamos tentando atingir os objetivos que a Nova Usabilidade estabelece e isto hoje já está se tornando pertinente a qualquer tipo de aplicação, visto que esta diversidade de dispositivos tende a ser predominante.

Precisamos sair da zona de conforto do que conhecemos e pensar como as metodologias atuais podem ser recicladas para agregar esta demanda.

Referências

IHC 2006. Workshop de Usabilidade de Aplicações e Tecnologias Emergentes: a Necessidade de uma “Nova Usabilidade”?. Disponível em: http://www.dimap.ufrn.br/ihc2006/workshop.php

Peter Thomas and Robert D. Macredie. 2002. Introduction to the new usability. ACM Trans. Comput.-Hum. Interact. 9, 2 (June 2002), 69-73. http://doi.acm.org/10.1145/513665.513666

Peter Thomas and Harold Thimbleby. 2002. The new usability: the challenge of designing for pervasive computing. In Proceedings of the 15th international conference on Computer communication (ICCC ’02), S. V. Raghavan and Sudhir P. Mudur (Eds.). International Council for Computer Communication, Washington, DC, USA, 382-388.

Kelma Madeira et al. Uma Avaliação do Orkut utilizando Personas sob a ótica da Nova Usabilidade. In: VIII Simpósio Brasileiro de Fatores Humanos em Sistemas Computacionais (IHC 2008), Porto Alegre, 2008.

Posts Relacionados

• Você sabe o que é a “nova usabilidade”? – parte I
• Usabilidade de interfaces para dispositivos móveis – parte II
• Usabilidade de interfaces para dispositivos móveis – parte I
• Qualidade em Uso: expandindo a Usabilidade
• Adobe e os Padrões Web