Questão de Engenharia de Software — Interface do Usuário (UI) — INSTITUTO AOCP 2024
Engenharia de Software›Interface do Usuário (UI)
Código
qa631637
Banca
INSTITUTO AOCP
Órgão
MGI
Ano
2024
Cargo
Esp ( )
O especialista em experiência do usuário (UX) é responsável por desenvolver diversas tarefas dentro do Ministério da Gestão e da Inovação em Serviços Públicos (MGI). Um dos motivos para a contratação dessa especialidade foi a necessidade de aprimorar a experiência dos usuários nas soluções digitais do MGI. Dentro desse ambiente, você, como especialista UX do MGI, percebeu que o layout de um portal, quando este era acessado por um dispositivo com uma tela menor, estava cortando elementos da página, ou seja, o portal não continha propriedades de um design responsivo e adaptativo.
Com base nos conceitos do design responsivo e adaptativo, qual(is) medida(s) pode(m) ser adotada(s)?
AAplicar os fundamentos de HTML e CSS e utilizar a técnica de Media Queries.
BAplicar os fundamentos de HTML, diminuindo o tamanho dos elementos.
CUtilizar “caixas de conteúdo” design atrativo.
DAplicar os fundamentos de HTML e utilizar iframe.
EAplicar o conceito de design de serviços.
Revelar gabarito e comentário▾
GabaritoA — Aplicar os fundamentos de HTML e CSS e utilizar a técnica de Media Queries.
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Design Responsivo e Adaptativo: Media Queries
Gabarito: letra A. O problema descrito — elementos cortados em telas menores — é resolvido aplicando os fundamentos de HTML e CSS com a técnica de Media Queries, que permite adaptar o layout conforme as características do dispositivo (como largura da tela). As demais alternativas não tratam da adaptação responsiva: reduzir elementos, usar iframes ou "caixas de conteúdo" não resolvem o corte, e design de serviços é um conceito de outra área.
O design responsivo é uma abordagem de desenvolvimento web que faz o layout se adaptar automaticamente ao tamanho da tela do dispositivo, seja um desktop, tablet ou smartphone. O objetivo é garantir que o conteúdo seja legível e utilizável sem necessidade de zoom ou rolagem horizontal. A principal técnica para implementar isso é o uso de Media Queries no CSS, que permitem aplicar estilos diferentes com base em condições como largura da viewport, resolução, orientação, entre outras.
Por exemplo, um portal pode ter um layout de três colunas em uma tela larga, mas quando acessado por um celular, a Media Query detecta a largura menor e reorganiza o conteúdo em uma única coluna, empilhando os elementos verticalmente. Isso evita que elementos sejam cortados ou que o usuário precise rolar horizontalmente, que é exatamente o problema descrito no enunciado.
É importante distinguir design responsivo de design adaptativo. No responsivo, o layout flui e se ajusta continuamente (usando grades fluidas, imagens flexíveis e Media Queries). No adaptativo, são criados layouts fixos para tamanhos de tela específicos (ex.: 320px, 768px, 1024px) e o servidor ou o JavaScript detecta o dispositivo e entrega o layout correspondente. Ambos buscam a mesma experiência, mas com abordagens diferentes. A questão menciona "design responsivo e adaptativo", e a alternativa A é a que melhor se alinha à solução técnica padrão para ambos.
A pegadinha da banca está em oferecer alternativas que parecem plausíveis, mas que não atacam a causa raiz do problema. Reduzir o tamanho dos elementos (B) pode até evitar o corte, mas degrada a legibilidade e não é uma solução responsiva adequada. Usar iframes (D) é uma técnica para embutir conteúdo externo, não para adaptar layout. "Caixas de conteúdo" (C) é um termo vago e não se relaciona diretamente com responsividade. E design de serviços (E) é uma metodologia de UX focada em mapear e melhorar a jornada do usuário, não em resolver problemas de layout.
Guarde o critério decisivo: o problema é de layout responsivo, e a solução técnica é CSS com Media Queries. É exatamente nesse ponto que as alternativas se dividem.
Design responsivo: Objetivo (Layout se adapta à tela, Evita corte de elementos); Técnicas (HTML (estrutura), CSS (estilo), Media Queries (adaptação)); Abordagens (Responsivo (fluxo contínuo), Adaptativo (layouts fixos por tela))
Alternativa A — ✅ Correta ⟵ GABARITO
A alternativa correta porque Media Queries são o mecanismo padrão do CSS para aplicar estilos condicionais baseados nas características do dispositivo, como largura da tela. Com elas, é possível definir regras que reorganizam o layout para telas menores, evitando que elementos sejam cortados. Os fundamentos de HTML e CSS são a base para qualquer página web, e as Media Queries são a técnica específica para responsividade.
Alternativa B — ❌ Incorreta
Reduzir o tamanho dos elementos pode até evitar o corte, mas não é uma solução responsiva adequada. Diminuir fontes, imagens e espaçamentos de forma genérica prejudica a legibilidade e a usabilidade, especialmente em telas muito pequenas. A abordagem correta é reorganizar o layout, não apenas encolher tudo. Além disso, a alternativa não menciona CSS ou Media Queries, que são essenciais para a adaptação.
Alternativa C — ❌ Incorreta
"Caixas de conteúdo" é um termo vago e não se relaciona diretamente com design responsivo. Pode se referir a elementos como divs ou cards, mas não há uma técnica específica chamada assim que resolva o problema de elementos cortados. A alternativa não oferece uma solução técnica concreta para adaptar o layout a diferentes tamanhos de tela.
Alternativa D — ❌ Incorreta
O elemento HTML iframe é usado para embutir outra página ou conteúdo dentro da página atual. Ele não tem relação com responsividade ou adaptação de layout. Usar iframes não resolve o problema de elementos cortados em telas menores; pelo contrário, pode até piorar, pois o conteúdo embutido pode ter seu próprio scroll.
Alternativa E — ❌ Incorreta
Design de serviços é uma abordagem de UX que foca em mapear, projetar e melhorar a experiência do usuário em um serviço como um todo, considerando todos os pontos de contato. Embora seja relevante para UX, não é uma técnica para resolver problemas de layout responsivo. A alternativa foge completamente do escopo técnico da questão.
NÃO CAIA NESSA!
A banca tenta confundir o candidato oferecendo alternativas que parecem relacionadas a UX, mas que não resolvem o problema técnico de layout. A pegadinha está em achar que "diminuir elementos" (B) ou "usar iframe" (D) são soluções válidas, quando na verdade a resposta correta exige conhecimento específico de CSS e Media Queries. Fique atento: o problema é de responsividade, e a solução é técnica, não conceitual.
PEGA ESSA DICA!
Para questões de design responsivo, lembre-se sempre da tríade: HTML (estrutura), CSS (estilo) e Media Queries (adaptação). Se a alternativa não mencionar esses elementos, provavelmente está incorreta. Além disso, desconfie de soluções que "encolhem" conteúdo em vez de reorganizá-lo — a boa prática é adaptar o layout, não sacrificar a legibilidade.