User Interface DesignUser Interface Design

Jason BeresJason BeresChief Technical EvangelistChief Technical EvangelistInfragisticsInfragisticsjasonb@infragistics.com

Download presentation at Download presentation at http://www.vbasp.net/uidesign.zip

Jason BeresJason BeresChief Technical EvangelistChief Technical EvangelistInfragisticsInfragisticsjasonb@infragistics.com

Download presentation at Download presentation at http://www.vbasp.net/uidesign.zip

About MeAbout Me

Visual Basic .NET MVPAuthor 5 Books on .NET Technologies

Wiley, Hungry Minds, SAMS

Visual Studio Magazine AuthorINETA Board MemberINETA Speakers BureauTech-Ed, PDC and other conferences

AgendaAgenda

UI Design CommentsBuilding the RequirementsApplication Design PatternsApplication Layout PatternsControls – Are they in the box?Frameworks for UI ConstructionReferencesQuestions

UI Design CommentsUI Design Comments

The Importance of a Good Dialog …The Importance of a Good Dialog …

Users are having a conversation with their computer through your UI

The Importance of a Good DialogThe Importance of a Good Dialog

This is not just Dialog BoxesColorsGradientsShapesPicturesFontsRespect Themes – your application should change based on user preference!

Everything about the UI talks to the user of the UI – so be nice!

Don’t Make Me Think!Don’t Make Me Think!

I don’t think, I do.Base design on the Persona

Are they Advanced? Beginners?IE vs. ExcelOutlook vs. Visio

Unfriendly Software = UneaseUnease = ConfusionI want to feel safe!

Models of DesignModels of Design

User ModelInstinct drives my actionsI am used to it, because of other applications I use daily

User Model Inertia – it is easier to change the program model than the user model:

Windows – double mouse clickMacintosh – single mouse click

User Model has contextUser Model has context

Video Recorder controls

Data Entry applicationsRETURN saves the column or rowINSERT adds new row

Other Common Contexts

Use it how I want to!Use it how I want to!

Make it simple – multiple user models for a single program model

CTRL-X; CTRL-VRight mouse click “Cut”, right mouse click “Paste”Edit Menu “Cut”, Edit Menu “Paste”Drag-and dropCopy & Paste Icon on the Toolbar

Metaphors in the User ModelMetaphors in the User Model

Metaphors help a User Model develop around a Program Model

Buttons – represent function with icon or text, look 3D and pushable, and show change of state.Icons – provide an easy to learn model, that may not bear much resemblance to a modern physical object (Floppy Disc Icon for Save) Physical to Virtual Mapping

More IconsMore Icons

Tabs – function closely corresponds to paper or book metaphor.When first introduced, Microsoft research showed, that usability went from 30% to 100%.Except for multi-row tab behaviour:

The User Model & The User Model & ConsistencyConsistency

The User Model is based on consistency:Behaviour - always means “Save your work”Metaphors, when used are consistent with their contextLook and Feel – most of your users will use Word and Excel and context switch from these to your applications. Microsoft spends more that > $300 million on usability testing.

Consistency for the UserConsistency for the User

It helps the user – Feel confident Feel at ease.Learn more quickly.Maintain focus on the purpose of the application

Reduces the need for extra documentationA user does not want to readA user may not have available documentation (is it online?)It might not be in a user’s first language

Building RequirementsBuilding Requirements

What is the software for?What is the software for?

“We need an application that does X, Y and Z, does it really fast, is easy to use, and our target market is 10 year olds to 70 year olds”

Understand who is going to use the product and why

Understand the UserUnderstand the User

What are their goals?To search? To buy? To Browse? To Enter Data? Analysis? Reporting?

What is their experience? Is the computer their best friend or worst enemy?

What language do they expect? Are they Cool? Hip? Conservative? Young? Old?

Where are they from? Cultural References can be good and bad

In the USA“Going Postal” means somethingSoccer is a different sport than FootballChips are different than French Fries

Gathering RequirementsGathering Requirements

Focus GroupsCase StudiesSurveysPersonas

Sounds like marketing?It isMultiple inputs are necessary to succeed

PersonasPersonas

Put’s a Face to the ProblemYou learn to “know” the targetEmpathy!

Virginia Rogers•Income - $30,000

•Uses computer only at work

•Likes to talk to coworkers – She is “chatty”

•Enjoys slow walks in the park

•Spends 3 hours a day on computer

•Says Outlook XP is “Cute”

•Use the “Hearts” XP Themes from the PLUS! Pack

•Loves to play Solitaire

•Likes “Clippy the Office Assistant”

Virginia Rogers•Income - $30,000

•Uses computer only at work

•Likes to talk to coworkers – She is “chatty”

•Enjoys slow walks in the park

•Spends 3 hours a day on computer

•Says Outlook XP is “Cute”

•Use the “Hearts” XP Themes from the PLUS! Pack

•Loves to play Solitaire

•Likes “Clippy the Office Assistant”

Michael Lang•Income - $85,000

•Owns 3 Computers

•Mixes Music and DVD’s on computer at home

•Masters Degree in Bio Metrics

•Enjoys mountain climbing and is Olympic TriAthalon Gold Medalist

•Does stock trading in spare time at home

•Speaks English, Dutch, German, Russian and 3 dialects of Chinese

Michael Lang•Income - $85,000

•Owns 3 Computers

•Mixes Music and DVD’s on computer at home

•Masters Degree in Bio Metrics

•Enjoys mountain climbing and is Olympic TriAthalon Gold Medalist

•Does stock trading in spare time at home

•Speaks English, Dutch, German, Russian and 3 dialects of Chinese

Recommedability vs. UsabilityRecommedability vs. Usability

When gathering requirementsDo we make it usable?Would some recommend the application?

You need to do bothCommon application design patternsCommon pattern layoutsCommon Frameworks for Consistency

Application Design Application Design PatternsPatterns

PatternsPatterns

Common, repeatable use casesSingleton Pattern when codingOutlook Pattern in Application Design

Organizer

Overview

Details

8 Patterns in Application Design8 Patterns in Application Design

Two-Panel SelectorCanvas & PaletteOne Window Drilldown (with variances)Alternate ViewsWizardExtras on DemandIntriguing BranchesMulti-Level Help

Two Panel SelectorTwo Panel Selector

Most Common UI Pattern

Windows ExplorerWindows Media Player

Canvas & PaletteCanvas & Palette

Physical to Virtual Palette to Canvas

Paint, PhotoShop, Visual Studio

One Window DrilldownOne Window Drilldown

Simple UI – Drilldown to each window

Controls the workflowSimple choices for user

Think iPod menu or Control Panel

Alternate ViewsAlternate Views

Same Data – Different LookPrinter Friendly PageListView – Details, Tiles, Thumbnails, Groups

WizardWizard

Step by Step Dissemination of Information

Not always a good ideaUnderstand your users

Extras on DemandExtras on Demand

Common -> ComplexColor PickerSearch Dialog

Intriguing BranchesIntriguing Branches

Web based metaphorGive interesting Content to Curious PeopleSmart Tag, WikiPedia Links, Blogs

Multi-Level HelpMulti-Level Help

Hits all user with all scenariosUsed for more complex applications

How to create levels of help?CaptionsTooltipsExpandable and Collapsible PanelsPop-Up WindowsTask Pane

Application Layout PatternsApplication Layout Patterns

Layout out DataLayout out Data

You have the Application Design – now you need to lay out your data

User expect certain behaviors based on their personaUsers expect certain behaviors based on their experience

Drag & Drop, Expand-Collapse, Text Alignment

Does not consider User ModelI should always have a right-clickCTRL-C should always COPY

Usability vs. Recommendability

4 Categories of Layout4 Categories of Layout

GroupingTitled Sections, Card Stack, Closable Panels, Movable Panels

Alignment & BalanceRight-Left AlignmentDiagonal Balance

Property SheetsDynamic Content

Responsive DisclosureResponsive Enabling

GroupingGrouping

Titled SectionsCard Stacks (Tabs or TabbedMdi)Closable Panels (Docking)Movable Panels (Docking)

Alignment & BalanceAlignment & Balance

Use Labels and Textboxes as if you were readingBalance Buttons with Groupings

Property SheetProperty Sheet

Consider your audienceAdvanced User – Visual Studio PropertyBeginner User – Volume Control UI

Dynamic ContentDynamic Content

Inductive User InterfaceGuide User into a Set of Choices

Responsive DisclosureResponsive Enabling

Responsive DisclosureResponsive EnablingInductive User Interface

The Wonders of Windows Forms

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnforms/html/winforms09212004.asp

Controls – What do I Use?Controls – What do I Use?

In-Box ControlsIn-Box Controls

Most controls that ship with Visual Studio satisfy basic requirements

Groupings, Data Entry, Some Data Visualization

Complex Patterns Require Richer ControlsMovable Windows, Closable Panels, Meaningful Drag & Drop

Modern Applications Require Modern ControlsOffice 2003, Office 12, Visual Studio 2005

You Have to Choice to MakeYou Have to Choice to Make

Build your own controlsUse 3rd party control libraries

Modern UICollapsible Panels (Docking)Card Stack UI (Tabbed MDI)Pictures

UI FrameworksUI Frameworks

Why Use UI Frameworks?Why Use UI Frameworks?

ConsistencyUsers expect same behaviors across applicationsDevelopers (you) need a consistent development environmentSOA, Web Services – Allow Reuse of Data and Business Logic

Why not reuse the UI?

Why Use UI FrameworksWhy Use UI Frameworks

Remove the hundreds of decisions developers make on the UI – let the framework determine how to implement You can focus solely on business logic, UI design, or infrastructure services without requiring knowledge of other parts of the overall applicationThe abstraction of common developer tasks resulting in increased productivity and maintainability

Composite UI Application BlockComposite UI Application BlockCABCAB

Modern Framework from Microsoft for Smart Client developmentShell architecture contains Workspaces & Smart Parts – not controls

Use of PatternsUse of PersonasUse of Modern ControlsUse of Modern Framework

On the WebOn the Web

http://www.vbasp.net/uidesign.zipIUI’s and Web Style Navigation -Michael Weinhardt

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnforms/html/winforms09212004.asp

Infragistics – UI Toolsethttp://www.infragistics.com

CAB Frameworkhttp://msdn.microsoft.com/practices/

BooksBooks

Designing Interfaces – Jenifer Tidwell (O’Reilly)About Face 2.0 – Alan Cooper (Wiley)Elements of User Experience – Jesse James Garrett (New Riders)