Important Terms in User Experience. In defining the terms, we saw that they are very similar to what was mentioned in the hadith of the Prophet, may God bless him and grant him peace, "Whoever among you sees an evil, let him change it with his hand; if he is unable to do so, then with his tongue; if he is unable to do so, then with his heart, and that is the weakest of faith." We see clear guidance from our master the Prophet in dealing with problems.

How do we connect them together? Let's come to the definitions:

• 1. Pity
  Pity means noticing a problem or difficulty and feeling sorry for it but not taking action to solve it; it is just pity.
  This is similar to "in your heart," in which the hadith is described as the weakest level of response.
  In user experience, pity doesn't make a big difference.
  Example: If a designer notices that users are having difficulty using an application but doesn't do anything about it, that's just compassion.
• 2. Empathy
  Empathy is understanding the problem and feeling sad or concerned for the person suffering from it, and trying to talk about it or take small steps to address it.
  This is similar to "change by the tongue" as in hadith.
  In UX, this means that the designer listens to the user's feedback and makes some adjustments, but these adjustments may not solve the problem entirely.
  UX example: The designer listens to the user's complaints and makes small changes to the interface to make it easier, but these changes may be superficial or insufficient.
• 3. Sympathy
  Sympathy is the highest level of responsiveness.
  It means not only understanding the problem but also putting yourself in the user's shoes and feeling what they feel.
  This is similar to "change by the hand," the most powerful level of action mentioned in hadith.
  In UX, empathy is what drives the designer to completely redesign the experience to better meet the users' needs and solve their problems comprehensively.
  UX example: The designer conducts deep research, tests the product as users do, and completely redesigns the application to solve all the problems that users face.

Conclusion:

• Pity: Just noticing the problem and feeling bad without taking action. This is similar to "change by the heart."
• Empathy: Understanding the problem and trying to make small improvements. This is similar to "change by the tongue."
• Sympathy: Deeply engaging with the problem and solving it from the ground up. This is like "hand-shifting."

As the talk goes, "hand-shifting" is the most powerful form of work. In UX, empathy is what enables designers to deliver the best possible experience because it drives them to truly understand the user's needs and fix problems at their root.

Ultimately, to be successful UX designers, we must aim for work to deliver effective solutions rather than merely offering distant sympathy or pity.

As a UI/UX designer, I had an interesting discussion with our .NET and front-end developer about the best ways to use SVG in our web projects. After this, I decided to show them the differences between the three methods of using SVG.

• 1. SVG as Inline Code in HTML
  Positives:
  Direct Embedding: You can put SVG directly into your HTML using the <svg> tag. This is good for small icons or graphics.
  Easy Styling: You can change the look of SVGs with CSS and JavaScript.
  Faster Loading: It can reduce the number of files the browser needs to load.
  
  Defects:
  Bigger HTML File: Large SVGs can make your HTML file bigger.
  Complex HTML: Having many SVGs in HTML can make it hard to read and manage.
• 2. SVG as an Image
  Positives:
  Separate Files: Using the <img> tag with SVG keeps your HTML clean.
  Browser Caching: The browser can save SVG files, so it loads faster next time.
  Easy to Use: Simple to add to your web page.
  
  Defects:
  Extra Request: The browser needs to load the SVG file separately, which can take a bit more time.
  Less Flexible: You can't easily style or interact with the SVG like you can with inline SVG.
• 3. SVG as a Font (Icon Fonts)
  Positives:
  Scalable Icons: SVG fonts are great for icons that can change size without losing quality.
  CSS Styling: You can change the color and size of SVG fonts with CSS.
  Text-like Behavior: SVG fonts work like text, so they are easy to align and position.
  
  Defects:
  Single Color: SVG fonts usually only support one color.
  Accessibility Issues: SVG fonts are treated as text by screen readers, which can be tricky for accessibility.

Conclusion:

• Inline SVG: Best for small icons and when you need full CSS/JS control, but can make HTML larger.
• SVG as Image: Good for clean HTML and browser caching, but less flexible for styling.
• SVG Fonts: Great for scalable icons with CSS styling, but limited to single color and accessibility issues.

Each method has its own benefits and drawbacks. The choice depends on your specific project needs, performance requirements, and design goals. Understanding these differences helps make better decisions when implementing SVG in web projects.