Dasar-dasar Desain Ulang Situs Web – Studi Kasus

Bukan hal yang aneh untuk menyelesaikan proyek desain ulang situs web hanya untuk melihat ke belakang dan berpikir, "Saya akan melakukan sesuatu yang berbeda jika saya tahu apa yang saya ketahui hari ini."

Kita semua pernah ke sana. Kami bersemangat tentang proyek baru, bercanda dengan klien, menandatangani kontrak, dan mulai membuat prototipe. Hidup terlihat bagus, tetapi fondasi proyeknya goyah.

Tak pelak, revisi dan scope creep mulai menyelinap begitu konsep desain pertama disajikan, dan mulai menurun dari sana. Komunikasi berantakan, tidak ada yang berjalan sesuai rencana, dan pada akhirnya, situs web yang baru dirancang menyerupai keburukan yang Anda sewa untuk diperbaiki.

Desain kelas dunia dan pengalaman pengguna tidak dimulai dengan mockup yang cantik—ini didasarkan pada perencanaan strategis dan visi desain yang berfokus pada tujuan perusahaan. Tujuan utamanya tidak boleh, “Ayo buat situs web yang lebih cantik.”

Desainer situs web bertanggung jawab atas pengalaman pengguna (UX) dan antarmuka pengguna (UI). Adalah tugas kami untuk memastikan bahwa pengguna memiliki pengalaman yang optimal dalam berinteraksi dengan antarmuka yang kami desain. Ini membutuhkan perencanaan yang matang sejak konsepsi proyek.

Artikel ini menguraikan proses yang dapat diandalkan yang akan membantu memastikan desain ulang situs web Anda berikutnya dibangun di atas dasar yang kokoh.

Nilai Penelitian Desain Ulang Situs Web Pra-proyek

Untuk mendemonstrasikan prosesnya, mari kita telusuri fase-fase desain ulang situs web yang diselesaikan untuk Archaeology Southwest, sebuah organisasi nirlaba yang mengeksplorasi dan melindungi situs arkeologi di barat daya Amerika Serikat.

Setelah penyelidikan awal terhadap bidang dan persaingan klien, periksa dengan cermat setiap aset situs web yang tersedia. Analisis ini ditagih secara terpisah dan dilakukan sebelum kutipan proyek pernah ditulis. Bekerja dengan cara ini mencegah perkiraan yang ambigu atau meningkat yang dihasilkan ketika desainer web mencoba memperhitungkan masalah yang mungkin muncul ke permukaan nanti dalam sebuah proyek.

Dalam kasus Archaeology Southwest, saya dihadapkan pada sebuah situs yang sangat membutuhkan perhatian—gunung dan gunungan konten yang berantakan di dalam portal CMS kuno. Itu buruk, jadi saya mulai membuat ketertiban.

Langkah 1: Kenali Kontennya

Saat merenovasi rumah, penting untuk mencoba dan menyelamatkan material berharga sebelum hari pembongkaran. Prinsip yang sama berlaku untuk desain situs web. Anda perlu menelusuri halaman demi halaman situs dan mengeluarkan semua kontennya. Sebagai desainer, kita harus mencari tahu konten apa yang layak untuk menjadi jenis posting yang unik dan halaman apa yang statis.

Setelah ini selesai, buat strategi tentang cara mengatur semuanya, tetapi jangan memutuskan konten apa yang harus tetap ada dan apa yang harus dihapus. Kenapa tidak?

Saat berhadapan dengan bisnis dan organisasi dunia nyata, ada sejumlah orang berbeda yang bertanggung jawab atas konten situs, dan jumlah konten yang ada bisa sangat mengejutkan. Pendekatan terbaik adalah mengklasifikasikan semuanya terlebih dahulu.

Saya biasanya mulai dengan navigasi utama dan membuka halaman demi halaman. Dengan cara ini, saya akan memiliki arsitektur informasi dan peta situs sebelum pertemuan klien pertama.

Sayangnya, situs Archaeology Southwest tidak khas. Sebagian besar tautan tidak dapat diakses melalui navigasi atas dan disembunyikan di dalam konten. Saya akan mendapat kejutan yang tidak menyenangkan jika saya mengutip proyek berdasarkan navigasi saja.

Dengan berbicara dengan berbagai orang di tim klien, saya bisa mendapatkan gambaran yang lebih baik tentang ruang lingkup proyek, dan setelah pertemuan dengan klien, saya bisa mengidentifikasi fokus situs web mereka, alur kerja, konten, dan fitur. Dari sana, kami menemukan jenis konten inti berikut (beberapa baru, beberapa sudah ada):

Langkah 2: Buat Fokus. Menyederhanakan. Mengatur.

Setelah semua konten diatur ke dalam kotak berlabel, saatnya mengembangkan cetak biru untuk struktur baru, yang akan menampilkan konten dalam bentuk terbaiknya. Tapi pertama-tama, kita perlu menciptakan fokus.

Menurut Archaeology Southwest, orang mengunjungi situs web mereka untuk meneliti informasi tentang proyek yang sedang berlangsung, belajar tentang acara mendatang, dan membaca majalah bulanan. Kegiatan ini menjawab pertanyaan, “ Apa yang dilakukan orang di situs?” tetapi tidak mengungkapkan mengapa orang mengunjungi situs tersebut sejak awal.

" Mengapa " adalah fokus situs web. Untuk menemukan fokus, lihat ke inti organisasi.

Dalam hal ini, saya mengidentifikasi "lokasi" sebagai jantung Arkeologi Southwest. Tanpa lokasi, tidak akan ada situs arkeologi, tidak ada reruntuhan, dan tentu saja tidak ada museum atau pameran. Segala sesuatu dalam arkeologi berhubungan kembali dengan lokasi.

Dengan fokus yang teridentifikasi, kita dapat menyederhanakan dan mengatur. Untuk Archaeology Southwest, saya mulai dengan membagi konten ke dalam kategori yang tidak terkait dengan lokasi, seperti halaman tim dan laporan tahunan. Setelah sedikit merapikan, saya berakhir dengan peta kasar ini:

Gambar di atas mewakili dua area inti yang muncul: Hal yang Dapat Dilakukan dan Lokasi . Hal yang Harus Dilakukan (kiri) mencakup aktivitas yang dapat dipelajari dan dilakukan oleh pengunjung situs. Lokasi (kanan) berfokus pada konten situs yang terkait dengan lokasi tertentu. Mengapa menyusunnya seperti ini?

Idenya adalah bahwa rata-rata pengguna mungkin tidak mengetahui nama video atau proyek, tetapi kemungkinan besar akan mengetahui nama lokasi. Dengan cara ini, pengunjung dapat menemukan konten yang berkaitan dengan lokasi.

Selain itu, setiap blok warna di Lokasi mewakili jenis posting yang unik. Dari perspektif organisasi, pameran, kelas, dan pameran online adalah semua peristiwa yang sifatnya berbeda.

Di situs Archaeology Southwest yang lama, ada halaman statis terpisah untuk majalah dan toko online tempat pengunjung dapat membeli majalah. Untuk mempermudah pembelian, saya mengintegrasikan opsi pembelian dalam template majalah.

Struktur organisasi yang tersisa sangat sederhana:

• Halaman “Tentang” untuk mempelajari lebih lanjut tentang organisasi
• Tautan langsung ke halaman "Toko"
• Halaman “Donasi”
• Halaman "Pembaruan" baru

Halaman toko dan donasi adalah penghasil uang, jadi penting untuk memasukkannya ke dalam navigasi utama.

Setelah cetak biru organisasi selesai, saatnya untuk menghubungkan konten yang sebenarnya.

Langkah 3: Libatkan Klien

Peta situs menyertakan jenis halaman, tetapi tidak mencakup pemetaan konten. Desainer web berpengalaman tahu bahwa sebagian besar masalah terjadi saat klien mulai menambahkan konten ke situs mereka. Untuk menghindari masalah ini, jaga agar klien tetap masuk dari awal.

Untuk Archaeology Southwest, saya membuat Google Doc yang menyertakan peta situs, dan saya meminta klien untuk memetakan konten lamanya dengan struktur baru.

Jika ada yang tidak sesuai, kami akan membahasnya nanti. Ini adalah langkah kritis. Mengapa? Selain melibatkan klien dalam proses, ini mengungkap masalah dengan struktur sebelum implementasi dimulai.

Dalam hal ini, beberapa item menu peta situs diubah, dan karena klien memiliki beberapa halaman donasi, masuk akal untuk membuat jenis posting unik hanya untuk itu.

Buat Struktur Visual Melalui Wireframing

Pada langkah ini, saya mulai memberikan struktur visual pada karya tersebut. Agar sistem berfungsi dengan baik dan berhasil mengintegrasikan gagasan bahwa "semuanya terkait dengan lokasi", saya membuat hubungan dua arah antara jenis posting.

Inilah ide dasarnya: Ketika pengunjung datang ke situs web Archaeology Southwest dan memilih Grand Canyon, mereka akan melihat informasi tentang lokasi itu, tetapi mereka juga akan menemukan informasi yang terkait dengan proyek, acara, pameran, dan semua hal lain yang ditandai oleh administrator situs sebagai lokasi- spesifik.

Karena tautannya dua arah, pengunjung juga bisa sampai ke Grand Canyon dengan mengunjungi halaman proyek. Pada akhirnya, saya berakhir dengan ini:

Halaman indeks lokasi menampilkan semua lokasi dengan yang terbaru di bagian atas. Bilah pencarian adalah hal pertama yang dilihat pengguna saat tiba di halaman. Peta Google akan mengambil sekitar 80 persen dari layar. Ini memungkinkan pengguna untuk memilih titik di peta, dan saat mereka menggulir atau mencari, kisi daftar akan terlihat.

Pada satu halaman lokasi, isi utama ada di sebelah kiri karena itu adalah informasi terpenting. Informasi meta terkait bersifat sekunder, jadi ada di sebelah kanan. Untuk mencapai tata letak yang seimbang, sangat penting untuk memiliki hierarki yang berbeda antara blok elemen pertama, kedua, dan ketiga. Ini memungkinkan mata untuk bergerak dengan mudah di antara bagian-bagian.

Dalam tata letak Archaeology Southwest, pandangan pengguna dimulai dengan header, lalu berpindah ke blok konten, dan akhirnya melacak ke sidebar kanan. Setiap bagian dari konten terkait ditampilkan dalam urutan relevansi. Misalnya, jika pengguna membaca tentang Grand Canyon, konten ini kemungkinan akan diikuti oleh foto dan peta.

Karena ini terutama merupakan situs pendidikan, penting untuk memiliki opsi "Terkait dengan Lokasi Ini". Namun, tidak banyak konten yang secara unik terkait dengan setiap lokasi, jadi saya menggabungkan konten yang jarang digunakan (tetapi terkait) menjadi satu blok di bawah badan.

Menempatkan jempol majalah dan video di bawah konten terkait menambahkan elemen visual tambahan dan mengarahkan pengguna ke halaman "Beli". Halaman ini dilengkapi dengan menunjukkan lokasi terkait. Ini adalah cara yang bagus untuk menarik pengguna agar menjelajahi situs lebih jauh. Langkah selanjutnya adalah melanjutkan struktur ini untuk jenis posting lainnya.

Berikan Beranda dengan Tujuan yang Jelas

Dengan model umum untuk jenis posting di tempat, saya dapat fokus pada beranda. Langkah pertama adalah membuat tujuan untuk beranda—ini adalah bagian penting dari desain UI. Penelitian klien menunjukkan bahwa banyak pengguna menemukan situs tersebut tanpa sepenuhnya memahami apa itu. Oleh karena itu, pengantar dan teks sambutan perlu menjadi hal pertama yang dilihat pengguna.

Fokus inti baru berkisar pada blok lokasi sekunder. Ini diikuti oleh semua yang terjadi di archaeologysouthwest.org (majalah, blog, acara, buletin terkini, dan sebagainya). Berikut adalah iterasi dari proses tata letak:

Dengan V1 (kiri), saya merancang tata letak dasar yang menyerupai beranda asli. Tidak ada banyak hierarki. Hal pertama yang dilihat pengguna adalah lokasi unggulan, tetapi dari sana, mereka kemungkinan akan tersesat di kolom.

Untuk V2 (tengah), saya membuat kolom terpisah yang lebih mudah diikuti mata. Namun, masih bisa ditingkatkan. Di sinilah pengetahuan tentang konten memainkan peran utama. Saya tahu bahwa Archaeology Southwest tidak pernah memiliki lebih dari dua acara sekaligus, jadi tidak masuk akal untuk memiliki ruang untuk beberapa acara di beranda.

Di V3 (kanan), saya fokus pada acara yang akan datang. Jika, karena alasan tertentu, ada lebih dari dua peristiwa, pengguna dapat mengklik tombol "Lainnya" dan melihat sisanya. Saya juga memberikan penekanan tambahan pada majalah saat ini karena itu adalah penghasil uang klien. Pengguna mulai dari atas dan turun ke bawah dalam pola-F. Aliran mata adalah:

Lokasi Unggulan > Selamat Datang > Majalah > Acara > Berita

Dengan gambar rangka visual dan struktur situs yang ada, akan jauh lebih mudah untuk memperkuat fitur dan cara kerjanya. Pada titik ini, saya mengadakan pertemuan lain dengan klien untuk membahas fungsionalitas dan alur interaksi pengguna, yang keduanya jauh lebih jelas pada tahap ini.

Akankah masih ada revisi di kemudian hari? Ya, tetapi itu akan menjadi tweak, bukan seluruh proses yang berubah. Yang terpenting, tidak akan ada kejutan.

Gabungkan Panduan Gaya Merek

Sekarang sampai pada bagian yang menarik—mengubah gambar rangka menjadi sesuatu yang akan digunakan dan dialami orang. Untuk proyek ini, saya bertujuan untuk membuat konten tertulis mudah dicerna dengan menerapkan warna merek dan tipografi.

Bereksperimen dengan Kombinasi Tipografi

Tipografi merupakan bagian integral dari desain web yang baik, jadi kita harus mengetahui skema tipe kita lebih awal. Sebagian besar identitas Archaeology Southwest menggunakan font Univers Condensed Light dan Adobe Caslon. Tidak ada aturan kapan Adobe Caslon akan digunakan, tetapi saya perhatikan bahwa itu tidak digunakan sesering Univers.

Saya melakukan studi font kecil untuk melihat pasangan apa yang menciptakan nuansa terbaik untuk organisasi nirlaba profesional. Namun, saya juga tidak ingin skema tipe saya terlihat terlalu berbeda dari jaminan pemasaran klien.

Setelah melakukan perbandingan font, menjadi jelas bahwa Adobe Caslon harus menjadi font judul dan Univers akan digunakan untuk subtitle. Menetapkan judul utama dalam kasus kalimat memberi merek perasaan yang lebih pribadi, sedangkan semua huruf besar menciptakan lebih banyak getaran korporat.

Poles Tampilan dan Nuansa Situs Web

Saya mulai menciptakan pengalaman yang ringan dan terbuka sehingga pengguna akan merasa bahwa Archaeology Southwest mudah didekati dan sangat kompeten. Berdasarkan data analytics, mayoritas pengunjung menggunakan browser desktop (mungkin karena kebanyakan orang mengunjungi situs untuk penelitian). Oleh karena itu, fokus awal saya adalah mendesain untuk pengguna desktop.

Ketika datang dari desktop, saya ingin pengunjung segera melihat lokasi unggulan, teks selamat datang, dan acara mendatang diikuti dengan bagian dari judul majalah. Dengan cara ini, orang pertama kali melihat tentang perusahaan dan apa yang mereka promosikan.

Pada perangkat seluler, prioritasnya sedikit berbeda. Karena pengguna mengakses informasi saat bepergian, acara menjadi lebih penting, sehingga mereka ditempatkan lebih tinggi dalam daftar.

Saya juga memperbarui tombol donasi di footer menjadi lebih ramah dengan mengubahnya dari tombol menjadi kalimat.

Finishing Kuat: Perhatikan Detailnya

Ada dua alasan mengapa pengguna datang ke halaman detail—entah mereka ingin mempelajari lebih lanjut tentang tengara, atau mereka sudah tahu tentang lokasi dan mencari informasi tambahan (petunjuk arah, nomor telepon, dll). Oleh karena itu, penting untuk segera menampilkan kedua opsi sehingga pengguna tidak perlu mencari.

Saya memutuskan untuk memisahkan kolom detail dari area konten untuk memberikan bobot lebih dan membuat halaman lebih menarik. Ini membantu membuat hierarki komposisi, jadi ketika pengunjung membuka halaman, mereka akan melihat judul halaman terlebih dahulu diikuti oleh galeri kecil gambar dan kemudian kolom detail.

Jenis desain ini memastikan bahwa pengguna akan segera melihat detail tambahan dari suatu lokasi. Sedikit bantalan ekstra yang mengelilingi kolom membuat mata tetap fokus dan memudahkan untuk memindai informasi.

Tampilan seluler runtuh seperti yang diharapkan. Konten dihapus terlebih dahulu, dan informasi meta mengikuti. Saya menempatkan video dan majalah terakhir di halaman seluler karena mereka paling tidak penting bagi pengguna seluler. Halaman lain mengikuti struktur yang sama untuk menciptakan alur dan pengalaman yang konsisten.

Desain Ulang Web Dibangun di Atas Dasar Perencanaan yang Cermat

Melihat kembali proses mendesain ulang situs web, tampak jelas bahwa sebagian besar waktu didedikasikan untuk pengorganisasian dan perencanaan. Hanya 30 persen dari proyek yang dihabiskan untuk merancang situs.

Seringkali, ketika desainer menunjukkan pekerjaan mereka, mereka gagal menyampaikan berapa banyak waktu yang dicurahkan untuk mur dan baut komunikasi, membuat desainer yang tidak berpengalaman langsung terjun ke maket. Hasilnya? Proyek yang tergelincir dan klien yang tidak bahagia.

Perencanaan terperinci harus dilakukan agar desain ulang situs web berhasil. Meluangkan waktu untuk melakukan penelitian pra-proyek, menjadi akrab dengan konten yang ada, dan melibatkan klien adalah langkah penting.

Pada akhirnya, tidak ada jalan lain; jalan menuju desain ulang situs web yang menakjubkan dan kepercayaan profesional diaspal oleh pendekatan metodis untuk organisasi proyek.