Interface Design principle by Alvin Tong

1.0 Introduction

What is interface design? Interface design have been defined as the interaction between the computer and the user in order to achieve the goal or the task of the user. A good interface design allow the user have a good view and also will give them a good impression when they first time view on it. How to create a good design of  interface? To create a good interface we need to follow the interface design principle in order to create a good interface and in this assignment we will get to know what  is the principle of design to design an interface.

1.1 Design Principle

So in the introduction I will introduce to out what the common or the fundamental of the design principle. There 4 common design principles which used by most of the designer while they were designing a poster, web page, advertisement and other kind of graphic design or multimedia application. The 4 principle that common use by them were contrast, repetition, alignment, proximity.

1.1.1 Contrast

 "Contrast focuses our attention and should be used to highlight the most important points that the audience should take away"(Creative Common.2012). Use of the contrast is important when a developer or a designer is designing an application. The reason why the contrast is important is because the proper used of the contrast avoid the similar use of the element such as the form, color, type, shape and other element on the page. In fact, a good use of contrast one certain multimedia application may give the good impression to the user who is using it.

Example contrast in graphic and color:

figure 1.1 Contrast in graphic and color

From the figure 1.1 we can see that the left side of the picture use the brighter color under the dark color background to create better view on it. For the right side, the color use is almost similar with the color of the background so it cannot provide enough visual contrast.

 Example contrast in typography:

figure 1.2 contrast in typography 

Form the figure 1.2 the typography shown in upside can provide a good view on it and can make people more focus on the word. For the downside, the color of the word was similar to the background color so it look more confusing than the upside.

1.1.2 Repetition

Repetition is the technique that create the design by using the same type of style or the element such the type, color, shape, etc. to make the design look more consistent, so that it will allow the user to have a nice view of it and also feel more comfortable with the application.

Example of repetition:

figure 1.3 Example of repetition

The figure 1.3 shown the repetition by using the same color red and white to create web page. Beside that they also use the same font for their information.

1.1.3 Alignment

"Alignment as an effective web design principle allows us to make conscious decisions about how and where elements are placed on the page"(Ryan Boudreaux, 2012). With the use the alignment, it can allow us to create a web page or graphic design with more balance and more organize. In fact, there are some alignment type that always use to design which are horizontal alignment. left and right alignment, vertical alignment, edge alignment, etc.

Example of alignment:

figure 1.4 Example of bad alignment

figure 1.5 Example of good alignment

From the two figure above, we can see that the alignment in the figure 1.4 is are no organized, while for the figure 1.5 the page look more organizes than the figure 1.4, because they align all to the left side.

1.1.4 Proximity

"The basic theory of proximity is concerned with the arrangement or categorisation of elements that relate to one another"(Swinburne, 2013). It mean that the objects which have related to each other are group together as a category, and for the element or object which is not related should be placed separately to create a more organize interface or layout.

Example of proximity:

figure 1.6 example of proximity

As you can see that a good proximity will categorise the relevant information together so that it look more organised as shown in the figure 1.6.

2.0 Interface Design Principle

2.0.1 Consistency and standards

“Consistency in design is very common within certain products as it allows better usability and makes them easier to learn” (Richard Michael West, 2009). Consistency in any kind of the application interface is important, if an interface not able to work consistently then this interface can be conclude as a bad design of an interface. In addition, consistently use of the color, typeface, wording label and messages, etc. will create a good interface for the multimedia application. In fact, “consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs”(Ambysoft,2014). The interface that the designer design should be always consistent to the user who is using it, with the consistent of the interface it allow the user to have the easier to learn how the system operate. Once they understand how it work, it will able to use it with much more efficient.

Example of consistency and standard:

figure 2.0 example of consistency design of web site.

2.0.2 Balance

"Balance is the concept of visual equilibrium, and relates to our physical sense of balance"(Charlotte Jirousek, 1995). The balance is something that tell us how to create an interface look more stable and organize by using the element. when the design is balance it will bring comfortable to the users when the users view on it. Besides, the principle of design balance have divide into two main type, one is symmetrical and asymmetrical balance.

   2.0.2.1 Symmetrical Balance

    Symmetrical balance is the balance that reverse the image on the opposite side like reflect the image by using a mirror

figure 2.1 example of symmetrical balance

figure 2.2 example of symmetrical balance

   2.0.2.1 Asymmetrical Balance

    Asymmetrical balance is the balance that balance by using the size, color, etc. In addition, it is more random, more energetic and interesting.

example of asymmetrical balance:

figure 2.3 example of asymmetrical balance in web page

2.0.3 Follow the contrast rule

From the first part, you can see that there is explanation  about what is contrast mean in the design principle. So, why it is important that a designer need to follow the contrast rule when designing an interface? This because in the contrast rule state that contrast was used to emphasize or highlight the key element such as color, typeface, font, etc. in your design. By following the contrast rule we can design a better interface which can give good impression to the user and also attract the user when viewing it. The following will shown some example with related about the contrast.

2.0.4 Align field effectively

Align the field in your interface can make your interface become more tidy and more organize and it help to create very comfortable environment to the users when they is using the interface. Besides, "it tightens the design and eliminates the haphazard, messy effect which comes when items are placed randomly" (Anthony Hortin, 2009).

2.0.5 Keep it simple (Simplicity)

Simplicity is the most important principle when design a interface either in wed design or application design. So, if you wish to have a nice and professional surface, you need to know one important key which is "KISS", also know as "Keep it Simple, Stupid". A simple design interface only contain the information and the thing that is relevant and  avoiding those thing, information and element that is not relevant so that the design will look simple. So that, a good and simple interface will give user the simple way to use once that use it.

Example of simple interface design:

figure 2.4 Example of simple interface on web page

figure 2.5 Example of simple interface on web page

2.0.6  Error prevention

Do you even experience that when you mistaken close all tab in your browser by using Google chrome or other browser? And do you able to find back all the history that you search without adding them to your bookmark or favourite? As the result , this all happen because the human error so that error prevention is used to prevent the user to make mistake from what he or she have done. Error prevent is one of the careful design that used to prevent the problem which will happen when the users make the mistake. By using the error prevention, it will show a pop out which need the confirmation of the users before they continue the action.

2.0.7 Clear navigation aids

Clear navigation is important in every interface either in the web page or other type of application. Because a "clear, consistent icons, graphic identity schemes, page titles and headings, and graphic- or text-based overview and summary screens can give users confidence that they can find what they are seeking without wasting time" (Patrick J. Lynch and Sarah Horton, 2011). In addition, a clear navigation in a interface will allow the user to return to the home page easily and to other navigation point which is shown in the site by click on the hypertext which is given in the site. In fact, the panel or the header which contain the basic link which help us to go for another navigation point should shown and place consistently on every page"Headers provide basic navigation links and create an identity that tells users they are within the site domain" (Patrick J. Lynch and Sarah Horton, 2011).

figure 2.6 example of navigation aids

figure 2.7 example of navigation aids

2.0.8 No dead-end pages

All of us have experienced that when we search some thing in search engine like Google, yahoo, etc. sometime they give us the link which is link to the subsection of the page to get the information and they may not able to see what the information given on the main page of the site and also the introduction about the site. for example if the subsection you get into does not contain the hypertext link which can link to the home or other navigation point it is know as dead-end pages. So ensure that the dead-end pages did not occur in your site, make sure that when design the interface put at least one hypertext link or link that can return to the home page of the site.

figure 2.8 example of interaction between the subsection

3.0 Interface design conventions

Interface design convention is about how to joining the layout which is relatively such the search tool, local navigation, etc. to make a familiar interface and also make the useful page. So when the user feel the interface is familiar they will feel easy and adapt to it and then they will start to concentrate on the feature that have in the interface.

figure 3.1 example of how to design a interface

4.0 Conclusion & Reflection

From conducting the research of the Principle of interface design, the author have gain a lot of knowledge and information about the basic principle of design which is the C.R.A.P principle and also what principle should be applied while designing an interface. The author also realise that design and implement an interface is not an easy job. For the next group assignment, the author have decide to used some of the principle that is mention above which is the consistency and standard, contrast and alignment , and clear navigation aid.

The reason why the author choosing consistency and standard is because the consistent of using the element will make the interface more consistent and organization when view on it. Beside that , we will also apply the contrast rule and alignment to make the interface of the page more attractive and organize, why the author choose contrast rule and apply in the assignment 2 is because the author think that a good contrast of interface will emphasize or highlight the important thing in the interface and also to attract more attention from the user. In fact, the author also think that a clear navigation can bring confidence to the users when they are using.

5.0 References

• User Interface Design Tips, Techniques, and Principles. 2014. User Interface Design Tips, Techniques, and Principles. [ONLINE] Available at:http://www.ambysoft.com/essays/userInterfaceDesign.html. [Accessed 20 February 2014].

• 10 Heuristics for User Interface Design: Article by Jakob Nielsen. 2014. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. [ONLINE] Available at: http://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 20 February 2014].

• Interface Design | Web Style Guide 3. 2014. Interface Design | Web Style Guide 3: Article by Patrick J. Lynch and Sarah Horton. [ONLINE] Available at: http://webstyleguide.com/wsg3/4-interface-design/3-interface-design.html. [Accessed 22 February 2014].

• Principles of Design. 2014. Principles of Design. [ONLINE] Available at:http://char.txa.cornell.edu/language/principl/principl.htm. [Accessed 23 February 2014].

• Principles of Design: Balance. 2014. Principles of Design: Balance: Article by Bonnie Skaalid [ONLINE] Available at:http://www.usask.ca/education/coursework/skaalid/theory/cgdt/balance.htm. [Accessed 23 February 2014].

• The Basics of Interface Design. 2014. The Basics of Interface Design. [ONLINE] Available at: http://msdn.microsoft.com/en-us/library/aa733613(v=vs.60).aspx. [Accessed 23 February 2014].