درسنا 100 موقع SaaS لكشف اتجاهات التصميم + أفضل الممارسات (إليك ما وجدناه)

ما هي أفضل الممارسات لتصميم المواقع SaaS؟

هذا هو السؤال الذي طرحته للإجابة بعد التعثر على موقع SaaS ، بعد موقع SaaS ، بعد موقع SaaS ... بدا هذا هو نفسه:

يمكن أن يكون فهم أفضل الممارسات طريقة رائعة لمصممي الويب (ومؤسسي SaaS) للتفكير في وجود علامات تجارية خاصة بهم. إنها مقاربة استغرقها آندي كرستودينا لبضع سنوات عند تحليل معايير الويب لأفضل 50 موقع تسويقي. يمكن أن يساعد أيضًا المصممين والاستراتيجيين والمؤسسين على التخطيط لمبادرات التصميم الخاصة بهم بمعنى إطارات الأسلاك وتحديد عناصر التصميم الرئيسية التي يجب أن تكون على صفحتهم الرئيسية.

نشرت مجموعة نيلسن / نورمان واحدة من أوائل الوثائق حول معايير تصميم الويب وحددت ثلاثة مستويات من التوحيد:

  • قياسي: 80 ٪ من المواقع تستخدم نفس النهج
  • الاتفاقية: 50-79 ٪ من المواقع تستخدم نفس النهج
  • الارتباك: 49 ٪ أو أقل من المواقع تستخدم هذا النهج

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

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

كل هذه الأشياء يمكن أن تجعل تجربة المستخدم أكثر سلاسة وأكثر سهولة.

ولكن هناك الكثير من الأشياء في مساحة SaaS التي يبدو أنها تتكرر دون أي سبب وجيه.

من أجل فهم معايير SaaS لتصميم الويب بشكل أفضل ، اتخذنا أفضل 100 موقع من SaaS1000.com في يناير 2019 ، لإنشاء مجموعة بيانات أوضحت لنا ما هي الأشياء التي أصبحت معايير وما هو تقليدي وما هو الوجه الآخر. فيما يلي نظرة فاحصة على أفضل ممارسات تصميم SaaS التي تحدث في عام 2019:

شعارات العلامة التجارية هي دائما على الجانب الأيسر

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

لكن في بعض الأحيان (في بحثنا ؛ مرة واحدة) يقرر المصمم وضع الشعار في مكان آخر. بينما لم نر أي مواقع تضع شعارها على اليمين ؛ وجدنا DataDog الذي وضع شعاره مباشرة في منتصف موقعه:

في دراسة بحثية عن الشعار ، وجد الناس في Venngage أن 35 ٪ من الناس يفضلون شعارات النص المهيمنة والأفقية لشركات التكنولوجيا.

معظم المواقع SaaS هي استجابة المحمول

نحن نعيش في عالم المحمول.

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

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

يمكن العثور على الفيديو على أقل قليلا من 55 ٪ من المواقع

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

قد لا تزال التوقعات المتعلقة بالتكلفة القديمة التي تأتي مع إنتاج فيديو عالي الجودة تحتفظ بالعلامات التجارية من هذا الاستثمار. ارتفعت شعبية مصنّفات المنتجات المصورة قبل بضع سنوات وأصبحت خدمة شائعة تم شراؤها من خلال مواقع مثل Fiverr و Upwork. اليوم ، لا يزال الطلب على هذه الأنواع من مقاطع الفيديو مرتفعًا جدًا (أكثر من 14800 عملية بحث عن مقاطع فيديو توضيحية شهريًا) ، ولكن ما يزيد قليلاً عن نصف شركات SaaS تستخدمها.

هناك دعوة أولية دائمًا إلى التحرك فوق الطية

هناك أفضل الممارسات الواضحة في مجتمع SaaS وهي أن دعوتك إلى العمل التي تدفع الناس إلى القيام بشيء ما يجب أن تكون أعلى. أكثر من 90 ٪ من جميع المواقع التي تم تضمينها في هذا البحث SaaS Design لديه زر أو دعوة للعمل أعلاه.

موضع الدعوة إلى العمل يختلف

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

ما هي الألوان التي تستخدمها شركات ادارة العلاقات مع الأزرار؟

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

التجريبي المجاني هو الدعوة الأكثر شعبية للعمل

عادةً ما يكون للمواقع التي قمنا بمراجعتها والتي تحتوي على دعوة للعمل شيء واضح يرغبون في أن يفعله الأشخاص. الغالبية منهم يستخدمون لغة المنحى (٪٪) ويدفعون الزائر لفعل شيء يدفعهم أكثر في القمع. بعض الاختلافات تشمل:

  • الجدول الزمني التجريبي
  • طلب عرض توضيحي
  • الحصول على عرض تجريبي مجاني
  • احصل على X مجانًا
  • البدء
  • جرب اكس

تميل الكلمات أو العبارات الأكثر شيوعًا في الدعوة إلى الإجراءات إلى: مجاني ، تجريبي ، ابدأ ، جرّب X ، وطلب ... بعض هذه الكلمات ظهرت معًا (على سبيل المثال ، عرض تجريبي مجاني أو جرّب X مجانًا) ولكن باستخدام مجموعة هذه الكلمات تميل إلى الظهور أكثر في SaaS CTAs الأساسية.

باستخدام خلفية الضوء هو أفضل الممارسات

ليس من الشائع رؤية موقع له خلفية سوداء في SaaS:

تستخدم معظم المواقع (92٪ منها) ألوانًا بيضاء أو فاتحة كخلفية أساسية لمواقعها.

يستخدم Real People مستخدمًا فقط من قبل 56٪ من SaaS

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

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

الرسوم التوضيحية المخصصة شائعة جدًا (70٪)

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

فيما يلي لقطة لبعض المواقع والرسوم التوضيحية:

هذا هو اتجاه مثير للاهتمام.

ما رأيك: هل هذا النهج لتصميم مساعدة الشركات الناشئة يبرز أو هل يؤدي إلى مزجها؟ هل يهم؟ هل يعطي شعورا بالثقة؟

نصف من العلامات التجارية ادارة العلاقات مع استخدام أداة الدردشة الحية

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

لقد وجد بحثنا أن ما يقرب من 50 ٪ من مواقع SaaS لديها مربع دردشة في الزاوية جاهزة للمشاركة. عبر معظم هذه المواقع كانت الخدمات المستخدمة هي الاتصال الداخلي أو الانجراف.

لذلك يجب عليك اتباع المعايير؟

هذا يعتمد.

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

إليك قائمة بالأشياء التي يجب القيام بها إذا كنت تريد موقعًا لا يشبه أي شخص آخر:

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

هل يستوفي موقعك حاليًا هذه المعايير؟

هل فاجأك أي شيء هنا؟

نُشر في الأصل كـ SaaS Web Design Best Practices: Foundation Labs

تم نشر هذه القصة في The Startup ، أكبر منشور لريادة الأعمال في Medium ، يليه + +430،678 شخصًا.

اشترك لتلقي أهم الأخبار هنا.