- A Prototype of HP.com redesign
- Source of learning and reference for UI/UX Design and Figma
- Link to the Figma file HP Prototype
- Form Design: Learn about best practices for designing user-friendly and effective forms.
- UX Design Inspiration: Explore examples of great UX design to inspire your own work.
- Behavioral Patterns for UX: Understand essential cognitive behaviors that influence UX design.
- Note: UI/UX design focuses on creating user-friendly experiences and helping designers make intuitive interfaces.
- Also known as Man-Machine Interaction.
- Interaction flow: Human communicates with Machine to complete a Task. Designers are responsible for creating this interaction interface.
- Goals:
- Develop usable products.
- Involve users throughout the design process.
- Avoid wasting resources on projects that users don't find useful.
- Minimize the likelihood of user mistakes.
- Reference: Leading design principles for HCI are widely accepted in the UX community.
- Visibility: Key functions should be visible and easy to find.
- Feedback: Provide users with information on their actions' effects.
- Constraints: Prevent users from performing unintended actions.
- Mapping: Controls should intuitively map to their effects (e.g., light switches naturally correspond to lighting).
- Consistency: Maintain the same operation across all versions of a product.
- Affordance: Design objects to indicate how they should be used.
- Prioritize the user experience in all design choices.
- Understand how human memory (both short-term and long-term) impacts usability and interface design.
- Natural Mapping: The relationship between controls and their effects should feel natural and intuitive.
- Good mapping reduces the user's need to remember instructions and allows them to rely on intuitive understanding.
- Affordance: Refers to the possible actions that can be performed with an object or within an environment.
- The theory of affordances was adapted by Donald Norman to improve design by focusing on the user’s ability to intuitively interact with objects.
- Signifiers are cues or signals that indicate what actions are possible and how to perform them within an interface.
- Constraints are limits on interaction, guiding users to avoid mistakes. Types of constraints include:
- Physical constraints: Physical limitations in design (e.g., the size or shape of an object).
- Cultural constraints: Actions dictated by cultural norms and expectations.
- Semantic constraints: Meaning-based limits, where certain actions make sense only in a particular context.
- Logical constraints: Actions restricted by logical relationships, such as switches only toggling when in a certain state.
- These are widely accepted behaviors or practices within specific cultural groups, which can influence how users interact with interfaces.
- Mastery: Users should be able to master the interface over time.
- Ease of learning: Systems should be easy to learn and support the learning of advanced features.
- Confidence: Users should feel confident in their ability to use the system long-term.
- Enjoyment: The system should be enjoyable to use and demonstrate to others.
- Desire to explore: Users should feel encouraged to explore more powerful features.
- Continuous representation: Keep objects and actions visible and represented continuously.
- Meaningful metaphors: Use clear visual metaphors that correspond with real-world experiences.
- Physical actions over commands: Favor physical actions (like drag and drop) over complex command syntax.
- Rapid, incremental, and reversible actions: Allow users to see the effects of their actions immediately and be able to undo them if necessary.
- Quick learning curve: Direct manipulation interfaces are often easy to learn but may require initial demonstrations.
- Error-tolerant: Experts rarely encounter errors, and knowledgeable users can easily remember tasks.
- Immediate feedback: Users receive instant feedback on their actions.
- Flexibility: The interface allows easy changes in course or direction without creating confusion or anxiety.
- Sense of control: Users feel in control and can predict how the interface will respond to their actions.
- Spatial representation: Too much visual information can overwhelm users if poorly organized.
- Poor mapping: If signifiers (visual cues) and controls are not well aligned, users can become confused.
- Learning curve: Some users may struggle to learn an interface, especially if it lacks intuitive design elements.
- Slow for expert users: Direct manipulation may be slower than command-line interfaces for advanced users.
- Define goals: Conduct user and stakeholder interviews, create personas, and map workflows.
- Personas: Develop personas based on user input to better understand target audiences.
- Learn from mistakes: Pay attention to common user errors to guide design improvements.
- Competitor analysis: Evaluate UX design from competitors to gather insights.
- Prototype: Create rough designs, focusing more on functionality than aesthetics.
- User testing: Conduct early testing to understand user behavior.
- Interactive prototypes: Create interactive prototypes for testing before committing to final designs.
- Launch products quickly for real-world feedback and iterate based on that testing.
- Follow general design guidelines and frameworks, but adjust for the specific interface being designed.
- Ensure consistency in terms of headers, footers, and terminology across the interface.
- Visibility of system status: Ensure users are informed about the current state of the system.
- Match the system to the real world: Use familiar concepts and language that align with users’ expectations.
- Emergency exit: Provide users with clear ways to exit or cancel actions if necessary.
- Consistency and standards: Use consistent terminology and design patterns across the interface.
- Recognition over recall: Make sure the interface is intuitive and doesn’t rely on users’ memory.
- Aesthetic and minimalist design: Focus on simplicity, removing unnecessary elements.
- Error recovery: Help users easily diagnose and recover from errors.