Recursos interessantes em webdesign: personas

Personas s√£o ‚Äď de maneira curta e grossa ‚Äď personagens que voc√™ concebe a partir de dados coletados acerca do p√ļblico para o qual voc√™ construir√° o site. Elas servem para que voc√™, literalmente, personifique as necessidades e caracter√≠sticas destes tipos de usu√°rios para que seja mais f√°cil construir as solu√ß√Ķes destinadas a resolver os problemas que eles t√™m.

√Č important√≠ssimo, ent√£o, que se tenha muitos dados sobre os diferentes tipos de usu√°rios que seu site vai atender. Estes dados podem ser coletados a partir de observa√ß√£o, entrevistas ou aplica√ß√£o de question√°rios. Uma boa refer√™ncia para se entender o processo de obten√ß√£o destes dados iniciais √© o v√≠deo the deep dive, oriundo de um programa da tv americana que mostrou o processo de cria√ß√£o da empresa de design Ideo. No come√ßo do processo, as equipes de design buscam dados sobre os usu√°rios e depois organizam estes dados coletados para nortear a produ√ß√£o da solu√ß√£o. Construir uma persona √© um processo que pode seguir este caminho, por exemplo.

As personas v√£o te acompanhar por todo o processo de constru√ß√£o deste site. No momento inicial, elas te ajudam a definir as funcionalidades do site e a linguagem do conte√ļdo, por exemplo. Num momento imedaitamente posterior, elas te ajudar√£o a definir o aspecto visual e orienta√ß√£o criativa do layout das p√°ginas. Na etapa de produ√ß√£o, elas te acompanhar√£o na verifica√ß√£o da adequa√ß√£o das solu√ß√Ķes de tecnologia aplicadas. E, claro, em todos os momentos de testes e consultas a usu√°rios elas v√£o te indicar quem deve ser procurado para colaborar com os procedimentos.

Parece difícil, mas não é. E vá por mim, trabalhar personas traz uma diferença positiva brutal ao resultado final de um projeto web.

Se você se interessou sobre o assunto, consulte a maior referência da web sobre o assunto: Mr Alan Cooper, além de cunhar o termo, escreveu extenso material sobre Personas.

InterAct 2009

Gostaria de ter falado um pouco mais. Gostaria de ter dialogado com a platéia. Gostaria que tivesse dado tempo de finalizar apropriadamente a apresentação. Mas não deu. Então aproveitarei este post para explicar um pouco a minha apresentação no InterAct2009.

A motivação para a apresentação

A minha motiva√ß√£o para esta apresenta√ß√£o era a de deixar claro que fazer design centrado no usu√°rio (DCU) e ter preocupa√ß√£o com usabilidade n√£o s√£o coisas que implicam em fazer sites ‚Äúfeios‚ÄĚ ou ‚Äúquadrados‚ÄĚ.

A apresentação

De in√≠cio, quis mostrar refer√™ncias que apontam a necessidade de se trabalhar de forma equilibrada as duas vertentes que mais conhecemos quando falamos em design: a funcional/racional e a emocional. Normalmente associa-se o trabalho de DCU e o trato com usabilidade com o lado estritamente racional e funcional do design; e isso faria com que esta ‚Äúvertente‚ÄĚ se coloque de maneira diametralmente oposta √† da criatividade e emo√ß√£o. S√≥ que enxergar estas coisas dessa maneira n√£o √© bacana e esta vis√£o de que o emocional se op√Ķe ao racional n√£o √© verdade.

A ‚Äúmoral‚ÄĚ dessa hist√≥ria √© a de que o profissional de design deve equilibrar adequadamente os dois conjuntos de fatores.

Design e emoção

Donald Norman, no excelente trabalho que fez (e vem fazendo) sobre¬†Design Emocional mostra que al√©m de atender quesitos relacionados √† funcionalidade, efici√™ncia, utilidade e uso, os dispositivos devem ser pensados para que despertem rea√ß√Ķes de afetividade, intimidade e afinidade nos usu√°rios.

Em outras palavras, trabalhar usabilidade implica em atender de forma plena quatro conjuntos de quesitos: 1) capacidade de ser usado com sucesso; 2) facilidade de ser usado; 3) capacidade de o usuário aprender a usar o dispositivo de forma simples e rápida; 4) Provocar satisfação ao usuário.

Quem enxerga design como um processo puramente racional ou puramente emocional deixa de lado importantes elementos que não devem ser esquecidos; normalmente falham em função disso.

Os exemplos

Todos os exemplos apresentados referem ao uso racional de tend√™ncias visuais sem que sejam desconsiderados aspectos relacionados √† facilidade de uso e usabilidade. H√° exemplos de sites com anima√ß√Ķes muito bem contextualizadas sem que seja usado o famigerado Flash. H√° exemplos de portais e sites que deixam claro a que vieram e o que pode ali ser feito sem deixar de lado aspectos relacionados √† equilibrio e est√©tica. H√° exemplos de aplicativos usados pelo browser que s√£o bonitos e eficientes com eleg√Ęncia e h√°¬†um mau exemplo¬†de uso de tecnologia Flash para ‚Äúenriquecer‚ÄĚ a experi√™ncia esquecendo-se de uma s√©rie de heur√≠sticas que poderiam ajudar bastante ao verdadeiro enriquecimento da experi√™ncia do usu√°rio.

Balanço final

Eu gostaria de ter tido tempo de falar sobre os exemplos escolhidos na hora da apresentação. O ritmo de pastelaria do ambiente não permitiu isso, e nem o diálogo que gostaria de ter tido com os presentes.

Me pareceu que o conte√ļdo que procurei abordar n√£o era muito bem visto pelos respons√°veis pelo ambiente onde me apresentei. Me senti chateado com brincadeiras jocosas feitas antes de me ser dada a palavra e o jeito que minha apresenta√ß√£o foi finalizada ‚Äď abruptamente ‚Äď n√£o me agradou. Entendo perfeitamente a quest√£o da limita√ß√£o do tempo em um evento como estes. Participo deste tipo de evento como palestrante h√°, pelo menos, dez anos. J√° organizei v√°rios e o que ocorreu comigo me pareceu ser a manifesta√ß√£o de algu√©m que n√£o queria estar al√≠ ou n√£o estava satisfeito com o que estava vendo. Faz parte.

Enfim, de qualquer forma, o balanço do evento foi muito positivo. Não pude estar presente desde o início em função de minhas aulas no doutorado. Cheguei no meio da tarde; mas gostei bastante do que vi. O Tiago e sua equipe do iMasters estão de parabéns. O evento foi muito bacana e iniciativas como esta devem ser sempre valorizadas.

T√ī afinz√£o de ver a apresenta√ß√£o do¬†Hor√°cio¬†sobre acessibilidade. Conversamos no corredor por interm√©dio do¬†Guilherme Marques¬†mas n√£o pude ver ao vivo a fala dele no evento. Quero muito trocar mais figurinhas sobre o assunto.

J√° estou torcendo para a chegada do pr√≥ximo e ansioso para novos eventos ‚Äď tanto nacionais (como o de ontem) quanto regionais (BH e Minas carecem muito disso) ‚Äď onde os profissionais podem trocar id√©ias e mostrar o que tem sido feito (especialmente em BH; gostaria de ver mais eventos onde os profissionais daqui falam mais‚Ķ conversei muito sobre isso com o¬†Alexandre¬†e com o¬†M√°rcio; o povo da¬†Plan B¬†eu n√£o vi l√°, mas eles sabem desta minha vontade h√° tempos e sei que compartilham a coisa).

Mais uma vez, parabéns Tiago e iMasters pelo evento. E obrigado a todos que estavam presentes em minha apresentação.

Agradeço especialmente ao Eduardo Loureiro, ao Herbert Rafael e ao Vorkurs por me apresentarem grande parte dos exemplos (que seriam) comentados.

 

Experience Design Manifesto

Você tem contribuído para a melhoria da vida das pessoas? As coisas que você faz melhoram as vidas das pessoas que as usam?

Experiences that foster happiness should have the following qualities:

  • Make people feel confident of themselves.
  • Make people feel they can do something better. Empowers people to do something in a better way.
  • Improve people‚Äôs lives helping to solve existing pragmatic problems
  • Make people have an enjoyable and fun time during the experience, thus making life worth to be lived.
  • Surprises people in a magic way, bringing delight to the eyes and making the mind wonder.
  • Create an emotional connection between everyone involved, the experience itself and the one supporting the experience (a brand or a person)
  • Make the world a better place to live
  • Strenghten relationships between people that live the same experience

O trecho acima foi extraído do Experience Design Manifesto. Uma dica imprescindível de leitura para todos aqueles que querem saber um pouco mais sobre a relação entre o seu sucesso e a experiência de quem usa aquilo que você faz. (via)

Pense nisso.

Aurora. Algumas anota√ß√Ķes

Aurora é o nome de um experimento conduzido pela Adaptive Path, liderado pelo Jesse James Garrett que versa sobre possíveis novas maneiras de usar sistemas online. O projeto está sendo feito para a Mozilla Labs como parte de uma série de conceitos que exploram como poderemos usar a web e tudo relacionado a ela no futuro.

Ontem o¬†Eduardo Loureiro¬†compartilhou com a lista dos alunos de¬†Design de Intera√ß√£o¬†os¬†v√≠deos¬†que o pessoal do projeto colocou na rede. A seguir, algumas considera√ß√Ķes sobre cada um dos tr√™s v√≠deos disponibilizados.

Em primeiro lugar é de se notar o importante trabalho de tentar algo novo baseando-se em pesquisa e propondo o rompimento de barreiras. O trabalho é muito interessante e bastante coerente. Entretanto, algumas pulgas (como era de se esperar) estão atrás da orelha.

Antes de ler, assista os vídeos (1, 2 e 3).

Agora sim‚Ķ Vamos l√°. Sobre o primeiro v√≠deo, penso que a quantidade de elementos que o usu√°rio tem no reposit√≥rio e como ele (o usu√°rio) os manipula parece ser um pouco distante da realidade da persona indicada no v√≠deo e o jeito que as coisas acontecem (na localiza√ß√£o dos dados, por exemplo) parece um pouco confuso; principalmente a respeito do processo de busca e tamb√©m da disposi√ß√£o dos elementos em tr√™s dimens√Ķes simuladas.

Vale aqui um destaque acerca da influ√™ncia do design e do ‚Äújeito de ser‚ÄĚ da¬†Apple¬†sobre o projeto.

√Č de se considerar tamb√©m que cada uma das quatro √°reas de elementos que o usu√°rio tem a seu dispor est√° repleta de √≠cones e objetos que ‚Äď nem sempre ‚Äď facilitar√£o a vida de quem usa. Por outro lado, a iniciativa de esconder os comandos do browser e deixar a cargo do usu√°rio que os re-acione √© bem interessante. Entretanto, isso demandaria grande esfor√ßo para que o usu√°rio deixe de usar elementos da interface do browser (como a barra de favoritos ou acesso a diferentes abas ou ao campo de endere√ßos) e passe a usar elementos dos pr√≥prios sistemas interativos para se orientar. Ademais, a proposta de ‚Äúesconder‚ÄĚ os elementos atr√°s de um clique do mouse n√£o me pareceu uma a√ß√£o muito bacana para deixar que o usu√°rio use os recursos. Por estarem escondidos, muitos usu√°rios podem passar batido por estes recursos. Mas √© algo que vale tentar, embora eu s√≥ imaginaria este tipo de solu√ß√£o quando houvesse problemas de disposi√ß√£o de elementos por falta de espa√ßo √ļtil. Mas entendo a proposta de deixar o conte√ļdo prevalecer o centro do sistema.

Além disso, o jeito que os usuários interagem entre si através das ferramentas propostas para colaboração parece ser um pouco improvável. Pelo jeito que a coisa acontece, parece que os dois estão lado a lado, e não usando uma rede de computadores.

Ainda sobre isso, a quest√£o do transporte (arrasto) e encaixe de dados para a intera√ß√£o colaborativa √© bem interessante, mas tudo teria que vir da mesma origem ou os fornecedores de conte√ļdo teriam que adotar padr√Ķes bem planejados para que a coisa procedesse daquela maneira.

Muito legal o esquema da navegação espacial. Fiquei bastante curioso para saber mais do tal mouse (ou algo que o valha) que está suspenso em uma espécie de braço retrátil com o qual o usuário acessa o sistema espacialmente no esquema 3D proposto.

Ainda sobre o primeiro v√≠deo, achei que o jeito que a colabora√ß√£o entre os dois usu√°rios acontece ‚Äď sem confirma√ß√£o de altera√ß√Ķes na interface solicitadas por um interagente remoto ‚Äď tamb√©m um pouco improv√°vel. Muito no que diz respeito a como as coisas acontece mas sem deixar de considerar que na possibilidade de ter mais gente mexendo, corre-se o risco de cair na situa√ß√£o do¬†‚Äúsomeone keeps stealing my letters‚ÄĚ.

Sobre o segundo v√≠deo, me pareceu um pouco dif√≠cil que um dispositivo com aquelas dimens√Ķes e com aquelas caracter√≠sticas ofere√ßa precis√£o e funcione daquele jeito ‚Äď ou seja: com os elementos com aquelas dimens√Ķes ‚Äď com as personas exemplificadas. Mesmo usando e testando a interface do¬†iPhone, que parece ser a clara inspira√ß√£o para o dispositivo, n√£o d√° para dizer que aquela movimenta√ß√£o de elementos na diagonal e os cliques em elementos carreg√°veis se dariam da maneira mostrada. Mas como dito anteriormente, √© muito bacana que se tenha proposto a coisa. Como conceito √© bastante interessante, mas esta √© ainda a fase da pesquisa e idea√ß√£o. √Č preciso ver como estes sistemas e dispositivos se comportam em seus prot√≥tipos e avali√°-los.

Ainda sobre o segundo v√≠deo, outras coisas interessantes. Embora num dispositivo com dimens√Ķes bastante reduzidas se comparado ao original, percebe-se que a interface permanece a mesma, mas com menos itens nas linhas laterais. Seria legal uma explica√ß√£o de quais seriam os itens que permaneceriam al√≠ ap√≥s a redu√ß√£o. Ou ser√° que isso seria configurado pelos usu√°rios? Outra coisa √© o tamanho dos elementos clic√°veis. Parece que √© improv√°vel ter precis√£o no clique quando num dispositivo t√£o pequeno, com elementos t√£o pr√≥ximos e reduzidos.

Al√©m disso, como a interface √© naveg√°vel em tr√™s dimens√Ķes simuladas, quando saber para onde o usu√°rio quer ir quando as maneiras de interagir s√£o em 2D? Lembremos que agora estamos num dispositivo m√≥vel sem a traquitana de intera√ß√£o espacial anteriormente mostrada.

Na hora de ver se há pessoas próximas que pertencem ao mesmo grupo de turistas, percebi que o usuário toca na interface no ponto em que um dos elementos destacados do trajeto está. Como o sistema distinguiria um clique para saber mais sobre o elemento daquilo que foi feito no vídeo?

A ‚Äúintelig√™ncia‚ÄĚ do browser √© algo a questionar. Como ele sabe que s√£o f√©rias e n√£o uma viagem a trabalho? Apenas pela localiza√ß√£o? Al√©m disso, a lista de eventos √© montada baseada na localiza√ß√£o. O usu√°rio n√£o precisar√° fazer nenhum tipo de planejamento? Nenhuma prele√ß√£o?

Muito bacana o sistema de filtragem pela localiza√ß√£o atual, h√° de se destacar. O esquema de mostrar as possibilidades de destino para os elementos em arrasto √© muito legal, embora n√£o seja novidade aqui. A aplica√ß√£o √© bastante eficiente. Para finalizar as impress√Ķes sobre o segundo v√≠deo, o elemento arrastado √© visualizado em arrasto e solto fora da √°rea de contato; uma esp√©cie de paralaxe proposital. No m√≠nimo, desafiador.

No terceiro v√≠deo, algo me incomodou: o √≠tem ‚Äúsatisfaction‚ÄĚ na barra de elementos superior. O usu√°rio arrasta o elemento para uma √°rea espec√≠fica da interface e tem acesso √†s opini√Ķes dos usu√°rios. Al√©m da associa√ß√£o de id√©ias ser um pouco for√ßada, a quest√£o √©: como se chegou a esta situa√ß√£o? Simplesmente tirando uma foto como o v√≠deo sugere me soa um pouco conceitual demais.

O narrador menciona o ‚Äúworkspace‚ÄĚ, mas gostaria de ver os passos. √Č que me parece que seriam muitos, e a√≠, fiquei curioso. Embora este seja o prop√≥sito do v√≠deo, seria legal pensar tamb√©m como o usu√°rio chega ao cen√°rio ilustrado. Obviamente eles est√£o pensando nisso, mas eu fiquei c√° com meus bot√Ķes pensando: de quanto tempo de intera√ß√£o o usu√°rio precisou para chegar √†quele estado?

Sobre a interface onde acontece a intera√ß√£o, novamente, para que ocorra o ‚Äúencaixe m√°gico‚ÄĚ proposto, muita padroniza√ß√£o dos dados fornecidos se faz necess√°ria. Dessa forma, num primeiro momento, fico a pensar como os fornecedores de informa√ß√£o e de servi√ßos como os utilizados para montar aquela situa√ß√£o se sobressairiam uns comparados aos outros, uma vez que eles precisam ser muitos e precisam, antagonicamente, fornecer dados padronizados para que sejam utilizados no sistema da forma que foi ilustrado.

Por √ļltimo, novamente acerca das linhas laterais de objetos, h√° um filtro que isola pessoas no ambiente da rede acessado pelo dispositivo no final do terceiro v√≠deo. Nos tr√™s v√≠deos, uma s√©rie de atalhos s√£o usados e todos eles est√£o dispostos nestas linhas. Me pareceu que ser√° necess√°rio que o usu√°rio passe grande parte do tempo configurando estas listagens, pois todas potencialmente mudam de acordo com a situa√ß√£o ilustrada. Veja o que eu estou querendo dizer nestas imagens retiradas dos dois √ļltimos v√≠deos, abaixo.

Uau, muitas perguntas, n√©? Mas acho que √© o esperado quando se prop√Ķe algo t√£o novo. Acredito que o pessoal respons√°vel esteja recebendo muitas mensagens com perguntas semelhantes √†s minhas e ‚Äď certamente ‚Äď este tipo de colabora√ß√£o influenciar√° bastante o desenvolvimento; espero que positivamente, embora lidar com todos os inputs seja um desafio enorme para a equipe.

Design, segurança e mercado

Oito donos do carro da Volkswagen perderam parte do dedo ao rebater o banco traseiro. A empresa descarta fazer recall

E aí, qual é a sua opinião sobre o assunto? Para apimentar, mais um trecho:

De acordo com M√°rcio Montesani, diretor do N√ļcleo de Per√≠cias T√©cnicas de S√£o Paulo, o Fox exportado para a Europa tem um sistema mais seguro. No lugar da al√ßa e da argola, h√° uma alavanca de metal paralela √† base. ‚ÄúN√£o √© poss√≠vel sofrer esse tipo de ferimento no Fox europeu‚ÄĚ, diz.

 

Boas maneiras móveis

Direto do Usability News:

TEN TIPS FOR MOBILE MANNERS
1. Use text messaging to reduce the social intrusion of a call.

2. Enable the ‚ÄúSilent‚ÄĚ setting on your mobile phone in public places or open offices spaces.

3. Use text messaging like a pager.

4. Use text messaging as a notepad.

5. Change your voicemail greetings to include: ‚ÄúDon‚Äôt leave a message, rather text me‚ÄĚ.

6. Instead of leaving a voicemail message send a text.

7. Use text messages to send regular updates on a business process directly to a customer’s mobile phone.

8. Avoid the inappropriate use of text messaging.

9. Ensure that there is an opt-out mechanism for consumers when sending out marketing messages via text.

10. Use a desktop messaging solution.

Acho que fica bem clara a import√Ęncia das mensagens de texto, n√©? √Č interessante saber usar este recurso para nos relacionarmos com nossos contatos pessoais, profissionais e – obviamente – com nossos clientes. Nos primeiros casos, o mote √© priorizar as mensagens de texto; junto aos clientes, al√©m de priorizar, √© importante saber usar, respeitando os limites e as vontades dos clientes.