Transcript Document
Paper Prototyping Source: http://www.google.com Paper Prototyping • a method of brainstorming, designing, creating, testing, refining and communicating user 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. 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 Paper Prototyping 1. 2. 3. 4. 5. 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. 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 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. Basic wireframe Source: http://www2.cwrl.utexas.edu/~wolff/sts311s06/projects/p1/g1/ 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 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! 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. 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. User Requirements Analysis Source: http://web2.concordia.ca/Quality/images/process%20analysis%20cycle.gif 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. 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) Types of web sites Different types of organisations • Educational • Governmental • Commercial • Community 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 Designing a web site Agreed with the client o Content o Visual Design o Technical Design 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) 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 Visual Design Should specify: • • • Overall impression (friendly, formal, casual) Required Components (company logo or colours) Colour Scheme (background, text, spot colours) 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 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) Technical Design (contd.) Concentrates on usability issues: • • Browser compatibility (minimise variations) Maintenance (site should be easy to maintain)