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

Uma ferramenta para mapear Consumer Journeys e Personas do seu produto

Smaply

É o que promete o Smaply, como você pode ver no vídeo abaixo:

Incrível, né?

Hmm… não muito.

Apesar de estar ainda em Alpha, testei algumas instâncias da ferramenta aqui na agência e ela realmente ajuda a criar um framework para esse tipo de documentação. Na prática, parece um pouco com um Basecamp, mas focado em documentar o produto do trabalho do time de User Experience e permitir que outras pessoas tenham acesso aos resultados.

Mas cuidado: o Smaply proporciona apenas o template para esses documentos.

E como qualquer template, a ferramenta não é à prova de maus UX Designers. Se você utiliza o Smaply (ou qualquer um desses templates que são facilmente buscáveis no Google) e preenche tudo ali com o que você acha que acontece na experiência do consumidor ao usar o seu produto, você continua fazendo a mesma besteira de sempre.

Pode, sim, economizar algum tempo de documentação, que você gastaria movendo as caixinhas cinzas em um InDesign da vida. Mas achar que isso vai resolver a relevância do seu produto, é inocência demais.

Pesquisa, curiosidade e estratégia. Isso sim pode ajudar.

Um protótipo que facilita a definição do CSS a partir de um arquivo PSD

Brackets- From Design Comp to Code

Ainda é um protótipo, mas em breve será lançado no Brackets.

Nesse vídeo, Rain Wilson e Mary Lynn Rajsku demonstram as funcionalidades desse editor de HTML que importa arquivos PSD e facilita a visualização das medidas e guias visuais de cada uma das camadas do arquivo. Segundo os criadores, o objetivo é facilitar o processo de interpretação de arquivos PSD quando eles são passados do Designer para o Developer – algo que ainda é feito manualmente em muitos times de desenvolvimento por aí.

Leia também:

A aproximação entre Designers e Desenvolvedores (e alguns links úteis caso você esteja interessado)

Styleguides são o novo Photoshop

Como criar uma User Story?

Trello

“Felizmente, user stories são extremamente fáceis de criar depois que você fez o pensamento inicial por trás delas. Dependendo de como você pretende usá-las, tem três métodos diferentes que eu sugiro usar:

  1. Em cartões de papel – útil se você pretende organizar um workshop com outros membros do time ou se pretende agrupar as histórias.
  2. Em uma planilha de excel – útil se você tem um número muito grande de histórias, ou se você quer modificá-las com mais facilidade (por exemplo reorganizá-las por prioridade).
  3. Em uma ferramenta online – como o Trello, que permite criar e organizar suas user stories, para depois distribui-las entre seu time e seus clientes.

Dependendo do nível de detalhes das suas histórias, é interessante chamar um desenvolvedor ou um analista de negócios para te ajudar. Isso porque você pode precisar criar histórias para coisas como requisitos de sistema, que você pode não dominar completamente.”

Link do artigo completo: User Stories – The Beginner’s Guide >

Modelo de contrato para trabalho de UX

Contract for User Experience Design Work

Um link útil: a Smashing Magazine divulgou alguns modelos de contrato de freelance, e um deles era específico sobre UX. Está em inglês, mas mesmo que você não o utilize exatamente do jeito que é, serve para dar uma olhada e ver se você não está esquecendo de nada. O modelo foi criado e publicado por Gabriel Gallagher e está disponível no seu perfil no docracy: Contract for User Experience Design >

Tem também um artigo muito útil do 24ways falando sobre como fazer um “killer contract” de UX.

Abaixo alguns trechos:

Your killer contract should cover:

  • A simple overview of who is hiring who, what they are being hired to do, when and for how much
  • What both parties agree to do and what their respective responsibilities are
  • The specifics of the deal and what is or isn’t included in the scope
  • What happens when people change their minds (as they almost always do)
  • A simple overview of liabilities and other legal matters
  • You might even include a few jokes

Ah, se você trabalha fazendo freelas de UX com frequência e quiser compartilhar algum outro modelo de contrato ou alguma dica, mande por email (blog.arquiteturadeinformacao@gmail.com) que a gente compartilha aqui.

Pow Wow App: uma ferramenta para agendar testes de usabilidade

Pow Wow

Funciona da seguinte forma:

  • Você sincroniza seu Google Calendar e diz quais horários estão disponíveis para você receber os participantes.
  • A ferramenta manda para os participantes uma página com várias opções de horários para que eles escolham qual funciona melhor para eles.
  • À medida em que eles forem agendando, você vai vendo o seu calendário sendo preenchido.

Confira no vídeo:

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 >