Unit 5

View layer : Designing interface objects

Introduction

• UI(user interface)– Main goal of UI is to display and obtain needed

information in an accessible , efficient manner– UI design is a creative process

Designing view layer classes

• UI layer consists of – objects with which user interacts– Objects needed to manage or control UI

• Responsibility of view layer objects– Input :responding to user interaction

• Translating user’s action into an appropriate response

– Output :displaying or printing business objects

Process of designing view layer classes

• It has 4 major activities– Macro level UI design process: (identifying view layer object)

• Takes place during analysis phase• Identifying classes that interact with human actors by analysing use

cases• sequence and collaboration diagram helps to identify UI classes

– Micro level UI design activities• Designing the view layer objects by applying design axioms and

corollaries– Decide how to use and extend the components so they best support

application specific functions and provide the most usable interface• Prototyping the view layer interface

– Useful in the early design process

– Testing usability and user satisfaction – Refining and iterating the design

Zoom in by utilizing sequence or collaboration

diagrams

Identify the interface objects for the class

Define the relationships among the view objects

Next class refine and iterate

The class interacts with a human actor

The class doesn’t interacts with the human actor

Macro level design process

Relationship among view objects, business objects, access objects

View objects

Business objects

Access objects

Micro level design process

Apply micro level UI design rules and GUI

guidelines to each interface object identified

to develop the UI

Done

Next interface objects refine and iterate

Design rules 1

• Making the interface simple ( application of corollary 2)– Ex:

• Car engine is complex• But driver interface remains simple

– User must be able to work with our screen without asking much questions

– Factors affecting UI• Dead lines• Comparative evaluations• Addition features• Shortcuts

– Things to be considered while designing UI• Additional features affect performance, complexity• Fixing problem, after the release of product is difficult

Design rule 2

• Making the interface transparent and natural• Application of corollary 4

Design rule •Allowing users to be in control of the software•Application of corollary 1•User should control the software instead of software controlling the user

Ways to put users in control

• Making the interface forgiving• Make the interface visual• Provide immediate feedback• Avoid modes• Make the interface consistent

Making the interface forgiving

• Users action must be reversible– Physical (pointing to wrong command)– Mental (wrongly deciding to select data or

command)

Make the interface visual

• Interface must provide list of items, instead of users to remember all choices

Provide immediate feedback

• Users must receive the feedback immediately

Avoid modes

• Modes force the user to focus on the ways An application works, instead of on the task they want to complete

• Some of the modes– Modal dialog

• Sometimes an application needs information to continue, such as name of a file into which users want to save something

– Spring loaded modes• Users must take same action to remain in that mode• Ex: dragging mouse

– Tool driven modes• This mode have the provision to remind the user about the

mode in which they are. • Ex: drawing application. Once tool has been selected, the

mouse cursor ‘ll change to reflect the selected tool

Make the interface consistent

• User can predict the system, by developing consistent UI

Purpose of a view layer interface

• User Interface has one or more window. each window should have a clear purpose– Forms and data entry windows– Dialog boxes– Application window (main window)

Guideline for designing forms and data entry windows

• Issues to be considered while designing the form– What kind of information the user works with and why– Do user need access to all information in a table– In what order the rows has to appear

• Typical data entry tasks includes– Row navigation– Adding and deleting rows– Changing data in rows– Saving and abandoning changes

Cont..

• Layout– The layout determines how successfully users can enter

the data– guidelines

• Start the designing from the existing paper form• Add smaller windows to main window, if main window contains

too much information• Mandatory information must present at the top left • Align fields at their left edges• Arrange controls in a sequence users expect to enter data• Put similar or related information together

Guideline for designing Dialog boxes and error messages

• Define the title text to be the name of te associated command

• Error message– Message should be

• positive• Constructive• Brief and meaningful• Orient the controls in the direction people ‘ll read

Guideline for command buttons layout

• Major command buttons can be paced at the upper right border of the dialog box or lined up across the bottom of the dialog box

• Ok and CANCEL buttons can be grouped together

• A command button providing support to other command buttons can be grouped

Guidelines for designing application window

• application window consists of– Frame– Title bar– Scroll bar– Menu bar– Tool bar– Status bar– Drop down menus

Cont.

• Guidelines for menus– File menu– Edit menu– View menu

• zoom

– Window menu• Managing window within main works space

– Help menu• Tool bar and status bar

Guidelines for using colors

• Soothing ,cool and neutral color like blue can be used

• To project any field, color can be used to stand out from other fields

• For readability, black is a standard color• Meaning can be associated with color• Color blind people can be considered . Use

animated buttons

Guidelines for using Fonts

• Consistency• Avoid courier• Avoid using all upper case• Avoid mixing more than 2 fonts• Use commonly installed fonts• Use bold for control labels

Prototyping the user interface

• Encourages incremental development approach

• Used for better understanding

Steps in Prototyping user interface

• 3 stepsCreate user interface

controls

Associate actions to the user interface controls and their

events

Test/debug

done