أفضل ممارسات تصميم التبادل اللامركزي (DEX)

منذ إطلاق يوني سواب في عام 2018، تم إطلاق مئات من البورصات اللامركزية عبر عشرات السلاسل المختلفة. لقد قدمت العديد منها عناصر جديدة أو أضافت لمستها الخاصة، ولكن الواجهة ظلت كما هي عمومًا.

أحد أسباب ذلك هو قانون جاكوب (opens in a new tab):

يقضي المستخدمون معظم وقتهم على مواقع أخرى. وهذا يعني أن المستخدمين يفضلون أن يعمل موقعك بنفس الطريقة التي تعمل بها جميع المواقع الأخرى التي يعرفونها بالفعل.

بفضل المبتكرين الأوائل مثل يوني سواب و Pancakeswap و سوشي سواب، أصبح لدى مستخدمي دي فاي فكرة جماعية عن شكل DEX. ولهذا السبب، بدأ يظهر الآن ما يشبه "أفضل الممارسات". نرى المزيد والمزيد من قرارات التصميم التي يتم توحيدها عبر المواقع. يمكنك رؤية تطور منصات التداول اللامركزية (DEXes) كمثال عملاق لاختبارها على الهواء مباشرة. الأشياء التي نجحت بقيت، والأشياء التي لم تنجح تم التخلص منها. لا يزال هناك مجال للشخصية، ولكن هناك معايير معينة يجب أن يتوافق معها DEX.

هذه المقالة عبارة عن ملخص لما يلي:

• ما الذي يجب تضمينه
• كيفية جعله قابلاً للاستخدام قدر الإمكان
• الطرق الرئيسية لتخصيص التصميم

تم إنشاء جميع الإطارات السلكية النموذجية خصيصًا لهذه المقالة، على الرغم من أنها جميعًا تستند إلى مشاريع حقيقية.

تتضمن المجموعة فيجما أيضًا في الأسفل - لا تتردد في استخدامها وتسريع الإطارات السلكية الخاصة بك!

التشريح الأساسي لـ DEX

تحتوي واجهة المستخدم بشكل عام على ثلاثة عناصر:

1. الشكل الرئيسي
2. زر
3. لوحة التفاصيل

الاختلافات

سيكون هذا موضوعًا شائعًا في هذه المقالة، ولكن هناك العديد من الطرق المختلفة التي يمكن من خلالها تنظيم هذه العناصر. يمكن أن تكون "لوحة التفاصيل" على النحو التالي:

• فوق الزر
• أسفل الزر
• مخفي في لوحة الأكورديون
• و/أو على نموذج "معاينة"

ملحوظة: يعد وضع "المعاينة" اختياريًا، ولكن إذا كنت تعرض تفاصيل قليلة جدًا على واجهة المستخدم الرئيسية، فإنه يصبح ضروريًا.

بنية النموذج الرئيسي

هذا هو المربع الذي يمكنك من خلاله اختيار الرمز الذي تريد تبديله. يتكون المكون من حقل إدخال وزر صغير في صف.

تعرض DEXes عادةً تفاصيل إضافية في صف واحد أعلاه وصف واحد أسفله، على الرغم من أنه يمكن تكوين ذلك بشكل مختلف.

الاختلافات

يتم هنا عرض نوعين مختلفين من واجهة المستخدم؛ أحدهما بدون أي حدود، مما يؤدي إلى إنشاء تصميم مفتوح للغاية، والآخر حيث يحتوي صف الإدخال على حدود، مما يؤدي إلى إنشاء التركيز على هذا العنصر.

يسمح هذا الهيكل الأساسي بعرض أربع قطع رئيسية من المعلومات في التصميم: واحدة في كل زاوية. إذا كان هناك صف واحد فقط أعلى/أسفل، فسيكون هناك مكانان فقط.

أثناء تطور دي فاي، تم تضمين الكثير من الأشياء المختلفة هنا.

المعلومات الرئيسية التي يجب تضمينها

• الرصيد في المحفظة
• زر ماكس
• يعادل فيات
• تأثير السعر على المبلغ "المستلم"

في الأيام الأولى لـ دي فاي، كان المعادل النقدي غالبًا مفقودًا. إذا كنت تقوم ببناء أي نوع من مشاريع ويب3، فمن الضروري أن يتم عرض المعادل القانوني. لا يزال المستخدمون يفكرون من حيث العملات المحلية، لذلك من أجل مطابقة النماذج العقلية في العالم الحقيقي، يجب تضمين ذلك.

في الحقل الثاني (الذي تختار فيه الرمز الذي تريد التبديل إليه)، يمكنك أيضًا تضمين تأثير السعر بجوار مبلغ العملة الورقية، عن طريق حساب الفرق بين مبلغ الإدخال ومبالغ الإخراج المقدرة. تعتبر هذه تفاصيل مفيدة جدًا لإدراجها.

يمكن أن تكون أزرار النسبة المئوية (على سبيل المثال 25%، 50%، 75%) ميزة مفيدة، إلا أنها تشغل مساحة أكبر، وتضيف المزيد من الدعوات إلى اتخاذ الإجراءات، وتضيف المزيد من العبء العقلي. نفس الشيء مع شرائح النسبة المئوية. ستعتمد بعض قرارات واجهة المستخدم هذه على علامتك التجارية ونوع المستخدم لديك.

يمكن عرض التفاصيل الإضافية أسفل النموذج الرئيسي. نظرًا لأن هذا النوع من المعلومات مخصص في الغالب للمستخدمين المحترفين، فمن المنطقي أن:

• احرص على أن يكون الحد الأدنى قدر الإمكان، أو؛
• إخفائه في لوحة الأكورديون

معلومات إضافية يجب تضمينها

• سعر الرمز المميز
• انحراف
• تلقى الحد الأدنى
• الناتج المتوقع
• تأثير السعر
• تقدير تكلفة الغاز
• رسوم أخرى
• توجيه الطلب

يمكن القول إن بعض هذه التفاصيل قد تكون اختيارية.

يعد توجيه الطلب أمرًا مثيرًا للاهتمام، لكنه لا يحدث فرقًا كبيرًا بالنسبة لمعظم المستخدمين.

بعض التفاصيل الأخرى هي ببساطة إعادة صياغة نفس الشيء بطرق مختلفة. على سبيل المثال، "الحد الأدنى المستلم" و"الانزلاق" هما وجهان لعملة واحدة. إذا قمت بتعيين الانزلاق عند 1%، فإن الحد الأدنى الذي يمكنك أن تتوقع تلقيه = الناتج المتوقع -1%. ستعرض بعض واجهات المستخدم المبلغ المتوقع، والمبلغ الأدنى، والانزلاق... وهو أمر مفيد ولكن ربما يكون مبالغا فيه.

سيترك معظم المستخدمين الانزلاق الافتراضي على أي حال.

غالبًا ما يتم عرض "تأثير السعر" بين قوسين بجوار المعادل النقدي في حقل "إلى". هذه تفاصيل تجربة مستخدم رائعة لإضافتها، ولكن إذا تم عرضها هنا، فهل تحتاج حقًا إلى عرضها مرة أخرى أدناه؟ وثم مرة أخرى على شاشة المعاينة؟

لن يهتم العديد من المستخدمين (خاصة أولئك الذين يقومون بمبادلة مبالغ صغيرة) بهذه التفاصيل؛ سيقومون ببساطة بإدخال رقم ويضغطون على زر المبادلة.

ستعتمد التفاصيل التي يتم عرضها بالضبط على جمهورك والشعور الذي تريده للتطبيق.

إذا قمت بإدراج التسامح مع الانزلاق في لوحة التفاصيل، فيجب عليك أيضًا جعلها قابلة للتحرير مباشرة من هنا. هذا مثال جيد على "المسرع"؛ خدعة UX أنيقة يمكنها تسريع تدفقات المستخدمين ذوي الخبرة، دون التأثير على قابلية الاستخدام العامة للتطبيق.

من الجيد التفكير مليًا ليس فقط في معلومة واحدة محددة على شاشة واحدة، بل في سير العملية بأكملها: إدخال الأرقام في النموذج الرئيسي ← مسح التفاصيل ← النقر على شاشة المعاينة (إذا كانت لديك شاشة معاينة). هل يجب أن تكون لوحة التفاصيل مرئية في جميع الأوقات، أم يحتاج المستخدم إلى النقر عليها لتوسيعها؟ هل يجب عليك إنشاء احتكاك عن طريق إضافة شاشة معاينة؟ وهذا يجبر المستخدم على التباطؤ والتفكير في تجارته، وهو ما قد يكون مفيدًا. لكن هل يريدون رؤية نفس المعلومات مرة أخرى؟ ما هو الشيء الأكثر فائدة لهم في هذه المرحلة؟

خيارات التصميم

كما ذكرنا، يعتمد الكثير من هذا على أسلوبك الشخصي. من هو المستخدم المفضل لديك؟ ما هي علامتك التجارية؟ هل تريد واجهة "احترافية" تعرض كل التفاصيل، أم تريد أن تكون بسيطة؟ حتى لو كنت تستهدف المستخدمين المحترفين الذين يريدون الحصول على كل المعلومات الممكنة، يجب عليك أن تتذكر كلمات آلان كوبر الحكيمة:

مهما كانت واجهتك جميلة ورائعة، سيكون من الأفضل لو كان عددها أقل.

البنية

• الرموز على اليسار، أو الرموز على اليمين
• صفين أو 3
• التفاصيل أعلى أو أسفل الزر
• التفاصيل موسعة أو مصغرة أو غير معروضة

نمط المكون

• فارغ
• المبينة
• مملوء

من وجهة نظر تجربة المستخدم البحتة، فإن أسلوب واجهة المستخدم يهم أقل مما تعتقد. تأتي الاتجاهات البصرية وتذهب في دورات، والكثير من التفضيلات تعتبر ذاتية.

الطريقة الأسهل للحصول على إحساس بهذا - والتفكير في التكوينات المختلفة - هي إلقاء نظرة على بعض الأمثلة ثم إجراء بعض التجارب بنفسك.

تحتوي مجموعة فيجما المضمنة على مكونات فارغة ومحددة ومملوءة.

ألق نظرة على الأمثلة أدناه لترى طرقًا مختلفة يمكنك من خلالها تجميع كل شيء معًا:

ولكن إلى أي جانب يجب أن يوضع الرمز؟

والخلاصة هي أنه ربما لا يحدث فرقًا كبيرًا في قابلية الاستخدام. ومع ذلك، هناك بعض الأمور التي يجب وضعها في الاعتبار، والتي قد تؤثر عليك في اتجاه أو آخر.

لقد كان من المثير للاهتمام إلى حد ما أن نرى تغير الموضة مع مرور الوقت. كان لدى يوني سواب في البداية الرمز المميز على اليسار، لكنه نقله منذ ذلك الحين إلى اليمين. أجرى سوشي سواب أيضًا هذا التغيير أثناء ترقية التصميم. وقد اتبعت معظم البروتوكولات هذا النهج، ولكن ليس كلها.

تضع الأعراف المالية تقليديًا رمز العملة قبل الرقم، على سبيل المثال 50$، 50€، 50£، لكننا نقول 50 دولارًا، 50 يورو، 50 جنيهًا.

بالنسبة للمستخدم العام - وخاصة الشخص الذي يقرأ من اليسار إلى اليمين ومن أعلى إلى أسفل - ربما يبدو الرمز الموجود على اليمين أكثر طبيعية.

يبدو وضع الرمز على اليسار وجميع الأرقام على اليمين متماثلًا بشكل جميل، وهو أمر إيجابي، ولكن هناك جانب سلبي آخر لهذا التصميم.

ينص قانون القرب على أن العناصر القريبة من بعضها البعض يُنظر إليها على أنها مرتبطة. وبناءً على ذلك، نريد وضع العناصر المرتبطة بجانب بعضها البعض. يرتبط رصيد الرمز بشكل مباشر بالرمز نفسه، وسيتغير عند تحديد رمز جديد. لذلك فمن المنطقي إلى حد ما أن يكون رصيد الرمز بجوار زر تحديد الرمز. من الممكن نقله أسفل الرمز، لكن هذا يكسر تناسق التخطيط.

في نهاية المطاف، هناك إيجابيات وسلبيات لكلا الخيارين، ولكن من المثير للاهتمام كيف يبدو الاتجاه نحو الرمز المميز على اليمين.

سلوك الزر

لا يوجد زر منفصل للموافقة. ولا يوجد أيضًا نقرة منفصلة للموافقة. يريد المستخدم التبديل، فقط قل "تبديل" على الزر وابدأ الموافقة كخطوة أولى. يمكن أن يعرض النموذج التقدم باستخدام خطوة بخطوة، أو إشعارًا بسيطًا "إرسال 1 من 2 - الموافقة".

الزر كمساعدة سياقية

يمكن للزر أن يقوم بمهمة مزدوجة كتنبيه!

يعد هذا في الواقع نمط تصميم غير عادي إلى حد ما خارج ويب3، ولكنه أصبح معيارًا داخله. يعد هذا ابتكارًا جيدًا لأنه يوفر المساحة ويساعد على تركيز الانتباه.

إذا كان الإجراء الرئيسي - SWAP - غير متاح بسبب خطأ، فيمكن توضيح السبب باستخدام الزر، على سبيل المثال:

• شبكة التبديل
• ربط المحفظة
• أخطاء مختلفة

يمكن أيضًا ربط الزر بالإجراء الذي يجب تنفيذه. على سبيل المثال، إذا لم يتمكن المستخدم من التبديل لأنه على الشبكة الخاطئة، فيجب أن يظهر على الزر "التبديل إلى إيثريوم"، وعندما ينقر المستخدم على الزر، يجب تبديل الشبكة إلى إيثريوم. يؤدي هذا إلى تسريع تدفق المستخدم بشكل كبير.

قم ببناء ملف figma الخاص بك باستخدام هذا الملف

بفضل العمل الجاد للبروتوكولات المتعددة، تحسن تصميم DEX كثيرًا. نحن نعلم ما هي المعلومات التي يحتاجها المستخدم، وكيف ينبغي لنا أن نعرضها، وكيفية جعل التدفق سلسًا قدر الإمكان. نأمل أن توفر هذه المقالة نظرة عامة قوية حول مبادئ تجربة المستخدم.

إذا كنت تريد التجربة، فلا تتردد في استخدام مجموعة فيجما Wireframe. يتم الحفاظ عليه بسيطًا قدر الإمكان، ولكن لديه قدرًا كافيًا من المرونة لبناء الهيكل الأساسي بطرق مختلفة.

مجموعة إطارات فيجما السلكية (opens in a new tab)

سيستمر دي فاي في التطور، وهناك دائمًا مجال للتحسين.

حظ سعيد!