x

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

ما هي أفضل الممارسات لتصميم عربات التسوق Designing Shopping Carts ؟

نظري

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

هناك آلاف مواقع التجارة الإلكترونية على الإنترنت، و"عربة التسوق" (shopping cart) جزء أساسي من تجربة التجارة الإلكترونية. التصميم الجيد يجعل تجربة عربة التسوق أكثر متعة ويزيد المبيعات. التصميم السيء قد يؤدي إلى ترك العربات وخسارة المبيعات.

إبقاء عربة التسوق (Shopping Cart) ظاهرة (Visible)

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

معاينة:


index.html


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

<div class="shopping-cart">
 <button id="cart-btn" aria-label="Shopping cart">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="feather feather-shopping-cart"
    viewBox="0 0 24 24"
    aria-hidden="true"
    focusable="false"
  >
    <circle cx="9" cy="21" r="1"></circle>
    <circle cx="20" cy="21" r="1"></circle>
    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
  </svg>
  <span id="item-count">2</span>
 </button>
</div>

styles.css


.shopping-cart {
position: fixed;
top: 20px;
left: 20px;
font-family: sans-serif;
}

#cart-btn {
background: none;
border: none;
cursor: default;
position: relative;
display: flex;
align-items: center;
padding: 4px;
color: #333;
font-size: 24px;
}

#item-count {
background: red;
color: white;
border-radius: 50%;
padding: 2px 6px;
font-size: 13px;
position: absolute;
top: -6px;
left: -6px;
min-width: 18px;
height: 18px;
line-height: 14px;
text-align: center;
font-weight: 700;
user-select: none;
box-sizing: border-box;
}

#cart-details {
background: white;
border: 1px solid #ccc;
max-height: 300px;
overflow-y: auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-top: 10px;
padding: 10px;
position: relative;
z-index: 1000;
}

#cart-items {
list-style: none;
padding: 0;
margin: 0;
}

#cart-items li {
padding: 5px 0;
border-bottom: 1px solid #eee;
}

إدارة كمية العناصر (Item Quantity) وإزالتها (Removal)

اعتبار آخر هو توفير طريقة واضحة للمستخدمين لتحديث كمية العناصر في عربتهم (update the quantity of items in their cart). يمكن تحقيق ذلك بتوفير حقل إدخال للكمية (quantity input field) بجانب كل عنصر في العربة. يمكن للمستخدمين تحديث كمية العنصر بسهولة بتغيير الرقم في حقل الإدخال (the input field).

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

معاينة:


index.html


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

<div class="shopping-cart">
 <h2>عربة التسوق الخاصة بك</h2>
 <ul class="cart-items">
  <li class="cart-item">
    <span class="item-name">تيشيرت</span>
    <input type="number" min="1" value="2" class="quantity-input" aria-label="Quantity for T-Shirt" />
    <button class="remove-btn">إزالة</button>
  </li>
  <li class="cart-item">
    <span class="item-name">قبعة</span>
    <input type="number" min="1" value="1" class="quantity-input" aria-label="Quantity for Hat" />
    <button class="remove-btn">إزالة</button>
  </li>
 </ul>
</div>

styles.css


.shopping-cart {
max-width: 400px;
margin: 20px auto;
font-family: sans-serif;
border: 1px solid #ccc;
padding: 15px;
background: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 6px;
}

.shopping-cart h2 {
margin-top: 0;
font-weight: 600;
font-size: 1.4rem;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}

.cart-items {
list-style: none;
padding: 0;
margin: 0;
}

.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}

.item-name {
flex: 1;
font-size: 1rem;
}

.quantity-input {
width: 50px;
padding: 4px 6px;
font-size: 1rem;
margin: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
}

.remove-btn {
background: #e74c3c;
border: none;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
}

.remove-btn:hover,
.remove-btn:focus {
background: #c0392b;
outline: none;
}

اختيار أيقونة عربة تسوق معروفة (Recognizable Cart Icon)

اعتبار آخر هو أيقونة عربة التسوق (shopping cart icon) نفسها. يجب أن تكون الأيقونة سهلة التعرف عليها لجميع المستخدمين. الأيقونة الشائعة هي عربة تسوق بمقبض (handle) وعجلات (wheels). قد تكون الأيقونات الأخرى حقيبة تسوق (shopping bag) أو سلة (basket). لكن لا تختار أيقونة مجردة جدًا (too abstract) أو يصعب فهمها.

عرض إجمالي العربة (Cart Total)

عندما يريد المستخدم مراجعة المجموع في عربته، يجب أن يتمكن من العثور بسهولة على التكلفة الإجمالية (the total) لكل العناصر في العربة. يجب عرض ذلك بشكل بارز (displayed prominently) في الصفحة، حتى لا يضطر المستخدمون للبحث عنه.

معاينة:


index.html


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

<div class="shopping-cart">
  <button id="cart-btn" aria-label="Shopping cart">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="28"
      height="28"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="feather feather-shopping-cart"
      viewBox="0 0 24 24"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="9" cy="21" r="1"></circle>
      <circle cx="20" cy="21" r="1"></circle>
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
    </svg>
    <span id="item-count">3</span>
  </button>
  <div id="cart-details">
    <ul id="cart-items">
      <li>قميص (2x) - $40.00</li>
      <li>قبعة (1x) - $15.00</li>
    </ul>
    <div id="cart-total">
      المجموع: <strong>55.00$</strong>
    </div>
  </div>
</div>

styles.css


.shopping-cart {
position: fixed;
top: 20px;
right: 20px;
font-family: sans-serif;
width: 280px;
background: white;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 6px;
}

#cart-btn {
background: none;
border: none;
cursor: default;
position: relative;
display: flex;
align-items: center;
padding: 4px;
color: #333;
font-size: 28px;
}

#item-count {
background: red;
color: white;
border-radius: 50%;
padding: 2px 7px;
font-size: 14px;
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
line-height: 14px;
text-align: center;
font-weight: 700;
user-select: none;
box-sizing: border-box;
}

#cart-details {
margin-top: 10px;
}

#cart-items {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
font-size: 1rem;
}

#cart-items li {
padding: 5px 0;
border-bottom: 1px solid #eee;
}

#cart-total {
font-size: 1.2rem;
font-weight: 700;
text-align: left;
color: #111;
}

إضافة زر دعوة لاتخاذ إجراء لإتمام الشراء (Checkout Call-to-Action)

أخيرًا، يجب توفير زر دعوة لاتخاذ إجراء واضح (clear call-to-action button) للمستخدمين للمتابعة إلى الدفع (checkout). يجب أن يكون هذا الزر بارزًا في الصفحة، حتى لا يضطر المستخدمون للبحث عنه.

لا تريد وجود الكثير من الأزرار في الصفحة، لأن ذلك قد يسبب ارتباكًا. يجب أن يكون زر الدعوة لاتخاذ إجراء (call-to-action button) هو الزر الأكثر بروزًا في الصفحة، حتى يعرف المستخدمون بالضبط ما يجب فعله بعد ذلك. يجب استخدام اللون الأساسي للعلامة التجارية للزر (brand's primary color for the button)، ليبرز عن بقية الصفحة.

معاينة:


index.html


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

<div class="shopping-cart">
  <button id="cart-btn" aria-label="Shopping cart">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="28"
      height="28"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="feather feather-shopping-cart"
      viewBox="0 0 24 24"
      aria-hidden="true"
      focusable="false"
    >
      <circle cx="9" cy="21" r="1"></circle>
      <circle cx="20" cy="21" r="1"></circle>
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
    </svg>
    <span id="item-count">3</span>
  </button>
  <div id="cart-details">
    <ul id="cart-items">
      <li>قميص (2x) - $40.00</li>
      <li>قبعة (1x) - $15.00</li>
    </ul>
    <div id="cart-total">
      المجموع: <strong>55.00$</strong>
    </div>
    <button id="checkout-btn">الشروع في الدفع</button>
  </div>
</div>

styles.css


:root {
--primary-color: #007bff;
}

.shopping-cart {
position: fixed;
top: 20px;
right: 20px;
font-family: sans-serif;
width: 280px;
background: white;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 6px;
}

#cart-btn {
background: none;
border: none;
cursor: default;
position: relative;
display: flex;
align-items: center;
padding: 4px;
color: #333;
font-size: 28px;
}

#item-count {
background: red;
color: white;
border-radius: 50%;
padding: 2px 7px;
font-size: 14px;
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
line-height: 14px;
text-align: center;
font-weight: 700;
user-select: none;
box-sizing: border-box;
}

#cart-details {
margin-top: 10px;
}

#cart-items {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
font-size: 1rem;
}

#cart-items li {
padding: 5px 0;
border-bottom: 1px solid #eee;
}

#cart-total {
font-size: 1.2rem;
font-weight: 700;
text-align: left;
color: #111;
margin-bottom: 15px;
}

#checkout-btn {
width: 100%;
background-color: var(--primary-color);
color: white;
border: none;
padding: 12px 0;
font-size: 1.1rem;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#checkout-btn:hover,
#checkout-btn:focus {
background-color: #0056b3;
outline: none;
}

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

أسئلة :

ما هو الجانب الحاسم في تصميم عربة التسوق الذي يمكن أن يؤثر على تجربة التسوق والمبيعات؟

1. لون أيقونة عربة التسوق. ❌

2. موقع عربة التسوق في الصفحة. ✅

3. عدد العناصر في العربة. ❌

4. علامة موقع التجارة الإلكترونية. ❌


كيف يجب أن يتمكن المستخدمون من تحديث كمية العناصر في عربتهم؟

1. عن طريق الاتصال بخدمة العملاء. ❌

2. باستخدام قائمة منسدلة. ❌

3. عن طريق إدخال رقم جديد في حقل إدخال الكمية. ✅

4. بإضافة عنصر جديد بالكمية المطلوبة. ❌


ما هي الميزة المهمة التي يجب تضمينها في عربة التسوق لمساعدة المستخدمين على إتمام عملية الشراء؟

1. خيار "حفظ للوقت لاحق". ❌

2. وجود عدة أزرار دعوة لاتخاذ إجراء. ❌

3. زر دفع واضح وبارز. ✅

4. خيار للدردشة مع ممثل مبيعات. ❌