البحث في الموقع

سنتعرف هنا في هذا المقال على كيفية إنشاء عدة نماذج Forms في برنامج سكريبوس. نماذج PDF صُمِّمت نماذج PDF لتُمكّن للمستخدم الذي يعرضها عبر الإنترنت أو محليًا على الحاسوب، من إضافة بيانات إلى هذا النموذج بعد أن يطبعها المستخدم أو يرسلها عبر البريد الإلكتروني. مكونات نموذج PDF يمكنك إضافة أي شيء تريده إلى ملف PDF مثل النصوص والصور والأشكال، وأي شيء يقدمه برنامج سكريبوس Scribus. وإذا أردت إنشاء نموذج PDF، فيجب أن تتعلم أيضًا كيفية استخدام أدوات PDF الخاصة، إذ توجد هذه الأدوات في شريط أدوات PDF من اليسار إلى اليمين كما يلي: زر ضغط PDF-Button: يُستخدَم الزر لبدء بعض الإجراءات، وسننشئ زرّين في مثالنا أحدهما لطباعة النموذج والآخر لإرساله ليكون بمثابة بريد إلكتروني، ويمكننا تحسين الزر بواجهة نسميها "أيقونة icon". قد يستخدم الزر الواحد ما يصل إلى ثلاثة أيقونات مختلفة، والتي تمكّننا من إظهار تأثير الضغط على الزر وتغيير الأيقونة التي تظهر عندما تتحرك الفأرة فوق الزر. حقل نص Text Field: يُعَد حقل النص مثل إطار نص، ولكن مع إمكانية استخدام الأعداد التي تُمثَّل مثل تاريخ أو التي تحتوي على عدد معين من الأعداد العشرية أو التي تظهر في صورة نسبة مئوية. مربع اختيار Check Box: مربع صغير يُظهِر العلامة [×] عند النقر عليه. سنستخدم في مثالنا هذا المربع للإشارة إلى أن المتقدّم للدورة هو ذكر أو أنثى. مربع تحرير وسرد Combo Box: مربع التحرير والسرد هو قائمة منسدلة فيها خيارات موضوعة ضمن نموذج مطوي، حيث يفتح المستخدم القائمة لتحديد الخيار. مربع قائمة List Box: يُستخدم مربع القائمة أيضًا لتقديم خيارات، ولكن تكون في هذه الحالة بعض العناصر من القائمة على الأقل مرئيةً دائمًا. يمكن للمستخدم التمرير في القائمة، ولكن لا يُعَد فتحها أولًا أمرًا ضروريًا. حاشية نص Text Annotation: هي حقل نص يحتوي ملاحظات تكون غير مرئية في نموذج pdf، حيث يمكنك استخدام الحاشية لإضافة نص إلى النموذج فقط، ولكن يمكنك أيضًا إضافة روابط إلى مواقع في مكان آخر في المستند أو إلى مواقع إلكترونية على الإنترنت. حاشية رابط Link Annotation: يُستخدم للروابط إلى مواقع في المستند، حيث يمكن في هذه الحالة استخدام الإحداثيات الدقيقة بواحدة النقطة Point، وذلك وفقًا لأنظمة القياس المستخدَمة في برنامج سكريبوس Scribus. يمكن أيضًا استخدام روابط لمواقع إلكترونية خارجية. كيفية البدء في إنشاء نموذج PDF يجب مراعاة الميزات التالية عند تصميم نموذج PDF: التخطيط Layout: حاول تصميم نموذجك مسبقًا، حيث يمكنك إضافة إطارات نص وجداول وصور وأشكال، أو أي شيء يمكن أن يقدمه برنامج سكريبوس. ستُستخدَم هذه العناصر لتمثيل النمط الأساسي الذي تستخدمه شركتك أو مؤسستك، وسيكون إظهار المعلومات المتوقَّعة من المستخدم ضمن النموذج أمرًا ضروريًا. حقول PDF: يجب استخدام الحقول المتاحة التي يقدمها سكريبوس، والتي لها أنواع متعددة. الإعداد Set up: يجب عليك التعرف على التعديلات المتعددة الممكنة على الحقول، ويمكنك إعداد الحقول في نوافذ متعددة. عمليات التحقّق Validations: يمكن ضبط حدود للمدخلات التي تُدخَل في الحقل، إذ يمكنك تقييد إدخال عدد بحدود معينة على سبيل المثال، وهذا ما سنطبّقه في مثالنا. العمليات الحسابية Calculations: يمكنك إعداد عملية حسابية معينة للحقل، حيث تكون الاحتمالات هي جمع محتويات حقلين أو أكثر أو ضربها وما إلى ذلك، كما يمكن أيضًا حساب القيمة العليا أو الدنيا، أو حساب متوسط القيم لعدد كبير من الحقول، ويمكن أيضًا إجراء حسابات أخرى أكثر تعقيدًا ولكنها تتطلب برمجة لذلك. البرمجة Programming: إذا أردت أن يكون نموذجك ذكيًا، فيجب تعلّم البرمجة باستخدام لغة JavaScript، وهي لغة برمجة لا تُستخدَم في نماذج PDF فقط، ولكن على مواقع الويب أيضًا. إن لم تتعرّف على البرمجة سابقًا، فتوقع أن تستغرق بضعة أشهر لتصبح ماهرًا فيها إلى حد ما. ستقدّم لك الفقرة التالية بعض التلميحات والنصائح عن مكان العثور على مزيد من المعلومات حول لغة JavaScript. لغة JavaScript Java: هي لغة برمجة سوّقت لها شركة Sun Microsystems في عام 1995، حيث أمضى المطورون المسؤولونن جيمس جوسلينج James Gosling ومايك شيريدان Mike Sheridan وباتريك نوتون Patrick Naughton، حوالي أربع سنوات لتطوير هذه اللغة. تقول القصة أن هؤلاء المطورين شربوا كثيرًا من القهوة، وهو شيء لا بد أن تفعله عندما تبدأ في البرمجة، حيث جاءت العلامة التجارية للقهوة التي شربوها من جزيرة Java، ومن هنا جاء اسم هذه اللغة وأيقونتها التي تعرض فنجان قهوة مُصمَّم. أخذت لغة JavaScript الاصطلاحات وتعريفات التسمية المتعددة من لغة Java ولكن لديها إعداد مختلف حتى الآن، وقد استُخدِمت هذه اللغة في الأصل من جانب العميل في المتصفحات، فإذا تصفحت الإنترنت وألقيت نظرةً خاطفةً على صفحة يقدمها لك الخادم، فأنت العميل. لقد طوَّر هذه اللغة براندون فينش Brendan Finch في عام 1995، والذي عمل في شركة نتسكيب Netscape التي صمَّمت متصفحًا مشهورًا نافس إنترنت إكسبلورر Internet Explorer منافسةً شديدةً لفترة طويلة. لغة JavaScript لبرامج Acrobat: وضعت شركة البرمجيات أدوبي Adobe معيار PDF، حيث يُحتمَل أن تجد برنامج Acrobat Reader على حاسوبك الخاص، لأنه قارئ لمستندات PDF، ويُستخدَم على نظاق واسع. تبذل هذه الشركة جهودًا كبيرة لشرح استخدام لغة JavaScript، لأنها الخيار الأفضل في نماذج PDF. برنامج سكريبوس ولغة Javascript: يصعُب إلى حد ما معرفة مدى "فهم" سكريبوس لمقدار تعلّق لغة JavaScript بالنماذج. نموذج PDF يُظهِر الشكل الآتي النموذج الذي سنبنيه خطوةً بخطوة كما يظهر في سكريبوس، وتُعَد الدوائر الحمراء مجرد علامات للإشارة إلى عناصر النموذج التالية: حقول النص Text fields. مربعات الاختيار Check Boxes. مربعات التحرير والسرد Combo Box. حقل الحاشية النصية Annotation field. الأزرار Buttons. كل شيء آخر -مثل الترويسة والخطوط- هي كائنات سكريبوس عادية. هناك أيضًا بعض الإطارات النصية البسيطة مثل الإطارات التي تحتوي على M وF، والتكلفة باليورو Cost (euro)‎، وعدد المتقدمين Nr attending، وكذا التكلفة الإجمالية باليورو Totals (euro)‎، وهي ببساطة تسميات لعناصر النموذج المجاورة لها. يوضّح الشكل التالي النموذج كما يظهر في برنامج Adobe Reader باستثناء الأزرار، إذ يُظهِر اللون الأزرق الفاتح المناطق التي يمكن إدخال بعض المدخلات فيها ضمن النموذج. تُعَد الكلمة Name مدخلةً افتراضيةً تشير أيضًا إلى نوع الدخل، لذلك يمكنك حذفها وإدخال اسمك لملء هذا النموذج. يجب أن تدرك أنه لا يمكن اختبار النموذج أثناء تصميمه ضمن سكريبوس، أي لا تعمل جميع عناصر النموذج في سكريبوس، لذلك يجب عليك اتخاذ الخطوات التالية في كل مرة تنفّذ فيها خطوةً في عملية التصميم وتريد التحقق منها: احفظ النموذج في سكريبوس مثل ملف sla. صدّر النموذج بتنسيق PDF. ابحث عن ملف PDF الناتج وافتحه باستخدام برنامج Adobe Reader. اختبر النموذج. إذا وجدت أي أخطاء أو أردت متابعة التصميم، فيجب أن تغلق Adobe Reader وتعود إلى بيئة سكريبوس. أجرِ التغييرات التي تريدها أو وسّع النموذج. احفظه مرةً أخرى في سكريبوس، وصدّر ملف PDF جديد واستبدل إصدار PDF السابق به. قد يبدو هذا أمرًا بديهيًا، ولكن في بعض الأحيان يمكن نسيانه، وهو ما يؤدي إلى إنشاء إصدارات مختلفة متعددة، وبالتالي ترتبِك أثناء محاولتك لمعرفة النسخة النهائية "الحقيقية". كرّر هذه الخطوات كلما كان ذلك ضروريًا إلى أن يعمل النموذج تمامًا كما تخيلته. ستعتاد على عناصر النموذج المختلفة مع مرور الوقت، ولن تجد أن إعادة فحص ملف PDF بعد كل تغيير أمرًا ضروريًا. التخطيط Layout سننشئ نموذج تسجيل وهمي لنوع معين من التدريب لمدرسي اللغة الإنجليزية كلغة ثانية EFL باستخدام منهجية معينة، وهنا اتبع الآتي: جهّز مستندًا جديدًا بحجم A4 أو رسالة Letter. تحتاج بعض إطارات النص. نضع اسم المعهد في الأعلى، ثم نطبّق الألوان لاحقًا، إذ سنأخذ اللون من لون واجهة الزر. يمكن تصميم أيقونة الأزرار باستخدام برنامج رسم بسيط مثل الرسام (إن استخدمت نظام تشغيل ويندوز). سنستخدم في الزاوية اليسرى السفلية إطارين نصيين صغيرين يحويان إما ذكر M(ale)‎ أو أنثى F(emale)‎. توجد على اليمين ثلاثة إطارات نصية التي تحتوي Cost (euros)‎ وNr attending وTotals (euro)‎، ويكون ارتفاع الإطارات 5.5 مم تقريبًا، والخط Arial وحجمه 12 نقطة. سنخفّض النص في الإطارات قليلًا، مما يُعطي مظهرًا أفضل. انقر على قسم الأعمدة وتباعد النص Columns & text distances في تبويب نص Text من نافذة خصائص Properties، أو من نافذة خصائص النص في الإصدار 1.5.7 من برنامج سكريبوس، وطبّق تباعدًا 1 مم من الأعلى. سنضيف خطين سميكين هنا، وستظهر لنا النتائج حتى الآن مثلما في الشكل الآتي. لا تُعَد مواضع الأدلة Guides مهمة جدًا، حيث يمكنك تقدير مواضعها وسيفي ذلك بالغرض. لاحظ أن الهدف الرئيسي من الأدلة هو المساعدة في محاذاة الكائنات المختلفة، وإنشاء بعض التوازن ضمن التخطيط. إضافة عناصر نموذج PDF الخطوة التالية هي إضافة عناصر نموذج PDF والتي هي: سبعة حقول نصية ومربعي اختيار ومربع تحرير وسرد وزرّين، ولكل من هذه العناصر طريقته الخاصة: حقل النص Text field: يمكن للشخص الذي يستخدم النموذج ملء المعلومات في حقل نصي، ولكن سنضيف في مثالنا نصًا افتراضيًا يوضّح للمستخدم المعلومات المتوقعة. سترى في الشكل الآتي حقلين نصيين مكتملين على اليسار وحقلًا آخر يجب ملؤه بنص مناسب، حيث يمكنك كتابة النص مباشرةً في حقول النص، مثل الكتابة في إطارات النص النمطية، وبعد ذلك حدّد حقلًا نصيًا واستخدم محرّر القصص Story editor في سكريبوس لتحرير محتويات الإطار. مربعات الاختيار Check boxes: يوجد حقلان يمكن ملؤهما بعلامة، إذ نستخدم هذين الحقلين للدلالة على جنس المتقدّم. لا يمكن أن يكون المتقدّم ذكرًا وأنثى في الوقت نفسه، لذلك يجب أن يسمح النموذج بوضع علامة واحدة فقط في أحد مربعات الاختيار. سنتأكد من أن وضع علامة في أحد المربعات يزيل العلامة من المربع الآخر باستخدام البرمجة. قد تكون لدينا قائمة بالخيارات غير الحصرية التي يمكن للمستخدم الاختيار من بينها في بعض الحالات، وبما أنه سيكون هناك أكثر من خيار واحد، فلن نحتاج إلى هذه البرمجة التي تقيّد الاختيار. مربع التحرير والسرد Combo box: سنملأ مربع التحرير والسرد بعدد من خيارات التدريب، حيث سيملأ برنامج صغير هذا المربع مؤقتًاعندما ينقر المستخدم عليه، وستُملَأ التكلفة في أحد حقول النص بمجرد أن يختار المتقدّم التسجيل في تدريب معين، ويتطلب ذلك أيضًا قليلًا من البرمجة. ستُدخَل النتيجة فقط عندما ينقر المستخدم في حقل آخر، إذ سنجبر المستخدم على ذلك عن طريق ملء خانة عدد المتقدمين بالقيمة صفر، ولهذا يجب على المستخدم تغيير ذلك، وبالتالي سينفّذ البرنامج، ويمكنك تطبيق ذلك بطرق أخرى أيضًا. الأزرار Buttons: يمكن البدء بإجراء من خلال النقر على زر. الزر الأشهر الذي نستخدمه يوميًا هو زر موافق أو OK، إذ يسمح لنا برنامج سكريبوس أيضًا بإضافة مثل هذا الزر إلى النموذج. نجد خلف زر طباعة النموذج "Print From" جزء البرنامج الذي ينفّذ هذا الإجراء. لا يحتاج زر إرسال النموذج أيَّ شيفرة برمجية لأنه يمكن ضبط هذا الإجراء في نافذة ضمن برنامج سكريبوس. الأحداث Events يُعَد النقر على زر أو النقر في حقل نصي حدثًا إذا ملأت حقلًا نصيًا، أو إذا اخترت من مربع قائمة أو مربع تحرير وسرد ثم نقرت في حقل آخر، فهذا يسمى أيضًا. يتصل الحدث بحقل نصي أو زر أو أي عنصر تحكم آخر في نموذج PDF، ويوفّر كل حدث يمكن اكتشافه إمكانية إضافة جزء من شيفرة برمجية إليه. سنضيف في نموذجنا زرًا لطباعة النموذج عندما ينقر المستخدم عليه. وسنستخدم حدث mouse down (أي النقر على زر الفأرة الأيسر عند وضع مؤشرها على الزر) لبرمجة الجزء الذي سينفّذ هذه المهمة، بحيث إذا نقر المستخدم على الزر عشر مرات فرضًا، فسيُطبَع النموذج عشر مرات. تسمَّى طريقة البرمجة هذه بالبرمجة المُقادة بالأحداث، فجميع أنظمة التشغيل المتوفرة حاليًا للحواسيب مثل Apple OS X وOS / 2 وLinux وWindows وغيرها مبنية على هذا المبدأ، ولا بد أنك على دراية بهذه الطريقة، وستتعرّف الآن على الجانب الخلفي من هذه التقنية وتبرمجها بنفسك. ارسم حقل pdf نصي على يسار النموذج. اضبطه على النحو التالي: نوع الخط Arial وحجمه 12 نقطة، تباعد من الأعلى 1 مم، العرض تقريبًا 60 مم والارتفاع 5.5 مم. انسخ هذا الحقل ثلاث مرات (باستخدام Ctrl + C ثم Ctrl + V من لوحة المفاتيح في نظام Windows)، ثم ضَع هذه النسخ أسفل بعضها البعض بدقة. لاحظ أنه يمكنك أيضًا استخدام قائمة عنصر Item ثم مضاعفة/تحويل ثم نُسخ مطابقة Multiple Duplicate لإنشاء هذه النسخ، إما عن طريق نسخ سلسلة منها مع تباعد رأسي معين، أو إنشاء عدد من الصفوف مع التباعد الذي ضبطته. انقر على حقل النص الأول بزر الفأرة الأيمن واختر من القائمة المنبثقة تحرير نص Edit text باستخدام محرّر القصص. ثم يفتح محرر القصص، حيث يمكنك كتابة النص. حرّر النص وأغلق نافذة محرّر القصص، ثم سيظهر النص في حقل النص. كرّر هذا الإجراء لإضافة النصوص إلى الحقول الأربعة التالية: الاسم Name والعنوان Address والرمز البريدي Postal code والمدينة City. ارسم مربعي الاختيار بجوار إطارات النص التي تقرأ M وF على التوالي. نحتاج إلى عناصر تحكم pdf التالية على الجانب الأيمن من النموذج: مربع التحرير والسرد في الأعلى. ثلاثة حقول نصية تحت مربع التحرير والسرد وعلى يمين الإطارات النصية الثلاثة الموجودة سابقًا. ثم زرين أسفل هذه المجموعة. يوضّح الشكل التالي النموذج كما يجب أن يبدو عليه حتى الآن. لاحظ أن الإطار االمحدّد باللون الأحمر غير مذكور، ولكنه إطار حاشية نصية Text Annotation. وضع أيقونة Icon على الزر يمكن تحسين الأزرار باستخدام صورة صغيرة عليها، إذ نسمّي هذه الصورة أيقونة، أو يمكنك بدلًا من ذلك إضافة نص قصير إلى واجهة الزر فقط. تُعَد إضافة نص إلى زر في سكريبوس مثل إضافة نص إلى حقل نصي. سنرسم هذه الأيقونة في مثالنا كما يلي: استخدم برنامج رسم مثل برنامج الرسام الخاص بنظام Windows. حدّد حجم لوحة الرسم الذي يجب أن يتناسب مع حجم الزر. يجب أن يكون القياس 200‎ x 100 بكسل أكثر من كافٍ. وستجد الحجم في أيّ برنامج ضمن الخيار خصائص من قائمة ملف. سيسمح لك برنامج الرسم بإضافة نص، واستخدام خط مثل Wingdings أو Symbol لإضافة إشارات خاصة مثل لوحة مفاتيح الحاسوب والسهم والمغلّف. أضف بعض ألوان للخلفية وبعض الخطوط السميكة مع تظليل أغمق قليلًا، فهذا يعطي إحساسًا بتأثير الظل. احفظ رسم الأيقونة وانتقل إلى سكريبوس. إعداد الحقول المهمة التالية هي إعداد جميع الحقول من خلال نافذة خصائص الحقل Field Properties. لنبدأ بأحد الأزرار: انقر نقرًا مزدوجًا على الزر الموجود على اليمين، لتفتح نافذة خصائص الحقل. أسنِد اسمًا لهذا الحقل. إذا تخطيت ذلك فإن جميع عناصر التحكم في النموذج ستأخذ اسمًا عامًا يتكون من نوع الحقل ورقم، حيث لن يكون هذا الاسم واضحًا جدًا. لذلك انتقل إلى تبويب المظهر Appearance وأسند اسمًا يوضّح الغرض من الحقل. اختر الخيار لا طباعة No Print في قسم الوضوح Visibility. وإذا قرر المستخدم طباعة النموذج بعد ذلك، فلن تكون طباعة الأزرار أمرًا ضروريًا. حدّد التبويب خيارات Options واختر نوع الزر عادي Normal. ثم تفتح نافذة فتح Open، وستحدّد واجهة الزر (الرمز أو الأيقونة) التي جهّزتها للتو. ضع في بالك أنه يمكنك استخدام ما يصل إلى ثلاثة أيقونات: عادي Normal (المرئي في معظم الأحيان)، وPressed الذي ظهر عند النقر على الزر، وتدفق Roll over الذي يظهر عندما يحوم مؤشر الفأرة فوق الزر. وقد استخدمنا في مثالنا أيقونةً واحدةً فقط. انقر على تبويب إجراء Action وحدّد النوع Type سلّم النموذج Submit form. اكتب رابط url في خانة تسليم للرابط Submit to url. يوضّح الشكل التالي كيفية استخدام عنوان البريد الإلكتروني، حيث سيحاول برنامج Adobe Acrobat Reader فتح عميل البريد على حاسوب المستخدم. وإذا فشل في ذلك فستظهر نافذة مع بعض الخيارات. اكتمل إعداد الزر الآن. يمكن تحسين الزر الأيسر الذي يعالج طباعة النموذج باستخدام أيقونة بنفس الطريقة السابقة. لكننا استخدمنا محرر القصص لإضافة نص إلى الزر. إذا استخدمت لون خلفية للزر الذي يرسل نتائج النموذج عبر البريد الإلكتروني تمامًا كما فعلنا، فيمكنك استخدام أداة سكريبوس قطارة العين Pipet لإضافة هذا اللون إلى ألوان المستند واستخدامه لتحسين عنوان النموذج والخطين اللذين أضفناهما سابقًا. اصطلاحات التسمية Naming Conventions تمكّننا الأسماء المُسنَدة للحقول في "الجزء الخلفي" من النموذج من أداء مهام معينة من خلال أجزاء الشيفرة البرمجية، حيث يجب ألّا يكون جانب المستخدم (الجزء الأمامي) وجانب المبرمج (الجزء الخلفي) من النموذج متماثلين. تُعَد الأسماء العامة مرهقةً عمليًا، لأنها تُستخدم أيضًا لتقديم نتائج النموذج عند إرسالها عن طريق البريد الإلكتروني، ولذلك يُفضَّل أن تحصل على نتيجة كما يلي: table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اسم الحقل الدخل G. Bruijnes Name Langstraat 6 Address ‎1234 AA Postal code Stadje City ON Female وتكون النتيجة الأقل وضوحًا بأسماء عامة كما يلي: اسم الحقل الدخل G. Bruijnes Text22 Langstraat 6 Text37 ON Text42 يمكن أن تختلف لغة التسميات عن اللغة المستخدمة في النموذج، لأن النتائج قد يعالجها موظفون لا يتحدثون الإنجليزية، ولكن هذا ليس ضروريًا ويمكنك استخدام أي شيء تريده. يستخدم المبرمجون غالبًا نوعًا مختلفًا من التسميات يسمَّى الترميز المجري Hungarian Notation، حيث يُذكَر نوع الكائن في الاسم (نسمي الحقل كائنًا أو عنصر تحكم)، لذلك تكون اللغة الإنجليزية في هذه الحالة هي اللغة السائدة وتكون أسماء الحقول كما يلي: اسم الحقل chkFemale txtAcqAddress btnPrintForm توضّح البادئة chk أننا نتعامل مع مربع اختيار، وستشير txt إلى حقل نصي، وbtn إلى زر. إعداد الحقول الأخرى يمكنك إعداد الحقول بالنقر المزدوج عليها لتظهر نافذة خصائص الحقل. يوضح الجدول التالي جميع المعلومات الضرورية لأنواع الحقول الأخرى: عنصر التحكم التبويب في نافذة خصائص الحقل الإعداد Checkbox (M)‎ المظهر Appearance الاسم: M Checkbox (M)‎ خيارات Options الإعداد الافتراضي غير مُحدَّد Checkbox (F)‎ المظهر Appearance الاسم: F Checkbox (F)‎ خيارات Options الإعداد الافتراضي غير مُحدَّد (معظم المعلمين من الإناث) Combo box المظهر الاسم: Training الحقل الموجود بجوار التكلفة Cost المظهر الاسم: Cost الحقل الموجود بجوار التكلفة Cost نسّق Format الملف منسّق كـ: عدد Number، كسور عشرية: 0، استخدم رمز العملة Use Currency symbol: دون تحديد، التنسيق: 9,999.99 الحقل الموجود بجوار التكلفة Cost تحقّق Validate يجب أن تكون القيمة أكبر أو يساوي: 1 الحقل الموجود بجوار التكلفة Cost في محرّر القصص Story Editor: الدخل Input، والمحاذاة Alignment الدخل: 0، والمحاذاة: إلى اليمين الحقل الموجود بجوار التكلفة الإجمالية Totals المظهر الاسم: Totals الحقل الموجود بجوار التكلفة الإجمالية Totals نسّق Format الملف منسّق كـ: عدد Number، كسور عشرية: 0، استخدم رمز العملة Use Currency symbol: دون تحديد، التنسيق: 9,999.99 إذا أضفت حقل حاشية نصية النوع Type وصلة شبكية خارجية External weblink إذا أضفت حقل حاشية نصية الموقع Destination أي موقع إالكتروني www.yourwebsite.com مثلًا وبذلك يكتمل إعداد الحقول. إضافة البرمجة (أجزاء الشيفرة البرمجية) نستخدم لغة JavaScript لأتمتة أحداث معينة. ليست هناك حاجة لأن تكون لديك أي خبرة برمجية محددة لتتمكن من فهم أجزاء الشيفرة التي سنستخدمها. ;إذا أردت إنشاء المزيد من نماذج pdf بنفسك، فلن يكون هناك مفر، إذ يجب عليك تعلم لغة JavaScript. مربعات الاختيار check boxes معظم المدرسين من الإناث، ولذلك حدّدنا مربع الاختيار F افتراضيًا. انقر نقرًا مزدوجًا على مربع الاختيار M. حدد التبويب الإجراء Action في نافذة خصائص الحقل. اختر النوع Type: جافاسكربت JavaScript. اختر الحدث Event: الفأرة للأعلى Mouse up. انقر على زر تحرير Edit. انسخ جزء الشيفرة التالي: var v = this.getField("F"); v.value="Off"; يقع جزء الشيفرة في حدث الفأرة للأعلى Mouse up في مربع الاختيار M. إذا نقرت على مربع الاختيار M، فستوضَع علامة الاختيار في هذا المربع، وهذا يعني أنه يجب إزالة علامة الاختيار المعيارية في مربع الاختيار F. أشرنا أولًا إلى الحقل F في هذا الجزء من الشيفرة، ثم يمكننا عند تحقّق ذلك أن نحوّل قيمة الحقل F إلى "إيقاف Off". اختر قائمة ملف File ثم حفظ وإغلاق Save and Exit في قائمة المحرر عند الانتهاء. ثم سترى جزء الشيفرة في نافذة خصائص الحقل. انقر على الزر "موافق" في نافذة "خصائص الحقل Field Properties". انقر نقرًا مزدوجًا على مربع الاختيار F. حدد التبويب الإجراء وأضف الإعداد نفسه الذي أجريته مع مربع الاختيار M. جزء الشيفرة مختلف قليلًا. قد يرتكب المستخدم خطأً أو قد يغير رأيه، لذلك يجب أيضًا أن نكون قادرين على إزالة العلامة من مربع الاختيار M: var m = this.getField("M"); m.value="Off"; مصطلحات برمجية يعني الاختصار var متغيرًا variable، فالمتغير هو اسم عشوائي نستخدمه للإشارة إلى شيء ما. وتشير المتغيرات في أجزاء الشيفرة السابقة إلى الحقول ذات الأسماء M وF على التوالي، وهي الحقول التي وضعناها في النموذج بجوار حقلي النص M(ale)‎ وF(emale)‎؛ بينما Value هو خاصية الكائن، والكائن هو الحقل، حيث لكل كائن خصائص محددة تمامُا كما هو الحال في الحياة الواقعية، حيث تمتلك السيارة خاصية اللون Color وخاصية عدد الأبواب NumberOfDoors على سبيل المثال. يقع الحدث عندما يحدث شيء مثل النقر بالفأرة على زر أو تحريك الفأرة فوق كائن مثل حقل نص أو مربع اختيار. لاحظ أن المتغير v يوضح أن اسم المتغير في لغة JavaScript لا يجب أن يتطابق مع اسم الحقل. أجزاء الشيفرة لمربع التحرير والسرد يستخدم مربع التحرير والسرد جزأين برمجيين، حيث يكون الجزء الأول نشطًا عندما ينقر المستخدم على المربع ويزوّده بقائمة الدورات الممكنة، وبالتالي تقديم عدد من الخيارات. يجب أن ننفّذ ذلك في وقت تحميل النموذج في قارئ PDF، ولكن هذا خارج نطاق هذا المقال، لذلك سنستخدم الطريقة التالية: انقر نقرًا مزدوجًا على مربع التحرير والسرد. حدّد تبويب الإجراء Action. اختر النوع: جافاسكربت JavaScript. اختر الحدث: On focus. انقر على الزر تحرير وانسخ جزء الشيفرة التالي: var f = this.getField("Training"); f.editable = false; f.doNotSpellCheck = true; f.commitOnSelChange = true; f.setItems( ["Choose course!", "Basic", "Intermediate", "Advanced"]); يمكن منع حدوث تغيير في إعدادات الحقل باستخدام شيفرة برمجية، إذ يمكننا أن نحرم المستخدم من إمكانية ملء تدريب غير موجود من خلال f.editable = false;‎. وإذا سمحنا بالتعديل، فسيصبح الأمر برمته أكثر تعقيدًا، لأنه يجب أيضًا التحقق من معلومات المستخدم المتوفرة، وقد عطّلنا التدقيق الإملائي أيضًا لأننا سنضيف أسماء التدريبات الصحيحة بأنفسنا. سيُملَأ مربع التحرير والسرد بأربعة احتمالات، أولها اختيار الدورة، حيث يشير المستخدم إلى المعلومات المطلوبة. تمثّل المدخلات الثلاثة الأخرى الدورات التدريبية المتاحة. ويمكنك إضافة ما تريد، ولكن يجب بعد ذلك تعديل جزء الشيفرة الآتي: اختر حفظ وإغلاق في قائمة ملف ضمن المحرّر. حدّد الحدث On blur، حيث يشير هذا الحدث إلى النقر بالفأرة في المربع أو استخدام مفتاح Tab من لوحة المفاتيح لينتقل المؤشر إلى مربع التحرير والسرد، بعد ذلك انسخ جزء الشيفرة التالي: var t = this.getField("Training"); var c = this.getField("Cost"); switch (t.value){ case 'Basic': { c.value=250; } break; case 'Intermediate': { c.value=275; } break; case 'Advanced': { c.value=325; } break; default: { c.value=0; } } يشير المتغير c إلى حقل النص الذي اسمه Cost ويمثّل التكلفة. يُكتَب المبلغ في هذا الحقل اعتمادًا على الاختيار الذي أُجري في مربع التحرير والسرد، وهناك قيمة افتراضية هي 0، وهي صالحة طالما لم يُحدَّد أي خيار. العمليات الحسابية Calculations يجب أن نجري العملية الحسابية اللازمة لجداء عدد المتقدمين بتكلفة الدورة كما يلي: انقر على الحقل خلف إطار النص المكتوب عليه Totals. حدّد تبويب احسب Calculate. انقر فوق زر اختيار "القيمة هي Value is the" واختر "الناتج product" من القائمة. انقر على الزر "التقط Pick"، واحرص على أن تكون الحقول Cost وNrAt في قسم الحقول المحدَّدة كما في الشكل الآتي. أغلق جميع النوافذ بزر موافق. اختبار النموذج احفظ عملك في سكريبوس. صدّر الملف بصيغة pdf. احفظ الملف مرةً أخرى في سكريبوس، وذلك لحفظ التغييرات التي أجريتها على طريقة تصدير سكريبوس للملف بصيغة pdf. ابحث عن ملف pdf على القرص الصلب وافتحه باستخدام برنامج Acrobat Reader أو أي قارئ PDF آخر. تحقق مما إذا كان كل شيء يعمل بصورة صحيحة. إذا كانت التغييرات مطلوبة فأغلق ملف pdf، وأجرِ تغييرات في بيئة سكريبوس وكرّر الخطوات السابقة. لننفّذ هذه الخطوات معًا كما يلي: انتقل أولًا إلى سكريبوس، وافتح القائمة ملف File واختر حفظ Save. ارجع إلى القائمة ملف واختر تصدير Export، ثم اختر حفظ مثل PDF. ما عليك سوى إجراء تغييرات في بضع تبويبات فقط هي: التبويب التغيير الإعداد عام General إخراج للملف: Output to File: استخدم اسمًا وموقعًا يسهّلان عليك العثور على الملف بعد ذلك. عام General التوافق Compatibility الإصدار PDF 1.4 (Acrobat 5)‎ على الأقل خطوط Fonts الخطوط للتضمين Fonts to embed اضغط على ضمّن الكل Embed all لون Color الإخراج بهدف: Output Intended For: شاشة / ويب Screen / Web انقر الآن على زر حفظ Save. افتح مستكشف Windows أو أي مدير ملفات آخر مناسب لنظام التشغيل الذي تستخدمه مثل نوتيلوس Nautilus في نظام أوبونتو Ubuntu، أو فايندر Finder على آبل Apple. ابحث عن ملف pdf وافتحه، إذ يمكنك تشغيل برنامج Adobe Reader وفتح الملف منه. قد يعرض القارئ تحذيرًا، وهذا التحذير واضح، فالنموذج قادر على إرسال البيانات بالبريد الإلكتروني. تحقق مما إذا كان كل شيء صحيحًا، وانقر على مربع التحرير والسرد، بعدها حدّد دورةً تدريبية، واختبر أيضًا عمل زر طباعة النموذج. إذا ثُبِّت عميل بريد إلكتروني مثل أوتلوك Outlook لنظام التشغيل ويندوز، فستُعالَج نتائج النموذج مباشرة. بينما في حالة وجود خدمة بريد عبر الإنترنت مثل ياهو Yahoo أو جيميل Gmail، فيجب حفظ ملف pdf أولًا -ويمكن ذلك فقط مع الإصدار 9 من Adobe Reader أو الإصدارات الأحدث-، ثم يمكن إرسال النتائج عبر البريد الإلكتروني. يمكنك اختيار عدة أنواع من الملفات عند الحفظ مثل: النوع الوصف النوع ‎ .fdf تنسيق ملف نموذج Adobe، حيث تُحفَظ البيانات الموجودة في الحقول فقط. يجب في هذه الحالة أن يكون لدى المتلقي أيضًا نسخة من النموذج الأصلي، ثم تُضاف البيانات المرسَلة عبر البريد الإلكتروني تلقائيًا إلى النموذج. النوع ‎ .xfdf تنسيق ملف النموذج الموسَّع extended form file format القادر على إظهار مزيد من الخيارات. النوع ‎ .xml تنسيق ملف قادر على عرض البيانات في الحقول المناسبة على صفحة ويب. النوع ‎.txt تُحفَظ البيانات في هذه الحالة كملف نصي بسيط يمكن فتحه وقراءته باستخدام أي معالج أو محرّر نصوص متوفر على نظامك. النتائج تبدو النتائج كملف FDF كما يلي: نتائج النموذج تُطبَع عادةً جميع الحقول حقلًا تلو الآخر. وقد وضعنا كل حقل على سطر خاص به من أجل الوضوح في الشكل السابق، إذ يجب ترتيبها بنفس الترتيب الذي وُضِعت فيه ضمن النموذج، وإذا استخدمت ترتيبًا مختلفًا، فسينعكس ذلك على النتيجة. لا ينبغي أن يمثل ذلك مشكلةً كبيرةً جدًا بسبب إضافة أسماء الحقoول أيضًا إلى الملف، وهذا سبب وجيه لتسمية الحقول الخاصة بك بعناية وعدم استخدام الأسماء المعيارية. يمكن تغيير ترتيب الحقول في بيئة سكريبوس، وهنا استخدم تبويب X وY وZ في نافذة الخصائص لتغيير الترتيب باستخدام قسم مستوى Levels، كما في الشكل السابق. سترى رقم الحقل بالتناوب عند تحديد الحقل، ويمكن أيضًا العثور على اسم الحقل ضمن هذا التبويب في الجزء العلوي، إذ يمكنك تغيير الاسم من هنا أيضًا. ترجمة -وبتصرّف- للمقال A Brief Tutorial on Forms لصاحبه Gerrit Bruijnes. اقرأ أيضًا كيفية بدء استخدام برنامج سكريبوس Scribus كيفية إنشاء أشكال معقدة ذات زوايا دائرية في برنامج سكريبوس Scribus خط الشبكة الأساسي Baseline Grid في برنامج سكريبوس كيفية إنشاء رمز RSS Feed في برنامج سكريبوس Scribus كيفية إنشاء لافتة نيون Neon Sign في برنامج سكريبوس Scribus

لن يطول الأمر قبل أن تحتاج إلى وسيلة لجمع المعلومات من مستخدميك، ولهذا سنبدأ حديثنا اليوم بالنّماذج (Forms). فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم (هذا الدرس) استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النماذج سيتطلّب تصميم النّماذج وقتًا طويلًا، معظمه في الاهتمام بقابليّة استخدامها، فعادةً ما تسبّب النّماذج حيرة المُستخدم أو أنّه يُخطئ في استخدامها أو لا يستخدمها نهائيًّا، ومع ذلك تبقى النّماذج من أكثر أجزاء الموقع قيمة. إن لم تكن النّماذج أكثر أجزاء موقعك قيمة، فلم تستخدمها؟ هل نسيت أنّها تسبّب حيرة المُستخدم أو خطأه أو أنّه لا يستخدمها؟ صفحة واحدة طويلة أم عدة صفحات قصيرة؟ من أكثر الأسئلة الّتي يُكرّرها المُصمّمون والمُسوّقون: ما الحدّ الّذي تُعتبر بعده النّماذج طويلة جدًّا؟ كقاعدة عامّة حاول جعل النّماذج أقصر ما يمكن، ولكن لا تتردّد في تقسيمها إلى صفحات إن كان ذلك منطقيًّا، أو إن احتجت إلى حفظ المعلومات في خطوات، إن كنت تتوقّع أن يغادر المُستخدم الموقع أثناء ملء النّموذج. الأهمّ من ذلك أن يبدو الحقل بسيطًا، اجعل الأسئلة المرتبطة متقاربة، استبعد الأسئلة الّتي لا تحتاجها حقًّا، واستخدم بالضّبط عدد الصّفحات الذي تحتاجه (لا أكثر ولا أقل). أنواع الحقول غرض النّموذج هو الحصول على المعلومات من المستخدم، وهناك عدّة طرق لجمع هذه المعلومات، فاستخدم نوع الحقل الّذي يُعطيك أكثر المعلومات فائدة، سواء كان ذلك حقلًا نصيًّا عاديًّا أم علامة مُنزلقة (slider). لنقل أنّك تريد للمستخدم اختيار أنواعه المُفضّلة من الماعز (!)، يصلح هنا استخدام مربّعات الاختيار الواحد (Radio Buttons) أو المُتعدّد (Check Boxes)، فإذا كنت تريد إجابة أكثر اكتمالًا، فاختر الثّانية، وإلّا فاختر الأولى لأنها تُعطي نتيجة أكثر انتقائيّة. مسميات الحقول وتعليمات استخدام النموذج سنبدأ الحديث عن وظيفة المُسمّيات (labels)، فوظيفتها هي شرح ما يجب فعله في كلّ حقل في النّموذج، وعليك أن تجعلها قصيرة وواضحة وسهلة القراءة، وقريبة من الحقل المعنيّ، وهذا كفيل بحلّ 99% من مشاكل الحقول. قد تحتاج أحيانًا إلى إضافة تعليمات عن السؤال إن كان مُعقّدًا أو غير تقليديّ، أضف هنا شرحًا قصيرًا قرب الحقل إن كان بضع كلمات فقط، أو أضفه إلى جانب النّموذج بدلًا من كونه داخله إن كان أطول من ذلك، لكي لا يقطع سير عمليّة ملء الحقل على المُستخدمين الّذين يعرفون ما وظيفة الحقل. أنصحك بقراءة الكتاب Web Form Design لمؤلّفه Luke Wroblewski. التعامل مع أخطاء المستخدم ومنعها كثيرًا ما يُخطئ المُستخدمون في ملء النّماذج، ووظيفتنا منع ذلك ما أمكن، والتّعامل مع ما لا يمكن منعه بمرونة. يمكن منع الخطأ بجعل الحقول "ذكيّة"، فلو كان الحقل مُخصّصًا لرقم الهاتف، فاجعله ذكيًا بحيث يتعامل مع تنسيق رقم الهاتف في البلد المعنيّ (هذا يتطلّب تعاون المُطوّرين). يمكن أيضًا تفادي الأخطاء بإضافة بعض الأمثلة على تنسيق المعلومات المطلوب ضمن الحقل نفسه أو ضمن التّعليمات المُرافقة. عندما ينسى المُستخدم ملء حقل ما أو يخطئ، ينبغي عليك تنبيهه، وذلك بعرض علامة X مثلًا بجواره إن كان خاطئًا أو علامة "صح" إن كان صحيحًا، وهذا ما يُسمّى التّعامل مع الأخطاء في موضعها (inline error handling). تُستخدم هذه التقنيّة أيضًا في حقول كلمات المرور لبيان مدى قوّتها أثناء إدخالها. لا تستخدم هذه التّقنيّة إن لم يكن بإمكانك التّحقق من صحة البيانات، كما في حقل الاسم الكامل. عندما ينقر المُستخدم "التّالي" أو "تمّ"، تحقّق من كامل النّموذج بحثًا عن الأسئلة الّتي نسيها أو أخطأ فيها، اعرض المُشكلة بوضوح شديد وبيّن له سببها. نصيحة: تأكّد من أنّ بإمكان المُستخدم رؤية الخطأ من أسفل النّموذج، فلو كان عليه أن يُمرّر لأعلى ليُلاحظ الخطأ، فلن يفعل! السرعة مقابل الأخطاء هذه النّقطة متقدّمة بعض الشيء، لكنّها مفيدة للغاية. إذا كنت تطرح أسئلة تقليديّة على المُستخدم مثل اسمه وعنوان بريده الإلكترونيّ، فاجعل مُسمّيات الحقول في أعلى ويمين الحقل، فهذا يُسرّع إدخال المعلومات، لأنّه يُبقي كلّ شيء على محور التّفاعل. أمّا إن كانت الأسئلة مُعقّدة أو غير شائعة، فاجعل المُسمّيات على يمين كل حقل في الصّف ذاته، فهذا يجعل المُستخدم يتمهّل قليلًا في إدخال البيانات، ويخفّض احتمال الخطأ. اجعل زرّ "تمّ" على يسار (على يمين، إذا كان النموذج بالعربية) محور التّفاعل . إن كان الحقل يؤدّي إلى حذف شيء ما أو فقد بيانات قد تكون مهمّة، فاجعله على يمينه (أو على يساره، إن كان النّموذج بالعربية)، بحيث يتوقّف النّاس بحثًا عنه بدل نقره بطريقة لا شعورّية. الدعوات إلى الإجراء والتعليمات والمسميات هناك 4 مواضع يمكن أن يتدخّل فيها مُصمّم تجربة المُستخدم ليُبدي رأيه في الجمل المُستخدمة للتّواصل مع المُستخدمين، وأمّا في ما سوى ذلك، فمن الأفضل أن يُترك هذا الشأن لكتُّاب المُحتوى: الدّعوات إلى الإجراء (calls to action) التعليمات (instructions) المُسمّيات (labels) الشّروح الطّويلة الّتي تهدف لإقناع المُستخدم سنشرح في هذا الدّرس النّقاط الثلاث الأولى، أمّا الأخيرة فستكون في درس منفصل. الدعوات إلى الإجراء (Calls-to-Action) ويُقصد بها العناوين والنّصوص الّتي تكون بجانب الأزرار، وتدعو المُستخدم لفعل شيء ما، مثل "نزّل التّطبيق الآن!" أو "احصل على المميّزات المدفوعة مجّانًا!" أو ما شابهها، وقد يُفاجئك مدى التغيير الّذي تُحدثه العبارات المُتقنة الأسلوب في حالات كهذه. المُعادلة العامّة لعبارة ترويج جيّدة: فعل + فائدة + أجل/مكان قريب الفعل: ما تريد من المُستخدم فعله. الفائدة: ما سيحصل عليه المُستخدم (إن لم يفي الفعل بالمعنى) الأجل/المكان القريب: مدى زمنيّ مثل "الآن" أو مكان مثل "هنا"، الكلمة "مجانًا" قد تُعطي إحساسًا بالعجلة إن كان ذلك يُناسبك. التعليمات (Instructions) إن لم يكن واضحًا تمامًا ما يجب على المُستخدم فعله (وحتى وإن كان واضحًا) فقد ترغب بمساعدته، تحدّثنا في فقرات سابقة عن النّماذج وكيفيّة كتابة التّعليمات، فهي أكثر العناصر احتياجًا لها. يجب أن تكون التّعليمات قصيرة ومباشرة وحرفيّة، لا داعي لاستخدام مُصطلحات جزلة، أو كلمات تقنيّة، لا داعي للتّذاكي أو الاستهزاء أو المُزاح. أخبر المستخدم ما عليه فعله بالضّبط بأبسط الكلمات والعبارات، حدّثه وكأنّه طفل ذكيّ، أو كأنّه حديث عهد باللّغة، لا أقصد أن تكون العبارة غبيّة، بل واضحة. مثال عن جملة سيئة: "حلّق بفأرتك فوق الزّر الأصفر فور انتهائك من العمل!" مثال عن جملة سيّئة أيضًا: "كل المُدخلات في هذه المنطقة هي بيانات مطلوبة ويجب أن تُرسل بنجاح لبدء عمليّة إنشاء الحساب." مثال عن جملة غبيّة: "عليك أن تفخر بنفسك! فأنت بارعٌ في ملء النّماذج! حالما تنتهي من ملء هذه النّماذج، فعليك المتابعة إلى الزّر الأصفر أدناه ونقره، كدت تصل أيّها البطل!" مثال عن جملة جيّدة: "أجب على كلّ الأسئلة ثمّ انقر على الزّر الأصفر المُسمّى تمّ في نهاية هذه الصّفحة". المسميات (Labels) قد يكون مُغريًا جدًّا جعل المُسمّيات مُميّزة أو ذكيّة، لكن عليك أن تقاوم هذا الإغراء دومًا. استخدم الشّكل الأكثر شيوعًا وبساطة وسهولة من المُسمّى، لو كان المُسمّى يؤدّي إلى أكثر من نوع من الإجابات، فهو غير واضح. مثال عن مُسمّى سيّئ: "حيث يهفو القلب..." مثال عن مُسمّى أقل سوءًا: "مكان معيشتك" مثال عن مُسمّى أفضل: "العنوان" مثال عن المُسمّى الأفضل: "عنوان المنزل" تنطبق هذه القواعد على الأزرار أيضًا، وهو شيء يتجاهله كثيرٌ من المُصمّمين. إن تجاهلت العناوين والتّعليمات، هل يمكنك فهم وظيفة الأزرار؟ إن لم يكن الحال كذلك، فعليك تحسين المُسمّيات. أمثلة عن مُسمّيات سيّئة للأزرار: "نعم" و"موافق" أمثلة عن مُسمّيات جيّدة للأزرار: "حذف الحساب" و"حفظ التّغييرات" قد يبدو الحديث سهلًا، لكنّ الحياة العملية ستضعك في موقف ستضطّر فيه أن تقول لا للزّبون أو زملاء العمل عندما يطلبون جعل العبارات "أكثر روعة"! أثبت حجّتك باختبارات أ/ب إن اضطرت، ولكن لا تتراجع عن رأيك، فأحيانًا ما يحتاجه المستخدم هو عبارات بسيطة وواضحة، وليست "رائعة ومميّزة". الأزرار الرئيسية والثانوية كقاعدة عامّة ستحتاج نوعين من الأزرار فقط، لأنّ معظم الأفعال تقع في فئتين: أفعال رئيسيّة تخدم هدفك المطلوب أفعال ثانويّة لا تخدم الهدف الأزرار الرئيسية بعض الأفعال المُتاحة للمُستخدم تكون "مُنتجَة"، كالتّسجيل في الموقع أو الشّراء أو إرسال محتوى أو حفظه أو مُشاركته... فهي تُنتج أشياء لم تُوجد من قبل، وهذه نُسمّيها الأفعال الرئيسيّة (primary actions)، وهي ما نريد للمُستخدم فعله أكثر ما يمكن. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال رئيسيّة ظاهرة بوضوح، ويمكن تحقيق ذلك بتطبيق مبادئ التّصميم المرئيّ الّتي تعلّمناها في الدّروس السّابقة. تنسيق الأزرار الرئيسيّة: تباين عالٍ بالنّسبة للخلفيّة (لون أو درجة لونيّة مختلفة جدًّا) موضع الأزرار الرئيسيّة في الواجهة: على محور التّفاعل أو قربه بحيث يلاحظها المُستخدم تلقائيًّا. الأزرار الثانوية بعض الأفعال المُتاحة للمُستخدم تكون غير مُنتجة، كالإلغاء أو التخطّي، أو تفريغ النّموذج أو رفض عرضٍ ما وهكذا... فهي توقف أو تمنع إنشاء أشياء جديدة، وهذه نُسمّيها الأفعال الثّانوية، والّتي لا نريد للمستخدم أن يؤدّيها ولكنّنا نوفّرها من باب قابليّة الاستخدام. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال ثانوية أقل ظهورًا، لمنع النّقر عليها لا شعوريًّا. تنسيق الأزرار الثّانوية: تباين مُنخفض بالنّسبة للخلفيّة (لون أو درجة لونيّة متشابهة) موضع الأزرار الثّانويّة في الواجهة: بعيدة عن محور التفاعل بحيث لا يلاحظها المُستخدم إلّا إن كان يبحث عنها. استثناء: أهمية الفعل قد تكون بعض الأفعال الثّانويّة مهمّة، كحذف الحساب، وهذه يجب أن تكون ذات تنسيق رئيسيّ ولكن في موضع ثانويّ في الواجهة، وذلك لأنّنا نريد للمُستخدم أن يجدها ولكن نريد أيضًا أن يفكّر في نتائجها قبل تنفيذها. من المفيد أيضًا إعطاء هذه الأزرار لونًا يُشير إلى أهمّيتها (أحمر أو برتقاليّ أو أصفر...). الأزرار الخاصة قد يكون لديك نوع مُعيّن من الأزرار فريدٌ ضمن سائر تطبيقك أو موقعك، ويتطلّب انتباها خاصًّا، صمّم هذا الزّر بشكل خاصّ بحيث يبرز في الواجهة (الخروج عن النّمط)، مثلًا: زرّ "الإضافة إلى سلّة المشتريات" في Amazon، أو زرّ "Pin it" في Pinterest أو زرّ الإعجاب في فيسبوك. سنبدأ في الدّرس القادم الحديث عن الجوانب النّفسيّة لتجربة المُستخدم. ترجمة بتصرّف للدّروس Forms و Calls-to-Action, Instructions & Labels وPrimary & Secondary Buttons من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تصمّم دعوة إلى إجراء CTA لتحويل زبائن متجرك الإلكتروني كيف تصبح مرشحا مميزا لوظيفة تجربة المستخدم تلك -الجزء الأول- تجربتنا في إنشاء أداة تسجل تفاعلات المستخدم أفضل أطر تصميم المواد لتصميم تطبيقات الويب الحديثة الخاصة بواجهات المستخدم وتجربة المستخدم