Preview de Stencil para Omnigraffle

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!

 

2 ideias sobre “Como documentar interações de toque?

  1. Pingback: Documentação de interações de toque | Carolina Fraga

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>