1. 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. 2 Software Design Tools  Transition Diagram Start Names Menu Call History Phone Book Messages Down Arrow Menu Btn Names Btn Select Btn 1 2 3 V-Mail New Msgs Inbox Down Arrow Menu Names

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

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

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

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

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

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

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

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

11. 11 Software Design Tools  Transition Diagram (with frequencies) Start Names Menu Call History Phone Book Messages Rt. Arrow Menu Btn Names Btn Select Btn 1 2 3 V-Mail New Msgs Inbox 0.75 0.25 0.85 0.50 Cancel 0.15 Cancel Btn List Select Btn 0.50 List Select Btn 0.50 1.00 0.500.20 0.30

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

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

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

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

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

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

18. 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. 19 Software Design Tools  Examples in Telecommunications – NPAC TM  State Model as UI Metaphor?

20. 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. 21 Software Design Tools

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

23. 23 Software Design Tools  Interface mockup tools  Microsoft Visio

24. 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. 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. 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. 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. 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. 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. 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. 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. 32 Software Design Tools  Portable devices http://mashable.com/2013/03/30/apple-patent/

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

34. 34 Software Design Tools