Web Methodology

1. Web Methodologies Web Methodology

2. Web Methodologies What we are going to do… • Web Design Methodology • WSDM - Methods in General • EXAMPLE - Storyboard Faculty of Computing Engineering and Technology

3. Web Methodologies Introduction Web Design Methodology • Client • Requirements • Design • Prototype • Implement Faculty of Computing Engineering and Technology

4. Web Methodologies Web Design Methodology - Client • Define the client's goals • Create a project plan • Deliverables (documents and prototypes) • Timing • Quote • Gain approval of the client Faculty of Computing Engineering and Technology

5. Web Methodologies Requirements Web Design Methodology • Define audienceWho is the web page for? • Define the problem What information will be required by the end users?What information does the client want to display?What information does the client not want to display? • Interview end users & client staff Faculty of Computing Engineering and Technology

6. Web Methodologies Design Web Design Methodology • Categories • Obtain content from client • Create Conceptual design and layout • Produce maps • Produce paper prototypes • Finalize Content Faculty of Computing Engineering and Technology

7. Prototype Web Design Methodology • Implement • Refine textual content • Obtain new/Modified requirements • Perform user testing • Test/Debug • Make any changes • Looping back to Stage 1 (Client) • Repeating Faculty of Computing Engineering and Technology

8. Implement Web Design Methodology • Place page(s) on to a server • Market the pages Faculty of Computing Engineering and Technology

9. Web Site Design Method (WSDM) WSDM pronounced “Wisdom” Faculty of Computing Engineering and Technology

10. Web Site Design Method (WSDM) - What it covers • Feasibility • Analysis • Design • Implementation • Testing Faculty of Computing Engineering and Technology

11. User modelling Conceptual design Object modelling User classification User class description Navigational design Implementation Implementation design Implementation WSDM Overview Website Faculty of Computing Engineering and Technology

12. WSDM Phases and Steps Phase 1. User modeling - All users have specific information wants and needs, we need to know these and design for them Step 1.1. User classification - Identify users and classify them into specific “user classes” (e.g. lecturer, or student etc.). - All user classes exist under a wider overall and complete set of given users - We need at this point to also identify activities within the website and the relationship a given user type has with these Faculty of Computing Engineering and Technology

13. WSDM Phases and Steps Step 1.2. User class description - Further user classes analysis - Identify specific information requirements, the “conceptual what” that the user class wants - May diverge on actual information presentation, e.g. salesman and car buyer have different requirements for advertising information - Analyze characteristics of user class, the “conceptual who”, e.g. levels of experience, frequency of use, motivation, & language etc. - If different characteristics emerge, perspectives result Faculty of Computing Engineering and Technology

14. Specification Model Engine Trim Number of doors Extras available Advertising media Leaflet Full brochure CD-ROM Further request Has For a WSDM Phases and Steps Phase 2. Conceptual design Step 2.1. Object modeling - We formally describe information requirements for the different user classes and their perspectives - Done via User Object Models (UOM), gives a view of information required in the system Faculty of Computing Engineering and Technology

15. WSDM Phases and Steps • Step 2.2. Navigational design • Construct a conceptual navigation model • It consists of a number of navigation tracks that describe how different users navigate through the site • Each perspective (POM model) has its own navigation track Faculty of Computing Engineering and Technology

16. WSDM Phases and Steps • Phase 3. Implementation • Step 3.1. Implementation design.Design the look and feel, based on conceptual designUses standard guidelines, from HCI, multimedia etc. to create the interface for the website • Step 3.2. Actual implementationProduces the end product of a web-siteConsiders database storage Faculty of Computing Engineering and Technology

17. WSDM Example - Storyboard What is storyboarding? • Prototyping tools provide a means of quickly developing the front end of an application in order to seek user approval for it • A storyboard is a form of pre-prototyping – it allows the designer to provide the user with a visual image of what the front end will look like in order to seek user approval prior to prototype development. Faculty of Computing Engineering and Technology

18. How are storyboards used? WSDM Example - Storyboard • Storyboards can give an idea of the look and feel of an application • A good method is to start with a very basic storyboard and gradually add features gaining approval at each stage. • The success of this plan would depend on the extent of the co-operation of the user Faculty of Computing Engineering and Technology

19. Features shown by storyboards WSDM Example - Storyboard • Screen Layout • Colours • Features which provide Impact • Navigational features • Features which provide continuity • Multimedia Content Faculty of Computing Engineering and Technology

20. 1. Screen Layout WSDM Example - Storyboard Navigation Bar Title Bar • The layout of each screen should be defined with boxes • Each box should be annotated to give the user an idea of what the contents will be..eg. text, graphics etc. Graphics Index Text Faculty of Computing Engineering and Technology

21. WSDM Example - Storyboard 2. Colour • Which colours are used • Where • Why - Colours can have a meaning • Red - danger / warmth • Green – normality • Blue – cold Faculty of Computing Engineering and Technology

22. 3. Features which provide Impact WSDM Example - Storyboard • Special Effects • Which effects • Why • Variation on a theme • Light and shade • Dull/bright • Textures • Use of Metaphor Faculty of Computing Engineering and Technology

23. 4. Features which provide continuity WSDM Example - Storyboard • Which features • Running headers • Colour • Font • Screen Layout • Graphics • Sound Faculty of Computing Engineering and Technology

24. 5. Navigational features WSDM Example - Storyboard • Type • Linear/non-linear • Hot word/area, Menu button, arrow • Positioning on screens • Icons/wording to be used • Colour • Size Faculty of Computing Engineering and Technology

25. 6. Multimedia Content WSDM Example - Storyboard • What is included • Multimedia type and description • Where it is included • positioning • How it is included • Any special style/effects eg. rotating, blinking • When • Always there • Available on selection • Background Faculty of Computing Engineering and Technology

26. Advantages of storyboards WSDM Example - Storyboard • Can be paper based • Application independent • Little or no skills required ! • Apart from the ability to think and design Faculty of Computing Engineering and Technology

27. WSDM Example - Storyboard • Simple paper based technique • Basically pictures and text to roughly illustrate the make up / appearance of a screen • Not intended to be totally accurate, • Limited on interaction, but shows screen sequences • Each screen is accompanied by text to describe the scene, user interaction and any dynamic media (e.g. sound) shown on a timeline Faculty of Computing Engineering and Technology