Questão de Engenharia de Software — Interface do Usuário (UI) — CESPE / CEBRASPE 2025

UX e design responsivo: mockups e breakpoints

Gabarito: Certo (C). No planejamento de interação para aplicações web, o envio de mockups próximos aos breakpoints contribui para a orientação de mudanças no layout e para a precisão na UI, pois os breakpoints são os pontos de quebra onde o layout se adapta a diferentes tamanhos de tela, e os mockups nesses pontos permitem visualizar e validar o comportamento responsivo da interface.

O design responsivo é uma abordagem de desenvolvimento web que visa criar interfaces que se adaptam automaticamente ao tamanho da tela do dispositivo em que são exibidas, seja um desktop, tablet ou smartphone. Em vez de criar versões separadas do site para cada dispositivo, o design responsivo utiliza uma grade fluida, imagens flexíveis e media queries para ajustar o layout de forma dinâmica. Os breakpoints são os pontos de quebra definidos no CSS onde o layout muda para acomodar a nova largura da tela. Por exemplo, um layout de três colunas pode se tornar uma única coluna quando a tela é menor que 768 pixels.

Os mockups são representações estáticas de alta ou baixa fidelidade de uma interface, que mostram a estrutura visual, o posicionamento dos elementos e o conteúdo. No contexto do design responsivo, criar mockups específicos para cada breakpoint é uma prática essencial. Isso porque, ao visualizar o layout em diferentes resoluções, o designer e o desenvolvedor podem identificar problemas de usabilidade, como elementos sobrepostos, textos cortados ou botões inacessíveis, e fazer os ajustes necessários antes da implementação. Essa prática garante que a interface seja precisa e funcione corretamente em todos os dispositivos, melhorando a experiência do usuário (UX).

A importância de testar mockups nos breakpoints está diretamente ligada à precisão da UI. Sem essa validação, é comum que o layout quebre em determinadas resoluções, causando uma experiência ruim para o usuário. Por exemplo, um menu de navegação horizontal pode ficar ilegível em uma tela estreita, e um mockup nesse breakpoint permitiria ao designer decidir se o menu deve se tornar um ícone de hambúrguer ou se os itens devem ser reorganizados. Portanto, o envio de mockups próximos aos breakpoints é uma prática recomendada no planejamento de interação para aplicações web, pois orienta as mudanças de layout e assegura a precisão da interface.

A pegadinha desta questão é que ela mistura conceitos de UX, blockchain, design de software e gerenciador de transições distribuídas, mas o item em si trata apenas de um aspecto específico do design de interface. O candidato pode se confundir e achar que a afirmação é falsa por não se encaixar nos outros tópicos, mas a análise deve ser feita isoladamente. A afirmação é tecnicamente correta e reflete uma boa prática de design responsivo.

✅ CERTO. O envio de mockups próximos aos breakpoints é uma prática que contribui para a orientação de mudanças no layout e para a precisão na UI, pois permite visualizar e validar o comportamento responsivo da interface em diferentes tamanhos de tela.

Gabarito: Certo (C).