‫عنوان المحاضرة‬

‫معمارية المعلومات وتصفح الويب‬

‫‪Information Architecture and‬‬
‫‪Web Navigation‬‬
‫المحاضرة السادسة‬
‫د‪ .‬خالد عبدالسالم عياد‬

‫‪1‬‬
‫معمارية المعلومات وتصفح الويب‬ ‫‪‬‬

‫الفرق بين ‪ GUI‬و واجهات الويب‬ ‫‪‬‬

‫معمارية المعلومات‬ ‫‪‬‬

‫خرائط التنظيم‬ ‫‪‬‬

‫أنواع المخططات‬ ‫‪‬‬

‫‪ ‬مخططات التنظيم المحددة‬
‫‪ ‬مخططات التوزيع الغامضة‬

‫‪2‬‬
‫أصبحت واجهات الويب مهمة جدا نظرا ألن مواقع الويب‬
‫أصبحت جزء أساسي من الحياة اليومية‪ .‬مبادئ نظرية‬
‫تفاعل اإلنسان مع الحاسوب التي تستخدم في تصميم‬
‫الواجهات تم تطويرها في سياق واجهات المستخدم‬
‫الرسومية ‪ GUI‬ويمكن أيضا تطبيقها في تصميم واجهات‬
‫الويب‪ .‬ولكن هناك عدة عوامل تخص واجهات الويب‪.‬‬

‫‪3‬‬
 ‫الويب اقل أمنا و أقل خصوصية‪،‬‬ ‫‪‬‬

‫الويب مستقل عن نظام التشغيل‪،‬‬ ‫‪‬‬

‫الويب له محتوى ديناميكي أكثر‪،‬‬ ‫‪‬‬

‫الويب له مستخدمين أكثر‪،‬‬ ‫‪‬‬

‫يتوقع من المستخدمين تعلم ‪ GUI‬ولكن يتوقع منهم فقط‬ ‫‪‬‬

‫استخدام الويب‪،‬‬
‫مواقع الويب لها نقاط دخول أكثر‪.‬‬ ‫‪‬‬

‫‪4‬‬
‫تم إنشاء الويب لتقديم طريقة للوصول إلى البيانات وما يزال‬
‫هذا الهدف الرئيسي لعدد كبير من المواقع‪ .‬باإلضافة إلى هذا‬
‫ظهرت تطبيقات لمواقع أكثر تفاعلية ومن أمثلتها مواقع‬
‫التسوق‪ .‬مواقع كثيرة تعتمد على المعلومات وعلى التفاعل‪.‬‬
‫على سبيل المثال موقع أمازون يحتوي على معلومات عن‬
‫المنتجات التي يبيعها ويتطلب تفاعل ليسمح للمستخدم شراء‬
‫أي منتح‪ .‬وبالتالي يجب أن تستفيد المواقع الناجحة من‬
‫تصميم التفاعل و من معمارية المعلومات‪ .‬ترتبط معمارية‬
‫المعلومات بالتصفح‪ .‬نظم التصفح تقدم طريقة للمستخدم‬
‫ليجد محتوى الموقع الذي تم تصميمه عن طريق مهندس‬
‫المعلومات‪.‬‬
‫‪5‬‬
‫تهتم معمارية المعلومات بإنشاء مخططات تنظيمية‬ ‫‪‬‬
‫وتصفحية لتسمح للمستخدم بالحركة خالل محتوى الموقع‪.‬‬
‫معمارية الموقع تحتوي عادة على تنظيم وإنشاء هيكل‬
‫للمحتوى‪.‬‬

‫‪6‬‬
‫كثير من األفعال التي نقوم بها يوميا يمكن اعتبارها مخططات‬
‫تنظيمية مثل استخدام دليل الهاتف‪ ،‬فهارس الكتب أو حتى‬
‫الذهاب لألسواق الممتازة‪ .‬بعض المخططات سهلة التعلم‬
‫واالستعمال مثل دليل الهاتف وأخرى صعبة مثل البحث عن‬
‫شيء معين في سوق ممتاز نرتاده ألول مرة‪ .‬السبب هو أن‬
‫دليل الهاتف يستخدم مخطط "محدد" ‪exact‬حيث كل‬
‫عنصر له مكان معروف ومحدد‪ .‬في المقابل السوق الممتاز‬
‫يستخدم مخطط "غامض" ‪ambiguous‬تختلف فيه طرق‬
‫العرض من مكان آلخر و ال تخضع ألي قاعدة‪.‬‬
‫‪7‬‬
‫هناك عدة أنواع من المخططات المحددة وتصنف إما‬ ‫‪‬‬
‫أبجديا‪ ،‬زمنيا أو جغرافيا‪.‬‬
‫المخططات األبجدية ‪:Alphabetical Schemes‬‬ ‫‪‬‬
‫تستخدم لقائمة أسماء أو فهرس محتوى الموقع‪.‬‬
‫المخططات الزمنية ‪: Chronological Schemes‬‬ ‫‪‬‬
‫تستخدم عادة في األخبار بحيث يكون الخبر األحدث أوال‬
‫كما في الشكل التالي‪.‬‬

‫‪8‬‬
9
‫المخططات الجغرافية ‪: Geographical Schemes‬‬
‫تستخدم عادة عن طريق الشركات التي لها مواقع في دول أو‬
‫مناطق مختلفة لتقدم محتوى محدد للزبائن بناء على محل‬
‫تواجدهم‪.‬‬

‫‪10‬‬
 ‫تنقسم إلى عدة أقسام بناء على ‪:‬‬
‫‪ ‬الموضوع ‪ : Topic‬تستخدم أغلب المواقع طريقة للوصول‬
‫إلى المعلومة عن طريق الموضوع‪ .‬مثل التنظيم حسب‬
‫الحدث في موقع إخباري‪ ،‬حسب القسم أو المادة في موقع‬
‫كلية أو حسب نوع المنتج في موقع تسوق‪.‬‬
‫‪ ‬المهمة ‪ : Task‬يتم تنظيم المحتوى في مجموعة عمليات‪،‬‬
‫وظائف أو مهام‪ .‬توجد هذه المخططات عادة في مواقع‬
‫التجارة االلكترونية التفاعلية ‪ e-commerce‬كما في‬
‫الصورة التالية لموقع ‪.ebay.com‬‬

‫‪11‬‬
‫• المتفرج ‪ : audience‬يقسم الموقع إلى مواقع أصغر يخصص‬
‫كل واحد منها لنوع من المستخدمين بحيث يعرض كل موقع‬
‫فرعي خيارات تهم هذا الفرع‪.‬‬
‫• االستعارة ‪ : metaphor‬تستخدم االستعارة لتسهيل التصفح في‬
‫الموقع ومن االستعارات المستخدمة بكثرة في السابق خرائط‬
‫الموقع ‪ sitemaps‬وقد قل استخدامها اآلن إلى حد ما‪.‬‬
‫• المهجن ‪ : hybrid‬تقترح خرائط التنظيم نموذج عقلي مبسط‬
‫يستطيع المستخدمين فهمه بسرعة‪.‬‬

‫بإمكان المستخدم التعرف على التنظيم الموجه للمتفرج‪ ،‬المهمة أو‬

‫حسب الموضوع ولكن عندما يتم دمج عناصر من مخططات مختلفة‬
‫قد يحدث إرباك‪ .‬مثال الحظ األصناف الموجودة في مكتبة وحدد نوع‬
‫التنظيم لكل عنصر ‪:‬‬
‫‪12‬‬
13
‫ولكن في بعض الحاالت من الممكن استخدام مخططات‬
‫تنظيم مختلفة وعرضها كلها في صفحة واحدة‪ .‬يكون هذا‬
‫ناجح إذا كانت المخططات معروضة بشكل منفصل في‬
‫الصفحة‪ .‬الشكل التالي لموقع ‪ Dell‬يوضح ‪ :‬المتفرجين‬
‫(المستخدمين‪ ،‬مستخدمي النشاطات الصغرى‪ ،‬مستخدمي‬
‫القطاع العام‪ ... ،‬الخ) والتنظيم الجغرافي (حسب الدولة)‪.‬‬
‫نسخ سابقة لنفس الموقع كان فيها تنظيمات أخرى (المنتجات‬
‫المختلفة ‪ :‬خادم‪ ،‬محمول‪ ،‬شخصي‪)... ،‬‬

‫‪14‬‬
15
 ‫مواقع الويب أصبحت جزء أساسي من الحياة اليومية‪.‬‬ ‫‪‬‬

‫مبادئ نظرية تفاعل اإلنسان مع الحاسوب التي تستخدم في تصميم‬ ‫‪‬‬

‫الواجهات تم تطويرها في سياق واجهات المستخدم الرسومية ‪GUI‬‬
‫ويمكن أيضا تطبيقها في تصميم واجهات الويب‪.‬‬
‫تم إنشاء الويب لتقديم طريقة للوصول إلى البيانات وما يزال هذا الهدف‬ ‫‪‬‬
‫الرئيسي لعدد كبير من المواقع‪.‬‬
‫ظهرت تطبيقات لمواقع أكثر تفاعلية ومن أمثلتها مواقع التسوق‪.‬‬ ‫‪‬‬

‫مواقع كثيرة تعتمد على المعلومات وعلى التفاعل( موقع أمازون)‬ ‫‪‬‬

‫يجب أن تستفيد المواقع الناجحة من تصميم التفاعل و من معمارية‬ ‫‪‬‬

‫المعلومات‪.‬‬
‫ترتبط معمارية المعلومات بالتصفح‪ .‬نظم التصفح تقدم طريقة للمستخدم‬ ‫‪‬‬
‫ليجد محتوى الموقع الذي تم تصميمه عن طريق مهندس المعلومات‪.‬‬
‫‪16‬‬
 ‫اشرح معنى معمارية المعلومات وتصفح الويب ؟‬ ‫‪.1‬‬
‫ما الفرق بين ‪ GUI‬و واجهات الويب ؟‬ ‫‪.2‬‬
‫ما فائدة معمارية المعلومات ؟‬ ‫‪.3‬‬
‫تكلم عن خرائط التنظيم مع دعم اجابتك بامثلة؟‬ ‫‪.4‬‬
‫ما الفرق بين مخططات التوزيع المحددة و مخططات‬ ‫‪.5‬‬
‫التوزيع الغامضة ؟‬

‫‪17‬‬