Teoria

Compartilhando nas redes sociais: com atrito ou sem atrito?

As mudanças recentes no Open Graph do Facebook, junto com a introdução anterior do ticker, trouxeram uma discussão bem interessante sobre o compartilhamento de atividades na rede social. Agora, a permissão dada a alguns aplicativos significa que tudo que lermos, ouvirmos ou assistirmos através dele será publicado. Essa facilidade seria uma benção ou uma maldição?

Exemplo do Spotify no ticker

 

Na física, atrito é o que acontece na interação de um corpo com outro em presença da gravidade. Como dizia um professor meu, nós só estamos aqui por causa do atrito, que permite a existência de carros, mas também provoca aquele barulho irritante de unha no quadro negro.

 Mas o que seria “atrito” em uma interação na web?

Para mim, tem a ver com a dificuldade de realizar uma ação em um site. Essa dificuldade pode existir intencionalmente, por segurança ou limitações técnicas, ou por acidente, como em projetos mal planejados e não testados.

Em alguns casos, o atrito trabalha a favor do usuário. É um passo de segurança importante confirmar sua identidade no Internet Banking, através de uma senha, por exemplo. Em outros, pode ser tão irritante que faz com que ele desista de realizar a tarefa.

Compartilhando sem atrito: curtir ou não curtir?

Para alguns, a diminuição do atrito foi positiva: o Spotify, um dos beta testers do novo Open Graph, ganhou mais um milhão de usuários após o anúncio da integração na f8, a conferência de desenvolvimento do Facebook, mesmo com as críticas à necessidade de ter uma conta na rede social para usar o serviço.

Já pesquisadores do Microsoft Research acreditam que a remoção do atrito pode banalizar o ato do compartilhamento, afinal, o usuário não escolhe mais intencionalmente o que compartilha. Isso traz também conseqüências importantes para a privacidade: sem a ação de compartilhar, podemos esquecer que tudo está sendo enviado para o stream e correr o risco de mostrar para o mundo que curtimos um tecnobrega no meio da tarde.

Em tempos de dieta de informação, “abrir a porteira”  das nossas atividades seria o equivalente a ir num rodízio de pizzas todos os dias? Ou mais oportunidades de criarmos conexões e encontrarmos semelhanças e diferenças entre os nossos contatos?

 

Nota: tive que procurar uma imagem do ticker porque o Facebook simplesmente não liberou pra mim. Fonte: Socialsafe.net

 

Link

Como documentar interações de toque?

Se você já participou de algum projeto para mobile , já deve ter encontrado essa dúvida na hora da documentação: como indicar quando e como as interações de toque serão usadas? Como nem sempre é possível construir um protótipo para mostrar, e escrever fica meio…estranho (“quando o usuário tocar, segurar e fizer um movimento de pulso com três dedos…”), é necessário encontrar uma maneira de deixar claro como o seu produto deve se comportar nas interações do usuário.

Preview de Stencil para Omnigraffle

Uma forma de fazer isso é utilizando uma sinalização dos tipos de toques possíveis. A vantagem é que fica bem fácil especificar quais interações funcionarão nas regiões do app. A desvantagem é que a equipe inteira deve conhecer os sinais, o que pode ser resolvido com uma “legenda” em algum lugar da documentação.

No Omnigraffle, eu tenho usado bastante esse stencil com os gestos que encontrei no Graffletopia. Uma coisa legal dele é que a referência já vem pronta, e ele ainda fica organizadinho na paleta (uma das coisas mais legais do Omni, aliás). Se você prefere algo mais low-profile, há essa opção com as direções dos movimentos, mais minimalista.

Os usuários de Axure não precisam ficar chupando o dedo (#infame)! Essa library com gestos baseados no trabalho do Dan Saffer está disponível para o programa.

E as animações?

Um outro aspecto da documentação que é bem difícil de comunicar e padronizar são as animações de conteúdo. Será que aquele painel desliza ou é um pop-over? O que acontece quando você expande um stack de fotos? Muitas vezes, essas animações fazem a diferença entre uma interface boa e uma interface encantadora, não é?

Pensando nisso, Johannes Tonollo, um estudante da Universidade de Potsdam, na Alemanha, criou um site para acompanhar sua monografia que faz exatamente isso.

Meaningful Transitions categoriza e exemplifica vários tipos de animação que podem aparecer nos sites e apps, e ainda indica os melhores usos para elas. Referência certa para a equipe!

 

Link

Aprenda a ser um mestre do Axure com os vídeos da AxureWorld

Apesar de ultimamente estar flertando com o Omnigraffle, sou uma “garota Axure” de coração. E pra quem também gosta do programa, vai uma dica ótima para fazer ainda mais com ele.

Logo do evento online AxureWorld

 

A AxureWorld é uma conferência online que acontece desde 2009 e, como o próprio nome já diz, é focada no editor de wireframes e protótipos navegáveis mais usado pelos UXers brasileiros. Seus palestrantes são escolhidos pela própria comunidade de acordo com os tópicos em demanda.

Os vídeos do ano passado foram divulgados e trazem muita coisa boa pra quem quer usar o Axure para projetar aplicações mobile ou fazer interações avançadas (que são, na minha opinião, o ponto forte do programa), entre outros truques. Vale a “olhada”.

Em tempo: ainda no ano passado, o site oficial divulgou alguns protótipos super detalhados com as principais features do programa em uso. Ok, são protótipos especiais preparados pela própria equipe – mas mesmo assim, impressionam.

 

Btw, o blog saiu do hiato “auto imposto” pra voltar com tudo esse ano. Feliz 2012! \o/

 

Teoria

O que um restaurante de vanguarda me ensinou sobre projetos de UX

Durante o Festival do Rio 2011, tive a oportunidade de assistir ao documentário “El Bulli – Cooking in Progress“, de Gereon Wetzel. O filme acompanha uma temporada do restaurante El Bulli, o templo da gastronomia molecular, e casa de um dos chefs mais criativos do mundo: Ferran Adrià. A gastronomia molecular envolve o entendimento dos processos físicos e químicos que ocorrem nos alimentos e a manipulação desses processos para criar pratos “mágicos”, que combinam ingredientes, sabores e texturas de maneiras totalmente não-ortodoxas.

Imagem de um dos pratos do famoso restaurante El Bulli

Na cozinha molecular, nada é o que parece

 

O filme dá uma visão completa do processo de criação do restaurante, que passa 6 meses fechado para que a equipe executiva crie o cardápio do ano seguinte. E é fascinante, para quem gosta de cozinha e para quem trabalha com criatividade. Há um método nessa loucura, e lá pelas tantas do filme, eu percebi que é perfeitamente adaptável para projetos web com foco no usuário. Tentei resumir, mas recomendo muito o filme. É fascinante.

Foque: tenha um objetivo

Todos os anos, o cardápio tem um tema. Assim que as portas do restaurante são fechadas, a equipe leva todos os equipamentos para o laboratório de Barcelona e começa a trabalhar no cardápio do ano seguinte. O tema permite a eles definir um escopo de ingredientes e métodos que, se não fosse possível, tornaria o trabalho muito mais demorado e difícil. Então, essa é a primeira parte: foco.

Pesquise: você conhece todos os aspectos do seu trabalho?

Para chefs de cozinha, é muito importante ter um conhecimento dos ingredientes, suas propriedades, combinações e formas de preparo. Para uma equipe de UX, é muito importante ter conhecimento do usuário e das técnicas e métodos que podem ser utilizados para realizar o objetivo do projeto. Então, é fundamental manter-se informado sobre o que está acontecendo na área - trocar informações com outros profissionais são uma forma de fazer isso – e, sempre que possível, fazer pesquisa de usuário. Não precisa ser uma coisa grande e cara, às vezes conversar um pouco e observar o usuário no local de uso já é suficiente pra derrubar alguns pré-conceitos.

Rascunhe: esgote todas as possibilidades

Os “personagens principais” do filme são os 4 chefs da equipe executiva do El Bulli, os “gerentes” do Adrià, que fazem o trabalho árduo de pegar o todo o conhecimento do conceito e dos ingredientes e testar todas as possibilidades. Qual o sabor da batata doce cozida? frita? assada? no vapor? no vácuo? com azeite? com óleo de gergelim? com água? com sal? e por aí vai.

O processo chega a ser científico, com várias amostras de preparo diferentes catalogadas e experimentadas para chegar àquelas que são perfeitas. E para nós, o que significa? Rascunhos, rascunhos, rascunhos. Nenhuma possibilidade é estranha demais ou tosca demais para ser deixada de lado nessa fase. Colocando todas pra fora, as melhores surgirão.

Ensine: todos na mesma página

Depois de uma ideia de cardápio montada a partir das melhores formas de preparo e combinação dos ingredientes, e de um processo de classificação e ordenação que muitos vão se identificar (pense em milhares de papéis colados na parede), é hora de voltar para o restaurante e se preparar para abrir a casa novamente.

Mas antes disso, é necessário receber a equipe do ano, que pode ou não ter pessoas que já passaram pelo restaurante. O El Bulli era “o” lugar para trabalhar e estagiar para os chefs e aspirantes. Os 4 chefs e Ferran se encarregavam de passar todo o conceito do cardápio e do preparo para que a equipe estivesse afiada na hora de abrir. O que isso quer dizer? Não perca a oportunidade de deixar sua equipe por dentro do que está acontecendo.

Observe: seus clientes serão seus juízes

Uma das cenas mais legais é quando, durante um serviço, a câmera flagra Adrià ao lado da porta do salão, esperando a volta dos garçons para que eles contem a ele as reações dos clientes diante dos pratos. Um bom projeto preocupa-se com a mensuração dos seus resultados (queremos saber se o objetivo foi alcançado, certo?)  e estabelece seus KPIs e as formas de conseguir os dados antes do lançamento. Hoje em dia, é imperdoável não usar nem um Google Analytics (que é gratuito) que seja para realizar essa coleta e processamento de dados de acesso.

Refine: nunca está pronto

Ok, depois desse trabalho todo, é só cozinhar e “partir para o abraço”, certo? Claro que não. Baseado nos feedbacks e no próprio processo de produção “em massa”, é possível identificar falhas e melhorias nas receitas que são servidas. No nosso caso, a observação do analytics e rodadas de testes com usuários depois do lançamento trazem insights importantes para melhorar o que já está pronto e para começar o planejamento das novas fases que com certeza virão.

Mesmo que você não trabalhe com métodos ágeis, hoje em dia é muito raro o lançamento de projetos de um certo porte “completos”. Tudo está em beta e sempre existe algo que pode melhorar , seja na cozinha, num app ou num site.

 

Btw, o Modelo Mental fez um ano de casa própria! Yay! ;)

Teoria

Affordances, os passageiros e o ponto de ônibus: uma história real

Essa coisa de trabalhar com experiência do usuário acaba fazendo você perceber mais o ambiente a sua volta. Da curiosidade de saber o que a pessoa ao lado está vendo no celular até o caminho que as pessoas fazem dentro do shopping, quem se interessa por pessoas nunca fica entediado. Pois bem, o ponto de ônibus que eu uso para voltar pra casa no fim do dia passou por algumas mudanças ultimamente, por causa de um conjunto de prédios de escritório que está sendo construído em frente a ele. Basicamente, ele mudou de lugar três vezes nos últimos dois meses, o que causou um comportamento bem curioso das pessoas que esperam pelos ônibus.

 

Esquema que indica os locais do ponto de ônibus

Informação escrita + desenho = compreensão win! (clique que aumenta)

 

read more »

Teoria

Social Games: entendendo o “jogo” e questionando o “social”

Se você é usuário de Facebook, já deve ter notado há algum tempo a invasão de solicitações do mais novo vício em forma de joguinho, o The Sims Social. A premissa dele é bem simples – clicar em coisas, gastar energia, esperar um tempo (ou gastar dinheiro) para clicar em mais coisas – porém, com o apelo de uma marca muito popular e a possibilidade de interações “pessoais” com avatares de seus amigos, conseguiu uma grande quantidade de jogadores em pouco tempo. Segundo a AppData, uma empresa que monitora o ranking de aplicativos do Facebook, o The Sims Social já conta com mais de 27 milhões de usuários, sendo que 7.5 milhões desses acessam o aplicativo todos os dias (para efeitos de comparação, o Cityville da Zynga conta com 13 milhões de usuários diários). E isso em menos de um mês!

O jogo está longe de ser perfeito: existem vários bugs que atrapalham e muito a jogabilidade. Por exemplo, na hora de enviar uma solicitação para seus amigos (uma das mecânicas mais comuns dos jogos no Facebook), não é possível filtrar por amigos que também jogam ou salvar uma lista dos amigos mais frequentes. Pra mim, que tenho pouco mais de 200 amigos no Facebook  já fica complicado escanear a lista e lembrar de quem joga, imagino pra quem tem 500 ou mais amigos.

Tela de Request do The Sims Social

A navegação da lista de amigos é muito pobre.

 

Existem outros problemas, como a dificuldade de posicionar e visualizar os itens dentro da sua casa (e quantas vezes eu já não perdi horas no The Sims apenas montando as casinhas…) e a demora na resposta dos envios de requests e presentes, mas mesmo assim, eu e outras 7.5 milhões de pessoas continuamos a jogá-lo diariamente. Qual será o segredo desses “jogos sociais”? E será que eles são sociais de verdade?

read more »

Blog

Blog atacado

Pessoal, o blog foi vítima de uma vulnerabilidade no arquivo timthumb.php (usado por alguns plugins e temas pra fazer miniaturas de imagens) e teve seu .htaccess modificado para redirecionar o visitante para domínios russos via busca e alguns outros referrers.

Infelizmente o Bueno estava na lista de temas vulneráveis, e, após algumas tentativas de retirar os redirecionamentos e manter o tema falharam, fui obrigada a mudar, já que a WooThemes ainda não se pronunciou sobre o assunto (bom, é um tema gratuito).

Caso vocês também sejam usuários de WordPress e querem saber mais sobre isso, dêem uma olhada nesse post do blog Sucuri e na página de desenvolvimento do arquivo .php (que já liberou um fix).

Ainda estou em processo de testes pra saber se me livrei mesmo da praga. Enquanto isso, por favor acompanhem o conteúdo diretamente, via http://www.modelomental.com.br ou assinem o RSS Feed.

Ah, e se alguém tiver sugestão de temas, também aceito :)

Obrigada e desculpe pelo incômodo!

 

UPDATE: O problema estava no script incluso junto com o tema. Tentei atualizar pra versão mais nova do Woo Framework, mas ferrou com toda a formatação customizada que eu já tinha feito. Como não quero passar por isso de novo, a procura por um tema continua.

Listas

3 Listas de Discussão sobre Arquitetura de Informação e Design de Interação

Hoje existem vários lugares pra encontrar e discutir com os pares: Fóruns, LinkedIn, Facebook…até o Twitter não deixa de ser uma plataforma de discussão. Mas um dos primeiros meios, muito usado até hoje, são as listas de discussão. Sim, aquelas que você recebe por email, de vez em quando deixa lá sem ler e quando vê já tem 200 mensagens…

Mas por que continuar a usar listas se temos tantas opções hoje? Existem algumas razões: centralização das discussões em um só lugar (sua caixa de entrada), facilidade de resposta, arquivamento. Sem contar que, para muitas pessoas, as redes sociais são bloqueadas no trabalho. As listas acabam sendo um jeito de acompanhar os assuntos durante o dia.

Trouxe aqui 3 listas que participo nas áreas de Arquitetura de Informação, Design de Interação e UX em geral, com algumas observações práticas sobre elas. Mas não confie apenas na minha opinião. Dê uma olhada nos arquivos, nos membros e nas discussões ativas e escolha aquelas que fazem mais o seu perfil!

Um pug em frente a um macbook

Boris gosta de discustir os méritos de apps nativos vs HTML5.

read more »

Teoria

Para entender Modelos Mentais

Com tantos meses de blog, percebi que não abordei o assunto mais óbvio de todos: modelos mentais. Apesar de ser o título desse site, nunca foi alvo de um post. Para tentar me redimir dessa falta imperdoável, apresento não uma, mas duas formas de explicar o que é um modelo mental.

A primeira é a seção com esse mesmo título extraída do meu TCC na UFRJ. E a segunda é uma apresentação fantástica – tanto em forma quanto em conteúdo – que, além de conceituar, também mostra aplicações desse conceito no “mundo real”. Então, por que dois conteúdos diferentes? Bem, o pedaço de TCC está em português e é super conciso; a apresentação está em inglês e precisa de flash. Escolha o tipo de conteúdo que melhor se adequa a sua forma de consumo and be happy!

charge sobre modelos mentais

Modelos Mentais: cada um tem o seu.

read more »

Teoria

O que um jantar em família me ensinou sobre projetos centrados no usuário

Sábado a noite, jantar em família e amigos. Em algum momento, a conversa vai parar em vídeos engraçados que rolam nos emails corporativos da vida. O foco acabou em vídeos com crianças, que agradavam a grande parte da mesa.

imagem de uma família jantando

Família meramente ilustrativa. Nós comemos risotto.

 

Eu e meu irmão decidimos então pegar o iPad e mostrar mais vídeos nessa linha. Passamos vários, e todos agradaram: “infarto do coração“, “que dó, que dó”, “2 bebês conversando” etc. Decidimos então arriscar um pouco: saímos dos vídeos brasileiros e mostramos os famosos “Is this real life?” e “Charlie bit my finger”, clássicos da cinematografia youtubeiana infantil.

Sucesso! Todo mundo, mesmo não entendendo muito bem inglês, curtiu. Afinal, ainda eram crianças fazendo coisas fofas. Mas chegamos num impasse: não conhecíamos mais vídeos infantis. Resolvemos, então, arriscar um pouco mais: como bons usuários da Internet, o meme do “Sou foda” já era passado pra nós, mas com certeza pra grande maioria da mesa (pais, tios e primos mais velhos) ainda seria novidade. E como não apreciar o kitsch pornográfico desse vídeo? A nossa “audiência” já tinha citado o vídeo do Toba de qualquer maneira…

E foi aí que nós erramos e acabamos com a magia da mesa reunida em torno da tela de um iPad. Vitinho foi um desastre. As expressões das pessoas iam de confusão a desinteresse, passando por “wtf?”. Depois desse vídeo, o assunto meio que morreu e saímos da mesa.

Então, o que eu aprendi nesse mega #fail familiar?

1 Entenda sua audiência

Acho que essa é a tecla que mais merece ser batida. Conheça sua audiência, seu usuário, seu cliente, porque é ele que vai dar todas as dicas de como ter sucesso e mantê-lo. Isso não significa dar a eles apenas o que eles acham que precisam – na maioria das vezes eles estão bem equivocados quanto a isso. Essa é a hora de usar todos os recursos a nossa disposição – psicologia, economia comportamental, ciência da conversão, design, sociologia, etnografia, testes com usuários etc – o que couber no seu projeto e no seu bolso. Só não dá pra cair na falácia Louis XVI e declarar: “o usuário sou eu”. Porque não é mesmo.

2 Arrisque…

Quando mostramos os vídeos em inglês, havia a possibilidade de perdermos a nossa audiência, afinal, nem todos iriam entender a língua. Mas como estavámos falando de vídeos com crianças, a aposta não era tão alta assim, e conseguimos manter as pessoas engajadas.
Se você já conhece seus usuários há algum tempo e pôde observar seus hábitos de uso, arriscar e apresentar algo que saia um pouquinho da zona de conforto deles pode ser bom. Dessa forma, você mantém o interesse dos usuários e explora novos caminhos de evolução do seu produto.

3 …mas não arrisque demais.

Nós ficamos arrogantes. O vídeo do “Sou Foda” ia contra tudo que já tinha sido apresentado antes, e nós devíamos ter percebido isso. Mas resolvemos arriscar um pouco mais, muito cedo, e fomos punidos por isso. Não se engane: uma aposta alta e audaciosa geralmente é fruto de observação (no mínimo – identificação de uma necessidade) e pesquisa (no máximo – explorar como resolver essa necessidade) antes de seu lançamento (Google+, anyone?). Isso não é garantia de sucesso, claro, mas também não são tiros no escuro. As melhores histórias apenas parecem golpes de sorte/inspiração. A verdade por trás é muito trabalho duro.

Felizmente, a única coisa perdida nessa história foi o clima da mesa de jantar, mas isso também pode ter sido culpa do  vinho que acabou  ;)

Foto por Jess J via Flickr.