{"id":16031,"date":"2013-04-18T10:45:13","date_gmt":"2013-04-18T14:45:13","guid":{"rendered":"https:\/\/audreymarcotte.ca\/uncategorized\/the-implicit-visual-code-of-the-web\/"},"modified":"2025-02-13T18:14:06","modified_gmt":"2025-02-13T23:14:06","slug":"the-implicit-visual-code-of-the-web","status":"publish","type":"post","link":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/","title":{"rendered":"The Implicit Visual Code of the Web"},"content":{"rendered":"<p data-pm-slice=\"1 1 []\">The world and times are changing. The web too.<\/p>\n<p>On the other hand, the web does not always evolve at the same rate as the users of the sites, who are becoming more and more familiar with certain principles and functionalities. Before, we wrote everything: <em>Click here<\/em>, <em>Back to home<\/em>, <em>Read more<\/em>, etc. Over time, a much simpler and much more visual implicit web code took hold. I wouldn\u2019t dare to say that this code is fully acquired by 100% of users, but it is on the way to becoming so. This article aims to list elements from this code in order to continue this momentum and simplify our interfaces. I also invite you to read this excellent article that deals with<\/p>\n<p><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\">the <\/span><a style=\"font-size: revert; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\" title=\"Progressive Reduction\" href=\"http:\/\/layervault.tumblr.com\/post\/42361566927\/progressive-reduction\" target=\"_blank\" rel=\"noopener noreferrer\">progressive simplification of UI<\/a><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\"> .<\/span><\/p>\n<p><!--more--><\/p>\n<h2 data-pm-slice=\"1 1 []\">Logo that Directs to the Homepage<\/h2>\n<p data-pm-slice=\"1 1 []\">It is obvious. The logo directs to the homepage. So why do we still see \u201cHome\u201d labels inside a menu?<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15688 aligncenter\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png\" alt=\"\" width=\"960\" height=\"90\" srcset=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png 960w, https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete-300x28.png 300w, https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete-768x72.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<h2>Required Fields (*)<\/h2>\n<p data-pm-slice=\"1 1 []\">It\u2019s a known formula: we stick an asterisk to a mandatory field. The reference to \u201c<em>Required fields<\/em>\u201d is still very present, but does it still need to be? The asterisk alone could definitely do the job.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15689 aligncenter\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/champs.png\" alt=\"\" width=\"403\" height=\"75\" srcset=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/champs.png 403w, https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/champs-300x56.png 300w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/h2>\n<h2>Read More<\/h2>\n<p data-pm-slice=\"1 1 []\">Blog posts are often presented with an excerpt that ends with the traditional <em>Read more &gt;<\/em>. Knowing that the title of the article is clickable (as is the image, if applicable), do we still need this link? I have my doubts.<\/p>\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15690 aligncenter\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/blogue.png\" alt=\"\" width=\"593\" height=\"286\" srcset=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/blogue.png 593w, https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/blogue-300x145.png 300w\" sizes=\"auto, (max-width: 593px) 100vw, 593px\" \/><\/h2>\n<h2 data-pm-slice=\"1 1 []\">The \u201cEnter\u201d Key That Replaces Buttons<\/h2>\n<p data-pm-slice=\"1 1 []\">Two simple examples where pressing \u201cEnter\u201d replaces the presence of buttons. A good principle to consider depending on the context.<\/p>\n<h3 data-pm-slice=\"1 1 []\">The \u201cSearch\u201d Button<\/h3>\n<p data-pm-slice=\"1 1 []\">A search field is often accompanied by a button to submit your request: a magnifying glass or the \u201cSearch\u201d button. Ideally, this same request can be activated simply by pressing the \u201cEnter\u201d key. So, do we really need the button?<\/p>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15691\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/rechercher.png\" alt=\"\" width=\"202\" height=\"41\" \/><\/h3>\n<h3 data-pm-slice=\"1 1 []\">\u201cComment\u201d Button<\/h3>\n<p data-pm-slice=\"1 1 []\">Comments on Facebook or Disqus use the \u201cEnter\u201d key to send the written comment. This principle is increasingly accepted by users, so we can afford to question the presence of the \u201cComment\u201d button.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15692 aligncenter\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/disqus.png\" alt=\"\" width=\"759\" height=\"363\" srcset=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/disqus.png 759w, https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/disqus-300x143.png 300w\" sizes=\"auto, (max-width: 759px) 100vw, 759px\" \/><\/p>\n<h2 data-pm-slice=\"1 1 []\">Home on Breadcrumb Navigation<\/h2>\n<p data-pm-slice=\"1 1 []\">A larger site requires a breadcrumb trail. This is good for SEO and gives the user a visual cue of where they are on the site. An increasingly accepted code is the replacement of the term \u201cHome\u201d by its icon, also saving a minimum of space.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15693\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/breadcrump.png\" alt=\"\" width=\"202\" height=\"38\" \/><\/p>\n<h2>Click Here<\/h2>\n<p data-pm-slice=\"1 1 []\">A big favorite of government sites (a little less since the adoption of accessibility standards), the famous <em>Click here<\/em> link is probably the first element that needs to be removed. Good web practice is to <a title=\"Blogue de Florent Verschelde\" href=\"http:\/\/fvsch.com\/notes\/2007\/redactionliens\/archive.html\" target=\"_blank\" rel=\"noopener noreferrer\">name the link explicitly<\/a> and identify it visually as clickable.<\/p>\n<figure id=\"attachment_15694\" aria-describedby=\"caption-attachment-15694\" style=\"width: 208px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15694 size-full\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/cliquez.png\" alt=\"\" width=\"208\" height=\"57\" \/><figcaption id=\"caption-attachment-15694\" class=\"wp-caption-text\">\u201cClick here\u201d link to be avoided<\/figcaption><\/figure>\n<h2>Movable Menu<\/h2>\n<p data-pm-slice=\"1 1 []\">It\u2019s the latest trend, because with the omnipresence of responsive design, the visual code of mobile is constantly evolving. The three horizontal lines perfectly symbolize the menu in mobile versions. Other variations are also possible\u2014Smashing Magazine also offers\u00a0<a title=\"Article de Smashing Magazine\" href=\"http:\/\/mobile.smashingmagazine.com\/2012\/10\/08\/the-semantic-responsive-design-navicon\/\" target=\"_blank\" rel=\"noopener noreferrer\">an article on the subject<\/a>.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15695 aligncenter\" src=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/menu.png\" alt=\"\" width=\"361\" height=\"62\" srcset=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/menu.png 361w, https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/menu-300x52.png 300w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p data-pm-slice=\"1 1 []\">The application of this simplification is desirable on today\u2019s sites. And like it or not, it\u2019s the designer\u2019s job to step up and encourage the use and expansion of this visual code.<\/p>\n<p>Perhaps you have other ideas or elements that are part of this implicit code of the web that would be worth listing here? Please feel free to <a href=\"https:\/\/audreymarcotte.ca\/en\/contact\/\">share them with me<\/a>.<\/p>\n<p>Happy simplifying!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The world and times are changing. The web too. On the other hand, the web does not always evolve at the same rate as the users of the sites, who are becoming more and more familiar with certain principles and functionalities. Before, we wrote everything: Click here, Back to home, Read more, etc. Over time, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","_exactmetrics_skip_tracking":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"content-sidebar","footnotes":""},"categories":[438],"tags":[459,440],"class_list":["post-16031","post","type-post","status-publish","format-standard","category-user-experience-ux","tag-responsive-design-en","tag-ux-design","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Implicit Visual Code of the Web<\/title>\n<meta name=\"description\" content=\"Over time, an implicit web code, much simpler and much more visual, has taken hold. This code is not fully acquired users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Implicit Visual Code of the Web\" \/>\n<meta property=\"og:description\" content=\"Over time, an implicit web code, much simpler and much more visual, has taken hold. This code is not fully acquired users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Audrey Marcotte, M.A., UXC\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-18T14:45:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T23:14:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"90\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Audrey Marcotte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Audrey Marcotte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Implicit Visual Code of the Web","description":"Over time, an implicit web code, much simpler and much more visual, has taken hold. This code is not fully acquired users.","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:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/","og_locale":"en_US","og_type":"article","og_title":"The Implicit Visual Code of the Web","og_description":"Over time, an implicit web code, much simpler and much more visual, has taken hold. This code is not fully acquired users.","og_url":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/","og_site_name":"Audrey Marcotte, M.A., UXC","article_published_time":"2013-04-18T14:45:13+00:00","article_modified_time":"2025-02-13T23:14:06+00:00","og_image":[{"width":960,"height":90,"url":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png","type":"image\/png"}],"author":"Audrey Marcotte","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Audrey Marcotte","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#article","isPartOf":{"@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/"},"author":{"name":"Audrey Marcotte","@id":"https:\/\/audreymarcotte.ca\/en\/#\/schema\/person\/cecb0caea458d531762afc053770bcf2"},"headline":"The Implicit Visual Code of the Web","datePublished":"2013-04-18T14:45:13+00:00","dateModified":"2025-02-13T23:14:06+00:00","mainEntityOfPage":{"@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/"},"wordCount":572,"commentCount":0,"publisher":{"@id":"https:\/\/audreymarcotte.ca\/en\/#\/schema\/person\/3ac39e569c6d4a1f7422116319c9155e"},"image":{"@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#primaryimage"},"thumbnailUrl":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png","keywords":["responsive design","UX Design"],"articleSection":["User Experience (UX)"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/","url":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/","name":"The Implicit Visual Code of the Web","isPartOf":{"@id":"https:\/\/audreymarcotte.ca\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#primaryimage"},"image":{"@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#primaryimage"},"thumbnailUrl":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png","datePublished":"2013-04-18T14:45:13+00:00","dateModified":"2025-02-13T23:14:06+00:00","description":"Over time, an implicit web code, much simpler and much more visual, has taken hold. This code is not fully acquired users.","breadcrumb":{"@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#primaryimage","url":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png","contentUrl":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2013\/03\/entete.png"},{"@type":"BreadcrumbList","@id":"https:\/\/audreymarcotte.ca\/en\/the-implicit-visual-code-of-the-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/audreymarcotte.ca\/en\/"},{"@type":"ListItem","position":2,"name":"The Implicit Visual Code of the Web"}]},{"@type":"WebSite","@id":"https:\/\/audreymarcotte.ca\/en\/#website","url":"https:\/\/audreymarcotte.ca\/en\/","name":"Audrey Marcotte, M.A., UXC","description":"Exp\u00e9rience client (CX et UX)","publisher":{"@id":"https:\/\/audreymarcotte.ca\/en\/#\/schema\/person\/3ac39e569c6d4a1f7422116319c9155e"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/audreymarcotte.ca\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/audreymarcotte.ca\/en\/#\/schema\/person\/3ac39e569c6d4a1f7422116319c9155e","name":"Audrey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2025\/01\/Audrey_Marcotte_PinkBG.jpg","url":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2025\/01\/Audrey_Marcotte_PinkBG.jpg","contentUrl":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2025\/01\/Audrey_Marcotte_PinkBG.jpg","width":912,"height":910,"caption":"Audrey"},"logo":{"@id":"https:\/\/audreymarcotte.ca\/wp-content\/uploads\/2025\/01\/Audrey_Marcotte_PinkBG.jpg"}},{"@type":"Person","@id":"https:\/\/audreymarcotte.ca\/en\/#\/schema\/person\/cecb0caea458d531762afc053770bcf2","name":"Audrey Marcotte","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/de35e5568373b6d201a3f59a684a757f952830c3b8046040c201736cdee44ae3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/de35e5568373b6d201a3f59a684a757f952830c3b8046040c201736cdee44ae3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de35e5568373b6d201a3f59a684a757f952830c3b8046040c201736cdee44ae3?s=96&d=mm&r=g","caption":"Audrey Marcotte"},"description":"Audrey Marcotte est conseill\u00e8re strat\u00e9gique en exp\u00e9rience client (CX et UX). Travaillant dans le domaine du Web depuis plus de 15 ans, elle poss\u00e8de une forte exp\u00e9rience en exp\u00e9rience utilisateur, en ergonomie, en design d\u2019interface, ainsi qu\u2019en accessibilit\u00e9 Web (Standard SGQRI-008 notamment).","sameAs":["http:\/\/audreymarcotte.ca","https:\/\/www.linkedin.com\/in\/audreymarcotte\/"]}]}},"_links":{"self":[{"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/posts\/16031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/comments?post=16031"}],"version-history":[{"count":4,"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/posts\/16031\/revisions"}],"predecessor-version":[{"id":16534,"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/posts\/16031\/revisions\/16534"}],"wp:attachment":[{"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/media?parent=16031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/categories?post=16031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/audreymarcotte.ca\/en\/wp-json\/wp\/v2\/tags?post=16031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}