Block Kit: การมีส่วนร่วมของ Slack ในการสร้าง UI การทำงานร่วมกันที่ดีขึ้น

เผยแพร่แล้ว: 2022-03-10
สรุปโดยย่อ ↬ Slack ได้ทำสิ่งต่างๆ มากมายเพื่อนำทีมและพันธมิตรมารวมกันทางออนไลน์ นอกจากนี้ ยังช่วยให้นักพัฒนาสร้างแอปของตนเองได้อีกมากมาย อย่างไรก็ตาม จนกระทั่งเมื่อไม่นานนี้ นักพัฒนาถูกจำกัดด้วยความสามารถที่พวกเขาสามารถทำได้เพื่อปรับแต่งการออกแบบของแอพเหล่านั้น ที่มีการเปลี่ยนแปลงในวันนี้ด้วย Block Kit

(บทความนี้เป็นบทความที่ได้รับการสนับสนุน) ในช่วงไม่กี่ปีที่ผ่านมา มีการเปลี่ยนแปลงครั้งสำคัญในแง่ของวิธีการทำงานของบริษัท เมื่อธุรกิจต่างๆ เป็นอิสระจากที่ตั้งมากขึ้น เครื่องมือในการทำงานร่วมกันจึงกลายเป็นวิธีมาตรฐานที่ทีมพบปะและทำงานให้เสร็จลุล่วง

ที่กล่าวว่า เพียงเพราะเรามีแอปการทำงานร่วมกันที่ผสานรวมกระบวนการและเครื่องมือทางธุรกิจที่เชื่อมต่อของเรา ไม่ได้หมายความว่าประสบการณ์จะนำไปสู่ประสิทธิภาพหรือประสิทธิผลสูงสุดเสมอไป ทำไม? บางครั้ง UI ที่ไม่เป็นมิตรก็เข้ามาขวางทาง

นั่นเป็นเหตุผลที่วันนี้ฉันจะพูดถึง Block Kit ซึ่งเป็นผลงานของ Slack ในการสร้าง UI การทำงานร่วมกันที่ดีขึ้น

สำหรับผู้ที่สร้างแอป Slack แบบกำหนดเอง (สำหรับไดเรกทอรีแอปหรือเพื่อวัตถุประสงค์ภายใน) นี่จะเป็นการแนะนำเครื่องมือการออกแบบใหม่ของคุณ สำหรับคนที่ไม่มีก็ไม่เป็นไร มีบทเรียนที่มีค่าบางอย่างที่ควรนำออกไปในแง่ของสิ่งที่ทำให้พื้นที่ทำงานมีส่วนร่วมซึ่งจะปรับปรุงการทำงานร่วมกัน

นักพัฒนาคุณรู้หรือไม่ว่า Slack ทำงานอะไรอยู่?

Slack มีความก้าวหน้าอย่างมากนับตั้งแต่เปิดตัวในปี 2013 สิ่งที่เริ่มต้นเมื่อแอปรับส่งข้อความได้กลายเป็นแพลตฟอร์มการทำงานร่วมกันที่มีประสิทธิภาพ

ขณะที่เขียนสิ่งนี้: Slack มีผู้ใช้งานมากกว่า 10 ล้านคนต่อวัน — และพวกมันอาศัยอยู่ทั่วโลก (ถ้าพูดตรงๆ มากกว่า 150 ประเทศ)

ตัวอย่างช่อง Slack สำหรับผู้พูดภาษาญี่ปุ่น
นี่คือตัวอย่างช่อง Slack สำหรับผู้พูดภาษาญี่ปุ่น (ที่มาของภาพ: Slack) (ตัวอย่างขนาดใหญ่)

ไม่ใช่แค่เฉพาะบุคคลที่ใช้ Slack — เกือบ 585,000 ทีมจากสามคนขึ้นไปทำงานร่วมกันภายในแพลตฟอร์ม 65 ของบริษัทที่ติดอันดับ Fortune 100 ก็อยู่ใน Slack เช่นกัน

ภาพรวมการทำงานร่วมกันแบบเรียลไทม์ระหว่างผู้ใช้ Slack
ภาพรวมการทำงานร่วมกันแบบเรียลไทม์ระหว่างผู้ใช้ Slack (แหล่งรูปภาพ: Slack) (ตัวอย่างขนาดใหญ่)

ทั้งหมดนี้ต้องขอบคุณ Slack API ที่เปิดประตูให้นักพัฒนาสร้างและเผยแพร่แอพสาธารณะที่ขยายฟังก์ชันการทำงานของพื้นที่ทำงาน Slack

หน้าแรกของ Slack App Directory
หน้าแรกของ Slack App Directory (ที่มาของภาพ: Slack) (ตัวอย่างขนาดใหญ่)

ด้วยวิธีนี้ ผู้ใช้ Slack จะไม่ต้องสลับไปมาระหว่างเครื่องมือทางธุรกิจที่ใช้บ่อยที่สุด กระบวนการที่เกี่ยวข้องอาจเกิดขึ้นจากภายใน Slack

แม้ว่าบางครั้ง สิ่งที่มีอยู่ใน Slack App Directory ก็ไม่เพียงพอสำหรับสิ่งที่องค์กรของคุณต้องการภายใน คุณอาจเชื่อมส่วนที่แบ่งระหว่างเครื่องมือทางธุรกิจกับสิ่งที่มีอยู่ได้ แต่คุณอาจพบเหตุผลในการสร้างแอป Slack แบบกำหนดเองของคุณเอง

แนะนำชุดบล็อกจาก Slack

นี่คือสิ่งที่: ในขณะที่ Slack ประสบความสำเร็จในการอนุญาตให้นักพัฒนาสร้างแอปของตนเองเพื่อเพิ่มการทำงานร่วมกันภายในแพลตฟอร์ม นักพัฒนาควรทราบวิธีสร้างประสบการณ์ที่ดีได้อย่างไร

ก่อนหน้านี้ API และไดเรกทอรีแอปของ Slack ให้ความยืดหยุ่นและการควบคุมที่จำกัด ดังที่ Brian Elliott ผู้จัดการทั่วไปของแพลตฟอร์มอธิบายว่า:

“วันนี้ แอพทั้งหมดถูกบังคับให้แสดงข้อมูลที่สมบูรณ์ในรูปแบบที่จำกัด หากคุณได้ดูและใช้งานแอปต่างๆ ทั้งหมดใน Slack แล้ว หลายๆ แอปก็จบลงด้วยเลย์เอาต์เดียวกันโดยไม่คำนึงถึงฟังก์ชันที่พวกเขาพยายามจะปรับใช้ เมื่อในความเป็นจริง สิ่งที่คุณต้องการคือชุดของส่วนประกอบที่ช่วยให้คุณสร้างจอแสดงผลแบบอินเทอร์แอกทีฟที่สมบูรณ์ ซึ่งผู้คนสามารถเข้าใจ แยกแยะ และดำเนินการได้ง่ายขึ้น”

ดังนั้น Slack จึงพัฒนา Block Kit

Block Kit เป็นเฟรมเวิร์ก UI ที่ช่วยให้นักพัฒนา นักออกแบบ และผู้สร้างส่วนหน้าสามารถแสดงแอปรับส่งข้อความผ่าน UI ที่สมบูรณ์ โต้ตอบได้และใช้งานง่าย นอกจากนี้ ด้วยการจัดหาชุดองค์ประกอบ UI หรือบล็อกที่ซ้อนกันได้ ตอนนี้ Block Kit ช่วยให้นักพัฒนาสามารถควบคุมและความยืดหยุ่นในการออกแบบแอพและเลย์เอาต์ได้มากขึ้น

หมายเหตุ : หากคุณต้องการเห็นการใช้งาน Block Kit ให้เข้าร่วมเซสชัน Slack ที่กำลังจะมีขึ้น "การสร้างด้วย Block Kit" ซึ่งคุณจะได้รับการสาธิตผลิตภัณฑ์แบบสดและดูว่าการปรับแต่งการออกแบบแอปของคุณทำได้ง่ายเพียงใด

Block Kit มาพร้อมกับสององค์ประกอบหลัก:

1. ตัวสร้างชุดบล็อก

สังเกตความคล้ายคลึงกันระหว่างเครื่องมือสร้างนี้กับเครื่องมืออื่นๆ มากมายที่เราใช้เพื่อสร้างเว็บไซต์และแอปสำหรับลูกค้า:

การสาธิตของตัวสร้าง 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 ได้ชัดเจนยิ่งขึ้น

กุญแจสู่การสร้าง UI การทำงานร่วมกันที่ดีขึ้น

ตอนนี้เราได้เห็นสิ่งที่จะเกิดขึ้นกับ Block Kit แล้ว เราจำเป็นต้องพูดถึงวิธีที่จะช่วยให้คุณสร้างแอปที่นำไปสู่การทำงานร่วมกันอย่างมีประสิทธิผลมากขึ้น

บล็อก

เมื่อเร็ว ๆ นี้ฉันได้พูดคุยเกี่ยวกับ Gutenberg และวิธีที่นักออกแบบสามารถใช้เพื่อประโยชน์ของพวกเขา แม้ว่าโปรแกรมแก้ไข WordPress ใหม่จะมีข้อบกพร่องอย่างชัดเจน แต่ก็ไม่ต้องสงสัยเลยว่าทำไมทีมงานของ WordPress จึงทำการเปลี่ยนแปลง:

ผู้สร้างบล็อกคืออนาคตของการออกแบบเว็บ

ฉันเข้าใจว่าเครื่องมือสร้างบล็อกมักจะเป็นเครื่องมือที่เหมาะสำหรับนักออกแบบเว็บไซต์และผู้ใช้ DIY ผู้สร้างอนุญาตให้ออกแบบฟรอนต์เอนด์แบบภาพและมักมีตัวเลือกการปรับแต่งมากมาย

บล็อกที่สร้างไว้ล่วงหน้าบางส่วนรวมอยู่ใน Block Kit
บล็อกที่สร้างไว้ล่วงหน้าบางส่วนรวมอยู่ใน Block Kit (แหล่งรูปภาพ: Block Kit) (ตัวอย่างขนาดใหญ่)

แต่ Block Kit ทำได้มากกว่านั้น ซึ่งหมายความว่าทั้งนักออกแบบ และ นักพัฒนาสามารถสร้างแอปที่กำหนดเองได้อย่างง่ายดาย

รหัส

ตัวสร้างความแตกต่างที่สำคัญระหว่างบางอย่างเช่นตัวสร้างเว็บไซต์และตัวสร้าง Block Kit คือด้านการเข้ารหัส

ในกรณีส่วนใหญ่ นักออกแบบใช้ตัวสร้างเพจ ดังนั้นพวกเขาจึงไม่ต้องกังวลกับโค้ด พวกเขาอาจเพิ่มคลาส CSS ที่กำหนดเองหรือเพิ่ม HTML ให้กับข้อความ แต่โดยทั่วไปแล้วมันก็เป็นเช่นนั้น นักพัฒนาไม่ทำงานแบบนั้น

ชุดบล็อกประกอบด้วยแผงที่มี JSON ที่เขียนไว้ล่วงหน้าซึ่งนักพัฒนาสามารถคัดลอกและวางลงในแอป Slack ของตนเองได้เมื่อพร้อมใช้งาน แทนที่จะปล่อยให้นักพัฒนาเขียนโค้ดของตนเอง Slack ได้จัดเตรียมโค้ดที่ใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับความเร็วและการออกแบบ

ตัวอย่าง JSON ที่คุณได้รับเมื่อคุณสร้างประสบการณ์การรับส่งข้อความที่หลากหลายในตัวสร้าง
ตัวอย่าง JSON ที่คุณได้รับเมื่อคุณสร้างประสบการณ์การรับส่งข้อความที่หลากหลายในตัวสร้าง (ที่มาของรูปภาพ: Block Kit) (ตัวอย่างขนาดใหญ่)

สิ่งนี้ทำให้นักพัฒนาสามารถมุ่งเน้นไปที่การปรับแต่งแทนที่จะต้องสร้างแอพตั้งแต่เริ่มต้น

ความสม่ำเสมอ

เมื่อผู้ใช้ Slack ก้าวเข้าสู่แพลตฟอร์ม พวกเขารู้ว่าจะเกิดอะไรขึ้น ทุกอินเทอร์เฟซจะเหมือนกันตั้งแต่พื้นที่ทำงานไปจนถึงพื้นที่ทำงาน

อย่างไรก็ตาม เมื่อ API อนุญาตให้นักพัฒนาสร้างแอปเพื่อรวมเข้ากับพื้นที่เหล่านั้น ก็มีความเสี่ยงที่จะแนะนำองค์ประกอบที่ไม่ค่อยเข้ากัน เมื่อสิ่งนี้เกิดขึ้น ความไม่แน่นอนของอินเทอร์เฟซอาจสร้างความสับสนและความลังเลให้กับผู้ใช้ ตัวเลือกเลย์เอาต์ที่ไม่เหมาะสมอาจส่งผลเสียต่อประสบการณ์ได้เช่นกัน

Block Kit ช่วยให้นักพัฒนาสามารถสร้างแอพที่มีส่วนประกอบ UI ที่ซ้อนกันซึ่งได้รับการทดลองและทดสอบแล้ว เมื่อปรับแต่งประสบการณ์ภายในแพลตฟอร์มที่สร้างไว้แล้ว อาจเป็นเรื่องยากที่จะรู้ว่าคุณสามารถดำเนินการได้ไกลแค่ไหน — หรือมันจะได้ผลด้วยซ้ำ Slack ได้นำคำถามเหล่านั้นออกจากสมการ

ระยะห่าง

นี่คือลักษณะการแลกเปลี่ยน Slack แบบดั้งเดิม:

ตัวอย่างผู้ใช้ Slack ที่ส่งข้อความหากัน
ตัวอย่างของผู้ใช้ Slack ที่ส่งข้อความหากัน (แหล่งรูปภาพ: Slack) (ตัวอย่างขนาดใหญ่)

มีแนวโน้มที่จะเป็นการแลกเปลี่ยนแบบคอลัมน์เดียวไปมา และวิธีนี้ใช้ได้ผลดีกับช่อง Slack ที่การทำงานร่วมกันเป็นเรื่องง่าย ข้อความของพนักงานเกี่ยวกับสถานะของงาน ลูกค้าอัปโหลดเนื้อหาที่ขาดหายไป CEO แชร์ลิงก์ไปยังข่าวประชาสัมพันธ์ที่กล่าวถึงบริษัท แต่ไม่ใช่ว่าทุกพื้นที่ทำงานจะเรียบง่ายขนาดนั้น

Block Kit ช่วยให้คุณขยายและเพิ่มพื้นที่ที่ฟีเจอร์ของแอพของคุณครอบครองได้ ตัวอย่างเช่น Block Kit ช่วยให้บริษัทต่างๆ เช่น Optimizely แสดงข้อมูลที่เกี่ยวข้องในรูปแบบสองคอลัมน์เพื่อให้อ่านง่ายขึ้น

Optimizely ใช้ Block Kit เพื่อสร้างรูปแบบสองคอลัมน์
Optimizely ใช้ Block Kit เพื่อสร้างรูปแบบสองคอลัมน์ (ที่มาของภาพ: ปรับให้เหมาะสม) (ตัวอย่างขนาดใหญ่)

นี่เป็นวิธีที่ดีกว่าในการแชร์รายละเอียดที่เกี่ยวข้องในแอป Slack ของทีมคุณ

การโต้ตอบที่หลากหลาย

อีกวิธีหนึ่งในการยกระดับแอปของคุณคือการเปลี่ยนการผสานรวมเป็นหนึ่งเดียวที่เต็มไปด้วยการโต้ตอบ

บล็อกได้รับการพัฒนาเป็นพิเศษเพื่อเพิ่มประสิทธิภาพองค์ประกอบที่ใช้บ่อยที่สุดในการทำงานร่วมกันของ Slack ตัวอย่างเช่น:

  • ใช้บล็อกแบบแบ่ง ส่วน เพื่อการจัดระเบียบที่ดีขึ้น
  • ใช้บล็อก ข้อความ เพื่อปรับแต่งวิธีแสดงข้อความ
  • ใช้บล็อค รูปภาพ ที่มีขนาดเหมาะสม เพื่อให้คุณไม่ต้องกังวลว่าจะแสดงอย่างถูกต้องหรือไม่
  • ใช้บล็อก บริบท เพื่อแสดงทางสายย่อยหรือบริบทเพิ่มเติมเกี่ยวกับข้อความ (เช่น ผู้เขียน ความคิดเห็น การเปลี่ยนแปลง ฯลฯ)
  • ใช้ตัว แบ่ง บล็อกเพื่อปรับปรุงรูปลักษณ์ของแอป
  • ใช้บล็อก การดำเนินการ เช่น การเลือกเมนู การเลือกปุ่ม และวันที่ในปฏิทิน เพื่อนำคุณลักษณะที่ดีขึ้นมาสู่แอปของคุณและทำให้แสดงได้อย่างสัญชาตญาณมากขึ้น
  • ใช้บล็อก 2 ส่วน เพื่อการจัดวางที่สะอาดขึ้น

Doodle มีตัวอย่างที่สวยงามของสิ่งที่สามารถทำได้ด้วยการโต้ตอบที่หลากหลายโดยใช้ Block Kit:

อย่างที่คุณเห็น ผู้ใช้สามารถทำงานร่วมกันเพื่อกำหนดเวลาการประชุมได้อย่างมีประสิทธิภาพเหมือนกับว่าพวกเขาใช้ปฏิทินของบริษัทอื่น ข้อแตกต่างเพียงอย่างเดียวคือตอนนี้พวกเขาสามารถทำทุกอย่างได้ภายในพื้นที่ทำงาน Slack

ห่อ

การทำงานร่วมกันเป็นส่วนสำคัญของความสำเร็จขององค์กร และไม่สำคัญว่าจะเป็นทีม 3 คนหรือทีม 300 คน แต่มีความแตกต่างอย่างมากระหว่างการทำงานร่วมกันและ การ ทำงานร่วมกัน อย่างมีประสิทธิผล

ต้องขอบคุณ API ของ Slack นักพัฒนาจึงได้สร้างวิธีที่ยอดเยี่ยมในการรวมกระบวนการและเครื่องมือที่เกี่ยวข้องเข้ากับแพลตฟอร์ม และต้องขอบคุณ Block Kit การมีส่วนร่วมจากภายนอกจะไม่กระทบต่อประสบการณ์การใช้งานหากการออกแบบองค์ประกอบขาดหายไป

ด้วยความสามารถในการสร้างบล็อกที่ใช้งานง่าย ตัวเลือกการเข้ารหัสที่เป็นมิตรต่อนักพัฒนา และอื่นๆ Block Kit จะช่วยให้นักพัฒนานำประสบการณ์ที่สมบูรณ์ยิ่งขึ้นและการทำงานร่วมกันที่ดีขึ้นมาสู่แพลตฟอร์ม Slack

สิ่งสุดท้ายที่จะพูดถึง:

การประชุม Slack's Frontiers กำลังจะมาในเร็วๆ นี้ โดยจะจัดขึ้นที่ซานฟรานซิสโกในวันที่ 24 และ 25 เมษายน หากคุณวางแผนที่จะเข้าร่วม โปรดทราบว่าแทร็ก Developers จะรวม การฝึกอบรมเต็มวันเกี่ยวกับ Block Kit รวมถึงเวิร์กชอป การสาธิตฟีเจอร์ใหม่ บทช่วยสอน และหนึ่ง- การให้คำปรึกษาแบบตัวต่อตัว หากคุณกำลังคิดเกี่ยวกับ Block Kit นี่เป็นโอกาสที่คุณไม่ควรพลาด