{"id":2975,"date":"2019-07-30T00:00:00","date_gmt":"2019-07-30T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/07\/30\/design-de-interacao\/"},"modified":"2019-07-30T00:00:00","modified_gmt":"2019-07-30T00:00:00","slug":"design-de-interacao","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/design-de-interacao\/","title":{"rendered":"Aprenda o que \u00e9 Design de Intera\u00e7\u00e3o e quais as aplica\u00e7\u00f5es dessa \u00e1rea do design"},"content":{"rendered":"\n

O desejo de melhorar a experi\u00eancia do usu\u00e1rio para que ele tenha boas experi\u00eancias com determinado produto, de modo a passar mais tempo usando-o, \u00e9 uma preocupa\u00e7\u00e3o constante de quem cria produtos digitais<\/a>.<\/p>\n\n\n\n

Essa busca originou algumas novas \u00e1reas do conhecimento, como o Design de Intera\u00e7\u00e3o e o design de experi\u00eancia. Apesar de terem objetivos parecidos, eles tem diferen\u00e7as conceituais, embora alguns afirmem que s\u00e3o a mesma coisa.<\/p>\n\n\n\n

O Design de Intera\u00e7\u00e3o estuda aspectos como usabilidade, design gr\u00e1fico, funcionalidade e legibilidade<\/strong> para entregar interatividade, de forma a obter mais aten\u00e7\u00e3o das pessoas para os produtos, o que \u00e9 \u00f3timo em \u00e1reas como marketing<\/a> e vendas<\/a>.<\/p>\n\n\n\n

Neste artigo, entenda melhor o que \u00e9 o Design de Intera\u00e7\u00e3o e saiba quais s\u00e3o seus benef\u00edcios. Para isso, vamos passar pelos seguintes t\u00f3picos:  <\/p>\n\n\n\n[post-table-index]\n[rock-convert-pdf id=”42917″]\n\n\n\n

Interessante, n\u00e3o \u00e9? Continue acompanhando!<\/p>\n\n\n\n

O que \u00e9 Design de Intera\u00e7\u00e3o?<\/h2>\n\n\n\n

O Design de Intera\u00e7\u00e3o \u00e9 uma \u00e1rea da TI \u2014 e tamb\u00e9m do design \u2014, respons\u00e1vel por estudar, planejar e aplicar pontos de interatividade em sistemas digitais e f\u00edsicos, visando otimizar a rela\u00e7\u00e3o entre o usu\u00e1rio e o produto. Tamb\u00e9m \u00e9 conhecido como interaction design, ou IxD design.<\/p>\n\n\n\n

A ideia \u00e9 que as pessoas tenham contato com os produtos digitais de forma simples, intuitiva e objetiva<\/strong>. Para isso, o designer de intera\u00e7\u00e3o procura formas de prever como as pessoas v\u00e3o interagir com o sistema que ele est\u00e1 projetando.<\/p>\n\n\n\n

Apesar de ser uma \u00e1rea relativamente nova, quem deseja investir profissionalmente em Design de Intera\u00e7\u00e3o precisa conhecer campos variados de estudo, que v\u00e3o desde conhecimentos em design e programa\u00e7\u00e3o<\/a> a processamento de dados.<\/p>\n\n\n\n

Para isso, a interatividade, que \u00e9 a principal preocupa\u00e7\u00e3o do Design de Intera\u00e7\u00e3o, precisa ser feita de forma que fique claro para o usu\u00e1rio o que ele precisa fazer. E como isso envolve o estudo da experi\u00eancia das pessoas com o sistema, \u00e9 comum relacionar o Design de Intera\u00e7\u00e3o com o design de experi\u00eancia, ou user experience design<\/a>.<\/p>\n\n\n\n

A rela\u00e7\u00e3o entre Design de Intera\u00e7\u00e3o e design de experi\u00eancia<\/h3>\n\n\n\n

A rela\u00e7\u00e3o entre esses dois campos n\u00e3o \u00e9 exatamente clara, at\u00e9 porque s\u00e3o \u00e1reas novas e comumente est\u00e3o envolvidas. Os limites da diferen\u00e7a entre elas n\u00e3o s\u00e3o claramente definidos, por isso, alguns especialistas afirmam que s\u00e3o a mesma coisa, enquanto outros afirmam que o Design de Intera\u00e7\u00e3o \u00e9 uma subdivis\u00e3o do user experience design.<\/p>\n\n\n\n

Isso porque a intera\u00e7\u00e3o do usu\u00e1rio com o sistema \u00e9 responsabilidade tamb\u00e9m do UX design, mas este se preocupa igualmente com outras \u00e1reas, como o design de informa\u00e7\u00e3o, que \u00e9 respons\u00e1vel por projetar como as informa\u00e7\u00f5es geradas nos sistemas dever\u00e3o ser armazenadas e organizadas.    <\/p>\n\n\n\n

Pode-se ent\u00e3o afirmar que o UX design \u00e9 uma \u00e1rea mais ampla do estudo da entrega de sistema \u201cus\u00e1vel\u201d aos usu\u00e1rios<\/strong>.<\/p>\n\n\n\n

Em casos pr\u00e1ticos, falando em projetos de grande porte, o Design de Intera\u00e7\u00e3o fica respons\u00e1vel por criar wireframes<\/a>, mockups ou prot\u00f3tipos de sites, enquanto os outros profissionais<\/a> s\u00e3o respons\u00e1veis por fazer o planejamento geral e criar a estrutura. <\/p>\n\n\n\n

Os wireframes<\/a> s\u00e3o uma representa\u00e7\u00e3o gr\u00e1fica da disposi\u00e7\u00e3o dos itens no sistema. Como \u00e9 apenas um rascunho, n\u00e3o existe necessariamente o compromisso de eles se parecerem com a vers\u00e3o final do produto. <\/p>\n\n\n\n

Na verdade, s\u00e3o usados para definir os conceitos que precisam estar inseridos no design do projeto<\/strong> e n\u00e3o para mostrar como ficar\u00e1 o design final.<\/p>\n\n\n\n

\"\"
Fonte: Northampton Website Design<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

J\u00e1 os mockups s\u00e3o vers\u00f5es mais realistas do projeto. \u00c9 uma foto ou imagem de como ficar\u00e1 o projeto depois de pronto.<\/p>\n\n\n\n

\"\"
Fonte: Envato Market<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

Quanto aos prot\u00f3tipos, t\u00eam o mesmo objetivo dos mockups, com a diferen\u00e7a de que s\u00e3o uma vers\u00e3o teste do projeto, no qual j\u00e1 pode haver intera\u00e7\u00f5es. Entretanto, nesse caso n\u00e3o h\u00e1 compromisso com a verdade, ou seja, os dados<\/a> usados n\u00e3o s\u00e3o reais. Muito pelo contr\u00e1rio, a ideia \u00e9 testar os limites do projeto.<\/p>\n\n\n\n

Quais s\u00e3o as aplica\u00e7\u00f5es do Design de Intera\u00e7\u00e3o?<\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

As aplica\u00e7\u00f5es do Design de Intera\u00e7\u00e3o s\u00e3o variadas, j\u00e1 que ele \u00e9 respons\u00e1vel por v\u00e1rias etapas que, juntas, garantem a melhor intera\u00e7\u00e3o poss\u00edvel entre os usu\u00e1rios e o sistema. <\/p>\n\n\n\n

O IxD se preocupa com a interface e o impacto que ela causa nos usu\u00e1rios e no pr\u00f3prio sistema. Ela tamb\u00e9m d\u00e1 aten\u00e7\u00e3o aos aspectos sociais do produto na vida do p\u00fablico, incluindo a <\/strong>rela\u00e7\u00e3o emocional<\/strong><\/a> que pode ser originada por ele<\/strong>, afinal, isso tamb\u00e9m faz parte da intera\u00e7\u00e3o.<\/p>\n\n\n\n

Os produtos que o IxD trabalha podem ser jogos virtuais, aplicativos, sites, sistemas banc\u00e1rios ou qualquer outro projeto em que seja necess\u00e1rio criar um ambiente o mais interativo poss\u00edvel para atender \u00e0s prefer\u00eancias dos usu\u00e1rios.     <\/p>\n\n\n\n

\u00c9 importante observar que pode existir uma confus\u00e3o com rela\u00e7\u00e3o a quem seria o real cliente do Design de Intera\u00e7\u00e3o. Quem financia o projeto \u00e9 o cliente do designer de intera\u00e7\u00e3o, enquanto os usu\u00e1rios s\u00e3o clientes do sistema.<\/p>\n\n\n\n

Assim, o programa deve ser projetado para os usu\u00e1rios e n\u00e3o para os financiadores do projeto<\/strong>, que devem ter ci\u00eancia dessa diferen\u00e7a, j\u00e1 que alguns podem ficar insatisfeitos com a forma como o projeto est\u00e1 sendo arquitetado.<\/p>\n\n\n\n

E como dissemos no come\u00e7o do artigo, existem algumas \u00e1reas que s\u00e3o de compet\u00eancia do Design de Intera\u00e7\u00e3o. Vamos comentar um pouco sobre cada uma delas. Confira!<\/p>\n\n\n\n

Legibilidade<\/h3>\n\n\n\n

O IxD deve garantir que o produto criado seja leg\u00edvel para os usu\u00e1rios, ou seja, deve ser de f\u00e1cil compreens\u00e3o e interpreta\u00e7\u00e3o por quem vai usar o produto. Para tanto, deve-se pensar em design, disposi\u00e7\u00e3o dos espa\u00e7os e escolha de fonte<\/a>, \u00edcones e s\u00edmbolos.<\/p>\n\n\n\n

Usabilidade<\/h3>\n\n\n\n

A usabilidade tem a ver com a facilidade do usu\u00e1rio manusear o sistema. Quanto mais f\u00e1cil, mais us\u00e1vel, e mais usu\u00e1rios conseguir\u00e3o usar o produto. Para demonstrar a usabilidade antes de lan\u00e7ar o sistema, o designer de intera\u00e7\u00e3o deve usar ferramentas como wireframe, mockups ou prot\u00f3tipos, que mostramos no t\u00f3pico anterior.<\/p>\n\n\n\n

Funcionalidade<\/h3>\n\n\n\n

A funcionalidade tem a ver com a utilidade do programa, ou seja, ele precisa ser \u00fatil e entregar o resultado esperado por quem vai utiliz\u00e1-lo. Por isso, \u00e9 recomend\u00e1vel que quem faz o Design de Intera\u00e7\u00e3o entenda pelo menos um pouco de programa\u00e7\u00e3o, para garantir que a entrega seja a melhor poss\u00edvel para o usu\u00e1rio. <\/p>\n\n\n\n

Programa\u00e7\u00e3o<\/h3>\n\n\n\n

Falando em programa\u00e7\u00e3o, vamos ressaltar novamente a necessidade de o designer de intera\u00e7\u00e3o saber programar em diversas linguagens, especialmente as de front-end. Isso porque, al\u00e9m de garantir a funcionalidade do projeto, ele tamb\u00e9m precisa se certificar de que o sistema n\u00e3o venha a ter falhas e seja seguro e r\u00e1pido.<\/p>\n\n\n\n

Ainda que a programa\u00e7\u00e3o do sistema n\u00e3o seja delegada ao IxD designer, \u00e9 responsabilidade dele testar e entregar um produto com a melhor interatividade poss\u00edvel.<\/p>\n\n\n\n

Beleza<\/h3>\n\n\n\n

A beleza, ou est\u00e9tica, faz parte da legibilidade, j\u00e1 que o produto precisa ser belo para ser leg\u00edvel. Entretanto, a beleza n\u00e3o pode levar em conta apenas a legibilidade. Deve tamb\u00e9m estar alinhada ao p\u00fablico e \u00e0 proposta.<\/strong><\/p>\n\n\n\n

Para observar todos esses fatores, o IxD leva em considera\u00e7\u00e3o as 5 dimens\u00f5es do Design de Intera\u00e7\u00e3o<\/a> propostas por Gillian Crampton Smith e Kevin Silver. Tais pontos devem ser observados em todos os projetos que envolvem o IxD.<\/p>\n\n\n\n

S\u00e3o eles:<\/p>\n\n\n\n

  1. palavras;<\/li>
  2. representa\u00e7\u00f5es visuais;<\/li>
  3. espa\u00e7o ou objetos f\u00edsicos;<\/li>
  4. tempo;<\/li>
  5. comportamento.<\/li><\/ol>\n\n\n\n

    Tamb\u00e9m devem ser considerados os 6 princ\u00edpios fundamentais da intera\u00e7\u00e3o, delineados por Don Norman. S\u00e3o os seguintes:<\/p>\n\n\n\n

    1. visibilidade;<\/li>
    2. feedback;<\/li>
    3. restri\u00e7\u00f5es;<\/li>
    4. mapeamento;<\/li>
    5. consist\u00eancia;<\/li>
    6. affordance e significantes.<\/li><\/ol>\n\n\n\n

      O affordance \u00e9 um conceito que n\u00e3o tem tradu\u00e7\u00e3o direta para o portugu\u00eas, por isso, \u00e9 mantido em ingl\u00eas. \u00c9 usado para representar atributos caracter\u00edsticos de algum objeto, capazes de gerar uma intera\u00e7\u00e3o espec\u00edfica.<\/p>\n\n\n\n[rock-convert-cta id=”35243″]\n\n\n\n

      Quais s\u00e3o os benef\u00edcios do IxD?<\/h2>\n\n\n\n

      Os maiores benef\u00edcios de investir em Design de Intera\u00e7\u00e3o est\u00e3o nos atributos que ele traz ao projeto. Ou seja, um designer de intera\u00e7\u00e3o garante um projeto bonito, f\u00e1cil de usar, \u00fatil e eficaz.<\/p>\n\n\n\n

      Al\u00e9m disso, a ado\u00e7\u00e3o do IxD em um projeto resulta na melhor comunica\u00e7\u00e3o poss\u00edvel entre a interface, a usabilidade e a ideia do produto<\/strong>, aumentando as chances de os usu\u00e1rios se envolverem<\/a>.<\/p>\n\n\n\n

      Por ter uma equipe ou um profissional focado em entregar interatividade ao usu\u00e1rio, evita-se a cria\u00e7\u00e3o de projetos que, embora eficazes, sejam feios ou de dif\u00edcil entendimento para os clientes. <\/p>\n\n\n\n

      Onde o Design de Intera\u00e7\u00e3o pode ser usado?<\/h2>\n\n\n\n

      Qualquer projeto deveria contar com um profissional \u2014 ou uma equipe, dependendo do tamanho do projeto \u2014 respons\u00e1vel por observar o Design de Intera\u00e7\u00e3o e ficar atento aos fatores que s\u00e3o cruciais para o IxD. Isso garante melhores produtos e, consequentemente, melhores experi\u00eancias para os usu\u00e1rios.<\/p>\n\n\n\n

      A \u00e1rea de TI, principalmente no caso de projetos que envolvem a cria\u00e7\u00e3o de softwares ou outros produtos digitais, s\u00e3o os maiores clientes de IxD. Mas os escrit\u00f3rios de design e as empresas que atuam no marketing e na publicidade tamb\u00e9m est\u00e3o usando o Design de Intera\u00e7\u00e3o na cria\u00e7\u00e3o de produtos.<\/p>\n\n\n\n

      E com a expans\u00e3o de materiais interativos, principalmente no marketing e nas vendas, a tend\u00eancia \u00e9 que a \u00e1rea de Design de Intera\u00e7\u00e3o conquiste cada vez mais import\u00e2ncia nos projetos<\/strong>.<\/p>\n\n\n\n

      Por falar em interatividade no marketing e nas vendas, confira o artigo em que explicamos quais s\u00e3o os principais tipos de conte\u00fado interativo<\/a> que s\u00e3o tend\u00eancia na gera\u00e7\u00e3o de mais leads! <\/p>\n\n\n\n

      Como o Design de Intera\u00e7\u00e3o pode ajudar a sua marca?<\/h2>\n\n\n\n

      Uma vez que o Design de Intera\u00e7\u00e3o \u00e9 respons\u00e1vel em promover a harmonia do ambiente no qual o usu\u00e1rio interage com a empresa, ele agrega pontos fundamentais para a marca. Seja um aplicativo, conte\u00fado interativo<\/p>\n\n\n\n

      Como o Design de Intera\u00e7\u00e3o funciona na pr\u00e1tica?<\/h2>\n\n\n\n

      Podemos entender que o Design de Intera\u00e7\u00e3o \u00e9 uma resposta aos diferenciais das plataformas digitais de comunica\u00e7\u00e3o se comparadas \u00e0s m\u00eddias de massa: a capacidade de intera\u00e7\u00e3o! Sim, enquanto assiste \u00e0 televis\u00e3o (no modelo tradicional, antes da internet), o telespectador recebe informa\u00e7\u00e3o, mas n\u00e3o t\u00eam formas de interagir com o conte\u00fado.<\/p>\n\n\n\n

      A transforma\u00e7\u00e3o digital<\/a> permitiu estruturar modelos inteligentes de comunica\u00e7\u00e3o. Com o crescimento das redes sociais e outros canais mais interativos, hoje temos um modelo de muitos que falam para muitos.<\/p>\n\n\n\n

      Sendo assim, o profissional de IxD tem por objetivo permitir que a experi\u00eancia do usu\u00e1rio nas intera\u00e7\u00f5es seja o mais intuitiva poss\u00edvel.<\/p>\n\n\n\n

      Abordagens do design de intera\u00e7\u00e3o<\/h3>\n\n\n\n

      O desenvolvimento do trabalho de um designer de intera\u00e7\u00e3o pode acontecer de muitas formas. Por isso, s\u00e3o apresentadas 4 abordagens diferentes. Confira a seguir.<\/p>\n\n\n\n

      1. Centrado no usu\u00e1rio: <\/strong>com as estrat\u00e9gias cada vez mais focadas no consumidor final, solu\u00e7\u00f5es customer centric<\/a> tendem a ser idealmente as mais indicadas para o desenvolvimento de projetos (e o UX Designer vai fortalecer essa perspectiva). Neste modelo, uma pesquisa sobre o usu\u00e1rio guia o designer de intera\u00e7\u00e3o, que desenvolve a solu\u00e7\u00e3o focado nas necessidades, desejos e objetivos do usu\u00e1rio.<\/li>
      2. Centrado em atividades: <\/strong>nesta abordagem, o foco s\u00e3o as atividades que o usu\u00e1rio precisa realizar. Imagine um aplicativo em que o usu\u00e1rio precisa se logar para acessar informa\u00e7\u00f5es sens\u00edveis. Ent\u00e3o, a tarefa poderia ser criar essa interface para a realiza\u00e7\u00e3o do login. Neste caso, o designer desenvolve as ferramentas que permitem ao usu\u00e1rio realizar as tarefas.<\/li>
      3. Sistemas:<\/strong> quem trabalha com IxD em uma ag\u00eancia de TI provavelmente se depara bastante com esta abordagem. Neste caso, o designer precisa desenvolver componentes para assegurar que o usu\u00e1rio consiga alcan\u00e7ar seus objetivos com o sistema.<\/li>
      4. G\u00eanio: <\/strong>uma abordagem muito usada em equipes e com baixo or\u00e7amento para a aplica\u00e7\u00e3o de pesquisas com os usu\u00e1rios, \u00e9 um modelo que leva em conta a compet\u00eancia do designer de intera\u00e7\u00e3o para o desenvolvimento dos produtos. Neste caso, o profissional de IxD \u00e9 a fonte de inspira\u00e7\u00e3o e o usu\u00e1rio tem o papel de validar o que foi projetado.<\/li><\/ol>\n\n\n\n

        Se voc\u00ea atua nesta \u00e1rea, provavelmente j\u00e1 identificou v\u00e1rias abordagens conforme cada projeto realizado. Isso acontece porque n\u00e3o existe uma abordagem ideal para o Design de Intera\u00e7\u00e3o e sim solu\u00e7\u00f5es adequadas para diferentes cen\u00e1rios.<\/p>\n\n\n[rock-convert-cta id=”65680″]\n\n\n\n

        Alguns tipos de design interativo<\/h2>\n\n\n\n

        Os conte\u00fados interativos<\/a> t\u00eam ganhado cada vez mais expressividade no marketing digital. Isso porque s\u00e3o solu\u00e7\u00f5es que valorizam a intera\u00e7\u00e3o do usu\u00e1rio com a marca, agregando valor e melhorando o relacionamento com o p\u00fablico.<\/p>\n\n\n\n

        Sendo assim, a \u00e1rea de atua\u00e7\u00e3o do IxD \u00e9 muito grande e com demandas crescentes. Afinal, o desenvolvimento de novas tecnologias e formatos para conte\u00fados s\u00e3o o ber\u00e7o para uma infinidade de projetos que contam com design de intera\u00e7\u00e3o. Veja a seguir alguns exemplos de conte\u00fados interativos<\/a> que contam com projetos de design de intera\u00e7\u00e3o.<\/p>\n\n\n\n

        P\u00e1ginas web interativas<\/h3>\n\n\n\n

        Os sites interativos<\/a> s\u00e3o uma excelente oportunidade de oferecer ao usu\u00e1rio autonomia e poder ao navegar por determinadas p\u00e1ginas. Em geral, s\u00e3o projetos que oferecem a possibilidade de personaliza\u00e7\u00e3o:<\/p>\n\n\n\n