Setting the Foundation: Key Takeaways from the First Master-Thesis Meeting

Before diving deeper into any research this semester, it was important for me to reflect on last semester, as well as also finally setting up the groundwork for the thesis itself. It was therefore essential to find the right supervisor and contact from a different interdisciplinary field, that could guide me through this ongoing research and testing process. It was particularly important for me to learn and gain knowledge from user testings as well as web-specific content. It was important to find out in advance whether the desired topic was suitable for a Master’s thesis. During a two-hour discussion round with Professor Baumann we were abled to set appropriate milestones for further research. The focus of the first phase of research in this semester will be on a wide range of neurodesign principles that I have already researched in my bachelor thesis. In the further process, five of these categories are to be determined and researched within wireframes in user testing. For this purpose, two different versions of wireframes will be created in the next step. Another big topic we had during our discussion was the title and establishment of the topic:

Moi: Neurodesign combines principles from neuroscience and psychology with design thinking. The idea is to create user interfaces and web experiences that align with how the brain processes information and emotions.

Professor Baumann: Okay, I see. But isn’t design already focused on user experience and interaction? What’s different here?

Moi: That’s exactly where Neurodesign is different. Traditional UX design focuses on usability, accessibility, and aesthetics, but it often relies on intuition, trends, or best practices. Neurodesign, on the other hand, uses data-driven insights from brain science to predict how users will react cognitively and emotionally to design elements.

Professor Baumann: Interesting. But how do you actually apply neuroscience to web design?

Moi: It’s about understanding how users’ brains respond to stimuli like colors, shapes, layouts, and even motion on a website. For example, certain colors may trigger emotional responses, while specific layouts could reduce cognitive load. Neurodesign aims to optimize these responses by using neuroscientific data, like eye-tracking or EEG studies, to inform the design decisions.

Professor Baumann: But how practical is this? How can designers realistically incorporate neuroscience into their workflow?

Moi: That’s where I see a gap in the design community. Right now, most designers don’t use these insights because they seem complex or inaccessible. My thesis aims to change that by advocating for tools and methods that can bridge neuroscience and design. For example, integrating neurodesign principles into widely-used design software or developing educational resources so designers can learn to think more scientifically about user responses.

Professor Baumann: I get your point. But isn’t this too theoretical? How would a web designer practically apply this without extensive knowledge in neuroscience?

Moi: Great question. The goal isn’t to turn designers into neuroscientists but to give them simplified, actionable principles that come from neuroscience. Think of it as adding another layer to their current toolkit. Just like how color theory or usability heuristics are standard knowledge, neurodesign principles could be distilled into easy-to-follow guidelines.

Professor Baumann: So, you’re talking about evolving the design practice by making scientific data more accessible to designers.

Moi: Exactly! It’s about evolving the design community to adopt more research-based, futuristic approaches. Neurodesign could lead to more personalized and engaging web experiences, where sites are not only visually pleasing but also scientifically optimized to fit the user’s mental processing and emotional engagement.

Professor Baumann: Now that makes sense. You’re essentially trying to reform the design community with these forward-thinking approaches. It sounds like you’re paving a path toward more scientifically-backed design methods.

Moi: Yes, and I think it’s a much-needed shift. Right now, design often feels like it’s based on trends or gut feelings as well as very outdated principles that are not questioned enough in my opinion. Who says that in a world that constantly changing, our behaviour isn’t? Another very big factor in pursuing this is simply the want to grow. How can we as a community or artists grow if we don’t leave our comfort zone? Change can only happen when we try something new, not if we keep designing after the same old rules. With neurodesign, we could bring objectivity into the creative process and push the community towards creating truly user-centered experiences, where every design decision is backed by how the brain actually works.

Professor Baumann: Alright, I think I’m getting the bigger picture now. This is definitely an exciting direction. Let’s refine your proposal further and see how you can build a strong case for this shift in your thesis.

Moi: Thank you, Professor. I’m really excited about it too!

The next step in my research will be the A/B Testing with the established Wireframes that have yet to be finished.

Enhancing User Experience: My Plan to A/B Test Color Schemes, CTAs, and Mobile Responsiveness for Optimal Cognitive Ease

In my testing I want to focus on color schemes, refining call-to-action buttons (CTA) as well as enhancing mobile responsiveness, in order to use the outcome of the testing to make sure what to focus on when it comes to my neurodesign approach. When choosing a color scheme for example, it is important to think about how all design elements interact. Are they making users squint or, worse, leave? In an A/B test, I want to test different color combinations that still align with the individual branding but are easier on the eyes. The dream result? A color palette that promotes clarity and comfort as well as making the user stay on the website longer.

CTAs are like road signs for your users. If your buttons are too small, poorly worded, or blend into the background, users may never “see” them. When it comes to testing I want to experiment with button color, size, and the text itself. Maybe wording like “Get Started” works better than “Submit,” or a bright, standout color for your button makes it easier to spot. A well-designed CTA can act like a neon arrow pointing the way to conversion. For me it is important to integrate the psychological aspect we explored in the previous semester, to enhance the design to a next level. Improving design not only through aesthetic, composition but also through a more humane approach.

One of the last parts of my testing would be the enhancing mobile responsiveness. With everyone glued to their phones, a website that doesn’t work well on mobile is practically a crime. Maybe you’ve seen those sites where you have to pinch and zoom to read anything. An A/B test where one version of your site is optimized for mobile (with bigger buttons, shorter text, and a cleaner layout) could show that mobile-first design improves engagement, session times, and overall satisfaction.

A/B testing is an ongoing journey of refinement and improvement. It’s not a one-time magic bullet. Once you’ve conducted a test and seen which version performs better, it’s crucial to act on that data. Iterating based on feedback is the next logical step for me. For example, if users showed a preference for a simplified navigation menu, it would be beneficial making that the default across the entire website.

Another thing to keep in mind is staying updated with trends. The digital world evolves quickly, and so do user preferences. Even if I’ve nailed cognitive ease for the current audience, the way people interact with websites may change. Testing new design elements regularly should help staying ahead of the curve.

Let’s break this down into actionable steps:

  1. Defining my hypothesis: Identifying a pain point in a website design. I will do the testing in combination with our Branding Exercise in this course as well, to use my testing in a more useful way. Here the focus on the hypothesis would be the rebranding of the webpage for “Oma’s Teekanne”.
  2. Creating my A/B versions: Designing two versions of the page. Version A is the control—the existing “bad” design, and Version B is my experiment with changes to navigation or layout, based on my hypothesis. In this case, Version B might feature a cleaner, simplified navigation bar.
  3. Splitting the audience: Using tools like Google Optimize to divide your audience. Half of the users will see Version A, and the other half will see Version B. These tools can automatically randomize the audience, ensuring that the test results are statistically sound.
  4. Track key metrics: Metrics are the bread and butter of A/B testing. For cognitive ease, I want to measure things like:
    • Bounce rate: Do fewer people leave immediately?
    • Session duration: Are users staying longer?
    • Click-through rate: Are people interacting with calls to action more?
    • Conversions: Are users completing desired actions like signing up or making a purchase?
  5. Analyze the results: After gathering enough data, it’s time to look at which version performed better. If Version B (the simplified design) results in users staying on the page longer, clicking more, and converting better, I’ve successfully enhanced the cognitive ease.
  6. Iterate and improve: A/B testing doesn’t end with one successful experiment. The goal would be using the results to inform future tests and continue optimizing for cognitive ease. Remembering, the goal is to reduce cognitive load for users, so looking for areas of friction and testing new ways to make the user experience as smooth as possible.
  7. Communicate findings: Once you have results, it’s important to share them with the costumer or stakeholders in a clear and actionable way. Visual aids like graphs or charts help convey how Version B improved metrics compared to Version A.

Status Quo – Unlocking the Secrets of Cognitive Ease: A/B Testing

When information flows so smoothly that your brain barely breaks a sweat, that’s the magic of cognitive ease. You can think of cognitive ease as your brain’s comfort zone. When information is easy to process, you’re more likely to engage with it, trust it, and stick around. On the other hand, when things are complicated or confusing, your brain throws up a big red flag and says, “Nope, not today, I’m out.”

So, how do we keep our users lounging in the comfort of cognitive ease? Here comes A/B testing into play, a very helpful tool of user experience design, I would like to further explore in the next few months. A/B testing is like a popularity contest for website elements. You create two versions (A and B) of a webpage or feature, show them to different user groups, and see which one performs better. My goal with this is pretty simple, first I want to test the previous established commandments and their actual functionality. Do they work on target groups? Is there an actual significant difference between the “conservative” (A) way of designing a website or does the “neuro” (B) way actually work better when it comes to our cognitive comprehension. By comparing variations of various design elements, I want to identify which versions make information processing a breeze. After researching a little further I came up with the following schedule of testing:

Hypothesis Formation: Guess which design tweaks might enhance cognitive ease. Maybe simplifying navigation or tweaking color schemes could do the trick.

Version Creation: Develop two versions of the webpage—Version A (the conservative design) and Version B (the new design with said proposed changes).

User Exposure: Randomly present these versions to users, ensuring each group experiences only one version. Also switching between several target groups.

Data Collection: Gather data on user interactions—click-through rates, time spent on the page, conversion rates, eye-tracking, you name it.

Analysis: Crunching the numbers to see which version led to smoother user experiences and better engagement.

A common issue many users face is getting lost or overwhelmed by a website’s menu. Imagine your website is a maze with too many twists and turns, and users are just looking for the exit. Simplifying the navigation bar is one way to prevent users from hitting that “Back” button out of frustration. In an A/B test, you could create a streamlined version of the navigation with fewer categories and clearer labels, and compare it with your existing complex menu. If users find what they’re looking for faster in the new version, congratulations—you’ve just made their experience more cognitively pleasing.

Let’s talk about optimizing content layout. No one likes staring at a wall of text—it’s a one-way ticket to mental exhaustion. A solution? Breaking up the content with bullet points, subheadings, and images, making sure to introduce any sort of hierarchy for the brain and eyes. To put this to the test, creating a version that’s broken up with more digestible chunks of information and visuals, and compare it to the original text-heavy layout. If the users engage more with your new format, you’ve made their cognitive load lighter. This ties into Information Processing Theory, developed by George A. Miller, which explains how our brains process and store information. The theory suggests that our minds work similarly to computers, where information is received, processed, and stored in stages. A key concept is “chunking,” where we group information into manageable units, allowing short-term memory to handle more. Additionally, the TOTE model—Test, Operate, Test, Exit—shows that behavior involves ongoing processes of testing and revising until a goal is reached. In the context of content layout, applying these principles means organizing information in a way that reduces cognitive load, making it easier for users to process and retain the material, ultimately increasing engagement.

Sources:

Hotjar. (n.d.). Heatmaps. Retrieved from https://www.hotjar.com/heatmaps/

Optimizely. (n.d.). A/B Testing. Retrieved from https://www.optimizely.com/

A/B Testing Tools. Retrieved from https://optimize.google.com/

Reggelin, Jonas. (2023). Neurowebdesign: Shaping the Future of Web Experiences with Neuroscience.

Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. https://doi.org/10.1037/h0043158

Neurodesign 2.0: Creating Digital Experiences That Think for You

Hey, look at us – who would’ve thought – approaching the final blog post on this site! In the previous articles I briefly gave you a glance at the basic principles of neurodesign, some practical examples as well as several principles that could be expanded in the future.

Speaking of future – when it comes to the implementation of neurodesign we are still in the beginning stages hence why most examples and studies have been created in a controlled environment. But what happens if we go the other way? While diving into this topic again I gained another perspective to it, that I didn’t have before when I wrote my thesis. In my thesis the focus was mainly the analog approach to neurodesign and how we could use it to give books a new form of excitement. This time around I would like to go the digital route. How could the presented principles be creatively implemented into the digital world? Could they be responsive? Not in the typical way, but more responsive to the users behavior while scrolling through a website for example? How can we be innovative with the knowledge we have?

As we approach this conclusion, let our imagination run wild, because here’s the thing: Neurodesign is just getting started. The future? Well, that’s where things get really exciting.

Imagine a future where websites aren’t just static pages filled with well-placed elements, but living, breathing organisms that respond to your every move, your every thought. What if your browser knew how you were feeling while scrolling through a webpage and adjusted the color scheme accordingly? Picture this: you’re feeling anxious (it’s Monday morning after all), and as you scroll, the hues gently shift from sharp, high-contrast reds to calming blues. Your eyes feel less strained, your mood lightens, and suddenly, that “buy now” button doesn’t seem quite as intimidating. Neurodesign, with its deep understanding of how color, shape, and movement influence our emotions, could give birth to experiences so tailored, so nuanced, that they almost feel… alive.

Picture this: You’re on a website, navigating through a blog post (maybe even this one, who knows?) when the text, unbeknownst to you, subtly changes its font size depending on how fast you’re scrolling. You’re engaged, taking your time? The letters get bigger, more elegant, pulling you in deeper. In a hurry? The font shrinks just enough to make you feel like you’re breezing through content. It’s responsive design, but not to the device – it’s responsive to you, the human interacting with the content. How? Neurodesign principles, informed by brainwave research and eye-tracking studies, allow the website to adjust to your brain’s optimal processing speed, creating a harmonious experience where your cognitive load is minimized. You don’t even realize it, but you’re effortlessly hooked, feeling just the right amount of connection.

And it doesn’t stop there. Let’s venture into the territory of motion. Imagine scrolling through a portfolio of creative work and instead of a simple parallax effect, the images play a more complex game. Each image is alive, subtly moving in response to the speed at which you scroll or even how your eyes track it. It’s as if the design is reading your thoughts, offering up just the right visual cue that matches your emotional pulse at that moment. Want to see something that speaks to you? The visuals are responsive to your cognitive state. Feeling curious? The images dynamically zoom in. Feeling skeptical? The visuals take a step back. This could all be done by measuring micro-expressions or even skin conductance – data points that neurodesign could harness to bring a level of intimacy to web design that we never thought possible.

A future where neurodesign doesn’t just cater to the individual but anticipates the needs of entire communities. Imagine a website that changes depending on the collective mood of its visitors. Based on aggregated emotional signals (perhaps through eye-tracking or even ambient light levels), the site shifts between various aesthetic themes, creating an environment that feels right for the collective energy of the group. The design becomes an empathy engine – a visual language that’s constantly adjusting to the collective pulse of the users, fostering a deeper sense of connection and understanding, without a single word spoken.

I know, this all sounds like something straight out of a sci-fi novel. But here’s the thing: It’s not. We already have the research. We have the neurodesign principles, the brain-scan data, the eye-tracking technologies. What we’re lacking is the courage to throw out those safe, predictable design rules and step into the unknown. What would it be like to create without the constant fear of evaluation? Imagine a world where designers are less concerned about fitting in and more concerned with evoking real emotional responses from their audience. What if the goal wasn’t a picture-perfect website, but a individualistic-perfect one?

We’ve been taught to play it safe – keep the grid, align the fonts, don’t stray too far from the usability research. But what if, just for a moment, we threw all that out the window? What if we embraced the chaos, the unpredictability of the human brain, and designed in ways that don’t just fit expectations but push them?

Neurodesign is a call to think beyond our conventional understanding, to ask not just “how do I make this look good?” but “how do I make this feel good?” And the future, is one where we start to see the digital world not as a tool we use, but as a partner in our journey toward a deeper, more connected experience.

So let’s stop being so cautious.

The Ten Commandments for Neurodesign: A Guide for Graphic Designers

Who would’ve thought, but this is almost the last entry in this blogging journey! Drawing from months of exploring research and literature, this post offers the Ten Commandments for Neurodesign—guidelines based on cognitive science, visual perception, and usability research. These “commandments” provide actionable insights for designers seeking to create engaging, high-performing online content. In the fast-paced world of digital content creation, designers often face the challenge of capturing attention, holding interest, and guiding users to take specific actions. This blog post aims to synthesize my existing research on neurodesign and distill key principles that graphic designers could (should) follow when crafting online content. As we enter an era where web design isn’t just about aesthetics but also about optimizing user experience (UX) based on how our brains work, it’s essential to look at preexisting research to guide best practices. The insights shared in this post represent a draft framework for how graphic designers can approach creating online content that truly resonates with users on a cognitive level. In the age of information overload, web design is more than just aesthetics—it’s about understanding human psychology and crafting an experience that aligns with how our brains process, react, and decide. The digital landscape is crowded, and users are often just a click away from moving on to the next distraction. So, how can we capture attention and keep users engaged?


1. Thou Shalt Prioritize Simplicity and Clarity

The first rule of web design is one of the most important: don’t overwhelm your users. Our brains are wired to avoid confusion and unnecessary complexity. A site full of clutter doesn’t just look bad; it increases cognitive load and causes visitors to disengage. Remember Miller’s Law, which suggests the average person can hold only 7 (plus or minus 2) pieces of information in short-term memory. Simplify your layout, streamline your content, and use Gestalt principles to guide the eye. Less really is more. Our brains love simplicity because it requires less mental effort. Cognitive load theory suggests that when there are too many choices or visual distractions, our brains can become overwhelmed, leading to reduced decision-making efficiency. The use of Gestalt principles—like proximity, similarity, and closure—helps create a sense of order in design, making it easier for users to process information.

Future Outlook:
As we move into a world where augmented reality (AR) and virtual reality (VR) are more commonplace, the need for simplicity will only grow. Designers will need to create intuitive, minimal interfaces that allow for seamless transitions between the physical and digital worlds. Neurodesign will play an even more pivotal role in helping users process complex information without feeling overwhelmed, especially in these immersive environments. Expect the rise of spatial UI design, where clarity and simplicity will be paramount in user interactions.

2. Thou Shalt Create Urgency, But With Subtlety

Scarcity is a powerful psychological tool, but using it too aggressively can backfire. People are driven by the fear of missing out (FOMO), and this fear can be used to encourage quick action. Limited-time offers, countdowns, or highlighting low stock levels (e.g., “Only 3 left!”) create urgency. However, authenticity matters—overdoing it makes you look desperate. Use urgency to guide behavior, but avoid the trap of making every product feel scarce. This balance keeps the experience genuine while still motivating action. Urgency is rooted in our primal instincts—fear of missing out taps directly into our fight-or-flight response. The scarcity principle triggers the release of dopamine, creating excitement and motivating action. When used correctly, countdown timers or low stock indicators can create a feeling of limited opportunity, pushing users toward making quicker decision

Future Outlook:
In the future, artificial intelligence (AI) could take this to the next level. AI-driven systems may analyze a user’s browsing behavior and personalize urgency notifications based on their preferences and actions in real-time. Imagine a scenario where your site dynamically adjusts the urgency messaging depending on how much time a user has spent considering a product or how many similar items they’ve viewed elsewhere. The balance will lie in personalizing urgency without overloading the user with too much pressure, making it feel like an organic nudge rather than a forced action.

3. Thou Shalt Utilize Social Proof to Build Trust

Humans are social creatures, and our decisions are often influenced by the actions of others. This is where social proof comes in. Displaying testimonials, user reviews, or metrics like “500 people bought this today” taps into the herd mentality. Worchel, Lee, and Adewole (1975) demonstrated that when something is perceived as scarce, its value increases. This concept can be applied not just to products but also to information. If it’s popular, it must be valuable. So, don’t be shy—let your visitors see that others trust your brand or product. Social proof works because our brains are wired to trust the actions of others as indicators of quality. This behavior is driven by mirror neurons, which mimic the actions of others. Seeing others engage with your content or product activates these neurons, making users feel more comfortable and confident in their own decision-making. Worchel’s research shows that when we see something as rare or popular, it increases its perceived value.

Future Outlook:
With machine learning and data-driven personalization, social proof could become even more dynamic. Instead of generic testimonials, we might see personalized social proof in the form of user-generated content, like seeing what your friends or similar users are purchasing in real-time. This can enhance the feeling of connectedness and further validate choices. In the future, augmented reality could even let users “try on” or visualize products in their environment, where social proof elements could be overlaid to show how many people have made similar choices nearby.

4. Thou Shalt Focus on the User’s Journey, Not Just the Design


It’s easy to get caught up in making things look visually appealing, but web design isn’t just about aesthetics. It’s about creating a smooth user journey. Cognitive load theory tells us that the more mental effort a user needs to expend, the less likely they are to engage fully with content. Minimize distractions, optimize page speed, and ensure your layout flows logically from one section to the next. The fewer barriers you create, the more likely your visitors will complete their journey—whether it’s making a purchase, subscribing, or exploring more content. The user journey should feel seamless, almost invisible. Flow theory explains that people are most engaged when they’re fully immersed in an experience that matches their skill level and challenges them just enough. When users experience flow, their brains release feel-good chemicals like dopamine, keeping them motivated and engaged. Cognitive ease—the feeling that something is effortless—promotes this state, which is why minimizing obstacles in the user journey is so important.

Future Outlook:
In the coming years, voice interfaces and gesture controls will likely change how we navigate websites. Instead of relying on the standard point-and-click method, the user journey may be driven by voice commands or physical gestures, which will require a complete rethinking of intuitive design. Additionally, the integration of neurofeedback could allow websites to adjust in real-time based on users’ emotional states or cognitive load, ensuring that users stay in a state of flow without overexerting themselves.

5. Thou Shalt Use Contrast Wisely

In design, contrast is more than just making things look different—it’s about guiding the user’s focus. The concept of contrast comes into play when presenting choices, as we see in pricing models or options. When you show two products—one standard, the other premium—make the premium option stand out. The contrast principle suggests that scarcity can make something seem more valuable simply by positioning it against something less exclusive. By strategically highlighting features or price points, you create a sense of exclusivity and value.Contrast doesn’t just draw the eye; it also facilitates decision-making. The contrast principle creates a relative sense of value and importance. This works well with pricing, product options, and features. When we perceive something as scarce or premium, our brains assign it greater value. This is why the decoy effect works—when you add a high-priced option next to a mid-priced one, the mid-priced one suddenly looks more reasonable.

Future Outlook:
In the future, dynamic contrast could become more personalized. AI could adjust contrast and visual emphasis based on user behavior or even emotions. For example, if a user is hesitating between two options, a website could subtly emphasize one over the other to steer them toward a choice. With the rise of dark mode, designers may experiment with different contrast strategies, where the traditional visual cues of light-on-dark versus dark-on-light are reimagined to create a more personalized user experience.

6. Thou Shalt Be Transparent with Your Offers


Transparency is key in building trust. Iyengar and Lepper’s (2000) research on choice shows that when we’re given too many options, we feel overwhelmed and may walk away entirely. But when presented with a curated selection, we’re more likely to make a decision and stick with it. Offering a limited number of clear, straightforward choices on your site reduces decision fatigue. Ensure that pricing, features, and availability are crystal clear, without hidden fees or misleading terms. Transparency makes users feel more comfortable and confident in their decisions. Transparency builds trust, which is crucial in the decision-making process. When users feel that they are being presented with clear and honest information, it reduces their cognitive dissonance and aligns with our brain’s natural preference for predictability and certainty. The mere exposure effect suggests that the more familiar we are with something, the more we tend to like it, so transparency helps in building familiarity.

Future Outlook:
In the future, blockchain technology may be used to offer absolute transparency, especially in e-commerce. Blockchain could provide users with immutable proof of pricing history, product origin, and even customer feedback. This would further reduce skepticism and enhance decision-making by offering not just transparency but also verifiable authenticity in ways we can’t even imagine today. Additionally, AR might be used to overlay transparent pricing and feature comparisons directly onto products, creating an immersive transparency experience.

7. Thou Shalt Use Colors to Evoke Emotion

Color isn’t just for decoration—it plays a key role in shaping emotions and decisions. Research on color psychology has shown that colors can influence everything from trust (blue) to urgency (red) and calm (green). Choose your color palette wisely to evoke the right emotions at the right moments. A well-designed site leverages these associations subtly, guiding users to feel comfortable, excited, or ready to act without overwhelming them with too many bold or jarring colors. Color is one of the most powerful tools in neurodesign because it can trigger emotional responses that drive action. For example, red increases urgency, blue builds trust, and green suggests calmness. These responses are based on our evolutionary history and cultural associations. Color also impacts attention—bright colors can attract attention, while muted tones can calm it.

Future Outlook:
With the advent of emotion-sensing technology, designers could tailor color schemes to the individual user’s emotional state. If a user’s face or voice indicates frustration or confusion, the site could change the color scheme to one that induces calmness or clarity. Similarly, AI-driven color palettes could evolve to match the user’s aesthetic preferences and emotional responses in real-time, offering an even more personalized experience.

8. Thou Shalt Provide Clear Calls to Action (CTAs)

A call to action (CTA) is the ultimate goal of any web page—whether you want users to subscribe, buy, or learn more. But simply placing a CTA on a page isn’t enough; it needs to be compelling and easy to find. Fitts’s Law tells us that the closer and larger a target is, the easier it is to click. So, place your CTAs strategically in areas that make sense (think above the fold), and make sure they stand out with contrasting colors and action-oriented language like “Join Now” or “Get Started.” A clear call to action (CTA) triggers the brain’s decision-making system by creating a direct path for the user to follow. Fitts’s Law tells us that the easier it is to target and select a CTA, the more likely users are to act. The brain favors clarity and ease, so a CTA should be visually prominent and use action-oriented language that creates a sense of urgency or importance.

Future Outlook:
The future could bring interactive CTAs that evolve based on user actions or emotions. Imagine a CTA that changes dynamically as you approach it or that offers a personalized nudge based on user data. Voice-activated CTAs could also become more common, allowing users to make purchases or take actions simply by speaking their intent. These innovations will make CTAs even more intuitive and less intrusive, further enhancing the user experience.

9. Thou Shalt Limit Choices to Improve Decision-Making

One of the key insights from Iyengar and Lepper’s (2000) research is that too many choices can lead to decision paralysis. Shoppers faced with 24 jam options are less likely to purchase than those with only 6 choices. The same principle applies to web design—don’t overwhelm users with endless options. Instead, focus on a smaller, well-curated selection to guide decisions and ensure users are more likely to follow through. It’s not just about providing options—it’s about guiding them toward the best one for their needs.

Decision paralysis is real, and too many choices can overwhelm users. The paradox of choice shows that when we’re faced with too many options, our brains often shut down. By limiting options, you make the decision process easier and more satisfying. Cognitive ease helps users feel confident in their choice, and when the experience is too complex, users may simply leave without choosing anything.

Future Outlook:
In the future, AI-powered recommendation systems will likely become more accurate at predicting and limiting choices for users. Instead of presenting all available options, your website could analyze a user’s preferences and show a much smaller subset of options—those that have the highest likelihood of being chosen. Personalization will take this a step further by predicting what the user wants before they even realize it, leading to a more streamlined and intuitive experience.

10. Thou Shalt Keep the User in Flow
The experience of browsing your website should feel seamless. Users don’t want to be interrupted by slow load times, confusing navigation, or excessive pop-ups. Optimize your page speed, reduce unnecessary distractions, and ensure your site works across all devices. Neurodesign principles suggest that when users encounter smooth, frictionless experiences, they’re more likely to stay engaged and take the actions you want. A good user experience isn’t just nice to have—it’s essential for achieving your design goals.


Final Thoughts

Webdesign is not just about making things look pretty—it’s also about creating a psychological experience that makes users want to engage, stay, and act. By following these 10 commandments, you can craft websites that perform well in terms of user engagement and conversion. Designing with psychology in mind isn’t about manipulation—it’s about guiding users toward decisions that feel natural, satisfying, and rewarding. By following these Ten Commandments for Neurodesign, you could leverage the insights provided by cognitive science and visual perception research to create more engaging, effective online content. While design trends may evolve, these principles are rooted in timeless human psychology and provide a solid foundation for improving the user experience.


References

Hick, W. E., & Hyman, R. (1952). Response Times in Human Information Processing. Journal of Experimental Psychology.

Albers, J. (1963). Interaction of Color. New Haven: Yale University Press.

Bruce, V., & Young, A. (1998). In the Eye of the Beholder: The Science of Face Perception. Oxford: Oxford University Press.

Damasio, A. (1994). Descartes’ Error: Emotion, Reason, and the Human Brain. New York: Putnam.

Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Boston: Houghton Mifflin.

Nielsen, J., & Pernice, K. (2006). Eyetracking Web Usability. Berkeley: New Riders.

Sweller, J., Ayres, P., & Kalyuga, S. (2011). Cognitive Load Theory. New York: Springer.

Tullis, T. (1983). The Effects of Presentation Format and White Space on Performance in a Complex Display Task. Proceedings of the Human Factors Society Annual Meeting, 27(2), 139–142.

Wertheimer, M. (1923). Laws of Organization in Perceptual Forms. In Ellis, W. (1938), A Sourcebook of Gestalt Psychology. London: Routledge.

Unlocking Creativity through Neurodesign and Playfulness – Jess Herrington, Deloitte Digital & ANU

DISCLAIMER: Like I’ve mentioned before in a few posts, it is hard to find actual practical examples on how neurodesign is actually implemented, hence why I want to persue this topic for another 2 years. The video on top is one of the first and sadly only practical examples of a designers perspective on how to use neurodesign. It may not be super creative or perfect but it gives us a good glimpse into the future how these methods could be used to strive for more connectivity.

Let’s talk about playfulness. Incorporating playful elements into web design may sound like a gimmick, but it’s one of the smartest moves you can make. Why? Because playful design taps into the brain’s reward systems. People love to be surprised and delighted—and more importantly, they love to feel in control while exploring something new. Adding interactive animations, micro-interactions (like a subtle bounce when you hover over a button), or gamified elements can make users not just browse but engage. Think about Duolingo, the language-learning app. It uses playful badges, sounds, and positive reinforcement to make users feel good about their progress. Your website could do the same. Jess Herrington delves into the intersection of neuroscience, design, and playfulness, exploring how these elements can be harnessed to foster creativity. She discusses the concept of neurodesign, which involves applying principles from neuroscience to design processes to enhance user engagement and innovation. Herrington emphasizes the importance of playfulness in the creative process, suggesting that incorporating playful elements can lead to more effective and enjoyable design outcomes. Throughout her presentation, Herrington identifies several challenges in integrating neurodesign and playfulness into creative projects:

Measuring Impact: Assessing the effectiveness of incorporating neurodesign and playfulness into projects can be challenging due to the subjective nature of creativity.

Balancing Structure and Flexibility: Designers often struggle to find the right balance between structured methodologies and the freedom required for creative exploration.

Overcoming Conventional Thinking: There is a tendency to adhere to traditional design practices, which can stifle innovation.

Engaging Diverse Audiences: Creating designs that resonate with a wide range of individuals requires understanding and incorporating diverse perspectives.

Take product websites as an example. Imagine you’re shopping for a new phone. If the website is just a catalog with rows of products, sure, you’ll browse—but if it’s playful, with 3D views, color options that shift in real-time, and smooth, interactive scroll effects, you’re not just browsing. You’re immersed. And when users are immersed, they stay longer—and more importantly, they’re more likely to convert into customers.


Building Simplicity Into Complexity

In online design, the goal is often to make complex systems feel simple. Users shouldn’t feel like they’re working hard when they’re using your site. Instead, the process should be intuitive, like the website already knows what they’re looking for. This is where neurodesign shines. By understanding how the brain processes visual hierarchies, spacing, and motion, designers can create layouts that guide users naturally from one point to the next.

For instance, Google’s homepage is a neurodesign masterclass. The blank white space isn’t just for aesthetics; it reduces cognitive load, allowing the user to focus on the search bar—because that’s what 99% of people came for. Simple. Direct. Perfect.

But simplicity doesn’t mean boring. With the right playful elements, you can maintain an engaging, enjoyable experience. Take Slack’s playful loading screens with quirky messages. They acknowledge the user’s wait but turn it into a playful, human moment. It’s a small touch, but it makes all the difference.


The Challenges: Knowing Your Audience

But here’s the catch: Playfulness and neurodesign aren’t a one-size-fits-all solution. One of the main challenges designers face is knowing how far to push the playfulness before it starts to feel gimmicky. What works for a gaming website might not work for an e-commerce platform selling luxury watches. Neurodesign also has to account for user demographics. Younger audiences may appreciate playful animations and interactions, while older users might prioritize simplicity and ease of use.

Additionally, while it’s tempting to use fun, engaging elements, they must serve a purpose. Users can tell when a website is trying too hard, and nothing kills engagement like a site that feels more like a toy than a tool. Designers need to balance playful elements with functionality, ensuring they support the user experience rather than distract from it.


A Final Word: Creativity, Science, and Play

Incorporating neurodesign and playfulness into online content creation isn’t just about keeping users happy; it’s about crafting an experience that’s rooted in science while allowing for creativity. By understanding how users think and feel, and adding elements that surprise and engage them, designers can craft online spaces that don’t just deliver information—they connect on a human level.

So the next time you sit down to design your website, think beyond the pixels. Think about how you can play with your user’s brain in all the right ways. And remember, whether it’s a quirky animation, a thoughtful interaction, or just the right amount of white space, it all adds up to an unforgettable user experience. Now go forth and design playfully—but with purpose.

From Herrington’s insights, we can glean several valuable lessons:

  • Embrace Playfulness: Incorporating elements of play can lead to more innovative and engaging designs.
  • Foster a Growth Mindset: Encouraging experimentation and viewing failures as learning opportunities can enhance creativity.
  • Prioritize User Experience: Designs should be user-centric, considering the diverse needs and preferences of the target audience.
  • Measure Success Holistically: Beyond traditional metrics, consider qualitative feedback and user satisfaction to assess the impact of creative initiatives.

In summary, Jess Herrington’s presentation offers a compelling exploration of how neurodesign and playfulness can be leveraged to unlock creativity in design processes. By addressing the identified challenges and embracing the lessons learned, designers can enhance their creative endeavors and produce more engaging and effective outcomes.

Scarcity, Psychology, and Web Design: The Art of Creating Urgency (Without Overdoing It)

Scarcity, in its simplest form, is the condition of being in limited supply. Think of the “last one in stock” sign at your favorite store. You see it, and a little voice inside your head says, “I better grab this NOW, or I’ll regret it for the rest of my life.” But why? It’s a basic human reaction: we crave what we can’t easily have. Economists call this the scarcity principle, and it’s the reason why people will sometimes pay absurd amounts of money for things that are limited or exclusive. The rarer something is, the more we think it’s valuable. Scarcity works-not just for products, but for information, too. We can read about trends in the computer industry online by searching for articles on Google. Or we can subscribe to a pricey series of reports that cost a lot of money and only a relatively few people get. Which source of information will we think is more accurate? More valuable? Which source will we use when it is time to take action? If we think that information is hard to come by, then we see that information as being more valuable.

Now, how does scarcity sneak its way into the digital world of web design? Well, let’s think about your website: You’re trying to catch the attention of your visitors and convert them into loyal customers or users. What better way to do this than to make some information hard to come by? We’re not talking about hiding the entire website behind a paywall (unless you’re feeling especially bold)—we’re talking about strategically creating a sense of urgency and exclusivity. This is where web design meets the brain, and it’s like using magic to trick your visitors into making decisions you want them to make. Using the principles of neuro design, you can tap into people’s subconscious to guide them toward certain actions (like clicking that sweet “Buy Now” button). The sense of neurodesign is not to trick the mind but to use it’s structure to your advantage, if you know it ofcourse. Three principles you can elaborate on when it comes to designing your website could be:

FOMO (Fear of Missing Out): Humans are wired to avoid loss. Scarcity creates a sense of urgency, and urgency triggers action. For example, a countdown timer showing “Only 3 hours left!” on a limited-time offer is like a red flag that says, “Do it now or regret it later.”

Social Proof: When visitors see that a product is scarce, they assume it must be in high demand. Your website could say something like, “500 people have viewed this offer in the last 24 hours.” This combines scarcity with social proof, making the offer even more irresistible.

Contrast: Let’s say you have two subscription plans. One is priced at $10, and the other at $100. The $100 plan offers access to an exclusive service, and it’s the rare one—scarcity kicks in. Suddenly, the $10 plan seems… meh, not as special. The high-priced, scarce option feels like a premium choice, which is exactly what you want your users to think. the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


WHICH COOKIES TASTE BEST?

Worchel, Lee and Adewole (1975) asked people to rate chocolate chip cookies. They put 10 cookies in one jar and two of the same cookies in another jar. The cookies from the two-cookie jar received higher ratings-even though the cookies were exactly the same! Not only that, but if there were a lot of cookies in the jar, and then a short time later most of the cookies were gone, the cookies that were left received an even higher rating than cookies that were in a jar where the number of cookies didn’t change Social validation and scarcity work together (Something we already clarified as: The Power of Social Validation). If we think lot of other people liked the cookies and that there aren’t many cookies left, it creates an even stronger pull to action. the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


ONLY A SELECT FEW KNOW THIS

Iyengar and Lepper (2000) tested the theory that if we’re provided with 100 many choices, we don’t choose at all. Experimenters set up booths at a busy upscale grocery store in California, and posed as store employees. They alternated the product selections on the table. Half of the time, there were six choices of fruit jam for shoppers to taste. Half of the time, there were 24 jars of jam to taste. Did it make a difference how many jars there were? Yes, it did. When there were 24 jars of jam on the table, 60 percent of shoppers passing the table stopped and tasted jam. When there were six jars of jam on the table, only 40 percent stopped to taste. So does that mean that more choices are a good thing? You would think that people would taste more varieties of jam when the table had 24 flavors. But they didn’t. People tasted one to two varieties, whether there were six or 24 choices available. And how did varying the selection influence purchases? Of the shoppers who stopped at the table with six jars, 30 percent actually purchased the brand of jam they had tried. Of those who stopped at the table with 24 jars, only three percent purchased jam.

So what do we learn from this? A bigger selection attracted a bigger crowd, but that crowd purchased fewer products than the group presented with fewer choices. the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


HOW TO RUIN YOUR RELATIONSHIP

Wilson and Kraft (1993) asked couples to analyze their relationships and write lists of why they liked the person they were involved with. Wilson then compared the longevity of the relationship in these couples to the longevity of relationships in a control group that was not asked to logically analyze their relationship. Analyzing the relationships resulted in the relationship ending sooner than the relationships where couples were not asked for an analysis.

Analyzing doesn’t just ruin relationships, but it also seems to ruin your satisfaction with the purchases you make. Wilson (1993) studied individuals buying art posters:

• Group A analyzed why they liked and didn’t like five art posters.

• Group A analyzed why they liked and didn’t like

• Group B did not do any analysis.

Each individual in each group then picked one poster to take home. Two weeks later, researchers contacted them to see how happy they were with their choices. Those in Group B, who didn’t analyze the art they took home, were happier with their choices than those in Group A (who had analyzed their art) Dijksterhuis and van Olden (2005) performed the study again, but they added a few twists. Participants were told the study focused on evaluating art. Everyone in the study was brought in to look at art posters, one at a time, for 15 seconds on a computer screen. Then, after looking at the posters, they were assigned to one of three conditions where they performed more tasks:

• In the Conscious Thought condition, participants looked at each poster one by one on the computer screen and were asked to analyze carefully whether they liked each poster and why or why not. They were given paper and pen to record their analyses. Then all the posters appeared on one screen, and they were asked to pick the one they liked the best.

• In the Unconscious Thought condition, participants engaged in a different task-they worked on anagrams-for the same amount of time. Then they were shown the posters again, all placed on a single screen, and asked which one they liked the best.

• In the Immediate Decision condition, participants were shown a single screen showing all the art posters and asked which poster they liked the most.

At the end of the experiment, the participants could choose a poster to take home. The researchers hypothesized that the Unconscious Thought participants (who worked on anagrams) had made their decisions unconsciously and would be most satisfied with their choices. They were correct. It seems that if we make our choice unconsciously, without conscious processing, then we stick with it over time. If we spend more time and logically analyze why we’re choosing what we’re choosing, we’re less satisfied over time with our choices.

When you strategically use the scarcity principle in webdesign, you’re not only adding value to your content or products, but you’re also tapping into deep-rooted psychological triggers that make visitors want to act fast. Now, before you run off to redesign your entire website with scarcity elements, don’t forget that the trick is to strike a balance. You don’t want to overdo it and turn your site into an endless series of fake urgency signs (looking at you, online stores that have one last item left… for the last three months). Keep it real, keep it genuine, and most importantly, make your visitors feel like they’re stepping into an exclusive club they don’t want to miss. the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


Books and Sources for Your Scarcity Journey:

“Don’t Make Me Think” by Steve Krug – A classic in webdesign, this book explains how to keep your website user-friendly while still using scarcity to drive conversions.

“Influence: The Psychology of Persuasion” by Robert B. Cialdini – This is the bible for understanding psychological principles like scarcity and how they affect decision-making.

“Hooked: How to Build Habit-Forming Products” by Nir Eyal – Learn how scarcity can be used to make your product irresistible. the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


Research Reference:

Cialdini, R. B. (2006). Influence: The psychology of persuasion. Harper Business.

Eyal, N. (2014). Hooked: How to build habit-forming products. Portfolio.

Krug, S. (2000). Don’t make me think: A common sense approach to web usability. New Riders.

Weinschenk, S. (2009). Neuro web design: What makes them click? New Riders.

Iyengar, S. S., & Lepper, M. R. (2000). When choice is demotivating: Can one desire too much of a good thing? Psychological Science, 11(6), 143-146. https://doi.org/10.1111/1467-9280.00208

Wilson, T. D., & Kraft, D. T. (1993). The influence of analysis on the satisfaction of choice. Journal of Personality and Social Psychology, 64(6), 1029-1044. https://doi.org/10.1037/0022-3514.64.6.1029

Dijksterhuis, A., & van Olden, L. (2005). The unconscious thought effect in consumer choice. Psychological Science, 16(3), 282-288. https://doi.org/10.1111/j.0956-7976.2005.01530.x

Worchel, S., Lee, J., & Adewole, B. (1975). The effect of scarcity on the valuation of an item. Journal of Personality and Social Psychology, 31(6), 1038-1043. https://doi.org/10.1037/h0077450

Exploration of Neuropsychology in Webdesign #2

4. Visual Hierarchy: Guiding the User’s Gaze

Another neuropsychological concept critical to web design is visual hierarchy, which refers to the arrangement of elements in order of importance. Humans are naturally inclined to scan a page in a specific pattern, seeking the most relevant information first. This hierarchy is influenced by several factors such as size, color, contrast, alignment, and position. Understanding how these elements guide user behavior allows designers to create pages that not only look good but also lead users seamlessly toward their intended goals.

Why Visual Hierarchy Works: Gibson’s Ecological Approach to Visual Perception

The foundation of visual hierarchy can be traced back to principles of visual perception. One of the key figures in this field is James J. Gibson, whose Ecological Approach to Visual Perception (1979) provided groundbreaking insights into how we perceive our environment. Gibson emphasized the idea that perception is directly shaped by the stimuli present in our surroundings and that humans seek out meaningful information (or affordances) in a dynamic way. Our brains instinctively focus on elements that stand out from their environment, prioritizing objects that seem relevant or important based on context.

In the context of web design, this principle is often employed by manipulating visual weight—essentially making certain elements more prominent by altering their size, using contrasting colors, or positioning them strategically within the page layout. When done effectively, visual weight encourages users to notice and interact with the most important elements first, whether it’s a call-to-action button, a key piece of information, or a navigation link.

Understanding the F-pattern: Jakob Nielsen’s Eye-Tracking Research

Jakob Nielsen and the Nielsen Norman Group are pioneers in studying how users interact with web pages, particularly through eye-tracking research. One of their most influential findings is the “F-pattern” of reading, which demonstrates how users typically scan web pages. In Western cultures, where reading occurs left-to-right, users often start by scanning horizontally across the top of a page, move down the left-hand side, and occasionally glance horizontally across shorter sections, forming a rough “F” shape.

Here’s how the F-pattern breaks down in practical terms:

  1. Top Horizontal Scan: Users begin by scanning the top part of the page (usually the header or navigation bar) to find high-level information or navigation options. This is why critical navigation links or branding elements should be placed here.
  2. Vertical Scan: As users move down the page, their eyes track along the left side. Designers should place important headings, subheadings, and key links along this vertical path to ensure visibility.
  3. Secondary Horizontal Scans: Occasionally, users will glance across horizontally to investigate shorter lines of content, like summaries or sidebars. Designers can take advantage of this behavior by placing key information in sidebars or using short, punchy blocks of text.

The takeaway for web designers is simple: if your page doesn’t align with the F-pattern, critical content might be missed. Headlines, CTAs (Calls to Action), and important visuals should be placed where users’ eyes naturally gravitate, ensuring that key information is seen quickly and easily. However, not all users follow the F-pattern rigidly—those seeking specific information may scan differently—so visual hierarchy should always prioritize clarity and simplicity.

The Gestalt Principles in Web Design: Grouping and Guiding Attention

Visual hierarchy doesn’t exist in isolation—it is also deeply connected to Gestalt principles, a set of psychological laws explaining how humans naturally perceive patterns and organize visual elements. Let’s delve into two critical Gestalt laws that every designer should have in their toolbox:

  1. The Law of Proximity: This law states that objects that are close to each other tend to be perceived as a group. In web design, proximity is often used to cluster related information, helping users quickly grasp how pieces of content are connected. For example, grouping related navigation links or placing text close to associated images helps users intuitively understand that these elements are connected.
    • Practical Application: Think of a product listing page. By grouping a product image with its description, price, and “Add to Cart” button, users don’t have to mentally connect these pieces of information themselves. Everything is presented as a logical, cohesive unit.
  2. The Law of Continuation: This principle suggests that the human eye prefers to follow a continuous path, particularly along lines or curves, rather than seeing disconnected elements. In web design, this can be used to lead the user’s eye from one section to another, guiding them through a smooth flow of information. For example, designers might use a diagonal line of images or a sequence of steps arranged in a curve to subtly direct attention to the next important point.
    • Practical Application: A common example is a step-by-step checkout process, where each stage (Cart, Shipping Info, Payment) is visually linked, making it clear where users are in the process and where they need to go next. This reduces confusion and cognitive load, increasing the likelihood of completing the transaction.

By leveraging these Gestalt principles, web designers can create clearer visual relationships and ensure that users can process information more efficiently. After all, one of the key goals in web design is to reduce cognitive friction—anything that makes a user stop and think “What am I supposed to do here?” should be avoided.

The Role of Contrast, Size, and Color in Visual Hierarchy

While proximity and continuation guide how elements are grouped, contrast, size, and color are essential tools for making elements stand out, thereby enhancing the visual hierarchy. Contrast can involve differences in brightness, color, shape, or texture, and it’s one of the most powerful ways to draw attention to an element.

Connecting Visual Hierarchy to Cognitive Load Theory

Finally, it’s important to note how visual hierarchy connects with Cognitive Load Theory (CLT), as we discussed in the previous posting. A well-constructed visual hierarchy helps reduce extraneous cognitive load—the mental effort that users expend when trying to figure out how to navigate or find information on a poorly organized page. By guiding users through a clear and intuitive hierarchy, designers can ensure that their mental energy is focused on the content itself, not on figuring out where to look next.

For example, consider a complex form with many fields. If the form is poorly designed (e.g., inconsistent spacing, lack of visual cues), users will expend unnecessary cognitive effort just trying to understand what to do. On the other hand, a well-designed form might use clear headings, grouped fields, and contrasting buttons to create a logical flow. This minimizes cognitive load and allows users to focus on completing the task.

In summary, visual hierarchy is one of the most powerful tools in a web designer’s arsenal. By applying principles from Gibson’s ecological approach, Gestalt laws, and research on visual perception, designers can guide users’ eyes effortlessly through a page, ensuring that the most important information is seen first. Coupled with contrast, size, and color, a well-thought-out visual hierarchy enhances usability, reduces cognitive load, and ultimately improves the user experience.


5. Speed Matters: The Impact of Load Times on Cognition and User Experience

Performance in web design isn’t just a technical issue; it’s a psychological one. Page load time has a significant effect on how users perceive a website, which in turn affects their emotional response and cognitive engagement. In neuroscientific terms, long load times trigger increased levels of cortisol, the stress hormone, which can lead to frustration and negative user experience.

A seminal study by Akamai Technologies and Gomez.com found that 47% of consumers expect a webpage to load in two seconds or less. When a page takes longer, users are not only more likely to abandon it, but they also form negative associations with the website’s brand.

From a cognitive perspective, long delays disrupt the user’s flow state, a concept introduced by psychologist Mihaly Csikszentmihalyi. In web usage, flow occurs when users are fully engaged in the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


Conclusion: Merging Science with Design

In conclusion, the neuropsychological principles that govern human behavior provide invaluable insights for web designers. From reducing cognitive load and optimizing color schemes to applying Fitts’s Law and visual hierarchy, each design decision can be informed by a deep understanding of how the brain processes information. By integrating these principles into the design process, web designers can create experiences that are not only visually appealing but also psychologically attuned to user needs.

Web design is no longer just about making things “look good” – it’s about making things work well with how people think, perceive, and interact. The best designs are those that invisibly guide users through a site, reducing mental friction and creating a seamless, intuitive experience.

the task at hand, navigating smoothly through content without being interrupted by unnecessary delays. By optimizing page speed, designers can help users maintain their flow and reduce the cognitive strain caused by waiting.


Research Reference:
Akamai Technologies. (2017). The State of Online Retail Performance.

Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Boston: Houghton Mifflin.

Nielsen, J., & Pernice, K. (2006). Eyetracking Web Usability. Berkeley: New Riders.

Nielsen, J. (2000). Designing Web Usability: The Practice of Simplicity. Berkeley: New Riders Publishing.

Exploration of Neuropsychology in Webdesign #1

In a world where the average attention span rivals that of a goldfish (an often disproven myth, by the way, but we’ll save that for another time), it’s hardly surprising that web design has become one of the deciding factors in the success of a digital platform. What is often overlooked, however, are the neuropsychological mechanisms behind a functioning design. Welcome to a humorously academic journey into the art and science of web design – or, as we might call it: What does the brain actually think when it looks at a website?


1. Cognitive Load: The Foundation of Simplicity in Design

At the heart of effective web design lies a concept critical to the human brain’s processing power: cognitive load. This principle refers to the amount of mental effort required to absorb and process information. The cognitive load theory, popularized by psychologist John Sweller in the late 1980s, emphasizes that the brain has limited working memory, meaning that designs requiring excessive mental effort can overwhelm users and degrade their experience.

The theory revolves around a simple yet profound idea: our brains, despite all their brilliance, aren’t limitless processors capable of handling endless streams of information. Imagine your brain is a web browser with 50 tabs open—sure, it’s working, but it’s struggling. The more complex the information on each tab, the closer you are to a cognitive meltdown. Sweller proposed that learning, problem-solving, and interacting with any form of information all require cognitive resources, but those resources are finite. At its core, Sweller breaks the cognitive load into three types:

Germane Load – This is the good kind of cognitive load! It refers to the mental effort directed toward constructing useful knowledge and schema. Think of it as your brain’s attempt to make sense of new information by connecting it to what you already know, like remembering that the mitochondria are the powerhouse of the cell (yes, that fact will always stick with you).

Intrinsic Load – This is the unavoidable cognitive effort required by the task itself. If you’re trying to learn quantum physics or navigate a government website (often equally mind-boggling), your brain has no choice but to exert effort.

Extraneous Load – This is the cognitive load introduced by poorly designed instructional materials or distractions. It’s like trying to solve a math problem while someone plays “Baby Shark” on loop in the background. Extraneous load is unnecessary and should be minimized.

Sweller’s interest in cognitive load started with problem-solving research in education. He noticed something peculiar: complex problems often didn’t lead to better learning outcomes. In fact, sometimes the very act of problem-solving was so mentally draining that learners couldn’t retain much information afterward. It was as if their mental energy was entirely spent on juggling too many variables, leaving no capacity to actually understand or store what they’d learned.

Sweller’s work was heavily influenced by working memory research, particularly the famous “magical number seven” concept by George A. Miller.

Proposed by George A. Miller in 1956, this law suggests that the average person can hold about seven (plus or minus two) items in their working memory. This has profound implications for web design. Overly complex websites with too many navigation options, crowded layouts, or large blocks of text can quickly overwhelm users. A good web design reduces cognitive load by simplifying navigation, minimizing distractions, and organizing information into manageable chunks.

The principles of gestalt psychology also offer critical insights here. Gestalt theory, originally developed by psychologists such as Max Wertheimer, Kurt Koffka, and Wolfgang Köhler, focuses on how humans perceive visual stimuli as organized patterns rather than as isolated components. Gestalt laws, such as proximity, similarity, and closure, are essential to web design because they dictate how users naturally group and process information. When applied correctly, they reduce cognitive strain, making interfaces easier to navigate.

Research Reference:
Miller, G. A. (1956). The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information. Psychological Review.


2. Color Theory: The Emotional and Cognitive Power of Color

Colors are not just decorative elements in web design; they are powerful psychological tools that evoke emotional and cognitive responses. Color psychology, a subfield of psychological research, explores how different colors affect mood, behavior, and decision-making. For instance, Angela Wright’s Color Affects System connects specific hues with predictable psychological responses. While the exact science of color perception is debated, certain broad patterns are generally accepted.

  • Blue is often associated with calm, trust, and security, which is why it is popular among banks and tech companies (e.g., PayPal, Facebook). It has been shown to enhance focus and is thus ideal for corporate or informational sites.
  • Red, on the other hand, is a color that evokes urgency, excitement, and even danger. It is often used to highlight critical elements like “Buy Now” buttons or warnings. However, red can also increase stress levels if overused.
  • Green is linked to growth, health, and peace. Its calming effect makes it an excellent choice for environmental, wellness, and financial websites.

In addition to individual color effects, complementary colors (those opposite each other on the color wheel) can create dynamic, visually stimulating designs. Analogous colors (those next to each other on the color wheel) provide harmony and can be used for smooth, aesthetically pleasing interfaces.

However, it’s important to note that color perception is also highly contextual and cultural. Eva Heller, a leading scholar in color theory, points out that while colors have universal psychological effects, their interpretation can vary across cultures. For example, white is often associated with purity in Western cultures but can symbolize mourning in some Eastern societies. Web designers should, therefore, consider both the universal and cultural meanings of colors when targeting global audiences.

Research Reference:
Wright, A. (1991). The Beginners Guide to Colour Psychology. Color Affects.


3. The Fitts’s Law: Making Interaction Easy and Intuitive

When it comes to interaction design, few principles are as foundational as Fitts’s Law, named after psychologist Paul Fitts, who formulated it in 1954. Fitts’s Law predicts the time required to move to and select a target, such as a button or link, based on its size and distance. The basic premise is that larger targets are easier and quicker to click, especially when they are positioned closer to the user’s cursor or touchpoint.

This principle is highly relevant for user interface (UI) design, particularly when it comes to call-to-action buttons and navigation links. Fitts’s Law advises designers to make clickable elements large and place them in easily accessible areas, such as the center of the screen or along the edges, where users naturally focus their attention.

  • Large buttons with clear labels are easier to click, reducing user frustration. This is especially critical on mobile devices, where smaller targets can lead to misclicks.
  • Important actions, such as submitting a form or finalizing a purchase, should have prominent buttons that are easy to find and click. Fitts’s Law would suggest making these elements more visible and larger than secondary actions like cancel buttons.

Furthermore, the concept aligns with the law of least effort, which states that users prefer paths of least resistance. By minimizing the effort needed to perform actions, web designers can create more satisfying and efficient user experiences.

Research Reference:
Fitts, P. M. (1954). The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement. Journal of Experimental Psychology.


Emotions, Brains & Websites — What makes us click?

You are driving in your car (old brain is moving muscles, scanning the road, new brain is processing visual data and talking to the old brain so that you stay between the lines), and you are thinking about an argument you had with your brother over the weekend (new brain is remembering the argument, mid brain is reliving the argument emotionally). You are, after the fact, thinking about the things you should have said, but didn’t. You feel upset that you didn’t defend yourself (mid brain feeling upset, new brain thinking about things to say, old brain still driving the car). Suddenly, a car in front of you brakes (old brain notices that something has changed that needs attention, old brain floods system with hormones to heighten your ability to fight or flee, old brain has you slam on brakes, mid brain feels scared that you almost had an accident and relieved that you didn’t, new brain analyzes situation and thinks about what you might have done differently). While you drive the rest of the way home, you relive the near miss (new brain plays the memory over and over, mid brain feels the emotions again).You decide not to be angry with your brother any more, life is too short (mid brain feels forgiving and happy, new brain makes decision to call brother on phone, but decides to wait until you get home since talking on a cell phone while driving may not be a good idea right now, old brain is still driving the car).

Our physical bodies and the parts of the brain that govern them are inextricably linked with the parts of our brain that regulate emotions and the parts of the brain that deal with conscious thought and reasoning. These are separate systems in the brain, but they all work together. Our feelings and our reasoning are affected by our physical movement. It is our old brain that is regulating digestion and sleep, but there are controls in the mid brain that govern our emotions and feelings and can then affect our digestion and sleep. And what we think of as our “mind” (the new brain) has an effect on emotions, feelings, and digestion and sleep, too. Although we have three different brain systems, they are all connected and interrelated. We’ve inherited a mindset that tells us that the mind and body are separate, but the research and data show us they are not. Antonio Damasio (1994) calls this separation of mind and body “Descartes’ Error.”

Illustration of the “flawed” mind and body dualism by René Descartes. 

But since the new brain is the only part of brain functioning that we are conscious of, we think it is the most important player. Our mid brain (emotions) and old brain (auto-matic functioning) processing are, for the most part, unconscious, but here’s the interesting thing: our behavior and our decision-making is just as affected, actually, even more affected by our old brain and our mid brain than it is by our new brain.

What does this mean? It means that we think we make decisions about how to act and what to do consciously, but actually most of our decision-making and behavior is governed by unconscious processing. We can’t really separate what we do consciously from the unconscious aspects.

HAVE YOU HAD A BRILLIANT UNCONSCIOUS THOUGHT LATELY?

The new frontier of thought is actually the unconscious. The latest idea is that we are processing information and “thinking” unconsciously all the time.This is why when we are trying to solve a problem and we stop working on it and go to lunch, the solution will suddenly appear as we are munching on our sandwich or driving in the car back to work. Your unconscious was working on the problem, but you weren’t aware of it.

Wilson (2002) defines the unconscious as “mental processes that are inaccessible to the conscious mind, but influence judgments, feelings or behavior… shortcuts that size up our environment, interpret and initiate behavior quickly.”

Imagine a day without the unconscious. We wouldn’t be able to get through five minutes. The estimate from neuroscientists is that our five senses are taking in 11 million pieces of information every second. And now many of those are we processing consciously? A mere 40! So we need the unconscious to deal with the other 10,999,960 pieces of information each second, or we would be overwhelmed in a matter of seconds. Our unconscious mind lets us process all the incoming data from our environment, and it instantly decides whether it is good or bad, something to avoid and run away from, or something to run toward. Our unconscious is a huge efficient shortcut tool, showing us what to pay attention to consciously.

“Automatic cognitive processes are internal automatons that help us navigate a multifaceted and complex environment by slicing it into easily digestible bites. They…can thus free our very limited-capacity consciousness from many burdens.”

Ran R. Hassin (Hassin, 2005)

You’re sitting in front of a computer screen that is divided into four quadrants. The experimenter tells you to watch for an X that is going to appear in one of the quadrants and to press one of the four buttons in front of you to indicate which quadrant the X is in. This experiment was performed by Lewicki in 1988.

The participants didn’t know it, but there was a complex rule about where the X would appear. For example, the X never appeared in the same square two times in a row; the location of the third X was dependent upon the location of the second. The location of the fourth X was dependent upon the location of the set of Xs for the previous two trials. Lastly, an X never appeared in a spot unless it had appeared in at least two of the other squares.

The rules were complicated, but participants learned them. That was evident since as they continued, their performance steadily improved, they got faster and faster at pressing the correct buttons. But not one of the participants could articulate what the rules were. Nor were they aware they were learning rules. Yet their performance improved. Their unconscious mind was learning the rules for them and guiding their behavior about which button to press. Just when participants were starting to perform well, the rules suddenly changed. The participants then started making mistakes, and their response times increased. They noticed that they weren’t doing well, but they didn’t know why. They had no awareness that there were rules that no longer worked. Interestingly, they consciously looked for reasons as to why their performance had deteriorated. They said things like they had “lost the rhythm” or that the experimenters were flashing subliminal pictures on the screen to distract them (which wasn’t true).

We often don’t know why we do the things we do. But we are quick to make up a reason that we actually believe, even though it’s not true. Psychologists call this confabulation. Our unconscious minds are very smart. But we don’t control them.

WHAT MAKES US CLICK?

Most Website-Owners have their Websites for a reason. There are target behaviors that they want us to engage in-quite often, even several target behaviors. An e-commerce site wants us to choose products and buy them. A non-profit site wants us to loan money to help small business owners in different parts of the world. A Fortune 1000 company wants us to be impressed with what they do and buy more stock in the company. A site based on ad revenue wants us to come to the site and then click on an ad. A site that is trying to get acquired wants us to come to the site and register to be a member so that the company can say they have x million registered members. Almost all Websites have target behaviors. How do they get us to engage in the target behavior? How do they get us to buy, register, donate, and click? What makes us click? 

To get us to click, they have to persuade us. But don’t make the mistake of thinking that the best way to persuade us is to make a logical presentation. As we learned most behavior and decision-making isn’t conscious. That means that they will have to engage the mid brain and the old brain, in addition to the new brain. We want to think that we are making logical decisions, even though we aren’t. The most effective Websites are Websites that talk to all three brains. When the Web site engages all three brains, then we click.

Old Brain:

Since the old brain focuses on survival instincts and basic needs like safety and comfort, to appeal to this part, websites should ensure clear navigation, fast loading times, and predictable patterns to minimize cognitive load and frustration (Nielsen Norman Group, 2006). For instance, using contrasting colors for call-to-action buttons makes actions immediately visible and instinctive, reducing effort in decision-making.

Lymbic System:

 Visual elements, such as appealing imagery, engaging videos, and emotion-driven copy, can elicit positive feelings and a sense of trust (Petersen et al., 2009). For example, e-commerce websites often use customer testimonials or happy lifestyle images to create emotional resonance, increasing users’ trust and engagement.

Neocortex:

The new brain handles higher-order reasoning and decision-making. Websites must provide informative, structured content and logical layouts to engage the new brain. For instance, product comparison tables in tech retail sites (e.g., Apple or Amazon) help users make rational, informed decisions by clearly presenting features and benefits.

By addressing all three brain systems, a website can create a seamless, intuitive, and emotionally engaging user experience, improving overall satisfaction and usability.

Sources:

Damasio, A. (1994). Descartes’ Error: Emotion, Reason, and the Human Brain. New York: G.P. Putnam’s Sons.

Descartes, R. (1641). Meditations on First Philosophy. (J. Cottingham, Trans.). Cambridge: Cambridge University Press. (Original work published 1641).

MacLean, P.D. (1970). The triune brain in evolution: Role in paleocerebral functions. Springer Science & Business Media.

Panksepp, J. (1998). Affective Neuroscience: The Foundations of Human and Animal Emotions. Oxford: Oxford University Press. (For emotional processing in the brain and its impact on physical and mental states).

Craig, A.D. (2002). How do you feel? Interoception: The sense of the physiological condition of the body. Nature Reviews Neuroscience3(8), 655-666. (For the interconnection between brain systems and bodily states).

Nielsen Norman Group. (2006). F-Shaped Pattern for Reading Web Content. Nielsen Norman Group. Retrieved from https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Petersen, E., Iyer, G., & Barton, M. (2009). Emotions in web design: An empirical study. Journal of Human-Computer Interaction25(3), 234-245.