{"id":3518,"date":"2017-09-18T14:22:48","date_gmt":"2017-09-18T13:22:48","guid":{"rendered":"https:\/\/www.waynext.com\/waytrends\/?p=3518"},"modified":"2018-02-19T12:11:43","modified_gmt":"2018-02-19T12:11:43","slug":"usabilidade-principios-para-marcas","status":"publish","type":"post","link":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/","title":{"rendered":"Usabilidade &#8211; princ\u00edpios fundamentais para as Marcas"},"content":{"rendered":"<p style=\"text-align: left;\">A Usabilidade determina e impacta de forma significativa a percep\u00e7\u00e3o que um utilizador ou Cliente tem da nossa Marca, at\u00e9 porque as interac\u00e7\u00f5es digitais s\u00e3o cada vez mais recorrentes e abrangentes. \u00c9 f\u00e1cil entender que se antes um funcion\u00e1rio simp\u00e1tico na nossa ag\u00eancia banc\u00e1ria favorita poderia fazer a diferen\u00e7a na nossa percep\u00e7\u00e3o do Banco, hoje ser\u00e1 provavelmente o portal de Homebanking ou a App mobile que determina essa nossa percep\u00e7\u00e3o; e se a utiliza\u00e7\u00e3o destes servi\u00e7os for complexa, lenta ou confusa e pouco intuitiva, isso vai influenciar negativamente a nossa percep\u00e7\u00e3o.<\/p>\n<h1>1. O que \u00e9 Usabilidade?<\/h1>\n<p style=\"text-align: left;\">Servi\u00e7os e processos migraram do mundo f\u00edsico para o digital e a diversidade de ac\u00e7\u00f5es reduzida ao tamanho do ecr\u00e3 e \u00e0 ponta dos dedos obriga a um trabalho de simplifica\u00e7\u00e3o dos interfaces,\u00a0<span style=\"font-weight: 400;\">atendendo \u00e0 <strong>User Experience<\/strong> (UX) e ao <strong>User Interface<\/strong> (UI).<\/span><\/p>\n<p style=\"text-align: left;\">Todos sabemos de forma intuitiva abrir uma porta, porque na sua generalidade todas funcionam de forma similar. Estejamos em nossa casa ou noutro continente, uma porta \u00e9 uma porta e tem um determinado comportamento normativo\u00a0que a torna us\u00e1vel de forma f\u00e1cil e intuitiva.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3519\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/smartphone-1.jpg\" alt=\"smartphone\" width=\"700\" height=\"467\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/smartphone-1.jpg 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/smartphone-1-537x358.jpg 537w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.pexels.com\/photo\/person-using-smartphone-shallow-focus-photography-215367\/\" target=\"_blank\" rel=\"noopener\">Fonte: Pexels<\/a><\/p>\n<p><span style=\"font-weight: 400;\">Websites, webapps ou aplica\u00e7\u00f5es m\u00f3veis t\u00eam de estar preparadas para uma diversidade de ecr\u00e3s, contextos e p\u00fablicos, de modo a maximizar a efici\u00eancia e a melhorar a experi\u00eancia da interac\u00e7\u00e3o com o utilizador\/consumidor. <\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Esta mudan\u00e7a fez emergir a necessidade dos nossos sites, aplica\u00e7\u00f5es e outros produtos digitais estarem convenientemente desenhados para a diversidade de ecr\u00e3s e p\u00fablicos que os v\u00e3o utilizar. Esse processo estrat\u00e9gico \u00e9 conhecido como Usabilidade.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Para perceber a abrang\u00eancia do conceito usabilidade \u00e9 preciso pensar nos diferentes n\u00edveis de interac\u00e7\u00e3o entre homem e m\u00e1quina &#8211; da comunica\u00e7\u00e3o visual, \u00e0 interac\u00e7\u00e3o por clique ou toque, ao preenchimento de dados e a navega\u00e7\u00e3o em menus. Pensar a usabilidade \u00e9 pensar na facilidade e previsibilidade da utiliza\u00e7\u00e3o de uma aplica\u00e7\u00e3o \u2013 s\u00f3 uma experi\u00eancia coerente, segura e fluida satisfaz um consumidor exigente e atinge os resultados esperados.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Pensar a Usabilidade de um site ou aplica\u00e7\u00e3o \u00e9 pensar como os internautas v\u00e3o utilizar essa plataforma, como v\u00e3o interagir com ela, onde v\u00e3o clicar, o que v\u00e3o consultar, etc. Pensar a Usabilidade \u00e9 pensar onde est\u00e3o os bot\u00f5es e como est\u00e3o organizados os conte\u00fados de forma a que o utilizador tenha uma boa e satisfat\u00f3ria experi\u00eancia no nosso site\/aplica\u00e7\u00e3o, navegando de forma simples e da forma que n\u00f3s que desenvolvemos os produtos pretendemos.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Usabilidade \u00e9 uma quantifica\u00e7\u00e3o da facilidade de uso e de aprendizagem de um objecto artificial. Um site\/app tem uma Usabilidade maior se for f\u00e1cil de usar e\/ou se a curva de aprendizagem do utilizador for facilmente vencida (n\u00e3o perca tamb\u00e9m o artigo com <a href=\"https:\/\/www.waynext.com\/waytrends\/estrategias-comprovadas-marca-irresistivel-digital\/\" target=\"_blank\" rel=\"noopener\">7 Estrat\u00e9gias psicologicamente comprovadas para tornar a sua Marca irresist\u00edvel no digital<\/a>)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Neste guia vamos explicar-lhe porque \u00e9 que a Usabilidade \u00e9 um factor estrat\u00e9gico importante para o seu neg\u00f3cio e que primeiros passos pode dar.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h1>2. Import\u00e2ncia da Usabilidade em Interfaces Digitais<\/h1>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Usabilidade \u00e9 o grau de adequa\u00e7\u00e3o das fun\u00e7\u00f5es do site ou aplica\u00e7\u00e3o \u00e0s necessidades e expectativas do utilizador. \u00c9 a garantia da fluidez de navega\u00e7\u00e3o. Um sistema com alta Usabilidade \u00e9 intuitivo e portanto f\u00e1cil de perceber, f\u00e1cil de utilizar, f\u00e1cil de recordar e garante uma boa experi\u00eancia de utiliza\u00e7\u00e3o \u2013 User Experience (UX).<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A optimiza\u00e7\u00e3o da Usabilidade reflecte-se tamb\u00e9m na quantidade de utilizadores que completam o processo pretendido sem frustra\u00e7\u00e3o \u2013 seja uma compra, uma subscri\u00e7\u00e3o ou outro. \u00c9 a diferen\u00e7a entre um utilizador convertido ou um utilizador derrotado, entre um <a href=\"https:\/\/www.waynext.com\/waytrends\/metricas-websites-guia-essencial\/\">bounce rate<\/a> elevado ou uma elevada <a href=\"https:\/\/www.waynext.com\/waytrends\/metricas-websites-guia-essencial\/\">taxa de convers\u00e3o<\/a>.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Usabilidade est\u00e1 tradicionalmente na \u00e1rea de influ\u00eancia e per\u00edcia de designers, mas, pela sua natureza e abrang\u00eancia n\u00e3o \u00e9 responsabilidade de apenas uma pessoa\/perfil ou equipa. \u00c9 importante ter presente que Usabilidade depende n\u00e3o s\u00f3 da interface em si (User Interface) mas tamb\u00e9m dos fluxos e processos definidos (User Experience). \u00c9 poss\u00edvel que um designer crie um excelente interface mas se o mesmo for uma janela para um processo dif\u00edcil e mal estruturado a Usabilidade sai prejudicada.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Usabilidade nasce assim do cruzamento das fun\u00e7\u00f5es de estrategas, humanistas, gestores de produto\/processo, designers, copywriters e programadores num esfor\u00e7o direccionado para atender \u00e0s exig\u00eancias do consumidor\/cliente\/visitante\/utilizador.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.waynext.com\/waytrends\/as-interfaces-user-friendy-e-o-trafego-gerado-pelo-social-media-nos-websites\/\" target=\"_blank\" rel=\"noopener\">O User Interface (UI) e o design s\u00e3o cada vez mais um factor diferenciador.<\/a> <\/span><i><span style=\"font-weight: 400;\">Design Disruptors<\/span><\/i><span style=\"font-weight: 400;\"> \u00e9 o exemplo de um excelente document\u00e1rio que mostra como as empresas mais disruptivas de hoje s\u00e3o as que mais se preocupam com o design dos seus servi\u00e7os e produtos, com a forma como se apresentam aos seus clientes, consumidores, espectadores, ouvintes ou leitores. O filme conta-nos uma perspectiva inovadora sobre o impacto do design na resolu\u00e7\u00e3o de problemas, na supera\u00e7\u00e3o de expectativas e na valoriza\u00e7\u00e3o dos neg\u00f3cios. Numa pequena aproxima\u00e7\u00e3o ao que \u00e9 a corrente de Design Thinking.<\/span><\/p>\n<p>&nbsp;<\/p>\n<div class=\"video-container\"><iframe loading=\"lazy\" title=\"DESIGN DISRUPTORS Trailer #2 - A documentary from InVision\" src=\"https:\/\/player.vimeo.com\/video\/167434033?dnt=1&amp;app_id=122963\" width=\"497\" height=\"280\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media\"><\/iframe><\/div>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Para al\u00e9m da facilita\u00e7\u00e3o do acesso e melhoria da experi\u00eancia, a Usabilidade \u00e9 tamb\u00e9m um crit\u00e9rio importante para a indexa\u00e7\u00e3o dos sites em <a href=\"https:\/\/www.waynext.com\/waytrends\/search-engine-optimization-seo-5-melhorias-para-implementar-hoje-mesmo\/\">motores de busca como Google<\/a> ou em feeds de algoritmos com o do Facebook, onde adequabilidade \u00e0 plataforma, a velocidade de carregamento e outros factores como o <\/span><i><span style=\"font-weight: 400;\">bounce rate<\/span><\/i><span style=\"font-weight: 400;\"> s\u00e3o contemplados.<\/span><\/p>\n<p style=\"text-align: left;\">A Usabilidade representa uma preocupa\u00e7\u00e3o crescente que tem j\u00e1 bases s\u00f3lidas existindo inclusive a norma <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_9241\" target=\"_blank\" rel=\"noopener\">ISO 9241<\/a> que estabelece uma s\u00e9rie de regras e recomenda\u00e7\u00f5es para os contextos de interac\u00e7\u00e3o entre o homem e a m\u00e1quina.<\/p>\n<h1>3. Princ\u00edpios Base de Usabilidade<\/h1>\n<p style=\"text-align: left;\">A Usabilidade pode ser reduzida a 4 regras essenciais:<\/p>\n<p style=\"text-align: left;\"><strong>1. Disponibilidade e acessibilidade:<\/strong> <span style=\"font-weight: 400;\">\u00e9 um ponto b\u00e1sico de Usabilidade. Se um utilizador tentar aceder \u00e0 propriedade da Marca e o mesmo n\u00e3o estiver dispon\u00edvel, nenhum resultado positivo para a Marca vai acontecer. Se a indisponibilidade for constante, o consumidor vai desenvolver uma imagem negativa da marca e talvez troc\u00e1-la por outra. Alguns factores a ter em conta neste cap\u00edtulo: o tempo de carregamento do conte\u00fado; a exist\u00eancia de links quebrados, ou seja, liga\u00e7\u00f5es que n\u00e3o v\u00e3o dar a lado nenhum; a adapta\u00e7\u00e3o a diferentes ecr\u00e3s; o comportamento em liga\u00e7\u00f5es mais lentas (ponto fulcral em alguns tipos de neg\u00f3cio); ou a acessibilidade para pessoas com daltonismo ou outro tipo de condi\u00e7\u00f5es incapacitantes.<\/span><\/p>\n<p style=\"text-align: left;\"><strong>2. Clareza:<\/strong> <span style=\"font-weight: 400;\">muitos menus, conte\u00fados desorganizados ou informa\u00e7\u00e3o confusa\/contradit\u00f3ria podem colocar o utilizador de p\u00e9 atr\u00e1s ou faz\u00ea-lo perder tempo. Acima de tudo, pede-se uma interface simples, familiar, consistente, auto-explicativa e bem estruturada, que fa\u00e7a o consumidor sentir-se em casa mesmo que seja a primeira vez que est\u00e1 a usar o site ou aplica\u00e7\u00e3o da nossa Marca.<\/span><\/p>\n<p style=\"text-align: left;\"><strong>3. Aprendizagem:<\/strong> <span style=\"font-weight: 400;\">deve ser objectivo desenhar interfaces intuitivas \u2013 que n\u00e3o impliquem instru\u00e7\u00f5es ou um longo processo de habitua\u00e7\u00e3o\/experimenta\u00e7\u00e3o at\u00e9 serem compreendidas pelo utilizador. A chave de um design intuitivo \u00e9 pegar no que as pessoas j\u00e1 conhecem e criar algo novo que seja f\u00e1cil de perceber (como uma porta, que, independentemente do local e do feitio, sabemos quase sempre como abrir e fechar). Criar novos ambientes recorrendo a s\u00edmbolos\/padr\u00f5es de funcionamento familiares ao utilizador &#8211; seja por experi\u00eancia ou conhecimento adquirido. \u00c9 a procura pela \u201cfacilidade\u201d de utiliza\u00e7\u00e3o que faz emergir na web determinados e poderosos padr\u00f5es de interac\u00e7\u00e3o &#8211; a forma rectangular dos bot\u00f5es onde podemos carregar, a forma de apresenta\u00e7\u00e3o e funcionamento de menus de navega\u00e7\u00e3o (por exemplo o famoso menu \u201chamb\u00farguer\u201d usado nos sites mobile), a apresenta\u00e7\u00e3o de links onde o texto aparece sublinhado para sabermos que podemos nele clicar para navegar para outra p\u00e1gina e muitos outros.<\/span><\/p>\n<p style=\"text-align: left;\"><strong>4. Relev\u00e2ncia:<\/strong> <span style=\"font-weight: 400;\">S\u00f3 conte\u00fado relevante garante a aten\u00e7\u00e3o do utilizador. Saber quem s\u00e3o os visitantes\/utilizadores e perceber em que contexto o site\/aplica\u00e7\u00e3o da nossa Marca se enquadra \u00e9 perceber o prop\u00f3sito dessa plataforma, um aspecto fundamental na hora de desenhar a interface e definir a usabilidade.<\/span><\/p>\n<h1>4. Principais diferen\u00e7as entre Desktop e Mobile<\/h1>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Quando se pensa na Usabilidade de um site ou aplica\u00e7\u00e3o n\u00e3o se pode considerar apenas um dos contextos em que os mesmos podem ser utilizados.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Isto porque os consumidores n\u00e3o usam no seu dia-a-dia apenas um equipamento: durante o trabalho, abrem o computador; nas desloca\u00e7\u00f5es dedicam a sua aten\u00e7\u00e3o ao telem\u00f3vel; e quando chegam a casa ainda podem ter um tablet \u00e0 espera. O mesmo site precisa de ser f\u00e1cil de usar nos v\u00e1rios dispositivos, quer a interac\u00e7\u00e3o seja mediada por teclado, rato, pen ou pelo simples toque no ecr\u00e3.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3597\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/12\/iphone-smartphone-desktop.jpg\" alt=\"iphone-smartphone-desktop\" width=\"700\" height=\"465\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/12\/iphone-smartphone-desktop.jpg 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/12\/iphone-smartphone-desktop-539x358.jpg 539w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.pexels.com\/photo\/apple-iphone-smartphone-desk-4158\/\" target=\"_blank\" rel=\"noopener\">Fonte<\/a><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Imagine-se uma <a href=\"https:\/\/www.waynext.com\/waytrends\/ecommerce-guia-completo-o-que-e-e-como-funciona\/\">loja online de roupa<\/a>. Pode ser muitas vezes acedida num computador (web) e tamb\u00e9m pode ser muito utilizada em mobilidade (mobile), quando o consumidor\/cliente est\u00e1 no estabelecimento f\u00edsico, da Marca ou de um concorrente, e quer comparar pre\u00e7os.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Manter um site com uma boa Usabilidade em contexto web e mobile pode implicar uma simples adapta\u00e7\u00e3o do site a qualquer formato de ecr\u00e3, atrav\u00e9s de um design responsivo, muito utilizado na internet; ou o desenvolvimento de uma experi\u00eancia diferente para cada estilo de utiliza\u00e7\u00e3o. Isso pode ser feito tamb\u00e9m criando uma app para telem\u00f3vel. \u00c9 importante, contudo, garantir que a experi\u00eancia da Marca \u00e9 coerente e faz sentido para o consumidor. No mundo da comunica\u00e7\u00e3o a percep\u00e7\u00e3o que um consumidor tem de um produto \u00e9 a chave do seu sucesso, a navega\u00e7\u00e3o nos diferentes equipamentos deve ser garantida e adequada \u00e0 expectativa do consumidor. Caso se reduzam funcionalidades num ou noutro dispositivo, esse ponto deve ser previsto e trabalhado de modo a n\u00e3o desiludir o consumidor.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">O Facebook \u00e9 um excelente exemplo de como uma <a href=\"https:\/\/www.waynext.com\/waytrends\/gestao-de-comunidade-no-facebook\/\">rede social<\/a> n\u00e3o pode ter a mesma interface (e aqui falamos quer de User Interface como de User Experience) no computador e no telem\u00f3vel, sendo o site desktop distinto e mais complexo que a aplica\u00e7\u00e3o para iOS\/Android, onde s\u00e3o privilegiadas as funcionalidades que os utilizadores mais procuram quando est\u00e3o de telem\u00f3vel na m\u00e3o. A CP (Comboios de Portugal) \u00e9 outro bom exemplo: o site web permite comprar bilhetes mas tamb\u00e9m serve uma s\u00e9rie de informa\u00e7\u00e3o ao cliente; j\u00e1 na aplica\u00e7\u00e3o m\u00f3vel o destaque vai para a compra de bilhetes que depois a\u00ed ficam guardados para mostrar ao revisor. Algo similar acontece com as Apps das companhias a\u00e9reas, focadas na sua maior parte em permitir a disponibiliza\u00e7\u00e3o do cart\u00e3o de embarque, simplificando assim a vida ao passageiro.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/youtu.be\/69OAFHJUDr4\" class=\"autohyperlink\" target=\"_blank\">https:\/\/youtu.be\/69OAFHJUDr4<\/a><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">No exemplo da loja online de roupa, provavelmente bastaria criar um \u00fanico site responsivo, que se adaptasse naturalmente ao ecr\u00e3 e dispositivo em que est\u00e1 a ser utilizado. Com a prolifera\u00e7\u00e3o de dispositivos t\u00e1cteis (dos smartphones aos PC port\u00e1teis e mesmo aos tablets) o design de interfaces tamb\u00e9m foi for\u00e7ado a evoluir tendo actualmente que ser pensado para ser utilizado em diferentes contextos e com diferentes tipos de input.<\/span><\/p>\n<h1>5. Principais Erros de Usabilidade em Interfaces<\/h1>\n<p style=\"text-align: left;\">Existem erros b\u00e1sicos de Usabilidade a evitar no desenho de interfaces,\u00a0<span style=\"font-weight: 400;\">quer ao n\u00edvel da User Interface (UI) como ao n\u00edvel da User Experience (UX):<\/span><\/p>\n<ul style=\"text-align: left;\">\n<li><strong>Falta de compatibilidade com dispositivos m\u00f3veis:<\/strong> <span style=\"font-weight: 400;\">nesta era de mobilidade, em que diariamente teclamos ao computador e tocamos no telem\u00f3vel, \u00e9 fundamental que um website apresente uma interface adequada a todos os contextos de utiliza\u00e7\u00e3o poss\u00edveis, garantindo uma boa Usabilidade em qualquer ecr\u00e3 e em qualquer dispositivo. Para al\u00e9m disso, a maior parte dos dispositivos m\u00f3veis que usamos s\u00e3o \u201ctouch\u201d. Por isso \u00e9 necess\u00e1rio um tamanho adequado do texto e dos conte\u00fados, bem como bot\u00f5es pensados para serem tocados s\u00e3o caminho andado para uma boa Usabilidade em mobile. \u00c9 fundamental desenhar um site para ser usado com rato e teclado, com uma caneta e com o dedo, n\u00e3o esquecendo que cada uma destas formas de interac\u00e7\u00f5es s\u00e3o bem distintas e trazem desafios de navega\u00e7\u00e3o diferentes.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"text-align: left;\"><strong>Informa\u00e7\u00e3o pouco acess\u00edvel:<\/strong> <span style=\"font-weight: 400;\">se a nossa Marca vende viagens de avi\u00e3o ou passagens de comboio, o cliente precisa de encontrar essa funcionalidade na homepage ou em destaque na aplica\u00e7\u00e3o m\u00f3vel. Os conte\u00fados mais requisitados e a informa\u00e7\u00e3o mais procurada devem ser aqueles que aparecem imediatamente na homepage ou atrav\u00e9s de atalhos.<\/span> O <a href=\"http:\/\/www.ctt.pt\/home\/index.html\" target=\"_blank\" rel=\"noopener\">site dos CTT<\/a>, por exemplo, tem uma caixa de 5 ferramentas populares logo na primeira p\u00e1gina.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4003 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/CTT_ferramentas.png\" alt=\"ctt_ferramentas\" width=\"700\" height=\"462\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/CTT_ferramentas.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/CTT_ferramentas-542x358.png 542w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.ctt.pt\/home\/index.html\" target=\"_blank\" rel=\"noopener\">Fonte: CTT<\/a><\/p>\n<ul>\n<li style=\"text-align: left;\"><strong>Arquitectura de informa\u00e7\u00e3o complexa:<\/strong> <span style=\"font-weight: 400;\">quanto mais simples, melhor. O consumidor\/cliente n\u00e3o quer perder tempo a abrir e fechar menus e submenus, \u00e0 procura do que quer. Em mobile, num smartphone, essa tarefa \u00e9 particularmente ingrata dada a reduzida dimens\u00e3o do ecr\u00e3. O mobile, principalmente o sistema operativo iOS, \u00e9 uma \u00f3ptima inspira\u00e7\u00e3o neste campo, uma vez que a maioria das aplica\u00e7\u00f5es t\u00eam um menu inferior restrito a 4\/5 op\u00e7\u00f5es. Na web, encontramos bons exemplos desta navega\u00e7\u00e3o simplificada de que falamos na imprensa. <\/span> O <a href=\"http:\/\/qz.com\/\" target=\"_blank\" rel=\"noopener\">Quartz<\/a> e o <a href=\"http:\/\/www.recode.net\/\" target=\"_blank\" rel=\"noopener\">Recode<\/a> t\u00eam um menu com menos de 5 itens e mesmo nos jornais portugueses encontramos navega\u00e7\u00f5es simples \u2013 veja-se o <a href=\"http:\/\/expresso.sapo.pt\/\" target=\"_blank\" rel=\"noopener\">Expresso<\/a>.<\/li>\n<\/ul>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4005 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ.png\" alt=\"quartz_navega\u00e7\u00e3o_simplificada\" width=\"700\" height=\"368\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ-636x334.png 636w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/qz.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Quartz<\/a><\/p>\n<ul style=\"text-align: justify;\">\n<li style=\"text-align: left;\"><strong>Conte\u00fado complexo e ruidoso:<\/strong> <span style=\"font-weight: 400;\">um bom design n\u00e3o se faz sem um bom copy \u2013 ou seja, todo o conte\u00fado de texto de um website. Dos menus ao pr\u00f3prio texto das p\u00e1ginas, \u00e9 fundamental que o copy seja limpo, conciso e apelativo. Um bom design vai guiar os visitantes pelo website, focando a sua aten\u00e7\u00e3o nas coisas que interessam; mas esses utilizadores v\u00e3o precisar de ler texto para processar informa\u00e7\u00e3o. \u00c9 preciso ter em conta que as pessoas que consultam determinado site n\u00e3o v\u00e3o ler tudo de uma ponta \u00e0 outra; o mais prov\u00e1vel \u00e9 que o visitante fa\u00e7a skimming da p\u00e1gina e por isso \u00e9 importante apresentar a informa\u00e7\u00e3o bem hierarquizada para permitir que o utilizador leia apenas aquilo que lhe interessa (sob pena de abandonar a p\u00e1gina por n\u00e3o encontrar o que procura). Os t\u00edtulos, subt\u00edtulos e sinopses devem ser suficientemente claros e explicativos para que os visitantes percebam logo a mensagem principal antes de lerem o corpo de texto. A utiliza\u00e7\u00e3o de listas numeradas ou com bullets \u00e9 tamb\u00e9m muito \u00fatil para sistematizar a apresenta\u00e7\u00e3o da informa\u00e7\u00e3o. No que respeita \u00e0 parte mais visual \u00e9 importante que as imagens sejam de boa qualidade e que sejam complementares ao que \u00e9 apresentado em texto. Devem apresentar bons n\u00edveis de contraste, boa defini\u00e7\u00e3o e correcta coordena\u00e7\u00e3o com os textos que acompanham.<\/span><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong>Falta de pesquisa e\/ou contactos:<\/strong> <span style=\"font-weight: 400;\">se h\u00e1 duas coisas que qualquer site deve ter, elas s\u00e3o uma caixa de pesquisa bem vis\u00edvel e de f\u00e1cil uso e um formul\u00e1rio de contacto, caso o visitante tenha alguma d\u00favida, sugest\u00e3o ou reclama\u00e7\u00e3o. Por vezes, as pessoas querem encontrar imediatamente o que procuram sem perder muito tempo a perceber a estrutura do site e a pesquisa \u00e9 fundamental para isso. Outras vezes, procuram uma forma de contactar com a Marca, seja por e-mail ou via redes sociais.<\/span><\/li>\n<\/ul>\n<ul style=\"text-align: left;\">\n<li><strong>Formul\u00e1rios demasiado longos:<\/strong> <span style=\"font-weight: 400;\">um formul\u00e1rio, por mais curto que seja, representa sempre um obst\u00e1culo para o utilizador, em especial se estiver a navegar num dispositivo mais limitado em termos de capacidade de input como um tablet ou smartphone. Assim os formul\u00e1rios devem ser apenas t\u00e3o extensos quanto estritamente necess\u00e1rio para a fun\u00e7\u00e3o a que se destinam (registo, subscri\u00e7\u00e3o de newsletter, compra, contacto etc).<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"text-align: left;\"><strong>Links quebrados:<\/strong> <span style=\"font-weight: 400;\">hiperliga\u00e7\u00f5es que n\u00e3o v\u00e3o dar a lado nenhum s\u00e3o um dos erros de usabilidade mais recorrentes e frustrantes para o utilizador. Os links quebrados resultam em erros 404 (\u201cPage not found\u201d) e podem acontecer por erro humano ou por uma mudan\u00e7a no URL. Existem v\u00e1rias ferramentas que fazem a verifica\u00e7\u00e3o autom\u00e1tica do site e reportam os links quebrados pelo que \u00e9 f\u00e1cil monitorizar e evitar este tipo de falha.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h1>6. Testes de Usabilidade: Metodologias e Processos<\/h1>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">S\u00f3 fazendo um acompanhamento cont\u00ednuo do comportamento dos utilizadores se consegue avaliar a Usabilidade do site ou aplica\u00e7\u00e3o, podendo esta ser alterada e melhorada ao longo do tempo. \u00c9 errado pensar que um site ou aplica\u00e7\u00e3o s\u00e3o lan\u00e7ados e est\u00e3o acabados. Por muito boas que sejam as equipas de design e de desenvolvimentos e por mais testes <\/span><i><span style=\"font-weight: 400;\">beta<\/span><\/i><span style=\"font-weight: 400;\"> que se fa\u00e7am, poder\u00e3o escapar pormenores que podem e devem ser aprimorados.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Muitas Marcas optam por realizar testes focados na Usabilidade atrav\u00e9s de empresas especialistas, por forma a garantir o m\u00e1ximo de qualidade dos websites e Apps que colocam no mercado. Estas normalmente recorrem a uma metodologia que consiste em convidar um conjunto de pessoas, dentro do p\u00fablico-alvo do website ou App em causa, para realizarem testes. Estes testes s\u00e3o acompanhados, observados e posteriormente analisados pela equipa de especialistas para identificar aspectos onde possam ser introduzidas melhorias com vista a aumentar os \u00edndices de Usabilidade. Para estes testes podem ser utilizadas diferentes t\u00e9cnicas como a observa\u00e7\u00e3o simples da realiza\u00e7\u00e3o de um conjunto de actividades previamente definidas que pode ser acompanhada do recurso a um eye-tracker, para perceber onde se foca a aten\u00e7\u00e3o do utilizador. Comparativamente aos testes <\/span><i><span style=\"font-weight: 400;\">beta<\/span><\/i><span style=\"font-weight: 400;\">, este \u00e9 um m\u00e9todo mais cient\u00edfico e tamb\u00e9m dispendioso, mas que se traduz tipicamente em resultados mais qualitativos.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Com esta metodologia, as Marcas conseguem recolher feedback e melhorar o seu produto\/servi\u00e7o antes do seu lan\u00e7amento para o p\u00fablico.<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Para al\u00e9m dos testes pontuais e pr\u00e9-lan\u00e7amento, h\u00e1 uma s\u00e9rie de m\u00e9tricas que devem ser acompanhadas ao longo do tempo. At\u00e9 porque \u00e9 normal que websites e Apps v\u00e3o sofrendo evolu\u00e7\u00f5es e \u00e9 importante verificar que as mesmas n\u00e3o prejudicam as Usabilidade dos mesmos. Indicadores como o tr\u00e1fego (medido em pageviews ou visitantes), a taxa de rejei\u00e7\u00e3o e taxas de convers\u00e3o das principais actividades devem ser monitorizadas ao longo do tempo.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h1>7. Casos de Refer\u00eancia Web e Mobile<\/h1>\n<p>Apresentamos 6 refer\u00eancias de Usabilidade:<\/p>\n<h3>7.1 &#8211; Apple<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">O site da Apple tem duas principais fun\u00e7\u00f5es: dar a conhecer os produtos e vend\u00ea-los. A Apple conseguiu juntar estas duas experi\u00eancias numa navega\u00e7\u00e3o por produto. Cada produto \u00e9 apresentado de forma visualmente rica e apelativa, permitindo ao utilizador ver as suas caracter\u00edsticas e especifica\u00e7\u00f5es quer atrav\u00e9s de um scroll r\u00e1pido, quer de uma navega\u00e7\u00e3o mais demorada. N\u00e3o precisa de ler muito, pois a maior parte da informa\u00e7\u00e3o \u00e9 transmitida atrav\u00e9s de imagens, gr\u00e1ficos, GIFs e v\u00eddeos. O bot\u00e3o de compra aparece ao lado de cada produto e todo o processo que se segue \u00e9 tamb\u00e9m muito visual, intuitivo e pouco exigente mentalmente.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4010 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Apple.png\" alt=\"apple\" width=\"700\" height=\"396\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Apple.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Apple-294x166.png 294w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Apple-633x358.png 633w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.apple.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Apple<\/a><\/p>\n<h3>7.2 &#8211; Quartz<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">O New York Times e outros jornais habituaram-nos a homepages carregadas de informa\u00e7\u00e3o, com muito texto, menus complexos e uma diversidade de conte\u00fados por onde escolher. Mas n\u00e3o tem de ser assim e o Quartz prova-nos isso. Na p\u00e1gina inicial, as not\u00edcias aparecem-nos numa esp\u00e9cie de feed, \u00e0 medida que fazemos scroll down. O menu tem apenas quatro itens e as p\u00e1ginas de artigos s\u00e3o tamb\u00e9m super simples e limpas. Um excelente exemplo!<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4014 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ-2.png\" alt=\"site_quartz\" width=\"700\" height=\"398\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ-2.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ-2-294x166.png 294w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/QUARTZ-2-630x358.png 630w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/qz.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Quartz<\/a><\/p>\n<h3>7.3 &#8211; Booking<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Quem vai ao Booking quer efectuar uma reserva de um hotel. Por isso, essa funcionalidade tem de estar obrigatoriamente na homepage do site e na p\u00e1gina inicial da aplica\u00e7\u00e3o. O utilizador pode imediatamente digitar o local e datas e pesquisar. Os restantes conte\u00fados est\u00e3o organizados de forma inteligente, desde o bot\u00e3o para iniciar sess\u00e3o, uma ferramenta para avaliar a \u00faltima estadia ou algumas sugest\u00f5es de viagem. O Booking responde \u00e0s necessidades pr\u00e1ticas do utilizador e cumpre os objectivos comerciais da Marca.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4017 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Booking.png\" alt=\"site_booking\" width=\"700\" height=\"659\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Booking.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/Booking-380x358.png 380w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.booking.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Booking<\/a><\/p>\n<h3>7.4 &#8211; CTT<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Hoje em dia, as empresas de correio s\u00e3o mais que empresas de correio. T\u00eam seguros, ofertas de poupan\u00e7a, servi\u00e7os de publicidade, sistemas de pagamento de portagem, etc. O site dos CTT estrutura de forma intuitiva e \u00fatil os m\u00faltiplos produtos e servi\u00e7os oferecidos. Apresenta uma navega\u00e7\u00e3o eficaz, os conte\u00fados est\u00e3o bem organizados e segmentados, as ferramentas mais procuradas s\u00e3o apresentadas de imediato e os contactos est\u00e3o facilmente acess\u00edveis.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4019 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_CTT.png\" alt=\"site_ctt\" width=\"700\" height=\"511\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_CTT.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_CTT-490x358.png 490w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.ctt.pt\/home\/index.html\" target=\"_blank\" rel=\"noopener\">Fonte: CTT<\/a><\/p>\n<h3>7.5 &#8211; New Zealand<\/h3>\n<p style=\"text-align: left;\">Muitas vezes, quando se quer saber informa\u00e7\u00f5es sobre um pa\u00eds ou cidade, nem sempre se sabe que site visitar. H\u00e1 um do Governo ou C\u00e2mara Municipal, outro do turismo, pode existir um dedicados aos estudantes, etc. Tome-se o exemplo de Lisboa: al\u00e9m do site da C\u00e2mara, existe o <a href=\"http:\/\/www.studyinlisbon.pt\/en\" target=\"_blank\" rel=\"noopener\">Study In Lisbon<\/a>, o <a href=\"http:\/\/www.investlisboa.com\/site\/en\/\" target=\"_blank\" rel=\"noopener\">InvestLisboa<\/a>, o <a href=\"http:\/\/www.madeinlisbon.net\/\" target=\"_blank\" rel=\"noopener\">Made Of Lisboa<\/a>, o <a href=\"http:\/\/www.visitlisboa.com\/\" target=\"_blank\" rel=\"noopener\">VisitLisboa<\/a>&#8230; e por a\u00ed fora. A Nova Zel\u00e2ndia resolveu este problema muito bem ao criar <a href=\"http:\/\/www.newzealand.com\/\" target=\"_blank\" rel=\"noopener\">um portal simples<\/a> para o pa\u00eds, dividido em 5 categorias principais: visitar \/ comprar e invertir \/ estudar \/ viver e trabalhar.<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4021 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_new_zealand.png\" alt=\"site_new_zealand\" width=\"700\" height=\"401\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_new_zealand.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_new_zealand-625x358.png 625w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.newzealand.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: New Zealand<\/a><\/p>\n<h3>7.6 &#8211; Hunter Boots<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">As lojas online de roupa e acess\u00f3rios s\u00e3o geralmente boas inspira\u00e7\u00f5es no que toca a usabilidade. A Hunter Boots \u00e9 um desses bons exemplos. As imagens s\u00e3o apelativas e os conte\u00fados saem bem destacados. Existe muita interactividade, permitindo ao utilizador escolher cores e tamanhos e visualizar o produto final antes da compra. Os menus s\u00e3o intuitivos e a informa\u00e7\u00e3o disponibilizada sobre os produtos, al\u00e9m de bem escrita, est\u00e1 bem organizada.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4023 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_hunter_boots.png\" alt=\"site_hunter_boots\" width=\"700\" height=\"439\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_hunter_boots.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_hunter_boots-571x358.png 571w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.hunterboots.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Hunter Boots<\/a><\/p>\n<h3>7.7 &#8211; Virgin America<\/h3>\n<p style=\"text-align: left;\">A <a href=\"https:\/\/www.virgin.com\/\" target=\"_blank\" rel=\"noopener\">Virgin<\/a> pode ser muita coisa, mas a <a href=\"https:\/\/www.virginamerica.com\/\" target=\"_blank\" rel=\"noopener\">Virgin America<\/a> \u00e9 uma companhia a\u00e9rea norte-americana. Quem entra no <em><a href=\"http:\/\/virginamerica.com\" class=\"autohyperlink\" target=\"_blank\">virginamerica.com<\/a><\/em>, rapidamente pode pesquisar os voos dispon\u00edveis e fazer uma reserva \u2013 afinal \u00e9 esse o primeiro prop\u00f3sito de uma empresa de avia\u00e7\u00e3o.<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4025 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_virgin_america.png\" alt=\"site_virgin_america\" width=\"700\" height=\"332\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_virgin_america.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_virgin_america-636x302.png 636w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.virginamerica.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Virgin America<\/a><\/p>\n<h3>7.8 &#8211; Dow Jones<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Dow Jones prova-nos que uma empresa de an\u00e1lise financeira n\u00e3o tem de ter um site aborrecido. Visualmente apelativo e bem estruturado, o <\/span><i><span style=\"font-weight: 400;\"><a href=\"http:\/\/dowjones.com\" class=\"autohyperlink\" target=\"_blank\">dowjones.com<\/a><\/span><\/i><span style=\"font-weight: 400;\"> permite ao visitante, num scroll r\u00e1pido, perceber o que \u00e9 a Dow Jones e o que faz. Um \u00f3ptimo exemplo do que o site profissional de uma empresa, ag\u00eancia ou est\u00fadio pode ser.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3589\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/12\/Site_dowjones.png\" alt=\"site_dowjones\" width=\"700\" height=\"506\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/12\/Site_dowjones.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/12\/Site_dowjones-495x358.png 495w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.dowjones.com\/\" target=\"_blank\" rel=\"noopener\">Fonte: Dow Jones<\/a><\/p>\n<h3>7.9 &#8211; Exxon<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Exxon, conhecida petrol\u00edfera, criou um site que foca a aten\u00e7\u00e3o do utilizador na quest\u00e3o da energia e dos combust\u00edveis f\u00f3sseis, atrav\u00e9s de um conjunto de conte\u00fados editoriais, bem apresentados, que se relacionam com os produtos da empresa. Um bom exemplo de como o site de uma marca n\u00e3o precisa de estar declaradamente voltado para o que essa marca \u00e9 ou faz, mas antes pode aproveitar o patrim\u00f3nio da marca.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4027 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_exxon.png\" alt=\"site_exxon\" width=\"700\" height=\"425\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_exxon.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_exxon-590x358.png 590w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.exxon.com\/en\/\" target=\"_blank\" rel=\"noopener\">Fonte: Exxon<\/a><\/p>\n<h3>7.10 &#8211; Abercrombie<\/h3>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">A Abercrombie \u00e9 mais uma loja online de roupa que permite ao visitante conhecer o cat\u00e1logo da marca francesa e comprar os produtos. \u00c9 um site com uma boa usabilidade, nomeadamente no processo de escolha da roupa. O utilizador pode escolher os tamanhos e as cores\/especifica\u00e7\u00f5es que deseja, vendo o pre\u00e7o e o aspecto em tempo real.<\/span><\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4029 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_abercrombie-fitch.png\" alt=\"site_abercrombie-fitch\" width=\"700\" height=\"472\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_abercrombie-fitch.png 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/03\/site_abercrombie-fitch-531x358.png 531w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/eu.abercrombie.com\" target=\"_blank\" rel=\"noopener\">Fonte<\/a><\/p>\n<h3>7.11 &#8211;\u00a0NOS Uma<\/h3>\n<p><span style=\"font-weight: 400;\">A NOS lan\u00e7ou, no final de 2016, uma nova interface de televis\u00e3o e renovou as aplica\u00e7\u00f5es m\u00f3veis \u2013 iOS e Android \u2013 com a ajuda da <a href=\"http:\/\/waynext.com\" target=\"_blank\" rel=\"noopener\">WayNext &#8211; ag\u00eancia digital<\/a> na concep\u00e7\u00e3o da camada de User Interface e User Experience. A nova app, que tem uma vers\u00e3o desktop id\u00eantica, apresenta uma interface simples e apelativa, com poucos menus e bot\u00f5es f\u00e1ceis de entender, e representa uma melhoria significativa relativamente \u00e0 anterior vers\u00e3o.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4372 size-full aligncenter\" src=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/09\/nos_uma_3.jpg\" alt=\"\" width=\"700\" height=\"539\" srcset=\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/09\/nos_uma_3.jpg 700w, https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2017\/09\/nos_uma_3-465x358.jpg 465w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Usabilidade \u00e9 um tema cada vez mais na ordem do dia porque impacta directamente a experi\u00eancia do utilizador\/Cliente e o seu n\u00edvel de satisfa\u00e7\u00e3o quando este interage com a nossa Marca ou Plataforma atrav\u00e9s de um site, App ou de outro dispositivo digital. <\/p>\n","protected":false},"author":49,"featured_media":3572,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[349,350,124,351,348,290,321,114,320],"class_list":["post-3518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-acessibilidade","tag-desktop","tag-mobile","tag-smartphone","tag-ui","tag-usabilidade","tag-user-experience","tag-user-interface","tag-ux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Usabilidade - princ\u00edpios fundamentais para as Marcas - WayTrends<\/title>\n<meta name=\"description\" content=\"A Usabilidade \u00e9 um factor importante para a percep\u00e7\u00e3o que os Clientes t\u00eam da sua Marca. Conhe\u00e7a as principais regras e princ\u00edpios a ter em conta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"WayNext\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/\"},\"author\":{\"name\":\"WayNext\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#\/schema\/person\/68da9f24501cdbe541374a0083ce1d34\"},\"headline\":\"Usabilidade &#8211; princ\u00edpios fundamentais para as Marcas\",\"datePublished\":\"2017-09-18T13:22:48+00:00\",\"dateModified\":\"2018-02-19T12:11:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/\"},\"wordCount\":4021,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg\",\"keywords\":[\"acessibilidade\",\"desktop\",\"mobile\",\"smartphone\",\"ui\",\"usabilidade\",\"user experience\",\"user interface\",\"ux\"],\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/\",\"url\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/\",\"name\":\"Usabilidade - princ\u00edpios fundamentais para as Marcas - WayTrends\",\"isPartOf\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg\",\"datePublished\":\"2017-09-18T13:22:48+00:00\",\"dateModified\":\"2018-02-19T12:11:43+00:00\",\"description\":\"A Usabilidade \u00e9 um factor importante para a percep\u00e7\u00e3o que os Clientes t\u00eam da sua Marca. Conhe\u00e7a as principais regras e princ\u00edpios a ter em conta.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage\",\"url\":\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg\",\"contentUrl\":\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg\",\"width\":956,\"height\":518,\"caption\":\"usabilidade no digital\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.waynext.com\/waytrends\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usabilidade &#8211; princ\u00edpios fundamentais para as Marcas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#website\",\"url\":\"https:\/\/www.waynext.com\/waytrends\/\",\"name\":\"WayTrends\",\"description\":\"by Waynext - Ag\u00eancia Digital\",\"publisher\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.waynext.com\/waytrends\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#organization\",\"name\":\"WayNext - Ag\u00eancia Digital\",\"url\":\"https:\/\/www.waynext.com\/waytrends\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2015\/07\/waynext-logo1.png\",\"contentUrl\":\"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2015\/07\/waynext-logo1.png\",\"width\":800,\"height\":300,\"caption\":\"WayNext - Ag\u00eancia Digital\"},\"image\":{\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WayNext\",\"https:\/\/x.com\/WayNext\",\"https:\/\/www.linkedin.com\/company\/waynext\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#\/schema\/person\/68da9f24501cdbe541374a0083ce1d34\",\"name\":\"WayNext\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.waynext.com\/waytrends\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca75f5f2d309f951ecfe9d432c4c1f81a08ce0587931d19c4999f9cf92d56449?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca75f5f2d309f951ecfe9d432c4c1f81a08ce0587931d19c4999f9cf92d56449?s=96&d=mm&r=g\",\"caption\":\"WayNext\"},\"sameAs\":[\"https:\/\/www.waynext.com\"],\"url\":\"https:\/\/www.waynext.com\/waytrends\/author\/waynexteam\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Usabilidade - princ\u00edpios fundamentais para as Marcas - WayTrends","description":"A Usabilidade \u00e9 um factor importante para a percep\u00e7\u00e3o que os Clientes t\u00eam da sua Marca. Conhe\u00e7a as principais regras e princ\u00edpios a ter em conta.","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:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/","twitter_misc":{"Escrito por":"WayNext","Tempo estimado de leitura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#article","isPartOf":{"@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/"},"author":{"name":"WayNext","@id":"https:\/\/www.waynext.com\/waytrends\/#\/schema\/person\/68da9f24501cdbe541374a0083ce1d34"},"headline":"Usabilidade &#8211; princ\u00edpios fundamentais para as Marcas","datePublished":"2017-09-18T13:22:48+00:00","dateModified":"2018-02-19T12:11:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/"},"wordCount":4021,"commentCount":0,"publisher":{"@id":"https:\/\/www.waynext.com\/waytrends\/#organization"},"image":{"@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage"},"thumbnailUrl":"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg","keywords":["acessibilidade","desktop","mobile","smartphone","ui","usabilidade","user experience","user interface","ux"],"articleSection":["Uncategorized"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/","url":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/","name":"Usabilidade - princ\u00edpios fundamentais para as Marcas - WayTrends","isPartOf":{"@id":"https:\/\/www.waynext.com\/waytrends\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage"},"image":{"@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage"},"thumbnailUrl":"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg","datePublished":"2017-09-18T13:22:48+00:00","dateModified":"2018-02-19T12:11:43+00:00","description":"A Usabilidade \u00e9 um factor importante para a percep\u00e7\u00e3o que os Clientes t\u00eam da sua Marca. Conhe\u00e7a as principais regras e princ\u00edpios a ter em conta.","breadcrumb":{"@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#primaryimage","url":"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg","contentUrl":"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2016\/11\/Waytrends_Usabilidade.jpg","width":956,"height":518,"caption":"usabilidade no digital"},{"@type":"BreadcrumbList","@id":"https:\/\/www.waynext.com\/waytrends\/usabilidade-principios-para-marcas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.waynext.com\/waytrends\/"},{"@type":"ListItem","position":2,"name":"Usabilidade &#8211; princ\u00edpios fundamentais para as Marcas"}]},{"@type":"WebSite","@id":"https:\/\/www.waynext.com\/waytrends\/#website","url":"https:\/\/www.waynext.com\/waytrends\/","name":"WayTrends","description":"by Waynext - Ag\u00eancia Digital","publisher":{"@id":"https:\/\/www.waynext.com\/waytrends\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.waynext.com\/waytrends\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.waynext.com\/waytrends\/#organization","name":"WayNext - Ag\u00eancia Digital","url":"https:\/\/www.waynext.com\/waytrends\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.waynext.com\/waytrends\/#\/schema\/logo\/image\/","url":"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2015\/07\/waynext-logo1.png","contentUrl":"https:\/\/www.waynext.com\/waytrends\/wp-content\/uploads\/2015\/07\/waynext-logo1.png","width":800,"height":300,"caption":"WayNext - Ag\u00eancia Digital"},"image":{"@id":"https:\/\/www.waynext.com\/waytrends\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WayNext","https:\/\/x.com\/WayNext","https:\/\/www.linkedin.com\/company\/waynext"]},{"@type":"Person","@id":"https:\/\/www.waynext.com\/waytrends\/#\/schema\/person\/68da9f24501cdbe541374a0083ce1d34","name":"WayNext","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.waynext.com\/waytrends\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca75f5f2d309f951ecfe9d432c4c1f81a08ce0587931d19c4999f9cf92d56449?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca75f5f2d309f951ecfe9d432c4c1f81a08ce0587931d19c4999f9cf92d56449?s=96&d=mm&r=g","caption":"WayNext"},"sameAs":["https:\/\/www.waynext.com"],"url":"https:\/\/www.waynext.com\/waytrends\/author\/waynexteam\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/posts\/3518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/comments?post=3518"}],"version-history":[{"count":97,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/posts\/3518\/revisions"}],"predecessor-version":[{"id":4666,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/posts\/3518\/revisions\/4666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/media\/3572"}],"wp:attachment":[{"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/media?parent=3518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/categories?post=3518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.waynext.com\/waytrends\/wp-json\/wp\/v2\/tags?post=3518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}