Protótipos para dispositivos móveis

Dispositivos móveis e suas interfaces gráficas estão cada vez mais sofisticados e presentes em nosso dia-a-dia.

Por isso, enquanto designers, ferramentas que nos ajudem a apresentar ideias, fluxos e transições a clientes e equipes são sempre bem-vindas. Mais que isso, essas ferramentas permitem experimentar o aplicativo de fato onde será usado, perceber se textos estão legíveis, se botões têm uma área ideal para o toque e por aí vai. Depois de apresentar seu próximo projeto assim, você vai amaldiçoar JPGs estáticos “zipados” enviados aos seus clientes.

Já falamos aqui no blog sobre o Framer, e vamos explorar algumas novas opções para criar protótipos navegáveis de maneira rápida, indolor e fácil de compartilhar.

Protosketch

proto_sketch

Distribuídos pelos criadores dos UI Stencils, esse iPhone app se baseia em sketches para entregar protótipos. É ideal para quem gosta de rabiscar suas interfaces a mão-livre ou usando os stencils fornecidos pelo fabricante. Você pode usar a câmera do celular para tirar fotos dos sketches e depois criar seu fluxo de navegação. O aplicativo corta e enquadra as imagens para o tamanho do aparelho.

Vantagem
Transformar sketches em mockups navegáveis

Desvantagem
Não permite protótipos de alta fidelidade

Fluidui

fluid ui

O FluidUI é prático de usar por ser web-based, o que o faz ser multi-plataforma. Ele permite a criação de protótipos tanto de baixa quanto de alta fidelidade através de upload da interface desenhada em outro software. Você também pode compor seu mockup usando mais de 1700 elementos de interface dos sistemas mais usados em dispositivos móveis.

Vantagem
Suporte para vários sistemas operacionais mobile

Desvantagem
Colaboração entre equipes é limitada

Continuar lendo

Anúncios

Pequenas e corajosas decisões de design

Snapchat

O Snapchat (aquele aplicativo que envia mensagens com fotos e vídeos que se auto-destróem depois de alguns segundos e que já é sensação entre os usuários mais jovens) resolveu acabar com aquela história de ter um “modo fotografia” e um “modo vídeo” na hora de capturar algo com a câmera do smartphone.

O botão para capturar é um só: esse grande círculo transparente na parte inferior da tela.

Você toca uma vez para tirar uma foto.

Você toca e segura para capturar um vídeo.

Continuar lendo

User Experience no ponto-de-venda

Ainda tem muito pouca gente olhando para isso, apesar de todos os relatórios de tendências apontarem para a crescente e profunda integração dos pontos-de-venda tradicionais (lojas físicas) com os pontos-de-venda digitais (website, aplicativo, website mobile). Ainda mais quando você cruza essa tendência com o fato das pessoas estarem fazendo buscas e comparando preços no smartphone dentro das lojas físicas antes de tomar a decisão de compra.

As possibilidades são enormes. E as pessoas vivem grudadas no smartphone não somente quando estão na mesa do bar (para irritação de quem está junto delas), mas também quando estão dentro de uma loja fazendo compras.

O fato é que em terras norte-americanas essa corrida já começou.

Dentro-da-loja_mobile

O que sua rede de varejo oferece em termos de conectividade com o smartphone do comprador?

Por que não permitir que a pessoa faça uma compra online imediatamente, caso o produto que ela está procurando não esteja disponível naquela unidade?

Em lojas de marcas famosas de tênis, por exemplo, esse sistema já está completamente integrado no próprio dispositivo do vendedor. Não temos o tênis na cor azul, ou no tamanho 43? Ele chega na sua casa em 2 dias úteis, querido consumidor. Sem frete, claro, porque você já se deu ao trabalho de vir até a loja e nós não conseguimos atendê-lo bem.

E esse tipo de ideia do parágrafo acima nada mais é do que uma marca tentando prover uma boa experiência (UX) para o consumidor. Continuar lendo

Resoluções de tela mais comuns, infográficos e cachorros

Imagine o iPhone como sendo um Chihuahua. O iPad como sendo um Beagle.

Apesar da (um tanto bizarra) metáfora entre cachorros e resoluções de tela usada no infográfico abaixo, alguns dados interessantes e atualizados:

Resolução de tela - estatísticas

Google e a granularidade do design

Já faz um tempo que o Google começou internamente o tal do Projeto Kennedy. Na prática, o projeto consistia em redesenhar e unificar a linguagem visual de todos os produtos da empresa, para que a experiência do usuário fosse mais uniforme em todos os lugares/contextos/devices/interfaces em que ela acontecia.

Começou com o redesenho do Gmail e do Google Reader (saudade), que deixaram de ter aquele azul todo e passaram a valorizar mais os espaços em branco e os tons de cinza. O vermelho também apareceu com mais força, em vários “calls-to-action” distribuídos pela interface. Depois de uma pequena pausa e de movimentações na liderança da empresa, o projeto voltou e amadureceu bastante. Em junho de 2012, quando o Google Now foi anunciado, as pessoas começaram a reparar em uma novidade nessa nova linha visual que o Google passava a adotar: os cards.

Google Now Card

Google Now Card - Birthday

Os cards são simplesmente cartões, brancos, digitais, que replicam a aparência de cartões físicos reais. São extremamente clean, usam o espaço em branco com bastante inteligência, possuem uma tipografia marcante e imagens sem bordas, estouradas na altura ou largura do card. Eles contêm informações variadas: de previsão do tempo a condições de trânsito, de lembretes de aniversários dos amigos a informações sobre sua caixa de entrada de emails – e por aí vai.

Há alguns meses o Google começou a mostrar mais detalhes sobre a interface do Google Glass.

No Google I/O, semana passada, o Google anunciou o redesign do Google Plus.

O que todos esses produtos têm em comum?

Continuar lendo

Framer: protótipos para dispositivos móveis com um framework em javascript

FramerJS

Framer is a modern prototyping tool. It can help you to quickly build and test complex interactions and rich animations for both desktop and mobile.

É assim que o Framer se apresenta em seu site. Hoje em dia fala-se muito em “design in the browser” e essa é uma boa ferramenta para isso.

O Framer tenta facilitar a vida dos designers que sabem um mínimo sobre html, javascript, css e jquery, criando um framework leve e funcional para simular como uma interface deve funcionar – tanto em um dispositivo móvel quanto em um navegador desktop.

Link: Framer.js >

Não pergunte ao usuário, pergunte ao seu dispositivo

Access your location

Você já deve ter usado algum site em seu celular que pede acesso à sua localização atual. O Google Maps é um exemplo disso. Ao invés de ter que preencher um formulário dizendo em qual endereço você está, é muito mais fácil pedir acesso ao GPS do smartphone e descobrir automaticamente qual é a localização da pessoa.

Com o aumento do acesso de dispositivos móveis a páginas web, pedir que o usuário preencha manualmente essas informações começa a perder o sentido. Os principais exemplos:

  • Localização atual
  • País ou região
  • Fuso horário

É claro que existem prós e contras em coletar essas informações automaticamente, como em toda decisão de design. Claro, evitar que o usuário preencha manualmente essas informações traz uma nítida melhoria na experiência (menos tempo perdido respondendo a essas perguntas), mas pode ter outras implicações indiretas.

Adivinhar o país do usuário pode pular um passo e levá-lo direto ao país correto, mas será que isso pode dar a sensação de invasão de privacidade?

Ou ainda: as pessoas usam esse site enquanto estão viajando?

Continuar lendo