Web-design science is real! While most people think about content first, the design of web pages is one of the most important aspects of creating a successful website. There are many components that go into creating a successful website, but not all elements will work well in every type of website. By using psychology and proven studies, web designers can make their websites more appealing to their targeted users, as well as showcase the subject of the website in a more effective way.
One of the main components of designing a website is having a functional layout. By organizing information based on where users are most likely to look, web designers can make sure that the right information is showcased. According to studies, “people start by scanning the main sections to see what the site is about, and they pay the most attention to the top most section of the site, particularly the upper left corner,” (Downs). More specifically, users tend to read in an F-shaped pattern: they “ first read in a horizontal movement, usually across the upper part of the content area…Next, users move down the page a bit and then read across in a second horizontal movement…Finally, users scan the content’s left side in a vertical movement,” (Nielsen). If web designers organize information according to these guidelines, it will increase the chances that their most important information is read by users.
Another way to make a website more appealing to users is by having a simple layout. Having a complex layout may cause a website to seem confusing or annoying to navigate through, and engender negative feelings. This aspect is explored in a research paper that presented experimental investigation of the role of visual complexity (how complicated the design is) and prototypicality (how familiar the design is), and how it related to users’ impressions of a website. It found that “if the visual complexity of a website is high, users perceive it as less beautiful, even if the design is familiar. And if the design is unfamiliar — i.e., the site has low prototypicality — users judge it as uglier, even if it’s simple,” (Tuch et al.). When the future of a business or other enterprise depends on the satisfaction and continued return of customers, having a website that makes users feel comfortable may increase the website’s traffic, and make the business more successful. Utilizing a layout that is both familiar and simple may cause users to feel more positively towards the website, which could help a business gain more customers and a better reputation.
In order to have users notice the most important parts of a website’s content, it is helpful to organize lists in a specific way. Studies have shown that users pay the most attention to items near the top and bottom of a list. This is because humans’ frontal lobes, which are associated with planning and logic, contain items in short-term memory and only hold around seven items (“Put Brain Science to Work in Your Web Design”). In addition, a reader’s attention span and retention are lowest while reading the middle of a list, versus the top or bottom of a list (Crestodina). This can also be applied to navigation, because readers’ attention will be focused on the two ends of a list and they may not pay very much attention to the middle. Thus, having content organized so that the most important elements are located near the top or bottom of a list will increase the probability of it being read by users.
Arguably, one of the most important elements of successful web design is the types of colors used for a website. Colors in web design have been a much-discussed topic over the years, and they play a large role in the feelings readers experience when they visit a website. For example, cool colors and warm colors can make users feel very differently: “cooler colors (blues, greens, purples) often provide an inviting, professional and relaxed feeling. In contrast, it can be used to give a very cold and unfriendly feeling as well. Warmer colors (yellows, oranges, reds) are soothing, warm, and give a sense of creativity but can also give off negative feelings such as anger and stress,” (Turner). Color families that represent the type of website or business will allow web designers to influence readers based on the feelings their website evokes, and can make users feel comfortable, creative, or positive.
By using specific colors for a website, web designers can make their website evoke particular reactions and feelings. Red is a high-energy color that can make a webpage seem vibrant and bold. Orange can symbolize different things depending on its use; most commonly happiness, but also enthusiasm and vitality. Yellow can sometimes be seen as deceitful, but also youthful and optimistic. Green, one of the easiest colors for the eye to process, is often used for nature or environment-related websites. Blue can make a site seem open and trustworthy, and is a color that is often used for webpages. Purple is often associated with royalty and wealthiness, due to the fact that the dye for this color used to be so expensive that only royalty could wear purple. The color pink is often seen as innocent, affectionate and exciting.
As for examples in application, for an ecommerce site “you can appeal to impulse shoppers using reds and oranges, royal blues, and blacks…these colors showcase a sense of urgency and sales. If you’re looking to target budget shoppers and tap into the current wave of frugal shoppers [green and] dark and navy blues are also used…‘traditional’ buyers can be targeted with paler and softer color pallets. Sky blues and shades of pink are traditionally used by clothing retailers, as they give a sense of calm and tranquility.” (Andrew) By using colors related to the purpose of a website, web designers can better appeal to users and create a more successful website.
Having different colors for accents can increase the likelihood of buttons and important information being seen. Studies show that “the brain can remember more items if they’re a different color. So pick one color for ‘action items’ such a clickable links and another color for ‘passive items’ such as informational text and general copy,” (“Put Brain Science to Work in Your Web Design”). Another study shows that standout colors aren’t just remembered more, having a standout color can increase the probability of a link being clicked by 60% (Crestodina). Specifically, using contrasting colors (especially red) can increase the likelihood of information being seen or clicked. One study from the website CareLogger found that a simple change from green action buttons to red action buttons “increased their sign-ups by 34%. It may have to do with contrast. Green may match better with the rest of your site, but that can actually be a detriment. It may blend in a little too well. Choosing a color that sticks out from the rest of the design can draw your user’s attention to it,” (Downs). Clearly, using accent colors can help a website be more successful and draw attention to important aspects of web pages.
The language used in web design can also affect user’s perception of a website. Using familiar, common words can help users feel more comfortable and open. “The temporal lobe, responsible for language comprehension and meaning, thrives on familiar and common words. Avoid long sentences, jargon or fancy words that have the potential to make a reader doubt their own intelligence and is likely to lead to inaction,” (“Put Brain Science to Work in Your Web Design”). Having language that caters to the website’s target audience can help increase the satisfaction of users. “The system should speak the users’ language, with words, phrases and concepts familiar to the user,” (Nielsen). If the language and wording of a website is familiar to the user, they may feel more comfortable. This especially pertains to ecommerce sites, as users should feel as “at home” as possible in order to sell products and increase profits.
Another aspect of web design that can make a big difference in user experience is the font of a website. For example, serif fonts (fonts with feet, like Times New Roman or Cambria), can invoke feelings of tradition and professionalism. In contrast, sans serif fonts (fonts without feet, like Arial or Calibri), can be indicative of modern and cutting edge style (Moyers). Specialty fonts, like cursive or fonts with fun shapes, can be enjoyable and stand out in small doses, but can be tedious and confusing to read for a large amount of text. Specialty fonts are a good choice for accents or navigation bars, but not the most advisable selection for the main font of a website. Related to font style is the way that type is presented on a webpage. Leading (the space between lines) and kerning (the space between letters) are also important to consider. “Large leading with lots of white space between lines makes the copy feel airier and easier to read; little leading gives a crowded feeling and is hard to read more than one paragraph at a time,” (Turner). Evaluating different characteristics of font and design can help a website evoke specific feelings in users, as well as be easier to read and understand.
It is very important to have a properly designed website that compliments the content on the webpages and their purpose. According to a recent study “it takes users a mere 1/20th of a second to judge the visual appeal of your website,” (McDowell). Studies have also shown that users are more likely to stay on and trust sites with better visual designs. Having a well-designed website can help increase traffic, as well as cause more users to read more content. Clearly, web design is key to having a successful website.
References – Web-Design Science
Web-Design Science- Andrew, Paul. “What Your Ecommerce Store Colors Say About You.” Speckyboy Design Magazine. N.p., 27 Jan. 2017. Web.
Web-Design Science – Crestodina, Andy. “6 Web Design Tips Based on Brain Science.” Orbit Media Studios. N.p., 28 Sept. 2016. Web.
Web-Design Science – Downs, Jake. “A Look into the Science of Web Design.” The Deep End. N.p., 6 July 2012. Web.
Web-Design Science – McDowell, Drew. “The Science Behind Great Web Design – Part I.” Red Sage Communications. N.p., n.d. Web.
Web-Design Science – Moyers, Stephen. “Brain Hacks: Using Psychology in Web Design.” Speckyboy Design Magazine. N.p., 23 Jan. 2017. Web
Web-Design Science – Nielsen, Jakob. “F-Shaped Pattern For Reading Web Content.” Nielsen Norman Group. N.p., n.d. Web.
Web-Design Science – Nielsen, Jakob. “10 Heuristics for User Interface Design.” Nielsen Norman Group. N.p., n.d. Web.
Web-Design Science – “Put Brain Science to Work in Your Web Design.” Byte Technology’s Web Design Insights Blog. N.p., 21 Oct. 2013. Web.
Web-Design Science – Tuch, Alexandre N., Eva Presslaber, Markus Stoecklin, Klaus Opwis, and Javier Bargas-Avila.
Web-Design Science – “The Role of Visual Complexity and Prototypicality regarding First Impression of Websites: Working towards Understanding Aesthetic Judgments.” Research at Google. N.p., 2012. Web.
Web-Design Science – Turner, Amber Leigh. “The Psychology of Web Design: How Colors, Typefaces and Spacing Affect Your Mood.” The Next Web. N.p., 07 Jan. 2016. Web.
- Adopt best practices in Animation
- Educate our clients in basic web design 101 and the process.
- Securing websites, and effectively creating the correct robots
- We also configure email and spam filters and help reduce and even stop spam!
- Our expertise in SEO is not just kept to us, we also have resources and SEO tutorials for our clients.
Contact us for a quick quote, you'd be glad you do and understand why we believe we have mastered the science of web design.