Lecture 7: Implementing a Prototype: Overview of Using

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, 2015, Mini 2 1

Happy Thanksgiving! No class Wednesday Homework 2 grades are on Blackboard Homework 3 due today Homework 4 due next Monday – no extensions! Go back 2

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 (Same as listed on homework0 page) At least 30 “controls” (widgets: buttons, text fields) About 10 different screens/pages/windows/modes Must of complexity required: be done in one (1) week – no extensions! Will be given to your classmates for HW 5 3

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

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 2015 - Brad Myers 5

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 2015 - Brad Myers 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 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. 2015 - Brad Myers Do NOT use ActiveX controls that are PC only 7

Recommended Options These are easiest to use: PowerPoint – Brad demo Html – demo Html Javascript (more programming) Balsamiq – demo Using editor like Dreamweaver Dreamweaver has a free 30-day trial Free accounts to Balsamiq on line – email [email protected] InVision – demo Free student accounts 2015 - Brad Myers 8

Lots of other choices 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) 2015 - Brad Myers 9

Tool use by Verizon According Mainly use these for design Adobe Photoshop Adobe Illustrator Sketch 3 (our team doesn’t use this but I heard great reviews from other designers) This for animation to MHCI alumni Jack Lam: Adobe After Effects These for working prototypes Flinto InVision Proto.io 2015 - Brad Myers 10

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-prototyp es Search for “Prototyping tools” or “Wireframing Tools” 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-desi gners/ (2014) http ://www.fuelyourcreativity.com/17-great-wireframing-tools-for-web-desig 2015 - Brad Myers 11 ners/

What Are People Using? http://www.uie.com/articles/prototyping tools/?link tips100318 6 Mar 18, 2010 My survey results are similar (2007) 83% Photoshop Dreamweaver 66% 54% PowerPoint (for mocking up interfaces) Illustrator 52% Flash 43% 37% Visio InDesign 25% 23% Omnigraffle VisualStudio 19% Fireworks 17% Director 13% Frontpage 12% 10% AfterEffects Axure 8% Flex 6% GoLive 6% Microsoft Expression Blend 2015 - Brad Myers 4% 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 12

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

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 nice animations 2015 - Brad Myers 14

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

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

Developer Tool Bar, Office 2013 2015 - Brad Myers 17

Caption Some controls adfgsdfgsdfg 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 CommandButton1 CheckBox 2 2015 - Brad Myers 18

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 2015 - Brad Myers 19

PowerPoint – turn off autoadvance Make sure that clicking does not advance slide Office 2007 – on “Animations” ribbon Office 2010 & 2013 – now on “Transitions” ribbon http 2015 - Brad Myers 20 ://blogmines.com/blog/how-to-disable-advance-slide-on-mouse

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

TA-Run Demos Balsamiq – Ajayan Subramanian InVision – Stephanie Chen Axure – Ryan Donegan and Angela Liu Html – Angela Liu 2015 - Brad Myers 22

Balsamiq Ajayan Subramanian Rapid wire framing tool with an easy drag and drop interface Can create click-throughs and export as PDFs Web version: Email Prof. Myers and he’ll make a project for you Desktop app: 30 day free trial - https://balsamiq.com/ Good for prototyping; Illustrator and Sketch are better suited for high fidelity mockups

Balsamiq Demo Adding some clickable elements and input fields Sketch view vs wireframe view Adding color, icons, and creating symbols Finding additional symbols online MockupsToGo Exporting to PDF Documentation and tutorials

INVISION free web & mobile prototyping tool stephanie chen 2

HOW IT WORKS 1. 2. 3. 4. create new prototype select device upload screens go to build mode a. link b. gesture c. transition 5. share & user test! 2

DEMO http://www.invisionapp.com / 2

pros quick and easy to use basic gestures and transitions supports sharing and collaboration - cons cannot create or modify images limited functionality 2

Axure wireframe and prototyping tool Slides by Ryan Donegan Presented by Angela Liu

What is Axure? A tool for creating dynamic wireframes from low to high fidelity With Axure you can Translate initial sketches from paper to digital Utilize Axure’s library of widgets and fields to experiment with different interactions Export your designs to HTML without any coding and test

Create a design Sitemap Make it interactive Widgets Page area Master Panel Widget properties

Important Features Widgets Master Pages Page templates or custom components that can be reused Dynamic Panels Pre-made app components (buttons, forms, menus, fields, etc) that can be quickly added to a project Make your screens interactive so users can test prototypes in action Preview / Publish Use Axure to quickly view an interactive preview of your app in the browser, or export your wireframes as HTML & CSS

Widgets Drag and drop onto the pages of your project Edit the content & style of each object after adding to a page

Widgets Add interaction to widgets by specifying the case (e.g. onClick, onMove, onHide, etc) and the interaction(s) that occur Link to other pages, screens, content, views, etc. Click to open modal

Master Pages Reusable components that can be added to many screens/other masters Make global changes to a component quickly Great for navigation, headers, footers, search bar Edit master component in the content panel

Dynamic Panels Allows you to change, hide, swap, or move content in wireframes without creating a new screen or changing to a different page. Functionality can be basic (tooltip) or advanced (drag-anddrop, carousel) Can get complicated: Help here Drag-and-drop dynamic panels into the content area from the widget library. Change the visual state that is shown for the panel.

Dynamic Panels in Action

Testing Your UI View your project in your browser to test the buttons, panels, and interactions you’ve incorporated as they would appear in practice. Export your project as basic HTML/CSS/JS if desired for further testing or possibly development.

Reasons To Try Axure Versatility: Axure lets you take designs from low (sketchy) fidelity to more refined, high level interactions Efficiency: Dynamic panels and widget states allow you to quickly create different views and interfaces It’s FREE (kind of) You can start out with a free 30-day trial Or get a free student license

Need Help? Axure has some pretty extensive documentation and tutorials Or feel free to email me with other questions: [email protected]

Prototyping with HTML/CSS

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

CSS

CSS Selectors Use generic html tag names to address all applicable .class name Use the class names and ids to address specific items #id name

What does css do? describes how the html will look height and width font (type, size, color, weight) color padding / margins background-images vertical/horizontal spacing opacity positioning (item, text) shadowing display properties

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

Text Editors

Some popular ones Sublime Text Brackets Adobe Dreamweaver Terminal

Example

Questions?