2.2. WebWeb EngineeringEngineering FundamentalsFundamentals

1. IntroductionIntroduction

2. RequirementsRequirements AnalysisAnalysis

3. WebWeb ModelingModeling

4. WebWeb ArchitecturesArchitectures

5. WebWeb AccessibilityAccessibility

SWE 444: & Web Application Development 2.1 ResourcesResources

„ BookBook

Kappel, G., Proll, B. Reich, S. & Retschitzegger, W. (2006). Web Engineering, 1st ed. Hoboken, NJ: Wiley & Sons. ISBN: 04700-1554-3.

„ OnlineOnline materialmaterial

INFSCI 2955: Web Engineering Department of Information Science and Telecommunications, University of Pittsburgh Website: http://www.sis.pitt.edu/~jgrady/

SWE 444: Internet & Web Application Development 2.2 2.12.1 IntroductionIntroduction toto WebWeb EngineeringEngineering WhatWhat isis WebWeb Engineering?Engineering?

„ ““TheThe applicationapplication ofof systematicsystematic andand quantifiablequantifiable approachesapproaches toto costcost--effectiveeffective analysis,analysis, design,design, implementation,implementation, testing,testing, operation,operation, andand maintenancemaintenance ofof highhigh--qualityquality WebWeb applications.applications.”” –– KappelKappel etet al.al.

„ ExtendsExtends SoftwareSoftware EngineeringEngineering toto WebWeb applications,applications, butbut withwith WebWeb--centriccentric approaches.approaches.

SWE 444: Internet & Web Application Development 2.4 DefiningDefining WebWeb ApplicationsApplications

„ AA WebWeb applicationapplication isis aa systemsystem thatthat utilizesutilizes W3CW3C standardsstandards && technologiestechnologies toto deliverdeliver WebWeb--specificspecific resourcesresources toto clientsclients (typically)(typically) throughthrough aa browser.browser.

A strict definition that ensures software and UI aspects of the Web are examined carefully

„ TechnologyTechnology ++ interaction.interaction.

Web site with no software components? Web services?

SWE 444: Internet & Web Application Development 2.5 TheThe CaseCase forfor WebWeb EngineeringEngineering

„ ApplicationApplication developmentdevelopment onon thethe WebWeb remainsremains largelylargely adad hochoc..

Spontaneous, one-time events Individual experience Little or no documentation for code/design

„ ShortShort--termterm savingssavings leadlead toto longlong--termterm problemsproblems inin operation,operation, maintenance,maintenance, usability,usability, etc.etc.

„ BecauseBecause WebWeb appsapps areare soso interdependent,interdependent, thethe problemproblem isis compounded.compounded.

SWE 444: Internet & Web Application Development 2.6 TheThe CaseCase forfor WebWeb EngineeringEngineering (cont.)(cont.)

„ RootRoot CausesCauses ofof poorpoor designdesign

Development as an authoring activity Development is “easy” Techniques that should not be used are misapplied. Techniques that should be used are not.

„ ParticularlyParticularly alarmingalarming givengiven……

Most projects are now Web-based More “mission-critical” apps moving to the Web

SWE 444: Internet & Web Application Development 2.7 TheThe CaseCase forfor WebWeb EngineeringEngineering (cont.)(cont.)

„ Top project pitfalls (Cutter, 2000)

84% - Failure to meet business objectives 79% - Project schedule delays 63% - Budget overrun 53% - Lack of functionality

„ Web Engineering’s solution:

Clearly defined goals & objectives Systematic, phased development Careful planning Iterative & continuous auditing of the entire process

SWE 444: Internet & Web Application Development 2.8 CategoriesCategories ofof WebWeb ApplicationsApplications

Ubiquitous

Social Web Collaborative

Workflow Based Portal Transactional Oriented Complexity Interactive

Doc-Centric

Development History

SWE 444: Internet & Web Application Development 2.9 DocumentDocument--CentricCentric WebWeb sitessites

„ Precursors to Web applications

„ Static HTML documents

„ Manual updates

„ Pros

Simple, stable, short response times

„ Cons

High management costs for frequent updates & large collections More prone to inconsistent/redundant info

„ Example: static home pages

SWE 444: Internet & Web Application Development 2.10 InteractiveInteractive && TransactionalTransactional

„ Come with the introduction of CGI and HTML forms

„ Simple interactivity

„ Dynamic page creation

Web pages and links to other pages generated dynamically based on user input

„ Content updates -> Transactions

Decentralized connectivity Increased complexity

„ Examples: news sites, booking systems, online banking

SWE 444: Internet & Web Application Development 2.11 WorkflowWorkflow--BasedBased ApplicationsApplications

„ DesignedDesigned toto handlehandle businessbusiness processesprocesses acrossacross departments,departments, organizationsorganizations && enterprisesenterprises

„ BusinessBusiness logiclogic definesdefines thethe structurestructure

„ TheThe rolerole ofof WebWeb servicesservices

Interoperability Loosely-coupled Standards-based

„ Examples:Examples: B2BB2B && ee--GovernmentGovernment

„ HighHigh complexity;complexity; autonomousautonomous entitiesentities

SWE 444: Internet & Web Application Development 2.12 CollaborativeCollaborative && SocialSocial WebWeb „ Unstructured,Unstructured, cooperativecooperative environmentsenvironments Support shared information workspaces to create, edit and manage shared information

„ InterpersonalInterpersonal communicationcommunication isis paramountparamount

„ ClassicClassic example:example: WikisWikis

„ TheThe SocialSocial WebWeb Anonymity traditionally characterized WWW Moving towards communities of interest Examples: Blogs, collaborative filtering systems, social bookmarking (e.g., del.icio.us) Integration with other forms of web applications (e..g, NetFlix)

SWE 444: Internet & Web Application Development 2.13 PortalPortal--OrientedOriented

„ SingleSingle pointspoints--ofof--entryentry toto heterogenousheterogenous informationinformation

Yahoo!, AOL.com, portal.kfupm.edu.sa

„ SpecializedSpecialized portalsportals

Business portals (e.g., employee intranet) Marketplace portals (horizontal & vertical) Community portals (targeted groups)

SWE 444: Internet & Web Application Development 2.14 UbiquitousUbiquitous

„ CustomizedCustomized servicesservices delivereddelivered anywhereanywhere viavia multiplemultiple devicesdevices

„ HCIHCI isis criticalcritical

Limitations of devices (screen size, bandwidth?) Context of use

„ StillStill anan emergingemerging field;field; mostmost devicesdevices havehave singlesingle focus:focus:

Personalization Location-aware Multi-platform delivery

SWE 444: Internet & Web Application Development 2.15 SemanticSemantic WebWeb

„ BernersBerners--Lee:Lee: InformationInformation onon thethe WebWeb shouldshould bebe readablereadable toto machines,machines, asas wellwell asas humans.humans.

„ UsingUsing metadatametadata andand ontologiesontologies toto facilitatefacilitate knowledgeknowledge managementmanagement acrossacross thethe WWW.WWW.

„ ContentContent syndicationsyndication (RSS,(RSS, Atom)Atom) promotespromotes rere-- useuse ofof knowledgeknowledge

„ IsIs thethe SemanticSemantic WebWeb eveneven possible?possible?

SWE 444: Internet & Web Application Development 2.16 CharacteristicsCharacteristics ofof WebWeb AppsApps

„ HowHow dodo WebWeb applicationsapplications differdiffer fromfrom traditionaltraditional applications?applications?

„ Or,Or, anotheranother way,way, whatwhat SoftwareSoftware EngineeringEngineering methodsmethods && techniquestechniques cancan bebe adaptedadapted toto WebWeb Engineering?Engineering?

„ 33 dimensionsdimensions ofof thethe ISO/IECISO/IEC 91269126--11 standardstandard

Product Usage Development

SWE 444: Internet & Web Application Development 2.17 CharacteristicsCharacteristics -- ProductProduct

„ Product-related characteristics constitute the “building blocks” of a Web application

„ Content

Document character & multimedia (# of dimensions?) Quality demands: current, exact, consistent, reliable

„ Navigation Structure ()

Non-linearity Potential problems: Disorientation & cognitive overload

„ User interface (Presentation)

Aesthetics Self-explanation

SWE 444: Internet & Web Application Development 2.18 CharacteristicsCharacteristics -- UsageUsage

„ Much greater diversity compared to traditional non-Web applications Users vary in numbers, cultural background, devices, h/w, s/w, location etc

„ Social Context (Users) Spontaneity - scalability Heterogeneous groups

„ Technical Context (Network & Devices) Quality-of-Service Multi-platform delivery

„ Natural Context (Place & Time) Globality Availability

SWE 444: Internet & Web Application Development 2.19 CharacteristicsCharacteristics -- DevelopmentDevelopment

„ The Development Team

Multidisciplinary – print publishing, s/w devt, marketing & computing, art & technology Community (including Open Source)

„ Technical Infrastructure Lack of control on the client side Immaturity

„ Process Flexibility Parallelism

„ Integration Internal – with existing legacy systems External – with Web services Integration issues: correct interaction, guaranteed QoS

SWE 444: Internet & Web Application Development 2.20 2.22.2 RequirementsRequirements EngineeringEngineering OverviewOverview

„ IntroductionIntroduction toto RequirementsRequirements EngineeringEngineering

„ FundamentalsFundamentals

„ SpecificsSpecifics inin WebWeb EngineeringEngineering

„ PrinciplesPrinciples

„ AdaptingAdapting traditionaltraditional RequirementsRequirements EngineeringEngineering toto WebWeb applicationsapplications

SWE 444: Internet & Web Application Development 2.22 IntroductionIntroduction

„ (RE) – the principles, methods, & tools for eliciting, describing, validating, and managing project goals and needs.

„ Given the complexity of Web apps, RE is a critical initial stage, but often poorly executed.

„ What are the consequences?

Inadequate software architectures “Unforeseen” problems ¾ Budget overruns ¾ Production delays ¾ “That’s not what I asked for” Low user acceptance

SWE 444: Internet & Web Application Development 2.23 WhyWhy DefineDefine Requirements?Requirements?

„ TheThe authorsauthors buildbuild theirtheir case:case:

Bell & Thayer (1976) – Requirements don’t define themselves. Boehm (1981) – Removal of mistakes post hoc is up to 200 times more costly. The Standish Group (1994) – 30% of project fail before completion & almost half do not meet customer requirements ¾ Unclear objectives, unrealistic schedules & expectations, poor user participation

SWE 444: Internet & Web Application Development 2.24 FundamentalsFundamentals ofof RERE -- 11

„ IdentifyIdentify andand involveinvolve (if(if possible)possible) thethe stakeholdersstakeholders

Those that directly influence the requirements Customers, users, developers

„ WhatWhat areare theirtheir expectations?expectations?

May be misaligned or in conflict. May be too narrowly focused or unrealistic.

„ Already,Already, oneone cancan seesee RERE asas moremore ofof anan artart thanthan aa science.science.

SWE 444: Internet & Web Application Development 2.25 FundamentalsFundamentals ofof RERE -- 22

„ IEEEIEEE 601.12601.12 definitiondefinition ofof requirement:requirement:

1) Solves a user’s problem 2) Must be met or possessed by the system to satisfy a formal agreement 3) Documented representation of conditions in 1 and 2

„ KeysKeys toto requirementrequirement definition:definition:

Negotiation Scenario-based discovery Clear definition of context and constraints

SWE 444: Internet & Web Application Development 2.26 FundamentalsFundamentals ofof RERE -- 33

„ Objectives, objectives, objectives

Advertising Customer service Business transactions

„ Audience, audience, audience

The designer is not the audience Audience segmentation User interviews and testing

„ What about the Competition?

Other web sites Other forms of advertising and transactions

SWE 444: Internet & Web Application Development 2.27 Example:Example: SISSIS WebsiteWebsite

SWE 444: Internet & Web Application Development 2.28 SummarySummary -- RERE ActivitiesActivities

Elicitation & Negotiation

Management Documentation

Validation & Verification

SWE 444: Internet & Web Application Development 2.29 SpecificsSpecifics inin WebWeb EngineeringEngineering

„ IsIs RERE forfor thethe WebWeb reallyreally thatthat differentdifferent thanthan RERE forfor conventionalconventional software?software?

„ SomeSome wouldwould argueargue ““nono””,, butbut manymany aspectsaspects ofof WebWeb applicationsapplications suggestsuggest otherwiseotherwise

„ 1010 distinguishingdistinguishing characteristicscharacteristics

Multidisciplinary Unavailability of stakeholders Rapidly changing requirements & constraints

SWE 444: Internet & Web Application Development 2.30 SpecificsSpecifics inin WebWeb EngineeringEngineering -- 22

„ 1010 distinguishingdistinguishing characteristicscharacteristics (cont.)(cont.)

Unpredictable operational environment Integration of legacy systems ¾ Constrained by existing system ¾ Constrained by $$$ Quality aspects User interface quality Content quality Developer inexperience Firm delivery dates

SWE 444: Internet & Web Application Development 2.31 PrinciplesPrinciples forfor RERE

„ Inspired by the win-win spiral model (Boehm, 1996)

Source: http://www.stsc.hill.af.mil/Crosstalk/2001/12/boehm3.gif

SWE 444: Internet & Web Application Development 2.32 PrinciplesPrinciples forfor RERE -- 22

„ UnderstandingUnderstanding thethe systemsystem contextcontext

Web apps are always a component of a larger entity Why do we need the system? How will people use it?

„ InvolvingInvolving thethe stakeholdersstakeholders

Get all groups involved. Balance – one group’s gain should not come at the expense of another. Repeat the process of identifying, understanding and negotiating.

SWE 444: Internet & Web Application Development 2.33 PrinciplesPrinciples forfor RERE -- 33

„ IterativelyIteratively definedefine requirementsrequirements Requirements need to be consistent with other system aspects (UI, content, test cases) Start with key requirements at a high level; basis for: ¾ Feasible architectures ¾ Key system use cases ¾ Initial plans for the project As the project progresses, requirements can become more concrete.

SWE 444: Internet & Web Application Development 2.34 PrinciplesPrinciples forfor RERE -- 44

„ FocusingFocusing onon thethe SystemSystem ArchitectureArchitecture

The “solution space” – existing technologies & legacy systems – defines the “problem space.” The architecture must be considered in the elicitation stage. Refine requirements and architecture iteratively with increasing level of detail.

SWE 444: Internet & Web Application Development 2.35 PrinciplesPrinciples forfor RERE -- 55

„ RiskRisk OrientationOrientation

Risk management is at the heart of the analysis process. What are the greatest risks? ¾ Integration issues w/ legacy systems ¾ Expected vs. actual system quality ¾ Inexperience of developers How to mitigate risks? ¾ Prototyping (avoid IKIWISI) ¾ Show changes to customer iteratively ¾ Integrate existing systems sooner than later

SWE 444: Internet & Web Application Development 2.36 AdaptingAdapting RERE toto WebWeb ApplicationsApplications

„ ThereThere isnisn’’tt oneone singlesingle ““rightright wayway”” toto RERE amongamong thethe manymany methods,methods, techniques,techniques, tools,tools, etc.etc. available.available.

„ ForFor youryour WebWeb applicationapplication project,project, askask thethe followingfollowing questions:questions:

What are the critical requirements? How should requirements be documented? What tools should be use, if any?

SWE 444: Internet & Web Application Development 2.37 AdaptingAdapting –– RequirementRequirement TypesTypes

„ TaxonomiesTaxonomies (e.g.(e.g. IEEEIEEE 830)830) existexist thatthat describedescribe functionalfunctional andand nonnon--functionalfunctional requirements.requirements.

Functional – describes the capability’s purpose (e.g., the ability to transfer money between user accounts.) Non-functional – describes the capability’s properties (e.g., the system can handle 1,000 concurrent users)

SWE 444: Internet & Web Application Development 2.38 AdaptingAdapting –– RequirementRequirement TypesTypes

„ NonNon--functionalfunctional requirementrequirement typestypes

Content Quality (6 Types) ¾ Functionality ¾ Reliability ¾ Usability ¾ Efficiency ¾ Maintainability ¾ Portability

SWE 444: Internet & Web Application Development 2.39 AdaptingAdapting –– RequirementRequirement TypesTypes

„ NonNon--functionalfunctional requirementrequirement typestypes (continued)(continued)

System Environment User Interface ¾ Self-explanatory & intuitive ¾ Usage-centered design Evolution Project Constraints

SWE 444: Internet & Web Application Development 2.40 AdaptingAdapting –– DocumentationDocumentation

„ 44 categoriescategories ofof notationnotation Stories – Plain-language scenarios; understandable to non-technical persons. Itemized Requirements – Plain-language lists of requirements Formatted Requirements – Accurately-defined, but allow for plain-language descriptions ¾ Ex. Use case scenarios in UML Formal Specifications – Expressed in formal syntax & semantics; rarely used in Web applications.

SWE 444: Internet & Web Application Development 2.41 AdaptingAdapting –– DocumentationDocumentation

„ So,So, whatwhat’’ss bestbest forfor aa WebWeb developmentdevelopment project?project?

Low to medium accuracy is suitable for Web apps; formal specifications very rarely required. Keep elicitation and management of requirements low. Scalability is (most likely) important. Formatted requirements (i.e. use cases) are heavily used.

SWE 444: Internet & Web Application Development 2.42 AdaptingAdapting –– ToolsTools

„ RequirementsRequirements ElicitationElicitation

EasyWinWin (the author’s software) Book: Getting to Yes: Negotiating an Agreement Without Giving in by Fisher, Ury, Patton (1994)

„ RequirementsRequirements ValidationValidation

Online feedback (Web surveys)

„ RequirementsRequirements ManagementManagement

Database system – traceability, versioning

SWE 444: Internet & Web Application Development 2.43 ChallengesChallenges withwith StakeholdersStakeholders

„ McConnellMcConnell (1996)(1996)

Users don’t know what they want. Lack of commitment. Ever-expanding requirements. Communication delays. Users don’t take part in reviews. Users don’t understand the technology. Users don’t understand the process.

SWE 444: Internet & Web Application Development 2.44 ChallengesChallenges withwith DevelopersDevelopers

„ UsersUsers andand engineers/developersengineers/developers speakspeak differentdifferent ““languageslanguages””..

„ TheThe tendencytendency toto ““shoeshoe--hornhorn”” thethe requirementsrequirements intointo anan existingexisting modelmodel

Saves time for developers, but results may not meet user’s needs.

„ EngineersEngineers && developersdevelopers areare alsoalso askedasked toto dodo RE,RE, butbut sometimessometimes lacklack peoplepeople skillsskills andand domaindomain knowledgeknowledge

SWE 444: Internet & Web Application Development 2.45 2.32.3 ModelingModeling WebWeb ApplicationApplication SummarySummary –– WebWeb EngineeringEngineering

Requirements Analysis

Maintenance Design

Testing Implementation

SWE 444: Internet & Web Application Development 2.47 WhyWhy CreateCreate Models?Models?

„ DefineDefine anan abstractabstract viewview ofof aa realreal--worldworld entityentity

Finding & discovering objects/concepts in a domain Assigning responsibilities to objects

„ ToolTool ofof thoughtthought

Reduce complexity Document design decisions

„ MeansMeans ofof communicationcommunication

SWE 444: Internet & Web Application Development 2.48 WebWeb ModelingModeling

„ ModelingModeling staticstatic && dynamicdynamic aspectsaspects ofof content,content, hypertext,hypertext, andand presentation.presentation.

„ WeWe focusfocus onon objectobject--orientedoriented analysisanalysis && designdesign Analysis: Finding & discovering objects/ concepts in a domain Design: Defining software objects & how they interact to fulfill requirements.

„ KeyKey skill:skill: AssigningAssigning responsibilitiesresponsibilities toto objectsobjects

SWE 444: Internet & Web Application Development 2.49 AssigningAssigning ResponsibilitiesResponsibilities

„ ResponsibilitiesResponsibilities areare obligationsobligations oror specificspecific behaviorsbehaviors relatedrelated toto itsits role.role.

„ WhatWhat doesdoes anan objectobject dodo??

Doing something itself Pass actions (messages) to other objects Controlling & coordinating the activities in other objects

„ WhatWhat doesdoes anan objectobject knowknow??

Private, encapsulated data Its related objects Items it can derive or calculate

SWE 444: Internet & Web Application Development 2.50 SoftwareSoftware ApplicationApplication ModelingModeling

Levels

User interface

Application Logic

Phases Structure Analysis Design Implementation

Behavior

Aspects

„ Levels – the “how” & “what” of an application

„ Aspects – objects, attributes, and relationships; function & processes

„ Phases – Development cycle

SWE 444: Internet & Web Application Development 2.51 UnifiedUnified ModelingModeling LanguageLanguage (UML)(UML)

„ ““TheThe UnifiedUnified ModelingModeling LanguageLanguage isis aa visualvisual languagelanguage forfor specifyingspecifying andand documentingdocumenting thethe artifactsartifacts ofof systems.systems.”” [OMG03a][OMG03a]

„ LanguageLanguage ofof choicechoice (and(and ISOISO standard)standard) forfor diagrammingdiagramming notationnotation inin OOOO development.development.

Structural – Class diagrams Behavioral – Use Case diagrams, State machine diagrams

SWE 444: Internet & Web Application Development 2.52 WebWeb ApplicationApplication ModelingModeling

Levels Presentation Hypertext Customization Content

Phases Structure Analysis Design Implementation

Behavior

Aspects

„ Levels – Information, node/link structure, UI & page layout separate.

„ Aspects – Same as Software Applications

„ Phases – Approach depends upon type of application

„ Customization – Context information

SWE 444: Internet & Web Application Development 2.53 WebWeb ApplicationApplication ModelingModeling

„ ForFor WebWeb--centriccentric modeling,modeling, wewe willwill employemploy thethe UMLUML WebWeb EngineeringEngineering (UWE)(UWE) notation.notation.

http://www.pst.ifi.lmu.de/projekte/uwe/ Relies on Object Management Group (OMG) standards – (i.e., UML-compliant) Comprehensive modeling tool Supports semi-automatic generation of code

SWE 444: Internet & Web Application Development 2.54 RequirementsRequirements ModelingModeling

„ ServesServes asas aa bridgebridge betweenbetween RequirementsRequirements && DesignDesign phasesphases

„ UsesUses casescases –– functionalfunctional requirementsrequirements writtenwritten asas aa collectioncollection ofof relatedrelated successsuccess && failurefailure scenarios.scenarios.

Scenario – a sequence of actions & interactions between actors and a system.

„ PreferredPreferred meansmeans ofof modelingmodeling requirementsrequirements

Written descriptions are easy to understand Emphasize the users goals and perspective

SWE 444: Internet & Web Application Development 2.55 UseUse CasesCases

„ DefiningDefining validvalid useuse cases:cases:

The Boss Test – measurable value The EBP Test – one person, one place, one time The Size Test – more than one step

„ WhichWhich isis aa validvalid useuse case?case?

Negotiate a Supplier Contract Handle Returns Log In Move Piece on Game Board

SWE 444: Internet & Web Application Development 2.56 UseUse CasesCases

„ CriticalCritical componentscomponents

Use Case Name – starts with a verb Level – “user-goal” or “subfunction” Primary Actor – the user whose goal is fulfilled Stakeholders & Interests – Who cares, and what do they want? Preconditions – What must be true at the start Success Guarantee – defines the successful completion of the use case for all stakeholders

SWE 444: Internet & Web Application Development 2.57 UseUse CaseCase –– ExampleExample 11

„ Use Case 1: Create User

„ Scope: University or business network

„ Level: user goal

„ Primary Actor: user (system administrator)

„ Stakeholders and Interests: System Administrator: Wants control over users’ access to system resources. New User: Wants access to system resources for communication, business, and research. Organization: Wants security and controlled access of organization resources, data, intellectual property; wants employees/students to have appropriate system access to fulfill the goals of the organization.

„ Preconditions: User is identified, authenticated, and has opened administration tool

„ Success Guarantee: New user account is created and saved. Username and password grant the new user access to network.

SWE 444: Internet & Web Application Development 2.58 UseUse CaseCase –– ExampleExample 11 [cont.][cont.]

„ MainMain SuccessSuccess ScenarioScenario::

1. System requests input for username & password 2. User enters username & password 3. System requests other identifiable user information (ex. real name, SSN#, address) 4. User enters other identifiable user information 5. System verifies username & password 6. System stores new user information 7. System displays success message 8. System presents user options

SWE 444: Internet & Web Application Development 2.59 UseUse CaseCase GuidelinesGuidelines

„ UseUse shortsshorts sentencessentences

„ DeleteDelete ““noisenoise”” wordswords

NO : “The System authenticates…” YES: “System authenticates…”

„ AvoidAvoid technologytechnology--specificspecific termsterms (initially,(initially, atat least)least)

NO : “Cashier swipes Product ID across scanner.” YES: “Cashier enters Product ID.”

SWE 444: Internet & Web Application Development 2.60 UseUse CaseCase DiagramsDiagrams

„ ProvideProvide aa graphicalgraphical overviewoverview ofof aa systemsystem’’ss useuse cases,cases, itsits externalexternal actors,actors, andand theirtheir relationshipsrelationships

„ UseUse casecase diagramsdiagrams areare NOTNOT requirements!requirements!

„ CanCan bebe usedused forfor functionalfunctional && hypertexthypertext requirementsrequirements

Same model (UWE/authors’ approach) Use “<>” annotation to distinguish hypertext from functional

SWE 444: Internet & Web Application Development 2.61 UseUse CaseCase DiagramDiagram -- ExampleExample

„ ConferenceConference PaperPaper SubmissionSubmission SystemSystem

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.62 ContentContent ModelingModeling

„ PurposePurpose:: ToTo modelmodel thethe informationinformation requirementsrequirements ofof aa WebWeb applicationapplication

Diagramming the structural (i.e., information objects) & behavioral aspects of the information. NOT concerned with navigation.

„ PrimaryPrimary ModelsModels

Class diagrams – enough for static applications. State machine diagrams – captures dynamic aspects

SWE 444: Internet & Web Application Development 2.63 ClassClass DiagramDiagram –– ExampleExample 11

„ ConferenceConference PaperPaper SubmissionSubmission SystemSystem

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.64 ClassClass DiagramsDiagrams

„ NotationsNotations

Class Name

Multiplicity Attributes

Operations

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.65 ClassClass DiagramsDiagrams

„ NotationsNotations (continued)(continued)

Composition Derived Attribute Value

Invariant

Source: Web Engineering – Kappel et al. SWE 444: Internet & Web Application Development 2.66 ClassClass DiagramDiagram –– ExampleExample 22

„ OnlineOnline LibraryLibrary ApplicationApplication

Source: Web Engineering – Kappel et al. SWE 444: Internet & Web Application Development 2.67 StateState MachineMachine DiagramsDiagrams

„ ForFor dynamicdynamic WebWeb applications,applications, theythey depictdepict importantimportant statesstates andand eventsevents ofof objects,objects, andand howhow objectsobjects behavebehave inin responseresponse toto anan eventevent ((transitionstransitions))

„ ShowShow thethe lifelife--cyclecycle ofof anan object.object.

„ UsedUsed onlyonly forfor statestate--dependentdependent objectsobjects

„ ForFor purepure UMLUML modeling,modeling, cancan bebe veryvery usefuluseful forfor hypertexthypertext modelsmodels (next(next section).section).

SWE 444: Internet & Web Application Development 2.68 StateState MachineMachine DiagramDiagram -- ExampleExample

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.69 HypertextHypertext ModelingModeling

„ PurposePurpose:: ToTo modelmodel thethe navigationnavigation pathspaths availableavailable toto users.users.

„ ArtifactsArtifacts

Hypertext Structure Model – navigating among classes Access Model – UML-compliant site map

„ FocusesFocuses onon thethe structurestructure ofof thethe hypertexthypertext && accessaccess elements.elements.

„ UseUse ““<>class>>”” annotationannotation toto distinguishdistinguish fromfrom contentcontent classes.classes.

SWE 444: Internet & Web Application Development 2.70 HypertextHypertext StructureStructure ModelModel

„ ConferenceConference PaperPaper SubmissionSubmission SystemSystem

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.71 LinkLink ClassificationClassification TypesTypes

„ UWEUWE Navigation vs. Process vs. External

„ HDMHDM Structural vs. Perspective vs. Application

„ WebMLWebML Contextual vs. Non-contextual Intra-page vs. Inter-page

„ OOOO--HH I, T, R, X, S-links

SWE 444: Internet & Web Application Development 2.72 AccessAccess ModelModel

„ HypertextHypertext structurestructure modelsmodels describedescribe navigationnavigation,, butbut notnot orientationorientation..

„ AccessAccess modelsmodels describedescribe bothboth throughthrough NavigationNavigation patternspatterns,, usedused toto consistentlyconsistently describedescribe conventionalconventional elements.elements.

<> (list) <> (sequential links) <

>, <>

SWE 444: Internet & Web Application Development 2.73 AccessAccess ModelModel -- ExampleExample

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.74 PresentationPresentation ModelingModeling

„ PurposePurpose:: ToTo modelmodel thethe looklook && feelfeel ofof thethe WebWeb applicationapplication atat thethe pagepage level.level.

„ TheThe designdesign shouldshould aimaim forfor simplicitysimplicity andand selfself-- explanationexplanation..

„ DescribesDescribes presentationpresentation structure:structure:

Composition & design of each page Identify recurring elements (headers/footers)

„ DescribesDescribes presentationpresentation behavior:behavior:

Elements => Events

SWE 444: Internet & Web Application Development 2.75 LevelsLevels ofof PresentationPresentation ModelsModels

„ PresentationPresentation PagePage –– ““rootroot”” element;element; equivalentequivalent toto aa pagepage container.container.

„ PresentationPresentation UnitUnit A fragment of the page logically defined by grouping related elements. Represents a hypertext model node

„ PresentationPresentation ElementElement A unit’s (node’s) informational components Text, images, buttons, fields

SWE 444: Internet & Web Application Development 2.76 CompositionComposition ModelModel -- ExampleExample

„ PaperPaper andand AuthorAuthor PagePage TemplatesTemplates

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.77 SequenceSequence DiagramsDiagrams

„ PurposePurpose:: DepictsDepicts sequentialsequential interactionsinteractions (i.e.,(i.e., thethe flowflow ofof logic)logic) betweenbetween objectsobjects inin anan applicationapplication overover time.time.

What messages, what order, & to whom. Ex.: Object A calls method of Object B Ex.: Object B passes method call from Object A to Object C.

„ Result:Result: DynamicDynamic systemsystem interactionsinteractions diagrammeddiagrammed inin aa ““fencefence”” format.format.

SWE 444: Internet & Web Application Development 2.78 SequenceSequence DiagramDiagram -- NotationNotation

Object Instance

Lifeline

Focus of Control

Synchronous Message

Destroy Object

Source: Wikipedia – Sequence Diagram

SWE 444: Internet & Web Application Development 2.79 SequenceSequence DiagramDiagram –– ExampleExample 11

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.80 SequenceSequence DiagramDiagram –– ExampleExample 22

Source: Web Engineering – Kappel et al.

SWE 444: Internet & Web Application Development 2.81 ModelingModeling MethodsMethods

„ WeWe’’veve primarilyprimarily discusseddiscussed ObjectObject--OrientedOriented ModelingModeling (e.g.,(e.g., UML),UML), butbut therethere areare otherother methodologies:methodologies:

Data-Oriented (Hera, WebML) Hypertext-Oriented (HDM) Software-Oriented (WAE)

„ ChoosingChoosing aa methodmethod dependsdepends onon systemsystem purpose,purpose, focus,focus, andand requirementsrequirements

SWE 444: Internet & Web Application Development 2.82 2.42.4 WebWeb ArchitecturesArchitectures OverviewOverview

„ ArchitectureArchitecture defineddefined

„ DevelopingDeveloping architecturesarchitectures

„ TypesTypes ofof architecturesarchitectures

„ GenericGeneric WebWeb ArchitectureArchitecture

„ LayeredLayered--aspectaspect architecturesarchitectures

„ DataData--aspectaspect architecturesarchitectures

SWE 444: Internet & Web Application Development 2.84 ArchitectureArchitecture DefinedDefined

„ DefineDefine ““softwaresoftware architecturearchitecture””

http://www.sei.cmu.edu/architecture/definitions.html “Software architecture is the set of design decisions which, if made incorrectly, may cause your project to be cancelled.” – Eoin Woods

„ AuthorsAuthors focusfocus onon 55 keykey attributesattributes ofof softwaresoftware architecturesarchitectures

Structure, Elements, Relationships Analysis => Implementation Multiple viewpoints (conceptual, runtime, process & implementation) Understandable Framework for flexibility

SWE 444: Internet & Web Application Development 2.85 DevelopingDeveloping ArchitecturesArchitectures

„ InfluencesInfluences onon ArchitecturesArchitectures

Functional Requirements •Clients •Users •Other Stakeholders

Architecture Experience with •Existing Architecture •Patterns •Project Management •Other?

SWE 444: Internet & Web Application Development 2.86 DevelopingDeveloping ArchitecturesArchitectures

„ InfluencesInfluences onon ArchitecturesArchitectures (continued)(continued)

Quality considerations with •Performance •Scalability •Reusability •Other? Architecture Technical Aspects •Operating System •Middleware •Legacy Systems •Other? SWE 444: Internet & Web Application Development 2.87 Client/ServerClient/Server (2(2--Layer)Layer)

Client Client

Server

Web/App Server Services

Database Dynamic HTML Static HTML

SWE 444: Internet & Web Application Development 2.88 NN--LayerLayer ArchitecturesArchitectures Client

Firewall

Proxy

Presentation Layer Web Server

Business Layer Application Server Backend (Business Logic, Connectors, (Legacy Application, Personalization, Data Access) Enterprise Info System)

Data Layer DBMS B2B

SWE 444: Internet & Web Application Development 2.89 WhyWhy anan NN--LayerLayer Architecture?Architecture?

„ SeparatingSeparating servicesservices inin businessbusiness layerlayer promotespromotes rere--useuse differentdifferent applicationsapplications

Loose-coupling – changes reduce impact on overall system. More maintainable (in terms of code) More extensible (modular)

„ TradeTrade--offsoffs

Needless complexity More points of failure

SWE 444: Internet & Web Application Development 2.90 MoreMore onon ProxiesProxies

„ OriginallyOriginally forfor cachingcaching datadata

„ CanCan alsoalso serverserver otherother roles:roles:

Link Proxy ¾ Persistent URL’s – maps the URL the client sees to the actual URL. ¾ AJAX – allows data from a 2nd server to be accessed via a client script. History Proxy ¾ HTTP is stateless - navigation history cannot be shared across multiple websites. ¾ Multiple companies can access a server-side cookie (e.g. DoubleClick)

SWE 444: Internet & Web Application Development 2.91 IntegrationIntegration ArchitecturesArchitectures

„ EnterpriseEnterprise ApplicationApplication IntegrationIntegration (EAI)(EAI)

„ WebWeb ServicesServices

„ Portals/Portals/PortletsPortlets

„ Challenges/PitfallsChallenges/Pitfalls

Cannot separate logic & data in legacy systems Incompatible schemes Poor documentation Measuring performance/scalability

SWE 444: Internet & Web Application Development 2.92 DataData--AspectAspect ArchitecturesArchitectures

„ Data can be grouped into either of 3 architectural categories: Application 1. Structured data of the kind stored in DBs 2. Documents of the kind stored in document management systems Driver Manager 3. Multimedia data of the kind stored in media servers

„ „ Structured data (JDBC/ODBC) Driver Accessed either directly via a web extension (for 2-tier) or over app server (for n-tier). Since DB technology are highly mature, Database they are easy to integrate Easy to implement ¾ APIs are available to access DBs (e.g., JDBC, ODBC)

SWE 444: Internet & Web Application Development 2.93 DataData--AspectAspect ArchitecturesArchitectures

„ WebWeb DocumentDocument ManagementManagement

SWE 444: Internet & Web Application Development 2.94 DataData--AspectAspect ArchitecturesArchitectures

„ WebWeb MultimediaMultimedia Management:Management: PointPoint--toto--pointpoint

SWE 444: Internet & Web Application Development 2.95 2.52.5 WebWeb AccessibilityAccessibility OverviewOverview

„ TheThe CaseCase forfor UsabilityUsability

„ DefiningDefining WebWeb UsabilityUsability

„ GeneralGeneral DesignDesign GuidelinesGuidelines

„ UsabilityUsability EngineeringEngineering

„ WebWeb AccessibilityAccessibility inin DepthDepth

SWE 444: Internet & Web Application Development 2.97 WhyWhy isis UsabilityUsability Important?Important?

„ ““MissionMission criticalcritical”” WebWeb applicationsapplications

„ PoorPoor designdesign leadsleads toto lostlost time,time, productivityproductivity

„ YourYour websitewebsite speaksspeaks forfor youryour organizationorganization

Customers have choices Easy come, easy go

„ DiverseDiverse contextscontexts

Proliferation of web-enabled devices Increasing adoption by special needs groups – ex. seniors

SWE 444: Internet & Web Application Development 2.98 TopTop 77 GripesGripes

„ Contact information – address or phone number is buried

„ Search function is not visible or unclear as to functionality

„ No easy way to get back to critical points

„ Pages that should load fast don’t (e.g. Main page or key link page)

„ Slow page loads are not incremental

„ “What’s new” is old

„ Back button requires a repost of data

SWE 444: Internet & Web Application Development 2.99 Example:Example: SISSIS WebsiteWebsite

SWE 444: Internet & Web Application Development 2.100 UsabilityUsability DefinedDefined

„ ISO/IECISO/IEC standardstandard definitiondefinition (1998):(1998):

“[T]he extent to which a product can be used by specified users within a specified usage context to achieve specified goals effectively, efficiently, and satisfactorily.”

„ UsabilityUsability engineeringengineering isis anan ongoing,ongoing, butbut criticalcritical processprocess

Define user and task models Iteratively test and reevaluate User-based vs. expert methods

SWE 444: Internet & Web Application Development 2.101 DefiningDefining UsabilityUsability inin WebWeb AppsApps

„ TraditionalTraditional softwaresoftware usabilityusability specificsspecifics dodo notnot necessarilynecessarily carrycarry overover toto thethe Web:Web:

People use your application immediately. No manual or trainers No salespeople

„ HowHow toto categorizecategorize users?users?

First-time or returning? Expert or novice? Broadband or dial-up? Desktop or mobile?

SWE 444: Internet & Web Application Development 2.102 HumanHuman InformationInformation ProcessingProcessing

„ HumanHuman cognitioncognition placesplaces aa criticalcritical rolerole inin useruser interfaceinterface design.design.

Perception ¾ Positioning, grouping, arranging ¾ Perceiving shapes and relationships Memory ¾ Limitations of working memory ¾ Chunking, 7 + 2 (Miller) Attention ¾ Focusing on one aspect ¾ Movement, color schemes

SWE 444: Internet & Web Application Development 2.103 GeneralGeneral DesignDesign GuidelinesGuidelines

„ DesignDesign guidelinesguidelines representrepresent bestbest practicespractices

„ OKOK forfor ““generalgeneral”” usersusers

Normal cognitive ability Normal audiovisual abilities

„ SomeSome guidelinesguidelines maymay bebe inappropriateinappropriate forfor audienceaudience membersmembers withwith specialspecial needs.needs.

Ex. Navigation elements for schizophrenics

„ MoreMore rigorousrigorous usabilityusability engineeringengineering techniquestechniques shouldshould bebe employedemployed (later(later inin lecture.)lecture.)

SWE 444: Internet & Web Application Development 2.104 GuidelinesGuidelines –– ResponseResponse TimesTimes

„ As response times increase, user satisfaction decreases Anything greater than 3 seconds, and the user becomes aware she’s waiting After 10 seconds, user gives up

„ Optimize, or minimize graphics

„ Consider breaking up large pages.

„ - use “width” & “height” attributes

„ Don’t forget your dial-up audience! Home page size should be < 50Kb Provide warnings (MPG – 2.5Mb)

„ http://www.websiteoptimization.com/services/analyze/wso.php

SWE 444: Internet & Web Application Development 2.105 GuidelinesGuidelines –– EfficiencyEfficiency

„ MinimizeMinimize distancedistance betweenbetween clickableclickable elementselements (while(while keepingkeeping effectiveeffective sizing)sizing)

„ AvoidAvoid frequentfrequent changeschanges betweenbetween micemice andand keyboardskeyboards

„ TabTab--friendlyfriendly forfor texttext--basedbased browsersbrowsers

„ MinimizeMinimize clicksclicks toto accomplishaccomplish taskstasks (rule(rule ofof thumb:thumb: nono moremore thanthan 44 clicks)clicks)

„ NotNot soso good:good: http://http://www.brown.eduwww.brown.edu

SWE 444: Internet & Web Application Development 2.106 GuidelinesGuidelines –– ColorsColors

„ Colors have different meaning depending on your audience

Cultural differences Domain-specific meanings Warm vs. cool colors

„ Minimize the number of colors

„ Avoid extreme hues, highly saturated colors

„ How does your site look on a CRT? LCD?

„ Supplement colors with other visual aids for those with limited color vision.

SWE 444: Internet & Web Application Development 2.107 GuidelinesGuidelines –– TextText LayoutLayout

„ ScreenScreen vs.vs. PaperPaper

„ ConsiderConsider differentdifferent windowwindow sizessizes

Avoid multiple columns Avoid fixed width

„ ReadabilityReadability

Sans-serif for screen, serif for print Avoid patterns, low-contrast background Short paragraphs

„ AllowAllow forfor useruser--selectedselected fontfont--sizessizes

SWE 444: Internet & Web Application Development 2.108 GuidelinesGuidelines –– PagePage StructureStructure

„ DisplayDisplay considerationsconsiderations

„ UseUse relativerelative positioningpositioning overover absolute.absolute.

„ VerticalVertical scrollingscrolling isis fine;fine; horizontalhorizontal scrollingscrolling isis NOT.NOT.

„ ImportantImportant elementselements shouldshould ALWAYSALWAYS bebe visible.visible.

„ MakeMake pagepage printprint--friendlyfriendly oror provideprovide alternativealternative stylestyle andand printprint button.button.

„ NotNot--soso--good:good: http//http//www.arngren.netwww.arngren.net

SWE 444: Internet & Web Application Development 2.109 GuidelinesGuidelines –– NavigationNavigation

„ ProvideProvide youryour useruser withwith aa mentalmental modelmodel ofof thethe sitesite ASAP.ASAP.

Intuitive navigation elements Site map Breadcrumbs

„ PulldownPulldown menus?menus?

Pros: Efficient use of space Cons: Key information is hidden

„ NotNot--soso--good:good: BrownBrown Univ.Univ. (circa(circa 2005)2005)

SWE 444: Internet & Web Application Development 2.110 GuidelinesGuidelines –– MulticulturalMulticultural

„ LocationLocation isis typicallytypically notnot aa constraintconstraint onon thethe Web.Web.

„ ““LowestLowest commoncommon denominatordenominator”” applies:applies:

Avoid over-expressive colors Symbols Language Information representation (date/time formats)

„ PresentPresent formform elementselements consistentlyconsistently

„ SelfSelf--selection?selection?

SWE 444: Internet & Web Application Development 2.111 GuidelinesGuidelines –– EstablishingEstablishing TrustTrust

„ LoyaltyLoyalty isis fleeting,fleeting, butbut instillinginstilling confidenceconfidence duringduring aa transactiontransaction isis highlyhighly criticalcritical

„ WaysWays toto buildbuild trust:trust:

About us Easy-to-access Contact Information Interaction mechanisms (FAQ, chat rooms) Security & privacy policies Exchange and warranty policies Customer relations management

SWE 444: Internet & Web Application Development 2.112 GuidelinesGuidelines –– AnimationsAnimations && IconsIcons

„ Remember human attention – animations are typically distracting

Draw attention to an important function Explain something

„ Iconography should be used to support navigation understanding

Map to commonly-known metaphors Use redundant text and “alt” text! Not appropriate for (some) cognitive-impaired users

„ Not-so-good: http://www.globalaigs.org/

SWE 444: Internet & Web Application Development 2.113 GuidelinesGuidelines –– ConsistencyConsistency

„ ConsistencyConsistency keepskeeps learninglearning toto aa minimum;minimum; usersusers dondon’’tt wantwant toto havehave toto think!think!

„ IdentityIdentity cancan bebe setset byby consistentconsistent componentscomponents

Header: home, logo, navigation, search, help Footer: author, modification, contact

„ ConsistentConsistent designdesign helpshelps usersusers avoidavoid gettinggetting lost,lost, especiallyespecially whenwhen jumpingjumping toto differentdifferent subsub--unitsunits ofof anan organization.organization.

SWE 444: Internet & Web Application Development 2.114 UsabilityUsability EngineeringEngineering

„ ConsistsConsists ofof 44 phasesphases thatthat areare essentiallyessentially parallelparallel toto thethe WebWeb EngineeringEngineering processprocess

Requirements Analysis Design Implementation Operation

SWE 444: Internet & Web Application Development 2.115 UserUser--CenteredCentered vs.vs. UsageUsage--CenteredCentered

Phase Focal Points User-Centered Usage-Centered

(Traditional) (Web) Requirements Meetings, interviews, Competitive analysis; focus groups Task analysis & models Design & User requirements Models Implementation Direct user participation Inspection & remote testing Operation Training, evaluation of Log file analysis;analysis; server help-desk logs stats; user feedback analysis

SWE 444: Internet & Web Application Development 2.116 RequirementsRequirements AnalysisAnalysis

„ SystemsSystems AnalystAnalyst && UsabilityUsability ExpertExpert taketake thethe lead:lead:

Competitive Analysis Define qualitative/quantitative goals ¾ Information, Entertainment, Exchange (Siegel) ¾ Make them concrete and testable! User-centered: build user profiles Usage-centered ¾ Task analysis ¾ Ease-of-use or Ease-of-learning?

SWE 444: Internet & Web Application Development 2.117 InteractionInteraction andand DesignDesign

„ Initially,Initially, thethe InterfaceInterface DesignerDesigner buildsbuilds aa conceptualconceptual modelmodel

Based on core use cases Shows the basic structure

„ GettingGetting feedbackfeedback fromfrom potentialpotential usersusers

Storyboards & Paper Mock-ups Card-sorting (Navigation)

„ UsabilityUsability expertexpert providesprovides inputinput afterafter thisthis firstfirst round.round.

SWE 444: Internet & Web Application Development 2.118 InteractionInteraction andand DesignDesign

„ Designer and coders can then elaborate on the details

„ Additional user testing:

Prototypes – exhibit some functionality Usability Tests – real context, real tasks.

„ Remote usability testing

Sample of representative users Client-Logging software Web-cams if possible Better external validity & lower costs(?)

SWE 444: Internet & Web Application Development 2.119 CodingCoding andand PostPost--DeploymentDeployment

„ UsabilityUsability ExpertExpert assumesassumes thethe rolerole ofof thethe QualityQuality AssuranceAssurance manager.manager.

Consistency? Observed guidelines & standards? Adhered to (current) requirements?

„ BringBring samesame usersusers backback inin forfor testing,testing, ifif possible.possible.

„ Document,Document, document,document, document!document!

SWE 444: Internet & Web Application Development 2.120 MoreMore onon WebWeb AccessibilityAccessibility

„ People with disabilities are adopting the Web in greater numbers.

„ Tim Berners-Lee stressed universal access to the Web as essential.

„ 20% of the world’s population have disabilities in at least one of the senses.

„ Key take-aways:

Designing for special needs doesn’t necessarily require reinventing your application. Doing so can also help “general” users

SWE 444: Internet & Web Application Development 2.121 WebWeb AccessibilityAccessibility InitiativeInitiative (WAI)(WAI)

„ WebWeb ContentContent AccessibilityAccessibility GuidelinesGuidelines 1.01.0 (WCAG,(WCAG, 1999)1999) publishedpublished byby thethe W3CW3C’’ss WAIWAI

„ 33 PrioritiesPriorities

1) Must 2) Should 3) May

„ DefinesDefines GroupsGroups

„ WCAGWCAG 2.0?2.0?

SWE 444: Internet & Web Application Development 2.122 SpecialSpecial NeedsNeeds GroupsGroups

„ WAIWAI identifiesidentifies thethe followingfollowing specialspecial needsneeds groups:groups:

Visual Hearing Physical (Motor) Speech Cognitive Age-related

SWE 444: Internet & Web Application Development 2.123 VisualVisual ConsiderationsConsiderations

„ High-contrast color schemes

„ Large font sizes; ability to change fonts

„ Use alt attributes!

„ tags in forms

„ Avoid frames

„ Access key attributes, and rapid tabbing

„ Many software packages for text-to-speech Some integrate with browsers OK Firefox plug-in: FireVox

„ Good example: http://www.afb.org

SWE 444: Internet & Web Application Development 2.124 AuralAural ConsiderationsConsiderations

„ CaptioningCaptioning audioaudio andand videovideo

Synchronized Multimedia Integration (SMIL) Good QuickTime, RealAudio Support W3C standard

„ ComplementComplement texttext withwith simplesimple imagesimages

„ Clear,Clear, simplesimple languagelanguage

SWE 444: Internet & Web Application Development 2.125 PhysicalPhysical (Motor)(Motor) ConsiderationsConsiderations

„ MayMay requirerequire specializedspecialized hardwarehardware

Mice Keyboards Voice Recognition

„ AvoidAvoid elementselements thatthat requirerequire timetime--dependentdependent responsesresponses oror preciseprecise mousemouse movements.movements.

„ AccessAccess keykey attributesattributes

„ ConsistentConsistent tabtab orderingordering inin forms.forms.

SWE 444: Internet & Web Application Development 2.126 CognitiveCognitive ConsiderationsConsiderations

„ MostMost neglectedneglected ofof thethe groupsgroups

Little research in terms of Web usability “Reinvent the wheel” mentality

„ TypicallyTypically havehave troubletrouble dealingdealing withwith abstractionsabstractions –– keepkeep thingsthings concreteconcrete

„ StillStill aa relativelyrelatively newnew researchresearch fieldfield

Approaches may vary. No distracting elements Emphasis on consistent navigation High-contrast; large font sizes

SWE 444: Internet & Web Application Development 2.127 HelpfulHelpful ToolsTools && ResourcesResources

„ DevelopmentDevelopment

Firefox Developer Toolbar (http://chrispederick.com/work/web-developer/)

„ TestingTesting

http://webxact.watchfire.com (Bobby) http://www.webaim.org (WAVE tool)

„ SectionSection 508508 ofof thethe RehabilitationRehabilitation ActAct

http://www.section508.gov

SWE 444: Internet & Web Application Development 2.128