User Interface Design (UI Design)

Descubra o que é UI Design, conheça seus principais estilos e confira dicas para a criação de interfaces

Design de interface

Eae!

Td bele?

Não sei se você sabe, mas a área que eu mais gosto de atuar é na criação de interfaces. Na verdade eu comecei basicamente criando interfaces para web e só depois fui estudar outros assuntos.

A área de criação de interfaces também é muito promissora.  Existe uma boa demanda de empregos  para o Designer de interfaces, aqui no Brasil e no exterior. Tenho colegas que trabalham na europa, atuando na criação de interfaces.

Portanto neste artigo iremos falar sobre UI Design (Design de Interface do Usuário), beleza?

Siga-me os bons :P

Neste artigo você verá:

O que é UI Design?

UI Design, ou User Interface Design (Design de Interface do Usuário) se refere a interface, ou seja, o meio pelo qual uma pessoa interage com um dispositivo, software ou aplicativo. Essa interação pode ser feita através de elementos que forneçam ações entre o dispositivo e o usuário, como por exemplo, botões, links, menus, etc. No nosso caso iremos focar  nas interfaces digitais, ou seja, nas interfaces gráficas de sites, aplicativos, entre outros.

É a parte ”visível” do projeto ou sistema em qual o usuário interage.

Importante salientar que User Interface não se limita somente a parte visual do projeto. UI Design é sobretudo como será realizada interação entre o usuário e o meio (que no nosso caso é a interface gráfica), indo muito além da estética/aparência do projeto.

Um bom projeto de UI antecipa as necessidades do usuário e garante que a interface seja fácil de usar e de acessar. Ele garante uma boa experiência de interação evitando ou minimizando dificuldades de utilização e frustrações ao utilizador.

Qual a diferença entre UX e UI?

User Experience trata-se de como o visitante se sente ao usa o sistema, enquanto UI é o que projeta o  sistema proporcionando que ele interaja e chegue ao objetivo.

UI Designer é o profissional que desenvolve a interface e o UX Designer é o que planeja como o usuário vai se sentir ao utilizar determinada interface, como serão  as experiências e emoções ao interagir com o sistema.

O UI Design seria como uma ponte que liga o que foi planejado pelo UX com o Usuário.

imagem representando a função de ponte do uidesign,ligando o ux design com o usuário

Então enquanto o UI Design trata da  interação entre a interface e o usuário, o  UX lida com  o lado emocional do usuário e como será a sua experiência ao utilizar o sistema, capiche? :)

Qual a diferença entre Web Designer  e UI Designer?

Um UI Designer normalmente projeta o layout e os elementos interativos prevendo os seus possíveis estados (on/off , por exemplo)  e como eles funcionam juntos. Utilizando de conhecimentos e estudos sobre a interação humano-interface ele pode criar o layout do projeto. Sua  atuação pode ser um pouco híbrida.

Já o Web Designer  também projeta o layout e os elementos da interface, mas normalmente não vai tão a fundo na questão da interação humano e interface.O foco está mais na criação do layout, na parte visual e não tanto na interação. Em contra-partida o Web Designer tende a ir um pouquinho além incluindo o CSS, HTML, JavaScript, etc.

A maioria  dos Web Designers quando estão elaborando um projeto estão lidando e tratando também com questões de UI, UI e IA (arquitetura da informação), mas não chegam a se aprofundar necessariamente nessas questões.

Web Designer e UI Designer tem muitos pontos em comuns e é  um pouco complexo diferenciá-los de forma definitiva. Em muitos casos isso se trata mais de uma terminologia de mercado do que qualquer outra coisa.

Principais estilos de UI?

Exitem alguns estilos principais quando se trata de Design de interfaces. Você muito – mas muito mesmo – provavelmente já viu alguns deles por aí e também já utilizou alguns deles em seus projetos mesmo sem saber.  Veja a seguir os principais estilos de Design para interfaces.

Skeumorfismo

Trata-se de um estilo que faz referência aos objetos reais no meio digital/gráfico.

Utiliza-se muito de artifícios como texturas, sombras, gradientes, proporções, entre outros; para simular os objetos do nosso cotidiano.

Esse estilo foi disseminado pela  empresa Apple na década de 1980 ao criar para os seus “macintosh” interfaces gráficas em que o usuário pudesse interagir e executar comandos no computador sem a necessidade de digitar códigos. E para facilitar o entendimento e a assimilação, adotou-se este estilo que tenta reproduzir nas interfaces digitais coisas com as quias já estamos acostumados.

imagem da interface mac dos anos 1980

O Skeumorfismo foi muito utilizado por muito tempo nas interfaces digitais (os antigos sites feitos em “Adobe Flash” que o digam!). Hoje em dia esse estilo perdeu o seu status e já não é mais usado como antigamente (veja o infográfico interativo abaixo).

skeuomorphic design infographic
Via: TemplateMonster.com

Os principais motivos para isso acontecer  foram o avanço das tecnologias como HTML5 e CSS3, que vem proporcionando novas possibilidades de interação e de criação, e a disseminação do uso da tecnologia. As pessoas se acostumaram a utilizar interfaces digitais, com isso já não se faz tão necessário simular objetos da vida real no digital.

Flat Design

Flat Design significa “Design Plano”. Trata-se de um estilo minimalista que utiliza cores  e formas chapadas, com poucos (ou quase sem) efeitos de volume, sombras e texturas.

Como já citei em outras oportunidades o Design Web e Design de Interfaces “deriva do design gráfico”. Por isso quase tudo que vemos hoje em dia na Web e/ou digitais  deriva do impresso e também da arte em geral.
Exemplo de design flat

Não é possível se afirmar com certeza absoluta de onde vem e quando começou o movimento do Flat Design. Mas é nítido que o Flat Design tem raízes oriundas em movimentos anteriores como o Estilo Suíço de Design, Escola Bauhaus e no Movimento Artístico Minimalista.

Ao mesmo tempo que o avanço das tecnologias e do uso cada vez mais comum das interfaces digitais diminuiu a utilização do Skeumorfismo, aumentou a aplicação do Flat Design.

exemplo da aplicação do flat design em website

Hoje em dia não é mais preciso simular a textura, sombra e volume em elemento para incidcar ao usuário que “aquilo é um botão”. Um simples retângulo com uma cor chapada (ou até mesmo só o contorno) mais um texto descritivo já o suficiente para o usuário entender. Além disso o Flat Design por ser mais simples tende a ser mais leve melhorando assim também a performance da interface. Outro fator preponderante para a popularização do Flat Design foi o conceito de Design Responsivo, pois o Flat Design é muito mais maleável e adaptável que o Skeumorfismo.

Metro Design

Trata-se de um estilo minimalista com influência nítida do estilo Suíço criado pela Microsoft.

Possui esse nome porque  foi inspirado na sinalização do metrô de Londres. É muito parecido com o Flat Design, porém um pouco mais minimalista.

imagem da interface do sistema operacional windows 8

Material Design

É o estilo criado pelo Google que utiliza as características do Flat Design, porém adiciona outros artifícios como efeitos 3D. Ele utiliza a física e um pouco de Skeumorfismo para comunicar e criar o visual.

imagem representando o material Design do Google

Nos dias atuais talvez seja o estilo mais utilizado em interfaces digitais. O trabalho feito pelo Google é de se tirar o chapéu. Você pode conferir como funciona este estilo acessando aqui: https://material.google.com/

E qual estilo é o melhor??

Aquele que atende adequadamente a proposta do projeto! Existem projetos que exigem o Skeumorfismo enquanto que outros tem o perfil mais para o Flat. O importante é não ser radical e acolher a um como se fosse um filho e desprezar o outro como se fosse um bastardo. Cada um pode ser utilizado em determinados momentos e diferentes projetos.

Veja esse site interativo que retrata esse tema de uma forma muito divertida: http://www.flatvsrealism.com/

Dicas de para criar interfaces

A seguir seguem algumas dicas que podem te ajudar na criação de interfaces. Como você já deve saber, Galucho, não existe uma receita de bolo para isso (se existisse eu estaria vendendo e ficando rico :P). Acima de tudo use o bom senso e fundamentos do design para criar suas interfaces.

Designs podem ser testados. Não tenha medo de mudar caso precise

Não tenha medo de testar as suas interfaces. [Saiba mais sobre testes clicando aqui para ler um artigo do Chief sobre isso]. Se os testes indicarem que o design precisa mudar, mude. É preciso estar sempre aberto à mudanças para alcançar melhores resultados

Projete para os usuários, não para o você mesmo

A interface você cria (ou deveria) para o mundo e não para você. É preciso deixar o lado paternalista para sua interface evoluir e realmente alcançar o objetivo traçado. Para ter sucesso é preciso projetar para os usuários. Não tome decisões baseadas somente no seu gosto pessoal  e sem fundamentos e argumentos que justifiquem tal escolha.

A estética é importante, mas não é a principal medida

Sim, a estética tem grande influência no resultado final. Ninguém gosta de algo feio e desagradável. Contudo, temos que entender que a principal medida de sucesso é o desempenho e não somente o visual.

O objetivo é fazer a interação do usuário tão eficiente e simples possível. Não adianta você ter uma interface linda, se ela não proporciona uma boa a experiência.

Seja simples

Talvez o segredo da sofisticação esteja na simplicidade.  Pense simples e crie coisas simples de usar.Você não precisa criar coisas escalafobéticas para atingir o objetivo com beleza estética e funcional. Não confunda simplicidade com pobreza criativa. Você pode ser muito criativo pensando e criando soluções simples.

Estruture a informação

Organizar a interface de forma deliberada, de forma consistente, de forma reconhecível para os usuário. Junte os elementos relacionados e separe os não relacionados, distingua de forma clara as coisas  que são diferentes e equipare os semelhantes.Estruture o conteúdo de forma clara, concisa e coesa.

O princípio visibilidade

Seu projeto deve manter todas as opções primárias, fundamentais de forma visível sem distrair o usuário com informações irrelevantes ou redundantes. Bons projetos não sobrecarregam os usuários com muitos caminhos ou confunde-os com informações desnecessárias.

Dê feedback ao usuário

Seu projeto deve manter os usuários informados sobre as ações da interface. Sejam interpretações, alterações de estado, condicionais, exceções ou erros.  Todas ações  que são relevantes e de interesse para o usuário devem ser explicitas de uma forma clara, com uma linguagem simples e inequívoca.

O princípio da tolerância

Seu projeto deve ser flexível e tolerante aos erros ou um possível mau uso, permitindo assim o usuário desfazer ou refazer ações. Tente reduzir ao máximo as dificuldades evitando os erros e caso eles ocorram sempre comunique ao usuário sobre o que está acontecendo.

Crie um padrão para interface

Seu projeto deve ter um padrão de componentes e comportamentos. Procure manter a consistência do layout com um propósito. Reutilize  os elementos e os comportamentos da interface. Com isso é possível reduzir a necessidade dos usuários de repensar e lembrar a passo na navegação.

A forma segue a função

Em um bom design de interfaces os elementos devem seguir a forma da sua função.

O usuário deve ser capaz de entender e/ou prever como um elemento na interface irá se comportar de forma intuitiva, clara, objetiva; apenas olhando para ele. Então se um elemento tem aparência de um botão, deve funcionar como um botão, por exemplo.

Mantenha a atenção do usuário

Hoje me dia temos muitas informações, muitas coisas acontecendo ao mesmo tempo,etc. Por isso se tornou muito mais difícil prender a atenção de alguém neste mundo tecnológico.

Portanto, evite elementos desnecessários que podem distrair o seu usuário. Toda interface é concebida com um objetivo e este é a real razão por ela existir. Não se esqueça disso!

Conclusão

Um bom design de interface de usuário facilita a vida do usuário e não o contrário, ela não chama atenção de forma desnecessária para si  e nem  se baseia somente na estética. Ele ajuda o usuário a efetuar a ação/tarefa planejada com um visual agradável e conciso.

Design de Interfaces é uma área muito promissora com bastante oportunidades onde você, Galucho criativo, pode aplicar o seu talento criando interfaces diferentes e ainda ganhar uma boa grana com o seu trabalho.

E você gosta da área de Design de Interfaces?

Deixe o seu comentário, bele? :D

Até mais!

Abraço!

Referências

http://arquiteturadeinformacao.com/

http://www.uxdesign.blog.br/

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.

  • Boa David, curti e compartilhei! Atualmente as pessoas estão com dificuldade em trabalhar na área porque as empresas não estão sabendo contratar pessoas para esse meio e para a função correta.

    Hoje eu trabalho em uma prefeitura municipal aqui do Espírito Santo e fui contratado para deixar os sistemas internos “bonitos” e de fácil uso. Quando cheguei aqui tinha apenas o developer trabalhando nos sistemas e o “dizain” dele não era dos mais lindos.

    Semana passada foi aprovado um projeto de um app que o prefeito elogiou e aprovou o ícone do produto / logotipo e a interface dele. Isso é gratificante!

    • Olá Thiago.

      Ainda tem muitos casos assim em que o devl acaba se virando e fazendo coisas do tipo. Mas eu tenho esperança que um dia isso acabe. Acredito que estamos evoluindo!

      Sucesso para ti!

      Obrigado pelo comentário!

      Forte abraço!

  • Wagner Rosati

    muito foda esse artigo, parabéns!

    • Olá Wagner!

      Valeu. Muito obrigado :D

      Abraço!