Human Impact of UI Design Paradigms
(PART 1 – Overview)
Robert Ritchey and Ruben Campos
CS575 - Human Issues in Computing
CSULA Spring 2006
Purpose/Goal
Analyse the impact that different GUI
designs have on both users and software
developers
CS575 - Human Issues in Computing
Spring 2006
Strategy
show the history of user interfaces
discuss different types of User Interfaces
how they are different
how they are used
how they are implemented
CS575 - Human Issues in Computing
Spring 2006
Presentation Schedule
First session – Intro
History
Modern User Interfaces
Second Session - demos/analysis of different
types
Impacts on User Behaviour patterns
Impacts on Software Design/Architecture
Third Session – Comparative Analysis
CS575 - Human Issues in Computing
Spring 2006
Definition of UI
For our purpose, user interface means
graphical user interface.
types that we will be discussing
are:desktop, web, kiosk and mobile
CS575 - Human Issues in Computing
Spring 2006
History of UI
Batch – punch cards
Text Based
GUI based
Internet Driven
CS575 - Human Issues in Computing
Spring 2006
Batch and Text
Text
Punch cards
Graphical User Interface
Apple
BeOS
Xerox Star
Windows
Modern Interfaces
Apple’s Aqua
Windows XP
CDE -- Sun Solaris
KDE
Gnome
Timelines
History of GUI
UI development
Computer History
CS575 - Human Issues in Computing
CSULA Spring 2006
Modern UI Technologies
Most modern UI technologies are
graphic centric
Graphical User Interface (GUI) is the
most prevalent UI Style today
A GUI attempts to mimic real world
human-object interactions
A GUI can be found in a variety of
computers and/or devices
CS575 - Human Issues in Computing
CSULA Spring 2006
Devices that use GUI
PC/Laptop
Kiosk
ATM
Mobile
Home Appliances
Vehicles
CS575 - Human Issues in Computing
CSULA Spring 2006
Some Modern GUI Categories
Desktop Application
Web Browser Application
Mobile Application
Kiosk Application
CS575 - Human Issues in Computing
CSULA Spring 2006
Desktop Application
Definition – Software that runs within the context of
an Operating System’s Window Environment.
Attributes
Highly Dependent on Operating System
Note – Even Java needs an OS specific Runtime Environment
Access to local OS/Hardware Resources
Runs within OS Window System
Microsoft Windows
Unix-Based X Windows
Stand-Alone or Client/Server
CS575 - Human Issues in Computing
CSULA Spring 2006
Desktop GUI Characteristics
Inherits OS Window Functionality
Mimics Human/Object Interaction
Icons to Identify Object
Actions on Objects
Point, Choose, Hold, Move, Activate objects
Rich UI Components
Elaborate Toolbars
Icons represent typical Application functions
Custom toolbars
Comprehensive Menu system
General Menu
Context Sensitive Menu
Floating UI Components
CS575 - Human Issues in Computing
CSULA Spring 2006
Example Desktop GUI
Windows Explorer
Window
General Menu
Toolbar
Context Sensitive
Menu
Icons mimic real objects
CS575 - Human Issues in Computing
CSULA Spring 2006
Typical User Actions on Desktop UI
Mouse
Click to Select object
Double Click to cause initiate certain behavior on an object
Hold Mouse Button to create an object handle for “drag and
dropping”
Keyboard
Alt, Ctl, Shift, and Function keys to create commands
Remnants of Legacy Command-Driven User Interfaces
Used as shortcuts to Menu Items
CS575 - Human Issues in Computing
CSULA Spring 2006
Web Browser Application
Definition – Software that runs within the context of
a Web Browser.
Attributes
Distributed Application
Limited Access to Local OS Resources
Access to Server Resources
Runs within Browser
CS575 - Human Issues in Computing
CSULA Spring 2006
Web Browser App GUI Characteristics
Easy consolidation of dispersed UI objects
Browser paradigm is hyperlink centric
Clickable icons/text
Actions on Objects more limited
Holding and Moving objects more challenging
Simulate some Desktop Application GUI behavior via AJAX,
or plugins such as Flash UI Components
Form Component is key to processing data
Simple Toolbars
Simple Menu Systems
Limited mobility of UI Components
CS575 - Human Issues in Computing
CSULA Spring 2006
Example Web Brower Application GUI
Yahoo Home Page
Typical Web Browser Application GUI objects
URL
Forms
Simple Menus
CS575 - Human Issues in Computing
CSULA Spring 2006
Typical User Actions on Web Browser App UI
Mouse
Hyperlink Navigation
Button Click for Form Submission
Rare Double Clicks
Rare “drag and dropping”
Keyboard
Mostly used for data entry
Command Keys are seldom used because a Web Browser
App UI is more mouse driven
Further away from Legacy Command-Driven User Interfaces
CS575 - Human Issues in Computing
CSULA Spring 2006
Kiosk Application
Definition – Software that typically runs in a public
setting for either informational or commercial
purpose
Attributes
Comprised of a Touch Sensitive Terminal
Can run locally or over the Internet
CS575 - Human Issues in Computing
CSULA Spring 2006
Kiosk GUI Characteristics
Typically uses touch screen as input device
Advance kiosks can also include trackballs
and keyboards
Lower rate of user errors since input devices
are simple and options are limited
Features are not as rich as Desktop or Web
Browser GUIs
CS575 - Human Issues in Computing
CSULA Spring 2006
Example Kiosk GUI
Typical Touch screen GUI
CS575 - Human Issues in Computing
CSULA Spring 2006
Typical User Actions on Kiosk UI
Touch Screen Navigation
TrackBall/Mouse
Simple Clicking
Double Clicks unlikely
Drag and Drop unlikely
Keyboard
Mostly used for entering simple search criteria
CS575 - Human Issues in Computing
CSULA Spring 2006
Mobile Application
Definition – Software that runs on mobile device that
ranges from device control software to full blown OS
software
Attributes
Hardware Constraints
Multi-tasking is difficult
Limited space for input devices
Capable of running Distributed Applications
CS575 - Human Issues in Computing
CSULA Spring 2006
Mobile Application GUI Characteristics
Simple GUI Design
Simple Menu for quick navigation
Discourage mass data entry
Discourage multi-tasking
CS575 - Human Issues in Computing
CSULA Spring 2006
Example Mobile Application GUI
Mobile Windows
Limited Screen Space
Limited Input Keys
CS575 - Human Issues in Computing
CSULA Spring 2006
Typical User Actions on Mobile App GUI
Navigation is driven by number keys
Type-Ahead text fields are utilized to minimize
typing
Quick Tasks are typical rather than full blown
projects
CS575 - Human Issues in Computing
CSULA Spring 2006
Observations
Human behavior has impacted GUI
Design
GUI Design and growing number of GUI
devices impact Human Behavior
Correlation between different GUI
designs and Human behavior has
implications
CS575 - Human Issues in Computing
CSULA Spring 2006
Future Sessions
Implications/Impact that different GUI
Designs have on humans namely:
Users
Software Engineers/Architects
Future UI Technologies and their
potential human impact
Ubiquitous paradigm?
CS575 - Human Issues in Computing
CSULA Spring 2006