Android UX: referências de interface para aplicativos Android

Android UX

Post rápido para deixar um link útil para quem está desenhando aplicativos de Android: uma galeria com vários screenshots e referências de interfaces de aplicativos para a plataforma mobile do Google.

Compartilhe aí com o resto do time :)

Link: Android UX >

Controle uma interface que você mesmo desenhou no papel

Sketchsynth

Skecthsynth, criado por Billy Keyes, é um daqueles protótipos que fazem as pessoas pararem e pensarem nas novas possibilidades.

Você desenha alguns controles em um papel, a câmera identifica quais são esses controles e a partir daí você pode usar seu dedo para “interagir” com esses desenhos e controlar a música que está tocando no computador.

Você vira uma espécie de “DJ-de-guardanapo”.

Abaixo um vídeo que mostra como a câmera identifica a interface que foi desenhada no papel:

Pense no momento em que a câmera for capaz de identificar um leque maior de controles. No caso dos Designers de Interacão, imagine quando a câmera for capaz de identificar o seu protótipo de papel :)

Sabe aquele detalhe?

Uma boa interface

Sabe aquele detalhe, quando você está navegando por uma nova interface, que pode ser decisivo para você se encantar pela experiência que está tendo ali – ou que pode ser frustrante e fazer você desistir daquele produto?

É disso que trata a apresentação abaixo, de Johan Ronsse, chamada Designing Better User Interfaces. Nela Johan passa por alguns bons e maus exemplos do que funciona e do que não funciona na hora de desenhar a interação de um usuário com um produto digital.

(Se você estiver lendo este post por RSS e a apresentação acima não abrir, veja-a no blog)

Como tratei recentemente no World Information Architecture Day, existe todo um trabalho de estratégia e entendimento do contexto que pode (e deve) ser feito antes da etapa de wireframes.

Mas quando chega a hora dos wireframes – seja arrastando as caixinhas cinzas na tela do Axure, seja rabiscando interfaces em um pedaço de papel – todo cuidado é pouco. Muitas vezes são esses pequenos cuidados com a interface que, de fato, fazem um potencial usuário se apaixonar pelo seu produto ou abandonar o seu site em uma fração de segundos. Ainda mais em uma época onde o seu produto pode ser usado em tantos contextos diferentes, em tantos e tantos tipos de device.

Você é a própria interface

OmniTouch

Pesquisadores do Human Computer Interaction Institute, da universidade Carnegie Mellon, desenvolveram um dispositivo capaz de projetar uma interface em qualquer superfície que esteja à frente do usuário – inclusive o próprio usuário.

O sistema, chamado OmniTouch, é acoplado ao ombro da pessoa (um tanto desconfortável, convenhamos) e projeta uma interface multitouch na pele, no papel, na parede ou em qualquer outra superfície que esteja a uma determinada distância do projetor.

O mesmo aparelho que projeta também é capaz de reconhecer os movimentos do usuário e entender como ele está interagindo com a projeção – com um nível de precisão quase igual aos dispositivos touchscreen. Segundo os criadores do dispositivo, o tamanho dele será reduzido nas próximas versões.

Assista ao vídeo de apresentação do OmniTouch:

(Se você estiver lendo este post por RSS e o vídeo acima não abrir, assista-o no blog)

As possibilidades são imensas e animadoras :)

Redesenhando a interface do elevador

Quem acompanha o @blogdeai sabe que sou fã dos exercícios de redesign de objetos do mundo não-digital. É muito bacana observar como os problemas de design de objetos físicos são solucionados e depois transportar essas mesmas soluções para a nossa realidade quase-sempre-digital.

Dessa vez o designer foi Brian Scates, que estava cansado de utilizar a interface confusa do elevador do prédio em que mora – algo que ele faz de 5 a 6 vezes por dia.

A interface atual do elevador.

Alguns dos problemas do design atual do elevador:

  • A numeração é inconsistente, pois não existe um botão para cada andar. O painel pula os números 2, 3 e 8.
  • Dos quatro elevadores do prédio, somente dois vão para o subsolo e para o último andar.
  • Por ter muitos andares, os visitantes demoram muito tempo até encontrarem o andar desejado e até entenderem onde estão os andares especiais (subsolo, cobertura, andares de serviço etc.).

É assim que estão divididos os andares do prédio:

Como estão divididos os andares do prédio.

A maioria dos usuários vai até os andares residenciais (do 10º ao 35º), outros vão ao estacionamento (do 4º ao 6º) e alguns para os ambientes públicos como a academia do 9º andar ou a piscina do 35º.

Além dos problemas citados acima, Brian observou um problema recorrente dos elevadores de seu prédio (e de muitos outros). Muitas vezes as pessoas perdiam o elevador por não conseguirem chegar até ele antes das portas fecharem. E as pessoas que estavam dentro do elevador não conseguiam achar o botão “abrir portas” a tempo de segurar a porta para quem estava chegando – já que esse botão se misturava com tantos outros disponíveis no mesmo painel.

Veja abaixo a sugestão de Brian para o painel ideal do elevador:

A proposta de redesign do painel do elevador

É claro que Brian sabe que os painéis de elevadores são fabricados em escala, e que customizá-los para cada prédio custaria uma fortuna.

“No entanto”, argumenta ele, “o tempo economizado ao tentar encontrar um botão, multiplicado pelas centenas de milhares de trajetos de elevador que as pessoas realizam por ano, acaba salvando um tempo precioso para os moradores e visitantes do prédio. Sem mencionar a energia e tempo perdidos quando alguém aperta um botão por engano.”

E você, concorda com o redesign proposto por Brian?

Leia também:

A evolução do design do Foursquare

Este post é para quem, assim como eu, gosta de acompanhar a evolução do design de interfaces com o passar do tempo. Veja abaixo a evolução da interface do Foursquare de janeiro 2009 até a atualização da última semana. Legal reparar nos detalhes de cores, branding e navegação.

Interface do Foursquare

Via

Breve história dos botões

Veja abaixo a apresentação de Billy DeRouchey sobre a história dos botões: de onde surgiram, a transição para a era dos botões virtuais e interfaces touch, e o que o futuro reserva para a metáfora que mudou a forma como vemos o mundo.

(Se você estiver lendo este post por RSS e a apresentação não abrir, veja-a no blog)