Design UI/UX

A UX decide como um produto funciona; a UI decide como essa decisão se parece. Nenhuma das duas basta sozinha — uma traz clareza, a outra confiança.

Estudo de caso

Reunindo 13 áreas em uma única tela

Aplicamos no nosso próprio produto o que pregamos. O dmu ONE reúne 13 áreas de negócio – finanças, vendas, CRM, projetos, operações, estoque, suprimentos, recursos humanos, marketing, relatórios, arquivo e configurações – e 67 funções em um único fluxo mobile. A captura de tela real abaixo mostra como essa simplificação se traduz na interface.

Tela inicial do aplicativo dmu ONE em um smartphone Android
  • Navegação13 áreas, não amontoadas em um único menu inferior — organizadas em uma hierarquia que prioriza o que é mais usado.
  • Hierarquia da informaçãoAs operações do dia a dia ficam no topo; relatórios e configurações ficam uma camada atrás.
  • ContrasteA cor de destaque aparece apenas onde uma ação é necessária; o restante da interface permanece discreto.

01

Duas disciplinas diferentes, uma só experiência.

O design de UX (experiência do usuário) determina para quem um produto existe, qual problema ele resolve e por quais etapas essa solução é alcançada. Pesquisa, arquitetura da informação, fluxos de usuário e testes de usabilidade são as ferramentas dessa disciplina. Já o design de UI (interface do usuário) é onde essas decisões se tornam visíveis e tangíveis: cor, tipografia, estados de botões, microinterações.

Separar as duas é útil para fins didáticos, mas na prática elas são inseparáveis. Uma interface que parece impecável, mas na qual o usuário não encontra o que procura, é um sucesso de UI e um fracasso de UX; um design com o fluxo certo, mas que não transmite confiança, é o oposto. Um bom produto exige que as duas estejam certas ao mesmo tempo.

02

Primeiro a estrutura, depois a tela.

O processo de UX não começa com uma tela, e sim com perguntas: o que o usuário está tentando fazer aqui, de qual informação ele precisa primeiro, qual etapa cria atrito desnecessário? As respostas a essas perguntas constroem a arquitetura da informação — o esqueleto que determina qual conteúdo fica onde, e em qual hierarquia.

Depois que a arquitetura da informação está clara, entram em cena os fluxos de usuário e os wireframes de baixa fidelidade. Nessa etapa ainda não há cor nem tipografia — a única pergunta é se o fluxo faz sentido. Os testes são baratos nesse ponto — mover uma caixa custa muito menos do que recodificar do zero uma tela já desenvolvida.

03

A consistência vem de um sistema, não de telas isoladas.

O design de UI não consiste em vestir um wireframe com uma linguagem visual — é uma disciplina de engenharia por si só. Um botão não é projetado apenas uma vez — ele é projetado junto com seus estados normal, hover, pressionado, desabilitado e de carregamento. Quando qualquer um desses estados falta, o usuário perde a capacidade de "conversar" com a interface.

Por isso, um trabalho de UI maduro não produz telas isoladas, mas uma biblioteca de componentes: cartões reutilizáveis, campos de formulário, selos, regras de espaçamento. O suporte a temas claro/escuro nas próprias interfaces da DMU também é resultado dessa abordagem sistemática — um único conjunto de componentes que permanece consistente sob duas condições de luz diferentes.

04

Acessibilidade não é uma camada adicionada depois.

Contraste de cor suficiente, tamanho de texto legível, áreas de toque confortáveis e rotulagem compatível com leitores de tela — tudo isso é o próprio design, não uma camada adicionada depois como uma "atualização de acessibilidade". Para um usuário com baixa visão, o contraste insuficiente é uma barreira tão real quanto uma área de toque minúscula é para um usuário com capacidade motora limitada.

Esses princípios também criam uma experiência melhor para todos: alto contraste continua legível sob luz solar, e áreas de toque generosas não incomodam um usuário em movimento. Acessibilidade significa projetar para todo o espectro de condições reais de uso, não para uma fatia estreita de usuários.

05

O processo é prova, não afirmação.

Unificar 13 áreas de negócio e 67 funções em um único aplicativo mobile não foi um exercício teórico de UX — foi um problema real que exigiu pesquisa, arquitetura da informação, prototipagem, testes de usabilidade e iteração repetida. O dmu ONE é o resultado desse processo, e a forma mais honesta de descrever a abordagem de UI/UX da DMU é mostrá-la diretamente.

Desenvolvimento de Aplicativos Mobile: aplicativos mobile sob medida que escalam de acordo com o número de módulos