User InterfacesIBM Career and Internship PresentationFirst some humorRequirementsSlide 5Slide 6What is an object model?ModelsModels – copy examplesGUI or not to GUI?Interaction StylesFundamental ConceptsFlows – always neededGUI Screen Design ProcessPrinciples of Good Screen DesignThree Types of WindowsExamplesWhy Classify?RolloversGood Screen DesignThe content is all there…But it can be betterVisualization and Information DesignMinard: Napoleon’s March to MoscowUser Interfaces6 FebruaryIBM Career and Internship PresentationMonday, February 12thSitterson 0116pm Enjoy Pizza! And (Soft)Drinks! And… Learn about cool opportunities for internships (like extremeblueTM ) and full time positions at Software Group.First some humorRailroad tiesDilbertRequirementsRequirementsThe UI IcebergThe UI IcebergVisualsVisualsInteractionInteractionTechniquesTechniquesObject ModelObject ModelFeel30%Look10%The things you use60%Toolkits and style guides help with look and feel, the tip of the usability iceberg.Real usability gains come from system and application objects perceived by users.What is an object model?Model: a small object, usually built to scale, that represents another, often larger object.Object: a software bundle that encapsulates state and behavior. So what is the object model of a user interface? Consider ebay, amazon, myspaceModelsObject-actionChoose the object and then the action to performAction-objectChoose the action and then the objectModels – copy examplesObject-actionChoose the object and then the action to performWindows GUI: select the file, right click for actionsAction-objectChoose the action and then the objectWindows command line:“copy” file_a file_bGUI or not to GUI?How often is the task done?How many objects are done at a time?Physical limitationsEnvironmentInteraction StylesExisting Emerging -Command Language -Ubiquitous, Pervasive, Handheld -Question and Answer -Tangible User Interfaces -Form-based -Lightweight, Tacit, Passive -Menu -Perceptual Interfaces -Natural Language -Affective Computing -Direct Manipulation, GUI -Context-Aware Interfaces -Virtual Reality -Speech, Multi-Modal -Augmented Reality -...?Fundamental ConceptsWhat the user needs to doThe order that he does itIs it natural?How much does he have to remember?Flows – always neededGUI Screen Design ProcessKnow Your User or Client Understand the Business Function Understand the Principles of Good Screen Design Select the Proper Kinds of Windows Develop System Menus Select the Proper Device-Based Controls Select the Proper Screen-Based Controls Organize and Lay Out Windows Choose the Proper Colors Create Meaningful Icons Provide Effective Messages, Feedback, Guidance, and Language Translation Test, Test, and Retest Wilbert GalitzPrinciples of Good Screen DesignConsistencyStarting in the upper left cornerSimple navigationGrouping and alignmentHierarchy for importancePleasing visualsCaptionsThree Types of WindowsProperty – information onlyDialogue – input from user and subsequent actionAlert – information that needs to be seen before continuing. Developer determined.ExamplesProperties of automobile 189Property ValueBrand ToyotaModel CamryID 893-8913-789014HelpWord ___________________ This screen All screensABC alert messageCaution: “age” must be < 120OKWhy Classify?Use the right type of windowConsider purpose when designingExample: alert window must be seen; property window not as criticalRolloversInformation that is optional and selected by the user But it often can’t be copied. It doesn’t remain visible.Are those important for this usage?This is a rollover window, designed to provide on-the-fly amplificationGood Screen DesignConsistency: use of pull-downs vs. entryStarting in the upper left corner: first thing to fill inSimple navigationGrouping and alignmentKeep related issues togetherCaptions for clarityType checking saving mmf CDBranch Main St.Elm St. High St.Privileges newsletterdiscounts quick loansFirst nameMiddle nameLast nameStreetCityState/countyOKApplyCancel HelpAdapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.The content is all there…checkingOK Apply Cancel HelpAccount type Privilegessavingmoney marketCDnewsletterdiscountsquick loansBranchMain St.Elm St.High St.New CustomersNameFirstMiddleLastAddressStreetCityState/countyAdapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.But it can be betterVisualization and Information Design How to present resultsVisualization usually refers to dynamically created resultsDataInformationInformation design usually refers to crafted pieceEdward TufteMinard: Napoleon’s March to MoscowPortrays the losses suffered by Napoleon's army in the Russian campaign of 1812. Beginning at the Polish-Russian border, the thick band shows the size of the army at each position. The path of Napoleon's retreat from Moscow in the bitterly cold winter is depicted by the dark lower band, which is tied to temperature and time