Web Application Design SEII - Lecture 14

Web Application DesignSEII-Lecture 14Dr. Muzafar KhanAssistant ProfessorDepartment of Computer ScienceCIIT, Islamabad.RecapPatterns, effective design patternsDescribing patternsTypes of patternsArchitecture, data, component, interface design, and webapp patternsCreational, structural, and behavioral patternsDesign tasksUser interface design patterns2WebApp Quality [1/2]Olsina et al. criteria, 1999UsabilityGlobal site understandabilityOnline feedback and help featuresInterface and aesthetic featuresSpecial featuresFunctionalitySearching and retrieving capabilityNavigation and browsing featuresApplication domain-related features3WebApp Quality [2/2]ReliabilityCorrect link processingError recoveryUser input validation and recoveryEfficiencyResponse time performancePage generation speedGraphics generation speedMaintainabilityEase of correctionAdaptabilityExtensibility4WebApp QualityOffutt (2002) proposedSecuritySensitive informationAvailability24/7/365Different web browsersScalabilitySupport for more usersTime-to-marketBusiness point of view5Content Quality [1/2]Tillman (2000) criteriaCan the scope and depth of content be easily determined to ensure that it meets the user's needs?Can the background and authority of the content's authors be easily identified?Is it possible to determine the currency of the content, the last update, and what was updated?Are the content and its location stable (i.e., will they remain at the referenced URL)?6Content Quality [2/2]Further considerationsIs content credible?Is content unique? That is, does the webApp provide some unique benefit to those who use it?Is content valuable to the targeted user community?Is content well organized? Indexed? Easily accessible?7Design Goals of WebApp [1/2]Simplicity“all things in moderation”Informative but compactSensible use of colorsSimple navigationConsistencyText formatting, font style, color schemeIdentitySpecific to application domains8Design Goals of WebApp [2/2]RobustnessImplicit promise to usersNavigabilityIntuitive and predictable navigationVisual appealLook and feelCompatibilityDifferent environments9Design Pyramid for WebApps10Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 379Interface DesignEstablish a consistent window into the content and functionality provided by the interfaceGuide the user through a series of interactions with the WebAppOrganize the navigation options and content available to the userInteraction mechanismsNavigation menusGraphic iconsGraphic images11Aesthetic DesignAlso called graphic designLayout issuesDo not be afraid of white spacesEmphasize contentOrganize layout elements from top-left to bottom-rightGroup navigation, content, and function geographically within the pageDo not extend your real estate with the scrolling barConsider resolution and browser window size when designing layoutGraphic designing issues12Architecture Design [1/4]13Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 384Architecture Design [2/4]14Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 385Architecture Design [3/4]15Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 385Architecture Design [4/4]16Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 386WebApp Architecture17Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 387Navigation DesignNavigation Semantic Unit (NSU)"a set of information and the related navigation structures that collaborate in the fulfillment of a subset of related user requirements“Set of navigation elementsWays of Navigating (WoN)Navigational Nodes (NN)ApproachesIndividual navigation link, horizontal navigation bar, vertical navigation column, tabs, and site maps 18SummaryWebApp qualityContent qualityWebApp design19