diff --git a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/100-custom-experience-map.md b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/100-custom-experience-map.md index 0c2b16456..3e475d553 100644 --- a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/100-custom-experience-map.md +++ b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/100-custom-experience-map.md @@ -1,7 +1,5 @@ # Customer Experience Map by Mel Edwards -## Custom Experience Map - A **Custom Experience Map** is a powerful visual representation that helps designers and stakeholders understand the entire user journey. It captures the various touchpoints, interactions, and experiences a user goes through while using a product or service. This map can be created to suit the specific needs of your project or organization, giving you a comprehensive view of the user experience. ## Key Components of a Custom Experience Map diff --git a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/101-simple-flowchart.md b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/101-simple-flowchart.md index 672dd8177..b9f96f267 100644 --- a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/101-simple-flowchart.md +++ b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/101-simple-flowchart.md @@ -1,7 +1,5 @@ # Simple Flowchart -## Simple Flowchart - A simple flowchart is a useful deliverable in the UX design process that helps visually represent the flow of a user's journey through a website or an app. It's a diagrammatic representation of the user interactions and decision points, showcasing the steps they will take to achieve a specific goal. This straightforward visual aid can assist the entire project team, including designers, developers, and stakeholders, to understand the overall structure and organization of the proposed design solution. diff --git a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/102-event-driven-process-chain-model.md b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/102-event-driven-process-chain-model.md index 9042124c5..3d2e5a22a 100644 --- a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/102-event-driven-process-chain-model.md +++ b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/102-event-driven-process-chain-model.md @@ -1,7 +1,5 @@ # Event-Driven Process Chain Model (EPC) -## Event Driven Process Chain Model - The Event Driven Process Chain (EPC) model is a flowchart-based diagramming method that supports the documentation and analysis of business processes. EPCs are frequently used in the field of UX design to aid in identifying areas for optimization and improvement. In an EPC model, events, functions, and control flow are the primary components. diff --git a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/103-business-process-model-and-notation.md b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/103-business-process-model-and-notation.md index cb8275b39..a0fa5358b 100644 --- a/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/103-business-process-model-and-notation.md +++ b/src/data/roadmaps/ux-design/content/103-conceptual-design/deliverables/103-business-process-model-and-notation.md @@ -1,7 +1,5 @@ # Business Process Model and Notation (BPMN) -## Business Process Model and Notation (BPMN) - Business Process Model and Notation (BPMN) is a graphical representation of business processes, providing a standardized and easy-to-understand method for visualizing different aspects of a business. By using BPMN, UX designers can analyze and optimize business processes and workflows, which ultimately improves the overall user experience. ### Key Components of BPMN diff --git a/src/data/roadmaps/ux-design/content/103-conceptual-design/things-to-lookout-for/104-make-successful-completion-clearly-visible.md b/src/data/roadmaps/ux-design/content/103-conceptual-design/things-to-lookout-for/104-make-successful-completion-clearly-visible.md index ee904292a..84c31520b 100644 --- a/src/data/roadmaps/ux-design/content/103-conceptual-design/things-to-lookout-for/104-make-successful-completion-clearly-visible.md +++ b/src/data/roadmaps/ux-design/content/103-conceptual-design/things-to-lookout-for/104-make-successful-completion-clearly-visible.md @@ -1,7 +1,5 @@ # Make Successful Completion Clearly Visible -## Make Successful Completion Clearly Visible - When designing user experiences, it's essential to ensure that users can easily recognize when they've completed a task or achieved their goal. This is important because it provides users with a sense of accomplishment and satisfaction; it also helps build trust in the digital product. Here are some tips to make successful completion clearly visible: 1. **Visual feedback:** Provide clear visual cues (e.g., color changes, checkmarks, or other symbols) to indicate when a user has successfully completed a task. This reinforces the user's understanding that their actions have had the desired outcome. diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/100-good-layout-rules.md b/src/data/roadmaps/ux-design/content/104-prototyping/100-good-layout-rules.md index e0741c951..eaa3c73a7 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/100-good-layout-rules.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/100-good-layout-rules.md @@ -1,7 +1,5 @@ # Good Layout Rules -## Good Layout Rules - In the world of UX design, a good layout is crucial to ensure your prototype is intuitive and user-friendly. By following these good layout rules, you can ensure your designs are efficient, attractive, and easy to navigate for users. ## 1. Consistency diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/100-call-to-action.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/100-call-to-action.md index f9750ac73..3d34a5ce6 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/100-call-to-action.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/100-call-to-action.md @@ -1,7 +1,5 @@ # Call to Action -## Call to Action - A **Call to Action (CTA)** is a UX pattern that encourages users to take a specific action on a website, app, or other digital product. It is an essential component of effective UX design, as it helps guide users through the experience and accomplish their goals. CTAs can come in various forms, including buttons, links, images, or text. ### Importance of Call to Action diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/101-status-reports.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/101-status-reports.md index 3b5dfbf1e..492d946e3 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/101-status-reports.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/101-status-reports.md @@ -1,7 +1,5 @@ # Status Reports -## Status Reports - Status reports are an essential component of UX patterns that aid in keeping users informed about the current state of the system, task progress, and any relevant updates. By providing real-time feedback, users can understand the outcome of their actions which ultimately helps in building trust, reducing confusion, and enhancing overall user satisfaction. Here are some key aspects to consider when designing status reports for your application: diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/103-reminders-planning-prompts.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/103-reminders-planning-prompts.md index f7663405c..4f310d535 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/103-reminders-planning-prompts.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/103-reminders-planning-prompts.md @@ -1,6 +1,4 @@ # Simple Reminders and Planning Prompts - -## Reminders & Planning Prompts In the realm of UX design, **reminders and planning prompts** are essential components that ensure users remember to complete specific actions or tasks at the right time. By including these prompts within the user flow, you can aid users in staying on track and reduce the likelihood of missed deadlines or incomplete tasks. ### Why Use Reminders and Planning Prompts? diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/104-decision-making-support.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/104-decision-making-support.md index 8286e64ca..a5a4fa034 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/104-decision-making-support.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/104-decision-making-support.md @@ -1,7 +1,5 @@ # Decision-Making Support -## Decision Making Support - Decision making support plays a crucial role in UX design by providing users with the necessary information, options, and feedback to make informed choices when interacting with a product or interface. This UX pattern focuses on helping users make decisions through clear presentation of information, minimizing cognitive load, and offering guidance throughout the various interactions. ## Key Elements of Decision Making Support diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/105-behavior-change-games.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/105-behavior-change-games.md index 451d9557a..0bcd190d9 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/105-behavior-change-games.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/105-behavior-change-games.md @@ -1,7 +1,5 @@ # Behavior Change Games -## Behavior Change Games in UX Design - Behavior change games are a powerful UX design pattern that help users adopt new habits or make positive lifestyle changes. These games are typically designed to be engaging, enjoyable, and motivating, utilizing various game elements and mechanics to encourage users to take desired actions. ## Key elements of behavior change games diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/106-gamification.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/106-gamification.md index e78bbe80b..b5bb79fec 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/106-gamification.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/106-gamification.md @@ -1,7 +1,5 @@ # Gamification -## Gamification - Gamification is a UX design pattern that involves incorporating elements of game design into non-game applications or websites to enhance user engagement and create enjoyable experiences. By using game mechanics like points, achievements, competition, and progress-tracking, designers can make mundane tasks more appealing and motivate users to interact with the content or perform certain actions. ### Benefits of Gamification diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/107-planners.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/107-planners.md index 75530fd94..13ccf140e 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/107-planners.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/107-planners.md @@ -1,7 +1,5 @@ # Planners -## Planners - Planners are an essential aspect of UX design, helping users accomplish complex tasks by breaking them down into manageable steps. Planners are particularly useful in situations where users are expected to make decisions or deal with a range of options. They help to create an engaging and interactive experience, guiding users to achieve their goals efficiently. ### Characteristics of Planners diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/108-reminders.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/108-reminders.md index b19dc2324..ff45080c8 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/108-reminders.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/108-reminders.md @@ -1,2 +1,29 @@ # Reminders +**_Reminders_** play an essential role in the user's experience, especially when it comes to retaining user attention and engagement. They can be helpful in making sure that the user stays focused on their tasks, remembers essential information or deadlines, and continually interacts with your product or design. + +### Importance of Reminders + +1. **User Engagement**: Reminders can act as an opportunity to drive users back to your app or website, ensuring they don't forget to use your product or service. +2. **Timely Notifications**: When a reminder is well-timed and relevant, it can be a useful tool to prevent users from missing out on crucial information or essential tasks. +3. **Positive User Experience**: Effective use of reminders can create a positive experience for users, making them feel supported and confident in using your product or service. + +### Types of Reminders + +There are several types of reminders that can be used in UX design. Here are some common ones: + +1. **Time-based Reminders**: Set at specific intervals or times, these reminders are designed to ensure users don't forget important tasks or events related to your product or service. +2. **Location-based Reminders**: Triggered by entering or leaving certain locations, these reminders can be useful for tasks related to a specific place or area. +3. **Action-based Reminders**: Initiated by user actions, these reminders can provide useful prompts or follow-up actions based on user behaviors within your app or website. + +### Best Practices + +Here are a few best practices to consider when incorporating reminders into your UX design: + +1. **Be Timely and Relevant**: Ensure that reminders are helpful to the user by making them timely and relevant to the user's needs. +2. **Keep it Simple**: Use clear, concise language that is easy for users to understand and act upon. +3. **Avoid Overloading Users**: Too many reminders can become overwhelming and irritating, negatively impacting the user experience. Strike a balance between providing important reminders and respecting the user's time and attention. +4. **Allow Personalization**: Where possible, provide the user with options to customize the timing and frequency of reminders, enabling them to personalize their experience to suit their preferences. +5. **Consider Design Elements**: Reminders can be delivered through several methods, including in-app notifications, push notifications, and emails. Consider the most appropriate method for your user base and ensure the design of the reminder is visually appealing and easy to engage with. + +In conclusion, thoughtfully implemented reminders can significantly enhance the user experience and improve user engagement, retention, and satisfaction. By following best practices and considering the user's needs, you can create effective reminders that users appreciate and value. \ No newline at end of file diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/109-social-sharing.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/109-social-sharing.md index fe4ef54db..cd2069471 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/109-social-sharing.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/109-social-sharing.md @@ -1,2 +1,22 @@ # Social Sharing +## Social Sharing + +In the realm of UX design, **Social Sharing** is a crucial pattern that allows users to share content from a website or app to various social media platforms. It helps in creating interaction between users and the content, engaging the audience and generating more traffic to the source. + +### Benefits of Social Sharing +- Increase in brand visibility and awareness +- Drive more traffic to the website or app +- Higher chances of content going viral +- Encourages engagement and conversation around your content +- Improves organic search rankings + +### Designing Effective Social Sharing Buttons +1. **Positioning**: Place the social sharing buttons at an easily accessible location on the page, e.g., top, bottom, or alongside the content. +2. **Size and Style**: Opt for clear and recognizable social icons that are easy to tap or click. Ensure their size is adequate to avoid any UX issues. +3. **Customization**: Tailor the design of social sharing buttons to complement your website or app's visual appeal. +4. **Selective platforms**: Focus on the most popular or relevant social media platforms for your target audience; not every platform may be necessary. +5. **Share counts**: Show the number of shares for individual content pieces when appropriate, as it adds social proof and encourages more shares. +6. **Mobile optimization**: Ensure your social sharing buttons are functional and visually appealing on mobile devices, as a significant portion of sharing occurs via mobile. + +Incorporating social sharing into your UX design not only provides opportunities for increased engagement but also serves as an effective marketing tool. Remember, a well-designed and strategically placed social sharing component can lead to a higher reach and greater success for your brand. \ No newline at end of file diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/110-goal-trackers.md b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/110-goal-trackers.md index 3322cf7f8..2f95db3db 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/110-goal-trackers.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/ux-patterns/110-goal-trackers.md @@ -1,2 +1,32 @@ # Goal Trackers +## Goal Trackers + +Goal trackers are essential UX patterns that enable users to monitor their progress towards accomplishing a specific task or objective. Essentially, they help users stay motivated, organized and informed about their journey within an app, website, or system. In this guide, we'll explore the significance of goal trackers, and how to effectively design and incorporate them in your projects. + +### Why use goal trackers? + +1. **Motivation**: By visibly displaying the progress made, goal trackers constantly motivate users to actively participate in the experience and work towards completing their goals. +2. **Expectation Management**: They provide clear guidance on the steps required, inform users about the remaining tasks or subgoals, and aid users in estimating the time and effort needed. +3. **Sense of Achievement**: Goal trackers can enhance user satisfaction by celebrating milestones and achieved objectives, reaffirming that the effort invested has produced tangible results. +4. **Personalization**: Users can customize their experience by setting up personalized goals and tracking their progress, fostering a greater sense of ownership and connection. + +### Essential components of goal trackers + +A well-designed goal tracker will typically include the following elements: + +- **Visual Progress Bar**: This represents the user's progress towards completing the overall goal. It is usually color-coded, with a percentage or numerical value indicating the extent of the progress made. +- **Step Indicators**: These are specific milestones or subgoals that users need to complete in order to achieve the main goal. They help break down the overall process into manageable, smaller tasks. +- **Animations & Feedback**: Using animations, notifications, and other visual cues can make users feel rewarded for their progress, reinforcing positive behavior. +- **Summaries & Overviews**: A concise summary or overview of the user's progress and remaining tasks/subgoals allows users to quickly ascertain their position within the overall structure. + +### Designing effective goal trackers + +When designing a goal tracker, consider these best practices for optimal UX: + +1. **Simplicity**: Keep the design and presentation of the goal tracker simple and clear, avoiding unnecessary complexity or clutter. +2. **Relevance**: Ensure that the tracked goals are closely aligned with the user's objectives, and make the process of updating or setting these goals as seamless as possible. +3. **Adaptable**: Make the goal tracker adaptable and flexible, allowing users to change or modify their goals as needed. +4. **Accessibility**: Design the goal tracker to be easily accessible, allowing users to monitor their progress without disrupting their workflow or navigation. + +In conclusion, goal trackers play an important role in UX design to drive user engagement, satisfaction, and overall success. By understanding their purpose and components, and incorporating thoughtful design principles, you can create goal trackers that enhance your users' experience and promote the accomplishment of their desired objectives. \ No newline at end of file diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md index e74ae10f8..45998f293 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/100-figma.md @@ -1,7 +1,5 @@ # Figma -## Figma - [Figma](https://www.figma.com/) is a powerful and versatile web-based design tool that allows designers, developers, and stakeholders to collaborate on UI and UX projects in real-time. It's an excellent choice for creating wireframes and high-fidelity prototypes and supports vector editing, responsive design, and team collaboration. ### Key Features diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/101-adobe-xd.md b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/101-adobe-xd.md index 6f45098a7..e88f0e1dc 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/101-adobe-xd.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/101-adobe-xd.md @@ -1,7 +1,5 @@ # Adobe XD -## Adobe XD - Adobe XD (Experience Design) is a powerful design and prototyping tool that allows UX designers to create wireframes, mockups, and interactive prototypes for various digital projects. It is available for both Mac and Windows, and it focuses on providing an easy-to-use, intuitive interface for designing responsive websites, mobile apps, and more. ## Key Features of Adobe XD diff --git a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md index 6a888ca4b..2f1f289c4 100644 --- a/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md +++ b/src/data/roadmaps/ux-design/content/104-prototyping/wireframing/102-sketch.md @@ -1,7 +1,5 @@ # Sketch -## Sketch - Sketch is a powerful digital design tool specifically tailored for user interface (UI) and user experience (UX) design. As part of the creative process, designers use Sketch to create wireframes, visual mockups, and interactive prototypes that help plan and iterate their ideas. ## Key Features