user interface design n.
Skip this Video
Download Presentation
User Interface Design

Loading in 2 Seconds...

play fullscreen
1 / 65

User Interface Design - PowerPoint PPT Presentation

  • Uploaded on

User Interface Design. Two major opportunities for design during software development. &. Motivation.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'User Interface Design' - lucas-langley

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • On most projects usability is the highest priority non-function quality attribute. I can’t remember ever participating in a requirements gathering meeting when the users or their representatives didn’t stress (more often—plead), “make it easy to use”.
  • An application’s user interface (UI) can and usually does make or break the application.
  • Many people don’t make a distinction between an application and it’s UI. For them the UI is synonymous with the application*.
  • Usability is a major product differentiator. Many people choose one product over another simply on the basis of usability (e.g. iPhone).
motivation cont
Motivation [Cont]
  • The importance of good usability is increasing as user base and application base broaden
    • The improved price/performance of hardware (thanks Moore’s Law!) is creating a larger, broader and more diversified user base for application development. Many more people are using computers today than just a few years ago and people are using computers for more tasks.
    • The desire to automate an increasing number of tasks puts new demands on usability. For example, many users don’t have time for extensive training before they use an applications such as ATM machines, museum kiosks and airport check-in terminals.
motivation cont1
Motivation [Cont]
  • Users are less tolerant of difficult-to-use interfaces
    • There are rising expectations in terms of usability. Superior UI design of a few widely used applications sets a new standard for ease of use users expect with other applications as well.
    • Experience with software that is a pleasure to user has made users less tolerant of confusing interfaces, especially when it comes to discretionary software (users have a choice).
related areas of study
Related areas of study
  • Usability is a multidisciplinary research area attracting researchers from: psychology, computer science, and sociology.
  • There are several areas of study that deal with usability (each from a slightly different perspective):
    • Human-Computer Interaction (HCI), Computer-Human Interaction (CHI)
    • Interaction Design, User-Centered Design, Contextual Design, Participatory design, Goal directed design
    • User Experience (UX)
    • Human Factors, Ergonomics
  • Each approaches usability from a different perspective, but all are concerned with making computers—more generally devices—easier and more enjoyable to use.
topic outline
Topic Outline
  • What is usability?
  • Financial impact of improved usability.
  • Usability Engineering – a systematic process for creating easy-to-use interfaces.
  • Assessing usability in an existing product
    • Heuristic Evaluation – inspectors review the user interface of a software system and check it for compliance with established usability heuristics or principles.
    • Empirical user testing – usability testing with real users.
usability defined
Usability Defined
  • Usability is:
    • In general, usability is a measure of how easy a system is to use. In this context, usability is non-functional requirement or quality attribute.
    • More specifically, usability is the “extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use." [ISO 9241-11]
    • It is also a term that describes the study of ease of use, including methods and techniques for improving human computer interaction.
  • Usability of a software system is more than just program behavior. It also includes usability of documentation, installation procedures, etc.
factors that determine software usability
Factors that determine software usability
  • Learnability – how easy is it to use for the first time?
    • Familiarity – Does it work the way users expect it to work?
    • Consistency – Office products (Word, Excel, etc.) are mostly consistent.
    • Predictability – can uses predict where an option will be found, what a button will do, etc.?
    • Simplicity – new users usually prefer a minimalist UI
  • Efficiency – once users learn how to accomplish a task how easy is it to perform the task?
  • Memorability – how easy is it to use the application after not using it for a long period of time?
  • Low error rate (few errors and it is easy to recover from errors that are made)
  • Confidence and Satisfaction – how pleasant or enjoyable is the application to use?
a hierarchy of usability needs
A hierarchy of usability needs

Three important goals of UI design are to develop software that is:

Effective (utility)

Easy to use


These three goals definea hierarchy of needs: If it worksI’ll consider it. If it’s easy touse I will be pleased. If it’senjoyable I’ll develop anemotional attachment.


Easy to use


financial impact of usability
Financial Impact of Usability
  • The effects of improved usability can be substantial.
  • Estimating the potential ROI of usability improvements starts with estimates of the number of users, approximate hours they will spend with the product each day, the loaded salary of the average user and expected lifetime of the system. (Loaded salary includes salary plus benefits and other overhead.)
  • For example, 2,300 users, costing $28 hour, using the product an average of 3.5 hours a day for 3 years:

u = 2300

h = 3.5

s = $28

y = 3

financial impact of usability cont
Financial Impact of Usability [Cont]
  • From this you can calculate the financial impact (potential ROI) of specific improvements in usability.
  • For example, improvements in learnability that reduce training time by a half a day are worth:

2300 * 4 * $28 = $257,600

  • Improvements in overall usability that increase productivity by 10% would result in a yearly saving of:

2300 * 3.5 * 236 * $28 * 10% = $5,319,440

financial impact of usability cont1
Financial Impact of Usability [cont]
  • Because the formula deals with costs incurred at different points in time (investment is upfront and savings accrue over time), one of the cash flows needs to be converted into the time frame of the other. (see the lesson on economics for how to do this).
  • On software projects (as in the economy) incentives need to be structured to make the best use of resources. The cost of improved usability is incurred by the development organization during the project. The benefits are realized over time in increased productivity and satisfaction. Some how the development group has to be incentivized to make prudent investments in usability. Example: development organization could be charged back (or credited) for application training and support.
usability engineering
Usability Engineering
  • The first step in usability engineering is to understand the users and their tasks. This can be accomplished in part through task and function analysis.

Task analysis involves observing users in order to understand their needs. How do they currently approach their work? What services will they need from the system in order to accomplish their work? The output of task analysis is the information needed to write use cases: categories of users (roles), the goals associated with each type of user and workflows or scenarios leading to goal resolution.

Function analysis looks beyond current work practices to identify the purpose of the observed user activities. For example, task analysis might reveal receptionists making phone calls to patients reminding them of upcoming appointments. The task here is calling patients. The function is to remind patients of an upcoming appointment. Email and text messaging are alternate methods of accomplishing the task.

usability engineering cont
Usability Engineering [cont]
  • Set UI goals and priorities. UI design is just another form of design. Trade-offs are inherent in any design process. Some principles of good UI design might contradict others. Example: UI should look like existing competing applications to take advantage of existing user model but we also want to be innovative and improve on existing solutions.
  • Create a conceptual design and validate it with a prototype. Prototyping gives feedback early in the development process. Users don’t always know what they want or what is possible. With a prototype you can experiment with different design options without incurring all the costs of implementation.
usability engineering cont1
Usability Engineering [cont]
  • Implement a portion of the UI design. This is likely to be a more detailed implementation than was possible during the prototyping phase.
  • Assess usability
    • Heuristic evaluation – Use principles of good design to do heuristic evaluation of system increments.
    • User testing – Do empirical testing with a representative sample of users.
assessing usability
Assessing Usability
  • The two primary methods of assessing the usability of a product are:
    • Heuristic Evaluation – Experts assess an existing design according to established concepts and principles of UI design as well as specific guidelines for the platform. For example, both Apple and Microsoft publish UI design guidelines for the different platforms they support.
    • User Testing
concepts in ui design
Concepts in UI Design
  • Conceptual models
  • Feedback
  • Constraints
  • Affordances
what would you do
What would you do?

You and your buddies are driving up a Colorado mountain road on a hot summer day when your car, a ‘85 Chevy Impala,

starts to overheat. There is no room to

pull over. One of your friends suggests turning on the heater. Another laughs

at the idea, noting you want the car

cooler not hotter. What do you do?

conceptual models
Conceptual Models
  • A conceptual model is a personal understanding of how something works.
  • A good conceptual model helps you make correct decisions concerning the operation of a device.
  • Operation of a program is made more difficult if you approach it with the wrong conceptual model. For example, Windows Movie Maker doesn’t follow the File/Open File/Close document model. If you expect it to follow the document model of say Word, you will be quite frustrated trying to execute a File/Save before quitting.
conceptual models cont
Conceptual Models [Cont]
  • The user’s conceptual model of a software system is formed from their interaction with the system, their prior experience with other computer programs and their knowledge about the world.
  • The programmer should, to the extent possible, design around the user’s existing conceptual model (expectations).
  • If the user’s existing conceptual model is insufficient, the programmer can extend it using metaphors and training. For example, the metaphor of the trash can is used to make deleting a file easy and understandable.
cockpit of a boeing 767
Cockpit of a Boeing 767
  • Does this look confusing to you?
  • If so, now you know how users feel when they lack the mental model needed to interpret the UI in front of them.
mit s agnes suit
MIT’s Agnes Suit
  • When designing products for others, it helps to be able to see the world from their perspective.
  • MIT’s AgeLab created the Agnes suit so that product designers could experience the world as an older adult.
  • Short of a lobotomy, there is no Agnes suit for software engineers.
possible reasons why some ui designs fall short
Possible reasons why some UI designs fall short
  • Programmers sometimes let their detailed knowledge of the implementation influence their decisions on UI design. They design a UI that is easy to use only if you understand the implementation. Users find it difficult to use because they don’t have privileged knowledge of the implementation.
  • For programs that are open source, usability might not be the highest priority.
  • Programmers might design a UI that is comfortable to them when they aren’t representative of the target users.
is it ok for developers to be put in charge of ui design
Is it OK for developers to be put in charge of UI design?
  • There is no substitute for getting input from real users during requirements definition and doing usability testing with real users during system design.
  • Some go as far as saying: developers shouldn't’t be put in charge of UI design. I would qualify this statement with: When usability is a high priority, developers without training in usability (and the ability to adopt the user’s mental model) shouldn't’t be put in charge of UI design.
  • Users like to know what’s going on and how their input will be interpreted.
  • Feedback shows the state of the system and the effect of user action.
  • Feedback on input is important because it makes the user feel confident their actions were received (and gives the user the feeling of being in control).
  • For example, buttons often change their expression to look depressed (not sad but indented) when selected.
  • Example: many browsers use a spinning wheel to indicate a web page is loading.
response time feedback
Response time feedback
  • The rule-of-thumb for response time feedback is:
    • Operations taking less than 0.1 second appear to the user to be instantaneous. Users might benefit from feedback or confirmation the operation occurred, but since the delay is imperceptible, there isn’t time to give feedback during the operation.
    • Operations taking 0.1 to 1.0 second will have a noticeable delay, but in most cases special feedback isn’t necessary. (In fact showing feedback on operations taking less than 1 second might even be distracting.)
    • Response time feedback should be given for any operation lasting longer than 1 second.
      • For operations taking 1 to 10 seconds, users just need confirmation that the operation is in progress.
      • For operations lasting longer than 10 seconds, users may want to take a break or perform other work while they are waiting. The progress indicator should indicate how long the operation is likely to take.
response time indicators
Response time indicators
  • For operations lasting 1 to 10 seconds, a reasonable response time indicator is a animated icon such as a spinning ball or wheel.
  • For operations lasting 10 seconds or more a progress bar or percent done indicator is recommended:
  • This lets the user know the system is making progress and approximately how long until it will be finished.
  • Constraints restrict allowed behavior.
  • Constraints help to avoid user errors.
  • Example: most connectors (USB, VGA, etc.) are designed such that there is only one way of making the connection.
  • Example: the printed versionof a product key often includesdashes for readability. Whenprompting for a product key,you can put constraints onallowable input so there is noconfusion about whether or notuser needs to type –’s.
  • Affordance = visual clues to an object’s function and use.
  • Affordance refers to the perceived and actual properties of an object that suggest how it is used.
  • A flat plat at one side of a door affords pushing.
affordances cont
Affordances [Cont]
  • Objects can give off thewrong clues. For example,in the image on the rightthe bar affords pulling butthe label indicates theproper action is pushing.
affordances in programming
Affordances in programming
  • Hyperlinks should be underlined and blue
  • Buttons should be shaded with a 3D effect indicating they can be pressed.
  • Favor standard UI controls from operating system. These are the ones users are most likely to be use to.
intuitive vs familiar
Intuitive vs. Familiar

When someone asks for an “intuitive” interface what they usually want is a familiar one. Human instincts aren’t of much help when interacting with most programs.

Interfaces are easy to use and easy to learn when they are familiar; when they leverage what we already know; when they provide experiences that are consistent with past experiences.

Is the iPad intuitive or familiar? Is the iPad instinctive to use? Children seen to have no problem using an iPad. Does that make it instinctive?

ui design principles
UI Design Principles

Simple and natural dialogs

Safe exploration and forgiveness

Direct manipulation


Instant gratification

Use shortcuts and accelerators

Minimize the cognitive costs of your application

Spatial Memory

Minimize user’s memory load

Help and documentation

simple and natural dialogs
Simple and natural dialogs
  • Speak the user's language. Use words, phrases and concepts familiar to the user.
  • Favor a minimalist design. When in doubt, leave it out.
  • “Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility”
  • Evaluate the following according to heuristics for UI design.
error messages
Error Messages
  • Error messages are a special case of dialog with the user.
  • A good error message will indicate the problem and constructively suggest a solution without shouting at the user or making the user feel inferior. (Example: syntax errors you get in modern IDE’s.)
example error messages
Example Error Messages
  • Good Error Message:


  • Bad Error Message:
safe exploration and forgiveness
Safe exploration and forgiveness

Exploration is one of the best ways to learn a new system.

Encourage, or at least don’t do anything to discourage, exploration. You can do this by avoiding unpleasant consequences of exploration. Users are encouraged to explore when your program is forgiving. Forgiveness means that actions on the computer are generally reversible.


Always warn users before they initiate a task that will cause irretrievable data loss. (In a helpful way)

Make actions reversible. Provide multi-level undo

direct manipulation
Direct manipulation

Favor direct manipulation of onscreen objects over commands.

When the user performs operations on the object, the impact of those operations on the object is immediately visible. Allow the user to feel they are directly controlling the object they are working with.


Drag and drop in IE

Changing the length ofa video clip on the timelinein Premiere


Consistency in the interface allows users to transfer their knowledge and skills from one application to another.

There are different levels of consistency:

Consistency within the current instance of your product

Consistency with earlier versions of your product

Consistency within a family of products you offer

Consistency with other products on the same platform

Consistency with user expectations

When there are conflicts, narrow-scope consistency (within an application) have priority over broad-scope consistency (other products on the same platform).


Ctrl-c for copy and Ctrl-v for paste are reflexive for most Windows users.

instant gratification
Instant gratification

People like to see immediate gratification from the actions they take. (Skip the splash screen?)

Users should achieve some level of success within the first few seconds of using your software.

Good Example

Many programs start with ablank document and controlsyou need to begin workingout front.

Bad Example

Microsoft Access.

use shortcuts and accelerators
Use shortcuts and accelerators
  • Cater to a range of users from novice to casual to expert.
  • Expert users are interested in working efficiently. Shortcuts and accelerators can facilitate this.
  • Changes made to the UI to support expert users shouldn't negatively affect novice users.
minimize cognitive costs
Minimize Cognitive Costs

Just as financial costs are a barrier to purchase, cognitive costs can be a barrier to use. Most people don’t have the time, energy or patience to parse a complicated interface.

Most people will scan the page looking for obvious clues how to proceed. Users look for visual cues like color and form that can be immediately processed rather than invest the time it takes to read and comprehend text

Expecting users to read is such a quaint idea.

cognitive cost of reading an email
Cognitive cost of reading an email


The cognitive cost of reading this email was too much for the recipient.

spatial memory
Spatial Memory

Consciously or unconsciously people tend to use spatial memory to find their way back to objects and commands.

Rearranging controls or menu options can disrupt spatial memory.

Spatial memory is related to consistency


Some applications will allow you to save your panel arrangement

Sorting menu commands by frequency of use isn’t always a welcome feature.

minimize user s memory load
Minimize user's memory load
  • Users are better at recognizing info rather than recalling it.
  • "The user should not have to remember information from one part of the dialogue to another.“
  • In most cases, recognize is better than recall.
help and documentation
Help and documentation
  • Strive for a design that needs no documentation. The need for documentation and help files should be a last resort.
  • Users don’t read documentation unless they are desperate.
  • Help files should be task-oriented, searchable, and have a good index.
usability testing
Usability Testing
  • First, clarify the purpose of the testing. Is the purpose of the tests to gather feedback on an evolving design, assess the overall capability of an existing one or establish a baseline of user performance? What are the relative priorities of the different aspects of usability (learnability, error rate, predictability, etc)?
  • Find a representative sample of users. You can get useful (although not statistically valid) results with just a few users (3-5, 8 if you have the time and money). If you will be conducting only one test during the product development lifecycle you should probably test with more than 5 users.
  • Prepare test materials. Define pre- and post-test questionnaires and task scenarios participants will be asked to perform.
  • Conduct the tests, record data.
  • Analyze data and observations.
  • Identify and prioritize changes for next iteration.
thinking aloud
Thinking Aloud
  • Simple but incredibly powerful technique for understanding how users perceive and interpret a UI.
  • The thinking aloud technique is simply asking the user to think aloud or verbalize his or her thoughts while using the system.
making design decisions based on the data from user testing
Making design decisions based on the data from user testing
  • If every time a test user has a problem or voices dissatisfaction with some aspect of the UI you promptly make a change, you will be forever making changes with little forward progress toward a generally acceptable UI (one that maximizes user acceptance among all users).
  • There are huge individual differences between testers, even among those matching a narrow profile of the target user. For statistically valid data you will need to conduct tests with many users and take special care to create (methodologically) valid user tests—something that is impractical for most projects (not enough time or money).
  • What’s a dislike for one user might be a favorite of another. For example, I’ve never seen a group of people agree on the color scheme for a web site.
  • Use the information from usability testing to supplement—not take the place of—your intuition.
  • Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design by Larry L. Constantine
  • Usability Engineering by Jakob Nielsen [Washu book has markings]
cognitive principles of perception
Cognitive Principles of Perception
  • TBD. See file perception.pdf in HCI folder.