Unit 2 User Interface Design User interface User

Unit 2 User Interface Design

User interface • User interface is the front-end application view to which user interacts in order to use the software. • User can manipulate and control the software as well as hardware by means of user interface. • Today, user interface is found at almost every place where digital technology exists, right from computers, mobile phones, cars, music players, airplanes, ships etc. • User interface is part of software and is designed such a way that it is expected to provide the user insight of the software. UI provides fundamental platform for human-computer interaction. • UI can be graphical, text-based, audio-video based, depending upon the underlying hardware and software combination.

The user interface • System users often judge a system by its interface rather than its functionality • A poorly designed interface can cause a user to make catastrophic errors • Poor user interface design is the reason why so many software systems are never used

• Theo Mandel [MAN 97] coins three “golden rules”: • 1. Place the user in control. • 2. Reduce the user’s memory load. • 3. Make the interface consistent.

Principles of user interface • Mandel [MAN 97] defines a number of design principles that allow the user to maintain control: • 1. Place the user in control. • 2. Reduce the user’s memory load. • 3. Make the interface consistent.

Characteristics of a user interface • Speed of learning. A good user interface should be easy to learn. Speed of learning is hampered by complex syntax and semantics of the command issue procedures. • A good user interface should not require its users to memorize commands. Neither should the user be asked to remember information from one screen to another while performing various tasks using the interface.

Characteristics of a user interface • Speed of use of a user interface is determined by the time and user effort necessary to initiate and execute different commands. • For example, an interface that requires users to type in lengthy commands or involves mouse movements to different areas of the screen that are wide apart for issuing commands can slow down the operating speed of users.

Characteristics of a user interface • Speed of recall. Once users learn how to use an interface, the speed with which they can recall the command issue procedure should be maximized. • Error prevention. A good user interface should minimize the scope of committing errors while initiating different commands

Characteristics of a user interface • Attractiveness. A good user interface should be attractive to use. An attractive user interface catches user attention and fancy. In this respect, graphics-based user interfaces have a definite advantage over text-based interfaces. • Consistency. The commands supported by a user interface should be consistent. Thus, consistency facilitates speed of learning, speed of recall, and also helps in reduction of error rate.

Characteristics of a user interface • Support for multiple skill levels: • This is necessary because users with different levels of experience in using an application prefer different types of user interfaces. • Error recovery (undo facility). While issuing commands, even the expert users can commit errors. • Therefore, a good user interface should allow a user to undo a mistake committed by him while using the interface.

Characteristics of a user interface • Feedback. A good user interface must provide feedback to various user actions. Especially, if any user request takes more than few seconds to process, the user should be informed about the state of the processing of his request. • User guidance and on-line help. Users seek guidance and on-line help when they either forget a command or are unaware of some features of the software.

Design process

INTERFACE DESIGN ACTIVITIES • 1. Establish the goals and intentions for each task. • 2. Map each goal and intention to a sequence of specific actions. • 3. Specify the action sequence of tasks and subtasks, also called a user scenario, as it will be executed at the interface level. • 4. Indicate the state of the system; that is, what does the interface look like at the time that a user scenario is performed? • 5. Define control mechanisms; that is, the objects and actions available to the user to alter the system state. • 6. Show control mechanisms affect the state of the system. • 7. Indicate how the user interprets the state of the system from information provided through the interface.

On-line Help System • Users expect the on-line help messages to be tailored to the context in which they invoke the “help system”.

Command language based interface • CLI provides a command prompt, the place where the user types the command feeds to the system. The user needs to remember the syntax of command its use. • Based on any command language which the user can use to issue the commands. • User is required to learn and type commands • Complex • Difficulty in learning complex and large commands • Needs lots of practice • Users make errors in command. An error detection and recovery system is required • System interaction is through a keyboard so typing ability is required

Graphical user interfaces • Graphical User Interface provides the user graphical means to interact with the system. GUI can be combination of both hardware and software. Using GUI, user interprets the software. • Typically, GUI is more resource consuming than that of CLI. With advancing technology, the programmers and designers create complex GUI designs that work with more efficiency, accuracy and speed.

GUI elements

GUI advantages • They are easy to learn and use. – Users without experience can learn to use the system quickly. • The user may switch quickly from one task to another and can interact with several different applications. – Information remains visible in its own window when attention is switched. • Fast, full-screen interaction is possible with immediate access to anywhere on the screen

GUI advantages • In a GUI multiple windows with different information can simultaneously be displayed on the user screen. • Iconic information representation. • dragging an icon. • In a GUI, a pointing device such as a mouse can be used for issuing commands

Application specific GUI components • 1. Application Window • 2. Dialogue Box - It is a child window that contains message for the user and request for some action to be taken. For Example: Application generate a dialogue to get confirmation from user to delete a file.

• 3. Text-Box • 4. Buttons - They imitate real life buttons and are used to submit inputs to the software. • Radio-button • Check-box • List-box -

• List-box • Provides list of available items for selection. More than one item can be selected.

Menu systems • Users make a selection from a list of possibilities presented to them by the system • The selection may be made by pointing and clicking with a mouse, using cursor keys or by typing the name of the selection • May make use of simple-to-use terminals such as touchscreens

Advantages of menu systems • Users need not remember command names as they are always presented with a list of valid commands • Typing effort is minimal • User errors are trapped by the interface • Context-dependent help can be provided. The user’s context is indicated by the current menu selection

Scrolling menu

Walking menu

Window Management System (WMS) • A graphical user interface typically consists of a large number of windows. • Therefore, it is necessary to have some systematic way to manage these windows. • Most graphical user interface development environments do this through a window management system (WMS). • A window management system is primarily a resource manager. • It keeps track of the screen area resource and allocates it to the different windows that seek to use the screen.

Window Management System (WMS

Window Manager • Window manager is the component of WMS with which the end user interacts to do various window-related operations such as window repositioning, window resizing, iconification, etc. • The window manager is built on the top of the window system in the sense that it makes use of various services provided by the window system. • The window manager is responsible for managing and maintaining the non-client area of a window. • Window manager manages the real-estate policy, provides look and feel of each individual window.

Types of widgets (window objects) • • • Label widget. Container widget. Pop-up menu Pull-down menu. Dialog boxes Push and Radio buttons