1 Prototyping Tools Khoo Yit Phang CMSC 434 October 26, 2006 Khoo Yit Phang CMSC 434 October 26, 2006.

1

Prototyping ToolsPrototyping Tools

Khoo Yit Phang

CMSC 434October 26, 2006

Khoo Yit Phang

CMSC 434October 26, 2006

2

AgendaAgenda

1. Various prototyping tools: Paper prototypes PowerPoint Dynamic HTML Wizard-of-Oz GUI Builders Cross-platform GUI Toolkits

1. Various prototyping tools: Paper prototypes PowerPoint Dynamic HTML Wizard-of-Oz GUI Builders Cross-platform GUI Toolkits

3

Paper PrototypingPaper Prototyping

Video 1http://www.cs.umd.edu/class/fall2006/cmsc434/presentations/proto_ben.wmv

Video 2http://www.cs.umd.edu/class/fall2006/cmsc434/presentations

/proto_jeremy.wmv

Video 1http://www.cs.umd.edu/class/fall2006/cmsc434/presentations/proto_ben.wmv

Video 2http://www.cs.umd.edu/class/fall2006/cmsc434/presentations

/proto_jeremy.wmv

4

Powerpoint PrototypePowerpoint Prototype

Hyperlinks DemoHyperlinks Demo

5

ProfileCartHome

Buy!

Buy!

Buy!

Buy!

Buy!

Back to slides

6

ProfileCartHome

Your cart is empty!

Back to slides

7

ProfileCartHome

Remove

Back to slides

8

ProfileCartHome

Buy!

Buy!

Buy!

Buy!

Buy!

Back to slides

9

Powerpoint PrototypePowerpoint Prototype

Visual Basic for Application (VBA) Demo

requires macros to be enabled

Visual Basic for Application (VBA) Demo

requires macros to be enabled

10

1

0

+

=

12

11

Dynamic HTMLDynamic HTML

FishEye Menu Demohttp://dannyayers.com/2003/10/fisheye.html

FishEye Menu Demohttp://dannyayers.com/2003/10/fisheye.html

12

Wizard of OzWizard of Oz

Douglas EngelBart’s NLS“The Mother of All Demos”

http://video.google.com/videoplay?docid=-8734787622017763097

Douglas EngelBart’s NLS“The Mother of All Demos”

http://video.google.com/videoplay?docid=-8734787622017763097

13

Wizard of OzWizard of Oz

NEIMO Chi ‘96 Demohttp://www.ibiblio.org/openvideo/video/chi/chi96_09_m1.mpg

NEIMO Chi ‘96 Demohttp://www.ibiblio.org/openvideo/video/chi/chi96_09_m1.mpg

14

GUI BuildersGUI Builders

NetBeans Matisse

MS Visual Studio/Office VBA Form Designer

Interface Builder

NetBeans Matisse

MS Visual Studio/Office VBA Form Designer

Interface Builder

15

NetBeans MatisseNetBeans Matisse

16

MS Visual Studio/Office VBA Form Designer

MS Visual Studio/Office VBA Form Designer

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

17

Interface BuilderInterface Builder

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

18

Cross-platform GUI ToolkitsCross-platform GUI Toolkits

Qt http://www.trolltech.com/products/qt

GTK http://www.gtk.org/

WxWidgets http://www.wxwidgets.org/

… and many more

Qt http://www.trolltech.com/products/qt

GTK http://www.gtk.org/

WxWidgets http://www.wxwidgets.org/

… and many more

19

Questions?Questions?