ICT103

System Analysis and

Lecture 9– Designing user and systems

Adopted from:
Satzinger, J., Jackson, R., and Burd, S., 2016, System
Analysis and Design in a Changing World 7th ed.
Cengage Learning
Explain the concepts of user experience, user interface,
and usability
Describe important characteristics of human interface
objects that affect usability
Discuss the important principles of navigation through
a software application
Explain how a storyboard can be used to help with
user-interface design
Describe important guidelines in user-interface design
for desktop applications
Describe important guidelines in user-interface design
for mobile devices
User interface design must consider the entire
user experience
Good user interfaces are based on good design
principles – visibility, affordance, feedback, etc.
Poorly designed user interface can make the
information system unusable
Story boards are a powerful tool for UI design
User Interface – inputs and outputs that directly
involve a human user/actor
A dialog goes on between actor and system
User interface design must focus on entire User
Experience (Human Computer Interaction –HCI)
Called User-Centered Design
Focus early on users and their work
Evaluate designs to ensure usability
Use iterative development
Usability is the objective
Human-Interface Objects
Affordance – the appearance of the object suggests
its function
Human-Interface
Objects
Visible with Feedback
Both visible on the
display and provides a
response to a user action
(feedback)
Good examples – radio
buttons and check boxes
Consistency
Across platforms
Within a suite of applications
Within a particular application
Continuity
Consistency across releases over time
Windows 7

Windows 8
Discoverability
To help users discover “hidden” features or objects
Active discovery – mouse hovers, pop-ups, tool tips
Discoverability (cont)
Visual Diagrams to guide users
Closure
Closure on Dialogues – End of a series of actions
Protect user’s work – at end and for partially
complete work
Provide undo to reverse actions
Readability and Navigation
Readable text for all users (type, size, color)
Readability and Navigation (cont)
Clear navigation
Reverse navigation – a way out – breadcrumbs
navigation
Usability and Efficiency
Shortcut keys for experienced users
Meaningful error messages
Simplicity – KISS
Use Cases and the Menu Hierarchy
We design use case by use case
Menus are a typical way to organize access to use
case functionality
Different types of users might have different
menus
Useful to design an overall menu hierarchy and
then subsets for different users
Once the hierarchy is established, menus can be
implemented in a variety of ways
Grouped by Actor and Subsystem
Grouped into First Cut Menu Hierarchy
SSD defines input messages, which indicates what
forms
First draft of RMO Customer Form from SSD
information
For each use case, think of the natural flow of a
dialog between user and computer
Based on the flow of activities in use case
description and/or the system sequence diagram
Use natural language to emphasize feedback to
user
Create a storyboard of the dialog, showing the
sequence of sketches of the screen each step of
the dialog. (storyboarding)
Review the storyboard with users
Is the system a custom application or browser
based?
What kinds of devices will the user-interface need
to support?
What operating systems will the user-interface run
on?
Desktop and Laptop UIs
Layout and Formatting
Purposeful designs, location and grouping, no sloppiness or errors
Poorly designed form –
Data Entry
Text box, list box, combo box, radio buttons, check boxes
Include online editing to minimize errors
Navigation and Visibility
Minimize, maximize, close, scroll bars, resize
More navigation controls would help
Layout and formatting
Various browser default settings
Impact of online advertising
Data entry and user actions – client side programming
Navigation and visibility – complete yet simple
Only advertising on this page
RMO shopping cart checkout
Simple, easy to read
Challenges
Small screen size,
small keyboards and
touch screens, limited
network capacity, app
design guidelines and
toolkits
Layout and formatting
Rotating view, resizing, visible navigation, scrolling
Data entry and user actions
Fat finger and accidental touches
Navigation and visibility
Show site map
Use action bar
Visual clues
Back button
Sample
prototype for
RMO home page
display
Similar to smartphones, except more real estate to
display
User interfaces involve direct user interaction with the
system.
The design of the user interface has a long history as
human computer interaction (HCI) and relies on user-
centered design, which focuses early on users,
evaluates designs to ensure usability, and uses iterative
development
Metaphors are used to think about the nature of the
user interface, and they include direct manipulation,
desktop, document, and dialog metaphors.
Key user interface concepts include affordance and
visibility for controls
Other key principles include consistency, shortcuts,
feedback, dialog closure, error handling, and reversal
of actions
Use cases are organized into one or more menu
hierarchies to arrange functionality for users
Dialogs and storyboards are used to design the
interaction for each use case based on use case flow of
activates and system sequence diagrams
Guidelines are available for designing for Windows,
Web browsers, and Handheld devices
A technique that shows a sequence of sketches of the
display screen during a dialogue:
a. Breadcrumbs
b. Storyboarding
c. Prototyping
d. Dialogs
The ease with which a system is easy to learn and to use
refers to:
a. Affordability
b. Usability
c. Consistency
d. Continuity
________ is where the control on a screen looks like or has
characteristic that indicates the function that it performs.
a. Affordability
b. Usability
c. Consistency
d. Continuity
Mobile responsive means that the application may have
been designed primarily for a desktop system, but it also
works well on a small mobile device. True/False
Visibility means that the control is not hidden or in a
location that it will be noticed. True/False