Questão de Engenharia de Software — Interface do Usuário (UI) — VUNESP 2023

Wireframe no Design de Aplicativos

Gabarito: letra C. O wireframe é, por definição, um esboço estrutural de baixa fidelidade que representa as telas de um aplicativo e as relações de navegação entre elas, servindo para planejar o fluxo do usuário antes da definição visual (cores, tipografia) e da implementação. As demais alternativas descrevem outras etapas ou elementos do design, como identidade visual, links externos, paleta de cores e automação de chat.

O wireframe é uma ferramenta fundamental no processo de design de interfaces, funcionando como uma "planta baixa" do produto digital. Ele prioriza a estrutura, o layout e a hierarquia da informação, deixando de lado aspectos estéticos como cores, fontes e imagens. O objetivo principal é validar a arquitetura da informação e o fluxo de navegação, garantindo que o usuário consiga realizar suas tarefas de forma intuitiva. É um artefato de baixa fidelidade, geralmente desenhado em tons de cinza, com formas geométricas simples representando elementos como botões, campos de texto e imagens.

A importância do wireframe reside na sua capacidade de comunicar rapidamente a estrutura de um produto, permitindo que a equipe (designers, desenvolvedores, stakeholders) alinhe expectativas antes de investir tempo e recursos em protótipos de alta fidelidade ou no desenvolvimento. Ele é o primeiro passo para transformar requisitos em uma solução visual concreta, e sua criação está diretamente ligada ao design centrado no usuário, pois coloca a experiência de navegação no centro do processo.

Na prática, um wireframe pode ser feito à mão, em papel, ou utilizando ferramentas digitais como Figma, Sketch ou Adobe XD. Ele pode representar uma única tela ou um fluxo completo de telas, mostrando como o usuário navega entre elas. Por exemplo, em um aplicativo de e-commerce, o wireframe mostraria a tela inicial com a barra de busca, a lista de produtos, a tela de detalhes do produto e o carrinho de compras, com setas indicando a navegação entre essas telas. Essa representação ajuda a identificar problemas de usabilidade antes mesmo de qualquer código ser escrito.

A distinção crucial que a questão explora é entre wireframe, protótipo e design visual. Enquanto o wireframe é um esboço estrutural, o protótipo é uma versão interativa que simula o funcionamento do produto, e o design visual (UI) é a aplicação de cores, tipografia e outros elementos estéticos. A banca tenta confundir o candidato ao associar o wireframe a elementos que pertencem a essas outras etapas, como a seleção de cores (alternativa D) ou o desenvolvimento de fontes (alternativa A).

Alternativa A — ❌ Incorreta

O desenvolvimento de fontes personalizadas é uma atividade do design visual (UI), que define a identidade visual do aplicativo. O wireframe, por ser um esboço de baixa fidelidade, não se preocupa com tipografia, utilizando apenas fontes genéricas para representar o texto. A identidade visual é construída em uma etapa posterior, quando a estrutura já foi validada.

Alternativa B — ❌ Incorreta

O design de links clicáveis para mídias sociais é um detalhe de implementação ou de conteúdo, não uma característica definidora do wireframe. Embora um wireframe possa indicar a presença de um link, seu foco é a estrutura da tela e a navegação, não a definição de links externos específicos. Essa alternativa confunde o wireframe com a estratégia de marketing digital.

Alternativa C — ✅ Correta ⟵ GABARITO

Esta é a definição precisa de wireframe: um esboço de telas que demonstra como elas se comunicam entre si, ou seja, o fluxo de navegação do usuário. O wireframe é a representação estrutural da interface, focada na disposição dos elementos e na jornada do usuário, sem se preocupar com a estética final. É exatamente essa a função do wireframe no design de aplicativos.

Alternativa D — ❌ Incorreta

A seleção de cores é uma etapa do design visual (UI), que ocorre após a validação da estrutura. O wireframe é propositalmente desprovido de cores, utilizando tons de cinza para evitar que o foco seja desviado para questões estéticas. Essa alternativa confunde o wireframe com o design de interface de alta fidelidade.

Alternativa E — ❌ Incorreta

O processo de funcionamento das respostas automáticas em um chat é uma funcionalidade específica do aplicativo, relacionada à lógica de negócio e à programação, não ao design estrutural. O wireframe pode representar a tela do chat, mas não define o comportamento das respostas automáticas. Essa alternativa confunde design de interface com desenvolvimento de funcionalidades.

Gabarito: letra C