Block Kit: مساهمة Slack في بناء واجهة مستخدم تعاونية أفضل

نشرت: 2022-03-10
ملخص سريع لقد قام Slack بالكثير لجمع الفرق والشركاء معًا عبر الإنترنت. لقد فعل الكثير أيضًا لتمكين المطورين من إنشاء تطبيقاتهم المخصصة لذلك. حتى وقت قريب ، كان المطورون مقيدون بمدى ما يمكنهم فعله لتخصيص تصميم تلك التطبيقات. هذا يتغير اليوم مع Block Kit.

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

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

لهذا السبب ، سأتحدث اليوم عن Block Kit ، مساهمة Slack في بناء واجهة مستخدم تعاونية أفضل.

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

المطورين ، هل تعرف ما هو Slack الذي يعمل عليه؟

خطى Slack خطوات كبيرة منذ إطلاقه في عام 2013. ما بدأ في الأصل كتطبيق مراسلة تحول الآن إلى منصة تعاون قوية.

حتى كتابة هذا المقال: لدى Slack أكثر من 10 ملايين مستخدم نشط يوميًا - وهم يعيشون في جميع أنحاء العالم (أكثر من 150 دولة ، على وجه الدقة).

مثال على قناة Slack للمتحدثين اليابانيين
هذا مثال على قناة Slack للمتحدثين اليابانيين. (مصدر الصورة: Slack) (معاينة كبيرة)

لا يقتصر الأمر على الأفراد الذين يستخدمون Slack أيضًا - فهناك ما يقرب من 585000 فريق من ثلاثة أشخاص أو أكثر يتعاونون داخل النظام الأساسي. 65 من شركات Fortune 100 موجودة أيضًا على Slack.

لمحة عن التعاون في الوقت الفعلي بين مستخدمي Slack
لمحة عن التعاون في الوقت الفعلي بين مستخدمي Slack (مصدر الصورة: Slack) (معاينة كبيرة)

كل هذا بفضل واجهة برمجة تطبيقات Slack التي فتحت الباب للمطورين لإنشاء ونشر التطبيقات المتاحة للجمهور والتي تعمل على توسيع وظائف مساحات عمل Slack.

الصفحة الأولى من دليل تطبيقات Slack
الصفحة الأولى من دليل تطبيقات Slack. (مصدر الصورة: Slack) (معاينة كبيرة)

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

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

إدخال Block Kit من Slack

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

حتى وقت قريب ، كانت واجهة تطبيق Slack ودليل التطبيق يوفران قدرًا محدودًا من المرونة والتحكم. كما أوضح بريان إليوت ، المدير العام للمنصة:

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

لذلك ، طور Slack Block Kit.

Block Kit هو إطار عمل لواجهة المستخدم يمكّن المطورين والمصممين وبناة الواجهة الأمامية من عرض تطبيقات المراسلة الخاصة بهم من خلال واجهة مستخدم غنية وتفاعلية وبديهية. علاوة على ذلك ، من خلال توفير مجموعة من عناصر أو كتل واجهة المستخدم القابلة للتكديس ، توفر Block Kit الآن للمطورين مزيدًا من التحكم والمرونة في تصميمات وتخطيطات تطبيقاتهم.

ملاحظة : إذا كنت ترغب في رؤية Block Kit قيد التشغيل ، فقم بالانضمام إلى جلسة Slack القادمة ، "Building with Block Kit" ، حيث ستحصل على عرض توضيحي مباشر للمنتج ومعرفة مدى سهولة تخصيص تصميم التطبيق الخاص بك.

تأتي Block Kit مع مكونين رئيسيين:

1. Block Kit Builder

لاحظ التشابه بين أداة البناء هذه والعديد من الأدوات الأخرى التي نستخدمها لإنشاء مواقع الويب والتطبيقات للعملاء:

عرض توضيحي لمنشئ Block Kit
عرض توضيحي لمنشئ Block Kit (مصدر الصورة: Block Kit) (معاينة كبيرة)

مكونات المبنى على اليسار. ما عليك سوى النقر فوق الشخص الذي تريد تضمينه ومشاهدته تتم إضافته إلى معاينة تطبيقك في المنتصف.

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

2. قوالب مجموعة القوالب

بينما يمكنك بالتأكيد إنشاء واجهة مراسلة من Builder بمفردك ، أقترح استكشاف القوالب المتوفرة أيضًا:

تقدم بعض قوالب Block Kit للمستخدمين
هذه ليست سوى بعض القوالب التي تقدمها Block Kit للمستخدمين. (مصدر الصورة: Block Kit) (معاينة كبيرة)

لقد شاهد فريق Slack بالفعل حالات مفيدة حقًا لتطبيقات Slack أثناء العمل. وغني عن القول ، إنهم يعرفون أنواع الأشياء التي قد ترغب مؤسستك في الاستفادة منها من أجل تحسين التعاون.

لهذا السبب ستجد إجراءات شائعة مثل الإجراءات التالية قد تم إنشاؤها بالفعل من أجلك:

  • مراجعة طلبات الموافقة.
  • اتخاذ إجراءات بشأن الإخطارات الجديدة ؛
  • إجراء استطلاعات الرأي ومراقبة النتائج.
  • إجراء بحث.

Guru هي إحدى هذه الأدوات التي استفادت من Block Kit لتحسين تطبيق Slack:

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

مفاتيح بناء واجهة مستخدم تعاون أفضل

الآن بعد أن رأينا ما سيحدث مع Block Kit ، نحتاج إلى التحدث عن كيفية مساعدتك في إنشاء تطبيقات تؤدي إلى تعاون أكثر إنتاجية.

كتل

لقد تحدثت مؤخرًا عن موضوع Gutenberg وكيف يمكن للمصممين استخدامه لصالحهم. على الرغم من أن محرر WordPress الجديد به عيوبه بوضوح ، فلا داعي للتساؤل عن سبب قيام الفريق في WordPress بإجراء التغيير:

بناة الكتل هم مستقبل تصميم الويب.

"

أحصل على أن منشئي الكتل يميلون إلى أن يكونوا الأداة المفضلة لمصممي الويب ومستخدمي DIY. يسمح البناة بتصميم الواجهة المرئية وغالبًا ما يتضمنون خيارات تخصيص وفيرة.

بعض الكتل مسبقة الصنع المضمنة في Block Kit
بعض الكتل مسبقة الصنع المضمنة في Block Kit (مصدر الصورة: Block Kit) (معاينة كبيرة)

لكن Block Kit يفعل أكثر من ذلك بكثير ، مما يعني أنه يمكن لكل من المصممين والمطورين إنشاء تطبيقات مخصصة بسهولة.

رمز

إن الفارق الرئيسي بين شيء مثل منشئ مواقع الويب ومنشئ Block Kit هو جانب الترميز.

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

تتضمن Block Kit لوحة بها JSON مكتوبة مسبقًا بحيث يمكن للمطورين نسخها ولصقها في تطبيق Slack الخاص بهم بمجرد أن يصبح جاهزًا للعمل. بدلاً من ترك المطورين يكتبون التعليمات البرمجية الخاصة بهم ، يوفر Slack رمزًا يستخدم أفضل الممارسات للسرعة والتصميم.

عينة من JSON تحصل عليها عند بناء تجربة المراسلة الغنية في المنشئ
عينة من JSON تحصل عليها عند بناء تجربة المراسلة الغنية في المنشئ. (مصدر الصورة: Block Kit) (معاينة كبيرة)

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

التناسق

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

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

تمكن Block Kit المطورين من إنشاء تطبيقات بمكونات واجهة مستخدم قابلة للتكديس تم تجربتها واختبارها. عند تخصيص تجربة داخل نظام أساسي تم إنشاؤه بالفعل ، قد يكون من الصعب معرفة إلى أي مدى يمكنك أن تأخذها - أو ما إذا كانت ستنجح. لقد أخذ سلاك هذه الأسئلة من المعادلة.

تباعد

هذا ما تبدو عليه منصة Slack exchange التقليدية:

مثال على مستخدمي Slack الذين يقومون بمراسلة بعضهم البعض
مثال على مراسلة مستخدمي Slack لبعضهم البعض (مصدر الصورة: Slack) (معاينة كبيرة)

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

تساعدك Block Kit على زيادة المساحة التي تشغلها ميزات تطبيقك وتحسينها. على سبيل المثال ، تمكّن Block Kit شركات مثل Optimizely من عرض المعلومات ذات الصلة في تنسيقات ذات عمودين لتحسين إمكانية القراءة.

يستخدم Block Kit بشكل أمثل لإنشاء تنسيقات من عمودين
يستخدم Block Kit بشكل أمثل لإنشاء تنسيقات من عمودين. (مصدر الصورة: Optimizely) (معاينة كبيرة)

هذه بالفعل طريقة أفضل لمشاركة التفاصيل ذات الصلة في تطبيق Slack لفريقك.

تفاعلات غنية

هناك طريقة أخرى لرفع مستوى تطبيقك وهي تحويل التكامل إلى تكامل غني بالتفاعلات.

تم تطوير الكتل خصيصًا لتحسين العناصر الأكثر استخدامًا في تعاون Slack. علي سبيل المثال:

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

يحتوي Doodle على مثال جميل لما يمكن فعله بالتفاعلات الغنية باستخدام Block Kit:

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

تغليف

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

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

من خلال إمكانات بناء الكتل البديهية وخيارات الترميز الصديقة للمطورين والمزيد ، ستساعد Block Kit المطورين على تقديم تجارب أكثر ثراءً وتعاونًا أفضل لمنصة Slack.

آخر شيء يجب ذكره:

مؤتمر سلاك فرونتيرز قريبًا. سيكون في سان فرانسيسكو يومي 24 و 25 أبريل. إذا كنت تخطط للحضور ، لاحظ أن مسار Developers سيتضمن تدريبًا ليوم كامل على Block Kit ، بما في ذلك ورش العمل والعروض التوضيحية الجديدة للميزات والبرامج التعليمية ، بالإضافة إلى التوجيه الفردي. إذا كنت تفكر في Block Kit ، فهذه فرصة لا تريد أن تفوتها.