UA9 — Prototipação e Concepção
Um protótipo é qualquer modelo que representa partes de um design de interface para avaliação — pode ser um esboço em papel, um vídeo simulando o artefato, ou até um modelo em madeira. O importante é prototipar para que a entrega final seja alinhada às necessidades do usuário.
Slides — Prototipação
O que é um protótipo?
Um protótipo é um modelo, uma representação de um design que possibilita que stakeholders interajam com o que foi elaborado e simulem funcionalidades. Não precisa ter as características finais — pode ser um desenho em papel, esboço de tela à mão, vídeo simulado ou modelo em papelão. (Rogers, Sharp e Preece, 2013)
O processo é feito em ciclos: designers elaboram → usuários avaliam → designers ajustam. Cada ciclo gera aprendizado antes de investir em desenvolvimento real. O protótipo normalmente enfatiza características ou funcionalidades específicas que se deseja testar naquele momento, não o sistema completo.
Tipos de prototipação — por fidelidade
| Tipo | Semelhança com o artefato final | Material / Abordagem | Melhor para |
|---|---|---|---|
| Baixa fidelidade | Nenhuma ou mínima | Papel, post-its, cartolina, isopor | Fases iniciais; explorar conceitos e fluxos |
| Alta fidelidade | Muito próxima | Mesmos materiais do produto final; software real | Validação final; testes de usabilidade detalhados |
Outra classificação, por amplitude:
| Tipo | Descrição |
|---|---|
| Horizontal | Grande variedade de funções, mas com poucos detalhes em cada uma |
| Vertical | Poucas funções, mas cada uma detalhada ao máximo |
Design Conceitual
O design conceitual transforma os requisitos levantados em um modelo conceitual — uma descrição de tudo que o usuário pode fazer durante a utilização do artefato, e quais conceitos são necessários para entender como interagir com ele.
Quatro princípios fundamentam o design conceitual (Rogers, Sharp e Preece, 2013):
- Manter a mente aberta para a criatividade, mas os interesses dos usuários vêm primeiro.
- Discutir as ideias que surgirem com os stakeholders, na medida do possível.
- Quando precisar de feedback rápido, usar prototipação de baixa fidelidade.
- Fazer muitos ciclos iterativos — usuários avaliam, designer adapta.
O design conceitual cuida de questões como: quais funções existem, como elas se relacionam entre si, e quais informações precisam estar disponíveis em cada momento.
Design Físico
O design físico toma as decisões e escolhas para elaborar uma interface que respeite requisitos ambientais, de usuários, de usabilidade, de experiência e de restrições legais. Duas considerações principais sobre os usuários:
Acessibilidade
Tornar o artefato utilizável para o maior número de pessoas: leitores de tela, controle por voz, aumento de zoom, teclados em Braille, contraste elevado. Acessibilidade é requisito, não diferencial.
Cultura Nacional
Idioma, cores, ícones, formatos de data/hora/moeda e padrões culturais variam por região. Um produto global precisa se adaptar a essas diferenças sem forçar o usuário a se adaptar ao software.
Cenários — narrativas antes das telas
Cenários são histórias informais que descrevem as atividades do usuário durante a utilização da interface. São a base para o design — antes de desenhar qualquer tela, é preciso entender o contexto de uso.
Os sete elementos de um cenário (Baranauskas e Rocha, 2003):
| Elemento | O que descreve |
|---|---|
| Contexto | Detalhes e situações que explicam os objetivos e papéis dos atores |
| Evento | Ação externa do computador ou ambiente que interage com a interface |
| Avaliação | Atividade mental do usuário ao interpretar uma situação |
| Ação | Ação observável realizada pelo ator |
| Atores | Pessoas que interagem com a interface; inclui perfil de acesso e acessibilidade |
| Objetivos | O que o ator deseja atingir — a motivação para suas ações |
| Plano | O raciocínio mental para converter objetivos em ações concretas |
Cenários podem ser positivos ou negativos, pois precisam identificar as consequências de cada ideia de design. São ferramentas flexíveis, provisórias e de baixo custo — permitem obter feedback dos stakeholders sem construir um protótipo funcional completo.
Práticas Modernas — Prototipação
- Figma tornou-se o padrão da indústria para prototipação, substituindo Balsamiq, Axure e Adobe XD. É colaborativo em tempo real, multiplataforma e gratuito para times pequenos.
- Design Systems (ex.: Material Design, Ant Design, Radix UI) fornecem componentes reutilizáveis pré-testados — reduzem o tempo de prototipação e garantem consistência visual.
- Testes de usabilidade remotos com ferramentas como Maze, Hotjar e UserTesting permitem coletar feedback de usuários reais sem sala física — mais rápido e barato que testes presenciais.
- Penpot é a alternativa open-source ao Figma — auto-hospedada, sem lock-in de fornecedor, suporte a SVG nativo.
Dicas para a Prova
- Esboçar desenhos de telas para que usuários avaliem e troquem ideias com designers = Prototipação (não brainstorming, entrevista ou questionário).
- Protótipo muito detalhado, próximo ao produto final, em que usuários conseguem simular inclusão/exclusão = alta fidelidade.
- Esclarecer responsabilidades dos usuários, elementos da interface e o que cada aspecto significa = fase de design conceitual.
- Considerar limitações físicas dos usuários, região geográfica e cultura = design físico.
- Um protótipo com passos descritivos do usuário (ex.: “usuário clica em Cadastro → informa dados → clica Salvar”) é um protótipo que utiliza cenários.
Referências bibliográficas desta UA
- ROGERS, Y.; SHARP, H.; PREECE, J. Design de Interação: além da interação humano-computador, 3ª ed., 2013.
- BARANAUSKAS, M.C.C.; ROCHA, H.V. Design e Avaliação de Interfaces Humano-Computador, 2003.