{"id":1868,"date":"2016-07-19T18:40:30","date_gmt":"2016-07-19T21:40:30","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2016\/07\/19\/quebre-convencoes\/"},"modified":"2016-07-19T18:40:30","modified_gmt":"2016-07-19T21:40:30","slug":"quebre-convencoes","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2016\/07\/19\/quebre-convencoes\/","title":{"rendered":"Quebre conven\u00e7\u00f5es"},"content":{"rendered":"

Um conceito que confundo a cabe\u00e7a dos alunos no curso de Front End<\/a> \u00e9 que devemos seguir as boas pr\u00e1ticas sem nos prender a elas, ou seja, depois de demonstrar o Material Design<\/a> e recomendar o uso<\/a>, n\u00f3s simplesmente quebramos os conceitos de Layout que ele sugere e trabalhamos algumas tend\u00eancias de regras de UI para uma boa usabilidade [post e v\u00eddeo em breve sobre].<\/p>\n

\n

Designed for Use: Create Usable Interfaces for Applications and the Web 2nd Edition by Lukas\u00a0Mathis<\/a><\/figcaption><\/figure>\n

O excelente livro Designed for Use: Create Usable Interfaces for Applications and the Web<\/em><\/a> tem uma defini\u00e7\u00e3o que considero genial e define tudo que acredito:<\/p>\n

\n

Good design is design that works. This seems like an obvious point, and yet people often confuse good design with design that follows its host system\u2019s UI guidelines, or design that is consistent with other, similar products, or design that follows some other convention. When in doubt, following conventions is a good idea. Conventions are there for a reason. Google invested a lot in its material design spec, for example, and you could do a lot worse than follow its lead. But it\u2019s possible that you could also do a lot better. If you think that following conventions makes your product harder to use, more difficult to learn, or less efficient to use, you should challenge these conventions. Find the best solution for the users\u2019 needs.<\/p>\n<\/blockquote>\n

Em uma tradu\u00e7\u00e3o livre e apressada:<\/p>\n

\n

Um bom design \u00e9 o design que funciona. Isso parece ser um ponto \u00f3bvio e ainda assim as pessoas muitas vezes confundem um bom design com um design que segue as diretrizes definidas de UI j\u00e1 colocadas ou o design que \u00e9 consistente com outros produtos similares ou design que segue a alguma outra conven\u00e7\u00e3o. Em caso de d\u00favida, seguir conven\u00e7\u00f5es \u00e9 uma boa id\u00e9ia. Conven\u00e7\u00f5es est\u00e3o l\u00e1 por um motivo. O Google investiu muito em sua especifica\u00e7\u00e3o Material Design, por exemplo, e voc\u00ea poderia fazer muito pior do que apenas seguir seu conselho. Mas \u00e9 poss\u00edvel que voc\u00ea tamb\u00e9m poderia fazer muito melhor. Se voc\u00ea acha que seguindo conven\u00e7\u00f5es torna o seu produto mais dif\u00edcil de usar, mais dif\u00edcil de aprender ou menos eficientes ao uso, voc\u00ea deve desafiar essas conven\u00e7\u00f5es. Encontrar a melhor solu\u00e7\u00e3o para as necessidades dos usu\u00e1rios.<\/p>\n<\/blockquote>\n

No v\u00eddeo que gravei fazendo uma an\u00e1lise sobre “O que podemos aprender com o Snapchat<\/a>” eu comentei sobre o qu\u00e3o ousado o produto foi em quebrar essas conven\u00e7\u00f5es. Recomendo que assista.<\/p>\n

Em uma das aulas n\u00f3s constru\u00edmos uma Interface para a id\u00e9ia de um produto sobre Feedback<\/a>.<\/p>\n

A prototipa\u00e7\u00e3o nasce sempre tradicional, pensando no template do Material Design (com React no caso desse curso<\/a>).<\/p>\n

\n

Porcamente rabiscando no quadro pra fazer um Brainstorming do que construir\u00edamos.<\/figcaption><\/figure>\n

Quando fomos construir um prot\u00f3tipo funcional, empilhamos os componentes e ajustamos para algo que fizesse sentido com a Story.<\/p>\n

\n

Pega esse componente aqui, aquele ali, vamos empilhando at\u00e9 fazer\u00a0sentido.<\/figcaption><\/figure>\n

Ent\u00e3o o desafio \u00e9 come\u00e7ar a trabalhar alguns conceitos como Formless, n\u00e3o precisar fazer o usu\u00e1rio pensar, n\u00e3o solicitar ou notificar sobre algo que o usu\u00e1rio n\u00e3o precisa agir, entre outros. O layout fica bem desafiador, bem econ\u00f4mico e direto ao ponto.<\/p>\n

\n


\n<\/figure>\n

Imagina um convite, n\u00e3o tem bot\u00e3o, n\u00e3o tem formul\u00e1rio, apenas um pedido de seu amigo para o avaliar e ao escrever j\u00e1 est\u00e1 informado.<\/p>\n

Eu chamo de 3 regras do UI para uma boa usabilidade, \u00e9 um crivo que analiso uma feature e vamos ajustando at\u00e9 que se adequa o melhor poss\u00edvel dentro das “leis”.<\/p>\n

Em breve vou gravar um v\u00eddeo sobre a t\u00e9cnica que utilizamos, aguarde!<\/p>\n","protected":false},"excerpt":{"rendered":"

Um conceito que confundo a cabe\u00e7a dos alunos no curso de Front End \u00e9 que devemos seguir as boas pr\u00e1ticas sem nos prender a elas, ou seja, depois de demonstrar o Material Design e recomendar o uso, n\u00f3s simplesmente quebramos os conceitos de Layout que ele sugere e trabalhamos algumas tend\u00eancias de regras de UI […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1868"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=1868"}],"version-history":[{"count":0,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1868\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=1868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=1868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=1868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}