design rule 3
TRANSCRIPT
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