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 companys
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
Dont 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 companys 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].