عندما تضطر الى عرض الكثير من المعلومات في احدى صفحات أو أقسام موقعك، ففي كثير من الأحيان لا يكون مناسباً عرضها جميعاً في جدول أو ما شابه (وهو ما يفعله الكثير من مصممّي ومطوّري المواقع)، ويكون حينها من الأفضل عرضها في سياق معيّن مما يجعل الصفحة تبدو ابسط و “أخف” مع انها فعلياً تعرض نفس المعلومات.

على سبيل المثال، في الصورة التالية (التي قمت بتصميمها لاستخدمها كمثال توضيحي فقط)، يتم عرض معلومات المتعلّقة بسيارة معروضة للبيع:

طريقة عرض معلومات السيارة قبل التعديل

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

لنرى الآن كيف ستبدو نفس المعلومات عندما نعرضها في سياق معيّن يوصلها للزائر بشكل أبسط وأسرع:

طريقة عرض معلومات السيارة بعد التعديل

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

1. نقلت اسم الشركة ونوع السيارة وموديلها الى الأعلى وجعلتها تبدو كعنوان، فهذه المعلومات تصف محتوى الصفحة ويجب وضعها بشكل بارز.
2. وضعت الحالة والمدينة والسعر والضمان في جملة واحده مختصره تجعل الموقع وكأنه يخاطب القاريء (سأفصّل هذه النقطه في موضوع سأكتبه قريباَ).
3. لاحظ كيف استخدمت الالوان لتمييز “الحالة”، وقد قمت بذلك لسببين: أ) حقل “الحالة” هو حقل يحتوي على قيمة من نوع ثنائي فالسيارة اما “متوفرة” أو “غير متوفرة”. ب) “الحالة” مهمة هنا لان اذا كانت السيارة غير متوفّرة فيجب على القاريء (أو المشتري هنا) معرفة ذلك بسرعة قبل اضاعة وقته في قراءة باقي التفاصيل، وبالتالي يفضّل وضعها بلون تجعلها تبرز أكثر. ويمكننا في حال عدم توفّر السيارة هنا أن نخفي باقي المعلومات المرتبطة بذلك لتعرض المعلومات كالتالي:
   

   طريقة عرض معلومات السيارة بعد البيع

4. وضعت “اللون” تحت الصورة مباشرة حيث ان القاريء بطبيعة الأمر سينظر الى الصورة لمعرفة لون السيارة، ووضع اللون تحت الصورة هو فقط وسيله مساعدة في حال لم يكن اللون واضحاً في الصورة.

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

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