Está en la página 1de 35

LAYOUT DESIGN

Research Topic :

CONCEPT

LAYOUT DESIGN Research Topic : CONCEPT

ROGER RABBIT

Sian Marie Low Pik Yuen

0308468

Mabel Low Sya Yen Farica Agustin Naik Shiang Jen Ezra Carvalho Soon Sze Min

0309977

0308788

0311764

0309016

LAYOUT DESIGN Research Topic : CONCEPT ROGER RABBIT Sian Marie Low Pik Yuen 0308468 Mabel Low

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 i our o pa ’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 Do ’t ore our isitors ith isuall o er hel i g te t 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 o pa ’s e page is a good e a ple 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

References  Bernales <a href=, K. ( 2014 ) How Can I Make M y Visitors Sta y Lon g er On M y 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].  Kell y, C. ( n.a ) Guidelines f or Desi g nin g a Good Web Site f or 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]. " id="pdf-obj-34-4" src="pdf-obj-34-4.jpg">