Design principles for multimedia application

Introduction

Multimedia Application is very interesting use for deliver entertaining, simulations, digital publications and compelling message. Because of the use of audio, video and animated graphics with the written word makes a well-designed multimedia application attract almost everyone attention. However a bad designed multimedia application not only will failed to attract the audience, it also consist a high risk to doom the entire multimedia application.

 “Usually, a failed multimedia application consist of these issues:

•      Solve the wrong problem
•      Have the wrong features for the right problem
•      Make the right features too complicated for users to understand (Jakob Nielsen, 2008)."

Therefore, in order to avoid above mistake and deliver a well-designed multimedia application, there are several principle need to take into account.

Things to be consider before start a design

Before start a design, there are some things need to be consider. “Rather than rely on your own best guesses, base your decisions on user research(Jakob Nielsen, 2008)” . 

First  conduct a research on the field and perform a task analysis such as target audience, skill, equipment, time and the cost.  For target audience, what are the age and reading level of your target audience?  Which Ethnicity (language)?  The very importance thing you need to well understand at this stage is what your skill level is. Are you a well-experience techie or a beginner?  Next, what equipment you already own?  Are they ready for creating, displaying and transporting? How much time you are given? Lastly, what will the cost will be for the entire project?

Next, draw or create a storyboard for the multimedia application. A storyboard is a kind of comic strip-like set of drawings that tell a story and describe what the functions of the interface are does.

Figure 1 shows the looking of storyboard

After complete your storyboard, is the time do the paper prototyping- "technique that allows designer to create and test user interfaces quickly and cheaply(Jakob Nielsen, 2008)". This is where your initial ideas kicks in before proceed to any detailed design.

Figure 2 shows the looking of paper prototyping

Once you have well-understand above matters, is the time to start sketching your design.

Design Principle

As develop a multimedia application, "they are four basic design principles which is known as C.R.A.P principle (contrast, repetition, alignment and proximity)(Mike Rundle, 2006)". "Also there is one additional principle need to be consider as well which known as communicability"(Anon, 2010). By using these design principle, you can avoid the common design mistake and increase the impact of your multimedia application on your audience. 

Contrast

Proper use of contrast allows you to divide the display into meaningful areas by highlighting specific graphic elements. "Design with contrasting elements helps in creating a visual hierarchy between various graphic elements"(Swinbure, 2013). A strong contrast is the most effective way to create focal point of a design because the audience’s eyes will be drawn naturally. Contrast also allows you to skim through the batch of information and select only the one you need. However, confusion might be cause when ineffective use of contrast.  Contrast can be used in many ways such as color, lines and typography.

Example-Contrast of Color

Bad Contrast of Color

The icon color “dark color" is too close or almost similar to the background color which do not provide enough visual contrast. 

Good Contrast of Color

Brighter icon color under a dark background color do provide a better visual contrast  

Example- Contrast of Lines 

Bad Contrast of Lines

The lines on the pages look disordered and had been draw the eye away from the text which is the main focus.  

Good Contrast of Lines

Rearrange the line aligned on the right of the page create contrast and also avoid distract the text.

Example-Contrast in Typography 

Bad Contrast in Typography

The white color text such as the description and the author origin have distract the main focus of the page.    

Good Contrast in Typography

By adding a drop shadow and adjusting the font size, the main focus has now grabs the audience’s attention. 

Furthermore, there is also an additional technique known as Contrast with Image which is make use of a large image to grab the audience's attention.

Example-Contrast with Image

Make use of large Invoice Machine graphics at the left is to grab the audience's attention  

Repetition 

“Repetition basically is a technique that repeat styles down the page for a consistent feel.”(Mike Rundle, 2006) Repetitive elements in the interface design can be used to clarify and enhance information. Repetition can makes your design looks more interesting and feel more comfortable.  It can be consider as a stronger form of consistency to your design and create visual unity. Also it helps to classify the graphics elements that stick together. “Graphics elements can be as simple as color  spatial relationships, a shape, a texture or a typeface” (Swinburne, 2013).

Repetition principle can be apply in several ways such as colors, graphics, layout, lines and typography. 

Example-Repetition of Color

Bad Repetition of Color

By the use of various wonderful colors will makes the page look dynamic but unorganized repetition of color and pattern will cause the page look unbalance and draw the audience’s eye off. 

Good Repetition of Color

 Repetition of colors and patterns in a good manner will make the page look organized. 

Example-Repetition of Graphics 

Bad Repetition in Graphics

Irregular use of different shapes, font and graphics position make the page look messy. 

Good Repetition in Graphics

Repeating the similar graphics (banana bullet) in order manner will make the page look more consistent.

Example-Repetition in layout

Bad repetition in layout
Difference position of title and hyperlink makes the page layout looks very messy and unorganized.

Good repetition in layout

By the use of consistent of font, theme and well position title makes the layout look more comfortable to read.



Example-Line Repetition

Bad repetition of lines

Overuse of line color, thickness and direction may distracts audience. It makes the page look inconsistency and busy.

Good Repetition of lines

By reducing the unnecessary of repeating line direction and thickness will make the page look more comfortable. 

Example-Typography Repetition 

Bad repetition of typography

Overuse of different types of font types will make the page look disorganized.

Good repetition of typography

Reduce the number of font types will makes the page look clean and more organized.

Alignment

Principle of alignment emphasize the positioning of graphical element or body of the text either to the left, right or center of a page. "Alignment integrates the structure of the page allows a visual connection of grouping elements in your design such as text and graphics even they are not close together"(Swinbure, 2013). By the use of alignment, your design will looks more unity and balance. Alignment can be apply in graphics and layout.

Example-Alignment in Graphics

 

 Bad Alignment

The text not seems to be related to the graphics, haphazard alignment which lead confusion.

  Good Alignment
Both graphics and text seems to be related as they are aligned in horizontal manner. 


 

Example-Alignment in layout

Bad Alignment

Random alignment of text had been confuses from the symmetry. Relationship of the grouping are difficult to decide due to the poor grouping of text.

Good Alignment

The left-aligned title and the left-aligned topic form a nice symmetry. With the use of good alignment and grouping of these text elements make the page easier to read.

Proximity

The principle of proximity is refers to the categorization and arrangement between the related elements. When the elements of a similar theme are grouped together in close proximity they appear as a meaningful visual unit. “A relationship is implied when there are tons of graphic elements are in close proximity. Visual hierarchy is known as the elements are logically positioned they connect to form a structure to your design.” (Swinburne, 2013) A clear proximity may improve your audience processes the information.

Proximity can be apply in graphics and layout of the multimedia application.

 

Example-Proximity in Graphics

 

   

   

Bad Proximity in Graphics

The graphics and the description are not visually group together which lead an unclear proximity. The random spacing between the two elements had force the audience’s eye to jump from one element to another element.



Good Proximity in Graphics

The graphics elements are spaced along a recognizable horizontal line which have establish the relationship and appear as a meaningful visual unit.

 

Example-Proximity in Layout

Bad Proximity in layout

Too much spacing between the text and the title on the page causes the audience’s eye jump around the page.

Good Proximity in layout

The close spacing between the body text and the title has creates a nice hierarchy though alignment and visual spacing.

 

Communicability

"Communicability shows how naturally audiences can understand the meaning of a design"(Anon, 2010). Multimedia elements such as navigational structure, page layout, text and graphics should have an effective communicate meaning. Communicability can be apply in two ways which are graphics and navigation in the multimedia application

Example-Communicability in Graphics

 

 Bad Communicability of Graphics

This meaning of this graphics is ambiguous. It can be “Hello”, “Stop” or something else. To improve the communicability of this graphics by adding some related information or text.

Good Communicability of Graphics

With a question mark symbol in the multimedia application, the audience can intuitively understand this symbol is means for help information or FAQ

Example-Communicability in Navigation



 

Bad Communicability in Navigation

The “Click here” link sounds like unrelated with the description. It make the audiences hard to predict the content of the linked page because link does not communicate information effectively.

Good Communicability in Navigation

The “descriptive links” provide a good communicability as audience can predict the linked page content. The link sounds like is an additional information of the multimedia application. 

Conclusion

 

In order to come out with a well-design multimedia application, the C.R.A.P. principle (Contrast, Repetition, Alignment, and Proximity) are always is your best reference and guideline. But don’t forget to apply additional principle-communicability if desire. However there are always other things to consider as well, but the fundamental principle C.R.A.P.  will always lead your design to the right direction.

 

 

Reference

 

Houle, A., 2011. 4 Principles of Good Design for Websites. [Online]
Available at: http://www.myinkblog.com/4-principles-of-good-design-for-websites/
[Accessed 20 September 2013].

Lamp, L., n.d. Design in Art: Repetition, Pattern and Rhythm. [Online]
Available at: http://www.sophia.org/tutorials/design-in-art-repetition-pattern-and-rhythm
[Accessed 20 September 2013].

Ney-Grimm, J., 2012. Cover Design Primer. [Online]
Available at: http://jmney-grimm.com/2012/10/cover-design-primer/
[Accessed 20 September 2013].

NIELSEN, J., 2008. Top 10 Application-Design Mistakes. [Online]
Available at: http://www.nngroup.com/articles/top-10-application-design-mistakes/
[Accessed 20 September 2013].

Rundle, M., 2006. How C.R.A.P is Your Site Design?. [Online]
Available at: http://blog.teamtreehouse.com/how-crap-is-your-site-design
[Accessed 20 September 2013].

visscom, 2013. Principle of Repetition & Pattern. [Online]
Available at: http://visscom.wordpress.com/2013/04/16/
[Accessed 20 September 2013].

Swinbure, 2013. Basic Design Principles. [Online]
Available at: http://www.swinburne.edu.au/design/tutorials/design/design/#one
[Accessed 20 September 2013]

Anon., 2010. Design Principles. [Online]
Available at: www.edb.utexas.edu/minliu/multimedia/technical.swf
[Accessed 20 September 2013].

 

Ojeda, C., 2012. How to Create Pro Slides in Less Time: Don’t Worry, Be CRAPpy. [Online]
Available at: http://sixminutes.dlugan.com/contrast-repetition-alignment-proximity/
[Accessed 22 September 2013].