Transcript Document
Paper Prototyping Source: http://www.webhostdesignpost.com/img/website_storyboarding.jpg 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. 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 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 can be used for web sites, web applications, software and even hardware. 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 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. 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 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. 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 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. 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 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. 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) 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 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. 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) 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.