Amanda Soh Sha Lyn 0308330 Chelsea Orie William 0304525 Farah Nadhirah Khairun 0307838 Syamsidar Azwa Ilani Nadzeri 0314719 A research on website layout design with a specification towards successful website production Who exactly are we? We are Homies. A group of young researchers testing our abilities through conducting a study; not just any study, we are venturing into one that is very new to us and hope to achieve the best possible results. We are all enrolled in different majors and with this variety we aim to bring to the table our individuality/opinions. This in turn will develop a report able to assist us in designing a website.
An introduction According to Vara (2008), designing and developing a website may come easily to some; they are able to pick up a note book, sketch some ideas and produce a full function website accessible world-wide. However, not all designers can produce a successful website that caters to the needs of all users.
These types of designer are rare they pay great attention on factors that produce a great website as well as those that causes it to fail (Gehrke & Turban, 1999). Meyrick (2008) indicated that in order to train and educate oneself on what it takes to be a successful designer, it is necessary to conduct a detailed research on the subject matter. Our research Based on the topic of website layout design concept, the research group have conducted an online research.
This research involved qualitative content analysis of four articles relating to website design. Each article has been discussed based on different sub-topics; however, the overall direction of the research is to identify elements necessary to produce the groups idea of a successful website.
In addition to being reviewed, each article also highlights the essential elements of any website. The content analyses of articles are as follows: Article 1: Most of the time, websites come with an ultimatum a hit or a miss. Creating a website that ensures visitor loyalty of is not as easy as it seems. The human mind works in ways that are subjective to individuals. What one might like, the other might not; what one might find attractive, the other might not.
According to article 1, humans are always associating the things they see on a website to something they have actually seen. In other words, we are always connecting the things we are seeing to something we have already seen before. This is called association. Dont Bore Your Visitors Keep Them Thinking Research studies claim humans are exposed to so much stimuli that our perception/minds are ever changing (Condillac, 1715). Additionally, the consideration of object placement is necessary to make sense of our surroundings.
The visuals/outlook of the website keeps visitors intrigued; however, the content is what makes them remain or revisit it. In support of this, Friedman (2008) states:
Usability and the utility, not the visual design, determine the success or failure of a website
So, how do designers leave an impression on site visitors? Through encouragement, maintaining interest and ensuring theyd like to visit the website again. Friedman (2008) claims that shop and website visitors have similar habits or behaviour. They enter the store/site, walk/browse around scanning through products/posts and identify pertinent items.
Article 1 argues that web designers should let visitors figure the rest out; however, it is proven that a websites function is to provide visitors with basic knowledge in the most convenient way possible. Visitors dislike playing guessing games and having to browse through the entire website to find out general information is most inconvenient (Steiner, 2010). Visitors also choose to glimpse/scan rather than read to aid their navigation process and reduce time wastage (Friedman, 2008).
A good/effective website needs to have a clear path and web designers should keep designs simple and easy to access taking into consideration that not everyone is tech savvy. On most websites that we visit, how many times do we actually find what we are looking for? An easy way out of this is to create a button on the index.html called Im looking for with a drop-down menu of what the website provides.
Additionally, a website that is too simplistic and easy to navigate can be boring for some visitors. Thus it is imperative to intrigue visitors with a web interface that has an interesting layout and up-to-date content.
Too much is sometimes just too much hence, a website that contains flashy and extravagant images is irrelevant without an educating content (Steiner, 2010). This website selling mountain climbing equipment shows how websites can be simple yet smart. The layout is easy to navigate through, the black background looks put together/neat and the background picture of skier gives the website an interesting look while giving users a rough idea what the website contains.
Picture reference: Arcteryx 2014, Homepage, viewed 07 October 2014, <www.arcteryx.com>. This online shopping website also reflects upon a good website interface. The homepage provides the user with a brief explanation of what the company is about and the white background gives the design a clean and sleek look.
Picture reference: ASOS 2014, Homepage, viewed 07 October 2014, <www.asos.com>. The article argues that websites must be functional because people visit them for a specific purpose. Regardless of the purpose websites ought to cater to the visitors needs.
Reasons why people visit websites are to seek for information, socialize, online surfing etc. In order to cater to the needs and wants of users, the speed of the website plays a very important role.
Steiner (2010) says that the longest time users can tolerate waiting for pages to load is limited to only 6 seconds. Users are becoming increasingly impatient and web designers should assume that users experience time poverty; therefore, it is necessary to develop sites that maintain a relatively rapid download rate.
A good website also needs to have relevant graphics to keep humans interested. Shortie Designs (2014) claim that:
A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience
An image appeals more to site visitors as compared to a chunk of textual elements. Navigation also plays a vital role; web designers must make life easier by ensuring that web interface are user friendly. Shortie Designs (2014) says that:
Navigation is about how easy it is for people to take action and move around your website Overall, a good website does NOT need to be fancy with a complex layout designs or navigation systems.
Instead, it can be one with a simple yet meaningful layout that can catch the attention of the user. Additionally, the website can also be one that is easy for users to understand in all aspects.
A website should be fun and possess an interesting element to leave a mark on users thus ensuring they would come back for more. Article 2: Every Internet user loves an eye-catching website that sparks interest, inspiration while maintaining a fast loading speed. A website that loads faster will definitely be more preferred and favoured by members of the target market.
In order to know the websites download speed, the article suggests to be connected to an internet connection that is relatively fast>type in the URL for your web page>hit enter>and hold your breath.
If you needed to gasp for air before the page has downloaded then it is necessary to cut down on the websites overall size. According to Andrew Meager (2009), the set of directions that the HTML document gives to every process really determines the speed of the page. Dont Make Them Wait Additionally, a website could definitely load faster when the file size of the visual elements are kept smaller and optimized to the most suitable form for web publishing as Web images take up the majority of the download time in most web pages (Kyrnin, 2014).
The article also highlighted that a websites size should not exceed 50K. In fact, for the best and most efficient result, its size must be less than 30K. There are also some other rules of thumb for keeping the download time short that was stated by Jennifer Kyrnin (2014) in the following page. Picture reference: Kyrnin, J 2014, How to Speed Up Your Web Page, About Technology, viewed 05 October 2014, <http://webdesign.about.com/cs/beginninghtml/a/aabg_031599a.htm>. A web designer should also be articulate when it comes to optimising the size of the visual elements to be put on a web page because Not optimising images properly results in extremely slow loading time. When you intend to publish your images online, you have to compromise the quality. (Dunato, 2005). These are the examples of file formats and the file size.
Picture reference: Inobscuro 2014, Optimizing Images for Web, viewed 06 October 2014, <http://inobscuro.com/tutorials/optimizing-images-for-web-35>. There are also a few guidelines that can be followed in sizing images Picture reference: Merrit, S 2014, Optimizing Your Images for the Web, viewed 06 October 2014, <http://www.samuelmerritt.edu/academic_technology/optimize_web>. There are several ways you can reduce file size by using your image editor. All they do is make adjustments to the pixilation of each image. Pixels are the tiny dots that together make up the lines, shadows and colors in your picture. When you optimize your images, you manipulate the pixels in one or more of the following ways: by discarding some of the pixel information (compression in jpeg format), limiting the number of colors of the pixels, and reducing pixels by resizing or cropping.
For example, it is very hard to believe that the worlds most visited sites homepage, Yahoo! Is only sized at 20K. With this small size, the page can load really fast even when there are so many visual elements that are being shown at one time. It is also very mind boggling how the number of size seems very little but a lot of things can be done within size. Picture reference: Yahoo! 2014, Homepage, viewed 06 October 2014, <www.yahoo.com.my>. Article 3: Colours are essential to websites so as to bring it life, character and personality. These traits are necessary for websites to possess as it will attract viewers who takes a liking to the colour schemes incorporated into the site.
The most crucial point to keep in mind when developing a seemingly attractive website would be to incorporate complementary colours to its design. Article 3 reads that yellow and red should be used sparingly and only when there is a certain need to grab attention; this can be in the form of buttons or banners. Together, red and yellow looks very harsh and even only yellow alone would remind you of a Police Caution Tape (Perron, 2003). Find Out What Colors Will Cause Your Visitors to Hate You Red and yellow used on a website would look like the picture below. With these colours, visitors will not have a central focus. Colours selected must depend on site visitors preference and not the designers Picture reference: UX Stack Exchange 2014, Flat Design + Color schemes: Bold or Subtle?, viewed 06 October 2014, <http://ux.stackexchange.com/questions/56901/flat-design-color-schemes-bold-or-subtle>.
According to Hunjet, Parac-Osterman, and Beni (2012), yellow as a dominant colour can disturb the harmony of the colours and environment. For example, on a darker background like black/blue, the colour yellow can be used as accents, details or minimally used against the contrasting background. The picture on the right shows how the colour yellow pops more than the blue background. These are complementary colours that are comfortable to look at and are pleasing to the eyes. The colours are not too bright nor are they too dull.
This image on the right shows how complementary colours can be used to develop a scenic image. Picture reference: Mala-Ma 2012, Deposit Photos viewed 06 October 2014. Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design- and-why-to-choose-them/>. Different colours also have different meanings; especially when being interpreted to an individuals own emotional state. Colours have the ability to give character and depict emotions to a certain website.
According to Huang (2013), using colours will provide the webpage [with] emotions more accurately [so] as to provide consistency [to a] demanders emotional state
Colours representing emotions tend to be similar and can be generalised to people all around the world. Across two different studies, the colours that were mentioned by Coursaris, Swierenga and Watrall (2012) relate to that of Huang (2008).
Both studies established that warm colours such as red, yellow and orange reflects upon joy, happiness and are generally more positive notions; whereas, cool colours such as blue and green exudes peacefulness and serenity. Secret Key 2014, Onectrapixel DIY, Singapore, viewed 06 October 2014. Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design-and-why-to-choose-them/>. Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design-and-why-to-choose-them/>. Red, yellow and orange exudes vibrancy and is exciting to see.
Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design-and-why-to-choose-them/>. Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design-and-why-to-choose-them/>. Blue and green establishes a cool, calm and positive feeling Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design-and-why-to-choose-them/>. Adam and Osgoods (Huang, 2013) have explored the relationship between colour and emotions across cultures. They found that red can reflect both positivity or negativity, black/grey as purely negative and blue/green indicates positivity.
To children however, being surveyed on colours and perceptions revealed that light colours: pink, blue and red reflect on positive emotions. Conversely, dark colours: brown, black and grey relate to negative emotions.
There are also quite a number of people out there who are colour blind. In an article by Gheest (2005) it is indicated that there is no need to limit the amount of colours used; instead colours must be used in moderation and modestly.
Most of the articles available regarding colours on websites discuss similar topics of the Dos and Donts. It has also been discussed that different colours serve different purposes and must be used sparingly. The primary use of colour is to transfer a particular emotion from the website to the visitors. Article 4: Humans are curious creatures by nature and so it has become a habit for them to check out new fads everyday. They may use Google to obtain information or flick through Facebook but one thing is for sure they will go to the internet/websites for additional information.
Another human trait theyre visual creatures. So a nicely designed logo or banner with the companys name, and maybe a few pictures of people doing something interesting would surely make them stay. WRONG. Humans are also creatures that are fast irritated when confused and they have nowhere to turn to for help.
Navigation This is why it is stated in the article that it is crucial to always let users know what website they are on, what the website is all about and what its purpose is to them.
People are just that forgetful to somehow let the reason why theyre on the website slip their minds, and where they have been just in case they want to trace back their steps or know what theyve clicked on so they can continue their browsing with no question marks hanging above their heads.
Sometimes they dont even know if they are still on the website, so the companys logo and navigation bar must always be present on every page of the website.
According to Dr. Mani Sivasubramanian (2000)
To better design your website, put yourself in the shoes of your users
For an example, if the website being designed is for an online shop, what would the browsers want? Of course, it should be in plain sight where they ship to along with the minimum shipping prices or if they offer free shipping once browsers reach a certain amount in their carts, the arrays of products they have to offer or whether they cater to browsers for one specific brand. This site would be a good example for an online shop
Picture reference: Pagan Marie 2014, Homepage, viewed 08 October 2014, <http://www.paganmarie.co.nz>. It is made clear that they are a clothing online shop based in New Zealand, they ship worldwide and if the orders are above $200, users are entitled to free shipping.
The navigation bar states that the browser can make their browsing easier if they are looking for something specific by clicking on Brands. Their website also allows the browser to change the currency used to state the prices to which they are comfortable with for an even better browsing experience.
Article 4 also stated that it is best to use link titles to give an idea of what follows when the users choose to click it. This refers back to what has been mentioned above regarding the Brands link, which tells the browsers that it will lead them to all the different brands available on the online shop. By using link titles, it ensures a good browsing flow for the user.
As opposed to whats being said in the article, there is no need to describe where a link leads. Nobody wants a block of text in every corner of the website. That is why the title link is there to blatantly state what the link is in a word. Its wise to make links as concise as possible. To see a block of text everywhere will turn the users off and drive them away. A good example of title links
Picture reference: Sephora 2014, Homepage, viewed 08 October 2014, <http://www.sephora.com>. The changing of the links color only further improves the navigation usability by telling the user that the website understood what they wanted and is currently loading their desired page.
However, that doesnt mean that links must always be the standard blue then purple combination after clicked to avoid confusion as stated in the article.
Dr. Mani Sivasubramanian (2000) also said using the standard link colours shows a lack of concern for the websites users and it is arguable that link colours depend on the websites overall color scheme. Its somewhat ridiculous and unsightly to put a shade of blue against a background that is green in color. It is the modern age now, where variation is welcomed with open arms.
This is a good example of a non blue-purple link combination. What is there to be confused about? Picture reference: Sauce Box Cosmetics 2014, Homepage, viewed 08 October 2014, <http://www.sauceboxcosmetics.com>. Findings Each individual has their own interpretation as to what a good/successful website consists of. Through conducting an online research, researchers were able to explore various elements that need to be taken into consideration when creating a functional website. Based on the research analysis and findings; the most important factors that need to be considered have been narrowed down into the following:
1. Purpose (Functionality) The first factor is that websites must serve its purpose to the site viewers exceptionally. Failure to do so will mean that the website has not achieved its goal. Depending on what the website regards or what the viewers purpose is, success can only be achieved by fulfilling a said function.
If people visit an online shop, designers must take into consideration that the most pertinent page would be one that allows viewers to begin their online shopping. With reference to online shopping website Amazon (2014), a shopping page is not explicitly shown however, viewers are given a search bar where they are able to type in an item sought for or select a product category via a drop down menu. Similarly, if people visit a website to simply gain information, pertinent information should be displayed first before other factual elements are introduced. Perhaps having an FAQ page will also benefit the user; Kelli Murray (2014) has done this well by creating a website that reflects on herself as an individual, the site is used for her own benefit as a means to share her daily thoughts, activities while selling her hand drawn illustrations online. When users enter the site www.kellimurray.com they immediately land on a homepage that is both simple and pleasing to look at If simply looking for general information on what Kelli does, users are able to navigate easily through the website as the navigation bar is located at the top with easy to understand buttons that indicates: About, Portfolio, FAQ, Contact, Shop and Blog. Users do not need to waste time figuring out where to click in order to find out information as everything is explicitly stated. As for Wikipedia (2014), viewers tend to visit this website for the sole intention to obtain basic information. Though it may be difficult to navigate through, Wikipedia indeed performs its function as an informative website well; so much so that it has become a household name world-wide.
Additionally, if a viewers purpose in visiting a site is for socialisation purposes, the website must allow posts, chats, instant messages, comments or discussion forums to occur. The most successful social networking site of this era reflecting all these functions would be Facebook (2014). 2. Appearance (Design) As for the websites appearance/design, it has been identified that a website must reflect on a theme that is simple, professional yet it still embodies the corporate image or what the website is generally about.
It should not contain elements such as images, graphics, colours or even text that might be misleading. Also, content/information should be explicit as viewers will be put off by trivial components. It is of our opinion that the idea of Let the viewer figure the rest out is invalid as in this day and age, people tend to be lazier and prefer to be fed every single piece of information. Using this concept may just cause them to not return to your site. In terms of colour, designers must select colours that complement each other and are easy to look at on screen this can be achieved through the use of the colour wheel which clearly indicates which colours look best together.
DO Use complementary colours Standardised font Quality graphics DONT Use all colours in existence Mix and match extravagant fonts Clutter
Picture reference: : Pistachios 2014, Homepage, viewed 08 October 2014, <http://getcrackin.com/>. [TOP] Will 2010, Uncategorised, viewed 08 October 2014, <http://www.webdesignstuff.co.uk/mw005/category/uncategorized/>. [BOTTOM] 3. User-friendly Navigation Another factor to developing a successful website is ensuring that the overall site is easy for users to navigate.
Not only must the navigation bar be located somewhere that is easy to identify, web designers must also ensure that all the buttons are linked and does in fact perform a function when clicked. Each page on the website must download fast as people tend to get bored easily and the longer they wait, the higher the chance of not returning to the site.
4. Content Site content refers to several things; however the general idea is that the website must contain exactly what it is that users are searching for. Ensuring that the content matches user needs is essential to creating a successful site.
Additionally, the content of the site must remain up to date as users have no use for out dated information unless simply using them for reference. The information provided on each site must also reflect on language that is professional and grammatically correct as it highly reflects upon the corporation/websites reputation. Therefore, errors in website content is absolutely unacceptable.
5. Compatibility The final factor to consider when creating a successful website is compatibility. All websites must make the site available for users world-wide. Segregation by race, religion, education, geographic location or any other characteristic is not appreciated and neither is segregation on the internet. Restricting access only creates a negative reputation causing users to not visit again. A good example of this would be Pandora Radio (2014) which restricts users in Asia. Picture reference: Pandora 2014, Redirect, viewed 08 October 2014, <http://www.pandora.com>. References Amazon.com, Inc. 2014, Amazon. Available from: Amazon.com, viewed 02 October 2014. Arcteryx 2014, Homepage, viewed 07 October 2014, <www.arcteryx.com>. ASOS 2014, Homepage, viewed 07 October 2014, <www.asos.com>. Condillac, EB 1715, Treatise on Sensations, Clinamen Press Ltd. Constantinos, K, Coursaris, SJS and EW 2008, An empirical investigation of colour temperature and gender effects on web aesthetics. Journal of Usability Studies, 3(3), pp. 103-117. Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014, <http://www.designyourway.net/drb/colors-in-web-design-and- why-to-choose-them/>. Dunato, N 2014, Optimizing images for web: Adobe Photoshop tutorials, Obscuro Original Design Resources, viewed 06 October 2014, <http://inobscuro.com/tutorials/optimizing-images-for-web- 35/>. Facebook, Inc. 2014, Facebook. Available from www.facebook.com, viewed 02 October 2014. Friedman, V 2008, 10 Principles of Effective Web Design , viewed 08 October 2014 <http://www.smashingmagazine.com/2008/01/31/10- principles-of-effective-web-design/>. Gehrke, D and Turban, E 1999, Determinants of successful website design: Relative importance and recommendations for effectiveness. Systems Sciences HICSS-32: Proceedings of the 32nd Annual Hawaii International Conference [online]. 5 (8), pp. 5-8. Accessed 01 October 2014. Huang, STY and CW 2013. A Colour Based Webpage Image Style Judgement Model, 4(11), pp. 275-286. Hunjet, A and Prac-Osterman, D and Bensic, M 2012, Yellow as a dominant tone, Tehnicki Vjesnik/Technical Gazette, 19(1), pp. 93-98, Academic Search Complete, EBSCOhost, viewed 06 October 2014. Inobscuro 2014, Optimizing Images for Web, viewed 06 October 2014, <http://inobscuro.com/tutorials/optimizing-images-for-web-35>. Kelli Murray 2014, Kelli Murray. Available from www.kellimurray.com, viewed 02 October 2014. Kyrnin, J 2014, How to Speed Up Your Web Page, About Technology, viewed 05 October 2014, <http://webdesign.about.com/cs/beginninghtml/a/aabg_031599a.htm>. Kyrnin, J 2014, Web Images Should Be Small, About Technology, viewed 05 October 2014, <http://webdesign.about.com/od/optimizingimages/a/aa032700a.htm>. Mager, A 2009, How to make your website really, really fast: ZDNet, The Web Life, viewed 06 October 2014, <http://www.zdnet.com/blog/weblife/how-to-make-your-website-really- really-fast/207>. Mahdavi, I 2009, Comparing mens and womens definition of success. Journal of Behavioural Studies in Business [online]. 2, pp. 1-8. Mala-Ma 2012, Deposit Photos viewed 06 October 2014.
Mani, S. 2000, Naviation: Make it Easy to Get Around, viewed 08 October, <http://www.sitepoint.com/navigation-get-around/>. Merrit, S 2014, Optimizing Your Images for the Web, viewed 06 October 2014, <http://www.samuelmerritt.edu/academic_technology/optimize_web>. Meyrick, J 2006, What is good qualitative research? A first step towards a comprehensive approach to judging rigour/quality. Journal of Health Psychology [online]. 11 (5), pp. 799-808. Accessed 01 October 2014. Pagan Marie 2014, Homepage, viewed 08 October 2014, <http://www.paganmarie.co.nz>. Pandora Radio 2014, Pandora, Available from www.pandora.com/restricted, viewed 02 October 2014. Perron, JH and C 2003, Hooker and Perron [online] viewed 05 October 2014. Available at: <http://writer2001.com/colwebcontrast.html>. Pistachios 2014, Homepage, viewed 08 October 2014, <http://getcrackin.com/>. Sauce Box Cosmetics 2014, Homepage, viewed 08 October 2014, <http://www.sauceboxcosmetics.com>. Secret Key 2014, Onectrapixel DIY, Singapore, viewed 06 October 2014. Shortie Design 2013, Principles of Effective Web Design, viewed 08 October 2014, <http://shortiedesigns.com/2014/03/10-top-principles- effective-web-design/>. Sephora 2014, Homepage, viewed 08 October 2014, <http://www.sephora.com>. Shih Ting, Y and Chia Wei, H 2013, A colour based web page image style judgement model. International Journal of Electronic Business Management. 11(4), pp. 275-286. Steiner, C 2010, Top Tips: 10 Elements of Any Effective Web Site, viewed 04 October 2014, <http://www.forbes.com/2010/03/24/web- site-design-entrepreneurs-technology-tips_slide_5.html>. Vara, V 2008, How to create a successful web site for nothing (or almost nothing), The Wall Street Journal, 11 August, viewed 01 October 2014, <http://online.wsj.com/articles/SB121803326363016929>.
Van der Geest, TM 2005, Mixing up colours: Colours in the interface, Information Design Journal and Document Design, 13(1), pp. 74-78, Communication and Mass Media Complete, EBSCOhost, viewed 06 October 2014. UX Stack Exchange 2014, Flat Design + Color schemes: Bold or Subtle?, viewed 06 October 2014, <http://ux.stackexchange.com/questions/56901/flat-design-color- schemes-bold-or-subtle>. Wikipedia 2014, Wikipedia. Available from en.wikipedia.org/, viewed 02 October 2014. Will 2010, Uncategorised, viewed 08 October 2014, <http://www.webdesignstuff.co.uk/mw005/category/uncategorized/. Yahoo! 2014, Homepage, viewed 06 October 2014, <www.yahoo.com.my>.