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

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

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

CS575 - Human Issues in Computing CSULA Spring 2006 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 General Menu Toolbar Context Sensitive Menu Icons mimic real objects Window

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 Simple Menus Forms

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?