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

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

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 © 2016 - 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 © 2016 - Brad Myers Source: http://support.balsamiq.com/customer/portal/articles/107999-specifying-interaction-with-mockups

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

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

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

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

Lots of other choices… https://moqups.com/ Axure is a popular commercial tool www.axure.com Advantage – only one with components that can be used on multiple pages https://moqups.com/ JustInMind - http://www.justinmind.com/ Flinto - https://www.flinto.com/ - prototype Smartphone apps Adobe Flash new tool: https://popapp.in/videos/home/landing.mp4?v=20140724 Old tools: Visual Basic HyperCard (1998) & similar Flash Catalyst (2010) © 2016 - Brad Myers

Lots of Lists of Tools One of our MHCI Alum compares prototyping tools in 2013: http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes Search for “Prototyping tools” or “Wireframing Tools” http://www.creativebloq.com/web-design/top-10-prototyping-tools-2016-21619216 http://www.cooper.com/prototyping-tools (kept up to date) http://uxdesignweekly.com/ux-resources/prototyping-tools/ http://uxmovement.com/resources/3-best-vector-wireframing-tools-for-designers/ (2014) © 2016 - 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) © 2016 - Brad Myers

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

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

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

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

Adding PowerPoint Controls Source: http://msdn.microsoft.com/en-us/library/bb608625.aspx © 2016 - Brad Myers

Developer Tool Bar, Office 2013 © 2016 - Brad Myers

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!)

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

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 http://blogmines.com/blog/how-to-disable-advance-slide-on-mouse-click-in-powerpoint-2010/ © 2016 - Brad Myers

PowerPoint examples Great training in using PowerPoint: http://www.boxesandarrows.com/view/interactive by Maureen Kelly on 2007/08/06 Includes hover behaviors Local copy © 2016 - Brad Myers

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

Balsamiq Mockups Weikun Liang

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 - https://balsamiq.com/ Good for low fidelity mockups; Illustrator and Sketch are better suited for high fidelity mockups

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

Adobe Photoshop for prototyping and mockups 11/21.2016 / Angela M Liu

“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?

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

Some examples

Starting out...

Creating your file

Choose a size

Setup and ready to go!

Shape tools Right click a tool to bring up more options

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

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

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

Using a random mockup template https://www.mockupworld.co/free/macbook-pro-on-restaurant-table-mockup/

Using a random mockup template https://www.mockupworld.co/free/macbook-pro-on-restaurant-table-mockup/ In the layers panel, double click...

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

Photoshop is powerful, but complex Not enough time to go over everything, here are some resources: Adobe’s photoshop tutorials- https://helpx.adobe.com/photoshop/tutorials.html PSD Mockup templates- https://www.mockupworld.co/all- mockups/ Lynda- https://www.lynda.com/Photoshop-tutorials/279-0.html As CMU students you should have free access Tutorials online (youtube, etc) Feel free to email me if you’re interested or have questions: amliu@andrew.cmu.edu

Invision prototyping, collaboration, workflow 11/21.2016 / Angela M Liu

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

Creating hotspots and linking screens Demo https://www.invisionapp.com/ 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): https://projects.invisionapp.com/d/main#/learn

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

PART 1: HTML

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

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

General File Structure <!DOCTYPE html>

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

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

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

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>

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>

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>

PART 2: CSS

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

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

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

PART 3: TEXT EDITORS

Some popular ones Sublime Text Brackets Adobe Dreamweaver Terminal