Lecture 7: Implementing a Prototype: Overview of Using PowerPoint ...

1 .1 Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Balsamiq , Axure , html, etc. Brad Myers 05-863 / 08-763 / 46-863: Introduction to Human Computer Interaction for Technology Executives Fall, 2013, Mini 2 © 2013 - Brad Myers

2 .Spring’2014 HCI Courses Some people are interested in more HCI classes Here is a partial list of some that might be available for non-majors (but there might be a waitlist) -- see full list 05-795 Applications of Cognitive Science Implications of how people perceive and think 05-818 Design of Educational Games 05-833 Gadgets , Sensors and Activity Recognition in HCI Standalone small devices, cameras, etc. (not GUIs) 05-834 Useable Privacy and Security 05-837 Ubiquitous Computing Putting computation into everyday activities and devices 05-839 The Big Data Pipeline: Collecting and Using Big Data for Interactive Systems 05-891 Designing Human Centered Software Similar to this course, but full semester; overview of HCI 05-899A Interaction Techniques -- my course! 05-899B Mobile Service Innovation © 2013 - Brad Myers 2

3 .Implementing your Prototype How “complete” an implementation for HW4? Screen transitions must work All buttons should do something , even if go to a “not implemented yet” page – facilitates user testing Search, other computation does not have to work “Click-through” level of behaviors Must show any external reactions E.g., taking a picture, starting microwave, making a copy… Pop-up a dialog box saying what’s happening… Level of complexity required: (Same as listed on homework0 page) At least 30 “controls” (widgets: buttons, text fields) About 10 different screens/pages/windows/modes Must be done in one (1) week – no extensions ! Will be given to your classmates for HW 5 3 © 2013 - Brad Myers

4 .© 2013 - Brad Myers “Wireframe” Level Prototype Outlines of the buttons and controls No need for final graphics Our requirement: sufficient functionality to support your tasks Labels should be the real ones So can test that users understand what they do 4 Source: http://support.balsamiq.com/customer/portal/articles/107999-specifying-interaction-with-mockups

5 .© 2013 - Brad Myers Or, Produce Final-Looking Graphics Alternatively, could use Photoshop, Illustrator, etc. and produce final graphics Designers want to show what real UI will look like Details of the “look” Web pages often use final graphics E.g., Toffem Medicines Add “click-through” behaviors Usually limited mostly to screen transitions 5

6 .Implementation Options for HW4 Pretty much any way you want Must “work” – not just paintings “Click-through prototypes” We recommend you do not use Java, C++, Objective C ( iPhone ) or other “professional” language Note: you must be able to create software that is easy for others to run Output a set of web pages, or a pdf file Cannot use OmniGraffle (Mac only) or Visio (PC only) unless can output as clickable pdf or something. 6 © 2013 - Brad Myers

7 .Recommended Options These are easiest to use: PowerPoint – Brad demo Html + Imagemaps Using editor like Dreamweaver – demo Dreamweaver has a free 30-day trial Html + Javascript (more programming) Axure is a popular commercial tool – demo www.axure.com Advantage – only one with components that can be used on multiple pages Balsamic – demo 7 © 2013 - Brad Myers

8 .Lots of other choices… https://moqups.com / Adobe Flash Visual Basic Resource Editor tools that lay out widgets Old tools: HyperCard (1998) & similar Flash Catalyst (2010) © 2013 - Brad Myers 8

9 .Lots of Lists of Tools Search for “Prototyping tools” or “ Wireframing Tools” http :// www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes?utm_source=Cooper&utm_campaign=017b6536a1-Newsletter_Sept13&utm_medium=email&utm_term=0_162d77b95f-017b6536a1-85381653 (2013) http://www.fuelyourcreativity.com/17-great-wireframing-tools-for-web-designers/ (2012) http:// www.creativebloq.com/wireframes/top-wireframing-tools-11121302 (2012) http ://mashable.com/2010/07/15/wireframing-tools/ - “10 free wireframing tools ” (2010) http://www.uxbooth.com/blog/15-desktop-online-wireframing-tools / (2010) http ://www.uie.com/articles/prototyping_tools/?link=tips100318_6 (2010) 9 © 2013 - Brad Myers

10 .© 2013 - Brad Myers What Are People Using? http://www.uie.com/articles/prototyping_tools/?link=tips100318_6 Mar 18, 2010 My survey results are similar (2007) 10

11 .Using PowerPoint to Prototype Add a shape, with a label Add a “Hyperlink”: Select “Place in this document” Add an “Action” More options, including “last slide viewed” Useful for “under construction” page Create a slide for each mode of the application Can add nice animations Go back Go first 11 © 2013 - Brad Myers Return

12 .Adding Controls in PowerPoint Turn on “Developer Toolbar” Can add buttons, text entry, etc. Script with VB 12 © 2013 - Brad Myers

13 .Use “Master” for Shared Controls If want controls on multiple pages, can put them on a “Master” “View / Slide Master” Create new master slide and edit as with any other slide Use that master for new slides Drop down from “New Slide” Controls like check boxes, text boxes in Master use same value across all slides © 2013 - Brad Myers 13

14 .PowerPoint examples Great training in using PowerPoint: http://www.boxesandarrows.com/view/interactive by Maureen Kelly on 2007/08/06 14 © 2013 - Brad Myers

15 .TA-Run Demos Axure RP - Agnes Won 30 day trial, and free student license for those studying HCI Balsamiq & Invision – Nina Xu Professor Myers can get free on-line accounts for Balsamiq online for anyone in class – send him an email HTML prototyping – Rebecca Chen © 2013 - Brad Myers 15

16 .Axure RP a gnes won awon@andrew.cmu.edu interactive wireframing & prototyping tool

17 .What is Axure RP? A wireframing & rapid prototyping tool aimed at web and desktop applications Generate HTML wireframes, mockups, and prototypes without any coding Mac & PC Compatible with 30-day free trial You might be eligible for a free software! http ://axure.com/ download https://www.axure.com/free-software-for- students

18 .Some Examples Demo http ://www.axure.com/sample-prototypes Tutorials http ://www.axure.com/ learn

19 .Axure RP

20 .Page Area p age area a dd content here

21 .Sitemap sitemap o rganize content

22 .Widgets widgets d rag & drop elements

23 .Masters masters c reate & apply master

24 .Page Notes & Interactions p age notes & interactions a nnotate & format pages

25 .Widget Properties & Interactions w idget properties & interactions t weak widgets

26 .Useful Features Master Pages http ://www.axure.com/learn/masters/ basic Buttons http ://www.axure.com/widgets/button- shape Dynamic Panels http://www.axure.com/learn/dynamic-panels/ basic

27 .Master Pages Build reusable assets and quickly apply global changes to your wireframes Great for placing recurring elements on multiple pages e .g. Headers, footers, navigation, search bar

28 .Master Pages Can add masters to pages as well as other masters C an apply multiple masters on a page

29 .Buttons Create links to other pages, hide/show elements, initiate/stop action Create styled buttons or button shapes like rectangles & circles