User Interfaces 6 February

IBM Career and Internship Presentation Monday, February 12 th Sitterson 011 6pm Enjoy Pizza! And (Soft)Drinks! And… Learn about cool opportunities for internships (like extremeblue TM ) and full time positions at Software Group.

First some humor Railroad ties Dilbert

Requirements

The UI Iceberg Visuals InteractionTechniques Object Model Feel 30% Look 10% The things you use 60%  Toolkits and style guides help with look and feel, the tip of the usability iceberg.  Real usability gains come from system and application objects perceived by users.

What is an object model? Model: a small object, usually built to scale, that represents another, often larger object. Object: a software bundle that encapsulates state and behavior. So what is the object model of a user interface? Consider ebay, amazon, myspace

Models Object-action Choose the object and then the action to perform Action-object Choose the action and then the object

Models – copy examples Object-action Choose the object and then the action to perform Windows GUI: select the file, right click for actions Action-object Choose the action and then the object Windows command line: “copy” file_a file_b

GUI or not to GUI? How often is the task done? How many objects are done at a time? Physical limitations Environment

Interaction Styles Existing Emerging  Command Language  Ubiquitous, Pervasive, Handheld  Question and Answer  Tangible User Interfaces  Form-based  Lightweight, Tacit, Passive  Menu  Perceptual Interfaces  Natural Language  Affective Computing  Direct Manipulation, GUI  Context-Aware Interfaces  Virtual Reality  Speech, Multi-Modal  Augmented Reality ...?

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

Flows – always needed

GUI Screen Design Process 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, Test, and Retest Wilbert Galitz

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

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

Examples Properties of automobile 189 PropertyValue BrandToyota ModelCamry ID Help Word ___________________ This screen All screens ABC alert message Caution: “age” must be < 120 OK

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

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

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

TypecheckingsavingmmfCD BranchMain St. Elm St.High St. Privilegesnewsletter discountsquick loans First name Middle name Last name Street City State/county OK Apply CancelHelp Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission. The content is all there…

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

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

Minard: Napoleon’s March to Moscow Portrays the losses suffered by Napoleon's army in the Russian campaign of 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.