Seja Bem-Vindo. Este site tem recursos de leitura de texto, basta marcar o texto e clicar no ícone do alto-falante   Click to listen highlighted text! Seja Bem-Vindo. Este site tem recursos de leitura de texto, basta marcar o texto e clicar no ícone do alto-falante

AULA 09 – INTERFACE HOMEM COMPUTADOR

Apresentação da Aula

Prototipagem/Antecipação

Introdução

Segundo Benyon (2011), a antecipação preocupa-se em tornar as ideias visíveis, ela traz à vida as ideias abstratas. Para tanto, nessa etapa, utilizam-se os protótipos – modelos físicos, dos mais simples – esboços, modelos de papelão – aos mais complexos – um pedaço de metal prensado e moldado, uma parte de um software.

A antecipação é necessária em um projeto de sistemas interativos para representar o trabalho de design para a equipe e para o cliente. Para um design centrado no humano a antecipação é importante, pois permite ao designer ver o produto ou sistema a partir da perspectiva de outros.

O que é um protótipo?

A palavra representa um modelo, criado único e exclusivamente para servir de teste para a versão “crua” de um produto, serviço ou sistema. Portanto, o objetivo da criação de protótipos viáveis é o aprendizado e aprimoramento daquela solução.

Neste artigo, vamos explicar como fazer um protótipo que atenda a essa necessidade – aprimorar o produto, mesmo antes de ele estar finalizado, aumentando suas chances reais de sucesso e prosperidade, pós-lançamento.

E antes de saber como fazer o protótipo de um produto ser o exemplar ideal da solução desenvolvida, é necessário plena percepção e entendimento que ele é só uma ferramenta de aperfeiçoamento, e não o produto.

Além disso, leve em consideração que mesmo as mais complexas ideias são passíveis de testes. Para isso, você pode usar ferramentas que ajudem nesta missão.

A prototipagem serve como conexão entre time de produtos e usuário final, que dá a possibilidade de descobrir dados sobre os clientes que você talvez nunca imaginaria.

Por esse motivo, ela é fonte não só de novas funcionalidades, mas de estratégias de negócios, aplicado em diversos métodos.

Nota do professor: link para reportagem com ferramentas de prototipagem.

Quais as etapas?

Imersão

Seu principal objetivo é entender o contexto do problema. Ela começa com a elaboração da matriz CSD, para reunir e classificar as informações existentes. Em seguida é desenvolvido um diagrama de Ishikawa, para identificar quais as causas e problemas que o produto vai resolver. E por último, a criação de um fluxograma de processos, para mapear as funções do produto.

Exemplo de Matriz CSD
Exemplo de Diagrama de Ishikawa

Pesquisa

Seu principal objetivo é entender o público-alvo e os possíveis concorrentes do produto. Ela se inicia com a definição de qual é o público-alvo e, a partir dele, a criação de algumas personas para representarem os usuários e seus interesses.

Ideação

É o momento em que as ideias e pesquisas das etapas anteriores começam a tomar a forma de um produto. Sua primeira etapa é o diagrama de casos de uso, ele serve para mapear, a partir do ponto de vista dos usuários, as funcionalidades e possibilidades que serão desenvolvidas. Depois disso será feito o documento de requisitos, que define quais os processos que farão parte do processo de desenvolvimento. E com essas informações, é realizada uma previsão de orçamento do projeto final.

Exemplo de Diagrama de Casos de Uso

Prototipagem

Após a definição dos requisitos e das funcionalidades, é iniciada a etapa de prototipagem, cujo objetivo é desenhar a interface do produto. Nessa etapa, é desenvolvido o protótipo de baixa fidelidade e realizadas pesquisas e testes com usuários, encontrando pontos positivos e negativos. Então, com base nesses dados obtidos, o protótipo de alta fidelidade é desenvolvido e, a partir dele, o diagrama final de casos de uso.

Exemplo de Protótipo na plataforma Figma

Documentação Técnica

É a etapa que define o escopo do projeto a partir do diagrama final e do protótipo de alta fidelidade. Inicialmente são analisadas as possíveis Stack’s e é gerado um relatório de tecnologias com o conjunto ideal para o desenvolvimento. Depois disso, caso exista um banco de dados, já se constrói o diagrama de entidade relacionamento do banco de dados.

Mas por que executar o Projeto de Concepção e Prototipagem?

Ao final dessas etapas o projeto está finalizado, mas qual o valor agregado que ele possui?

Em algumas etapas do desenvolvimento foram gerados diferentes entregáveis fundamentais para a codificação de qualquer projeto de computação. Por exemplo, o documento de requisitos, o protótipo de alta fidelidade e o diagrama de entidade relacionamento.

Além de fundamentais para o desenvolvimento, os entregáveis garantem o alinhamento entre o cliente e a versão final desenvolvida do produto. Dessa forma, é possível visualizar como a ideia será na prática, antes de sua codificação e do desenvolvimento do projeto final.

Técnicas básicas de prototipagem

A antecipação, como sugere o próprio termo, prevê possíveis soluções. Para tanto, utiliza-se de técnicas de prototipagem, algumas estão descritas a seguir:

Esboços

Ideias e pensamentos podem ser rapidamente materializados a partir deles.

Storyboards

Técnica que permite a representação de momentos-chave da experiência interativa, em um estilo de desenho animado.

Storyboards para projetos de interação.

Mapas de navegação

Segundo Benyon (2011) a navegação é uma característica-chave para muitos sistemas e os mapas de navegação mostram como as pessoas se movimentam pelo site ou aplicativo.

O objetivo do mapa de navegação é programar a experiência que as pessoas terão com um site, por exemplo: cada página do site é representada por uma caixa e todas as páginas que puderem ser acessadas através dela deve derivar dessa primeira caixa.

Mapa de navegação de um site

Protótipos hi-fi

Os protótipos hi-fi diferenciam-se dos anteriores por apresentar interatividade: algo acontece se apertarmos um botão, mesmo que a ação seja descrita pelo designer em uma nota de rodapé.

Os protótipos hi-fi, diz Benyon (2011), são semelhantes ao produto final em termos de aparência, mas não necessariamente, de funcionalidade. São produzidos em softwares e são úteis para testes de usabilidade.

Protótipo hi-fi de um mecanismo de busca.

Protótipos lo-fi

Protótipos lo-fi são protótipos geralmente feitos em papel. São amplamente utilizados quando é necessária sua manipulação por muitas pessoas.

Esses protótipos são parte do design participativo, ou seja, explorar e avaliar ideias de design envolvendo os futuros usuários na concepção e construção do produto.

Protótipo lo-fi de um mecanismo um aplicativo de celular.

Design participativo

Design Participativo, segundo Frederick van Amstel, editor do blog USABILIDOIDO, é uma abordagem utilizada há décadas em diversas áreas – Arquitetura, Design de Produtos e pela própria Engenharia de Software. É uma prática em que as pessoas influenciadas pelo que está sendo projetado participam ativamente de suas definições. No Design de Interação, essa abordagem começou a ser utilizada para a arquitetura de sistemas na Escandinávia, nos anos 70. A partir dos anos 90, algumas empresas produtoras de tecnologias passaram a incluir o design participativo em seus métodos para a pesquisa e desenvolvimento de produtos.

No processo de design participativo de um software, a interface é apenas a ponta do iceberg, segue Amstel, o tema principal das discussões são as possibilidades de uso do software, ou seja, para que ele servirá, como será apropriado para cada participante, qual será o impacto em suas vidas etc. O Design de Interação pela abordagem participativa representa uma forma de implementar, na prática, como a área se autodefine: projetar interações entre seres humanos.

Protótipo em papel de uma tela de mensagens para um centro de comunicação

Protótipos em vídeo

Também chamados de “vídeo brainstorming” ou “vídeo prototipação”, o protótipo em vídeo é uma ferramenta importante no processo do design participativo.

Um dos métodos de protótipos em vídeo consiste na criação de uma maquete física do produto. Então é feito um vídeo, com um ator interagindo com o modelo que, aparentemente, responde às ações do ator. Essa simulação é feita por um programa de animação.

Prototipagem em vídeo.

Softwares utilizados na prototipagem

Para caracterizar a interação de um sistema, pode-se lançar mão de qualquer ferramenta técnica: uma página em HTML, uma tela construída com software do tipo VB (Visual Basic), DELPHI, JAVA ou lâminas de PowerPoint – este último sendo o preferido devido a sua simplicidade e capacidade de demonstrar o produto final em alta fidelidade, ainda que sem as interatividades funcionais. O necessário é que sejam exibidas as propriedades da interação, para testes e discussões.

A seguir, estão alguns exemplos de prototipagem em diferentes softwares:

Exemplo de protótipo em HTML.
Exemplo de protótipo em DENIM.
Exemplo de protótipo em AXURE.

Fim da Aula.

Click to listen highlighted text!