Super Mario Bros. foi o jogo que mudou tudo. Foi o primeiro jogo que prefiro jogar em casa do que no fliperama. Era um “formato longo”, o que significa que você poderia correr pelo jogo se conhecesse todos os segredos ou, se quisesse se exibir, poderia mergulhar e tentar completar todos os níveis de todos os mundos, coletar todas as moedas e até mesmo acessar zonas de dobra escondidas e mundos negativos. Alguns fanáticos até descobriram como jogar o jogo de uma forma que reescreve o próprio software.
Fiquei tão entusiasmado com Super Mario Bros. e o Nintendo Entertainment System, que vendi toda a minha coleção Star Wars e GI Joe para juntar dinheiro suficiente para comprá-la. Fale sobre compromisso.
Mas que recompensa em termos de entretenimento e, inadvertidamente, princípios de aprendizagem que são essenciais para o planejamento, design e execução de UX moderno. Aqui está o que minhas 10.000 horas com Mario me ensinaram sobre design UX.
Comece com o fim em mente
Na primeira cena do jogo, Bowser está roubando a Princesa Peach. Ela pede a você e a Mario para salvá-la. Este é um apelo inicial para ser o herói e salvar o dia (o objetivo final). Agora, os Goombas estão se aproximando lentamente de você … o relógio começou!
Essa experiência se repete ao longo do jogo. Um padrão semelhante também existe em sites de comércio eletrônico. Em primeiro lugar, um determinado produto é apresentado e, em seguida, há um código de cupom associado a ele. Em seguida, apenas um determinado estoque está disponível e, finalmente, há um tempo limitado para comprar.
Você já viu os mapas de nível mundial no New Super Mario Bros. ? Cada mapa mostra o castelo e exibe o mapa sinuoso de diferentes níveis no estágio que são necessários para chegar lá. Com o fim em mente (e o esforço visível), um usuário pode antecipar o tempo e o esforço necessários e, ao mesmo tempo, ver o objetivo final. Vemos esse padrão de design UX ao preencher um formulário. As etapas ficam visíveis conforme você preenche cada caixa de conteúdo. Os usuários veem o esforço necessário e, em seguida, são divididos em estágios para concluir.
O padrão de completar níveis (e alcançar castelos) é repetido continuamente para dar ao usuário um padrão de interface muito claro a ser seguido para encontrar o sucesso . Da mesma forma, a navegação superior em um site e a navegação inferior em aplicativos iOS definem um padrão de repetição semelhante para permitir que os usuários saibam o que fazer e como ter sucesso.
Mostre, não diga
O mundo 1-1 pode ser o melhor nível na história dos videogames: nenhuma instrução é necessária. Um novo jogador precisa aprender a pressionar o pad e usar um único botão para avançar. Quando o jogador pula para tocar em uma caixa brilhante, um cogumelo salta e salta direto para Mario. Este cogumelo “power-up” faz você ficar mais forte. Essa sequência implanta a ideia de que vale a pena bater nessas caixas brilhantes e que há uma recompensa. Não há instruções de texto na tela. Em vez disso, o jogo permite que o jogador aprenda como avançar.
Podemos aplicar isso ao design da interface do usuário de várias maneiras. Notoriamente, o Google apresenta uma tela com um único campo de formulário. O usuário digita algo (qualquer coisa, na verdade) e pressiona enter. O Google compensa esse movimento com uma página de resultados, assim como andar para frente e acertar uma caixa compensa com um cogumelo. Um sistema de causa e efeito é configurado para ensinar ao usuário a interface e a utilidade do software.
Poder de Proximidade
Em Super Mario Bros., um jogador salta para atingir um bloco com um ponto de interrogação e, imediatamente, a pergunta é respondida ali mesmo. Seu olho não precisa procurar na tela para obter feedback – em vez disso, ele está próximo à sua interação com a caixa na tela.
Compare isso com o check-in para um voo em um quiosque da Southwest Airlines. A confirmação de uma solicitação está no canto superior esquerdo da tela, enquanto o botão de próxima ação está no canto direito da tela, se você encontrá-lo. Se os dois botões estivessem em um mapa mundial, o botão de confirmação estaria em Seattle, enquanto o próximo botão residiria na África do Sul. Totalmente confuso.
As restrições são o seu melhor amigo
O mundo de Mario tem algumas restrições elegantes para manter os jogadores no caminho certo. No original, você não pode retroceder dentro de um nível. Exatamente como na vida real: uma vez que uma decisão é tomada, só se pode trabalhar em frente a partir dela. Os níveis de Mario têm tubos, alguns dos quais permitem ao jogador ir para o subsolo, enquanto outros não. Esta é uma maneira simples de introduzir tentativa e erro na interface e fornecer uma recompensa ao processo de descoberta com experiências, moedas, níveis e power-ups adicionais para ajudar em sua jornada.
Existem paralelos entre essas restrições e a interface de usuário do Trunk Club. Primeiro, um novo cliente pode fazer escolhas sobre quem ele é e do que gosta. Depois de fazer isso, eles recebem uma recompensa rápida com recomendações de roupas e um assistente pessoal para ajudá-los a obter o caimento certo. O processo de descoberta cria engajamento dentro da interface, utilizando escolhas pessoais que levam ao destino final. Depois de bem vestido, a jornada do usuário pode continuar com estilo.
Surpresa e Delícia
O mundo de Mario é maravilhosamente diversificado. Quanto mais você avança, mais você descobre. Existem mundos com colinas e água, outros com desertos e areia movediça. Alguns níveis de Mario têm até casas assombradas onde fantasmas o perseguem, mas, criticamente, apenas quando você olha para eles. Uma ótima maneira de manter o usuário engajado é pegar um padrão de interação familiar e entregá-lo a ele de uma maneira divertida e inesperada que ainda produza o resultado desejado. Os fantasmas ainda perseguem você como outras criaturas, mas eles têm um toque especial que torna a interação mais interessante.
Falando em fantasmas, essa é minha parte favorita da interface do Snapchat. Em vez de uma animação de carregamento padrão, puxar para baixo na tela estende um fantasma amigável que se encaixa em uma barra de carregamento e começa a dançar enquanto o conteúdo carrega. Que experiência surpreendente, encantadora e envolvente, um pouco de diversão enquanto espera o próximo selfie carregar.
Priorize interações úteis e dê-lhes espaço para respirar
A divisão entre o céu e a paisagem em Super Mario Bros. é quase perfeita. Ele separa as informações do jogo na parte superior da tela que requer apenas olhares ocasionais do foco do jogo na metade inferior da tela (a menos que você descubra um pé de feijão, é claro!).
O espaço em branco é fundamental para criar uma ótima interação. Você não “tem condições” para colocar as coisas na tela se isso roubar o foco da interação principal.
Focar seu design na interação essencial (e só então projetar em informações secundárias e navegação) é uma ótima maneira de manter o foco nas necessidades do usuário. Muitas vezes, vemos sites e aplicativos que se concentram em elementos de navegação e, em seguida, escondido em algum lugar, há uma pequena parte do conteúdo real ou da interação para a qual o usuário estava realmente lá. Freqüentemente, há maneiras de obter a navegação e os fluxos de trabalho corretos na frente do usuário sem forçá-lo a encontrar algum outro lugar na tela ou oculto em um menu.
Em Super Mario Bros., a navegação e o fluxo de trabalho são incorporados ao mundo do jogador e não dentro de um menu de configurações fora da tela. Quando Mario está trabalhando em um nível, poderes e conteúdo vêm a ele quando ele precisa. Na experiência do usuário móvel, muitas vezes as opções de navegação corretas (com base no fluxo de trabalho real do usuário) podem aparecer na tela no contexto imediatamente antes – ou depois – de outro conteúdo e não dentro de um menu oculto.
Conclusão
No final de Super Mario Bros., chegamos ao castelo de Bowser, a princesa está à vista e alguns movimentos hábeis que você e Mario aprenderam ao longo do caminho são a chave para a morte de Bowser e salvar a princesa. Em outras palavras, você desenvolveu habilidades e valeu a pena.