بطاقات مقابل. القوائم ، كيف تؤثر على UX
تتمثل أكثر الطرق شيوعًا لتنظيم محتوى موقع الويب في هذه الأيام في استخدام البطاقات والقوائم. لكل منها إيجابياتها وسلبياتها. في حين أن القوائم كانت موجودة منذ الأيام الأولى للويب ، إلا أن التصميم المستند إلى البطاقات أصبح مؤخرًا قوة لا يستهان بها ويصبح اختيارًا شائعًا لتنظيم المحتوى.
البطاقات والقوائم هي طرق فريدة لعرض المحتوى ، مما يعني أنها أفضل وأسوأ ، على التوالي ، لحالات معينة. إن مفتاح مصممي الويب ، بالطبع ، هو الفهم عندما يوفر استخدام كل واحد منهم تجربة مستخدم أفضل. قد تفاجئك الإجابات فقط وتتسبب في النظر إلى مبادئ التصميم بطريقة مختلفة قليلاً.
هنا ، نستكشف عندما يكون مناسبًا في تصميم الويب لاستخدام البطاقات مقابل القوائم والعكس.
ما هي البطاقة؟ ما هي القائمة؟
لمساعدتنا على فهم عند استخدام بطاقة أو قائمة أكثر ملاءمة لأغراض UX ، يساعدنا ذلك بشكل كبير على فهم ما هو كل منها وما يفعله كل منها (أو من المفترض القيام به).
البطاقة عبارة عن حاوية تعرض أجزاء مختلفة من المعلومات ذات الصلة ، والتي يمكن للمستخدمين الحصول منها على مزيد من المعلومات. على الرغم من أنه لا يزال نتاج تصميم مسطح ، إلا أنه يصنف بشكل أفضل على أنه Flat Design 2.0 لأنه عادة ما يكون له تأثيرات 3D خفيفة مثل الظلال المسقطة للإشارة إلى قابلية النقر. تعمل التأثيرات ثلاثية الأبعاد مثل هذا العمق البصري كمُعرِّف للمستخدمين ، لإخبارهم أنه يمكنهم النقر للحصول على مزيد من المعلومات.
ومن المثير للاهتمام أن هناك شيئًا من الانقسام مع البطاقة نظرًا لأنها تشبه عادةً بطاقة لعب فعلية من حيث الشكل والحجم. هذا موحٍ لأسلوب تخطي القدم القديم ، حيث تشبه العناصر الرسومية العناصر الفعلية.
القائمة هي صفحة حيث تأخذها معايير بحث المستخدم أو عادات التصفح. تحتوي صفحة بطاقة البيانات بشكل أساسي على عدد من العناصر أو الإدخالات المرشحة المختلفة. لذلك ، يجب أن تسهل القائمة مسح العين بسرعة وكفاءة للحصول على تجربة UX المناسبة. هذا تمييز مهم يساعدنا على التفريق عندما تكون القائمة أكثر ملاءمة من البطاقة ، من حيث سهولة الاستخدام.
متى تستخدم البطاقات
الآن بعد أن عرفنا الاختلافات الرئيسية بين البطاقات والقوائم ، أصبح من السهل علينا أن نعرف بكل ثقة عند استخدام كل منهما بشكل مناسب في تصميم الويب.
لتصفح المعلومات (على عكس البحث)
تجعل البطاقات من الصعب أو المستحيل على المستخدمين تمييز مدى أهمية المحتوى. على سبيل المثال ، لا تقدم البطاقات معلومات واضحة عن الترتيب الذي يجب أن يتم عرض المحتوى عليه في صفحة ما لأن مخطط / حدود البطاقات كلها تبدو متشابهة. من المؤكد أن البحث الأساسي عن تتبع العين يقترح دائمًا أن المستخدمين يبدأون أولاً بالمحتوى في أعلى الصفحة ويسارها ، ولكن القوائم تجعل من السهل على المستخدمين اتباع الطريقة الأساسية لاستيعاب المحتوى عبر الإنترنت.
وهذا هو السبب في أن استخدام البطاقات لتصفح مجموعات ضخمة - مثل تلك الموجودة على موقع Pinterest ، على سبيل المثال - مثالي. عندما تتصفح فقط نتائج البحث على موقع Pinterest ، بدلاً من تحديد ترتيب عرضه ، فإن التمرير اللانهائي للنتائج المستندة إلى البطاقة يجعل التصفح جذابًا وممتعًا وسهلاً. عندما ترى شيئًا مثيرًا للاهتمام ، يمكنك النقر على البطاقة فورًا لمزيد من المعلومات. إنها إشباع فوري
لتجمعات من عناصر متنوعة
استنادًا إلى التطبيق أو البرنامج الذي تستخدمه ، ستواجه في النهاية جهازًا يحتوي على لوحة تحكم تستخدم تصميمًا يستند إلى البطاقة لتسهيل التمييز بين أنواع مختلفة من المحتوى. هذا مثال على قوة البطاقات للسماح للمستخدمين بسرعة بتحديد الأنواع المختلفة للمحتوى الذي يديرونه.
نظرًا لأن البطاقات تستخدم الحدود لإنشاء حدود مرئية ، فهي مثالية عندما يتعلق الأمر بتجميع العناصر المتباينة.
متى تستخدم القوائم
يمكن أن تكون القوائم أكثر وضوحًا من البطاقات ، ربما لأنها كانت أطول في تصميم الويب. ونتيجة لذلك ، يكون من السهل تحديد متى يتم استخدامها بشكل جيد.
لمسح العين بكفاءة
يتم تفضيل القوائم عندما يحتاج المستخدمون إلى البحث بسرعة عن شيء يريدون على الموقع ، كما هو الحال عندما يطلعون على صفحة نتائج البحث بعد إدخال مصطلحات البحث الخاصة بهم. قوائم عمودية وحيث يجلس عنصر واحد على صف واحد فوق المساعدة التالية لتركيز عيون المستخدم بشكل أفضل بكثير من البطاقات ، حيث يتم إصلاح القوائم بينما لا تجلس البطاقات في مواضع ثابتة في صفوف.
للشاشات الصغيرة
ببساطة ، البطاقات تأخذ المزيد من العقارات على الشاشة. وهذا يجعل استخدامها على الأجهزة المحمولة وبعض الأجهزة اللوحية مشكلة لأنها تجبر المستخدمين على التمرير لأسفل على الصفحة لمعرفة المزيد من الخيارات في وقت أقرب من وقت استخدام القوائم. بما أن عناصر القائمة موجودة فقط في صفوف قصيرة على طول الصفحة ، يمكن للمستخدمين رؤية المزيد من الخيارات دون الاضطرار إلى الاعتماد على الذاكرة قصيرة المدى (والتي سيتعين على أولئك الذين ينظرون إلى التصميم المستند إلى البطاقة عند بدء التمرير لأسفل إلى انظر المزيد من العناصر).
بمجرد أن يطالب التصميم الخاص بك أن يتذكر المستخدمون الخيارات على الشاشة ، سيبدأون في مواجهتها التحميل المعرفي ، والذي يؤذي UX. يعني الحمل المعرفي أن على دماغك بذل جهد أكبر لتذكر شيء ما في حين أنه لا يزال يعالج معلومات إضافية جديدة. وهذا بدوره يؤدي إلى إبطاء سرعة المهام ، والتخلي الكامل عن مهمة المستخدم.
على تطبيق متجر تطبيقات الهاتف الذكي الخاص بي ، يتم تنظيم فئات التطبيقات في قائمة مرتبة ورأسية تعرض ثمانية عناصر في صفحة واحدة ، دون أن أقلق بشأن الحاجة إلى التمرير لأسفل لرؤية المزيد وتذكر الخيارات السابقة. إذا تم تنفيذ ذلك في تخطيط باستخدام البطاقات الأكبر حجمًا ، فقد تمكنت من رؤية بعض الخيارات على الأكثر ، مما أعاق UX.
البطاقات مقابل القوائم
البطاقات هي ببساطة نظام تنظيمي لعرض أجزاء من المعلومات ذات الصلة المرتبطة بمعلومات إضافية أعمق في التنقل في الموقع. فهي رائعة في السماح للمستخدمين بتصفح الكثير من المعلومات وتجميع العناصر.
القوائم هي الصفحات التي تعرض نتائج البحث والإدخالات التي هي عناصر مرشحة متطابقة مع استعلام البحث. إنها مثالية لتنظيم محتوى مشابه في محاذاة رأسية.
تذكر هذا التمييز الحيوي بين الاثنين ، وستقوم بتنظيم المحتوى ببراعة بتصميم رائع.