Research Topic : LAYOUT DESIGN

CONCEPTROGER RABBIT

Sian Marie Low Pik Yuen 0308468Mabel Low Sya Yen 0309016Farica Agustin 0311764Naik Shiang Jen 0308788Ezra Carvalho Soon Sze Min 0309977

A Good User Interface Design (UID) Layout

• Focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions (Usability.gov, n.a).

• UID brings together concepts from– Interaction design– Visual design– Information architecture

What does it take?

1. Create clear and compelling content

2. Be purposeful in page layout

3. Keep interface simple and consistent

4. Strategic use of colour

1. Create clear and compelling content

• The appearance of the site must visually appealing, polished and professional. (Good website characteristics, 2014)

• The site is reflecting your company, your products and services.

• An attractive site will generate a positive impression on the company or brand.

• Key elements to keep your visitors entertained:a. Readabilityb. Appealing

a.READIBILILTY (Clear)

– Increase readibility of content by using typography (size, font and arrangement) (Usability.gov).

– Recommendations: • Most easily read combination is black text on a white

background (Good characteristics website, 2014)• Use fonts that are easy to read• Max. of 3 typefaces in a max. of 3 point sizes• Max. of 40-60 characters per line of text

b.APPEALING (Compelling)

– Content material used on the site must:• Have substance• Be informative and relevant• Increase visitor confidence in your company’s

knowledge and competence

– According to Good characteristics website (2014), the recommendations are:• Short and organized copy• Update content regularly• Use meaningful graphics

• Short and organized copy– Clearly label topics and break your text up into small paragraphs– Don’t bore your visitors with visually overwhelming text– Grab their attention by providing content that is compelling and

concise• EXAMPLE: CSS TRICKS website

• Meaningful graphics– Graphics are important as they lend visual variety and appeal to

an otherwise appropriate range• EXAMPLE: STARBUCKS website

• Update your content regularly– No one likes to read the same thing – over and over again.– Be current (trends, news and events)

2. Keep interface simple and consistent

• The best interfaces are almost invisible to the user. (Usability.gov)

• They avoid unnecessary elements and are clear in the language they use on labels and in messaging.

• Make the loading time for web pages appropriate for viewing (Bernales, 2014)– A longer loading time has a higher chance of visitors losing interest– Accommodate for those who have high and slower internet

connections

• According to Bernales (2014), the key elements to avoid visitors from waiting are:

a. Old-style, straight-forward formatting

b. Server-friendly graphic images

a. OLD-STYLE, STRAIGHTFORWARD FORMATTING

– Allows visitors to:• Read the top of the page as the rest of the page is

downloading• Load web pages faster on low tech computer with slow

internet connection (Kelly, n.a)• Access to fast displaying pages

– Recommendations:• Avoid full-page table formatting and fancy frames

b. SERVER-FRIENDLY GRAPHIC IMAGES

– Kelly (n.a) mentioned that graphic images on web pages:

• Should be as small as it is agreeable• Can be a problem for servers if they are too large

– Recommendations:• The less HTML formatting, the shorter time it takes for

the pages to lay out• More design, fewer graphics• Keep page layout as minimalistic and basic as possible

– EXAMPLE: GOOGLE.COM

3. Be purposeful in page layout

– Consider the spatial relationships between items on the page and structure the page based on importance.

– As mentioned on Usability.gov (n.a), careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.

Key elements for easy navigation

a. Where am I?

b. Where can I go from here?

a. WHERE AM I?

• When a visitor decides to click onto your website, the first thing that should be known to them is:– where they are– what is it all about.

• Recommendations:– The name or logo of the company should be inserted on the top

of every page of the website• which could also be link the user back to the homepage

– Names for the page links should be given to inform the users their whereabouts in the website.

• Example: Home - Men - Women - Accessories - Sale

Good Examples:

• Mediacake is a web and marketing agency that is located in Thailand, which are all stated in the website clearly.

• The title/logo, that is consistent in every page, links the user back to the main page when clicked.

Good Examples

• Themezilla is a company that creates themes for powering websites.

• The website has clearly indicated what is it about as it is written boldly in black which makes it easy for users to know where they are.

• The website have included samples of what they do.

Bad Example

• Whereas if a user comes across a webpage like below, it would be difficult for the user to identify what the webpage is about as there is no clear indication.

• This web page has no title or any logo and it is very unorganized causing it to be difficult for users.

b. WHERE DO I GO FROM HERE?

• When a user enters your website, it is crucial that they are informed of where they can go to from the main page.

• Recommendations– It helps if there are links to the pages within the

website or even outside web page– Insights on where they are heading to when the links

are clicked– Complemented with a short description of that web

site in context with the link

Good example

• Pelli Clarke Pelli Architects is based in New York but has projects all around the world.

• This company’s web page is a good example of added link pages. It is a clear indicator for the user to know where to go to next.

Bad example

• This website is beautifully designed but there is a flaw.

• As much as it is nice to look at, there is no visible page links to press.

• It causes users to feel clueless on where they can go next.

4. Strategic use of colour

• Colours are just as important as any other component in a website. – Many designers overlook the importance of using the right

colours for the website

• You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage. (Usability.gov, n.a)

• Colours have the ability to create a vibrant and expressive atmosphere in ones web design. – Without proper colour planning, the website might turn

out plain and boring or just hideous to look at.

• Recommendations

– It is advisable to use natural palette of colours because they are much more pleasing and soothing to look at as opposed to unnatural colours

– Understanding what colours work well with certain emotions is vital towards choosing the right palette.

– Unnatural colours such as bright green can cause fatigue to the visitors.

Good example

• Pennyjuice is a perfect example of poor colour planning and designing

• It is a common misconception that adding in a big splash of colour will make the website fun and quirky, but in actualy fact it only makes it harder to navigate through the page

Bad Example

• Another example is bad colour display.

• The usage of pure yellow in a website is said to strain the eye more than any other colour because it will be the first colour your eyes will fix on. – Instead of looking at the content of the page, you

would more likely be distraced by the background and the irrelevant splurge of colour

References Bernales, K. (2014) How Can I Make My Visitors Stay Longer On My

Website, Available from: http://www.smashingbuzz.com/2014/09/can-make-visitors-stay-longer-website/ [Accessed 10 October 2014]

Good Website Characteristics. 2014. Good Website Characteristics. [ONLINE] Available at: http://www.spritzweb.com/resources/good-website-characteristics.html. [Accessed 09 October 2014].

Kelly, C. (n.a) Guidelines for Designing a Good Web Site for ESL Students, Available from: http://rufeebest.wordpress.com/guidelines-for-designing-a-good-web-site-for-esl-students/ [Accessed 10 October 2014]

Usability.gov. (n.a) User Interface Design Basics. Available from: http://www.usability.gov/what-and-why/user-interface-design.html [Accessed 9 October 2014].