⚡ Tecnicas Intermediarias

Container visual com valor principal, rotulo, icone, tendencia e contexto temporal.

Cards bem projetados permitem compreensao em menos de 3 segundos.

Header, body, footer, trend indicator, sparkline, comparison badge.

Metricas criticas ligadas a metas especificas para decisao estrategica da empresa.

Saber distinguir KPIs de metricas secundarias e crucial para dashboards efetivos.

Leading vs lagging indicators, SMART goals, drill-down, benchmarks.

Exibir valores de forma legivel: abreviacao (1.2M), moeda (R$), percentuais, decimais.

Numeros mal formatados causam confusao, erros de interpretacao e decisoes erradas.

Intl.NumberFormat, toLocaleString, K/M/B notation, precision vs accuracy.

Setas, percentuais de variacao e sparklines mostrando direcao e intensidade da mudanca.

Um numero sozinho nao tem significado sem contexto comparativo temporal.

Delta %, period-over-period, YoY/MoM/WoW, trend direction, volatility.

Layouts padronizados para exibir multiplos cards de metricas em grids responsivos.

Grid bem organizado permite comparacao rapida entre metricas relacionadas.

Grid 2x2, 4-col layout, responsive breakpoints, card sizing, visual rhythm.

Barras de progresso, gauges, bullet charts para visualizar valor atual vs meta definida.

Comparacao e fundamental para tomada de decisao e acompanhamento de objetivos.

Progress bar, radial gauge, bullet chart, threshold indicators, goal tracking.

Guia de selecao: linha para tendencias, barra para comparacao, pizza para proporcoes.

O grafico errado pode distorcer dados e levar a interpretacoes incorretas.

Time series = line, categories = bar, parts of whole = pie/donut, correlation = scatter.

Biblioteca JavaScript leve e responsiva para criar graficos animados e interativos.

Mais popular do mercado, otima documentacao, facil integracao com React/Vue.

Canvas rendering, datasets, options object, plugins, responsive resize.

Visualizacao de dados continuos ao longo do tempo, ideal para monitoramento.

Mais usado em dashboards para mostrar evolucao de metricas, vendas, trafego.

Tension (curvas), fill (area), multi-axis, annotations, zoom/pan.

Comparar valores entre categorias de forma visual, direta e intuitiva.

Ideal para rankings, comparacoes de desempenho e distribuicoes de dados.

Horizontal vs vertical, stacked, grouped, negative values, data labels.

Mostrar partes de um todo em formato circular, limitado a 5-7 categorias para efetividade.

Muito usado mas frequentemente mal aplicado - saber quando usar e quando evitar.

Cutout (donut), legend positioning, "Other" category, semi-circle, nested.

Adaptar graficos ao design system: cores, fontes, dark mode, estilos consistentes.

Graficos devem parecer parte integrada do dashboard, nao elementos externos.

Color palettes, grid styling, tooltip customization, font family, border radius.

Toolbar, header com sorting, body com rows, footer com paginacao e acoes em massa.

Tabelas sao o componente mais complexo e usado em dashboards corporativos.

Thead, tbody, tfoot, column definitions, row actions, bulk actions toolbar.

Reorganizar dados clicando no header: crescente, decrescente e multi-column sort.

Usuarios esperam poder ordenar por qualquer coluna para encontrar dados rapidamente.

Sort indicators, tri-state (asc/desc/none), stable sort, server-side vs client-side.

Dividir grandes conjuntos em paginas menores com controles de navegacao e page size.

Essencial para performance e usabilidade com milhares de registros.

Page size selector, page numbers, prev/next, "Showing X-Y of Z", cursor pagination.

Renderizar apenas linhas visiveis na viewport, reciclando DOM para scroll infinito.

Unica forma de ter performance aceitavel com dezenas de milhares de registros.

Window virtualization, row height estimation, overscan, TanStack Virtual.

Checkboxes para selecionar multiplas linhas e executar delete, export, update em massa.

Produtividade: usuarios nao querem repetir acoes uma linha por vez.

Select all, indeterminate state, selection count, bulk actions bar, keyboard selection.

Esconder colunas menos importantes em telas menores ou transformar em cards.

Tabelas sao o maior desafio de responsividade em dashboards.

Column priority, horizontal scroll, card view, column toggler, sticky columns.

Global (Cmd+K) pesquisa todo o sistema; contextual filtra apenas a visualizacao atual.

Dois padroes complementares que aceleram navegacao e descoberta de dados.

Command palette, spotlight search, debounce, instant results, search scope.

Combinar multiplos criterios de filtragem com logica booleana para queries complexas.

Usuarios avancados precisam de filtros poderosos para analises especificas.

Filter groups, AND/OR operators, comparison operators (=, >, contains), filter builder.

Componente para selecionar datas e periodos com presets como "Ultimos 7 dias".

Filtro de data e o mais usado em dashboards - deve ser intuitivo e rapido.

Single date, date range, presets (Today, Last 7d, MTD, YTD), relative dates, timezone.

Filtros com contadores que atualizam dinamicamente conforme outros filtros sao aplicados.

Padrao de e-commerce (Amazon, Mercado Livre) que usuarios ja conhecem bem.

Facet counts, hierarchical facets, multi-select, refinement, Elasticsearch/Algolia.

Indicadores visuais de filtros ativos como chips removiveis com um clique no X.

Usuario precisa ver rapidamente quais filtros estao aplicados e poder remover.

Active filters bar, chip/pill component, clear all, filter summary, truncation.

Sincronizar estado dos filtros com query params da URL para compartilhamento.

Usuarios podem salvar bookmarks e compartilhar visualizacoes especificas.

URLSearchParams, history.replaceState, nuqs, deep linking, back/forward support.

Skeletons imitam estrutura do conteudo; spinners indicam atividade sem forma definida.

Usuarios percebem interfaces como mais rapidas quando ha feedback visual adequado.

Skeleton screens, shimmer effect, spinner size/position, perceived performance.

Tela mostrada quando nao ha dados, guiando usuario para proxima acao ou explicando contexto.

Empty state mal feito faz usuario pensar que algo quebrou ou que nao ha valor.

Illustration, headline, description, primary CTA, secondary actions.

Comunicar erros de forma clara com causa provavel, impacto e caminho de solucao.

Erros sao inevitaveis - a qualidade do handling define a experiencia do usuario.

Error boundary, retry button, contact support, error codes, graceful degradation.

Confirmar que acao foi completada com sucesso: toasts, animacoes de check, mudanca visual.

Sem confirmacao, usuario fica na duvida se clique funcionou ou precisa repetir.

Toast notification, success animation, optimistic UI, undo action, confirmation.

Barras de progresso e steppers para operacoes que levam tempo: upload, processamento, wizard.

Usuario precisa saber quanto falta e que o sistema esta trabalhando.

Determinate vs indeterminate, percentage, steps, estimated time, cancel option.

Hover effects, ripples, transicoes suaves que tornam interface "viva" e responsiva.

Micro-interacoes sao a diferenca entre interface "ok" e interface "excelente".

Hover states, press feedback, transition timing, easing functions, subtle animations.

Inputs com contraste adequado em dark mode: background, border, focus ring, placeholder.

Inputs mal estilizados em dark mode sao ilegíveis ou tem contraste ruim.

Focus states, error states, disabled states, autofill styling, label positioning.

Custom dropdowns com busca, multi-select, grupos e virtualizacao para listas longas.

Select nativo e limitado; dashboards precisam de selecoes complexas e estilizaveis.

Combobox, multi-select, typeahead, option groups, Radix/Headless UI.

Verificar dados enquanto usuario digita (onChange) ou ao sair do campo (onBlur).

Feedback imediato reduz erros e frustacao ao submeter formulario.

React Hook Form, Zod, inline errors, async validation, debounced validation.

Editar dados diretamente na visualizacao (tabela, card) sem abrir formulario separado.

Fluxo mais rapido para edicoes simples, menos cliques, menos context switching.

Click-to-edit, hover pencil icon, save on blur, escape to cancel, optimistic update.

Toggles para on/off imediato; checkboxes para multipla selecao; radios para escolha unica.

Escolher o controle certo para cada caso melhora usabilidade significativamente.

Switch vs checkbox semantics, indeterminate state, radio groups, accessibility.

Agrupamento logico de campos em secoes, com hierarquia visual e espacamento adequado.

Formularios mal organizados sao confusos e levam a erros de preenchimento.

Field groups, section headers, two-column layout, field dependencies, conditional fields.

Notificacoes temporarias (3-5s) que aparecem no canto e nao bloqueiam a interface.

Padrao moderno para feedback de acoes: sucesso, erro, info, sem interromper fluxo.

Auto-dismiss, stacking, position, actions, progress bar, Sonner/react-hot-toast.

Alertas persistentes no topo da pagina para comunicacoes que nao podem ser ignoradas.

Avisos de manutencao, trial expirando, problemas de sistema precisam de visibilidade.

Dismissible vs persistent, severity levels, action links, icon usage, page-level vs app-level.

Dialogo pedindo confirmacao antes de acoes irreversiveis: delete, cancel subscription.

Proteger usuario de erros acidentais e comunicar consequencias claramente.

Destructive action styling, confirm text input, cancel default, clear consequences.

Central com historico de notificacoes, badge de nao-lidas, filtros e acoes por item.

Usuarios precisam revisar notificacoes perdidas e gerenciar volume de alertas.

Unread count badge, mark all read, grouping, infinite scroll, notification preferences.

Mensagens informativas inline no conteudo: tips, warnings, info boxes, deprecation notices.

Comunicar informacao importante no contexto exato onde e relevante.

Alert variants (info/warning/error/success), callout boxes, tip components, icon + text.

Sistema de prioridade: inline < toast < banner < modal, escolhendo conforme urgencia.

Usar modal para tudo cansa; usar toast para tudo faz perder mensagens importantes.

Severity vs intrusiveness matrix, notification fatigue, frequency capping, user preferences.

Construir componentes complexos a partir de componentes menores e reutilizaveis.

Composicao e a base de arquiteturas de UI escalaveis e manteneis.

Atomic design, compound components, composition over inheritance, component API.

Parametros e conjuntos pre-definidos de estilos: primary, secondary, danger, size variants.

API bem desenhada torna componentes flexiveis mas consistentes.

Variant prop, size prop, CVA/class-variance-authority, prop spreading, defaults.

Props down para passar dados; callbacks/events up para comunicar acoes; context para global.

Entender fluxo de dados evita bugs e arquiteturas confusas.

Props drilling, lifting state up, Context API, event bubbling, state management.

"Buracos" em componentes para inserir conteudo customizado: headers, footers, icons.

Slots permitem componentes genericos que aceitam qualquer conteudo.

React children, named slots pattern, render props, slot components (Card.Header).

Patterns classicos para compartilhar logica entre componentes sem duplicar codigo.

Entender patterns historicos ajuda a ler codebases legadas e entender hooks.

Render prop function, higher-order components, custom hooks (modern alternative).

Sidebar+Main, Master-Detail, Split View - layouts classicos otimizados para dashboards.

Escolher o layout certo para cada tipo de conteudo melhora UX dramaticamente.

Shell layout, sidebar+content, master-detail, focus mode, responsive layout switching.