{"id":2650,"date":"2020-08-04T17:56:00","date_gmt":"2020-08-04T20:56:00","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2650"},"modified":"2025-09-02T14:04:07","modified_gmt":"2025-09-02T17:04:07","slug":"user-experience-design-e-user-interface-conhecendo-e-aprendendo-as-diferencas","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/08\/04\/user-experience-design-e-user-interface-conhecendo-e-aprendendo-as-diferencas","title":{"rendered":"User Experience Design e User Interface: Conhecendo e aprendendo as diferen\u00e7as"},"content":{"rendered":"\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Nesta edi\u00e7\u00e3o do PET-Reda\u00e7\u00e3o abordaremos os temas User Experience Design (UX) e User Interface Design (UI). Primeiramente, qual o significado destes dois termos?<\/p>\n

Enquanto User Interface Design \u00e9 o meio pelo qual \u00e9 feita a intera\u00e7\u00e3o entre a interface e o usu\u00e1rio de um produto (\u00e9 a parte do produto que o usu\u00e1rio se depara quando olha para um site, por exemplo), User Experience Design \u00e9 o estudo e an\u00e1lise da melhor maneira de atender as necessidades do usu\u00e1rio, tornando sua experi\u00eancia satisfat\u00f3ria, \u00e9 como o usu\u00e1rio se sente ao utilizar o seu produto. Dessa forma, UX necessita de um estudo sobre a percep\u00e7\u00e3o do usu\u00e1rio sobre o sistema, a sua usabilidade e facilidade de uso, dentre outros fatores. Esses aspectos s\u00e3o respons\u00e1veis por tornar o produto mais atrativo para o usu\u00e1rio, que n\u00e3o busca somente um produto que cumpra as suas necessidades, mas tamb\u00e9m, que isso seja feito da melhor maneira poss\u00edvel. \u00c9 importante ressaltar tamb\u00e9m que, para um melhor resultado, UX e UI s\u00e3o dois conceitos que devem andar juntos sempre que estamos desenvolvendo um produto. Durante esse processo, devemos atentar que o usu\u00e1rio quer algo que provoque uma positividade, que fa\u00e7a ele desejar utiliz\u00e1 lo novamente e at\u00e9 recomend\u00e1-lo a um conhecido. Por essa mesma raz\u00e3o que UI e UX est\u00e3o interligados, um complementa o outro, uma vez que o programa tamb\u00e9m precisa ser funcional para fornecer uma experi\u00eancia completa.<\/p>\n

\u00c9 not\u00f3rio que h\u00e1 um grande impacto na aprova\u00e7\u00e3o e reconhecimento de um produto em ao se aplicar metodologias de UX ao seu desenvolvimento. Por essa raz\u00e3o, o UX Designer deve ser uma pessoa bastante criativa e ter bom conhecimento das disciplinas do UX Design, al\u00e9m de ter um bom n\u00edvel de reconhecimento pela equipe de desenvolvimento, que considere suas ideias para melhorias no produto que por sua vez, refletir\u00e3o em melhorias na experi\u00eancia do usu\u00e1rio. \u00c9 importante que se tenha esse cuidado pois isso \u00e9 o que determinar\u00e1 o seu sucesso. Basta considerar que, por mais que um sistema entregue todas as necessidades do usu\u00e1rio, se o mesmo for dif\u00edcil de interagir, ele n\u00e3o ser\u00e1 t\u00e3o aceito quanto poderia ter sido se essa quest\u00e3o tivesse sido avaliada previamente. Vale ressaltar, tamb\u00e9m, que UX n\u00e3o \u00e9 apenas o Design Visual em si, mas o conjunto de outras primitivas, como o conte\u00fado apresentado, a usabilidade, quest\u00f5es de intera\u00e7\u00e3o com o usu\u00e1rio, dentre outras. Assim sendo, o UX Designer deve estar presente desde o in\u00edcio \u00e0 conclus\u00e3o do projeto, al\u00e9m de ter pleno conhecimento das disciplinas do UX Design para garantir um melhor resultado para o usu\u00e1rio final.<\/p>\n

Dentre as diversas disciplinas do UX Design, segue abaixo algumas delas, abordadas pelo designer gr\u00e1fico Jo\u00e3o Faraco:<\/p>\n

    \n
  1. \n
    \n
    Usabilidade<\/em><\/strong><\/div>\n<\/div>\n<\/li>\n<\/ol>\n

    Nesta disciplina \u00e9 realizada uma pesquisa de campo, que permite identificar onde est\u00e3o os problemas e qual o objetivo e as necessidades do usu\u00e1rio. \u00c9 uma etapa de coleta de informa\u00e7\u00f5es e verifica\u00e7\u00e3o do objetivo do neg\u00f3cio.<\/p>\n

      \n
    1. \n
      Arquitetura da informa\u00e7\u00e3o<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

      De modo geral, durante esta disciplina analisamos as necessidades do usu\u00e1rio em tarefas, e aplicamos diretrizes para verificar se s\u00e3o mensur\u00e1veis, se permitem avalia\u00e7\u00f5es, se s\u00e3o fact\u00edveis\u00a0e\u00a0poss\u00edveis de se realizar, etc.<\/p>\n

        \n
      1. \n
        Design Gr\u00e1fico<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

        Substancialmente, o design gr\u00e1fico \u00e9 a apresenta\u00e7\u00e3o, o layout, a parte mais visual do produto.<\/p>\n

          \n
        1. \n
          Design de Intera\u00e7\u00e3o<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

          Nesta disciplina elaboramos fluxos de intera\u00e7\u00e3o, como, por exemplo, quais as telas de uma aplica\u00e7\u00e3o que o usu\u00e1rio deve passar para realizar uma opera\u00e7\u00e3o\u00a0–\u00a0uma esp\u00e9cie de passo a passo para as opera\u00e7\u00f5es, servi\u00e7os.<\/p>\n

            \n
          1. \n
            Prototipagem<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

            De modo geral, prototipagem\u00a0\u00e9 o momento de desenvolver \u201cesqueletos\u201d das telas, prot\u00f3tipos que podem ser funcionais ou n\u00e3o funcionais, para avaliar as abordagens do produto durante o desenvolvimento.<\/p>\n

            As disciplinas brevemente comentadas anteriormente est\u00e3o interligadas e a uni\u00e3o de todas as disciplinas – al\u00e9m das j\u00e1 citadas – \u00e9 que resulta na experi\u00eancia final do usu\u00e1rio.<\/p>\n

            Tendo em vista que UX est\u00e1 diretamente relacionado \u00e0 percep\u00e7\u00e3o do usu\u00e1rio e a forma como o mesmo se sente, John Whalen, um psic\u00f3logo de UX – fundador da Brilliant Experience, uma empresa de estrat\u00e9gia de UX que adota uma abordagem baseada em psicologia no processo de design – realizou estudos sobre 6 for\u00e7as motivacionais que influenciam essa experi\u00eancia e, segundo ele, essas for\u00e7as s\u00e3o capazes de auxiliar os UX Designers a tomarem melhores decis\u00f5es e medidas na hora de projetar a experi\u00eancia para o usu\u00e1rio. Esses fatores t\u00eam extrema import\u00e2ncia para o sucesso do produto e, portanto, iremos abord\u00e1-los um pouco a seguir:<\/p>\n

              \n
            1. \n
              Vis\u00e3o e Aten\u00e7\u00e3o<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

              S\u00e3o fatores diretamente relacionados \u00e0 UI, que est\u00e3o ligados a recursos visuais como: padr\u00f5es de cores, tamanhos utilizados, dentre outros. Esses aspectos, podem auxiliar, por exemplo, na necessidade de destacar algum elemento espec\u00edfico na sua interface que chame a aten\u00e7\u00e3o do usu\u00e1rio ao abrir a aplica\u00e7\u00e3o ou p\u00e1gina, sendo de extrema import\u00e2ncia para auxiliar o usu\u00e1rio na sua intera\u00e7\u00e3o com o produto.<\/p>\n

                \n
              1. \n
                Senso de Localiza\u00e7\u00e3o\/Orienta\u00e7\u00e3o<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

                Este fator est\u00e1 ligado \u00e0 arquitetura da informa\u00e7\u00e3o do sistema, \u00e0 hierarquia visual, conte\u00fados, dentre outros aspectos. \u00c9 a capacidade de um usu\u00e1rio de saber facilmente como encontrar uma a\u00e7\u00e3o ou realizar uma opera\u00e7\u00e3o, sabendo onde ele est\u00e1 a cada etapa do processo e como chegar no pr\u00f3ximo ponto. Isso deve ser mostrado de maneira clara e coesa para o usu\u00e1rio, evitando que o mesmo se confunda ou se perca durante o processo e, por fim, que desista da intera\u00e7\u00e3o.<\/p>\n

                  \n
                1. \n
                  Mem\u00f3ria e Sem\u00e2ntica<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

                  \u00c9 importante notar que os usu\u00e1rios est\u00e3o acostumados com um certo “padr\u00e3o” de intera\u00e7\u00f5es, ou seja, eles chegam para utilizar o produto com desejos e expectativas baseadas em experi\u00eancias passadas com outros produtos. \u00c9 importante, portanto, analisar qual \u00e9 o p\u00fablico alvo e quais aplica\u00e7\u00f5es semelhantes s\u00e3o utilizadas por eles. Isto n\u00e3o significa que devem ser iguais, mas devem ter aspectos semelhantes sobre a sua usabilidade para atender \u00e0s expectativas dos usu\u00e1rios de forma simples e natural. A mem\u00f3ria tem tamb\u00e9m um papel fundamental junto \u00e0 Orienta\u00e7\u00e3o, pois o usu\u00e1rio precisa saber quais os passos anteriores que foram realizados durante o processo.<\/p>\n

                    \n
                  1. \n
                    Linguagem<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

                    A\u00a0linguagem \u00e9 uma parte bem importante da experi\u00eancia pois ela \u00e9 que realiza a comunica\u00e7\u00e3o e transmiss\u00e3o de informa\u00e7\u00f5es ao usu\u00e1rio. \u00c9 importante que seu produto analise a melhor forma de se comunicar com o seu p\u00fablico-alvo, qual o tempo verbal adequado a ser empregado ou at\u00e9 mesmo se seria interessante adotar regionalismos ou uma linguagem mais informal. Ademais, deve-se evitar o exagero de informa\u00e7\u00f5es a serem exibidas, evitando deixar o usu\u00e1rio confuso ou perdido durante a sua intera\u00e7\u00e3o com o produto.<\/p>\n

                      \n
                    1. \n
                      Emo\u00e7\u00e3o<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

                      Os usu\u00e1rios chegam ao produto trazendo experi\u00eancias emocionais, frustra\u00e7\u00f5es e desejos e possuem uma certa expectativa sobre o produto. Assim, \u00e9 importante notar que os usu\u00e1rios t\u00eam receio e medo de cometer erros. Ademais, \u00e9 importante analisar o que no seu produto proporcionar\u00e1 um significado para a experi\u00eancia e marcar\u00e1 o usu\u00e1rio com experi\u00eancias positivas, assim como o que os conquistar\u00e1 e tornar\u00e1 o processo mais atraente para o mesmo. Outra caracter\u00edstica deste fator, \u00e9 a possibilidade de analisar o motivo de um determinado comportamento do usu\u00e1rio nas diversas situa\u00e7\u00f5es, permitindo que, com base nessa an\u00e1lise, sejam feitas altera\u00e7\u00f5es no produto de forma a melhorar a experi\u00eancia.<\/p>\n

                        \n
                      1. \n
                        Tomada de Decis\u00e3o<\/em><\/strong><\/div>\n<\/li>\n<\/ol>\n

                        \u00c9\u00a0importante que o seu produto consiga proporcionar facilidade na tomada de decis\u00f5es do usu\u00e1rio. O designer deve ser capaz de auxiliar o usu\u00e1rio a tomar decis\u00f5es, antecipando suas necessidades e desejos para melhorar a experi\u00eancia e o reconhecimento do produto.<\/p>\n

                        A experi\u00eancia do usu\u00e1rio depende de como este se sente em rela\u00e7\u00e3o ao produto, como ele pensa e o que os motiva, e, portanto, \u00e9 interessante relacionar aspectos humanos – psicol\u00f3gicos – ao processo de desenvolvimento. Ao pensar na intera\u00e7\u00e3o entre a interface e o usu\u00e1rio (UI), em como essa intera\u00e7\u00e3o afetar\u00e1 o seu lado emocional e sua experi\u00eancia com o sistema (UX) e nos 6 aspectos citados anteriormente, iremos estar melhorando significativamente a experi\u00eancia que o usu\u00e1rio ter\u00e1 ao interagir com o produto. Tudo est\u00e1 interligado e, portanto, s\u00e3o todos aspectos bem importantes e relevantes e n\u00e3o devem ser trabalhados de forma isolada.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

                        \n
                        \u00a0<\/div>\n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \n
                        \u00a0<\/div>\n
                        \n
                        \n
                        \n
                        \u00a0<\/div>\n<\/div>\n<\/div>\nRefer\u00eancias (acesso em julho de 2020):<\/span><\/div>\n