User Interface Glossary: Termos de UI Explicados
Bem-vindo ao seu essencial User Interface Glossary! Compreender os principais UI design terms é crucial para qualquer pessoa que trabalhe ou esteja aprendendo sobre design digital. Este post visa desmistificar o UX/UI vocabulary comum, ajudando-o a navegar no mundo dos interface elements com facilidade. Forneceremos definições claras e exemplos, oferecendo valiosos vocabulary tips para aprimorar seu English for tech. Vamos mergulhar na linguagem fundamental do design de interface do usuário e impulsionar sua compreensão dos visual design concepts!
Índice
O que é User Interface Glossary?
Esta seção mergulha em nosso abrangente User Interface Glossary, detalhando termos essenciais vitais para criadores digitais. Dominar essas palavras específicas, parte de um UX/UI vocabulary mais amplo, melhorará significativamente sua compreensão e comunicação em projetos de UI design. Nosso objetivo é tornar o aprendizado desses interface elements simples, ajudando-o a evitar language learning errors comuns e a construir uma base sólida. Esta parte do User Interface Glossary foi projetada para clareza.
| Vocabulary | Part of Speech | Simple Definition | Example Sentence(s) |
|---|---|---|---|
| Affordance | Noun | Uma característica ou sinal visual de um objeto ou elemento de interface que sugere ao usuário como ele pode ser interagido. Boas affordances tornam uma interface intuitiva. | A button's raised appearance and shadow affords clicking, clearly communicating its function. |
| Breadcrumbs | Noun | Um esquema de navegação secundário que revela a localização do usuário em um site ou aplicativo. Eles traçam o caminho de volta ao ponto de partida. | The breadcrumbs at the top of the page showed: Home > Blog > User Interface Glossary. |
| Call to Action (CTA) | Noun | Uma instrução, tipicamente um botão ou link, projetada para levar os usuários a dar um passo específico e desejado. CTAs são cruciais para conversões. | The bright orange "Download Free Trial" button is a very effective Call to Action. |
| Dropdown Menu | Noun | Uma lista de opções que aparece quando um usuário clica ou passa o cursor sobre o título de um menu. Ajuda a economizar espaço na tela. | Please select your country from the dropdown menu to see relevant shipping options. |
| Fidelity | Noun | O nível de detalhe, realismo e funcionalidade incorporado em um protótipo ou design. Varia de baixo (esboços básicos) a alto (mockups interativos e estilizados). | For user testing, we created a high-fidelity prototype that closely mimics the final app's look and feel. |
| Grid System | Noun | Uma estrutura composta por uma série de linhas horizontais e verticais interligadas usadas para organizar o conteúdo de maneira consistente e organizada. | Using a grid system helped the designers maintain alignment and visual harmony across all pages of the website. |
| Heuristic Evaluation | Noun | Um método de inspeção de usabilidade onde especialistas revisam uma interface contra um conjunto de princípios de usabilidade estabelecidos (heurísticas). Ajuda a identificar potenciais problemas de usabilidade. Leia mais: Domain Name Glossary Termos Chave e Definições Essenciais sobre Heurísticas. | A heuristic evaluation conducted by UX specialists identified several areas for improving the website's navigation. |
| Icon | Noun | Uma pequena representação gráfica simbólica usada para denotar um objeto, ação ou ideia. Ícones melhoram a capacidade de escaneamento e a compreensão. | Click the shopping cart icon in the top right corner to view your selected items. |
| Modal (or Modal Window) | Noun | Uma caixa de diálogo ou janela pop-up que aparece sobre o conteúdo principal, desativando temporariamente a interação com o conteúdo de fundo até que o modal seja abordado. | A confirmation modal appeared, asking "Are you sure you want to delete this item?" before proceeding. |
| Placeholder Text | Noun | Texto temporário e instrucional exibido em um campo de entrada antes que o usuário insira qualquer valor. Guia os usuários sobre o formato ou tipo de entrada esperado. | The search bar had placeholder text saying "Search articles..." to guide the user. |
| Responsive Design | Noun | Uma abordagem de design web que faz com que as páginas web sejam renderizadas bem em uma variedade de dispositivos e tamanhos de janela ou tela, de desktops a telefones celulares. | Thanks to responsive design, the website layout automatically adjusts to provide an optimal viewing experience on tablets and smartphones. |
| Sitemap | Noun | Uma lista hierárquica ou diagrama que representa a estrutura e organização das páginas dentro de um site ou aplicativo. Ajuda na navegação e no SEO. | The sitemap was submitted to search engines to help them crawl the new website more efficiently. |
| Tooltip | Noun | Uma pequena caixa pop-up informativa que aparece quando um usuário passa o cursor sobre um elemento de interface, fornecendo uma breve explicação ou contexto adicional. | Hover your mouse over the question mark icon to see a helpful tooltip explaining the feature. |
| Wireframe | Noun | Um esboço esquelético de baixa fidelidade de uma página web ou tela de aplicativo. Foca na estrutura, posicionamento do conteúdo e funcionalidade, não no design visual. | Before adding any colors or images, the UX designer created a detailed wireframe to map out the user journey. |
| Whitespace (or Negative Space) | Noun | O espaço vazio ou não marcado ao redor e entre elementos em um layout de design. É crucial para a legibilidade, equilíbrio e apelo visual. | Effective use of whitespace in the article made it much easier to read and less overwhelming. |
Leia mais: Web Hosting Glossary Termos Chave Explicados
Frases Comuns Usadas
Além dos termos individuais encontrados em qualquer bom User Interface Glossary, certas frases são comumente usadas em discussões de UI. Compreender essas expressões ajudará você a captar conversas e documentação de forma mais eficaz. Esta seção foca em UI design terms práticos em contexto, expandindo sua compreensão além das definições básicas do User Interface Glossary.
| Phrase | Usage Explanation | Example Sentence(s) |
|---|---|---|
| "Above the fold" | Este termo, originário de jornais, refere-se à porção de uma página web que é visível para um usuário sem a necessidade de rolar para baixo. É um espaço privilegiado para informações críticas ou CTAs. | To maximize visibility, the main headline and the primary Call to Action were placed above the fold. |
| "User flow" | Descreve o caminho completo que um usuário percorre em um site ou aplicativo para atingir um objetivo específico, desde o ponto de entrada até a ação final. Mapear user flows ajuda a identificar pontos problemáticos. | We need to carefully analyze and optimize the user flow for the new account registration process to reduce drop-offs. |
| "Pixel perfect" | Um adjetivo que descreve um design digital ou interface implementada que corresponde perfeitamente às especificações do designer, até o posicionamento exato e a aparência de cada pixel. | The client was very pleased that the front-end developer implemented the design to be pixel perfect, matching the mockups exactly. |
| "Dark patterns" | Estes são designs de interface de usuário enganosos criados para induzir os usuários a fazerem coisas que talvez não pretendam, como assinar pagamentos recorrentes ou compartilhar mais dados do que desejam. Designers éticos os evitam. Mais informações em Deceptive Design. | The website used dark patterns by pre-selecting expensive add-ons during checkout, hoping users wouldn't notice. |
| "Mobile-first approach" | Uma estratégia de design onde o processo começa com o design para a menor tela (mobile) e depois melhora progressivamente o design para telas maiores (tablets, desktops). | Given that most of our users access the site via their phones, we adopted a mobile-first approach to ensure a seamless experience. |
| "Visual hierarchy" | O princípio de organizar elementos de forma a implicar importância. Guia o olho do usuário pelo conteúdo em uma ordem específica, usando tamanho, cor, contraste e posicionamento. | A strong visual hierarchy makes it easy for users to quickly scan the page and find the information they need. |
| "A/B testing" (or Split Testing) | Um método de comparar duas versões (A e B) de uma página web, tela de aplicativo ou elemento entre si para determinar qual tem melhor desempenho em alcançar um objetivo específico (por exemplo, maior taxa de conversão). | Through A/B testing, we discovered that the green "Sign Up" button converted 20% more users than the blue one. |
Leia mais: Web Servers Glossary Termos Chave e Definições Essenciais
Conclusão
Dominar este User Interface Glossary e as frases comuns discutidas é um passo significativo em sua jornada profissional. Estes UI design terms são fundamentais para uma comunicação clara e para a criação de produtos digitais eficazes e amigáveis ao usuário. A importância de um UX/UI vocabulary robusto, conforme detalhado neste User Interface Glossary, não pode ser subestimada. Continue praticando e explorando; o esforço consistente construirá sua confiança e expertise na área. Não se desencoraje com pronunciation problems iniciais; a prática leva à perfeição ao aprender English for tech. Esperamos que este User Interface Glossary sirva como um recurso valioso. Boa sorte!