---

مقدمة في المشكلة

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

لماذا هذا مهم

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

تفاصيل المشكلة

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

ماذا جربنا أولاً

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

النهج الفني

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

.pricing-table {
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 20px;
}
.pricing-header {
  font-weight: bold;
  font-size: 1.5rem;
}

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

التغييرات في المنتج

بعد تنفيذ التصميم الجديد، لاحظنا تغييرات كبيرة. بدأ المستخدمون في التفاعل بشكل أكبر مع الخطط، وتناقص عدد الاستفسارات حول المعلومات. سمحت قابلية القراءة المحسّنة والواجهة البديهية للمستخدمين باتخاذ قرارات أسرع، مما كان له تأثير إيجابي على معدلات التحويل. نحن واثقون من أن الخطط المحسنة ستؤثر أيضاً على الصفحات /jobs و /for-candidates، حيث أن الوضوح في الأسعار يمكن أن يعزز الثقة في منتجنا.

ما تعلمناه

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

ماذا يعني هذا للمرشحين

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

ماذا يعني هذا للمجندين

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

الخطوات التالية

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