تصميم الصفحة المقصودة: بناء الصفحة المقصودة النهائية

تعتبر الصفحة المقصودة الفعالة أمرًا حاسمًا لنجاح المنتج

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

لكن التسويق أمر بالغ الأهمية لنجاح المنتج ، ولا يجب إغفاله. كان هذا هو التحدي حيث صممت وأعدت لإطلاق لوحة المفاتيح الأبرز في العالم للمطورين ، Ultimate Hacking Keyboard.

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

هذه هي قصة الصفحة المقصودة النهائية لـ The Ultimate Hacking Keyboard.

نصيحة تقنية. خطوات عملية إلى الأمام.

يؤدي بحث Google عن "تصميم الصفحة المقصودة" إلى عشرات المقالات الممتازة ، كل منها مليء بنصائح مهمة مثل:

• "يجب تحميل المحتوى في لمح البصر."
• "يجب أن يكون التصوير الفوتوغرافي وثيق الصلة بجمهور الموقع".
• و ، "قم بتضمين نموذج لجمع العملاء المحتملين".

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

في النهاية ، الهدف من هذا الدليل هو توفير الوقت والمال للمصممين والمطورين ، والتي قد تُهدر بخلاف ذلك على التجربة والخطأ غير المثمرتين.

تهدف إلى إنتاج واستضافة الفيديوهات عالية الجودة

أصبح تقديم الفيديو على الويب أسهل من أي وقت مضى ، لكن القليل من المواقع تستخدمه نسبيًا. من منظور الويب ، هذا ليس تحديًا تقنيًا ، ولكنه استثمار للموارد - الوقت والمال.

خضع مقطع الفيديو الدعائي للصفحة المقصودة لـ Ultimate Hacking Keyboard (UHK) إلى اثني عشر تكرارًا ، مع تنقيح كل إصدار جديد تدريجيًا لكل التفاصيل الصغيرة. كانت عملية التصميم مرهقة ولكنها مجزية ، وكان فيديو المقطع الدعائي جوهرة تاج صفحتنا المقصودة. إنه يميز منتجنا تمامًا عن باقي العبوة.

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

إذا كنت تمتلك أنت أو مصممًا آخر في فريقك المهارات والمعدات ، فيمكنك محاولة إنشاء محتوى الفيديو الخاص بك ، ولكن اجعل مقاطع الفيديو قصيرة وبسيطة. نادراً ما تسير الإنتاجات شديدة الطموح في أيدي الهواة بشكل جيد.

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

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

موقع YouTube هو الرائد بلا منازع في السوق ومرادف للفيديو على الويب. إنها خدمة قادرة وخيار معقول ، لكن مشغلها المضمن ليس الخيار الأكثر إرضاءً من الناحية الجمالية.

يتميز Vimeo بمشغل مدمج بتصميم بسيط وأنيق للغاية. تشتهر باستضافة محتوى عالي الجودة وتقديم جودة عالية الدقة.

Wistia هو خيار شائع آخر بين المسوقين. يوفر ميزات متقدمة مثل الخرائط الحرارية للفيديو التي تعرض أجزاء الفيديو التي تمت مشاهدتها وتخطيها وإعادة مشاهدتها.

في النهاية ، قرر فريق UHK أن Vimeo يلبي احتياجاتنا على أفضل وجه. ها هو المقطع الدعائي للصفحة المقصودة: Ultimate Hacking Keyboard

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

قم بإنشاء تجربة غامرة مع المحتوى ثلاثي الأبعاد

من المهم أحيانًا تزويد زوار الصفحة المقصودة بتجربة غامرة. أردنا أن يتمكن زوارنا من استكشاف لوحة مفاتيح Ultimate Hacking ثلاثية الأبعاد ، لذلك كان علينا التحقق من الخدمات المستندة إلى WebGL والتي تم إنشاؤها خصيصًا لهذا الغرض.

Sketchfab هي الخدمة المستندة إلى WebGL الأكثر شيوعًا. من السهل إتقانه ، ويوفر مجموعة من الإعدادات المرئية ، ويمكن دمجه في مجموعة واسعة من خدمات الاستضافة الشائعة.

P3d.in هي خدمة WebGL بسيطة تركز على سهولة الاستخدام ، ولكنها تتمتع بدعم محدود لبعض التركيبات عالية الدقة.

بعد دراسة متأنية ، اخترنا Sketchfab. هذه هي الطريقة التي تبدو بها لوحة المفاتيح Ultimate Hacking ثلاثية الأبعاد.

تصور المشاكل والحلول مع الرسوم المتحركة ثنائية الأبعاد

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

يبدو أن استخدام مقطع فيديو مضمّن أمر مبالغ فيه ، وسيتطلب أيضًا عملاً إضافيًا يتمثل في العرض. لم تكن صور GIF المتحركة خيارًا بسبب حجم ملفها الضخم ولوحة الألوان المحدودة. في النهاية ، اخترنا العمل مع رسوم SVG المتحركة المضمنة لأنها سمحت لرسوماتنا اليدوية بالتحرك بشكل مستقل عن الرسومات الأخرى على الصفحة.

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

كلمة للحكماء - لا تقلل أبدًا من عدد الأشياء التي يمكن أن تسوء!

قياس التحليلات في الوقت الحقيقي

برنامج Google Analytics رائع. إنه مستخدم على نطاق واسع وسهل العمل معه. ومع ذلك ، هناك مرشحون أفضل للعمليات في الوقت الفعلي.

يقوم Chartbeat بعمل رائع في إرسال الإشعارات عندما يتجاوز موقع الويب عتبات معينة ، وعلى الأخص عدد المستخدمين المتزامنين على الموقع. على سبيل المثال ، يتم ربط موقع UHK أحيانًا في المنتديات عبر الإنترنت ، مما يؤدي إلى حدوث ارتفاعات مفاجئة في حركة المرور. بفضل Chartbeat ، نعلم على الفور ، ويمكننا الانضمام إلى المحادثة الجارية في وقت مبكر.

يساعد Mixpanel مسؤولي الويب في تحليل الأحداث مثل زيارات الموقع وفتح حوار الاشتراك وتأكيد الاشتراك. يمكنه أيضًا إنشاء مسارات تحويل من هذه الأحداث وتصور معدلات التحويل ، مما يجعل الأرقام قابلة للتنفيذ.

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

يتيح HotJar لأصحاب مواقع الويب تسجيل تفاعلات زوارهم عن طريق حفظ كل إجراء من الماوس ولوحة المفاتيح وتحويلها إلى مقاطع فيديو.

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

تسجيل الأخطاء ومنع الصداع غير الضروري

أصبحت مواقع الويب تعتمد أكثر فأكثر على JavaScript ، لدرجة أن ميزات الموقع المهمة غالبًا ما تعتمد عليها. على سبيل المثال ، يتم تشغيل مربع حوار الاشتراك في الصفحة المقصودة لـ Ultimate Hacking Keyboard بواسطة كود JavaScript.

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

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

بعد هذه الحادثة ، فكرنا جيدًا في كيفية تجنب المواقف المماثلة في المستقبل. حدث للفريق أنه يجب علينا استخدام معالج الأحداث window.onerror العام للقبض على مثل هذه الأخطاء وتسجيلها. ثم بحثنا عن خدمات التسجيل المناسبة وانتهى بنا الأمر باختيار Errorception.

يعتبر خطأ التصور أمرًا مذهلاً لأنه يقوم بعمل واحد ويقوم به بشكل جيد للغاية - العثور على أخطاء JavaScript. واجهة المستخدم الخاصة به بسيطة وعملية ، والدعم رائع ، ويسمح لمسؤول الموقع بمشاهدة الأخطاء الفردية والتحقيق في آثار المكدس. أفضل ما في الأمر ، أنه يوفر ضجة حقيقية لجهودك.

منذ دمج Errorception ، قمنا بحل عشرات الأخطاء تقريبًا ، بعضها كان غير محتمل وغير متوقع. على سبيل المثال ، تلقينا مرة واحدة خطأ متعلق localStorage واكتشفنا أنه عندما يكون Safari في وضع التصفح الخاص ، ينتج عن localStorage.setItem() خطأ.

من المستحيل حساب كل حالة خطأ خارجية ، لذا يعد التسجيل طريقة رائعة لالتقاط العيوب قبل أن تصبح مصدر إزعاج كبير.

تصميم عملية بناء قليلة الصيانة

في البداية ، بدأت صفحة فهرس UHK كصفحة HTML واحدة مستضافة في WordPress ، وكانت تحتوي على جميع رموز CSS و HTML و JavaScript. في البداية ، كان هذا حلاً ممكنًا ، ولكن مع نمو الصفحة ، أصبحت عبئًا للصيانة ، وكان هناك حاجة إلى نهج أكثر نمطية.

الحل لدينا؟ أولاً ، قمنا بتقسيم كود CSS و HTML و JavaScript إلى عدد من الملفات المنفصلة. بعد ذلك ، قمنا بتحويل ملفات CSS إلى ملفات أقل لتسهيل الصيانة. أخيرًا ، ابتكرنا عملية إنشاء لتجميع كل ملفاتنا الصغيرة.

التحسين دائمًا من أجل الأداء

يعرف فريق UHK من التجربة أن أداء موقع الويب أمر بالغ الأهمية — مثل الوقت الذي كانت صفحتنا المقصودة منقطة بالقطع واستقبلنا 260 زائرًا في وقت واحد. لحسن الحظ ، كان أداء Linode VPS الخاص بنا والذي يبلغ 20 دولارًا أمريكيًا شهريًا بمثابة بطل ، ولكن هذا يتطلب أكثر من مجرد حظ أعمى ، لذلك إليك بعض النصائح لتحسين الأداء:

• التحميل البطيء للصور هو صديقك ، خاصةً إذا كانت صفحتك ، مثل صفحتنا ، تحتوي على الكثير من الصور. نحن نستخدم البرنامج الإضافي WordPress Unveil Lazy Load.

• يمكنك تحميل الأصول كسول كذلك. إذا كان قسم من الصفحة يعتمد على نص برمجي إضافي ، فمن الممكن أن يتم تحميله ببطء عندما يكون داخل إطار العرض. تحقق من رؤية منفذ العرض باستخدام المكون الإضافي jQuery inview ، وقم بتحميل البرنامج النصي باستخدام jQuery.getScript () أو أي أداة تحميل نصوص أخرى.

تصميم الصفحة المقصودة هو مجال تصميم حيوي

لقد تطرقنا إلى عدد غير قليل من مشكلات تصميم الصفحة المقصودة في هذا المنشور ، لذلك دعونا نلخص أهم النقاط:

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

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

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

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