{"id":117923,"date":"2020-02-18T00:00:50","date_gmt":"2020-02-18T00:00:50","guid":{"rendered":"https:\/\/undsgn.com\/uncode\/?p=4629"},"modified":"2023-06-30T09:29:28","modified_gmt":"2023-06-30T09:29:28","slug":"how-visual-design-contributes-to-an-engaging-ux-2","status":"publish","type":"post","link":"https:\/\/wugweb.design\/index.php\/2020\/02\/18\/how-visual-design-contributes-to-an-engaging-ux-2\/","title":{"rendered":"How Visual Design Contributes to an Engaging UX"},"content":{"rendered":"<div id=\"row-unique-0\" class=\"vc_row style-color-nhtu-bg row-container magnetic with-parallax has-dividers\" data-parent=\"true\" data-section=\"0\">\n<div class=\"row quad-top-padding quad-bottom-padding single-h-padding limit-width row-parent row-header\" data-height-ratio=\"70\" data-row-header=\"true\" data-imgready=\"true\">\n<div class=\"wpb_row row-inner\">\n<div class=\"wpb_column pos-middle pos-center align_left column_parent col-lg-12 single-internal-gutter\">\n<div class=\"uncol style-dark animate_when_almost_visible left-t-right start_animation\">\n<div class=\"uncoltable\">\n<div class=\"uncell no-block-padding\">\n<div class=\"uncont\">\n<div class=\"vc_custom_heading_wrap \">\n<div class=\"heading-text el-text left-t-right animate_when_almost_visible start_animation\">\n<h1 class=\"h1 fontheight-108164 fontspace-111509 font-weight-700\">How Visual Design Contributes to an Engaging UX<\/h1>\n<div class=\"text-lead\">\n<p>Visual design is a crucial part of UX because it can produce a pleasant application experience and improve features or functionality that need to be more user-appropriate and well-made.<\/p>\n<div id=\"row-unique-1\" class=\"vc_row row-container\" data-parent=\"true\" data-section=\"1\">\n<div class=\"row limit-width row-parent\" data-imgready=\"true\">\n<div class=\"wpb_row row-inner\">\n<div class=\"wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter\">\n<div class=\"uncol style-light\">\n<div class=\"uncoltable\">\n<div class=\"uncell no-block-padding\">\n<div class=\"uncont\">\n<div class=\"uncode_text_column\">\n<p><span data-preserver-spaces=\"true\">Don Norman writes about the research in his book Emotional Design: Why we Love (or Hate) Everyday Things, where he found that \u201c\u2026the degree of system\u2019s aesthetics increased the post-use judgements of both aesthetics and usability, although the degree of actual usability had no such effect.\u201d<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">To rephrase, aesthetics have as much of an impact on the user experience as functionality. The idea that visual design could be more important than usability doesn\u2019t sound right. It shouldn\u2019t surprise us. Humans are attracted to things and people who find them attractive. Apps and sites are more likely to give a beautiful application the benefit of aesthetics.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"row-unique-2\" class=\"vc_row row-container\" data-parent=\"true\" data-section=\"2\">\n<div class=\"row limit-width row-parent\" data-imgready=\"true\">\n<div class=\"wpb_row row-inner\">\n<div class=\"wpb_column pos-top pos-center align_left column_parent col-lg-12 half-internal-gutter\">\n<div class=\"uncol style-light animate_when_almost_visible left-t-right start_animation\">\n<div class=\"uncoltable\">\n<div class=\"uncell no-block-padding\">\n<div class=\"uncont\">\n<div class=\"vc_custom_heading_wrap \">\n<div class=\"heading-text el-text\">\n<h3 class=\"h3 fontheight-108164 fontspace-111509 font-weight-700\"><span data-preserver-spaces=\"true\">What is the attraction?<\/span><\/h3>\n<div class=\"text-lead text-top-reduced\">\n<p>That is to say; it\u2019s an unanswerable question.<\/p>\n<\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/div>\n<div class=\"uncode_text_column\">\n<p>Before we can discuss the aesthetics of the user interface, a question must be answered. Has the term \u201cobjectively appealing\u201d ever been defined? As defined by Pythagorean believers, beauty is \u201ca manifestation of harmonious, mathematical relations such as the golden section,\u201d an issue philosophers have debated since at least Pythagoras. Many researchers and philosophers attempted to quantify beauty\u2019s value in the years after that.<\/p>\n<\/div>\n<div class=\"uncode_text_column\">\n<p><span data-preserver-spaces=\"true\">In the eyes of some researchers, the things that appeal to our sense of beauty also happen to be healthy. Hence, we find healthy people \u201cunattractive,\u201d while we find aesthetically beautiful things like berries because they suit us. Although that hypothesis has significant flaws (see the attractiveness of toxic frogs), it may have some validity.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">On the other hand, many believe beauty is a product of cultural norms. Consider that most American kids watch Disney movies at an early age, teaching them that villains and bad guys are ugly, but heroes and good guys are attractive. The media we consume daily form our perceptions of what is considered attractive here and now; nevertheless, in 10 years, many articles of clothing, styles of facial hair, and even body types that are considered attractive today will seem laughable and sad. The standards of beauty that a society holds vary as its values evolve.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Well, let\u2019s apply that to user experience design. Some appealing interface or site structure features may be those we naturally identify with ease of use. Web design ideas and graphic elements that seem alluring today may have lost their lustre a few months or years ago. There was a time when comic sans were the standard, and flash splash pages were the mark of a well-designed website.<\/span><\/p>\n<\/div>\n<div class=\"uncode_text_column\">\n<p><strong>Alternatively, Voltaire believed that beauty cannot be defined, which may have inspired the idiom \u201cbeauty is in the eye of the beholder.\u201d In the eyes of empiricists, beauty merely reflects the person who finds it attractive and shares similar qualities with pleasure.<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"row-unique-3\" class=\"vc_row row-container\" data-parent=\"true\" data-section=\"3\">\n<div class=\"row limit-width row-parent\" data-imgready=\"true\">\n<div class=\"wpb_row row-inner\">\n<div class=\"wpb_column pos-top pos-center align_left column_parent col-lg-12 half-internal-gutter\">\n<div class=\"uncol style-light animate_when_almost_visible left-t-right start_animation\">\n<div class=\"uncoltable\">\n<div class=\"uncell no-block-padding\">\n<div class=\"uncont\">\n<div class=\"vc_custom_heading_wrap \">\n<div class=\"heading-text el-text\">\n<h3 class=\"h3 fontheight-108164 fontspace-111509 font-weight-700\">Visual Design in UX<\/h3>\n<div class=\"text-lead text-top-reduced\">\n<p>We may now explore the function of visual design in UX with the realisation that there is no single \u201cabsolutely beautiful\u201d aesthetic. After all, there\u2019s more to it than just aesthetics.<\/p>\n<\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/div>\n<div class=\"uncode_text_column\">\n<p><span data-preserver-spaces=\"true\">One can\u2019t just compare graphic design and interface design. According to Usability.gov, visual design is the \u201cstrategic implementation of images, colours, typefaces, and other aspects\u201d to improve a design or interaction and pique users\u2019 interest. Interaction design concerns how well a product or service helps users complete a specific job. The visual design captures consumers\u2019 attention by leading them to the appropriate functionality, prioritising tasks on a page through size, colour, and whitespace, and even boosting brand trust through visual cues.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Visual design is an increasingly popular field combining graphic and UX design elements. Graphic design is often the design of static images or visuals, with the proviso that these fields are ever-evolving. The visual design is quite balanced, including static images and visuals to enhance communication and usability. As a result of its incorporation of interaction and user interface design, user experience design emphasizes open lines of communication.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Users\u2019 perceptions of a screen\u2019s contents can be profoundly influenced by its aesthetic design (pun intended). Consumers have grown accustomed to the idea that aesthetically pleasing screens have higher utility, usability, and humanity levels.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"row-unique-4\" class=\"vc_row row-container\" data-parent=\"true\" data-section=\"4\">\n<div class=\"row limit-width row-parent\" data-imgready=\"true\">\n<div class=\"wpb_row row-inner\">\n<div class=\"wpb_column pos-top pos-center align_left column_parent col-lg-12 half-internal-gutter\">\n<div class=\"uncol style-light animate_when_almost_visible left-t-right start_animation\">\n<div class=\"uncoltable\">\n<div class=\"uncell no-block-padding\">\n<div class=\"uncont\">\n<div class=\"vc_custom_heading_wrap \">\n<div class=\"heading-text el-text\">\n<h4 class=\"h4 fontheight-108164 fontspace-111509 font-weight-700\"><span data-preserver-spaces=\"true\">The Correlation<\/span><\/h4>\n<div class=\"text-lead text-top-reduced\">\n<p>The user\u2019s experience can be altered by changes made to the visual design.<\/p>\n<\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/div>\n<div class=\"uncode_text_column\">\n<p><span data-preserver-spaces=\"true\">Google\u2019s Director of Product Management, Luke Wroblewski, has devoted most of his career to studying the links between aesthetics and behaviour. His 2008 talk, \u201cCommunicating with Visual Hierarchy,\u201d elaborates on the significance of visual design in user experience. To paraphrase, he claims that the following are aided by the use of visual hierarchy:<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">communicate messages,<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">illuminate actions, and<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">organise information.<\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">He offers a wealth of advice to help designers think critically about where and how they present data. A visually appealing hierarchy is also an easily navigable one. Still, little has changed in the seven years since then about how little attention is paid to visual design in UX.<\/span><\/p>\n<\/div>\n<div class=\"uncode_text_column\">\n<p><span data-preserver-spaces=\"true\">A definition, please. Is there such a thing as objective beauty, or do some people find Microsoft aesthetically pleasing? Or is aesthetic appeal a luxury rather than a prerequisite? The user\u2019s experience can be altered by changes made to the visual design. But it\u2019s optional to get the job done. Users\u2019 opinions of it will always be inextricably linked to the product\u2019s success. Indeed, but how so? It is the million-dollar question.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Visitors will give an unsightly site the benefit of the doubt if their experience is positive, much like they might with a well-dressed job candidate at an interview. Users are more likely to give a site a second opportunity if they find it aesthetically pleasing, whether through more \u201cconventional\u201d design elements or more \u201cintelligent\u201d ones.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"row-unique-5\" class=\"vc_row row-container\" data-parent=\"true\" data-section=\"5\">\n<div class=\"row limit-width row-parent\" data-imgready=\"true\">\n<div class=\"wpb_row row-inner\">\n<div class=\"wpb_column pos-top pos-center align_left column_parent col-lg-12 half-internal-gutter\">\n<div class=\"uncol style-light animate_when_almost_visible left-t-right start_animation\">\n<div class=\"uncoltable\">\n<div class=\"uncell no-block-padding\">\n<div class=\"uncont\">\n<div class=\"vc_custom_heading_wrap \">\n<div class=\"heading-text el-text\">\n<h3 class=\"h3 fontheight-108164 fontspace-111509 font-weight-700\"><span class=\"font-377884\">What does it mean for UX Designers?<\/span><\/h3>\n<div class=\"text-lead text-top-reduced\">\n<p>You can only rely on something other than aesthetics to redeem a dreadful encounter.<\/p>\n<\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/div>\n<div class=\"uncode_text_column\">\n<p><span data-preserver-spaces=\"true\">Features or functionality appropriate for the user or poorly created can only be improved by the most appealing aesthetics. And remember aesthetics! There is rivalry in every industry, and good graphic design can help customers choose your app over others that provide similar features.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">For aspiring user experience designers, here is a best of:<\/span><\/p>\n<ol>\n<li><strong><span data-preserver-spaces=\"true\">Stay consistent.<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0Inconsistency may ruin even the most stunning aesthetic. In this case, a person\u2019s emotional reaction to the site\u2019s design will directly impact their perception of its aesthetic appeal.<\/span><\/li>\n<\/ol>\n<ol>\n<li><strong><span data-preserver-spaces=\"true\">Test visual concepts as well as paper prototypes.<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0Visuals have a powerful effect on us, and effective branding may persuade us to trust and engage with a company. People often say they are \u201clooking\u201d at a website when actually \u201cinteracting\u201d with it.<\/span><\/li>\n<\/ol>\n<ol>\n<li><strong><span data-preserver-spaces=\"true\">Stay focused on trends.<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0For a good reason, a little black dress has been a staple in women\u2019s wardrobes for over a century. Simply put, it\u2019s easy. It needs to be more spotless. That\u2019s a timeless piece, for sure. A straightforward, clean, and classic aesthetic will also outlast fleeting fashions. Certain features of flat design (for example) are likely to be around, but many apps are predicted to appear \u201cso 2015\u201d in a few years.<\/span><\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Visual design is a crucial part of UX because it can produce a pleasant application experience and improve features or functionality that need to be more user-appropriate and well-made.<\/p>\n","protected":false},"author":2,"featured_media":117953,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[65,66,68,69,70,71,63,72,73,74],"class_list":["post-117923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-branding-strategy","category-experience-design","tag-aesthetics","tag-design-elements","tag-emotional-design","tag-graphic-design","tag-sense-of-beauty","tag-user-experience-design","tag-user-interface-design","tag-visual-design","tag-visual-hierarchy","tag-web-design-ideas"],"_links":{"self":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts\/117923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/comments?post=117923"}],"version-history":[{"count":3,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts\/117923\/revisions"}],"predecessor-version":[{"id":117961,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/posts\/117923\/revisions\/117961"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/media\/117953"}],"wp:attachment":[{"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/media?parent=117923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/categories?post=117923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wugweb.design\/index.php\/wp-json\/wp\/v2\/tags?post=117923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}