Interface Design principle by Pang Kim Hau

1.        Introduction

2.        Design principle
2.1.     C.R.A.P principle
2.1.1.  Contrast
2.1.2.  Repetition
2.1.3.  Alignment
2.1.4.  Proximity
2.2.     Interface design principle

2.2.1.  Simplicity
2.2.2.  Flexibility
2.1.3.  Error Detection
2.1.4.  Balance
3.        conclusion
4.        reference

1. Introduction

    Nowadays, design become very common and it is a must to be applied in the daily life. For example, packaging and logo design. Without packaging design it look very boring, people wouldn't get attention to the product which its packaging design just black and white.

    "Interface design is part of computer system with which a user interacts in order to undertake her tasks to achieve her goals"[Stone, Jarett et. al.,2001]. When we are using software and hardware, we have to interacted with something which is interface in order to manipulate the software or hardware. Therefore, the interface design is very important to make sure user won't feel boring to the design whenever interacted with it. So that, the interface design must be interactive and not so complex. An interface with complex design might lead to confusing between user and the software.

2. Design principle

    There are some principle must be followed in designing poster, leaflet  or even soft-wares, applications interface. The most common design principle we usually use is C.R.A.P which are contrast, repetition, alignment and proximity.

  2.1. C.R.A.P Principle

       2.1.1. Contrast

     Contrast is the most important which must be have in designing to differentiate any object in a design with other objects and its background. It is needed to the main object in the design in order to make the viewers to notice on it. The first will be focused on definitely is the most unique and conspicuous object. If all the objects and elements in that particular design are same or just slightly different, the design will become very confusing which is very hard to get the main point from the design. Strong contrast will make viewer easy to understand what the main point the designer want to present is. Contrast are presented in many different ways such as color, word and image.

Example of  Used of Contrast

Contrast of Color

Figure 1 words in RGB colors

From Figure 1, the green color words are presented in red color which is very hard to read. However, it look much better when yellow color word is on blue color background.

Figure 2 Image with contrast of black and white

From figure 2, the white color words are supposed to be with black color background to show their difference. Same thing to the black color words which are actually must put with the white color background.

Contrast of words

                             

Figure 3 Contrast in typography

From the figure above, the "Family" is the main point that the designer want to present then just followed by the next line. The word "Family" has a bigger font size and nice font style to attract people to view it.

   

Contrast of Image

                                            

Figure 4 Poster of a horror movie

From the poster above, we straight away know this is a horror-type movie without watching the trailer. The image is very special and it tell its audiences by using such a scary moment which the hands' shape is showed in the woman s' face.

     2.1.2.  Repetition

     If there is a relationship among several pages or design such as the presentation slides or an website designs, the style must be repeated to allow the user much easier and comfortable while they read it. Otherwise, different style are being used in one design will confused the reader. Elements such as shape, line and color must be used for every object in particular design to make it consistent. For example, in a presentation slides we have a trademark on top of it, to make it consistent, the trademark is added into every single slides.

Figure 5 Website interface of SONY

SONY website interface design uses the same design style for all its objects; for example, they put an icon to present every type of their product. Same font color also applied on its design to make user comfortable while reading it. 

     2.1.3.  Alignment

     Can you imagine if the car parked at car park are very unorganized, all of the car didn't follow the line and the space being allocated to each car and our car is at the middle there? We definitely cannot go out until all of them leave. In designing no matter interface design or poster design, all the objects in the interface or poster should be aligned them in a organized fashion. There are some type of alignment which are horizontal, vertical, edges, left and right alignment. Depends on the designing, not all of the alignment are suitable to the every design.

Example of Alignment

Figure 6 Aligned versus not aligned

From above, the alignment is very important to make the page much organized. Before alignment is done on the page above, it look unorganized and weird because the "blogging" s' position.

Figure 7 Messy versus organized

From above picture, the content in not aligned flyer are very messy and so it hard to read. After receive this kind of flyer, readers surely lazy to read it because the content are very unorganized and messy. The right hand side one is very organized after all the content are aligned to left and it is easy to read.

  

      2.1.4.  Proximity

     Proximity is used to create relative in the designing. The related objects must be grouped together; while the not related objects which they are no relation with each others should be placed separately to make some gap and space. Box and line also can be used to separate the two different type of objects. So that the design layout will be more organized and neat.

Example of proximity

Figure 8 Grouping

Form the above picture which is Google, they use group the related objects together which are objects in menu bar. Then, all of this separated by a line to differentiate the menu bar with the selection part.

2. Interface Design principle

      

      2.2.1.  Simplicity

     The simple the design is, the easier the user view on it. The interface which has complex design doesn't mean it is a successful software but the software with simple interface usually look better compared to the complex one. So good software with the simple interface can be accessed easily without making user confused. If a interface design is complex, it is hard to use it because it is too messy and unorganized.

Example of Simplicity

Figure 9 simple interface design

 Google is a website look simple, all the apps and icon are grouped into one to reduce the complexity.

      2.2.2. Flexibility

      Interface design should be flexible to change in future to meet the user requirement due to technology become much advance. Button such as home button and undo,redo should be add on so that user can use them easily and any time at any page.

Example of flexibility

Figure 10 the flexibility of an interface design

In above cases is the button used in it are very flexible which users can just click on the website s' logo if they wish to go back to home page.

          2.2.3.  Error detection

                    
          Error will be occurred due to human error, so the error detection is needed to detect the error and prompt out a message box to ask users to confirm that they wish to do so. For example, Google Chrome has a error detection function where it will ask your confirmation before you close it while your downloading still going on.

          2.2.4.  Balance

          "Balance is the concept of visual equilibrium, and relates to our physical sense of balance"[Charlotte Jirousek, 1995]. Even you have several small tiny objects on one of the side, it can be balanced by a big object at the other side. A balanced design will make user much comfortable to view and read it. Balance can be divided in to two which are Symmetrical and Asymmetrical.

Symmetrical balance just like a reflection of mirror which the image of one side will be reflected to the other side.

Figure 11 Symmetrical Interface design

From the art work above, iI can conclude that the image at left hand side are reflected to the right hand side.

Asymmetrical balance is meaning several small tiny objects on one of the side can be balanced by a big object at the other side. "One darker item may need to be balanced by several lighter items"[Bonnie Skaalid, 1999].

Figure 12 Asymmetrical balance design

Value refers to the darkness or lightness of objects. To balance this two, the darker apple must be smaller than the grey color apple because the the darker the color the stronger they are.

3. Conclusion 
    
    The author gained a lot of knowledge about the design principle after this study have been conducted. Principles are very important in designing. Without them, the design might be failed. C.R.A.P principle are most common principle which is always used in designing. Author know that the designing job is not very easy and it take time.

     Author will use some of the principles  in assignment 2 such as contrast, repetition, alignment and proximity. All of the C.R.A.P principle will be applied on assignment 2 because they are the basic in designing. Beside that, author also want to use the simplicity and error detection to make user comfortable while reading it and prevent from human error.

4. Reference

• Bonnie Skaalid. (1999). Classic Graphic Design Theory Principles of Design: Balance. Available: http://www.usask.ca/education/coursework/skaalid/theory/cgdt/balance.htm. Last accessed 27/2/2014.
• Charlotte Jirousek. (1995). Principles of Design. Available: http://char.txa.cornell.edu/language/principl/principl.htm. Last accessed 27/2/2014.
• Scott W. Ambler. (1998-2014). User Interface Design Tips, Techniques, and Principles. Available: http://www.ambysoft.com/essays/userInterfaceDesign.html#Principles. Last accessed 26/2/2014.
• David Jiang. (2009). The CRAP Design Principle: Contrast, Repetition, Alignment, and Proximity. Available: http://voices.yahoo.com/the-crap-design-principle-contrast-repetition-alignment-3710716.html?cat=15. Last accessed 25th Feb 2014.
• MIKE RUNDLE. (2006). How C.R.A.P is Your Site Design?. Available: http://blog.teamtreehouse.com/how-crap-is-your-site-design. Last accessed 25th Feb 2014.
• Shelley Esaak. (2014). What is the Definition of Balance in Art?.Available: http://arthistory.about.com/cs/glossaries/g/b_balance.htm. Last accessed 27/2/2014.