Human Impact of UI Design Paradigms

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

2. Purpose/Goal • Analyse the impact that different GUI designs have on both users and software developers CS575 - Human Issues in Computing Spring 2006

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