1 Software Design Tools  Examples of UI Applications  PCs & Pocket PCs  Mobile devices & Cell phones  Game Consoles  Appliances  Tools to Communicate Interaction  Sketches  Transition Diagrams  Screen Layouts  Work Flow Diagrams  Prototypes  Specifications  Audience  Users  Customers  Management  Marketing  Requirements Experts  Developers  Testers  Technical Writers

2 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow Menu Names

3 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow Menu Names

4 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow Call History Phone Book Messages

5 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow Call History Phone Book Messages

6 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow Call History Phone Book Messages

7 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow Call History Phone Book Messages

8 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow 1. V-Mail 2. New Msg 3. Inbox

9 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Down Arrow 1. Message A 2. Message B 3. Message C

10 Software Design Tools  Transition Diagram (more detail) Start Names Menu Call History Phone Book Messages Rt. Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Cancel Cancel Btn List Select Btn List Select Btn

11 Software Design Tools  Transition Diagram (with frequencies) Start Names Menu Call History Phone Book Messages Rt. Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Cancel 0.15 Cancel Btn List Select Btn 0.50 List Select Btn

12 Software Design Tools  Transition Diagram (with frequencies) Start Names Menu Call History Phone Book Messages Rt. Arrow Menu Btn Names Btn Select Btn V-Mail New Msgs Inbox Cancel 0.15 Cancel Btn List Select Btn 0.50 List Select Btn Can replace a node with a screen print.

13 Software Design Tools  Work Flow Diagram  Complete and detailed coverage of Schedule Appointment

14 Software Design Tools  Work Flow Diagram  Complete and detailed coverage of Schedule Appointment

15 Software Design Tools  Work Flow Diagram  Complete and detailed coverage of Schedule Appointment

16 Software Design Tools  Work Flow Diagram  Complete and detailed coverage of Schedule Appointment

17 Software Design Tools  Work Flow Diagram  Complete and detailed coverage of Schedule Appointment

18 Software Design Tools  Tools for Creating Transition Diagrams and Dataflow Diagrams  IBM Rational Suite of Products UML (Unified Modeling Language) – standard for visualizing and documenting software systems (Booch)  Use Case: Turn on iPod

19 Software Design Tools  Examples in Telecommunications – NPAC TM  State Model as UI Metaphor?

20 Software Design Tools  User Interface Prototyping Tools  Rapid building of on-screen prototypes  Prototypes can serve as specifications for use by implementers and technical writers  Engage end users, SMEs, managers and customers  Test, revise, test, revise, …  Prototyping of Desktop and Non-desktop platforms Mobile devices, cell phones, tablet-PCs, programmable appliances, set-top boxes  Visual editing and scripting Easily to add buttons, fields and graphics Easy to change of colors, fonts and layout

21 Software Design Tools

22 Software Design Tools  Interface mockup tools  Paper & pencil  Flash MX  Dreamweaver  Visio  Visual J++.NET

23 Software Design Tools  Interface mockup tools  Microsoft Visio

24 Software Design Tools  Interface mockup tools  Visual development tools Microsoft Visual J++.NET –Drag controls (buttons, labels, fields, etc.) onto a workspace –Programmers write code in Visual Basic or Java to implement the actions

25 Software Design Tools  Architectures  Development Environments  Widget Sets  Platform Dependence  Device-Independent Programming  Support switching between large and small displays for the same application Android

26 Software Design Tools  GUI Toolkit Layer  Windows  Scroll bars  Pull-down & Pop-up Menus  Data entry fields  Buttons  Dialog boxes  Platform Independence  Java JRE (Java Runtime Environment) - a portable virtual machine Applets – small program fragments –Downloaded from a web page –Executed on the user’s machine –Provides support for animation and error validation

27 Software Design Tools  Visual Editing of Widgets  Borland Jbuilder  Sun NetBeans  Swing  Provides native look on any platform (e.g., Windows, Mac, X/Motif)  J2EE – Java2 Enterprise Edition  Improved access to development technologies (e.g., SQL for databases, CORBA for network services) .Net  Integrates large programming libraries, network aware languages and standard GUI toolkit  Deeply tied to the Windows platform (lacks device independence)  Piccolo – zoomable user interfaces

28 Software Design Tools  The application framework and specialized language layer  Tcl/Tk – scripting language and toolkit Can embed new functionality into existing applications  JavaScript Can embed into major web browsers and combined with HTML  LiveCode Couples visual editors with scripting languages  Macromedia Director Scripting language is Lingo

29 Software Design Tools  ILOG Jviews  Allows displays using high level components (e.g., maps or graphs)  Programmers then connect the design via a scripting language

30 Software Design Tools  Automated Evaluation and Critiquing Tools  Example of flaws detected Menu tree too deep Redundancies in a menu tree Consistent use of widget labels –Labels of search, browse or query slowed performance by 10 to 25%  Run-time logging software Captures users activity –Frequency of error messages –Menu item selection –Dialog box appearance –Help invocation

31 Software Design Tools  Webby Awards – based on 141 layout metrics  Large pages having columnar organization  Headings used in proportion to the amount of text  Limited animated graphics advertisements  Keeping link texts to 2 to 3 words  Using sans serif fonts for body text  Webby Awards Link Webby Awards Link

32 Software Design Tools  Portable devices

33 Software Design Tools  Android  History History  Why Google bought Moto (see article in this file) Imbed phones, TVs, appliances, automobiles…

34 Software Design Tools