Block Kit: Slack'in Daha İyi Bir İşbirliği Kullanıcı Arayüzü Oluşturmaya Katkısı

Yayınlanan: 2022-03-10

Kısa özet ↬ Slack, ekipleri ve ortakları çevrimiçi olarak bir araya getirmek için çok şey yaptı. Ayrıca, geliştiricilerin bunun için kendi özel uygulamalarını oluşturmalarını sağlamak için çok şey yapıldı. Ancak yakın zamana kadar geliştiriciler, bu uygulamaların tasarımını özelleştirmek için yapabilecekleri şeylerle sınırlıydı. Bugün Block Kit ile bu değişiyor.

(Bu, sponsorlu bir makaledir.) Son birkaç yılda, şirketlerin çalışma biçiminde büyük bir değişiklik oldu. Daha fazla işletme konumdan bağımsız hale geldikçe, işbirliği araçları ekiplerin buluştuğu ve işlerini hallettiği standart yol haline geldi.

Bununla birlikte, bağlı iş süreçlerimizi ve araçlarımızı entegre eden işbirliği uygulamalarımız olması, deneyimin her zaman optimum verimlilik veya üretkenlik sağladığı anlamına gelmez. Niye ya? Eh, bazen düşmanca bir kullanıcı arayüzü araya giriyor.

Bu nedenle bugün, Slack'in daha iyi bir işbirliği kullanıcı arayüzü oluşturmaya katkısı olan Block Kit'ten bahsedeceğim.

Özel bir Slack uygulaması oluşturmuş olanlarınız için (uygulama dizini veya dahili amaçlar için), bu, yeni tasarım aracına girişiniz olacaktır. Olmayanlarınız için, sorun değil. İşbirliğini geliştirecek ilgi çekici bir çalışma alanı oluşturan şeyler açısından bundan çıkarılacak bazı değerli dersler var.

Geliştiriciler, Slack'in Ne Üzerinde Çalıştığını Biliyor musunuz?

Slack, 2013'teki lansmanından bu yana büyük adımlar attı. Başlangıçta bir mesajlaşma uygulaması olarak başlayan şey, şimdi güçlü bir işbirliği platformuna dönüştü.

Bunu yazarken: Slack'in günlük 10 milyondan fazla aktif kullanıcısı var - ve tüm dünyada yaşıyorlar (tam olarak 150'den fazla ülke).

İşte Japonca konuşanlar için bir Slack kanalı örneği. (Resim kaynağı: Slack) (Geniş önizleme)

Slack'i kullananlar sadece bireyler değil - platformda üç veya daha fazla kişiden oluşan yaklaşık 585.000 ekip işbirliği yapıyor. Fortune 100 şirketlerinin 65'i de Slack'te.

Slack kullanıcıları arasında gerçek zamanlı işbirliğine bir bakış — Slack kullanıcıları arasındaki gerçek zamanlı işbirliğine bir bakış (Resim kaynağı: Slack) (Geniş önizleme)

Tüm bunlar, geliştiricilerin Slack çalışma alanlarının işlevselliğini artıran herkese açık uygulamalar oluşturması ve yayınlaması için kapıyı açan Slack API'si sayesindedir.

Slack Uygulama Dizininin ön sayfası. (Resim kaynağı: Slack) (Geniş önizleme)

Bu şekilde, Slack kullanıcılarının en sık kullandıkları iş araçları arasında geçiş yapmasına gerek kalmaz. İlgili işlemler tamamen Slack içinden gerçekleşebilir.

Ancak bazen, Slack App Directory'de bulunanlar, kuruluşunuzun dahili olarak ihtiyaç duyduğu şeyler için yeterli olmayabilir. İş araçlarınız arasındaki bazı farklılıkları orada bulunanlarla kapatabilirsiniz, ancak kendi özel Slack uygulamalarınızı oluşturmak için bir neden de bulabilirsiniz.

Slack'ten Blok Kiti Tanıtımı

Mesele şu: Slack, geliştiricilerin platform içinde işbirliğini geliştirmek için kendi uygulamalarını oluşturmalarına izin vermeyi başarmış olsa da, geliştiricilerin bununla nasıl iyi bir deneyim yaratacağını nasıl bilmeleri gerekiyor?

Yakın zamana kadar, Slack'in API ve uygulama dizini sınırlı esneklik ve kontrol sağlıyordu. Platformun Genel Müdürü Brian Elliott'un açıkladığı gibi:

“Bugün, tüm uygulamalar zengin bilgileri görüntülemek için sınırlı bir dizi yola zorlanıyor. Slack'teki tüm farklı uygulamalara baktıysanız, gördüyseniz ve kullandıysanız, bunların çoğu, hangi işlevsellik dağıtmaya çalıştıklarından bağımsız olarak aynı düzen ile sonuçlanır. Gerçekte ihtiyacınız olan şey, insanların anlaması, sindirmesi ve üzerinde hareket etmesi daha kolay olan zengin etkileşimli görüntüler oluşturmanıza olanak tanıyan bir dizi bileşen olduğunda.”

Böylece Slack, Block Kit'i geliştirdi.

Block Kit, geliştiricilerin, tasarımcıların ve ön uç oluşturucuların mesajlaşma uygulamalarını zengin, etkileşimli ve sezgisel bir kullanıcı arabirimi aracılığıyla görüntülemelerini sağlayan bir UI çerçevesidir. Ayrıca Block Kit, bir dizi istiflenebilir UI öğesi veya bloğu sağlayarak geliştiricilere uygulama tasarımları ve düzenleri üzerinde daha fazla kontrol ve esneklik sağlıyor.

Not : Block Kit'i çalışırken görmek istiyorsanız, canlı bir ürün gösterimi alacağınız ve uygulamanızın tasarımını özelleştirmenin ne kadar kolay olduğunu göreceğiniz yaklaşan “Block Kit ile Oluşturma” Slack oturumuna katılın.

Block Kit iki temel bileşenle birlikte gelir:

1. Blok Kiti Oluşturucu

Bu oluşturma aracı ile müşteriler için web siteleri ve uygulamalar oluşturmak için kullandığımız diğer birçok araç arasındaki benzerliğe dikkat edin:

Block Kit oluşturucunun bir demosu — Block Kit oluşturucusunun bir demosu (Resim kaynağı: Block Kit) (Büyük önizleme)

Bina bileşenleri soldadır. Eklemek istediğinize tıklayın ve merkezdeki uygulamanızın önizlemesine eklenmesini izleyin.

Daha fazla özelleştirme mi istiyorsunuz? Sağdaki metin düzenleyiciye bakın. Block Kit, mesajlaşma uygulamaları tasarlamak için en iyi uygulamaları takip eden önceden hazırlanmış öğeler sağlarken, isterseniz bunları kendiniz yapma olanağına da sahipsiniz.

2. Blok Kiti Şablonları

Builder'dan kendi başınıza bir mesajlaşma arayüzü oluşturabilirsiniz, ancak sağlanan Şablonları da keşfetmenizi öneririm:

Block Kit'in kullanıcılara sunduğu bazı şablonlar — Bunlar Block Kit'in kullanıcılara sunduğu şablonlardan sadece birkaçı. (Resim kaynağı: Block Kit) (Geniş önizleme)

Slack Ekibi, Slack uygulamalarının gerçekten yararlı örneklerini iş başında gördü. Söylemeye gerek yok, gelişmiş işbirliği adına kuruluşunuzun ne tür şeylerden yararlanmak isteyebileceğini biliyorlar.

Bu nedenle, aşağıdakiler gibi sizin için önceden oluşturulmuş yaygın eylemler bulacaksınız:

Onay taleplerinin gözden geçirilmesi;
Yeni bildirimlerde aksiyon alınması;
Anketler yürütmek ve sonuçları izlemek;
Arama yapmak.

Guru, Slack uygulamasını geliştirmek için Block Kit'ten yararlanan böyle bir araçtır:

Guru, Slack içinde bir veritabanı arama işlevi sağlar. Sonuçlar artık hızlı bir şekilde alınıyor ve Slack'in ön ucunda daha net bir şekilde görüntüleniyor .

Daha İyi Bir İşbirliği Kullanıcı Arayüzü Oluşturmanın Anahtarları

Artık Block Kit ile neler olduğunu gördüğümüze göre, daha üretken işbirliğine yol açan uygulamalar oluşturmanıza nasıl yardımcı olacağı hakkında konuşmamız gerekiyor.

bloklar

Geçenlerde Gutenberg konusundan ve tasarımcıların bunu kendi avantajlarına nasıl kullanabileceklerinden bahsettim. Yeni WordPress editörünün açıkça kusurları olsa da, WordPress'teki ekibin değişikliği neden yaptığına dair hiçbir soru işareti yok:

Blok oluşturucular web tasarımının geleceğidir.
“

Blok oluşturucuların web tasarımcıları ve DIY kullanıcıları için tercih edilen araç olma eğiliminde olduğunu anlıyorum. Oluşturucular, görsel ön uç tasarımına izin verir ve genellikle çok sayıda özelleştirme seçeneği içerir.

Blok Kitinde bulunan önceden hazırlanmış bloklardan bazıları — Block Kit'te bulunan bazı önceden hazırlanmış bloklar (Resim kaynağı: Block Kit) (Büyük önizleme)

Ancak Block Kit bundan çok daha fazlasını yapar; bu, hem tasarımcıların hem de geliştiricilerin kolaylıkla özel uygulamalar oluşturabileceği anlamına gelir.

kod

Bir web sitesi oluşturucu ile Block Kit oluşturucu gibi bir şey arasındaki temel fark, kodlama yönüdür.

Çoğu durumda, tasarımcılar kodla uğraşmamaları için sayfa oluşturucular kullanır. Bazı özel CSS sınıfları ekleyebilir veya metinlerine HTML ekleyebilirler, ancak genellikle bu kadardır. Ancak geliştiriciler böyle çalışmaz.

Block Kit, hazır olduğunda geliştiricilerin kendi Slack uygulamalarına kopyalayıp yapıştırabilecekleri önceden yazılmış JSON içeren bir panel içerir. Geliştiricilerin kendi kodlarını yazmalarına izin vermek yerine Slack, hız ve tasarım için en iyi uygulamaları kullanan kodlar sağlar.

Oluşturucuda zengin mesajlaşma deneyiminizi oluşturduğunuzda elde ettiğiniz bir JSON örneği. (Resim kaynağı: Block Kit) (Geniş önizleme)

Bu, geliştiricilerin uygulamalarını sıfırdan oluşturmak yerine özelleştirmeler yapmaya odaklanmalarını sağlar.

Tutarlılık

Slack kullanıcıları platformun içine girdiklerinde ne bekleyeceklerini bilirler. Her arayüz çalışma alanından çalışma alanına aynıdır.

Bununla birlikte, bir API, geliştiricilerin bu alanlarla entegre olacak uygulamalar oluşturmasına izin verdiğinde, iyi uyum sağlamayan öğeleri sunma riski vardır. Bu olduğunda, arayüzün öngörülemezliği, son kullanıcı için kafa karışıklığı ve tereddüt yaratabilir. Uygun olmayan yerleşim seçenekleri de deneyime zarar verebilir.

Block Kit, geliştiricilerin denenmiş ve test edilmiş yığınlanabilir UI bileşenleriyle uygulamalar oluşturmasına olanak tanır. Halihazırda kurulmuş bir platformda bir deneyimi özelleştirirken, onu ne kadar ileri götürebileceğinizi veya işe yarayıp yaramayacağını bilmek zor olabilir. Slack bu soruları denklemden çıkardı.

boşluk

Geleneksel Slack değişimi şöyle görünür:

Birbirleriyle mesajlaşan Slack kullanıcılarının bir örneği — Birbiriyle mesajlaşan Slack kullanıcılarının bir örneği (Resim kaynağı: Slack) (Büyük önizleme)

Tek sütunlu, ileri geri bir değişim olma eğilimindedir. Ve bu, işbirliğinin basit olduğu Slack kanalları için gayet iyi çalışıyor. Çalışanlar bir görevin durumu hakkında mesaj gönderir. Bir müşteri eksik bir varlık yükler. CEO, şirketten bahseden bir basın bülteninin bağlantısını paylaşıyor. Ancak tüm çalışma alanları o kadar basit değildir.

Block Kit, uygulamanızın özelliklerinin kapladığı alanı en üst düzeye çıkarmanıza ve geliştirmenize yardımcı olur. Örneğin Block Kit, Optimizely gibi şirketlerin daha iyi okunabilirlik için ilgili bilgileri iki sütunlu formatlarda görüntülemesini sağlar.

İki sütunlu formatlar oluşturmak için Optimizely Block Kit'i kullanır — Optimizely, iki sütunlu formatlar oluşturmak için Block Kit'i kullanır. (Görüntü kaynağı: Optimizely) (Geniş önizleme)

Bu, ekibinizin Slack uygulamasında ilgili ayrıntıları paylaşmanın gerçekten daha iyi bir yoludur.

Zengin Etkileşimler

Uygulamanızı yükseltmenin başka bir yolu, entegrasyonu etkileşimlerle zengin bir hale getirmektir.

Bloklar, Slack işbirliğinde en sık kullanılan öğeleri geliştirmek için özel olarak geliştirilmiştir. Örneğin:

Daha iyi organizasyon için Kesit bloğunu kullanın.
Mesajların nasıl görüntüleneceğini özelleştirmek için Metin bloğunu kullanın.
Doğru şekilde görüntülenip görüntülenmeyecekleri konusunda endişelenmeyi bırakabilmeniz için uygun boyutta Görüntü blokları kullanın.
İletiler hakkında (yazar, yorumlar, değişiklikler vb.)
Uygulamanın görünümünü iyileştirmek için Bölücü bloklarını kullanın.
Uygulamanıza daha iyi özellikler getirmek ve bunların daha sezgisel bir şekilde görüntülenmesini sağlamak için menü seçimi, düğme seçimi ve takvim tarihleri gibi Eylem bloklarını kullanın.
Daha temiz düzenler için 2 bölümlü blokları kullanın.

Doodle'da Block Kit kullanılarak zengin etkileşimlerle neler yapılabileceğine dair güzel bir örnek var:

Gördüğünüz gibi, kullanıcılar toplantıları bir üçüncü taraf takvimi kullanıyormuş gibi etkili bir şekilde planlamak için birlikte çalışabilirler. Tek fark, artık bunların hepsini Slack çalışma alanlarında yapabilmeleridir.

Toplama

İşbirliği, herhangi bir organizasyonun başarısının önemli bir parçasıdır ve 3 kişilik bir ekip veya 300 kişilik bir ekip olması farketmez. Ancak birlikte çalışmak ile verimli bir şekilde işbirliği yapmak arasında büyük bir fark vardır.

Slack'in API'si sayesinde geliştiriciler, ilgili süreçleri ve araçları platforma entegre etmenin harika yollarını yarattı. Ve Block Kit sayesinde, bu dış katkılar, öğelerin tasarımı yetersiz kaldığında deneyimi kesintiye uğratmaz.

Sezgisel blok oluşturma yetenekleri, geliştirici dostu kodlama seçenekleri ve daha fazlasıyla Block Kit, geliştiricilerin Slack platformuna daha zengin deneyimler ve daha iyi işbirliği getirmesine yardımcı olacak.

Son bir şeyden bahsetmek gerekirse:

Slack'in Frontiers konferansı yakında geliyor. 24 ve 25 Nisan'da San Francisco'da olacak. Katılmayı planlıyorsanız, Geliştiriciler parkurunun, atölyeler, yeni özellik demoları, öğreticiler ve bir tane de dahil olmak üzere Block Kit'te tam günlük bir eğitimi içereceğini unutmayın. bire bir mentorluk. Block Kit'i düşünüyorsanız, bu kaçırmak istemeyeceğiniz bir fırsat.