{"id":86,"date":"2018-10-19T17:10:42","date_gmt":"2018-10-19T16:10:42","guid":{"rendered":"http:\/\/sites.ipleiria.pt\/15historias\/?page_id=86"},"modified":"2019-05-16T16:17:53","modified_gmt":"2019-05-16T15:17:53","slug":"caso-3-web-design-criatividade-ou-acessibilidade","status":"publish","type":"page","link":"https:\/\/sites.ipleiria.pt\/15historias\/caso-3-web-design-criatividade-ou-acessibilidade\/","title":{"rendered":"Caso 3: Web Design: criatividade ou acessibilidade?"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"175\" height=\"173\" src=\"http:\/\/sites.ipleiria.pt\/15historias\/files\/2019\/03\/img-22.png\" alt=\"\" class=\"wp-image-513\" \/><\/figure><\/div>\n\n\n<div class=\"container\">\n<h1 class=\"article-title\">Caso 3: Web Design: criatividade ou acessibilidade?<\/h1>\n<div class=\"author-card\">\n<p class=\"author-name\"><strong>Autores:<\/strong> Joana Mineiro e Manuela Francisco<\/p>\n<p class=\"author-description\">Unidade de Ensino a Dist\u00e2ncia, Instituto Polit\u00e9cnico de Leiria<\/p>\n<\/div>\n<p class=\"author-reference\"><strong>Referir este caso:\u00a0<\/strong>Francisco, M. &amp; Mineiro, J. (2018). Web Design: criatividade ou acessibilidade? In R. Cadima, I. Pereira, M. Francisco &amp; S. Cunha (Coords.).\u00a0<em>15 hist\u00f3rias para incluir.<\/em> [Online]. Polit\u00e9cnico de Leiria: Leiria.<\/p>\n<\/div>\n<div class=\"container--gray mr-top30 mr-bottom50\">\n<div class=\"container\">\n<h2 class=\"article-subtitle\">Para come\u00e7ar<\/h2>\n<p>Com a evolu\u00e7\u00e3o da web o utilizador passa de\u00a0um papel passivo para a figura central e s\u00e3o as\u00a0suas intera\u00e7\u00f5es na web que determinam o tipo\u00a0de conte\u00fados adequados ao seu perfil. Com esta\u00a0evolu\u00e7\u00e3o as aplica\u00e7\u00f5es tornaram-se mais complexas,\u00a0assim como o pr\u00f3prio design dos conte\u00fados e\u00a0interfaces conhecem novos desafios. Os pr\u00f3prios\u00a0conceitos associados ao in\u00edcio da web como\u00a0\u201cusabilidade\u201d e \u201cacessibilidade\u201d ganham particular\u00a0\u00eanfase, assim como o conceito de \u201cweb design\u201d\u00a0evoluiu, focando-se hoje em dia na \u201cexperi\u00eancia\u00a0do utilizador\u201d (UX). De acordo com diversos\u00a0autores, entre os quais Norman &amp; Nielsen (1998),\u00a0o conceito de \u201cUser Experience\u201d (UX) parte da ideia\u00a0de que qualquer produto ou servi\u00e7o tem de estar\u00a0profundamente focado nas necessidades, habilidades\u00a0e limita\u00e7\u00f5es dos utilizadores.<\/p>\n<p>Isto significa que \u00e9 a experi\u00eancia do utilizador que\u00a0determina a pertin\u00eancia e sucesso da informa\u00e7\u00e3o,\u00a0dos produtos e servi\u00e7os disponibilizados na web.\u00a0Considerando que existem diferentes perfis de\u00a0utilizadores, relacionados com as suas necessidades\u00a0e tecnologias que utilizam, o UX Design \u00e9 cada vez\u00a0mais exigente e obriga a uma perfeita concilia\u00e7\u00e3o\u00a0entre a componente est\u00e9tica e a experi\u00eancia que esta\u00a0proporciona a cada um dos seus utilizadores.<\/p>\n<\/div>\n<\/div>\n<div class=\"container\">\n<h2 class=\"article-subtitle\">Para ler<\/h2>\n<p>Sou a N\u00e1dia e trabalho em Marketing numa multinacional,\u00a0por isso estou a par da legisla\u00e7\u00e3o, em particular, a que\u00a0diz respeito \u00e0 Web. Esse \u00e9 um dos motivos pelos quais a\u00a0minha amiga Carolina, que \u00e9 web designer e freelancer, me\u00a0consulta sempre que tem um novo projeto.<\/p>\n<p>Al\u00e9m disso, gostamos de discutir ideias, at\u00e9 porque ela \u00e9\u00a0super criativa e tem um sentido est\u00e9tico muito apurado.\u00a0Os trabalhos dela s\u00e3o sempre brutais! Ontem fomos beber um caf\u00e9 e ela falou-me que tinha um novo projeto: renovar\u00a0um website de uma companhia de dan\u00e7a. Mas, a par do\u00a0entusiasmo tamb\u00e9m estava em p\u00e2nico&#8230;<\/p>\n<div class=\"story--dialog\">\n<p>&#8211; N\u00e3o est\u00e1s a ver N\u00e1dia&#8230; eles disseram que por ser um site de\u00a0interesse p\u00fablico tinha de cumprir com as normas de acessibilidade\u00a0web!\u00a0<\/p>\n<p>&#8211; Sim, mas faz sentido ser acess\u00edvel Carolina!\u00a0<\/p>\n<p>&#8211; O p\u00e1, at\u00e9 pode, mas n\u00e3o fa\u00e7o a m\u00ednima ideia do que quer isso efetivamente dizer&#8230; imagino que seja para as pessoas que n\u00e3o veem&#8230; mas na pr\u00e1tica&#8230;\u00a0<\/p>\n<p>&#8211; Bem, n\u00e3o \u00e9 apenas para as pessoas cegas. Eu j\u00e1 tive uma forma\u00e7\u00e3o sobre isso, mas sinceramente n\u00e3o sei dizer como se faz. Sei que tem de existir grande contraste de cores, o tipo de letra tamb\u00e9m n\u00e3o pode ser qualquer um, as imagens t\u00eam de ter descri\u00e7\u00e3o&#8230; e mais umas cenas complicadas.\u00a0<\/p>\n<p>&#8211; Pois essa cena das cores&#8230; eles disseram-me que podiam ter pessoas\u00a0dalt\u00f3nicas.\u00a0<\/p>\n<p>&#8211; Sim \u00e9 verdade. Olha que tens a\u00ed um desafio giro!\u00a0<\/p>\n<p>&#8211; Giro? Se \u00e9 para ter contraste fa\u00e7o tudo a preto e branco, n\u00e3o?\u00a0<\/p>\n<p>&#8211; Achas!?\u00a0<\/p>\n<p>&#8211; E p\u00e1, sinceramente n\u00e3o sei, j\u00e1 me est\u00e3o a limitar&#8230; n\u00e3o curto nada quando me restringem a criatividade, mas o cliente \u00e9 que manda&#8230;\u00a0<\/p>\n<p>&#8211; \u00d3 Carolina, n\u00e3o penses assim. D\u00e1 uma vista de olhos nas diretrizes WCAG, na parte que diz respeito \u00e0 legibilidade.\u00a0<\/p>\n<p>&#8211; Sim, vou ver isso, mas acredito que os limites sejam tantos que\u00a0duvido conseguir uma proposta arrojada, criativa e com um design\u00a0atual.<\/p>\n<\/div>\n<p>Pensei para comigo \u201cCoitada da Carolina!\u201d&#8230; Ainda h\u00e1 pouco tempo tive uma forma\u00e7\u00e3o relativa ao novo Regulamento de Prote\u00e7\u00e3o de Dados e sa\u00ed mais confusa do que quando entrei! Infelizmente as leis, normas, regulamentos, nunca s\u00e3o claros&#8230;<\/p>\n<p>Lembro-me da forma\u00e7\u00e3o que tive sobre acessibilidade e, tirando\u00a0a parte do \u201cPorque deve ser acess\u00edvel\u201d, n\u00e3o percebi quase nada,\u00a0mas pensei que se destinava essencialmente aos meus colegas\u00a0programadores.<\/p>\n<\/div>\n<div class=\"container--gray mr-top30 mr-bottom50\">\n<div class=\"container\">\n<h2 class=\"article-subtitle\">Para equacionar<\/h2>\n<p>O problema da Carolina \u00e9\u00a0certamente sentido por outros web\u00a0designers e provavelmente alguns\u00a0at\u00e9 desconhecem a import\u00e2ncia da\u00a0acessibilidade em contexto web.<\/p>\n<ul>\n<li>Consciencializar criativos\u00a0para acessibilidade<\/li>\n<li>Acessibilidade condicionante\u00a0da criatividade<\/li>\n<li>Aspetos do design universal<\/li>\n<li>Acessibilidade versus\u00a0elementos gr\u00e1ficos decorativos<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"container\">\n<h2 class=\"article-subtitle\">Para debater<\/h2>\n<p class=\"section--subtitle\">1. Se fosse a Carolina o que faria?<\/p>\n<p>Mesmo n\u00e3o sendo Designer, mas tendo experi\u00eancia de navega\u00e7\u00e3o na web e provavelmente a componente est\u00e9tica \u00e9 um fator importante para si, o que decidiria se fosse a Carolina?<\/p>\n<p class=\"section--subtitle\">2. Que linha gr\u00e1fica seguir?<\/p>\n<p>O que fazer em rela\u00e7\u00e3o \u00e0s op\u00e7\u00f5es de cores, tipos de letras, espa\u00e7amentos, tamanhos,\u00a0navega\u00e7\u00e3o, imagens&#8230; esta informa\u00e7\u00e3o existe dispon\u00edvel na web?<\/p>\n<p class=\"section--subtitle\">3. Ser\u00e1 que a acessibilidade \u00e9 um fator condicionante da criatividade?<\/p>\n<p>Quando um criativo \u00e9 confrontado com aspetos que balizam a\u00a0sua interven\u00e7\u00e3o, como a acessibilidade, poder\u00e1 condicionar o seu\u00a0processo criativo?<\/p>\n<p class=\"section--subtitle\">4. Ser\u00e1 que para um website ser acess\u00edvel deve ser desprovido de aspetos gr\u00e1ficos est\u00e9ticos?<\/p>\n<p>Atualmente, a web disponibiliza informa\u00e7\u00e3o em todas as \u00e1reas, sendo os conte\u00fados\u00a0cada vez mais \u201cvisuais\u201d (por exemplo v\u00eddeos, fotos partilhadas pelos utilizadores&#8230;).\u00a0Em termos de marketing, para um site ter impacto deve ser apelativo, ter aspetos\u00a0inovadores que o distinguem dos outros e ter uma comunica\u00e7\u00e3o simples, intuitiva e\u00a0visual (com o m\u00ednimo de informa\u00e7\u00e3o textual).\u00a0Por outro lado, a acessibilidade obriga a cuidados, nomeadamente no uso de cores,\u00a0tipos de letra, estrutura do layout (que facilite a navega\u00e7\u00e3o a todos os utilizadores).<\/p>\n<p>Como resolver o dilema? O que deve prevalecer?<\/p>\n<p class=\"section--subtitle\">5. Como motivar os criativos para a acessibilidade?<\/p>\n<p>A Carolina, tal como muitos criativos, desmotiva perante as normas de acessibilidade.<\/p>\n<p>Que estrat\u00e9gias podem ser adotadas? Quem deve adotar tais estrat\u00e9gias: quem\u00a0ensina, quem legisla&#8230;outros?<\/p>\n<blockquote>\n<p>Um website pode respeitar as\u00a0normas de acessibilidade sem\u00a0ser desprovido de aspectos\u00a0gr\u00e1ficos. (\u2026) o HTML5 e o CSS3,\u00a0combinados com frameworks de JavaScript tornam poss\u00edvel\u00a0criar conte\u00fados acess\u00edveis,\u00a0intuitivos e visualmente\u00a0atractivos.<br \/><cite>Jo\u00e3o Mourato<\/cite><\/p>\n<\/blockquote>\n<blockquote>\n<p>(\u2026) todas as pessoas t\u00eam direito \u00e0 informa\u00e7\u00e3o e \u00e9 o cliente que decide se o produto apresentado est\u00e1 direccionado para si ou n\u00e3o.<br \/><cite>T\u00e2nia Cravo<\/cite><\/p>\n<\/blockquote>\n<\/div>\n<div class=\"container--gray mr-top30 mr-bottom50\">\n<div class=\"container\">\n<h2 class=\"article-subtitle\">Para reter<\/h2>\n<p>Considerando que cada caso \u00e9 um caso e que as solu\u00e7\u00f5es adotadas para uma situa\u00e7\u00e3o poder\u00e3o n\u00e3o ser as indicadas para\u00a0outras, deixamos um poss\u00edvel desfecho, baseado numa situa\u00e7\u00e3o real.<\/p>\n<p>A Carolina fez pesquisas para tentar perceber quais as diretrizes que, enquanto designer, teria de cumprir. Tentou encontrar\u00a0exemplos de websites acess\u00edveis, mas a pesquisa foi uma desilus\u00e3o&#8230; o Brasil tem um motor de busca para sites acess\u00edveis, mas est\u00e1 muito desatualizado, a maioria dos sites listados d\u00e1 erro. Al\u00e9m disso, os sites que\u00a0aparecem nas pesquisas apresentam um design pouco atual e apelativo.<\/p>\n<p>Depois de ler alguma informa\u00e7\u00e3o sobre acessibilidade na web e de verificar que existem algumas limita\u00e7\u00f5es na componente\u00a0visual, decide falar com o programador que iria implementar o site, de forma a tentar encontrar a melhor solu\u00e7\u00e3o.<\/p>\n<p>Assim, a Carolina apresentou a seguinte proposta de layout:<\/p>\n<ul>\n<li>3 vers\u00f5es de cores: 1. cores \u201cda moda\u201d que n\u00e3o passam o n\u00edvel de conformidade, mas s\u00e3o esteticamente apelativas; 2. vers\u00e3o com tonalidades que derivam da proposta original, mas que passam o triplo A das WCAG &#8211; ela usou o site WebAim para validar as cores, criando uma paleta acess\u00edvel; 3. proposta com contraste m\u00e1ximo, baseado apenas em preto e amarelo.<\/li>\n<li>\u00cdcones e Imagens figurativas, mas que s\u00e3o fundamentais para a estrutura que definiu\u00a0e para uma r\u00e1pida compreens\u00e3o da informa\u00e7\u00e3o (as imagens s\u00e3o acompanhadas de texto\u00a0alternativo).<\/li>\n<li>Tipo de letra principal n\u00e3o serifada, para melhorar a leitura no ecr\u00e3 &#8211; Open Sans e tipo\u00a0de letra alternativo (Tiresias).<\/li>\n<li>Estrutura de navega\u00e7\u00e3o e apresenta\u00e7\u00e3o de informa\u00e7\u00e3o consistente em todas as p\u00e1ginas\u00a0e de f\u00e1cil navega\u00e7\u00e3o com teclado.<\/li>\n<li>Cabe\u00e7alhos em Mai\u00fasculas (com o atrituto HTML <em>Text transform<\/em>).<\/li>\n<\/ul>\n<p>Apostando na experi\u00eancia do utilizador, as v\u00e1rias op\u00e7\u00f5es s\u00e3o controladas por cada\u00a0indiv\u00edduo de acordo com as suas prefer\u00eancias, atrav\u00e9s de uma barra de ferramentas com\u00a0op\u00e7\u00f5es de acessibilidade, semelhante \u00e0 apresentada na figura 1.<\/p>\n<figure id=\"attachment_216\" aria-describedby=\"caption-attachment-216\" style=\"width: 179px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-216 size-medium\" src=\"http:\/\/sites.ipleiria.pt\/15historias\/files\/2018\/10\/15Historias_para_Incluir-179x300.jpg\" alt=\"Barra de acessibilidade com op\u00e7\u00f5es de contraste, legibilidade e tamanho da letra, tamanho cursor, destacar links, navega\u00e7\u00e3o por teclado e leitura de p\u00e1gina.\" width=\"179\" height=\"300\" srcset=\"https:\/\/sites.ipleiria.pt\/15historias\/files\/2018\/10\/15Historias_para_Incluir-179x300.jpg 179w, https:\/\/sites.ipleiria.pt\/15historias\/files\/2018\/10\/15Historias_para_Incluir.jpg 331w\" sizes=\"auto, (max-width: 179px) 100vw, 179px\" \/><figcaption id=\"caption-attachment-216\" class=\"wp-caption-text\">Figura 1: Menu acessibilidade userway<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<div class=\"container\">\n<h2 class=\"article-subtitle\">Para consultar<\/h2>\n<p class=\"section--subtitle\">Refer\u00eancias<\/p>\n<p>Norman, D. &amp; Nielsen, J. (1998, August 8) \u201cThe Definition of User Experience (UX)\u201d [Website]. <a href=\"https:\/\/www.nngroup.com\/articles\/definition-user-experience\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.nngroup.com\/articles\/definition-user-experience\/<\/a><\/p>\n<p class=\"section--subtitle\">Sugest\u00f5es de pesquisa<\/p>\n<p>Acessibilidade Toolkit. <a href=\"http:\/\/acessibilida.de\/toolkit\/wcag\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/acessibilida.de\/toolkit\/wcag\/<\/a><\/p>\n<p>Designing for inclusion. <a href=\"https:\/\/www.w3.org\/WAI\/users\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3.org\/WAI\/users\/<\/a><\/p>\n<p>Diversity of web users. <a href=\"https:\/\/www.w3.org\/WAI\/intro\/people-use-web\/diversity\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.w3.org\/WAI\/intro\/people-use-web\/diversity<\/a><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Caso 3: Web Design: criatividade ou acessibilidade? Autores: Joana Mineiro e Manuela Francisco Unidade de Ensino a Dist\u00e2ncia, Instituto Polit\u00e9cnico de Leiria Referir este caso:\u00a0Francisco, M. &amp; Mineiro, J. (2018). Web Design: criatividade ou acessibilidade? In R. Cadima, I. Pereira, M. Francisco &amp; S. Cunha (Coords.).\u00a015 hist\u00f3rias para incluir. [Online]. Polit\u00e9cnico de Leiria: Leiria. Para (&#8230;)<\/p>\n","protected":false},"author":60,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"page-templates\/stories.php","meta":{"footnotes":""},"class_list":["post-86","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/pages\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":9,"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/pages\/86\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/pages\/86\/revisions\/640"}],"wp:attachment":[{"href":"https:\/\/sites.ipleiria.pt\/15historias\/wp-json\/wp\/v2\/media?parent=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}