RESEARCH TOPIC: LAYOUT DESIGN CONCEPT GROUP LEADER: LYANA ROSALINI BINTI MUHD YUNUS (0317581) GROUP MEMBERS: NURUL FARHANAH ZOLKEFLI (0306466) PUTRI ELYANA (0307977) NADYA BINTI SULAIMAN (0319580) MELANIE ANUSHA ABRAHAM (0308696) FIND OUT WHAT COLOURS WILL CAUSE YOUR VISITORS TO HATE YOU The article expresses the correlation between a website's color palette and the effects it brings upon its visitors.
It can be divided into two main themes;
A. color schemes that ease readability and are optimal for viewer comfort B. colors that make people feel or act a certain way INTRODUCTION 3 This article stresses upon the effects of colors on the viewers perception of the site, which is absolutely true. Viewers form 'first impressions' about websites the moment they visit them - hence the important role of a good color scheme in conveying the right message the website has intended. Color selection can make viewers happy, melancholic, bored and even fatigued when coupled with other visual designs. (Iordan, 2007)
A. Color schemes that ease readability and are optimal for viewer comfort 4 The article also delves into technicalities in the limited spectrum of colors a website can obtain. This is consistent with many other websites, which fervently warn against using certain color combinations because they cause chaos in the reader's psyche.
Iordan (2007) and Hornor (2013) both explain similar do's and don'ts in website color planning :-
1. Create a strong contrast between a page's background and its text. The best combination for readability is black text on white background, but there are other excellent combinations also. Besides white, other effective web site background, colors are dark blue, gray and black. 5 2. Avoid Eye Fatigue Colors and Use Neon Colors Sparingly:
In fact, the worst colors to use on a green background are most shades of green, yellow, or purple. Avoid pairing blue and red, or blue and yellow. Green text on red background or red text on green/blue background aren't a good idea as well, because such combinations usually cause eye fatigue. Neon color combinations are definitely eye-catching. But when placed all over the website, they are aversive and very irritating. They tire the eyes very quickly, and mostly just end up causing annoyance instead of more positive feelings that companies want customers to associate with their brand. 6 3. Avoid Light Colors on a Light Background for Readability:
Avoid using the light colors for small texts and diagrams with thin lines. White is already light, so adding light-colored text such as pastel yellow or green on a white background is going to create readability issues.
4. Testing and Gradients: Always conduct readability tests for your website. Using different shades of one color is always a safe bet in color harmonisation. Select up to five (some say seven) different colors and use them consistently throughout the web site. 7 BAD EXAMPLES: 8 GOOD EXAMPLES: 9 The article also gives ideas on what colors to use when you want to mould the reader's psyche about your webpage. Marketers and graphic designers have long known that color plays a major role in the success of any marketing campaign. Specific colors tend to stir certain emotions in customers, thus creating brand relevance and motivating purchases. (Morris, 2013)
In the article, the use of reds and yellows are useful in grabbing attention although the author warns to use it sparingly.I agree with the statement as I find websites bursting with bright colors very off-putting. Here are some colors and their effects on people's mindsets: Red, Orange, Black and/or Royal Blue. B. Colours that make people feel or act a certain way. 10 Studies show that impulse buyers react most to these colors. (Vale, 2014)
Pink, Teal, Light Blue and Navy
In contrast, cautious shoppers respond most to these colors: - Purple is the color of royalty, which makes it perfect for lending a touch of elegance and prestige to your marketing materials. - Gold is likewise elegant and prestigious, but adds an element of power purple cant match. In combination with purple or green, gold is a powerful color that symbolizes wealth and pedigree.
The power play of colors is truly amazing for web designers, and a good sense of color might just be the driving force a website needs to gain viewers.
11 12 LOAD TIME DONT MAKE THEM WAIT Your webpage should be no larger than 50k - I AGREE that web pages should be less than 50K. The larger the size of the page, the longer it will take for it to load. This will lead to people getting bored and closing the tab or moving on to another website. For instance, if a person were to solely run a business via their web page, they would definitely lose sales if their page takes too long to load (Peer1.com, 2014). People these are perpetually on the move and will not want to wait very long. INTRODUCTION 14 15 Your graphic images should be as small as possible - I AGREE that this is a useful factor to take into consideration when creating web pages. Smaller images take less time to load and will not keep the visitor waiting for too long. According to munchweb.com, 75% of people have said that they would not revisit a website that took longer than 4 seconds to load (Munch, 2014). Good Example:
- This is a good example of a web site with optimised image sizes and scale. It is not too cluttered with too many big images that may take time to load. It loaded within a few seconds which is great. We must also bear in mind that not everyone has fast internet speed. Therefore, we must create web pages that can cater to all types of visitors. 16 - This is another good example of a web page with optimal sizing and scaling. Energy Savers is a US Department of Energy websites that educates people of how to be more energy efficient. The layout is rather minimal which is good as it decreases load time. 17 Use design more, graphics less - I AGREE that designers should incorporate more practical designs into their web pages. For instance, avoid endless scrolling of images and content. Instead, keep to a limit of three pages. Ensure that the content is concise and straight to the point, rather than having it drag on to several pages. Besides that, create quick links at the bottom of the page so that visitors do not have to scroll all the way back up (Gamequarium.com, 2014). 18 Bad Example:
ASOS is an online shopping web page that sells clothes, shoes and accessories. This can be considered as a bad example because the web site has many high quality image thus causing it to take a longer time to load, especially for those with slow internet speed. By taking too long to load, visitors may get frustrated and skip to other online shopping websites. 19 - Another example would be Tumblr. Tumblr mostly contains images and gifs. These contents usually have big file sizes which slows down the loading time for the web page. Moreover, most Tumblr pages have endless scrolling. Therefore, to avoid that problem, web page designer should keep pages to about three screens. 20 DONT BORE YOUR VISITORS, KEEP THEM THINKING There are an infinite number of websites that exist today. However, to create a website that is captivating enough to hold the audiences attention long enough is a tough task. From the article Dont Bore Your Visitors Keep Them Thinking, the writer highlights the importance of having an interesting website without being too confusing to the audience. Visitors who come to a website are accompanied with specific aim in mind. Thus, it is our job to fulfil it as quick and as easy as we can. It is momentous to prepare visitors who come by the website with an easy groundwork that is simple to understand and move around as well as engaging enough to keep them interested. If you distract or confuse your visitors, they will either need more time to find what they came for, or they might forget their initial goal all together. Either way, they will not experience your website as user-friendly and chances are that they leave dissatisfied and with no intention of coming back. (Idler, 2013) INTRODUCTION 22 In the article the writer states that humans in general like to relate. Thus, we use the ability to create what we could not see in order for us to recognize the object. This connection that we make keeps us interested and engage to a particular subject. The article explains the importance of letting the viewer figure things out and to keep them thinking. It keeps people interested. When it comes to design, the designer should keep it simple yet not too simple that the whole appeal is thrown away. 23 Above is a good example of a good website design that is simple yet interesting enough it captivates the audience interest and attention. Like face to face meeting, first impressions can affect a relationship with a person in the long run. It affects the direction whether we like a person or not, thats if we intend to meet that specific person again. Same goes online. Once a website has made a positive impression on its viewers, chances are visitors will be more likely to visit the site again. From this site it shows an actress name Anna Safroncik and her beautiful portfolio website. The power of the design is in the expressive photography that projects Annas talents and her character. The pictures are professional, sexy, classy and sophisticated and thats exactly the image that you see of her. 24
http://www.annasafroncik.it/ This is an example of a web designs that transforms itself but still remains simple yet complex enough that it looks professional, easy enough to understand and engaging. The results from the transformation are recorded and quoted from the representatives.
Results Sales increased 40% after the new website was created and launched! - Bruce Pearson, Zimmerman Metals, Roll Form Division 26 BEFORE Avocation Systems: 27 28 AFTER http://aspireid.com/web-design/7-components-of-good-web-design/ Results Our old site was very rudimentary and aesthetically unappealing. Navigation to important sections wasnt nearly as intuitive as it should have been. Our new website encompasses everything we had hoped when we started out this process. Its visually appealing, and all of the information is presented in a way thats easy to find and understand. - Trent Mulligan, Avocation Systems
http://aspireid.com/web-design/7-components-of-good-web-design/ 29 The article also pushes that a website design should be functional. That is should download quickly. According to Apheus.com (2014) website functionality comprises the overall way in which a website is served on the internet. Adding functionality to a website can include determining what type of website architecture will it be used to build the site, the type of server on which the website will be hosted and adding features that can be used to enhance the overall experience of the user. 30
Below is an example of bad functionality. The 404 error. Something was technically not implemented correctly, causing the site to show an error message instead of the desired content.
http://blog.usabilla.com/visual-appeal-vs-functionality-web-design/ 31 From what I have read, this article the writer suggested that the text should be easy to read. According to Jones, Noack and Thomas (2009) Just like layout, typography places an important role in how users digest the content that they see. Its momentous for a web designs typography to be easy to read and follow through, while establishing structure and hierarchy within the content. 32
The web was once filled with a handful of typefaces Arial and Courier come to mind because they were readable by most computers and browsers. That is no longer a limitation for designers. But web fonts are still important for two key reasons compatibility and licensing. By using a web font service, type is type on the web, which is important for search engine optimization, and designers dont need to make images out of their type to maintain a certain look. (Cousins, 2014) 34 From the article the writer also suggests that the navigation of a website should be straightforward. Jacobson (2014) claims that the navigation on a website tells customers how to find the information that is needed. Thus, it is important to make sure that the applied navigation is easy to find and very clear. For example, if you are a realtor your navigation might include: Selling your House, Finding a New Home, Getting a Mortgage, etc (Jacobson, 2014)
Navigation does not need to be complicated. It should be easy to identify and easy to use. It is also important to keep navigational menus to a minimum so you dont overwhelm users. Depending on the type of site, five to ten menu navigation items are the top end of what you should aim for. (Cousins, 2014)
35 The above examples show two very different types of navigation: Zolas, which includes a simple menu and progress navigation with clickable text as buttons and Anet Design, which displays a funkier, more creative button style. What both sites have in common is that the main navigation never moves or changes, creating consistency and flow on each site. (Cousins, 2014) 36
In conclusion there are several components that create a great design. It is important to keep the audience interested and to never bore them. Designers should find a balance between complexity and simplicity in their website to engage and keep the viewers interest. Thus based on the article that I have read I agree with the statements that have been forwarded. Navigation, functionality and typography also plays a big role in achieving a great website. 37 NAVIGATION Navigation is easily addressed as ascertaining, or directing the course.
Web site navigation is in my opinion the most important aspect for site to be successful. Navigation design will be the key to determine, if visitors will stay on one site to perform whatever they might be that they require; such as completing a sale. It is important for users Have an easy smooth transaction, and that starts with navigation. There are best practices that will enhance the navigation of one web site. - Caonabo (13 May)
A website needs some form of order so that a user could direct themselves to the desired webpage. If there were no methods available to them, it would have been a big inconvenience as well as a hassle to type down a web address individually. INTRODUCTION Another important feature of a good website is navigation. Many website owners fail to include well-structured pages or clear navigation tabs that lead visitors to relevant sections of their website. Organize the information on your website in a simple and structured way. Think of the general path you would like a site visitor to take. In many cases, adding sub-pages to the top navigation will be the best option for organizing your information into specific categories. Think through your web pages structure so that it all makes sense in a logical flow. That way, when customers visit your website, they will have an easier time navigating to the information on your website that is most relevant to them. Yola.com NAVIGATION Where am I? Where can I go from here? Where was I already?
These were the questions that the author had posed to explain how Navigation as an answer is considered for a website. I agree wholeheartedly with all that was written in the article but found it lacking in some areas, especially in the types of websites and its varied forms of navigation. QUESTIONS? FACTORS OF NAVIGATION Consistency is Crucial! Site navigation (Navigation Panel) should appear in the same location on every page of a site. It should also maintain the same style, type and colours. This will enable users to get used to a site and feel comfortable browsing it. If navigation were to jump from the top to the left, disappear, or change colours from section to section, frustrated visitors are more likely to go elsewhere. Simplicity is Key! The section names of a site, especially as labelled in the navigation, should clearly state what lies behind them. Obscure, general words like resources and tools should be avoided when possible, as they only lead to users clicking on multiple buttons before finding what they are looking for. Stick to obvious button names such as news and podcasts to avoid confusion. IMPORTANT FACTORS In Plain Sight! Navigation should be a prominent element of your design and therefore, must be very easy to find. Since it will often take up much less space than other elements, it should stand out enough so it doesnt get lost amongst a sea of content. The most common location of a button bar is across the top of the page, as users should not have to scroll down to navigate further into your site. Keep It Short and Sweet! (KISS) Too many navigation buttons, while leading into more sections, may just leave a user with too many choices. A long list of options keeps the visitor from getting into the most important content areas of your site. Instead, consider drop-down menus that break down top-level buttons into sub-sections. Also be careful about too many separate navigation bars. It is common to have up to three options for member-based content-driven sites (such as one main navigation, one for user accounts, and one at the bottom for legal disclaimers). However, if they arent clearly defined the user wont know where to look, or click, and three separate choices is already pushing too many. There are sites that have a single webpage dedicated to a sitemap, as shown in slides ahead. IMPORTANT FACTORS Where am I? Remind the User Where They Are! Once a user clicks into a site section, its a good idea to remind them where they are. Use a consistent method to highlight the section a visitor is in, such as a change in colour or appearance. If the site has more than one page per section, be sure to leave the button clickable so users can use it to get back to the main page of that area. IMPORTANT FACTORS WHERE AM I? WHERE AM I? As stated in the article: The name or logo of your company along with a page name should be on top of every page in your web site. The company name or logo should also be your link back to your home page Website: Fanfiction.net In this website, they maintained the same banner on every single page regardless if it is the Home page or not. Clicking the fanfiction word will link the user to the index.html or Home Page WHERE AM I? Page URL. In other words, the web address Website Title The Page Title located on the tab lets users know where they are (what page) and the web Address dictates where they are as well but in more fine-tuned detail. From the Article: Your visitor will always want to know where can I go from here. This being links to pages within your web site or links to an outside web page. Either way you should put links in context. In other words you should give the visitor an insight on where the link will take them. This is especially true if you have a resources page. Do not put just the links. (Like I have time to click on each one to find out where they go.) Give a small description of that web site in context with the link. WHERE CAN I GO FROM HERE? Moused-over Giving a description of the Site Description WHERE CAN I GO FROM HERE? There are several navigational approaches that users find more apprehensive of reliable when it comes to surfing a website. The following methods (6) are the Yahoo style menu, Rollover menu, Flash menu, Expand/Collapse menu, Drop-down menu and lastly, the fly-out menu.
This is more of a design option than it is to do with navigation, therefore irrelevant. However, the approaches can determine the number of user per site because of the preferences of interface. The most popular and most responsive option would be the Drop-down menu, as it had been used more often in websites (or is the current trend).
The next few slides would explain navigation panes/bars/panels that make site navigation and easy maneuverability possible. NAVIGATIONAL APPROACHES WHERE CAN I GO FROM HERE? Navigation panel Search Engine Dropdown Menu The Navigation Panel indicates links to other webpages that is conveniently placed in every landing for easier course plotting (direction). Dropdown Menus are created to direct users to a specified landing under the level (level 1), which makes it systematic. The search engine is necessary for users to find specific Pages/items if the page that they are looking for is not in the Navigation Panel. In some cases, the navigation panel could be found at the very bottom of the page as shown in the image below (Dictionary.com) WHERE CAN I GO FROM HERE? Or more elaborately, a Website could dedicate a single webpage for a Sitemap like Apple: WHERE CAN I GO FROM HERE? Sitemaps However, Sitemaps do not act as a primary source of navigation and is rarely seen in certain websites. Only websites that provide a large database of topics may have a sitemap as an option to easily categorize and file appropriate pages. Sitemaps play a role in diverting the need of a search engine as a replacement. WHERE CAN I GO FROM HERE? WHERE WAS I ALREADY? WHERE WAS I ALREADY? Highlighted in purple: showing that the page had been visited already Website: Fanfiction.net Titles in blue text are sites that have not yet been visited and it helps site visitors navigate better. This helps them figure out what theyve not yet seen and helps them keep track. However, the author is unclear as to why the colors Blue and purple were chosen.
Based on commentary, it was said that it was a CSS Configuration that dont need to be changed. AVOIDING ERRORS One of the most important thing to remember about websites is that broken links must be avoided at all costs. The outcome of a user mis-clicking and creating general frustration of going to a wrong page can upset anyone. Like everyone being upset with being lost. To click on a supposed button that sends you nowhere or going to a wrong page is a major inconvenience, no matter how nice or pretty the website design turns out to be. Avoid changing the layout too much to the point of losing the navigation panel. Clicking to get to a new page and looking for another one without the help of a navigation pane would be a hassle and decisively troublesome for new users because they would have to search for it themselves. ERROR!
Logo on Homepage does not link to Homepage. No Navigation options (panel or otherwise) No back option (clicking on logo does not go back to Homepage) BAD SITE NAVIGATION BIBLIOGRAPHY 62 Apheus.com, (2014). Three F's of Website Design: Functionality, Form and Friendliness. [online] Available at: http://www.apheus.com/about/design-philosophy/ [Accessed 9 Oct. 2014].
Cousins, C. (2014). 10 Crucial Elements for Any Website Design | Design Shack. [online] Designshack.net. Available at: http://designshack.net/articles/layouts/10-crucial-elements- for-any-website-design/ [Accessed 9 Oct. 2014].
Idler, S. and Idler, S. (2013). Principles of Website Usability | 5 Key Principles Of Good Website Usability. [online] The Daily Egg. Available at: http://blog.crazyegg.com/2013/03/26/principles-website-usability/ [Accessed 9 Oct. 2014].
Idler, S. and Idler, S. (2014). Visual Appeal vs. Functionality in Web Design - The Usabilla Blog. [online] Blog.usabilla.com. Available at: http://blog.usabilla.com/visual-appeal-vs- functionality-web-design/ [Accessed 9 Oct. 2014]. BIBLIOGRAPHY 63
Jacobson, R. (2014). The 5 Must Haves of a Great Website - Small Business Web Marketing. [online] Register.com. Available at: http://www.register.com/learningcenter/web-101/the-5-must-haves-of-a-great-website/ [Accessed 9 Oct. 2014].
Jones, H., Noack, S. and Thomas, J. (2009). The Four Key Components of a Great Web Design | Tips. [online] Webdesignledger.com. Available at: http://webdesignledger.com/tips/the-four-key-components-of-a-great-web-design [Accessed 9 Oct. 2014].
Tuch, A., Presslaber, E., St\"ocklin, M., Opwis, K. and Bargas-Avila, J. (2012). The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments. International Journal of Human-Computer Studies, 70(11), pp.794--811.
Website Company, SEO, Online Branding - Denver, Colorado | Aspire Internet Design, (2013). The 7 Components of Good Web Design & Why it Matters. [online] Available at: http://aspireid.com/web-design/7-components-of-good-web-design/ [Accessed 9 Oct. 2014]. BIBLIOGRAPHY 64 Gamequarium.com, (2014). What are principles of good web design?. [online] Available at: http://www.gamequarium.com/edweb/gooddesign.htm [Accessed 9 Oct. 2014]. Munch, C. (2014). Effect of Website Speed on Users | Statistics Reveal Slow Loading Times Cost Sites Serious Money. [online] Munchweb.com. Available at: http://munchweb.com/effect-of-website-speed [Accessed 9 Oct. 2014]. Peer1.com, (2014). How a Slow Website Impacts Your Visitors and Sales | PEER 1 Hosting. [online] Available at: http://www.peer1.com/knowledgebase/how-slow- website-impacts-your-visitors-and-sales [Accessed 9 Oct. 2014]. BIBLIOGRAPHY 65 Hornor, T. (2013). 10 Troublesome Colors to Avoid In Your Advertising. [online] SitePoint. Available at: http://www.sitepoint.com/10-troublesome-colors-to-avoid-in- your-advertising/ [Accessed 10 Oct. 2014]. Iordan, A. (2014). Do colors influence web site visitors?. [online] Graphic-design.com. Available at: http://www.graphic-design.com/Web/web_color.html [Accessed 10 Oct. 2014]. Morris, B. and Plus, B. (2014). 10 Colors That Increase Sales, and Why. [online] Business 2 Community. Available at: http://www.business2community.com/marketing/10-colors- that-increase-sales-and-why-0366997 [Accessed 10 Oct. 2014]. Vale, S. (2014). Most Attention-Grabbing Colors. [online] Small Business - Chron.com. Available at: http://smallbusiness.chron.com/attentiongrabbing-colors-74162.html [Accessed 10 Oct. 2014]. BIBLIOGRAPHY http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPape r.htm http://www.chromaticsites.com/blog/the-dos-and-donts-of-website- navigation-usability http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on- research-studies/ http://www.webpagesthatsuck.com/worst-website-navigation-of-2011.html http://www.smashingmagazine.com/2013/11/11/guidelines-navigation- categories-ecommerce-study/ BIBLIOGRAPHY