Olá, Nilceli. Como vai?
Que ótimo ver você trazendo essa reflexão novamente para o fórum! Essa análise detalhada sobre o ecossistema de design da Uber (conhecido no mercado como Base Design System) ajuda muito a fixar na mente como grandes empresas de tecnologia gerenciam suas interfaces em escala global.
Para avançar ainda mais na sua compreensão sobre o Atomic Design e complementar a excelente divisão que você já fez entre átomos, moléculas e organismos, vale a pena entender como as duas últimas etapas dessa metodologia de design system se encaixam na estrutura do aplicativo: os Templates (Modelos) e as Páginas.
Completando o Ecossistema do Atomic Design
A metodologia criada por Brad Frost segue um fluxo que vai do micro para o macro. No seu post anterior, mapeamos os componentes isolados. Agora, veja como o sistema da Uber organiza esses elementos no layout final:
- Templates (Modelos): No nível de template, focamos na estrutura e no esqueleto do layout da página (o chamado wireframe), deixando de lado os dados reais. Na Uber, o template principal consiste na tela dividida de forma persistente: o mapa dinâmico em segundo plano ocupando 100% do espaço vertical e um painel ou folha flutuante inferior (bottom sheet) cobrindo o terço inferior para interação.
- Páginas: É o estágio final onde o template ganha vida com conteúdo dinâmico, real e contextualizado. Quando você abre o aplicativo, o esqueleto do template é preenchido com a sua localização real no mapa, os carros dos motoristas se movendo ao seu redor em tempo real, seu nome no perfil e os preços exatos estimados para a sua corrida.
Por que a Uber separa Templates de Páginas?
Essa separação é de extrema importância para a experiência do usuário (UX) e para a engenharia de software da empresa por dois motivos principais:
- Reutilização de Layout: O mesmo template estrutural (Mapa + Painel Inferior) que serve para você pedir uma viagem na categoria "UberX" é reaproveitado quando você muda a aba para pedir uma entrega através do "Uber Flash" ou quando utiliza os recursos de mapa no "Uber Eats". A estrutura é idêntica; mudam apenas as moléculas e informações da página.
- Testes de Usabilidade (Testes A/B): Se a equipe de design quiser testar se as pessoas preferem a barra de pesquisa no topo ou no rodapé, eles não precisam redesenhar todas as telas do aplicativo. Eles alteram a estrutura no nível do Template e conseguem analisar o impacto desse comportamento de forma centralizada.
A sua habilidade de olhar para um aplicativo famoso e enxergar a arquitetura de componentes por trás dele é um diferencial enorme na jornada de aprendizado em UX Design. Continue compartilhando seus estudos de caso e insights com a comunidade!
Espero que possa ter lhe ajudado!
