Komponen reka bentuk perkhidmatan adalah panduan asas yang diperlukan bagi mereka bentuk paparan perkhidmatan digital kerajaan. Komponen merujuk kepada elemen-elemen atau modul yang berbeza dalam antara muka pengguna grafik yang direka bertujuan untuk menjalankan fungsi khusus atau memaparkan kandungan tertentu. Komponen juga adalah bahagian yang boleh digunakan semula dalam antara muka pengguna. Dengan menggunakan elemen-elemen teras yang telah dibina sebelumnya, pasukan pembangunan dapat membina perkhidmatan yang konsisten.[1]
Komponen accordian
membolehkan pengguna untuk menunjukkan dan menyembunyikan bahagian-bahagian kandungan berkaitan pada sesuatu halaman.[2] Komponen accordion sesuai digunakan apabila mempunyai kandungan yang berkaitan dan ingin memberikan pengguna kemampuan untuk menunjukkan atau menyembunyikan bahagian-bahagian tersebut dengan mudah. Berikut merupakan beberapa kelebihan penggunaan accordion:
a) Memanfaatkan Ruang: Accordion mengatur maklumat yang panjang atau kompleks dalam format yang ringkas dan lebih pendek dengan hanya memaparkan tajuk atau bahagian utama, membolehkan pengguna membuka bahagian yang mereka perlukan sahaja. Ini membantu menyembunyikan kandungan yang kurang penting atau tidak diperlukan segera, mengelakkan kepadatan pada halaman dan memastikan ruang yang tersedia digunakan dengan lebih efisien.
b) Meningkatkan Pengalaman Pengguna: Accordion membolehkan pengguna melayari kandungan dengan mudah tanpa perlu menyorot sehingga ke bahagian bawah halaman, memberikan mereka kawalan untuk melihat apa yang diperlukan sahaja. Ini menyediakan interaksi yang dinamik dan responsif, meningkatkan interaksi pengguna dengan elemen halaman, menjadikan pengalaman pengguna lebih intuitif dan menyenangkan.
c) Pengurusan Kandungan yang Efisien: Dengan menghimpunkan kandungan berkaitan dalam satu seksyen yang boleh dibuka atau ditutup, accordion menjadikan maklumat lebih teratur dan mudah diakses. Ia juga memaparkan maklumat yang berlapis atau bertingkat dengan cara yang jelas dan logik, memudahkan pengguna untuk memahami dan mencari maklumat yang diperlukan dengan lebih cepat dan efisien.
Accordian
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-1">
Writing well for the web
</span>
</h2>
</div>
<div id="accordion-default-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Writing well for the web.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-2">
Writing well for specialists
</span>
</h2>
</div>
<div id="accordion-default-content-2" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for Writing well for specialists.</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-default-heading-4">
How people read
</span>
</h2>
</div>
<div id="accordion-default-content-4" class="govuk-accordion__section-content">
<p class="govuk-body">This is the content for How people read.</p>
</div>
</div>
</div>
Komponen pautan kembali atau back-link
digunakan untuk membantu pengguna kembali ke halaman sebelumnya dalam transaksi multi-halaman, meningkatkan pengalaman navigasi yang lancar.
Mengikut panduan Aksesibiliti Kandungan Web (WCAG) 2.2, pautan Kembali perlu mematuhi kriteria berikut:
- Mengelakkan memasukkan semula maklumat yang pengguna berikan sebelum ini apabila mereka kembali ke halaman
- Pautan Kembali mesra hendaklah pengguna dan mudah diakses termasuk menggunakan tab pada papan kekunci.
Sebagai contoh, pada laman artikel berita, sebuah pautan kembali mungkin terletak di bahagian atas dan bawah artikel dengan teks "Kembali ke Senarai Artikel." Pautan ini harus mempunyai warna teks yang berbeza dari latar belakang dan dapat diakses menggunakan tab pada papan kekunci. Selain itu, apabila pengguna menggunakan pembaca skrin, pautan ini harus dapat dikenali dan dijelaskan dengan baik oleh pembaca skrin tersebut.
Button Back
<a href="#" class="back-link">Back</a>
Komponen breadcrumbs
membantu pengguna menjejaki dan menavigasi hierarki atau struktur halaman aplikasi dengan lebih mudah. Ia biasanya diletakkan di bahagian atas halaman dan menunjukkan laluan dari halaman utama ke halaman semasa bagi membolehkan pengguna memahami kedudukan semasa mereka dan kembali ke halaman sebelumnya atau ke halaman lain dengan mudah.
Breadcrumbs lazimnya terdiri daripada elemen berikut:
Home atau Utama: Pautan ke halaman utama.
Kategori atau Subkategori: Pautan ke kategori atau subkategori dalam hierarki halaman.
Halaman Semasa: Nama atau tajuk halaman semasa, biasanya tidak boleh diklik.
Dengan menggunakan breadcrumbs, aplikasi boleh menjadi lebih mesra pengguna dan mudah dilayari, terutamanya untuk laman yang mempunyai struktur yang kompleks. Bagi peranti mobile, hanya paparkan item pertama dan terakhir sekiranya breadcrumbs terlalu panjang.
Breadcrumbs
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Home</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Passports, travel and living abroad</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Travel abroad</a>
</li>
</ol>
</div>
Komponen butang atau button
digunakan untuk membantu pengguna menjalankan atau memproses pelbagai tindakan seperti memulakan permohonan, menyimpan borang, memulakan carian, memuat turun fail, dan banyak lagi. Teks pada butang menggunakan huruf kecil bersusun bagi menggambarkan tindakan yang dilakukannya. Contoh penggunaan butang seperti berikut:
Penggunaan lebih banyak perkataan atau perkataan yang berbeza mungkin berguna bagi lebih menggambarkan sesuatu tindakan. Reka bentuk dan penempatan butang yang intuitif adalah penting untuk memastikan pengalaman pengguna yang lancar dan efisien. Sebagai contoh, selaraskan butang tindakan utama ke tepi kiri borang anda.
button
Save and continue
</button>
Komponen bilangan aksara dapat membantu pengguna mengetahui bilangan aksara pada teks yang boleh dimasukkan apabila terdapat had pada jumlah aksara.
Hanya gunakan komponen pengiraan aksara apabila ada alasan kukuh untuk membatasi jumlah aksara yang boleh dimasukkan pengguna. Contohnya, jika terdapat:
Sekiranya pengguna sentiasa mencapai had aksara yang ditetapkan, kemungkinan had aksara tersebut perlu ditingkatkan.
button
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--l" for="with-hint">
Can you provide more detail?
</label>
</h1>
<div id="with-hint-hint" class="govuk-hint">
Do not include personal or financial information like your National Insurance number or credit card details.
</div>
<textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="withHint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
<div id="with-hint-info" class="govuk-hint govuk-character-count__message">
You can enter up to 200 characters
</div>
</div>
Digunakan dalam situasi di mana pengguna boleh memilih satu atau lebih pilihan dengan menggunakan komponen petak semak (checkbox). Komponen checkbox juga digunakan dalam situasi seperti berikut:
Elakkan menggunakan komponen
Checkbox
jika pengguna hanya boleh memilih satu pilihan daripada pilihan yang ada. Dalam kes ini, gunakan komponenRadio Button
.
contoh
<fieldset class="govuk-fieldset" aria-describedby="waste-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which types of waste do you transport?
</h1>
</legend>
<div id="waste-hint" class="govuk-hint">
Select all that apply.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="carcasses">
<label class="govuk-label govuk-checkboxes__label" for="waste">
Waste from animal carcasses
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
</label>
</div>
</div>
</fieldset>
</div>
Berbeza dengan checkbox
, Komponen radio button
digunakan apabila pengguna hanya boleh memilih satu pilihan daripada senarai. Ia dipaparkan dalam bentuk bulatan kecil yang dapat ditandakan (dengan titik di tengahnya) apabila dipilih, dan tidak boleh ditandakan semula tanpa memilih pilihan lain dalam kumpulan yang sama. Radio button lazimnya diletakkan di sebelah kiri label bagi memudah ia ditemui, terutamanya sekiranya fungsi pembesar skrin digunakan.
contoh
<div></div>
Komponen banner cookies
biasanya muncul di bahagian atas atau bawah laman ketika pengguna mengunjunginya untuk pertama kali. Banner ini memberi tahu pengguna mengenai penggunaan cookies oleh laman dan sering meminta persetujuan pengguna untuk mengumpul data melalui cookies. Cookies adalah fail kecil yang disimpan pada peranti pengguna yang digunakan untuk menyimpan maklumat mengenai sesi dan interaksi pengguna dengan laman web. Ia membenarkan pengguna menerima atau menolak cookies yang tidak penting untuk menjadikan perkhidmatan anda berfungsi.
Dua tetapan utama cookies adalah memberitahu pengguna mengenai cookies yang diset pada peranti mereka oleh perkhidmatan serta membenarkan pengguna menerima atau menolak mana-mana cookies yang tidak penting untuk menyediakan perkhidmatan. Komponen ini boleh juga digunakan pada peranti mobile pengguna bagi tujuan yang sama.
contoh
<div class="govuk-cookie-banner__message govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-cookie-banner__heading govuk-heading-m">
Cookies on [name of service]
</h2>
<div class="govuk-cookie-banner__content">
<p class="govuk-body">We use some essential cookies to make this service work.</p>
<p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
</div>
</div>
</div>
<div class="govuk-button-group">
<button value="yes" type="submit" name="cookies[additional]" class="govuk-button" data-module="govuk-button">
Accept additional cookies
</button>
<button value="no" type="submit" name="cookies[additional]" class="govuk-button" data-module="govuk-button">
Reject additional cookies
</button>
<a class="govuk-link" href="#">View cookies</a>
</div>
</div>
</div>
Komponen input tarikh digunakan untuk membantu pengguna memasukkan tarikh dengan tepat dan mengurangkan kesalahan input. Ia biasanya digunakan dalam borang untuk mengumpulkan data yang berkaitan dengan tarikh seperti tarikh lahir, tarikh tempahan, atau tarikh acara. Elemen ini sering disertakan dengan kalendar interaktif untuk memudahkan pemilihan tarikh. Input tarikh biasanya digunakan dalam pelbagai format seperti YYYY-MM-DD atau DD/MM/YYYY atau MM/DD/YYYY bagi memastikan data yang dikumpulkan adalah konsisten dan boleh dipercayai.
Elakkan menggunakan komponen input tarikh jika pengguna mungkin tidak mengetahui tarikh sebenar yang perlu dimasukkan.
contoh
<fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
When was your passport issued?
</h1>
</legend>
<div id="passport-issued-hint" class="govuk-hint">
For example, 27 3 2007
</div>
<div class="govuk-date-input" id="passport-issued">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="passport-issued-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="passport-issued-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="passport-issued-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>
Komponen ini membuatkan keseluruhan paparan kandungan lebih mudah untuk diimbas dengan membenarkan pengguna mendedahkan maklumat yang lebih terperinci hanya jika mereka memerlukannya. Butiran, accordion, dan tab semuanya menyembunyikan bahagian-bahagian kandungan yang pengguna boleh memilih untuk mendedahkan. Berbeza dengan accordian dan tab, butiran digunakan sekiranya hanya terdapat satu bahagian kandungan. Komponen butiran kurang menonjol secara visual berbanding tab dan accordion, jadi cenderung berfungsi lebih baik untuk kandungan yang tidak begitu penting untuk pengguna.
contoh
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help with nationality
</span>
</summary>
<div class="govuk-details__text">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</div>
</details>
Mesej ralat adalah maklumat yang dipaparkan kepada pengguna apabila berlaku kesilapan atau masalah semasa interaksi dengan aplikasi. Mesej ini bertujuan untuk memberitahu pengguna mengenai jenis ralat yang berlaku dan sering kali memberikan panduan atau langkah-langkah untuk memperbaiki atau mengelakkan masalah tersebut. Berikut merupakan ciri-ciri mesej ralat yang baik:
Dengan menyampaikan maklumat yang relevan dan cadangan penyelesaian, mesej ralat dapat meningkatkan kepuasan pengguna dan mengurangkan kekeliruan semasa penggunaan sistem digital.
contoh
<fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
When was your passport issued?
</h1>
</legend>
<div id="passport-issued-hint" class="govuk-hint">
For example, 27 3 2007
</div>
<p id="passport-issued-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The date your passport was issued must be in the past
</p>
<div class="govuk-date-input" id="passport-issued">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="passport-issued-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="passport-issued-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="passport-issued-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="passport-issued-year" name="passport-issued-year" type="text" value="2076" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>
Komponen ini boleh digunakan di bahagian atas halaman untuk merangkumkan sebarang kesilapan yang dilakukan oleh pengguna. Apabila pengguna membuat kesilapan, ringkasan ralat dan mesej ralat akan dipaparkan di sebelah setiap jawapan yang mengandungi kesilapan. Sentiasa tunjukkan ringkasan kesilapan apabila terdapat kesilapan pengesahan, walaupun hanya satu.
contoh
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#">Enter your full name</a>
</li>
<li>
<a href="#">The date your passport was issued must be in the past</a>
</li>
</ul>
</div>
</div>
</div>
Komponen ini dapat membenarkan pengguna untuk keluar dengan cepat dan selamat dari sesuatu aplikasi dengan menyediakan pautan atau butang "Keluar" yang jelas dan mudah dikesan di tempat-tempat yang mudah diperhatikan, seperti pada panel navigasi utama atau dalam paparan menu.
contoh
<div class="govuk-exit-this-page" data-module="govuk-exit-this-page">
<a href="https://www.bbc.co.uk/weather" role="button" draggable="false" class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" rel="nofollow noreferrer">
<span class="govuk-visually-hidden">Emergency</span> Exit this page
</a>
</div>
Komponen petak medan (fieldset) digunakan untuk mengumpulkan input borang yang berkaitan. Petak medan digunakan apabila perlu menunjukkan hubungan antara beberapa input borang. Sebagai contoh, sekiranya meminta alamat, beberapa input teks perlu dimasukkan dan maklumat tersebut dikumpulkan dalam satu set input teks.
contoh
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
What is your address?
</h1>
</legend>
<div class="govuk-form-group">
<label class="govuk-label" for="address-line-1">
Address line 1
</label>
<input class="govuk-input" id="address-line-1" name="addressLine1" type="text" autocomplete="address-line1">
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-line-2">
Address line 2 (optional)
</label>
<input class="govuk-input" id="address-line-2" name="addressLine2" type="text" autocomplete="address-line2">
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-town">
Town or city
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="addressTown" type="text" autocomplete="address-level2">
</div>
<div class="govuk-form-group">
<label class="govuk-label" for="address-postcode">
Postcode
</label>
<input class="govuk-input govuk-input--width-10" id="address-postcode" name="addressPostcode" type="text" autocomplete="postal-code">
</div>
</fieldset>
Komponen ini membantu pengguna untuk memilih fail yang ingin di muat naik dan klik butang 'Muat Naik' untuk menghantar. Pengguna menghantar atau mengalihkan fail dari peranti mereka (seperti komputer, telefon pintar, atau tablet) ke pelayan aplikasi. Proses ini membolehkan fail-fail seperti dokumen, gambar, video, atau sebarang jenis data digital lain disimpan. Proses muat naik fail lazimnya melibatkan langkah-langkah berikut:
contoh
<div class="govuk-form-group">
<label class="govuk-label" for="file-upload-1">
Upload a file
</label>
<input class="govuk-file-upload" id="file-upload-1" name="fileUpload1" type="file">
</div>
Komponen footer
merupakan bahagian bawah halaman web yang biasanya mengandungi maklumat tambahan dan pautan yang kurang penting seperti yang terdapat di bahagian utama halaman. Ini termasuklah butiran mengenai agensi, pautan kepada halaman penting seperti Terma dan Syarat, Polisi Privasi, Hubungi Kami, dan pautan media sosial. Footer boleh juga digunakan bagi memaparkan maklumat hak cipta, butiran pengecaman, dan pautan lain yang membolehkan pengguna berinteraksi dengan aplikasi dengan lebih baik.
contoh
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41">
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="#">
© Crown copyright
</a>
</div>
</div>
</div>
</footer>
Komponen Header
merupakan bahagian teratas atau muka halaman yang mengandungi elemen-elemen penting seperti logo, menu navigasi utama, dan mungkin juga butang carian. Ia merupakan antara muka pertama yang dilihat pengguna apabila mereka mengakses aplikasi. Selain itu, gunakan jata negara dan nama agensi secara seragam pada header untuk menggambarkan identiti perkhidmatan digital kerajaan.
contoh
<header class="govuk-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="#" class="govuk-header__link govuk-header__link--homepage">
</a>
</div>
</div>
</header>
Gunakan komponen teks utama untuk membezakan blok teks daripada kandungan yang mengelilinginya. Contoh penggunaan teks utama ialah pada petikan, contoh dan maklumat tambahan yang mahu dipaparkan dengan lebih jelas kepada pengguna di dalam sesuatu halaman. Teks utama diperlukan kerana pengguna mungkin tidak menyedari mesej penting pada halaman yang kompleks atau berhampiran dengan elemen yang menonjol secara visual. Oleh itu, gunakan teks utama sebagai cara untuk menyerlahkan maklumat yang sangat penting yang perlu dilihat oleh pengguna.
contoh
<div class="govuk-inset-text">
It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
</div>
Komponen banner pemberitahuan digunakan untuk memaklumkan pengguna berhubung mesej penting, tetapi tidak berkaitan dengan kandungan pada halaman tersebut. Ia dipaparkan di bahagian atas, bawah, atau sisi halaman web atau aplikasi untuk menyampaikan maklumat penting kepada pengguna. Banner ini digunakan untuk menarik perhatian pengguna terhadap mesej tertentu, seperti amaran, pemberitahuan, promosi, atau kemas kini. Banner pemberitahuan boleh digunakan mengikut ciri-ciri seperti berikut:
contoh
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
There may be a delay in processing your application because of the coronavirus outbreak.
</p>
</div>
</div>
Paginasi digunakan untuk membahagikan kandungan atau data ke dalam beberapa halaman kecil bagi memudahkan navigasi dan meningkatkan pengalaman pengguna. Contoh penggunaan paginasi adalah pada senarai artikel atau hasil carian yang mempunyai jumlah item yang banyak dan perlu dipecahkan menjadi bahagian yang lebih kecil supaya lebih mudah diurus dan dilihat oleh pengguna.
Paginasi boleh digunakan pada situasi di mana sekiranya paparan semua kandungan pada satu halaman akan menyebabkan halaman itu mengambil masa terlalu lama untuk dimuatkan, dan juga sekiranya kebanyakan pengguna hanya akan memerlukan kandungan pada halaman pertama atau beberapa halaman terawal yang penting sahaja. Panduan paginasi seperti berikut:
contoh
<nav class="govuk-pagination govuk-pagination--block" aria-label="Pagination">
<div class="govuk-pagination__prev">
<a class="govuk-link govuk-pagination__link" href="#" rel="prev">
<svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
</svg>
<span class="govuk-pagination__link-title">
Previous<span class="govuk-visually-hidden"> page</span>
</span>
<span class="govuk-visually-hidden">:</span>
<span class="govuk-pagination__link-label">Applying for a provisional lorry or bus licence</span>
</a>
</div>
<div class="govuk-pagination__next">
<a class="govuk-link govuk-pagination__link" href="#" rel="next">
<svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
<path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
</svg>
<span class="govuk-pagination__link-title">
Next<span class="govuk-visually-hidden"> page</span>
</span>
<span class="govuk-visually-hidden">:</span>
<span class="govuk-pagination__link-label">Driver CPC part 1 test: theory</span>
</a>
</div>
</nav>
Komponen panel merupakan bekas yang dapat dilihat digunakan pada halaman pengesahan atau halaman Panel merupakan komponen visual yang digunakan untuk memaparkan maklumat dengan menghimpunkan elemen-elemen lain seperti butang, teks, gambar, atau widget. Panel sering digunakan untuk mengatur kandungan dalam bentuk yang mudah difahami dan diakses oleh pengguna. Komponen panel juga boleh digunakan sebagai bekas yang dapat dilihat bagi memaparkan kandungan penting. Dalam kebanyakan kes, komponen panel digunakan pada halaman pengesahan, untuk memberitahu pengguna bahawa mereka telah berjaya menyelesaikan transaksi. Panel boleh digunakan berpandukan ciri-ciri berikut:
contoh
<div class="govuk-panel govuk-panel--confirmation">
<h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
Your reference number<br><strong>HDJ2123F</strong>
</div>
</div>
Input kata laluan adalah elemen input pada laman aplikasi yang membolehkan pengguna memasukkan kata laluan mereka dengan cara yang selamat. Ia biasanya digunakan dalam borang pendaftaran, log masuk, dan perubahan kata laluan. Ciri utama input kata laluan ialah teks yang dimasukkan oleh pengguna akan disembunyikan dan digantikan dengan titik atau asterisk bagi mengelakkan ia dilihat oleh individu lain.
Ciri tambahan boleh digunakan bersama input kata laluan bagi memberikan pengalaman pengguna yang lebih baik seperti validasi untuk memastikan kata laluan yang kuat, butang tunjuk/sembunyi kata laluan untuk mengurangkan kesilapan, dan petunjuk kekuatan kata laluan untuk memberi maklum balas segera kepada pengguna. Semua ciri ini digabungkan untuk memastikan tahap keselamatan yang tinggi dalam laman aplikasi.
Input kata laluan tidak sesuai digunakan pada situasi yang memerlukan kod pengesahan pelbagai faktor, jawapan kepada soalan keselamatan, dan pengisian maklumat peribadi yang lain. Sebaliknya gunakan input teks biasa yang lebih memudahkan pengguna.
contoh
<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
<label class="govuk-label" for="password-input">
Password
</label>
<div class="govuk-input__wrapper govuk-password-input__wrapper">
<input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
<button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input" aria-label="Show password" hidden>
Show
</button>
</div>
</div>
Komponen banner fasa digunakan untuk memaparkan maklumat mengenai peringkat atau status semasa sesuatu proses, projek, atau kempen. Banner ini lazimnya diletakkan di kedudukan yang dapat dilihat dengan jelas, seperti di bahagian atas halaman, bertujuan menarik perhatian pengguna dan menyampaikan maklumat yang relevan dengan cepat. Sebagai contoh, dalam projek pembangunan, banner fasa boleh memaklumkan pengguna tentang fasa semasa seperti reka bentuk, pembangunan, atau ujian, memastikan semua pihak yang terlibat sentiasa mendapat maklumat yang terkini dan tepat. Berikut merupakan ciri-ciri penggunaan banner fasa yang baik:
Jelas dan Sederhana: Banner fasa harus menyampaikan maklumat dengan jelas dan ringkas, menggunakan teks yang mudah difahami dan tidak terlalu panjang. Ini memastikan maklumat penting diterima pengguna dengan cepat tanpa gangguan atau kekeliruan. Lokasi Strategik: Penempatan banner fasa di lokasi yang mudah dilihat, seperti di bahagian atas halaman atau di kawasan yang sering diperhatikan pengguna. Penempatan yang strategik ini membantu dalam memastikan mesej disampaikan dengan efektif kepada pengguna. Rekaan Visual Menarik: Rekaan visual banner fasa yang menarik dengan penggunaan warna kontras, font yang jelas, serta ikon atau grafik dapat menarik perhatian pengguna. Tujuannya bagi menarik perhatian pengguna untuk melihat maklumat yang hendak disampaikan. Informasi Terkini: Banner fasa perlu menyampaikan informasi yang terkini tentang peringkat atau status semasa. Maklumat ini perlu dikemaskini secara berkala untuk memastikan pengguna sentiasa mendapat informasi terkini mengenai perkembangan proses atau projek, sebagai langkah meningkatkan transparensi dan komunikasi yang efektif.
contoh
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
Alpha
</strong>
<span class="govuk-phase-banner__text">
This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
</span>
</p>
</div>
Komponen pilih atau select
sepatutnya hanya digunakan sebagai langkah terakhir dalam perkhidmatan yang berhadapan dengan orang ramai kerana kajian menunjukkan bahawa sesetengah pengguna mendapati penggunaan pilih sangat sukar. Komponen pilih membolehkan pengguna memilih satu pilihan daripada senarai panjang. Sebelum menggunakan komponen pilih, dapatkan pandangan daripada pengguna bagi memastikan kesesuaian penggunaan komponen ini pada aplikasi. Sebagai ganti, penggunaan komponen checkbox
atau radio button
boleh digunakan mengikut kesesuaian.
contoh
<div class="govuk-form-group">
<label class="govuk-label" for="sort">
Sort by
</label>
<select class="govuk-select" id="sort" name="sort">
<option value="published">Recently published</option>
<option value="updated" selected>Recently updated</option>
<option value="views">Most views</option>
<option value="comments">Most comments</option>
</select>
</div>
Anda boleh menambah teks petunjuk untuk membantu pengguna memahami pilihan dan memilih salah satu daripadanya.
<div class="govuk-form-group">
<label class="govuk-label" for="location">
Choose location
</label>
<div id="location-hint" class="govuk-hint">
This can be different to where you went before
</div>
<select class="govuk-select" id="location" name="location" aria-describedby="location-hint">
<option value="choose" selected>Choose location</option>
<option value="eastmidlands">East Midlands</option>
<option value="eastofengland">East of England</option>
<option value="london">London</option>
<option value="northeast">North East</option>
<option value="northwest">North West</option>
<option value="southeast">South East</option>
<option value="southwest">South West</option>
<option value="westmidlands">West Midlands</option>
<option value="yorkshire">Yorkshire and the Humber</option>
</select>
</div>
Gunakan komponen pautan langkau atau skip
merujuk kepada elemen atau fungsi yang membolehkan pengguna melompat atau melewati beberapa langkah atau bahagian dalam satu proses tanpa perlu mengikutinya secara berurutan. Ini dapat meningkatkan pengalaman pengguna dengan mempercepat navigasi atau mengurangkan keperluan untuk melalui langkah-langkah yang tidak diperlukan. Cara begini dapat meningkatkan kecekapan dengan mengurangkan jumlah langkah yang diperlukan untuk mencapai matlamat, memberikan fleksibiliti kepada pengguna untuk memilih jalur navigasi bersesuaian dengan keperluan mereka.
contoh
<p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
<a href="#" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
Komponen senarai ringkasan digunakan bagi merangkumkan maklumat serta memaparkan maklumat sebagai senarai fakta utama. Sebagai contoh memaparkan metadata seperti 'Kemas kini terakhir' dengan tarikh seperti '22 Jun 2018', atau merangkumkan jawapan pengguna pada akhir borang seperti corak periksa jawapan. Kad ringkasan adalah satu variasi dalam komponen ini. Kad ringkasan boleh digunakan untuk memaparkan beberapa senarai ringkasan atau menambah tindakan kad yang merujuk kepada keseluruhan senarai ringkasan.
Senarai ringkasan menggunakan elemen HTML senarai penerangan (
<dl>
), jadi hanya gunakannya untuk menyajikan maklumat yang mempunyai kunci dan sekurang-kurangnya satu nilai.Jangan gunakannya untuk data tabular atau senarai maklumat atau tugas yang ringkas, seperti senarai tugas. Untuk itu, gunakan
<table>
,<ul>
, atau<ol>
.
contoh
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Name
</dt>
<dd class="govuk-summary-list__value">
Sarah Philips
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> name</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Date of birth
</dt>
<dd class="govuk-summary-list__value">
5 January 1978
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> date of birth</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Address
</dt>
<dd class="govuk-summary-list__value">
72 Guild Street<br>London<br>SE23 6FH
</dd>
<dd class="govuk-summary-list__actions">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> address</span></a>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key">
Contact details
</dt>
<dd class="govuk-summary-list__value">
<p class="govuk-body">07700 900457</p>
<p class="govuk-body">sarah.phillips@example.com</p>
</dd>
<dd class="govuk-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">Add<span class="govuk-visually-hidden"> contact details</span></a>
</li>
<li class="govuk-summary-list__actions-list-item">
<a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> contact details</span></a>
</li>
</ul>
</dd>
</div>
</dl>
Paten atau pattern
merujuk kepada gabungan langkah-langkah, kaedah, dan prinsip yang telah terbukti berkesan dalam menyelesaikan masalah atau mencapai objektif tertentu. Paten reka bentuk merupakan panduan atau pandangan terperinci mengenai cara terbaik untuk merangka, membangun, dan menyampaikan pengalaman pengguna dalam suatu perkhidmatan dalam talian atau aplikasi. Paten lazimnya merangkumi pelbagai aspek, termasuk antara muka pengguna, navigasi, turutan tindakan, reka bentuk borang, responsif, aksesibiliti, pengesahan, dan banyak lagi.
Paten dapat membantu pasukan pembangunan mengambil keputusan yang lebih baik dan memastikan konsistensi serta kualiti dalam pengalaman pengguna. Contoh paten adalah seperti paparan mesej ralat, paparan borang kemasukan maklumat pengguna, paparan halaman pembayaran, dan pelbagai lagi. Dengan mengikuti paten yang telah terbukti berkesan, pasukan pembangun dapat mempercepat proses pembangunan, meningkatkan kepuasan pengguna, dan mengurangkan masalah yang mungkin timbul semasa menggunakan perkhidmatan.