{"id":3343,"date":"2022-12-11T22:43:14","date_gmt":"2022-12-12T01:43:14","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3343"},"modified":"2025-09-02T14:36:42","modified_gmt":"2025-09-02T17:36:42","slug":"user-experience","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2022\/12\/11\/user-experience","title":{"rendered":"User Experience"},"content":{"rendered":"\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-3344 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/2a3ad072-955d-4366-9d66-ec0ea5adf5df.jpeg\" alt=\"\" width=\"1600\" height=\"500\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/2a3ad072-955d-4366-9d66-ec0ea5adf5df.jpeg 1600w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/2a3ad072-955d-4366-9d66-ec0ea5adf5df-300x94.jpeg 300w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/2a3ad072-955d-4366-9d66-ec0ea5adf5df-1024x320.jpeg 1024w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/2a3ad072-955d-4366-9d66-ec0ea5adf5df-768x240.jpeg 768w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/2a3ad072-955d-4366-9d66-ec0ea5adf5df-1536x480.jpeg 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Em um mundo cada vez mais tecnol\u00f3gico, \u00e9 comum o uso de programas e aplicativos no nosso cotidiano, seja para comunica\u00e7\u00e3o, passatempo, aux\u00edlio nas atividades di\u00e1rias e trabalho e diversos outros. Mas o que tornou isso comum a esse ponto? Foi a praticidade, utilidade e facilidade que essas aplica\u00e7\u00f5es trouxeram para essas atividades rotineiras. Apesar disso, diversas ferramentas que eram muito utilizadas alguns anos atr\u00e1s n\u00e3o se mantiveram assim, al\u00e9m de v\u00e1rias novas solu\u00e7\u00f5es n\u00e3o irem adiante no mercado nem em popularidade e foram sendo esquecidas ao longo do tempo.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Nesse mercado em que tudo se transforma muito rapidamente, as tecnologias precisam se adaptar \u00e0s mudan\u00e7as, o que, muitas vezes, n\u00e3o ocorre ou, no m\u00ednimo, n\u00e3o no momento certo &#8211; como \u00e9 o caso destas aplica\u00e7\u00f5es que fracassaram ou perderam popularidade. Nessa circunst\u00e2ncia, um fator crucial para manter o usu\u00e1rio fiel ao aplicativo ou programa, al\u00e9m da sua funcionalidade e efic\u00e1cia \u00e9 a <\/span><b>experi\u00eancia<\/b><span style=\"font-weight: 400\"> que o mesmo proporciona a esse usu\u00e1rio. Com uma experi\u00eancia positiva quanto ao sistema, ele ter\u00e1 mais interesse em continuar utilizando-o. Para ficar ainda mais claro, pense pelo lado contr\u00e1rio: se voc\u00ea est\u00e1 usando um sistema e acha dif\u00edcil ou cansativo utiliz\u00e1-lo, voc\u00ea ainda iria querer us\u00e1-lo tendo vers\u00f5es mais amig\u00e1veis dispon\u00edveis? Provavelmente, n\u00e3o.<\/span><span style=\"font-weight: 400\"><br \/><\/span> <span style=\"font-weight: 400\">Assim sendo, o foco desta reda\u00e7\u00e3o \u00e9 justamente \u201cUser Experience\u201d (UX), ou, em portugu\u00eas, \u201cExperi\u00eancia do Usu\u00e1rio\u201d, um fator muito importante para o sucesso de um sistema.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Al\u00e9m da UX, temos a UI, ou seja, \u201cUser Interface\u201d. As duas \u00e1reas diferem no seguinte quesito: enquanto a UI se preocupa em ter todos os componentes necess\u00e1rios para um sistema funcionar, a UX se preocupa mais em fazer esses componentes estarem dispostos de maneira confort\u00e1vel e atrativa para o usu\u00e1rio e facilitar o acesso e visualiza\u00e7\u00e3o dessas funcionalidades. Para saber mais sobre a diferen\u00e7a e import\u00e2ncia das duas \u00e1reas, recomendo a leitura de outra reda\u00e7\u00e3o j\u00e1 publicada anteriormente, que se encontra <a href=\"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/08\/04\/user-experience-design-e-user-interface-conhecendo-e-aprendendo-as-diferencas\/\">aqui<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Voltando \u00e0 UX, irei apresentar nesta reda\u00e7\u00e3o alguns pontos, tem\u00e1ticas e habilidades importantes para trabalhar nesta \u00e1rea, com exemplos pr\u00e1ticos. Estas s\u00e3o habilidades importantes para desenvolvedores front-end que querem se destacar no mercado, uma vez que, dado o avan\u00e7o das tecnologias, o desenvolvimento de aplica\u00e7\u00f5es vem se tornando mais f\u00e1cil e, consequentemente, o mercado vai se saturando de solu\u00e7\u00f5es semelhantes. Assim, o diferencial entre estes produtos pode estar na UX, que poder\u00e1 ter um peso significativo na decis\u00e3o final dos usu\u00e1rios quanto a qual produto escolher.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Pensando na \u00e1rea correlata de Web Design, h\u00e1 alguns pontos que est\u00e3o tamb\u00e9m relacionados \u00e0 UX. Estes pontos s\u00e3o:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Heur\u00edsticas de usabilidade<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Uso de cores e formas<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Na sequ\u00eancia, irei apresentar sobre esses t\u00f3picos em mais detalhes e, ap\u00f3s a conceitua\u00e7\u00e3o inicial, irei implant\u00e1-los em uma aplica\u00e7\u00e3o com um cen\u00e1rio fict\u00edcio para exemplifica\u00e7\u00e3o.<\/span><\/p>\n<p><strong>1. <\/strong><strong>Heur\u00edsticas de Usabilidade<\/strong><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0Essa heur\u00edstica dita que os usu\u00e1rios devem estar cientes do que est\u00e1 acontecendo no sistema, recebendo feedbacks de suas a\u00e7\u00f5es para mant\u00ea-los situados.<\/span><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a01.2. <span style=\"font-weight: 400\">Correspond\u00eancia entre o sistema e o mundo real<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0J\u00e1 essa heur\u00edstica prop\u00f5e que o sistema utilize a linguagem comum do seu p\u00fablico, com express\u00f5es e<\/span> <span style=\"font-weight: 400\">\u00edcones aos quais ele est\u00e1 familiarizado.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a01.3. <\/span><span style=\"font-weight: 400\">Controle e liberdade do usu\u00e1rio<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0 Essa por sua vez, comenta que o usu\u00e1rio \u00e9 humano e, portanto, est\u00e1 sujeito a errar. Dessa forma, ele deve ser capaz de desfazer e refazer a\u00e7\u00f5es dentro do sistema, tendo controle\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 total de suas a\u00e7\u00f5es no mesmo.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a01.4. Consist\u00eancia e padr\u00f5es<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 \u00a0Aqui est\u00e1 detalhado que todos bot\u00f5es, links e demais componentes devem manter um padr\u00e3o, evitando que o usu\u00e1rio fique com d\u00favidas quanto \u00e0 funcionalidade de tal\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0componente.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 1.5. Preven\u00e7\u00e3o de erros\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 Esta heur\u00edstica, por sua vez, sugere que hajam mensagens e alertas antes do usu\u00e1rio realizar a\u00e7\u00f5es permanentes, evitando, assim, que o mesmo cometa erros.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 1.6. Reconhecimento ao inv\u00e9s de memoriza\u00e7\u00e3o<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0 J\u00e1 aqui, \u00e9 proposto que o usu\u00e1rio pode esquecer a\u00e7\u00f5es passadas e, por isso, o sistema deve indicar para o mesmo essas a\u00e7\u00f5es que realizou, adicionando essas informa\u00e7\u00f5es aos\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 passos seguintes.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a01.7. Flexibilidade e efici\u00eancia de uso<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 \u00a0Esta por sua vez, prop\u00f5e que o sistema pode possuir diferentes perfis de usu\u00e1rio. Alguns mais acostumados ao sistema e outras aplica\u00e7\u00f5es em geral e alguns com menos\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0conhecimento. Assim, o usu\u00e1rio deve ter liberdade para utilizar atalhos e facilitadores, bem como prestar aux\u00edlio para os que possuem menos familiaridade com o sistema.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 1.8. Est\u00e9tica e design minimalista<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0 J\u00e1 esta heur\u00edstica est\u00e1 mais atrelada ao design visual do sistema, propondo que o mesmo possua uma est\u00e9tica mais minimalista, evitando sobrecarregar as telas de informa\u00e7\u00e3o e\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0dificultando para o usu\u00e1rio encontrar as informa\u00e7\u00f5es que precisa.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a01.9. Ajudar os usu\u00e1rios a reconhecer, diagnosticar e se recuperar de erros<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 \u00a0Quanto a essa heur\u00edstica, ela prop\u00f5e que o usu\u00e1rio receba mensagens de erro na sua linguagem, ao inv\u00e9s da linguagem da m\u00e1quina. Assim, por exemplo, ao inv\u00e9s de receber uma\u00a0 \u00a0 \u00a0 \u00a0 \u00a0mensagem com \u201c404\u201d, erro comum quando n\u00e3o \u00e9 encontrada a rota de alguma p\u00e1gina em um sistema, o usu\u00e1rio deve receber a mensagem \u201cp\u00e1gina n\u00e3o encontrada\u201d. Al\u00e9m disso, o\u00a0 \u00a0 \u00a0sistema deve fornecer um caminho para o usu\u00e1rio se recuperar desses erros sozinho, para n\u00e3o impossibilitar o usu\u00e1rio de continuar utilizando o sistema.<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 1.10. Ajuda e documenta\u00e7\u00e3o<\/span><\/p>\n<p><span style=\"font-weight: 400\">\u00a0 Por fim, a \u00faltima heur\u00edstica abordada \u00e9 a de ajuda e documenta\u00e7\u00e3o. Esta heur\u00edstica prev\u00ea que o sistema deve possuir um espa\u00e7o que explique como utilizar o sistema de forma clara e\u00a0 \u00a0precisa, e que o auxilie nas diversas funcionalidades do mesmo.<\/span><\/p>\n<p><strong>2. Uso de cores e formas<\/strong><\/p>\n<p><span style=\"font-weight: 400\">Muitas vezes ao desenvolver um trabalho, um sistema, uma imagem para divulga\u00e7\u00e3o utilizamos as cores que mais gostamos ou achamos que combinam com a tem\u00e1tica, mas o uso das cores vai al\u00e9m disso. As cores influenciam diretamente na nossa percep\u00e7\u00e3o das coisas e influenciam tamb\u00e9m se iremos utilizar um sistema ou n\u00e3o. Pense assim, voc\u00ea gostaria de utilizar um sistema que possui o fundo bege claro com a fonte branca? Provavelmente n\u00e3o, pois voc\u00ea teria dificuldades para ler o que est\u00e1 escrito, observe na figura abaixo:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3348 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/WhatsApp-Image-2022-12-11-at-22.39.44.jpeg\" alt=\"\" width=\"236\" height=\"153\" \/><\/p>\n<p><span style=\"font-weight: 400\">Nesta figura, temos um ret\u00e2ngulo na tonalidade bege claro com o texto \u201cBem Vindo!\u201d escrito no centro. Voc\u00ea pode at\u00e9 conseguir ler, mas ter\u00e1 que for\u00e7ar muito a vis\u00e3o para conseguir enxergar.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Desta forma, n\u00e3o \u00e9 recomendado utilizar cores pr\u00f3ximas no c\u00edrculo crom\u00e1tico, pois oferecem um baixo contraste e dificultam a vis\u00e3o. Assim, utilizar-se de cores complementares como azul e amarelo, pode tornar o sistema muito mais agrad\u00e1vel de se utilizar.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Al\u00e9m de tudo isso, o apelo visual de um sistema pode ter um fator decisivo na decis\u00e3o de um usu\u00e1rio. Dessa forma, as cores tamb\u00e9m s\u00e3o muito abordadas no marketing.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Esse apelo visual muitas vezes est\u00e1 vinculado ao significado que est\u00e1 atrelado \u00e0s cores. Assim, uma cor tamb\u00e9m representa os valores e a identidade do produto. Em um sistema relacionado a pr\u00e1ticas sustent\u00e1veis e ecol\u00f3gicas, por exemplo, pode ser utilizada a cor verde, marrom, laranja, entre outras.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Para mais informa\u00e7\u00f5es sobre o significado das cores, pode ser interessante acessar:\u00a0<\/span><a href=\"https:\/\/www.portalsaofrancisco.com.br\/arte\/percepcao-das-cores\"><span style=\"font-weight: 400\">https:\/\/www.portalsaofrancisco.com.br\/arte\/percepcao-das-cores<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Al\u00e9m das cores, as formas tamb\u00e9m tem um peso significativo para o layout de um sistema. Por exemplo, os cantos das \u00e1reas, figuras, bot\u00f5es e demais formas arredondadas s\u00e3o melhores para a vis\u00e3o do que as bordas retas. \u201cAlguns especialistas afirmam que ret\u00e2ngulos que possuem cantos arredondados s\u00e3o bem mais f\u00e1ceis dos olhos processarem que um ret\u00e2ngulo com as bordas afiadas, pois pedem menos esfor\u00e7o cognitivo e processamento visual.\u201d\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">(<\/span><a href=\"https:\/\/www.oficinadanet.com.br\/artigo\/usabilidade\/usablidade-cantos-arredondados-sao-melhores-aos-olhos\"><span style=\"font-weight: 400\">https:\/\/www.oficinadanet.com.br\/artigo\/usabilidade\/usablidade-cantos-arredondados-sao-melhores-aos-olhos<\/span><\/a><span style=\"font-weight: 400\">).<\/span><\/p>\n<p><span style=\"font-weight: 400\">Assim, vale atentar-se para esse detalhe tamb\u00e9m.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Para finalizar este t\u00f3pico, irei abordar a disposi\u00e7\u00e3o dos elementos na tela. No ocidente, a leitura se d\u00e1 da esquerda para a direita, de cima para baixo. Dessa forma, ao acessar um sistema, devemos levar em conta que, por costume, o usu\u00e1rio ir\u00e1 visualizar a informa\u00e7\u00e3o nessa ordem. Assim, as cores, formas e tamanhos podem ser usados para dar destaque.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Por exemplo no trecho abaixo:<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span style=\"font-weight: 400;color: #999999\">De A a Z: confira mais de 100 guias de produtos online<\/span><\/p>\n<h1><span style=\"color: #ff6600\"><b>Black Friday: de airfryer a webcam, Guia de Compras do g1 te ajuda a escolher o produto ideal<\/b><\/span><\/h1>\n<p><span style=\"font-weight: 400\">Com mais de 100 listas, dicas e testes, o g1 tem curadoria para descomplicar suas compras. De A a Z, busque pelo produto que voc\u00ea deseja.<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span style=\"font-weight: 400\">Geralmente, a leitura se iniciaria em \u201cDe A a Z: confira mais de 100\u2026\u201d. Visualmente neste caso, por\u00e9m, o maior destaque est\u00e1 no t\u00edtulo \u201cBlack Friday: de airfryer a webcam\u2026\u201d, pois est\u00e1 maior o tamanho da fonte, com uma cor de destaque e em negrito. Assim, lembre-se de utilizar estes recursos quando quiser dar destaque em algum componente ou alterar a ordem de visualiza\u00e7\u00e3o dos itens na tela.<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Agora iremos abordar estes t\u00f3picos na pr\u00e1tica:<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Considerando um cen\u00e1rio de uma Pet Shop que deseja desenvolver um sistema para si mesma, que ter\u00e1 dois tipos de usu\u00e1rio: o cliente, que poder\u00e1 cadastrar seus pets, visualizar os profissionais que trabalham na pet shop, servi\u00e7os e realizar agendamento de servi\u00e7os para seus pets; e o funcion\u00e1rio, que poder\u00e1 visualizar todas as informa\u00e7\u00f5es referentes a seus colegas de trabalho, agendamentos, clientes e pets.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Nesse cen\u00e1rio, os pets ser\u00e3o classificados em tipos e ra\u00e7as, os servi\u00e7os possuir\u00e3o dura\u00e7\u00e3o prevista e custo e os agendamentos para os pets, data e hor\u00e1rio. Ainda, cada usu\u00e1rio ter\u00e1 um acesso restrito ao sistema com seu email, nome e senha, podendo gerenciar o seu perfil.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Vamos realizar a prototipa\u00e7\u00e3o da tela inicial deste sistema, para o perfil do funcion\u00e1rio? Iniciando pela User Interface, com os requisitos do sistema teremos:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3347 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/abeb10eb-2b99-4a6d-a08b-45726baa0cfe.jpeg\" alt=\"\" width=\"1080\" height=\"971\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/abeb10eb-2b99-4a6d-a08b-45726baa0cfe.jpeg 1080w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/abeb10eb-2b99-4a6d-a08b-45726baa0cfe-300x270.jpeg 300w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/abeb10eb-2b99-4a6d-a08b-45726baa0cfe-1024x921.jpeg 1024w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/abeb10eb-2b99-4a6d-a08b-45726baa0cfe-768x690.jpeg 768w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/p>\n<p>\u00a0<\/p>\n<p style=\"text-align: center\"><span style=\"font-weight: 400\">(Descri\u00e7\u00e3o da imagem acima: neste caso, temos a tela inicial do sistema, com um menu lateral contendo a logo da empresa no topo e, logo abaixo as op\u00e7\u00f5es do menu: in\u00edcio, clientes, gerenciar pets, gerenciar tipos, gerenciar ra\u00e7as, agendamentos, servi\u00e7os e funcion\u00e1rios. Na parte superior ao lado do menu temos a barra superior com, no lado direito, a foto do usu\u00e1rio. Abaixo da barra e ao lado do menu temos tr\u00eas espa\u00e7os: agendamentos, pets e funcion\u00e1rios. <\/span> <span style=\"font-weight: 400\">O espa\u00e7o de pets e o de funcion\u00e1rios cont\u00e9m duas fotos dos respectivos cadastros com o nome no canto inferior das imagens. Ao lado das mesmas possui setas de navega\u00e7\u00e3o de p\u00e1ginas e, abaixo, um bot\u00e3o para ver todos. J\u00e1 o espa\u00e7o de agendamento \u00e9 bem semelhante, mas al\u00e9m do nome, possui data, hor\u00e1rio e um bot\u00e3o para gerenciar agendamento. No final da p\u00e1gina, h\u00e1 o rodap\u00e9 com o nome da empresa no canto esquerdo e a logo no direito.)<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span style=\"font-weight: 400\">Nesta imagem temos todas as fun\u00e7\u00f5es exigidas na tela inicial do sistema, que possui acesso a todas as funcionalidades e atalhos para as mesmas. Apesar disso, do ponto de vista da UX ainda h\u00e1 alguns pontos que podem ser melhorados.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Vejamos um prot\u00f3tipo da mesma tela que leva em conta as heur\u00edsticas, cores e formas conforme apresentado anteriormente:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3346 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/64716e6b-9b2b-44e9-8bdf-1161eb3ff5a0.jpeg\" alt=\"\" width=\"1080\" height=\"973\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/64716e6b-9b2b-44e9-8bdf-1161eb3ff5a0.jpeg 1080w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/64716e6b-9b2b-44e9-8bdf-1161eb3ff5a0-300x270.jpeg 300w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/64716e6b-9b2b-44e9-8bdf-1161eb3ff5a0-1024x923.jpeg 1024w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/12\/64716e6b-9b2b-44e9-8bdf-1161eb3ff5a0-768x692.jpeg 768w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/p>\n<p>\u00a0<\/p>\n<p style=\"text-align: center\"><span style=\"font-weight: 400\">(Descri\u00e7\u00e3o da imagem: menu lateral semelhante ao anterior, com a diferen\u00e7a sendo o grupamento das funcionalidades gerenciar pets, tipos e ra\u00e7as em um \u00fanico menu \u201cpets\u201d que possui estes submenus. Al\u00e9m disso, para cada item de menu foi adicionado um \u00edcone correspondente: casa (in\u00edcio), pessoa (clientes), pata de animal (pets), l\u00e1pis (editar: gerenciar pets, tipos e ra\u00e7as), calend\u00e1rio (agendamentos), engrenagens (servi\u00e7os) e pessoa com gravata (funcion\u00e1rio). Menu superior com o diferencial da borda envolta do usu\u00e1rio arredondada. J\u00e1 a parte central da p\u00e1gina agora possui apenas uma se\u00e7\u00e3o com 3 abas: agendamentos, pets e funcion\u00e1rios, iniciando em agendamentos. Al\u00e9m disso, para cada agendamento est\u00e1 sendo exibido o servi\u00e7o agendado e o valor a ser cobrado. Por fim, as setas de navega\u00e7\u00e3o entre as p\u00e1ginas se encontram agora na parte inferior da se\u00e7\u00e3o, com indicador de qual p\u00e1gina se encontra).<\/span><\/p>\n<p>\u00a0<\/p>\n<p><span style=\"font-weight: 400\">Nesta tela \u00e9 poss\u00edvel notar as diferen\u00e7as. Iniciando-se pelas cores, agora o sistema transmite uma mensagem mais descontra\u00edda e com cara de pet shop (uma vez que os pets tendem a ser um pouco brincalh\u00f5es). Assim, usando tons mais vivos do que past\u00e9is (como no outro prot\u00f3tipo) tornam o sistema mais agrad\u00e1vel e com a identidade de uma pet shop. Al\u00e9m disso, as cores usadas, al\u00e9m das b\u00e1sicas (preto e branco), foram verde, laranja e azul.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Verde representa natureza, prosperidade.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Laranja, por sua vez, energia, entusiasmo.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">E azul seguran\u00e7a e confian\u00e7a (muitas vezes utilizado em sistemas banc\u00e1rios, como o Banco do Brasil, Ita\u00fa e Banrisul).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Essas cores s\u00e3o \u00f3timas para transmitir os valores que uma pet shop tem a oferecer. Al\u00e9m disso, as formas e fontes de texto nos t\u00edtulos s\u00e3o outro aspecto a ser observado. Ambas agora assumem um layout com bordas arredondadas, seguindo na linha do que foi estudado anteriormente, tornando o sistema mais amig\u00e1vel.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Pulando para a parte das heur\u00edsticas, agora o funcion\u00e1rio que acessar o sistema n\u00e3o precisa se lembrar em que p\u00e1gina est\u00e1, pois o sistema j\u00e1 est\u00e1 indicando (&#8220;in\u00edcio&#8221; no topo da p\u00e1gina, no menu lateral tamb\u00e9m est\u00e1 em destaque). Tamb\u00e9m indica a p\u00e1gina que est\u00e1 na visualiza\u00e7\u00e3o dos agendamentos (c\u00edrculos coloridos de cinza e azul &#8211; caso na p\u00e1gina -, na parte inferior da se\u00e7\u00e3o de agendamentos).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Outro ponto \u00e9 que o funcion\u00e1rio n\u00e3o precisa abrir o agendamento para verificar valores nem servi\u00e7os, muito menos se lembrar desses detalhes, pois isso j\u00e1 est\u00e1 vis\u00edvel nesta tela.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Al\u00e9m disso, para usu\u00e1rios mais experientes, agora h\u00e1 a possibilidade de minimizar o menu lateral, aumentando assim o espa\u00e7o para visualiza\u00e7\u00e3o das informa\u00e7\u00f5es principais da p\u00e1gina que est\u00e1 acessando.<\/span><\/p>\n<p><span style=\"font-weight: 400\">O menu lateral tamb\u00e9m possui \u00edcones para facilitar a associa\u00e7\u00e3o com as funcionalidades por parte do usu\u00e1rio, al\u00e9m de agrupar as op\u00e7\u00f5es de gerenciamento de tipos, pets e ra\u00e7as dentro de um \u00fanico menu pets, facilitando o mesmo encontrar as funcionalidades que precisa e diminuindo a extens\u00e3o do menu, ao mesmo tempo que o mant\u00e9m completo. Isso contribui tamb\u00e9m para a est\u00e9tica minimalista.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Por fim, um ponto de bastante destaque \u00e9 que agora possu\u00edmos apenas uma se\u00e7\u00e3o\/card com abas (agendamentos, pets e funcion\u00e1rios), diminuindo a polui\u00e7\u00e3o visual com informa\u00e7\u00f5es demais e mantendo o principal (agendamentos) em destaque.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Considerando as duas telas apresentadas, voc\u00ea n\u00e3o concorda que a segunda ficou muito mais f\u00e1cil de utilizar? Ainda h\u00e1 diversas outras t\u00e9cnicas que podem ser usadas para aprimorar este mesmo prot\u00f3tipo, mas j\u00e1 \u00e9 um come\u00e7o.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">UX \u00e9 uma \u00e1rea que est\u00e1 em alta e, portanto, ainda h\u00e1 diversos estudos sobre os melhores caminhos a se tomar. Antes de tudo, \u00e9 importante analisar o seu p\u00fablico alvo, suas necessidades, emo\u00e7\u00f5es e interesses e partir deste ponto para o desenvolvimento de uma solu\u00e7\u00e3o interessante e adequada a ele.\u00a0<\/span><\/p>\n<p>\u00a0<\/p>\n<p><b>Outras refer\u00eancias:<\/b><\/p>\n<p><a href=\"https:\/\/crushpets.com\/blog\/pet-shop\/identidade-visual-para-pet-shop\/\"><span style=\"font-weight: 400\">https:\/\/crushpets.com\/blog\/pet-shop\/identidade-visual-para-pet-shop\/<\/span><\/a><\/p>\n<p>\u00a0<\/p>\n<p style=\"text-align: right\"><strong>Ra\u00edssa Arantes, 2022<\/strong><\/p>\n<p><br \/><br \/><\/p>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Em um mundo cada vez mais tecnol\u00f3gico, \u00e9 comum o uso de programas e aplicativos no nosso cotidiano, seja para comunica\u00e7\u00e3o, passatempo, aux\u00edlio nas atividades di\u00e1rias e trabalho e diversos outros. Mas o que tornou isso comum a esse ponto? Foi a praticidade, utilidade e facilidade que essas aplica\u00e7\u00f5es trouxeram para essas atividades rotineiras. Apesar [&hellip;]<\/p>\n","protected":false},"author":5643,"featured_media":3344,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[149,199],"class_list":["post-3343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-redacao","tag-ux-ui"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/5643"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3343"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3343\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3344"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}