User Interfaces System Models 8 February Designing an

User Interfaces System Models 8 February

Designing an Interface n Fundamental Concepts n n What the user needs to do The order that he does it Is it natural? How much does he have to remember?

Flows – from the use cases

GUI Screen Design Process n n n Know Your User or Client Understand the Business Function Understand the Principles of Good Screen Design Select the Proper Kinds of Windows Develop System Menus Select the Proper Device-Based Controls Select the Proper Screen-Based Controls Organize and Lay Out Windows Choose the Proper Colors Create Meaningful Icons Provide Effective Messages, Feedback, Guidance, and Language Translation Test, and Retest Wilbert Galitz

Principles of Good Screen Design n Consistency Starting in the upper left corner Simple navigation n n Grouping and alignment Hierarchy for importance Pleasing visuals Captions

Three Types of Windows n n n Property – information only Dialogue – input from user and subsequent action Alert – information that needs to be seen before continuing. Developer determined.

Examples ABC alert message Property Caution: “age” must be < 120 OK Properties of automobile 189 Property Value Brand Toyota Model Camry ID 893 -8913 -789014 Alert Dialogue Help Word __________ This screen All screens

Why Classify? n n Use the right type of window Consider purpose when designing n Example: alert window must be seen; property window not as critical

Rollovers n Information that is optional and selected by the user This is a rollover window, designed to provide on-the-fly amplification n But it often can’t be copied. It doesn’t remain visible. Are those important for this usage?

Good Screen Design n Consistency: use of pull-downs vs. entry n Starting in the upper left corner: first thing to fill in n Simple navigation n Grouping and alignment Keep related issues together Captions for clarity

The content is all there… Type checking saving Branch Main St. Elm St. Privileges newsletter mmf CD High St. discounts quick loans First name Middle name Last name Street City State/county OK Apply Cancel Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission. Help

But it can be better New Customers Name Address First Middle Street City Last State/county Branch Account type checking saving money market CD Main St. Elm St. High St. OK Apply Cancel Privileges newsletter discounts quick loans Help Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.

Visualization and Information Design n How to present results n Visualization usually refers to dynamically created results n n n Data Information design usually refers to crafted piece n Edward Tufte

Minard: Napoleon’s March to Moscow Portrays the losses suffered by Napoleon's army in the Russian campaign of 1812. Beginning at the Polish-Russian border, the thick band shows the size of the army at each position. The path of Napoleon's retreat from Moscow in the bitterly cold winter is depicted by the dark lower band, which is tied to temperature and time scales.

System Models

Modeling n Based on abstraction n Looking only at relevant information Hiding details Create multiple views n As orthogonal as possible n n Each view has information that is unique Each view has information that appears in other views Common information is consistent How many views?

Modeling an airplane

Exercise: Modeling a House n n What views would you model? Do they meet the criteria?

Example of a System Model n Three views n n Functional: what is done Data: entity relationships Dynamic: state transitions Why these three? n n Duplicative? Missing?

Modeling Languages and Processes n n Language: syntax, usually graphical, used to express design Process: steps to take to create a design Many processes, not a lot of agreement General consensus has built around UML as a language n We’ll look at UML later in the semester