{"id":559,"date":"2017-06-16T12:26:01","date_gmt":"2017-06-16T12:26:01","guid":{"rendered":"https:\/\/conversion.com\/aesthetic-usability-effect\/"},"modified":"2024-08-14T10:19:12","modified_gmt":"2024-08-14T10:19:12","slug":"aesthetic-usability-effect","status":"publish","type":"post","link":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/","title":{"rendered":"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail?"},"content":{"rendered":"<section class=\"c-post-content\" data-ref=\"case-content\">\n\t<div class=\"post-content\">\n\t\t<div class=\"post-content__container container container--medium\">\n\t\t\t<aside class=\"post-content__sidebar post-content__sidebar--links\">\n\t\t\t\t<div class=\"sticky-menu\" data-ref=\"case-content-menu\">\n\t\t\t\t\t<h3 class=\"sticky-menu__title\">Contents<\/h3>\n\t\t\t\t\t<ul class=\"sticky-menu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t                            \t\t\t\t\t\t\t<li class=\"sticky-menu__item\">\n\t\t\t\t\t\t\t\t<a class=\"sticky-menu__item-link  active\" href=\"#introduction\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t<span class=\"arrow\"><svg viewBox=\"0 0 16 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10.6875 9.34375V7.34375L13.3438 10L10.6875 12.6562V10.6562H2.65625V9.34375H10.6875Z\" fill=\"#F6876F\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"sticky-menu__item-text\">Introduction<\/span>\n\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t                            \t\t\t\t\t\t\t<li class=\"sticky-menu__item\">\n\t\t\t\t\t\t\t\t<a class=\"sticky-menu__item-link \" href=\"#theaestheticusabilityeffect\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t<span class=\"arrow\"><svg viewBox=\"0 0 16 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10.6875 9.34375V7.34375L13.3438 10L10.6875 12.6562V10.6562H2.65625V9.34375H10.6875Z\" fill=\"#F6876F\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"sticky-menu__item-text\">The aesthetic-usability effect.<\/span>\n\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t                            \t\t\t\t\t\t\t<li class=\"sticky-menu__item\">\n\t\t\t\t\t\t\t\t<a class=\"sticky-menu__item-link \" href=\"#howtoapplythatprincipleyourself\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t<span class=\"arrow\"><svg viewBox=\"0 0 16 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10.6875 9.34375V7.34375L13.3438 10L10.6875 12.6562V10.6562H2.65625V9.34375H10.6875Z\" fill=\"#F6876F\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"sticky-menu__item-text\">How to apply that principle yourself?<\/span>\n\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t                            \t\t\t\t\t\t\t<li class=\"sticky-menu__item\">\n\t\t\t\t\t\t\t\t<a class=\"sticky-menu__item-link \" href=\"#howtomakemywebsitevisuallyattractive\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t<span class=\"arrow\"><svg viewBox=\"0 0 16 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10.6875 9.34375V7.34375L13.3438 10L10.6875 12.6562V10.6562H2.65625V9.34375H10.6875Z\" fill=\"#F6876F\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"sticky-menu__item-text\">How to make my website visually attractive?<\/span>\n\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t                            \t\t\t\t\t\t\t<li class=\"sticky-menu__item\">\n\t\t\t\t\t\t\t\t<a class=\"sticky-menu__item-link \" href=\"#checkoutflow\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t<span class=\"arrow\"><svg viewBox=\"0 0 16 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10.6875 9.34375V7.34375L13.3438 10L10.6875 12.6562V10.6562H2.65625V9.34375H10.6875Z\" fill=\"#F6876F\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"sticky-menu__item-text\">Checkout Flow<\/span>\n\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t                            \t\t\t\t\t\t\t<li class=\"sticky-menu__item\">\n\t\t\t\t\t\t\t\t<a class=\"sticky-menu__item-link \" href=\"#keytakeawaysandlimitations\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t<span class=\"arrow\"><svg viewBox=\"0 0 16 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M10.6875 9.34375V7.34375L13.3438 10L10.6875 12.6562V10.6562H2.65625V9.34375H10.6875Z\" fill=\"#F6876F\"\/><\/svg><\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"sticky-menu__item-text\">Key Takeaways (and Limitations):<\/span>\n\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t<\/div>\n\t\t\t<\/aside>\n\n\t\t\t<div class=\"post-content__content\">\n\t\t\t\t<ul class=\"post-content__sections\">\n\t\t\t\t\t                        \t\t\t\t\t\t<li class=\"post-content__section\" id=\"introduction\" data-ref=\"case-content-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__section-content\"><p><span style=\"font-weight: 400;\">Retailers we have a problem.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">iPerception\u2019s 2016 <\/span><a href=\"https:\/\/cdn2.hubspot.net\/hubfs\/469164\/eBooks\/iPerceptions_eCommerce_Industry_Report.pdf?t=1494278730089\"><span style=\"font-weight: 400;\">report<\/span><\/a><span style=\"font-weight: 400;\"> shows that less than 25% of people who intended to make a purchase ended up actually buying something. That\u2019s a huge leak in the buying funnel.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why did 75% of people leave? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Using iPerception\u2019s <\/span><a href=\"http:\/\/www.agconsult.com\/en\/usability-blog\/48-of-visitors-on-e-commerce-websites-dont-buy-due-to-lack-of-usability\"><span style=\"font-weight: 400;\">report<\/span><\/a><span style=\"font-weight: 400;\"> from 2009 the top #1 and #3 reasons are usability-related:<\/span><\/p>\n<p class=\"images clearfix\"><img decoding=\"async\" class=\"wp-image-1196 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/504image5.png\" alt=\"\" width=\"502\" height=\"275\" \/><\/p>\n<p><b>Lesson<\/b><span style=\"font-weight: 400;\">: Fix your site\u2019s usability issues.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But the problem is even more severe when you realise that this statistic talks about those who <\/span><i><span style=\"font-weight: 400;\">stayed<\/span><\/i><span style=\"font-weight: 400;\"> on the website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The second biggest leak is people who didn\u2019t even stay on the website. The average bounce rate for e-commerce is reported to be somewhere between <\/span><a href=\"https:\/\/www.quora.com\/What-is-a-good-bounce-rate-for-an-ecommerce-retail-website\"><span style=\"font-weight: 400;\">35 and 57%<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to a <\/span><a href=\"https:\/\/dl.acm.org\/citation.cfm?doid=1835449.1835513\"><span style=\"font-weight: 400;\">study<\/span><\/a><span style=\"font-weight: 400;\"> by Chao Liu and colleagues from Microsoft Research, there is a 10-20 second window where a user decides whether a website is worth giving a chance or not. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">What happens during those 20 seconds that makes people leave?<\/span><\/p>\n<p><a href=\"http:\/\/web.archive.org\/web\/20120229175018\/http:\/\/www.consumerwebwatch.org\/pdfs\/stanfordPTL.pdf\"><span style=\"font-weight: 400;\">Research<\/span><\/a><span style=\"font-weight: 400;\"> led by B.J. Fogg shows that many factors affect people\u2019s trust towards a website, but <\/span><b>the most prominent issue<\/b><span style=\"font-weight: 400;\"> is design. <\/span><\/p>\n<p><b>Lesson:<\/b><span style=\"font-weight: 400;\"> Make your website visually appealing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But here\u2019s something interesting. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">It appears that a website\u2019s aesthetics and usability aren\u2019t independent. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Research shows that users find visually attractive websites easy to use, even when <\/span><i><span style=\"font-weight: 400;\">actual<\/span><\/i><span style=\"font-weight: 400;\"> ease to use is poor. In one <\/span><a href=\"https:\/\/www.researchgate.net\/profile\/Gitte_Lindgaard\/publication\/220208334_Attention_web_designers_You_have_50_milliseconds_to_make_a_good_first_impression_Behaviour_and_Information_Technology_252_115-126\/links\/0fcfd5100e703e957e000000.pdf\"><span style=\"font-weight: 400;\">usability study<\/span><\/a><span style=\"font-weight: 400;\">, on average, users failed to complete <\/span><i><span style=\"font-weight: 400;\">more than half<\/span><\/i><span style=\"font-weight: 400;\"> of the required tasks successfully. When they worked with visually appealing websites they still rated their user experience highly. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, maybe you could kill 2 birds with one stone: by improving aesthetics you might not only convince more visitors to stay, but also increase the chance that they will put up with your usability issues, ultimately buying.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This principle is known as the aesthetic-usability effect.<\/span><\/p>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__index\">\n\t\t\t\t\t\t\t\t<h3 class=\"post-content__index-title\">Contents<\/h3>\n\t\t\t\t\t\t\t\t<ul class=\"post-content__index-links\" data-ref=\"case-content-menu\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"post-content__index-link\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#introduction\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t\t\t\tIntroduction\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"post-content__index-link\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#theaestheticusabilityeffect\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t\t\t\tThe aesthetic-usability effect.\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"post-content__index-link\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#howtoapplythatprincipleyourself\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t\t\t\tHow to apply that principle yourself?\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"post-content__index-link\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#howtomakemywebsitevisuallyattractive\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t\t\t\tHow to make my website visually attractive?\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"post-content__index-link\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#checkoutflow\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t\t\t\tCheckout Flow\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"post-content__index-link\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#keytakeawaysandlimitations\" data-ref=\"case-content-menu-item\">\n\t\t\t\t\t\t\t\t\t\t\t\tKey Takeaways (and Limitations):\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t                        \t\t\t\t\t\t<li class=\"post-content__section\" id=\"theaestheticusabilityeffect\" data-ref=\"case-content-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"post-content__section-title\">The aesthetic-usability effect.<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__section-content\"><p><span style=\"font-weight: 400;\">In the context of e-commerce, the <\/span><b>aesthetic-usability effect<\/b><span style=\"font-weight: 400;\"> is when users perceive more aesthetically pleasing websites to be easier to use than less aesthetically pleasing websites. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This means that better aesthetics can result in:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">More people choosing your website over other sites<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">People putting up with your usability issues, making them more likely to reach the end of the buying funnel and purchase<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">(With that said, there are <\/span><a href=\"http:\/\/www.sciencedirect.com\/science\/article\/pii\/S0747563212000908\"><span style=\"font-weight: 400;\">studies<\/span><\/a><span style=\"font-weight: 400;\"> that show that <\/span><i><span style=\"font-weight: 400;\">severe<\/span><\/i><span style=\"font-weight: 400;\"> usability problems will force users to judge usability independently of aesthetics. Regardless of how great your visuals are, if a user can\u2019t find a product, she won\u2019t buy.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We saw the aesthetic-usability effect work not only in academic labs, but in real-life business, too. For example, one experiment we ran was solely focused on improving the design of a check-out form. This test resulted in a +3.6% uplift. Additional revenue from that uplift is estimated at \u20ac450,000+ per year. <\/span><\/p>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t                        \t\t\t\t\t\t<li class=\"post-content__section\" id=\"howtoapplythatprincipleyourself\" data-ref=\"case-content-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"post-content__section-title\">How to apply that principle yourself?<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__section-content\"><p><span style=\"font-weight: 400;\">Some of the most important areas to apply that thinking are:<\/span><\/p>\n<p><b>Top Landing Pages. <\/b><\/p>\n<p><span style=\"font-weight: 400;\">A landing page is the first page that users see when they come to your website. It\u2019s crucial because <\/span><i><span style=\"font-weight: 400;\">this<\/span><\/i> <i><span style=\"font-weight: 400;\">is <\/span><\/i><span style=\"font-weight: 400;\">where users form a positive first impression of your website. How well those pages look thus determines whether users will stay or leave, and what\u2019s their level of tolerance with your usability issues. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each website\u2019s situation is different, but in retail most often visitors enter through your homepage, your category pages or your product pages. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">As an example, let\u2019s look at a traffic report for PC World, a British chain of computer superstores.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Based on the limited data that Semrush can provide me with, I can see that their homepage gets the most traffic. Equally, their category pages are right at the top:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1206 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/1025image9.png\" alt=\"\" width=\"601\" height=\"334\" \/><\/p>\n<p><b>Checkout Flow.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Checkout Flow is the stage where people start to open their wallets. Not everyone does though with <\/span><a href=\"https:\/\/baymard.com\/lists\/cart-abandonment-rate\"><span style=\"font-weight: 400;\">69% of users abandoning the process<\/span><\/a><span style=\"font-weight: 400;\">. At least 2 of the top 10 reasons why people abandon could be mitigated by the aesthetic-usability effect:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1210 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/1536image11.png\" alt=\"\" width=\"595\" height=\"385\" \/><\/p>\n<p><span style=\"font-weight: 400;\">As we already know, making this stage visually appealing can enhance users\u2019 perception of the funnel being easy to complete and drive them to make a purchase. \u00a0<\/span><\/p>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t                            <div data-target=\"post-newsletter-anchor\" data-device=\"mobile\"><\/div>\n                        \t\t\t\t\t                        \t\t\t\t\t\t<li class=\"post-content__section\" id=\"howtomakemywebsitevisuallyattractive\" data-ref=\"case-content-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"post-content__section-title\">How to make my website visually attractive?<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__section-content\"><p><span style=\"font-weight: 400;\">A website needs to be attractive, but how do we make it happen? After all, it\u2019s subjective. You might like your website, but do your users think the same way? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are 2 approaches to answering those questions:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Customer research (aka ask your customers)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Heuristic analysis (aka ask experienced UX designers)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">I\u2019m going to show you how you can apply both approaches, looking at examples of PC World\u2019s homepage (customer research) and NET-A-PORTER\u2019s mobile checkout flow (heuristic analysis).<\/span><\/p>\n<p><b>PC World\u2019s Homepage.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">To understand if users perceive PC World\u2019s homepage as visually attractive, we ran a small-scale survey, asking visitors to rate different aspects of that page. <\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1211 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/1788image3.png\" alt=\"\" width=\"596\" height=\"343\" \/><\/p>\n<p><span style=\"font-weight: 400;\">For research we used <\/span><a href=\"http:\/\/www.meinald.de\/forschung\/visawi\/\"><span style=\"font-weight: 400;\">VisAWI<\/span><\/a><span style=\"font-weight: 400;\">, an 18-question survey that was specifically designed for evaluating website aesthetics. The results of the survey showed that overall the website is visually pleasing. It scored 4.47 points out of 7. The benchmark for e-commerce is 4.05. This shows that PC World\u2019s homepage is better than average:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1200 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/769image10.png\" alt=\"\" width=\"596\" height=\"477\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In particular, users highly rated PC World\u2019s layout as being \u201ceasy-to-grasp\u201d and \u201cwell-structured\u201d, indicating that it met their expectations as an ecommerce store. Overall, the majority agreed that the site is designed with care and looks professional. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">But findings also highlight a number of areas that could be improved.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">49% of users agreed that the layout is \u201ctoo dense\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">40% of users agreed that the choice of colours looks \u201cbotched\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">47% of users agreed that the design of the site \u201clacks a concept\u201d<\/span><\/li>\n<\/ul>\n<p><b>49% of users agreed that the layout is \u201ctoo dense\u201d<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Some of the reasons why users might think so are: <\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><span style=\"font-weight: 400;\">Lack of whitespace<\/span><\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1203 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/975image19.jpg\" alt=\"\" width=\"599\" height=\"356\" \/> <img decoding=\"async\" class=\"wp-image-1202 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/975image2.jpg\" alt=\"\" width=\"598\" height=\"355\" \/><\/p>\n<p><span style=\"text-decoration: underline;\"><span style=\"font-weight: 400;\">Text-heavy sections<\/span><\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1209 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/1446image8.png\" alt=\"\" width=\"600\" height=\"359\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The \u201creasons to shop\u201d section is very crowded which adds to the denseness of the page. This is further complicated by how text-heavy this section is, which could leave users perceiving it as overwhelming: <\/span><\/p>\n<p><b>40% of users agreed that the choice of colours look \u201cbotched\u201d. <\/b><\/p>\n<p><span style=\"font-weight: 400;\">This might be because PC World\u2019s color harmony is disturbed. According to <\/span><a href=\"http:\/\/zevendesign.com\/color-harmony-hulk-wears-purple-pants\/\"><span style=\"font-weight: 400;\">color harmony theory<\/span><\/a><span style=\"font-weight: 400;\">, bright blue and red colors that they use for their promo campaign wouldn\u2019t necessarily match their main brand color, purple. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The theory of color harmony tells us that PC World would be better off following Hulk\u2019s example&#8230; <\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1204 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/978image20.jpg\" alt=\"\" width=\"590\" height=\"369\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In other words, using green as a complementary color to purple (potentially alongside a more saturated red): <\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-1195 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/360image15.png\" alt=\"\" width=\"360\" height=\"360\" \/><\/p>\n<p><span style=\"font-weight: 400;\">There are <\/span><a href=\"http:\/\/zevendesign.com\/color-harmony-hulk-wears-purple-pants\/\"><span style=\"font-weight: 400;\">5 types of color harmonies<\/span><\/a><span style=\"font-weight: 400;\">, and depending on the one you choose, you\u2019ll find other matches. Here\u2019s another one suggested by <\/span><a href=\"http:\/\/Paletton.com\"><span style=\"font-weight: 400;\">Paletton.com<\/span><\/a><span style=\"font-weight: 400;\">, a tool for creating complementary color combinations:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-1194 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/360image7.png\" alt=\"\" width=\"360\" height=\"360\" \/><\/p>\n<p><span style=\"font-weight: 400;\">To me personally (feel free to disagree), it seems that there is their branded color scheme. When seen in isolation its colors match well:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1215 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/pcworld-1255.png\" alt=\"\" width=\"588\" height=\"291\" \/><\/p>\n<p><span style=\"font-weight: 400;\">There is the promo-campaign color scheme. Again, when seen in isolation its colors match well:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1208 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/1104image1.jpg\" alt=\"\" width=\"590\" height=\"391\" \/><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s combining the two together that creates a challenge, and might have resulted in some people feeling that colors look \u201cbotched\u201d.<\/span><\/p>\n<p><b>47% of users agreed that the design of the site \u201clacks a concept\u201d<\/b><\/p>\n<p><span style=\"font-weight: 400;\">When users say that the design of the site lacks a concept this might mean that a page doesn\u2019t form a complete and pleasing whole. <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Gestalt_psychology\"><span style=\"font-weight: 400;\">Gestalt theory of psychology<\/span><\/a><span style=\"font-weight: 400;\"> suggests that we look at an object as a whole first and zoom in on its individual parts next.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When we have difficulty making sense of objects, we <\/span><a href=\"http:\/\/journals.sagepub.com\/doi\/abs\/10.1111\/j.1467-9280.2006.01785.x\"><span style=\"font-weight: 400;\">tend to<\/span><\/a><span style=\"font-weight: 400;\"> perceive them as less beautiful. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">As we\u2019ve already observed with the colour scheme, the page doesn\u2019t form a unified whole as two separate colour scheme do not match each other.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Similarly, the product catalog is chaotically organised. This makes it more difficult for people to group the objects together:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1201 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/773image16.png\" alt=\"\" width=\"595\" height=\"355\" \/><\/p>\n<p><span style=\"font-weight: 400;\">How about grouping those objects by a unified theme? For example, one row of laptops, one row of game-related products, one row of home office equipment. This would\u2019ve made it easier for users to make sense of the page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, the page doesn\u2019t seem to have a unified purpose. Yes, the main theme is the promo-campaign, but what action should users take next? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">With so many competing calls-to-actions this isn\u2019t clear:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1207 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/1102image14.jpg\" alt=\"\" width=\"598\" height=\"396\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Every page should have a dominant call-to-action (CTA). (As you should know from our article on <\/span><a href=\"https:\/\/conversion.com\/blog\/too-many-options\/\"><span style=\"font-weight: 400;\">the paradox of choice<\/span><\/a><span style=\"font-weight: 400;\"> when there is no dominant option users are likely to get overwhelmed and quit). <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Their \u201csummer mega deals\u201d banner takes the most space. So, I assume this was <\/span><i><span style=\"font-weight: 400;\">meant<\/span><\/i> <i><span style=\"font-weight: 400;\">to be<\/span><\/i><span style=\"font-weight: 400;\"> their dominant CTA. The problem is it looks like an image, not a clickable element which is why people might have been confused as to what they should do next on the page. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If <\/span><i><span style=\"font-weight: 400;\">this is<\/span><\/i><span style=\"font-weight: 400;\"> the dominant purpose of this page, PCWorld would have been better off designing their \u201cShop Now\u201d CTA not as text, but as a button. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Look at what Maplin is doing:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-1205 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/984image6.jpg\" alt=\"\" width=\"604\" height=\"333\" \/><\/p>\n<p><span style=\"font-weight: 400;\">While technically, this banner is one single image, the call-to-action was designed to <\/span><i><span style=\"font-weight: 400;\">look like<\/span><\/i><span style=\"font-weight: 400;\"> a button, so it\u2019s clear to people that they can click it. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If PCWorld did the same and made that button as prominent as the rest of the banner, it would be easier for users to identify <\/span><b>the main CTA<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t                        \t\t\t\t\t\t<li class=\"post-content__section\" id=\"checkoutflow\" data-ref=\"case-content-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"post-content__section-title\">Checkout Flow<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__section-content\"><p><span style=\"font-weight: 400;\">To show you an example of how heuristic analysis can be applied to improve aesthetics, we\u2019re going to look at NET-A-PORTER, a luxury fashion store.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Our designer, Josh Lenz, quickly identified a number of problems:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><b>Lack of whitespace.<\/b><span style=\"font-weight: 400;\"> Margins are too narrow and grey background overtakes the whole screen. Research shows that perception of simplicity is critical not only for <\/span><a href=\"http:\/\/www.sciencedirect.com\/science\/article\/pii\/S1071581910000777\"><span style=\"font-weight: 400;\">general aesthetics<\/span><\/a><span style=\"font-weight: 400;\">, but also for creating a <\/span><a href=\"https:\/\/conversionxl.com\/optimize-luxury-brand\/\"><span style=\"font-weight: 400;\">perception of luxury<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Forms look outdated.<\/b><span style=\"font-weight: 400;\"> They don\u2019t reflect the previous stages of the user experience. This inconsistency with the brand and design could diminish trust and credibility.<img decoding=\"async\" class=\"wp-image-1214 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/image21-1.png\" alt=\"\" width=\"573\" height=\"933\" \/><\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Third step looks broken<\/b><span style=\"font-weight: 400;\">\u00a0or at least unprofessionally designed as \u201cSelect card type\u201d field overlaps with \u201cCard number\u201d field.<\/span><\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"size-full wp-image-1193 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/320image17.jpg\" alt=\"\" width=\"320\" height=\"1212\" \/><\/p>\n<p><span style=\"font-weight: 400;\">So, the checkout design looks not only hard to complete, but might also diminish users\u2019 trust in the brand. To reverse that experience he made a number of changes:<\/span><\/p>\n<p><strong>All Steps<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Changed style of progress bar &#8211; makes it more legible<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Changed text to icons in footer &#8211; simplifies the page visually<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Increased the spacing &#8211; creates a cleaner look which is easier to digest visually<\/span><\/li>\n<\/ul>\n<p><strong>Step 1 <\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Simplified text fields &#8211; creates a better balance on the page<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Changed tickbox and button style to match brand <\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-1197 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/750image4.jpg\" alt=\"\" width=\"605\" height=\"1029\" \/><\/p>\n<p><strong>Step 2 <\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Placed shipping options in cards &#8211; card placement improves vertical symmetry of the page, adds more white space and creates more of a visual flow down the page.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Packaging options placed side by side &#8211; creates better balance on the page.<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-1198 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/750image18.jpg\" alt=\"\" width=\"596\" height=\"1280\" \/><\/p>\n<p><strong>Step 3 <\/strong><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Simplified text fields &#8211; creates a better balance on the page <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Changed the \u2018+\u2019 icon and edit button style to match brand <\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-1213 aligncenter\" src=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/image12-2.png\" alt=\"\" width=\"600\" height=\"1055\" \/><\/p>\n<p><span style=\"font-weight: 400;\">My<strong> hypothesis<\/strong> is that since the page now looks modern, more clear and matches NET-A-PORTER\u2019s brand, more users will perceive it as easier to complete. Not only will more users continue to complete their purchase as the page looks more clear, but users are also less likely to be scared by an experience that substantially deviates from the brand. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The next step would be for NET-A-PORTER to test this design change against the original, and measure if it actually impacts their bottom-line.<\/span><\/p>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t                        \t\t\t\t\t\t<li class=\"post-content__section\" id=\"keytakeawaysandlimitations\" data-ref=\"case-content-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2 class=\"post-content__section-title\">Key Takeaways (and Limitations):<\/h2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"post-content__section-content\"><ol>\n<li><span style=\"font-weight: 400;\">You should recognise that I don\u2019t have a full insight into these companies\u2019 strategies and user behavior, so some of my suggestions above might not be in line with their business goals.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It\u2019s more important to understand the process and reasoning I followed rather than copy and paste specific suggestions.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">With that in mind your main takeaways should be:<\/span><\/h2>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Improving your aesthetics can drive additional revenue for your business. (In our experience, it could drive as much as \u20ac450,000 of additional revenue per year). <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">One of the reasons why is people would perceive your product\/platform as easier to use, making them more likely to stay and complete their purchase.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">To improve your aesthetics <\/span><b>use research<\/b><span style=\"font-weight: 400;\">. Be it user feedback (with the help of such tools as VisAWI) or systematic analysis by an experienced designer (internally we use a UX Review checklist that consists of 52 criteria against which we evaluate every website we work with).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Translate insights from the previous step into actionable test ideas. <\/span><b>Tip:<\/b><span style=\"font-weight: 400;\"> Hire an experienced designer who can translate your user feedback into action. For example, users can tell your colors look botched, but they can\u2019t tell you how to fix your color harmony.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Focus on the high-value, high-friction points in your user funnel (eg. your top landing pages, bottom of the funnel stages such as check-out flow).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">When applying aesthetic-usability effect, <\/span><i><span style=\"font-weight: 400;\">don\u2019t change<\/span><\/i> <i><span style=\"font-weight: 400;\">usability<\/span><\/i><span style=\"font-weight: 400;\">. As you could see in none of our suggestions we changed the core function of the website. In 2014 Marks &amp; Spencer re-designed their website, changing both its aesthetics and functionality. A vast array of <\/span><a href=\"https:\/\/econsultancy.com\/blog\/65244-where-did-the-marks-spencer-website-relaunch-go-wrong\/\"><span style=\"font-weight: 400;\">technical issues<\/span><\/a><span style=\"font-weight: 400;\"> led to an <\/span><a href=\"http:\/\/www.digital-tonic.co.uk\/digital-tonic-blog\/went-wrong-marks-spencer-website-redesign-made-lose-sales\/\"><span style=\"font-weight: 400;\">8% drop<\/span><\/a><span style=\"font-weight: 400;\"> in sales.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Measure impact. This can be in the form of gathering user feedback on your new design, but bottom-line impact is what we\u2019re after. Treat your new design as a test, not a blind change. This way you\u2019ll know how much aesthetics matters for <\/span><i><span style=\"font-weight: 400;\">your<\/span><\/i><span style=\"font-weight: 400;\"> audience.<\/span><\/li>\n<\/ol>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t                            <div data-target=\"post-newsletter-anchor\" data-device=\"mobile\"><\/div>\n                        \t\t\t\t\t\n\t\t\t\t<\/ul>\n\t\t\t<\/div>\n\n\t\t\t<aside class=\"post-content__sidebar post-content__sidebar--form\">\n\t\t\t\t<div class=\"sticky-newsletter\" data-target=\"post-newsletter-anchor\" data-device=\"desktop\">\n                \t<div class=\"post-newsletter\" data-target=\"post-newsletter\">\n    <h4 class=\"post-newsletter__title\">Real-world growth experiments. In your inbox. Every week. <\/h4>\n            <div class=\"post-newsletter__form post-newsletter__form--world kam-world\">\n        <script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script> <script>   hbspt.forms.create({     region: \"na1\",     portalId: \"9358319\",     formId: \"4e927e03-4f90-466a-8646-7f94947f860c\"   }); <\/script>\n    <\/div>\n            <div class=\"post-newsletter__form post-newsletter__form--uk-us kam-uk-us\">\n            <script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script><script>hbspt.forms.create({ region: \"na1\", portalId: \"9358319\", formId: \"03e799e7-ee63-4857-9182-cb3a687dba40\" });<\/script>\n        <\/div>\n        <div class=\"post-newsletter__terms\"><p>Join 5,000+ optimizers who subscribe to our content<\/p>\n<\/div>\n<\/div>\n\t\t\t\t<\/div>\n            <\/aside>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":21,"featured_media":582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aesthetic-Usability Effect: Can beauty become the key to usability in online retail? | Conversion<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail? | Conversion\" \/>\n<meta property=\"og:url\" content=\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"Conversion\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-16T12:26:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-14T10:19:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/blog-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"805\" \/>\n\t<meta property=\"og:image:height\" content=\"502\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sadie Neve\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sadie Neve\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\"},\"author\":{\"name\":\"Sadie Neve\",\"@id\":\"https:\/\/conversion.com\/#\/schema\/person\/dcdb2c9d8a4e212b3bed3c1b371672d8\"},\"headline\":\"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail?\",\"datePublished\":\"2017-06-16T12:26:01+00:00\",\"dateModified\":\"2024-08-14T10:19:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\"},\"wordCount\":12,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/conversion.com\/#organization\"},\"articleSection\":[\"Design &amp; UX\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\",\"url\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\",\"name\":\"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail? | Conversion\",\"isPartOf\":{\"@id\":\"https:\/\/conversion.com\/#website\"},\"datePublished\":\"2017-06-16T12:26:01+00:00\",\"dateModified\":\"2024-08-14T10:19:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/conversion.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aesthetic-Usability Effect: Ca&hellip;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/conversion.com\/#website\",\"url\":\"https:\/\/conversion.com\/\",\"name\":\"Conversion\",\"description\":\"Better results with evidence\",\"publisher\":{\"@id\":\"https:\/\/conversion.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/conversion.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/conversion.com\/#organization\",\"name\":\"Conversion\",\"url\":\"https:\/\/conversion.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/conversion.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/12\/Colour-Logo.png\",\"contentUrl\":\"https:\/\/conversion.com\/wp-content\/uploads\/2022\/12\/Colour-Logo.png\",\"width\":1821,\"height\":193,\"caption\":\"Conversion\"},\"image\":{\"@id\":\"https:\/\/conversion.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/conversion.com\/#\/schema\/person\/dcdb2c9d8a4e212b3bed3c1b371672d8\",\"name\":\"Sadie Neve\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/conversion.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e9af0732dcb086546e0199dfa9661cc1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e9af0732dcb086546e0199dfa9661cc1?s=96&d=mm&r=g\",\"caption\":\"Sadie Neve\"},\"description\":\"Sadie is an Associate Consultant at Conversion.com. She has a background in Psychology and a keen interest for both qualitative and quantitative insights.\",\"url\":\"https:\/\/conversion.com\/blog\/author\/sadie-neve\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail? | Conversion","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:\/\/conversion.com\/blog\/aesthetic-usability-effect\/","og_locale":"en_GB","og_type":"article","og_title":"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail? | Conversion","og_url":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/","og_site_name":"Conversion","article_published_time":"2017-06-16T12:26:01+00:00","article_modified_time":"2024-08-14T10:19:12+00:00","og_image":[{"width":805,"height":502,"url":"https:\/\/conversion.com\/wp-content\/uploads\/2022\/06\/blog-cover.jpg","type":"image\/jpeg"}],"author":"Sadie Neve","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sadie Neve"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/#article","isPartOf":{"@id":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/"},"author":{"name":"Sadie Neve","@id":"https:\/\/conversion.com\/#\/schema\/person\/dcdb2c9d8a4e212b3bed3c1b371672d8"},"headline":"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail?","datePublished":"2017-06-16T12:26:01+00:00","dateModified":"2024-08-14T10:19:12+00:00","mainEntityOfPage":{"@id":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/"},"wordCount":12,"commentCount":0,"publisher":{"@id":"https:\/\/conversion.com\/#organization"},"articleSection":["Design &amp; UX"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/","url":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/","name":"Aesthetic-Usability Effect: Can beauty become the key to usability in online retail? | Conversion","isPartOf":{"@id":"https:\/\/conversion.com\/#website"},"datePublished":"2017-06-16T12:26:01+00:00","dateModified":"2024-08-14T10:19:12+00:00","breadcrumb":{"@id":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/conversion.com\/blog\/aesthetic-usability-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/conversion.com\/"},{"@type":"ListItem","position":2,"name":"Aesthetic-Usability Effect: Ca&hellip;"}]},{"@type":"WebSite","@id":"https:\/\/conversion.com\/#website","url":"https:\/\/conversion.com\/","name":"Conversion","description":"Better results with evidence","publisher":{"@id":"https:\/\/conversion.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/conversion.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/conversion.com\/#organization","name":"Conversion","url":"https:\/\/conversion.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/conversion.com\/#\/schema\/logo\/image\/","url":"https:\/\/conversion.com\/wp-content\/uploads\/2022\/12\/Colour-Logo.png","contentUrl":"https:\/\/conversion.com\/wp-content\/uploads\/2022\/12\/Colour-Logo.png","width":1821,"height":193,"caption":"Conversion"},"image":{"@id":"https:\/\/conversion.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/conversion.com\/#\/schema\/person\/dcdb2c9d8a4e212b3bed3c1b371672d8","name":"Sadie Neve","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/conversion.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e9af0732dcb086546e0199dfa9661cc1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e9af0732dcb086546e0199dfa9661cc1?s=96&d=mm&r=g","caption":"Sadie Neve"},"description":"Sadie is an Associate Consultant at Conversion.com. She has a background in Psychology and a keen interest for both qualitative and quantitative insights.","url":"https:\/\/conversion.com\/blog\/author\/sadie-neve\/"}]}},"_links":{"self":[{"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/posts\/559"}],"collection":[{"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":3,"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":6889,"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/posts\/559\/revisions\/6889"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/media\/582"}],"wp:attachment":[{"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/conversion.com\/wp-json\/wp\/v2\/categories?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}