لوحة المتصدرين

أضحى إنشاء مواقع ذات تصميمات عالية الجودة أمرًا يسيرًا هذه الأيام للمصممين وغير المصممين على السواء، بسبب انتشار أنظمة إدارة المحتوى التي لا تتطلب خبرة كبيرة لاستخدامها، وكذلك انتشار قوالب التصميم الجاهزة. لكن هناك فرق كبير بين تصميم جميل في مظهره لكنه لا يخدم الهدف الوظيفي المطلوب منه، وآخر يقوم بوظيفته بكفاءة، لهذا نحتاج في مجال التصميم إلى الإلمام بتصميم تجربة المستخدم، فذلك الفرع من التصميم يقدّم منظورًا أكثر صرامة وعمقًا لتصميم الويب كما نعرفه، فهو يفرض على المصمم كثيرًا من البحث والتخطيط والاختبار كي يضمن أن المنتج سواء كان موقعًا أو غيره يقدم تجربة استخدام مهيأة للمستخدم الأخير. وإليك الآن في هذا المقال ثلاثين مصطلحًا لتجربة المستخدم أرى ألا غنى عنها لأي مصمم ويب، سواء كان يعمل في المجال بالفعل أو لا زال يخطو خطواته الأولى. 1. اختبار أ/ب (A/B Test) هو تجربة عدة نسخ مختلفة من الموقع في نفس الوقت لتحديد الاختلافات في سلوك المستخدم وتفضيلاته في كل مرة. 2. تخطيط المتشابهات (Affinity Diagramming) هو أحد طرق تنظيم البيانات، وتوضع فيه الأفكار داخل مجموعات لإيجاد علاقات وروابط بينهم، ويُستخدم هذا الأسلوب في مجال تجربة المستخدم من أجل تخطيط واجهات المواقع أو محتواها. 3. التحليل (Analysis) هذه هي المرحلة التي يدرس فيها أعضاء الفريق كل البيانات التي جمعوها، ثم يستخدمون النتائج التي يخرجون بها في تحديد أي منظور أفضل من حيث تجربة الاستخدام. 4. الإطلاق التجريبي (Beta Launch) هو الإطلاق الأولي للموقع، ويعطي فرصة للمصممين وغيرهم كي يروا الموقع ويتفاعلوا معه بشكل حي ومباشر، وكذلك فإنه فرصة لاكتشاف المشاكل في التصميم قبل الإطلاق الرسمي. 5. تصنيف البطاقات (Card Sorting) يشير هذا المسمّى إلى تصنيف البطاقات -الحقيقية أو الرقمية- التي تُستخدَم لتجميع بيانات عن أجزاء الموقع المختلفة (مثل المحتوى، وروابط مسارات التنقل "Breadcrumb link Trails") وتنفّذ بأسلوب منظَّم للغاية من أجل تسهيل التخطيط اللاحق للموقع. 6. نظرية الألوان (Color Theory) ترجع الفكرة وراء هذه النقطة إلى أن الألوان لها تأثير على سلوك المستخدم، لهذا تُعرف أحيانًا باسم علم نفس الألوان. 7. تحليل المنافسين (Competitor Analysis) هو دراسة مواقع المنافسين للوقوف على مواطن القوة والضعف فيها، وتساعد نتائج تلك الدراسة المصممين على تشكيل خطة مبنية على ما أثبت نجاحه مع الشريحة المستهدفة من الموقع، لكن ذلك لا يمنع أن يكون الموقع متميزًا عن غيره. 8. التحليل الموازن (Comparative Analysis) هذه النقطة شبيهة بسابقتها في أنها دراسة للمواقع المنافسة بهدف معرفة نقاط القوة والضعف، إلا أنها تركز أكثر على مقارنة عناصر أو أجزاء داخل المواقع، وليس المواقع ككل. 9. مراجعة المحتوى (Content Audit) يُفهرَس كل المحتوى الحالي أثناء مرحلة المراجعة والتقييم الأولية، ويُقيَّم من حيث قابليته المستمرة للنشر. 10. خطة المحتوى (Content Strategy) هي أي شكل من أشكال التخطيط التي تحدد كيفية كتابة وهيكلة محتوىً ما داخل موقع ويب، وتعد خطوتي تخطيط المتشابهات وتصنيف البطاقات أجزاءً من هذه العملية. 11. الاستعلام السياقي (Contextual Enquiry) هو التفاعل مع المستخدم في الوقت الفعلي الذي يستخدم فيه الموقع، وهذا يساعد مصممي تجربة المستخدم في إدراك شعور المستخدمين أثناء تفاعلهم مع عناصر بعينها في الموقع. 12. دراسة اليوميّة (Diary Study) هذه الدراسة شبيهة بالاستعلام السياقي الذي ذكرناه بالأعلى، إلا أنها تُنفَّذ على مدى طويل، ودون ملاحظات فورية، بل يسجّل المستخدمون تجاربهم ثم يشاركونها في موعد لاحق. 13. تخطيط التجربة (Experience Architecture) تخطيط التجربة –أو الخريطة- هو طريق محدد بوضوح داخل الموقع يجب أن يسلكه المستخدم ليبلغ هدفًا ما (التحويل إلى عميل مثلًا). 14. المراجعة الإرشادية (Heuristic Review) هي جزء من مرحلة التقييم والمراجعة، ويُقيَّم الموقع فيها لاكتشاف مشاكل قابلية الاستخدام التي ستُعرض للمناقشة في مرحلة تالية. 15. التصميم التفاعلي (Interactive Design) هو شكل من أشكال تصميم الويب، يركز على إنشاء صلة قيّمة بين الزائر والموقع. 16. التصميم التكراري (Iterative Design) بدلًا من التصميم العادي الذي له نقطة بداية ونهاية، فإن التصميم التكراري له طبيعة حلَقيّة، تُكرَّر فيها عملية المراجعة والتخطيط وإخراج النموذج الأولي "prototyping" والتطبيق "implementation" ومرحلة ضمان الجودة "Quality Assurance"، إلى أن تتحقق النتيجة النهائية. 17. لوحة المزاج العام (Mood Board) تساعد لوحة المزاج العام مصممي تجربة المستخدم على تحديد أسلوب معين للموقع عبر صورة من الصور والألوان والنصوص وعناصر الدعاية الأخرى. وعلى عكس أساليب جمع البيانات ومعالجة التصميمات، فإن هذه الطريقة أقرب لملصقات وصور حرة منها إلى مخططات منظمة. 18. الشخصيات (Personas) هذا مصطلح تسويقي عام، يراد به إنشاء هويات واضحة للجمهور المستهدف، وترجع أهميته في تجربة المستخدم إلى أن توقع رغبات وسلوك المستخدم هو ما يؤثر في كيفية إنشاء الموقع بالدرجة الأولى. 19. الكشف التصاعدي (Progressive Disclosure) هو فرع من التصميم التفاعلي، ويُقصد به تبسيط تجربة المستخدم لأقصى حد، بأن تُعطى المعلومات للمستخدم في جرعات صغيرة ببطء بدلًا من عرض البيانات كلها مرة واحدة. 20. النموذج الأولي (Prototype) النموذج الأولي هو رسم تخطيطي عام للموقع، ولا يحتوي النموذج الأولي ذو المستوى المنخفض –low level prototype- عادة إلا على الهيكل الأساسي مما سيبدو عليه الموقع، أما النماذج عالية المستوى فتحتوي تفاصيل أكثر، لكنها لا ترقى بحال من الأحوال إلى نموذج كامل بالحجم الطبيعي للموقع –full website mockup-. 21. البحث النوعي (Qualitative Research) يستخدم مصممو تجربة الاستخدام عدة أساليب في مرحلة جمع المعلومات، من المقابلات مع المستخدمين إلى الاستعلامات السياقية ودراسة اليوميّات وغيرها، والهدف من هذا هو فهم كيفية تفاعل المستخدمين مع الموقع، وبالتالي يركزون على جودة هذا التفاعل. 22. البحث الكَمّي (Quantitative Research) إذا اعتبرنا أن البحث عملة من وجهين فإن البحث الكَمّي هو وجهها الآخر، فبدلًا من التركيز على جودة تجربة المستخدم لموقع ما، فإن البيانات هي ما يهم هنا، وتُعدّ اختبارات ا/ب وتحليل المنافسين من الأمثلة على البحث الكمّي. 23. السيناريو (Scenario) يمثّل السيناريو قصة يتخيلها المصمم للمستخدمين، وتبدأ عادة بنظرة افتراضية على حياة الجمهور المستهدف، ثم يأتي السيناريو ليرسم كيف يحل الموقع مشكلة يواجهها المستخدمون في الحياة اليومية. 24. التصور الرسومي (Storyboard) قد يكون التصور الرسومي أو القصصي في تجربة المستخدم رسومات بصرية لسيناريو –إذ تترجم Storyboard إلى "القصة المصورة"- أو حتى تخطيطات سريعة وعامة للهيئة التي يتصورها المصمم للموقع. 25. عناصر واجهة الاستخدام (UI Elements) هي الأجزاء التي يتحكم المستخدم بتجربته من خلالها، مثل الأزرار وأشرطة التنقل وأسهم التمرير وأي شيء آخر قد يتفاعل معه من أجل التنقل داخل الموقع. 26. سهولة الاستخدام (Usability) هي مقدار سهولة التفاعل مع الموقع والتنقل فيه. 27. التصميم المرتكز حول المستخدم (User-centered Design) هو الهدف الرئيسي لتصميم تجربة المستخدم، أن تُصمم موقعًا يتمحور حول تحسين تجربة المستخدم. 28. رحلة المستخدم (User Journey) رحلة المستخدم هي الطريق الذي ينشئه مصمم تجربة الاستخدام لزوار الموقع من نقطة الدخول إلى التحول إلى عملاء، وقد يشار إليه باسم تدفق تجربة الاستخدام "UX Flow". 29. بحث المستخدم (User Research) هو مصطلح آخر لكل المهام التحليلية التي يجب تنفيذها من أجل فهم الجمهور بشكل أفضل، ويُعد البحث النوعي والكمي من الأمثلة على هذه النقطة. 30. اختبار المستخدم (User Test) الفرق الجوهري بين اختبار المستخدم والاستعلام السياقي هو أن المستخدمين هنا يُراقَبون بشكل مباشر وشخصي بينما يتفاعلون مع الموقع. 31. عناصر تجربة المستخدم (UX Assets) هي الأدوات التي تُستخدم مرة بعد أخرى لبناء تصميم لموقع ما، مثل النماذج الأولية والإطارات السلكية ولوحات الجو العام، والنماذج الحقيقية –mockups- وغيرها. 32. الإطارات السلكية (Wire Frames) تأتي خطوة الإطارات السلكية قبل وضع النموذج الأولي، وهدفها هو إنشاء وتصميم الهيكل الأساسي للموقع. ترجمة –بتصرف- لمقال Thirty Common UX Terms Every Web Designer Should Know لصاحبته Brenda Stokes Barron

عندما نكتب برنامجًا طويلًا جدًا، فإن الشيفرة ستوزَّع في عددٍ من الملفات والأصناف (classes) والدوال (functions)؛ الدوال هي مجموعة من التعليمات التي تنجز مُهمِّة معيّنة وهدفها ألا تكرر الشيفرات التي تكتبها؛ فمثلًا في نظام للاستيثاق، يكون هنالك دوال لتسجيل الدخول (login) والتسجيل (register) وتسجيل الخروج (logout). أبسط أشكال الدوال إن الشكل العام لأبسط دالة هو: <?php function function_name() { // الشيفرة } ?> وكما في المتغيرات، تستطيع إسناد أي اسم إلى الدالة (أعطينا الدالة في المثال السابق الاسم function_name). تُكتَب الشيفرة التي ستنفذها الدالة عندما يتم استدعاؤها بين أقواس معقوفة ({})؛ نستطيع استدعاء الدالة عبر كتابة اسمها ويليه أقواس عادية () كما في المثال الآتي: <?php // يمكنك أن تستدعي الدالة هنا قبل تعريفها // تعريف دالة ذات الاسم say_hello function say_hello() { // كل ما تفعله هذه الدالة هو طباعة hello echo "hello"; } // استدعاء الدالة say_hello(); ?> الدوال ذات الوسائط يمكننا تمرير المعلومات الإضافية (مثل اسم المستخدم وكلمة المرور) إلى الدوال باستخدام الوسائط (arguments)، وعلينا تعريف المعاملات (parameters). ملاحظة: الوسائط هي البيانات التي نمررها إلى الدالة عندما نستدعيها، أما المعاملات فهي المتغيرات التي نُعرِّفها عندما نكتب الشيفرة الخاصة بالدالة. يمكننا أن نعتبر أن المعاملات هي حاويات والوسائط هي البيانات التي نضعها في تلك الحاويات. <?php // دالة تسجيل الدخول ذات وسيطين function login($user, $pass) { // تطبع هذه الدالة اسم المستخدم وكلمة المرور echo "hello, username is $user and password is $pass"; } // استدعاء الدالة login("user1","UsEr!p@$$W0rD"); // استدعاء الدالة مرةً أخرى login("user2","simplepassword"); ?> المعاملات ذوات القيم الافتراضية يمكننا أن نعطي قيمًا افتراضية للمعاملات لكي يمكن تجاوز تحديد قيمتها عند استدعاء الدالة. <?php // دالة تسجيل الدخول ذات ثلاثة وسائط function login($user, $pass, $active = "not active") { // تعرِض هذه الدالة اسم المستخدم وكلمة مروره وحالته echo "hello, username is $user and password is $pass and user is $active"; } // استدعاء الدالة login('user1','UsEr!p@$$W0rD'); // استدعاء الدالة مرةً أخرى login('user2','simplepassword', 'active'); ?> ملاحظة: إن أردت ألّا تُحدِّد قيمةً لوسيطٍ ما عند استدعاء الدالة، فيجب أن يكون المعامل الموافق لذاك الوسيط في آخر القائمة كما في المثال السابق. ويملك المعامل افتراضيًا القيمة "null". الدوال ذات المعاملات متغيرة العدد يمكن أن تملك الدوال عددًا متغيرًا من المعاملات؛ وفي الواقع، تستطيع تمرير إي عدد من الوسائط إلى دالة؛ استعمل الدوال المُضمَّنة في PHP الآتية للوصول إلى تلك الوسائط: الدالة func_get_args()‎: تُعيد مصفوفة بجميع الوسائط المُمرَّرة الدالة func_num_args()‎: تُعيد العدد الإجمالي للوسائط المُمرَّرة. الدالة func_get_arg(argument_number)‎: تُعيد المتغير ذو الرقم argument_number سنظهِر -في المثال الآتي- مجموع الأرقام المُمرَّرة إلى الدالة كوسائط بالإضافة إلى عرضها. <?php function sum() { // سنستعمل func_get_args() للحصول على كل المعاملات على شكل مصفوفة $ary = func_get_args(); print_r($ary); echo "<br>"; $sum = 0; // سنستعمل func_num_args للحصول على العدد الكلي للمعاملات for($i = 0; $i < func_num_args(); $i++) { // سنستعمل func_get_arg(index) للحصول على قيمة معامل معيّن echo func_get_arg($i).'<br>'; $sum+= func_get_arg($i); } echo "sum is $sum <br><br>"; } sum(1,2,3,4); sum(23,2343,54,2,1,6); ?> ناتج تنفيذ السكربت السابق هو: Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 ) 1 2 3 4 sum is 10 Array ( [0] => 23 [1] => 2343 [2] => 54 [3] => 2 [4] => 1 [5] => 6 ) 23 2343 54 2 1 6 sum is 2429 إعادة القيم من الدوال لاحظ أننا في المثال السابق طبعنا السلسلة النصية مباشرةً، لكن ماذا لو أردنا أن نجعل الدالة تُعيد قيمةً ما؟ نستعمل العبارة البرمجية return لإعادة قيمة من الدالة، وتُسبِّب هذه العبارة بإنهاء تنفيذ الدالة مباشرةً وإعادة القيمة إلى مكان استدعاء الدالة، لنرى مثالًا عن دالة تُعيد مربَّع العدد المُمرَّر إليها: <?php function square ($num) { return $num * $num; } // الناتج هو 16 echo square (4); ?> لاحظ أنك لا تستطيع إعادة أكثر من قيمة من الدالة، لكن يمكنك إعادة مصفوفة التي تؤدي نفس الدور تقريبًا. <?php function powers ($num) { return array ($num, $num * $num, $num * $num * $num); } // الناتج هو: Array ( [0] => 4 [1] => 16 [2] => 64 ) print_r(powers (4)); ?> مجالات تعريف الدوال تستطيع أن تستدعي الدوال المُعرَّفة في الأمثلة السابقة قبل مكان تعريفها، لأن مجالها (scope) هو المجال العام، يجدر بالذكر أنَّك تستطيع تعريف الدوال داخل جملة شرطية (if) لكن لا يمكنك استدعاؤها إن لم يتحقق الشرط كما في المثال الآتي: <?php $str = 'create the function'; global_function(); // لا يمكننا استدعاء الدالة not_global هاهنا، لأن المفسر لا يعتبرها موجودةً إن لم تتحقق الجملة الشرطية الآتية if ($str == 'create the function') { function not_global() { echo 'I don\'t exist until program execution reaches me'; } } // نستطيع الآن استدعاء الدالة not_global بعد اختبار أن السلسلة $str مساوية للقيمة اعلاه، لتجنب إظهار خطأ if ($str == 'create the function') not_global(); function global_function() { echo 'I exist immediately upon program start'; } ?> الأمر سيان لآلية تعريف دالة داخل دالة أخرى: <?php function global_function() { function not_global() { echo 'I don\'t exist until global_function() is called'; } } // لا يمكننا استدعاء not_global هنا، إذ علينا استدعاء global_function أولًا global_function(); // نستطيع الآن استدعاء الدالة not_global، لأن استدعاء global_function قد جعلها متاحةً للمفسر not_global(); ?> المتغيرات في الدوال مجال المتغيرات (variable scope) هو "المجال" الذي يبقى فيه المتغير مُعرَّفًا، أي بكلامٍ آخر، المتغيرات المُعرَّفة داخل الدوال لا يمكن الوصول إليها من خارج تلك الدوال؛ أما المتغيرات المُعرَّفة في المجال العام (global scope) يمكن الوصول إليها من أي جزء من البرنامج في المجال العام؛ ربما أربكك الشرح السابق لكن انظر إلى هذا المثال للتوضيح: <?php // المتغير $a في المجال العام $a = 1; function test() { echo $a; // لا يمكن الوصول إلى المتغير $a لأنه في المجال العام } // لن يظهر أي شيء ﻷن المتغير $a ليس ضمن مجال الدالة test(); // سيظهر الرقم 1، لأن المجال هو العام echo $a; ?> لن تظهر مخرجات عند استدعاء الدالة test()‎ لأن الدالة echo داخلها تُشير إلى نسخة محلية من المتغير ‎$a التي لم تُسنَد لها قيمة في ذاك المجال. يمكن الوصول إلى المتغيرات في المجال العام من داخل الدوال باستخدام الكلمة المحجوزة global كما يلي: <?php $a = 1; $b = 2; function sum (){ // أصبح بإمكاننا الوصول إلى المتغيرين في مجال الدالة الخاص، وتعديل قيمتهما مباشرةً global $a, $b; $b = $a + $b; } sum(); echo $b; ?> نوعٌ أخيرٌ هو المتغيرات الثابتة (static variables) التي يُسمَح بوجودها في مجال الدوال الخاص فقط، لكنها لا تفقد قيمتها عند انتهاء تنفيذ الدالة، انظر إلى المثال الآتي لتوضيح الأمور: <?php function test() { $a = 0; echo $a; $a++; } ?> الدالة السابقة عديمة الفائدة لأنها في كل مرة تُستدعى فيها ستضبط قيمة المتغير ‎$a إلى 0، ثم ستُظهِر قيمة ذاك المتغير (التي هي صفر)، وأخيرًا لن نستفيد من زيادة قيمة المتغير (‎$a++‎) لانتهاء تنفيذ الدالة ولن يعود المتغير ‎$a موجودًا. أما لو عرَّفنا المتغير ‎$a على أنه ثابت، فلن يفقد قيمته بعد انتهاء تنفيذ الدالة: <?php function test() { static $a = 0; echo $a; $a++; } ?> ستتم تهيئة المتغير ‎$a في أول مرة تُستدعى فيها الدالة، وستُطبَع قيمة المتغير وستزداد قيمته في كل مرة تستدعى فيها الدالة مرةً أخرى. <?php function test() { static $a = 0; echo $a; $a++; } //الناتج 0 test(); //الناتج 1 test(); //الناتج 2 test(); ?> ملاحظة: يجب إسناد قيم بسيطة إلى المتغيرات الثابتة عند تعريفها، إذ لا يجوز استعمال التعابير الرياضية أو إسناد القيم المُعادة من الدوال إليها. المعاملات المرجعية رأينا كيف أنَّ جميع الدوال السابقة تعيد قيمة ما بناءً على العمليات التي تُجرى فيها، لكنها لا تستطيع تعديل قيم الوسائط المُمرَّرة إليها، لكن "التمرير بالمرجعية" (pass by reference) يسمح للدوال بتعديل قيم الوسائط مباشرةً، لنأخذ مثالًا بسيطًا يوضِّح هذا الأمر: <?php function test(&$var) { $var++; // لاحظ عدم استعمال عبارة return هنا } $a = 5; test($a); echo $a; // الناتج هو 6 ?> الاختلاف الوحيد الذي يجعل الوسائط تُمرَّر بمرجعيتها هو وضع محرف «&» قبل اسم الوسيط عند تعريف الدالة. الدوال المجهولة الدوال المجهولة (anonymous functions) التي تُعرَف أيضًا بالمصطلح "closures" تسمح بإنشاء دالة ليس لها اسم محدد، وإنما تُسند مباشرةً إلى متغير مَثَلُها كَمَثَلِ أيّةِ عملية إسنادٍ أخرى، وتنتهي عملية الإسناد أيضًا بفاصلة منقوطة؛ هذا مثالٌ عنها: <?php $square = function ($num) { echo $num * $num; }; $square(2); // الناتج 4 $square(15); // الناتج 225 ?> نستطيع أن نُمرِّر إلى الدوال المجهولة أي متغير موجود في مجال المتغيرات الأعلى منها وذلك باستخدام الكلمة المحجوزة use، تأمّل في المثال الآتي وفي تعليقاته: <?php $message = 'hello'; // لم نستعمل الكلمة المفتاحية use هنا $example = function () { echo $message; }; $example(); // لن تَظهَر أيّة قيمة (أو بالتحديد، سيظهر خطأ Notice ﻷن المتغير غير مُعرَّف) // تمرير المتغير $message $example = function () use ($message) { echo $message; }; $example(); // الناتج: hello // القيمة المُمرّرة تؤخذ قبل تعريف الدالة، وليس قبل استدعائها $message = 'world'; $example(); // الناتج: hello // إعادة قيمة المتغير إلى قيمته الأصلية $message = 'hello'; // الوراثة بالمرجعية (inherit by-reference) $example = function () use (&$message) { echo $message; }; $example(); // الناتج: hello // إذا تغيرت قيمة المتغير الآن، فستتأثر الدالة المجهولة بها $message = 'world'; $example(); // الناتج: world // استعمال الوسائط العادية $example = function ($arg) use ($message) { echo $arg . ' ' . $message; }; $example("hello"); // الناتج: hello world ?> تمرين اكتب دالةً تقبل وسيطين أولهما هو طول المستطيل والآخر هو عرض المستطيل، وستعيد هذه الدالة أربع قيم تُمثِّل إحداثيات نقاط التقاء أضلاعه على فرض أنَّ مركزه يقع على مبدأ الإحداثيات. المصادر مقال Functions in php لصاحبه Harish Kumar. مقالتي Functions و Closures لصاحبهما Dayle Rees. صفحات Functions و Anonymous functions و User-defined functions في دليل php وغيرها.