Princípios de Design de Interface do App em Ação: O UI do Tracker de Torneios de Tim Corey
Nesta lição, Tim Corey nos guia pela fase de design da interface do usuário de construção de um aplicativo rastreador de torneios. Tim explica que este é o momento em que começamos a visualizar como o aplicativo será, mesmo antes de qualquer código ser escrito. Ele enfatiza que o design da interface do usuário nos ajuda a "consolidar ideias" e entender como o aplicativo deve funcionar no geral.
Neste artigo, vamos olhar mais de perto o processo de design de interface do usuário a partir do vídeo de Tim para que possamos entender seu processo de pensamento e a maneira como ele planeja a interface antes de começar a codificação. Seguindo a abordagem de Tim, podemos aprender a criar uma interface de aplicativo que seja clara, intuitiva e alinhada com as necessidades dos usuários e desenvolvedores.
Começando o Design da Interface do Usuário
Tim começa dizendo que o passo de design de interface do usuário é a parte divertida do desenvolvimento de aplicativos, porque nos permite ver uma versão preliminar de como o aplicativo será. Ele aponta que usa um quadro branco ou uma tabela para esboçar os formulários, mesmo que admita não ser um artista. Tim insiste que os desenhos não precisam ser perfeitos ou proporcionais — eles só precisam mostrar a ideia básica do que os formulários devem incluir e como devem funcionar.
O principal ponto de Tim aqui é que a fase de design da interface do usuário é sobre planejamento, não beleza. Ele enfatiza que o objetivo é identificar quais formulários/páginas são necessários e o que cada um deve conter. Essa abordagem é crucial para a clareza e ajuda desenvolvedores e designers a permanecerem alinhados durante o processo de design.
Onde Começar o Design
Tim aborda uma pergunta comum: "Por onde eu começo?" Ele explica que não importa onde você comece. Se você não tem certeza sobre uma parte do aplicativo, comece pela parte que você tem certeza. Uma vez que você completar as partes claras, você terá frequentemente uma ideia melhor das seções incertas.
Ele também observa que criar impulso ajuda—depois de projetar alguns formulários, você se sentirá confiante e pronto para continuar. Com essa mentalidade, Tim optou por começar com o Formulário de Visualização do Torneio.
Este método apoia bons fluxos de usuário, pois incentiva designers e desenvolvedores a focarem em como os usuários navegarão de uma tela para outra.
Por que não projetar no Visual Studio primeiro?
Tim explica que você não deve começar a projetar no Windows Form Builder dentro do Visual Studio. Ele alerta que fazer isso causa dois problemas principais:
-
Você perde tempo ajustando layout e controles em vez de planejar o design.
- Você encurta o processo de design, o que significa que pode perder melhores opções ou deixar problemas ocultos porque não deseja refazer seu trabalho.
Tim diz que projetar no papel permite apagar, tentar novas ideias e até mesmo testar conceitos "bobos" que podem se transformar em grandes soluções. Este é um princípio crucial no design de UI porque mantém o foco no que o aplicativo deve fazer, em vez de como ele parece no primeiro rascunho.
Formulário de Visualização do Torneio
Tim revela sua primeira interface de usuário inicial: o Formulário de Visualização do Torneio. Ele explica que este formulário exibirá todas as informações sobre um torneio específico.
Nome do Torneio
Tim coloca o nome do torneio no topo, mostrando qual torneio o usuário está visualizando (por exemplo, "Torneio de Basquete Feminino"). Este é um exemplo simples de hierarquia visual clara, onde a informação mais importante é colocada no topo.
Drop-Down da Rodada e Confrontos
Tim discute como seria difícil mostrar um diagrama de confronto de torneio em uma tela, especialmente se for grande. Em vez disso, ele propõe um menu suspenso para rodadas e uma caixa de lista para confrontos. A caixa de lista mostrará apenas os jogos da rodada selecionada.
Tim também adiciona um recurso importante: apenas jogos não jogados. Ele explica que em um torneio com muitos jogos, os usuários não querem rolar por confrontos concluídos para encontrar os restantes. Então ele adiciona uma caixa de seleção para mostrar apenas jogos não jogados, o que deixaria a lista mais curta à medida que os jogos são concluídos. Este é um ótimo exemplo de design para facilidade e eficiência, o que é crucial para a satisfação do usuário.
Selecionando Automaticamente a Rodada Atual
Tim também sugere que o menu suspenso da rodada deve automaticamente padronizar para a rodada atual. Ele admite que ainda não sabe como o implementará, mas anota isso como uma forte ideia de design. Esse recurso melhoraria a experiência do usuário (UX) reduzindo o tempo necessário para acessar informações relevantes.
Seção de Pontuação
No lado direito do formulário, Tim projeta uma seção onde os usuários podem inserir as pontuações para um confronto. Ele explica que o formulário mostrará as duas equipes competindo e suas pontuações. Se o jogo ainda não tiver sido jogado, as caixas de pontuação estarão vazias. Depois de inserir as pontuações, o usuário clicará em um botão "Pontuar" para completar o confronto.
Tim observa que o botão de pontuação pode precisar de um rótulo ou layout melhor para deixar claro como ele funciona. Este é um exemplo de como os elementos de design devem comunicar claramente o propósito aos usuários.
Criar Formulário de Torneio
Tim então passa para o Criar Formulário de Torneio, que ele diz provavelmente ser necessário após o visualizador do torneio.
Nome do Torneio e Taxa de Inscrição
O formulário começa com campos básicos: nome do torneio e taxa de inscrição. Tim explica que a taxa de inscrição é o custo que cada equipe paga para participar.
Adicionando Equipes
Em seguida, Tim projeta um menu suspenso de equipes e um botão Adicionar Equipe. Isso permite que os usuários selecionem equipes existentes e as adicionem ao torneio.
Ele também inclui um link Criar Nova Equipe, para quando a equipe ainda não existir. Tim explica que ele quer que a ação "Criar Nova Equipe" seja visualmente diferente para que os usuários entendam claramente que estão criando uma equipe, não apenas adicionando uma. Esta é uma prática importante de design para garantir que os usuários possam navegar facilmente e evitar confusão.
Prêmios
Tim aponta que os torneios também precisam de prêmios, então ele adiciona um botão Criar Prêmio. Ele explica que os prêmios são exclusivos por torneio, portanto, serão criados novamente a cada vez, em vez de reutilizados.
Botões Excluir Selecionados
Ao lado de cada caixa de lista (equipes e prêmios), Tim adiciona um botão Excluir Selecionados. Ele explica que os usuários precisam de uma maneira de remover equipes ou prêmios sem reiniciar o formulário. Isso apoia um melhor fluxo de usuário e torna o aplicativo mais fácil de usar.
Rodadas Faltando
Tim percebe um elemento faltando: rodadas. Ele explica que as rodadas são geradas em código com base no número de equipes, então o usuário não precisa inseri-las. Portanto, rodadas não são incluídas no formulário.
Criar Formulário de Equipe
Tim então projeta o Criar Formulário de Equipe, que inclui:
-
Nome da Equipe
-
Selecionar Membros da Equipe
- Adicionar Novo Membro
Tim destaca a importância da consistência entre os formulários. Ele diz que o layout do nome da equipe deve corresponder ao layout do nome do torneio para criar um design coeso.
Ele também explica que este formulário permite que os usuários adicionem membros de equipes existentes de uma lista, ou criem novos membros diretamente no formulário. Tim diz que prefere manter a criação de membros dentro do mesmo formulário para evitar camadas de navegação profundas (ou seja, abrir vários formulários).
Ele explica que adicionar várias camadas seria confuso e lento. Portanto, ele opta por manter o design compacto e amigável ao usuário. Isso apoia uma interface de aplicativo simples e intuitiva que reduz o tempo que os usuários precisam para concluir tarefas.
Criar Formulário de Prêmio
O Criar Formulário de Prêmio de Tim é simples. Inclui:
-
Número da Colocação
-
Nome da Colocação
-
Quantia do Prêmio
- Percentual do Prêmio
Tim observa que apenas um dos dois últimos campos deve ser usado de cada vez (ou valor ou percentual). Ele diz que o formulário precisará de uma lógica de validação mais tarde, mas para fins de design, o layout é direto. Este é um bom exemplo de como os princípios de design ajudam a criar uma interface funcional e aprimorada.
Formulário de Painel de Torneios
Finalmente, Tim discute o Formulário de Painel de Torneios, do qual ele admite não estar completamente satisfeito. Ele explica o desafio: os aplicativos Windows Forms geralmente têm um formulário principal que permanece aberto. Se o formulário principal fechar, o aplicativo termina.
Isso cria um problema para um rastreador de torneios porque os usuários podem querer vários torneios abertos ao mesmo tempo. Tim inicialmente considerou abrir automaticamente o formulário de criação de torneio se nenhum torneio existir. Mas percebeu que ao fechar o formulário de criação de torneio, o aplicativo terminaria.
Então, Tim projeta um formulário de painel central que fica aberto o tempo todo. Este painel permite aos usuários:
-
Ver torneos existentes
-
Carregar um torneio
- Criar um novo torneio
Tim explica que o painel permanecerá aberto mesmo se outros formulários forem fechados. Age como o ponto central de navegação do aplicativo. Embora ele admita que possa parecer "ridiculamente simples", ele diz que funciona, e mais tarde pode adicionar elementos de design ou animações para torná-lo mais atraente visualmente.
Conclusão
Tim encerra o vídeo enfatizando que o objetivo é simplesmente identificar os formulários necessários e decidir o que cada formulário deve exibir. Ele diz que uma vez que a UI é projetada, o próximo passo é o planejamento lógico, onde ele planejará como os elementos da UI se conectarão ao modelo de dados e ao back-end.
O processo de design de UI de Tim mostra que projetar uma interface de aplicativo é sobre planejamento, consistência e clareza — não sobre criar visuais perfeitos desde o início. Essa abordagem ajuda desenvolvedores e designers a permanecerem alinhados e garante que o aplicativo final seja fácil para os usuários navegarem e usarem.
Comece GRATUITAMENTE
Comece GRATUITAMENTE
Agende uma demonstração ao vivo gratuita
Não é necessário cartão de crédito nem criação de conta.
