{"id":4707,"date":"2016-12-05T17:45:42","date_gmt":"2016-12-05T17:45:42","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4707"},"modified":"2020-11-05T11:14:34","modified_gmt":"2020-11-05T11:14:34","slug":"the-illusion-of-time","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/","title":{"rendered":"The Illusion of Time"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">My grandfather was a watchmaker. When I was a child, I used to sit next to his huge wooden desk, watching him design and assemble clockworks made of dozens finicky pieces. The amount of patience, determination and precision he put into every facet of his designs was something I have always admired.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Watching a running clockwork for the first time felt like magic. While a computer\u2019s insides\u2019 looks rather cold and dull, a watch immediately captivates us with its beauty, craftsmanship and human touch.<\/p>\n<div id=\"attachment_4708\" style=\"width: 1290px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4708\" class=\"size-full wp-image-4708\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/clockwork-architecture-drawing.jpeg\" alt=\"clockwork-architecture-drawing\" width=\"1280\" height=\"952\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/clockwork-architecture-drawing.jpeg 1280w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/clockwork-architecture-drawing-600x446.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/clockwork-architecture-drawing-768x571.jpeg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><p id=\"caption-attachment-4708\" class=\"wp-caption-text\">Clockwork architecture drawing<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It wasn\u2019t until I was twelve when my grandfather finally offered me one. As he put it on my wrist, he said something I\u2019ll never forget:<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cRemember, time is the most precious gift of all.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Maybe not as dramatic as uncle Ben\u2019s last words in Spider-Man but it made an impact in the way I think about design ever since. <em>Time is the most valuable and limited resource we have. That\u2019s why good design is about saving time.<\/em><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Time is the most valuable and limited resource we have. That\u2019s why good design is about saving time.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Time in the digital age<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designing digital experiences comes with an ingrained obsession. The obsession of speed and performance. Amazon calculated that an increased loading time of just <em>one second<\/em> could cost it $1.6 billion in sales each year. Google loses about 8 million searches (and ad displays) when page speed decreases by just <em><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.fastcompany.com\/1825005\/how-one-second-could-cost-amazon-16-billion-sales\" target=\"_blank\" rel=\"noopener noreferrer\">four tenths of a second<\/a><\/em>\u200a\u2014\u200ascary shit!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So what do we do?<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We create performance budgets, cut the mustard, run image optimizations, minify our JavaScript and CSS and cache our assets on servers located in the most exotic places around the globe.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There is a caveat though. First of all, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/uxmas.com\/2013\/wait-for-it\" target=\"_blank\" rel=\"noopener noreferrer\">faster doesn\u2019t necessarily equate to better experience<\/a>. Secondly, <em>perception of time is highly subjective<\/em>, or as Einstein aptly put:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cAn hour sitting with a pretty girl on a park bench passes like a minute, but a minute sitting on a hot stove seems like an hour.\u201d<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Remember the last time you were on a bad date? Time suddenly runs painfully slow and the only thing you can think of is why you\u2019re not sitting on your comfy couch back home, watching the latest episode of Game Of Thrones. There are many other, less hormone involved examples that come to mind.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you stare at a watch, you can literally feel how time slows down. Sometimes it even feels like the watch is stopping for a second.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">During holidays, time perception changes dramatically. <em>The disproportionate amount of new impressions changes the way we feel about time<\/em>. It\u2019s why the first few days usually seem \u201cslower\u201d while days in a later stage fly by.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Perception of time is highly subjective.\"<\/p><\/span><\/blockquote>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Time &lt;&gt; Interaction Design<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Time is a crucial part of interaction design. At the end of the day, the absolute minutes and seconds users have to wait won\u2019t really matter though. <em>It\u2019s about how people experience and remember them.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The case of Amazon sheds some light into it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/articles.uie.com\/download_time\/\" target=\"_blank\" rel=\"noopener noreferrer\">study<\/a> by UIE compared the perceived speed of web pages. They found that Amazon was rated faster with an average download time of 36 seconds than About.com with an average download time of 8 seconds. This is huge! They found more along the way\u2026<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When users accomplish what they set out to do on a site, they perceive that site to be fast.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">How is this possible?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>We do not encode time in absolute terms<\/em>. It highly depends on an individual\u2019s emotional state and context. When we feel pleasure and progress as a result of an activity, we barely notice time. The same applies to user interfaces. <em>Well designed interfaces feel faster even though they might actually be slower.<\/em><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"When we feel pleasure and progress as a result of an activity, we barely notice time.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s see what kind of <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/what-is-design-strategy\/\">design strategies<\/a> we can use to alter time perception and potentially create more fluid experiences.<\/p>\n<div id='gallery-1' class='gallery galleryid-4707 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Manhattan-Crosswalk.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"640\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Manhattan-Crosswalk.jpeg\" class=\"attachment-full size-full\" alt=\"manhattan-crosswalk\" aria-describedby=\"gallery-1-4709\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Manhattan-Crosswalk.jpeg 1280w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Manhattan-Crosswalk-600x300.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Manhattan-Crosswalk-768x384.jpeg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-4709'>\n\t\t\t\tManhattan Crosswalk. Captured in the 60&#8217;s\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">1. Keep Users Engaged<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Have you ever been to Manhattan? When you\u2019re standing at a crosswalk, you\u2019ll witness a remarkable pattern in human behavior. People avidly push signal buttons, hoping to reduce waiting time. The frequency of pushing these buttons usually increases proportionally to the level of frustration and stress of the pedestrian.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There is something most people are not aware of though:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">About 90% of the crosswalk signal buttons in Manhattan do nothing<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Why are these buttons still there then? Why didn\u2019t the city get rid of them if they don\u2019t actually work?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The answer highly depends on what we mean by \u201cwork\u201d. People engaging with something often perceive waiting time to be shorter than it actually is. These buttons <em>work<\/em> fine. Just not in the way we expected.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Keeping people engaged is one of the oldest and most efficient strategies to cut waiting time. It\u2019s the reason we have mirrors in elevators, why there are gossip magazines and books in waiting rooms and why we always feel inclined to check our phones as soon as <em>\"waiting experiences\"<\/em> are about to come up.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Keeping people engaged is one of the oldest and most efficient strategies to cut waiting time.\"<\/p><\/span><\/blockquote>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">What about the web?<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the good old days when people used Internet Explorer to browse the web, we always had to look at a blank canvas until a new page was loaded:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_4714\" style=\"width: 490px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4714\" class=\"size-full wp-image-4714\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Internet-Explorer-Windows-98-.png\" alt=\"internet-explorer-windows-98\" width=\"480\" height=\"321\" \/><p id=\"caption-attachment-4714\" class=\"wp-caption-text\">Internet Explorer Windows 98<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>The vast whiteness introduced a moment of self reflection, emptiness and uncertainty.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A small change introduced in later versions changed this. By keeping the current site open until the new page was loaded made people believe that the web site was loading faster, simply because people were able to keep engaging with the currently shown content.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Disney Land is well renown for creating their waiting lines as pleasant as possible. Borrowing basic principles from architecture, they make sure people at the beginning never get demoralized by seeing the end of the line. You move through the different stages of the waiting line while always discovering new stuff. Some people go as far as saying people in Disney Land aren\u2019t queuing in a line, they are delighting in a line.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong> The buttons we discussed before do work from an experience point of view. It\u2019s not technology at work though, it\u2019s psychology.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If we want to create smoother experiences, we need to stop seeing technology as our one and only savior. <em>Let\u2019s make waiting times shorter offering people valuable content like tips, links, quotes etc. to make their waiting time more meaningful.<\/em><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"If we want to create smoother experiences, we need to stop seeing technology as our one and only savior.\"<\/p><\/span><\/blockquote>\n<div id='gallery-2' class='gallery galleryid-4707 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Rail-worker-.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"640\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Rail-worker-.jpeg\" class=\"attachment-full size-full\" alt=\"rail-worker\" aria-describedby=\"gallery-2-4715\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Rail-worker-.jpeg 1280w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Rail-worker--600x300.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Rail-worker--768x384.jpeg 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-4715'>\n\t\t\t\tRail worker being optimistic about his beverage\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">2. Perform Actions Optimistically<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Todays web and mobile apps are packed with microstates. Whether it\u2019s a like button on Instagram or sending tweets on Twitter, our apps need to constantly be in touch with our servers.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Each interaction that needs to communicate with the backend, introduces a potential delay. Let\u2019s see how we can get rid of this and make our apps feel a bit snappier.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Research going back to 1968 suggests that we perceive response times in three distinct categories:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">100 Milliseconds<\/strong><br \/>\nEverything below a 100ms feels like reacting instantly. Try it on your phone. Most mobile websites have an annoying click delay of 300ms. These additional milliseconds can make a critical difference in the way we feel about an interface\u2019s speed.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">1 Second<\/strong><br \/>\nThe user is kept within the flow of the app but loses the sense of control he has from elements reacting instantly.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">10 Seconds<\/strong><br \/>\nRepresents the absolute limit until a user starts thinking about existential questions in life.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whenever possible, we want to be in the sweet <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">100 milliseconds range<\/strong>. A design strategy pioneered by Mike Kriege, which he calls <em>\u201cperforming actions optimistically\u201d<\/em>, tries to address this.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Instead of showing a loading indicator when liking a photo on Instagram, it instantly animates the heart icon while server communication is happening in the background. This makes the experience much smoother since users only get interrupted if an operation fails.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong><br \/>\nDesign and create more optimistic user interfaces that enhance flow by providing instant feedback on the UI.<\/p>\n<div id='gallery-3' class='gallery galleryid-4707 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/First-motion-picture.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/First-motion-picture.jpeg\" class=\"attachment-full size-full\" alt=\"first-motion-picture\" aria-describedby=\"gallery-3-4716\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/First-motion-picture.jpeg 1024w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/First-motion-picture-600x300.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/First-motion-picture-768x384.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-4716'>\n\t\t\t\tThe first motion picture captured in 1878\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Design and create more optimistic user interfaces that enhance flow by providing instant feedback on the UI\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">3. Create Transitional Interfaces<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Motion has become a key ingredient of modern user interface design. If time and space is an inalienable part of interaction design, motion is the key to expressing it. We can\u2019t think of motion as an embellishment anymore. Animations are an incredibly powerful tool to guide users through an experience, tell stories, enhance flow and create branded interactions.<\/p>\n<div id=\"attachment_4719\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4719\" class=\"size-full wp-image-4719\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Branded-interactions.gif\" alt=\"branded-interactions\" width=\"700\" height=\"400\" \/><p id=\"caption-attachment-4719\" class=\"wp-caption-text\">Branded interactions in mobile apps<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When it comes to using animations, timing is critical. Make it too long, and users will feel forced to watch your gimmick every single time. Make it too fast, and they might miss out critical details. There are enough articles about animations out there, so I don\u2019t want to go into details here.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However, in the context of time perception, there is a critical element we should take into account. <em>We can use animation to decrease perceived waiting time.<\/em> Check out the example below:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4720\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Waiting-time.gif\" alt=\"waiting-time\" width=\"360\" height=\"640\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This animation is rather slow isn\u2019t it? If we had to look at this animation every single time, it could potentially become pretty annoying. When used in a smart way though, this kind of animation can get us some extra time while loading new content from servers.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"We can use animation to decrease perceived waiting time.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Slower animations can <em>move the focus away from the waiting to the experience of using the app<\/em>. A critical factor we\u2019ll come across again.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong> The more conscious we experience waiting time, the longer it becomes. Just like a magician, we can use motion to grab users\u2019 attention and shift their focus on the things we want.<\/p>\n<div id='gallery-4' class='gallery galleryid-4707 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Dead-water-wheel.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Dead-water-wheel.jpeg\" class=\"attachment-full size-full\" alt=\"dead-water-wheel\" aria-describedby=\"gallery-4-4721\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Dead-water-wheel.jpeg 1024w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Dead-water-wheel-600x300.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Dead-water-wheel-768x384.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-4721'>\n\t\t\t\tA dead water wheel\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">4. Avoid Modal Spinners<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Did you ever wonder why you always feel like you\u2019re in the slowest line when queuing up in a store? The reason is <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">significance<\/strong>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Every now and then we face a painfully slow queue. We then tell others about our experience during the occasional after-work drink. The more we talk about it, the more significant the memory becomes. The next time we\u2019re in a similar situation we immediately recall this moment and with it, all of its negative emotions. The result: we get biased and think this happens to us more often than it does to others.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The same applies to ajax spinners and other activity indicators.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">No matter how beautiful they are, after seeing thousands of colorful and fancy spinners you\u2019ve become aware that this guy is about to eat your time like a starving, fat Pac-Man<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"While the intentions behind progress indicators are good, the end result can actually turn out to be bad because by definition they call attention to the fact that someone needs to wait.\" \u2013 Luke Wroblewski<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To be fair, spinners aren\u2019t <em>always<\/em> bad. It\u2019s the way we use them which often is. Consider these two approaches for designing a chat application.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Approach A<\/strong><br \/>\nEvery time the user hits the send button, he gets a fullscreen modal spinner showing him that a message is currently being sent.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Approach B<\/strong><br \/>\nEvery time the user hits the send button, a small spinner is attached to the sending message. As soon as the message has been received by the server, the spinner disappears.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Which approach is better? It\u2019s pretty obvious right? While Approach A creates friction, forcing the user to watch the spinner every time he sends a message, approach B embraces flow.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Compare this to the fav-functionality of Twitter we\u2019ve discussed earlier. Imagine how annoying it would be if you had to wait every single time you hit the fav button till the server fully processed your request. You would immediately stop using the feature.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This doesn\u2019t just apply to chat applications though. It applies to all kinds of interactions involving micro states. Approach B is obviously better and yet people still often go for Approach A since it seems easier to build.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong> Use spinners reasonably. Avoid full screen spinners that block the UI state of an app.<\/p>\n<div id='gallery-5' class='gallery galleryid-4707 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/People-happily-waiting.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/People-happily-waiting.jpeg\" class=\"attachment-full size-full\" alt=\"people-happily-waiting\" aria-describedby=\"gallery-5-4722\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/People-happily-waiting.jpeg 1024w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/People-happily-waiting-600x300.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/People-happily-waiting-768x384.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-4722'>\n\t\t\t\tPeople happily waiting\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">5. Communicating longer waits<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Every now and then, longer waits are unavoidable. The way we design them, greatly impacts how people experience them.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Take visiting a restaurant as an example. In the case of waiting at a restaurant, there are several factors at play:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Am I served immediately? Did I get noticed early on?<\/li>\n<li>Do I know the expected waiting time and feel it\u2019s appropriate?<\/li>\n<li>Do I understand why I have to wait in the first place?<\/li>\n<li>Am I dealt with honestly or do I have to wait longer than others?<\/li>\n<li>Is there a delicious food scent in the air?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All these factors create a set of expectations paving the scene for the experience that follows. In fact, setting the wrong expectations can turn the nicest person into an obnoxious jerk.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The same applies to the digital landscape where a small faux-pas like using the wrong color for a button can turn a seemingly humble and peaceful person into the most insidious troll. Let\u2019s avoid this by helping people to make better use of their time.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"...setting the wrong expectations can turn the nicest person into an obnoxious jerk.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Progress Bars<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">An indispensable tool that comes to mind when looking for means to communicate progress is quite obvious: <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">the good\u2019ol progress bar<\/strong>. It turns out there are better and worse progress bars out there. So when is a progress bar bad?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>In short, when it lies.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Remember the setup procedure of old Windows applications that start blazingly fast and then suddenly stop at 99% for an unproportionate amount of time? If you had known from the beginning how long the whole procedure really takes, you would have grabbed a coffee instead. But you didn\u2019t.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The communicated progress set the wrong expectations. Instead of sipping that delicious latte, you were sticking to your screen, desperately waiting for that last 1% to finish. Not very delightful.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This isn\u2019t a new phenomena. Progress bars have been lying to us for decades and it isn\u2019t exactly surpising. Constructing progress bars that truthfully reflect the state of a system can be an insanely complicated task in its own right.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But maybe we got progress bars wrong. Maybe we need to rethink why they are here in the first place. Maybe their purpose never was to provide us with accurate information. <em>Maybe their real benefit lies in building reasonable expectations and giving people a visually engaging way to observe estimated progress.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One way to achieve this, is by making sure that progress bars are moving at a regular, predictable speed. But there is more to it\u2026<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Speeding up progress bars<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Time is subjective. What if we could change the perception of speed and time with a few simple design adjustments? Would we get away with it? A study conducted by Chris Harrison tried to answer this question. Here is what they\u2019ve found.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/www.youtube.com\/embed\/jlrT-xt8tis\" width=\"720\" height=\"405\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Frequency and rhythm variations are known to affect peoples\u2019 perception of time. The study found that a blinking progress bar feels faster than a static one. The temporal illusion got even more intense when they added ribbings moving in the opposite direction. <em>All of which can make the waiting experience feel up to 11% faster.<\/em><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Frequency and rhythm variations are known to affect peoples\u2019 perception of time.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Other studies found that users are quite susceptible to priming. They prefer progress bars that are faster in the beginning and at the end of a procedure which coincides with the peak-end-rule by Daniel Kahnemann.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some might argue that these kind of adjustments are deceptive and manipulative. I\u2019d say they\u2019re beneficial. Just like the crosswalk signal buttons in Manhattan, these design adjustments cut perceived waiting time and improve the overall experience.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Try this simple trick:<\/strong> next time you move a huge file on your computer, resize the progress window. The wider it is, the faster it will feel since the progress indicator needs to cover a bigger distance.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4724\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Progress-bar-speed.png\" alt=\"progress-bar-speed\" width=\"503\" height=\"205\" \/><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Countdowns \/ ETA<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While the progress bar is a higly visual tool to communicate progress, it\u2019s often not enough. Particularily longer waits demand a more precise indicator. Enter the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">countdown<\/strong>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The infamous study about waiting lines by David Maister showed that knowing about the estimated waiting time can make it feel faster. On the other hand, getting wrong information can cause the opposite:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201c[\u2026] The pilot who repeatedly announces \u201conly a few more minutes\u201d adds insult to injury when the wait goes on and on. Not only are the customers being forced to wait, but they are not being dealt with honestly.\u201d<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Users can greatly profit from feedback displays for longer waits. It allows them to do other things and come back later. Again, precision isn\u2019t as important as one might think. It\u2019s about giving users a rough idea how long the whole thing will take. Will it take a minute or two, or more than 10 minutes?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong> Speed up your progress bars and make sure you\u2018re not one of the 99% jerks. Take advantage of countdowns for longer waits so users can make better use of their time.<\/p>\n<div id='gallery-6' class='gallery galleryid-4707 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Construction-workers.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Construction-workers.jpeg\" class=\"attachment-full size-full\" alt=\"construction-workers\" aria-describedby=\"gallery-6-4725\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Construction-workers.jpeg 1024w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Construction-workers-600x301.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Construction-workers-768x385.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-4725'>\n\t\t\t\tConstruction workers of the Golden Gate Bridge, San Francisco 1935\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">6. Load Content Progressively<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A few months ago, I was visiting London for a conference. Whenever I go there, I make sure I pay a visit to one of my favorite coffee places: <em>Joe &amp; the Juice<\/em>. I just love the atmosphere there. Chill songs, enough space to work, freshly pressed orange juice, good espresso and obviously\u200a\u2014\u200athe beautiful Slayer 3-group coffee machine.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This time, my visit would be a little different though. It was a sunny Friday afternoon and to my disappointment, the shop was closed due to renovation. It was covered by huge drape reading \u201cWe are renovating for you\u201d. I\u2019m sure you have seen similar ones. The point is to build anticipation and let people know that something new is coming.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Over the past years, there were lots of ongoing debates whether you should use progressive image rendering or stick to the default \u201cbaseline\u201d rendering approach. The difference is mostly how the images are loaded:<\/p>\n<div id=\"attachment_4726\" style=\"width: 931px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4726\" class=\"size-full wp-image-4726\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Progressive-vs-baseline.jpeg\" alt=\"progressive-vs-baseline\" width=\"921\" height=\"330\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Progressive-vs-baseline.jpeg 921w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Progressive-vs-baseline-600x215.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Progressive-vs-baseline-768x275.jpeg 768w\" sizes=\"auto, (max-width: 921px) 100vw, 921px\" \/><p id=\"caption-attachment-4726\" class=\"wp-caption-text\">Progressive (left) vs baseline loading.<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While progressive images load in different stages, from pixelated and blurred to sharp, baseline images load linearly from top to bottom. The basic idea of progressive images is to improve the user experience, as the image already takes its place, and just like the cover, let\u2019s the user know what\u2019s happening.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s not just images though. Facebook took the basic idea of progressive image rendering and applied it to their posts. A post that hadn\u2019t loaded yet, used this placeholder:<\/p>\n<div id=\"attachment_4727\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4727\" class=\"size-full wp-image-4727\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Facebook-loading.gif\" alt=\"facebook-content-loading\" width=\"768\" height=\"354\" \/><p id=\"caption-attachment-4727\" class=\"wp-caption-text\">Facebook content placeholder by George Philipps<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This placeholder sets expectations. When you visited facebook.com, the experience seemed smoother because there is already something there. Once a posts content is loaded, the placeholder gets replaced with the actual content.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pinterest followed a similar strategy. They show the the most dominant color of an image until it\u2019s fully loaded.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4728\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/11\/Pinterest-content-loading.png\" alt=\"pinterest-content-loading\" width=\"1280\" height=\"765\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Pinterest-content-loading.png 1280w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Pinterest-content-loading-600x359.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/11\/Pinterest-content-loading-768x459.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The transition from no content to the actual content is more seamless and seems overall faster.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Similarly, we should prioritise assets that are positioned above the fold higher, then the ones that are at the bottom of a website.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Takeaway:<\/strong> Load content progressively so the basic experience is available as fast as possible.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tick. Tock.<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Our perception of time, and every experience people have with the things we put in this world is shaped by various factors we might not be aware of. As long as technology doesn\u2019t fully eliminate waiting, we can take advantage of our subjective perception of the world and make the experiences we craft a little more snappy, seamless and captivating.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Time is valuable and the most precious gift there is. Let\u2019s make the best out of it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Image courtesy to:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Marcelo Guerra<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/historyinphotos.blogspot.co.uk\/2012\/06\/golden-gate-bridge.html\" target=\"_blank\" rel=\"noopener noreferrer\">History in photos<\/a><\/li>\n<li>New old stock photography<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.northcountrypublicradio.org\/news\/npr\/96654742\/a-depression-era-anthem-for-our-times\" target=\"_blank\" rel=\"noopener noreferrer\">NCPR<\/a><\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/swlh\/the-illusion-of-time-8f321fa2f191#.hx4yt1i0t\" target=\"_blank\" rel=\"noopener noreferrer\">Adrian's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>My grandfather was a watchmaker. When I was a child, I used to sit next to his huge wooden desk, watching him design and assemble clockworks made of dozens finicky pieces. The amount of patience, determination and precision he put into every facet of his designs was something I have always admired. Watching a running clockwork for the first time&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":66,"featured_media":4909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Illusion of Time | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"My grandfather was a watchmaker. When I was a child, I used to sit next to his huge wooden desk, watching him design and assemble clockworks made of dozens finicky pieces. The amount of patience, determination and precision he put into every facet of his designs was something I have always admired. Watching a running clockwork for the first time... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-05T17:45:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-05T11:14:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/time.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"14 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/time.jpg\",\"width\":1600,\"height\":900,\"caption\":\"time\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/\",\"name\":\"The Illusion of Time | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#primaryimage\"},\"datePublished\":\"2016-12-05T17:45:42+00:00\",\"dateModified\":\"2020-11-05T11:14:34+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/8e0eea96ba3390e9922653f7826a7f05\"},\"headline\":\"The Illusion of Time\",\"datePublished\":\"2016-12-05T17:45:42+00:00\",\"dateModified\":\"2020-11-05T11:14:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/the-illusion-of-time\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/8e0eea96ba3390e9922653f7826a7f05\",\"name\":\"Adrian Zumbrunnen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4cea63cef509bb159014b731f30ced651ed0680b428c1b8baff76223afb74d36?s=96&d=mm&r=g\",\"caption\":\"Adrian Zumbrunnen\"},\"description\":\"Currently design tinkering at Google. Formerly iA. Writes and speaks about design. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=4707"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/4909"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=4707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=4707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=4707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}