{"id":394,"date":"2010-04-22T22:13:24","date_gmt":"2010-04-23T01:13:24","guid":{"rendered":"http:\/\/www.blumenthal.com.br\/d\/?p=394"},"modified":"2011-05-17T14:39:54","modified_gmt":"2011-05-17T17:39:54","slug":"ui-design-patterns","status":"publish","type":"post","link":"https:\/\/blumenthal.com.br\/d\/2010\/ui-design-patterns","title":{"rendered":"UI design patterns"},"content":{"rendered":"<p class=\"pequeno\">Entrevista concedida a <a onclick=\"javascript:pageTracker._trackPageview('\/outbound\/article\/www.revistawebdesign.com.br');\" href=\"http:\/\/www.revistawebdesign.com.br\/\" target=\"_blank\">revista webdesign<\/a> para a reportagem: UI design patterns, MAI\/10 <\/p>\n<hr \/>\n<p>Quais princ\u00edpios de design interferem na experi\u00eancia em ambientes digitais?<\/p>\n<blockquote><p>\u00c9 responsabilidade do designer projetar a melhor maneira poss\u00edvel para conduzir o usu\u00e1rio a seguir o fluxo desejado com o m\u00ednimo de erros e ainda ponderar fatores estrat\u00e9gicos comeciais do segmento.<\/p>\n<p>A interface deve facilitar as tomadas de decis\u00e3o de acordo com o que se pretende e, para isso, o designer deve fazer o uso coerente de conceitos fundamentais de design (como diagrama\u00e7\u00e3o, hierarquia, legibilidade, organiza\u00e7\u00e3o, etc) em prol de uma experi\u00eancia satisfat\u00f3ria.<\/p>\n<p>A intera\u00e7\u00e3o \u00e9 satisfat\u00f3ria quando atinge o objetivo pretendido e, para isso, cada elemento da interface deve cumprir suas fun\u00e7\u00f5es da melhor maneira poss\u00edvel. Uma vez feito isso corretamente, n\u00e3o ser\u00e1 problema reciclar os mesmos elementos que j\u00e1 atendem este resultado. Assim, ser\u00e1 poss\u00edvel dedicar esfor\u00e7os a novos elementos ou ambientes que realmente tragam valor de neg\u00f3cio.<\/p><\/blockquote>\n<p>Quais s\u00e3o as principais vantagens que o uso de <abbr title=\"UI design pattern library\">biblioteca de padr\u00f5es de interface<\/abbr> pode trazer para o cotidiano de produ\u00e7\u00e3o do designer?<\/p>\n<blockquote><p>\nN\u00e3o apenas para o designer, o uso de bibliotecas internas \u00e9 uma estrat\u00e9gia operacional que atinge todos os profissionais de desenvolvimento e permite o lan\u00e7amento de novos produtos de forma mais \u00e1gil.<\/p>\n<p><strong>Seguir um padr\u00e3o significa diminuir opera\u00e7\u00f5es de aprendizado. Essa regra \u00e9 aplicada em todos os n\u00edveis<\/strong>, desde a nomenclatura de arquivos ou classes, at\u00e9 elementos de interface para o usu\u00e1rio.<\/p>\n<p>Se temos componentes com fun\u00e7\u00f5es comuns em diferentes interfaces, esses elementos devem ser iguais (ou pelo menos o mais semelhante poss\u00edvel). Assim, para corre\u00e7\u00f5es ou melhorias, o processo de evolu\u00e7\u00e3o dos produtos como um todo \u00e9 mais simples de ser executado.<\/p>\n<p>Nem sempre a padroniza\u00e7\u00e3o minuciosa \u00e9 poss\u00edvel, mas visar constantemente essa dire\u00e7\u00e3o ir\u00e1 significar em menor tempo operacional.<\/p>\n<p>Alguns exemplos que poderiam ser observados em um fluxo completamente padronizado:<\/p>\n<ul>\n<li> compatibilidade tecnol\u00f3gica<\/li>\n<li> profissionais conseguem achar os arquivos facilmente<\/li>\n<li> desenvolvedores sabem as classes que devem ser alteradas<\/li>\n<li> designers avaliam com mais clareza o que n\u00e3o est\u00e1 perfeito<\/li>\n<li> m\u00e9tricas s\u00e3o mais f\u00e1ceis de serem instaladas<\/li>\n<li> usu\u00e1rios j\u00e1 est\u00e3o familiarizados com o uso da interface (ou pelo menos parte)<\/li>\n<\/ul>\n<p>Todos acima podem (devem) sugerir\/providenciar melhorias, at\u00e9 mesmo o usu\u00e1rio.<\/p><\/blockquote>\n<p>Pela sua experi\u00eancia na \u00e1rea, como voc\u00ea enxerga a aplica\u00e7\u00e3o e o conhecimento sobre bibliotecas de padr\u00f5es de interfaces entre as ag\u00eancias digitais e os profissionais brasileiros? O que \u00e9 preciso para tornar esta pr\u00e1tica mais comum em projetos nacionais?<\/p>\n<blockquote><p>O uso de padr\u00f5es de interface \u00e9 muito pouco praticada por ag\u00eancias\/profissionais no pa\u00eds. <\/p>\n<p>Ainda \u00e9 comum a mentalidade de que o designer deve contribuir com adornos e impacto visual emotivo, quando deveria estar planejando uma experi\u00eancia mais consistente e funcional.<br \/>\nO designer n\u00e3o deve ter como objetivo evidenciar suas habilidades, mas sim, utiliz\u00e1-las para criar um bom produto.<\/p>\n<p>Quando utilizamos as mesmas formas para elementos de mesmas fun\u00e7\u00f5es, estamos sendo consistentes. A fun\u00e7\u00e3o de cada elemento deve ser facilmente identificada e a consist\u00eancia prop\u00f5e que essas fun\u00e7\u00f5es n\u00e3o precisam ser reaprendidas novamente.<\/p>\n<p>Investir em bibliotecas de elementos funcionais tamb\u00e9m auxilia a conter custos de desenvolvimento \u00e0 medida que s\u00e3o reaproveitados.<\/p>\n<p>\u00c9 comum investir tempo de design e desenvolvimento elaborando diversas formas de fazer as mesmas coisas quando poderiam ser feitas uma s\u00f3 vez corretamente e personaliz\u00e1vel (cores e estilos) &#8211; quando necess\u00e1rio. Pra que desenhar diferentes p\u00e1ginas de login se todas ter\u00e3o a mesma fun\u00e7\u00e3o?<\/p><\/blockquote>\n<p>Ainda sobre o mercado brasileiro, o departamento de novas m\u00eddias da Globosat vem dando um bom exemplo na \u00e1rea, ao aplicar tais conceitos na constru\u00e7\u00e3o de sites como o da s\u00e9rie <a href=\"http:\/\/uc.globo.com\/house\/\">House<\/a> e o programa <a href=\"http:\/\/multishow.globo.com\/nos3\">N\u00f3s3<\/a>. Diante disso, quando \u00e9 recomendada a cria\u00e7\u00e3o interna de uma biblioteca de padr\u00f5es de interfaces? E quais s\u00e3o os recursos\/etapas necess\u00e1rios para a sua constru\u00e7\u00e3o?<\/p>\n<blockquote><p>\nDevemos estar sempre em busca da padroniza\u00e7\u00e3o e o que for considerado estrategicamente interessante para ser espec\u00edfico deve ser identificado.<\/p>\n<p>Os produtos da Globosat s\u00e3o exemplos de aplica\u00e7\u00f5es de um padr\u00e3o planejado. Cada produto mant\u00e9m sua personalidade com um skin pr\u00f3prio, principalmente na home e em elementos pontuais (como headers, fundos, estilos, etc.); \u00e0 medida que nos aprofundamos na experi\u00eancia desses produtos, percebemos um padr\u00e3o entre os elementos de interface.<\/p>\n<p>O usu\u00e1rio que j\u00e1 teve a experi\u00eancia de usar o site de um <a href=\"http:\/\/multishow.globo.com\/nos3\">programa do canal multishow<\/a> ter\u00e1 uma curva de aprendizado menor quando visitar o site de alguma <a href=\"http:\/\/uc.globo.com\/house\">s\u00e9rie do canal Universal<\/a>.<\/p>\n<p>Na Globosat o objetivo do n\u00facleo de novas m\u00eddias \u00e9 atender as necessidades dos canais na TV, que s\u00e3o bastante semelhantes, e criar novos ambientes participativos que complementam a experi\u00eancia da TV na web. Por conta disso, padronizamos as necessidades funcionais comuns para investir mais tempo em novos produtos ou em pontos necessariamente espec\u00edficos.<\/p><\/blockquote>\n<p>No artigo \u201c<a href=\"http:\/\/www.avellareduarte.com.br\/projeto\/interface\/interface8\/interface8.htm\">Componentes de uma interface web<\/a>\u201d s\u00e3o apontados os elementos mais comuns utilizados em interfaces digitais. Como justificar a mudan\u00e7a de padr\u00f5es dos elementos de uma interface?<\/p>\n<blockquote><p>\nDurante o fluxo de desenvolvimento devemos separar o que n\u00e3o poder\u00e1 ser reaproveitado e a equipe deve conduzir o que pode ser recicl\u00e1vel para construir seus padr\u00f5es internos. Uma forma coerente de iniciar um novo modelo de padr\u00f5es \u00e9 investigar e analisar exemplos de intera\u00e7\u00e3o j\u00e1 consagrados.<\/p>\n<p>O padr\u00e3o adotado deve estar em constante melhoria, para isso, \u00e9 necess\u00e1rio avaliar as m\u00e9tricas de aceita\u00e7\u00e3o ou rejei\u00e7\u00e3o de cada elemento para corre\u00e7\u00f5es ou remodelagens.<\/p>\n<p>Essas m\u00e9tricas podem ser em forma de n\u00fameros ou de feedback feito pelos usu\u00e1rios ou editores.<\/p><\/blockquote>\n<p>Na segunda edi\u00e7\u00e3o do livro \u201cN\u00e3o me fa\u00e7a pensar\u201d, Steve Krug faz a seguinte recomenda\u00e7\u00e3o: \u201cinove quando souber que tem uma ideia melhor, caso contr\u00e1rio, aproveite as conven\u00e7\u00f5es\u201d. O uso de biblioteca de padr\u00f5es no design de interfaces pode limitar o trabalho criativo e inovador? Como utilizar padr\u00f5es e evitar que isso aconte\u00e7a?<\/p>\n<blockquote><p><strong>O uso de uma biblioteca de padr\u00f5es justamente serve para que se possa investir mais no que realmente \u00e9 inovador.<\/strong><\/p>\n<p>A cria\u00e7\u00e3o, em seu aspecto visual emotivo, possui uma intensidade mensur\u00e1vel no escopo de um produto. Normalmente com pequenas mudan\u00e7as de estilos \u00e9 poss\u00edvel oferecer uma identidade espec\u00edfica ao produto, e assim, reutilizar todos os componentes poss\u00edveis.<\/p>\n<p>Nos modelos padronizados, podemos definir \u00e1reas de personaliza\u00e7\u00e3o para dar mais personalidade a cada produto, al\u00e9m disso, temos ainda a oportunidade de fazer uso de \u00e1reas editoriais (conte\u00fado) para ofertar o posicionamento espec\u00edfico do produto.<\/p>\n<p>Afirmar que seguir modelos padronizados de interface limitam a criatividade \u00e9 uma mentalidade ultrapassada quando se produz sites ou aplica\u00e7\u00f5es que t\u00eam como objetivo ofertar conte\u00fado.<\/p><\/blockquote>\n<p>Por favor, indique  projetos que sirvam como bons exemplos na aplica\u00e7\u00e3o de UI design pattern library.<\/p>\n<blockquote><p><a href=\"http:\/\/bit.ly\/mac-ux\">Mac OSX Reference Library<\/a><br \/>\nGetting Started with User Experience<br \/>\nOs estudos dos sistemas operacionais da apple s\u00e3o fontes obrigat\u00f3rias de aprendizado sobre o uso consciente de uma biblioteca de padr\u00f5es em interfaces.<\/p>\n<p><a href=\"http:\/\/bit.ly\/y-ux\">Yahoo design stencils<\/a><br \/>\nA biblioteca de padr\u00f5es de desenvolvimento do Yahoo \u00e9 bastante organizada. Mant\u00e9m \u00e0 disposi\u00e7\u00e3o documenta\u00e7\u00e3o funcional e visual dos componentes utilizados pelos aplicativos e sites de empresa.<\/p>\n<p><a href=\"http:\/\/bit.ly\/ui-concepts\">msdn.microsoft.com<\/a><br \/>\nA microsoft constr\u00f3i interfaces que devem ser compat\u00edveis com uma varia\u00e7\u00e3o muito grande de hardwares e, consequentemente, de performance. Para resolver estas quest\u00f5es, a empresa det\u00e9m um acervo de estudos bastante detalhado e \u00fatil sobre o assunto.<\/p><\/blockquote>\n<p><small> ps. teste de indexa\u00e7\u00e3o do <a href=\"http:\/\/toptvz.com.br\/spin-doctors\">Spin Doctors<\/a> #seo<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ainda \u00e9 comum a mentalidade de que o designer deve contribuir com adornos e impacto visual emotivo, quando deveria estar planejando uma experi\u00eancia mais consistente e funcional.<br \/>\nO designer n\u00e3o deve ter como objetivo evidenciar suas habilidades, mas sim, utiliz\u00e1-las para criar um bom produto.<br \/>\n[&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,8],"tags":[70,78,69,68,71,67,72],"class_list":["post-394","post","type-post","status-publish","format-standard","hentry","category-artigos","category-design","category-long","tag-artigo","tag-design","tag-globosat","tag-patterns","tag-revista","tag-ui","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":31,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/posts\/394\/revisions\/425"}],"wp:attachment":[{"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blumenthal.com.br\/d\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}