human impact of ui design paradigms

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/GoalAnalyse the impact that different GUI designs have on both users and software developers


Strategyshow the history of user interfacesdiscuss different types of User Interfaces

how they are differenthow they are usedhow they are implemented


Presentation ScheduleFirst session – Intro

HistoryModern User Interfaces

Second Session - demos/analysis of different types

Impacts on User Behaviour patternsImpacts on Software Design/Architecture

Third Session – Comparative Analysis


Definition of UIFor our purpose, user interface means graphical user interface.types that we will be discussing are:desktop, web, kiosk and mobile


History of UIBatch – punch cardsText Based GUI basedInternet Driven


Batch and TextTextPunch cards


Graphical User InterfaceAppleBeOSXerox StarWindows


Modern InterfacesApple’s AquaWindows XPCDE -- Sun SolarisKDEGnome


TimelinesHistory of GUIUI developmentComputer History


Modern UI TechnologiesMost modern UI technologies are graphic centricGraphical User Interface (GUI) is the most prevalent UI Style todayA GUI attempts to mimic real world human-object interactionsA GUI can be found in a variety of computers and/or devices


Devices that use GUIPC/LaptopKioskATMMobileHome AppliancesVehicles


Some Modern GUI Categories

Desktop ApplicationWeb Browser ApplicationMobile ApplicationKiosk Application


Desktop ApplicationDefinition – Software that runs within the context of an Operating System’s Window Environment.Attributes

Highly Dependent on Operating SystemNote – Even Java needs an OS specific Runtime Environment

Access to local OS/Hardware ResourcesRuns within OS Window System

Microsoft WindowsUnix-Based X Windows

Stand-Alone or Client/Server


Desktop GUI Characteristics

Inherits OS Window FunctionalityMimics Human/Object Interaction

Icons to Identify ObjectActions on Objects

Point, Choose, Hold, Move, Activate objects

Rich UI ComponentsElaborate Toolbars

Icons represent typical Application functionsCustom toolbars

Comprehensive Menu systemGeneral MenuContext Sensitive Menu

Floating UI Components


Example Desktop GUIWindows Explorer

General MenuToolbar

Context SensitiveMenuIcons mimic real objects

Window


Typical User Actions on Desktop UI

MouseClick to Select objectDouble Click to cause initiate certain behavior on an objectHold Mouse Button to create an object handle for “drag and dropping”

KeyboardAlt, Ctl, Shift, and Function keys to create commands

Remnants of Legacy Command-Driven User InterfacesUsed as shortcuts to Menu Items


Web Browser ApplicationDefinition – Software that runs within the context of a Web Browser.Attributes

Distributed ApplicationLimited Access to Local OS ResourcesAccess to Server ResourcesRuns within Browser


Web Browser App GUI Characteristics

Easy consolidation of dispersed UI objectsBrowser paradigm is hyperlink centric

Clickable icons/text

Actions on Objects more limitedHolding and Moving objects more challengingSimulate some Desktop Application GUI behavior via AJAX, or plugins such as Flash UI Components

Form Component is key to processing dataSimple ToolbarsSimple Menu SystemsLimited mobility of UI Components


Example Web Brower Application GUI

Yahoo Home PageTypical Web Browser Application GUI objects

URL

Simple Menus Forms


Typical User Actions on Web Browser App UI

MouseHyperlink NavigationButton Click for Form SubmissionRare Double ClicksRare “drag and dropping”

KeyboardMostly used for data entryCommand Keys are seldom used because a Web Browser App UI is more mouse driven

Further away from Legacy Command-Driven User Interfaces


Kiosk ApplicationDefinition – Software that typically runs in a public setting for either informational or commercial purposeAttributes

Comprised of a Touch Sensitive TerminalCan run locally or over the Internet


Kiosk GUI CharacteristicsTypically uses touch screen as input deviceAdvance kiosks can also include trackballs and keyboardsLower rate of user errors since input devices are simple and options are limitedFeatures are not as rich as Desktop or Web Browser GUIs


Example Kiosk GUITypical Touch screen GUI


Typical User Actions on Kiosk UI

Touch Screen NavigationTrackBall/Mouse

Simple ClickingDouble Clicks unlikelyDrag and Drop unlikely

KeyboardMostly used for entering simple search criteria


Mobile ApplicationDefinition – Software that runs on mobile device that ranges from device control software to full blown OS softwareAttributes

Hardware ConstraintsMulti-tasking is difficultLimited space for input devicesCapable of running Distributed Applications


Mobile Application GUI Characteristics

Simple GUI DesignSimple Menu for quick navigationDiscourage mass data entryDiscourage multi-tasking


Example Mobile Application GUI

Mobile Windows

Limited Screen Space

Limited Input Keys


Typical User Actions on Mobile App GUI

Navigation is driven by number keysType-Ahead text fields are utilized to minimize typingQuick Tasks are typical rather than full blown projects


ObservationsHuman behavior has impacted GUI DesignGUI Design and growing number of GUI devices impact Human BehaviorCorrelation between different GUI designs and Human behavior has implications


Future SessionsImplications/Impact that different GUI Designs have on humans namely:

UsersSoftware Engineers/Architects

Future UI Technologies and their potential human impact

Ubiquitous paradigm?

human impact of ui design paradigms

Documents