{"id":3590,"date":"2019-03-25T17:45:01","date_gmt":"2019-03-25T20:45:01","guid":{"rendered":"http:\/\/xexeu.elipse.com.br\/pt\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/"},"modified":"2023-05-09T11:14:24","modified_gmt":"2023-05-09T14:14:24","slug":"metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/","title":{"rendered":"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual."},"content":{"rendered":"<p><strong>1) INTERFACES MODERNAS E O CEN\u00c1RIO INDUSTRIAL<\/strong><\/p>\n<p align=\"justify\">Temos assistido nos \u00faltimos anos a uma grande evolu\u00e7\u00e3o no design de interfaces em geral. Sa\u00edmos recentemente de um cen\u00e1rio onde nossa intera\u00e7\u00e3o com o computador era baseada exclusivamente em interfaces por linhas de comando, e chegamos a um ponto em que at\u00e9 mesmo uma crian\u00e7a, de posse de um tablet, consegue aprender sozinha a operar o dispositivo e navegar na internet. Isto demonstra como as interfaces modernas est\u00e3o se tornando cada vez mais intuitivas, f\u00e1ceis de aprender e f\u00e1ceis de usar.<\/p>\n<p align=\"justify\">Este salto qualitativo \u00e9 fruto de in\u00fameras pesquisas e estudos realizados nas mais diversas \u00e1reas do conhecimento. Os resultados podem ser vistos em nosso dia a dia: com um smartphone, fazemos uma transa\u00e7\u00e3o banc\u00e1ria em poucos segundos, ou comparamos o pre\u00e7o de um produto em diversos sites de compras simultaneamente. Fazemos isto sem a necessidade de receber instru\u00e7\u00f5es espec\u00edficas sobre como operar estes aplicativos. Por\u00e9m, quando confrontamos este cen\u00e1rio com aquele praticado na ind\u00fastria, onde uma falha no processo pode envolver riscos \u00e0 vida, ao meio ambiente e ao patrim\u00f4nio, percebemos que a situa\u00e7\u00e3o fica muito longe do ideal.<\/p>\n<p align=\"justify\">Normalmente, as interfaces industriais s\u00e3o desenvolvidas por t\u00e9cnicos e engenheiros da pr\u00f3pria ind\u00fastria, e n\u00e3o por profissionais da \u00e1rea de design. \u00c9 portanto comum que estes t\u00e9cnicos desconhe\u00e7am as disciplinas e os estudos de design, psicologia e ci\u00eancias cognitivas que orientam o desenvolvimento das interfaces modernas. Al\u00e9m disso, as interfaces industriais s\u00e3o normalmente desenvolvidas em cen\u00e1rios de prazos e or\u00e7amentos apertados, o que tira a possibilidade de um desenvolvimento pautado em efic\u00e1cia, efici\u00eancia e satisfa\u00e7\u00e3o do usu\u00e1rio.<\/p>\n<p align=\"justify\">A presente metodologia vem justamente suprir esta lacuna. Ela une o que h\u00e1 de melhor na \u00e1rea de design para interfaces com a experi\u00eancia da ind\u00fastria aeron\u00e1utica, que \u00e9 refer\u00eancia em mat\u00e9ria de seguran\u00e7a.<\/p>\n<p align=\"justify\">Como exemplo, a tela a seguir foi desenvolvida dentro da metodologia de IHMs de Alta Performance Visual. As cores em geral s\u00e3o discretas, com poucos objetos exibindo cores chamativas. O desenho dos objetos \u00e9 minimalista, reduzido ao essencial. H\u00e1 objetos combinados, como o Chart com Bargraph e o Gr\u00e1fico de Barras com o Gr\u00e1fico de Linhas, que trazem informa\u00e7\u00e3o de melhor qualidade a um baixo custo de processamento cognitivo.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/1.png\" alt=\"\" width=\"500\" height=\"375\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>Os resultados desta metodologia v\u00e3o muito al\u00e9m da parte est\u00e9tica. A interface passa a atuar especialmente na preven\u00e7\u00e3o de falhas e na redu\u00e7\u00e3o de erros operativos, atrav\u00e9s do aumento da sua efici\u00eancia. Proporciona maior conforto ao usu\u00e1rio, permitindo maior facilidade de aprendizado e memoriza\u00e7\u00e3o. Permite a visualiza\u00e7\u00e3o de informa\u00e7\u00e3o efetiva ao inv\u00e9s de apenas dados brutos. Isto s\u00f3 para citar apenas alguns benef\u00edcios.<\/p>\n<p align=\"justify\"><strong>2)\u00a0VALE A PENA MUDAR?<\/strong><\/p>\n<p>\u00c9 normal encontrar resist\u00eancia de muitas empresas para migrar a interface de seu sistema para um padr\u00e3o de alta performance visual. A empresa pode n\u00e3o ver a necessidade de realizar tal mudan\u00e7a, ou pode achar que o esfor\u00e7o \u00e9 muito grande e que n\u00e3o justifica o benef\u00edcio.<\/p>\n<p align=\"justify\">Aqui \u00e9 necess\u00e1ria uma reflex\u00e3o. Testes foram realizados confrontando as IHMs de alta performance visual com IHMs tradicionais, e os resultados s\u00e3o t\u00e3o significativos que n\u00e3o podem ser ignorados:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/2.png\" alt=\"\" width=\"500\" height=\"270\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Estes n\u00fameros nos dizem que \u00e9 poss\u00edvel reduzir custos motivados por falhas e at\u00e9 salvar vidas simplesmente melhorando a usabilidade de nossas interfaces.<\/p>\n<p align=\"justify\">Se considerarmos ainda que esta metodologia pode ser aplicada aos poucos ou em partes a um sistema j\u00e1 existente, obtendo alguns de seus benef\u00edcios sem a necessidade de come\u00e7ar tudo do zero, a rela\u00e7\u00e3o custo-benef\u00edcio fica ainda mais vantajosa.<\/p>\n<p align=\"justify\"><strong>3) FOCO NA SEGURAN\u00c7A<\/strong><\/p>\n<p>Uma interface industrial segura tem que ter boa usabilidade. Quando desenvolvemos uma interface industrial, devemos considerar o usu\u00e1rio em primeiro lugar, e depois o processo.<\/p>\n<p align=\"justify\">Em uma analogia, imagine uma estrada constru\u00edda sem muita preocupa\u00e7\u00e3o com os usu\u00e1rios: existe pouca sinaliza\u00e7\u00e3o, e a que existe n\u00e3o \u00e9 eficiente \u00e0 noite; a qualidade do asfalto usado e o sistema de drenagem n\u00e3o permitem uma frenagem adequada, principalmente na chuva; n\u00e3o h\u00e1 sistema de socorro em caso de pane, e nem \u00e1rea para acostamento em muitos pontos. Apesar disto, muitos usu\u00e1rios utilizam a estrada sem problemas, por\u00e9m n\u00e3o significa que ela seja segura. Neste caso, a usabilidade da estrada em condi\u00e7\u00f5es normais pode at\u00e9 ser razo\u00e1vel, por\u00e9m em uma situa\u00e7\u00e3o cr\u00edtica ficar\u00e1 evidente a falta de aten\u00e7\u00e3o despendida com seus usu\u00e1rios.<\/p>\n<p align=\"justify\">Com as interfaces ocorre o mesmo: a usabilidade deve ser boa tanto em condi\u00e7\u00f5es normais como em situa\u00e7\u00f5es cr\u00edticas, e para isto devemos desenvolver a interface com foco no usu\u00e1rio.<\/p>\n<p align=\"justify\">A norma NBR ISO 9241-11 define Usabilidade como a combina\u00e7\u00e3o de Efetividade, Efici\u00eancia e Satisfa\u00e7\u00e3o do Usu\u00e1rio em um sistema. Esta mesma norma aponta como medidas de usabilidade:<\/p>\n<ul>\n<li>Facilidade de aprendizagem<\/li>\n<li>Facilidade de memoriza\u00e7\u00e3o<\/li>\n<li>Baixa taxa de erros<\/li>\n<\/ul>\n<p align=\"justify\">Muitos acidentes ocorrem por falha humana. Mas se a interface for bem projetada, ela pode ajudar a evitar muitas trag\u00e9dias. H\u00e1 muitos casos de acidentes que foram causados ou agravados por falhas no design de interfaces. Vejamos alguns deles:<\/p>\n<p><strong>3.1\u00a0Acidente na Refinaria BP Texas<br \/>\n<\/strong><br \/>\nNo dia 23 de mar\u00e7o de 2005 ocorreu uma s\u00e9rie de explos\u00f5es na refinaria BP Texas City durante o <em>startup<\/em> de uma unidade de isomeriza\u00e7\u00e3o de hidrocarbonetos. Quinze pessoas morreram, e 180 ficaram feridas.<\/p>\n<p align=\"justify\">Segundo o relat\u00f3rio final, entre todos os fatores que causaram a trag\u00e9dia, uma falha de design na interface contribuiu para o acidente.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/3.png\" alt=\"\" width=\"500\" height=\"316\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"center\"><span style=\"font-size: xx-small;\">Fonte: U. S. Chemical Safety and Hazard Investigation Board &#8211; <a href=\"http:\/\/www.csb.gov\/assets\/1\/19\/CSBFinalReportBP.pdf\">http:\/\/www.csb.gov\/assets\/1\/19\/CSBFinalReportBP.pdf<\/a> <\/span><\/p>\n<p align=\"justify\">Durante o <em>startup <\/em>da unidade, os operadores n\u00e3o foram capazes de detectar que havia excesso de l\u00edquido inflam\u00e1vel na unidade. O motivo: na tela usada no <em>startup<\/em> havia indica\u00e7\u00e3o do l\u00edquido deixando a unidade, mas n\u00e3o havia indica\u00e7\u00e3o do l\u00edquido que entrava. Este indicador existia, mas estava em outra tela.<\/p>\n<p><strong>3.2 Acidente com o voo da Indian Airlines<\/strong><\/p>\n<p align=\"justify\">No dia 14 de fevereiro de 1990, o voo 605 da Indian Airlines fazia a rota Bombaim-Bangalore, na \u00cdndia. Pouco antes do pouso, a tripula\u00e7\u00e3o fez algumas sele\u00e7\u00f5es de voo incorretas e o Airbus A320 come\u00e7ou a perder velocidade. A tripula\u00e7\u00e3o percebeu este fato muito tardiamente, quando a situa\u00e7\u00e3o j\u00e1 era irrevers\u00edvel. O jato caiu, matando 92 pessoas e ferindo 54.<\/p>\n<p align=\"justify\">Ap\u00f3s o acidente, a Airbus implementou uma melhoria simples, por\u00e9m eficiente, no indicador de velocidade do avi\u00e3o: extendeu a linha amarela de refer\u00eancia de velocidade, para melhor visualiza\u00e7\u00e3o.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/4.png\" alt=\"\" width=\"500\" height=\"243\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"center\">Fonte: Federal Aviation Administration &#8211; <a href=\"http:\/\/lessonslearned.faa.gov\/ll_main.cfm?TabID=1&#038;LLID=71&#038;LLTypeID=10\">http:\/\/lessonslearned.faa.gov\/ll_main.cfm?TabID=1&#038;LLID=71&#038;LLTypeID=10<\/a><\/p>\n<p align=\"justify\">Tanto no acidente da BP Texas como no acidente da Indian Airlines, os operadores e a tripula\u00e7\u00e3o n\u00e3o conseguiram avaliar o que ocorria na situa\u00e7\u00e3o real em tempo de evitar os acidentes. Nestes casos, assim como em muitos outros, houve perda da Consci\u00eancia Situacional.<\/p>\n<p><strong>4) COMO TORNAR MINHA INTERFACE MAIS SEGURA<\/strong><\/p>\n<p align=\"justify\">O objetivo principal desta metodologia \u00e9 aumentar a Consci\u00eancia Situacional do operador, pois desta forma a interface pode contribuir efetivamente para o aumento da seguran\u00e7a.<\/p>\n<p><em><strong>&#8220;Consci\u00eancia Situacional \u00e9 estar ciente do que se passa ao seu redor.<br \/>\n\u00c9 a perfeita sintonia entre a situa\u00e7\u00e3o percebida e a situa\u00e7\u00e3o real.&#8221;<\/strong><\/em><\/p>\n<p align=\"justify\">A tomada de Consci\u00eancia Situacional envolve tr\u00eas aspectos: Percep\u00e7\u00e3o, Compreens\u00e3o e Proje\u00e7\u00e3o.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/5.png\" alt=\"\" width=\"500\" height=\"226\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p align=\"justify\">Primeiramente percebe-se o fato. Em seguida, \u00e9 preciso compreender o fato dentro de um contexto, ou seja, entender se a situa\u00e7\u00e3o est\u00e1 normal ou n\u00e3o, pr\u00f3xima da normalidade ou da anormalidade. Depois, deve ser poss\u00edvel projetar as consequ\u00eancias do fato percebido dentro de seu contexto, a fim de saber qual ser\u00e1 a a\u00e7\u00e3o necess\u00e1ria a ser tomada e sua urg\u00eancia.<\/p>\n<p>Como implementar estes tr\u00eas aspectos na interface?<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/6.png\" alt=\"\" width=\"500\" height=\"203\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">O dado bruto nos d\u00e1 a Percep\u00e7\u00e3o do valor. Mas n\u00e3o nos diz se este valor est\u00e1 dentro da normalidade, ou no limiar de um alarme. N\u00e3o nos oferece contexto.<\/p>\n<p align=\"justify\">A Compreens\u00e3o pode ser obtida atrav\u00e9s da indica\u00e7\u00e3o de limites de alarmes, a fim de deixar claro ao operador qual \u00e9 exatamente a faixa de opera\u00e7\u00e3o em condi\u00e7\u00f5es normais da vari\u00e1vel monitorada. Esta indica\u00e7\u00e3o de contexto pode ser exibida em v\u00e1rios objetos como charts, radar charts ou bargraphs, como indicado no exemplo. No entanto, estes limites ainda n\u00e3o nos permitem projetar as consequ\u00eancias do comportamento monitorado, n\u00e3o nos apontam a tend\u00eancia da vari\u00e1vel ao longo do tempo.<\/p>\n<p align=\"justify\">A Proje\u00e7\u00e3o pode ser obtida de algumas formas distintas. Talvez a mais intuitiva seja atrav\u00e9s de um chart. Assim \u00e9 poss\u00edvel estimar o comportamento da vari\u00e1vel no tempo.<\/p>\n<p><strong>5) COMO MELHORAR A USABILIDADE DA INTERFACE<\/strong><\/p>\n<p align=\"justify\">O objetivo da interface industrial \u00e9 permitir a intera\u00e7\u00e3o do operador com o processo. Isto inclui o fato de alertar o operador, de forma eficiente, quando algo est\u00e1 errado na planta.<\/p>\n<p align=\"justify\">Para cumprir esta tarefa de forma eficiente, a interface deve alertar o operador para o que realmente importa. N\u00e3o deve chamar sua aten\u00e7\u00e3o para algo sem import\u00e2ncia ao mesmo tempo em que sinaliza uma falha, por exemplo.<\/p>\n<p align=\"justify\">O uso de t\u00e9cnicas de design pr\u00e9-atentivo possibilita aumentar esta efici\u00eancia. Mas o que seria isto?<\/p>\n<p align=\"justify\">Nosso c\u00e9rebro processa e armazena as informa\u00e7\u00f5es visuais que nossos olhos recebem. Pesquisadores criaram um modelo para simular este funcionamento. Este modelo cont\u00e9m uma mem\u00f3ria chamada Ic\u00f4nica ou Sensorial. Nesta etapa ocorre um processamento muito r\u00e1pido da informa\u00e7\u00e3o visual recebida. \u00c9 quando percebemos algo, mesmo que \u201cde relance\u201d, ou quando algo \u201csalta\u201d aos nossos olhos.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/7.png\" alt=\"\" width=\"500\" height=\"214\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Em seguida a informa\u00e7\u00e3o \u00e9 transferida para a mem\u00f3ria de curta dura\u00e7\u00e3o (MCD), onde pode ser descartada ou armazenada na mem\u00f3ria de longa dura\u00e7\u00e3o (MLD).<\/p>\n<p align=\"justify\">A MCD \u00e9 limitada e tempor\u00e1ria. A informa\u00e7\u00e3o n\u00e3o fica muito tempo armazenada nesta mem\u00f3ria.<\/p>\n<p align=\"justify\">Se sobrecarregamos o operador com informa\u00e7\u00e3o visual desnecess\u00e1ria, a MCD fica saturada e precisa descartar uma informa\u00e7\u00e3o antiga para que uma nova informa\u00e7\u00e3o possa ser armazenada. Ou seja, n\u00e3o s\u00f3 ocorre perda de informa\u00e7\u00e3o, como a informa\u00e7\u00e3o descartada pode ser essencial para sanar uma emerg\u00eancia. Em um processo industrial, n\u00e3o \u00e9 recomend\u00e1vel que isto aconte\u00e7a.<\/p>\n<p align=\"justify\">Por este motivo devemos sempre evitar telas com excesso de cores e objetos. Isto tira a efici\u00eancia da fun\u00e7\u00e3o informativa da interface, diminuindo sua usabilidade.<\/p>\n<p align=\"justify\">Por isso, quando n\u00e3o precisamos saber o valor exato de cada ponto, \u00e9 mais indicado representarmos valores anal\u00f3gicos similares ou correlacionados de forma gr\u00e1fica. Vejamos dois exemplos:<\/p>\n<p>&nbsp;<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/8.png\" alt=\"\" width=\"500\" height=\"220\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>Outro objeto que oferece boa visualiza\u00e7\u00e3o sobre vari\u00e1veis correlacionadas ou mesmo KPIs \u00e9 o gr\u00e1fico do tipo Radar:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/9.png\" alt=\"\" width=\"208\" height=\"173\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p align=\"justify\">Neste gr\u00e1fico, a linha cont\u00ednua indica a situa\u00e7\u00e3o corrente do processo, instante a instante. A linha pontilhada indica a situa\u00e7\u00e3o ideal. Assim, \u00e9 poss\u00edvel comparar o qu\u00e3o pr\u00f3ximo do ideal cada vari\u00e1vel do gr\u00e1fico se encontra a cada instante.<\/p>\n<p><strong>6) COMO USAR CORES<\/strong><\/p>\n<p align=\"justify\">Dados mais importantes devem sempre se destacar dos dados menos importantes. Para isso devemos usar cores discretas para a tela como um todo, evitando o uso de gradientes de cores. Para indicar estados cr\u00edticos e de maior relev\u00e2ncia no processo, prefira cores que chamem a aten\u00e7\u00e3o do operador.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/10.png\" alt=\"\" width=\"500\" height=\"387\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>Representa\u00e7\u00f5es realistas de objetos trazem consigo ao menos dois problemas: o primeiro \u00e9 o uso muito destacado das cores; o segundo, o excesso de pixels com fun\u00e7\u00e3o decorativa. Assim, ao inv\u00e9s de usar uma representa\u00e7\u00e3o como esta:<\/p>\n<p>&nbsp;<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/11.png\" alt=\"\" width=\"420\" height=\"253\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>Prefira outra mais simples e eficiente:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/12.png\" alt=\"\" width=\"208\" height=\"246\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p align=\"justify\">Repare que nesta representa\u00e7\u00e3o praticamente n\u00e3o h\u00e1 pixels decorativos, nem tampouco gradientes de cores. O objetivo aqui \u00e9 valorizar o uso de pixels de dados (Data Pixels) e reduzir ao m\u00e1ximo o uso de pixels decorativos (Non-Data Pixels).<\/p>\n<p align=\"justify\">Outra quest\u00e3o a ser evitada \u00e9 o uso de gradientes de cores no fundo de telas, pois o contexto afeta nossa percep\u00e7\u00e3o de cor. No exemplo abaixo, os dois ret\u00e2ngulos possuem a mesma cor, por\u00e9m percebemos um mais claro que o outro devido \u00e0 varia\u00e7\u00e3o de cor do fundo:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/13.png\" alt=\"\" width=\"500\" height=\"282\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">O uso de cores nos unifilares tamb\u00e9m merece algumas considera\u00e7\u00f5es. Inicialmente, podemos avaliar o uso da cor de fundo da tela como:<\/p>\n<ul>\n<li>Fundo claro<\/li>\n<li>Fundo escuro<\/li>\n<\/ul>\n<p align=\"justify\">O fundo claro emite maior quantidade de luz, o que pode provocar fadiga visual em um cen\u00e1rio de longa exposi\u00e7\u00e3o, sendo por isso mais indicado para visualiza\u00e7\u00f5es de curta dura\u00e7\u00e3o. J\u00e1 o fundo escuro, por emitir menor quantidade de luz, \u00e9 mais indicado para cen\u00e1rios em que a tela \u00e9 visualizada por longos per\u00edodos, como em centros de distribui\u00e7\u00e3o de energia.<\/p>\n<p align=\"justify\">Esta metodologia recomenda a representa\u00e7\u00e3o de status de objetos da seguinte forma:<\/p>\n<ul>\n<li>Objeto mais claro que o fundo: Ligado<\/li>\n<li>Objeto mais escuro que o fundo: Desligado<\/li>\n<li>Objeto da mesma cor que o fundo: Outro estado predefinido<\/li>\n<\/ul>\n<p align=\"justify\">A fim de se manter a coer\u00eancia com esta conven\u00e7\u00e3o visual, n\u00e3o \u00e9 recomendado o uso de fundo de tela nas cores branca ou preta, pois o branco impossibilita a representa\u00e7\u00e3o de objetos mais claros e o preto faz o mesmo com objetos mais escuros. A indica\u00e7\u00e3o aqui \u00e9 o uso de cores neutras intermedi\u00e1rias, como cinza claro e cinza escuro.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/New1.png\" alt=\"\" width=\"233\" height=\"435\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Outro fator importante \u00e9 a quantidade de tens\u00f5es representada na tela:<\/p>\n<ul>\n<li>At\u00e9 duas tens\u00f5es<\/li>\n<li>Tr\u00eas ou mais tens\u00f5es<\/li>\n<\/ul>\n<p align=\"justify\">Representar duas tens\u00f5es atrav\u00e9s da varia\u00e7\u00e3o de espessura de linha &#8211; uma grossa e outra fina &#8211; \u00e9 a princ\u00edpio interessante, j\u00e1 que a distin\u00e7\u00e3o entre uma linha mais grossa e outra mais fina \u00e9 f\u00e1cil. Al\u00e9m disso, como a altera\u00e7\u00e3o de espessura n\u00e3o envolve o uso de cores, pode-se usar esta configura\u00e7\u00e3o dentro de temas de cores: a linha mais fina sempre ser\u00e1 a mais fina, independentemente do tema selecionado.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/New2.png\" alt=\"\" width=\"500\" height=\"435\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">J\u00e1 no caso de tr\u00eas tens\u00f5es, a representa\u00e7\u00e3o atrav\u00e9s de espessuras fica mais complicada, pois pode n\u00e3o ser t\u00e3o simples para algumas pessoas distinguir uma ou mais espessuras intermedi\u00e1rias com plena seguran\u00e7a. Um alternativa seria manter a representa\u00e7\u00e3o por espessuras para duas tens\u00f5es e representar a terceira tens\u00e3o atrav\u00e9s de uma linha pontilhada. Mas neste caso a linha pontilhada passa a ideia de falta de continuidade, sendo incoerente com a representa\u00e7\u00e3o de uma linha continuamente energizada.<\/p>\n<p align=\"justify\">Por isso, para representar de tr\u00eas ou mais tens\u00f5es, \u00e9 recomendado utilizar varia\u00e7\u00e3o de cores, o que normalmente j\u00e1 \u00e9 feito em muitos centros de opera\u00e7\u00e3o, onde cada tens\u00e3o \u00e9 representada por uma cor diferente. Neste caso, fica invi\u00e1vel o uso de temas de cores, pois pode se tornar complexo demais combinar as cores das tens\u00f5es, que podem ser muitas, com as cores de fundo de tela proporcionadas pelos temas. Aqui, o mais indicado \u00e9 fixar cores de fundo de tela e dos objetos, ou seja, tir\u00e1-los do tema, a fim de garantir que todas as cores sejam percebidas de forma correta pelo operador.<\/p>\n<p><strong>7) COMO REPRESENTAR QUANTIDADES<\/strong><\/p>\n<p>Vari\u00e1veis podem ter seus valores representados de forma anal\u00f3gica ou digital:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/14.png\" alt=\"\" width=\"350\" height=\"133\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>A representa\u00e7\u00e3o digital \u00e9 mais indicada quando a exatid\u00e3o do valor \u00e9 mais importante que o contexto:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/15.png\" alt=\"\" width=\"145\" height=\"61\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">J\u00e1 a representa\u00e7\u00e3o anal\u00f3gica \u00e9 mais indicada na situa\u00e7\u00e3o inversa, ou seja, quando o contexto \u00e9 mais importante que a exatid\u00e3o.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/16.png\" alt=\"\" width=\"250\" height=\"91\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">No caso da representa\u00e7\u00e3o anal\u00f3gica, \u00e9 sempre recomendado usar comprimentos de linhas para expressar quantidade, ao inv\u00e9s de \u00e1reas. Isto porque nosso c\u00e9rebro avalia melhor comprimentos do que \u00e1reas.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/17.png\" alt=\"\" width=\"500\" height=\"298\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>8) COMO REPRESENTAR ALARMES<\/strong><\/p>\n<p>Alarmes normalmente est\u00e3o associados a um n\u00edvel de severidade, que pode ser alta (1), m\u00e9dia (2) ou baixa (3). O recomendado neste caso \u00e9 usar um indicador espec\u00edfico para cada caso:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/18.png\" alt=\"\" width=\"200\" height=\"197\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p align=\"justify\">Repare que os indicadores s\u00e3o diferenciados n\u00e3o somente pela sua cor, mas tamb\u00e9m pela sua forma. Isto se deve ao n\u00famero relativamente alto de pessoas que s\u00e3o portadoras de algum tipo de dist\u00farbio visual que as impede de diferenciar algumas cores. Este dist\u00farbio \u00e9 chamado de Daltonismo.<\/p>\n<p align=\"justify\">Segundo a Genetics Home Reference, at\u00e9 8% dos homens e 0,5% das mulheres com ascend\u00eancia do norte europeu possuem dificuldades para diferenciar o vermelho do verde. Outras combina\u00e7\u00f5es de cores tamb\u00e9m oferecem problemas, mas nestes casos a porcentagem de pessoas atingidas \u00e9 menor.<\/p>\n<p align=\"justify\">Por isso a interface deve oferecer aos portadores de daltonismo a capacidade de diferenciar todos os estados operativos e suas sinaliza\u00e7\u00f5es de forma segura.<\/p>\n<p align=\"justify\">Uma forma de sabermos se nossa interface est\u00e1 acess\u00edvel \u00e9 analisarmos suas telas, objetos e indicadores em tons de cinza, o popular \u201cpreto e branco\u201d.<\/p>\n<p align=\"justify\">No exemplo a seguir, o primeiro quadro possui quatro displays, sendo que um deles n\u00e3o apresenta condi\u00e7\u00e3o de alarme e est\u00e1 com a cor branca. Os tr\u00eas restantes, em amarelo, representam condi\u00e7\u00e3o de alarme.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/19.png\" alt=\"\" width=\"500\" height=\"205\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>&nbsp;<\/p>\n<p align=\"justify\">O segundo quadro repete o primeiro, por\u00e9m em tons de cinza. Fica n\u00edtida a dificuldade de diferencia\u00e7\u00e3o entre os estados normal e alarme. J\u00e1 nos demais quadros, com os indicadores espec\u00edficos de alarmes, note como \u00e9 seguro diferenci\u00e1-los, mesmo na imagem em tons de cinza (quadro mais \u00e0 direita).<\/p>\n<p><strong>9) COMO REPRESENTAR ESTADOS DE EQUIPAMENTOS<\/strong><\/p>\n<p align=\"justify\">Seguindo a mesma linha da representa\u00e7\u00e3o de alarmes, os equipamentos devem ser representados com o cuidado de que possam ser diferenciados por portadores de daltonismo. Por isso recomenda-se usar apenas tr\u00eas cores para o objeto:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/20.png\" alt=\"\" width=\"400\" height=\"236\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Dentro desta metodologia, n\u00e3o \u00e9 recomend\u00e1vel usar uma cor de fundo de tela totalmente preta ou branca. O indicado aqui \u00e9 um tom intermedi\u00e1rio, de tal forma que se possa colorir objetos com tons mais claros ou mais escuros.<\/p>\n<p align=\"justify\">Outro ponto importante: n\u00e3o utilize cores para enfatizar os estados de objetos. Se a bomba estiver ligada (e o normal \u00e9 que esteja ligada), n\u00e3o h\u00e1 motivo para chamar a aten\u00e7\u00e3o do operador com uma cor chamativa como vermelho ou verde.<\/p>\n<p align=\"justify\">Se for necess\u00e1rio indicar mais estados do objeto, como por exemplo \u201cpartindo\u201d, \u201cem transi\u00e7\u00e3o\u201d, etc., o mais indicado \u00e9 criar um indicador a parte, tal como os indicadores de alarmes. Um simples \u00edcone ao lado do objeto, como uma engrenagem ou uma seta, pode fornecer a informa\u00e7\u00e3o desejada de forma bem mais eficiente do que uma vasta gama de cores indicativas de cada estado.<\/p>\n<p align=\"justify\"><strong>10) COMO CRIAR UMA HIERARQUIA VISUAL<\/strong><\/p>\n<p align=\"justify\">Uma hierarquia visual serve para indicar ao usu\u00e1rio o n\u00edvel de import\u00e2ncia que os elementos t\u00eam entre si (mais, menos, ou igualmente importante), indicando poss\u00edveis rela\u00e7\u00f5es entre eles.<\/p>\n<p align=\"justify\">H\u00e1 v\u00e1rias formas para se criar uma hierarquia visual em uma interface. Uma das formas mais simples \u00e9 atrav\u00e9s do tamanho dos objetos:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/21.png\" alt=\"\" width=\"345\" height=\"249\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Objetos de mesmo tamanho indicam similaridade na sua posi\u00e7\u00e3o hier\u00e1rquica; j\u00e1 objetos maiores transmitem a ideia de n\u00edveis hier\u00e1rquicos superiores.<\/p>\n<p><strong>11)\u00a0COMO INDICAR AGRUPAMENTOS DE OBJETOS<\/strong><\/p>\n<p>\u00c9 natural do ser humano considerar que objetos circundados por uma forma ou fundo preenchido t\u00eam caracter\u00edsticas em comum.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/22.png\" alt=\"\" width=\"500\" height=\"168\" align=\"bottom\" border=\"0\" \/><\/p>\n<p>Usar este recurso para transmitir a ideia de grupo \u00e9 uma forma eficiente:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/23.png\" alt=\"\" width=\"500\" height=\"279\" align=\"bottom\" border=\"0\" \/><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>12) COMO ANIMAR OBJETOS<\/strong><\/p>\n<p align=\"justify\">Movimento \u00e9 um poderoso atrativo para os olhos, muito usado como recurso de entretenimento. Animar esteiras rolantes, p\u00e1s girat\u00f3rias, fluxos de l\u00edquidos, entre outros, serve apenas para tirar a aten\u00e7\u00e3o do operador de algo priorit\u00e1rio para algo menos importante.<\/p>\n<p align=\"justify\">Se as anima\u00e7\u00f5es s\u00e3o usadas para indicar um estado do processo, por exemplo \u201cturbina girando\u201d, o mais recomendado \u00e9 indicar este estado atrav\u00e9s de um indicador est\u00e1tico pr\u00f3prio para este fim. Caso contr\u00e1rio, nossa interface se parecer\u00e1 mais com um sistema de entretenimento do que com um sistema SCADA.<\/p>\n<p align=\"justify\">Um recurso interessante em que a anima\u00e7\u00e3o pode ser \u00fatil \u00e9 o bom e velho pisca para animar indicadores de alarme que ainda n\u00e3o foram reconhecidos.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>13) COMO POSICIONAR OBJETOS NA TELA<\/strong><\/p>\n<p>D\u00ea prefer\u00eancia a um posicionamento plano, a fim de representar a informa\u00e7\u00e3o com maior clareza.<\/p>\n<p>No exemplo a seguir, apesar do gr\u00e1fico 3D ser mais chamativo, o gr\u00e1fico 2D \u00e9 mais claro na indica\u00e7\u00e3o das quantidades:<\/p>\n<p>&nbsp;<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/24.png\" alt=\"\" width=\"500\" height=\"313\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Quando desenhamos uma tela ou objeto com perspectiva e ponto de fuga (perspectiva c\u00f4nica), temos que distorcer os objetos para criar a ilus\u00e3o de profundidade. Esta distor\u00e7\u00e3o viola os princ\u00edpios de visibilidade, clareza e hierarquia visual, pois os objetos ao fundo tendem a ser menores do que os que est\u00e3o \u00e0 frente, mesmo que tenham a mesma import\u00e2ncia.<\/p>\n<p>&nbsp;<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/25.png\" alt=\"\" width=\"500\" height=\"170\" align=\"bottom\" border=\"0\" \/><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>14) TELAS 2D OU 3D?<\/strong><\/p>\n<p align=\"justify\">Para decidir entre ambas, recomendamos primeiramente definir a fun\u00e7\u00e3o da tela para depois saber qual representa\u00e7\u00e3o \u00e9 a melhor.<\/p>\n<p align=\"justify\">Telas 3D possuem percep\u00e7\u00e3o espacial limitada, pois o 3D \u00e9 um efeito ilus\u00f3rio: a imagem aparenta ter profundidade, quando na realidade \u00e9 plana. Al\u00e9m disso, a representa\u00e7\u00e3o realista traz consigo o excesso de cores e detalhes decorativos, sobrecarregando o sistema cognitivo do operador com informa\u00e7\u00f5es desnecess\u00e1rias.<\/p>\n<p align=\"justify\">Se a tela 3D fizer uso de perspectiva com pontos de fuga (perspectiva c\u00f4nica), isto empobrece ainda mais a representa\u00e7\u00e3o da informa\u00e7\u00e3o, pois os objetos s\u00e3o deformados \u00e0 medida que se aproximam ou se afastam do ponto de fuga. Isto prejudica sua visibilidade e legibilidade, al\u00e9m de violar a hieraquia visual da interface.<\/p>\n<p align=\"justify\">Estes problemas podem ser constatados no exemplo a seguir, onde podemos ver o excesso de cores e detalhes realistas. Note tamb\u00e9m os objetos em destaque na segunda imagem. S\u00e3o os mesmos equipamentos, com o mesmo tamanho real, mas que aparentam ter tamanhos diferentes devido \u00e0 perspectiva.<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/26.png\" alt=\"\" width=\"500\" height=\"280\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Por outro lado, o 3D possui grande apelo est\u00e9tico, sendo por isso indicado para telas meramente demonstrativas, onde a apresenta\u00e7\u00e3o \u00e9 o mais importante. Al\u00e9m disto, o 3D favorece a vis\u00e3o geral em detrimento da vis\u00e3o espec\u00edfica. Isto \u00e9 \u00fatil se quisermos criar, por exemplo, uma tela de navega\u00e7\u00e3o onde precisamos ter a vis\u00e3o geral de nossa planta, ou de uma \u00e1rea muito extensa, como um mapa.<\/p>\n<p align=\"justify\">Com base nisto, podemos definir grupos de telas para a nossa interface da seguinte forma:<\/p>\n<ul>\n<li>Um conjunto de telas 2D para opera\u00e7\u00e3o do processo.<\/li>\n<li>Um conjunto menor de telas 3D para fins de apresenta\u00e7\u00e3o, com visual mais elaborado e sem fun\u00e7\u00e3o operativa.<\/li>\n<li>Uma ou mais telas 3D para navega\u00e7\u00e3o, onde \u00e9 necess\u00e1rio ter uma vis\u00e3o geral de uma \u00e1rea mais extensa. Pode ser uma grande arquitetura geral ou um mapa.<\/li>\n<\/ul>\n<p align=\"justify\">Uma forma de se mesclar desenhos 3D com objetos operativos pode ser vista na tela a seguir:<\/p>\n<p align=\"center\"><img loading=\"lazy\" title=\"\" src=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/27.png\" alt=\"\" width=\"500\" height=\"270\" align=\"bottom\" border=\"0\" \/><\/p>\n<p align=\"justify\">Repare que o cen\u00e1rio foi fragmentado, e cada desenho representa uma parte deste cen\u00e1rio. Suas cores s\u00e3o suaves e n\u00e3o competem com as cores dos demais objetos de opera\u00e7\u00e3o. Mesmo assim est\u00e3o integrados com estes objetos e com a representa\u00e7\u00e3o de fluxo do processo como um todo. Neste caso os desenhos foram feitos usando uma perspectiva axonom\u00e9trica (sem pontos de fuga) ao inv\u00e9s da perspectiva c\u00f4nica (com pontos de fuga), a fim de evitar distor\u00e7\u00f5es e simplificar sua representa\u00e7\u00e3o.<\/p>\n<p align=\"justify\">Mesmo apresentando maior complexidade, esta solu\u00e7\u00e3o pode ser uma boa alternativa quando \u00e9 necess\u00e1rio ter uma apresenta\u00e7\u00e3o diferenciada em algumas telas operativas, sem sacrificar os princ\u00edpios desta metodologia.<\/p>\n<p><b>15) DOWNLOAD TEMPLATE<\/b><\/p>\n<p align=\"justify\">O download do <b>Conjunto de bibliotecas para IHMs de alta performance<\/b> est\u00e1 dispon\u00edvel em <a href=\"https:\/\/www.elipse.com.br\/downloads\/?key=HighPerformance+Template&#038;language=ptbr\">nosso site<\/a>.<\/p>\n<p align=\"justify\"><strong>16) REFER\u00caNCIAS BIBLIOGR\u00c1FICAS<\/strong><\/p>\n<p>ASSOCIA\u00c7\u00c3O BRASILEIRA DE NORMAS T\u00c9CNICAS. <strong>NBR 9241: Requisitos ergon\u00f4micos para o trabalho com dispositivos de intera\u00e7\u00e3o visual: Parte 11: Orienta\u00e7\u00f5es sobre usabilidade.<\/strong> Rio de Janeiro: ABNT, 2000.<\/p>\n<p>ENDSLEY, Mica R. Toward a theory of situation awareness in dynamic systems. <strong>Human Factors and Ergonomics Society.<\/strong> p. 32-64. Mar\/1995.<\/p>\n<p>ERRINGTON, Jamie; DeMaere, Tim; Wade, Eric. <strong>Supporting key console operator interactions through the control system interface.<\/strong> Atlanta: Human Centered Solutions; NOVA Chemicals Corporation, 2005.<\/p>\n<p>FEDERAL AVIATION ADMINISTRATION. <strong>Indian Airlines Flight 605, Airbus A320-231, VT-EPN. <\/strong>Dispon\u00edvel em <a href=\"http:\/\/lessonslearned.faa.gov\/ll_main.cfm?TabID=1&#038;LLID=71&#038;LLTypeID=0\">http:\/\/lessonslearned.faa.gov\/ll_main.cfm?TabID=1&#038;LLID=71&#038;LLTypeID=0<\/a>. Acesso em Out\/2014.<\/p>\n<p>FEW, Stephen. <strong>Information dashboard design: the effective visual communication of data.<\/strong> 1. ed. Sebastopol: O&#8217;Reilly, 2006.<\/p>\n<p>GENETICS HOME REFERENCE. <strong>Color vision deficiency.<\/strong> Dispon\u00edvel em <a href=\"http:\/\/ghr.nlm.nih.gov\/condition\/color-vision-deficiency\">http:\/\/ghr.nlm.nih.gov\/condition\/color-vision-deficiency<\/a>. Acesso em Out\/2014.<\/p>\n<p>HOLLIFIELD, Bill et al. <strong>The high performance HMI handbook.<\/strong> 1. ed. Houston: PAS, 2008.<\/p>\n<p>PREECE, Jennifer et al. <strong>Design de intera\u00e7\u00e3o: al\u00e9m da intera\u00e7\u00e3o homem-computador. <\/strong>1. ed. Porto Alegre: Bookman, 2005.<\/p>\n<p>U.S. CHEMICAL SAFETY AND HAZARD INVESTIGATION BOARD. <strong>Investigation report: BP Texas City, Texas.<\/strong> Mar\/2007. Dispon\u00edvel em <a href=\"http:\/\/www.csb.gov\/bp-america-refinery-explosion\">http:\/\/www.csb.gov\/bp-america-refinery-explosion<\/a>. Acesso em Out\/2014.<\/p>\n<p>WARE, Colin. <strong>Information visualization: perception for design.<\/strong> 2. ed. San Francisco: Elsevier, 2004.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1) INTERFACES MODERNAS E O CEN\u00c1RIO INDUSTRIAL Temos assistido nos \u00faltimos anos a uma grande evolu\u00e7\u00e3o no design de interfaces em geral. Sa\u00edmos recentemente de um cen\u00e1rio onde nossa intera\u00e7\u00e3o&hellip;<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[578,617],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Metodologia para Desenvolvimento de IHMs de Alta Performance Visual. - Elipse Knowledgebase<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.\" \/>\n<meta property=\"og:description\" content=\"1) INTERFACES MODERNAS E O CEN\u00c1RIO INDUSTRIAL Temos assistido nos \u00faltimos anos a uma grande evolu\u00e7\u00e3o no design de interfaces em geral. Sa\u00edmos recentemente de um cen\u00e1rio onde nossa intera\u00e7\u00e3o&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\" \/>\n<meta property=\"og:site_name\" content=\"Elipse Knowledgebase\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/elipsesoftware\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-25T20:45:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-09T14:14:24+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/1.png\" \/>\n<meta name=\"author\" content=\"Helcker Ferrarezi Goetz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Helcker Ferrarezi Goetz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\"},\"author\":{\"name\":\"Helcker Ferrarezi Goetz\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/ee9fdf61b809e223445d3ef4445e8041\"},\"headline\":\"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.\",\"datePublished\":\"2019-03-25T20:45:01+00:00\",\"dateModified\":\"2023-05-09T14:14:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\"},\"wordCount\":8414,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"articleSection\":[\"Elipse E3\",\"Outros\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\",\"url\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\",\"name\":\"[:pt]Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.[:en]Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.[:] - Elipse Knowledgebase\",\"isPartOf\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#website\"},\"datePublished\":\"2019-03-25T20:45:01+00:00\",\"dateModified\":\"2023-05-09T14:14:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/kb.elipse.com.br\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kb.elipse.com.br\/#website\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"name\":\"Elipse Knowledgebase\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kb.elipse.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kb.elipse.com.br\/#organization\",\"name\":\"Elipse Software\",\"url\":\"https:\/\/kb.elipse.com.br\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/elipsesoftware\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"contentUrl\":\"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png\",\"width\":161,\"height\":58,\"caption\":\"Elipse Software\"},\"image\":{\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/ee9fdf61b809e223445d3ef4445e8041\",\"name\":\"Helcker Ferrarezi Goetz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/027ca507c030cdaadf0e17c57d649654?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/027ca507c030cdaadf0e17c57d649654?s=96&d=mm&r=g\",\"caption\":\"Helcker Ferrarezi Goetz\"},\"url\":\"https:\/\/kb.elipse.com.br\/en\/author\/helcker\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual. - Elipse Knowledgebase","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/","og_locale":"en_US","og_type":"article","og_title":"[:pt]Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.[:en]Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.[:] - Elipse Knowledgebase","og_description":"1) INTERFACES MODERNAS E O CEN\u00c1RIO INDUSTRIAL Temos assistido nos \u00faltimos anos a uma grande evolu\u00e7\u00e3o no design de interfaces em geral. Sa\u00edmos recentemente de um cen\u00e1rio onde nossa intera\u00e7\u00e3o&hellip;","og_url":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/","og_site_name":"Elipse Knowledgebase","article_publisher":"http:\/\/www.facebook.com\/elipsesoftware","article_published_time":"2019-03-25T20:45:01+00:00","article_modified_time":"2023-05-09T14:14:24+00:00","og_image":[{"url":"http:\/\/kb.elipse.com.br\/pt-br\/images\/ID5289\/ID5289\/1.png"}],"author":"Helcker Ferrarezi Goetz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Helcker Ferrarezi Goetz","Est. reading time":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#article","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/"},"author":{"name":"Helcker Ferrarezi Goetz","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/ee9fdf61b809e223445d3ef4445e8041"},"headline":"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.","datePublished":"2019-03-25T20:45:01+00:00","dateModified":"2023-05-09T14:14:24+00:00","mainEntityOfPage":{"@id":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/"},"wordCount":8414,"commentCount":13,"publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"articleSection":["Elipse E3","Outros"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/","url":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/","name":"[:pt]Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.[:en]Metodologia para Desenvolvimento de IHMs de Alta Performance Visual.[:] - Elipse Knowledgebase","isPartOf":{"@id":"https:\/\/kb.elipse.com.br\/#website"},"datePublished":"2019-03-25T20:45:01+00:00","dateModified":"2023-05-09T14:14:24+00:00","breadcrumb":{"@id":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kb.elipse.com.br\/metodologia-para-desenvolvimento-de-ihms-de-alta-performance-visual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/kb.elipse.com.br\/en\/"},{"@type":"ListItem","position":2,"name":"Metodologia para Desenvolvimento de IHMs de Alta Performance Visual."}]},{"@type":"WebSite","@id":"https:\/\/kb.elipse.com.br\/#website","url":"https:\/\/kb.elipse.com.br\/","name":"Elipse Knowledgebase","description":"","publisher":{"@id":"https:\/\/kb.elipse.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kb.elipse.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kb.elipse.com.br\/#organization","name":"Elipse Software","url":"https:\/\/kb.elipse.com.br\/","sameAs":["http:\/\/www.facebook.com\/elipsesoftware"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","contentUrl":"https:\/\/kb.elipse.com.br\/wp-content\/uploads\/2019\/05\/schererelipse-com-br\/logoElipse.png","width":161,"height":58,"caption":"Elipse Software"},"image":{"@id":"https:\/\/kb.elipse.com.br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/ee9fdf61b809e223445d3ef4445e8041","name":"Helcker Ferrarezi Goetz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kb.elipse.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/027ca507c030cdaadf0e17c57d649654?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/027ca507c030cdaadf0e17c57d649654?s=96&d=mm&r=g","caption":"Helcker Ferrarezi Goetz"},"url":"https:\/\/kb.elipse.com.br\/en\/author\/helcker\/"}]}},"_links":{"self":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/3590"}],"collection":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/comments?post=3590"}],"version-history":[{"count":8,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/3590\/revisions"}],"predecessor-version":[{"id":14675,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/posts\/3590\/revisions\/14675"}],"wp:attachment":[{"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/media?parent=3590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/categories?post=3590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.elipse.com.br\/en\/wp-json\/wp\/v2\/tags?post=3590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}