9 نصائح لتصميم المعلومات لجعلك مصمم أفضل لمواقع الانترنت

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

1 - كن منهجيا

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

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

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

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

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

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

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

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

2 - التفكير في الصندوق

يمكن إعادة ترتيب المواقع التي تحتوي على قدر معقول من التعقيد وإعادة تنظيم العديد من الطرق المختلفة. أحد الموقع التي عملت على تنظيمها وإعادة تنظيمها مرات لا حصر لها هو FlashDen. لقد نسيت عدد المرات التي نظرت فيها إلى تلك القائمة وأعدت ترتيبها. في بعض الحالات، نقوم فقط بنقل الصفحات إلى مجموعات ومجموعات مختلفة بحيث تبدو أكثر منطقية، وفي حالات أخرى قمنا بتقديم المزيد من التفكير الجاهز.

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

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

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

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

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

إذا كان لدى أحد ما موقع ضخم، يجب أن يكون ذو جمال معماري. كيف تنظم كل هذه المعلومات؟

3 - حافظ على هيكلك متوازن

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

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

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

على NETTUTS قررنا تسهيل عادات المستخدم مع وضع زر العرض التوضيحي والمصدر.

4 - تصميم للمسح والقشط والقفز

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

لا تقم بتقييد المعلومات الأساسية في حزم النص - قم بتمييزها. لا تعطي المستخدمين فقرات في النهاية – قم بتقسيمها مع عناوين، عناوين فرعية، نقاط، رسوم بيانية، كل ما يتطلبه الأمر! فكّر في كيفية استخدام المستخدم لموقعك وتصميمه لتسهيل استخدامه.

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

يعتبر PatternTap مكانًا جيدًا للحصول على الأفكار ومعرفة كيفية تصميم الأشخاص الآخرين للمقالات والمعلومات النصية

5 - نص التصميم الذي تريد أن يقرأ

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

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

مثال بسيط لتوجيه المستخدمين من خلال موقع - دليل الخطوة ثيمفورست 4

6 - قم بتوجيه المستخدم عبر الصفحات وخلال الصفحات

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

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

ستيف كروج في كتابه المجدي جدا!

7 - لا تعقد الأشياء

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

• وظائف
• فرص توظيف
• وظائف -راما

أحدها واضح، وأحدها واضح بشكل معقول، واحدها جيد لمن يعرف.

يمكن تقديم المعلومات على أنها أكثر من مجرد نص!

8 - تصور المعلومات

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

تحتوي DoshDosh على مقالة مثيرة للاهتمام حول التصور المعلوماتي، والرسوم البيانية، وما يسميه المؤلف الرسومات المعلوماتية التي تستحق التحقق منها حتى لو كان ذلك فقط لرؤية أمثلة رسومية رائعة.

أصبح تحليل المسارات والأهداف أسهل من أي وقت مضى بفضل أدوات مثل Analytics

9 - تحليل تصميم المعلومات الخاص بك

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

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

ميزة أخرى في Analytics يمكنك استخدامها هي تتبع عبارات البحث التي تتيح لك معرفة ما يبحث عنه المستخدمون في حقل البحث الخاص بموقعك. معرفة ما الذي يبحث عنه الناس يخبرك ما هي المعلومات التي تحتاج إليها لتكون متاحة بسهولة أكبر!