Tableless » Internet Móvel

Um pensamento sobre design para web

Diego Eis — Thu, 19 Jan 2012 10:20:37 +0000

É engraçado quando designers de peças offline tentam migrar para web e ficam assustados com as diferenças no processo de criação e produção. O controle que o design para impresso tem sobre a posição dos elementos e a forma final da arte nunca (nunca?) será a mesma na web. No impresso você define precisamente as medidas, posicionando dos elementos, o tamanho das letras, entrelinhas e cores (mesmo brigando bastante nas gráficas por aí). Já na web você briga porque um determinado elemento está deslocado para a direita em um browser ou outro, porque determinada fonte é maior em uma tela e até pouco tempo só tinha um punhado de fonts para criar. Mesmo quando definimos tudo em pixels, há variações inesperadas entre browsers e dispositivos. Também lembro quando havia muita diferença de cores de monitor para monitor. Graças a Deus temos monitores LCD/LED.
E agora ainda temos que prestar atenção aos dispositivos que comprimem mais pixels por ponto do que antigamente.

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

Style Guide para Android

Diego Eis — Fri, 13 Jan 2012 11:55:47 +0000

A Wired entrevistou o Matias Duarte, o cara por trás (ui!) do planejamento de UX do Android.

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.

Posts Relacionados

Utilizando APPs em vez de browsers

Diego Eis — Fri, 06 Jan 2012 11:00:35 +0000

De acordo com a comScore as pessoas estão usando mais mobile Apps para consumir conteúdo do que browsers.

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

Experiência cross-device

Diego Eis — Thu, 22 Dec 2011 05:20:40 +0000

Eu vivo comentando aqui no Tableless sobre o desenvolvimento de sistemas e websites para os diversos meios de acesso. Eu falei sobre esse assunto em diversos artigos. Eu li um artigo chamado The Coming Zombie Apocalypse, escrito por Scott Jenson em abril deste ano. Este artigo me fez perceber que eu estava levando o assunto muito superficialmente, mas que tem muito a ver com o artigo publicado aqui chamado A Experiência deve ter começo, meio e fim.

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

Mobile First – A arte de pensar com foco

Diego Eis — Tue, 13 Dec 2011 15:30:26 +0000

Durante muito tempo especialistas de diversas áreas previram o crescimento do uso dos dispositivos móveis. Demorou um pouco mas a previsão se tornou verdadeira. Hoje todo mundo carrega um pedaço de plástico com uma tela de vidro na mão o dia inteiro… quase uma extensão de nossos corpos.

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

Você sabe o que é a “nova usabilidade”? – parte II

Talita Pagani — Mon, 12 Dec 2011 11:00:50 +0000

A nova usabilidade procura trazer abordagens para lidar com os novos desafios para o desenvolvimento de aplicações baseadas em tecnologias emergentes, como os dispositivos móveis.

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

Talita Pagani — Mon, 05 Dec 2011 12:00:17 +0000

Vimos na parte I e parte II dos artigos sobre usabilidade em dispositivos móveis que as heurísticas permanecem praticamente as mesmas tanto para as aplicações móveis quanto convencionais, a diferença é o quão crítica ou severa elas se tornam para as aplicações móveis. Por este motivo, Thomas e Macredie propuseram em 2002 (sim, há 9 anos!) o paradigma da Nova Usabilidade.

“A usabilidade convencional e mais amplamente disseminada tem suas bases no paradigma do computador pessoal. Tecnologias e aplicativos emergentes, como telefones celulares, TV interativa e computação ubíqua, trazem novos desafios para a usabilidade e demandam uma análise crítica de seus pressupostos. A “nova usabilidade” busca metodologias, teorias e ferramentas que sejam adequadas às tecnologias e aplicativos emergentes.” [Workshop sobre “Usabilidade de Aplicações e Tecnologias Emergentes: a Necessidade de uma “Nova Usabilidade”?” no IHC 2006].

Este novo paradigma denota uma revisão a usabilidade com outro olhar para atender novos dispositivos e novas formas de interação. O que muda neste novo olhar sobre a usabilidade é basicamente o a abrangência contextual. Como assim? A usabilidade como conhecemos considera essencialmente o contexto da interação entre o usuário e o sistema e já vimos que isto traz limitações. Neste novo cenário, é preciso agregar novas variáveis sobre o contexto de uso:

Informações dos hábitos e preferências do usuário
O ambiente social do usuário
As tarefas e objetivos do usuário

Escopo da Nova Usabilidade

Agregando múltiplas informações de contexto e mais a necessidade de uso e os interesses do usuário em relação a estes dispositivos, temos uma amplitude do modelo do usuário. Isto permite flexibilizar interfaces para que elas se adaptem ao contexto de uso. Isto tem totalmente a ver com a Qualidade em Uso.

Para este primeiro contato com o tema, deixo aqui as seguintes reflexões adaptadas do artigo clássico de Thomas e Macredie:

Quanto detalhe estamos perdendo com as metodologias tradicionais?
Qual a função do teste de usabilidade na avaliação destas novas formas de interação?
Quais metodologias de design e avaliação (teste/inspeção) são requeridas para garantir a facilidade de uso de tecnologias emergentes e ubíquas?
Como as abordagens de design e avaliação de interfaces podem ser flexíveis para abranger tecnologias futuras?

No próximo artigo, serão abordados os novos desafios que este paradigma tenta solucionar.

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

Posts Relacionados

Experiência deve ter começo, meio e fim

Diego Eis — Mon, 28 Nov 2011 23:55:31 +0000

Esse artigo pode parecer meio confuso, mas é apenas um pensamento que estive matutando. Não ligue se a ordem das ideias estiverem tortas e sinuosas.

Tive uma experiência muito ruim no primeiro dia de 2010: pulei na piscina com meu iPhone no bolso.
Ok, pode me xingar agora.

Depois da tragédia, ele durou rápidos 5 segundos, e faleceu. Não ligava, não apitava, não fazia nada. “Paciência”, falei para mim mesmo. No dia seguinte peguei um celular reserva que eu tinha guardado: um HTC Touch, com Windows Mobile 6 (não Windows Phone). Foi então que eu notei o porque o trabalho da Apple vicia os consumidores.

Estamos bem acostumados a utilizar um notebook ou um computador desktop, com monitor, teclado e mouse. A interface do sistema muitas vezes parece desaparecer quando se abre o navegador. A experiência de uso dos periféricos já é bastante conhecida e isso facilita muito a forma com que o usuário interaje com a interface. Há uma harmonia, se é que você me entende. A mesma coisa é dificil de acontecer quando utilizamos um dispositivo mobile. Em um dispositivo móvel você precisa de foco. Não há espaço para milhares de botões com dezenas de ações. É SIM e NÃO. É OK ou CANCELAR e mais nada. O que não é o caso do Windows Mobile. O Windows Mobile foi feito daquele jeito Microsoft. Muito, mas muito diferente do Windows Phone que está um primor. Com uma interface totalmente repensada, do zero, onde seu visual se integra com os outros sistemas da marca. Há uma homogeneidade na experiência do usuário quando ele usa a Live do XBOX, o Windows Phone e o Windows 8. A experiência é cross-platform. A Apple faz isso durante anos. E durante todos estes anos esse foi seu segredo. O famoso “eco sistema Apple”. Tudo funciona muito bem quando estamos com nossos iPhones, iPads, MacBooks e iPods. Se eu tenho um iPad, mas utilizo um PC, algo fica estranho. Funciona, mas fica estranho.

Assim como sistema dos mobiles, os sites precisam seguir a mesma fórmula de simplicidade e foco. Por isso, criar sites para mobiles é uma arte. É um jogo de prioridades. Você precisa saber o que é importante na página e focar naquilo. Há um bom trabalho de arquitetura de informação que precisa ser feito. E não se engane, as vezes é muito mais dificil desenvolver um projeto de arquitetura para mobiles do que para versões full.

O iPhone, e agora o Windows Phone, se destacam muito por conta dessa harmonia que citei acima. Há uma ligação em tudo ali. Quando você aciona o Safari, ele tem uma interface intuitiva, bem acabada e que não agride a usabilidade do site. O iPhone tem um browser 100% atualizado com os Padrões Web e isso ajuda um bocado o desenvolvimento de interfaces inteligentes.
E a Apple se preocupa com essa harmonia da qual estamos falando, ela prepara uma série de materiais que ajudam os desenvolvedores. São guias de desenvolvimento e referência com os princípios de design e usabilidade que garantem a experiência completa. Por causa disso os desenvolvedores e designers fazem ótimos apps, tornando a experiência do usuário completa e uniforme durante o uso do dispositivo.

É por isso que a vale a pena municiar os desenvolvedores e designers do mundo todo, para que a experiência não termine quando o consumidor feche o seu aplicativo ou abra o navegador. Experiência tem começo, meio e fim. A Apple se preocupa com essas etapas. Ela sabe que se o site abrir “quebrado” o consumidor vai xingar primeiro o aparelho e não site. Tudo é uma única experiência. Começa no sistema do aparelho e termina no site de um terceiro.

O resto dos aparelhos começam pecando por ter um browser ruim ou uma interface de uso complicada. Na maioria os browsers não dão suporte algum aos Padrões. Isso é um pecado. Se eu tenho um Smartphone, eu passarei mais tempo na internet, conectado, do que falando ao telefone. Esse é apenas um ponto sobre o porque um dispositivo móvel precisa ter um browser decente.

O usuário tem uma boa experiência quando consegue com sucesso a informação que procurava, sem bloqueios. Se ele consegue passar esse processo com sucesso, como se o dispositivo (mobile, desktop, notebook, leitor e tela etc) e o site/sistema fossem transparentes, aí cumprimos com o nosso dever.

Posts Relacionados

Usabilidade de interfaces para dispositivos móveis – parte II

Talita Pagani — Wed, 23 Nov 2011 12:00:44 +0000

Como vimos na primeira parte do artigo, as diretrizes existentes de usabilidade continuam valendo no contexto mobile, mas precisam ser revistas e interpretadas de outra forma. Podemos perceber que o gargalo é conseguir manter as informações e funcionalidades que fazem sentido neste cenário. Adequar aplicações ao contexto de dispositivos móveis apresenta determinados vieses de desenvolvimento.

Variedade de Dispositivos

Variação de hardware (muito maior do que computadores convencionais)

Dispositivos móveis têm uma grande variedade de displays (tamanhos, cores, resolução), de forma de entrada de dados (touchscreen, teclado físico – QWERTY ou convencional -, microfone, câmera) e também de capacidade (processamento, armazenamento, etc.). Com essas combinações, é possível imaginar uma combinação vasta de dispositivos. Como um site pode ser ajustável para proporcionar uma interação similar mediante esta diversidade? Como ele irá aparecer? O conceito de Responsive Web Design e a técnica de media queries são soluções que visam minimizar este fator.

Convenções de interface e interação em plataformas

Compatibilidade de ícones, comandos e ações não é uma diretriz recente em ergonomia de software. Mas em ambientes mobile, este é um ponto que ainda não está bem adequado. Basta observarmos como cada plataforma disponibiliza convenções distintas de interface, sem contar a variação de navegadores, que geralmente são nativos de cada plataforma, o que acaba “amarrando” o usuário.

(Comportamento do usuário no) ambiente

Dispositivos móveis geralmente não são utilizados em um ambiente estável, como uma mesa. O ambiente externo onde o usuário se encontra influencia a sua interação com o sistema. É dia ou noite? O usuário está parado ou em movimento? Com as duas mãos livres? Ocupado? Todos estes fatores externos têm impacto na interação e é da alçada da equipe de desenvolvimento analisar todas estas variáveis para compor o cenário de uso da sua aplicação. Já vimos aqui no Tableless que o ambiente do usuário influencia na qualidade da interação.

Novas perspectivas

É interessante ver que há um movimento por parte da comunidade de desenvolvedores para construir aplicações web cada vez mais parecidas com aplicações nativas do dispositivo.

O que podemos extrair disso é um esforço em reproduzir o modelo de interação familiar às pessoas com relação à estes dispositivos.

De certa forma, é uma tentativa de adequar as interfaces e o funcionamento das aplicações ao que os usuários esperam e também ao que se ajusta melhor ao contexto mobile, para facilitar a precisão da área de toque, o feedback das ações, a visualização de informações, a densidade informacional, entre muitos outros fatores.

Para atender a este novo cenário de tecnologias emergentes, os métodos e técnicas de usabilidade precisam de uma reciclagem e uma reflexão sobre até que ponto eles estão prontos para guiar e avaliar o desenvolvimento de aplicações destinadas a estas tecnologias. Este é o mote da Nova Usabilidade. Aguardem os próximos dois artigos.

Referências

Marcus, A. “Mobile User Interface Design: For Work, Home, and On the Way”. In ACM SIGCHI 2004. ACM, Viena, Austria, 2004.

Apple. iOS Human Interface Guidelines. Disponível em http://bit.ly/rp2HZh.

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

Posts Relacionados

Usabilidade de interfaces para dispositivos móveis – parte I

Talita Pagani — Mon, 21 Nov 2011 11:00:49 +0000

Já escrevemos aqui no Tableless sobre melhores práticas de front-end / usabilidade para dispositivos móveis. Um questionamento comum a estas diretrizes é o quanto elas são específicas ao contexto mobile, pois muitas delas não se distinguem das diretrizes que vêm sendo difundidas há 20 anos.

É fato que grande parte das diretrizes são semelhantes, mas o que muda é a criticidade quando tratamos de mobile. Algumas recomendações tornam-se mais graves e imperdoáveis quando não são seguidas no projeto de interfaces para dispositivos móveis.

Como exemplo, podemos usar a questão da densidade informacional. Em aplicações que serão visualizadas em dispositivos móveis, os textos devem ser concisos, eliminando informações secundárias que podem ser irrelevantes. “Ora, mas isso também vale para aplicações visualizadas em desktop!“, você pensa. Porém, para mobile, a concisão deve ser ainda maior e informações que seriam aceitáveis nas aplicações web/desktop convencionais devem ser removidas de aplicações mobile. A diretriz base é a mesma: reduzir informação secundária. O que diferencia é o grau de severidade que isto representa neste outro cenário.

Recomendações críticas para o projeto de interfaces mobile

Desenvolver sites e aplicações para mobile requer atenção para alguns critérios que tem um grande impacto na forma com que as pessoas interagem com estes dispositivos.

Reduzir clicks

Ok, esta parece ser uma recomendação óbvia para ambiente mobile. Porém, quem já desenvolveu para mobile ou utiliza aplicações nestes dispositivos, pense: você já deve ter visto algum site que apresenta uma informação bem limitada na primeira tela com um link de “leia mais”, onde você tem o esforço de clicar e esperar o carregamento do restante do conteúdo que você necessita, que às vezes poderia ser resumido em apenas uma tela.

Se em um projeto usual de interface as melhores práticas indicam que seria mais adequado disponibilizar toda a informação necessária em uma única tela e poupar cliques do usuário, porque esta diferença em mobile? Por isso, deixar o conteúdo mais conciso é crucial para que a informação possa ser apresentada de modo objetivo e o menos fragmentada possível.

Reduzir funcionalidades

Restringir a quantidade de funcionalidades, mantendo as que são necessárias ao ambiente mobile, diminui a chance dos usuários se confundirem diante de todas as possibilidades e opções oferecidas.

Reduzir conteúdo

Devido ao tamanho das telas, o conteúdo para mobile exige uma carga cognitiva maior e, portanto, pode ser até duas vezes mais difícil de compreender. Como a memória de curto prazo é fraca, quanto mais os usuários tiverem que rolar para se lembrar de um conteúdo, menos eles o farão.

Dar escolhas ao usuário

Textos mais concisos e funcionalidades mais restritas são necessários. Mas é importante manter um link para a versão convencional do site, caso o usuário precise acessar algum recurso que não esteja na versão mobile. O usuário deve ter o direito de escolha sobre como ele deseja visualizar o site.

Outras práticas importantes que herdamos da usabilidade convencional

Integridade estética

O quanto o design da sua aplicação se integra com a função da mesma. É o casamento entre forma e função, interface com boa qualidade estética e funcional.

Consistência

A consistência de interface permite que o usuário transfira seus conhecimentos e habilidades de uso de uma aplicação para outra. É preciso frisar que uma aplicação consistente não é aquela que copia outras aplicações. Pelo contrário, é uma aplicação que tira proveito dos padrões e paradigmas de interface com os quais as pessoas se sentem mais confortáveis durante a interação.

Metáforas

Fácil reconhecimento e memorização de palavras, símbolos e imagens.

Contexto do Usuário

Especificação do ambiente do usuário, incluindo também a modelagem de e análise de tarefa e objetivos de negócio.

Modelo Mental

Organização apropriada de dados, funções, tarefas, papéis e pessoas de acordo com o modo com que o usuário compreende e reconhece estes elementos.

Navegação

Navegação adequada considerando o modelo mental através de janelas, menus, caixas de diálogos e painéis de controle em formato compreensível.

Interação e Feedback

Input efetivo e feedback do output de informações para assegurar ao usuário que uma ação está em processamento.

Aparência e Design

Qualidade visual e atenção ao design com relação à escala, proporção, ritmo, simetria e balanceamento de componentes.

Visualização de Informações

Apresentação de informações por tabelas, gráficos, mapas e diagramas. Uma vez que a tela destes dispositivos ainda é pequena em comparação aos computadores comuns (mesmo se tratando de tablets), é preciso se valer de componentes coringas que são capazes de apresentar uma boa quantidade de informação de modo compacto, conciso, de fácil visualização e acessível.

Além dessas questões relativas à interface, temos fatores externos que têm grande influência na interação dentro destes ambientes. É o que veremos na parte II deste artigo.

Leia a parte 2 deste artigo aqui.

Referências

Marcus, A. “Mobile User Interface Design: For Work, Home, and On the Way”. In ACM SIGCHI 2004. ACM, Viena, Austria, 2004.

Apple. iOS Human Interface Guidelines. Disponível em http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf.

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