High-Fidelity PrototypingAgenda“Culture” of Prototyping (Relationship bet. the prototype and the final product)“Dimension” of Prototyping (Degree or depth of the prototype’s functionality)DimensionsConstructing a Hi-Fi ModelSlide 7Clothes-Shopper Revisited (Tool = Visual Basic)Clothes-Shopper (Profile Setup)Clothes-Shopper (Early Main Page)Clothes-Shopper (Later Main Page)Slide 12Slide 13Clothes-Shopper (The Next Iteration)Slide 15Slide 16Slide 17Why Do We Use Tools to Prototype?Prototyping ToolsHTMLHTML (Creating a basic document)HTML (Sample coding)HTML (Forms)Hypermedia SystemsApple HyperCard (Overview)Apple HyperCard (The Look)Apple HyperCard (Scripting Language = HyperTalk)Macromedia Dreamweaver (Overview)Macromedia Dreamweaver (The Look)Macromedia Dreamweaver (JavaScript and Behaviors)JavaScript (Directs user to a webpage based on browser version)JavaScript (Another example)JavaScript (Results from previous slide)Microsoft Frontpage (Overview)Microsoft Frontpage (The Look)Microsoft Frontpage (Visual Basic Scripting)Adobe Go Live (Overview)Adobe Go Live (The Look)Director (Overview)Director (The Look)Director (Scripting Language = Lingo)Flash (Overview)Flash (The Look)Visual BasicVisual Basic (The Look)JAVAMicrosoft Access (Overview)Microsoft Access (The Look)Slide 49Slide 50Slide 51Other Prototyping ToolsDetermining Which Prototyping Tool to UseGeneral Pricing of Prototyping ToolsSummaryNext TimeHigh-Fidelity PrototypingIS 485, Professor Matt Thatcher2AgendaAdministriviaHigh-fidelity prototyping–terminology–brief overview of tools3“Culture” of Prototyping(Relationship bet. the prototype and the final product)Rapid prototyping –prototype is “thrown away”–collect info on requirements and test different designsEvolutionary prototyping–initial prototype is constructed, evaluated, and evolved continually until it becomes the final system–most extensive form of prototyping Incremental prototyping–allows large system to be installed in phases to avoid delays between specifications and delivery4“Dimension” of Prototyping (Degree or depth of the prototype’s functionality)Full prototype–complete functionality (lower performance)Horizontal prototype–shows the user-interface but has no functionality behind the action buttons/menusVertical prototype–contains all the high level and low level functionality for a restricted part of a system5DimensionsHardwareUser InterfaceSystems SoftwareData base and TelecommunicationsApplications SoftwareHorizontalPrototypeVerticalPrototype6Constructing a Hi-Fi ModelReview all relevant user design doc’n–task analysis, paper prototypes, user test results, other feedback, etc.Using a “tool”, define windows, controls, and screen layout–Microsoft Access – physical layout, toolbox, and propertiesDevelop inter-window navigation–Microsoft Access – macros and modulesDevelop text entry / display logicDevelop additional functionality as called for in the prototype plan–Microsoft Access – bound, unbound, and calculated controls7Constructing a Hi-Fi ModelUnit test the prototype–make sure each button click does what it is suppose to doComplete doc’n to identify functionality that will not be prototyped at this timeDetermine technical constraintsReview prototype with the team before review with users8Clothes-Shopper Revisited(Tool = Visual Basic)9Clothes-Shopper(Profile Setup)10Clothes-Shopper(Early Main Page)11Clothes-Shopper(Later Main Page)121314Clothes-Shopper(The Next Iteration) vs.What’s the difference?OldNew151617Early DesignBrainstorm different representationsChoose a representationRough out interface styleScenario-centered walkthrough (Storyboarding)Low-fidelity prototypesUser testingHigh-Fidelity horizontal prototypesFine-tune UI, screen design, color, fonts, dialog, etc.High-Fidelity vertical prototypesAdd more functionality, perform more usability testing, and do more redesignLimited field testing and alpha/beta testingHigh-Fidelity full prototypes or working systemsLate DesignHeuristic evaluationUser testingHeuristic evaluation18Why Do We Use Tools to Prototype?FasterEasier to incorporate testing changesEasier to involve variety of specialistsSeparation of UI code from application code–easier to change and maintainDon’t have to worry about:–code–quality assurance–code management19Prototyping ToolsHypermedia systems–Hypertext Mark-Up Language (HTML), Hypercard (Apple), Dreamweaver (Macromedia), FrontPage (Microsoft), Go Live (Adobe), Visio (Microsoft)Graphical/animation tools–Director (Macromedia), Flash (Macromedia)Programming tools (UI builders)–Visual Basic, JAVAOther tools–Access, Excel, PowerPoint, Word (all Microsoft)20HTMLSet of logical codes (markup) that define the appearance of a web document and its content–tags, elements, attributes–<FONT=“blue” SIZE=“+1”>This text would be blue and one size larger than normal</FONT> –<body BGCOLOR=“#FFFFFF”>Problems with hand coding html documents–takes time to learn– not visual »while html may be preferred by programmers it is not necessarily preferred by designers for this reason–more difficult to create and maintain certain elements, like tables–programming issues and frustrations for novices–more difficult to incorporate multimedia, animation, etc.21HTML(Creating a basic document)<html><head><title> </title></head><body></body></html>22HTML(Sample coding)23HTML(Forms)•<INPUT TYPE=“Text”>•creates a text box•attributes include Type, Name, Value, Size, etc.•other types include•“Checkbox”, ”Password”, ”Radio”, ”Button”, “Submit”, “Reset”, etc.•JavaScript•adds functionality to the web page •we’ll see examples in a few slides24Hypermedia SystemsComputer applications that structure information in a navigable form–html code is generated automatically as text, images, buttons, etc. are added usually by drag-and-drop operationsAdvantages–common tools–relatively low cost–easy to learn, use, and maintain–easy to reach a high level of software quality–scripting languages to add functionality–can be used to implement final UI (“evolutionary”)25Apple HyperCard(Overview)Main components–stacks (e.g., book of pages or a rolodex of cards) –cards (e.g., pages in a book, cards in a rolodex,)–backgrounds (template shared by cards in a