Paper Prototyping

1. Paper Prototyping Source: http://www.webhostdesignpost.com/img/website_storyboarding.jpg

2. Aim of the session • To explain the concept of paper prototyping, introduce you to the stages of web site development and demonstrate how storyboards are created.

3. Objectives of the session • Define paper prototyping • Define storyboards and wireframes • Explain the benefits of paper prototyping • Define the stages of web site development • Understand the concept of target audience • Explain the technical, visual and content requirements when designing a web site • Allow you to create storyboards of your own

4. Paper Prototyping • a method of brainstorming, designing, creating, testing, refining and communicatinguser interfaces. • it fosters development of products that are more useful, intuitive, efficient and pleasing. • the technique can be used for web sites, web applications, software and even hardware.

5. Paper Prototyping • Meeting with other team members to choose type of user who represents most important audience. • Determine typical tasks that will be performed by the user. • Make hand-sketched versions of pages, windows, etc. needed to perform those tasks (prototype). • Conduct usability tests (ask a user to interact with prototype). • Discover interface parts that don’t work well and modify them.

6. Compositions • Comps (compositions) are visual representations – usually of a web site – that show the look of the interface, including colours, fonts, layout, logos, artwork, and so on. • Mainly used in internal discussions of a site’s visual design. • Not usually intended (or suitable) for usability testing because users can’t interact with them. Source: http://www.google.com

7. Wireframes • A wireframe defines the page layout for a web site, showing what content goes where. • Used to determine the page layout and navigation. • When a wireframe with addition of realistic content could be printed out and tested as a paper prototype.

8. Basic wireframe Source: http://www2.cwrl.utexas.edu/~wolff/sts311s06/projects/p1/g1/

9. Storyboards • A storyboard is a series of drawings or images that represents how an interface would be used to accomplish a particular task. • Typically used to understand the flow of the user’s work and how the interface will support each step. Source: http://www.unf.edu/~ccavanau/SchoolWebStoryColor.htm

10. Storyboards Task • You are working for a web design company • Your boss has asked you to create three storyboards for a small shoe shop selling men’s and women’s shoes • The storyboards should be for a home page, and one page for men’s and women’s shoes. • You have 30 minutes to come up with the storyboards.

11. Navigational aspects • A site map can be used to demonstrate how navigation of your web site will be achieved. Source:http://www.cabrillo.edu/~dambrosini/189Web/images/StoryboardSample.jpg

12. Sitemap task • You are working for a web design company • Your boss has asked you to create a site map for a small shoe shop selling men’s, women’s and children shoes and should include 7 pages of your choice • You have 15 minutes to come up with the site map.

13. Benefits of Paper Prototyping • Provides user feedback early in the development process. • Promotes rapid development. • Does not require any technical skills • Encourages creativity in the development process. • Paper prototyping lets you make (and fix) most of the mistakes before the product goes out the door. • Maximum feedback for minimum effort! • However it also has difficulty in detecting some classes of problems!

14. Usability • Intention is to make user interface better for its intended audience and purpose. • The more you give away, the more you have. • You will be able to recognise good usability before you can define it - “I know usability when I see it". • You may know that you have it right when your users don’t talk about how usable the product is.

15. User Requirements Analysis Stages of web site development • Analysis • Design • Implementation • Evaluation (Review) Web designers aim to investigate and then meet the needs of the client.

16. User Requirements Analysis Source: http://web2.concordia.ca/Quality/images/process%20analysis%20cycle.gif

17. User Centred Design Stages of web site development • User Requirements Analysis(design specification created) • Prototyping & implementation • Technical testing and publishing • Evaluation(against the specification) This design involves the user at every stage of the project. A prototype is created which the user reviews.

18. Functions of web sites Variety of purposes • To inform (e.g. magazines, newspapers, television, radio)(examples: BBCi, CNN, Virgin Radio, etc.) • To promote and sell(e.g. rock bands, tourist attractions, airlines, banks)(examples: Amazon, Lufthansa, BA, DirectLine) • To interact(e.g. councils, clubs, technical forums(examples: NHS, BBC)

19. Target Audience Different types of target audience • Public (general) • Specified age bands • Communities of interest • Shoppers/Travellers • Internal (company) use Source: http://www.philoye.com/work/united_redesign/united_redesign_3.shtml

20. Target Audience Task • Your client is a small shoe shop • You are designing a new web site for them • You have been asked to identify the target audience for the shoe shop • You have 10 minutes to come up with appropriate suggestions.

21. Designing a web site Agreed with the client • Content • Visual Design • Technical Design

22. Content all the information that the site will contain (including interactive features) • How to contact the organisation(online form, email address, etc.) • Basic company details(who and what) • Privacy policy(if holding visitor information on record)

23. Content (contd.) all the information that the site will contain (including interactive features) • Information to be provided(text, video, photographs, sound, etc.) • Main categories of information(navigational headings) • Style of language

24. Visual Design Should specify: • Overall impression(friendly, formal, casual) • Required Components(company logo or colours) • Colour Scheme(background, text, spot colours)

25. Visual Design (contd.) Should specify: • Text Appearance(length of paragraphs, text styles, etc.) • Use of images(for information, decoration or to create a style) • Use of animation and video • Layout of pages

26. Technical Design Concentrates on usability issues: • Navigation(the way the visitor finds their way around the site) • Use of search tools(keyword search boxes, site maps, etc.) • Download times(pages should download within an acceptable time)

27. Technical Design (contd.) Concentrates on usability issues: • Browser compatibility(minimise variations) • Maintenance(site should be easy to maintain)

28. Design Requirements Task • Your client is a small shoe shop • You are designing a new web site for them • You have been asked to specify their content, visual and technical requirements • You have 25 minutes to come up with a list of requirements.