1 / 34

Software Design Tools

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

paulos
Download Presentation

Software Design Tools

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

  12. Software Design Tools • Transition Diagram (with frequencies) Rt. Arrow Phone Book Rt. Arrow Messages Call History 0.50 0.50 Rt. Arrow Select Btn Select Btn Select Btn 0.85 0.50 0.50 1.00 List List Menu Menu Btn Cancel Btn 0.15 0.25 Cancel Start 1 3 0.50 0.20 V-Mail 2 Inbox Names Btn Names 0.30 0.75 New Msgs 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 – NPACTM • 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

  32. Software Design Tools • Portable devices http://mashable.com/2013/03/30/apple-patent/

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

  34. Software Design Tools

More Related