{"id":416,"date":"2016-02-29T10:11:55","date_gmt":"2016-02-29T10:11:55","guid":{"rendered":"http:\/\/www.scrummable.com\/?p=416"},"modified":"2020-06-02T13:34:19","modified_gmt":"2020-06-02T12:34:19","slug":"why-is-a-soap-bubble-round-or-when-and-where-to-use-square-bubbles","status":"publish","type":"post","link":"http:\/\/scrummable.com\/why-is-a-soap-bubble-round-or-when-and-where-to-use-square-bubbles\/","title":{"rendered":"Why is a soap bubble round? Or: When and where to use square bubbles"},"content":{"rendered":"

The laws of physics, those undeniable laws of the universe that we can’t help but abide by, make round soap bubbles. They make green grass and wet water and rainbows that can only be seen between 40 and 42 degrees. These are templates crafted over millennia that just simply work.<\/div>\n

Flippantly, websites are the same. Logos in the top left, horizontal navigation just under the logo, copyright information right at the bottom of the page, buttons that look like buttons, search bars with a magnifying glass, etc. These are all things designers, UX specialists and developers have crafted, broken, modified and, importantly, taught users to use since the dawn of the web. They are tried-and-tested best practices that we’ve all learned to deal with. So, you’ve got a new website to build – do you copy\/paste the last site you built, change the colours and deploy it or open up a blank Photoshop (other graphic design software is available) document and delve deep into your creative conscious for something truly mind-blowing? When should you use a square bubble?<\/p>\n

\"square_bubble\"<\/p>\n

The awards for design, creativity and innovation on the Internet<\/h2>\n

Awwwards.com<\/a>‘s mission is “to discover, recognize, and promote the talent and effort of web designers, developers, and agencies who create unique digital experiences that are useful, innovative, intuitive, and beautiful.” and their site is full of examples of truly stunning works of art. A quick flick through the winners page shows a range of eye-catching techniques in use such as full-screen video, lush parallax and animation, immersive interaction, and a fair few lovely examples of messing around with typography. One thing they all seem to have in common, however, is that they’re predominantly portfolio or brochure sites – nice marketing tools, occasionally existing only for the duration of a campaign before rotting away on a server behind long-forgotten login details.<\/p>\n

By contrast, the world\u2019s top ranking e-commerce sites<\/a> all look a bit naff in comparison. But – and it’s a big but (no sniggering!) – they work. I’ll stick with Amazon<\/a> here, partly because they’re number one on the list and partly because I use Amazon all the time so I feel more confident in dissecting their site. I don’t think there’ll be much disagreement when I suggest that don’t imagine amazon.co.uk winning any awards for their “useful, innovative, intuitive, and beautiful” website.<\/p>\n

\"Amazon

Amazon vs Publicis90: The Great Homepage War 2016\u2122<\/p><\/div><\/p>\n

Amazon takes the traditional approach – logo top left, search bar, hero carousel. This is a layout you\u2019ll find floating around the internet like so many round bubbles.<\/p>\n

In contrast Publicis90<\/a> have filled half of their screen real-estate with their logo and hidden the navigation almost completely until you click the little down arrow at the bottom. Incidentally, they draw your attention to this subtle button with a slick loading animation that builds the button as the content is served in the background. Irritatingly, the page doesn\u2019t appear to scroll down when you click the down button but new elements animate into the screen.<\/p>\n

While I\u2019ve been writing this article, I\u2019ve been back to the Publicis90 website a few times and, by now, it\u2019s starting to annoy me – it seems to have been designed for very infrequent use. It does<\/i> look beautiful, the animation is smooth and fluid and, for all my complaining about the hidden navigation, it doesn\u2019t take more than a second two figure out what you\u2019re doing. It\u2019s been well put together – I don\u2019t want this to be seen as any sort of negative critique of this particular site!<\/p>\n

Amazon has invested heavily in its one solitary goal – selling things. Craig Smith over at Expanded Ramblings suggests that 44% of online shoppers<\/a> go directly to Amazon to make a purchase which may well account for their 2.7 million average daily hit rate<\/a>. Amazon has employed a wealth of tricks and clever thinking into making it appear that their site loads super-fast – no soothing animations or loading bars here because jazzy animation here is a barrier to sales.<\/p>\n

For Publicis90 on the other hand, the demographic they\u2019re aiming for (digital creatives looking for funding) are more likely to follow the site through to its conclusion than be put-off by the measured pace of page loads.<\/p>\n

The most interesting thing to note is that Amazon actually loads slower. There was a factoid floating around the internet a while ago that Amazon loses $1.6 billion dollars a year<\/a> for every second their page load slows down. Again, a lot of effort has gone in to deferring loading of elements to fool the user into thinking it\u2019s loaded quickly enough to save them $1.6 billion.<\/p>\n

\"Amazon

Amazon takes around 40 seconds to load – though you wouldn’t know it!<\/p><\/div>
\n

\"Pulicis90

Pulicis90 comes in at around a second.<\/p><\/div><\/p>\n

Design is beautiful, design is practical.<\/h2>\n

This is not too say that ecommerce sites can’t be beautiful. There are some lovely lush examples around but beauty and practicality aren’t mutually exclusive. Publicis90’s site certainly has practical elements: it renders well on mobile devices with large thumbable links and a slick, smooth, although pared-down animation on navigating around.<\/p>\n

One site that strikes a nice balance is Netflix<\/a>. The video-on-demand giant\u2019s website combines traditional – logo in the top left, account and search in the top right, copyright at the bottom – with a quirky sideways-scrolling \u2018bookshelf\u2019 navigation that has reeled in 75 million users in almost<\/a> every country on earth<\/a>.<\/p>\n

The right tool for the right job<\/h2>\n
\n

When it comes to the internet, there\u2019s no such thing as a one-size-fits-all approach.<\/p>\n<\/blockquote>\n

The best way to decide whether you want to go for something ground-breaking or more traditional is to apply the old adage the right tool for the right job<\/i>. When it comes to the internet, there\u2019s no such thing as a one-size-fits-all approach. Consider your user, consider your goals<\/a>, and create the right solution to solve the problem.<\/p>\n

\"right_tool_for_the_right_job\"<\/p>\n

Few things will drive users away from your site (and to one of your competitors) than using the inappropriate solution. However pretty your e-commerce site is, speed and durability come first. Likewise, few will be impressed by your creative portfolio if it looks like a discount supermarket.<\/p>\n","protected":false},"excerpt":{"rendered":"

The laws of physics, those undeniable laws of the universe that we can’t help but abide by, make round soap bubbles. They make green grass and wet water and rainbows that can only be seen between 40 and 42 degrees. These are templates crafted over millennia that just simply work. Flippantly, websites are the same. […]<\/p>\n","protected":false},"author":1,"featured_media":597,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,3],"tags":[],"_links":{"self":[{"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/posts\/416"}],"collection":[{"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":2,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"predecessor-version":[{"id":968,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/posts\/416\/revisions\/968"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/media\/597"}],"wp:attachment":[{"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/scrummable.com\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}