Introdução às Interações

O recurso de Interações é usado para criar protótipos aplicando interatividade a qualquer objeto em uma página do Moqups.

Quando você adiciona uma interação a um objeto, torna possível que esse objeto responda a uma variedade de gatilhos enquanto está no modo Visualização.

Os dois principais casos de uso das interações são:

• Protótipos, onde as interações são usadas, durante a fase de design e teste, para imitar a experiência final do usuário do produto desenvolvido – seja um aplicativo ou um site.
• Gerenciamento de Projetos, onde as interações são usadas para organizar informações vinculando qualquer elemento individual de um design, diagrama, storyboard, mapa do site – ou a própria página inteira – a páginas subsequentes. Isso ajuda os membros da equipe a navegar entre seções específicas de um projeto complexo para ver especificações, notas, requisitos ou detalhes relevantes.

Existem dois tipos de interações que podem ser aplicados a um objeto:

• Uma Interação de Página é usada para navegação e vincula objetos designados a outras páginas dentro do próprio projeto do Moqups, ou a URLs que estão fora do projeto.
• Uma Interação de Objeto é usada para imitar a transformação de objetos na página – alterando estados de botões, abrindo dropdowns, exibindo o menu de contexto ao clicar com o botão direito, abrindo diálogos modais, etc. – simulando a forma como um usuário irá experimentar o produto final.

Ambas as interações podem ser aplicadas a qualquer tipo de objeto: Stencil, Ícone, Imagem ou Modelo.

Mas também existe um objeto interativo dedicado – chamado Hotspot – que pode ser usado para designar áreas específicas de uma página como interativas.

Neste artigo, mostraremos onde encontrar o Painel de Interações e forneceremos mais detalhes sobre como as interações são usadas tanto na Criação de Protótipos quanto no Gerenciamento de Projetos. Também explicaremos como usar o modo Visualização para ativar as interações.

Em seguida, nos artigos subsequentes desta seção, explicaremos como aplicar Interações de Página e Interações de Objeto, e como adicionar Hotspots.

Painel de Interações

Para abrir o Painel de Interações, vá para a Barra Lateral Direita e clique na Aba de Interações. A aba ficará azul e abrirá o painel. Lá você pode:

• Ver todas as interações que foram aplicadas a um objeto
• Criar uma nova interação
• Adicionar um hotspot

Nos artigos subsequentes desta seção, demonstraremos como usar o Painel de Interações para adicionar tanto Interações de Página quanto Interações de Objeto. Mas, por ora, aqui está uma breve orientação.

Depois de clicar no objeto ao qual deseja aplicar a interação:

1. Escolha um Gatilho no dropdown superior: Ao Clicar ou Tocar, Ao Clicar com o Botão Direito, Ao Clicar Duas Vezes, Entrada do Mouse, Saída do Mouse.

2. No segundo dropdown, selecione uma Ação da lista de Interações de Página ou Interações de Objeto.

3. Defina um Destino, usando o dropdown ou o botão de mira, para selecionar um objeto ou uma página como o destino final da interação.

4. Clique em Concluído para aplicar a interação.

5. Você pode usar a Visualização para ver como sua interação funciona.

6. Você também pode usar a seção de Hotspots abaixo para adicionar Hotspots.

7. A seção de Opções permite controlar como as interações são exibidas:

   • Mostrar hotspots: Exibe os hotspots clicáveis no modo de edição.
   • Mostrar indicadores de interação: Adiciona um emblema de iluminação a objetos com interações – na página e no Painel de Camadas – no modo de edição.
   • Revelar destino da interação: No modo Visualização, exibe um tooltip com a ação e o destino quando você passa o cursor sobre um objeto.

Interações na criação de protótipos

O uso principal das interações é transformar designs em protótipos. Essa etapa costuma ser a última fase do design de aplicativos e sites antes que a codificação e a implementação ocorram.

O processo de design normalmente começa com um diagrama que representa o fluxo do usuário, ou com um mapa do site para um website. Essas visualizações ajudam a transmitir ideias abstratas e generalizadas sobre o fluxo de dados e a arquitetura de informações de um projeto.

E, à medida que mais detalhes são adicionados, esses diagramas geram storyboards. Os storyboards são visualmente mais ricos que os diagramas e podem ajudar a transmitir os detalhes específicos das telas e seu fluxo de navegação.

Então, cada elemento nesses storyboards se desdobra para se tornar páginas próprias – contendo wireframes ou mockups mais detalhados que representam o design dessa tela ou página web.

Um wireframe ou mockup finalmente se torna um protótipo quando a interatividade é adicionada a essas páginas individuais. A adição de interatividade significa que, antes de qualquer codificação real ser feita, o design pode imitar o produto final respondendo às entradas do usuário na forma de cliques, hovers (entrada e saída do mouse), seleção de itens e navegação de páginas.

Mesmo que um protótipo não esteja ativo ou totalmente funcional, as interações imitam o suficiente da UI eventual para que todas as partes interessadas possam ter uma noção do UX final. Designers, desenvolvedores e gerentes de produto podem iterar livremente, testar diferentes versões – e, mais importante, construir consenso antes que o produto final entre no ciclo de produção.

Quando a fase de prototipagem e testes estiver concluída, o design é entregue aos desenvolvedores, após o qual qualquer alteração no design se torna cara e trabalhosa. Usar um protótipo para visualizar o UX – antes mesmo de os desenvolvedores começarem a escrever o código – pode poupar tempo, dinheiro e frustração para a sua equipe.

Interações no gerenciamento de projetos

O recurso de Interações, e especialmente sua capacidade de fornecer links e navegação, tem muitos usos além da Criação de Protótipos formal no fluxo de trabalho de design. Muitos usuários – incluindo Analistas de Negócios, Arquitetos de Sistemas, Gerentes de Produto e Desenvolvedores – usam o Moqups como um espaço criativo compartilhado onde todas as partes interessadas podem colaborar e construir consenso.

Para todos os tipos de trabalhos de design e gerenciamento de produtos, o Moqups pode ser usado para criar projetos rápidos e específicos a problemas, ou para construir projetos de grande escala com múltiplos usuários com dezenas – ou até centenas – de páginas. Mas, independentemente da escala do projeto, todos têm várias necessidades em comum:

• Organizar informações complexas, em uma variedade de formatos, e atualizá-las em tempo real
• Fornecer acesso a uma ampla gama de partes interessadas para criar, editar e comentar conteúdo
• Visualizar requisitos, transmitir contexto e comunicar especificações claras

Tipicamente, um desses projetos pode incluir diagramas de fluxo, storyboards de UX, mapas do site, mapas mentais, organogramas, casos de uso e diagramas de arquitetura de informações – ao lado de wireframes, mockups e protótipos.

Com o recurso de Interações, você pode vincular todos esses elementos entre si e habilitar a navegação instantânea dentro das páginas do próprio projeto do Moqups, ou além do Moqups – para o Google Drive, Dropbox, Slack, Trello ou qualquer URL. As interações também podem ser usadas para aplicar Interações de Objeto, quando necessário, para demonstrar requisitos ou especificar elementos de design.

Por exemplo, em um único projeto do Moqups, você pode ter um diagrama de fluxo de trabalho que mostra o processo de desenvolvimento de um novo recurso para seu aplicativo. Com as interações, você pode tornar cada elemento do diagrama interativo para que, quando os membros da sua equipe clicarem nele, sejam redirecionados para uma nova seção do diagrama, uma página completa com detalhes de design ou um local externo relevante. Dessa forma, você pode garantir que cada membro da equipe conheça o contexto exato de sua tarefa e que tenha todas as informações necessárias para executá-la com rapidez, independência e eficácia.

Nesse tipo de projeto, todas as partes interessadas podem navegar, criar, verificar, comentar e contribuir. E, mais importante, podem adicionar seus próprios links, tanto internos quanto externos, para fornecer requisitos atualizados e uma única fonte de verdade.

Usar o modo Visualização para ativar as interações

As interações são projetadas para serem adicionadas a objetos no modo de edição, mas experienciadas no Modo Visualização.

Mudar para Visualização ativará todas as interações do projeto para que simulem a interatividade do produto eventual, uma vez desenvolvido.

Leia mais sobre o Modo Visualização aqui.