Sono passati 10 mesi da quando abbiamo lanciato Page Builder Sandwich al pubblico. Ora abbiamo circa 6.000 installazioni attive, e questo è un bel traguardo per noi. Abbiamo anche ricevuto una valanga di feedback grazie a ciò, sia positivi che negativi. Il consenso generale, tuttavia, è che le persone apprezzano quanto sia facile creare layout e realizzare i propri contenuti rispetto agli altri page builder disponibili sul mercato.
Gran parte dei feedback ricevuti riguardava richieste di funzionalità, e ne abbiamo aggiunte molte negli ultimi mesi. Ma continuando a farlo, stavamo anche iniziando lentamente a cambiare l’interfaccia utente nel processo. E, di conseguenza, stavamo anche cambiando l’esperienza utente… in peggio. Si era arrivati al punto, però, in cui avevamo bisogno di ripensare l’interfaccia, perché semplicemente non funzionava più in modo fluido e le diverse funzionalità non si integravano bene tra loro.
La vecchia interfaccia
Nelle versioni precedenti di PBS, volevamo che tutto avesse la forma di pulsanti. Perché? Perché i pulsanti sono facili da usare. Basta… cliccarci sopra. Nelle versioni precedenti dell’inspector (la barra laterale nell’immagine sopra), facendo clic su un pulsante si aumentava un valore, mentre facendo Maiusc+clic su un pulsante lo si diminuiva. Sembra abbastanza semplice. Ma con l’aggiunta di caroselli, schede, mappe e altri nuovi elementi e funzionalità, tutti quei pulsanti sono diventati un miscuglio di icone diverse con design differenti, e hanno iniziato a sembrare più geroglifici che un’interfaccia accattivante. Questo non era un problema per gli utenti esperti, ma è piuttosto intimidatorio a vedersi se si è nuovi su PBS.
In secondo luogo, sono emersi un paio di problemi nell’inspector. L’idea originale era quella di rendere tutto semplice e disponibile all’interno dell’inspector. E con tutto, intendevo tutto – dal trasformare il testo in intestazioni, al cambiare i colori di sfondo, i colori dei font, e quant’altro. Nel suo stato attuale, tuttavia, l’inspector ora contiene molte opzioni che costringono a usare continuamente la rotellina del mouse per scorrere verso l’alto e verso il basso. Molto diverso dall’inspector che originariamente speravo di creare per gli utenti.
Infine, abbiamo recentemente introdotto la mappatura degli shortcode per i tuoi plugin preferiti. Questa funzionalità ci ha richiesto di creare campi di testo, cursori numerici, caselle di controllo e ulteriori nuovi tipi di opzioni necessari per rendere più piacevole la tua esperienza di modifica degli shortcode. Inizialmente era una buona idea e sì, ha reso più semplice la gestione degli shortcode per te. Ma ancora una volta, questa funzionalità si allontanava dalla nostra interfaccia “a soli pulsanti”. A posteriori, era davvero impossibile utilizzare solo pulsanti per modificare gli attributi degli shortcode. Ora, nell’ultima versione, ci siamo ritrovati con 2 tipi di controlli: i pulsanti e i campi degli shortcode.
Ci sono altri motivi che ci hanno spinto a decidere che la nostra interfaccia non era più efficace (o adatta alle nostre esigenze), ma i punti precedenti sono i principali. Una cosa però è sempre stata certa: sapevamo di dover aggiornare l’interfaccia.
Definire come dovrebbe idealmente funzionare un page builder
Invece di gettarci a capofitto e cambiare le cose immediatamente, abbiamo fatto cento passi indietro per dare un’occhiata all’intera esperienza del page builder. Volevamo dare nuova vita all’interfaccia. In tutta sincerità, non volevamo continuare a ricostruirla anno dopo anno. È estenuante e sicuramente non porta un aiuto significativo alla community di WordPress. Questa volta, abbiamo deciso di fare le cose lentamente e con attenzione. Abbiamo studiato ogni angolo di Page Builder Sandwich e ciò che lo rende un buon page builder, e alla fine abbiamo sintetizzato l’intera esperienza di modifica in alcuni concetti fondamentali.
Concetto fondamentale n. 1: digitare direttamente nei tuoi contenuti per modificare le cose
Uno dei motivi principali per installare un page builder è liberarsi dai vincoli dell’editor di testo backend di WordPress. Non che l’editor backend non sia valido, ma durante la creazione delle pagine web, non mostra immediatamente come apparirebbe la tua pagina web ai visitatori del sito, né ti consente di impaginare i tuoi contenuti al di fuori di un layout a colonna singola. Lì puoi vedere solo il tuo testo e alcune immagini, ma nessuno degli elementi più elaborati (ad es. i moduli di contatto). Puoi aggiungere shortcode, sì, ma non verranno mostrati nella loro forma renderizzata*.
* Esistono plugin creati da altri per ovviare a questo problema, come Shortcake UI, ma questo è un altro discorso.
È qui che entrano in gioco i page builder frontend. Portano l’esperienza di modifica fuori dal backend e dentro al frontend, con te che modifichi il tuo sito esattamente nel modo in cui lo vedrebbero realmente i tuoi visitatori. Come direbbe Pippin: What you see is what you get (ciò che vedi è ciò che ottieni – WYSIWYG).
Un altro vantaggio dell’essere un editor frontend è che ti consente di modificare il testo direttamente. Digitare intestazioni e paragrafi offre la comodità di utilizzare il consueto elaboratore di testi nella creazione di siti web. Anche i pulsanti e le etichette delle schede dovrebbero poter essere modificati semplicemente cliccandoci sopra e digitando.
Questo è il settore in cui la maggior parte degli altri page builder non offre prestazioni ottimali. La maggior parte di essi ti costringe a digitare all’interno di un campo di testo per modificare qualsiasi cosa. Anche in questo caso, non dovrebbe essere così nei veri page builder frontend. Digitare e modificare il testo direttamente è stato un punto di forza di Page Builder Sandwich sin dalla versione 2, e ci siamo assicurati che questo principio venisse mantenuto anche nella versione 3.
Concetto fondamentale n. 2: utilizzare il mouse per modifiche rapide
Il mouse è uno strumento potente che viene spesso trascurato nei page builder. Spesso i page builder lo utilizzano per consentire alle persone di trascinare gli elementi e rilasciarli in posizioni diverse, oppure per fare clic su pulsanti o campi di input. Sebbene ciò vada bene, c’è molto di più che puoi fare con il mouse in termini di creazione di pagine.
Per prima cosa, c’è un fantastico feedback visivo nell’usare il mouse come strumento per modificare la pagina, soprattutto nella regolazione di proprietà visive come margini, padding e dimensioni. Ora, modificare i tuoi elementi diventa un’esperienza naturale.
In PBS versione 3, potrai regolare una serie di cose usando il mouse. Puoi regolare margini/spaziature tra singoli elementi, i padding all’interno delle tue colonne, nonché le dimensioni di immagini, icone e mappe. Abbiamo anche sostituito con dei cursori i pulsanti che consentivano di modificare i valori numerici.
Concetto fondamentale n. 3: il testo dovrebbe essere facile da formattare
Se fai un passo indietro rispetto al tuo monitor, noterai che la maggior parte di ciò che aggiungi nelle tue pagine web sono contenuti testuali. Sì, abbiamo immagini e icone ad accompagnarli – e ultimamente tendiamo ad aggiungere immagini più grandi nei nostri siti. Ma la maggior parte dei contenuti importanti è interamente testuale: titoli, elenchi puntati, paragrafi, citazioni, ecc. Parallelamente, c’è il modo in cui formattiamo il nostro testo per adattarlo al nostro design. Ne cambiamo le dimensioni e i colori, oppure lo rendiamo in grassetto o in corsivo. Questo serve a rendere i nostri contenuti più leggibili, pertinenti e accattivanti per i nostri rispettivi lettori.
Poiché formattiamo spesso il testo, i pulsanti che ci consentono di cambiare gli stili dovrebbero essere estremamente accessibili. Non dovrebbero essere nascosti all’interno di una finestra popup che dobbiamo prima aprire. La maggior parte dei page builder soffre di questo difetto. Affinché la loro interfaccia utente possa essere etichettata come “ordinata”, persino le opzioni più utilizzate vengono celate alla vista.
Per risolvere questo problema, abbiamo dato un’occhiata agli elaboratori di testi più comunemente usati. Abbiamo notato che di solito hanno una riga con una miriade di pulsanti vicino alla parte superiore dello schermo utilizzata per formattare il testo e abbiamo replicato lo stesso layout per la versione 3. Ora abbiamo una riga con tutti i pulsanti per la formattazione del testo sempre presente nella parte superiore dello schermo. Questo rende la formattazione davvero rapida e quasi una seconda natura nell’editing del testo.
Concetto fondamentale n. 4: le opzioni di stile avanzate dovrebbero essere flessibili ma facili da comprendere
Il punto fondamentale di un page builder è che dovrebbe consentire alle persone di creare design sbalorditivi facilmente. Ciò significa che dovremmo fornire molte impostazioni e opzioni diverse senza imporre una curva di apprendimento complessa. Poter regolare margini, padding e formattare il testo è fantastico, ma queste cose possono fare solo fino a un certo punto. Avrai bisogno di opzioni molto più elaborate per completare il lavoro, opzioni come immagini di sfondo, pattern, bordi, sfondi fissi e altro ancora. Accumulare tutte queste diverse impostazioni può diventare un po’ opprimente, quindi ne abbiamo semplificate alcune e le abbiamo organizzate in categorie per rendere le cose più intuitive nella versione 3.
Concetto fondamentale n. 5: supporto per gli shortcode
Infine, non dimentichiamo che il nostro page builder poggia su WordPress. Dovremmo accogliere la piattaforma e le sue funzionalità, senza limitarle o deviare da esse. Una funzionalità fondamentale fornita da WordPress sono gli shortcode. Ciò non significa che l’intero contenuto debba essere composto da shortcode – sarebbe caotico – ma dovremmo piuttosto essere semplicemente compatibili con essi. Molti plugin e temi utilizzano gli shortcode, e sarebbe un vero spreco ignorarli tutti. In effetti, gli shortcode offrono agli utenti la massima flessibilità quando si tratta di creare pagine.
Alcune settimane fa abbiamo introdotto il nostro sistema di mappatura degli shortcode e, grazie ad esso, abbiamo mappato centinaia di shortcode provenienti da centinaia di plugin. Abbiamo dato la priorità ai plugin più popolari presenti nella directory dei plugin di WordPress, quindi è probabile che tu li incontri nei tuoi siti. Tutto questo si è solo rafforzato nella versione 3, e continueremo a migliorarlo anche in futuro.
Conclusione
Abbiamo preso tutte queste proprietà fondamentali menzionate sopra e le abbiamo incorporate in Page Builder Sandwich versione 3. È il miglior page builder che abbiamo creato per WordPress fino ad oggi. È più intuitivo e più naturale da usare, offre prestazioni più veloci, è più facile da utilizzare e più accessibile che mai.
Se hai qualche opinione su una funzionalità essenziale per un page builder, faccelo sapere lasciando un commento qui sotto.