User Interface Design The Knack Behind User Interface Design

www.spiderindia.com

Tel : +91-44-42305023, 42305337 Email : marketing@spiderindia.com

N E W N O . 7 , M O U N T R O A D , L I T T L E M O U N T , S A I D A P E T ,

C H E N N A I - 1 5

www.spiderindia.com Page 2

CONTENTS

I. User Interface Design – Introduction …4

II. Tips To Be Remembered …5

i. Simplicity

ii. Consistency iii. Structuring The Webpage

iv. Use Of Color And Texture Strategically v. Effective Use Of Fonts

vi. Communication vii. Defaults

III. Techniques That Can Enhance User Experience …7

i. Clarity ii. Effective Wording Of Labels And Menus

iii. Grouping iv. Pictographic Representation

v. Contrast vi. Ease Of Transition/Toggling

vii. Managing Attention By The Use Of Colors viii. Auto-Focus

ix. Custom Input Highlight x. Concise Dialog Boxes

IV. Principles That Changes The Game Of

User Interface Design …9

i. Reduce Thinking Time- Reduce Questions

ii. Do Not Test Patience iii. Visibility Without Distraction

iv. Crisp Writing v. Reach Out With Simplicity

vi. Use Blank Spaces Effectively

www.spiderindia.com Page 3

vii. The Teto Approach viii. The Principle Of Structure

ix. Feedback x. Tolerance

xi. Resume Function

V. Importance Of Effective User Interface Design …11

VI. Applications That Can Successfully Benefit From The User Interface Design …12

VII. Catching Trends …12

i. Responsive Web Designs

ii. Interactive Scrolling

iii. Tap Friendly And Swipe Optimal Designs iv. Large And Bold Images

v. Videos

VIII. Conclusion …13

www.spiderindia.com Page 4

Introduction:

Imagine what would happen if you click on a pop-up link from a web page and nothing happens

or the website does not respond to your actions?? This is where User Interface comes into play.

A good User interface aims to provide a comfortable interaction between the user and the system, enabling the user to manipulate the system providing desirable results to the end user. It must facilitate the effective operation and control factors of the system to the ultimate end user,

without which the purpose of the system interaction would be a failure.

A good User Interface Design should focus on the simplicity of the design and also on the efficiency of the system in order to understand and anticipate the needs of the user, thus enabling easy interaction combined with the use of easily accessible elements which facilitates the

performance of the actions required by the user.

In order to ensure an aesthetically pleasing and engaging user interface design, it must require concentration in the areas of Interactive designs, Visual effects and information architecture, which if perfected provides a smoothly functioning and a hassle free User Interface.

I. USER INTERFACE DESIGN

The Knack Behind User Interface Design

www.spiderindia.com Page 5

i. Simplicity: Avoid complex interfaces as they take a longer time to be understood,

which can also mean that more training is required in order to achieve the desired results,

whereas when the design is simply the interaction and workability also becomes easier.

ii. Consistency: In a user- interactive mode consistency can make the difference between a pleasing website to a highly difficult website to work with. Keeping a consistent design

throughout the webpage makes it easier to understand the workability model and follow the instructions similarly throughout the interface.

II. TIPS TO BE REMEMBERED

www.spiderindia.com Page 6

iii. Structuring the Web page: When the website layout is decided upon, care should be

taken to ensure that the layout is structured in order to give a clear highlight of the

features the brand wishes to portray to the end-user. Proper and strategic placing of content and designs can ensure better inter-activeness to the end user.

iv. Use of Color and Texture strategically: Using vibrant colors and captivating

textures in the right places can impose an optimum effect on the end user, ensuring that the user interface passively promotes the features that are highlighted by the developer.

v. Effective use of Fonts: Fonts can be used in a hierarchical fashion to emphasize on the

most important points one wishes to convey, this can further be categorized according to prominence, and this feature would provide more clarity to the user interaction.

vi. Communication: In many cases the working on the design is not conveyed to the user,

optimum use of links, prompts, change of action, error and the status of varied processes must be conveyed to the user effectively. This ensures the linking of the user to the interface system, which ensures the avoidance of confusions and frustration faced by the

end-user during time lapses.

vii. Defaults: Analyze in detail the services provided by the site and thereby exercise a clear

understanding of the common requisites and underlying requirements which are sorted out by the end-user, facilitate the interaction and minimize the processes required to be traversed by the user, thereby creating a system which understands the needs and caters

to the requirements in an intelligent manner, in the form of pre-determined services, options and selections.

www.spiderindia.com Page 7

Keeping in mind certain researched techniques and implementing the same can be extremely beneficial when designing user interface systems.

i. Clarity: In many cases the users have difficulties in understanding the working of the

program, in such cases offer help messages when the cursor hovers through the menus, to offer a better understanding of the system in a quick and easy manner.

ii. The Effective Wording Of Labels And Menus: Always remember to be crisp and

concise in wording messages or menus, enabling better understanding of the categories available in the interface, making sure nothing misses the eye.

iii. Grouping: Categorizing or grouping of services and information effectively can greatly

contribute to the reduction of aimless searching for services or options. Categorizing furthermore would provide a balanced approach to the entire interface due to the

reduction in cluttering.

III. TECHNIQUES THAT CAN ENHANCE USER

EXPERIENCE

www.spiderindia.com Page 8

iv. Pictographic Representation: The utilization of pictures provides a good value

addition to a well formatted web page, visualized representation provide easy understanding to the end-users.

v. Contrast: Colors can be used effectively to communicate the hierarchical importance in

a web page, the use of focus shades can ensure more importance is diverted to the highlights of the page.

vi. Ease of Transition/Toggling: Care must be enforced to ensure that the transition from

one page to another must occur effectively and with ease with the extensive use of

process commands to ensure better understanding of the user towards the working of the system.

vii. Managing Attention By The Use Of Colors: Contrasting colors add a vibrant touch

to the web page and it’s an effective tool in drawing the attention of the end user to the points of attraction the organization wishes to emphasize on.

viii. Auto-Focus: In the case of documents that require a degree of typing, the auto-focus

tool can facilitate the input process of the user by automatically moving the type cursor to the field, making it ready for typing.

ix. Custom Input Highlight: This tool further facilitates the working of typing inputs by

highlighting the text input field which gets highlighted immediately and subsequently to ensure the visibility of text that are being typed by the user. This makes it easier for the

user to view the subsequent fields to be typed.

x. Concise Dialog Boxes: In many cases the users do not have the patience to read through the entire dialog box content, therefore in order to make the content easier, more

action specific dialog boxes which instead of yes, no or cancel can state function such as save, don’t save or cancel, will reduce the time and manage the content specified in an

easier fashion.

www.spiderindia.com Page 9

i. Reduce Thinking Time- Reduce Questions: Ensure that the users have very little to

think about which makes the number of questions that arises lesser, when this happens

the end-user feels more ensured and intrusive about the website and does not hesitate to

venture forth into the captivating system offered.

ii. Do Not Test Patience: Research states that in case of a free trial service offered, users

are more inclined to giving personal details like e-mail etc. When it is asked for at the

end, rather than when it insisted on in the beginning, also care should be taken to

mineralize the information required from the end-user in-order to reduce the time spent

by the user filling out forms.

iii. Visibility Without Distraction: Ensure user focus with the use of informative info-

graphical designs and attractive short patterns of interaction which highlights what you

could offer to the user in return.

iv. Crisp Writing: Eloquent language is easily ignored by the user as one cannot expect all

users to have such a level of understanding of the platform used, therefore keep crisp

short phrases, with a well defined scalable categorized layout supporting a very plain and

object oriented language.

v. Reach Out With Simplicity: The (KIS) principle more elaborately known as the

Keep it Simple concept revolves around keeping and maintaining the entire website in a

simple finish format. It is always better to keep in mind that the users are in reality

present to optimize the services offered and not ultimately to enjoy the designs and

patters present.

vi. Use Blank Spaces Effectively: Using spaces to categorize collective points in an

effective manner is a good way to deliver well tailored comments more efficiently, rather

than presenting long pages of collective texts which will prove to be ineffective.

vii. The TETO Approach: The Test Early & Test Often approach should be optimized

every once in a while to sort possible problems and issues that can be faced by the end

user with the giver interface design.

IV. PRINCIPLES THAT CHANGE THE GAME OF

USER INTERFACE DESIGN

www.spiderindia.com Page 10

viii. The Principle of Structure: Emphasis should be given to maintaining an architecture

that’s not only organized and meaningful but also purposeful to the site as well as useful

and clear to the audience. Maintaining a well recognized structure also with a good flow

of content compliments to the overall architecture and workability of the site.

ix. Feedback: The success of the web user- interface design could rely on its feedback

feature as constant feedback of processes, errors; status of the program etc. Should be

mentioned on a regular basis to ensure the user’s anxiety does not escalate.

x. Tolerance: It is common of mistakes to occur in any performance, the user interface

design must have enough tolerance to incorporate those changes in the system by taking

them into consideration and providing useful undoing and redoing feature as well as

automatic error detection features.

xi. Resume Function: The design should be incorporated in such a manner that the user

who returns to the site should not have the need to repeat processes all over again,

automated memory options facilitating lesser rethinking can play a vital role In

convincing the user to return to the website on a regular basis.

www.spiderindia.com Page 11

As per statistics your user interface design plays 77% in convincing the user to continue on with your website that alone can be the marking difference in the playing field between success and

failure in the web arena. A good user interface is one which has an emphasis on the following points:

- Ease of use: there is no point in having a greatly designed interface that does not cater

to the understanding quotient of the user.

- Self Explanatory: A good User interface design is ideally manual free due to its self

explanatory simplistic style.

- Performance Speed: an ideal user interface design is one which can satisfy to the time

needs of the user by performing effectively, with consistent interface speed without

splurging on the user’s time.

- Familiarization: positioning familiar elements required frequently by the user as a

necessity in familiar locations saves time and vitality.

- Help Tips: a good interface must be able to detect constant errors and offer help as and

when required by providing optimum help tips and tools.

With the proper optimization of a good user interface design we will be able to achieve

Facilitation: when the design caters to the needs of the user and provides easy steps to

achieving user goals the return quotient of the user and their associations with the organization

will increase substantially.

Design: a customer friendly design with a good balance of design and information will give an

effective return on investments as the users are able to traverse through his system and connect

easily with the design, their orientation to continue would be elevated.

Features: with the effective use of the above concepts, the designer can be sure that the model

created would be a success, with time and effort in integrating the model laced with a n array of

constant tests from third party sources, the designer could benefit greatly with the implementation of user friendly changes clubbed with a system that works effectively to cater to

their needs.

V. IMPORTANCE OF EFFECTIVE USER INTERFACE

DESIGN

www.spiderindia.com Page 12

With the tremendous growth in the gadget industry, software’s and platforms are no longer

focused only towards the use on computers. With a rise of more than 2.3 billion portable products available in the market, the creation of applications that caters to the main website cannot be taken lightly.

When creating a mobile app which can be used across platforms one should ensure that there is:-

Ease of Transition from the desktop site to the mobile site

No loss of features or services occurs within the platform

The compatible design should be made user friendly

Should cater to the device requirements

Visibility should not be tampered with

Access to various information should be made available with no exceptions.

Ensuring these factors would enable the on-the-go applications to be successful by being user

friendly and compatible, thus ensuring more accessible to the end user.

With User interface design playing a vital role in capturing the market, various trends have evolved as well as brought back from the past, some of the familiarly used common trends which

are highly successful:

i. Responsive Web Designs: This allows the website to convert to any screen as required

by the user based on access, with the tremendous growth in the electronic industry the need to ensure websites are made available across platforms is of prime importance, and that coupled with the fact that the websites need to be available without compromising on

the features plays a vital part, therefore responsive designs are one of the leading trends in the market.

VI. APPLICATIONS THAT CAN SUCCESSFULLY

BENEFIT FROM THE USER INTERFACE DESIGN

VII. CATCHING TRENDS

www.spiderindia.com Page 13

ii. Interactive Scrolling: This provides a varied number of scrolling options which are

aesthetically appealing as well as creatively functional ensuring that there is an element of interactive design associated with the web page

iii. Tap Friendly And Swipe Optimal Designs: This feature offers an interactive

website with concise content which caters to the requirement of on-the-go users and users who use applications in cross platforms.

iv. Large And Bold Images: Solid images which are extra large are posing a comeback in

recent times. This type of design is used to keep up the interface and user to the point and active.

v. Videos: With the right speed and optimal support the use of videos is becoming highly

popular as according to research a video can communicate your brand effectively and it

increases the chances of the viewer turning into your client by 437%

In any case it is advised by User Interface Design Experts that the best designs are the ones that

convey the message to the point equipped with a simplistic approach and user friendly concept.

*********

VIII. CONCLUSION