{"id":781,"date":"2023-09-27T18:09:06","date_gmt":"2023-09-27T21:09:06","guid":{"rendered":"https:\/\/pietrobotelho.com.br\/home\/?p=781"},"modified":"2023-09-27T18:09:37","modified_gmt":"2023-09-27T21:09:37","slug":"ta-tudo-meio-igual","status":"publish","type":"post","link":"https:\/\/pietrobotelho.com.br\/home\/index.php\/2023\/09\/27\/ta-tudo-meio-igual\/","title":{"rendered":"T\u00e1 tudo meio igual?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"781\" class=\"elementor elementor-781\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a25e96d e-flex e-con-boxed e-con e-parent\" data-id=\"a25e96d\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d557f6e elementor-widget elementor-widget-image\" data-id=\"d557f6e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 14-09-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/pietrobotelho.com.br\/wp-content\/uploads\/2023\/09\/mirror-twins-l-1024x576.webp\" class=\"attachment-large size-large wp-image-763\" alt=\"\" srcset=\"https:\/\/pietrobotelho.com.br\/wp-content\/uploads\/2023\/09\/mirror-twins-l-1024x576.webp 1024w, https:\/\/pietrobotelho.com.br\/wp-content\/uploads\/2023\/09\/mirror-twins-l-300x169.webp 300w, https:\/\/pietrobotelho.com.br\/wp-content\/uploads\/2023\/09\/mirror-twins-l-768x432.webp 768w, https:\/\/pietrobotelho.com.br\/wp-content\/uploads\/2023\/09\/mirror-twins-l.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b4ef5ed e-flex e-con-boxed e-con e-parent\" data-id=\"3b4ef5ed\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42aa9aba elementor-widget elementor-widget-text-editor\" data-id=\"42aa9aba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 14-09-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<!-- wp:paragraph -->\n<p>J\u00e1 parou para reparar que v\u00e1rios sites institucionais parecem iguais? Claro que, embora haja varia\u00e7\u00f5es, \u00e9 verdade que existem alguns padr\u00f5es muito comuns entre os sites atualmente. Olha s\u00f3:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Bannerz\u00e3o de entrada<br>Fundo branco<br>Coluna centralizada com texto&nbsp;&nbsp;&nbsp;<br>Landing page com uma imagenzona e tiras de conte\u00fado logo abaixo&nbsp;&nbsp;<br>Logo no canto superior esquerdo<br>Filtros de buscas dispostos na vertical<br>Rolagem vertical global<br>Informa\u00e7\u00f5es de Contato l\u00e1 embaixo<br>Rodap\u00e9 com as informa\u00e7\u00f5es da empresa<br>E conforme voc\u00ea foi clicando, viu que todas as informa\u00e7\u00f5es do site est\u00e3o na mesma p\u00e1gina, em diferentes est\u00e1gios da rolagem.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Como marketeiro, poderia transcorrer por horas como o af\u00e3 por conte\u00fado online faz com que marcas e com\u00e9rcios apressem os processos de digitaliza\u00e7\u00e3o e acabam por escolher templates r\u00e1pidos e de f\u00e1cil personaliza\u00e7\u00e3o.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Mas na minha cabe\u00e7a de UX designer, esses itens se padronizam como os itens b\u00e1sicos de um carro. Um volante \u00e0 esquerda (ou \u00e0 direita, nas Inglaterra); embreagem, freio e acelerador nos p\u00e9s; o c\u00e2mbio no console central; quatro rodas; portas com ma\u00e7anetas que sobem; o som e as sa\u00eddas de ar centralizados no painel, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Pode-se dizer que todos os carros parecem iguais, ent\u00e3o (tirando caminh\u00f5es, vans, etc., ainda que compartilhem v\u00e1rios desses componentes). Mas tamb\u00e9m podemos dizer que todos tem esses itens nessa disposi\u00e7\u00e3o porque s\u00e3o conven\u00e7\u00f5es \u00fateis. Algu\u00e9m que sabe dirigir consegue se virar em qualquer carro em poucos segundos. N\u00e3o \u00e9 s\u00f3 conveni\u00eancia, mas tamb\u00e9m seguran\u00e7a. Imagine ter que dirigir um carro com um manche, outro com mouse, outro com controller de PS4, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Claro que os sites n\u00e3o envolvem o mesmo n\u00edvel de preocupa\u00e7\u00e3o com a seguran\u00e7a de um carro, mas essa conven\u00e7\u00e3o ainda \u00e9 uma parte \u00fatil do design. Quando algu\u00e9m visita um site novo, o Uxer precisa se perguntar se o usu\u00e1rio quer ter uma experi\u00eancia nova ou que ele encontrar o que est\u00e1 procurando para finalizar seja l\u00e1 o que veio fazer. Na maioria das vezes, a gera\u00e7\u00e3o de neg\u00f3cios exige o segundo. Ou seja, \u00e9 mais importante que o usu\u00e1rio consiga se orientar intuitivamente no site e entender como as coisas funcionam, em vez de tentar interpretar a uma interface de usu\u00e1rio totalmente incomum.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Isso n\u00e3o quer dizer que alguma novidade n\u00e3o seja importante, mas ela precisa desempenhar um papel secund\u00e1rio para funcionar. \u00c9 poss\u00edvel divertir-se personalizando o branding, estilo visual, conte\u00fado, imagens, gr\u00e1ficos e \u00edcones, etc. Mas se \u00e9 para fazer o produto intuitivo, n\u00e3o da para tentar reinventar a roda. Nossos esfor\u00e7os tem que focar em coisas como usabilidade, acessibilidade e, claro, funcionalidade.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lembre-se: templates n\u00e3o s\u00e3o designs. S\u00e3o regras para combinar tipos de dados relacionados. Al\u00e9m do templates, essas plataformas normalmente n\u00e3o oferecem aos usu\u00e1rios nenhuma maneira de influenciar a apar\u00eancia visual de uma p\u00e1gina. O que voc\u00ea v\u00ea \u00e9 o que a empresa despejou no molde. Um dos princ\u00edpios fundamentais do design \u00e9 a conex\u00e3o significativa entre forma e conte\u00fado; a forma deve refletir e dar forma ao conte\u00fado. Sem isso, temos apenas cont\u00eaineres de conte\u00fado gen\u00e9rico.<\/p>\n<!-- \/wp:paragraph -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>J\u00e1 parou para reparar que v\u00e1rios sites institucionais parecem iguais? Claro que, embora haja varia\u00e7\u00f5es, \u00e9 verdade que existem alguns padr\u00f5es muito comuns entre os sites atualmente. Olha s\u00f3: Bannerz\u00e3o de entradaFundo brancoColuna centralizada com texto&nbsp;&nbsp;&nbsp;Landing page com uma imagenzona e tiras de conte\u00fado logo abaixo&nbsp;&nbsp;Logo no canto superior esquerdoFiltros de buscas dispostos na verticalRolagem [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/posts\/781"}],"collection":[{"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/comments?post=781"}],"version-history":[{"count":4,"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/posts\/781\/revisions"}],"predecessor-version":[{"id":785,"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/posts\/781\/revisions\/785"}],"wp:attachment":[{"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/media?parent=781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/categories?post=781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pietrobotelho.com.br\/home\/index.php\/wp-json\/wp\/v2\/tags?post=781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}