1. Human Impact of UI Design Paradigms
(PART 1 – Overview)
Robert Ritchey and Ruben Campos
CS575 - Human Issues in Computing CSULA Spring 2006

2. CS575 - Human Issues in Computing 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

3. 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

4. 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

5. 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

6. 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

7. Batch and Text
Text
Punch cards

8. Graphical User Interface
Apple
BeOS
Xerox Star
Windows

9. Modern Interfaces
Apple’s Aqua
Windows XP
CDE -- Sun Solaris
KDE
Gnome

10. CS575 - Human Issues in Computing CSULA Spring 2006
Timelines
History of GUI
UI development
Computer History
CS575 - Human Issues in Computing CSULA Spring 2006

11. 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

12. 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

13. Some Modern GUI Categories
Desktop Application
Web Browser Application
Mobile Application
Kiosk Application
CS575 - Human Issues in Computing CSULA Spring 2006

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. CS575 - Human Issues in Computing CSULA Spring 2006
Example Kiosk GUI
Typical Touch screen GUI
CS575 - Human Issues in Computing CSULA Spring 2006

25. 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

26. 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

27. 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

28. Example Mobile Application GUI
Mobile Windows
Limited Screen Space
Limited Input Keys
CS575 - Human Issues in Computing CSULA Spring 2006

29. 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

30. 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

31. 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