[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fgood-ui-bad-ux":3},{"id":4,"title":5,"body":6,"date":74,"description":75,"extension":76,"head":77,"imageUrl":33,"meta":78,"navigation":79,"ogImage":77,"path":80,"robots":77,"schemaOrg":77,"seo":81,"sitemap":82,"stem":83,"__hash__":84},"articles\u002Farticles\u002F21.Good-ui-bad-ux.md","Good UI. Bad UX.",{"type":7,"value":8,"toc":69},"minimark",[9,13,17,20,25,28,41,44,47,51,54,63,66],[10,11,5],"h1",{"id":12},"good-ui-bad-ux",[14,15,16],"p",{},"Many readers asked for bad UX examples and why they fail. Here are two related cases I run into often.",[14,18,19],{},"Context: I use a separate card for subscriptions with a small balance. When a useful subscription fails due to insufficient funds, I top up and try to pay again.",[21,22,24],"h2",{"id":23},"case-1","Case #1",[14,26,27],{},"I open this payment screen:",[29,30,34],"v-image",{":hasBorder":31,":rounded":31,"alt":32,"src":33},"true","Payment methods list with duplicates","\u002Fimg\u002Fgood-ui-bad-ux\u002Fcase-1.png",[35,36,38],"template",{"v-slot:description":37},"",[14,39,40],{},"Three visually identical cards where the first method is disabled",[14,42,43],{},"The same card can appear multiple times. The first method is disabled, so I cannot retry it directly. I have to add the same card again to pay successfully.",[14,45,46],{},"In short: there is no clear \"pay now\" retry path for the failed method, so the UI pushes users toward duplicate methods.",[21,48,50],{"id":49},"case-2","Case #2",[14,52,53],{},"Another payment interface has the opposite issue:",[29,55,58],{":hasBorder":31,":rounded":31,"alt":56,"src":57},"Payment UI where add method is hidden","\u002Fimg\u002Fgood-ui-bad-ux\u002Fcase-2.png",[35,59,60],{"v-slot:description":37},[14,61,62],{},"Existing method is selectable, but adding a new one is hard to discover",[14,64,65],{},"Here I can use an existing method, but adding a new one is hard to find. The action seems hidden under a menu that visually belongs to the current method.",[14,67,68],{},"So in the first case I could not reuse the same method, and in the second case I could not easily add a new one.",{"title":37,"searchDepth":70,"depth":70,"links":71},2,[72,73],{"id":23,"depth":70,"text":24},{"id":49,"depth":70,"text":50},"2026-01-21T10:00:00+04:00","Two real payment UX cases: one blocks retrying an existing method, another hides adding a new method. Good visuals, poor interaction flow.\n","md",null,{},true,"\u002Farticles\u002Fgood-ui-bad-ux",{"title":5,"description":75},{"loc":80},"articles\u002F21.Good-ui-bad-ux","FnHdLu2o-N-16sch0_Lg5_jbFYk27llxMz52XJG4A3s"]