You are on page 1of 35

Research Topic

:
LAYOUT DESIGN
CONCEPT
ROGER RABBIT

Sian Marie Low Pik Yuen 0308468
Mabel Low Sya Yen 0309016
Farica Agustin 0311764
Naik Shiang Jen 0308788
Ezra 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. Readability
b. 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].