{"id":215,"date":"2025-04-07T15:09:42","date_gmt":"2025-04-07T15:09:42","guid":{"rendered":"https:\/\/oriaadvisory.com\/blog\/?p=215"},"modified":"2025-06-12T01:29:56","modified_gmt":"2025-06-12T01:29:56","slug":"the-first-click-matters-why-over-explaining-breaks-the-flow","status":"publish","type":"post","link":"https:\/\/oriaadvisory.com\/blog\/2025\/04\/07\/the-first-click-matters-why-over-explaining-breaks-the-flow\/","title":{"rendered":"The First Click Matters: Why Over-Explaining Breaks the Flow"},"content":{"rendered":"\n

This article is based on a real-world user experience design mistake from a mobile banking app – one that left users stuck before they even got started. To better understand the friction in what should\u2019ve been a simple mobile money transfer task, I turned to the theory of mental models<\/strong>.<\/p>\n\n\n\n

Now, don\u2019t let the word \u201ctheory\u201d scare you off. I promise it\u2019s simple and yes, I\u2019ll even make it fun with a familiar analogy.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Do you know how to drive a car?\u2028<\/strong><\/p>\n\n\n\n

Yes? Great, but do you know what actually happens when you turn on the ignition?\u2028 Do you understand how fuel injection triggers combustion or how torque reaches the wheels?<\/strong><\/p>\n\n\n\n

If you said no, then you have a shallow mental model<\/strong> \u2014 just enough to operate the system.\u2028<\/p>\n\n\n\n

If you said yes, you have a deep mental model<\/strong> \u2014 the kind engineers need.<\/p>\n\n\n\n

\n

Here\u2019s the catch: the depth of your mental model only matters in relation to your role and your goal.<\/strong><\/p>\n<\/blockquote>\n\n\n\n

If you\u2019re a driver just trying to get from point A to B, shallow is fine.\u2028 But, if you\u2019re building or fixing the car, deep is essential.<\/p>\n\n\n\n

Now, let\u2019s apply this to user experience design.<\/p>\n\n\n\n

In my mobile banking study, most users \u2014 especially low-literate, novice smartphone users \u2014 had one simple goal:<\/p>\n\n\n\n

\n

\u201cI want to send money.\u201d<\/strong><\/p>\n<\/blockquote>\n\n\n\n

They weren\u2019t thinking about processing channels, payment switches, or interbank architecture.<\/p>\n\n\n\n

Yet, here\u2019s what the app asked them as the very first step after they chose the Transfer option from the main menu (see app screenshots below):<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
\"\"<\/figure>
\n

Original screen asking users to choose between same-bank and other-bank transfer options<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n

This immediately broke their mental model.<\/strong> Instead of starting with a familiar action (like entering account details), they were forced to make a backend decision they didn\u2019t understand.<\/p>\n\n\n\n

\n

\u201cI\u2019m not sure what this is asking me, so I\u2019ll just choose the first option and see.\u201d<\/em> \u2014 Participant 4<\/em><\/p>\n<\/blockquote>\n\n\n\n

For low-literate users, this kind of segmentation adds stress before they’ve even begun<\/strong>. It turns a familiar task into a guessing game.<\/p>\n\n\n\n

<\/div>\n\n\n\n

But Isn\u2019t That How the Backend Works?<\/strong><\/p>\n\n\n\n

Sure. From a system logic perspective, separating transfers this way makes sense. Different banks, different protocols. But that\u2019s the bank\u2019s business \u2014 not the user\u2019s<\/strong>.<\/p>\n\n\n\n

In user experience, we don\u2019t design for backend logic, we design for mental models.<\/strong><\/p><\/blockquote><\/figure>\n\n\n\n

The user shouldn\u2019t have to care whether it’s an interbank or intrabank transfer. They just want to send money. The app should figure out the processing details after<\/em> the user enters who they\u2019re sending to.<\/p>\n\n\n\n

<\/div>\n\n\n\n

So What Should the Design Have Done?<\/strong><\/p>\n\n\n\n

Simple:<\/p>\n\n\n\n

    \n
  • Offer one button<\/strong>: \u201cTransfer\u201d<\/li>\n\n\n\n
  • Let the user enter recipient details (e.g., account number)<\/li>\n\n\n\n
  • Use that information to detect if it\u2019s interbank or same-bank<\/li>\n\n\n\n
  • Only then<\/em> surface any necessary messaging (e.g., fee differences)<\/li>\n<\/ul>\n\n\n\n
    <\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n<\/figure>\n\n\n\n
    \"\"<\/figure>
    \n

    Eliminate the middle screen (marked red) because it forces users to choose a backend category (e.g., same-bank vs. other-bank) too early in the process.<\/p>\n<\/div><\/div>\n\n\n\n

    <\/div>\n\n\n\n

    The redesign eliminated this step entirely and led users directly to the transfer form. The system now detects the transfer type automatically \u201cbehind the scenes<\/em> \u201c<\/strong> after recipient details are entered.<\/p>\n\n\n\n

    This matches how users think. \u2028It reduces decisions. \u2028It preserves trust and confidence.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    The Lesson?<\/strong><\/p>\n\n\n\n

    Before you launch your next feature, ask yourself:<\/p>\n\n\n\n

      \n
    • Who are your users?<\/strong><\/li>\n\n\n\n
    • What are their goals?<\/strong><\/li>\n\n\n\n
    • What do they expect to see at this step?<\/strong><\/li>\n<\/ul>\n\n\n\n

      Mental models aren\u2019t about intelligence \u2014 they\u2019re about expectation. \u2028Good user experience design respects that. Great user experience designs for it.<\/p><\/blockquote><\/figure>\n\n\n\n

      <\/div>\n\n\n\n

      Project Summary<\/strong><\/p>\n\n\n\n

      These insights were gathered from a 3-year research project using comparative usability testing on live prototypes across two interface versions. <\/p>\n\n\n\n

      We tested both the original and rediesgned flows with real users -50 people in total. In the new version, people made fewer mistakes, completed transfers faster and most importantly felt less confused.

      <\/p><\/span><\/h1><\/p>\n\n\n\n

      Results were based on observed behaviour through think-aloud data and screen interaction recording analysis as well as verbal feedback. It\u2019s part of a broader series on inclusive mobile interface design.<\/p>\n\n\n\n

      \n

      Role:<\/strong> End-to-end UX Lead (Researcher, Strategist & Writer)<\/p>\n\n\n\n

      Focus:<\/strong> Inclusive mobile banking redesign<\/p>\n\n\n\n

      Scope: <\/strong>Redesigning transfer flow to match user mental models<\/p>\n\n\n\n

      Methods:<\/strong> Field observations, think-aloud testing, screen recordings, surveys<\/p>\n\n\n\n

      Tools:<\/strong> Figma (mock-ups), Protopie (prototyping), SPSS (task performance measures), Excel (task success tracking & content analysis grouping)<\/p>\n\n\n\n

      Study Duration:<\/strong> 3 years of fieldwork + iterative testing on 2 interface versions<\/p>\n\n\n\n

      Outcome:<\/strong> Reduced friction, improved task success, better user confidence<\/p>\n\n\n\n

      Stakeholders:<\/strong> UX Researcher, Designer & Writer (Me), Product Designer, Project Supervisors, NGO (Adult Literacy Centre), Literacy Centre Staff and Students, Project Funders (CSC – FCDO, United Kingdom) <\/p>\n<\/blockquote>\n\n\n\n

      <\/p>\n","protected":false},"excerpt":{"rendered":"

      This article is based on a real-world user experience design mistake from a mobile banking app – one that left users stuck before they even got started. To better understand the friction in what should\u2019ve been a simple mobile money transfer task, I turned to the theory of mental models. Now, don\u2019t let the word…<\/p>\n","protected":false},"author":2,"featured_media":259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7],"tags":[13,17,15,8,14,16,12,10,9],"class_list":["post-215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","category-user-experience","tag-cognitive-load","tag-digital-literacy","tag-inclusive-design","tag-mental-models","tag-mobile-app-ux","tag-mobile-banking-ux","tag-user-experience","tag-user-centered-design","tag-ux-mistakes"],"_links":{"self":[{"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/posts\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":24,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions"}],"predecessor-version":[{"id":584,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions\/584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/media\/259"}],"wp:attachment":[{"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/media?parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/categories?post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oriaadvisory.com\/blog\/wp-json\/wp\/v2\/tags?post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}