Please enable JavaScript.
Coggle requires JavaScript to display documents.
Chapter 2: Principles of User Interface and Experience Design(UI/UX) -…
Chapter 2: Principles of User Interface and Experience Design(UI/UX)
Design Rules and Guidelines in Interface Design
Type of user interface components:
1.)
Input Controls
Text fields
Radio buttons
Checkboxes
Dropdown lists
Date pickers
Sliders
Buttons
2.)
Navigational Components
Navigation bars
Breadcrumbs
Tabs
Search fields
Pagination
3.)
Informational Components
Tooltips
Notifications
Progress bars
Message boxes
Modals/Pop-ups
4.)
Containers and Layouts
Cards
Expand/collapse sections
Grids & Panels
Important of UI component in UI/UX design
Good UI components
enhance
usability and accessibility.
Proper design choices
reduce
user cognitive load.
Familiar components
increase
learnability and speed of interaction.
Standards and Guidelines of Design Rules
Feedback
-- provides users with immediate, relevant responses
about their actions or system status
Important:
-- Reinforces cause-effect relationship.
-- make system action visible and understandable
-- Prevents confusion or uncertainty.
Error Prevention
-- involves proactively designing interfaces to
minimise user mistakes.
Important:
-- Enhances reliability and user trust.
-- Reduces error recovery time.
-- Essential in mission-critical systems.
Consistency
-- maintaining the uniformity in design elements, interactions, terminology and layout across interface.
Important:
-- Reduces the learning curve.
-- Builds trust and predictability.
-- Prevents cognitive overload by leveraging user memory.
Affordance
-- involves proactively designing interfaces to
minimise user mistakes.
Important:
-- Enables intuitive interactions even without instructions.
-- Improves accessibility and learnability.
-- Reduces the need for training or documentation.
Schneiderman’s Eight Golden Rules of UI Design
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialogues to yield closure
Offer error prevention and simple error handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load
Design Rationale Methods
Design space analysis(DSA)
Definition:
A structured method for exploring multiple alternative solutions and justifying the chosen one based on design criteria.
Key points:
"Design space" refers to the set of all possible options.
Evaluates alternatives using constraints, goals, and trade-offs.
Benefits:
Encourages creative exploration.
Makes design decisions transparent and evidence based.
Useful in collaborative and multidisciplinary teams.
Psychological design rationale
***Definition:***
A method that explains design choices based on cognitive science, psychology, and human behaviour theories.
Key theories:
Mental models
Attention span
Cognitive load
Benefits:
Helps align design with user behaviour and expectations.
Justifies choices that improve learnability, intuitiveness, and usability.
Process-oriented design rationale
Definition:
A method that
chronologically documents
the steps and
justifications throughout the design process
Key points:
Focuses on
decision-making sequences over time
.
Often presented in a
timeline
or
narrative form
.
Benefits:
Helps trace how a final design was derived.
Supports design reviews, version control, and reflective learning.
Key Principles of Usability and Interaction Design
Interaction design (IxD):
is a
process of creating engaging interface
with well-thought-out behaviours and actions.
focus on how users interact with digital system and their experiences.
-----
Role in User Interface:
------
Structure and flow of tasks
- ensure user easy complete task without confusion.
User control and feedback
- provide clear feeback for every action.
Error prevention and recovery
- reduce user error and support easy recovery.
Cognitive alignment
- align system behaviour with user expectation.
User Experience Design (UXD)
is a multidisciplinary approach that focuses on designing products, systems, or services that offer meaningful experiences to users.
to ensure that the product is
usable
,
useful
,
accessible
,
desirable
and
valuable
,
aligning
user needs with business goals.
Usability:
refer to the extent to which product can used by
specified users
to achieve
specified goals
effectively and efficiently.
-----
Key attribute include:
-----
Learnability
- How easy new user can complete basic task.
Efficiency
- How quickly task can be perform once familiar.
Memorability
- How easily the users can return to system after period of not using it.
Error Tolerance
- How easily user can recovery from error.
Satisfaction
- How pleasant the overall experience.
-----
Benefit of Usability
-----
Goal achievement
- usable system make task more easier.
Improved Efficiency
- efficient interaction reduce time and cognitive load.
Increased Satisfaction
- user feel confident and in control.
Better Retention & Engagement
- make user staticfied to the system.
Reduced Support Costs
Usability Engineering
is a
structured
,
systematic process
of designing and evaluating user interfaces with the primary goal of improving usability throughout the development lifecycle.
-----
Meet user expectation
-----
Effectiveness
- accuracy and completeness.
Efficiency
- resource expenditure.
Satisfaction
- comfort and acceptability.
Reduce
user error.
Increase
task seccess rate.
Enhances
statisfaction.
-----
Core Characteristics
-----
Based on data-driven usability metrics.
Integrates user testing early and repeatedly.
Overlap with HCI and software engineering.
Iterative design
is a
cyclical process
of prototyping, testing, analysing and refining a product early
based on user feedback.
Phases of Iterative Design
:
Prototype
- create a simple model of product.
Test with users
- Observe how user interact with the prototype.
Evaluate
- Identify pain points, confusion, or inefficiencies.
Refine
- Modify the product to address usability problem.
Repeat
- Re-test and re-evaluate to improve design.
Usability Principles in UI/UX
Learnability
: How quickly user can pick up the system.
Characteristics
:
-- Clear navigation and meaningful labels
-- Minimalist interface
-- Familiar patterns and metaphors
Flexibility
: the degree which a system can accommodate a range of user preferences, allow multiple method for achieving the same goals.
Characteristics
:
-- Keyboard shortcuts and mouse interactions
-- Customisable themes or layouts
-- Multi-language support
Robustness
: the ability of system to support users in achieving goals, especially face an error.
Characteristics
:
-- Good error messages and recovery steps
-- Undo/redo functions
-- Auto-save and backup