Mohamad Ibrahim3

إن إنشاء عروض وتصاميم باستخدام أوراق الأنماط المُتتالية CSS ليس بالأمر الجلل بحدّ ذاته، ولكنّها وسيلة جيّدة لاستعراض قدرات وإمكانيات CSS، وتجربة أدوات ومفاهيم جديدة، أو للتدريب على العمل ضمن شروط وقيود مُحدّدة، حيثُ سيُلقي هذا المقال نظرةً على كيفيّة إنشاء تأثير قطرات مطر (raindrops) على نافذة وذلك باستخدام تقنيات HAML و SASS. يُمكن استعراض مثال كامل لفكرة الدرس على موقع CodePen مع الشيفرة الخاصّة به. المعالج التمهيدي (Preprocessor)سيتمّ أوّلًا وقبل كل شيء توضيح لماذا سيتمّ استخدام تقنيتي HAML/SASS بدلًا من الزوج الشائع HTML/CSS، ومع العلم أنّهما يتمتعان بالعديد من المزايا والتسهيلات ولكن السبب في الحاجة إلى معالجات تمهيديّة هنا هو أنها تسمح للمطوّر باستخدام المُتغيّرات، إنشاء حلقات تكراريّة (loops)، وتوليد قيم عشوائيّة، وبذلك لن يتمّ التعامل مع المئات من قطرات المطر بشكل منفصل بل سيتمّ إنشاؤها برمجيًّا. يُمكن الاستزادة حول الإعداد الأوّلي والصياغة (syntax) من خلال زيارة موقع كل تقنيّة سواءً SCSS أو HAML، أو من المُمكن مبدئيًّا تطبيق الدرس على موقع CodePen، من خلال إنشاء pen جديد واختيار SCSS كمُعالج تمهيدي لـِ CSS و HAML من أجل HTML. إنشاء النافذةستكون الخطوة الأولى هي عرض النافذة نفسها. .container .window // صورة الخلفية $image: 'http://i.imgur.com/xQdYC7x.jpg'; // عرض وطول الحاوية $width:100vw; $height:100vh; .container{ position:relative; width:$width; height:$height; overflow:hidden; } .window{ position:absolute; width:$width; height:$height; background:url($image); background-size:cover; background-position:50%; filter:blur(10px); }تمّ في الشيفرة السابقة وبكل بساطة رسم div مع صورة خلفيّة (background image)، وتطبيق مُرشح غشاوة (blur) عليها لكي تُصبح القطرات جليّة أكثر للناظر. يُلاحظ كيف أنّه تمّ تخزين مسار (URL) صورة الخلفيّة في مُتغيّر image$، وذلك لأنه سيتمّ استخدام ذات الصورة للقطرات نفسها كما سيتّضح ذلك فيما بعد. قطرات المطر في الطبيعةسيتمّ إلقاء نظرة على القطرة وكيف تبدو في الحياة الطبيعيّة قبل الشروع في تطبيق التأثير. يعود مصدر الصورة إلى موسوعة ويكيبيديا. ستَقلب القطرة الصورة الّتي خلفها بمقتضى انكسار الضوء، كما سيكون للقطرة حدودًا (border) سوداء عندما يكون شكلها نصف كرويّ كامل أو غير كامل. إنشاء قطرات المطر (Raindrops)سيتمّ في الخطوة التّالية إنشاء قطرة مطر واحدة بعد أن تمّ معرفة الأساسيات. .container .window .raindrop $drop-width:15px; // قطرات المطر لن تكون دائرية تماما لذلك سنقوم بتمديدها قليلا // حتى لا تتمدد الخلفية أيضا transform:scale لن نستخدم $drop-stretch:1.1; $drop-height:$drop-width*$drop-stretch; .raindrop{ position:absolute; top:$height/2; left:$width/2; width:$drop-width; height:$drop-height; // border-radius:100% بدلا من border-radius:100px, حتى يكون شكل قطرات المطر بيضاوي وليس كبسولي border-radius:100%; background-image:url($image); background-size:$width*0.05 $height*0.05; transform:rotate(180deg); }ما تمّ عمله في الشيفرة السابقة هو رسم div على شكل إهليلجي (بيضاوي)، وتطبيق صورة خلفيّة (background image) داخله، وهي نفس الصورة المُستخدمة سابقًا، وبعد ذلك تم تقليص حجم الخلفيّة ومن ثم قلب القطرة رأسًا على عقب. سيتمّ الآن إضافة حدودًا حول القطرة، لتبدو القطرة وكأن لها حجمًا. ... .border .raindrop ... .border{ position:absolute; top:$height/2; left:$width/2; margin-left:2px; margin-top:1px; width:$drop-width - 4; height:$drop-height; border-radius:100%; box-shadow:0 0 0 2px rgba(0,0,0,0.6); }يُلاحظ كيف أنّه لم يتمّ إضافة حدودًا كاملة حول القطرة، بل التعديل على مكانها والضغط على جانبيها قليلًا لتبدو أقرب إلى القطرة الطبيعيّة. سيتمّ في الخطوة التّالية إضافة المئات من هذه القطرات وذلك بعد الانتهاء من استكمال رسم القطرة الأولى على أكمل وجه. ... .raindrops .borders - (1..100).each do .border .drops - (1..100).each do .raindropإن الشيفرة السابقة ما هي إلا شيفرة HAML في صياغة حلقة تكرار (loop)، فكل ما تمّ عمله هو إضافة مئة كائن من raindrop.و مثلها للكائن border. سيتمّ إلقاء نظرة مُفصّلة على شيفرة SASS بما أنّها مُحيّرة بعض الشيء. سيتمّ بدايةً إنشاء الحلقة التكراريّة (loop) ومن ثُمّ اختيار كل عنصر (element) بشكل منفصل: @for $i from 1 through 100{ .raindrop:nth-child(#{$i}){ } .border:nth-child(#{$i}){ } }سيتمّ الآن توليد وتطبيق تَمَوْضُعات (positions) وأحجام عشوائية لقطرات المطر: @for $i from 1 through 200{ //توليد رقم عشوائي من 0 إلى 1 لإختيار التموضع $x:random(); $y:random(); // إختيار حجم وتمديد قطرة المطر عشوائيا // بما أن لكل قطرة مطر حجم مختلف، سنقوم بحساباتنا هنا .raindrop selector $drop-width:5px+random(11); $drop-stretch:0.7+(random()*0.5); $drop-height:$drop-width*$drop-stretch; .raindrop:nth-child(#{$i}){ // ضرب قيمة الموضع العشوائي في حجم الحاوية left:$x * $width; top:$x * $height; width:$drop-width; height:$drop-height; } .border:nth-child(#{$i}){ // سنقوم بنفس الشيء لحدود القطرة left:$x * $width; top:$x * $height; width:$drop-width - 4; height:$drop-height; } } سيتمّ أخيرًا تغيير تموضع خلفيّة كل قطرة بحسب تموضع القطرة، ليكون تأثير الانعكاس أكثر جمالًا. ... .raindrop:nth-child(#{$i}){ ... background-position:percentage($x) percentage($y); } ... سيكون بذلك قد تمّ الانتهاء من إنشاء التأثير الرئيسي، ولكن بالإمكان التعديل والتحسين عليه، وذلك من خلال الاهتمام ببعض التفاصيل الصغيرة، مثل زيادة السطوع (brightness) للقطرات قليلًا لتبدو صافية وذات لمعة، أو تغيير التركيز البصري ليكون على الخلفيّة بدلًا من القطرات، أو رُبّما تغيير صورة الخلفيّة. يُمكن الوصول إلى النسخة النهائيّة للمثال بجانب الشيفرة بشكلها النهائي من خلال موقع CodePen. ترجمة وبتصرّف للمقال CSS-Only Raindrops on Window Effect لصاحبه Lucas Bebber.

حدّث تويتر مؤخرًا تصميم زر التفضيل "fave" الخاصّ به، وذلك بتقديم تحريكٍ جديد، وبدلًا من الاعتماد على التنقل transitions في CSS، فإن التحريك المُستخدم يعتمد على استخدام سلسلة من الصور، في هذا الشرح سيتمّ إعادة إنشاء التحريك باستخدام CSS وبدالة التوقيت steps. وهم الحركة (Illusion of movement) يُشبه هذا التأثير إلى حدٍ كبيرٍ التأثير المُقدّم بواسطة أجهزة Zoetrope القديمة، حيثُ تعرض سلسلة من الرسومات في حلقة وحول أسطوانة، ولكن ما سيتمّ استخدامه هنا هو عرض سلسلة مُسطّحة من الصور داخل عنصر. عرض المثال مثال على تحريك الزر عند حركة المرور hover: .twitter-fave { width: 70px; height: 50px; background: url("//raw.githubusercontent.com/HsoubAcademy/HsoubAcademy.github.io/master/examples/CSS-animation-series/Twitter%20fave%20animation/twitter_fave.png") no-repeat; background-position: 0 0; } .twitter-fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } يمكن معاينة الملفات المصدرية لهذا الدرس على حساب أكاديمية حسوب على Github. تمّ في البداية إنشاء سلسلة من الصور، والّتي ستُشكل التحريك في نهاية الأمر: يجب وضع هذه الصور/الإطارات على صفّ واحد بهدف إتمام عمليّة التحريك بسهولة أكبر، ليتمّ عندها التحويل من الصورة الأولى إلى الصورة الأخيرة، وذلك عبر التحكم بمكان الخلفيّة باستخدام شيفرة CSS. كيف ستتموضع صور الخلفيّة background image ضمن العنصر: دالة التوقيت ()steps كما هو الأمر مع مُعظم دالات التوقيت مثل ease أو cubic-bezier، فإن الانتقال transition يُحرّك العنصر بسلاسة بين حالة البداية وحالة النهاية، أما دالة التوقيت steps فهي مُختلفة، فبدلًا من ذلك الانتقال (بين نقطتين)، سيتمّ تقسيم التحوّل/الانتقال إلى عدد من الخطوات والتحكم بين هذه الخطوات بشكل مُنفصل. تمثيل دالة ()steps بالرسم البياني، والّتي تَظهر على شكل سلسلة من الخطوات: البداية مع إعداد HTML: <section class="fave"></section> صورة الخلفيّة Background image سيتمّ في الخطوة التّالية تنسيق العنصر السابق وإضافة تَمَوْضُع لصورة الخلفيّة background image: .fave { width: 70px; height: 50px; background: url(images/twitter_fave.png) no-repeat; background-position: 0 0; } سيتمّ إضافة تنسيق لحركة المرور hover، ليتم نقل تَمَوْضُع الخلفيّة إلى نهاية سلسلة الصّور: .fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } تمّ في الخاصّيّة الثانية تعيين قيمة للانتقال transition، وذلك للخاصية background وبمدة انتقال ثانية واحدة، ولدالة التوقيت ()steps القيمة 55، وذلك لأن عدد الصور الكلّي الّتي سيتمّ التبديل بينها هو: 55. لن يحدث التحريك إلّا عند حركة المرور hover، حيثُ سيتمّ الانتقال عبر جميع الصور وبعدد خطوات متساوي (55 خطوة). لماذا لا يتمّ استخدام gif مع التحريك؟ يُمكن في الحقيقة استخدام الصور المُتحركة (gifs)، ولكن لن تكون الاختيار الأمثل في هذه الحالة، حيثُ حجم الملفّ سيكون أكبر، ومن الصعب التحكم بمُعدّل النقل، ولكن بالطريقة المُستخدمة هنا يُمكن عمل: إيقاف مؤقت، إعادة التحريك، وإجراء كافّة التعديلات المطلوبة لإتمام التحريك على الوجه المطلوب. استخدامات أخرى للدالة steps إن تحريك الصور من نوع sprites هو أحد استخدامات دالة التوقيت steps، فأي شيء يحتاج إلى التحريك على شكل سلسلة من الخطوات المُفصّلة، يُمكن له الاستفادة من هذه الدالة. أقصوصة الغش (Cheatsheet) تقدّم الأقصوصة التّالية مُختصر للمقالة، والذي يُمكن الرجوع إليه عند تطبيق الدرس. خاتمة ما أجمل التحريك في صفحات الويب؛ سرعة، خفّة، مرونة، جمال، أنصح بالقراءة عن الأمر والتعمّق في جنباته، فهو الوجه الجديد لصفحات الويب. ترجمة وبتصرّف للمقال Twitter’s "fave" animation.

كان سيكون من الرائع لو أن المصمّم هو من يصمّم والمطوّر هو من يطوّر/يبرمج، لكن للأسف هذا ليس الحال، بل سيتبادل المصمم والمطوّر الأدوار بين الحين والآخر، وما لفت نظري هو وجود العديد من الدروس والمقالات الّتي تشرح للمصمم كيف يطوّر ولكن القليل منها يشرح للمطوّر كيف يُصمّم، ومن هذا المنطلق فكرت في مشاركة بعض الحيل والأفكار البسيطة لكم معشر المطورين. ما يسعني قوله بدايةً، أني لن أكون قادرًا على تعليمك أساليب التصميم الأنسب في مقالة واحدة، حيث يأتي هذا الأمر مع الوقت والتدريب وربما شهادة معتمدة، وقبل أن أنسى الملكة/الموهبة، علمًا أني لن أجعل منك مصممًا محترفًا، لكنّي سأقدّم لك بعض النصائح في كيفيّة تجنّب أبرز المشاكل الّتي تواجه بعض المطوّرين بين الحين والآخر. ملاحظات عامةقبل أن أشرع في التطرّق إلى الحيل نفسها، أود فقط مشاركة بعض الملاحظات العامة والتي بَنيتها من خلال مشاهدتي لتصاميم صمّمها مطوّرون، أهدف بهذه الملاحظات تغيير نظرة المطوّر حول التصميم، فالتصميم ليس مجرّر ترتيب للبكسلات (pixels) في صفحة بيضاء. التصميم حس فني قبل كل شيءإن الشيفرة البرمجيّة التي يكتبها المطوّرون إما أن تعمل أو لا، بمعنى آخر تميل الشيفرة إلى المنطق أكثر من أي شيء آخر، فمن اليسر فهم واستوعاب العقل الإلكتروني على عكس نظيره العقل البشري، الذي يميل إلى التناقض والتباين وعدم الثبات على مبدأ واحد، وهذا بالضَّبط عالم المصممين. يحاول المصممون جاهدين الانخراط مع الناس، وذلك من محاولة التماس ما يشعرون به، واضعين أنفسهم مكان المستخدِم في سبيل فهم طريقة تفكيره وأسلوبه في معالجة الأمور. أجد الكثير من المطورين يقعون في هذا الخطأ مرارًا وتكرارًا، حيث أنهم يعاملون المستخدم كما لو أنّه يفكر بنفس طريقة تفكيرهم، هم يقومون بخلق الافتراضات حول دوافع وغايات المُستخدِم وقدراته، ودائمًا ما يفشلون في فهمه بالشكل الصحيح. أريد التأكيد على أمر في غاية الأهميّة، وهو محاولة فهم عقليّة المستخدم، أمعن في التفكير فيما يكره ويُحب المستخدم، هل هو في عجلةٍ من أمره؟ ما هو مقصده الأساسي؟ ما هو مقدار التشتت المتوقّع من المستخدم؟ حاول جاهدًا الدخول إلى ذهن المستخدِم، سيكون ذلك أمرًا مساعدًا لك في التصميم بالتأكيد. تجنب تطبيقات التصميم الاحترافيةيميل بعض المطوّرون إلى استخدام أدوات احترافيّة عندما يرغبون في تصميم الموقع بأنفسهم مثل تطبيق فوتوشوب، وذلك بحجّة أن جميع المصممين المحترفين يستخدمونه، طبعًا لا شك في أن المُصممين يستخدمون أدوات من هذا النوع لا بل قد يرسمون بأيديهم في بعض الأحيان، مع ذلك فإني لا أنصح بذلك إلا إذا كنت بالفعل تستطيع استخدام هذا النوع من التطبيقات، حيث أن استخدام هذا النوع من الأدوات من شأنه يزيد من صعوبة استكمال التصميم بدلًا من تسهيلها وذلك في حال عدم الإلمام باستخدامها بالشكل المطلوب. ألا يكفي فهم وتطبيق مبادئ التصميم نفسها؟ لماذا يجب تعلّم استخدام تطبيق جديد، أنت كمطوّر يتقن كتابة الشيفرة، يستحسن بك تصميم الموقع باستخدام CSS و HTML على اعتبار أنها الأدوات التي تتقنها بالفعل، طبعًا لن يكون التصميم ساحرًا آسرًا، ولكن هذا ليس الهدف من الأساس. لا تحاول وصول عنان السماء بالتصميم بل حاول أن تكون موضوعيالا تحاول تصميم مواقع إبداعيّة أو مبتكرة، فيصعب الأمر حتى على محترفي التصميم، حاول فعل ذلك وسينتهي بك المطاف بتصميم يحبّه الأقليّة مقابل أكثريّة تكرهه. العب على المضمون، اجعل من التصميم خفيف الظل سريع الفهم، فلنكن واقعيين التصميم المناسب أو لنقل المقبول لا يترسخ في أذهان الناس، بمعنى آخر التصميم الجيّد يُستخدم ولا يُنتقد. إن لم يتحدّث المستخدم عن التصميم فهذا يعني أن التصميم لم يسبب له أي مشاكل وهذا مؤشر جيّد، وكما أسلفت لن يكون تصميمك بذلك التصميم الجذاب الخلاب ولكنه على الأقل يلبي الغرض. النصائح العمليةسأكتفي بهذا القدر من التنظير، وسأبدأ بالتحدّث عن الأمور العمليّة، فمثلًا كيف لك أن تجعل من التصميم مناسبًا بالقدر الكافي بعيدًا عن كونه قبيحًا؟ تمام، سأقترح خمس نقاط محدّدة يجب التركيز عليها، طبعًا يمكنني الكتابة عن كل منها بالتفصيل، ولكني سأبسّط الأمور هنا واجعلها سهلة التطبيق. الخطوط Typographyإن نجاح استخدام الخطوط Typography في التصميم يأتي من خلال الثبات على مبدأ واحد في كامل التصميم، بمعنى تجنّب استخدام العديد من أنواع الخطوط typefaces، خطّ أو خطّان سيكفيان بالغرض، وتجنّب أيضًا استخدام أحجام متعدّدة وأوزان لونيّة مختلفة، بل استخدمها في التأكيد على أهميّة جزء معيّن من المحتوى، فكلما كان المحتوى هام كلما كان الخط أكبر وأعرض. حاول دائمًا الثبات على تنسيق واحد في كامل التصميم/التطبيق، فإن كان أحد العناوين بحجم ووزن معيّن في أحد الصفحات، تأكّد من أنّه على نفس السويّة في باقي الصفحات، خاصّة وأن CSS تجعل من هذه المهام سهلة التطبيق في المجمل. أخيرًا، لا تهتم بالخطّ فقط بل أيضًا في طول السطر وارتفاعه، لا تجعل من السطور طويلة، ربما 40 إلى 60 حرف كافٍ في الأغلب، كي لا تصبح هذه السطور صعبة القراءة، أضف أيضًا قليلًا من المساحة البيضاء بين السطور، سيجعل ذلك من الصّفحة فسيحة ووسيعة وسهلة القراءة. استخدم المساحات البيضاء whitespaceإن استخدام المساحات البيضاء whitespace ليس بذلك السر في التصميم، ومن خلال خبرتي فإن إضافة المزيد من المساحة دائمًا هو أمر جيّد، لأن المسافات تسهّل من عمليّة القراءة، وتعطي إحساسًا بالبساطة وتُوصِل الفكرة بيُسر ورحابة وإبداع فنّي وبأقل مجهود ممكن. نميل في معظم الأحيان إلى تصغير حجم الصّفحة قدر الإمكان للتقليل من طولها، فيدفعنا هذا الأمر إلى حشر المحتوى وتكديسه على حساب المساحات البيضاء، قاوم هذه الرغبة، وكن سخيًّا في الحشوة padding والهوامش margins والارتفاع بين السطور، ولا تخف من الأجزاء الفارغة من الصّفحة. النظام الشبكيقد يشتكي البعض بأن تصميم الموقع صَندوقيّ عند استخدام الأنظمة الشبكيّة في التصميم، ولكن في الحقيقة إن التصاميم الصندوقيّة جيّدة ومناسبة لأغلب المواقع والتصاميم، يجب على الموقع الحسن أن يتكوّن من بنية تحتيّة تتألف من أعمدة (columns) وصفوف (rows)، فهي تساعد المستخدم على فهم هرميّة الموقع وتنظم أركانه، وعلى الرغم من أن المصمّم الشاطر سيخرج عن النص في بعض الأحيان ولا يلتزم بالنظام الشبكي، ولكن سيكون دائمًا هناك بُنيّة شبكيّة خلف الستار تسهل من تطبيق تصميمه على أرض الواقع. حدّد عدد الأعمدة التي يجب على الموقع أن يمتلكها، وتأكّد من هذه الأعمدة متطابقة في جميع أرجاء الموقع، ولكن عند الضرورة لا تتردّد في التوسّع واستخدام أكثر من عمود، وتأكّد أيضًا من توزّع العناصر بشكل متناسق في النّظام الشبكي وألا تختلف من صفحة إلى أخرى، مثل القوائم العلويّة وشريط التنقل وشريط البحث. قد يبدو النظام الشبكي مقيّدًا لعمليّة التصميم ولا يحث على الإبداعيّة ولكنّه أمر أساسي لنجاح أي تصميم. الألوانيُعتبر التعامل مع الألوان أمرًا ليس بالهيّن، وطالما لديك المجال تجنّب استخدام الكثير من الألوان، لا بل من الأفضل استخدام أدوات آليّة في توليد الألوان، مثل أداة الألوان المقدّمة من شركة أدوبي Adobe Color CC، حيث تسمح لك هذه الأداة إما بالاختيار من مجموعة ألوان موجودة بالفعل أو إنشاء مجموعة لونيّة جديدة تُناسب الهويّة البصريّة/اللونيّة للموقع corporate colour. لاحظ أنها تتضمّن على خمسة ألوانٍ في اللوحة الواحدة، وهذا أمر حسن في الحقيقة، لا تُفرط في استخدام عديد الألوان، ولا تنس الاستفادة من تباين الألوان في التمييز بين المحتوى الهام والمحتوى الأهم، لأن التباين في الألوان هو الطريقة الأفضل في تمييز المحتوى وليس تعدّد الألوان. الصورتفتقر معظم تصاميم المطوّرين إلى الصور، وربما هذا ليس بالشيء السيء، فمن السهل إساءة استخدام الصور، مع ذلك فأنا أشجّع على استخدامها حتى لو كان في الأمر بعض المغامرة، لما لها دور في لفت النظر وإلقاء الضوء على المحتوى الهام في الصّفحة. يُمكن لاختيار الصور أن يكون صعبًا، ولكن إليك بعض الاقتراحات التي ستوجهك نحو الطريق الصحيح في الاختيار: تجنّب استخدام الصور المتحركة.اختر الصور ذات الأماميّة foreground (صدر الصورة) القويّةاضغط الصور (compression) ولكن لا تبالغ في الضغط.استخدم الوجوه، فهي تجذب نظر الزوّار.تجنّب استخدام القصاصات الفنيّة clipart.خاتمةقد وصلنا إلى ختام المقال، أرجو أن أكون قد وفقت في تقديم المساعدة ولو بالشيء القليل، طبعًا يوجد العديد مما قد يُضاف، ولكن لا بأس بهذه الخطوط العريضة كبداية، وفي حال أردت الانخراط في المزيد من التفاصيل بهدف تطوير مهاراتك ونقلها إلى مستوى متقدّم، عليك بتصفّح مقالات التصميم هنا في الأكاديميّة، فيوجد العديد من المقالات الدسمة. ترجمة وبتصرف للمقال: When developers design لصاحبه: Paul Boag.

في التالي مُقتطف من كتاب الشركات الناشئة اللّيّنة The Lean Startup والذي سطّره «اِريك رايس»، وهو أحد أشهر الكتب التي يَنصح بها روّاد الأعمال. سردَ «جيمس ووماك» و «دانيال جونز» في كتاب التفكير اللّيّن Lean Thinking قصّة حول تظريف الرسائل داخل مَظارِيف/أغلفة بمساعدة بنتي أحد الكاتبين، حيث يجب على كل ظرف أن يُعنوَن، ومن ثم يُلصق الطابع البريدي عليه، ومن ثم يُملئ بالرسالة، وأخيرًا يُغلق الظرف/المغلّف بإحكام، عرفت البنتان والّتي أعمارهن ست سنوات وتسع سنوات كيفيّة إتمام المهمّة مخبرتين والديهما بوجوب طيّ جميع الرسائل أوّلًا، ومن ثم إغلاق المظاريف، بعد ذلك وضع الطابع، ولكن أراد والدهما إتمام المهمّة بالطريقة غير الاعتياديّة؛ استكمال كل ظرف على حِدة، ولكن بنتاه أخبرتاه بعدم فعاليّة هذه الطريقة، لذا ما كان منهم إلا أن يتقاسموا الظروف وبدؤوا بالتحدي لمعرفة أي الطريقتين أسرع. ظَفِر الأب بالسباق ليس لأنه الأسرع في الأداء أو لأنّه الشخص الأقوى. إن استكمال كل مهمّة كل مغلّف على حِدة هي الطريقة الأسرع في إتمام المهمّة على الرغم من أنها تبدو طريقة غير فعّالة واحترافيّة في بادئ الأمر، وقد تمّ تأكيد ذلك بأكثر من دراسة من أحدها: لماذا إذًا تظريف كل ظرف على حِدة يجعل من إنجاز المهمّة أسرع على الرغم من أن الطريقة تبدو وكأنها ستكون الأبطأ؟ لأننا بديهيًّا لا نأخذ بالحسبان الوقت الإضافي المطلوب لترتيب وتكديس الأغلفة أو تحريك كومة المظاريف التي مازالت في طور التحضير ولم تصبح جاهزة بعد، ويبدو من المجدي تكرار نفس الجزئيّة مرارًا وتكرارًا وعلى مراحل وذلك لأننا نعتقد أننا سنصبح أفضل في تأدية المهام البسيطة مع تكرارها، ولكن للأسف في عمليات من هذا النوع لا يكون الأداء المُفرد لكل جزئية مهمًا بقدر أهميّة الأداء في مُجمل سير العمليّة الإنتاجيّة. إن كنت في حيرة وشك حول الأمر يمكن الرجوع إلى هذا المنشور. وإن تساوى وقت إتمام المهمّة في الطريقتين، فإن إنتاج دفعة صغيرة على حِدة سيكون متفوّقًا في الإنتاجيّة، ولأسباب غير بديهيّة ومخالفة للتوقعات أيضًا، على سبيل المثال، تخيّل أن الرسائل لم تتسع داخل المغلّف، فمع طريقة الدُفعات الكبيرة large batch ما كان لنا اكتشاف ذلك إلا قُبيل الانتهاء، ولكن وعلى الجهة الأخرى ومع الدُفعات الصغيرة small batches سنعرف ذلك بُعيد البداية مباشرةً. إن جميع هذه المشاكل ظاهرة وواضحة في عمليّة بسيطة كتظريف الرسائل السابقة وهي مشاكل لا تذكر، ولكن هي مشاكل حقيقية ومن أرض الواقع وقد يكون لها عواقب وخيمة مع الشركات، سواءً كانت كبيرة أو صغيرة، ماذا لو اتضح أن الزبائن لم تعد ترغب بالمنتج؟ أي أسلوب عمل سيسمح للشركة باكتشاف ذلك قبل فوات الأوان. اكتشف المصنّعون اللينون مثل تويوتا فوائد الدُفعات الصغيرة من أكثر من عشر سنوات، وعندما أدرّس روّاد الأعمال هذه الطريقة، أبدأ غالبًا بقصص التصنيع وخفاياها، ما ألبث أن أواجه بسؤال: "ما علاقة المصانع والصناعة بشركتي الناشئة؟"، إن الفكرة التي كانت أساس نجاح شركة تويوتا يُمكن أن تُطبّق بالفعل في تحسين سرعة بناء الشركات الناشئة. اكتشفت تويوتا أن الدُفعات الصغيرة جعلت من مصانعها أكثر إنتاجيّة، وعلى العكس مع الشركات الناشئة اللّيّنة Lean Startup والتي لا تهدف إلى إنتاج أشياء بفعاليّة أكبر بل كيف لها أن تبني عملًا ناجح مستمرًا وبأسرع وقت ممكن، فكّر في مثال تظريف الأغلفة السابق، ماذا لو تبيّن فيما بعد أن الزبون لم يعد يرغب بالمنتج الذي يتمّ بناؤه؟ طبعًا هذا ليس بالأمر المرغوب مهما كانت الطريقة المتبعة، ولكن اكتشاف ذلك في مرحلة مبكّرة من عمليّة الإنتاج أفضل بكثير من اكتشاف ذلك في وقتٍ متأخر، إذًا فالعمل بالدُفعات الصغيرة small batches يَضمن للشركة الناشئة إمكانيّة التقليل من الوقت والمال والجهد المبذول والذي قد يضيع أدراج الرياح مع الدُفعات الكبيرة. ترجمة وبتصرف للمقال: The power of small batches لصاحبه: Eric Ries.

قد تظن أنّ تسعير مُنتجك بالسعر 5$ هو السعر الأمثل والمُناسب للجميع، ولكن في الحقيقة، الأمرُ أكثر تعقيدًا من هذا. ستَخسر الكثيرَ من الزبائن المُحتملين مع السعر المُنخفض، كما هو الأمر مع الخدمات ضعيفة الجودة الّتي قد تُخيف أو تُربك البعض من استخدامها. مهما كان مشروعك، سواء كان برمجيّة كخدمة (SaaS) أو مشروع بناء مطعم، عليك أنّ تبحث عما يجذب الزبون المُستهدف أوّلًا، وتحسب مقدار الربح الّذي تُريده ثانيًا، وتمثيل هذين القرارين بيانيًّا يعطيك ثلاثة خيارات لاختيار نموذج التّسعير لا رابع لهما. إن مسار المبيعات المعقّد الّذي يستهدف زبائن بقيمة منخفضة لم ولن يكون مسارًا قابلًا للاستمرار فيه بأي شكل من الأشكال، حاولت الشركات الناشئة مرارًا وتكرارًا دون جدوى، فمثله كمثل بيع سندويشات رخيصة الثّمن في مطعم راقٍ يجب أن تحجز طاولتك فيه بشكل مُسبق. فلن تكون الأرقام منطقيّة بأي حالٍ من الأحوال، ولقد كرّرنا الأمر مراتٍ عدّة، إن السعر المنخفض لوحده ليس سمة جاذبة في حد ذاتها، ما تقدمه هو الرخُص فقط، وعلى الميّزة التنافسيّة competitive advantage (قدرة المُنتج على تحقيق التفوّق في المُنافسة) أنّ تتوسّع مع استهدافك الأسواق الأكبر. صاغ الرسم البياني السابق للمرّة الأولى جويل يورك، ليُحدّد نماذج المبيعات الأساسيّة من أجل الأعمال من نوع برمجيات كخدمة (SaaS)، والعديد من الشركات الناشئة تختار الرُبع الأيسر الأسفل (خدمة ذاتيّة)، وهم غالبًا لا يعرفون لماذا اختاروا هذه النموذج، وفي الرسم التّالي بعض الشركات مع الرُبع الخاصّ بها: ما هو نموذج التسعير الأنسب إذًا؟إن اختيار الربع الأيسر من الناحية السفلية، يعني عادةً أنّ ينتهي بك المطاف مع عدد كبير من الزبائن منخفضي القيمة ( low value customers)، الأمر الّذي يُقيّد ويُحدّد طرق حصولك على زبائن جدد، فعلى سبيل المثال، أدركت شركت Dropbox بعد معاناة أنّهم لن يتمكنوا أبدًا من تحمّل تكلفة الحصول على الزبائن من خلال استخدام الدعاية والإعلان، أيضًا يحدّد السعر المُنخفض مُستوى الدعم الفنّي المُقدّم، حيثُ أدرك فريق Woothemes أنّهم لا يستطيعون تقديم الدّعم الفنّيّ لمجموعة من الزبائن، وبالتّالي إن المُساومة/التسوية بين هذه النماذج مُتعدّدة: إن أيًا من الحلول السابقة ليس بالخيار السّيء بالمُطلق، ولكن يجب عند الفصل فيما بينها الاعتماد على خطّة وتفكير مُعمّق، وذلك بناءً على: مجال العمل، نوع الزبون، والسوق المُستهدف حاليًّا. اختيار الرُبع/النموذج الخاطئ يمكن أنّ يقضي على المشروع حتّى قبل الشروع به، قد توضَح هذه الأمثلة الثلاث الفكرة: تُعرف بعض الأعمال بصعوبة الوصول إليها، مثلًا: التسويق بالمحتوى ليس له ذلك التأثير على أطباء الأسنان كما هو على المطوّرين، وهذا يعني وجوب الدفع مُقابل الحصول على الزبائن.تتعامل بعض الأعمال بعقود سنويّة، مثل اتفاف عدم الإفشاء (NDA)، اتفاق مستوى الخدمة (SLA)، وهذا يعني وجوب توظيف وضخ بعض الأموال في مسار عمليّة المبيعات.بعض مجالات الأعمال مُعتادة على استخدام الشرائح والعروض التوضيحيّة باستخدام البرمجيّات مثل PowerPoint لتمثيل بيانات المبيعات، أو رُبما تدريب خاصّ في مقر الشركة، كل هذا يعني وجوب رفع قيمة العقد لتربح من هذا النوع من العُملاء.اختيار أكثر من نموذج تسعير في نفس الوقتقد تستخدم بعض الشركات نموذجين من نماذج التسعير لاستهداف أكثر من سوق، على سبيل المثال، تُنافس Github على السعر 7$ شهريا، ولكنها أيضا تقدم خطة (Entreprise) بالسعر 1000$ شهريًّا لاستهداف الشركات الكبيرة، ولخدمة هذا السوق بمُنتج عالي الجودة، استقدمت Github نائب رئيس للمبيعات، مُدراء مبيعات، مُدراء حسابات، ومُدراء تنفيذيين للحسابات. تَسمح الأسعار من نوع مُعاملات تجاريّة (transactional) للشركات الناشئة من استهداف الأسواق الكبيرة (upmarket) وبدون الحاجة إلى تغيير مُنتجهم أو نموذج الأعمال (business model) الّذي بُنيت عليه الشركة. إن عدم تحديد أقصى سعر يُمكن للزّبون دفعه يُسهّل على الشّركات التي تعتمد هذا التسعير من تخطّي مطب خطط الأسعار (price plans) الّذي تقع فيه الكثير من الشركات. لكن في المُقابل لو كانت أكبر خطّة من خُطط التّسعير التي تعتمدها هي خطة "غير محدودة" unlimited فإنك بذلك ستضع سقفًا ثابتًا لما يُمكنك أن تربحه من كل زبون، حيث أنّك بذلك تمنح تخفيضًا كبيرًا للزبائن الأقل حساسيّة اتّجاه الأسعار، فهذا الخصم ليس بذلك الأهميّة بالنسبة لهم، ولا يقدرونه بالقدر الكافي، بالإضافة إلى أنّه من السهل تقديم الخطّة غير المحدودة، ولكن من الصعب التراجع عنها. إن أهم ما يُميّز الالتزام بمجموعة خُطَط من الأسعار (price plans) هو عدم الارتباط بأي زبون بحدّ ذاته، ولكن يجب على هذا القرار أن يُتخذ بعد تفكير وتخطيط مُسبق، بدلًا من أنّ يكون الاختيار الافتراضيّ. لا يوجد بما يُسمّى “أفضل طريقة” بمسألة التسعير، ولكن يوجد في نفس الوقت الكثير من الطُرق الخاطئة، والّتي تؤدي إلى نهايات مسدودة، ولذلك تجنّبُ هذه الطرق سيؤدي إلى بلوغ المشروع إلى بر الأمان. ترجمة وبتصرّف للمقال Picking your Pricing Model.

لكي نُسافر من مكانٍ إلى آخر في الحياة الطبيعيّة، فإننا نعتمد على تشكيلة واسعة من التلميحات من البيئة الفيزيائيّة للمُساعَدة، حيثُ تُجنبنا اللافتة المُناسبة الضياع، وتُساعدنا على الوصول إلى مقصدنا بسرعة، سواءً كان الهدف هو التوفير أو تيسير الأمور. تُشبه اللافتة المُناسبة إذًا المُرشد السياحي، فهو يُعلم الناس بمكانهم السابق ومكانهم الحالي ووجهتم التّالية. نأتي الآن إلى مربط الفرس، يُشبه المسوّق إلى حدٍّ كبير المُرشد السياحي، ما عدا أنّ الرحلة هنا هي مسيرة الزبون إلى الشراء. وكما هو الأمر في الواقع، فنحن نعتمد على مجموعة من أعراف العثور على مسار (wayfinding) -إشارات مرئيّة مألوفة- لإرشاد "سياحنا" باتجاه الهدف الرئيسي. تُستخدم تقاليد العثور على مسار في هداية الزوّار باتجاه الهدف المقصود، وابتداع تجربة أفضل وزيادة معدّلات تحويل الزبائن إلى زوّار (conversion rates). ما هي أعراف العثور على مسار (wayfinding conventions)؟تقاليد العثور على مسار ماهي إلا جُملة من القواعد والرموز، والّتي من شأنها أنّ تساعدنا على توجيه أنفسنا، فهي إذًا تساعدنا على إدراك مكاننا الحالي وما هي المسارات والسُبل المتوفّرة لنا. نحن نعتمد في حياتنا اليوميّة على التلميحات والإشارات كما هو الأمر مع لافتات الشارع، ممرات السيارات في الطُرق العامّة، ممرات المشاة وأرقام الأبنية، وأغلبها مترسّخ في عقولنا بشكل يجعل منا ملاحظتها عند فقدانها فقط. جرّب الاختبار التّالي: ما الّذي يُمكن أنّ يمثله المستطيل التّالي؟ الأمر مُحيّر صحيح؟ حسنًا ما رأيك الآن؟ حسنًا، رُبّما هو باب. إذًا، لماذا فشل الرسم الأوّل في مُهمّته في تمثيل الباب؟ لأنّ مُعظم الأشياء لديها، بما ذلك الأزرار في صفحة الهبوط، وظيفتان: الوظيفة الأولى: التصرّف كالباب من خلال الفتح والإغلاق لتأمين مسار بين منطقتين منفصلتين.الوظيفة الثانية: أنّ يبدو كالباب من خلال الطول والعرض المتعارف عليه، والرموز، وأيّة إمكانيات ومُميّزات (مثل مقبض الباب) متوقّعة من أي باب.سنتحدّث الآن عن تقاليد وأعراف العثور على مسار (wayfinding). لا تجعل المُستخدِم يُفكّرفشل الرسم الأوّل في أنّ يبدو بابًا جعل منا نفكّر -اقرأ كتاب "لا تجعلني أُفكّر" في قابليّة الاستخدام (usability) للمزيد حول هذه النقطة بالتحديد- حيث تخالف الصورة الأوّلى الشروط والقواعد الّتي تميل الأبواب إلى اعتناقها، وذلك سيؤدي إلى تجربة سيئة ومُخيبة للآمال لأي شخص بحاجةٍ إلى حمام. إن دفعت بالمُستخدم إلى التفكير، أنت بذلك تُنشئ مقاومة نفسيّة بين المُستخدِم وقيامه بإجراء وتقلّل من معدّلات التحويل (conversion rates). إن تحسين التحويل الفعّال والمُجدي من شأنه أن ينقل المُستخدِم من حالة الحيرة والالتباس إلى الوضوح والفهم، من الإحباط وخيبة الأمل إلى الراحة والإدراك، من الضياع واليأس إلى الإلهام والتحمّس، بكلمات أخرى إنها تعطي نتائج أفضل في اتخاذ إجراء (action). يتوجّب على صفحات الهبوط أنّ تتضمّن تلميحات تُشير بالمكان السابق للمُستخدم وأين يتوجّب عليهم الذهاب للمُتابعة في سبيل الحصول على نتائج أفضل في اتخاذ إجراء (action). يسّرْ الأمور على المُستخدِم، اظهر لهم بوضوح مكان قدومهم وأين هي وجهتهم القادمة. استخدام التَمَوْضُع والألوان لبناء ما تريد إبرازهالموضع واللّون، أو البناء والأسلوب، هي من بين أوائل الأمور الّتي يجب عليك اختبارها وفحصها في صفحة الهبوط، فهذه الأمور تُساعد الزوّار نافذي الصبر على إدراك ما يُمكنهم فعله وما الّذي يجب عليهم فعله بأسرع ما يُمكن، بكلمات أخرى، يُشكّل الموضع واللّون عنصر أولويّة بصرية (visual priority) في صفحة الهبوط. خذْ المثال التّالي، لافتات المغادرة (exit signs)، أين تتواجد؟ وعندما تتصوّر أحدها، كيف تبدو لك؟ رُبّما كما في الصّورة التّالية: تستخدم لافتات المُغادرة في حقيقة الأمر تقاليد العثور على مسار، فهي تستخدم عادةً حروفًا كبيرة، وتستخدم نفس عائلة الخطوط وتوضع في معظم الأحيان فوق مستوى النظر. ينطبق الأمر بشكل مُشابه على صفحات الهبوط، حيثُ تُحرّض التلميحات المُناسبة على القيام بإجراء، وتساعدك في جذب الانتباه إلى عناصر الصّفحة الأكثر أهميّة. قيّم وحلّل صفحات الهبوط الخاصّة بك بهذه الأسئلة: ما هي الغاية الرئيسيّة من صفحة الهبوط؟ هل جميع أركان التصميم تدعم هذه الغاية؟ هل أزرار الصّفحة تبدو فعلًا أزرارًا؟ هل تبرز هذه الأزرار بالنسبة لباقي أجزاء الصّفحة وتتوسّل المُستخدم لكي ينقر عليها؟ استخدم المكان الصحيح واللّون المُناسب في صفحة الهبوط لإنشاء تسلسل هرمي بين أركان وعناصر الصّفحة. مثال سيّء لتوزيع الألوان والتموضعيُلاحظ في المثال التّالي في صفحات أحد الشركات الاستثماريّة التّالي: تُشير الأزرار الثلاثة إلى وجود ثلاثة إجراءات يُمكن إتخاذها: الرجوع إلى الخلف "back" الإلغاء "cancel"، أو الاستمرار "continue". ولكن يوجد بعض الملاحظات: يبدو زر المُتابعة "Continue" معزولًا عن أزرار الانتقاء (radio button)، فليس من المُفترض أنّ يبحث المُستخدم في أرجاء الصّفحة للمُتابعة، بل يجب على الأزرار أنّ تتوضّع بطريقة وبأسلوبٍ يسمح للمُستخدمين على الفور بإرسال معلوماتهم، وغالبًا هذه الأزرار ما توجد أسفل أو يسار عناصر الإدخال.تطرح تسميات الخطوات إشارات استفهام، لماذا الخطوة الخامسة تحمل العنوان "Next steps" (الخطوات التّالية)؟ أليست النافذة الأخيرة من المُرشد (wizard) من المُفترض أنّ تكون الخطوة الأخيرة، هل هذا يعني وجود خطوات إضافيّة؟ إن كانت عناصر صفحة الهبوط تحث على طرح أسئلة من هذا النوع، فمن المُفترض إما الإجابة على هذه الأسئلة مُباشرة وبوضوح، أو ربّما من الأفضل التخلّص منهم.الألوان غير منطقيّة، حيثُ يرتبط اللون الأحمر بالمنع والتوقّف، وبالتردّد والحذر وحتّى بالمخاطرة والمجازفة، فاستخدام الزرّ الأحمر مع "Continue" يدفع بالمُستخدمين بالتوقّف والتفكير لقراءة المحتوى النصّي للزرّ قبل المُتابعة.مثال أفضل من موقع Netflixيخلط ويمزج تصميم موقع Netflix من اللون الأحمر بشكل مُفرط، ولكن تُقدّم صفحات الهبوط الخاصّة بالموقع نموذجًا أفضل في استخدام الألوان والتموضع بشكل مجدي وفعّال. تجعل الصّفحة التّالية من إجراء المواصلة والمُتابعة واضحًا وضوح الشمس. هل هناك مجال لإضافة تحسينات للصفحة السابقة؟ استخدم زر خالٍ من الغموضفشِلَ الزرّ "Continue" في صفحة Netflix في تفسير وتوضيح أين سيتوجّه المُستخدم بعد عمليّة النقر. وإن النسخة المُحسّنة من الزرّ ستبيّن للمُستخدم ما قد سيكون خلف الباب، أو أين ستكون وجهتهم التّالية بعد النقر، بمعنى آخر يجب على الزرّ أنّ يكون جليًّا ويتحدّث عن نفسه ويتوقع (ويُجيب) أيّة أسئلة قد تخطر في بال الزائر: ما الّذي سيحدث إذا قمت بالنقر؟هل سيسمح لي الموقع بالاطلاع على المزيد عبر تحميل ملفّ PDF، أو من المُفترض أنّ أطلب نسخة عرض (demo)؟هل سيطلب الموقع معلومات بطاقة ائتمان أم يُمكنني الشروع باستخدام النسخة التجريبيّة مُباشرةً؟هل هذا النموذج (form) هو النموذج الأوّل والوحيد أم هو الأول من أربعة نماذج مُتتالية؟تجنّب استخدام أزرار مُبهمة ومُضلّلة بأي حالٍ من الأحوال، سواءً من ناحية الشكل أو ما قد ينتج عند النقر عليها. بل اختر أسلوبًا مُحدّدًا وواضحًا، مثل: "اطلب نسخة عرض" بدلًا من أسلوبٍ تكسوه الضبابيّة والغموض مثل: "ابدأ الآن". قد لا يبدو استخدام "ابدأ الآن" خيارًا سيّئا، ولكنه يُضلّل المُستخدم ومن المُحتمل جدًا أنّ يُقدّم تجربة استخدام صعبة ومُثبّطة عندما يُدرك المُستخدم أنّه لن يستطيع البدء حالًا والآن، بل يجب عليه طلب نسخة عرض أو التواصل مع المبيعات. إن الأهم من هذا كله هو الإخفاق في بناء الثقة مع المُستخدِم. إن التحسين في بناء الثقة يكون من خلال التحسين في كسب العوائد وليس الحصول على المزيد النقرات. هل زِرّ صفحة الهبوط الخاصّة بك إشكالي وغامض؟ إذًا فقط فوّتَ عليك فرصة بناء الثقة مع المُستخدِم. كن كالمُرشد السياحي وأفسح المجال للمُستخدِمإن المُرشد السياحي الكفء هو المُرشد صاحب الظلّ الخفيف والّذي لا تتذكره، هو من يدعك تعيش الحالة والتجربة بكامل تفاصيلها وبنفس الوقت يقوم بمهامه على أكمل وجه، فصوته وإرشاداته لن تصرف نظرك عن تاريخ المدينة، وهو من يخطو خطوات رشيقة لا سريعة ولا بطيئة، فلا هو أجهدك ولا هو أضجرك، فكل شيء مثالي وكما تشتهيه. في الجهة المُقابلة يُساعد استخدام التقاليد والأعراف في العثور على مسار على ابتداع تجربة تنسي الزائر أنّ هناك فريقًا من المُسوقين والمطورين يعملون بجدٍ وراء الكواليس في محاولة لصنع تجربة خالية من المقاومة النفسيّة ولا تشوبُها شائبة. يجب على صفحة الهبوط أن تخطف الأنفاس وتسرق الأذهان. يجب على الزوّار أنّ لا يتذكّروا عدد الخطوات المطلوبة في إنشاء الحساب أو استكمال عمليّة الشراء، هم يعرفون فقط أنّ العمليّة كانت بسيطة وميسرة وسهلة، وهذا ما سيخبرون به أصدقائهم ومعارفهم. ترجمة وبتصرّف للمقال Wayfinding Conventions: Design Your Landing Pages to Guide Visitors to Action. حقوق الصورة البارزة: Computer vector designed by Freepik.

تخيّل السيناريو التّالي: بعد أن قمت بالعمل جاهدًا على تحسين الإنشاء (copy) الخاص بصفحة الهبوط، أصبحت صفحةً مقنعة وموجزة، وتخطف الأنفاس وتأسر القلوب، وتهدف إلى التركيز على الزائر قبل كل شيء. قمت بإطلاق الصفحة، بدأ تدفّق الزوّار من الحملة، وبدأت في رؤية ثمرة مجهودك الطيب.يمر يومٌ أو يومان، تتفحّص الإحصائيات وابتسامة تملأ وجهك، ولكنّك تتفاجأ بوجود أمر غريب.تحسّنت النتائج بالفعل، ولكنّها ليست بذلك الانتعاش الذي كنت توقعته لها.ما هي المشكلة وما الذي حدث؟ ربما تكمن المشكلة في أنك ركزت على الإنشاء/مُحتوى الصّفحة ولم تهتم اهتمامًا كافيًا بالتصميم. سنتناول في هذا المقال أفضل الأساليب في تصميم صفحة هبوط، والتي يمكنك استخدامها لتحصل على معدل تحويل (conversion) أعلى وتنقل صفحة الهبوط الخاصّة بك إلى مستوى متقدم من الاحترافيّة والفعاليّة. 1. اختر ألوانًا متباينةيوجد الكثير من الدراسات حول ألوان زِرّ الدعوة إلى إجراء (call to action)، ويُصر البعض على لون واحد دون استخدام البقيّة، ولكن غالبًا إنه تباين اللون الّذي يؤدي إلى الزيادة في التحويل (conversion). يُمكنك عبر استخدام ألوان مختلفة، ولكن مُتناسقة، جعل عناصر محدّدة من صفحة الهبوط تبرز عن بقية العناصر الأخرى، بهدف إنشاء ترتيب بصري يخبر الزائر ما هو المهم وما هو غير المهم في الصفحة. انظر إلى نفس الصورة السابقة بعد أنّ تمّ تغشيتها ولاحظ ما هو الجزء الأبرز فيها: يبرز في الصورة السابقة زِرّ الدعوة إلى إجراء (call to action) من خلال النص ذو الخلفيّة الحمراء، مما يجعله جليًا للزائر. يمكن استخدام طريقة أخرى للفت الانتباه وجذب النظر إلى النص وهي باستخدام التباين الوزني للخط، وذلك عبر تثخين/تعريض الكلمات الّتي ترغب في إبرازها وتثبيتها في ذهن الزائر، وكما يمكن استخدام تباين اللون مع التباين الوزني للخط كما في التّالي: ملاحظة: لا يعجبني كيف قام موقع pushingsocial بتوجيه الأجهزة اللوحية بالجهة المعاكسة للنص، وأعتقد أنّه من الجدير القيام باختبار عبر جعل الأجهزة اللوحية تواجه إنشاء (copy) صفحة الهبوط لجذب انتباه الزائر إلى داخل الصّفحة. 2. استخدم أناس حقيقين من أجل نتائج أفضلفشل موقع Webex في استخدام الصور الفوتوغرافية في صفحات الهبوط، فلا تستخدم هذه الصور في حشو المساحات الفارغة، بل تُستخدم في إضافة قيمة ذات مدلول إلى صفحة الهبوط عامّة. تمّ حشو مساحة رئيسية وكبيرة بصور لا قيمة لها بدلًا من استخدام صورًا لزبائن حقيقين استخدموا خدمتهم بالفعل. تكمن المشكلة في أن الزوّار عادةً ما يتجاهلون الصور المحشورة الّتي تحتوي على أناسٍ من عامّة البشر أو الّتي تحتوي على أشياء مجردة لا تحمل مدلول أو قيمة. يعني هذا أن موقع Webex رمى بثلثي المساحة العلويّة عرض الحائط والّتي كان من المُمكن استخدامها في إقناع وحثّ الزوّار على التسجيل. ينطبق نفس الأمر على التوصيات/الشهادات (testimonials) فاستخدام صور فوتوغرافيّة حقيقة بدلًا من صور خُلّبيّة (place holders) أو بدون صور على الإطلاق، يمكن أن يزيد من تأثير التوصية ويصنع فرق حقيقي في معدّل التحويل (conversion rate). أريد الوصول إلى نقطة هامّة هنا، تأكّد من أن كل صورة على صفحة الهبوط لها غرض، وإن كانت الصورة لا تضيف قيمة إلى الصّفحة، قم بإزالتها على الفور. 3. بيّن للزوّار أين يتوجّب عليهم النّظرلا يهم في الصورة الفوتوغرافيّة جاذبيّة الشخص فيها فقط، بل ما يفعله الشخص في الصورة يمكن أن يساعد في التأثير على المكان الذي سينظر إليه الزائر، ناهيك عن الانطباع الذي ستصنعه الصورة. إن كان الشخص الذي في الصورة ينظر إلى الكاميرا، أو باتجاه النص، أو بعيدًا عن النص، هذا من شأنه أن يصنع فرقًا ملحوظًا في كيفيّة تعامل الزوّار مع صفحة الهبوط. لاحظ في المثال السابق صورة وارِن بَفِت (Warren Buffet) وهو ينظر مباشرة إلى العنوان الرئيسي، حيثُ سيساعد ذلك الزوّار إلى النظر على العنوان أوّلًا. يُمكنك جذب انتباه الزائر ودفعه نحو التركيز على نداء الإجراء (call to action)، عبر استخدام صورة شخص ما ينظر إلى العنوان أو إلى المنتج. كن حذرًا مع ذلك، فهذا التلميح البصري ليس ببديل عن عنوان ذي مدلول، لذلك اجتهد في إيجاد عنوان ملائم قبل الشروع في اختبار صور مختلفة. 4. استخدم التلميحات البصريّةاسترعاء انتباه عملائك نحو الاتجاه المطلوب ليس بالأمر الهين دائمًا، فبالإضافة إلى استخدام الوجوه الموجهة في صفحات الهبوط الخاصّة بك، يمكنك استخدام تلميحات بصريّة مثل الأسهم والإطارات لجذب الانتباه إلى نماذج (forms) التسجيل، أو إلى العناوين الرئيسية، أو إلى توصيات مميّزة. انظر كيف قام موقع Salesforce باستخدام سهم في نموذج التسجيل لجذب نظر الزائر بشكل لا إرادي من العنوان ومعلومات الدعم إلى هدف الصّفحة الأساسي، كما قام بإحاطة النموذج (form) بصندوق أزرق بلون غامق لكي يبرز في تصميم صفحة الهبوط. يُمكن أيضًا أن تستخدم إطارًا للعنصر في الجذب إلى القيام بإجراء (call to action) كما هو واضح في المثال التّالي: 5. لا تنس تطابق التصميمكما يتضح في صفحة الهبوط التالية أنها ليست مثالية وذلك لأنها تتضمّن على شريط تنقل رئيسي، ولكن هناك نقطة أخرى في الصفحة هي غايتي منها، وهي تطابق التصميم. يشبه مفهوم تطابق التصميم مفهوم تطابق الرسالة ولكن من الناحية البصرية، والذي يعني الحفاظ على عناصر التصميم -في الإعلانات المدفوعة وصفحات الهبوط بالتحديد- على التطابق من الناحية البصريّة و من الناحية الإنشائيّة. لا يجب على الزائر أن يتفاجأ بما قد يراه لدى انتقاله من صفحة/رابط الإعلان إلى صفحة الهبوط، فعندما يكون كامل مسار حملة التسويق مُترابطًا ومُتناسقًا وقائمًا على أساس واحد، سيُمضي الزائر وقتًا أقل في فهم الصّفحة ووقت أطول بالتركيز على رسالتك وهدفك الرّئيسي. جرّب استخدام ألوانًا متشابهة، نفس الأيقونات والصور في كامل حملتك الإعلانيّة، لتتأكد من أن الزوّار يفهمون كل خطوة. 6. اختر الألوان المناسبةتريد أن تترك أثرًا وردة فعل قويّة؟ استخدم ألوانًا ساطعة في صفحة الهبوط وستجلب نظر الزوّار بسرعة، ولكن حذارِ، اللون غير المناسب يمكن له أن يؤثر تأثيرًا سلبيًا على الزوّار. تحدثنا سابقًا عن تباين الألوان، ولكن اعلم أن الألوان التي ستختارها من أجل مظهر وجو الموقع العام يمكن لها أن تُغيّر من الإحساس الذي يبعثه الموقع في نفسيّة الزوّار. مثال: إن كنت منتجك عبارة عن كراسي المكاتب المخصّصة للمدراء، هل تُراك ستستخدم اللون الزهري في التصميم، طبعًا لا، وذلك لأن اللون الزهري لا ينقل الإحساس الصحيح إلى الزائر. يستخدم موقع Gotomeeting ألوانًا ساطعة جدًا تُطابق نمط وأسلوب المنتج المعروض، هل تظن أن تصميم صفحة الهبوط هذه سيكون لها نفس التأثير لو كانت باللون البنفسجي/الأرجواني؟ 7. استخدام وسائل بصريّةقد تجد صعوبةً في بعض الأحيان في شرح منتجك باستخدام القوائم (bullet points) والنصوص فقط، ويساعد في هذه الحالة استخدام الصور أو الرسوم البيانيّة في التوضيح وتوصيل الفكرة بسرعة. قام موقع Crazy Egg بتنفيذ هذه الفكرة بشكل جميل عبر استخدام الصور في توضيح فوائد الخرائط الحراريّة (heat maps)، والذي يعتبر مفهوم صعب الشرح لمن لم يعلم عنه من قَبل. لا تفترض أبدًا أن الزائر سيفهم فائدة منتجك بسهولة ويسر، إن كنت تستطيع دعم فكرتك بالصور فافعل، سيجعل ذلك من السهل توصيل فائدة منتجك وخاصّة إلى الزوّار الّتي تفضل المرئيات. 8. استخدم العناصر ذات الحجم الكبيرهل ترغب في لفت النظر لشيء هام في صفحتك؟ جرّب أن تجعله كبير الحجم، بمعنى اجعل العنصر كبيرًا جدًا حتّى يتمكن أي شخص من رؤيته الكبير قبل الصغير والعجوز قبل الشاب. يستخدم موقع Intuit هذا الأسلوب في صفحته عبر جعل الدعوة إلى إجراء ثلث عرض الصّفحة، وهذا الأسلوب مع أسلوب اللون الساطع سيجعل من المستحيل من زِرّ نقطة التحويل أن يَمر مرور الكرام على الزائر. تأكّد من استخدام هذا الأسلوب للعناصر التي تريد إبرازها عن بقية العناصر، فالعنصر الأكبر سيكون في أعلى الترتيب البصري للأمور الهامّة، ولكن أن تجعل عناصر عدّة كبيرة الحجم، إذًا فقد قمت بغلطة الشاطر، وذلك من خلال جذب الانتباه إلى عناصر عدّة بشكل متساوي الأهميّة. لن يكون زيادة حجم الأزرار أو النماذج العلاج الشافي والوافي دائمًا، فمن الممكن أن تحصل على نتائج عكسية، الأمر الذي سيؤدي إلى انخفاض في التحويل (conversion)، ولكن يستحق الأمر في المجمل التجربة. 9. استفد من المساحاتما هو ذلك الشيء الذي يربط أركان صفحة الهبوط فيما بينها؟ لا يجب أن يكون المزيد من الفوضى والصور والخطوط. إنها المساحات البيضاء. لا يساعد استخدام المسافات فقط في تنظيم عناصر التصميم في صفحات الهبوط، ولكنه أيضًا يمكن أن يُستخدم في التأكيد على أهمية شيءٍ ما، مثل نداء الإجراء (CTA) أو صورة المُنتج. تساعد المساحات البيضاء whitespace أيضًا في سهولة قراءة الصّفحة، فإن كان يوجد العديد من النصوص محشورة مع بعضها البعض في الصّفحة وبدون أي مسافة بين العناصر، سيجعل من القراءة أمرًا مرهقًا للغاية. يُمكن أن تزيد من المساحات البيضاء في صفحة الهبوط عبر استخدام فقرات (paragraphs) قصيرة وقوائم (bullet style lists)، طبعًا لا تحوّل صفحتك إلى قائمة طويلة ولا تستخدم فقرات من ثلاث كلمات، ولكن في المجمل هذه العناصر هي عناصر ملائمة لإضافتها إلى الصّفحة لتصبح مقروءة بشكل أفضل. لاحظ كيف جلب موقع LinkedIn النظر إلى العناوين الرئيسية والمحتوى وشعارات الشركات في أسفل الصّفحة من خلال إضافة مساحات بيضاء بين العناصر في صفحة الهبوط، كما قام أيضًا بجعل الصفحة سهلة القراءة عبر استخدام كرات تعداد القائمة في المنتصف. كف عن الكلام وابدأ بالتطبيقيجب أن تبدأ بالتطبيق، ابدأ بإجراء اختبارات على صفحات الهبوط وقم بالتعديل على عناصر التصميم الهامّة. يمكنك الحصول على صفحة هبوط مجدية وفعّالة فقط عندنا تستطيع أن تجمع بين التّصميم الخلاب والإنشاء الصحيح، الأمر الذي سيصل بمعدّلات التحويل إلى أعلى مستوياتها. ترجمة وبتصرّف للمقال 9 Landing Page Design Techniques That Will Make You a Conversion Hero لصاحبه Eric Sloan.

سيتطرّق هذا المقال إلى الإجراءات الأمثل في كيفيّة تصميم أزرار فعّالة في صفحات الهبوط، عن طريق دراسة بعض الحالات وتحليلها بالأمثلة التوضيحيّة والرسوم اللازمة. ما هي أزرار Call to action يُمثّل الدعوة إلى إجراء (call-to-action) في صفحة الهبوط القشة الّتي يُمكن لها أن تكسر ظهر البعير، وذلك بين معدّل الارتداد (bounce rate) ومعدّل التحويل (conversion rate)، عندما تسأل شخصًا ما أن يفعل شيئًا ما على الإنترنت، فلا بُد له من المرور عبر نقطة التحويل CTA لكي يتمّ تنفيذ المطلوب (التحويل)، بغض النظر عما إذا كنت تطلب منه تنزيل ملفّ PDF أو ملئ نموذج (form)، أو شراء منتج، أو حتّى فقط النقر للانتقال إلى صفحة أخرى. تملك الأزرار ركنان أساسيّان هما: التصميم (design) والإنشاء (copy) -وهو ما يكتب ضمن الزر. يَملك كلا هذان العنصران تأثيرًا مباشرًا على معدّلات التحويل (conversions)، مع ذلك فهما يلعبان دورين مختلفين في سيناريو التحويل. إن تصميم الزر هو التلميح البصري الذي يُساعد في جذب انتباه الزبائن المحتملة إلى CTA، بمعنى آخر، إن تصميم الزر يغطي الإجابة على سؤال: "أين لي أن أنقر"؟ بينما إنشاء الزر (button copy) في الجهة المقابلة يساعد الزبائن المحتملين على اتخاذ قرارهم وفي آخر لحظة والإجابة على سؤال: "لماذا يجب أن أنقر على هذا الزر"؟ سيتم التركيز في هذا المقال على تصميم الزر، والمرور سريعًا على الإنشاء الخاص بالزر، وربما نتحدّث عن الإنشاء بالتفصيل في مقالات قادمة. البداية مع مثال من الواقعسيتم تجاهل اسم العميل في المثال، ولكن العميل الذي سأتحدث عنه هو أحد أكبر المواقع التجارية في أوربا، والمنتج عبارة عن الفخار المزخرف باليد. استطعنا زيادة المبيعات في صفحات المنتج - ليس فقط معدّل نسبة النقر إلى الظهور CTR- إلى 35.81% عبر تغيير لون وشكل زر CTA. تفسّر هذه الدراسة بشكل مفصّل مقدار تأثير تصميم أزرار CTA على معدّل التحويل (conversion rate)، فإن قمت بتصميم أزرار ملائمة مع التصميم بدون الإمعان في التفكير في مدى وسهولة النقر عليها، فأنت كمن يُلقي بماله في مهب الرياح. لا يوجد زر كامل ومناسب لكل الحالاتتأتي الأزرار بكافة الأحجام والأشكال والألوان، ولا يوجد في الحقيقية حجم محدّد يُلائم جميع الحالات ويناسب جميع صفحات الهبوط. يحب بعض الناس القول "لا تستخدم اللون الأحمر، اللون الأحمر لون المنع والحظر" أو "الأزرار الخضراء هي الأفضل". قد يُعتبر هذا النوع من التعميم مُلائمًا للبعض، ولكنه نادرًا ما يعكس الواقع، فما سيعمل بالشكل المطلوب يتغيّر على حسب الحالة، وذلك اعتمادًا على سياق وتصميم صفحة الهبوط. تفوّق الزر الأخضر على الأزرق في الاختبار السابق، ولكن لا يعني هذا أن الأخضر دائمًا أفضل، فقد رأيت كثيرًا من الاختبارات كانت فيها الأزرار الزرقاء أو الحمراء متفوّقة على الأزرار الخضراء. ما يهم هو إبراز الزرإن أفضل ما يُمكن عمله مع الأزرار لتحسين أدائها هو إبرازها عن بقية أجزاء الصّفحة، لكي يصبح من الهين على الزبائن المحتملين إيجاد الزر بمجرّد اتخاذهم القرار في الاستمرار إلى الخطوة التّالية، إن كانت صفحة الهبوط في أغلبها خضراء، فإن زرًا باللون الأخضر على الأرجح لن يعمل بالشكل المطلوب، لأنه سيكون من الصعب تمييز CTA من بقيّة أجزاء الصّفحة. يُمكن معرفة ما هو الأنسب استخدامه مع صفحة الهبوط عبر اختبار نسخ مختلفة من الزر عمليًّا مع الزبائن المحتملين. ما هو اللون الأنسب إذًا؟إن نصيحتي الأولى في اختيار الألوان هي استخدام الذوق العام والألوان المتباينة عند تصميم أزرار صفحات الهبوط، ومن الممكن استخدام الاختبار المعروف بـِ "squint test" وذلك عبر استعرض التصميم بكامله، وتغميض العينين نصف تغميضة ومن ثم التدقيق في زر CTA ومدى بروزه في الصّفحة. مثال من الواقع في اختيار لون زر CTAقمنا بزيادة معدّلات النقر إلى الظهور CTR في أحد المواقع العقاريّة إلى أكثر من الضعف عبر إعادة تصميم زر CTA الرئيسي، وذلك بتحويل لون الزر من بني معتم إلى برتقالي متوهج. إن تمّ إجراء اختبار العين المغلقة نصف تغميضة على نسختي هذين الزرين، سيكون من الواضح أيهما يبرز في الصّفحة أكثر من الآخر. أبدأ عادةً عبر اختبار الزر الأخضر أو البرتقالي، لأنهما عادةً ما يقدمان نتائج طيبة في الاختبار، مع العلم أني لا أعتقد بوجود أي سبب نفسي في قوة هذين اللونين، كل ما في الأمر أنهما يبرزان بشكل أكبر في معظم صفحات الهبوط اعتمادًا على التصميم الدارج، وكما أسلفت سابقًا يرتبط الأمر بالسياق العام للتصميم فقط، ودعني أخبرك بأمر، لقد رأيت اختبارات كان فيها الزر البنفسجي/الأرجواني متفوقًا على كلا من الأخضر والبرتقالي. أهمية العامل البصري في أزرار صفحات الهبوطتستطيع المؤثرات البصريّة أن تملك تأثيرًا على عدد النقرات الّتي يحصل عليها الزر، ولكن يجب استخدام هذا الأسلوب ببعض من التروي، حيث أنّه حتى التأثيرات الصغيرة نسبيًا يمكن أن يكون لها تأثير كبيرًا ومفاجئ، سلبيًّا أو إيجابيًّا. أمثلة من الواقع العملي في استخدام الألوان مع الأزرار في صفحات الهبوطقمت باستعراض أحد الأمثلة سابقًا والّتي تفوّق بها الزر البرتقالي مع سهم أخضر بشكل ملحوظ على الزر البني، مع العلم أنّ المصمم لم يعجبه الزر الجديد رغم التحسّن الذي قدّمه على معدّل التحويل. كانت حجة المصمم أن السهم الأخضر قبيح، ولكن رؤيتي من الناحية التسويقية كانت أن السهم الأخضر سيجعل الزر ملحوظًا بشكل أكبر وبالتالي عدد نقرات أكبر. كان من المُمكن الدخول في جدال عقيم بين ما يفضل كلٍ منا، ولكني بدلًا من ذلك قرّرت التحقيق فيما إذا كان للسهم أثرًا إيجابيًّا أم لا، وعليه قمت بإعداد اختبار A/B بين الزر البرتقالي مع سهم أخضر على أنّه النسخة الأصليّة (control) وبين الزر البرتقالي بدون السهم على أنّه نسخة المعالجة/الأمثولة (treatment). اتضح لي أخيرًا أن الأمثولة (treatment) بدون السهم الأخضر أدّت أداءً 12.29% أسوء من النسخة الأصليّة (control) ذات السهم الأخضر. يُمثل المثال التالي اختبارًا قمت بإجرائه على صفحة البداية لأحد المواقع التي تقدم خدمة بيع وشراء الهواتف المستعملة. افترضت هنا أنّه بإمكاني إبراز الزر وزيادة معدّل النقر إلى الظهور CTR عبر تغيير لون خطّ الزر من الأسود إلى الأصفر، وعليه كانت النتائج عكسية تمامًا، فبعد تغيير لون الخط تناقص CTR بمقدار 18.01%. يَتضح من هذا المثال كيف أن التعديلات البصريّة كان له أثر سلبي مُباشر على التحويل، ويتضح أيضًا أنه كلّما قلّ استخدام الألوان كلّما كانت النتائج أفضل. يكون من الصعب في بعض الأحيان توقع هذه النتائج بدون اختبارها عمليًّا، ولكن نصيحتي هي الحفاظ دائما على البساطة في التصميم وضمن المعقول، فمن السهل جدًا المبالغة في التصميم، ولكني وجدت في المجمل أن البدائل (variants) ذات الإنشاء (copy) المُناسب أعطت نتائج أفضل من البدائل المُتصنعة في التصميم. يوضّح المثال التالي ومن أرض الواقع كيف أن زرًا أخضر بسيطًا مع إنشاء (copy) ذي مدلول تفوّق على البديل الفنّي بمقدار 10.94%. الحجم مهم ولكن الحجم الكبير ليس الأفضل دائمًارأيت الكثير من المصممين الذي يرتكبون هذا الخطأ مرارًا وتكرارً، وهو تصميم أزرار مثاليّة من الناحية الجماليّة والإبداعيّة، ولكنها بعيدة كل البعد عن التحويل (conversion)، فمن المهم أن يكون الزر كبيرًا بشكل كافي ليكون بارزًا بشكل واضح للعيان كعنصر سيتمّ الضغط عليه على صفحة الهبوط، ولكن لا يعني هذا أن الأكبر هو الرابح دائمًا. يوضّح المثال التّالي ومن الواقع العملي كيف أن الزر الكبير أدّى في الحقيقة إلى نتائج سلبيّة في معدّل التحويل في صفحة الدفع. أعتقد أنّه ما حدث هنا، أن الزر الكبير أصبح كبيرًا للغاية، وأصبح يلفت النظر أكثر من اللازم، الأمر الذي جعل من الشريحة المستهدفة تشعر بشيء من الإكراه إلى استكمال التحويل. كما أسلفت سابقًا من المُمكن استخدام أزرار كبيرة ولكن يجب الابتعاد عن المُبالغة، والاختبارات هي دائمًا الفيصل والحكم في تحديد الحجم الأمثل. اهتم بإنشاء (copy) الزرسمعت العديد من المُصممين يقول: "لا أحد يقرأ إنشاء الزر"، هذا الأمر غير صحيح بالمرّة، لدي قائمة من حوالي 30 اختبار تُثبت العكس، بمعنى آخر إنشاء الزر له تأثير كبير على معدّل التحويل والناس تقرأه بالفعل. وسأزيدك من الشعر بيتًا، فبعيدًا عن العنوان الرئيسي، فإن الإنشاء الخاص بزر CTA هو أحد الأجزاء القليلة الّتي يمكن القول عنها أنها تُقرأ من قِبل الزبائن المحتملين بشكل شبه مؤكّد. مثال من الواقع العملي حول الإنشاء الخاص بزر CTAقمت أنا وزميلي هنا في الموقع مؤخرًا بإجراء اختبار A/B على صفحة هبوط حملة الدفع مقابل النقر PPC بهدف زيادة عدد الزبائن المحتملة للتسجيل في فترة 30 يوم التجريبيّة. قمنا بعمل شيء وحيد فقط، وهو تعديل كلمة واحدة في الإنشاء (copy)، حيث قمنا باستبدال الضمير "your" إلى الضمير "My"، وبعد إجراء الاختبار لمدّة ثلاثة أسابيع، اتضح لنا أن الإنشاء الخاص بزر الأمثولة (treatment)، والّذي كان "Start my free 30 day trial" زاد من معدّل CTR بمقدار 90%. في العديد من الحالات فإن الإنشاء الأفضل قد يكون مطنبًا (يحتوي على كلمات كثيرة) وغير ملائم مع التصميم، ولكن هذا لا يهم في عامل التسويق طالما أن هذه النسخة تحصل على معدلات تحويل أعلى، ولذلك من المهم جدًا أن تكون متقبّلًا فكرة استخدام الإنشاء الطويل عند تصميم الأزرار. ما هي الخطوة التّاليةراجع صفحة الهبوط الخاص بك وأمعن النظر في أزرار CTA، هل تجدها ملفتة للنظر وبارزة عن بقيّة أجزاء الصفحة؟ هل من الهين تميزها كزر؟ هل هي موجودة في الصّفحة لاستكمال التصميم أم لها مدلول؟ قم باختبار التغشية (العين المغمضة بشكل غير كامل) لصفحة الهبوط وحدّد فيما إذا كان من المُمكن تغيير اللون أو التأثير البصري على الزر لجعله ظاهرًا للعيان. فكّر وراقب بتمعّن، وجرّب بعض الأفكار في تصميم أزرارٍ جديدة، واستخدم بعض الأدوات المجانيّة مثل buttonoptimizer.com لتصميم عدد من الأمثولات (treatments) الّتي يُمكن استخدامها في اختبار صفحة الهبوط. ترجمة وبتصرّف للمقال How To Design Call to Action Buttons That Convert لصاحبه: Michael Aagaard.

قد تستغرب من هذا الرقم الكبير، وربما تكون محقًّا في ذلك، عشرون ليس بالرقم الصغير، ولكن هذه القائمة هي أكثر من مجرّد تعداد. يَعود السبب في عرضي لك هذه القائمة هو لكي أعبّد لك الطريق وألفت نظرك نحو الممارسات غير العمليّة قدر المستطاع، وذلك فقط لكي يتسنّى لك القيام بحوار مع نفسك ومناقشة طريقة توليك للمشاريع، ولتجري تقييمًا للمنهجيّة الّتي تستخدمها في سبيل تجنّب الدخول في مشاكل لا يُحمد عقباها. سنستعرض الآن تلك الخطايا وسأبدأ بالمعضلة الأبرز من بين جميع المشاكل: 1. الرضى بالسعر المنخفضإن التقاضي بأقل مما تستحق لهو خطأ شائع بين مُصمّمي الوِيب المُستقلين، خاصة أولئك المبتدئين منهم، قد تبدو استراتيجيّة كسر الأسعار أسلوبًا تسويقيًّا ملائمًا في بعض الأحيان، ففي نهاية الأمر كلما خفضت السعر زاد الطلب. لا تجري الأمور دائمًا بتلك البساطة لسوء الحظ (إن لم نقل أبدأ)، أوّلًا، الوقت من ذهب وأن تبيع الوقت بفُتات الدولارات وبأقل مما تستحق سيجعلك تشعر بعدم الارتياح عند تنفيذ المشروع، وسيتفاقم هذا الأمر تدريجيًّا. ثانيًا، كما أتضح ليس بالأمر الصعب الحصول على عملاء مستعدين للدفع مقابل خدماتك، حيث يوجد مكان للجميع في السوق، فكّر بالأمر، فيوجد الكثير ممن هو مستعد لشراء ساعة رولكس بقيمة 10,000$. جرّب الأسلوب التالي بدلًا من تقييد أجرك خشية عدم الحصول على عمل: حدّد معدّلًا لأجر الساعة الواحدة يرضيك كمُصمّم مُستقل محترف ويجعلك تعمل مرتاح البال.تأكّد من أن السعر النهائي للمشروع يعكس الرقم المقدّر للساعات الّتي يتطلّبها المشروع من وقتك.تبدو الفكرة عاديّة وبسيطة ولكنها الطريقة الوحيدة للبقاء مرتاح البال في مسيرتك كمستقل. 2. عدم العمل بالمجانقد يبدو الأمر غريبًا، فبعد الخطيئة الأولى ودفعي بك إلى زيادة الأسعار، أعود الآن بدفعك نحو العمل بالمجان. سايرني قليلًا، فأنا لا أقصد أنّ تُقدّم خدمات مجانيّة لكل من هب ودب، ما أقصده هو وجوب تقديم مساهمات إلى المجتمع والقيام بأعمال خيريّة فقط لا غير. فعلى سبيل المثال، رُبّما تحتاج إحدى الجمعيات الخيريّة الترويج إلى حملتها القادمة، لم لا تقوم بتصميم الموقع لهم ما دمت تستطيع ذلك، ليس بالضرورة أن يكون الموقع خاطفًا للأنفس والأذهان، مع ذلك سيكون أجمل من لو قاموا بتصميمه بأنفسهم. ما أريد قوله في عرضي للخطيئة الأولى والثانية، هو أنه عندما تريد أن يُدفع لك مُقابل عملك فحدّد سعرًا تجده مناسبًا لقدراتك ولكن إن كنت تريد تقديم جميل لشخص ما فلا تتقاضى أجرًا مقابل تلك الخدمة. 3. على قد لحافك مد قدميكيرتكب هذه الخطيئة جميع المستقلين المصممين وغيرهم. إن الحالة والسيناريو الذي يفرضه العمل الحرّ على المُستقل من ناحية عدم وجود مدير وعدم مقدرة المستقلّ على التكهن بالأرباح الشهريّة، يجعل من رفض العروض المقدّمة من العملاء أمرًا صعبًا للغاية. يقودنا هذا الأمر في بعض الأحيان إلى طريق مسدود ويدفعنا إما للعمل في وقت متأخر ليلًا أو الفشل في تقديم أفضل ما لدينا. تريد حلًا لهذه المشكلة؟ حدّد سقفًا للمشاريع التي تستطيع القيام به شهريًا، وما إن تخطيت هذا الحدّ، ابدأ بتأجيل جديد العملاء إلى الشهر التّالي، ستتفاجأ أنّ معظم العملاء مستعدون إلى الانتظار وخاصة بعد أنّ أصبحوا يثقون بك وبعملك. 4. تقديم خصومات بدون سببتعتبر الخصومات طريقة تسويق مجدية، وطالما كانت كذلك وفي أي سوق متخصّص (niche) أو أي سوق عامّةً، وتنامت هذه الثقافة مع العملاء بطبيعة الحال وأصبح من غير الممكن تجاهلها. ولكن تُخفض الخصومات الفجائيّة من قيمة عملك، ففي نهاية المطاف أنت قيّمت عرض العمل بناء على حجم العمل الّذي سيتطلبه المشروع، وفي هذه الحالة لا يوجد مجال للحسومات هنا. يوجد حلّ أفضل، عندما يطلب أحد العملاء حسمًا، وافق لا بأس، ولكن أيضًا اقترح استبعاد جزئية من المشروع بشكل يتوافق مع السعر الجديد. 5. تصميم ما تظنه صحيحًا بدلًا من تلبية حاجات العميلإن إدراك أن ما تقوم ببنائه يجب أنّ يكون موافقًا لاحتياجات المستخدم أولًا وثانيًا إرضاء الأنا خاصتك هو أحد أصعب الأمور الّتي قد يمر بها مصمم الويب المستقل. ولذلك عندما يقترح العميل تغييرًا ما لست مقتنعًا به، راجع نفسك وتأكّد فيما إذا كان دافعك في عدم تقبّل تعديلاته هو نزعة شخصيّة أم وجهة نظر موضوعيّة غرضها مصلحة المشروع. 6. استخدام الصور الجاهزة (stock) بإفراطيجب عليك الحذر في استخدام هذه الصور، فمن خلال تجربتي وخبرتي المتواضعة، أرى أنّه من الممكن استخدام هذه الصور في الجزئيات غير الهامّة فقط لا غير مع التصاميم الاحترافيّة. بعبارة أخرى، إن كانت الصورة ستكون أحد العناصر الرئيسية للتصميم فمن الأفضل أنّ لا تكون صورة جاهزة stock photo. أصبح المُستخدمون الآن يميزون الصور الجاهزة stock photo ولا يُبهرون بها على الإطلاق، فاستخدامها يُمنة ويسرى أمر غير مجدي على الإطلاق ونابع من كسل المُصمّم. 7. عدم فهم الجمهور المُستهدفلا يرغب عملاؤك في امتلاك موقع من دون سبب أو هدف، بل هم يرغبون في الحصول على موقع لإرضاء جمهورهم أو زبائن محدّدين (customer base). لذلك، من المهم جدًا التأكّد من أنّ تصميمك متوافق مع توقعات جمهور عميلك، كما عليك أن تولي اهتمامًا خاصًّا لرغبات هؤلاء العملاء وسلوكهم وخصائصهم، وكأنهم عملائك أنت. 8. عدم اتباع التوجهات العامّةقد تبدو هذه الخطيئة من الخطايا ذات الإشكاليّة، ولكن في الحقيقة عليك الاهتمام بجديد التغييرات والاطلاع على كل ما هو مميّز ومفيد في عالم تصميم مواقع الإنترنت بالمُجمل، مثلًا التصميم المادي material design. سيُسعد عملائك عند تصميمك لهم تصاميم عصريّة وراقية وفقًا لجديد الموضة، ناهيك عن الخبرة المُكتسبة والتي ستصب في مصلحتك في نهاية المطاف كمُصمّم مواقع إنترنت. 9. عدم استخدام اتفاقيّة استخداممازالت هذه النقطة مهملة إلى حدّ الآن، ولا داعي لشرح أهميّة العقود والاتفاقيات المُسبقة، ولقد أدرجت هذه النقطة كتذكير لا أكثر. اهتم بهذه النقطة لمصلحتك قبل كل شيء ولا تستلم أية مشاريع متوسطة أو كبيرة بدون عقد/اتفاق مُسبق، فالمسألة مسألة وقت قبل أنّ تُلدغ من هذا الجُحر. 10. عدم مراجعة العُملاء بين الحين والآخرقد يميل بعض العملاء إلى عدم موافقتك في رؤيتك للتصميم، على الرغم من التفاهم التام الّذي حصل عند الاتفاق على التفاصيل والأهداف في بداية المشروع. ولهذا السبب حدّد بعض النقاط الفاصلة في مسيرة بناء المشروع، وسلّم عملك على مراحل، وتأكّد من موافقة العميل على ما تمّ إنجازه، لتتجنّب المشاكل عندما يحين وقت تسليم النسخة النهائيّة. 11. عدم استشارة مصمّم آخريساعد سؤال أحد الزملاء المصمّمين حول وجهة نظرهم مساعدةً جمّة، وسيصب رأيه في مصلحة المشروع لا محالة، وخاصة أن نقده نابع من نظرة مجرّدة لم تكن في بداية المشروع من الأساس، وسيسمح هذا الأمر باكتشاف نقاط الضعف التي ما كنت لتكتشفها بنفسك. 12. عدم الحصول على جزء من قيمة المشروع مُسبقًايوجد ثلاثة أسباب تدفعك لطلب جزء من قيمة المشروع (نصفه) مُسبقًا قبل الشروع في العمل: طريقة مثالية لتّأكّد من جدية العميل وجاهزيته إلى استكمال المشروع.تُأكّد لك من امتلاك العميل للمال.حافز قوي لبدء العمل.تذكر أنه لا يوجد عميل جاد وصادق سيُعارض الدفع سلفًا. 13. عدم استخدام آخر التقنياتأصبح تصميم مواقع الإنترنت أسهل بكثير هذه الأيام من ذي قَبل، وخاصّة في السنوات الخمس الأخيرة، فيوجد أمام المُصمّم العديد من الخيارات والأدوات وأُطر العمل (frameworks) والعديد من التقنيّات الأخرى، ورفض استغلال هذه التقنيات هو أمرٌ غير مجدي على الإطلاق. 14. بناء معرض أعمال (portfolio) بشكل خاطئيجب على كل مصمم مواقع إنترنت أنّ يملك معرض أعمال خاص به يعرض فيه أعماله بهدف الحصول على عملاء من كل حدب وصوب، ولكن يوجد خطأ شائع بين المُستقلين وهو الاهتمام بالكم على حساب النوع، حيثُ يذهب المُستقلون إلى حشر جميع أعمالهم في معرض الأعمال، اعرض أفضل أعمالك لا كل أعمالك. 15. قبول جميع العروض مهما كانتهل انتابك شك حول العميل الجديد الّذي قد تواصل معك للتو؟ هل طلباته غير واقعيّة بعض الشيء؟ ماذا عن الموعد النهائي، هل المشروع غير قابل للتنفيذ في هذه الفترة؟ ما أحاول الوصول إليه هو أنه في بعض الأحيان أنّ تقول "لا" للعميل هو الشيء الصحيح الّذي يجب عليك فعله بغض النظر عن المُقابل المادي الذي قد تحصل عليه. 16. عدم تقديم ضمان أو دعم ما بعد التنفيذلا تتوقف/تتعطّل التصاميم عن العمل (إن جاز التعبير)، ولكن في اعتقاد العميل أنّه يشتري خدمة مثلها مثل باقي الخدمات، ولذلك فهو يتوقع ضمانًا ما. امنح عملاءك ضمانًا أو عدد أشهر محدّد لدعم مجاني بعد انتهاء المشروع، ولن يُكلّفك ذلك أيّ شيء في الغالب، ولكن من المحتمل جدًا أنّ يكون هذا الأمر الفيصل في إقناع العميل لاختيارك بدلًا من منافسيك. 17.عدم تقبّل الانتقاد بروح رياضيّةيعبّر بعض العملاء عن رأيهم النقدي والسلبي بشكل مباشر، الأمر الّذي قد يزعجك في بعض الأحيان، لكن عليك أن تضع في اعتبارك أمرًا في غاية الأهميّة، أنّ ما يعبّر عنه العملاء هو نابع من اهتمامهم بمشروعهم بالأساس، بمعنى آخر هدفهم هو نفس هدفك في نهاية الأمر. ويجب على أسلوبك في التعامل أنّ ينم عن الاحترام الكامل والابتعاد عن شخصنة الأمور دائمًا. 18. الإفراط في العملإن الإفراط في العمل لبلاء عليك تجنبه ولأسباب كثيرة لا مجال لذكرها هنا، فمن السهل إمضاء ساعات على حاسوبك محاولًا التعديل والتحسين مقنعًا نفسك بأنك ستنتهي قريبًا. لذلك، حدّد ساعات عمل محدّدة بدلًا من العمل طوال اليوم وعلى مدار الساعة والتزم بهذا الوقت بالضَّبط كما يفعل الموظفون في دوام من السّاعة التّاسعة صباحًا إلى الخامسة مساءً 19. إهمال النّسخ الاحتياطيإن القيام بالنسخ الاحتياطي هي نصيحتي الأولى الّتي أقدمها للجميع سواء للمستقلين أو لغيرهم، فالقيام بنسخة احتياطيّة لملفّات عملك هو أفضل وسيلة تؤمّن بها على نفسك من تلف الأقراص الصلبة أو أي احتمال آخر قد يتسبب في فقدان بياناتك. هل تعلم أنّ هناك دراسة تشير إلى أنّ 22% من تلف الأقراص الصلبة يحدث ضمن السنوات الأربع الأولى من عمر القرص الصلب، وعليه فإن النسخ الاحتياطي لبياناتك مسألة لا نقاش فيها. 20. حمل بطيختين بيد واحدةيتطلّب تصميم مواقع الإنترنت الكثير من المهمات الصغيرة هنا وهناك، فعلى سبيل المثال لا الحصر، لديك تصميم الشعارات، التصوير الفوتوغرافي، إنشاء المحتوى، وإليه من هذه الأمور. يُمكن بشكل أو بآخر إنجاز كل شيء بنفسك طبعًا، ولكن من الأفضل إما الاستعانة بمصادر خارجيّة (التعهيد) لإتمام هذه المهام (من خلال موقع مُستقل مثلًا) أو الاستعانة بأحد الزملاء ممن يملكون مهارات في بعض الجزئيات (أو يُمكنك الاستعانة بموقع خمسات للخدمات المصغرة). 21. ؟تناولنا العديد من خطايا مصممي الويب المستقلين في هذه القائمة، ما رأيك بإضافة الخطيئة الواحد والعشرون؟ ترجمة وبتصرّف للمقال 20 Unacceptable Behaviors for Freelance Web Designers لصاحبه Karol K.

إن الهدف من إعداد وتجهيز المخططات الهيكلية (Wireframes) لمواقع الإنترنت هو حلّ مشاكل التصميم المُرتبطة بتخطيط وتصميم الصّفحة، وترتيب عناصرها، وذلك عبر ابتداع تصوّر للموقع قبل تطويره، وذلك باستخدام جملة من المُمارسات والمبادئ. إن تطبيق مبادئ جشطلت (Gestalt) على العناصر، سيُساعد على تحضير الأفكار بسرعة، فالفكرة من الأساس من العمل على هذا المُستوى من الجودة هو السرعة الّتي تُمكن المُصمّم من اكتشاف الأفكار بدرجة معقولة من الدقّة. تعلّمتُ بعض الطُرق المُفيدة في السنوات الأخيرة، جعلت مني أعمل بإنتاجيّة أكبر مع الحفاظ على الجودة، وبطبعي أكره كتابة عناوين من نوع" أفضل الحيل مع تصاميم المخططات الهيكلية" ولكن بعد عملي مع مُصممين قليلي الخبرة، وجدت أنّ بعض هذه المواضيع تحدث بشكل متكرّر ومن الضروري الإشارة إليها. 1. كل شيء مهم وذو معنى كل تلوين، كل خطّ، كل ظل، كل تدرّج لوني، كل شيء يَهم وله معنى، فاستخدام حواف وإطارات غير متقطّعة (solid)، وخلفيّة ملوّنة، وظلالًا، قد يكون أمرًا لا لزوم لها، خاصّة أنّ هذه العناصر يُمكن أنّ تنتقل إلى مرحلة التصميم والتطوير، وبدون أنّ يُفكّر بها مليًّا، فيجب على كل شيء أنّ يكون له معنى، وأنّ لا تُدرج العناصر والرسومات هنا وهناك اعتباطيًّا. الانسجام يُساعد يجدر الانتباه عند استخدام الرسم التمهيدي (sketching) هو أنّ التلوين والخطّ موحد في كامل الرسم (يعني، وجوب تبديل القلم المُستخدم، أو تغيير خطّ اليد من أجل إبراز الاختلاف)، بالإضافة إلى تتكرّر مُشكلة مع المخططات الهيكلية وهي الاختلاف في تدرجات الألوان وعمق السطور والخطّ المُستخدم، جميعها يُدرج ويُستخدم بدون تفكير، الأمر الّذي يجعل من المخطط الهيكلي صعب الفهم والقراءة، ويجعل مني أتساءل في معظم الأحيان: هل التغيير من الخط المُستخدم هنا متعمّد؟ هل هذه الرقعة (label) هي أكبر حجمًا لأنّها أكثر أهميّة؟ وغيره من هذه الأسئلة، ولتجنب هذه المشكلة، من المُستحسن استخدام مجموعة محدّدة من الألوان، (ربّما من 3-5 من اللون الرمادي) ونوعين من الخطوط، واستخدام عناصر HTML الافتراضيّة، مع العلم أنّ هذا قد يؤدي إلى مخططات هيكلية باهتة، ولكن يجب أنّ يُعلم أنّ جميع المخططات الهيكلية ينتهي الأمر بها إلى سهلة المهملات، فليس الغرض منها إبهار الزوّار، إنما الغرض هو تصميم برمجيّة قابلة للاستخدام، أمّا المخطط الهيكلي الخلّاب فهو مضيعة للوقت. إن من الأمور المُهمّة الّتي يجب التركيز عليها هي نقطة الانطلاق، فالبدء مع خطّ أسود، يعني إمكانيّة تكبير وتعريض الخط فقط، الأمر الّذي قد يؤدي إلى جعل المخطط الهيكلي صارخ وحاد بالنسبة لبقيّة الأجزاء، ولكن البدء مع خطّ رمادي، يسمح للمُصمّم بزيادة العمق اللوني وتخفيفه بطبيعة الحال. السرعة والاستكشاف إن الغرض من التصميم ذو الدقّة المُنخفضة ليس التلوين والتحسين، ولكن الغرض هو استكشاف الحلّ الأنسب، حيثُ سيظهر العديد من الحلول، وفقط عن طريق استكشاف بعضها، وصفهم أمام الأعين سيمكّن المُصمّم من التقرير أيها سيَعمل بالشكل الأمثل للمشروع، لقد شرح كانيد بولز كيف يواجه لاعبي الشطرنج تحديًّا مُشابهًا، حيثُ في بداية اللعب، يوجد الكثير من الخيارات، بعضها يُمكن استبعاده عن طريق الغريزة أو عبر الخبرة والممارسة، وتُستكشف باقي الحلول ذهنيًّا، ولذلك سيُعجب المُصمّمون المبتدؤون بفكرتهم الأولى، ويتعلّقون بها ويبذلون جهدًا كبيرًا في تنفيذها مهما تتطلّب الأمر، ولقد وصفَ آندي روتلدج هذه الظاهرة بظاهرة "ملك الخواتم" وذلك في مقالة أكثر من رائعة بعنوان "كنزي العزيز". إن لم يكن بالإمكان تنفيذ التصوّر بسرعة، إذًا فإن التنفيذ يتمّ على الدقّة الخاطئة، فإن كان المخطط الهيكلي يعمل على تقديم نسخة ذات التدرّج الرمادي (grayscale) فقط مما قد تقرّر بناؤه بالفعل، فذلك مضيعة للوقت. النسخة المُطابقة تعطي نتائج أكثر واقعيّة تصدر الأخطاء عادةً من المُصممين الذين ليس لديهم تصوّر مُسبق للمحتوى، فإن كان المشروع يتضمّن معرضًا للصور، فمن المفترض رؤية الصور قبل اتخاذ القرار في إدراجها، والاهتمام بها كميّزة رئيسيّة أو عدم إبرازها لعدم أهميتها، وبشكل مُشابه، إن كان التصميم مبني بالأساس لعرض البيانات، فيجب معرفة ماهيّة هذه البيانات، مع العلم أنّ استخدام البيانات الوهميّة في التصميم الأوّلي تَدفع بالمُصمّم إلى تصاميم مخططات هيكلية تكون فيها العناوين والنصوص مُتناسقة بمثاليّة كبيرة، والصور مُتجاوبة مع التصميم ككل، والأرقام مُلائمة داخل صناديق صغيرة لا تتخطاها، طبعًا هذا أبعد ما يكون عن الواقع، بعبارة أخرى، إن هلاك واجهة المُستخدم يبدأ بالعنوان "لوريم أيبسزم". يجب إتقان التقنيّة المُستخدمة يُمكن للتصميم الخلّاب أنّ يُقدّم حلًّا سيّئًا للمشروع، فإن كان التصميم يتضمّن عناصر HTML مخصّصة، وأزرارًا جذّابة وقوائم مُنسدلة، وحقل بحث ديناميكي بتقنيّة أجاكس، فمن الضروري على المُصمّم أنّ يدرك أنّ لكل مشروع ميزانيّة مُختلفة عن الآخر، وخاصّة إن كان المُصمّم يعرف أساسيّات HTML و CSS و جافا سكريبت، فهو بالتأكيد يعرف ما يُتطلّب لاختبار هذه العناصر على المُتصفحات، وبالتالي على المُصمم أنّ يفكّر مليًّا فيما يُدرج في المخطط الهيكلي، طبعًا قد لا يكون هذا العنصر بذلك التعقيد، وقد يكون متوفّرًا في مكتبة jQuery، ولكن على المصمم أنّ يدرك أنّه لا يوجد شيء يدعى "مجرّد تعديل بسيط"، طبعًا هذا لا يعني عدم إدراج عناصر تفاعليّة في المخطط الهيكلي، ولكن يجب على المُصمم دائمًا معرفة تكلفة كل عنصر يُدرج في التصميم، فبعض المواقع قد تتطلّب هذا النوع من التعقيد، فمثلًا الاهتمام في عنصر اختيار التاريخ قد يكون أمرًا جوهريًا ومطلب أساسي في بعض المواقع، ومن المنطقي جدًا التركيز عليه، ولكن عندما يكون عنصر اختيار التاريخ من أجل "تاريخ الميلاد"، فمن الأفضل استغلال هذا الوقت على أمرٍ أكثر أهميّة فليعمل ما يعمل إن الهدف الرئيسي هو تقديم شيء عمليّ، وليس شيء مثالي، فلا يُبهر بالجماليّات سوء مُصمّمي تجربة المُستخدم UI، بمعنى إن تمّ الرسم والتخطيط باستخدام الورق فقط وبخط اليد، وكان المُصمّم واثقًا من تقديم الحلّ المطلوب، وذلك بتوافق تصميمه مع البيانات المعُطاة من قبل العميل، وكان هذا الرسم رسمًا واضحًا لجميع فريق العمل، فإذًا لا قيمة من إعادة تمثيل هذا الرسم باستخدام المخطط الهيكلي، بمعنى آخر على المُصمّم أنّ يكون عمليًّا، وأن يهتم بتقديم المطلوب وأن يَبتعد عن تصميم تصميمات مثاليّة . مصادر إضافيّةإن جميع المواضيع السابقة هي من واقع الخبرة ونتاج طويل من والتجربة والخطأ، ولتكتمل الصورة، هذه بعض المقالات الهامّة، والّتي ترتبط بالموضوع بشكل مُباشر وغير مُباشر: هيكلة وتوزيع محتوى صفحات الويب.ما هو النّظام اللّوني.أساسيات الوزن البصري في التّصميم الجرافيكي.الاختلافات ما بين التصاميم المسطّحة (flat design) و التصاميم المادية (material design).مدخل إلى عالم الخُطوط.مصادر أجنبية: Gestalt Principles – Andy Rutledge.Good design faster – Leah Buley.Sketching User Experiences – Bill Buxton.ترجمة وبتصرّف للمقال Wireframing for Web Apps.

إن الإصدارات التجريبيّة الخاصّة (private betas) هي طريقة رائعة في التّحكم في آلية الوصول إلى مُنتجك (من يستخدم مُنتجك وكيف) وهو في مرحلة التطوير. تَعمل الإصدارات التجريبيّة (بيتا) بالشكل الأمثل عندما يُقدّم المُنتج قيمة، ولكنه غير جاهز للاستخدام من طرف الجميع؛ إمّا لأسباب تتعلّق بمشاكل التوسّع (scaling)، أو عوز التوثيق، أو عدم اكتمال ميّزة جوهريّة في المُنتج، أو لأي سببٍ كان. لا يُمكن بطبيعة الحال اعتماد هذا الأسلوب مع أي مُنتج أو مشروع، وربّما هذه هي مُشكلة الإصدارات التجريبيّة الوحيدة. مسار عمليّة التسجيلإن بدأت بالتحدّث عن المُنتج علانية، فإن ذلك قد يُلفت نظر المُستخدمين المحتملين، ربّما عن طريق رابط من تغريدة، أو رُبما من تدوينة، المهم، سينتهي المطاف بالمُستخدم على صفحة سننطلق قريبًا (holding page)، إن المُستخدم في هذه المرحلة مُهتم بالمُنتج، ولكنه في نفس الوقت لا يستطيع الاستفادة منه، وكل ما سيفعله هو تسجيل بريده الإلكتروني، أو مُتابعتك على تويتر، لتبدأ رحلة من الانتظار. نعتقد نحن أصحاب المشاريع، أنّه ما أنّ ندعو هؤلاء الزبائن، أو نُطلق المشروع بشكل رسمي، سيقفز هؤلاء الزبائن فرحين مُتلهفين للمُنتج، ولكن هذا نادرًا ما يحدث، أتعلم ما سيحدث؟ خسران الزبون، أنت خسرتَ الزبون حتّى قبل أنّ تحصل عليه. الافتراضات الخاطئة والمسارات الهشّةتُظهر الصورة السابقة مسارًا (funnel) ناجحًا يتعلّق بنقل المُستخدمين من مرحلة الانطلاق التجريبي بيتا إلى مرحلة التسجيل الرسميّة، حيثُ أننا نفترض أنّه بما أنّ المُستخدم قد قام بالتسجيل، فسنحصل على بريد صالح، وإن كان البريد صالحًا، إذًا فإن رسالتنا المُرسلة قد تمّ استلامها، وإن تمّ استلامها، إذًا قد تمّ فتحها من قبل الزبون المُستهدف، أخيرًا، إن تمّ فتح الرسالة، إذًا فقد تمّ تصفّحها والعودة إلى الموقع من خلالها، ولكن في حقيقة الأمر هذه مُجرّد افتراضات، حيثُ أنّ مرحلة التسجيل بيتا غير مأمونة مع كل خطوة من هذه الخطوات. تكمن المُشكلة الحقيقية هنا، أنك جذبت اهتمام الزبون في وقتٍ لا تستطيع تقديم فيه أي شيء، وقد يبدو المسار السابق مُحبطًا بعض الشيء، ولكنني تحدّثت مع العديد من أصحاب التطبيقات، وجميعهم تقريبًا أكدوا على هذا التّراجع في الاهتمام والتّفاعل. خطوات عليك اتباعها قبل إرسال دعوات البريد الإلكترونيهناك بعض الأشياء تبدو بديهيّة مع ذلك يغفل عنها الناس عادةً رغم بساطتها، حيثُ أني أعتقد أنّ دعوات البريد الإلكتروني تُكتب دائمًا بنوع من العجلة، ولا تحصل على القدر الكافي من التحضير والتخطيط، ناهيك عن التصميم. اكتب بشكل شخصيإن كنت تقوم بتجميع أسماء الزبائن المُحتملين، إذًا عليك استخدام هذه الأسماء في عنوان البريد الإلكتروني وفي متن الرسالة أيضًا، شخصيًا سأفتح بالتأكيد رسالة من نوع "مرحبًا مُحمّد" بدلًا من رسائل من نوع "عزيزي المُستخدم"، فمن خلال تجربتنا، وجدنا أنّ هذا الأمر لوحده زاد من معدّل فتح الرسالة (open rate) على أقل تقدير 12%، ونسبة clickthroughs / النقر على الّروابط (CTR) بمقدار 15%. إن كنت لا تستطيع الحصول على الأسماء، فهناك طريقة سهلة للحصول عليها، وهي باستخدام أداة Rapportive، بالإضافة إلى أنّ بعض تطبيقات البريد الإلكتروني ستُساعدك على جلبها. بالنّسبة إلى معظم الشركات الناشئة فإن الحصول على مُستخدمين للتّطبيق في بداياته جدير بأن تُخصّص وقتًا للحصول على هذه الأسماء اشرح ووضّح تطبيقك تعثّر عمر في زحام المرور، لذا قرّر تصفّح موقع تويتر ليقتل الوقت والتخلّص من الملل، ليجد شخصًا ما قد قام بإعادة تغريد رابط إلى الإصدار بيتا الخاصّ بك، تابع عمر إلى أنّ وصل إلى صفحة "سننطلق قريبًا"، أدخل عمر بريده الإلكتروني، وبينما هو يقوم بالإرسال، حُلّت أزمة الزحام، ليُتابع مسرعًا إلى المنزل، متلهفًا إلى مشاهدة مُباراة اللّيلة، هل تظن أنّ عمر ستكون لديه أدنى فكرة عن التطبيق بعد أسبوعين من الآن؟ بكل بساطة الإجابة هي "لا". إن الأمر مُشابه بالنسبة لي عندما استلم بريدًا فحواه "الموقع فلاني دوت كوم تمّ إغلاقه ولكنّنا انتقلنا إلى العمل على مشروعنا الجديد علّاني دوت نت" أنا أقرأ هذا الرسالة كالتّالي: "موقعنا الّذي لم تسمع به من قبل لم يعد متاحًا، لذلك قمنا بإنشاء موقع آخر لك لكي تنساه أيضًا". أتمنّى لو أستطيع ترشيح هذا النوع من الرسائل إلى الحذف مُباشرةً. وضّح ما يقوم به مُنتجك، من تَستهدف منه، من يقوم باستخدامه بالفعل، ما هي ميزاته عن مُنافسيه، ولا تنس أنّ تجعل الخطوة التّالية واضحة، مثلًا، إن كان المُنتج تطبيقًا للهاتف iPhone، وضّح للمُستخدم أنّ الوصلة التي سينقر عليها ستأخذه إلى متجر التطبيقات، إن كانت هناك نسخة تجريبية لا تحتاج إلى تسجيل وضّح ذلك أيضًا، ولا تنس أنّ الصور التوضيحيّة تساعد أيضًا خاصّةً إن كانت الواجهة فريدة من نوعها وتتحدّث عن نفسها. اجعل الأمر مُغريًايعيش ماجد في الرياض، وهي أحد المُدن المُكتظّة بالمقاهي والمطاعم، وهو الآن في أحدها مع صديقه المُقرّب، وبينما يقوم صديقه بالطلب، بدأ ماجد باللعب بهاتفه ليجد أربع رسائل إلكترونيّة غير مقروءة، وعلى عكس ما قد يفعل عادةً، قرّر النظر في أمرها ورُبّما التخلّص منها بينما هو ينتظر، وبدأ بالحذف والأرشفة إلى أنّ وصل إلى رسالتك، وفي هذه الأثناء أصبح الطلب جاهزًا للاستلام. السؤال هنا، هل أعطيته سببًا لكيلا يتخلّص من رسالتك الإلكترونيّة؟ إن الأمر كالتّالي: أنت لا تستطيع أنّ تختار كيف وأين سيقرأ ماجد رسالتك، ولا يمكن لك أنّ حتّى أن تُقرّر فيما إذا كان سيفتح ويقرأ رسالتك أم لا، إن الشيء الوحيد الّذي تستطيع أنّ تتحكّم به هو العنوان والكلمات الأولى من الرّسالة (60 حرف لا أكثر)، وهذا هو سلاحك الوحيد فقط ضد حذف رسالتك الإلكترونيّة، لذا استخدمه بحكمة. التأخير وتحويل الزوّار إلى زبائنتقل فرص التحويل conversion مع مرور كل أسبوع، إلا إذا كانت الفئة المُستهدفة موجودة بالفعل وتنتظر مُنتجك على أحر من الجمر (وهذا احتمال ضعيف) فعندما وصلنا إلى نهاية المرحلة التجريبيّة في "إنتركوم" قمنا بإرسال عدد كبير (أزْيَد من 500) من الدعوات يوميًّا، بعد تحليل هذه الأرقام، أصبح من الواضح لدينا كيف أنّه كلّما قصُر الوقت بين وقت التسجيل ووقت إرسال الدعوة، كلما زاد معدّل التحويل (conversion rate). يبدو الأمر منطقيًّا في الحقيقة، ففُرص نجاح الحملة أكبر على اعتبار أنّ المُستخدم ما زال يُفكّر بالمُنتج، ومازال يرغب بالحصول عليه، ولم يجد إلى الآن بديلًا آخر بعد. قياس أداء البريد الإلكترونيلا تستطيع مُعظم أدوات البريد الإلكتروني اكتشاف متى تمّت قراءة رسالة البريد الإلكتروني أو إن تمّ تجاهلها بدقّة، ليس هذا فقط بل إني أتوقّع أننا سنشهد تدهورًا في معدّل فتح الرسائل في السنوات القليلة القادمة، إلا إذا ما تمّ اختراع تقنيّة جديدة للحد من ذلك، مع العلم أنّ البعض أصبح يُقدّم بعض هذه التقنيّات لقياس وقت تفاعل المُستخدم مع الرسالة، ويُعتبر ذلك مؤشّر أفضل من معدّل فتح الرسالة (open rate)، ولكن الجميع مهووس بحساب العائد على الاستثمار، وعليه فإن على مسوّقي البريد الإلكتروني البحث عن مكان آخر من أجل معلومات ذات قيمة حقيقيّة. الدعاية مع الإصدارات بيتاتعمل إصدارات البيتا الخاصّة بشكل فعّال عندما تريد أنّ يُستخدم المُنتج بشكل حقيقي وفعلي لدى بنائك لرؤيتك للمُنتج (your vision of the product)، ولكنك ترغب أيضًا في التّحكم فيما يُقال ويُتشارك بخصوص المُنتج، وعلى الشركات الناشئة التحكّم فيما يُنشر على مُنتجاتها لثلاثة أسباب: الانطباع الأوّل مُهمإن كان مُنتجك ذو فكرة جديدة ومُبتكرة، فلديك فرصة وحيدة لإبهار المُستخدمين، فإن كان كل من يتحدّث عن مُنتجك يُضمن في حديثك عبارات مثل “بمُجرّد أن يتم تحسين واجهة المُستخدم”، أو “هناك نقائص في واجهة المُستخدم”، فإن ذلك يترك الانطباع السّيّء: “مُنتج جيّد لكن التصميم سيّء”. الإعلام يُغطّي الجديد فقطلا تستطيع الادعاء بأن مُنتجك جديد إن كان الجميع يتحدّث عنه على الشّبكات الاجتماعية، فغالبًا كل من قد يهتمّ لحال مُنتجك قد يكون قد سمع به، بمعنى آخر لا وجود لأي “قصّة” قد تدفع وسائل الإعلام للحديث عن مُنتجك. حتّى ولو كان مُنتجك عبارة عن iPad جديد وكانت مُتوفّرًا بإصدار تجريبي لفترة، فلن يذهب أي أحد لحفل الإطلاق الرّسمي له فالكل يعلم ماهية المُنتج الذي سيتم الكشف عنه. تحدّث قليلًا، لتُسمعيُطلق هاتف جديد أندرويد كل أسبوع، وما ينتج عن ذلك هو أن قلّة فقط تهتم بالأمر، ولكن في المُقارنة تُطلق أبل مُنتجين بالسنة، وقد لا تحتوي هذه المُنتجات على شيء جوهري جديد، ولكن الجميع يُريد أنّ يعرف عن الأمر، إن الصمت الّذي تنتهجه أبل قوي بالفعل، واستغرب من عدم اتباع باقي الشركات المفهوم ذاته. تتطلّب البيتا الخاصّة جُهدًا إضافيًا، ومن الصعب أنّ تبقى صامتًا عندما تعمل على شيء مُميّز وتهتم به، ولكن تذكّر أنّ أحد أكبر التحديات الّتي تواجه التطبيق هو الحصول على الشهرة والانتشار بين المُستخدمين، فالأمر يتطلّب أن يكون الأمر فريدًا من نوعه، ومُثيرًا للاهتمام. ترجمة –وبتصرّف- للمقال What You Should Know About Private Betas.

تردني بين الحين والآخر أسئلة حول كيفيّة العمل في المنزل وكيف لي أن أُدير مشاريعي بجانب العائلة طوال اليوم (لدي ولدين الأوّل في عامه الثّالث والثّاني في عامه الأول فهما ليسا بعد بعمر الالتحاق بالمدرسة). أعلم أنّ هذا الموضوع لا يمت بصلة بعالم التّطوير والبرمجة، بل هو على صلة في كيفيّة إنجاز المهام على أتم وجه، وعليه ظننت أنّه من الجيّد مشاركة طريقتي في العمل على شكل تدوينة، وذلك لكي أحيل الآخرين إليها بهدف الإجابة إجابةً شافية ووافية عن كيفيّة إدارة بيئة العمل والوقت عند العمل من المنزل بدوامٍ كاملٍ. بيئة العمل (Environment)إن بيئة العمل هي خطٌ أحمر بالنسبة لي، فيجب أنّ تكون عبارة عن غرفة منعزلة ومُخصّصة للعمل، وتحتوي على جميع الأشياء الّتي قد أحتاجها، وتضمن لي تركيزي على عملي بعيدًا عن المُشتّتات، ويجب أنّ تتوفّر الغرفة على التّالي: مساحة عمل بسيطة، تحتوي على حاسب ووريقات لأسجل عليها بعض الملاحظات.القهوة، سواءً جاهزة أو آلة صنعها.نظام صوتيات مُحترَم.تلفاز، وهو للأيام الّتي أفضل بها أن تكون ضوضاء الخلفيّة (background noise) فلمًا قديمًا بدلًا من الاستماع إلى الصوتيات.أحب أيضًا الإضاءة الطبيعيّة، ولكنّي في بعض الأحيان أفضّل الظلّمة، فيوجد في غرفتي نافذتان، تكون الستائر مرفوعة في بعض الأوقات، وتكون مُغلقة في البعض الآخر، فالأمر يعتمد على مزاجي والحالة النفسيّة، ولكنّني مُتأكّد من تأثير الإضاءة على نفسيتي. التعامل مع التّشتّت (Interruptions)يقع مكتبي في الطابق الثاني من المنزل، وفي الزاوية البعيدة عن بقيّة أرجاء المنزل وما يمر به من أحداثٍ طوال اليوم، يُمكنني هذا الأمر من الاهتمام بمهامي الحاليّة، والتركيز أكثر بعيدًا عن الضوضاء. لا يكون الحال بهذه المثاليّة دائمًا، فبينما أكتب الآن، أستطيع سماع صوت أحد أولادي يلعب بألعابه في الطابق الأرضي للمنزل، ولا بأس في ذلك، فلا يوجد شيءٌ في الدنيا أجمل من أنّ تكون أبًا، وسماع صوت الأطفال يلعبون بين الفنيّة والأخرى ليس بالأمر الجَلل. وجدت صعوبة في التعامل مع التّشتّت دائمًا رغم ذلك، وهذه مشكلتي في الحقيقة وليس لها علاقة بأحد، ولذلك أحاول دائمًا إغلاق باب الغرفة، يدفع هذا الأمر زوجتي أو أولادي إلى الاستئذان قبل الدخول، مما يسمح لي بالتوقف عن ممارسة نشاطي والاهتمام بالأمور الطارئة. يحدث في بعض الأحيان وأن أترك باب الغرفة مفتوحًا، لكي أوضّح بأني مُتاح ويُمكن مقاطعتي، ويعتمد هذا الأمر على طبيعة العمل الّذي بين يدي، فعلى سبيل المثال عند تصفّح البريد الإلكتروني فلا بأس من مقاطعتي، ولكن عند كتابة شيفرة برمجيّة، أو عند التحدّث مع أحدهم هاتفيًّا أو عبر أحد برامج التواصل الصوتيّة، فمن الأفضل عدم مقاطعتي، وذلك لكي أصب كامل تركيزي على المُهمّة. التعامل مع التنبيهات (Notifications)أحاول دائمًا فصل جميع التنبيهات بشكل كامل عند حلول الساعة الخامسة مساءً، بمعنى آخر، لا بريد إلكتروني، لا رسائل نصيّة، لا تغريدات، ولا أي نوع من أنواع الاتصال، باستثناء القليل، سأتطرّق إليه لاحقًا. أحبّذ أنّ أكون ذلك الشخص الّذي يهتم بعائلته، ويفصل بين الوقت المُخصّص للعمل والوقت المُخصّص للعائلة، ففي نهاية المطاف، أنا أملك الوقت الموفّر من المواصلات اليوميّة بين المنزل ومكان العمل. تختلف الأمور بين الناس بطبيعة الحال، ولذلك ما سأقوم بمشاركته هو مُرتبط بأسلوب حياتي فقط، وليس بالضرورة أنّ يَنطبق مع الجميع: لا أملك تطبيقًا لتويتر على هاتفي أبدًا، بل هو مُنصّب على حاسوبي المكتبي فقط، وأقوم بتفحصه مرّات قليلة في اليوم.لا استخدم موقعي فيس بوك أو Instagram، بل اعتمد على زوجتي لتزويدي بأي شيء مُميّز أو مُرتبط باهتماماتي.قمت بإعداد البريد الإلكتروني على هاتفي، ولكنّي أقوم بتأجيل كل ما هو غير عاجل في جدول المهام إما إلى قائمة "غدًا" أو إلى قائمة "الأسبوع القادم".استخدم برنامج "Telegram" للتواصل مع الأقارب والأصدقاء، بحيثُ أستطيع الاستجابة إن كان الأمر جللًا، وفيما عداهم يتمّ تأجيل أمره إلى حين.احتفظ بجدول أعمالي ضمن تقويم/مُفكّرة مع تنبيهٍ لكل مُهمّة، وأتابع تنبيهات اليوم الحالي فقط لأعلم ما يجب فعله في هذا اليوم.لا أملك إلا القليل مما يربطني مع مجتمع الإنترنت ضمن أوقات الفراغ، ولكن هذا لا يمنع من وجود بعض الحالات الطارئة بين الحين والآخر، والّتي لا تَحتمل التأجيل، ولكن في مُعظم الأوقات، يَفي هذا الأسلوب من التنظيم بالغرض. يسمح لي هذا التنظيم بالتركيز فعليًّا على الأمور المُهمّة، في حياتي، ويسمح لي أيضًا بالاهتمام بأمور أخرى مثل كاميرتي/آلة التصوير لالتقاط جميع تلك اللحظات السعيدة مع عائلتي، بدلًا من إضاعة وقتي، ولنقل، على مواقع التواصل الاجتماعي مثل فيسبوك أو غيره. هذا أسلوبي فقطولكن الاختلاف هو سنّة الحياة، وكل ما سبق هو رأيٌ شخصيٌ فقط لا غير، ولا أريد التعميم بأي حالٍ من الأحوال، فعلى كل شخص معرفة ما يناسبه والتخطيط على هذا الأساس، وشاركت ما أقوم به على اعتبار أنّني قد سُئلت أكثر من مرّة حول الأمر. لم يبق لي سوى الختام، وكلي أملٌ منكم مشاركة تجربتكم في إدارة الوقت. ترجمة –وبتصرّف- للمقال Balancing Family and Work.

نستخدم نحن المطوّرين ومُصمّمي الواجهات CSS في التنسيق والتَمَوْضُع (positioning)، وفي إنشاء مواقع تتسم بالجماليّة والمظهر الخلّاب، ونستخدمها غالبًا في إضافة الحركة إلى الصفحات باستخدام التنقّل (transitions) أو التحريك (animations)، ولكنّنا عادةً لا نتعمّق، ولا ندخل في خفايا خاصّيات CSS المُعقّدة. يُمكن للتحريك أنّ يكون أداةً قويّة في مُساعدة زوّار مواقعنا وعُملائنا على فهم تصميم الموقع بالشكل الصحيح، ولذلك يوجد بعض المبادئ والتي بتطبيقها يمكن الاستفادة من التحريك بالشكل الأمثل. إنّ هذه المبادئ ليست بالجديدة، وهي عبارة عن مُمارسات عمليّة وتجارب طويلة من عالم ديزني، فقد نُشرت هذه المبادئ الاثنا عشر للتحريك بكتاب وهو بعنوان: "وهم الحياة: الرسوم المُتحركة في ديزني" في عام 1981، وصفت وصوّرت هذه المبادئ كيف يُمكن للتحريك أنّ يُستخدم في سلب عقل المُشاهدين في عالم وهميٍّ قابل للتصديق. سأتناول في هذه المقالة، كلًا من المبادئ الاثنا عشر، ومُناقشة كيف لها أنّ تُطبّق في صناعة صفحات الويب مُستخدمًا الأمثلة التوضيحيّة، وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة عبر حساب الأكاديمية في Github. التمدّد والانكماش (Squash and Stretch) إنها المفهوم القائم على أنّ للأجسام كتلة فيزيائيّة، وبتحركها يجب أن تبقى الكتلة ثابتة دون أن تتغيّر، فستتوسّع الكرة عندما تصطدم مع الأرض، ولكنّها أيضًا ستصبح أقصر باعتبار أنّ كتلتها سيُعاد توزيعها. يُمكن الاستفادة من هذا المفهوم عند إنشاء الكائنات الّتي نُريدها أنّ تبدو فيزيائيّة، مثل الأشخاص، الأشياء، أو تنطط الكرات. يُمكن تجاهل هذه المبدأ عند التعامل مع عناصر صفحة الويب، فلا ترتبط عناصر الـ DOM بالضرورة مع الأجسام الفيزيائيّة، ويُمكن لها أنّ تكبر وتتقلّص على المُتصفّح كما تقتضي الحاجة، فعلى سبيل المثال، يُمكن للزر أنّ يكبر ومن ثم يتلاشى، أو يُمكن لرسائل الخطأ أنّ تظهر وتختفي كما يحلو لها. ولكن في حقيقة الأمر، يُمكن الاستفادة من مبدأ التمدّد والانكماش في إعطاء الكائن أو الجسم صفات الكتلة الفيزيائيّة، ويُمكن للتغيرات الصغيرة في الشكل إنشاء تأثيرات طفيفة ولكنّها في نفس الوقت مُلفتة للنظر. التهيئة (Anticipation) لا تحدث الحركات فجأةً، ففي الواقع العمليّ، تَنتج الحركة عادةً تدريجيًا، سواءً كان ذلك في دوران الكرة قبل السقوط من على الطاولة، أو عندما يثني شخصٌ ما قدميه استعدادًا للقفز. يُمكننا استخدام ذلك في جعل التحوّل (transitions) والتحريك (animations) في CSS أكثر حيويّةً وواقعيّة، ويُمكن لهذا المبدأ أنّ يكون على شكل ارتداد خفيف للكرة، ليُساعد المُستخدم على إدراك ما الّذي يتغيّر ويتتبّع مسار الجسم على الشاشة. فعلى سبيل المثال، يُمكن لعنصر من عناصر الصفحة أنّ يتقلّص قليلًا قبل أنّ يكبر في الحجم عند حركة المرور (hover)، أو لنقل مثلًا عند إضافة عناصر قائمة (items) جديدة إلى قائمة، فيُمكن أنّ يُمهد لهذه الحركة عبر إبعاد باقي العناصر وإفساح المجال لها أوّلًا. التقديم (Staging) يتأكّد هذا المبدأ من أنّ الجسم أو الشيء هو عنصر المشهد الرئيسي، وهو عندما تفسح باقي الأجسام الأخرى أو جوانب المشهد المجال لمكان حدوث الفعل الرئيسي، يعني هذا إما وضع الفعل الرئيسي في مكان بارز للعيان، أو حجب باقي العناصر بهدف التركيز على ما يجب للمُستخدم أنّ يراه. إن أردنا قولها بلغة ومُصطلحات الويب، فإن أحد الأساليب قد يكون في استخدام تغشية لمُحتوى مُعيّن دون آخر، أو ربما إضافة طبقة داكنة على الصّفحة، ومن ثُمّ وضع المُحتوى في الواجهة ليَظهر هذا المُحتوى بارزًا للنظر والاهتمام. يُمكن استخدام أسلوب آخر وهو الحركة، فعندما تتحرّك أجسام عدّة، فمن الصعب معرفة أي منها جديرٌ بالاهتمام والمُتابعة، ولكن إنّ توقّفت جميع التحركات وجسم واحد تحرّك، ولو بحركة صغيرة، فمن السهل جدًا اكتشافه. يُستخدم هذا الأسلوب عادةً مع زر الحِفظ (save)، بحيث يتذبذب أو يتمايل أو يومض بخفّة ليوضّح للمُستخدم أنّ عليه حِفظ المُستند قبل المُتابعة، مع الحفاظ على بقية أجزاء الصفحة ساكنة وبدون أدنى حركة، مع العلم أنّ أي حركة ولو طفيفة ستبرز وتكون واضحة للعيان. الحركة المُفصّلة والحركة من توقّف إلى توقّف (Straight-Ahead Action and Pose-to-Pose) إن الفعل straight-ahead يكون عندما يتمّ رسم كل إطار صورة (frame) لإتمام التحريك، أما الفعل pose-to-pose (توقّف إلى توقّف) يكون عندما يتمّ رسم سلسلة من الإطارات المفتاحيّة (keyframes) وتُرسم الفترات فيما بينها لاحقًا، عادةً من قِبل مُساعد. يُستخدم في عالم الويب معظم الأحيان التحريك من نوع pose-to-pose، فمثلًا الانتقال (transition) بين الإطارات المفتاحيّة (keyframes) يُمكن أنّ تتم معالجتها من قبل المُتصفّح، والذي يُقحم الاختلاف بين كل إطار ويرسم عددًا منها أيضًا بهدف جعل التحريك أكثر سلاسةً وواقعيّة. يوجد استثناء وحيد، وهو دالة التوقيت steps، فمع هذه الدالة، سيخطو المُتصفّح خطوات على عدد الإطارات المُحدّدة، وبهذه الطريقة ستتمكن من رسم سلسلة من الصور وجعل المُتصفّح يعرض كل منها تتابُعيًا، ليُنشئ بذلك حركة بالأسلوب **Straight Ahead Action”. توابع الفعل وتداخله (Follow Through and Overlapping Action) لا تحدث الأشياء دائمًا في نفس الوقت، فعندما تتوقّف سيارة فجأةً، فإنّها تميل إلى الأمام، مع تصاعد الدخان نتيجة احتكاك العجلات مع الأرض، ومن داخل السيارة يواصل السائق ميلانه نحو الأمام إلى حين توقّف كل حدث بشكل مُنفصل. إن هذه التفاصيل ما هي إلا أمثلة على توابع الحركة وتداخل الحركة، ويُمكن استخدام هذا المبدأ على الويب للمُساعدة على التأكيد أنّ شيئًا ما قد توقّف الآن لأنّه يجب أن يتوقّف، وليس أنّه قد توقّف عن التحريك بشكل مُطلق، على سبيل المثال، عنصر قائمة أُضيف إلى القائمة قد ينزلق، ليتقدّم شيئًا ما أكثر من اللازم، ومن ثُمّ يُصحّح نفسه إلى التَمَوْضُع الصحيح. إن إنشاء حركة ذات طابع تداخلي، يتطلّب إنشاء عناصر تتحرّك خطًا مُختلفة وذات فروقات طفيفة عن بعضها البعض، وفي الحقيقة هذا الأسلوب مُستخدم بشكل جيّد في أنظمة التشغيل iOS، فعندما يتمّ التنقل بين صفحات التطبيق، بعض الأزرار والعناصر ستتحرّك بمُعدّل مختلف عن بعضها، ليظهر التأثير الكلي في النهاية بشكل مُفعم بالمرونة والسلاسة وأقل سطحيّة من إذا كان كلُ شيءٍ يتحرّك دفعة واحدة وبنفس المُعدّل، وهذا التنقل المتوحد في كينونة واحدة يُعطي المُشاهد أو المُستخدم فترةً زمنيّة ليُدرك هذا التغيير الحاصل بالشكل المطلوب، والابتعاد عن الالتباسات. قد يُستخدم هذا الأسلوب في عالم الويب عبر تجميع التنقلات (transitions) أو التحريك (animations) تتابعيًا، بهدف إنشاء تأثيرات تظهر بمُعدّل سرعة مُختلف فيما بينها. التباطؤ والتسريع (Slow In and Slow Out) لا تنتقل الأجسام من السكون التام إلى السرعة القصوى فورًا، بل تميل الأجسام إلى رفع السرعة تدريجيًا، والتَبْطيء منها قبل التوقّف، فبدون التسارع والتباطؤ، ستكون الحركة وكأنها حركة آلة (روبوتي) يُعرَف التباطؤ والتسريع في عالم CSS بالمُصطلح easing (تسهيل)، ويُستخدم كدالة توقيت (timing function)، وهو طريقة في وصف وتحديد مُعدّل التغيّر خلال مسار التحريك. يُمكن وباستخدام دالات التوقيت جعل الأجسام المُتحركة تبدأ بطيئةً وترفع من السرعة (الدالة ease-in)، أو تبدأ سريعةً وتخفّف من السرعة (الدالة ease-out)، ويُمكن من أجل التأثيرات الأكثر تعقيدًا استخدام دالّة التوقيت cubic-bezier. التقوّس (Arc) لا شك أنّ الأجسام ستبدو أكثر حيويّة باستخدامها حركات التباطؤ والتسريع المُتبعة في المبدأ السابق، ولكن في حقيقة الأمر إن الأجسام نادرًا ما تتحرك بحركة مستقيمة، فهي تميل إلى اتباع انحناءات مقوّسة. يُمكننا تحقيق هذه النوع من الحركات المُقوّسة مع CSS بطريقتين، تكون الطريقة الأولى بالجمع بين أكثر من تحريك، فالحركة الخاصّة بتنطط وارتداد الكرة، يُمكن تطبيقه عن طريق عمل تحريك أوّل يجعل الكرة تتحرّك صعودًا ونزولًا، بينما تحريكٌ ثاني يجعل الكرة تتحرّك إلى جهة اليمين في نفس الوقت، عندها ستظهر الكرة عبر الشاشة وهي ترتد من الأرض وبشكل مقوّس. تكون الطريقة الثّانية عبر تدوير العنصر نفسه، حيثُ بإمكاننا التعديل على مركز دوران الجسم عبر ضبط مبدأ التغيّر (transform origin) ليُصبح خارج جسم العنصر، فعندما ندوّر الجسم، فإنه سيدور في تقوّس. الفعل/الحدث الثانوي (Secondary Action) بينما الحدث الرئيسي يحدث، يُمكن لحدثٍ ثانويٍ أن يُساعد على التأكيد منه أو حتَّى أنّ يزيد عليه، ربما على سبيل المثال، تأرجح ذراعي شخص يمشي (المشي حدث رئيسي والتأرجح حدث ثانوي) أو تنطط كرة (حدث رئيسي) مع ظهور بعض الغبار (حدث ثانوي) عند الارتطام. يُمكن رؤية هذا المبدأ على مواقع الإنترنت، عندما تبعد العناصر من نفسها لإفساح المجال للعنصر الجديد، كما يحدث عند سحب عنصر قائمة ووضعه في منتصف القائمة. التوقيت (Timing) إن توقيت التحريك هو الوقت المُستغرق في إتمام حركته، فيُمكن للتوقيت أنّ يُستخدم في جعل الأجسام الوزنة تبدو بطيئة في حركتها، أو في إضافة طابع مُميّز وحيوي في الحركة نفسها. إن التعديل وتسوية/ضبط الوقت في صفحات الويب بسيطٌ للغاية، فكل ما يتطلب فعله هو التعديل على قيمتي الخاصيتين animation-duration أو transition-duration. المُبالغة (Exaggeration) يُستخدم أسلوب المُبالغة بشكل كبير مع أفلام الرسوم المُتحرّكة، فيُمكن باستخدامه جذب نظر المُشاهد إلى حركات أو أفعال مُعيّنة، لتجعل هذه المُبالغة من الرسومات أكثر إثارة أو ربما في بعض الأحيان أكثر هزليّة، فعندما يُحاول الذئب الانقضاض على فريسته، فربما يجعل الرسام من فكاه مفتوحان على مصراعهما أكثر من المُعتاد بهدف إضافة شيء من الرعب أو الهزليّة إلى المشهد. وفي صفحات الويب، يُمكن للأجسام أنّ تتوسّع وتتقلّص بهدف التأكيد عليها وجذب الانتباه إليها، على سبيل المثال عند ملئ نموذج ما (form)، فيُمكن للقسم النشط أنّ يكبر بينما بقية الأقسام تنكمش أو تتلاشى (fade). الرسم المتين (Solid drawing) عند تحريك الأجسام في الأبعاد الثلاثة (three dimensions)، يجب أنّ يكون الاهتمام مُنصبًا على أنّ هذه الأجسام تتبع قواعد الرسم المنظوري، فالناس مُعتادة على العيش والتعامل مع عالم ثلاثيّ الأبعاد، ولذلك عندما لا يبدو على الأجسام كما لها أنّ تكون في الواقع، فستبدو للمُشاهد غريبةً وغير مقبولة. تدعم آخر إصدارات المُتصفّحات الأبعاد الثلاثيّة جيّدًا، يعني هذا أنّه يُمكننا تدوير وتوضيع الأجسام في الصفحة ليتولّى المُتصفّح عمليّة التحوّل بنفسه. عامل الجذب (Appeal) إن عامل الجذب هو خصائص ومُميّزات العمل الفني وكيف يُمكن له أنّ يجعل منا مُتصلين ذهنيًّا مع مقصد ونيّة الفنان، فهو كجاذبيّة المُمثّل (الكاريزما)، ففي النهاية الانتباه إلى التفاصيل واتحاد الحركات مع بعضها البعض تناغميًا تجعل من النتائج نتائج مُميّزة وذات ظهور خلاب. يُمكن للتحريك المصنوع بأيدٍ احترافيّة وبعناية خاصّة أنّ يُنشئ جاذبيّة ومظهر ذو شأن على صفحات الويب، وقد أدركت بعض الشركات ذلك، فاستفادت Stripe من التحريك وسخرته في إضافة مصداقيّة إلى شاشة الدفع (checkout) الخاصّة بهم. استخدم التحريك إن استخدام المبادئ السابقة له فضلٌ كبير في تحسين التحريك، فالرسوم الّتي تحافظ على الوزن الفيزيائي للأجسام والتغييرات ذات الطابع الحدسي، وتستفيد من الحدث الثانوي مع التوقيت المُناسب سيجعل منها ذو جودة عالية لُساعد في تقديم إضافة نوعيّة وذات جودة إلى المُحتوى. يُنصح، وعندما تكون الفرصة سانحة، في إضافة بعض من التحريك والرسوم إلى صفحات الويب، وخاصّة مع استخدام هذه المبادئ، والّتي ستُضيف شيئًا من الجماليّة والجاذبيّة للموقع ليتميّز عن بقيّة أقرانه. ترجمة – وبتصرّف– للمقال Animation Principles for the Web.

جرى على مسامعي في السنوات الأخيرة الكثير من آراء العُملاء، ولكن أكثرها تكرارًا كان: يا لها من مُصيبة تلك الّتي وقع بها هذا العميل، فلتكن آخر المصائب. لا أُريد أنّ يُساء فهمي هنا، فما أريد قوله هو أنّ من وجهة نظر العميل، هو قد دفع مالًا لشخص ما لكي يبني له موقعًا أو تطبيق ويب، وهرب هذا الشخص، ولكن وعلى الجهة الأخرى، فمعظمنا نحن معشر المطورين نحاول دائمًا أنّ نعمل بشرفٍ واضعين نُصب أعيننا الصدق الأمانة في التعامل، مع ذلك دائمًا ما نواجه أشخاصًا قد يفعلون الفعلة السابقة بنا. وحتّى إن جاء شخصٌ ما إلينا بهدف توظيفنا لإكمال هذه المهمّة، سيكون لديه على الأرجح بعض الشكوك فيما إذا كان من المُمكن الوثوق بنا بالفعل لإنهاء ما كان يجب أنّ يكون مُنتهيًا من الأساس. وعلى الرغم من أنّني أعلم بالضَّبط أن موضوع المؤهلات قد تمّ الحديث عنه سابقًا مرات عدّة، ولكنّي أريد أنّ أكون واضحًا منذ البداية، لست هنا لتكرار تلك المؤهلات. سأحاول بدلًا من ذلك توضيح حقيقة المُطوّر، والنقاط الأبرز الّتي يجب توفّرها لبناء شيء مُخصّص لأحد العُملاء، وما يجب على العميل أنّ يأمل في الحصول عليه في نهاية المشروع. أظن أنّ سطوري هذه ليست موجّهة إلى مُطوّري ووردبريس بالتحديد، بل هي موجّهة إلى هؤلاء الذين يبحثون عن أشخاصٍ لتوظيفهم في تطوير مشروعٍ مبنيٍّ على سكريبت إدارة المُحتوى ووردبريس (WordPress)، وليسوا متأكّدين من اختيار الشخص المُناسب بعد. توظيف مُطوّر ووردبريس WordPressأعتقد أنّه من المُهم بدايةً توضيح رأي حول الفرق بين ذلك الشخص الّذي يبحث عنه الزبون، وذلك الشخص الّذي يحصلون عليه بالفعل، طبعًا هذا رأي الشخصي في نهاية الأمر، والناس أجناس بطبيعة الحال. إن السيناريو المعروف هو أنّ يكون لدى العميل فكرة مشروعٍ ما، وهو بحاجة إلى شخص لتطبيقها، فإن كان العميل من العُملاء الجديين، فستكون لديه الفكرة على الورق (بشكل أو بآخر)، وميزانيّة جاهزة ومحدّدة، بمعنى آخر أنّه قام بواجب التحضير للمشروع مُسبقًا على أكمل وجه، وستكون الخطوة التّالية بالنسبة لهم هي الشروع في البحث على الإنترنت عن مُطوّر ووردبريس، وذلك بعد أنّ سمعوا من هنا وهناك عن سهولة هذا النّظام في إدارة المُحتوى، وعن قوّته في إنشاء مواقع ويب. قام العميل في البحث، ليجد الكثير من الأشخاص الذين يبدو أنّهم مطوّري ووردبريس، وعليه سيوظّف الزبون المُطوّر، ويدفع مُقدمًا، وعلى ما يبدو أنّ الأمور تجري كما هو مُخطّط لها (في البداية فقط). سيبدأ العميل بعد ذلك الطلب من المُطوّر في إضافة ميزةٍ ما لا يعرف المُطوّر كيف يفعلها (بمعنى آخر هو لا يعرف أية إضافات تقوم بهذه الوظيفة أو الميّزة) وبدلًا من تحمّل مسؤوليته كمطوّر، سيأخذ النقود ويتوارى عن الأنظار. قد يقول البعض: أنّ المُطوّر يملك جزء من الدفعة، وقد قام بتنفيذ جزءً مما هو مُتّفق عليه، فهو بشكل أو بآخر يستحق هذا المبلغ، صحيح؟ لم يوظّف العميل مُطوّرًا في حقيقة الأمرما قام به العميل بالفعل هو توظيف شخص يعرف كيف يستخدم ووردبريس، بمعنى آخر هو قام بتوظيف شخص يعرف كيف يستخدم تطبيقًا العميل نفسه لا يعرف كيف يستخدمه، أو سأقولها بشكل آخر، ما تمّ توظيفه هو شخص مُتمرّس فقط. إن مُطوّر ووردبريس هو الشخص الّذي يعرف كيف يستخدم مجموعة محدّدة من الأدوات ويُنشئ من خلالها شيئًا ما يُكمّل منصّة ووردبريس ويوسّع إمكانياتها، أما هذا المُستقل الذي قام صاحبنا بتوظيفه هو شخص يعرف كيف يعطي موقع العميل هيئة معيّنة (عبر تنصيب قالب المدوّنة)، وكيف يُنصّب إضافة معيّنة (بهدف تقديم وظيفة ما)، ولكنّه في نفس الوقت غير قادر على كتابة شيفرة بأنامل أصابعه ليضيف خصائص إلى المشروع أو يُدخل تعديلات عليه. يوجد طرقٌ عدّة لتحديد المُطوّر الحقيقي، ولكن أفضل ما سمعت: رغم ذلك فإنها ليست أداة قياس جيّدة للعُملاء العاديين، وذلك بسبب أنّ العُملاء أصلًا لا تعرف ما هو المُشيّد. عوضًا عن ذلك، على صاحب المشروع أنّ يبحث عن الشخص الّذي يعرف المُصطلحات الصحيحة، الّذي يملك البراعة الفنيّة (التقنية)، ويعرف أيضًا كيف يسير بالمشروع إلى بر الأمان، والنبش هنا وهناك، عندها من المُفترض عليه أنّ يكون قادرًا بنفسه أو مع بقيّة أفراد فريقه على بث الروح في المشروع وتحويل الفكرة إلى كيان يُمكن الاستفادة منه. يجب على المُطوّر أنّ يكون قادرًا على الإجابة بسهولة على الأسئلة مثل: ما هي النماذج السابقة لمشاريع ووردبريس كنت قد عملت عليها؟هل لديك مُدوّنة، صفحة أعمال خاصّة (portfolio)، مقالات، أو شيفرة (كود) أستطيع الاطلاع عليها؟هل لديك مرجع للأعمال الّتي عملت عليها، ويستطيع أصحابها أو حتّى زملائك الحديث عن جودة هذه الأعمال؟وإن كان لدى العميل بعض الخبرة التقنيّة، فمن المُمكن أنّ يسأل المُطوّر الأسئلة من النوع التّالي: ما هو نمط التصميم المدفوع بالأحداث (event-driven)؟ما هو الفرق بين الأفعال (actions) وبين المرشّحات (filters)؟لماذا ليس من المُستحسن استخدام بعض مزايا PHP الجديدة عند التعامل مع شيفرة مبنيّة على سكريبت WorePress؟هل الإضافات (Plugins) مكتوبة بأسلوب البرمجة الكائنيّة (object-oriented) أم بأسلوب إجرائي (procedural)؟ما هي الخمس واجهات برمجيّة (API) المتوفّرة لسكريبت WordPress؟إن الأسئلة السابقة هي أبعد ما تكون من كونها عميقة أو شاملة، ولكنّها بداية جيّدة، وأنا متأكّد أنّ البعض قد يقول أنّ هذه الأسئلة ليست بتلك الأسئلة الصعبة. وكما هو الحال في العثور على الموهبة المُناسبة، أو الشخص المُناسب للعمل معه، فإن السعر أيضًا عامل مُهم، وذلك بسبب أنّ الزبون لديه ميزانيّة محدّدة ولا يُريد أنّ يبزّر ماله على أيًا كان. ولكن يوجد بالفعل عمالة رخيصةيوجد بالتأكيد، حيثُ مع توفّر العمالة تتوفّر النتائج بطبيعة الحال. ولكن وكما هو الحال في العديد من الأعمال، ترتبط العمالة الرخيصة عادةً مع نتائج ليست بتلك الجودة، وطبعًا لا يرغب أحد بالحصول على جودة مُنخفضة، وأيضًا لا يرغب أحد بصرف الآلاف لتحويل فكرتهم إلى موقع. ولكن هناك الكثير من يُمكن له بناء موقع كامل وشامل باستخدام سكريبت ووردبريس وبأرخص الأسعار. يوجد بالفعل من يفعل الكثير مقابل خمسة دولارات، ولكنّه لا يطوّر، يوجد فرق بين هذا وذاك. يوجد بالفعل مطورين حقيقين لسكريبت WordPressما أحاول قوله هو وجود هذا النوع من مطوري WordPress، وهم ليسوا من ذلك النوع الّذي يُنصّب سكريبت ووردبريس مع القالب والإضافة، ومن ثُمّ يدعون أنّهم "طوّروا" مشروع ويب، هم فقط مُستخدمين مُتمرسين فقط. يجب على مُطوّري ووردبريس أنّ يتمتّعوا بالتفكير التحليلي، وأن يكونوا قادرين على بث الروح في الموقع مُستخدمين مُختلف الأدوات والشيفرات، وأن يكونوا قادرين على تفسير وشرح ما طلبه العميل، ولهم القدرة على تقديم نمط عمل واضح في سبيل الحصول على مُنتج يتحدّث عن نفسه. يجب أنّ يكون سير العمل بين المطوّر والعميل قائم على مبدأ تنفيذ الطلب ومن ثُمّ مراجعته ونقاشه فيما بينهم، وهكذا إلى تسليم المُنتج، ولذلك عند يأتي وقت إطلاق الموقع، ستكون العملية سلسلة ومرنة للطرفين إلى أبعد الحدود، وذلك بسبب التدقيق والمراجعة المُسبقة، وما تمّ من الاختبارات على الموقع قُبيل الانطلاق. يُمكن للمزايا أنّ تُضاف وتُحذف من خلال استخدام نظام التحكم في النسخ (source control) ويجب على العميل أنّ يطلب وبدون تردّد من المُطوّر أي شيء من المُمكن تعديله، وأيضًا على المُطوّر أنّ يوضّح للعميل وبالأسباب الصريحة والواضحة لماذا لا يُمكن القيام بالتعديل، أو أنّ التعديل هو خارج مجال الميزانيّة المُقترحة. ولكن الآن، نحن لا نرى هذا النوع من أسلوب العمل، على الأقل ليس مع ووردبريس، وذلك من خلال تجربتي وخبرتي على أقل تقدير. إن كان العميل يبحث عن موقع يُمكن أن يُبنى على سكريبت إدارة المُحتوى ووردبريس، بشكل أو بآخر، فيجب على الأقل عليه أنّ يأخذ بعين الاعتبار الأسئلة والمُحادثات المطروحة هنا، وربما عليه أنّ يقوم بمقابلة مُصغّرة مع عدد مع الأشخاص المُحتملين للوظيفة، واختيار الشخص المُناسب للمُهمّة، وإلا سينتهي المطاف بالعميل مع شيء يُشبه الموقع. ترجمة –وبتصرّف- للمقال ?What is a WordPress Developer.