1 WEB Engineering Introduction to Electronic Commerce COMM1Q

WEB Engineering2 2 Contents u u The Attributes of Web-Based Applications u u The Web Eng. Process u u A Framework for Web Eng. u u Formulating/Analysing Web-Based Systems u u Design for Web-Based Applications u u Testing Web-Based Applications u u Management Issues

WEB Engineering3 3 The Attributes of Web-based Applications (1) The Situation Quality Attributes The Technologies

WEB Engineering4 3 The Attributes of Web-based Applications The Situation - - the vast majority of web-based applications are: u u network intensive, u u content-driven, u u in continuous evolution.

WEB Engineering5 3 The Attributes of Web-based Applications Quality Attributes - General quality attributes apply as much to web-based apps as to other s/w product. The difference is in emphasis on Usability, Functionality, Reliability, Maintainability

WEB Engineering6 3 The Attributes of Web-based Applications The Technologies - - development of web apps uses : u u component-based development /software engineering, u u security paradigms - methods, tools, procedures, u u Internet standards (HTML, XML, de facto media standards, etc.).

WEB Engineering7 Process The Web Eng. Process is shaped by:   Networks,   Content   as much a material and design issue as a functional issue   Continuous evolution

WEB Engineering8 A Framework for Web Eng. Remembering the continuously evolving nature of web apps, a spiral model: formulation, planning, analysis, engineering, page generation and testing, customer evaluation engineering: architectural / navigation / interface design content design / production

WEB Engineering9 Formulation, Planning and Analysis Formulation - ask the questions to identify the objectives and audience of the web app. Planning - costs, resources, risks, plans, timescale (always compressed!). Analysis -content, interaction, functional, confign. (cf. requirements analysis)

WEB Engineering10 Engineering/Design Stages:   Architecture (structures),   Architecture (patterns),   Navigation,   Interface,   Production. (refer to checklist, etc. at back of presentation)

WEB Engineering11 Testing Web Apps u u Review content u u Review design u u Processing components are unit tested u u Architecture integration tests u u Complete Web app tested (functionality + content delivery) u u Environment (operating systems) compatibility testing u u End-user tests

WEB Engineering12 Management  The Web team - different people for different roles  Project management - outsourcing issues estimation - time, schedule, resources, etc. risk estimation  Scope  Configuration Management - content control people / authority to make, approve, implement changes scale (change to scale = change to type of control) ‘ownership’ of components (“rights and responsibilities”)

WEB Engineering13 Enterprise Usability Management: A Compass for Top Management   Equate usability with competitiveness and quality in the enterprise   Trace cost of usability problems to the source   Incorporate design and evaluation cycles into product development   Balance the use of static design standards and dynamic research results   Systematise the learning of design principles and skills   Develop team evaluation methods for team design projects.   Align feedback loops from all sources toward new product design   Maintain cross-project collaboration in the product design process   Align all forms of communication to customers who use the products   Participate in growing the base of knowledge about usability.

WEB Engineering14 Ten Steps to Product Usability: A Roadmap for Project Managers u u Set strategic and detailed usability objectives u u Develop and incorporate user profiles u u Prioritise critical product components and task flow u u Identify a design team and clarify roles u u Define the UI design process (traditional GUI and Web interfaces) u u Develop a usability evaluation strategy a usability test plan.... when should you test? how should you structure the test? u u Establish product design guidelines (traditional GUI and Web designs) u u Develop a UI specifications documentation procedure u u Develop a user assistance strategy help, tutorials, splash screens, etc. that make-up the user assistance strategy u u Maintain a feedback channel for users

WEB Engineering15 Ten Elements of Usability: A Yardstick for Designers: u u Clarify the core concepts of the design u u Plan and maintain consistency (internal and external consistency of UI design) u u Fit content to customers who use the product u u Provide reassuring and effective feedback u u Clarify interaction rules (dialog design, data entry, selection, modes, drag and drop, etc.) u u Structure navigation clearly (menus, tree structures) u u Use plain terminology (terminology within the user's knowledge domain - know your user) u u Optimise user assistance (help tools /on-line help and documentation) u u Optimise visual design (graphics, layout, icons, metaphors, real world models) u u Design for the context of use

WEB Engineering16 Checklist for Testing Your Web Pages for Accessibility u u Turn off graphics, make sure the ALT text displayed makes the page usable u u Turn off sounds, make sure no important instructions are lost u u Turn off style sheets, to make sure the page is still readable u u Use the High Contrast option in the Accessibility Options section of Control Panel, restart the browser, make sure the page is still readable. u u Use Custom Font Sizes in the Display section of Control Panel u u Use the largest font size supported by the browser (the largest is only available when High Contrast mode is turned on) u u Resize the browser window larger and smaller u u Navigate using the keyboard, make sure TAB traverses all links in reasonable order and that CTRL+TAB moves between panes or sections u u Select all text and copy it to the clipboard, ensure it makes sense when pasted into a word processor u u Use an analysis tool, such as ‘Bobby’, to examine your pages