DEV Community: Masroor Hosseini

Designing for the Mind, Not Just the Screen

Masroor Hosseini — Sun, 16 Feb 2025 16:35:30 +0000

How Psychology Shapes UX Design:

A Story of Two Apps: Frustration vs. Flow
Meet Alex.

Alex is looking for a budgeting app to track monthly expenses. After some searching, two options catch his eye: App A and App B.

App A: The Overwhelming Nightmare
The moment Alex opens App A, he's bombarded with too many options, unclear buttons, and a cluttered dashboard. He struggles to find where to start. The app asks him to input a long list of financial details before he even understands how it works.
Frustrated, Alex gives up. He abandons App A within two minutes.

App B: The Effortless Experience
App B welcomes Alex with a simple, friendly greeting: "Let’s set up your first budget! How much do you want to track?"

Instead of dumping everything at once, it guides him step by step—asking one question at a time. The key actions are easy to find, the buttons are large and clear, and there's even a little progress bar to keep him motivated.

Alex quickly sets up his budget and feels accomplished. He not only stays but also recommends the app to a friend.

What made the difference? Psychology-driven UX design.

The Science Behind Great UX Design
A well-designed product isn’t just visually appealing—it works with the way people think. Let’s break down the psychology behind these two experiences.

1. Cognitive Load: Why Too Much Information Kills Engagement

📌 Fact: The human brain can only hold about 4–7 pieces of information at once (Miller’s Law).

App A overwhelmed Alex by presenting everything at once, while App B used progressive disclosure, revealing information gradually.

How to fix it: ✅ Break complex tasks into small, digestible steps (e.g., step-by-step forms). ✅ Use visual hierarchy to prioritize key actions. ✅ Minimize distractions—less clutter means better focus.

🔹 Example: Airbnb’s booking process simplifies complex decisions by showing only the most relevant information at each step

2. Hick’s Law: How Too Many Choices Cause Decision Paralysis

📌 Stat: When faced with too many choices, users are 10x more likely to abandon a decision (Columbia University study).

App A had an overwhelming number of buttons, options, and menus, making it hard for Alex to decide what to do next.

How to fix it: ✅ Limit choices (e.g., offering 3 pricing tiers instead of 10). ✅ Use default options to help users make quick decisions. ✅ Group similar actions together to make navigation easier.

🔹 Example: Netflix’s recommendation engine limits choices to a curated selection instead of showing the entire catalog at once.

3. Status Quo Bias: Why People Resist Change

🔗 What is Status Quo Bias

🔗 Status Quo Bias takeaways

When users encounter something unfamiliar, their instinct is to stick with what they know.

How to fix it: ✅ Keep common UI elements consistent (e.g., a shopping cart always represents checkout). ✅ Provide gentle onboarding, like tooltips or guided tours. ✅ Allow users to revert changes if they feel uncomfortable with an update.

🔹 Example: Facebook’s gradual redesigns—instead of changing everything overnight, they introduce updates in phases.

4. Fitts’s Law: Why Button Size and Placement Matter

App A had tiny, hard-to-click buttons placed in inconvenient spots. App B made primary actions big, easy to tap, and within reach.

How to fix it: ✅ Make key buttons bigger and bolder (e.g., "Buy Now" or "Start Free Trial"). ✅ Keep frequently used actions near the user's natural interaction zone. ✅ Ensure touch targets are large enough for mobile users.

🔹 Example: Google’s search bar—large, centered, and easy to click.

The Peak-End Rule: How Users Remember Experiences 📌 Fact: People judge an experience based on its peak moments and how it ends (Kahneman’s Peak-End Rule).

Alex had a terrible peak (frustration in App A) and a great ending (success in App B).

How to fix it: ✅ Create small moments of delight—animations, micro-interactions, or positive feedback. ✅ Make sure error messages are friendly and offer solutions. ✅ End on a high note—a confirmation message, a thank-you note, or a small reward.

🔹 Example: Duolingo’s “Streak” feature keeps users engaged by celebrating progress.

Final Thoughts: Design for the Mind, Not Just the Screen

Alex's journey isn't unique. Every day, millions of users quit apps and websites due to poor UX. The best designs aren't just visually appealing - they're built around how people think, feel, and behave.

By applying psychology-driven principles like:
✅ Reducing cognitive load
✅ Minimizing decision paralysis
✅ Making transitions smooth
✅ Optimizing button placement
✅ Ending on a high note
…we can create experiences that users love and remember.

💡 Follow Arshida for more insights on creating user-friendly digital experiences that solve real challenges. 🚀

👥 Let's start a conversation!
Have you ever quit an app due to bad UX? Or did you find one that felt just right?
💬 Drop your thoughts in the comments!
🔄 Share this post with a fellow designer or developer.

Drop your thoughts in the comments below or share this post with someone who might find it useful! Let's work together to make change a smoother journey for everyone. 🚀

Change is Hard—Even When It’s for the Better

Masroor Hosseini — Wed, 18 Dec 2024 17:06:10 +0000

How to Help Users Adapt to New and Improved Solutions

Preface: Change is Hard—Even When It’s for the Better.

Imagine this: You walk into your favorite café one morning, and everything looks... different. The counter is in a new place, the menu has a new layout, and suddenly, you’re unsure where to start. You freeze for a moment, overwhelmed.

This feeling—confusion and hesitation in the face of change—happens not just in coffee shops but also in user experiences (UX). Whether it’s a redesigned app, a new feature, or an improved interface, users often resist changes even when they’re clearly for the better.

So, as designers and developers, how can we introduce innovation without alienating users? How do we make change feel familiar, comfortable, and—dare I say—exciting?

Let’s explore the psychology behind resisting change and discover actionable ways to help users smoothly adapt to new and improved solutions.

The Story of Change:

Why Do Users Resist?
Humans are creatures of habit. We love what’s familiar because it feels safe and predictable. Even if a new design or solution is objectively better—faster, cleaner, smarter—our instinct is to stick with what we know. Psychologists call this the Status Quo Bias.

Let’s take an example from real life:

The Tale of the Office Printer

A new high-tech printer with high-tech features is installed in a mid-sized office. It’s faster, uses less ink, and connects seamlessly to mobile devices. On paper (pun intended), it’s a huge upgrade!

But in the first few weeks, employees grumble. “The old printer was fine,” they say. “This one feels complicated.” Some employees avoid it altogether, sneaking over to the backup printer.

The real problem isn’t the new printer—it’s the change itself. People aren’t rejecting the upgrade; they’re rejecting the discomfort of learning something new.

This is exactly what happens when we introduce new solutions in digital products. If users feel uncertain, overwhelmed, or left behind, they’ll cling to the old ways—even if they’re less efficient.

Why Helping Users Adapt Matters

Resistance to change isn’t just an inconvenience; it can harm your product’s success. Here’s why:

Low Adoption Rates: If users feel frustrated, they’ll abandon new features or updates entirely.

Negative Perception: Poorly managed change can make users feel unheard or undervalued.

Wasted Effort: Months of design and development work might fail to deliver impact if users can’t adapt.
On the flip side, when users feel supported through change, they:

Embrace new features faster.
Experience improved satisfaction and productivity.
Build trust and loyalty toward your product or brand.
The key is not to force change but to guide users toward it.

How to Help Users Adapt to New Solutions

Here are proven strategies to design change that users will welcome rather than resist:

1. Make Change Gradual, Not Sudden

Imagine trying to learn an entirely new language overnight—it would feel impossible. The same applies to UX. Instead of introducing massive changes all at once, roll them out step by step.

How to do it:

Use progressive enhancement: Introduce small changes users can get used to over time.
Offer early access to a group of users, gather feedback, and refine the changes before a full launch.
Allow users to “opt-in” to new designs and gradually phase out the old version.

Real-World Example:
When LinkedIn redesigned its interface, it gave users the option to “Try the New Version” for a limited period. This reduced frustration and allowed users to explore the updates at their own pace.

2. Keep What Feels Familiar

Completely overhauling a design can alienate users. Instead, retain elements of the old interface to make the new design feel familiar.

How to do it:

Keep core workflows and navigation paths consistent.
Use familiar icons, terminology, and design patterns.
Gradually build on what users already know.

Story:

When Microsoft redesigned its Office Suite, it retained key menu elements while improving layout and usability. Users adapted more quickly because the changes felt like enhancements, not disruptions.

3. Explain the ‘Why’ and Highlight the Benefits

Users are more likely to embrace change if they understand why it’s happening and how it benefits them.

How to do it:

Communicate updates using tooltips, pop-ups, or welcome messages.
Focus on the value: faster performance, improved workflows, or better results.
Use positive, reassuring language to reduce fear and uncertainty.

Example Text:
“Welcome to the new dashboard! You’ll notice streamlined menus and faster load times—helping you get more done with fewer clicks.”

4. Guide Users Through Change with Onboarding

Think of onboarding as a tour guide for your new design. It shows users where everything is and helps them feel confident navigating the changes.

How to do it:

Use tooltips, walkthroughs, or short videos to explain new features.
Add in-app guidance to show users where to click and what to do.
Celebrate small milestones to encourage exploration.

Real-World Example:
Slack uses onboarding tooltips to highlight new features and workflows, making it easy for users to adapt without feeling overwhelmed.

5. Give Users Control

Choice creates comfort. Allow users to explore the new solution without feeling forced.

How to do it:

Offer a temporary option to switch back to the old version.
Provide settings that let users adjust features to their preferences.
Respect users’ pace—don’t bombard them with changes all at once.

6. Collect Feedback and Iterate

Change should be a two-way conversation. By listening to users and addressing their concerns, you show that their experience matters.

How to do it:

Gather feedback through surveys, usability tests, or in-app prompts.
Address common pain points and refine the design based on user input.
Share updates transparently: “Based on your feedback, we’ve improved X, Y, and Z!”

Conclusion: Change Doesn’t Have to Be Hard

Helping users adapt to new solutions isn’t just about good design—it’s about empathy. By understanding the psychology behind resistance to change and implementing thoughtful strategies, you can make transitions feel smooth, intuitive, and even enjoyable.

At Arshida, we specialize in crafting user experiences that balance innovation with familiarity, ensuring users feel confident and supported through every change. Whether it’s a major redesign or a new feature rollout, we help businesses introduce solutions that users love.
So, are you ready to guide your users through change? Let’s design experiences that inspire trust, excitement, and success!

Key Takeaways:

People resist change due to Status Quo Bias—a preference for what’s familiar.
Gradual rollouts, clear communication, and familiar design elements help users adapt.
Onboarding tools, user control, and feedback loops ensure smoother transitions.

💡 Follow Arshida for more insights on creating user-friendly digital experiences that solve real challenges. 🚀

How JavaScript Compilation Works

Masroor Hosseini — Sat, 14 Dec 2024 15:50:39 +0000

JavaScript is one of the most widely used programming languages, primarily because of its role in web development. It was initially an interpreted language, which means that the browser would read and execute JavaScript code line by line. However, with the evolution of modern JavaScript engines, the process has shifted toward compilation and optimization. In this article, we'll explore how JavaScript compilers work, focusing on the concepts behind the compilation process.

Interpreted vs. Compiled Languages
Before diving into the details of JavaScript compilation, it's important to understand the difference between interpreted and compiled languages:

Interpreted Languages: Code is executed line by line by an interpreter, without converting it into machine code ahead of time. This allows for dynamic behavior but often results in slower execution.
Compiled Languages: Code is translated into machine code before it is executed. This generally results in faster execution as the CPU can directly understand the machine code.

JavaScript sits in the middle ground. Historically, it was interpreted by browsers, but modern engines, like Google's V8 (used in Chrome and Node.js), have introduced Just-In-Time (JIT) compilation to improve performance.

JavaScript Engine: The Core of Compilation
JavaScript compilers are part of what is called a JavaScript engine. Each browser has its own JavaScript engine:

V8: Google Chrome and Node.js
SpiderMonkey: Mozilla Firefox
Chakra: Microsoft Edge (before moving to Chromium)
JavaScriptCore: Safari

All these engines implement the ECMAScript standard, which defines how JavaScript should behave. Let's look at the steps a typical JavaScript engine takes to execute code.

How JavaScript Compilation Works
Parsing the Source Code The first step in the compilation process is parsing. The engine breaks down the JavaScript code into an Abstract Syntax Tree (AST) through two phases

Lexical Analysis (Tokenization): The JavaScript code is split into small chunks called tokens. Each token represents basic elements like keywords, variable names, operators, etc.
Syntax Analysis: The tokens are then organized into a tree-like structure called the Abstract Syntax Tree (AST). This tree represents the hierarchical structure of the program.

let x = 10;

The above code would be broken down into tokens like let, x, =, and 10, and then arranged in the AST to understand how the variable x is assigned the value 10.

Intermediate Representation (IR) After building the AST, the engine converts it into an Intermediate Representation(IR). This is an abstract machine-level code that is easier for the engine to optimize. The IR serves as a bridge between the source code and machine code, helping to apply various optimizations before final execution.

3.Just-In-Time (JIT) Compilation Modern JavaScript engines use a technique called Just-In-Time (JIT) compilation to optimize performance. JIT compilers take parts of the code and compile them into machine code right before they are needed. This provides the benefits of both interpreted and compiled languages.

Baseline Compiler: A baseline JIT compiler initially compiles the JavaScript code to machine code quickly, without heavy optimization. This allows for fast execution but may not be the most efficient.
Optimization and Deoptimization: The engine then monitors the performance of the code during runtime. If it notices frequently executed code (also called "hot" code), it further optimizes that portion by applying advanced techniques like inlining functions or reducing redundant operations.
Deoptimization: If the assumptions made during optimization turn out to be wrong (for example, a variable was assumed to always be a number, but later becomes a string), the engine can deoptimize the code and revert it to a less optimized version.

Garbage Collection JavaScript engines manage memory automatically through a process known as garbage collection. This process identifies objects that are no longer in use and frees up memory. Modern engines use strategies like Mark-and-Sweep and Generational Garbage Collection to efficiently manage memory, making sure the application runs smoothly without memory leaks.

Example: V8 Engine
Let's take a look at how Google’s V8 engine implements this process.

Ignition: V8 uses a component called Ignition to generate bytecode from JavaScript. Bytecode is a lower-level representation of the source code, which is still abstract but easier to execute than raw JavaScript.
Turbofan: If some part of the bytecode is executed frequently, the V8 engine uses its optimizing compiler, Turbofan, to further compile this bytecode into highly optimized machine code.
Inline Caching: Another technique V8 uses is inline caching, which remembers the types of objects and operations in frequently executed functions. This helps in optimizing the code by making fewer assumptions about the code's behavior, leading to faster execution.

Key Optimizations in JavaScript Compilation

Inlining: Replacing function calls with the function's body to reduce overhead.
Type Specialization: Making assumptions about variable types to generate more efficient code.
Dead Code Elimination: Removing code that is never executed.
Lazy Compilation: Compiling only the parts of the code that are actually used.

Conclusion
JavaScript’s shift from a purely interpreted language to one that relies heavily on JIT compilation has significantly improved its performance. Modern JavaScript engines like V8 combine multiple techniques to parse, optimize, and execute code efficiently, making it possible for JavaScript to run complex applications in browsers and server environments. Understanding how these engines work gives developers insight into writing more efficient, optimized code that makes the most of the engine's capabilities.