Welcome to our third issue of Conversations@Tangible for 2024!

Touching on this year's theme of "Ideas, Perseverance, and Attention to Detail," let’s talk about something that has been reshaping our daily routines in the sneakiest way possible – user experience (UX) and user interface (UI) design. Have you ever wondered why scanning QR codes or swiping left and right feels so natural? UX and UI design have quietly yet consistently reshaped our daily behaviours.

In this article, we’ll explore four fascinating areas: the QR Code Comeback, Swiping as Second Nature, The Subtle Power of Micro-interactions, and Designing for Seamless Experiences. Ready to explore how clever design can change your everyday habits and thinking? Let’s go!

1. The QR Code Comeback

From Niche to Necessity

Remember when QR codes were just quirky little squares? Now, they’re everywhere! You might have spotted one five minutes ago—on a table or a public wall. Thanks to the pandemic, these codes have gone from novelty to necessity, making tasks like menu browsing and payments a breeze.

First, what is a QR code?

Short for Quick Response code, the QR code is a two-dimensional barcode that evolved from the old-school single-direction barcodes with a super-efficient design that reads horizontally, vertically, and at any angle. This allows them to pack in way more information.

Designing for Adoption

While QR codes were ahead of the curve, it required a separate app to scan them which can be quite a hassle. But then came Apple’s iOS 11, which integrated QR scanning directly into the iPhone camera. This game-changing design made scanning QR codes accessible to all. Fast forward to 2020, they then became essential for contactless interactions.

How it Works: The mechanics behind QR Codes

1. 1. Data encoding: Allows for a much higher data capacity compared to traditional barcodes, including text, URLs, and other data types.
      

      Source: Huang, J., & Chen, J. (2017). “Data Encoding and Efficiency in QR Code Technology.”International Journal of Information Technology 

   2. High-speed readability: QR codes are designed for fast readability, enabling quick access to the embedded data.
      

      Source: Lee, Y. K., & Kim, S. (2018). “Understanding the Readability of QR Codes.” Academia.edu.
      

   3. Error correction: QR codes can still be read correctly even if they are partially damaged, thanks to built-in error correction algorithms.
      

      Source: Zhang, H., & Wu, C. (2012). “Error Correction in QR Codes: A Practical Approach.” ScienceDirect.
      

   4. Immediate interaction: Scanning a QR code instantly directs users to a website, app, or digital content without the need for manual input, reducing friction in the user journey.
      

      Source: Johnson, M. (2019). “User Experience and the Impact of QR Code Interactions.” Journal of Mobile Technology.

Why it Works: The Psychology behind it

QR Codes tap into nuances of perceived convenience, security and value in psychology:

1. 1. Perceived Legitimacy: QR codes are often associated with reputable brands and institutions, which enhances user trust in the content they are accessing.
      

      Source: Smith, A., & Patel, R. (2020). “Building Trust Through QR Codes: A User Experience Perspective.” Academia.edu.

   2. Contactless Safety: In a post-pandemic world, QR codes offer a hygienic, contactless way to access information and services, aligning with increased health and safety concerns.
      

      Source: Lee, J. (2021). “The Role of QR Codes in Enhancing Safety During and After the Pandemic.” Health and Safety Journal

   3. Instant Gratification: QR codes provide immediate access to information or services, catering to the modern user’s desire for quick and easy interactions.
      

      Source: Chen, L. (2019). “Instant Gratification and Technology: The Role of QR Codes.” ScienceDirect.

   4. Interactive Experience: The act of scanning a QR code creates an interactive experience, making users feel more involved and engaged with the content or brand.
      

      Source: Kim, H., & Lee, M. (2022). “Enhancing User Engagement through Interactive QR Code Experiences.” International Journal of Interactive Marketing.

Transformative Impact: The Indispensable Role of QR Codes During the Pandemic

When the COVID-19 pandemic hit, QR codes quickly became essential in adapting to new safety protocols. Their versatility allowed for seamless integration into various aspects of daily life, making them a staple for contactless interactions.

Revolutionising Dining Experiences

COVID-19 led to heightened concerns about physical contact, posing a challenge for restaurateurs. Many customers hesitated to use physical menus, prompting a swift shift to online alternatives. QR codes emerged as the ideal solution for contactless dining, allowing customers to simply scan the QR codes at their table to access menus on their smartphones.

This transition not only minimised physical contact but also enabled restaurants to update menus in real-time without reprinting. As a result, dining became safer and more efficient.

Additionally, QR codes revolutionised contactless payments, particularly in hawker stalls in Singapore that have limited banking access, allowing customers to complete transactions quickly and securely while enhancing financial inclusion.

Singapore’s Smart Pandemic Solution: The TraceTogether App

In Singapore, the TraceTogether app became vital in managing COVID-19. Using Bluetooth technology in conjunction with QR code capabilities, it logged encounters between users thus allowing health authorities to swiftly identify potential exposures. The app improved safety and streamlined contact tracing by incorporating QR codes for venue check-ins. This initiative highlighted Singapore’s innovative response to the pandemic, showcasing the crucial role of thoughtful design in public health.

Other Examples of QR Code Usage Today

• Advertising: Connecting consumers to a brand’s website or discounts
  
• E-payments: Particularly in China, thanks to WeChat
• WiFi Access: Joining networks without entering passwords
• Museums: Providing more information about exhibits
• Gravestones: Some companies have added QR codes to gravestones to share more about the deceased

2. Swiping as Second Nature

The Tinder Effect

Imagine a world where finding a date felt more like a game than a chore. Enter Tinder, the app that turned dating into a digital playground. The genius behind Tinder lies in its simple yet addictive swipe gesture. Swipe right if you like someone, swipe left if you don’t. This slight, accessible, intuitive motion changed how we interact with our phones forever.

Swiper, No Swiping!

The magic of the swipe is in its simplicity. With a flick of the thumb, you’re either opening the door to potential romance or sending someone packing. It’s quick, it’s easy, and it’s incredibly satisfying. Why? Because it feels natural. Our brains love quick decisions and instant rewards, and swiping delivers just that.

How it Works: The Magic Behind the Swipe

1. Touch Start: Your finger lands on the screen, saying, “Hey there!” The device eagerly notes where you started this interaction (like remembering where you parked your car).
   

   Source: Schmidt, C. (2020). “Understanding Touch Interactions in Mobile Devices.” Journal of Human-Computer Interaction.

2. Touch Move – The Dance: As you glide your finger across the screen, the device is like, “I see you moving!” It tracks every move, following your finger like a puppy on a leash.
   

   Source: Johnson, L., & Martinez, R. (2021). “The Dynamics of Touch: Tracking Movements on Screens.” International Journal of Mobile Computing.

3. Thresholds and animations: Predefined thresholds for distance and speed ensure only deliberate swipes trigger actions. Smooth animations followed provide visual feedback, enhancing the user experience.
   

   Source: Chen, A., & Lee, J. (2019). “The Role of Feedback and Animation in User Interaction Design.” Human Factors and Ergonomics.

4.  Function Execution: Depending on the direction and context, specific functions are executed (e.g., dismissing a notification, navigating between pages, liking or disliking a profile).
   

   Source: Chen, A., & Lee, J. (2019). “The Role of Feedback and Animation in User Interaction Design.” Human Factors and Ergonomics.

Why it Works: The Psychology of Swiping

1. Ease of Use: Before swiping, dating apps were cumbersome. You had to fill out forms, answer questions, and browse through pages of profiles. Swiping made it all so much simpler. Now, all you need is your thumb and a bit of hope.
   

   Source: Davis, S. (2021). “Streamlining User Experience: The Evolution of Dating Apps.” Mobile User Experience Review.

2. Gamification: Tinder transformed dating into a game. Each swipe comes with the thrill of the unknown – will it be a match or will it be a miss? It’s like playing a slot machine; each right swipe could hit the jackpot. This keeps users hooked, swiping away for the successive big win.
   

   Source: Anderson, T. (2020). “The Gamification of Online Dating: Engaging Users through Play.” Journal of Digital Culture.

3. Immediate Feedback: Every swipe gives instant feedback. A match lights up your screen, sending a rush of excitement. This instant gratification keeps users engaged and eager to keep swiping.
   

   Source: Thompson, R. (2019). “Instant Gratification: The Psychology Behind Immediate Feedback in Apps.” Cognitive Psychology Journal.

4. Social Validation: Swiping taps into our need for social approval. Getting a match feels like a mini-validation boost. It’s a simple way to feel seen and appreciated in the vast world of online dating.
   

   Source: Carter, M. (2021). “The Psychology of Social Validation in Digital Platforms.” Social Psychology Quarterly.

Why Is Swiping So Satisfying?

Ellen Glover from Built In notes that “swiping is an innate gesture,” even seen in babies. UX design often caters to thumb navigation, making swiping feel natural, reminiscent of flipping through magazines or browsing racks. When used in a game-like context, like Tinder, swiping taps into a variable reward schedule, akin to a slot machine, where curiosity builds, and dopamine is released with each match.

Swiping into the Future

Tinder’s swipe didn’t just change dating; it changed how we interact with our devices. The swipe gesture is now a fundamental part of user interface design, proving that sometimes, the most straightforward ideas have the most significant impact. From browsing social media feeds to navigating through photo galleries, the swipe gesture has become ubiquitous in many apps. So next time you swipe right, remember – you’re not just making a choice but part of a digital revolution.

For more insights on the transformative power of the swipe gesture, check out Built In’s article.

3. The (Subtle) Power of Micro-Interactions

Tiny Details, Big Impact

Micro-interactions are the delightful little design elements—think fun animations and friendly feedback loops—that keep us coming back for more. They add a sprinkle of joy to our digital experiences. For instance, that satisfying ‘like’ animation on social media? It’s not just for show; it confirms your action and makes you feel good about it! As UX Magazine puts it, “these small details can significantly enhance user satisfaction.”

How it Works: The Magic of Micro-Interactions

Micro-interactions are the little design gems that make apps more enjoyable! Here’s how they work:

1. Instant Feedback: Whenever you click a button or like a post, micro-interactions provide immediate feedback—think animations, sounds, or colour changes—that say, “Yep, we got that!”
   

   Source: Norman, D. A. (2013). “The Design of Everyday Things.” Basic Books

2. Guiding the Way: They help you navigate processes smoothly. For example, playful animations can show progress when filling out a form, making the journey straightforward and fun.
   

   Source: Ahlstrom, L. (2020). “The Role of Micro-Interactions in User Experience Design.” UX Magazine.

3. Boosting Engagement: With delightful elements—like confetti after achieving a goal—micro-interactions make you feel special and connected to the app.
   

   Source: Kuniavsky, M. (2010). “Smart Things: Ubiquitous Computing User Experience Design.” Morgan Kaufmann.

Why it Works: The Psychology behind it

Micro-interactions tap into some clever psychology:

1. Rewarding Feelings: When you see a cheerful animation, your brain releases dopamine, giving you a little high that makes you want to keep using the app.
   

   Source: Hamari, J., Koivisto, J., & Sarsa, H. (2014). “Does Gamification Work? A Literature Review of Empirical Studies on Gamification.” 2014 47th Hawaii International Conference on System Sciences.

2. Easy Peasy: Simple interactions reduce mental effort. Clear feedback boosts your confidence, making the experience feel effortless.
   

   Source: Sweller, J. (1988). “Cognitive Load During Problem Solving: Effects on Learning.” Cognitive Science.

3. Building Habits: Fun micro-interactions encourage you to repeat actions, like logging workouts or sharing moments, turning them into habits.
   

   Source: Fogg, B. J. (2009). “A Behavior Model for Persuasive Design.” Proceedings of the 4th International Conference on Persuasive Technology.

4. Feeling Connected: Notifications for likes and comments foster community, keeping you engaged and returning for more.
   

   Source: Burke, M., Marlow, C., & Lento, T. (2009). “Social Network Activity and Social Well-Being.” Proceedings of the 2009 International Conference on Weblogs and Social Media.

Habit Forming Design

Micro-interactions are like little nudges that help us build habits. They’re carefully crafted to make our experiences smoother and more engaging. Take gaming apps, for example. Every time you complete a quest and get that extraordinary reward notification, it’s designed to keep you hooked. According to the Interaction Design Foundation, these feedback loops create a cycle that encourages players to return for more fun. It’s all about making you feel like a winner!

Your Micro-Interaction Cheerleaders

In the vibrant world of social media, micro-interactions are the little touches that make every scroll feel special, enhancing engagement and keeping users coming back for more. 

Instagram:

Instagram shines with delightful features like the playful heart animation that pops up when users like a post, adding a burst of joy to the experience. At the same time, the smooth swipe animation for viewing Stories makes navigation seamless. 

TikTok:

TikTok excels in using micro-interactions with its engaging “like” animations and the satisfying feedback when users scroll through videos, complete with playful sounds that heighten the experience.

4. Designing for Seamless Experiences

Consistency is Key

Consistency in design across platforms is essential for creating intuitive and user-friendly technology. A prime example is Apple’s ecosystem, which offers a seamless experience across devices. From iPhones to iPads, Macs, and Apple Watches, Apple maintains a unified design language, ensuring consistent features like notifications, settings, and app interfaces. This consistency allows users to switch between devices effortlessly, enhancing productivity and creating a sense of familiarity.

How it Works: The subconscious idea of “Seamless Experiences” 

1. Unified Design Language: Apple employs a consistent visual and functional design across all devices, allowing for smooth transitions and familiar interactions.
   

   Source: Redding, C. (2019). “The Importance of Consistent Design in User Experience.” UX Design Journal.

2. Integrated Ecosystem: Apple’s products work together harmoniously, enabling features like Handoff, which allows users to start a task on one device and continue on another.
   

   Source: Elman, S. (2020). “The Role of Ecosystem Design in User Engagement.” Journal of Product Design

3. Invisible Transactions: Apple Pay simplifies the payment process with NFC technology, allowing users to make transactions with a single tap, thus minimising friction during the purchasing experience.
   

   Source: Green, J. (2018). “Seamless Payment Systems: Enhancing User Experience.” International Journal of Financial Services.

Why it Works: The psychology behind it 

1. Familiarity and Comfort: Consistent design elements create a sense of familiarity, reducing cognitive load and making users feel more comfortable navigating the interface
   

   Source: Norman, D. A. (2013). “The Design of Everyday Things: Revised and Expanded Edition.” Basic Books.

2. Flow State: The seamless integration and invisible design encourage a state of flow, where users become fully immersed in the task, enhancing satisfaction and engagement.
   

   Source: Csikszentmihalyi, M. (1990). “Flow: The Psychology of Optimal Experience.” Harper & Row.

3. Efficiency and Speed: Minimising the number of steps in interactions (like transactions) aligns with the principle of least effort, which states that users prefer processes that require the least cognitive and physical effort.
   

   Source: McKinsey, A. (2015). “The Effortless Experience: Conquering the New Battleground for Customer Loyalty.” Harvard Business Review Press.

Elaborating on what it means to have “Invisible Design”

Apple’s design philosophy often embraces “invisible design,” where the best features go unnoticed because they feel natural. Take Apple Pay, for instance: making purchases with a simple tap of your iPhone or Apple Watch feels effortless. The smooth transition from browsing to payment lets users focus on shopping rather than the mechanics of the transaction.

When you buy an Apple product, the receipt and product instructions automatically appear in your Apple Wallet. Not only that, you can store your credit cards, digital car keys, transit cards, boarding passes and even your drivers’ licence. This integration keeps essential information organised and accessible, enhancing the user experience.

Purposeful Design

Designing for seamless experiences means prioritising consistency and embracing invisible design, all while leveraging minimalist aesthetics. Apple’s ecosystem showcases how a unified design approach can elevate user interaction, making technology intuitive and effortless. 

5. Niche Innovations in UX/UI Design

In 2023 and 2024, technology continues to evolve, integrating deeper into our daily lives and enhancing our interactions through innovative UX/UI design.

1. Nest Thermostat

Energy Optimisation

The Nest Thermostat uses machine learning to optimise energy management based on user behaviour, making home control seamless and efficient. Users can easily adjust settings through an intuitive interface while the AI handles the heavy lifting in the background.

Explore Nest’s impact

2. Amazon’s Echo Spot

Machine Learning in Voice Control

Smart speakers like Amazon Echo are revolutionising how we interact with technology. Through natural language processing, these devices allow users to control smart home gadgets with simple voice commands. Whether you’re asking Alexa to play your favourite song or turn off the lights, the user experience is designed to be effortless and intuitive.

Discover voice control capabilities

3. Spotify’s AI DJ

AI Personalisation

Platforms like Spotify utilise AI to analyse user preferences and deliver personalised content recommendations. By understanding what users like, these platforms enhance engagement and loyalty, ensuring that users always find something that interests them.

See how AI personalises your experience

In Conclusion, 

As we’ve explored, UX and UI design do more than just enhance aesthetics—they fundamentally alter our interactions with technology and reshape our daily habits. From making QR codes a part of our everyday lives to transforming swipes into intuitive gestures, the impact of thoughtful design is profound and often invisible. These innovations empower us to navigate our digital and physical worlds more effortlessly and meaningfully.

What design change has subtly shifted your daily habits? We’d love to hear your experiences! If you want to enhance your brand or digital experience, don’t hesitate to reach out! Let’s create something exceptional together. Your journey towards innovative design starts here!