Welcome to Visual DesignEffective User Interface Design Guideline

By Xiaoying Zhang

Backgrounds Visible Language Heuristics and Principle User Interface Design Considerations

Layer and Style Design Colour Design

General Usability & Testing Conclusion

Overview

Interface DesignSoftware interface design is a subset of general information.

User Centered interface DesignDesigner just focus on the user’s perspective.

Overall goal of interface designCreate a way for the users and the developers to communicate easily and efficiently.

Background

Layout and Style: The balance of logical and aesthetic of formats, proportions and grid is critical to success of effective interface.

Colour: It is also complex elements in reach successful visual communication. Moreover, logical combined colour creates visual sense.

Texture: Since texture is the basic elements of communication tool, compact and sententious instructional texture also help user enjoy the visual communication. 

  Imagery: It is related to symbols, icon and signs. Good imagery leads to easy

understanding and decreasing the complex of interface.

Visible Language (1)

Sequencing: Used to control the cadence and intension of the information delivery from one user to and another.

Animation: Not easy to design but effectively attracting user’ interest. The HCI level is high, it requires the bandwidth usage.

Sound: An easy way to get user’s attention by abstract, concrete, vocal or musical cues.

Visible Language (2)

Creating interaction          Providing the constant and appropriate feedback in their understand way. User need to know what is going on, and any options they can choose. The feedback should be inform user those information and in their own language.

  Match between system and the real world

User like to use the vast store of knowledge they already posses such as windows, menus and buttons.

   Let the user be in control

The system should not fixed the process path, give user freedom is necessary and polity. Howe ever, design also should leave some “back door” for user to go back where they started, when they accidentally kick the wrong links.

  Consistency and standards

Provide direct and easy understanding options, rather than indirect, confusion items, so user will not lost in the “big picture”. Be consistent because the user’s world is consistent.

Heuristics and Principle (1)

Testing all function twice before go aliveOne error could lead up to destroy the loyalty of the user. Users will not go back to the trouble website again. Preventing error generating is the designer’s responsibility.

Tread user with respectThe magical words still work online such as greetings. Users may feel more comfortable when they see “good afternoon”, “thanks for visit” and “please wait a moment” rather than a processing line fill from left to right. Always and unconditionally offer the user forgiveness for their actions.

Provide short cut for advance user Time is money! Advance users want to gather information as soon as possible, so give them chance to avoid time waste is also important. In additional, do not create modes unnecessarily and when necessary, identify your modes unequivocally to your user.

Recognition rather than recallUsers don’t like to memory the objects, action and options. So designer should try to create interface where the user can see rather than remember.

Heuristics and Principle (2)

Layer and Style Design

The consistency of layer includes the placement of logos and graphics as well as alignment of data representation on the interface design.

Colour Design

Designer need consider the color combinations to acceptable by common users.

User Interface Design Considerations

The simple interface design is one dimension such as newspapers.

Layer and Style Design (1)

Figure 1: Simple interface data representation

Layer and Style Design (2)

Figure 2: Real interface with simple layer example

Multi-layer interface classifies the data into three layers.

Layer and Style Design (3)

Figure 3: Multi-layer interface data representation

Figure 4: Multi-layer interface data representation

Layer and Style Design (4) Users can experience additional buttons, fronts, ruler

and status bar compare with simple layer example.

Figure 5: Expending multi-layer interface data representation

Layer and Style Design (5) Expending multi-layer gain more benefit of multi-layer

design.

Important information with shapes Buttons change into pull-down menus

Layer and Style Design (6)

Figure 6: Real interface with expending Multi-layer example

Colour Selection The common tool is the Colour wheel when designer is making colour

combination. The primary colours are red, yellow and blue The complementary colours are should not be use in

interface design

Colour Design

Figure 7: Colour wheel, Primary Colour and Secondary Colour

Most importantly  Test the interface design on different operational system such as Win 95, Win XP and Vista. Then, test it on different screen size such as 15inh, 17inh and 22 inh, etc. After that, test the print out on the different types of Printers as well.

   Connectivity & Modem speed  If the interface design content a lot of photo and Flashs, designer needs to test

the online downloading time requires. If it is necessary, designer needs to warning the users that it is takes long time to download.

   Data stamping

When the interface design is related to some important information such as finance data, designer needs to put warning that it is not academic result.

  Alt Tags

Designer needs to make sure all graphic element, logo and photo includes as “ALT ta”, Using alt = “…”. Hence, users are able to search the graphic element and logos.

General Usability & Testing (1)

Link issues When user see “The page cannot be found” error message, they will start to panic and may not coming back to this website again. Designer needs to regularly check the links and redirect the problem link before the user find out.

  About Us

It is good idea to adding information and back ground into the “About Us” such as company or group name, phone numbers and address.

  Language & reading level

If the interface design will be used by different language users, designers try to create several language versions. And designers could provide reading level indicator such as PG, M and MA.

General Usability & Testing (2)

Visible languages are very important technical for designing effective interface.

Use of general principles and heuristics are a great first set towards achieving the effective interface design.

Multi-layer simples and colour selections are used on the advance interface design situation.

Designers also have to test the general usability of the interface on many matters.

Conclusion