Paper Prototyping

1. Paper Prototyping Source: http://www.google.com

2. 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 is platform independent and can be used for web sites, web applications, software and even hardware.

3. Paper Prototyping "Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer’, who doesn’t explain how the interface is intended to work.“Paper Prototyping, Carolyn Snyder, p. 4

4. 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 windows, menus, 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.

5. Comps • Comps (compositions) are visual representations – usually of a web site – that shows 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

6. 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.

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

8. Storyboards • A storyboard is a series of drawings or images that represents how an interface would be used to accomplish a particular task (basically a flowchart). • 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

9. 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!

10. 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.

11. 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.

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

13. 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.

14. 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)

15. Types of web sites Different types of organisations • Educational • Governmental • Commercial • Community

16. 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

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

18. 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)

19. 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

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

21. 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

22. 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)

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