1 / 56

High-Fidelity Prototyping

High-Fidelity Prototyping. IS 485, Professor Matt Thatcher. Agenda. Administrivia High-fidelity prototyping terminology brief overview of tools. “Culture” of Prototyping (Relationship bet. the prototype and the final product). Rapid prototyping prototype is “thrown away”

finian
Télécharger la présentation

High-Fidelity Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. High-Fidelity Prototyping IS 485, Professor Matt Thatcher

  2. Agenda • Administrivia • High-fidelity prototyping • terminology • brief overview of tools

  3. “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 delivery

  4. “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 system

  5. Dimensions Vertical Prototype Horizontal Prototype User Interface Applications Software Systems Software Data base and Telecommunications Hardware

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

  7. Constructing 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 users

  8. Clothes-Shopper Revisited(Tool = Visual Basic)

  9. Clothes-Shopper(Profile Setup)

  10. Clothes-Shopper(Early Main Page)

  11. Clothes-Shopper(Later Main Page)

  12. Clothes-Shopper(The Next Iteration) New vs. Old What’s the difference?

  13. Early Design Low-fidelity prototypes Brainstorm different representations Choose a representation Rough out interface style Scenario-centered walkthrough (Storyboarding) Heuristic evaluation User testing Fine-tune UI, screen design, color, fonts, dialog, etc. High-Fidelity horizontalprototypes Heuristic evaluation User testing Add more functionality, perform more usability testing, and do more redesign High-Fidelity verticalprototypes Limited field testing and alpha/beta testing High-Fidelity fullprototypes or working systems Late Design

  14. Why 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 management

  15. Prototyping 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)

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

  17. HTML(Creating a basic document) <html> <head> <title> </title> </head> <body> </body> </html>

  18. HTML(Sample coding)

  19. HTML(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 slides

  20. Hypermedia 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”)

  21. Apple 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 stack) • buttons, fields, icons, menus, graphics • Creating and modifying objects • features (or properties) • behavior (scripts) • paint tools

  22. Apple HyperCard(The Look)

  23. Apple HyperCard(Scripting Language = HyperTalk) • Script for a button • simple, English-like, not as powerful as other scripts

  24. Macromedia Dreamweaver(Overview) • Main components • document window (the screen area or real estate) • object palette (graphics, tables, links, form controls, and other common web elements) • properties inspector (defines appearance of objects) • launcher (site management) and mini-launcher • has its own ftp program built in which makes it faster and easier to publish the site

  25. Macromedia Dreamweaver(The Look)

  26. Macromedia Dreamweaver(JavaScript and Behaviors) • JavaScript • scripting language that adds functionality to your webpage • controls and modifies html elements • it is part of the web page (embedded in the html code) and is run by the browser • Behaviors • pre-defined (or pre-build) bundles of JavaScript code that perform common functions • similar to “macros” from Microsoft Access which are pre-defined bundles of VisualBasicScript

  27. JavaScript(Directs user to a webpage based on browser version)

  28. JavaScript(Another example)

  29. JavaScript(Results from previous slide)

  30. Microsoft Frontpage(Overview) • Main parts • editor (i.e., screen area) • properties • editor views (normal, preview, html) • views bar (hyperlinks, navigation, reports, etc.)

  31. Microsoft Frontpage(The Look)

  32. Microsoft Frontpage(Visual Basic Scripting)

  33. Adobe Go Live(Overview) • Similar to Dreamweaver but • DW is used much more by professional designers and developers • DW is considered easier to learn and more intuitive • Go Live does not have site management tools • UI is similar to other Adobe products • Main parts • layout gird (i.e., screen area) • object palette (e.g., widgets) • inspector palette (e.g., properties)

  34. Adobe Go Live(The Look)

  35. Director(Overview) • Director • commonly used by designers • intended for multimedia applications • used for movies, interactive games, and animations, audio, images, etc. on CDs, websites, and kiosks • lacks a good standard widget set • can create a database in Director (but not that great) • 5 main components • stage that displays what the end user will see • toolbars for creating and changing artwork • property inspector and text inspector for setting properties • score to organize movie contents (frame) • cast stores reusable items (buttons for interactivity and navigation, movie clips for complex animation, and graphics) • behaviors are pre-built modules of code • Lingo script

  36. Director(The Look) Cast Stage Score

  37. Director(Scripting Language = Lingo) • Lingo • optimized for animation • not as powerful for functionality as VB

  38. Flash(Overview) • Similar to Director • marketed as a web development tool • primarily used in movie, animation, and sound applications or to add animation to an existing website • used often for websites, CD-ROM, Kiosks • Easy to put Flash animation in DW applications • Main components: • stage that displays what end user will see • toolbars for creating and changing artwork • panels for modifying properties of elements • timeline to organize movie content (frames) • library stores reusable items (buttons for interactivity and navigation, movie clips for complex animation, and graphics) • smart clips are pre-build modules of code • action script

  39. Flash(The Look)

  40. Visual Basic • Lots of widgets • aka, controls or designer created standard interface elements • Simple language (Basic) • Slower than other UI builders sets • Modifies properties • Associates widgets with programs that operate when they are invoked by a user of an interface

  41. Visual Basic(The Look)

  42. JAVA • Developed by Sun Microsystems • Cross platform • PC, Mac, Unix

  43. Microsoft Access(Overview) • Main components • physical layout (i.e., screen area) • tool box • properties • macros (pre-built, easy-to-use code) • modules (visual basic script) • Microsoft motif applications • Web applications • Extremely versatile tool

  44. Microsoft Access(The Look)

  45. Microsoft Access(The Look)

  46. Microsoft Access(The Look)

More Related