5/27/2020

4.3 Pemodelan User Interface Design

UML based Software Analysis and Design

(Wahono, 2009)

1. Systems Analysis 2. Systems Design

1.1 Identifikasi Proses Bisnis 2.1 Pemodelan Class Diagram

dengan Use Case Diagram
2.2 Pemodelan User Interface
1.2 Pemodelan Proses Bisnis Design
dengan Activity Diagram atau
BPMN
2.3 Pemodelan Data Model
1.3 Realisasi Proses Bisnis
dengan Sequence Diagram 2.4 Pemodelan Deployment
(Boundary - Control - Entity) Diagram

1
 5/27/2020

4.3.1 User Interface Concepts

Philosophy and Principles

• Interface design is an art
• Balance between
• Making the interface useful and
• Presenting too much information

• Principles for User Interface Design:

1. Layout: Consistent use of screen area
2. Content awareness: Users know where they are
3. Aesthetics: White space vs. functionality
4. User experience: Ease of use vs. learning curve
5. Consistency: User can predict what will happen for
each action
6. Minimal user effort: Simple to use, three click rule
4

2
 5/27/2020

1. Layout Concepts
• The screen is often divided into three boxes
1. Navigation area (top)
2. Status area (bottom)
3. Work area (middle)
• Information can be presented in multiple areas, like
areas should be grouped together
• Areas and information should minimize user movement
from one to another
• Ideally, areas will remain consistent in:
• Size, Shape, Placement for entering data, Reports presenting
retrieved data
• Biggest Problem:
• Too much information to process
• Provide a logical structure
• Chronological
• Most used to least used
• General to specific
5

Layout Example
System
Navigation

Report and
form area

3
 5/27/2020

2. Content Awareness
• Make the user aware of the content without
even knowing it

• All interfaces should have titles

• Menus should show

• where you are
• where you came from to get there

3. Aesthetics
• Interfaces need to be functional and inviting to use
• Pleasing to the eye
• Avoid squeezing in too much
• Particularly for novice users
• Experienced users can handle more info
• Design text carefully
• Be aware of font and size
• Avoid using all capital letters
• Colors and patterns should be used carefully
• Test quality of colors
• Try the interface on a monochrome monitor
• Use colors to separate or categorize items
• Don't rely on color alone to convey meaning

4
 5/27/2020

4. User Experience
• How easy is the program to learn?

• How easy is the program to use for the expert?

• Consider shortcuts for the expert

• Some applications are used by many people

• But not often by any of them  Focus on easy learning

• Some applications used frequently

• By the same people  Focus on ease of use

5. Consistency
• Lets users predict what will happen
• Reduces learning curve
• Considers items within an application and
across applications (Windows API)
• Pertains to many different levels
• Navigation controls
• Terminology
• Same word  same meaning
• Report and form design

10

10

5
 5/27/2020

6. Minimize Effort
• Three click rule
• Users should be able to go from the main menu to
the information they want
• in no more than three clicks or keystrokes

11

11

4.3.2 Process of User Interface Design

12

12

6
 5/27/2020

Five Step Process

1. Look at use cases and sequence diagrams
• Develop use scenarios:
• How will the users use the interface
• ID common user actions
2. Develop Window Navigation Diagram (WND)
3. Design Interface Standards
• Basic design elements upon which interfaces are
designed
4. Create Interface Design Prototype
• One for each interface in the system
• Use real use cases
5. Perform interface evaluations
• Are the interfaces ok?

13

13

Interface Evaluation

14

14

7
 5/27/2020

1. Use Scenario Development

• Outline of steps users use to perform their
work

• Presented in a simple narrative

• Document the most common cases so

interface designs will be easy to use for those
situations

15

15

2. Interface Structure Design

• Window navigation diagram (WND)
• Shows how all screens, forms, and reports are
related
• Shows how user moves from one to another
• Like a state diagram for the user interface
• Boxes represent components
• Arrows represent transitions
• Stereotypes show interface type

16

16

8
 5/27/2020

Window Navigation Diagram

17

17

3. Interface Standards Design

• The basic elements that are common
across
• Screens
• Forms
• Reports

• Interface metaphor
• A concept from the real world
• Used as a model for the computer system
• Desktop, checkbook, shopping cart

18

18

9
 5/27/2020

4. Interface Elements
• Interface objects
• Building blocks of the interface
• Give each object an understandable name
• Understandable names are better than precise names
• Interface actions
• Navigation and command
• Menu, buttons, drop-down lists
• Grammar
• Buy vs. purchase
• Modify vs. change
• Interface icons
• Represent interface objects & actions
• Interface templates
• Templates for screens, forms, reports

19

19

4. Interface Design Prototyping

• A mock-up or simulation of screen, form, or
report

• Common methods include

• Paper Forms
• Storyboarding
• HTML
• Language

20

20

10
 5/27/2020

Storyboard Example

21

21

5. Interface Evaluation Methods

• Understand how to improve the interface
• Should be done before system is finished
• Heuristic evaluation
• Check the prototype
• Design by checklist
• At least three people should participate
• Walkthrough evaluation
• Walk users through the system
• Team simulates movement through components
• Interactive evaluation
• Use prototype
• User tries out the system with a team member present
• Formal usability testing
• Expensive
• Detailed use of special lab testing

22

22

11
 5/27/2020

4.3.3 Navigation Design

23

23

Basic Principles
• Assume users:
• Have not read the manual
• Have not attended training
• Do not have external help readily at hand

• Controls should be:

• Clear and understandable
• Placed in an intuitive location on the screen
• Anticipate what the user will do

24

24

12
 5/27/2020

Basic Principles
• Prevent mistakes
• Limit choices
• Never display commands that can’t be used
• Confirm actions that are difficult or impossible to undo

• Simplify recover from mistakes

• No matter how hard you try, users will make mistakes
• If possible:
• Have an "undo"
• Transaction rollbacks
• Automatic backups

• Use consistent grammar order

• Normally specify an Action and an Object
• Can use Action-Object, or Object-Action
• Windows uses Object-Action (cut and paste)
• Whatever you choose, it should be used consistently

25

25

Types •of Navigation Control

Languages
• Command language
• User enters commands using special language
• UNIX, DOS, SQL, etc.
• Hard to learn, fast and easy to use
• Natural language
• Easy to learn
• Slow and imprecise

• Menus
• Generally aim at broad shallow menus
• Consider using “hot keys”

• Direct Manipulation
• Used with icons to start programs
• Used to shape and size objects
• May not be intuitive for all commands
26

26

13
 5/27/2020

Message Tips
• Should be clear, concise, and complete
• Should be grammatically correct and free of jargon
and abbreviations (unless they are the users)
• Avoid negatives and humor

27

27

Exercise: User Interface Design

1. Lihat kembali Activity Diagram, Use Case
Diagram, Sequence Diagram dan Class
Diagram yang telah anda buat
2. Lanjutkan dengan membuat User Interface
Design dengan menggunakan Java Frame
dengan Netbeans
3. User Interface Design diekstraksi dari Entity
Class

28

28

14