UI Design: mergulhando nas interfaces digitais

Conhecendo - Apresentação

Boas-vindas ao primeiro curso da formação de UI da Alura. O meu nome é Mateus Villain, e eu vou ser o instrutor responsável e seu amigo ao longo desse conteúdo que você vai aprender, e que eu amo muito, muito mesmo: falar sobre User Interface.

Mas antes de tudo, o mais importante, hashtag acessibilidade “#acessibilidade”: eu sou uma pessoa de pele clara, meus cabelos, olhos, sobrancelha e barba são de cor castanho escuro, meu cabelo é bem curto, minha barba é grande e passa do pescoço, ela é bem bonita e sedosa, inclusive. Estou usando um óculos branco, estou usando uma jaqueta, na minha frente tem um microfone sendo segurado por um braço articulado, e atrás de mim tem uma estante com alguns livros e alguns bonecos de Harry Potter.

Enfim, nesse curso, vamos falar sobre os princípios, os conceitos iniciais que vamos compreender sobre User Interface Design. Já quero dizer logo de cara que o foco principal deste curso é voltado para pessoas que ainda não estão inseridas na área, que ainda não possuem muito conhecimento, e obviamente, querem embarcar nisso.

Tanto para trabalhar exatamente só com o designer de interface, ou até mesmo para evoluir isso mais para frente, virar um UX UI, um Product Designer, enfim, para pessoas que realmente estão embarcando. Mas, claro, se você já tem conhecimento, fica à vontade para assistir o curso, mi casa és tu casa.

Mas vamos falar agora sobre os conteúdos que você verá neste curso, a partir do próximo vídeo, que são os seguintes: na primeira aula, vamos entender o que é UI, seus conceitos e os diversos tipos de interfaces que existem. Na segunda aula, vamos conhecer o mercado de User Interface, entendendo os conhecimentos necessários e principais relações.

Na terceira aula, vamos iniciar um projeto dando os primeiros passos na construção de um produto digital, e na última aula, vamos evoluir os processos, nos preparando para a construção da interface. Espero que você curta imensamente este curso, e eu espero te ver muito no próximo vídeo. Até lá, valeu.

Conhecendo - O que é User Interface

Vamos começar pelo princípio: entendendo o que é uma User Interface. Bem simples de entender, em poucas linhas, basicamente, uma User Interface, ou UI, como vamos acabar nos referindo muito mais, até porque é muito mais prático falar UI do que User Interface.

É basicamente qualquer tipo de elemento que vamos interagir, e tem a finalidade de completarmos algum objetivo, independente dessa finalidade, a mínima que for, para tudo isso vamos querer completar algum tipo de objetivo. Bem fácil de entender: interação e completar um objetivo.

Só que quando estamos ingressando na área, é bem fácil confundir. User Interface ou UI com User Experience ou UX, até porque as palavras das frases são bem semelhantes. Os dois tem User, a nomenclatura diminuída, as duas letras, UX ou UI, são bem fáceis de confundir, mas na hora que entendemos a diferença, é bem fácil entender como é a distância deles e como eles trabalham juntos.

Mas basicamente, recapitulando, UI é a parte da interação. Para cada uma dessas interações, para cada objetivo que formos completar nessa interface, nessa User Interface que vamos interagir, vamos ter algum tipo de vivência, vamos ter sensações a partir daquilo, o que vai gerar uma experiência que pode ser positiva, uma experiência que pode ser negativa.

Então, estamos interagindo com algum determinado elemento, como por exemplo, um site. A partir da nossa interação naquele site, ela vai ser boa, ou ela vai ser ruim, como por exemplo, entrar na Alura, encontrar o curso que queria, estudar, conseguir sua primeira vaga, por exemplo, e para tudo isso, a plataforma e vários outros quesitos, te trouxe uma experiência extremamente positiva.

E falando de UI, existem quatro pontos que eu quero levantar, que eles são extremamente importantes para você entender como estamos olhando para essa interface, e se ela é realmente boa para a pessoa que vai utilizá-la do outro lado. E o primeiro ponto que eu quero levantar é o de que User Interface está ligado diretamente à experiência.

E isso vale muito com o que eu acabei de falar, já para refrescar a memória: interface é a interação. A partir da interação geramos uma experiência, então não existe UI sem UX, não temos como produzir qualquer tipo de interface sem pensar na experiência dessa pessoa, pegando no quesito de site, nos imagine criando uma conta, depois adicionando informações, depois adicionando diversos outros detalhes dentro desse site. Para cada detalhe, cada ação que fizermos dentro desse cenário, vamos tirar uma experiência.

Então, temos que pensar sempre que para cada interface que construirmos, se essa experiência que a pessoa vai ter, vai ser realmente boa, ou se estamos com algum problema no meio desse cenário e precisamos melhorar, precisamos otimizar.

O segundo ponto que eu quero levantar é: o produto precisa ser acessível para todas as pessoas. Eu vou seguir nesse exemplo do site. Vamos construir um site, e não temos noção de todas as pessoas que vão utilizar esse site, até porque elas estão do outro lado do computador, na casa delas, do outro lado do mundo, do outro lado da cidade, enfim, não temos noção de quem é essa pessoa.

Então, ela pode ser uma pessoa como eu, que usa óculos e consegue enxergar tudo tranquilamente com os óculos, ou ela pode ser uma pessoa que é cega, e não enxerga, e precisa realmente utilizar algum recurso, como um programa leitor de tela, para poder utilizar esse site.

Mas não temos a noção das pessoas que vão utilizar, porque o nosso site não pergunta para a pessoa o perfil dela quando ela vai entrar. Então, quando formos produzir um site, quando formos produzir uma interface, na verdade, temos que pensar sempre se aquilo está realmente acessível para todas as pessoas que vão entrar naquele produto, que vão acessar aquela interface.

Porque se ela está disponível, por exemplo, na internet, então qualquer pessoa pode utilizar. Se qualquer pessoa pode utilizar, então o mínimo que ela deve poder é utilizar com tranquilidade. Concorda comigo?

O terceiro ponto é: o produto precisa ser totalmente responsivo. O “responsivo” que falamos, é uma coisa que já quero te falar nessa primeira aula, porque é extremamente importante você aprender isso logo no começo, que é basicamente um produto, uma interface que ela se adapta a diversos dispositivos diferentes. Então, pensa comigo: você acessa o site da Alura no seu computador, monitor grande, tranquilo, às vezes você pode utilizar uma TV no lugar o do monitor, e ele está se apresentando muito bem.

Depois, você vai acessar o site da Alura no tablet. Então, esse site vai dar uma reduzida, ele precisa se adaptar à essas dimensões. Depois, você vai acessar no celular. Ele tem que se adaptar um pouco mais, porque a tela reduz cada vez mais.

Depois, digamos que você vai acessar por um smartwatch, é meio loucura, não dá para acessar por smartwatch, pelo menos não ainda, mas digamos que o site teria que se adaptar à todas as dimensões. Teria que se adaptar à todas as informações, para que independente do dispositivo que formos acessar, a pessoa que for utilizar consiga entender todas as informações corretamente.

Porque imagina o absurdo que seria acessarmos o site da Alura no celular e ter a mesma visualização de computador? Termos que ficar dando zoom o tempo todo, tanto para ler, quanto para clicar nos botões, entrar nas informações, seria terrível, por isso que na Alura, e em várias outras empresas, temos todo o cuidado com o design responsivo.

E por último, mas não menos importante: menos é mais. Já passamos da época de quando a web foi criada há muito tempo atrás, em que queríamos encher de informação, mostrar que somos bons, que colocamos isso, sabemos fazer aquilo. Não, estamos em 2022, ano da tecnologia, já passou a hora de enchermos o nosso site com diversas coisas que as pessoas não vão ler, não vão utilizar.

Então, foca na interface que tem aquilo que é essencial, que é aquilo que a pessoa precisa utilizar na hora, e se ela não precisa, se vemos que não está sendo relevante, que a pessoa não está utilizando, corta fora, para pra pensar. Um exemplo disso é a Google, ela é a empresa que faz testes o tempo todo, e ao longo dos anos eles já mataram diversos produtos, porque eles viram diversos produtos e ferramentas que viram que não estava funcionando, não estava dando certo, as pessoas não estavam utilizando.

Você coloca para testar, isso é totalmente viável, mas se não der certo, joga para fora e foca no essencial: menos é mais. É assim que trabalhamos e é assim que sempre vai ser. Então, no próximo vídeo vamos falar sobre as vertentes de User Interface, e eu vou deixar um questionamento legal, quero ver se você sabe responder: o que é uma interface? Já parou para pensar no que é uma interface? Matuta essa pergunta na sua cabeça, e eu vou respondê-la no próximo vídeo. Eu te vejo lá, valeu.

Conhecendo - As vertentes de UI

No vídeo anterior, eu terminei com uma pergunta que muita gente acaba pensando que é uma pegadinha, porque é uma pergunta que parece muito fácil e, na verdade, é bem fácil. Mas muita gente acaba não entendendo muito bem a resposta, acaba não sabendo muito bem o direcionamento, que é: você sabe o que é uma interface?

Não sei se você pensou na resposta, mas é o seguinte, eu gosto de fazer o paralelo de interface com uma ponte. Lembra que eu falei que User Interface se trata de interagirmos com um elemento com a finalidade de completarmos algum tipo de objetivo, então, pensa só no exemplo que eu vou te dar.

A interface é como uma ponte, e precisamos atravessar essa ponte para completar o nosso objetivo. Estamos no lado A, e o nosso objetivo é chegar no lado B, então esse é o paralelo que eu gosto de fazer, a interface é só um intermédio em que vamos utilizá-la com essa finalidade de completar o objetivo que queremos.

E então, entra aquela pergunta: Mas o que é uma interface, quais são os exemplos de interface que podemos ter dentro disso? A mais comum, e aquela que provavelmente vem na sua cabeça, é a interface digital, a interface de um site, a interface de um ap ou a interface de um software.

Nesse caso, por exemplo, eu tenho a interface da página inicial da Alura. Só que essa não é só uma User Interface da página da Alura, isso é o que chamamos de Graphic User Interface, ou GUI, pelo nome minificado, que é o que se trata das interfaces digitais que normalmente interagimos. Existe uma classificação exatamente para isso, com que o User Interface Designer está mais envolvido. E obviamente, como você já deve ter percebido, existem outras, como por exemplo, a VUI, ou Voice User Interface.

Nesse caso, temos o exemplo da Alexa, você também deve conhecer a Google Assistant, a Siri, a Cortana da Microsoft, do Windows, todas essas são robôs que produzem alguma voz. Essa voz é o que chamamos de Voice User Interface, é um tipo de interface que interagimos. Não podemos ver, não podemos tocar, mas podemos interagir, mandamos um comando para ela e ela nos responde com algum tipo de resposta, às vezes programada, ou às vezes com alguma coisa que já “setamos” pelo aplicativo, bem famosas.

Outro tipo de interface que podemos citar, algo que não é tão comum, não é tão desenvolvido, mas já foi utilizado em algumas ocasiões, é o holograma. Nesse exemplo, eu estou colocando o show que foi realizado lá para 2008, 2009, o cantor é o Tupac, considerado o rapper mais famoso do mundo, o maior rapper do mundo, ele já faleceu há algum tempo.

Mas lá para 2008, 2010, eles fizeram um show, criaram um holograma do Tupac extremamente realista. Aquilo que na imagem é um cantor de verdade, que está fisicamente presente, e do lado direito é um holograma simulando o Tupac fazendo o show, e ficou extremamente sensacional, um dos hologramas mais realistas que você vai encontrar quando pesquisar por isso na internet.

E ela é semelhante ao GUI que citamos, que não podemos tocar, mas podemos ver, e ver com mais presença na nossa frente. O outro tipo de interface bem famosa é o HUD, ou Heads Up Display. Ela nasceu já faz algum tempo, e nasceu a princípio para ser algo mais voltado para aeronaves, jatos militares, em que, como você pode ver no slide, na imagem, existem algumas informações que aparecem na frente da tela. Informações que ficam se alterando o tempo todo, para que o piloto não precise desviar a atenção dele para outros lugares, ele fica sempre com a visão centrada no meio, e todas as informações que ele precisa estão ali, para ele não precisar desfocar.

Mas também vemos muito desse HUD em jogos, em que, por exemplo, temos a vida do inimigo, embaixo temos a vida, os itens que coletamos. Os jogos utilizam muito dessas ferramentas.

E outro tipo de interface, que é aquela que as pessoas menos pensam que pode ser uma interface, que é a interface física. E eu gosto sempre de citar o martelo. O meu objetivo é pregar algum prego em uma madeira. A melhor interface que eu posso ter nesse caso é o martelo, vou pegar o martelo, vou bater no prego, e prego na madeira em questão. Ela vai me ajudar a completar o meu objetivo e eu vou ter uma experiência a partir disso. Com cada um desse tipo de interface existem todas essas questões de interação, e um objetivo que vamos realizar.

E obviamente, existem algumas outras vertentes de User Interface, mas elas não são tão famosas, não precisamos ficar falando aqui, ou esse vídeo vai tomar muito tempo. Mas essas são as principais, as mais interessantes para você entender que User Interface é mais do que só o digital que vemos, uma User Interface pode ser até mesmo uma voz que usamos para interagir, ou elementos físicos do nosso dia a dia.

Eu vou te ver na próxima aula, em que vamos levantar diversas questões a respeito do mercado e de User Interface, uma aula extremamente importante, e eu te espero lá, te vejo na próxima, valeu.

Sobre o curso UI Design: mergulhando nas interfaces digitais

O curso UI Design: mergulhando nas interfaces digitais possui 96 minutos de vídeos, em um total de 25 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo
• Sobre a área
• Iniciando um projeto
• Estruturas iniciais