User Interface Design User Interface Design Components Components Chapter 11 Handout Chapter 11 Handout
Dec 14, 2015
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