Im Group Assignment

Research topic: Critique and review on various
articles
Group Name: IM CSCNC

Chong Kah Lok (Team Leader) 0319175
Siow Li Ling 0320133
Chan Chik Yin 1001F75291
Nicole Wee Tze Yin 1007K73271
Teo Ching Mei - 0309189
Assignment 2:
Research Design Report
1
Article 1:

Dont Bore Your Visitors
Keep Them Thinking
How to make a website interesting but not too confusing?
2
Based on the article, we agreed on the
following statements:
Humans like to relate things and have the
ability to create what is not in there in
order to recognize an object.
The human mind can make connections
between things which keeps an individual
interested.
Article 1: Dont Bore Your Visitors Keep Them Thinking
3
1) Focus only on Essential Elements
Identify what needs to be focused on.
Use the 80-20 Rule: focus on displaying only 20% of
site elements that are delivering 80% of that usefulness.
(Less distractions)
For example : Drop-down list of countries presented in
a registration form.
4
2) Get Rid of All Unnecessary
Elements
Continuing with the 80-20 rule.
In other words, the 80% of website
elements that will get you only 20% of
results. It could be social media sharing
widgets, sidebar elements, blog post meta
details (date, time, author, number of
comments, etc), or links in the footer (this
is especially a huge culprit a lot of the
times, particularly when the visitor is
looking for the aforementioned excuse to
navigate away from the page).
5
6
Where do users look?
The F-Pattern reading and scanning habits of web users have become pretty
established by now. Even though its not always an indicator in every market,
but it is a pretty good starting point for considering where your users will look
when they interact from your designs.
Take a look at the heatmaps shown below:
7
Assuming this is a good indicator of where the users
eyes focused, this supports the concept of the 80/20 rule.
The most intense areas on the map could represent the
20% of the page that the users eyes interact with 80% of
the time.
From that knowledge, as designers, we can make
decisions that will help enhance and optimize the areas
that the user is going to be habitually drawn to.
Of course, the design will often be the determining factor
of where the user looks, so this suggestion should just be
a basic guide and not necessarily a dogmatic way of
deciding what falls under the 20%.
3) Reduce Number of
Pages
Trim the page count.
Mindset of visitors -What are the key things
would I want to do on this site? or Find out
what is my stuff about.
Make sure the site facilitates what is necessary
and nothing more.
If visitors are overwhelmed by too much
choices, they will end up choosing nothing.
8
4. Get More Content Above The
Fold
Majority of people spend most of their time
above the fold on web pages (What shows
up on the screen but never scrolling down.)
Put main contents above the fold.
Example: shortening the headers height
This involves nothing more than changing
the headers "height" value in your
stylesheet (typically style.css or
stylesheet.css).
9
Add the important elements on
top of page.
Rather than putting them on the bottom
of the page.
10
5. Limits on color scheme
When in doubt, use fewer colors.
Approximately 2-3 colors.
To add more subtletly and texture, use shades of the same color.
Learn to depend on color palettes.
11
Example of websites designed based on Simplicity:
12
Its all about Simplicity!:
Makes the website look sleek.
Reduce navigation confusion.
Helps achieve desired goals & results.
(I.e., more signups, subscribers and sales)
Recommendation
13
Article 2:

Navigation
14
1) Button
We agree with the article attesting to
navigation should answer the following
questions:

Where am I?
Where can I go from here?
Where was I already?
Article 2: Navigation
15
Navigation
Thus when designing navigation buttons,
its construction is highly essential. When
doing this, one should always ask the
question:

Can the users relate the labels in the navigation
design?
Are the words visually separated enough not to
be confused with each other?
16
When designing navigation, these importance should
be kept in mind to avoid confusion.

Navigation design should always follow these guidelines:
Clarity:
Making sure that the navigation has a linguistic and semantic clarity
that communicates to users in an direct, efficient and adequate way.
Simplicity:
Avoid using technical labels and icons that no one recognizes. Use
simple language of the user rather than using complex terms and
form unfamiliar to users.
Saliency:
Avoid having redundant and repetitive terms and shapes in labels
and icons that affects their intergroup saliency. This can easily
influence users ability to differentiate and interpret them as a whole.
17
Example

Instead of

This is better
18
Tonality:
Ensure that the tonality of the message is
still consistent at the end of the design
work. Colors, typography and form heavily
affect the way users conceive and
interprets the information.
19
For example, a clean clear background is more pleasant to the
eyes and easier for users to find their way when icons and
navigation tab are in colors.
Image from http://www.refinery29.com/
20
2) Types of menu
From the article, we agree on this statement Not every one will
understand your primary navigation so make sure you have
alternatives. The chances increase that someone will find what they
are looking for if you have at least two forms of navigational
schemes.

All websites have at least 2 navigation menus as all content
does not just fit into one menu.
There are two types of navigation menus, primary & secondary.
Why 2 navigation menu? This is to separate & categorize the
importance of information. And, to avoid clustered information.
Space efficiency impacts on visual perception.
21
Primary navigation stands for the content that
most users are interested in but importance is
relative. For example, general information about
the company or person).
Secondary navigation is for content that is of
secondary interest to the user. Any content that
does not serve the primary goal of the website
but that users might still want would go here. For
many blogs, this would include links for About
us, Contribute, Advertise and so on. For other
websites, the links might be for the client area,
FAQ or help page.
22
Example
Image from http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-
navigation/#more-96551
23
Article 3:

Dont Make Them Wait

24
1) Speed
We agree to the statement which is mentioned in the
article, many websites are trying to portray themselves
as if they were a TV network. They put put top-notch
graphics and sound into their web page.
The reason is because normal internet users dont have
extreme high speed broadband connections that could
support and load such great graphics and sounds.
According to an article we found online, it stated that they
support with the statement above and it also agree that
the standard modem connection is 28.8 and 56k,which is
supported what the article mentioned.
Article 3: Dont make them wait
25
Example:
Youtube channel www.youtube.com
A website which we can search all sorts of videos. When users play a
video, they could select the video quality from the bottom right of the video
screen, which is 144p,240p..etc. The higher the quality of the video, the
slower the speed to load because it requires greater internet speed.
26
27
2) Size
We agree to the statement which is stated
in the article that your webpage be no
larger then 50K. I would shoot for less than
30K. The reason is because the larger the
size of the webpage, the harder the speed
in order to load the page fluently.
28
Ways to achieve smaller size of
webpage
Graphic and image size must be smaller than 4k-
6k.
For graphics designs, try using solid colors
instead of gradient color.
Because gradient color occupies more spaces.
Use design more, graphics less.
Graphics tend to use up more spaces and users will
have difficulties in viewing the webpage.
29
Example
http://www.mydreamweddinghouse.com/
An example of website which is large in size
Flash Animation button
High quality photo
30
Take longer to load
Animation button
appear slower
31
Recommendation
Size of a webpage and the speed of the
webpage loading has a great relation. The
reason is that most of the internet users are
normal home users and we dont get extreme
high speed broadband connections.
Therefore, having too many complicated
websites with multiple colors and great sizes
of images will reduce the speed of loading
the website. This will also leads to the
annoyance of an user.
32
Article 4:

Find Out What Colors Will Cause
Your Visitors to Hate You

33
1) Browser Safe Color
We agree on the use of browser safe color which within
the 216-color-pallet because it can display consistent,
non-dithered and solid color on both PC and Mac
operating system and all browsers.
Dithered color occurred when the operating system
doesnt have the color and it mixed solid colors itself.
The practice of browser safe color is to ensure the color
consistency in all the web browser.
However, this doesnt mean the website cannot have
other colors than browser safe color, as computers
nowadays can display all color well.
Browser safe color is just a caution for those website
who have visitors that may still using old computers. As
website should always put their visitors in highest
priority and does everything to please them.
Article 4: Find Out What Colors Will Cause Your Visitors to Hate You
34
Example
The result of not having only browser safe
colors may result in dithered quality which
does not please the visitors eye and
possibly make them to hate it.
35
Example
However a high quality photo cannot be
displayed in only browser safe color
because it can be made up of a millions of
colors to get that high definition.
36
Recommendation
Using only browser safe color to ensure the consistency
of the color in all web browser. The con is that, there are
limited graphic can be include, not even a single high-
definition photograph. Besides, it doesnt provide the
reality feeling as limited color is allowed and the website
may looks cheesy.
Our advise is that we should practice the use of browser
safe color on the text and background color of the
website accompany with proper photograph or graphic
(includes both browser safe and non browser safe color)
to enhance the attractiveness of the website as most of
the browsers and operating system nowadays can
display color well.
Therefore we can minimized the hatred feeling of the
visitor by giving them consistent color on the content and
background which doesnt lack of wonderful and realistic
images.
37
2) Choices of color
We agree on the use of color to serve different purposes as
mentioned in the article, such as, use attention grabbing colors
wisely because it can possibly make your visitors to hate you for
feeling uncomfortable watching it; use browser safe color to get
consistent colors in all web browsers.
In the article, it also discussed about the use of attention
grabbing colors which includes bright red, yellow or orange and
neon colors.
We agree on the the statement that use only attention grabbing
colors on the part where you want your visitors to focus on.
Furthermore, different colors have different mood representation
such as red represents love, passion, danger and joy. Green
represents natural, health and harmony. It is to advise to pick the
right colors to suit your website theme and also its content.
38
Example
This is an example of poor color choice: Yellow text
on white background is not only difficult to read but
also causing eye-strain, as annoying as it get the
visitors to hate you. Bright color doesnt necessary
mean attention grabbing, it has to be suited well
contrast with the color on the background.
Hello Hello
As you can see the only red color is readable because of the color contrast with
the white background.
39
Example
http://www.fitnessfirst.com.my/
The website has it logo in red background with white color
text. It is hard to not notice about the logo of the website. It
tends to ensure the visitors to remember which company
website they are visiting at all time.
40
Recommendation
It is very important in choosing the color. First, it
symbolize the mood of the website. It also represent the
theme of the website.
The use of colors also act as differentiation, for instance
the button colors, it lets the visitors to know that is
clickable.
Based on our opinion, we think that the use of colors
should match the style of the website.
Also, the use of attention grabbing color and non
attention grabbing color to decide on where the visitors
should focus and notice.
A proper use of color will definitely make the visitors to
like your website and stay longer.

In other way, poor choices of color, for instance the use of
attention grabbing color all over the website causes visitors
eye fatigued and will not watch and stay longer, most likely
they will hate the website.
41
Conclusion
Based on the 4 articles reviewed, it can be concluded that a
great website must be user friendly, 4 basic principles:
Easy to use
Easy to load
Easy for viewers eye
Easy to understand
Last but not least, it doesnt lack of attractive and creative
design while maintaining its user friendliness.
42
References
Colorcombos.com, (2014). The Color Red Is The Best Choice When You Want
Attention. [online] Available at: http://www.colorcombos.com/color-red-article.html
[Accessed 10 Oct. 2014].
Cybertechmedia.com, (2014). Streaming Video Production For Intranets and The
Internet. [online] Available at: http://www.cybertechmedia.com/compare.html
Dotparagon.com, (2014). BrowserSafeColors - dotParagon. [online] Available at:
http://www.dotparagon.com/resources/color.html [Accessed 10 Oct. 2014].
EyeQuant Blog, (2013). Capturing User Attention with Color. [online] Available at:
http://blog.eyequant.com/2013/06/27/capturing-user-attention-with-color/ [Accessed 10
Oct. 2014].
Fitnessfirst.com.my, (2014). Fitness First Malaysia. [online] Available at:
http://www.fitnessfirst.com.my/ [Accessed 10 Oct. 2014].
Hongkiat.com, (2014). 5 Tips to Simplify Your Web Design. [online] Available at:
http://www.hongkiat.com/blog/5-tips-to-simplify-your-web-design/ [Accessed 10 Oct.
2014].
43
Knight, K. (2011). Planning And Implementing Website Navigation - Smashing
Magazine. [online] Smashing Magazine. Available at:
http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-
navigation/#more-96551 [Accessed 10 Oct. 2014].
Mydreamweddinghouse.com, (2014). My Dream Wedding Malaysia. [online] Available
at: http://www.mydreamweddinghouse.com/ [Accessed 10 Oct. 2014].
Pepfx.com, (2014). Psychology of colors and Website Design - The Right Colors -
Web Design Articles. [online] Available at:
http://www.pepfx.com/articles/web_design/webdesign_colors.php [Accessed 10 Oct.
2014].
Refinery29.com, (2014). [online] Available at: http://www.refinery29.com/ [Accessed 10
Oct. 2014].
Silfver, P. and Silfver, P. (2012). The Elements Of Navigation - Smashing Magazine.
[online] Smashing Magazine. Available at:
http://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/ [Accessed
10 Oct. 2014].
SitePoint, (2011). GIF, JPG and PNG - What's the Difference?. [online] Available at:
http://www.sitepoint.com/gif-jpg-png-whats-difference/ [Accessed 10 Oct. 2014].
Skillcrush, (2014). Are People Leaving Your Site Because of Design Overload?.
[online] Available at: http://skillcrush.com/2014/02/06/tips-simplifying-web-design/

44
Small Business - Chron.com, (2014). Most Attention-Grabbing Colors. [online]
Available at: http://smallbusiness.chron.com/attentiongrabbing-colors-74162.html
The Effect of Color in Web Page Design. (2014). [online] Available at:
http://www.edb.utexas.edu/minliu/multimedia/The%20Effect%20of%20Color.pdf
W3schools.com, (2014). HTML Colors. [online] Available at:
http://www.w3schools.com/html/html_colors.asp [Accessed 10 Oct. 2014].
45

Im Group Assignment

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Im Group Assignment

Hochgeladen von

Copyright:

Verfügbare Formate

Research topic: Critique and review on various

Das könnte Ihnen auch gefallen