1 Software Design Tools Examples of UI Applications PCs & Pocket PCs Mobile devices & Cell phones Game Consoles Appliances Tools to Communicate

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


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


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


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


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


6


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


7


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


8


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


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


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


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


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.

13


Work Flow Diagram

Complete and detailed coverage of Schedule Appointment

14


Work Flow Diagram


15


Work Flow Diagram


16


Work Flow Diagram


17


Work Flow Diagram


18


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


Examples in Telecommunications – NPACTM

State Model as UI Metaphor?

20


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


22


Interface mockup tools

Paper & pencil

Flash MX

Dreamweaver

Visio

Visual J++.NET

23



Microsoft Visio

24



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


Architectures

Development Environments

Widget Sets

Platform Dependence

Device-Independent Programming

Support switching between large and small displays for the same application

Android

26


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


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


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


ILOG Jviews

Allows displays using high level components (e.g., maps or graphs)

Programmers then connect the design via a scripting language

30


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


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


Portable devices

http://mashable.com/2013/03/30/apple-patent/

33


Android

History

Why Google bought Moto (see article in this file)

• Imbed phones, TVs, appliances, automobiles…

34


Documents

1 Software Design Tools Examples of UI Applications PCs & Pocket PCs Mobile devices & Cell phones Game Consoles Appliances Tools to Communicate