Busca com linguagem natural

Já pensou se pudéssemos buscar informações de restaurantes, cinema, viagens (ou seja o que for em matéria de produtos e serviços), através de uma busca que imita nossa intenção?

Será que daria certo?

HTMLmente falando já tem até tutorial para este tipo de formulário lindão. O site de turismo EscapeFlight colocou esse tipo de busca em sua home. Ela acontece apenas na primeira vez que você entrar. Com o contexto certo (no caso do EscapeFlight ficou muito bacana), este tipo de busca pode trazer uma experiência bem interessante para quem estiver navegando!

via

Uma UI que muda de forma

Obake

Obake, criada no MIT Media Lab e carinhosamente chamada de “uma interface de duas dimensões e meia”.

Essencialmente: um touchpad elástico com um display projetado em sua superfície. À medida em que você aperta ou puxa a interface, uma câmera captura o movimento e responde apropriadamente, modificando o conteúdo exibido.

 

Redsgned: projetos de redesign de sites e apps famosos

Post rápido para compartilhar um link: Redsgned é um repositório de projetos espontâneos e não-solicitados de redesign de interfaces (e marcas) famosas do nosso dia-a-dia.

Abaixo um exemplo do famoso Whatsapp (aplicativo de troca de mensagens de texto para Android e iOS), redesenhado pela designer Dora Szabo:

Whatsapp_redesigned

A lista conta com apps de celular, websites, logotipos, softwares e outros produtos com os quais frequentemente estamos em contato.

Leia também: Dustin Curtis X American Airlines

E se a gente repensasse a rolagem de textos na web?

I want the world to scroll this way

Quando você está lendo uma página na web que contém texto (como este post aqui) e você precisa descer a rolagem, repare em uma coisa: no exato momento em que você está movimentando a rolagem – seja pela barra de rolagens da direita, seja com seu mousewheel, com seu trackpad ou com seu dedo na tela – você não consegue ler o texto.

O motivo é simples: é mais difícil ler um texto em movimento.

The problem is scrolling. Scrolling is a brilliant way to display a map or an Excel spreadsheet on a computer. But it’s a terrible way to display text.

Daí que o programador Richard Wallis resolveu propor um novo jeito de navegar entre blocos de texto. Ao invés do texto subir e descer na tela, ele permanece no mesmo lugar enquanto você controla a rolagem. Isso permite que você continue lendo no mesmo ritmo enquanto desce o scroll.

Aqui você encontra um exemplo de como isso funciona. Vai lá ver.

Gostou?

Como ele sabe que pedir para que todos os sites do mundo mudem para esse tipo de rolagem é uma missão um tanto quanto impossível, ele criou uma extensão para Chrome que altera o layout da página para essa nova proposta criada por ele.

E aí? Você acha que funciona melhor para você?

Lições que os designers podem aprender com os criadores do Lego

Lego design rules

Lista bem bacana postada no lunatractor, baseada em uma conversa com um Designer de Produto da Lego na Dinamarca.

  • Desenhe apenas com bloquinhos brancos. Fazer algo legal usando apenas blocos brancos é bem difícil. O modelo fica uniforme, sem graça e não existem cores para dar destaque a uma coisa ou outra – a forma essencial precisa se sustentar sozinha. Depois que o design estiver funcionando, adicione cor para agregar valor ao que está sendo criado. Alguma semelhança com nosso bom e velho wireframe?
  • Sem blocos novos. É claro que todo designer quer poder contar com a possibilidade de criar novos formatos de blocos quando necessário. Mas o custo de criar esses novos blocos é muito alto. Cada novo bloco precisa ter seu investimento devidamente justificado, além, é claro, do usuário – que precisa aprender a utilizar a nova peça. Bem semelhante às nossas bibliotecas de padrões de interação.
  • Sempre crie opções diferentes para testar. Em um dos modelos criados pela empresa, o time resolveu testar duas opções diferentes: uma altamente caracterizada e levemente maior; e um menor, que usou parte do budget do projeto para adicionar um motor e algumas peças móveis a ele. Foi o público que escolheu a que funcionava melhor (e acabou optando pela segunda). Ao contrário do que os designers pensavam, o modelo de maior tamanho não ganhou.
  • Trabalhe em times. Aqui há uma grande semelhança entre a metodologia de design da Lego e os processos de desenvolvimento ágeis de software. Times multidisciplinares são essenciais para inovação, nos dois casos. Existe um espaço de trabalho público, compartilhado com todo o time, e estações de trabalho individuais. As tais bases de trabalho móveis e coletivas, baseadas nas atividades que precisam ser feitas e não na hierarquia, estão ganhando espaço na arquitetura dos ambientes de trabalho.
  • Marketing e Design sentam juntos, desde o início. A diversidade de perfis acrescenta bastante ao ambiente criativo, e muito tempo é economizado tendo as pessoas do Marketing dentro do time. Ainda existem muitas empresas onde os dois times sentam em andares ou prédios separados.
  • Teste com consumidores reais – as crianças. Existe uma diferença muito grande entre desenhar o que as pessoas gostam e desenhar o que você acha que as pessoas gostam. Em um teste dentro da empresa, os designers acharam que as crianças ficariam fascinadas pelo dragão que era capaz de mover as pernas para andar. “Por que eu vou querer um dragão que anda se esse outro aqui pode voaaaar”, disseram as crianças enquanto moviam o dragão pelo ar para lá e para cá.
  • Tenha orgulho de trabalhar com um budget limitado. Ter esse saldo para ser usado faz com que as pessoas sejam mais conscientes quanto à adição ou subtração de peças em um modelo, pensando duas vezes antes de aumentar o custo do projeto e o preço final para o consumidor. Desenhar modelos com limitação de custo é primordial dentro da Lego, e as pessoas investem bastante energia em criar soluções inovadoras que as crianças vão gostar, sem aumentar os custos.
  • Regras de design são criadas a partir de uma visão aprofundada do comportamento das crianças. Por exemplo, eles não adicionam em um mesmo modelo uma peça vermelha de 1×8 e uma peça vermelha de 1×6. Eles sabem que na hora da criança procurar a peça certa, dentre as duzentas peças que vêm na caixa, é muito provável que elas confundam uma com a outra e acabem errando a construção do modelo.
  • Desenhe com a mão esquerda, ou então vestindo uma luva de jardinagem. É assim que os designers da Lego emulam a habilidade motora de uma criança de 4 anos de idade na hora de manipular as pequenas peças. Nós UX Designers somos todos conectados e entendemos tudo de tecnologia e interfaces, mas será que nós sabemos o que é ser uma pessoa “normal”?
  • Divirta-se. Brincar é um papel fundamental dentro do processo de trabalho dos designers da empresa. “Nós não paramos de brincar porque nos tornamos velhos, nós nos tornamos velhos porque paramos de brincar.”

Curti. Curtiu?

Texto responsivo no site da 37signals

Para quem está chegando agora, Design Responsivo é a capacidade de um determinado website de se adaptar automaticamente a diferentes resoluções de tela, permitindo que o usuário tenha uma experiência relevante em qualquer tipo de dispositivo (desktop, tablets, smartphones, TVs) e em dispositivos de tamanhos diferentes.

Já falamos bastante por aqui sobre o assunto. Quer ver?

No entanto, é comum que pensemos apenas em elementos visuais que se transformam e se adaptam dependendo do dispositivo onde a interface está sendo visualizada.

Mas a mesma coisa pode (e muitas vezes deve) acontecer com o texto que está sendo exibido. Vejo dois principais motivos para nos preocuparmos com isso:

  1. As pessoas lêem menos em dispositivos menores.
  2. Telas menores permitem que menos texto seja exibido por vez.

Daí que os caras da 37signals tiveram uma ótima sacada em uma das frases que aparece no blog deles: o tamanho da frase se adapta à medida em que você diminui a resolução de tela.

Responsive Text

Para quem se interessar em como isso é feito, tecnicamente, existe uma explicação mais detalhada aqui.

Mas para nós, UX Designers, fica o lembrete de que é possível pensar na relevância do conteúdo em cada um dos detalhes que compõem a experiência.

Seus usuários agradecem.

Inspiração: como seria um relógio criado pelo Google?

O artista gráfico Adrian Maciburko resolveu bolar um estudo de como seria a interface de um relógio criado pelo Google, caso a empresa resolvesse entrar na disputa por esse segmento. A interface seria touchscreen e o nome criado por ele para o projeto foi Google Time.

Abaixo algumas imagens desse estudo:

Google Time 1

Google Time 2

Google Time 3

via

The Art of Creative Coding

The Art of Creative Coding

Você pode dançar, você pode cantar, você pode ler livros e fazer mais uma porção de atividades que estão ali, no meio do caminho entre um hobby e uma atividade artística ou criativa.

Por que “programar” normalmente não se encaixa nessa lista?

Eu tenho alguns amigos para os quais esse conceito é perfeitamente normal. E o vídeo abaixo traz depoimentos de pessoas que fazem o mesmo: para eles, escrever código não é apenas uma profissão, mas uma atividade feita também nas horas vagas.

“Programming plays a huge role in the world that surrounds us, and though its uses are often purely functional, there is a growing community of artists who use the language of code as their medium. Their work includes everything from computer generated art to elaborate interactive installations, all with the goal of expanding our sense of what is possible with digital tools.”

No player do YouTube dá para ativar legendas em inglês :)