User Interface Design fundamental principles & guidelines

you are here Resources >> User interface design

User Interface Design (UID) is the design of any interface systems that focus on interaction between human and machine/system. This design can be related to 'Interaction design' IXD in one way. 

User Interface designs could be related to :

• Websites, blogs
• Computers
• Mobile devices
• Software's
• Machines like ATM, Voice recognizer, scanners
• Appliances and more

Anything that humans interact with the systems are more or less related to UI Designs. UID are gaining importance in the current generation. Man is always struggling to design systems that would demand less interface or involvement of human. The latest technologies and interface systems supports our discussion - technologies like motion control, gesture control devices (see example - Leap motion control)  are emerging; that would even eliminate 50% of the current human effort. So, they are one promising design field to concentrate. 

So, that's why I took time to write this article giving much details from my own point of view as well as by considering reviews from around the web. Those who design apps, blogs, websites etc are considered directly as UI designers ! 

"In the beginning of this section, I have given the basic fundamentals and general rules that are involved in any UID. Later I included User Interface Design principles for mobile platform - as it's the most emerging trend and of course much improvements are still expected/needed in the mobile platform. At the end, I've given some good number of thumb rules (UID principles) from exam point of view - that might work very well for your CEED exam."

The following are some of the fundamental principles or rules in designing UI systems

1. Know the user needs/goals

The important part of designing an interface system is to identify the goal of the system. Goal in the sense

• what is required/needed
• what is to be delivered
• whom are the users, their demography
• what is to included
• Time bound or any limits/constraints within which the system is supposed to perform the task

The designer should be keen to the above factors and work on it to make it deliver - what it is meant to.

2. Keep everything simple and neat

Simplicity is the foremost thumb rule in any UI design. Optimize the usage and design such that 'It can do most with the least interference'. Users look for their expectation and the UID should help them get it done with minimal effort of user. Any UI designs that would end up making users rework or redo the same things/process; thus causing additional effort by the user - are the worst criteria. Categorize and group up things appropriately. Give adequate space between feature to feature, don't join all elements/features in a line or in a way not recognizable; something like that shown below.

(Inappropriate way)

3. Easy user navigation

Navigation within the same screen as well as between the screens to screens are the most bothering thing in UID. Designers are working their best; continuously to improvise the current navigation system such that it's even more easy to use, understandable and aesthetically pleasing. Optimize the sequence as well as steps. Try to reduce/optimize the number of steps involved in completing any task by the user.The navigation system should definitely be easy to identify, without the need for searching where to go to reach a particular step. Also the same kind of navigation system is appreciated throughout the unique design process. Else, it would create confusion and hence waste user time as well as interest !

Also single click navigation is more appropriate than double clicking feature. Right clicking feature in UI designs are not appreciable (in case of desktop UI mode referred to as stationary). 

All the navigation's should preferably be within the same screen (webpage tab - without the need of going to a new page tab) except for the external links (links not related to that webpage or app). The design should let the user easily understand where they are (which step) and how to navigate to any other step (at least to prev and next steps as well as to home or main page) at any point of time (any step or screen). 

Don't make the users jump here and there, navigation should be in an order, step by step or smoother way. Say for example, if you put an option to select in the top - whenever someone clicks it and when you put the next select option at the bottom or somewhere else, it would create confusion. Avoid such kind, make it easy to read, visualize and even understand.

4. Don't over stuff with details

Include only the information users needed and avoid flooding the screen with unnecessary additions. Say for example in login page interface, including some simple and basic steps/boxes like - login, password, forgot password, home and other related features seems more appropriate than including something like 

"we offer you with ......", 

"welcome to our page, xyz is good at ........". 

These information's have already been known to user and there's no need to include or repeat the same in this step. Also, the login page is supposed to function like 'login page' only and not do any other unnecessary functions or advice !

5. Make it familiar

Familiarity in the sense, the type of interface being known to the user, but put in some unique or interesting way. When the user knows about the procedure or when he is able to guess what comes next - after doing what, then he would be spending much less time searching for the functions or understanding each elements. So, design your interface very familiar; if possible universal - but represent them in some unique or eye catching way to give more appealing feeling to the user.

6. Screen layout and relationships 

The layout should be simple with good amount of categories, sub groups and with simple details because it contributes/influence the aesthetic appeal as well as have tremendous effect on the usability of the design. Group things on the screen effectively. Alignment and positioning of blocks, controls, text, typography, white space, consistency of elements and simplicity in design are all some important factors in contributing to simple interface layouts. 

The following picture shows the recommended alignment feature.

7. Readability 

Most importantly, the design need not include heavy changes in font size, font type and also in color. A simple and plain font format is the most recommended one. Such font types are appealing and in fact easy to identify. It's best to stick with simple sans serif or serif fonts where possible (for original UI designs). Script and other decorative fonts generally look better in print than on screen, and can be difficult to read at smaller point sizes.

8. Font sizes matters too

Bloggers as well as website designers choose large sized fonts (compared to the main content) to show article title's, headings, sub headings, menu's etc - just to make it eye catching. Because obviously, it's the larger font that drags the readers/users attention at first sight. So, be wise in choosing the correct font size (large, medium, small) to different functions of your UI design.

9. Symbols confuse

Other than using pre-defined symbols (symbols that are universal and are well known and recognizable), using some other symbols would confuse the user in knowing what it's up to - I mean; as to what action it actually does when we go through it. So, it's not recommended to use any newly designed favicons/symbols for any action or buttons (particularly in such cases where we expect new visitors instead of frequent or same users). 

Else you will have to educate them or make them learn  for proper navigation or communication. Visuals are great but not always. Everyone won't perceive a visual in the same manner ! It depends on the user and so be careful while choosing any visual or symbol ! The below picture shows a common icon that has been used in many websites or blogs. But just imaging what would the user think whenever he/she sees the icon. What action does it relate to ? difficult to find right ?

Use the same color to each set/group of functionality, for easy understanding. Say for example use grey color to all the buttons, light brown to all the menu tabs, white blank space on locations where the user were supposed to enter details and so on. Also use unique colors (not similar to other function colors) for text or typography links - that when clicked would take the user to the concerned page. Bold lines, bold borders, bold fonts are also some ways of giving special attraction to some important parts of the design. Don't include the same color for both interactive and non-interactive features. 

10. Visuals are powerful but to a limit !

If possible, you may use images. Pictures/images do a great job. But be careful - the use of pictures as well as icons may also add visual interest to your application, but again, careful design is essential. Images can convey information more effectively without the need for text, but images are often perceived differently by different people !

11. Transfer-ability 

Try to design your interface such that same kind of procedure or steps applies to to all components of the design. Say if you use check box type of functionality for selecting an option, then better to follow the same functionality for other options of your design too - instead of making something new like drop down menu etc.

Anyway; the most important principle of interface design is 'simplicity'. A little forethought could help you create an interface that looks simple to use. Also, from an aesthetic standpoint, a clean, simple design is always preferable.

12. Include status of user action and acknowledge 

For the action of the user, say for the case of online movie booking example, something like - 

"Thank you for booking your ticket, your ticket has been confirmed.  

Details of booking

Name :

Cost :

Class : balcony

show : xyz

date : 

time :

A mail has been sent to your mail ID and a sms will be sent to your number soon. Happy watching !"

Something like this (and a feedback form) will do a great job for users. This kind of warm interface applies only when working in stationary UID (desktop mode), and if it's mobile type, then reduce the details and keep all acknowledgments short and brief.

13. Sequencing - sliding visuals

Sequenced sliding visual pictures that would probably give a brief overview of all the categories of the website or any other UI for that matter; have been gaining popularity these days and of course they are much appealing to users.

14. Tolerable interface ?

Design an interface such that it can also cope the mistakes of the users without showing error. Most of the users does mistake while navigating or entering or doing something with the interface and your design should be in a position to tolerate them and guide them smoothly.

In case of UI designs where some purchasing or contributions or social works and something like these are expected, then don't forget to include some/all of these functionality in the design

1. Signin, signout for registered accounts or 'use as guest' option
2. For the case of purchase option include options like 'Email ID', 'Contact no./mobile', 'Address' (only for some cases) and Location etc. to make it more practical application.
3. Always provide the 'change/edit' option in your interface designs - especially when the user is supposed to enter some details to get some information, get something done from it

Mobile UI Interface Principles

For designing mobile UI's, or an app for mobile devices and tabs, make it as simple as possible with very few details on every interface page. Remember, there's a lot of difference between a desktop interface (called stationary) and mobile interface. All the features of the desktop system couldn't be (and preferably shouldn't be) included in mobile app format. 

The following are some of the best principles that I noted in case of mobile interface designs

1. Avoid inclusion of web page name or app name except in the main home page ! avoid including heavy logo's or heavy designs (see picture below) throughout the screen's
2. Avoid writing lengthy explanations like "welcome to the app, this app will help you ........" or something like this; like we do in normal stationary (desktop) mode. Desktop designs are alpha-numeric while mobile UI designs should preferably have pictures or tag buttons. Screen size is the big factor and of course it is the big challenge in UI designs of mobile's. You are supposed to accommodate all the details of the desktop mode in that small screen, so be creative and think alternatively in reducing the unnecessary explanations or some kind of wordings like - welcome, thanks givings etc.
3. A mobile UI or any app for that matter should be sharp, brief with very very less details but should cater the same functionality as that done by a regular website mode.
4. Optimize the number of steps or sequence
5. If working on mobile UI, then preferably make some predefined interface system such that the user need not want to type or enter much details. Mobile users really feel inconvenient in typing lengthy details in their phones. So, design a system such that some predefined or select-able option types are included - like say check boxes, buttons, tabs etc. If say you were to transfer money from any mobile app, then how about having a drop-down menu that enables selection of different denominations ranging from thousands to hundreds (already predefined) along with alternative choice of entering manually too ?. Some ideas like this (where there is little user requirement of hand-typing) are mostly recommended. 
6. As far as possible avoid scrolling feature in mobile mode. Keep everything and every detail - in the same screen without the need to scroll to see.

[The following pictures are examples of a mobile app compared to website app with screen shots]

Desktop interface of Axis bank 

Mobile interface of Axis bank 

What to include in UI Designs ?

The following list would give you an idea on what can be included in your actual UI designs

• Categories, sub headings and menu bars 
• Tab bars, buttons, dropdown menu
• List boxes, text boxes and checkboxes
• List view and tree view, 
• Tags, search bar, scroll down bar, 
• Contact page and help page
• Icons, notifications, messages etc.
• Also for selection type of UI's, include options like 'cancel', 'next', 'back', 'home', 'change selection' and other multiple selection features.
• For account type UI's, include options like 'change pass', 'forget pass', 'login', 'logout', 'profile edit' etc.

Now, we have seen the comprehensive principles of User Interface design or so called Interaction design. We will now conclude this section with design thumb rules from CEED exam point of view

Some of my own UI Design rules - for exam point pf view

1. Simple-simple-simple : keep the design as simple (yet powerful) as possible
2. The first step/screen to be shown in your design is your Home page or main page. Don't jump - showing the direct step where the function is to be started. All UI design should preferably start on a page (main page) where the user lands when he types or clicks the website or any other UI for that matter. Your navigation process should tell on how one can reach the targeted function starting from the first step itself and it should preferably the main landing page.
3. As far as possible, avoid separate sections for user registration or even sign-in's. You would be getting less time and you may be required to complete the UI design in very less screen shots. So, unless they require more than 10 slides, avoid this feature. If they demand something like say 20 slides, then in that situations, this kind of process/feature helps you utilize all 20 screens ! 
4. I never recommended coloring for any of the design sketches in my earlier posts or videos. But honestly speaking; for attempting UID kind of questions, coloring is one important phenomena that you may consider. Take it for granted; visuals (esp. unique colored boxes, details, pictures, links and so on) are more appealing & eye catching; and obviously they are easy way of making user-friendly interface. So, go for it and do include your design's with colored details. I guess, they work remarkably fine !
5. Avoid including 'scrolling feature' both horizontal and vertical scrolling (i.e user scroll down to watch the next detail in the same page) in your paper-made UI designs; both for stationary and mobile mode. It's not recommended from my side, since it doesn't give the complete details in the same page as well as it forces you to use two screens to deliver the total content of that particular page !
6. Voice control features (another mode of interface) are very good in real life UI designs, but for the exams - it's never recommended. What they expect is visual mode of interface and not other modes. So, just avoid this feature if ever some similar kind of ideas strike your mind. 
7. Avoid three dimension (3D) kind of features, make it 2D and keep it as simple as possible
8. As far as possible avoid pop-up menus
9. Concern for the alignment of the features as mentioned above with the picture
10. Avoid investing much time on website logo designs and shadings. Do these; only after you complete sketching all the screens and that too, only if time permits ! Remember - representing all your screens are more important than showing less screens (with good details) but being incomplete in design process ! 
11. Design interfaces - such that even a lay man can easily navigate through the interface system
12. Don't messup UI screens with loads of data, text, pictures and any other thing. 
13. Leave some negative space. Negative space makes important content and functionality more noticeable as well as helps in easy understanding. Include only the information users needed and avoiding stuffing unnecessary additions. 
14. Don't forget to give outline (box type) to most of the functions or select options. Else the user might not know where to enter and what to select.
15. Avoid including advertisements while concentrating on UI designs for exam.

If you are much interested regarding this subject (UI design) and wants to learn about UI designs beyond what I have explained above, then you may refer to the following referral links (some of them are downloadable) catering both stationary as well as mobile UID with relevant guides.

• http://en.wikipedia.org/wiki/Principles_of_user_interface_design
• http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
• http://www.ambysoft.com/essays/userInterfaceDesign.html
• http://www2.fiit.stuba.sk/~bielik/courses/psi-slov/material/ui-design.pdf
• http://www.itu.dk/people/slauesen/UID/UIDpre.pdf
• http://theomandel.com/wp-content/uploads/2012/07/Mandel-GoldenRules.pdf
• http://ifs.host.cs.st-andrews.ac.uk/Books/SE7/Presentations/PDF/ch16.pdf
• http://www.iaeng.org/publication/WCECS2009/WCECS2009_pp236-241.pdf
• http://www.usabilityresources.net/User%20Interface%20Design%20for%20Mobile%20Devices.pdf
• https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf

Like Stuff You Look blog on Facebook page to get connected with latest posts.