Brad Myers

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Adobe Illustrator, Adobe Fireworks, Balsamiq , OmniGraffle , html, etc. Brad Myers 05-863 / 08-763 / 46-863: Introduction to Human Computer Interaction for Technology Executives Fall, 2011, Mini 2. Housekeeping. - PowerPoint PPT Presentation

Transcript of Brad Myers

who has used VB.NET?

1Lecture 7:Implementing a Prototype:Overview of Using PowerPoint, Adobe Illustrator, Adobe Fireworks, Balsamiq, OmniGraffle, html, etc.Brad Myers

05-863 / 08-763 / 46-863: Introduction to Human Computer Interaction for Technology Executives

Fall, 2011, Mini 21HousekeepingPropose change to TA office hour:No one shows up for Anthonys on Wed 1:30-2:30Lots of people at Preethis on Sunday 3:00pm-4:00pmMove both to Sunday?Have one on Saturday?Third TABrian Yee [email protected] hours on Friday 3-4 inNSH 2507?

From my EmailHomeworks on the wall outside my office, NSH 3517, in the black folders.The average of the grades on HW #1 was 86%. The main reason people lost points was because of not following the directions.Reminder of late policy: 10 points per class period.Option for revised HW #2. Note updated HW #3 description.Implementing your PrototypeHow complete an implementation for HW4?Screen transitions must workAll buttons should do something, even if go to a not implemented yet pageSearch, other computation does not have to workClick-through level of behaviorsLevel of complexity required:(Same as listed on homework0 page)At least 30 controls (widgets: buttons, text fields)About 10 different screens/pages/windows/modesMust be done in one (1) week no extensions!Wireframe Level PrototypeOutlines of the buttons and controlsNo need for final graphicsOur requirement:sufficientfunctionality tosupport your tasksLabels should bethe real onesSo can test thatusers understandwhat they do

Or, Produce Final-Looking GraphicsAlternatively, could use Photoshop, Illustrator, etc. and produce final graphicsDesigners want to show what real UI will look likeDetails of the lookWeb pages often use final graphicsE.g., Toffem MedicinesAdd click-throughbehaviorsUsually limited mostlyto screen transitions

Implementation Options for HW4Pretty much any way you wantMust work not just paintingsClick-through prototypes Note: TAs and prof. will probably not be able to help you with your codeWe recommend you do not use Java, C++, Objective C (iPhone) or other professional languageNote: you must be able to create software that is easy for others to runOutput a set of web pages, or a Windows .exe fileRecommended OptionsThese are easiest to use:PowerPoint Brad demoMockingbird web app ( Brad demoAdobe Illustrator / Adobe Fireworks Preethi demoFree 30 day trialsBalsamiq Anthony demoOmniGraffle (Macintosh only) Anthony demoHtml + ImagemapsUsing editor like Dreamweaver Brad demoDreamweaver has a free 30-day trialHtml + Javascript (more programming)Adobe Flash free trialMany other choicesAxure is a popular commercial toolwww.axure.comVisio for wireframesMicrosoft Expression Blend / SketchflowFree for students from www.dreamspark.comMicrosoft Visual BasicProcessing (, tcl/tk, or other desktop programming toolRuby on Rails, or any other web scripting system Lots of Lists of ToolsSearch for Prototyping tools or Wireframing Tools - 10 free wireframing tools What Are PeopleUsing? Mar 18, 2010My survey results are similar (2007)

Using PowerPoint to PrototypeAdd a shape, with a labelAdd a hyperlink:Select Place in this documentCreate a slide for each mode of theapplicationCan add nice animationsGo back

Go firstAdding Controls in PowerPointTurn on Developer ToolbarCan add buttons, text entry, etc.Script with VB

PowerPoint examplesGreat training in using PowerPoint: by Maureen Kelly on2007/08/06

Html editingCan use web editors to prototype any kind of interfaceTricky for detailed layoutCan edit html usingMicrosoft Word (not recommended)Microsoft Expression Web (Blend)free for students: www.dreamspark.comAdobe Dreamweaverfree trial: Dreamweaver CS5 (Adobe) in ClustersMany othersDreamweaver works a lot like WordHint: use tables a lot for layoutHint: Controls are in formsMake use of the web for how-tosE.g., html button linkExample: Movie Kiosk

Adobe FlashFree trial: Originally an animation toolInteractive editor with timelineAlso scripting inActionScript(= JavaScript)Hint: ActionScriptv.2 much easier touse than v.3De-emphasized infuture

Adobe Flash CatalystBrand new tool in CS5(I consulted a little during its early design)De-emphasized Allows some of the behavior to be specified without scriptingStates &animationsCurrently, noround tripping

TA-Run DemosAdobe Illustrator / Adobe Fireworks Preethi demoFree 30 day trialsBalsamiq Anthony demoOmniGraffle (Macintosh only) Anthony demoOmniGraffleGenerally used for diagramming and modelingAllows clickable prototypes by linking canvases and export each page to HTMLDownload: Stencils: Design Stencil Kit:

Adobe FireworksPreferred by HCI professionalsAllows clickable and interactive prototypesCreate pages and link pages via hot spots assigned to sections of the page.Export each page to HTML for an interactive prototype.Download: Stencils to Commons Library:

PROTOTYPING TOOLSBalsamiq & Adobe IllustratorBalsamiq : BasicsBalsamiq is a quick drag & drop prototyping tool.Many common UI components (input components, links, breadcrumbs, tables, grids, tabs, iOS, the list goes on!)Paid Version ($79)Importing images, work with multiple mockups simultaneously, linking mockups together, master pages / reusable componentsBalsamiq : Pros / ConsPros:Really fast, intuitive to useGreat for low fidelity prototypes that look better than paper sketches / if youre really bad at drawingVariety of helpful functions: aligning, grouping, lockingCons:Very limited control over style (black & white)If it doesnt have the widget you want, or the aesthetic you need, youre out of luckLimitations of the free softwareBalsamiq : DemoYoutube: Deal:

Illustrator : BasicsAdobe Illustrator is a vector-based drawing software part of the Adobe Creative Suite.Huge flexibility in the work you can do. Fantastic tool for creating things from scratch, but our focus will be on the publicly available UI templates online.Illustrator : Pros / ConsPros:Infinite amount of resources, how-tos and many public libraries of UI components available online.Its vector drawing! So everything stretches and even public libraries can be edited.Great for all levels of fidelities, particularly useful for making high fidelity mockups.Cons:Significant learning curve for some things.Takes a bit longer to get stuff done.Costs $200 to buy / install.Illustrator : Demo