- What is User Interface
- Need for a Good User Interface
- Types of User Interface
- Types of Interactions
- More Interactive types
- Role of Aesthetics, Efficiency, Usability in UI
What is User Interface
User Interface (UI) is a space where interactions between humans and machines occur. In IT world, machines generally refer to computers. Hence it is also known as HCI (Human Computer Interaction).
For a computer program, the user interface refers to the graphical, textual and auditory information the program presents to the user.
It also includes below user actions that are invoked to control the program:
- Keyboard keystrokes / Mouse movements
- Voice commands
User Interface involves both hardware and software components that provide means of :
→ Input : Allows users to perform / trigger operations
→ Output : Allows system to indicate effects of user operations
Need for a Good User Interface
The look and feel that a User Interface provides is one of the major factors that decide the User Satisfaction and User Experience
The importance of good User Interface Design can be the difference between product acceptance and rejection in the marketplace.
For most of the end users, User Interface is the System.
A cumbersome, not easy to learn / use UI, in an otherwise excellent product could result in the failure of that product.
Good User Interface can make a product easy to understand and use, which results in greater user acceptance.
Poor user interface is the reason why many software systems are never used.
A poorly designed interface can cause a user to make catastrophic errors.
An example from real world:
The "Butterfly Ballot" used during the 2000 U.S. presidential election in Palm Beach, Florida was a fiasco, primarily attributed to the design of confusing user interface.
Had the designers of that ballot understood the basics of user interface design, there may very well have been a different outcome to the election.
Butterfly Ballot UI Design
Types of User Interface
The most common types of User Interfaces are listed below:
→ Graphical User Interface (GUI)
→ Web User Interface (WUI)
→ Command-line User Interface (CUI)
However, other types of interfaces also exist:
→ Touch User Interface
→ Voice User Interface
… and few more
Graphical User Interface (GUI)
One picture is worth a thousand words.
GUI typically allows user interaction with the system through the use of visual elements, such as, forms, windows, buttons, tables, menus, etc.
This kind of interface takes advantage of the computer's graphics capabilities to make the program easier to use.
Well-designed graphical user interfaces can free the user from learning complex command languages.
Basic Components of a GUI:
Pointer - A symbol that appears on the display screen and that you move to select objects and commands. Usually, the pointer appears as a small angled arrow.
Text-processing applications, however, use an I-beam pointer that is shaped like a capital I.
Pointing device - A device, such as a mouse or trackball, that enables you to select objects on the display screen.
Icons - Small pictures that represent commands, files, or windows. By moving the pointer to the icon and pressing a mouse button, you can execute a command or convert the icon into a window. You can also move the icons around the display screen as if they were real objects on your desk.
Windows - You can divide the screen into different areas. In each window, you can run a different program or display a different file. You can move windows around the display screen, and change their shape and size at will.
Menus - Most graphical user interfaces let you execute commands by selecting a choice from a menu.
Toolbars - Represent a group of buttons that perform related functionality and generally have icons over them instead of text.
Benefits of a GUI:
> Increase in productivity
> Decrease in training cost and support line cost (saving time and money)
> Increase in customer satisfaction (aggravation and frustation are reduced)
> A general rule of thumb: Every dollar invested in usability returns $10 to $100 (IBM, 2001)
Attributes of a good GUI:
> Seeing and Promting (vs. Remembering and Typing)
> WYSIWYG (What You See Is What You Get)
> Simple and Helpful
> Universal Commands
Web User Interface
WUI is a subset of GUI
WUI accepts input and provide output by generating web pages which are transmitted via the Internet and viewed by the user using a web browser program.
Benefits and Attributes that apply to GUI also apply to a WUI
Command Line User Interface
In a CUI:
> The user provides the input by typing a command string with the computer keyboard
> The system provides output by printing text on the computer monitor.
Used by programmers and system administrators, in engineering and scientific environments, and by technically advanced personal computer users.
Benefits of CUI:
- Since the commands available in command line interfaces can be numerous, complicated operations can be completed using a short sequence of words and symbols.
Drawbacks of CUI:
- More learning time is required for numerous commands available on CUI as command words are not easily discoverable and not mnemonic.
Two problems must be addressed in interactive systems design
1) How should information from the user be provided to the
2) How should information from the computer system be presented
to the user?
User interaction and information presentation may be integrated through a coherent framework such as a User Interface.
General Interaction - Guidelines
> Be consistent.
> Offer meaningful feedback.
> Ask for verification of any non-trival destructive action.
> Forgive mistakes and permit easy reversal of most actions.
> Reduce the amount of information that must be memorized between actions.
> Categorize activities by functions and organize screen geograpy accordingly.
> Use simple action verbs or short very phrases to name commands.
Types of Interaction
• It is one of the earliest forms of interaction style
• Generally used by expert users who type in commands and possibly some parameters that will affect the way the command is executed.
•Appleals to expert users
•Generally support creation of user defined scripts or macros
•Consumes low bandwidth and hence suitable in a networked environment
•Learnability and Retention of commands is generally poor
•Not suitable for non-expert users
•Not very user friendly and hence error rates are high
•Provision of appropriate error messages is difficult because of diversity of possibilities.
Form Fill in
• This interaction sytle is sometimes also refered as Fill in the Blanks.
• Generally used by non-expert users who know very less about command language.
• Generally used when application needs to collect good amount of data from user.
• Form navigation, i.e. switching between fields is accomplished using TAB key, and ENTER key is used for submitting the form.
• Separation of data into various fields, allows its validations
•Simplifies data entry
•Shortens learning time since the fields are predefined and need only be 'recognised'.
•Guides the user via predefined rules
•Consumes screen space.
• Menu indicates a set of options displayed on a UI. Selecting a menu item would inturn execute the functionality associated with that menu item
• Menu selection can be done by clicking using a mouse, using shortcut keys or cursor keys, or even touch
• To save screen space menu items are often clustered in pull-down or pop-up menus
•Good for novice to intermediate users
•Requires less typing effort
•Allows for structured decision making
•User need not remember command names as menu provides list of valid commands to choose from
•Input parsing not required as in command line or form fill in
•Too many menu options may confuse a user rather than helping
•Generally preferred when number of choices to me made are less
•Expert users generally find it slow as compared to command line interface
•May not be suitable for small graphical displays
• In this type of interaction objects of interest are represented as distinguishable objects in the UI and are manipulated in a direct fashion.
• This style allows replacement of complex command language syntax by direct manipulation of the object of interest.
Simplest Example: DRAG and DROP
•Visual presentation of task is more appealing
•Learning time is generally faster
•The immediate feedback for user actions aids in quick detection and correction of errors
•Such interfactes are generally difficult to program
•Utilize more computer resources
•Not suitable for small graphical displays
•Spatial and visual representation is not preferred always
More User Interface types
•Conversational agent interface
•Natural language interface
•Voice user interface
•Task focused interface
… and some more
It is a type of GUI that uses touch screen as combined input and output device.
Commonly used nowadays in PCs, mobiles and self service kiosks.
Generally provides ease of input due to clearly defined menus and icons. Allows faster interaction with the system.
• Conversational agent interface
It is a type of GUI that tries to represent the computer as an animated person or character.
Example: Microsoft's Clippy, the paper clip
• Batch interface
It is a type of non interactive UI, where all the instructions for processing a job / task execution is fed in advance, and output is generated only after the processing is done.
No interaction / input is required from the user during the processing
Commonly used for maintenance / report generation kind of routine tasks that can happen without user interaction, using pre-defined steps. Batch jobs are typically triggered through schedulers during non-business hours.
• Natural language interface
This kind of interface is generally used with search engines or for content search in any application.
User types a question / query and waits for the response.
• Voice user interface
This kind of interface takes input from user verbally through voice prompts and provides output as an audio response.
It works similar to IVR (Interactive Voice Response) as encountered when calling some call center or help line numbers.
• Task focused interface
This kind of interface tries to avoid the confusion that is sometimes caused by excess information available to the user (information overload).
It simplifies the same by providing tasks on interface, rather than files and folders.
• Gesture interface
This kind of GUI captures the input from the user in the form of hand gestures or mouse gestures.
Hand gesture: Moving the finger (L → R or R → L) over touch pad allows to scroll through the photos in an album.
Mouse gesture: Drawing some simple sketch using mouse, like a circle, could help close an open active window.
Role of Aesthetics in UI
Aesthetics may be understood as that part of an application that caters to the visual or the look and feel aspect of the application.
Good aesthetics is a pre-requisite for success for any application. It accounts for feel good factor, easy interaction and end user comfort level.
Condider two pens, equally good in their functionality, i.e. writing.
One pen has a normal looking plastic body, and other has dual tone metal finish body.
Which one would you prefer...?
Good Aesthetics v/s Bad Aesthetics
If both the calculator applications below, provide exact same functionality,
which one would you prefer...?
Elements of Aesthetics
Guidelines for Aesthetic design
As good aesthetics help enhance User Experience, below points should be kept in mind when designing the same.
lGroup related items and provide visual clues to indicate groups. Separate out the groups using some line separator, frame or a tab.
lProvide clearly visible headings so as to determine the screen content at a glance.
lThe font sizes, as well as style, such as Bold or Italics, should be chosen considering the significance of the item.
lHave similar looking and properly aligned controls on all user interfaces.
lFor an application, try to limit the presentation styles (fonts, colors, etc.) to two or three. Do not overuse color.
lAllow users to visually connect to the application screen through use of appropriate graphics.
Role of Usability in UI
• Usability may be defined as:
- Ease with which a person can get familiar with an application
- Can perform tasks quickly and efficiently with least amount of training
- Is satisfied using the application
• Making an application user-friendly is in fact making it Usable.
• Usability is a non-functional requirement.
Consider below two knives:
1) Utility knife
2) Normal knife
For regular use, which one would you prefer? Why?
Benefits of Usable User Interface
- Increased user satisfaction, which translates directly to trust and loyalty.
- Increased user productivity, success, and completion.
- Reduced long-term development costs.
- Reduced training and support costs.
- Word of mouth, social media, and other free marketing.
- A higher rate of repeat customers, which improves your competitiveness
Elements of Usable User Interface
Design of a Usable user interface should take into account the following elements :
Elements of Usability in User Interface
The content being displayed through the application should be appropriate, properly organized and neatly presented.
• Response Time:
The response time of the application should be as minimal as possible. This has to be taken care for while developing the application. For web based applications running on a slow internet connection, a web page should be loaded within 20 seconds.
3. Minimal scroll:
It is preferred to have minimal scroll on the application screen. This allows users to to view appropriately grouped content at a glance (in a form / screen / page / tab, etc.) without need of scrolling up and down to relate / compare information.
4. Consistent layout:
Avoid surprises for the user. Use a consistent layout and repeat certain elements throughout the application. This helps the user pick up / learn the application faster.
5. Prominent, logical navigation:
Menus and Toolbars of an application should be suitably placed for easy access. Menu options should be limited to 10 or less. Navigation should allow user to invoke desired functionality with minimal search.
6. Cross platform / browser compatibility:
Applications preferably should be deployable across various platforms. For web based applications, some popular browsers such as IE, Mozilla Firefox, Chrome, etc. should be used for testing and determining any compatibility issues that exist.
7. Context sensitive help:
It is a form of online help that can be provided in various forms, like infotips or tooltips on mouse overs, or clicking and dragging the question button over the area where help is required.
8. Screen resolutioin:
Screen resolution for the typical computer monitor continues to increase. Considering this fact, applications should be designed nowadays for minimal resolution of 1024 x 768 pixels..
Guidelines for Usable design
Following points should be kept in mind when designing good usable User Interface:
lKeep it plain and simple, be consistent
lWith each use of system, it should become easy to use
lEvery action should have a reaction (i.e. should get response for each user action)
lThings that seem similar, should behave similarly
lApplication should be able ot provide appropriate message to the user when any error occurs, preferably with a workaround.
lKeep the user informed always (status bar, progress bar, etc.)
lShould allow for easy access to goals and its execution
lDo not make the user do any work, that can be managed by the application
lUser should control the system, and not vice versa
Elements of Usable User Interface
Elements of Efficiency in User Interface
1. Breadcrumb trail:
Breadcrumb trail is a mechanism that can be used in any desktop or web based applications. It allows the application user to quickly navigate or jump to any point along the hierarchical navigation path that led the user to the exisiting screen / page.
The content being displayed through any application, needs to be organized into sections and sub-sections. This will allow an end user to have a quick glance at the headings and quickly select what he/she wants.
Never put too much of uncategorized content that requires users to hunt for information.
3. Use Shortcuts:
Use of relavant shortcuts at appropriate screens / pages in an application helps save time and effort for the user. User can easily reach the desired section / area of application with a single click.
A consistent navigation style along with consistent look and feel in an application, reduces surprises for the user. It allows user to predict the behaviors of various controls based on prior use of application. Hence leads to faster aquaintance with the application with minimal training.
5. Site Map:
This element is particularly very useful for web based applications. With the volume of content being shared nowadays, a site map is very handy to know where the user is at the given moment w.r.t. the entire application area.