SlideShare a Scribd company logo
1 of 107
Download to read offline
MHIT 603: Lecture 3
Prototyping Tools
July 21st 2014
Mark Billinghurst
mark.billinghurst@gmail.com
Recap
Interaction Design Process
MHIT 602
MHIT 603
Elaboration and Reduction
  Elaborate - generate solutions. These are the opportunities
  Reduce - decide on the ones worth pursuing
  Repeat - elaborate and reduce again on those solutions
Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons
Prototyping
  Create physical form of ideas
  Allow people to experience and interact with them
  Why Prototyping?
  Empathy gaining- deepen understanding of design space
  Exploration – build to think
  Testing – test solutions with end users
  Inspiration – help others catch your vision
Design/Prototyping Tools
Typical Development Steps
▪  Sketching
▪  Storyboards
▪  UI Mockups
▪  Interaction Flows
▪  Video Prototypes
▪  Interactive Prototypes
▪  Final Native Application
Increased
Fidelity &
Interactivity
Prototyping Tools
▪  Static/Low fidelity
▪  Sketching
▪  User interface templates
▪  Storyboards/Application flows
▪  Interactive/High fidelity
▪  Wireframing tools
▪  Mobile prototyping
▪  Native Coding
Sketching Interfaces
Paper Proto: Create Widgets
Example Wireframes
Pop - https://popapp.in/
 Combining sketching and interactivity on mobiles
 Take pictures of sketches, link pictures together
UXPin
  UXPin Wireframing Tool
  http://uxpin.com/
  Web based
  UI templates
  Design patterns
Transitions
Video Sketch
Proto.io - http://www.proto.io/
  Web based mobile prototyping tool
  Features
  Prototype for multiple devices
  Gesture input, touch events, animations
  Share with collaborators
  Test on device
Wireframe vs. Mockup vs. Protoype
Sketch
  It’s about
  Freehand drawing
  Quickly recording idea
  Trying out different ideas
  Establishing a composition
  Not intended as as a finished work
Wireframe
  It’s about
  Functional specs
  Navigational systems
  Functionality and layout
  Notes about the intended functionality
  How interface elements work together
  Lack of typographic style, colour or graphics
  Leaving room for the design to be created
MHIT 603: Lecture 3 - Prototyping Tools
Mockup
  It’s about
  Look and feel
  Build on the wireframe with
graphics and polish
  May adjust layout slightly
but stays within the general
guide of the wireframe
MHIT 603: Lecture 3 - Prototyping Tools
Prototype
  It’s about
  Simulating the final design
  Functionality of intended design
  May be reduced in size or
functionality
  Functional working together
  Final check for design flaws
Wireframe vs. Prototype vs. Mockup
  Wireframe
  Low fidelity representation of design
  What UI elements, where UI are placed
  Prototype
  Medium to high fidelity
  Supports user interaction
  Mockup
  High fidelity static design
  Visual design draft
Sketching to Prototype
Compromising
27
www.id-book.com
Compromises in Prototyping
• All prototypes involve compromises
• For software-based prototyping maybe there is a
slow response? sketchy icons? limited functionality?
• Two common types of compromise
•  ‘horizontal’: provide a wide range of functions,
but with little detail
•  ‘vertical’: provide a lot of detail for only a few
functions
• Compromises in prototypes mustn’t be ignored.
Product needs engineering
Compromises in prototyping
  Compromises in low-fidelity prototypes:
  device doesn't actually work
  Compromises in high-fidelity prototypes:
  slow response, sketchy icons, limited functionality
  Two common types of compromise
  ‘horizontal’: provide a wide range of functions, but
with little detail
  ‘vertical’: provide a lot of detail for only a few
functions
Different Features
Scenario
VerticalPrototype
Horizontal Prototype
Full System
Functionality
Horizontal Prototyping
  Disadvantages
  Not possible to perform real work
  Users cannot interact with real data
  Often possible to create a wish list interface
  Advantages
  Can be created quickly
  Gives an idea of how the whole interface will hang
together
  Identifies top level functionality
30
Vertical Prototyping
  Reduction of number of features
  In-depth functionality for a few selected
features
  Tests part of system
  Tests in depth under realistic circumstances
with real user tasks
  Main limitation: users cannot move freely
through the system 31
Interactive Prototyping
Flinto
  https://www.flinto.com/
  High fidelity prototyping
  Use final png files/interface screens
  Connect mockup screens visually
  Apply transitions, scrolling etc
  Send prototypes to mobile for viewing
  Looks like real application
Flinto Interface
Facebook Origami
  http://facebook.github.io/origami/
  Visual programming for mobile prototypes
  Drag and drop interface elements, interactions
  Extends Mac Quartz Composer
  Visual design tool
  Tutorial
  http://dancounsell.com/articles/prototyping-with-
facebooks-origami
Origami Interface
App Inventor
  http://appinventor.mit.edu/
  http://appinventor.org/
  Visual Programming for Android Apps
  Features
  Access to Android Sensors
  Multimedia output
  Drag and drop web based interface
  Designer view – app layout
  Blocks view – program logic/control
Device Setup
  Emulator
  Use aiStarter on Windows/Linux
  Live view (run on connected device)
  Make sure device is in Debug mode
  Install companion app (sideload on Glass)
-  MITAI2Companion.apk
App Inventor Designer View
App Inventor Blocks View
Orientation Demo
  Use Glass orientation sensor
Other Visual Prototyping Tools
  VVVV
  http://vvvv.org
  Hybrid visual/text programming environment
  Real time audio/graphics, physical interfaces, etc
  Max/MSP
  http://cycling74.com/products/max/
  Visual programming
  Designed for interactive media applications
Max/MSP Interface
VVVV Interface
VVVV Visual Programming
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
Processing - Notes
  Language of Interaction
  Physical Manipulation
  Input using code
  Mouse Manipulation
  Presence, location, image
  Haptic interfaces and multi-touch
  Gesture
  Voice and Speech
Importing Libraries
  Can add functionality by Importing Libraries
  java archives - .jar files
  Include import code
import processing.opengl.*;!
  Popular Libraries
  Minim - audio library
  OCD - 3D camera views
  Physics - physics engine
  bluetoothDesktop - bluetooth networking
http://toxiclibs.org/
Hardware Prototyping
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
Rapid Prototyping
  Speed development with quick hardware mockups
  handheld device connected to PC
  LCD screen, USB phone keypad, Camera
  Can use PC tools for rapid development
  Flash, Visual Basic, etc
Don’t Have Google Glass ?
Build Your Own Wearable
▪  MyVu display + phone + sensors
Beady-i
▪  http://www.instructables.com/id/DIY-
Google-Glasses-AKA-the-Beady-i/
http://buglabs.net/
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
Arduino
  http://www.arduino.cc
  Open source hardware
  Microcontroller
  Add-on shields
  Get started for $30 USD
Arduino is a board	
 
USB Port
Power Supply
Digital In/Out Pins
Analog Input PinsPower Pins
Atmega328p
USB to Serial
Shields
Stacking Shields
Programming Arduino
  Open-source
  Large community
  Lots of examples available
  Language based on processing
  Also can use C, C++, Flash,..
Arduino IDE	
 
  Open Source
  Cross Platform
  Windows
  Mac OS X
  Linux
  Simple UI
(Easy to Use)
Heart Rate Monitor Interface
Piano Stairs
Physical Input For Google Glass
  Can we develop unobtrusive input devices ?
  Reduce need for speech, touch pad input
  Socially more acceptable
  Examples
  Ring,
  pendant,
  bracelet,
  gloves, etc
Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass
Example: Glove Input
 Buttons on fingertips
 Map touches to commands
Example: Ring Input
 Touch strip, button, accelerometer
 Tap, swipe, flick actions
How it works
Bracelet
Armband
Gloves
1,2,
3,4
Values/
output
Phidgets
  http://www.phidgets.com
  Plug and play prototyping
  Lots of components
  Get started for $77
Components
Programming Languages
Arduino vs. Phidgets
Microsoft .Net Gadgeteer
  http://www.netmf.com/gadgeteer/
  Open source tool for building small devices
  Uses .Net Micro Framework
  Visual Studio/Visual C# Express
  Support for many different sensors/components
Mainboard
  Use mainboard
  Processor
  Number of socket connectors
  Plug in Gadgeteer modules
Modules
  Sensors, Actuators, Networking, Displays,
User Input, Power, Extensibility, ..
Physical Prototyping - d.tools
 Hardware prototyping
 http://hci.stanford.edu/research/dtools/
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
Hardware Prototyping Tools
  Bug Labs
  http://www.buglabs.net/
  d.tools
  http://hci.stanford.edu/research/dtools/
  Arduino
  http://www.arduino.cc/
  Netduino
  http://netduino.com/
Prototyping Case Study
Typical Iterations for HW/SW Product:
1. Paper prototype to evaluate conceptual model
2. Interactive computer-based prototype with rough
screens to evaluate feature placement
3. Tethered prototype to evaluate button + screen
interactions
4. Real device prototyped with major features
working
5. Real device prototyped with all features working
and graphic design implemented
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
Tethered Prototypes (High Fidelity)
Goal:
CommunicateVision
HIGH FIDELITY
PROTOTYE
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
More Information
Wireframing/Design Tools
  UXPin: http://uxpin.com/
  Axure: http://www.axure.com/
  Balsamiq: http://balsamiq.com/
  Mockingbird: https://gomockingbird.com/
  Justinmind: http://www.justinmind.com/
  Pidoco: http://pidoco.com/
  MockFlow: http://mockflow.com/
  Proto.io: http://proto.io/
  Wireframe.cc: https://wireframe.cc/
References
  Paper Prototyping: the fast and easy way to design and refine user interfaces
  http://paperprototyping.com/
  Models, Prototypes, and Evaluations for HCI Design: Making the Structured
Approach Practical George Casaday, Cynthia Rainis
  http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
  www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
  http://hci.stanford.edu/research/prototyping/
  http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html
  http://hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf
  
107

More Related Content

What's hot

Design Led Thinking WOrkshop
Design Led Thinking WOrkshopDesign Led Thinking WOrkshop
Design Led Thinking WOrkshopClaire Nelson
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationMark Billinghurst
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Designeggcellent
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
Introduction to prototyping
Introduction to prototypingIntroduction to prototyping
Introduction to prototypingAlexis Antonelli
 
Introduction to figma
Introduction to figmaIntroduction to figma
Introduction to figmaHuyPhmNht2
 
Design Principles
Design PrinciplesDesign Principles
Design PrinciplesDavid Gelb
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basicsRavi Bhadauria
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic DesignVani Jain
 
Visual Interface Design
Visual Interface DesignVisual Interface Design
Visual Interface DesignJonathan Speh
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile AppsKamil Zieba
 

What's hot (20)

Ux design process
Ux design processUx design process
Ux design process
 
UX design
UX designUX design
UX design
 
Design Led Thinking WOrkshop
Design Led Thinking WOrkshopDesign Led Thinking WOrkshop
Design Led Thinking WOrkshop
 
Prototyping
PrototypingPrototyping
Prototyping
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and Evaluation
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Ux design
Ux designUx design
Ux design
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
Introduction to prototyping
Introduction to prototypingIntroduction to prototyping
Introduction to prototyping
 
Introduction to figma
Introduction to figmaIntroduction to figma
Introduction to figma
 
Lean UX
Lean UXLean UX
Lean UX
 
Design System 101
Design System 101Design System 101
Design System 101
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
User interface design
User interface designUser interface design
User interface design
 
User interface and user experience ui ux design basics
User interface  and user experience ui ux design basicsUser interface  and user experience ui ux design basics
User interface and user experience ui ux design basics
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Visual Interface Design
Visual Interface DesignVisual Interface Design
Visual Interface Design
 
Look at UI/UX Design Process
Look at UI/UX Design ProcessLook at UI/UX Design Process
Look at UI/UX Design Process
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 

Viewers also liked

The Glass Class: Rapid Prototyping for Wearable Computers
The Glass Class: Rapid Prototyping for Wearable ComputersThe Glass Class: Rapid Prototyping for Wearable Computers
The Glass Class: Rapid Prototyping for Wearable ComputersMark Billinghurst
 
MHIT603: Lecture 4 - Experience Prototyping
MHIT603: Lecture 4 - Experience PrototypingMHIT603: Lecture 4 - Experience Prototyping
MHIT603: Lecture 4 - Experience PrototypingMark Billinghurst
 
The Glass Class Lecture 2: History
The Glass Class Lecture 2: HistoryThe Glass Class Lecture 2: History
The Glass Class Lecture 2: HistoryMark Billinghurst
 
SoLoMo The Future of Business in a networked society
SoLoMo The Future of Business in a networked societySoLoMo The Future of Business in a networked society
SoLoMo The Future of Business in a networked societyGerd Leonhard
 
The Glass Class Lecture 6: Interface Guidelines
The Glass Class Lecture 6:  Interface GuidelinesThe Glass Class Lecture 6:  Interface Guidelines
The Glass Class Lecture 6: Interface GuidelinesMark Billinghurst
 
Aula 02 - AUH582: Internet de Quais Coisas?
Aula 02 - AUH582: Internet de Quais Coisas?Aula 02 - AUH582: Internet de Quais Coisas?
Aula 02 - AUH582: Internet de Quais Coisas?giselle beiguelman
 
The Glass Class Lecture 3: Glass User Experience
The Glass Class Lecture 3: Glass User ExperienceThe Glass Class Lecture 3: Glass User Experience
The Glass Class Lecture 3: Glass User ExperienceMark Billinghurst
 
Siggraph 2014: The Glass Class - Designing Wearable Interfaces
Siggraph 2014: The Glass Class - Designing Wearable InterfacesSiggraph 2014: The Glass Class - Designing Wearable Interfaces
Siggraph 2014: The Glass Class - Designing Wearable InterfacesMark Billinghurst
 
Cory arcangel net art
Cory arcangel net artCory arcangel net art
Cory arcangel net artsoupedrosousa
 
The Reality of Augmented Reality: Are we there yet?
The Reality of Augmented Reality: Are we there yet?The Reality of Augmented Reality: Are we there yet?
The Reality of Augmented Reality: Are we there yet?Mark Billinghurst
 
The Glass Class Lecture 4: Concept Design Tools
The Glass Class Lecture 4: Concept Design ToolsThe Glass Class Lecture 4: Concept Design Tools
The Glass Class Lecture 4: Concept Design ToolsMark Billinghurst
 
The Past and Future History of the Internet
The Past and Future History of the InternetThe Past and Future History of the Internet
The Past and Future History of the InternetLuiz Matos
 
Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)
Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)
Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)giselle beiguelman
 
Panorama internacional da arte eletrônica
Panorama internacional da arte eletrônicaPanorama internacional da arte eletrônica
Panorama internacional da arte eletrônicaDaniel Hora
 
Desobediências Tecnológicas (aula 6 - auh 5862)
Desobediências Tecnológicas (aula 6 - auh 5862)Desobediências Tecnológicas (aula 6 - auh 5862)
Desobediências Tecnológicas (aula 6 - auh 5862)giselle beiguelman
 
MHIT 603: Introduction to Interaction Design
MHIT 603: Introduction to Interaction DesignMHIT 603: Introduction to Interaction Design
MHIT 603: Introduction to Interaction DesignMark Billinghurst
 
The Glass Class Lecture1 - Inroduction
The Glass Class Lecture1 - InroductionThe Glass Class Lecture1 - Inroduction
The Glass Class Lecture1 - InroductionMark Billinghurst
 

Viewers also liked (20)

The Glass Class: Rapid Prototyping for Wearable Computers
The Glass Class: Rapid Prototyping for Wearable ComputersThe Glass Class: Rapid Prototyping for Wearable Computers
The Glass Class: Rapid Prototyping for Wearable Computers
 
MHIT603: Lecture 4 - Experience Prototyping
MHIT603: Lecture 4 - Experience PrototypingMHIT603: Lecture 4 - Experience Prototyping
MHIT603: Lecture 4 - Experience Prototyping
 
The Glass Class Lecture 2: History
The Glass Class Lecture 2: HistoryThe Glass Class Lecture 2: History
The Glass Class Lecture 2: History
 
SoLoMo The Future of Business in a networked society
SoLoMo The Future of Business in a networked societySoLoMo The Future of Business in a networked society
SoLoMo The Future of Business in a networked society
 
The Glass Class Lecture 6: Interface Guidelines
The Glass Class Lecture 6:  Interface GuidelinesThe Glass Class Lecture 6:  Interface Guidelines
The Glass Class Lecture 6: Interface Guidelines
 
Aula 02 - AUH582: Internet de Quais Coisas?
Aula 02 - AUH582: Internet de Quais Coisas?Aula 02 - AUH582: Internet de Quais Coisas?
Aula 02 - AUH582: Internet de Quais Coisas?
 
The Glass Class Lecture 3: Glass User Experience
The Glass Class Lecture 3: Glass User ExperienceThe Glass Class Lecture 3: Glass User Experience
The Glass Class Lecture 3: Glass User Experience
 
Hands and Speech in Space
Hands and Speech in SpaceHands and Speech in Space
Hands and Speech in Space
 
Siggraph 2014: The Glass Class - Designing Wearable Interfaces
Siggraph 2014: The Glass Class - Designing Wearable InterfacesSiggraph 2014: The Glass Class - Designing Wearable Interfaces
Siggraph 2014: The Glass Class - Designing Wearable Interfaces
 
Cory arcangel net art
Cory arcangel net artCory arcangel net art
Cory arcangel net art
 
The Reality of Augmented Reality: Are we there yet?
The Reality of Augmented Reality: Are we there yet?The Reality of Augmented Reality: Are we there yet?
The Reality of Augmented Reality: Are we there yet?
 
The Glass Class Lecture 4: Concept Design Tools
The Glass Class Lecture 4: Concept Design ToolsThe Glass Class Lecture 4: Concept Design Tools
The Glass Class Lecture 4: Concept Design Tools
 
The Past and Future History of the Internet
The Past and Future History of the InternetThe Past and Future History of the Internet
The Past and Future History of the Internet
 
Grupo de Pesquisa Net Art
Grupo de Pesquisa Net ArtGrupo de Pesquisa Net Art
Grupo de Pesquisa Net Art
 
Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)
Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)
Aula 1 - AUH5862 - Intervenções em Redes Urbanas (aula introdutória)
 
Panorama internacional da arte eletrônica
Panorama internacional da arte eletrônicaPanorama internacional da arte eletrônica
Panorama internacional da arte eletrônica
 
Desobediências Tecnológicas (aula 6 - auh 5862)
Desobediências Tecnológicas (aula 6 - auh 5862)Desobediências Tecnológicas (aula 6 - auh 5862)
Desobediências Tecnológicas (aula 6 - auh 5862)
 
Aula 01 net art
Aula 01 net artAula 01 net art
Aula 01 net art
 
MHIT 603: Introduction to Interaction Design
MHIT 603: Introduction to Interaction DesignMHIT 603: Introduction to Interaction Design
MHIT 603: Introduction to Interaction Design
 
The Glass Class Lecture1 - Inroduction
The Glass Class Lecture1 - InroductionThe Glass Class Lecture1 - Inroduction
The Glass Class Lecture1 - Inroduction
 

Similar to MHIT 603: Lecture 3 - Prototyping Tools

MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMark Billinghurst
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototypingsawsan slii
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewHenry Cogo
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR SystemsMark Billinghurst
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototypingGeorge Abraham
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axureAndrii Rusakov
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopNetSquared
 
Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)GameWisp
 
Storytelling using Immersive Technologies
Storytelling using Immersive TechnologiesStorytelling using Immersive Technologies
Storytelling using Immersive TechnologiesKumar Ahir
 
Comp4010 Lecture7 Designing AR Systems
Comp4010 Lecture7 Designing AR SystemsComp4010 Lecture7 Designing AR Systems
Comp4010 Lecture7 Designing AR SystemsMark Billinghurst
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design WorkshopPatrick McNeil
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!Jessi Baker
 
First Steps with Android - An Exciting Introduction
First Steps with Android - An Exciting IntroductionFirst Steps with Android - An Exciting Introduction
First Steps with Android - An Exciting IntroductionCesar Augusto Nogueira
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 

Similar to MHIT 603: Lecture 3 - Prototyping Tools (20)

MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools Review
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototyping
 
Prototyping invision vs axure
Prototyping invision vs axurePrototyping invision vs axure
Prototyping invision vs axure
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping Workshop
 
Prototyping
PrototypingPrototyping
Prototyping
 
Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)Native App + Wep App = ? (Hybrid Applications)
Native App + Wep App = ? (Hybrid Applications)
 
Storytelling using Immersive Technologies
Storytelling using Immersive TechnologiesStorytelling using Immersive Technologies
Storytelling using Immersive Technologies
 
Comp4010 Lecture7 Designing AR Systems
Comp4010 Lecture7 Designing AR SystemsComp4010 Lecture7 Designing AR Systems
Comp4010 Lecture7 Designing AR Systems
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchJQuery Mobile vs Appcelerator Titanium vs Sencha Touch
JQuery Mobile vs Appcelerator Titanium vs Sencha Touch
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 
Make Tools
Make ToolsMake Tools
Make Tools
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
First Steps with Android - An Exciting Introduction
First Steps with Android - An Exciting IntroductionFirst Steps with Android - An Exciting Introduction
First Steps with Android - An Exciting Introduction
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 

More from Mark Billinghurst

Future Research Directions for Augmented Reality
Future Research Directions for Augmented RealityFuture Research Directions for Augmented Reality
Future Research Directions for Augmented RealityMark Billinghurst
 
Evaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesEvaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesMark Billinghurst
 
Empathic Computing: Delivering the Potential of the Metaverse
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the MetaverseMark Billinghurst
 
Empathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the MetaverseEmpathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the MetaverseMark Billinghurst
 
Talk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote CollaborationTalk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote CollaborationMark Billinghurst
 
Empathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader MetaverseEmpathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader MetaverseMark Billinghurst
 
2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VR2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VRMark Billinghurst
 
Novel Interfaces for AR Systems
Novel Interfaces for AR SystemsNovel Interfaces for AR Systems
Novel Interfaces for AR SystemsMark Billinghurst
 
2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR PrototypingMark Billinghurst
 
2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR Interaction2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR InteractionMark Billinghurst
 
2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR Technology2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR TechnologyMark Billinghurst
 
2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: PerceptionMark Billinghurst
 
2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XR2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XRMark Billinghurst
 
Empathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive AnalyticsEmpathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive AnalyticsMark Billinghurst
 
Empathic Computing: Developing for the Whole Metaverse
Empathic Computing: Developing for the Whole MetaverseEmpathic Computing: Developing for the Whole Metaverse
Empathic Computing: Developing for the Whole MetaverseMark Billinghurst
 
Research Directions in Transitional Interfaces
Research Directions in Transitional InterfacesResearch Directions in Transitional Interfaces
Research Directions in Transitional InterfacesMark Billinghurst
 
Comp4010 Lecture13 More Research Directions
Comp4010 Lecture13 More Research DirectionsComp4010 Lecture13 More Research Directions
Comp4010 Lecture13 More Research DirectionsMark Billinghurst
 
Comp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research DirectionsComp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research DirectionsMark Billinghurst
 

More from Mark Billinghurst (20)

Future Research Directions for Augmented Reality
Future Research Directions for Augmented RealityFuture Research Directions for Augmented Reality
Future Research Directions for Augmented Reality
 
Evaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesEvaluation Methods for Social XR Experiences
Evaluation Methods for Social XR Experiences
 
Empathic Computing: Delivering the Potential of the Metaverse
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
 
Empathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the MetaverseEmpathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the Metaverse
 
Talk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote CollaborationTalk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote Collaboration
 
Empathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader MetaverseEmpathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader Metaverse
 
2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VR2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VR
 
ISS2022 Keynote
ISS2022 KeynoteISS2022 Keynote
ISS2022 Keynote
 
Novel Interfaces for AR Systems
Novel Interfaces for AR SystemsNovel Interfaces for AR Systems
Novel Interfaces for AR Systems
 
2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping
 
2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR Interaction2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR Interaction
 
2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR Technology2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR Technology
 
2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception
 
2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XR2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XR
 
Empathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive AnalyticsEmpathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive Analytics
 
Metaverse Learning
Metaverse LearningMetaverse Learning
Metaverse Learning
 
Empathic Computing: Developing for the Whole Metaverse
Empathic Computing: Developing for the Whole MetaverseEmpathic Computing: Developing for the Whole Metaverse
Empathic Computing: Developing for the Whole Metaverse
 
Research Directions in Transitional Interfaces
Research Directions in Transitional InterfacesResearch Directions in Transitional Interfaces
Research Directions in Transitional Interfaces
 
Comp4010 Lecture13 More Research Directions
Comp4010 Lecture13 More Research DirectionsComp4010 Lecture13 More Research Directions
Comp4010 Lecture13 More Research Directions
 
Comp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research DirectionsComp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research Directions
 

Recently uploaded

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 

Recently uploaded (20)

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 

MHIT 603: Lecture 3 - Prototyping Tools