Pembuatan Prototipe Konten-Pertama

Konten adalah komoditas inti ekonomi digital. Ini adalah emas yang kami rancang menjadi pengalaman mewah, berlian yang kami bungkus dalam program loyalitas dan peningkatan penjualan. Namun, sebagai desainer, kita sering memasangnya setelah fakta. Kami membuat prototipe interaksi dan desain visual kami sampai habis, tetapi menerima bahwa "kata-kata nyata" hanya dapat dijatuhkan nanti. Ada cara yang lebih baik.

Semakin banyak, barang digital yang kami buat beroperasi dalam sistem konten, fungsionalitas, kode, dan maksud yang dinamis. Produk dan layanan kami melayang dan tumpah ke situs web mitra, umpan media sosial, dan berbagai agregator elektronik, semuanya berusaha membentuk perilaku dan pemahaman pengunjung. Sistem dibangun di atas sistem , dan, dalam waktu singkat, kami telah menyusun sebuah raksasa yang luasnya membuat pikiran tercengang.

Bacaan Lebih Lanjut tentang SmashingMag:

• Mengoptimalkan Desain Anda Untuk Pengujian Prototipe Cepat
• Memilih Alat Prototyping yang Tepat
• Pembuatan Prototipe Konten Dalam Desain Web Responsif
• Membangkitkan Prototipe Antarmuka Pengguna

Meskipun kami sudah cukup baik dalam mencari tahu sistem sederhana di masa lalu (pikirkan situs web statis dan intranet), ternyata sistem dinamis yang besar sedikit lebih rumit — dan sedikit kurang dapat diprediksi. Saat sistem tumbuh, mereka menjadi lebih kompleks secara eksponensial, dan saat mereka meningkatkan kompleksitas, perilaku mereka menjadi semakin nonlinier dan sulit bagi kita, monyet malang, untuk mengantisipasi. Dalam sistem besar, kesalahan pembulatan pada titik desimal keseribu dapat secara radikal mengubah hasil (Mitchell 33). Saat Internet mendekati satu triliun node, inilah dunia yang sekarang kita rancang.

Namun, sistem sederhana yang biasa kita gunakan dapat memberikan kunci untuk mendesain ruang yang lebih kompleks. Seperti yang dikatakan oleh ahli teori sistem John Gall, "Sebuah sistem kompleks yang berfungsi selalu ditemukan telah berevolusi dari sistem sederhana yang berfungsi." Dalam ruang desain digital, jika kita memastikan bahwa sistem dinamis yang paling sederhana dari konten, struktur, dan pembuatan makna bekerja sebagaimana dimaksud pada tingkat dasar, maka kita dapat meletakkan dasar untuk sistem yang lebih besar dan lebih kompleks yang juga berfungsi sebagaimana dimaksud.

Salah satu cara kami sebagai desainer dapat menjaga kompleksitas kami berturut-turut adalah dengan membawa konten kami ke dalam proses pembuatan prototipe di awal. Pendekatan yang mengutamakan konten mendorong kami untuk menghadapi kendala dan peluang konten kami lebih awal, dan untuk menguji secara fungsional solusi yang kami usulkan dengan pengguna yang haus konten nyata sebelum keputusan desain utama dibuat.

Dalam artikel ini, saya akan menunjukkan kepada Anda cara menggunakan seperangkat alat open-source sederhana untuk memperkenalkan konten nyata dan dinamis ke dalam proses pembuatan prototipe Anda sejak hari pertama. Pendekatan ini memungkinkan Anda untuk fokus pada bagaimana pengguna memahami konten Anda sejak awal proyek dan selanjutnya membangun elemen struktural, visual, dan teknis di atas fondasi pemahaman tersebut.

Model Kotak Putih Untuk Konten

Salah satu alat yang digunakan peneliti sistem untuk memahami perilaku sistem dinamis disebut model "kotak putih". Sarjana sistem Gerald Weinberg menulis bahwa, sementara perilaku model kotak hitam "tersembunyi dengan sempurna", perilaku model kotak putih "terungkap dengan sempurna." Untuk sistem yang kompleks, transparansi ini penting: Weinberg lebih lanjut mencatat bahwa “bahkan sistem yang paling sederhana pun terkadang mengandung kejutan bagi pembuatnya” (172).

Tujuan pembuatan prototipe konten-pertama adalah untuk membuat model kotak putih untuk konten kami, struktur internalnya, dan arsitektur informasi pendukungnya. Ini akan memungkinkan kami untuk menemukan di awal proses desain bagaimana pengguna akhir kami membangun makna dari konten terstruktur yang ditawarkan sistem digital kami. Dengan meluangkan waktu untuk memperbaiki struktur sistem konten kami pada intinya, kami mengatur panggung untuk sistem sederhana yang berfungsi untuk diintegrasikan ke dalam sistem yang lebih besar dan lebih kompleks yang berfungsi.

Untuk membuat kotak putih untuk konten digital, kita perlu memperhitungkan tiga hal:

• konten itu sendiri , terdiri dari paket konten dengan berbagai tingkat perincian, tergantung pada jenis dan tujuan konten;
• struktur , baik di tingkat halaman atau layar lokal maupun di tingkat situs web atau aplikasi global;
• keterlibatan pengguna dalam konteks dan sikap (desktop, tablet, atau ponsel) di mana konten kami pada akhirnya akan dikonsumsi.

Agar tetap "terlihat sempurna", model ini juga harus transparan dalam fungsinya sehingga anggota tim desain dapat memahami mengapa model berperilaku seperti itu. Bagian terakhir ini — transparansi, dalam kombinasi dengan keterlibatan pengguna — sangat penting untuk model kotak putih: Kami tidak membangun prototipe hanya untuk mendemonstrasikan fungsionalitas, melainkan untuk mempelajari, merevisi, dan menyempurnakan struktur konten mendasar kami berdasarkan bagaimana kata-kata dan struktur yang kami gunakan ditafsirkan oleh audiens yang dituju.

Pendekatan prototyping konten-pertama berguna saat Anda mendesain untuk konten yang ada, tetapi juga merupakan cara yang baik untuk melibatkan tim editorial dalam proses pembuatan konten. Menampilkan kata-kata, gambar, dan aset nyata di depan pengguna di awal proyek memungkinkan setiap orang memiliki waktu untuk menyesuaikan, menyesuaikan, atau melakukan pivot untuk memenuhi tujuan proyek. Jika rencana proyek Anda adalah mengikuti strategi isi-kata-kemudian, pembuatan prototipe konten-pertama memberi Anda kesempatan untuk mendapatkan beberapa variasi konten di depan pengguna — dan kemudian mendapatkan reaksi pengguna di depan pemangku kepentingan.

Kerangka Kerja Pembuatan Prototipe Konten-Pertama

Mengambil prinsip dan tujuan yang dijelaskan di atas, saya telah menyusun kerangka kerja pemula untuk membuat prototipe semacam ini. Banyak dalam semangat pemikiran sistem itu sendiri, alat ini bergantung pada kopling longgar dari sistem sederhana yang masing-masing melakukan tugas utama sederhana dengan baik.

Untuk kerangka kerja ini, saya telah mengumpulkan Excel, Jekyll, ZURB Foundation dan Browsersync, dan menghubungkan semuanya dengan skrip Gulp. Saya memilih aplikasi dan kerangka kerja khusus ini karena tersedia secara luas, open source (kebanyakan), memiliki komunitas pendukung yang aktif dan memiliki dokumentasi yang sangat baik.

Anda dapat mengunduh salinan proyek contoh yang dibahas di bawah ini dan kit starter kerangka kerja prototipe konten-pertama dari halaman proyek di GitHub. Mari kita bahas bagaimana potongan-potongan itu cocok dan apa yang masing-masing lakukan.

Unggul

Excel — atau program spreadsheet apa pun yang menyimpan ke format XLSX — digunakan untuk membuat dan mengedit konten terstruktur dan sistem kategorisasi. Setiap kali Anda menyimpan dokumen, setiap paket dalam kumpulan konten Anda (diwakili oleh baris dalam spreadsheet) diekspor sebagai halaman Jekyll dan dokumen JSON. Ini memungkinkan Anda untuk menjalankan operasi halaman dan global pada konten Anda dan untuk menyebarkan perubahan konten ke seluruh situs web dengan satu perintah "simpan".

Jekyll

Jekyll adalah generator situs web statis sumber terbuka dan digunakan untuk mengartikulasikan struktur dinamis antara paket konten, halaman, dan kategori. Jekyll mewakili konten yang Anda simpan di spreadsheet sebagai variabel dan memungkinkan Anda melakukan operasi pada variabel tersebut untuk membuat struktur. Jekyll juga menyediakan tag “if/then” untuk menerapkan logika kondisional dan for loop untuk bersepeda melalui dan memfilter kumpulan konten.

Dasar

ZURB Foundation, kerangka kerja front-end pertama seluler open-source, digunakan untuk mengartikulasikan hierarki informasi dan untuk menyusun perilaku responsif. Kisi dasar, definisi gaya, dan perilaku responsif memungkinkan Anda membuat hampir semua pola tata letak web standar hanya dengan menerapkan kelas ke elemen HTML Anda.

Sinkronisasi peramban

Terakhir, Browsersync menyajikan prototipe Anda ke browser dan memperbarui CSS dan halaman saat Anda membuat perubahan. Browsersync juga memungkinkan Anda mengakses prototipe dari perangkat apa pun yang terhubung ke jaringan yang sama. Ini berarti Anda dapat melihat pembaruan otomatis di ponsel dan tablet saat mengedit di laptop.

Terhubung bersama-sama, alat-alat ini memungkinkan Anda untuk membangun prototipe di lingkungan yang mirip dengan sistem dinamis yang akan membentuk lingkungan produksi akhir Anda, tetapi tanpa harus menderita database, layanan cloud, dan latensi jaringan yang akan memperlambat Anda saat Anda perlu pindah cepat untuk mencoba ide.

Jika Anda Panik Karena Ini Melibatkan Kode…

Jangan panik. Alat-alat ini ramah desainer dan memiliki komunitas pendukung yang sangat baik. Anda tidak perlu menjadi pengembang front-end untuk mewujudkan ide Anda. Anda perlu mengetahui dasar-dasar HTML dan CSS. Bahasa-bahasa ini tidak sulit — dan mempelajarinya tidak akan menghancurkan kemampuan Anda untuk melakukan pekerjaan desain yang baik. Dalam kata-kata legenda desain tipe Erik Spiekermann, “Anda harus belajar jika tidak membuat kode setidaknya untuk menghargai kode, untuk memahami kode. Karena kode adalah apa yang mur dan baut adalah seratus tahun yang lalu. Cara terbaik untuk memulai adalah dengan menyelam.

Contoh Pembuatan Prototipe Konten-Pertama: Pusat Komunitas Green Lake

Untuk mendapatkan pemahaman yang lebih baik tentang seperti apa prototyping konten-pertama dalam tindakan, mari kita ambil koleksi konten digital dari dunia nyata.

Berikut skenarionya. Pusat Komunitas Green Lake menawarkan kelas, program, dan acara kepada anggota komunitas di lingkungan Green Lake. Sayangnya, semua informasi kelas, program, dan acaranya saat ini hanya tersedia online melalui PDF, yang selanjutnya hanya tersedia dari situs web pusat yang dioptimalkan untuk desktop dengan lebar tetap. Melihat:

Dalam upaya menjangkau anggota komunitas yang semakin mencoba mengakses informasi kelas, program, dan acara melalui ponsel mereka, pusat tersebut telah memutuskan untuk meluncurkan situs web program mobile-first. Inisiatif ini pada akhirnya akan berfungsi sebagai katalis untuk situs web responsif di seluruh kota untuk taman dan rekreasi.

Seperti proyek desain lainnya, saya akan mulai dengan analisis heuristik dan kompetitif dan dengan melihat lalu lintas yang tersedia dan data pengguna. Jika pemangku kepentingan dan pengguna akhir tersedia, saya pasti akan berbicara dengan mereka juga. Setelah saya merasa memiliki pemahaman yang baik tentang tujuan situs web, saya akan menjelajahi beberapa arsitektur informasi tingkat tinggi dasar dan ide antarmuka pengguna di atas kertas.

Saat pendekatan desain awal mulai terbentuk, saya dapat menggunakan alur kerja pembuatan prototipe konten-pertama untuk mendapatkan ide-ide awal saya — dan, yang lebih penting, konten yang dimaksudkan untuk disajikan oleh ide-ide itu — ke dalam konteks di mana mereka pada akhirnya akan dikonsumsi — dalam hal ini, peramban. Mari kita lihat seperti apa proses ini secara detail.

Tangkap Konten

Dalam contoh ini, Anda dapat melihat bagaimana konten terstruktur yang saya ambil dalam spreadsheet kerangka kerja prototyping konten-pertama secara otomatis ditulis ke templat halaman setiap kali saya menyimpan file _data saya. Di sini saya telah menggunakan lembar "katalog" untuk menyusun konten. Variabel “Judul”, “deskripsi”, “kategori”, dan “tag” sudah disertakan dalam templat halaman, sehingga nilai tersebut segera diperbarui. Anda dapat menambahkan kolom lain ke baris konten sebanyak yang Anda inginkan — pastikan untuk menyertakan variabel yang sesuai dalam template (lebih lanjut tentang ini di bawah).

Lembar "direktori" dan "umpan" juga disertakan dalam starter kit dan mencakup berbagai kategori (kolom) untuk jenis kontennya masing-masing. Setiap lembar mengekspor konten ke foldernya sendiri (dalam kasus ini, "katalog", "direktori", dan "umpan") dan ke file JSON-nya sendiri. Anda dapat menambahkan lembar lain sebanyak yang Anda butuhkan — pastikan untuk memperbarui file konfigurasi Jekyll Anda sehingga ia tahu untuk menariknya (lihat dokumentasi plugin “Jekyll Data Pages Generator” untuk detail lengkapnya).

Tambahkan Lebih Banyak Paket Konten

Saat saya menambahkan paket konten (baris dalam spreadsheet), halaman baru secara otomatis ditambahkan ke prototipe. Setiap baris mewakili satu halaman, dan setiap kolom di baris itu mewakili variabel yang diisi Jekyll di template saat membuat halaman. Dalam contoh ini, konten dari katalog "Pusat Komunitas" cukup seragam, tetapi jika deskripsi item sangat bervariasi panjangnya, Anda dapat dengan mudah melihat (dan mengalami) bagaimana variasi itu akan memengaruhi tata letak halaman. Mungkin Anda kemudian memutuskan untuk memotong konten secara berbeda atau menambahkan elemen baru, seperti ringkasan atau siput.

Sistem ini juga memungkinkan Anda bereksperimen dengan label, kategori, dan tag dengan mudah. Dengan mengubah nilai di kolom "kategori", Anda dapat menguji bagaimana pendekatan arsitektur yang berbeda memengaruhi kemampuan pengguna untuk menemukan konten tertentu dengan mudah. Dalam contoh ini, misalnya, saya telah membuat sistem organisasi berdasarkan jenis kelas dan kelompok usia peserta. Ini memungkinkan saya untuk dengan mudah menguji pendekatan navigasi yang berbeda di menu dan di halaman beranda saat prototipe terbentuk.

Tambahkan Struktur dan Hirarki Dengan HTML

Setelah saya puas dengan konten yang ada, saya akan mulai membungkus konten itu dalam markup sehingga strukturnya masuk akal bagi pengguna. Perlakukan variabel di sini seperti teks, dan tandai mereka seperti Anda akan menandai teks dalam file HTML "datar". Hasil di sini akan terlihat cukup dapat diprediksi (itu hal yang baik).

Sistem templating Jekyll akan mengambil templat halaman yang telah Anda buat dan membungkusnya dengan templat global yang berisi header dan ikon navigasi. Inilah yang dimaksud dengan "tata letak: default": Kami memanggil template "default" sebagai pembungkus template ini. Anda dapat membuat sarang template sedalam yang Anda inginkan, meskipun lebih dari satu atau dua tingkat template biasanya tidak diperlukan. Untuk mengakomodasi elemen berulang, seperti daftar halaman dan tautan global, Anda juga dapat menggunakan “include”, yang menyisipkan bagian kode tertentu ke dalam template saat situs web dirender. Lihat dokumentasi resmi Jekyll untuk mengetahui lebih lanjut tentang template dan termasuk.

Tambahkan Logika Dengan Tag Markup Jekyll

Jekyll memungkinkan Anda menambahkan logika dasar dengan menyertakan tag dasar yang khusus untuk sistem templatingnya. Di sini, saya menggunakan tag for untuk menelusuri daftar kelas Pusat Komunitas Green Lake (yang dibuat ketika saya menambahkan beberapa paket konten di atas), dan saya membuat setiap kelas pusat komunitas dalam daftar sebagai tautan:

Anda juga dapat menggunakan pernyataan if untuk membuat kondisi. Di sini, saya menggunakan pernyataan if untuk menyembunyikan tautan ke halaman kelas tempat saya berada saat ini:

Jika kepala Anda baru saja meledak, tolong jangan panik. Menambahkan logika adalah jenis fitur lanjutan. Prototipe Anda akan berfungsi dengan baik jika Anda tetap menggunakan variabel konten dan HTML. Namun, sistem templating Jekyll sangat mudah dibaca manusia dan mudah diambil. Lihat pengantar singkat oleh pembuatnya tentang cara kerja bagian dasar.

Tambahkan Gaya dan Perilaku Responsif Dengan CSS Foundation

Setelah draf pertama struktur HTML dibuat, saya dapat menambahkan gaya ke prototipe hanya dengan memasukkan kelas CSS dan menyimpan dokumen. Kerangka kerja front-end ZURB Foundation, yang sudah terhubung dalam starter kit, menyediakan kelas gaya untuk berbagai pola aplikasi web dan asli. Dalam contoh yang ditunjukkan di sini, hanya dengan memasukkan dua kelas yang berbeda, saya telah memberikan prototipe ponsel saya nuansa yang lebih "dapat disentuh" ​​dan memperkenalkan hierarki visual yang jauh lebih jelas. Perubahan ini secara otomatis menyebar ke semua konten yang menggunakan template ini.

Foundation juga memudahkan untuk menyertakan perilaku responsif yang mengutamakan seluler dan menggunakan lusinan komponen tata letak, wadah, dan media bawaan. Karena semuanya CSS, Anda dapat memodifikasi dan menyempurnakan semuanya sesuai selera Anda. Untuk contoh ini, saya telah memodifikasi palet warna dasar Foundation menjadi gaya "monokrom wireframe", tetapi Anda dapat menyesuaikan Foundation dengan gaya apa pun yang Anda suka. Pelajari lebih lanjut tentang menggunakan Foundation dengan menelusuri dokumentasi atau tutorialnya atau dengan mengikuti kelas (omong-omong, kelasnya sangat bagus).

Dapatkan Umpan Balik Lebih Awal dan Revisi Saat Anda Pergi

Setelah konten tersedia, membuat dan menguji berbagai variasi struktur menjadi mudah. Label, kategori, kata kunci, dan metadata lainnya dapat diubah langsung di spreadsheet konten. Demikian juga, variasi pada struktur halaman, alur dan tampilan hanyalah masalah membuat versi alternatif dari template Jekyll Anda. Semua perubahan ini akan mengalir secara instan di seluruh prototipe saat Anda menekan "Simpan."

Untuk menyelesaikan versi pertama dari prototipe Green Lake Community Center, saya telah membuat tiga variasi dari halaman beranda seluler. Dalam hal ini, yang perlu saya lakukan hanyalah mengatur ulang elemen di templat halaman beranda dan menukar sumber data untuk dua elemen navigasi (yaitu tombol lebar penuh dan ubin gambar).

Meskipun saya telah menyajikan semua langkah ini secara berurutan, perlu diingat bahwa Gulp (pelari tugas JavaScript yang menghubungkan semua sistem sederhana kami bersama-sama) memperbarui perubahan setiap kali Anda menyimpan dokumen. Ini berarti Anda dapat kembali ke langkah apa pun kapan saja dan membuat penyesuaian berdasarkan respons pengguna, umpan balik pemangku kepentingan, atau penemuan baru tentang konten atau konteks.

Fleksibilitas ini memungkinkan Anda untuk dengan mudah menguji berbagai hierarki layar dan perlakuan konten dengan pengguna — dan memungkinkan Anda untuk menggunakan konten nyata dalam pengujian tersebut, konten yang dapat dialami (dan bereaksi) audiens Anda secara langsung. Karena bentuk akhir prototipe adalah HTML, CSS, dan JavaScript, Anda dapat mengumpulkan umpan balik pengguna dengan alat pengujian apa pun yang paling nyaman bagi Anda (saya suka UserTesting dan Lookback).

Format prototipe HTML, CSS dan JavaScript juga berarti bahwa pekerjaan Anda akan lebih siap menginformasikan upaya paralel dan selanjutnya. Jika produk akhir Anda akan dibangun di atas platform CMS yang sudah ada, misalnya, maka persyaratan konten, struktur, dan tampilan yang dapat Anda jelaskan akan membantu Anda mengevaluasi opsi CMS. Demikian juga, prototipe Anda dapat berfungsi sebagai dokumen spesifikasi untuk keputusan desain yang melibatkan kisi, hierarki, judul, perilaku tautan, dan font untuk pengembang front-end Anda.

Namun, jangan lupa bahwa tujuan pembuatan prototipe konten-pertama tidak hanya untuk mendesain di browser: Tujuannya adalah untuk menggunakan browser dan umpan balik pengguna Anda untuk menyempurnakan organisasi konten Anda untuk membangun sederhana struktur yang bekerja dengan baik.

Kekuatan metode ini adalah memungkinkan Anda dengan cepat memodifikasi sistem yang dibuat oleh kategori, label, dan jalur navigasi Anda. Ini memberikan keuntungan berbeda dibandingkan pemodelan konten statis. Jika ternyata Anda menggunakan banyak CSS ekstra untuk membuat konten dinamis Anda berfungsi seperti yang Anda inginkan, kembali ke sumbernya. Bisakah Anda membagi konten secara berbeda untuk membuatnya bekerja lebih baik? Tambahkan (atau hapus) satu set kelas atau tag? Cobalah variasi yang berbeda sampai Anda menemukan solusi sederhana dan elegan yang membuat segala sesuatunya tampak cocok.

Sistem Berpikir Melampaui Web

Contoh dasar yang ditampilkan di sini mengilustrasikan bagaimana pendekatan prototyping konten-pertama dapat membantu kami membuat sistem konten sederhana yang berfungsi — sistem yang, pada gilirannya, mengatur panggung untuk sistem yang lebih besar dan lebih kompleks yang berfungsi. Pembuatan prototipe konten-pertama membantu kami menemukan tempat di mana penyesuaian kecil dalam model konten, hierarki, kategori, dan label dapat menghasilkan solusi yang lebih bersih dan elegan untuk kebutuhan informasi pengguna kami.

Meskipun alat ini dibangun di atas teknologi web, cara kami menyusun konten untuk pemahaman melampaui alat, teknologi, dan platform individual. Jika konten Anda dalam bentuk paling dasar, terlepas dari persyaratan dan batasan implementasi tertentu, masuk akal bagi audiensnya dan mencapai tujuan komunikasi Anda dengan cara yang sederhana dan elegan, maka Anda telah membangun fondasi yang melampaui implementasi teknologi individual. Anda telah membuat konten yang tidak memerlukan platform atau skrip tertentu untuk masuk akal; itu adalah kumpulan konten yang ingin dipahami dengan cara tertentu.

Ketika kami menempatkan konten pada inti proses desain, kami mulai memecahkan bukan untuk implementasi tertentu, tetapi untuk pemahaman. Segala sesuatu yang lain adalah langkah perantara. Dengan mengenali bahwa platform terakhir yang kami desain adalah pikiran manusia, kami dapat mengidentifikasi struktur sederhana yang memunculkan pemahaman dan dapat bekerja untuk memperkuat struktur tersebut di seluruh proses desain.

Karya dikutip

• Kompleksitas, Tur Terpandu , Melanie Mitchell (New York: Oxford, 2009)
• Pengantar Pemikiran Sistem Umum , Gerald Weinberg (New York: Dorset House, 1975)