Prototipagem

Serviços > Prototipagem

Com base em insights, ou como uma progressão natural do estágio conceitual, criamos protótipos de baixa fidelidade média para representar as viagens do usuário de ponta a ponta. Alternativamente, usamos comps visuais para criar um protótipo interativo tanto para testes de usabilidade quanto de proposta de marca. À medida que um projeto passa para o projeto completo, desenvolvemos a Arquitetura da Informação (IA) e a taxonomia. A seguir estão listadas as metodologias que suportam a criação de protótipos e o desenvolvimento da Arquitetura da Informação.

WIREFRAMING

Uma wireframe é uma ilustração plana do layout de uma página de um aplicativo ou website. Ela mostra o que vai na página e onde e também pode ser usada para mostrar a navegação global e secundária, etiquetagem e estrutura.

Os Wireframes são uma ferramenta valiosa ao projetar websites e aplicativos porque são relativamente rápido e fácil de criar e mudar após a revisão.

Eles nos permitem definir como as páginas de um aplicativo ou website serão apresentadas em vários pontos de interrupção com notas descrevendo comportamento ou interação. Utilizamo-las para obter o acordo de nossos clientes sobre o design antes de passar à fase de protótipo. É muito mais barato e rápido ajustar os wireframes do que projetos mais complexos mais tarde no processo.

O que incluímos em uma Wireframe

Precisamos sempre considerar as necessidades do projeto ao criar estruturas de arame. Pode ser suficiente criá-las à mão livre usando caneta e papel ou podemos ser solicitados a usar um dos vários softwares de wireframes. Seja criado manualmente ou em software, a wireframe incluirá os mesmos componentes centrais como a seguir:

  • O layout de todos os componentes da página
  • Os elementos interativos
  • Imagens e cópia
  • Títulos e títulos
  • Navegação e caixas de busca

Temos uma escolha entre desenvolver protótipos de baixa, média ou alta fidelidade e essa escolha depende realmente de como eles serão usados e com quem. Algumas pessoas acham bastante difícil entender as wireframes lo-fi porque não há nenhuma marca, a cópia é lorum ipsum de suporte e as seções são apenas linhas desenhadas na página. Aumentar a fidelidade pode proporcionar mais clareza e é muito útil se o teste com o usuário for realizado.

Determinando o projeto

Nosso Designer de Experiência do Usuário (UXD) trabalhará com você para entender quais itens de conteúdo precisam aparecer na página. Eles também desejarão entender o objetivos da página para cada uma das páginas a serem wireframed e para entendê-las por plataforma - se estamos projetando um website que seja responsivo ou que tenha uma versão móvel. Os objetivos da página ajudam a UXD a priorizar o layout do conteúdo e nos formatos menores da tela a hierarquia de conteúdo.

Este é um processo de colaboração e normalmente realizaremos esta atividade no local, trabalhando ao seu lado e de sua equipe. No mínimo, precisaremos de uma sessão de briefing detalhada com você e depois teremos acesso a você em um processo regular através do processo de design para verificar e iterar os wireframes à medida que formos avançando.

Os Entregas

Os arames serão entregues no formato previamente acordado. Um exemplo de estrutura de arame de baixa fidelidade é mostrado abaixo e este é o tipo de detalhe que poderia ser esperado para cada página. Nem todas as páginas serão wireframes, pois não há valor em páginas wireframes com o mesmo, ou muito parecido, layout. Portanto, os resultados serão constituídos pelas páginas-chave em todas as plataformas.

estrutura de arame

Exemplo de uma estrutura de fio de baixa fidelidade

PROTÓTIPOS INTERATIVOS

Os protótipos interativos ilustrarão não apenas o layout da página, mas também a interação planejada. Com um moderno software de protótipos é possível um alto nível de fidelidade e os protótipos podem parecer e sentir-se como uma versão totalmente construída do site ou aplicativo.

O Processo de Design

Seguimos uma metodologia padrão de design de experiência do usuário para criar protótipos e, portanto, esperamos que muitas, se não todas as etapas do processo de design centrado no usuário até este já tenham sido concluídas.

Isso significa que nossos protótipos estão sendo desenvolvidos a partir deles:

  • Um claro entendimento do necessidades do usuário sobre a proposta
  • Validação da proposta tanto com os usuários como com as partes interessadas
  • Bem desenvolvido personas representando os principais segmentos de audiência
  • Casos de uso e fluxos de trabalho
  • Viagens do usuário
  • Estruturas de arame

Com estes itens no lugar, podemos desenvolver os protótipos de design e exigimos um tempo limitado com você e sua equipe para entrar em funcionamento.

Para facilitar a pesquisa do usuário, são criados protótipos baseados em cenários plausíveis, incluindo interações que suportam os objetivos do usuário.

Nós usamos um 25:50:20:5 abordagem ao desenvolvimento de protótipos.

primeiro passo é criar cerca de 25% do protótipo e depois obter feedback do cliente para garantir que estamos indo na direção certa. Continuamos então a desenvolver até que tenhamos cerca de 75% do trabalho de projeto completo e depois completemos um revisão posterior. Depois disso, levamos o protótipo para versão completa acabada e permitir mais um 5% do tempo para afinações e mudanças.

Também temos experiência em trabalhar com e como parte de equipes ágeis (ou enxutas UX) e fornecendo o recurso UXD (assim como o recurso de pesquisa).

SOFTWARE DE PROTOTIPAGEM:

 protótipo de software gráfico

Nossos Designers Seniores UX estão familiarizados com uma gama de softwares de prototipagem, incluindo produtos populares, tais como Eixo RPInvisãoOmnigraffleSketch e muito mais - até mesmo HTML. Nossos clientes acham mais fácil se desenvolvermos protótipos em software que eles já usam e nós estamos felizes em fazer isso.

Muitos destes softwares nos permitirão fazer protótipos para múltiplas plataformas de forma rápida e eficiente, pois possuem recursos que serão redimensionados para tamanhos de telas móveis. Eles também possuem facilidades de compartilhamento, facilitando o compartilhamento dos produtos com o cliente à medida que são desenvolvidos e no final do processo de design.

ESTUDO DE CASO:

Para um grande cliente varejista, foi-nos solicitado que criássemos um protótipo interativo para a pesquisa de usuários que eles estavam planejando. Eles tinham projetos planos e assim pudemos pegá-los e criar hotspots clicáveis para que eles fossem interativos. Isso economizou muito tempo e dinheiro e forneceu todo o feedback necessário para a pesquisa do usuário.

REVISÃO DA VIAGEM DO USUÁRIO

É realizada uma pesquisa de escrivaninha para fornecer uma revisão independente das viagens do usuário para garantir que elas contenham informações suficientes para facilitar a criação de protótipos. A pesquisa também é utilizada para priorizar as viagens para desenvolvimento e teste de protótipos.

Este é um passo valioso, quer estejamos envolvidos na construção dos protótipos, quer a equipe do cliente queira construí-los em casa. Completamos uma revisão detalhada de todas as viagens dos usuários e fornecemos uma análise independente:

  • viagem holística do usuário
  • pontos de contato e canais e sense verificar as entradas e saídas
  • fluxo de trabalho e etapas de processo com especial referência a viagens alternativas

Identificamos áreas de melhorias nas viagens e micro-interações durante e entre as principais etapas da viagem do usuário.

Também avaliamos quais aspectos das viagens dos usuários serão mais beneficiados com os testes dos usuários e os detalhes necessários para apoiar as sessões de teste. Desta forma, podemos ajudar a priorizar a atividade de prototipagem necessárias e evitar sessões de teste que são ineficazes. Isto pode ser como resultado da falta de etapas no processo, interações-chave não construídas que são cruciais para outros processos ou suposições feitas sobre o que um usuário fará.

Baseamo-nos em nossa vasta experiência em testes de usabilidade de protótipos para fornecer orientação e orientação que poupa a equipe do cliente, ou nossa própria equipe, tempo e dinheiro.

ESTUDO DE CASO: REVISÃO DA VIAGEM DO USUÁRIO

Trabalhando com uma equipe interna, recebemos as viagens dos usuários e fomos solicitados a completar uma revisão especializada antes de a equipe interna desenvolver protótipos que depois seríamos solicitados a avaliar com os usuários. Nosso feedback permitiu que a equipe interna se concentrasse nas principais viagens do usuário que exigiriam testes e abordasse alguns problemas de fluxo que não tinham sido descobertos anteriormente.

Tem um projeto em mente?