Salta al contenuto
Jidian Stone
  • Home
  • / Articles
  • /
  • Kit di Blocco: Slack Contributo alla Costruzione Di Una Migliore Collaborazione UI

Kit di Blocco: Slack Contributo alla Costruzione Di Una Migliore Collaborazione UI

Dicembre 28, 2021Articles
Suzanne Scacca
  • Circa L’Autore
  • Sviluppatori, sai su cosa ha lavorato Slack?
  • Presentazione di Block Kit Da Slack
  • 1. Block Kit Builder
  • 2. Block Kit Templates
  • Le chiavi per costruire una migliore collaborazione UI
  • Blocchi
  • Codice
  • Coerenza
  • Spaziatura
  • Interazioni ricche
  • Concludere

Circa L’Autore

Suzanne Scacca è un ex WordPress realizzatore, allenatore e manager di agenzia che attualmente lavora come freelance copywriter. Si è specializzata nella creazione di marketing, web …Più aboutSuzanne↬

  • 9 min leggere
  • UI,User Experience,Usabilità
  • Salvate per la lettura offline
  • Share on Twitter, LinkedIn,
Slack ha fatto molto per portare le squadre e partner online. E ‘ anche fatto molto per consentire agli sviluppatori di costruire le proprie applicazioni personalizzate per esso. Fino a poco tempo fa, tuttavia, gli sviluppatori erano limitati da quanto potevano fare per personalizzare il design di tali applicazioni. Che sta cambiando oggi con Block Kit.

(Questo è un articolo sponsorizzato.) Negli ultimi anni, c’è stato un grande cambiamento in termini di modo in cui le aziende lavorano. Man mano che sempre più aziende diventano indipendenti dalla posizione, gli strumenti di collaborazione sono diventati il modo standard in cui i team si incontrano e svolgono il lavoro.

Detto questo, solo perché disponiamo di app di collaborazione che integrano i nostri processi e strumenti aziendali connessi, ciò non significa che l’esperienza porti sempre a un’efficienza o produttività ottimali. Perché? Beh, a volte un’interfaccia utente ostile si mette in mezzo.

Ecco perché, oggi, parlerò di Block Kit, il contributo di Slack alla costruzione di una migliore interfaccia utente di collaborazione.

Per quelli di voi che hanno creato un’app Slack personalizzata (per la directory dell’app o per scopi interni), questa sarà la vostra introduzione al nuovo strumento di progettazione. Per quelli di voi che non l’hanno fatto, va bene. Ci sono alcune lezioni preziose da prendere lontano da questo in termini di ciò che rende per uno spazio di lavoro coinvolgente che migliorerà la collaborazione.

Sviluppatori, sai su cosa ha lavorato Slack?

Slack ha fatto passi da gigante dal suo lancio nel 2013. Quello che originariamente era iniziato come un’app di messaggistica è ora sbocciato in una potente piattaforma di collaborazione.

Al momento di scrivere questo: Slack ha oltre 10 milioni di utenti attivi al giorno-e vivono in tutto il mondo (oltre 150 paesi, per l’esattezza).

Un esempio di canale Slack per altoparlanti giapponesi
Ecco un esempio di canale Slack per altoparlanti giapponesi. (Fonte immagine: Slack) (Anteprima grande)

Non sono solo gli individui che usano Slack: quasi 585.000 team di tre o più persone collaborano all’interno della piattaforma. 65 delle aziende Fortune 100 anche capita di essere su Slack.

 Uno sguardo alla collaborazione in tempo reale tra utenti Slack
Uno sguardo alla collaborazione in tempo reale tra utenti Slack (Fonte immagine: Slack) (Anteprima grande)

Tutto questo grazie all’API Slack che ha aperto la porta agli sviluppatori per creare e pubblicare app disponibili pubblicamente che estendono le funzionalità delle aree di lavoro Slack.

La prima pagina della directory dell'app Slack
La prima pagina della directory dell’app Slack. (Fonte immagine: Slack) (Anteprima grande)

In questo modo, gli utenti Slack non devono rimbalzare tra i loro strumenti di business più comunemente utilizzati. I processi correlati possono avvenire tutti all’interno di Slack.

A volte, tuttavia, ciò che è disponibile nella directory dell’app Slack non è sufficiente per ciò di cui l’organizzazione ha bisogno internamente. Potresti essere in grado di colmare alcune delle divisioni tra i tuoi strumenti aziendali con ciò che c’è, ma potresti anche trovare un motivo per creare le tue app Slack personalizzate.

Presentazione di Block Kit Da Slack

Ecco la cosa: mentre Slack è riuscito a consentire agli sviluppatori di creare le proprie app per migliorare la collaborazione all’interno della piattaforma, come dovrebbero gli sviluppatori sapere come creare una buona esperienza con esso?

Fino a poco tempo fa, la directory API e app di Slack forniva flessibilità e controllo limitati. Come Brian Elliott, il direttore generale della piattaforma, ha spiegato:

” Oggi, tutte le app sono costrette a un insieme limitato di modi per visualizzare informazioni ricche. Se hai guardato, visto e utilizzato tutte le diverse app in Slack, molte di esse finiscono con lo stesso layout indipendentemente dalla funzionalità che stanno cercando di distribuire. Quando in realtà ciò di cui hai bisogno è un insieme di componenti che ti consentono di creare display interattivi ricchi che siano più facili da comprendere, digerire e agire.”

Quindi, Slack ha sviluppato il kit di blocco.

Block Kit è un framework di interfaccia utente che consente a sviluppatori, designer e costruttori di front-end di visualizzare le proprie app di messaggistica attraverso un’interfaccia utente ricca, interattiva e intuitiva. Inoltre, fornendo una serie di elementi dell’interfaccia utente impilabili o blocchi, Block Kit offre ora agli sviluppatori un maggiore controllo e flessibilità sui loro progetti e layout di app.

Nota: Se desideri vedere Block Kit in azione, partecipa alla prossima sessione di Slack, “Costruire con Block Kit”, dove riceverai una dimostrazione di prodotto dal vivo e vedrai quanto sia facile personalizzare il design della tua app.

Blocco Kit viene fornito con due componenti chiave:

1. Block Kit Builder

Si noti la somiglianza tra questo strumento builder e molti degli altri strumenti che usiamo per creare siti web e applicazioni per i clienti:

Una demo del Block Kit builder
Una demo del Block Kit builder (Fonte immagine: Blocco Kit) (Grande anteprima)

I componenti dell’edificio sono sulla sinistra. Basta fare clic su quello che si desidera includere e guardarlo viene aggiunto all’anteprima della tua app al centro.

Vuoi ulteriori personalizzazioni? Controlla l’editor di testo sulla destra. Mentre Block Kit fornisce elementi pre-made che seguono le migliori pratiche per la progettazione di applicazioni di messaggistica, si ha la possibilità di renderli il proprio, se si preferisce.

2. Block Kit Templates

Mentre puoi certamente creare un’interfaccia di messaggistica dal Builder da solo, ti suggerisco di esplorare anche i modelli forniti:

Alcuni dei modelli Block Kit offre agli utenti
Questi sono solo alcuni dei modelli Block Kit offre agli utenti. (Fonte immagine: Block Kit) (Anteprima grande)

Il team di Slack ha già visto casi davvero utili di app Slack in azione. Inutile dire che sanno quali tipi di cose la tua organizzazione potrebbe voler sfruttare per migliorare la collaborazione.

Ecco perché troverai azioni comuni come le seguenti già create per te:

  • Rivedere le richieste di approvazione;
  • Agire sulle nuove notifiche;
  • Eseguire sondaggi e monitorare i risultati;
  • Condurre una ricerca.

Guru è uno di questi strumenti che è leveraged Block Kit per migliorare la sua app Slack:

Guru fornisce una funzione di ricerca nel database all’interno di Slack. I risultati sono ora rapidamente recuperati e più chiaramente visualizzati sul frontend di Slack.

Le chiavi per costruire una migliore collaborazione UI

Ora che abbiamo visto che cosa sta venendo giù la linea con Block Kit, abbiamo bisogno di parlare di come sta andando per aiutare a creare applicazioni che portano a una collaborazione più produttiva.

Blocchi

Recentemente ho parlato del tema Gutenberg e di come i designer possono usarlo a loro vantaggio. Anche se il nuovo editor di WordPress ha chiaramente i suoi difetti, non c’è dubbio sul perché il team di WordPress abbia apportato il cambiamento:

I costruttori di blocchi sono il futuro del web design.

“

Ottengo che i costruttori di blocchi tendono ad essere lo strumento preferito per i web designer e gli utenti fai-da-te. I costruttori consentono la progettazione visiva del frontend e spesso includono abbondanti opzioni di personalizzazione.

 Alcuni dei blocchi pre-made inclusi nel Kit blocco
Alcuni dei blocchi pre-made inclusi nel Kit blocco (Fonte immagine: Kit blocco) (Grande anteprima)

Ma Block Kit fa molto di più, il che significa che sia i progettisti che gli sviluppatori possono creare app personalizzate con facilità.

Codice

La differenza chiave tra qualcosa come un costruttore di siti Web e il costruttore di kit di blocchi è l’aspetto della codifica.

Nella maggior parte dei casi, i progettisti utilizzano i page builder in modo da non dover preoccuparsi del codice. Potrebbero aggiungere alcune classi CSS personalizzate o aggiungere HTML al loro testo, ma in genere è così. Gli sviluppatori non funzionano così però.

Block Kit include un pannello con JSON pre-scritto che gli sviluppatori possono copiare e incollare nella propria app Slack una volta pronta. Piuttosto che lasciare agli sviluppatori di scrivere il proprio codice, Slack fornisce codice che utilizza le migliori pratiche per la velocità e la progettazione.

Un esempio di JSON che si ottiene quando si crea la tua esperienza di messaggistica ricca nel builder
Un esempio di JSON che si ottiene quando si crea la tua esperienza di messaggistica ricca nel builder. (Fonte immagine: Block Kit) (Anteprima grande)

Ciò consente agli sviluppatori di concentrarsi sulla creazione di personalizzazioni invece di dover creare le proprie app da zero.

Coerenza

Quando gli utenti di Slack entrano nella piattaforma, sanno cosa aspettarsi. Ogni interfaccia è la stessa da area di lavoro a area di lavoro.

Tuttavia, quando un’API consente agli sviluppatori di creare app da integrare con quegli spazi, c’è il rischio di introdurre elementi che non si strizzano bene. Quando ciò accade, l’imprevedibilità dell’interfaccia può creare confusione ed esitazione per l’utente finale. Scelte di layout ill-montaggio possono anche danneggiare l’esperienza.

Block Kit consente agli sviluppatori di creare app con componenti UI impilabili che sono stati provati e testati. Quando si personalizza un’esperienza all’interno di una piattaforma già consolidata, può essere difficile sapere fino a che punto si può prendere — o se funzionerà anche. Slack ha tolto queste domande dall’equazione.

Spaziatura

Questo è ciò che lo scambio Slack tradizionale si presenta come:

Un esempio di utenti Slack che si scambiano messaggi
Un esempio di utenti Slack che si scambiano messaggi (Fonte immagine: Slack) (Anteprima grande)

Tende ad essere uno scambio a colonna singola, avanti e indietro. E questo funziona perfettamente per i canali Slack dove la collaborazione è semplice. Messaggio dipendenti sullo stato di un’attività. Un client carica una risorsa mancante. Il CEO condivide un link a un comunicato stampa che menziona la società. Ma non tutte le aree di lavoro sono così semplici.

Block Kit ti aiuta a massimizzare e migliorare lo spazio occupato dalle funzionalità della tua app. Ad esempio, Block Kit consente ad aziende come Optimizely di visualizzare informazioni pertinenti in formati a due colonne per una migliore leggibilità.

Optimizely utilizza Block Kit per creare formati a due colonne
Optimizely utilizza Block Kit per creare formati a due colonne. (Fonte immagine: Optimizely) (Anteprima grande)

Questo è davvero un modo migliore per condividere i dettagli pertinenti nell’app Slack della tua squadra.

Interazioni ricche

Un altro modo per elevare la tua app è trasformare l’integrazione in una ricca di interazioni.

I blocchi sono stati sviluppati appositamente per migliorare gli elementi più comunemente usati nella collaborazione Slack. Biru:

  • Utilizzare il blocco Sezionale per una migliore organizzazione.
  • Utilizzare il blocco di testo per personalizzare la visualizzazione dei messaggi.
  • Usa blocchi di immagini di dimensioni adeguate in modo da poter smettere di preoccuparti se verranno visualizzati correttamente o meno.
  • Usa i blocchi di contesto per mostrare bylines o contesto aggiuntivo sui messaggi (come autore, commenti,modifiche, ecc.)
  • Usa i blocchi divisori per migliorare l’aspetto dell’app.
  • Utilizzare blocchi di azione come la selezione del menu, la selezione dei pulsanti e le date del calendario per portare caratteristiche migliori nella vostra applicazione e farli visualizzare in modo più intuitivo.
  • Utilizzare blocchi a 2 sezioni per layout più puliti.

Doodle ha un bellissimo esempio di ciò che può essere fatto con interazioni ricche utilizzando Block Kit:

Come puoi vedere, gli utenti possono lavorare insieme per pianificare le riunioni con la stessa efficacia di un calendario di terze parti. L’unica differenza è che ora possono fare tutto questo all’interno del loro spazio di lavoro Slack.

Concludere

La collaborazione è una parte essenziale del successo di qualsiasi organizzazione e non importa se si tratta di un team di 3 o di un team di 300. Ma c’è una grande differenza tra lavorare insieme e collaborare in modo produttivo.

Grazie all’API di Slack, gli sviluppatori hanno creato alcuni fantastici modi per integrare processi e strumenti correlati nella piattaforma. E grazie a Block Kit, quei contributi esterni non interromperanno l’esperienza se il design degli elementi non sarà all’altezza.

Con funzionalità di creazione di blocchi intuitive, opzioni di codifica compatibili con gli sviluppatori e altro ancora, Block Kit aiuterà gli sviluppatori a portare esperienze più ricche e una migliore collaborazione alla piattaforma Slack.

Un’ultima cosa da menzionare:

Slack’s Frontiers conference è in arrivo. Sarà a San Francisco il 24 e 25 aprile. Se hai intenzione di partecipare, tieni presente che la traccia degli sviluppatori includerà una giornata intera di formazione su Block Kit, inclusi workshop, nuove demo di funzionalità, tutorial e mentoring one-to-one. Se stai pensando a Block Kit, questa è un’opportunità che non vorrai perdere.

 Smashing Editoriale(ms, ra, il)

Scrivi una risposta o commento. Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli recenti

  • Burnham Pavilions
  • Borsite trocanterica calcifica: risoluzione delle calcificazioni e remissione clinica con trattamento non invasivo. Un caso clinico
  • Car Door Fonoassorbente
  • Sviluppo di allergie: Pericolo nascosto di ossigeno
  • Building Manager Job Description
  • Mozzarella e Pomodoro Caprese Flatbread
  • Vaniglia Brown Sugar Scrub ricetta! {Fai da te Scrub corpo}
  • Questo è quando il tuo mal di cancro è qualcosa di più serio

Copyright Jidian Stone 2022 | Theme by ThemeinProgress | Proudly powered by WordPress