UI-design för fintechappar: tydlighet och lugn i ekonomiska ärenden

Gör balanser läsbara i sitt sammanhang

Ett stort antal är inte självförklarande. Identifiera kontot det tillhör och visa valutan med hjälp av en bekant symbol eller kod. Om produkten särskiljer aktuella, tillgängliga, väntande eller investerade belopp, märk dessa koncept direkt och förklara dem där det behövs. Undvik att presentera två olika balanstyper med nästan identisk stil och utan definition.

Sammanhang kan också inkludera när beloppet senast uppdaterades eller vilken aktivitet som fortfarande är väntande. Välj den detalj som hjälper någon att tolka skärmen, istället för att lägga till dekorativa siffror. Använd konsekvent talformatering och tillräckligt med mellanrum för att göra siffror, decimalavgränsare och minustecken lätta att urskilja. För långa kontonamn, behåll tillräckligt med text för att skilja konton isär istället för att lita på enbart färg eller en ikon.

• Använd en explicit kontoetikett och valuta nära beloppet.
• Förklara specialiserade termer som "tillgänglig" eller "väntande" på vanligt språk.
• Håll samma mängd och ange begripligt med större text och hjälpmedel.

Visa transaktionsstatus som ett växlande tillstånd

En transaktion är en process, inte bara en rad i en historiklista. Ge varje artikel en kortfattad status, datum, belopp och motpart eller destination när så är lämpligt. Håll statusetiketten synlig i texten; färg eller en ikon kan förstärka den, men bör inte ha betydelsen på egen hand. Särskilj aktivitet som väntar, slutförd, avvisad eller behöver uppmärksamhet enligt produktens faktiska tillstånd.

Till exempel kan en hypotetisk överföring av 45,00 EUR till Alex först stå "Schemalagt till 4 november", sedan "Bearbetar" och senare "Slutfört". Om en anslutning tar slut efter inlämning ska du inte med säkerhet tillkännage framgång eller misslyckande utan bevis. Säg att statusen inte är tillgänglig ännu, förklara hur du kontrollerar igen och gör det klart om ett nytt försök kan skapa en ny begäran. Exakt formulering och tillgängliga åtgärder beror på produktens verkliga transaktionsbeteende.

Designa finansiella formulär som förhindrar förvirring som kan undvikas

Be om information när det behövs för uppgiften, och gruppera relaterade fält så att formuläret läses i en vettig ordning. Använd beständiga etiketter som "Mottagare" eller "Belopp"; en platshållare är ett exempel, inte en ersättning för en etikett. Om ett fält förväntar sig ett visst format, ange det före inmatning – till exempel om ett belopp accepterar cent eller vilken identifierare som hör hemma i fältet. Apples vägledning för datainmatning rekommenderar att den begärda informationen är tydlig, minimerar onödig inmatning och validerar värden när människor tillhandahåller dem.

Välj inmatningskontroller som passar informationen och låter personer korrigera inmatningar. Håll valfria fält synliga valfria och obligatoriska fält identifierbara. Om ett urval får konsekvenser, beskriv alternativen i klartext istället för att få folk att sluta sig till mening från korta koder. Fältvägledning bör vara tillräckligt nära dess kontroll för att förbli begriplig när skärmen flyter om eller förstoras.

Ge människor en användbar granskning och bekräftelsesteg

Före en följdåtgärd, sammanfatta informationen som någon är på väg att skicka: källa, destination, belopp, datum och alla visade avgifter eller tidpunkter som är relevanta för flödet. Sätt ihop de mest beslutskritiska detaljerna och gör redigeringsrutter lätta att hitta. Den primära åtgärden ska beskriva åtgärden, till exempel "Schemalägg överföring" istället för ett tvetydigt "Fortsätt".

En bekräftelseskärm ska svara "Vad hände?" och "Vad kan jag göra nu?" En referens- eller kvittovy kan stödja senare uppslag. Undvik att behandla en knapptryckning som ett bevis på att den underliggande operationen lyckades; gränssnittet bör återspegla det faktiska resultatet som returneras av produkten.

• Se till att sammanfattningen överensstämmer med de angivna värdena och valda alternativ.
• Återställ och redigera åtgärder bevarar användarens arbete där det är praktiskt möjligt.
• Efter inlämnandet, ange om begäran mottogs, behandlas eller har ett bekräftat resultat.
• För ett osäkert svar, förklara hur du kontrollerar den aktuella statusen innan du bjuder in ytterligare ett bidrag.

Gör fel och uppdateringar tillgängliga

När ett inmatningsfel upptäcks, identifiera fältet och beskriv problemet i text. "Ogiltigt belopp" är mindre användbart än ett meddelande som förklarar det accepterade formatet eller det saknade värdet. Bevara giltiga poster så att människor kan åtgärda ett problem utan att börja om. W3C:s WCAG 2.2-vägledning kräver att upptäckta inmatningsfel identifieras och beskrivs, och att etiketter eller instruktioner tillhandahålls när inmatning krävs.

Statusuppdateringar spelar också roll. Om en sida ändras från "Bearbetar" till "Slutförd" utan att flytta fokus, exponera den uppdateringen på ett sätt som hjälpmedel kan avgöra. WCAG 2.2 beskriver statusmeddelanden som ändringar som kommunicerar resultat, väntan, framsteg eller fel utan att kräva en kontextändring. Håll varningar proportionerliga: meddela meningsfulla ändringar utan att upprepade gånger avbryta någon för varje visuell uppdatering.

Kontrollera kontrast, storleksändring av text, åtkomst till tangentbord eller switchar och skärmläsarnamn i det implementerade gränssnittet. Använd tydliga rubriker och kontrolletiketter och signalera inte framgång, fel eller transaktionsriktning enbart med färg. Apples designprinciper betonar tydlig feedback och att hjälpa människor att återhämta sig från misstag; dessa är användbara mål, medan faktisk tillgänglighet kräver att hela produkten utvärderas.

En checklista för granskning av fintech-gränssnitt

Gå igenom en typisk uppgift från dess startbalans till slutstatus. Kontrollera den vanliga vägen, en korrigering och ett avbrott som en långsam anslutning. Jämför relaterade mobilskärmar i biblioteket för att se hur olika gränssnitt ordnar information och åtgärder, och bedöm sedan ditt eget flöde mot dess verkliga produktbeteende.

• Kan någon berätta vilket konto och vilken valuta ett saldo beskriver?
• Namnges pågående och avslutade tillstånd tydligt och presenteras i text?
• Har varje fält en synlig etikett och eventuella nödvändiga formatinstruktioner?
• Kan personer granska destination, belopp och tidpunkt innan de skickar in?
• Identifierar fel problemet och erbjuder en praktisk korrigering?
• Förblir en uppdatering märkbar utan att färg, exakt syn eller fokus flyttas?
• När resultatet är osäkert, förklarar gränssnittet hur man kontrollerar innan man försöker igen?