توثيق خبرة المستخدم: خريطة الموقع وسير العمليات ومخطط النسق العام

كتبها · 21 January, 2010

تحدثنا هنا في مدونة “ديجيتال قطر” (Digital Qatar) كثيراً عن الأهداف التأسيسية التي تحدد جمهور موقعك الإلكتروني وتجعلك تفهم احتياجاته؛ وهي عناصر ستؤثر في استراتيجية الموقع، والآن أود أن أغير دفة الحوار وأركز قليلاً على التوثيق الذي سيساعدك على توصيل استراتيجيتك إلى المساهمين في العمل والمطورين الفنيين.

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

 خريطة الموقع:

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

 

عند عمل خريطة موقع، ضع النقاط الرئيسية التالية في الحسبان:

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

رسومات بيانية لسير العمليات (Task Flow Diagrams):

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

مخطط النسق العام (wireframes):

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

مخطط النسق العام التفصيلي (Annotating wireframes):

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

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

لمزيد من المعلومات حول هذا الموضوع يرجى زيارة الروابط التالية (إنجليزية) :

Where the Wireframes Are: Special Deliverable #3

Interactive Prototypes with PowerPoint

Wireframing with InDesign and Illustrator

 

Connect

التعليقات1 Comment

  1. Caio says:

    Ineclligente and simplicity – easy to understand how you think.

تعليقك