User-Centered Design (UCD) Principles

https://www.udacity.com/course/human-computer-interaction--ud400

Discoverability

Discoverability

TMI TMI TMI …

Discoverability

MS Office 2003

- All functions are hidden as a text under main menus 🡺 need to memorize

- Well hierarchically structured, but not easy to discover

Since MS Office 2016

- The first level of each main menu is shown by tabs (groups)

- All frequently-used functions are graphically described and can be immediately found

Don’t hide items under a deep menu structure!

Discoverability

Recent software provides more visible interface (with meaningful icons) that let users easily

discover necessary functions.

Discoverability

• Make item easily searchable

Don’t make users search hard!

Keyword search area

Discoverability

(NAVER in 2002)

Don’t make users get too many text information!

Discoverability

(NAVER in 2018)

Discoverability Guidelines

• Make things visible without distraction
• Make all necessary things visible �(hide only less important things)
• Minimize user’s memory load (don’t make people memorize too many things for their work)
• Don’t make users click too many times for searching information
• Put information well arranged (e.g., grouping, gap between items)
• Put text information considering readability

Simplicity

Don’t show users too many things at the same time!

Simplicity

• Show simple information first, then show details if clicked

The first page shows only temperature. Users can find detailed information by swiping the screen up whenever they want to know details.

Simplicity

• Make layout simple and organized

Simplicity

• Physically simplified

Simplicity

• Avoid redundant information that look similar

Simplicity

• Not only graphically simple, but also logically simple (e.g., shortcut, short-path)

Ribbon menu: customizable shortcuts

Shortcut keys (Alt + key) for quick access to menu items

Simplicity Guidelines

• Physical simplicity
• Graphical simplicity
• Do NOT show unnecessary information (e.g., texts, images, animating contents)
• Do NOT put too many variations (e.g., 5 ± 2 different colors, 3 different fonts)
• Simple layout
• Logical/Procedural simplicity
• Simple menu structure
• Make information flow simple
• Provide short-cut

Flexibility

• Accommodate a wide range of individual preferences and abilities
• Accept both inexperienced and experienced users

Ribbon menu: customizable shortcuts for experienced users

Flexibility

Menu customization

Menu customization

Flexibility Guideline

• Make things flexible so that people can customize as their preferred
• Provide user settings
• Provide shortcuts for advanced users

Affordance

• Intuitively say how the object could be possibly used

Affordance

Affordance

?

A good design doesn’t need “How-to-Use” memo.

Affordance Guideline

• Make people know what and how they can do without saying how-to instruction

Mapping

• Relationship between the elements of two sets of things

???

Don’t make users remember everything!

Mapping

Which light?

Mapping

WYSIWYG (What you see is what you get) interface

Mapping Guideline

• Mapping is related to intuitiveness.
• Do NOT make users think to map between two things
• Show mapping visibly, so that user immediately know what is what
• WYSIWYG: people don’t need to map “how the design will be changed” in their mind.

Consistency

• Reuse common understandings, knowledge, habits, ...
• Do not make users re-think or newly memorize

Consistency

Bad example

Consistency (in Branding)

Consistency

Consistency

• Use user’s experience and stereotype
• Web design example:
• Main menu is at the top or left side of a page
• Logo is at the top left or top center of a page
• Logo is clickable, user can go to the HOME when its clicked

Consistency

• Compatibility issue
• Same design scheme for each page
• Same location of design components (e.g., title, …)
• Support different OS (Windows, macOS, iOS, Android, …), different browsers (IE, Safari, Chrome, …), different devices

​

Consistency Guideline

• Keep consistency between pages
• Keep consistency between series
• Keep same UI/interaction style as users’ previously acquired
• Do NOT use too strange interfaces that user cannot understand intuitively
• Do NOT violate user’s cognitive process

Structure

• Organize user interface and information purposefully, meaningfully, and usefully (in terms of its layout)

Structure

• Make layout simple and organized

Old Amazon website

New Amazon website

Structure

• A bad example

Structure Guidelines for Menu Structure

• Show sitemap or show all menus
• Provide clear information hierarchy

Web Interaction Design Principles

• Navigability: Keep the structure of your primary navigation (near the top/side of your page).
• Include sitemap in the header/footer of your site.
• Use breadcrumbs on every page, so people are aware of their navigation trail (current location).
• Include a search box near the top of your site so visitors can search by keywords.
• Don't dig too deep. It’s best to keep your navigation to no more than three levels deep.

Constraints Guidelines

• Limit user’s actions to avoid any possible errors

Perceptibility Guidelines

• Keep users informed
• Provide navigation to users to understand ‘where I am’ and ‘where to go’

Tolerance for Errors

• Accept user’s error (so, the system can work properly and safely with an error if the error is not so critical)
• Gently provide the way how to solve the error

Wrongly pressed button

Tolerance for Errors

Wrongly pressed button

Provide corrected keywords

Feedback

• Immediately let users informed what is working on the computer
• Positive feedback examples (e.g., progress bar)

Feedback

• Negative feedback examples (e.g., error message)

A kind error message

(with descriptions)

Unkind error messages

(so, what can I do?)

Feedback

• Kind error messages

Provide an error message before user click the next button.

Suggestions

Feedback

• Good and bad example

Provide why user meets an error and how to solve it

Documentation

• A good design don’t need a complex manual to read.

IKEA Manual

Tooltip box

Documentation

• But, if a user need to know something, that should be found easily anytime.

Other Sets of Principles

• Learnability
• Understandability
• Memorability
• Readability/Legibility/Visibility
• …