Block Kit: Wkład Slacka w tworzenie lepszego interfejsu współpracy

Opublikowany: 2022-03-10
Szybkie podsumowanie ↬ Slack zrobił wiele, aby połączyć zespoły i partnerów online. Zrobiono również wiele, aby umożliwić programistom tworzenie własnych niestandardowych aplikacji. Jednak do niedawna programiści byli ograniczeni tym, ile mogli zrobić, aby dostosować projekt tych aplikacji. To się dzisiaj zmienia dzięki Block Kit.

(To jest artykuł sponsorowany.) W ciągu ostatnich kilku lat nastąpiła poważna zmiana w sposobie pracy firm. Ponieważ coraz więcej firm staje się niezależnymi od lokalizacji, narzędzia do współpracy stały się standardowym sposobem, w jaki zespoły spotykają się i wykonują pracę.

To powiedziawszy, tylko dlatego, że mamy aplikacje do współpracy, które integrują nasze połączone procesy biznesowe i narzędzia, nie oznacza to, że doświadczenie zawsze prowadzi do optymalnej wydajności lub produktywności. Czemu? Cóż, czasami przeszkadza nieprzyjazny interfejs użytkownika.

Dlatego dzisiaj opowiem o Block Kit, wkładzie Slacka w budowanie lepszego interfejsu współpracy.

Dla tych z Was, którzy zbudowali niestandardową aplikację Slack (do katalogu aplikacji lub do celów wewnętrznych), będzie to wprowadzenie do nowego narzędzia do projektowania. Dla tych z was, którzy tego nie zrobili, to w porządku. Istnieje kilka cennych lekcji, które można z tego wyciągnąć, jeśli chodzi o to, co tworzy angażującą przestrzeń roboczą, która usprawni współpracę.

Deweloperzy, czy wiecie, nad czym pracuje Slack?

Slack poczynił ogromne postępy od czasu swojej premiery w 2013 roku. To, co początkowo było aplikacją do przesyłania wiadomości, teraz przekształciło się w potężną platformę współpracy.

W chwili pisania tego: Slack ma ponad 10 milionów aktywnych użytkowników dziennie — i mieszkają oni na całym świecie (dokładnie w ponad 150 krajach).

Przykładowy kanał na Slacku dla osób posługujących się językiem japońskim
Oto przykład kanału Slack dla osób mówiących po japońsku. (Źródło obrazu: Slack) (duży podgląd)

Nie chodzi tylko o osoby korzystające ze Slacka — prawie 585 000 zespołów składających się z trzech lub więcej osób współpracuje w ramach platformy. 65 firm z listy Fortune 100 również jest na Slacku.

Rzut oka na współpracę w czasie rzeczywistym między użytkownikami Slacka
Rzut oka na współpracę w czasie rzeczywistym między użytkownikami Slack (źródło obrazu: Slack) (duży podgląd)

To wszystko dzięki API Slack, które otworzyło deweloperom drzwi do tworzenia i publikowania publicznie dostępnych aplikacji, które rozszerzają funkcjonalność obszarów roboczych Slack.

Pierwsza strona katalogu aplikacji Slack
Pierwsza strona katalogu aplikacji Slack. (Źródło obrazu: Slack) (duży podgląd)

W ten sposób użytkownicy Slacka nie muszą przeskakiwać między najczęściej używanymi narzędziami biznesowymi. Wszystkie powiązane procesy mogą odbywać się z poziomu Slacka.

Czasami jednak to, co jest dostępne w katalogu aplikacji Slack, po prostu nie wystarcza, aby zaspokoić wewnętrzne potrzeby Twojej organizacji. Możesz być w stanie zniwelować niektóre różnice między narzędziami biznesowymi za pomocą tego, co tam jest, ale możesz również znaleźć powód, aby zbudować własne niestandardowe aplikacje Slack.

Przedstawiamy zestaw blokowy od Slack

Oto rzecz: podczas gdy Slack zdołał umożliwić programistom tworzenie własnych aplikacji w celu usprawnienia współpracy w ramach platformy, skąd programiści mają wiedzieć, jak stworzyć z nią dobre wrażenia?

Do niedawna API i katalog aplikacji Slacka zapewniały ograniczoną elastyczność i kontrolę. Jak wyjaśnił Brian Elliott, dyrektor generalny platformy:

„Dzisiaj wszystkie aplikacje są zmuszone do korzystania z ograniczonego zestawu sposobów wyświetlania bogatych informacji. Jeśli obejrzałeś i widziałeś i używałeś wszystkich różnych aplikacji w Slack, wiele z nich kończy się tym samym układem, niezależnie od tego, jaką funkcjonalność próbują wdrożyć. Kiedy w rzeczywistości potrzebujesz zestawu komponentów, które pozwolą Ci zbudować bogate interaktywne wyświetlacze, które są łatwiejsze do zrozumienia, strawienia i działania przez ludzi”.

Tak więc Slack opracował zestaw blokowy.

Block Kit to struktura interfejsu użytkownika, która umożliwia programistom, projektantom i konstruktorom front-end wyświetlanie ich aplikacji do przesyłania wiadomości za pomocą bogatego, interaktywnego i intuicyjnego interfejsu użytkownika. Ponadto, dostarczając zestaw elementów lub bloków interfejsu użytkownika, które można układać w stos, Block Kit zapewnia teraz programistom większą kontrolę i elastyczność nad projektami i układami aplikacji.

Uwaga : jeśli chcesz zobaczyć Block Kit w akcji, dołącz do nadchodzącej sesji Slack „Building with Block Kit”, podczas której otrzymasz prezentację produktu na żywo i przekonasz się, jak łatwo jest dostosować projekt swojej aplikacji.

Zestaw blokowy zawiera dwa kluczowe elementy:

1. Konstruktor zestawów bloków

Zwróć uwagę na podobieństwo między tym narzędziem do tworzenia a wieloma innymi narzędziami, których używamy do tworzenia stron internetowych i aplikacji dla klientów:

Demo konstruktora Block Kit
Demo kreatora Block Kit (źródło obrazu: Block Kit) (duży podgląd)

Elementy budynku znajdują się po lewej stronie. Po prostu kliknij tę, którą chcesz dołączyć, i zobacz, jak jest dodawana do podglądu Twojej aplikacji w środku.

Chcesz dalszej personalizacji? Sprawdź edytor tekstu po prawej stronie. Chociaż Block Kit zapewnia gotowe elementy, które są zgodne z najlepszymi praktykami projektowania aplikacji do przesyłania wiadomości, możesz stworzyć własne, jeśli wolisz.

2. Szablony zestawu blokowego

Chociaż z pewnością możesz samodzielnie stworzyć interfejs wiadomości z Konstruktora, sugeruję również zapoznanie się z dostarczonymi szablonami:

Niektóre szablony Block Kit oferuje użytkownikom
To tylko niektóre z szablonów, które Block Kit oferuje użytkownikom. (Źródło obrazu: Block Kit) (duży podgląd)

Zespół Slack widział już naprawdę przydatne przypadki aplikacji Slack w akcji. Nie trzeba dodawać, że wiedzą, jakie rzeczy Twoja organizacja może chcieć wykorzystać w celu usprawnienia współpracy.

Dlatego znajdziesz już opracowane dla Ciebie wspólne działania, takie jak poniższe:

  • Przeglądanie wniosków o zatwierdzenie;
  • Podejmowanie działań na nowych powiadomieniach;
  • Prowadzenie ankiet i monitorowanie wyników;
  • Prowadzenie poszukiwań.

Guru jest jednym z takich narzędzi, które wykorzystuje Block Kit do ulepszania swojej aplikacji Slack:

Guru zapewnia funkcję przeszukiwania bazy danych w ramach Slacka. Wyniki są teraz szybko pobierane i wyraźniej wyświetlane na interfejsie Slack.

Klucze do budowania lepszego interfejsu współpracy

Teraz, gdy widzieliśmy, co zbliża się do zestawu Block Kit, musimy porozmawiać o tym, jak pomoże to w tworzeniu aplikacji, które prowadzą do bardziej produktywnej współpracy.

Bloki

Ostatnio mówiłem na temat Gutenberga i tego, jak projektanci mogą go wykorzystać na swoją korzyść. Chociaż nowy edytor WordPressa wyraźnie ma swoje wady, nie ma wątpliwości, dlaczego zespół WordPressa dokonał zmiany:

Konstruktorzy bloków to przyszłość projektowania stron internetowych.

Rozumiem, że twórcy bloków są preferowanym narzędziem dla projektantów stron internetowych i użytkowników DIY. Konstruktorzy pozwalają na wizualne projektowanie frontendu i często zawierają liczne opcje dostosowywania.

Niektóre z gotowych bloków zawartych w zestawie blokowym
Niektóre z gotowych bloków zawartych w zestawie blokowym (źródło obrazu: zestaw blokowy) (duży podgląd)

Ale Block Kit potrafi znacznie więcej, co oznacza, że ​​zarówno projektanci, jak i programiści mogą z łatwością tworzyć niestandardowe aplikacje.

Kod

Kluczowym wyróżnikiem między budowniczym witryn internetowych a budowniczym zestawu blokowego jest aspekt kodowania.

W większości przypadków projektanci używają kreatorów stron, więc nie muszą zawracać sobie głowy kodem. Mogą dodać jakieś niestandardowe klasy CSS lub dodać HTML do swojego tekstu, ale generalnie to wszystko. Deweloperzy jednak tak nie działają.

Block Kit zawiera panel ze wstępnie napisanym kodem JSON, który programiści mogą kopiować i wklejać do własnej aplikacji Slack, gdy jest gotowa do pracy. Zamiast pozostawiać programistom pisanie własnego kodu, Slack zapewnia kod, który wykorzystuje najlepsze praktyki w zakresie szybkości i projektowania.

Próbka JSON, którą otrzymujesz, budując swoje bogate doświadczenie w tworzeniu wiadomości w kreatorze
Próbka JSON, którą otrzymujesz podczas tworzenia rozbudowanego środowiska obsługi wiadomości w kreatorze. (Źródło obrazu: Block Kit) (duży podgląd)

Dzięki temu programiści mogą skupić się na dostosowywaniu zamiast na tworzeniu aplikacji od podstaw.

Spójność

Kiedy użytkownicy Slacka wchodzą na platformę, wiedzą, czego się spodziewać. Każdy interfejs jest taki sam od obszaru roboczego do obszaru roboczego.

Jednak gdy interfejs API pozwala programistom na tworzenie aplikacji integrujących się z tymi przestrzeniami, istnieje ryzyko wprowadzenia elementów, które po prostu nie pasują. Kiedy tak się dzieje, nieprzewidywalność interfejsu może powodować zamieszanie i wahanie dla użytkownika końcowego. Źle dopasowany układ może również zaszkodzić wrażeniu.

Block Kit umożliwia programistom tworzenie aplikacji z wypróbowanymi i przetestowanymi komponentami interfejsu użytkownika, które można układać w stos. Dostosowując doświadczenie na już istniejącej platformie, może być trudno wiedzieć, jak daleko możesz to posunąć — lub czy w ogóle zadziała. Slack usunął te pytania z równania.

Rozstaw

Tak wygląda tradycyjna giełda Slack:

Przykład komunikacji między użytkownikami Slacka
Przykład komunikacji między użytkownikami Slacka (źródło obrazu: Slack) (duży podgląd)

Zwykle jest to wymiana w jednej kolumnie, w tę i z powrotem. Działa to doskonale w przypadku kanałów Slack, gdzie współpraca jest prosta. Komunikat pracowników o statusie zadania. Klient przesyła brakujący zasób. Prezes udostępnia link do komunikatu prasowego wspominającego o firmie. Ale nie wszystkie obszary robocze są tak proste.

Block Kit pomaga zmaksymalizować i zwiększyć przestrzeń zajmowaną przez funkcje aplikacji. Na przykład Block Kit umożliwia firmom takim jak Optimizely wyświetlanie istotnych informacji w formatach dwukolumnowych w celu zapewnienia lepszej czytelności.

Optimizely używa Block Kit do tworzenia formatów dwukolumnowych
Optimizely używa Block Kit do tworzenia formatów dwukolumnowych. (Źródło obrazu: Optimizely) (Duży podgląd)

To rzeczywiście lepszy sposób na udostępnianie istotnych szczegółów w aplikacji Slack Twojego zespołu.

Bogate interakcje

Innym sposobem na podniesienie poziomu aplikacji jest przekształcenie integracji w bogatą w interakcje.

Bloki zostały specjalnie opracowane, aby ulepszyć najczęściej używane elementy we współpracy ze Slackiem. Na przykład:

  • Użyj sekcji Sekcje dla lepszej organizacji.
  • Użyj bloku Tekst , aby dostosować sposób wyświetlania wiadomości.
  • Użyj odpowiednich rozmiarów bloków obrazu , aby przestać się martwić, czy będą się wyświetlać poprawnie.
  • Użyj bloków kontekstowych , aby pokazać autorzy lub dodatkowy kontekst wiadomości (np. autor, komentarze, zmiany itp.)
  • Użyj bloków rozdzielających , aby poprawić wygląd aplikacji.
  • Użyj bloków akcji , takich jak wybór menu, wybór przycisków i daty w kalendarzu, aby wprowadzić lepsze funkcje do swojej aplikacji i sprawić, by były wyświetlane bardziej intuicyjnie.
  • Użyj 2-sekcyjnych bloków, aby uzyskać czystsze układy.

Doodle ma piękny przykład tego, co można zrobić dzięki bogatym interakcjom za pomocą Block Kit:

Jak widać, użytkownicy mogą wspólnie planować spotkania tak samo efektywnie, jak gdyby korzystali z kalendarza innej firmy. Jedyną różnicą jest to, że mogą teraz to wszystko robić w swoim obszarze roboczym Slack.

Zawijanie

Współpraca jest zasadniczą częścią sukcesu każdej organizacji i nie ma znaczenia, czy jest to zespół składający się z 3 osób, czy 300 osób. Istnieje jednak duża różnica między współpracą a współpracą produktywną .

Dzięki API Slacka programiści stworzyli niesamowite sposoby integracji powiązanych procesów i narzędzi z platformą. A dzięki Block Kit te zewnętrzne wkłady nie zakłócą doświadczenia, jeśli projekt elementów nie powiedzie się.

Dzięki intuicyjnym funkcjom budowania bloków, przyjaznym dla programistów opcjom kodowania i nie tylko, Block Kit pomoże programistom wprowadzić bogatsze wrażenia i lepszą współpracę na platformę Slack.

Ostatnia rzecz, o której należy wspomnieć:

Konferencja Slack's Frontiers zbliża się wielkimi krokami. Odbędzie się on w San Francisco 24 i 25 kwietnia. Jeśli planujesz wziąć udział, pamiętaj, że ścieżka dla programistów będzie obejmować całodniowe szkolenie na temat Block Kit , w tym warsztaty, prezentacje nowych funkcji, samouczki, a także jedno- mentoring on-one. Jeśli myślisz o Block Kit, jest to okazja, której nie będziesz chciał przegapić.