تصميم واجهات تطبيقات التقنية المالية: اجعل المهام المالية واضحة ومطمئنة
دليل عملي لتصميم واجهات تطبيقات التقنية المالية، يتناول سياق الرصيد وحالة المعاملات والنماذج المالية وخطوات التأكيد ورسائل خطأ تراعي إمكانية الوصول وقوائم المراجعة.
تطلب الواجهة المالية من الناس تفسير الأرقام واتخاذ قرارات ذات عواقب على شاشة صغيرة. قد يكون الرصيد دقيقًا لكنه مربك بلا سياق؛ وقد يبدو نموذج التحويل بسيطًا لكنه يترك الشخص غير متأكد من الرسوم أو التوقيت أو الإجراء النهائي. يجعل التصميم المفيد لواجهات التقنية المالية الحالة الحالية مفهومة ويمنح الناس فرصة لمراجعة ما أدخلوه.
هذا دليل تصميم، وليس نصيحة مالية أو استثمارية أو قانونية. الأمثلة افتراضية، وأنماط الواجهات وحدها لا تثبت الامتثال أو الأمان. ابدأ بالمهمة، واستخدم لغة واضحة، واجعل تغيرات الحالة والخطوات التالية سهلة العثور عليها.
أهم النقاط
- اعرض الأرصدة مع أسماء حسابات واضحة وعملات وسياق ذي صلة عن التوقيت أو إتاحة المبلغ.
- صف حالات المعاملات بالكلمات واشرح ما يمكن للشخص فعله بعد ذلك.
- اجعل النماذج المالية مركزة وحقولها مسماة بوضوح، وقدّم المساعدة عندما يحتاج التنسيق أو الحقل إلى تصحيح.
- راجع التفاصيل الأساسية قبل الإجراء وقدّم تغذية راجعة واضحة بعده، بما في ذلك عندما تكون النتيجة غير مؤكدة.
- استخدم النص والبنية وأدوات التحكم الميسّرة حتى لا يعتمد المعنى على اللون أو الموضع البصري وحده.
اجعل الأرصدة مقروءة ضمن سياقها
الرقم الكبير لا يفسر نفسه. حدّد الحساب الذي ينتمي إليه واعرض العملة برمز أو اختصار مألوف. وإذا ميز المنتج بين المبالغ الحالية أو المتاحة أو المعلقة أو المستثمرة، فسمّ هذه المفاهيم مباشرة واشرحها حيث يلزم. تجنب عرض نوعين مختلفين من الأرصدة بتنسيق يكاد يتطابق ومن دون تعريف.
قد يشمل السياق أيضًا موعد آخر تحديث للمبلغ أو الأنشطة التي لا تزال معلقة. اختر التفصيل الذي يساعد الشخص على تفسير الشاشة بدل إضافة أرقام للزينة. استخدم تنسيقًا متسقًا للأرقام ومسافات كافية لتسهيل تمييز الأرقام والفواصل العشرية وعلامات السالب. وبالنسبة إلى أسماء الحسابات الطويلة، احتفظ بنص كافٍ للتمييز بينها بدل الاعتماد على لون أو رمز وحده.
- استخدم تسمية صريحة للحساب والعملة قرب المبلغ.
- اشرح المصطلحات المتخصصة مثل «المتاح» أو «المعلق» بلغة واضحة.
- حافظ على فهم المبلغ والحالة نفسيهما مع النص الأكبر والتقنيات المساعدة.
اعرض حالة المعاملة بوصفها حالة متغيرة
المعاملة عملية، لا مجرد صف في سجل. امنح كل عنصر حالة موجزة وتاريخًا ومبلغًا وطرفًا مقابلًا أو وجهة عند الاقتضاء. أبقِ تسمية الحالة ظاهرة بالنص؛ قد يعززها اللون أو الرمز، لكن لا ينبغي أن يحمل معناها وحده. ميّز بين النشاط المنتظر والمكتمل والمرفوض وما يحتاج إلى انتباه وفق حالات المنتج الفعلية.
فمثلًا، قد يظهر تحويل افتراضي بقيمة 45.00 EUR إلى Alex أولًا بعبارة «مجدول في 4 نوفمبر»، ثم «قيد المعالجة»، ثم «مكتمل». وإذا انتهت مهلة الاتصال بعد الإرسال، فلا تعلن النجاح أو الفشل بثقة من دون دليل. قل إن الحالة غير متاحة بعد، واشرح كيفية التحقق مرة أخرى، ووضّح هل قد تنشئ إعادة المحاولة طلبًا آخر. تعتمد الصياغة الدقيقة والإجراءات المتاحة على سلوك المعاملات الفعلي في المنتج.
| مثال على الحالة | ما الذي يمكن للشاشة توضيحه | خطوة تالية مفيدة |
|---|---|---|
| مجدول | التاريخ والوجهة المخطط لهما | مراجعة أو تعديل، إذا سمح المنتج بذلك |
| قيد المعالجة | أن الطلب لا يزال جاريًا | الانتظار أو عرض التفاصيل |
| مكتمل | النتيجة المسجلة وتاريخها | فتح الإيصال أو تفاصيل النشاط |
| يحتاج إلى انتباه | ما الذي تعذر إتمامه | مراجعة المشكلة المذكورة أو طلب المساعدة |
صمّم نماذج مالية تمنع الالتباس الممكن تجنبه
اطلب المعلومات عندما تحتاجها المهمة، واجمع الحقول ذات الصلة ليُقرأ النموذج بترتيب منطقي. استخدم تسميات ثابتة مثل «المستلم» أو «المبلغ»؛ فالنص التوضيحي داخل الحقل مثال لا بديل عن التسمية. وإذا توقع الحقل تنسيقًا معينًا، فاذكره قبل الإدخال؛ مثل هل يقبل المبلغ أجزاء العملة أو أي معرّف يوضع في الحقل. توصي إرشادات إدخال البيانات من Apple بتوضيح المعلومات المطلوبة وتقليل الإدخال غير الضروري والتحقق من القيم أثناء تقديمها.
اختر أدوات إدخال تناسب المعلومات وتسمح للناس بتصحيح ما أدخلوه. اجعل الحقول الاختيارية ظاهرة بصفتها اختيارية والحقول المطلوبة واضحة. وإذا ترتبت على اختيار ما تبعات، فصف الخيارات بلغة واضحة بدل ترك الناس يستنتجون المعنى من رموز مختصرة. وينبغي أن تكون إرشادات الحقول قريبة بما يكفي من أدواتها لتبقى مفهومة حين يعاد تدفق الشاشة أو تكبيرها.
امنح الناس خطوة مفيدة للمراجعة والتأكيد
قبل إجراء ذي عواقب، لخّص المعلومات التي يوشك الشخص على إرسالها: المصدر والوجهة والمبلغ والتاريخ وأي رسوم أو توقيت ظاهر له صلة بالمسار. اجمع التفاصيل الأكثر أهمية للقرار واجعل طرق تعديلها سهلة العثور عليها. ينبغي أن يصف الإجراء الأساسي الفعل، مثل «جدولة التحويل»، بدل «متابعة» المبهمة.
ينبغي أن تجيب شاشة التأكيد عن سؤالين: «ماذا حدث؟» و«ماذا أستطيع أن أفعل الآن؟». وقد يدعم عرض المرجع أو الإيصال الرجوع إلى العملية لاحقًا. تجنب التعامل مع الضغط على الزر بوصفه دليلًا على نجاح العملية الأساسية؛ يجب أن تعكس الواجهة النتيجة الفعلية التي يعيدها المنتج.
- حافظ على اتساق الملخص مع القيم المدخلة والخيارات المحددة.
- اجعل إجراءات الرجوع والتعديل تحتفظ بعمل المستخدم حيثما كان ذلك عمليًا.
- بعد الإرسال، وضّح هل استُلم الطلب أم يجري تنفيذه أم تأكدت نتيجته.
- إذا كانت الاستجابة غير مؤكدة، فاشرح كيفية التحقق من الحالة الحالية قبل الدعوة إلى إرسال آخر.
اجعل رسائل الخطأ والتحديثات سهلة الفهم
عند اكتشاف خطأ في الإدخال، حدد الحقل وصف المشكلة نصيًا. «مبلغ غير صالح» أقل فائدة من رسالة تشرح التنسيق المقبول أو القيمة الناقصة. احتفظ بالمدخلات الصحيحة حتى يصلح الناس مشكلة واحدة من دون البدء من جديد. تتطلب إرشادات WCAG 2.2 من W3C تحديد أخطاء الإدخال المكتشفة ووصفها، وتوفير تسميات أو تعليمات عندما يكون الإدخال مطلوبًا.
تحديثات الحالة مهمة أيضًا. إذا تغيرت الصفحة من «قيد المعالجة» إلى «مكتمل» من دون نقل التركيز، فاكشف التحديث بطريقة تستطيع التقنية المساعدة تحديدها. تصف WCAG 2.2 رسائل الحالة بأنها تغيرات تبلغ بالنتائج أو الانتظار أو التقدم أو الأخطاء من دون تغيير السياق. اجعل التنبيهات متناسبة: أعلن التغيرات ذات المعنى من دون مقاطعة الشخص مرارًا عند كل تحديث بصري.
تحقق من التباين وتكبير النص والوصول بلوحة المفاتيح أو المفاتيح البديلة وأسماء عناصر التحكم لقارئ الشاشة في الواجهة المنفذة. استخدم عناوين وتسميات واضحة، ولا تعبّر عن النجاح أو الخطأ أو اتجاه المعاملة باللون وحده. تؤكد مبادئ تصميم Apple التغذية الراجعة الواضحة ومساعدة الناس على التعافي من الأخطاء؛ وهي أهداف مفيدة، بينما تتطلب إمكانية الوصول الفعلية تقييم المنتج كاملًا.
قائمة مراجعة لواجهة تطبيق تقنية مالية
اتبع مهمة معتادة من الرصيد الأولي إلى الحالة النهائية. تحقق من المسار العادي والتصحيح والانقطاع، مثل اتصال بطيء. قارن شاشات الجوال ذات الصلة في المكتبة لترى كيف ترتب الواجهات المختلفة المعلومات والإجراءات، ثم قيّم مسارك وفق السلوك الفعلي لمنتجك.
- هل يستطيع الشخص معرفة الحساب والعملة اللذين يصفهما الرصيد؟
- هل تسمى الحالات المعلقة والمكتملة بوضوح وتعرض نصيًا؟
- هل لكل حقل تسمية ظاهرة وتعليمات التنسيق اللازمة؟
- هل يستطيع الناس مراجعة الوجهة والمبلغ والتوقيت قبل الإرسال؟
- هل تحدد الأخطاء المشكلة وتقدم تصحيحًا عمليًا؟
- هل يظل التحديث قابلًا للإدراك من دون لون أو رؤية دقيقة أو نقل التركيز؟
- عندما تكون النتيجة غير مؤكدة، هل تشرح الواجهة طريقة التحقق قبل إعادة المحاولة؟
