Laman web boleh lulus semakan reka bentuk walaupun borang pertanyaannya tidak menghantar apa-apa. Laman itu mungkin dimuatkan dengan pantas pada komputer riba pembangun, tetapi perlahan pada telefon pelanggan. Persembahannya diluluskan. Masalah operasi hanya timbul kemudian.
Amalan terbaik reka bentuk dan pembangunan laman web sepatutnya membantu pasukan mengesan kegagalan sebelum pelawat mengalaminya. Ini memerlukan kandungan yang jelas, antara muka yang mudah digunakan, keputusan teknikal yang tepat dan seseorang yang bertanggungjawab menyemak hasil kerja.
Di Ulement, kami bermula dengan memahami hubungan antara semua bahagian ini. Masalah yang kelihatan ialah titik mula untuk siasatan.
Perkara utama
- Tentukan tindakan yang perlu dilakukan pelawat sebelum mereka bentuk halaman.
- Utamakan kegagalan berdasarkan kesannya kepada pengguna dan perniagaan.
- Masukkan keperluan kebolehcapaian, prestasi dan carian dalam taklimat projek.
- Uji perkara yang berlaku selepas klik, penghantaran borang atau pembayaran.
- Tetapkan pemilik bagi penyelenggaraan, akaun dan pemulihan.
Mulakan dengan tugasan yang perlu disokong oleh laman web
Sebelum membincangkan susun atur, persetujui perkara yang perlu dilakukan oleh pelawat di laman web.
Bagi perniagaan perkhidmatan, pelawat biasanya perlu memahami perkhidmatan, menilai sama ada perkhidmatan itu sesuai, melihat bukti yang boleh dipercayai dan membuat pertanyaan. Pelanggan e-dagang pula memerlukan maklumat produk yang tepat, syarat penghantaran yang jelas dan proses pembayaran yang berfungsi.
Catat tugasan utama, kemudian kenal pasti perkara yang diperlukan bagi setiap tugasan.
| Tugasan pengguna | Maklumat atau fungsi yang diperlukan | Semakan siap |
|---|---|---|
| Menilai sesuatu perkhidmatan | Skop, pengecualian, kesesuaian dan bukti | Pelawat boleh menentukan sama ada perkhidmatan itu sesuai |
| Meminta sebut harga | Borang yang jelas, arahan berguna dan aliran penghantaran | Pertanyaan sampai kepada orang yang bertanggungjawab |
| Membeli produk | Butiran produk, stok, penghantaran dan pembayaran | Rekod pesanan sepadan dengan rekod pembayaran |
| Mencari dokumen | Kategori yang jelas, carian dan tajuk yang menerangkan kandungan | Pelawat menemui versi yang betul |
| Mengemas kini kandungan laman web | Medan, kebenaran dan panduan yang sesuai | Penyunting boleh membuat kemas kini tanpa bantuan pembangun |
Ini memberi projek perkara yang boleh diuji dengan jelas.
Kerja reka bentuk laman web kami bermula dengan keputusan ini: struktur kandungan, navigasi, perjalanan pengguna dan fungsi yang perlu dibangunkan.
Utamakan berdasarkan kesan
Kegagalan pembayaran dan jarak tepi yang tidak sekata tidak patut berada dalam senarai keutamaan yang sama.
Nilai setiap isu berdasarkan pihak yang terjejas, perkara yang terhalang dan sama ada terdapat cara sementara yang munasabah.
| Keutamaan | Contoh | Tindakan |
|---|---|---|
| Penghalang pelancaran | Pembayaran gagal, rekod terdedah atau borang utama tidak boleh digunakan | Selesaikan dan uji semula sebelum pelancaran |
| Keutamaan tinggi | Navigasi tidak boleh diakses, lencongan salah atau kelewatan ketara pada halaman penting | Selesaikan mengikut keperluan pelancaran yang dipersetujui |
| Penambahbaikan terancang | Kandungan sokongan mengelirukan, proses suntingan tidak cekap atau penapis lemah | Tetapkan pemilik dan tarikh pelaksanaan |
| Kemasan kosmetik | Jarak kecil atau perbezaan hiasan | Tangani selepas isu yang lebih besar kesannya |
Rekodkan bukti bersama cadangan. “Borang rosak” tidak cukup jelas. Nyatakan borang yang mana, perkara yang dihantar, apa yang berlaku dan bahagian proses yang gagal.
Penemuan yang berguna memberi orang seterusnya maklumat yang cukup untuk mengulangi ujian tersebut.
Rancang kandungan sebelum meluluskan reka bentuk
Menggunakan teks sementara dalam reka bentuk hanya menangguhkan keputusan yang diperlukan untuk membentuk susun atur.
Halaman perkhidmatan mungkin memerlukan skop, pengecualian, bukti, faktor kos dan laluan pertanyaan. Jika keperluan ini hanya muncul selepas reka bentuk diluluskan, pasukan terpaksa memasukkannya ke dalam susun atur yang dibina untuk perkara lain.
Sebelum reka bentuk terperinci, persetujui:
- Audiens dan tujuan setiap halaman.
- Soalan yang perlu dijawab.
- Pemilik kandungan.
- Bukti yang tersedia.
- Tindakan seterusnya.
- Hubungan dengan halaman lain.
Gunakan wireframe untuk menyemak susunan kandungan. Pelawat perlu memahami perkhidmatan sebelum diminta menghantar taklimat terperinci.
Contoh daripada projek Ulement
Sebuah syarikat berkaitan kerajaan di Malaysia menghubungi kami tentang portal Liferay yang sudah lapuk. Maklumat disusun seperti pustaka dokumen, navigasi tidak mengikut keperluan pengguna yang jelas dan kemas kini kandungan biasa memerlukan bantuan teknikal.
Kami membina semula portal itu menggunakan WordPress, templat boleh guna semula dan medan kandungan berstruktur. Kerja ini merangkumi penyusunan semula navigasi, penulisan semula kandungan dalam bahasa Inggeris dan Bahasa Melayu, semakan URL sedia ada serta penambahbaikan keselamatan dan pengurusan pelayan.
Selepas pelancaran, kami menyemak lencongan, respons pelayan, prestasi, kawalan keselamatan dan perjalanan pertanyaan.
Model kandungan memberi kesan kepada kedua-dua bahagian laman web: cara pelawat mencari maklumat dan cara pelanggan menguruskannya. Kedua-duanya perlu diberi perhatian.
Baca kajian kes migrasi platform dan seni bina kandungan.
Jadikan navigasi dan teks mudah difahami
Gunakan label yang dikenali pelawat. Nama jabatan dalaman dan bahasa kempen selalunya perlu diolah sebelum sesuai digunakan dalam navigasi.
Berikan setiap halaman tajuk utama yang jelas. Tulis tajuk bahagian yang menerangkan kandungan seterusnya. Gunakan pautan yang menyatakan halaman yang akan dibuka.
“Lihat pelan penyelenggaraan” memberi lebih banyak maklumat daripada “Terokai”.
Semak juga bahagian perjalanan pengguna yang kurang kemas:
- Hasil carian perlu membantu pengguna membezakan antara halaman.
- Senarai kosong perlu menerangkan sama ada tiada kandungan atau penapis perlu diubah.
- Ralat borang perlu mengenal pasti masalah dan mengekalkan maklumat yang sah.
- Halaman yang tiada perlu memulangkan respons 404 dan menawarkan laluan yang berguna.
- Perkhidmatan yang tidak tersedia perlu menerangkan tindakan seterusnya.
Keadaan ini juga sebahagian daripada reka bentuk. Mesej lalai perisian boleh menyebabkan kekeliruan yang sebenarnya boleh dielakkan.
Bina komponen boleh guna semula dengan fungsi yang lengkap
Sistem reka bentuk sepatutnya mengurangkan keputusan berulang untuk pelawat, penyunting dan pembangun.
Tetapkan tipografi, warna, jarak, butang, borang, navigasi dan komponen kandungan yang dikongsi. Sertakan keadaan yang ditemui semasa penggunaan: fokus papan kekunci, ralat, pemuatan, pilihan dan pengesahan.
Reka bentuk borang belum lengkap jika hanya menunjukkan medan kosong.
Gunakan token reka bentuk, iaitu nilai bernama untuk gaya yang dikongsi, apabila ia membantu mengekalkan konsistensi. Perubahan warna atau jarak tidak sepatutnya memerlukan carian satu demi satu pada setiap halaman.
Pilih imej yang menerangkan perkara yang dibincangkan. Butiran produk, rajah proses dan tangkap layar beranotasi boleh menjawab soalan yang tidak dapat dijawab oleh imej hiasan.
Berikan animasi tujuan yang jelas. Jika animasi melambatkan akses kepada maklumat atau menyukarkan tugasan, buangkannya.
Uji penggunaan mudah alih, bukan sekadar tangkap layar
Reka bentuk responsif menyesuaikan susun atur kepada saiz skrin yang berbeza. Reka bentuk mobile-first bermula dengan kekangan skrin yang lebih kecil.
Kedua-duanya tidak dapat dibuktikan melalui pratonton sempit dalam alat reka bentuk.
Pada telefon sebenar:
- Buka navigasi.
- Cari perkhidmatan atau produk yang berkaitan.
- Besarkan teks.
- Lengkapkan borang atau pembayaran.
- Baca pengesahan.
- Sahkan hasilnya dalam sistem penerima.
Perhatikan keadaan apabila papan kekunci pada skrin dibuka. Semak label panjang, mesej pengesahan, menu dan kawalan melekat.
Gunakan susun atur fleksibel dan imej bersaiz sesuai. Tambah breakpoint apabila kandungan memerlukannya, bukan semata-mata mengikut nama peranti.
Jadikan kebolehcapaian sebahagian daripada penerimaan projek
Tetapkan sasaran kebolehcapaian dalam taklimat projek. Web Content Accessibility Guidelines (WCAG) 2.2 Tahap AA menyediakan keperluan yang boleh diuji bagi perkara seperti akses papan kekunci, kontras, fokus, label dan bantuan ralat. Gunakan rujukan ringkas W3C untuk mengenal pasti kriteria yang berkaitan.
Asasnya termasuk:
- HTML semantik dan turutan tajuk yang logik.
- Nama dan label kawalan yang jelas.
- Operasi papan kekunci dengan fokus yang kelihatan.
- Kontras warna yang mencukupi.
- Penerangan ralat dalam bentuk teks.
- Teks alternatif yang berguna untuk imej bermaklumat.
- Kapsyen untuk video yang berkaitan.
- Sokongan untuk gerakan yang dikurangkan.
Jalankan semakan automatik, kemudian uji secara manual menggunakan papan kekunci dan pembaca skrin. Sertakan menu, dialog, borang dan widget pihak ketiga.
Rekodkan halaman, komponen dan perjalanan pengguna yang dinilai. Skor automatik tidak membuktikan bahawa laman web boleh diakses.
Ukur prestasi dalam keadaan yang munasabah
Prestasi merangkumi pemuatan, tindak balas dan kestabilan visual.
Core Web Vitals Google menggunakan ambang “baik” berikut:
| Metrik | Perkara yang diukur | Sasaran |
|---|---|---|
| Largest Contentful Paint (LCP) | Pemuatan elemen kandungan terbesar yang kelihatan | 2.5 saat atau kurang |
| Interaction to Next Paint (INP) | Respons terhadap interaksi pengguna | 200 milisaat atau kurang |
| Cumulative Layout Shift (CLS) | Pergerakan visual yang tidak dijangka | 0.1 atau kurang |
Panduan Web Vitals Google menyarankan penilaian pada persentil ke-75 dengan pengalaman mudah alih dan desktop diasingkan.
Lighthouse membantu mendiagnosis masalah dalam keadaan simulasi. Data pengguna sebenar menunjukkan perkara yang berlaku merentas peranti, sambungan dan interaksi sebenar. Gunakan kedua-duanya jika tersedia.
Mulakan penambahbaikan dengan sumber yang menyebabkan kelewatan:
- Ubah saiz dan mampatkan imej.
- Elakkan lazy-loading pada imej utama yang perlu dipaparkan serta-merta.
- Hadkan fail dan weight fon.
- Buang skrip yang tidak digunakan.
- Semak penjejak, alat sembang dan media terbenam.
- Sediakan ruang untuk imej dan kandungan dinamik.
- Tetapkan caching dan pemampatan dengan sewajarnya.
Tetapkan had saiz halaman dan skrip sebelum menambah lebih banyak ciri. Setiap alat pihak ketiga menjadi sebahagian daripada pengalaman yang perlu dimuatkan oleh pelawat.
Masukkan keperluan carian dalam pembangunan laman web
Berikan tujuan yang jelas kepada setiap halaman penting. Tajuk, heading, kandungan dan pautan dalamannya perlu memenuhi keperluan yang sama.
Halaman perkhidmatan memerlukan maklumat yang cukup untuk menyokong keputusan pembelian. Artikel perlu menjawab soalan yang dinyatakan dalam tajuknya.
Kemudian semak asas teknikal:
| Perkara | Perkara yang perlu disemak |
|---|---|
| URL kanonik | URL pilihan menunjuk kepada halaman yang dimaksudkan |
| XML sitemap | URL awam yang penting disertakan |
| Arahan robots | Arahan crawl dan indeks sepadan dengan tujuan halaman |
| Lencongan | URL yang digantikan menuju ke destinasi yang relevan |
| Pautan dalaman | Halaman penting boleh dicapai melalui pautan yang boleh di-crawl |
| Paparan JavaScript | Kandungan dan pautan penting kekal boleh diakses oleh enjin carian |
Keperluan teknikal Google Search menentukan sama ada halaman layak diindeks. Memenuhinya tidak menjamin halaman akan dimasukkan.
Gunakan data berstruktur apabila jenis yang disokong menggambarkan kandungan yang kelihatan dengan tepat. Sahkan pelaksanaannya, tetapi jangan menjanjikan hasil carian khas. Panduan data berstruktur Google menerangkan syaratnya.
Bagi laman web sedia ada, semak sejarah carian sebelum mengubah URL atau membuang kandungan. Perkhidmatan SEO teknikal kami menilai kebergantungan ini bersama perubahan yang dicadangkan.
Pilih teknologi yang mampu diurus oleh pasukan
Pilih sistem pengurusan kandungan dan framework berdasarkan kerja yang perlu disokong.
Nilai perkara berikut:
- Siapa yang menerbitkan dan meluluskan kandungan.
- Perkara yang perlu diubah oleh penyunting.
- Sistem yang perlu disambungkan.
- Kebenaran yang diperlukan.
- Pihak yang menyelenggara platform.
- Kos lesen dan pengehosan.
- Cara organisasi boleh memindahkan kandungan dan data kemudian.
Binaan yang lebih murah boleh menyebabkan kerja rutin menjadi mahal jika setiap kemas kini memerlukan pembangun.
Gunakan komponen boleh guna semula, kawalan versi, semakan kod yang sepadan dengan risikonya dan dokumentasi. Bagi integrasi, tetapkan respons yang dijangka dan perkara yang berlaku apabila sistem lain tidak tersedia.
Perkhidmatan pembangunan laman web kami merangkumi keputusan pelaksanaan ini serta semakan sebelum penerimaan produksi.
Lindungi data dan uji pemulihan
Gunakan HTTPS, pengesahan yang selamat, kebenaran yang sesuai, pengesahan di pelayan dan output encoding mengikut konteks.
Pengesahan memeriksa sama ada maklumat yang dihantar boleh diterima. Output encoding membantu menghalang maklumat itu daripada ditafsir sebagai kod boleh laksana apabila dipaparkan.
Panduan pengesahan input OWASP menerangkan mengapa pengesahan mesti berlaku di pelayan. Pengesahan dalam pelayar membantu pengguna membetulkan kesilapan tetapi boleh dipintas.
Pastikan dependency disokong, lindungi rahsia sistem dan berikan akaun akses yang diperlukan sahaja. Gunakan rate limiting apabila permintaan berulang boleh menyalahgunakan atau membebankan fungsi.
Tetapkan proses sandaran dan pemulihan:
- Kenal pasti fail, pangkalan data dan konfigurasi yang diperlukan.
- Simpan salinan terlindung secara berasingan.
- Tetapkan pihak yang mempunyai akses dan bertanggungjawab memulihkan data.
- Pulihkan satu salinan dalam persekitaran terkawal.
- Semak fungsi yang diperlukan oleh organisasi.
Notifikasi sandaran mengesahkan proses telah berjalan. Ujian pemulihan memberikan bukti bahawa sandaran itu boleh digunakan.
Sahkan hasil selepas klik
Mesej berjaya boleh menyembunyikan proses serahan yang gagal.
Bayangkan borang nampak berjaya dihantar tetapi pasukan jualan melaporkan pertanyaan tidak sampai. Semak proses itu pada setiap peringkat.
| Peringkat | Bukti yang perlu disemak |
|---|---|
| Pelayar | Permintaan dihantar dan respons diterima |
| Pelayan | Pengesahan dan pemprosesan selesai |
| Storan | Pertanyaan direkodkan di tempat yang sepatutnya |
| Penghantaran | Peti mel atau sistem yang disambungkan menerima pertanyaan |
| Pengesahan | Mesej kepada pelawat menerangkan hasil sebenar dengan tepat |
| Analitik | Peristiwa merekodkan tahap penyelesaian yang dimaksudkan |
Langkah ini membantu membezakan masalah borang daripada masalah e-mel, integrasi atau pengukuran.
Pastikan borang sepadan dengan keperluan pertanyaan. Minta maklumat yang akan digunakan oleh pasukan, terangkan medan yang kurang jelas dan nyatakan tindakan seterusnya.
Jika boleh, ukur tindakan yang selesai. Klik butang dan pertanyaan yang diterima ialah dua peringkat yang berbeza.
Lancarkan dengan senarai semak
Pilih ujian mengikut kesan kegagalan. Automatikkan semakan berulang jika sesuai dan uji perjalanan penting secara manual.
Sebelum pelancaran, sahkan:
- Borang, pembayaran, tempahan dan aliran akaun.
- Akses papan kekunci dan keperluan kebolehcapaian yang dipersetujui.
- Navigasi, pautan, lencongan dan tingkah laku halaman yang tiada.
- Tetapan pengindeksan, URL kanonik dan sitemap.
- Peristiwa analitik dan tetapan privasi.
- Akses dan konfigurasi produksi.
- Sandaran dan arahan pemulihan.
- Langkah undur semula serta tanggungjawab pelancaran.
Uji dalam staging, kemudian ulangi semakan kritikal pada laman web langsung. Pengehosan, kelayakan akses, penghantaran e-mel, caching dan sambungan luar mungkin berbeza dalam produksi.
Namakan orang yang meluluskan pelancaran dan orang yang boleh mengundurkannya.
Tetapkan pemilik selepas pelancaran
Laman web memerlukan keputusan berterusan tentang kandungan, perisian, infrastruktur dan akses.
Persetujui pihak yang akan:
- Meluluskan kemas kini dan perubahan kandungan.
- Menerima dan bertindak terhadap amaran.
- Menguji perjalanan kritikal.
- Menyemak data carian dan prestasi.
- Mengesahkan proses pemulihan.
- Mengawal domain, pengehosan, lesen dan akaun pentadbir.
Gunakan analitik yang menjaga privasi. Jangan masukkan maklumat sensitif dalam rakaman, nama peristiwa, URL atau laporan.
Tetapkan kekerapan semakan mengikut kadar perubahan dan kepentingan perniagaan laman web. Uji semula perjalanan yang terjejas selepas kemas kini besar.
Perkhidmatan penyelenggaraan dan sokongan laman web kami menetapkan kerja dan tanggungjawab berterusan. Fungsi baharu dan perubahan besar memerlukan skop serta semakan penerimaan tersendiri.
Soalan lazim
Apakah yang patut diutamakan oleh perniagaan kecil?
Mulakan dengan maklumat perkhidmatan yang jelas, navigasi mudah alih yang mudah digunakan, borang yang boleh diakses, pentadbiran yang selamat dan sandaran yang boleh dipulihkan. Pastikan halaman awam boleh diindeks dan pertanyaan sampai kepada orang yang bertanggungjawab membalas.
Apakah perbezaan antara reka bentuk responsif dengan mobile-first?
Reka bentuk responsif menyesuaikan susun atur kepada saiz skrin yang berbeza. Reka bentuk mobile-first bermula dengan pengalaman pada skrin kecil, kemudian mengembangkan susun atur apabila ruang bertambah.
Bagaimana anda menyemak kebolehcapaian, prestasi dan SEO?
Gabungkan semakan automatik dengan ujian manual. Gunakan semakan papan kekunci dan pembaca skrin, diagnostik prestasi, semakan crawl dan Search Console. Uji halaman dan perjalanan pengguna yang mewakili penggunaan sebenar.
Bolehkah website builder atau CMS memenuhi keperluan ini?
Ya, jika komponen, konfigurasi, pengehosan dan integrasinya menyediakan kawalan yang diperlukan. Semak keperluan kebolehcapaian, prestasi, pengindeksan, pengendalian data dan penyelenggaraan sebelum memilih platform.
Berapa kerap laman web patut disemak?
Pantau kegagalan secara berterusan jika praktikal. Jadualkan semakan lebih menyeluruh mengikut kadar perubahan laman web dan kesan sesuatu kegagalan. Uji semula perjalanan kritikal selepas perubahan besar.
Adakah laman web sedia ada perlu dibina semula?
Nilai sistem semasa dahulu. Perubahan kandungan, konfigurasi, reka bentuk atau pembangunan mungkin menyelesaikan masalah. Pertimbangkan binaan semula apabila seni bina sedia ada menghalang penambahbaikan yang diperlukan atau menyukarkan penyelenggaraan secara tidak seimbang.
Tentukan perkara yang perlu dibaiki dahulu
Ikuti satu tugasan penting dari halaman pertama yang dilawati hingga hasil yang diterima oleh pasukan anda. Catat kegagalan, tetapkan pemilik dan persetujui bukti yang diperlukan untuk menutup setiap isu.
Jika anda memerlukan bantuan untuk menilai laman web semasa, bincangkan keperluan anda dengan Ulement.
Tag: Reka bentuk laman web, Pembangunan laman web, Kebolehcapaian