ANALISIS & PERANCANGAN

SISTEM INFORMASI
Bahasan: Pemodelan User Interface Design
Oleh: Tim Dosen APSI

Prodi Teknik Industri

INSTITUT TEKNOLOGI NASIONAL BANDUNG
4.3 Pemodelan User Interface Design

2
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

3
4.3.1 User Interface Concepts

4
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

5
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
6
Layout Example
System
Navigation

Report and
form area

7
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

8
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

9
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

10
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

11
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

12
4.3.2 Process of User Interface Design

13
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?
14
Interface Evaluation

15
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

16
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

17
Window Navigation Diagram

18
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

19
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
20
4. Interface Design Prototyping
• A mock-up or simulation of screen, form, or
report

• Common methods include

• Paper Forms
• Storyboarding
• HTML
• Language

21
Storyboard Example

22
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
23
4.3.3 Navigation Design

24
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

25
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
26
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
27
 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

28