Top Banner
User Interface Design User Interface Design Components Components Chapter 11 Handout Chapter 11 Handout
31
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: User Interface Design Components Chapter 11 Handout.

User Interface Design User Interface Design ComponentsComponents

Chapter 11 HandoutChapter 11 Handout

Page 2: User Interface Design Components Chapter 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

Page 3: User Interface Design Components Chapter 11 Handout.

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

Page 4: User Interface Design Components Chapter 11 Handout.

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

Page 5: User Interface Design Components Chapter 11 Handout.

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

Page 6: User Interface Design Components Chapter 11 Handout.

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

Page 7: User Interface Design Components Chapter 11 Handout.

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

Page 8: User Interface Design Components Chapter 11 Handout.

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

Page 9: User Interface Design Components Chapter 11 Handout.

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

Page 10: User Interface Design Components Chapter 11 Handout.

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

Page 11: User Interface Design Components Chapter 11 Handout.

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??

Page 12: User Interface Design Components Chapter 11 Handout.

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….

Page 13: User Interface Design Components Chapter 11 Handout.

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)

Page 14: User Interface Design Components Chapter 11 Handout.

Six Main PrinciplesSix Main Principles

LayoutLayout

Content AwarenessContent Awareness

AestheticsAesthetics

User ExperienceUser Experience

ConsistencyConsistency

Minimal User effortMinimal User effort

Page 15: User Interface Design Components Chapter 11 Handout.

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

Page 16: User Interface Design Components Chapter 11 Handout.

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

Page 17: User Interface Design Components Chapter 11 Handout.

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

Page 18: User Interface Design Components Chapter 11 Handout.

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

Page 19: User Interface Design Components Chapter 11 Handout.

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

Page 20: User Interface Design Components Chapter 11 Handout.

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

Page 21: User Interface Design Components Chapter 11 Handout.

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

Page 22: User Interface Design Components Chapter 11 Handout.

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

Page 23: User Interface Design Components Chapter 11 Handout.

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)

Page 24: User Interface Design Components Chapter 11 Handout.

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

Page 25: User Interface Design Components Chapter 11 Handout.

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?

Page 26: User Interface Design Components Chapter 11 Handout.

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

Page 27: User Interface Design Components Chapter 11 Handout.

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

Page 28: User Interface Design Components Chapter 11 Handout.

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

Page 29: User Interface Design Components Chapter 11 Handout.

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

Page 30: User Interface Design Components Chapter 11 Handout.

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

Page 31: User Interface Design Components Chapter 11 Handout.

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