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

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

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

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

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

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

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

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

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

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

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

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

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

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