User Interfaces System ModelsDesigning an InterfaceFlows – from the use casesGUI 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 MoscowSystem ModelsModelingModeling an airplaneExercise: Modeling a HouseExample of a System ModelModeling Languages and ProcessesUser InterfacesSystem Models8 FebruaryDesigning an InterfaceFundamental Concepts What the user needs to doThe order that he does itIs it natural?How much does he have to remember?Flows – from the use casesGUI Screen Design ProcessKnow 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 DesignConsistencyStarting in the upper left cornerSimple navigationGrouping and alignmentHierarchy for importancePleasing visualsCaptionsThree Types of WindowsProperty – information onlyDialogue – input from user and subsequent actionAlert – 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 < 120OKPropertyDialogueAlertWhy Classify?Use the right type of windowConsider purpose when designingExample: alert window must be seen; property window not as criticalRolloversInformation 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 DesignConsistency: use of pull-downs vs. entryStarting in the upper left corner: first thing to fill inSimple navigationGrouping and alignmentKeep related issues togetherCaptions 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 resultsVisualization usually refers to dynamically created resultsDataInformationInformation design usually refers to crafted pieceEdward 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 scales.System ModelsModelingBased on abstractionLooking only at relevant informationHiding detailsCreate multiple viewsAs orthogonal as possibleEach view has information that is uniqueEach view has information that appears in other viewsCommon information is consistentHow many views?Modeling an airplane @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ @Exercise: Modeling a HouseWhat views would you model?Do they meet the criteria?Example of a System Model Three viewsFunctional: what is doneData: entity relationshipsDynamic: state transitionsWhy these three?Duplicative?Missing?Modeling Languages and ProcessesLanguage: syntax, usually graphical, used to express designProcess: steps to take to create a designMany processes, not a lot of agreementGeneral consensus has built around UML as a languageWe’ll look at UML later in the
View Full Document