Adobe Experience Manager vs. WordPress: Pengalaman Penulisan Dibandingkan

Diterbitkan: 2022-03-10

Ringkasan cepat Editor berbasis blok meningkatkan pengalaman pengguna bagi mereka yang membuat dan menerbitkan konten. Seperti apa rupa editor masa depan? Mari kita bandingkan pengalaman penulisan baru di WordPress dengan pengalaman dari AEM.

Terima kasih, WordPress dan Gutenberg, karena telah menjadikan pengeditan berbasis blok sebagai standar untuk pembuatan halaman web. Pada artikel ini, saya akan membandingkan pengalaman penulisan baru di WordPress dengan pengalaman dari Adobe Experience Manager (AEM), sistem manajemen konten perusahaan yang juga mencakup pengeditan berbasis blok. Saya telah mengimplementasikan WordPress dan AEM untuk banyak perusahaan (seperti Informatica dan Twitter) dan harus menyadari bahwa meskipun pengalaman penulisan sangat penting untuk penulis non-teknis, sering diabaikan oleh pengembang.

Catatan : Dengan istilah "pengalaman menulis" saya mengacu pada pengalaman pengguna untuk orang-orang yang tujuannya adalah untuk membuat dan mempublikasikan konten di situs web. Saya tidak mengacu pada orang-orang yang akan mengkonsumsi konten yang diterbitkan. Jika Anda belum pernah memikirkan tentang pengalaman menulis sebelumnya, inilah primer oleh Eileen Webb yang juga ditampilkan dalam Smashing Book 5.

Adobe Experience Manager, dibandingkan dengan WordPress, adalah sistem yang kompleks dengan kurva pembelajaran yang curam, terutama untuk pengembang. Pada saat yang sama, AEM lebih mudah digunakan daripada solusi manajemen konten yang lebih mapan dan lebih mahal, menempatkan AEM di antara solusi gratis dan sangat mahal.

Dari perspektif teknis, AEM adalah konglomerat teknologi open source dengan beberapa sentuhan dari Adobe, menempatkan AEM di suatu tempat di antara perangkat lunak open-source dan berpemilik. Sentuhan-sentuhan dari Adobe itulah yang membuat sistem berkilau dan dapat digunakan. Misalnya, pembuat halaman seret dan lepas visual telah menjadi cara standar untuk membuat halaman di AEM — jauh sebelum WordPress Gutenberg lahir.

Mari kita lihat beberapa fitur yang meningkatkan pengalaman penulisan di atas rata-rata.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Komponen (Blok)

Salah satu ide paling signifikan untuk situs web adalah konsep komponen (atau blok dalam istilah WordPress). Komponen mewakili sepotong konten yang mengikuti aturan tertentu alih-alih menjadi gumpalan apa pun. Misalnya, Anda dapat memiliki komponen video di mana penulis hanya dapat menempelkan tautan Youtube dan mengontrol pengaturan khusus Youtube. Atau Anda dapat memiliki komponen kutipan di mana penulis menambahkan kutipan ke satu bidang teks dan nama orang yang dikutip ke bidang teks lain. Anda bahkan dapat memiliki komponen tata letak yang berisi komponen lain dan menampilkannya di bawah satu sama lain pada perangkat seluler, sedangkan pada layar besar, komponen tersebut tersebar di tiga kolom.

Komponen judul di AEM dengan overlay yang menyertakan tombol edit — Penulis dapat memperbarui komponen langsung di editor visual. Opsi pengeditan yang tersedia ditampilkan berdasarkan komponen yang dipilih. (Sumber gambar) (Pratinjau besar)

Seorang penulis tahu persis apa yang diharapkan dari komponen tertentu dan dapat dengan mudah mengisinya dengan konten yang sesuai. Yang tidak kalah pentingnya adalah manfaat jangka panjang dan peluang baru yang tidak mungkin dilakukan untuk pendekatan lama “satu bidang teks cocok untuk semua konten” yang telah lazim selama beberapa dekade terakhir:

Jika komponen memerlukan input tanggal, dialog pembuatan komponen dapat menampilkan pemilih tanggal, bukan bidang teks biasa, sehingga memudahkan penulis untuk memilih tanggal dengan format yang tepat.
Jika seorang desainer ingin nama orang yang dikutip ditampilkan di atas kutipan alih-alih di bawah kutipan, pengembang dapat dengan mudah mengatur ulang kode karena kutipan dan nama disimpan secara terpisah. Jika kutipan dan nama akan disimpan dengan cara kuno, pengembang harus mengekstrak nama secara manual dari gumpalan teks dan memindahkannya di depan kutipan.
Jika kutipan perlu diterjemahkan dari bahasa Inggris ke bahasa Jerman, kutipan tersebut dapat dikirimkan ke layanan terjemahan. Jika layanan terjemahan telah menerjemahkan kutipan ini sebelumnya, itu dapat mengembalikan terjemahan yang disimpan. Jika kutipan akan menjadi bagian dari paragraf yang lebih panjang daripada berdiri sendiri, terjemahannya akan jauh lebih sulit dan mungkin memerlukan penerjemah manusia.
Jika video tidak memiliki transkrip dan oleh karena itu mencegah pengguna tunarungu untuk mengkonsumsinya, komponen tersebut dapat dilengkapi dengan teks ringkasan yang membuat video lebih mudah diakses oleh pengguna tunarungu.

Pengeditan berbasis komponen telah dianut oleh pengguna AEM untuk sementara waktu, dan karena kedatangan Gutenberg di WordPress 5.0, editor berbasis komponen sekarang menjadi standar de facto untuk membuat halaman web.

Catatan : Leonardo Losoviz menyelam lebih dalam ke implikasi blok dalam konteks WordPress.

Fragmen

Fragmen konten dan fragmen pengalaman adalah istilah baru yang mendominasi adegan AEM selama setahun terakhir. Saya akan meringkas kedua konsep itu hanya sebagai fragmen . Intinya, fragmen memungkinkan penulis membuat konten netral yang dapat digunakan di seluruh web, seluler, media sosial, dan saluran lainnya.

Fragmen dibuat di luar editor halaman dan, dibandingkan dengan komponen, kurang memiliki opini tentang bagaimana data mereka akan digunakan. Mari kita bayangkan sebuah fragmen yang disebut "Kutipan hari ini" yang penulis perbarui sekali sehari dengan kutipan baru. Sekarang teks kutipan dari fragmen ini dapat digunakan di berbagai tempat:

Widget footer menampilkan kutipan hari di bagian bawah setiap halaman. Segera setelah penulis memperbarui fragmen, footer juga diperbarui. Fragmen menentukan apa yang akan ditampilkan sedangkan widget footer menentukan bagaimana kutipan akan ditampilkan.
Komponen kutipan memungkinkan penulis untuk mengimpor kutipan dari "Kutipan hari ini" sebelumnya dan menambahkannya ke entri blog.
Sebuah plugin menambahkan tombol “Bagikan kutipan hari ini” ke beranda. Setiap kali seseorang mengklik tombol itu, plugin mengambil kutipan hari itu dan memformatnya untuk memenuhi praktik terbaik untuk berbagi melalui Facebook, Twitter, dan email.

Editor fragmen untuk mengisi komponen dengan data bandara — Menggunakan editor untuk fragmen, penulis fokus pada data terkait tanpa harus tahu bagaimana tepatnya itu akan ditampilkan di situs web dan di aplikasi. (Sumber gambar) (Pratinjau besar)

Di WordPress, widget dan menu menyerupai fragmen: Penulis membuat item menu di antarmuka netral, lalu pengembang menampilkan item tersebut sebagai bagian dari tema dengan cara yang masuk akal untuk tema tersebut. Jika tema diganti dengan tema baru, item menu tersebut tetap ada dan dapat ditampilkan di tema baru juga, meskipun tema baru mungkin terlihat sangat berbeda dari yang sebelumnya.

Saya berharap fragmen menjadi lebih banyak digunakan, meskipun konsepnya memiliki nama yang berbeda dalam sistem yang berbeda. Memang, Matt Mullenweg telah mengumumkan bahwa timnya saat ini berfokus pada “memperluas antarmuka blok ke aspek lain dari manajemen konten [termasuk pembuatan] blok menu navigasi [dan] memindahkan semua widget ke blok.”

Template Halaman

Templat halaman dapat digambarkan sebagai komponen tingkat yang lebih tinggi karena menyertakan beberapa komponen lainnya. Di AEM, penulis dapat membuat template yang mengunci komponen seperti komponen header ke posisi tetap sambil juga menentukan area fleksibel di mana komponen dapat ditambahkan per halaman.

Editor templat halaman — Template pada layar ini menyediakan komponen heading, gambar dan teks secara default. Ini mencegah penulis menghapus teks "Teks Terkunci" dan memungkinkan penulis menambahkan lebih banyak komponen di bawah teks itu. (Sumber gambar) (Pratinjau besar)

Salah satu aspek penting dari ini adalah bahwa area yang fleksibel dapat membatasi komponen mana yang dapat masuk ke dalamnya. Dengan begitu Anda dapat membuat templat halaman untuk berbagai tujuan:

Templat #1: Templat halaman artikel
Header, judul, area konten, dan footer diperbaiki. Penulis dapat memperbarui komponen judul tetapi tidak dapat menghapusnya. Penulis dapat memasukkan komponen teks, gambar, dan video ke dalam area konten.
Templat #2: Templat halaman arahan
Hanya logo dan komponen judul di bagian atas halaman yang diperbaiki. Penulis dapat memilih di antara sekumpulan komponen khusus halaman arahan yang dioptimalkan untuk mengubah pengunjung menjadi pelanggan.

Izin Dan Alur Kerja

Tidak mungkin setiap penulis dalam tim besar dapat memodifikasi template penting seperti template halaman artikel. Untuk mencegah orang-orang merusak situs secara tidak sengaja dan tidak dapat dibatalkan, penting untuk menentukan siapa yang dapat memodifikasi bagian mana dari situs tersebut. Selamat datang di konsep izin dan alur kerja. Konsep ini bukanlah hal baru atau spesial, tetapi penting untuk tim besar.

Layar tempat admin menangani izin terperinci. — Ya, antarmuka AEM untuk menangani izin mungkin memerlukan facelift. Bagaimanapun, itu berhasil. (Sumber gambar) (Pratinjau besar)

Situs AEM biasa mencakup situs web produksi aktual dan setidaknya satu situs mirip produksi, alias staging . Penulis dapat mempublikasikan konten ke situs pementasan pribadi sebelum menerbitkannya ke situs produksi publik. Proses penerbitan konten ke pementasan diikuti dengan penerbitan konten ke produksi bisa disebut alur kerja. Jenis alur kerja umum lainnya adalah bahwa konten harus melalui proses persetujuan sebelum dapat dipublikasikan ke situs produksi, dan hanya orang-orang tertentu yang dapat menekan tombol “terbitkan ke produksi”.

Editor halaman dengan pesan alur kerja — Halaman ini menunjukkan bahwa alur kerja telah dimulai dan penulis dapat menyelesaikan atau mendelegasikan "Permintaan Aktivasi". (Sumber gambar) (Pratinjau besar)

Izin dan alur kerja adalah fitur yang dapat diabaikan di tim kecil. Namun, seiring pertumbuhan tim, fitur tersebut menjadi penting untuk produktivitas dan kesuksesan tim. Meskipun AEM hadir dengan dasar-dasar untuk membuat alur kerja dan pengembang dapat membuat AEM berfungsi untuk kebutuhan spesifik apa pun, itu memerlukan beberapa perubahan kode dan tidak diimplementasikan dengan menjentikkan jari. Ini bahkan lebih benar untuk WordPress. Akan menyenangkan memiliki alat yang ramah-pembuatan untuk membuat alur kerja khusus.

Editor alur kerja visual di Git — Bayangkan bagaimana alat yang mudah digunakan dapat menyederhanakan pembuatan alur kerja. Berikut adalah bagaimana pembuatan alur kerja di Github akan terlihat setelah Github Actions keluar dari versi beta. (Pratinjau besar)

Mode Pengeditan

Di AEM, penulis dapat dengan cepat mengedit dan melihat setiap halaman dalam mode yang berbeda. Penulis beralih di antara mode berdasarkan pekerjaan apa yang perlu diselesaikan:

Untuk mengatur komponen dan mengedit kontennya, pilih mode Edit .
Untuk mengubah bagaimana komponen harus diatur di iPad, pilih mode Tata Letak .
Untuk melihat konten seolah-olah Anda adalah pengunjung, pilih mode Pratinjau .

Editor halaman meniru layar seukuran iPad — Di halaman ini, mode tata letak responsif aktif. Penulis dapat meniru ukuran perangkat yang berbeda dan menyesuaikan posisi komponen dalam grid responsif. (Sumber gambar) (Pratinjau besar)

Ada beberapa mode lagi yang muncul berdasarkan cara situs diatur. Salah satu skenario yang ideal adalah pengujian dan personalisasi A/B diatur dengan mengintegrasikan AEM dengan Adobe Target. Menggunakan mode Penargetan , penulis dapat menentukan kapan harus menampilkan komponen tertentu berdasarkan lokasi pengunjung, usia, halaman rujukan, waktu, dll.

Integrasi dalam AEM sebanding dengan plugin di WordPress tetapi dengan perbedaan bahwa integrasi AEM lebih kompleks dan biasanya disesuaikan dengan kebutuhan. Terutama mengintegrasikan Target AEM bisa lebih menyakitkan daripada yang dibuat oleh tenaga penjualan.

Dropdown dengan mode tata letak — Beralih mode melalui dropdown. (Sumber gambar) (Pratinjau besar)

Editor tempat penulis mendefinisikan audiens target — Dalam mode penargetan, konten dapat dipersonalisasi dan diuji langsung dari editor halaman. (Sumber gambar) (Pratinjau besar)

Mengesampingkan kompleksitas pengembangan dan uang, konsekuensi dari upaya semacam itu dapat menghasilkan pengalaman penulisan yang luar biasa. Konsep mode pengeditan menunjukkan bagaimana dropdown sederhana menciptakan peluang bagi penulis untuk menyelesaikan berbagai pekerjaan sambil tetap berada di satu halaman.

Editor Satu Halaman Visual

Melihat screenshot di artikel ini, Anda pasti menyadari bahwa editor halaman AEM tidak hanya berbasis komponen tetapi juga visual: Jika komponen diperbarui, perubahan akan segera terlihat dan penulis tidak perlu membuka pratinjau di a jendela baru. Cukup fitur. Meskipun pembuat halaman ada di mana-mana di ekosistem WordPress, tim di belakang WordPress belum menentukan praktik terbaik untuk pengeditan visual. Biarkan saya mengambil satu langkah lebih jauh dan bertanya: Apa yang terjadi jika Anda menikahi editor visual dengan aplikasi satu halaman (SPA)?

SPA adalah situs web di mana navigasi dari satu halaman ke halaman lain terasa mulus karena browser tidak perlu memuat ulang seluruh halaman. Beberapa situs web populer seperti Gmail dan Facebook adalah SPA tetapi sebagian besar situs di internet tidak. Salah satu alasan untuk adopsi yang agak rendah adalah karena membuat SPA itu sulit, dan memelihara SPA dengan ribuan halaman bahkan lebih sulit. Saat ini ada dua cara utama untuk mengelola konten di SPA:

Konten situs diperbarui dengan memperbarui kode. Itu jelas tidak ramah penulis.
Konten dikelola dalam CMS yang dipisahkan dari bagian situs web yang menghadap pengunjung. Konten dari CMS dikonsumsi melalui API, misalnya oleh aplikasi React. Antarmuka pembuatan terlihat berbeda dari situs rakitan yang akan dilihat pengunjung.

Menerapkan editor visual dan SPA masing-masing dengan sendirinya sudah merupakan tantangan teknis yang sulit. Memiliki editor visual yang bekerja dengan SPA hampir tidak pernah terdengar. Tim Adobe sedang bekerja untuk mendukung SPA di AEM sambil mencoba untuk tidak mengkompromikan manfaat apa pun dari sistem mereka yang ada. Meskipun versi pertama yang menjanjikan telah dirilis ke komunitas AEM pada tahun 2018, masih banyak pekerjaan yang harus dilakukan.

Komponen cuaca dengan overlay — Halaman ini menampilkan aplikasi React. Perhatikan bagaimana AEM telah menambahkan lapisan di atas komponen cuaca sehingga penulis dapat mengedit propertinya. (Sumber gambar) (Pratinjau besar)

Ringkasan

Adobe Experience Manager hadir dengan beberapa fitur berguna yang telah atau akan masuk ke proyek sumber terbuka populer. AEM tidak serta merta menciptakan konsep yang disorot dalam artikel ini, tetapi tentu saja dikomersialkan dengan baik sebagai salah satu sistem paling ramah pembuatan di pasar.

Konsep komponen menjadi arus utama dengan diperkenalkannya blok di WordPress. Konsep fragmen, templat halaman, izin, dan alur kerja setidaknya sebagian diimplementasikan di WordPress dan penting bagi tim dengan banyak penulis yang menyajikan konten ke banyak saluran.

Pengalaman penulisan dapat lebih ditingkatkan menggunakan editor visual dengan mode edit dan dukungan untuk aplikasi satu halaman. Editor seperti itu sulit untuk diterapkan tetapi seperti yang ditunjukkan oleh upaya Adobe, pengalaman yang ditingkatkan mungkin sepadan dengan usaha dan akhirnya membuatnya menjadi WordPress juga.

Bacaan lebih lanjut

“Membangun Pengalaman Penulisan yang Lebih Baik,” Eileen Webb
“Penulisan: Lingkungan dan Alat,” Pusat Bantuan Adobe
“Merancang Sistem Manajemen Konten Web yang Ramah Pengguna,” Christopher Hallahan
“Pengalaman Penulisan,” Rick Yagodich