Upload
barry-lee
View
218
Download
0
Tags:
Embed Size (px)
Citation preview
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
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
Menu Names
3
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
Menu Names
4
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
Call HistoryPhone BookMessages
5
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
Call HistoryPhone BookMessages
6
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
Call HistoryPhone BookMessages
7
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
Call HistoryPhone BookMessages
8
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
1. V-Mail2. New Msg3. Inbox
9
Software Design Tools
Transition Diagram
Start
Names
Menu
Call History
PhoneBook
Messages
Down Arrow
Down Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Down Arrow
1. Message A2. Message B3. Message C
10
Software Design Tools
Transition Diagram (more detail)
Start
Names
Menu
Call History
PhoneBook
Messages
Rt. Arrow
Rt. Arrow Rt. Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox
Cancel
Cancel Btn
List
Select Btn
List
Select Btn
11
Software Design Tools
Transition Diagram (with frequencies)
Start
Names
Menu
Call History
PhoneBook
Messages
Rt. Arrow
Rt. Arrow Rt. Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox0.75
0.25
0.85
0.50
Cancel
0.15Cancel Btn
List
Select Btn0.50
List
Select Btn
0.50
0.50 1.00
0.50 0.20
0.30
12
Software Design Tools
Transition Diagram (with frequencies)
Start
Names
Menu
Call History
PhoneBook
Messages
Rt. Arrow
Rt. Arrow Rt. Arrow
Menu Btn
Names Btn
Select Btn
1
2
3
V-Mail
NewMsgs
Inbox0.75
0.25
0.85
0.50
Cancel
0.15Cancel Btn
List
Select Btn0.50
List
Select Btn
0.50
0.50 1.00
0.50 0.20
0.30
Can replace a node with a screen print.
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
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
22
Software Design Tools
Interface mockup tools
Paper & pencil
Flash MX
Dreamweaver
Visio
Visual J++.NET
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
33
Software Design Tools
Android
History
Why Google bought Moto (see article in this file)
• Imbed phones, TVs, appliances, automobiles…