1. Lecture 7: Implementing a Prototype: Overview of Using PowerPoint, Balsamiq, InVision, html, etc.
Brad Myers
/ / : Introduction to Human Computer Interaction for Technology Executives
Fall, 2016, Mini 2
© Brad Myers

2. Happy Thanksgiving! No class Wednesday
Homework 2 grades are on Blackboard
Homework 3 due today
Homework 4 due next Monday – no extensions!
© Brad Myers

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
© Brad Myers

4. “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
© Brad Myers
Source:

5. Or, Produce Final-Looking Graphics
Alternatively, could use Photoshop, Illustrator, etc. and produce final-looking 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
Search for “vitamins” on Toffem page
Note that all the buttons go to somewhere – most to the NIY page
© Brad Myers

6. All Buttons must be labeled and should “work”
User should be able to be equally confused by your prototype as by the real interface.
For each screen on the prototype that you create, that screen should have every control that would be on the real screen.
Each control should do something
Most will go to a “not implemented yet” page
Should not take excessive amount of time to implement
Talk to TA for ideas if getting too long
© Brad Myers

7. 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
Even JavaScript, Swift, etc. would probably be too much work!
Note: you must be able to create software that is easy for others to run
Must work on both PC and Mac
Output a set of web pages, or a pdf file
If you use OmniGraffle (Mac only) or Visio (PC only) or Visual Studio (PC only), you must output as clickable pdf or html or something.
Do NOT use ActiveX controls that are PC only
OK to use on-line tool, if can share URL with TAs & classmates
© Brad Myers

8. Recommended Options PowerPoint Balsamiq Html + CSS InVision – demo
Easiest to use
Balsamiq
Html + CSS
Using editor like Dreamweaver
Dreamweaver has a free 30-day trial
(maybe a little JavaScript more programming)
InVision – demo
Free student accounts
© Brad Myers

9. Lots of other choices… https://moqups.com/
Axure is a popular commercial tool
Advantage – only one with components that can be used on multiple pages
JustInMind -
Flinto prototype Smartphone apps
Adobe Flash
new tool:
Old tools:
Visual Basic
HyperCard (1998) & similar
Flash Catalyst (2010)
© Brad Myers

10. Lots of Lists of Tools
One of our MHCI Alum compares prototyping tools in 2013:
Search for “Prototyping tools” or “Wireframing Tools”
(kept up to date)
(2014)
© Brad Myers

11. What Are People Using?
Mar 18, 2010
My survey results are similar (2007)
© Brad Myers

12. Last Year’s (2015) tool choices
PowerPoint 24
Balsamiq 21
html (+ CSS and/or JS) 5
inVision
Just In Mind 4
Axure 3
Marvelapp
Proto.io
Flinto 1
Fluid UI.com
Lucid Charts
Mockingbot
Moqups
Sketch
© Brad Myers

13. Using PowerPoint to Prototype
Add a shape, with a label
Right click menu - Add a “Hyperlink”:
Select “Place in this document”
Go back
button
© Brad Myers

14. Using PowerPoint to Prototype
On “Insert” tab, add “Action”
More options, including “last slide viewed”
Useful for “under construction” page
Use Insert / Action also to edit it
Create a slide for each mode of the application
Can add mouse-over action
But only highlight, sound or change screen unless write code
Can add nice animations
© Brad Myers

15. Adding Controls in PowerPoint
Turn on “Developer Toolbar”
Can add buttons, text entry, etc.
(Office 2007)
© Brad Myers

16. Adding PowerPoint Controls
Source:
© Brad Myers

17. Developer Tool Bar, Office 2013
© Brad Myers

18. Some controls Select control, drag out for position and size
Change Caption with property sheet from right-click menu
Can only have behaviors by writing Visual Basic code
Can add text boxes that users can enter text into
No validation (OK!)

19. 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
© Brad Myers

20. PowerPoint – turn off auto-advance
Make sure that clicking does not advance slide
Office 2007 – on “Animations” ribbon
Office 2010 & 2013 – now on “Transitions” ribbon
© Brad Myers

21. PowerPoint examples Great training in using PowerPoint:
by Maureen Kelly on 2007/08/06
Includes hover behaviors
Local copy
© Brad Myers

22. TA-Run Demos Balsamiq – Weikun Liang PhotoShop – Angela M. Liu
InVision – Angela M. Liu
Html – Angela C. Liu (presented by Weikun)
© Brad Myers

23. Balsamiq Mockups
Weikun Liang

24. Rapid wireframing tool with drag and drop interface
Balsamiq Mockups
Rapid wireframing tool with drag and drop interface
Can create click-throughs and export as PDFs
Desktop/web app: 30 day free trial -
Good for low fidelity mockups; Illustrator and Sketch are better suited for high fidelity mockups

25. Adding elements and input fields Creating symbols Linking mockups
Balsamiq Demo
Adding elements and input fields
Creating symbols
Linking mockups
Finding additional symbols online - MockupsToGo
Exporting to PDF
Documentation and tutorials

26. Adobe Photoshop
for prototyping and mockups
11/ / Angela M Liu

27. “Versatile digital workbench” capable of wide variety of tasks Me Uses
Create mockups / designs
Storyboarding
Touch up existing photos
Create new images, logos, interfaces, etc
Render professional documents
Etc ...
What is Photoshop?

28. Powerful, all purpose “art workbench” with many uses
Why use Photoshop?
Powerful, all purpose “art workbench” with many uses
Free for all CMU students via cluster computers
Industry standard for photo editing, digital art creation, sketching
Used by Disney, Dreamworks, Honda, etc
Also used often in prototyping, mockups, etc

29. Some examples

30. Starting out...

31. Creating your file

32. Choose a size

33. Setup and ready to go!

34. Shape tools
Right click a tool to bring up more options

35. Shape tools Just click and drag to create some shapes!
(Hold shift if you want the shape to be straight, or perfectly square/circular)

36. Shape tools
Each shape belongs on a “layer” which you can manipulate individually.
The topmost layer goes above the rest.
You can toggle visibility of a layer with the eyeball.
You can create and delete new layers using these controls

37. Drawing
You can also ‘freehand’ draw using the brush tool

38. Using a random mockup template

39. Using a random mockup template
In the layers panel,
double click...

40. Brings you to another tab where you can edit freely!
Saving in this newly opened tab updates the full image with your changes

41. Photoshop is powerful, but complex
Not enough time to go over everything, here are some resources:
Adobe’s photoshop tutorials-
PSD Mockup templates- mockups/
Lynda-
As CMU students you should have free access
Tutorials online (youtube, etc)
Feel free to me if you’re interested or have questions:

42. Invision prototyping, collaboration, workflow
11/ / Angela M Liu

43. It’s free! Create interactive prototypes
What is Invision?
It’s free! Create interactive prototypes
Import screens created in other programs (Photoshop, sketch, pictures you scanned in)
Use Invision to ‘hook them up’ to create mockup of how your app would work
Use Invision to test with users by going to your invision link on a device

44. Creating hotspots and linking screens
Demo
Starting a project
Importing screens
Creating hotspots and linking screens
Showing other features like: updating screens, timer, fixed header/footer, overlays...
Sharing project
Resources (literally has everything you’d need to know):

45. Prototyping with HTML/CSS
Angela C. Liu & Weikun Liang

46. PART 1: HTML

47. First thing’s first: Tags
Everything is wrapped in a tag
<tag_name options = “”></tag_name>
options can be:
class names (can be applied to multiple items in the same file)
id names (can only be applied to 1 item per file)
styling
specific arguments for certain tags

48. Types of Tags headers paragraphs divs buttons links tables form fields
images
etc etc

49. General File Structure
<!DOCTYPE html>

50. General File Structure
<!DOCTYPE html>
<html>
</html>

51. General File Structure
<!DOCTYPE html>
<html>
<head>
</head>
</html>

52. General File Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link src = “css.html”></link>
<script src = “js.html”></script>
</head>
</html>

53. General File Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href=“theme.css">
<script src = “js.html”></script>
</head>
</html>

54. General File Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href=“theme.css">
<script src = “js.html”></script>
</head>
</html>

55. General File Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script src = “js.html”></script>
</head>
<body>
<!—most of your html code will go here —>
</body>
</html>

56. PART 2: CSS

57. CSS Selectors .class_name #id_name
Use generic html tag names to address all applicable
.class_name
Use the class names and ids to address specific items
#id_name

58. CSS Selectors positioning (item, text) shadowing display properties
layering of objects
opacity
floating/arranging objects
responsive design
and much much more …
height
width
font (type, size, color, weight)
color
padding
margins
background-images
vertical/horizontal spacing

59. CSS Structure #id_name { height: 100px; (px = pixel) width: 100px;
padding: 10px;
background-color: red;
text-align: center; }

60. PART 3: TEXT EDITORS

61. Some popular ones
Sublime Text
Brackets
Adobe Dreamweaver
Terminal