x

التصميم المتمحور حول المستخدم User-Centered Design

ما هي أفضل الممارسات لتصميم البطاقات Cards ؟

نظري

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

تُعد "مكونات البطاقات" (Card components) عنصراً شائعاً للغاية في مواقع التجارة الإلكترونية وشبكات التواصل الاجتماعي والمواقع الإخبارية؛ إذ تُستخدم للمساعدة في عرض المعلومات بطريقة منظمة. وعند تصميم هذه البطاقات، من المهم استيعاب أفضل الممارسات لضمان تمكّن المستخدمين من فهم المعلومات التي تسعى لإيصالها بسهولة.

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

إليك مثال على تصميم بطاقة مزدحم (cluttered card design) :

index.html


<link rel="stylesheet" href="styles.css">

<div class="card">
 <img src="https://placehold.co/150x150" alt="صورة نموذجية للمنتج">
 <h2><strong><em>اسم المنتج: الإصدار النهائي</em></strong></h2>
 <p>
    إنه منتج رائع سينال إعجابك بالتأكيد! 
فهو يتمتع بالعديد من المزايا والفوائد التي ستجعل حياتك أسهل وأكثر متعة. 
وسواء كنت في المنزل أو تتنقل، فإن هذا المنتج مثالي لجميع الأوقات والمواقف. 
لا تفوّت هذا العرض المذهل؛ اشترِ الآن واختبر الفرق بنفسك!
 </p>
 <button>اشتري الآن</button>
 <button>إقرأ المزيد</button>
 <button>أضف إلى قائمة الرغبات</button>
 <p><strong>لم يتبقَّ سوى 3 قطع في المخزون!</strong></p>
 <p><em>حاصل على تقييم 4.8 نجوم من قِبَل 2,391 عميلاً</em></p>
</div>

styles.css


.card {
 border: 1px solid #ccc;
 padding: 16px;
 width: 300px;
}

.card img {
 max-width: 100%;
 height: auto;
}

.card h2 {
 font-size: 1.5em;
 margin: 8px 0;
}

.card p {
 font-size: 1em;
 margin: 8px 0;
}

.card button {
 background-color: #007BFF;
 color: white;
 padding: 10px 16px;
 border: none;
 cursor: pointer;
}

معاينة:

يُسهّل تقليل كمية المعلومات وتوفير مسافات مناسبة بين العناصر الموجودة على البطاقة على المستخدم استيعاب المعلومات، كما يتيح عرض بطاقات متعددة في الصفحة الواحدة.

إليك مثال على تصميم بطاقة بسيط (simple card design) :

index.html


<link rel="stylesheet" href="styles.css">

<div class="card">
 <img src="https://placehold.co/150x150" alt="صورة نموذجية للمنتج">
 <h2>اسم المنتج</h2>
 <button>اشتري الآن</button>
</div>

styles.css


.card {
 border: 1px solid #ccc;
 padding: 16px;
 width: 200px;
 text-align: center;
}

.card img {
 max-width: 100%;
 height: auto;
}

.card h2 {
 font-size: 1.5em;
 margin: 8px 0;
}

.card button {
 background-color: #007BFF;
 color: white;
 padding: 10px 16px;
 border: none;
 cursor: pointer;
}

معاينة:

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

index.html


<link rel="stylesheet" href="styles.css">

<div class="card">
 <a href="#">
  <img src="https://placehold.co/150x150" alt="صورة نموذجية للمنتج">
  <h2>اسم المنتج</h2>
  <button>اشتري الآن</button>
 </a>
</div>

styles.css


.card {
 border: 1px solid #ccc;
 padding: 16px;
 width: 300px;
 cursor: pointer;
}

.card:hover {
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card a {
 text-decoration: none;
 color: inherit;
}

.card img {
 max-width: 100%;
 height: auto;
}

.card h2 {
 font-size: 1.5em;
 margin: 8px 0;
}

.card button {
 background-color: #007BFF;
 color: white;
 padding: 10px 16px;
 border: none;
 cursor: pointer;
}

معاينة:

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

من الأمور الأخيرة التي ينبغي مراعاتها استخدام التدرج الهرمي للألوان (color hierarchy)؛ إذ يجب التأكد من أن المعلومات الأكثر أهمية على البطاقة هي الأكثر بروزاً. ويمكنك استخدام ألوان زاهية (bright colors) للعناصر المهمة - مثل زر "الدعوة لاتخاذ إجراء" (Call-to-Action) - وألوان فاتحة (light colors) للعناصر الأقل أهمية على البطاقة.

index.html


<link rel="stylesheet" href="styles.css">

<div class="card">
 <img src="https://placehold.co/150x150" alt="صورة نموذجية للمنتج">
 <h2>اسم المنتج</h2>
 <button>اشتري الآن</button>
</div>

styles.css


.card {
 border: 1px solid #ccc;
 padding: 16px;
 width: 300px;
 text-align: center;
}

.card img {
 max-width: 100%;
 height: auto;
}

.card h2 {
 font-size: 1.5em;
 margin: 8px 0;
}

.card button {
 background-color: #28a745;
 color: white;
 padding: 10px 16px;
 border: none;
 cursor: pointer;
}

معاينة:

أثناء مواصلتك العمل على تطبيقات الويب، ضع في اعتبارك أفضل الممارسات المختلفة لتصميم البطاقات؛ فهذا سيساعدك على توفير تجارب مستخدم (user experiences) أفضل للمستخدمين.

أسئلة :

لماذا يُعد تصميم البطاقة البسيط (simple card design) أمراً مهماً؟

1. تريد أن يحظى المستخدمون بتجربة استخدام جيدة وأن يستوعبوا المعلومات بسهولة. ✅

2. تريد أن يشعر المستخدمون بالارتباك. ❌

3. تريد أن يشعر المستخدمون بالإرهاق (أو الغرق في كثرة المعلومات). ❌

4. تريد أن يشعر المستخدمون بالإحباط. ❌


لماذا يُعد وجود تدرج لوني (color hierarchy) جيد في تصميم بطاقتك أمراً مهماً؟

1. لجعل فهم المعلومات أمراً صعباً على المستخدمين. ❌

2. لتحسين أداء الموقع. ❌

3. لإبراز أهم المعلومات الموجودة على البطاقة. ✅

4. لجعل البطاقة مزدحمة بصرياً. ❌


ما هي مزايا استخدام وسائط عالية الجودة (high quality media) في تصميم بطاقتك؟

1. لا توجد أي مزايا. ❌

2. سيغادر المستخدمون الموقع على الفور. ❌

3. سيؤدي ذلك إلى تسريع أداء الموقع. ❌

4. سيثق المستخدمون في جودة منتجاتك وخدماتك. ✅