Evelyn Wu (Team Leader)

Ashwin
Bashirul Shafiq Khan
Brandon James Pereira
Lee Ting
0319202
0319200
0319400
0319204
0318181
Assignment 2:
Research Design Report
Dont Bore Your Visitors
Review 1:
There are a thousand websites out there, how do
we make ours STANDOUT?

If our websites are boring and draggy, were
going to be pushing readers away.

WE DO NOT WANT THAT.

Things Readers Find Boring
Long and draggy introductions to a web page:
- Stop being long winded and wordy.
- Its best to avoid excessive words, try using less words
but express the whole meaning.

Difficult words and jargon:
- Dont use fancy words and scientific terms.
- Use plain and simple language.
- Cut to the chase.
You sound dispassionate:
- Nobody likes a writer whos cold and disconnected.
- Be charming, act like a human, not a robot.
- Write like youve conversing, be vivid, show readers that
you have the same interests.

Lengthy Webpages:
- Dont make your readers scroll too much.
- Keep it direct on the main pages and create simple links
to read further.
Things Readers Find Boring (cont.)
This websites has too much words.
People want MORE VISUAL, LESS TEXT.
In-text citation: InspectMyCastle, 2014
Examples of Boring Website
Ways To Improve Your Website
Be original. Try not to copy your competitors.
- Show others your different, make things memorable.

Be trustworthy and accessible.
- Show the customers your credentials. Make them feel
comfortable.

Be minimalistic in design.
- If you cant afford a good web designer, be as simplistic as
possible.
- Use simple fonts and less colors.
Know your audience:
- Study your readers.
- Find our what they want and like.
- Give them what they want.

Give your audience some breathing room:
- White space is important.
- It allows their eyes to be more relaxed.
- Shows contrast and focus on what you want them to see.

Use good headings and titles:
- This tells the readers what the site is about.
- Be clear, specific, and interesting.
Ways To Improve Your Website (cont.)
Be up to date:
- Readers dont want old and boring articles.
- Be fresh and original.
- If youre interesting, your site will spread faster.

Be concise:
- People are often on the internet to find information.
- Use as least words as possible, but with maximum
content.
- People usually get bored after the second paragraph
- Use KISS - Keep it short and simple.
Ways To Improve Your Website (cont.)
Examples of Nice & Clean Websites
In-text citation: Flickr, 2004
Examples of Nice & Clean Websites (cont.)
In-text citation: Nike, 2014
Dont Make Them Wait
Review 2:
Intro
Waiting long for a page to load is aggravating for users.

Today, the page weight of a website has grown 24% since 2012
which is disheartening. With the advancement of high
resolution devices it is more important that web designers and
developers to serve appropriate size images for respective
devices and to keep in mind of bandwidth capabilities.

Its a duty to educate clients and users on best manner when
uploading pictures to the web.

Performance should be a primary goal of any website plan.
This Is What Im Taking About
Here is an example of how irresponsible
designers and developers can be:
http://moto.oakley.com/

The page above weighs a terrifying 85mb.

If youre on maxis 0.10sen per 100kb data, the web
page would cost you MYR85 to look at on your
smartphone!
Ideas To Reduce Loading Time
Image compression

Website simplicity

Geographic target

Promote WebP
Image Compression
The process of reducing an image file size while trying to
maintain its quality for web use.

Hand-tune the compression quality for all images to get the
best out of different images.

Software available :

1. JPEGmini
2. Shrink Omatic
3. Photoshop
4. Smush.it
Image Compression (cont.)
How does JPEG compression work?

JPEG compression does not compress in RGB space.
It looks at YUV values instead. Y stands for the luma
component (brightness) and U and V are the chrominance
(color) components.
In-text citation: YUV (n.d.)
Depending on the amount of pictures on the site, it
may be reasonable to allow the designer or developer
to control the amount of image compression.
Image Compression (cont.)
Like the 4-up option
in Photoshop.
In-text citation: 4-up (n.d.)
Website Simplicity
The dilemma, download quick or look good?

Use design more, graphics less.

Try using color schemes rather then images for styling.

Use negative space to its advantage.

Remember sometimes, LESS IS MORE.
Website Simplicity (cont.)
In-text citation: David Arias (2010)
Example of a beautiful but Lightweight website
design :
Geographic Target
Designing websites based on Geographic's of the target audience.

Users in countries with higher internet speed can comprehend
heavier sites compared to the opposite.
Malaysias average broadband speed
Geographic Target (cont.)
Broadband speed ranking Globally & Malaysia
Promote WebP
WebP is a new image format developed by Google .

Provide lossless & lossy compression images.

WebP lossless images can be 26% smaller in file size
compared to PNG.

WebP lossy images are 25-34% smaller than JPEG.

* Downside: So far only supported by Google Chrome & Opera
browsers and a couple of software.
Colors
Review 3:
All About Colors
It is agreed that colors play an important part to capture the
attention of the user and keep them interested.

There are no colours that can be considered bad for a website,
just how it is used.

The psychology behind colors for a website is that colours are
capable to invoke certain feelings from us.

For example, red may be seen as a strong and passionate
colour whereas yellow allows one to feel energised and
intelligent.
All About Colors (cont.)
Take pink for another example. Generally, pink is
associated most with femininity and innocence.
This website used too
much of a bright pink,
making it look gaudy
and unprofessional.
This, however, looks great .
because it uses a softer
shade of pink and is paired
with other colours such as
brown, black and white.
In-text citation: Vandelaydesign.com, 2012; Davlin, 2013
While some websites may try to please everyone
by having the colour of the rainbow, the idea
may just backfire if it were not well thought out.
In-text citation: Dokimos.org, 2014
According to Alison Hill in 1997, colours that are polar
opposites of the spectrum should not be mixed
together.

Mixing such colours can quickly cause fatigue to the
eyes, which will inevitably lead users to leave the page
quickly.
An example of a bad colour
combination:
red and blue.

You will find that your eyes
will feel tired from straining
to read the blue text on red
background.
In-text citation: Mmeissner.de, 2014;
SitePoint, 2013
Of course, despite how unique we try to make our
websites, the colours must still fall within the Web
Safe colour palettes.

Out of 256 colours, only 216 colours can be similarly
projected by the web.
Web Safe Colours
In-text citation: Htmlgoodies.com, 2014
What happens if you use a colour that is not Web Safe?

Basically, the receiving browser will attempt to mix its
own colours to try and form that non-existent colour by
creating dots of colours.

When that happens, it is called Dithering.

Pros: You get the colour you want.

Cons: it takes up a tonne of file space and it could just
mess up your pictures.
In-text citation: Htmlgoodies.com, 2014
To conclude, colours are great, but itll be better
to keep it simple and to keep by the Web Safe
colour rules.
Colours, like features, follow the changes of emotion .
- Pablo Picasso
(Pablopicasso.org, 2014)
Website Navigation
Review 4:
Navigation
It is also known as a button bar, by which it is an
important component of a website.

It is the gateway into the different sections or pages of
a website.

It is usually in the form of a menu or a bar.

Effective Website Navigation
Before designing an effective website
navigation, there are some general rules that
needs to be followed:

1. Easy to find
2. Use obvious section names
3. Consistency
4. Remind users where they are
5. Less is more
1. Easy To Find
Due to the impatience of web users, navigation
buttons should be easy to find.

The design of the navigation button should stand
out enough so it does not get lost amongst a sea of
content.

In order for users to easily navigate further into the
website, the navigation bar should be positioned
across the top of the web page.
2. Use Obvious Section Names
This means to label the navigation button with
related names.
Example: If the button leads to the main page of
the website, it should be labeled as Home or
Homepage.

Using related button names also help viewers to
understand what lies behind it and also to avoid
confusion.
3. Consistency
This simply means that the position, style, type
and color of the website navigation bar should
always appear the same.

If the navigation bar were to be positioned at a
different place after viewers click on one of the
buttons, viewers are more likely to feel confused
and frustrated.
4. Remind Users Where They Are
It is important for website designers to highlight
the button of the section of where the viewers
are, such as the change in color or the
appearance.

Leaving buttons that are clickable enables
viewers to go back to the main page of that
section is a must if the website has more than
one page per section.
5. Less Is More
Too many navigation buttons might leave a
viewer with too many choices, this would also
make the users confuse.

Consider adding drop-down menus that breaks
down the top-level buttons into sub-sections, but
also avoid too many separate navigation bars.
Types of Navigation Options
Not all of the different navigation options are
applicable to every website.

A quality website should always offer a range
of navigation options, such as:

1. Breadcrumbs (Classification Path Navigation)

2. Homepage Navigation
3. Drop-down Navigation
4. Global Navigation
1. Breadcrumbs (Classification Path Navigation)
Generally found underneath the masthead, often
near the top of the Web page.



In-text citation: Griffith (n.d.)
2. Homepage Navigation
Primary function: provide reader context.

Search, global and core navigation needs to be
visible.

Act as more than a simple directory where it
should highlight important contents for viewers
by:
The way of feature navigation, and
Providing short summaries of important content.
3. Drop-down Navigation
In-text citation: Mighty Leaf (2014)
Acts as a support to the
main navigation on the
website.
Generally used as a space-saving device and to
avoid too much clutter on a page.
4. Global Navigation
Must appear near the top of every page of the
website.
Usually in the masthead, and at the bottom of every
page, in the footer as text links.

It should contain links to the most important
sections on the site.
4. Global Navigation (cont.)
In-text citation: Jamie Oliver (n.d.)
References
Ask.metafilter.com, (2014). How to make boring website less boring?. [online] Available at:
http://ask.metafilter.com/200106/How-to-make-boring-website-less-boring [Accessed 10 Oct. 2014].

Cotton, B. (2014). FastNet Websites West Cork: Top ten tips to make your website content interesting. [online]
Fastnetwebsites.com. Available at: http://www.fastnetwebsites.com/2012/08/top-ten-tips-to-make-
your-website.html [Accessed 10 Oct. 2014].

Dandelion & Burdock, (2013). The Weight of the Web. [online] Available at: http://dandelion-
burdock.com/articles/view/the-weight-of-the-web [Accessed 6 Oct. 2014]

David Arias, C. (2014). David Arias Branding and Design / Freelance Graphic Designer / Vancouver, Canada.
[online] Arias.ca. Available at: http://arias.ca/ [Accessed 6 Oct. 2014]

Davlin, A. (2013). Color Combinations from Hell - Death Sentence for Your Designs. [online] Design Web Kit.
Available at: http://designwebkit.com/web-and-trends/color-combinations-hell-death-sentence-designs/
[Accessed 5 Oct. 2014]

Dokimos.org, (2014). ACCEPT JESUS, FOREVER FORGIVEN! [online] Available at: http://www.dokimos.org/ajff/
[Accessed 9 Oct. 2014]

Explorer.netindex.com, (2014). Net Index Explorer by Ookla. [online] Available at:
http://explorer.netindex.com/maps [Accessed 6 Oct. 2014]
Griffith.edu.au, (2014). Griffith University. [online] Available at: http://www.griffith.edu.au/ [Accessed 8 Oct. 2014]

HTML5 Rocks - A resource for open web HTML5 developers, (2013). Image Compression for Web Developers -
HTML5 Rocks. [online] Available at: http://www.html5rocks.com/en/tutorials/speed/img-compression/
[Accessed 6 Oct.2014]

Htmlgoodies.com, (2014). Consistent Colors For Your Site - All You Need To Know About Web Safe Colors. [online]
Available at: http://www.htmlgoodies.com/tutorials/web_graphics/consistent-colors-for-your-site-all-
you-need-to-know-about-web-safe-colors.html [Accessed 5 Oct. 2014]

Jamieoliver.com, (2014). Jamie Oliver | Official website for recipes, books, tv shows and restaurants. [online]
Available at: http://www.jamieoliver.com/ [Accessed 8 Oct. 2014]

Miller, E. (2014). 7 Types of Website Navigation to Consider. [online] Available at:
http://graphicdesign.about.com/od/effectivewebsites/tp/website_nav_types.htm [Accessed 8 Oct. 2014]

Mmeissner.de, (2014). AHNCUR.html. [online] Available at: http://www.mmeissner.de/AHNCUR.html [Accessed 5
Oct. 2014]

Netindex.com, (2014). Download Speed by Country | Net Index from Ookla. [online] Available at:
http://www.netindex.com/download/allcountries/ [Accessed 6 Oct. 2014].

References (cont.)
References (cont.)
Pablopicasso.org, (2014). Pablo Picasso Quotes. [online] Available at: http://www.pablopicasso.org/quotes.jsp
[Accessed 8 Oct. 2014]

SitePoint, (2013). 10 Troublesome Colors to Avoid In Your Advertising. [online] Available at:
http://www.sitepoint.com/10-troublesome-colors-to-avoid-in-your-advertising/ [Accessed 5 Oct. 2014]

Socialphy.com, (2011). Color Psychology. [online] Available at: http://www.socialphy.com/posts/off-
topic/3395/Color-Psychology.html [Accessed 5 Oct. 2014].

Steinkirchner, S. (2012). 4 Year-End Evaluations For Your Business. [online] Forbes. Available at:
http://www.forbes.com/sites/sundaysteinkirchner/2012/12/27/4-year-end-evaluations-for-your-
business/ [Accessed 10 Oct. 2014].

Vandelaydesign.com, (2012). The Psychology of Color in Web Design | Vandelay Design. [online] Available at:
http://vandelaydesign.com/the-psychology-of-color-in-web-design/ [Accessed 5 Oct. 2014].

Webdevelopersnotes.com, (2014). Definition of web site navigation and creating correctly horizontal and vertical
navigation bars. [online] Available at:
http://www.webdevelopersnotes.com/tips/webdesign/web_site_navigation.php3 [Accessed 8 Oct. 2014]

Wells, D. (2013). 7 Effective Tips on How to Create Interesting Website Content. [online] Inbound Now. Available at:
http://www.inboundnow.com/7-effective-tips-on-how-to-create-interesting-website-content/ [Accessed
10 Oct. 2014].