User Interface Design User Interface Design ComponentsComponents

Chapter 11 HandoutChapter 11 Handout

ObjectivesObjectives

To understand principles for To understand principles for navigation and designnavigation and design

To understand principles for input To understand principles for input designdesign

To understand principles for output To understand principles for output designdesign

To have the ability to design a user To have the ability to design a user interfaceinterface

IntroductionIntroductionInterface design is the process of defining Interface design is the process of defining how the users will interact with the system how the users will interact with the system and how that system accepts inputs and and how that system accepts inputs and produces outputsproduces outputs

Three main mechanismsThree main mechanisms– NavigationNavigation– InputInput– OutputOutput

Don’t forget about the GUI’sDon’t forget about the GUI’s

Navigation DesignNavigation Design

The goal is to make the system as The goal is to make the system as simple to use—and so that the user simple to use—and so that the user hardly gives it any thoughthardly gives it any thought

Use the assumption that people will Use the assumption that people will not read manualsnot read manuals

Use typical controls (like installation Use typical controls (like installation prompts)prompts)– Use clear controlsUse clear controls

Basic Navigation PrinciplesBasic Navigation PrinciplesPrevent mistakesPrevent mistakes– Use multiple menusUse multiple menus– Gray out commandsGray out commands– Confirm important actionsConfirm important actions

Simplify recovery from mistakesSimplify recovery from mistakes– Allowing the use of UNDOAllowing the use of UNDO

Use consistent grammar orderUse consistent grammar orderFile-saveFile-saveCopy-pasteCopy-paste

Navigation ControlsNavigation ControlsLanguagesLanguages– Natural versus programming like SQLNatural versus programming like SQL– Use of Office Assistant Use of Office Assistant

MenusMenus– Broad and shallow as opposed to narrow and deepBroad and shallow as opposed to narrow and deep– One rule—no more than 8 items and 2-3 mouse clicks or One rule—no more than 8 items and 2-3 mouse clicks or

keystrokes to execute actionkeystrokes to execute action– Grouping by interface objects (Customers, Orders) Grouping by interface objects (Customers, Orders)

instead of by action (New, Update, Format)instead of by action (New, Update, Format)

Direct ManipulationDirect Manipulation– Windows Explorer, PowerPointWindows Explorer, PowerPoint

MessagesMessagesError MessagesError Messages– First should explain the problemFirst should explain the problem– Second, describe how to correct itSecond, describe how to correct it– Third, provide button(s) for user responseThird, provide button(s) for user response

ConfirmationConfirmationAcknowledgementAcknowledgementDelayDelayHelpHelpPolite versus impolitePolite versus impoliteAvoid humor and negative wordingAvoid humor and negative wording

Input DesignInput DesignFacilitates the input of data into the Facilitates the input of data into the system and ???system and ???

Basic principlesBasic principles– Online or batch processingOnline or batch processing

Can you think of examples for both kinds?Can you think of examples for both kinds?

– Capture data at the sourceCapture data at the sourceAvoid multiple entry of same infoAvoid multiple entry of same info

Can utilize source data automation [examples???]Can utilize source data automation [examples???]

– Minimize keystrokesMinimize keystrokesUtilizing default valuesUtilizing default values

Types of InputTypes of InputTextTextNumbersNumbersSelection boxSelection boxInput ValidationInput Validation– Completeness checkCompleteness check– Format checkFormat check– Range checkRange check– Check digit checkCheck digit check– Consistency checkConsistency check– Database checkDatabase check

Output DesignOutput DesignPerhaps the most important part of system Perhaps the most important part of system design because of its visibility and design because of its visibility and because of ????because of ????Basic PrinciplesBasic Principles– Understand report usageUnderstand report usage

Types of report—all general or specific, real-time or Types of report—all general or specific, real-time or batch—look at business value of the reportbatch—look at business value of the report

– Manage information loadManage information loadBalance needed information as opposed to all Balance needed information as opposed to all information availableinformation available

– Minimize biasMinimize biasIe utilizing alphabetical or numerical listingIe utilizing alphabetical or numerical listingGraphical displays of bar chart informationGraphical displays of bar chart information

Types of Outputs Types of Outputs

Types of OutputTypes of Output– ReportsReports

DetailedDetailed

SummarySummary

Turnaround documentTurnaround document

GraphsGraphs

– MediaMediaPaperPaper

Electronic—web, CD, others??Electronic—web, CD, others??

Now what?Now what?

Well how do you go about actual Well how do you go about actual creating the interface?creating the interface?

Do you just jump right in?Do you just jump right in?

You could but….You could but….

User Interface Design PrinciplesUser Interface Design PrinciplesFirst, user design is an artFirst, user design is an art

You must make the interfaceYou must make the interface– pleasing to the eyepleasing to the eye– simple to usesimple to use– Minimize the potential for errorsMinimize the potential for errors

One of the biggest challenges is managing One of the biggest challenges is managing spacespace– That is, how do you include all the necessary That is, how do you include all the necessary

information without overload the user (well see information without overload the user (well see this in a little bit)this in a little bit)

Six Main PrinciplesSix Main Principles

LayoutLayout

Content AwarenessContent Awareness

AestheticsAesthetics

User ExperienceUser Experience

ConsistencyConsistency

Minimal User effortMinimal User effort

LayoutLayout

The interface should be a series of The interface should be a series of areas on the screen that are used areas on the screen that are used consistency for different purposedconsistency for different purposed– Top area for commands and navigationTop area for commands and navigation– A middle area for input or outputA middle area for input or output– Bottom area for status informationBottom area for status information

Content AwarenessContent Awareness

Users should always be aware of Users should always be aware of where they are in the system and where they are in the system and what information is being displayedwhat information is being displayed

Including titles, and location menuIncluding titles, and location menu– Ie Home>>GBA 577>>Lecture SlidesIe Home>>GBA 577>>Lecture Slides

Also applies to form/field labelsAlso applies to form/field labels– Proper date formatting MM/DD/YYYYProper date formatting MM/DD/YYYY

AestheticsAestheticsInterfaces should be functional and inviting to Interfaces should be functional and inviting to users through careful use of white space, colors, users through careful use of white space, colors, and fontsand fontsBe careful of trade off concerning white spaceBe careful of trade off concerning white spaceTry to keep density of form lowTry to keep density of form lowDesign of text should be kept to same size and Design of text should be kept to same size and typetype– 10 point font is often preferred and no less than 8 point10 point font is often preferred and no less than 8 point– Serif font best for printed reports, sans serif better for Serif font best for printed reports, sans serif better for

computer screens, headingscomputer screens, headings

Color and patterns should be used carefully and Color and patterns should be used carefully and sparing (10% of men are colorblind)—but of sparing (10% of men are colorblind)—but of course there are always exceptionscourse there are always exceptions– Be careful of high contrast in colorsBe careful of high contrast in colors

User ExperienceUser ExperienceAlthough ease of use and ease of learning Although ease of use and ease of learning often lead to similar design decisions, often lead to similar design decisions, there is another tradeoffthere is another tradeoff– Trying to negotiate between experienced users Trying to negotiate between experienced users

and novices (ie difference between full and and novices (ie difference between full and partial menus)partial menus)

Ease of learning – how quickly users can Ease of learning – how quickly users can learn new systemslearn new systems

Ease of use – how quickly users can use Ease of use – how quickly users can use the system once they have learned itthe system once they have learned it

ConsistencyConsistencyEnables users to predict what will Enables users to predict what will happened before they perform the happened before they perform the functionfunctionTrying to make programs simulate Trying to make programs simulate windows or macswindows or macsTrying to make web interfaces similar to Trying to make web interfaces similar to other models (Amazon)other models (Amazon)Try to use consistent terminologyTry to use consistent terminology– Customer versus clientCustomer versus client– Use the same terms/field names for both forms Use the same terms/field names for both forms

and reportsand reports

Minimal User EffortMinimal User Effort

Making the interface easy to use, Making the interface easy to use, actions should be no more than 3 actions should be no more than 3 clicks awayclicks away

User Interface Design ProcessUser Interface Design Process

1.1. Use Scenario DevelopmentUse Scenario Development

2.2. Interface Structure DesignInterface Structure Design

3.3. Interface Standards DesignInterface Standards Design

4.4. Interface Design PrototypingInterface Design Prototyping

5.5. Interface EvaluationInterface Evaluation

Use Scenario DevelopmentUse Scenario DevelopmentAn outline of the steps that the users An outline of the steps that the users perform to accomplish some part of their perform to accomplish some part of their workwork

Think of the library projectThink of the library project– Some users may need to find specific Some users may need to find specific

informationinformation– Others may need more general search resultsOthers may need more general search results

One helpful tool is to think of processes One helpful tool is to think of processes and use modeling toolsand use modeling tools

Interface Structure DesignInterface Structure DesignDefines the basic components of the Defines the basic components of the interface and how they work together to interface and how they work together to provide functionality to the users.provide functionality to the users.

This is similar to modeling in the user This is similar to modeling in the user scenario—except that you draw out how scenario—except that you draw out how each menu/screen is related to each othereach menu/screen is related to each other

Most similar to a Data Flow Diagram (DFD)Most similar to a Data Flow Diagram (DFD)

Specific Interface StandardsSpecific Interface StandardsInterface MetaphorsInterface Metaphors– Using a real world concept as a model for a computer systemUsing a real world concept as a model for a computer system

Paper form or tablePaper form or tableOnline version of a checkOnline version of a check

Interface ObjectsInterface Objects– Applying an understandable name to the fundamental building Applying an understandable name to the fundamental building

blocks of a systemblocks of a systemShopping cart exampleShopping cart example

Interface ActionsInterface Actions– Specifies the navigation and command style (menus), and Specifies the navigation and command style (menus), and

grammargrammarInterface IconsInterface Icons– Be careful as some icons are not intuitiveBe careful as some icons are not intuitive

Interface TemplatesInterface Templates– Designing the same appearance for each different page in the Designing the same appearance for each different page in the

systemsystem

Interface Design PrototypingInterface Design Prototyping

A mock-up or simulation of a A mock-up or simulation of a computer screen, form, or report.computer screen, form, or report.– StoryboardStoryboard

Hand-drawn pictures of what the screens will Hand-drawn pictures of what the screens will look likelook like

– HTML PrototypeHTML Prototype– Language PrototypeLanguage Prototype

How do you select which technique?How do you select which technique?

Interface EvaluationInterface EvaluationThe objective is to understand how to The objective is to understand how to improve the design of the system improve the design of the system before it is completed.before it is completed.There are four main common There are four main common approachesapproaches– Heuristic evaluationHeuristic evaluation– Walk-Through evaluationWalk-Through evaluation– Interactive evaluationInteractive evaluation– Formal usability testingFormal usability testing

Heuristic EvaluationHeuristic Evaluation

Examines the interfaces by Examines the interfaces by comparing it to a set of heuristics or comparing it to a set of heuristics or principles of interface design.principles of interface design.– Checked separately by at least three Checked separately by at least three

members of the project team and then members of the project team and then meet together to compare answersmeet together to compare answers

Walk-Through EvaluationWalk-Through Evaluation

A meeting conducted with users who A meeting conducted with users who will ultimately have to operate the will ultimately have to operate the systemsystem

This usually occurs in the interface This usually occurs in the interface design prototyping stagedesign prototyping stage

Interface EvaluationInterface Evaluation

Users work individually with a Users work individually with a member of the project team on a member of the project team on a prototype of the model and discuss prototype of the model and discuss what their likes/dislikeswhat their likes/dislikes

Provides additional information or Provides additional information or missing functionalitymissing functionality

Formal Usability TestingFormal Usability Testing

Generally some type of scientific Generally some type of scientific testing process that mostly can only testing process that mostly can only be done with language prototypesbe done with language prototypes

Can include surveys, video camera Can include surveys, video camera recordingrecording

It is very expensive and must include It is very expensive and must include more than 5 users, but not really more than 5 users, but not really more than 10more than 10

ConclusionConclusionAt this point you should be able toAt this point you should be able toUnderstand the navigation, input, and Understand the navigation, input, and output design principles and techniquesoutput design principles and techniquesUnderstand the fundamental user Understand the fundamental user interface design principles.interface design principles.Understand the process of user interface Understand the process of user interface designdesignUnderstand how to design the user Understand how to design the user interface structureinterface structureUnderstand how to design the user Understand how to design the user interface standardsinterface standards