2. 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
3. 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
4. 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
5. Macro level design process
The class
interacts with a
human actor
Zoom in by utilizing
sequence or collaboration
diagrams
Identify the interface
Next class objects for the class
refine and
iterate
The class
Define the relationships doesn’t
among the view objects interacts with
the human
actor
6. Relationship among view objects,
business objects, access objects
View objects
Business objects
Access objects
7. Micro level design process
Apply micro level UI
design rules and GUI
guidelines to each
interface object identified
to develop the UI
Next interface
objects refine
and iterate
Done
8. 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
9. Design rule 2
• Making the interface transparent and natural
• Application of corollary 4
10. 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
11. Ways to put users in control
• Making the interface forgiving
• Make the interface visual
• Provide immediate feedback
• Avoid modes
• Make the interface consistent
12. Making the interface forgiving
• Users action must be reversible
– Physical (pointing to wrong command)
– Mental (wrongly deciding to select data or
command)
13. Make the interface visual
• Interface must provide list of items, instead of
users to remember all choices
15. 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
16. Make the interface consistent
• User can predict the system, by developing
consistent UI
17. 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)
18. 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
19. 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
20. 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
21. 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
22. Guidelines for designing application
window
• application window consists of
– Frame
– Title bar
– Scroll bar
– Menu bar
– Tool bar
– Status bar
– Drop down menus
23. 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
24. 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
25. 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
26. Prototyping the user interface
• Encourages incremental development
approach
• Used for better understanding
27. Steps in Prototyping user interface
• 3 steps
Create user interface
controls
Associate actions to
the user interface
controls and their
events
Test/debug
done