RE S E ARCH T OPI C:

1) USER I NT ERF ACE

2) SI T E L OADI NG SPEED
3) COL ORS
4) NAVI GAT I ON L I NK
CHILLIS

Group Leader:
Grace Ang Kit Yee (0309781)

Group members:
Fong Wuei Tze (0308729)
Hew Zheng Ting (0309515)
Low Zhi Hui (0314910)
Wan Harizahtul Nadiah bt Abu Bakar (0317620)



ARTICLE 1: DONT BORE YOUR VISITORS
KEEP THEM THINKING
User Interface
Based on Article 1, a good website is interesting but
not confusing. The user interface is important because
it determines how easily you can make the program
do what you want. I agree with the statement above
because a powerful program with a poorly designed
user interface has little value (Vangie Beal,2012) .
WHAT IS USER INTERFACE?
It is a relationship between users
and the computer programs. An
interface is a set of commands or
menus through which a user
communicates with a program.
(Vangie Beal,2012)
The graphical user interfaces have became standard on
computer.
For example:

Icons.
Pop-up
Window.
In the article, the author mentioned that human
have the ability to create what is not there in order
for them to recognize an object. This statement is
absolutely correct.
BECAUSE
Based on Biederman's Recognition by Components
theory, human have the ability to perceive an
objects physical properties (such as shape, colour
and texture) and apply semantic attributes to the
object, which includes the understanding of its use,
previous experience with the object and how it
relates to others. (Biederman,1987)
WHAT DO YOU SEE?
Cylinder or
Cup?
Rectangular
or Bag?
The example above is clearly be in line with the
statement in the articles.
Human like to make connection to keep themselves
interested. They tend to group objects together in
order to manage their thoughts.
So, here is some good and bad examples of
user interface designs.
Good User Interface
Website
Simple and
User-friendly
The Design Of The Website Can Be Better By
Using
Creative and
attractive icons!
The Example Of Bad User Interface
Design
You cant even see anything, me either. Its
confusing, complicated and irritating.
Based On The Article, There Are 5 IMPORTANT
CHARACTERISTICS Of A GOOD Website Design:
1. Functional

This account
saving website
makes a boring
subject fun and
highly
functional.
2. Able to download quickly.
Simple and clean. Most slow Web pages are slow
because of too many large graphics. Make the
Web images sleek and quick (without sacrificing
quality) to improve the speed of page loading.
3. Easy-to-Read-Text
Fonts, font colors and font sizes are critical to readability.
Handwritten fonts are bad ideas for long paragraphs or
smaller sized text. Choose legible fonts that can be read
quickly and easily. Make sure font colors are easy to read as
well. (Patrick, 2012)
4. Straightforward Navigation

The navigation should be simple and not
cluttered with unnecessary stuff. Search boxes,
navigation, logos and social sharing buttons
should be positioned in typical and predictable
places. If a user hits the site and cant find these
basic standard elements they are more likely to
jump. (Patrick, 2012)
5. Keep visitors interested!
Lastly, be as creative as you can! An interesting
website makes the visitors stay and patiently read all
the contents!
ARTICLE 2 : DONT MAKE THEM WAIT
In the article, the author has mentioned the
web is here to make our life easier not to sit
in front of a screen waiting for heavy web
pages to download.

I strongly agree with it because online
consumers are all about getting result as
soon as possible. (Ben Krishner, 2012)


THE IMPACT OF SITE LOADING SPEED
Site loading speed has a great impact on the
conversions and revenue .
According to the Aberdeen Group, a 1-second
delay in page-load time equals 11% fewer page
views, a 16% decrease in customer satisfaction, and
7% loss in conversions. (TagMan, 2012)
Google announced website speed would begin
having an impact on search ranking.
Loading page is a major contributing factor to
page abandonment. The average users has no
patience for a page that takes too long to load.
DESIGNS THAT WILL AFFECT SITE
LOADING SPEED
Graphic images
Flash
Background music

These designs will larger the size of page and take
more time for the page to load.
The Impact Of Web Design On The Size Of Page
Which Affects The Site Loading Speed
The author has mentioned another important point
which is for a web page to be successful it needs to
download quickly and look good.
In order to decrease the size of the page, it is better
to use design more, graphic less.
I strongly agree with this statement .
The website designer should find the balance
between looking okay and loading fast. (Brendon
Sinclair, 2004)

Load speed optimization is an important part of
website design and development and they need to
go hand in hand.

Example
Google





Google.com, the
most popular
search engine.

The Google Home
Page comes onto a
computer with a
56k modem in 2.3
seconds.
Google

Google knows what their
visitors want, which is great
quality search engine. Therefore,
they make their search engine
results as quick as possible.

There are no hanging around
waiting for a huge Flash movie
to show, no background music
and no large graphics to
download in Google.

These designs make Google
one of the fastest search
engines.
EXAMPLE OF WEBSITE THAT LOOKS GOOD
AND DOWNLOAD QUICKLY
These websites are more
emphasize in design instead of
graphics.

Therefore, the site loading
speed is faster as there is no
large graphic to download.

Although there are only few
graphics and colors designed
in the websites, but it still look
attractive, neatly and most
importantly, it can be
downloaded fast.
Example of website that needs lot of time to
load (graphic more, design less)
This website is designed
by using a lot of graphics.

It even has background
music to make the
website more attractive.

It is undeniable that this
kind of website is more
attractive than website
that use design more
instead of graphics, but
because of its large
graphics and page size,
it takes longer time to
load.


In the article, the author has mentioned
few ways to reduce the size of web
page.
WAYS TO REDUCE THE SIZE OF WEB
PAGE
1.The web page
should not be
larger than 50k,
and less than 30k
is better.

For example, the
home page of
Yahoo is only 20k.
WAYS TO REDUCE THE SIZE OF WEB
PAGE
2. Get the graphic images
as small as possible.

It is better to use graphic
images that smaller than
4k, but going up to 6k is
reasonable.

The more colors you have
in an image, the larger its
going to be.

WAYS TO REDUCE THE SIZE OF WEB
PAGE
3. The graphic designer should
keep in mind the numbers of
color being used.


Screens that used to view
websites are normally
between 15 to 19 inches. It can
only see 216 colors
and can only download at 28.8
kb per second.





ARTICLE 3 : FIND OUT WHAT COLORS WILL
CAUSE YOUR VISITORS TO HATE YOU
Color
Based on Article 3, the choice of
choosi ng a col or i s i mportant
becaus e a websi t e wi t h t he
different types of color could make
either your visitor to stay or leave.
Color should be one of your first
concerns when it comes time to
s t ar t your web s i t e des i gn.
I agree with the statement above
because color can sway thinking,
change action, and cause reactions.
(Shruti Hemani and Ravi Mokashi
Punekar, 2006)
WHAT IS COLOR?
Color in design is very subjective. What
evokes one reaction in one person
may evoke a very different reaction in
someone else. Sometimes this is due to
personal preference, and other times
due to cultural background.
(Cameron Chapman, 2010)
EXAMPLE OF THE COLOR WHEEL
This is the first in a three-part series on color theory and
it have meanings behind the different color families.
WARM COLORS
Red, orange, yellow and variations of those three
colors are colors of fire, of fall leaves and of sunsets
and sunrises, and are generally energizing,
passionate, and positive.
Red : Passion, Love, and Anger
Orange : Energy, Happiness, and Vitality
Yellow : Happiness, Hope, and Deceit
The dark shades of red
in this design give a
powerful and elegant
feel to the site.
Examples
The bright orange
box draws attention
to its contents, even
with the other bright
elements on the
page.
The bright yellow
header and
graphics used
throughout this site
give a sense of
energy and
positivity.
Dithering is the process of
juxtaposing pixels of two
colors to create the illusion
that a third color is present.
(Web Style Guide, 2004)
In the article, the author mentioned
that some display will distort the tiny
dots to the point where the image is so
speckled that it does not appear to be
a solid color and the text very hard to
read if it is placed over the dithered
color. I totally agree with this
statement.

BECAUSE
According to Patrick and Sarah,
dithering a photographic image down
to 256 colors produces an unpleasantly
grainy image. In the past this technique
was necessary to create images that
would look acceptable on 256-color
computer screens, but with todays full-
color displays there is seldom any need
to dither an image.
DITHERING IMAGE AND TEXT
Dithering a full-color photograph (left) to 256-color image (right)
results in an image with lots of visual noise and harsh transitions
between pixels and different colors.
HERE ARE SOME EXAMPLES
This are the 256 colors which
only can be seen in the web
browser. This is because all
browsers dont share the
same 256-color pallet.
This are the 216 common
colors that web browsers
shared currently.
GOOD EXAMPLE OF WEBSITE COLOR
DESIGN
Simple and nice! And it is good
in matching colors.
EXAMPLE OF BAD WEBSITE COLOR
DESIGN
Plain and boring! Fail in matching
color.
TOPIC 4: NAVIGATION
Based on the article 4, the name or
logo of your company along with a
page name should be on top of every
page in your web site. The company
name or logo should also be your link
back to your home page. There should
be no guessing of what your web site
does for your visitor.
I agree with the statement of the
logo must be always on the top of
the page, and it also have to link
back to your homepage. It is
because the homepage is always
the first or possibly to be the last
chance to attract and hold back
each of the customer (Nielsen,
2001).
WHAT IS HOMEPAGE?
A websites homepage is like a window of a shop
To letting people know about your company
To attract the target audience
(Theleakybathtub, 2012)
These are some examples of the homepage:
The examples above shows that the standard of a
website homepage:
Clearly stated the logo of the company.
Clearly identify the company name
Clearly identify what the company does

Besides that, the examples that
been given is clearly showed that
the logo of the each company
was always located on the top of
the homepage. It is because its
easier to let the users know where
are they, and which companys
website they are in.
Based on the article 4, it mentioned that we
should provide a description of that web site
in context with the link. I agree with the
statement above because we wouldnt
click into each of the link to figure out where
the links lead us to. Besides that, most of the
people in the industry would just looking for
what they want and they want to find it in
the shortest time(Sheridan, 2014).
This is a very good example of the link description.
It clearly stated that the link will link to the news of the
obama wont release bin lades photos: reaction
Based to the article 4, users want to know if they
already visited a page. It is very frustrating to click
on a link to bring you back to a page that you just
visited.
I strongly agree with this statement. Even myself get
frustrated when clicked on a link and it eventually
brings me back to the previous page that Ive
visited.
Even the new users on the website will know that it is
a link when a blue line under it.
There is no law of using a standard blue color as the
link, but it has just become the result of standard
color because everyone is using it.
A main benefit that using a different color for link is
very helpful for the users.
Besides that, it also help the users to know that the
link was already seen and they dont have view it
again if they dont want to (Usborne, 2006) .
Above is some of the good examples of the used link.
It help the user to know that they have already
browsed the link previously.
The color of the already seen link helps the users to
differentiate that which link was already been
viewed and which was not viewed yet.
REFERENCES
Nielsen, J. (2001). 113 Design Guidelines for Homepage Usability.
[online] Nielsen Norman Group. Available at:
http://www.nngroup.com/articles/113-design-guidelines-
homepage-usability/ [Accessed 7 Oct. 2014].
Sheridan, M. (2014). 5 Major Mistakes Businesses Keep Making with
their Websites Homepage Design. [online] Thesaleslion. Available
at: http://www.thesaleslion.com/website-homepage-design-
mistakes/ [Accessed 7 Oct. 2014].
Theleakybathtub, (2012). What's the purpose of a website home
page? | The Leaky Bathtub. [online] Available at:
http://theleakybathtub.com/what-is-the-purpose-of-a-website-
home-page/ [Accessed 7 Oct. 2014].
Usborne, N. (2006). What color should you use for visited links? |
MarketingExperiments Blog: Research-driven optimization, testing,
and marketing ideas. [online] Marketingexperiments. Available at:
http://www.marketingexperiments.com/blog/marketing-q-a/what-
color-should-you-use-for-visited-links.html [Accessed 7 Oct. 2014].
REFERENCES (CONT)
Ben Krishner, (2012). Website Optimization Methods. [online] CPC
Strategy. Available at: http://cpcstrategy.com/shopping-feed-
site-speed-design-search/ [Accesses 7 Oct 2014].
TagMan, (2012). Just One Second Delay In Page-Load Can Cause
7% Loss In Customer Conversions. [online] An Ensighten Company.
Available at: http://www.tagman.com/mdp-blog/2012/03/just-
one-second-delay-in-page-load-can-cause-7-loss-in-customer-
conversions/ [Accesses 7 Oct 2014].
Lynch and Horton, (2004). Graphic: Dithering. [online]
Webstyleguide. Available at:
http://webstyleguide.com/wsg2/graphics/dither.html [Accesses 7
Oct 2014].
Lynch and Horton, (2004). Graphic File Format. [online]
Webstyleguide. Available at: http://webstyleguide.com/wsg3/11-
graphics/5-web-graphics-formats.html [Accessed 7 Oct 2014].
Cameron Chapman, (2010). Color Theory for Designers, Part 1: The
Meaning of Color. [online] Smashing Magazine. Available at:
http://www.smashingmagazine.com/2010/01/28/color-theory-for-
designers-part-1-the-meaning-of-color/ [Accessed 7 Oct 2014].
REFERENCES (CONT)
Lucy Bartosik, (2002). Recognition by Component. [online] Biedermans.
Available at: http://www.magarinos.com.ar/BiedermanBartosik.html
[Accessed 7 Oct 2014].
Patric Cox, (2012). Be Less Annoying: Reduce Bounce Rates Through
Better Web Design. [online] Codrops. Available at:
http://tympanus.net/codrops/2012/01/26/be-less-annoying-reduce-
bounce-rates-through-better-web-design/ [Accessed 7 Oct 2014).
Vangie Beal, (2014). What is User Interface. [online] webopedia.
Available at: http://www.webopedia.com/TERM/U/user_interface.html
[Accessed 7 Oct 2014]
Brendon Sinclair, (2004). 10 Secret of Successful Web Sites. [online]
Tailored Consulting. Available at: http://www.tailored.com.au/wp-
content/uploads/2009/12/10secretsfreereport.pdf [Acessed 7 Oct.
2014].

REFERENCES FOR IMAGE
http://kotakitam.files.wordpress.com/2011/01/ibcl-web-
layout-a.jpg
http://www.wangmedia.com/images/1025
http://www.mitostudios.com/wp-
content/uploads/2013/01/120409-Website-Design-
Happy-Roots-Landscape-Home.jpg
http://beautifulhomereviews.com/wp-
content/uploads/2014/08/home-page-designwebsite-
homepage-design-defrost-labs-i2agkipa.jpg
http://www.wordstream.com/images/screenshots/goo
gle-serp-news-sites-link.png
http://netdna.webdesignerdepot.com/uploads/css101/
CSStransition.jpg
http://cdn.ghacks.net/wp-
content/uploads/2013/06/visited-links-color.png







REFERENCES FOR IMAGES (CONT)
http://guidelines.usability.gov/images/hhs_image_lib/10_07_g
ood_example.png?1408068524
http://individual.utoronto.ca/lharrison/images/ScreenHunter_1
2.jpg
http://webdesignledger.com/inspiration/21-examples-of-
beautiful-color-use-in-web-design
http://upload.wikimedia.org/wikipedia/commons/4/43/GIFPA
L.png
http://www.datadial.net/blog/index.php/2009/06/09/website-
fail-30-web-designs-that-will-hurt-your-eyes/
http://www.htmliseasy.com/common/net216pics/net216.gif


REFERENCES FOR IMAGES (CONT)
http://1.bp.blogspot.com/-153teeB72_w/ToQ0-
P6GuoI/AAAAAAAA6-
A/WDuIGbw4dqE/s640/google-search-visited-
links.png

~THE END~