10 Antarmuka Pengguna Orientasi CSS & JavaScript Gratis

Tujuan dari orientasi adalah untuk membuat pengguna baru mengenal sebuah antarmuka. Ini datang dalam berbagai gaya, dan tidak ada cara yang tepat untuk melakukannya. Tetapi jika Anda mempelajari bagaimana situs dan aplikasi melakukan orientasi, Anda dapat mengambil ide untuk pekerjaan Anda sendiri.

Dan dengan CSS dan JavaScript onboarding UI gratis ini, Anda akan memiliki banyak ide yang menawarkan inspirasi dan cuplikan kode untuk membantu Anda memulai.

1. Slide Korsel

Rotating carousel onboarding sangat populer di perangkat seluler di mana ruang layar terbatas. Tetapi efek ini dapat bekerja dengan baik di situs web tempat Anda perlu menyampaikan informasi dengan cepat.

Lihat demo slide carousel yang dibuat oleh Nick Wanninger untuk melihat apa yang saya maksud.

Ini adalah contoh orientasi gratis yang dibuat menggunakan Flickity dan beberapa kode CSS dasar. Ini berfungsi untuk seluler dan desktop, jadi ini adalah pilihan yang sangat baik jika Anda membutuhkan solusi yang responsif.

2. Bereaksi UI Harian

Sebagai desain praktik sederhana, Jack Oliver membuat pena React Daily UI ini dari awal. Dan ini adalah salah satu pengalaman orientasi paling keren yang pernah saya lihat.

Antarmuka menampilkan teks dummy karena tidak dimaksudkan untuk penggunaan praktis di dunia nyata, tetapi sangat bersih dan harus menyisakan cukup ruang untuk memuat apa saja ke dalam halaman.

Satu hal yang perlu diperhatikan adalah saya tidak bisa menjalankan ini di ponsel dengan gesekan, dan sepertinya hanya mengenali ketukan saat ini. Tetapi untuk solusi hanya klik, itu sangat bagus.

3. Layar Orientasi

Pena ini tidak hanya menampilkan antarmuka yang luar biasa untuk orientasi, tetapi juga memiliki animasi khusus untuk boot.

Pengembang Jeff Ham mengetahui jalannya di sekitar antarmuka dan menciptakan layar orientasi yang sempurna ini. Itu bergantung pada JavaScript untuk membuat animasi "layar berikutnya" dan acara sakelar untuk klik/ketukan pengguna.

Satu tambahan yang bagus untuk antarmuka ini adalah tombol biru berikutnya di bagian bawah. Ini memungkinkan pengguna memajukan layar demi layar dengan CTA besar dalam tampilan biasa. Saya berani bertaruh ini akan meningkatkan jumlah total orang yang berkonversi dan meningkatkan kualitas pengalaman secara keseluruhan.

4. Dewan

Cuplikan Boardal ini agak unik karena bukan sesuatu yang sering Anda lihat.

Ini menggunakan jendela modal dengan konten orientasi untuk membantu pengguna melewati situs lebih cepat. Ini adalah desain khusus yang dibuat semata-mata untuk pengujian, dan ini adalah salah satu cara paling keren untuk meningkatkan proses orientasi.

Perhatikan ini berfungsi paling baik di desktop karena bergantung pada efek modal (tidak ideal untuk layar yang lebih kecil).

Jadi, jika Anda menyukai desainnya dan menginginkan cara mudah untuk meningkatkan orientasi situs Anda, cobalah Boardal.

5. Tur Terpandu

Biasanya orientasi dianggap sebagai proses langkah demi langkah yang memperkenalkan halaman dan fitur baru kepada pengguna. Tetapi menurut saya pribadi, tur berpemandu jauh lebih bermanfaat.

Jika Anda ingin cuplikan sederhana untuk memulai, maka tur berpemandu ini sangat cocok. Itu bergantung pada komponen Bootstrap dan menggunakan tooltips kecil dengan tombol "berikutnya" untuk memajukan tur.

Pengguna dapat menutup tur kapan saja jika mereka merasa terganggu atau tidak peduli lagi. Ini menjadikannya tur opsional, sehingga lebih sedikit orang yang akan terganggu oleh prosesnya.

Secara keseluruhan, ini adalah metode orientasi yang saya sukai, meskipun perlu sedikit usaha untuk menyiapkannya. Tapi demo ini setidaknya memberi Anda template untuk memulai.

6. Tur Materi

Salah satu metode tur alternatif adalah tur maju otomatis yang menonjolkan fitur-fitur tertentu.

Contoh terbaik yang saya temukan adalah pena ini dibuat oleh Gregor Adams. Ini didasarkan pada pedoman materi dan menggunakan lingkaran yang disorot untuk menampilkan bagian halaman. Teknik ini sangat cocok jika Anda memiliki antarmuka yang sangat kompleks dengan banyak fitur.

Dengan menggelapkan seluruh halaman, Anda membawa fokus ke satu area pada satu waktu. Ini menarik perhatian pengguna dengan segera, itulah yang perlu Anda lakukan untuk orientasi yang baik.

Saya tahu ini tidak akan cocok di semua situs web, tetapi jika Anda menyukai antarmukanya, saya sangat menyarankan untuk mencobanya.

7. Orientasi Aplikasi Android

Aplikasi seluler biasanya membutuhkan proses orientasi lebih dari situs web. Sudah umum bagi desainer UI seluler untuk menjejalkan fitur ke layar yang lebih kecil, yang dapat membuat pengguna kewalahan tanpa pengantar yang dipandu.

Panduan orientasi oleh Mat Swainson ini adalah contoh kecil namun fasih tentang apa yang dapat dilakukan untuk aplikasi ponsel cerdas.

Ini didasarkan pada model Android, tetapi tentu saja bukan satu-satunya gaya yang dapat Anda gunakan. Saya suka bagaimana ini mendukung penggesekan asli, yang berfungsi bahkan di browser web seluler.

Plus, indikator kemajuan kecil di bagian atas adalah sentuhan yang bagus. Jelas halaman orientasi yang sederhana tetapi layak disimpan jika Anda mencari inspirasi.

8. Pengantar Ionik

Ada banyak hal yang dapat Anda lakukan dengan Ionic dan pena ini adalah salah satu contoh yang bagus.

Pengembang Clifford Fajardo membuat intro ionik yang berjalan hanya pada kerangka JavaScript. Ini mendukung semua interaksi seluler seperti ketukan, gesekan, dan bahkan mendukung opsi ketuk dua kali jika Anda menginginkan fitur itu.

Ionic terutama digunakan untuk pengembangan seluler, dan juga berfungsi dengan sangat baik untuk situs web seluler. Saya tidak dapat mengatakan bahwa layar orientasi ini akan cocok untuk setiap situs web, tetapi ini adalah pilihan yang tepat jika lebih dari 50% audiens Anda berasal dari seluler.

9. Bentuk Vertikal

Dengan sedikit animasi UI jeli dan desain yang sangat sederhana, bentuk vertikal ini adalah suguhan yang unik.

Ini menggunakan properti CSS flex menjadi efek penuh bersama dengan beberapa animasi JavaScript dan CSS khusus. Memang, saya menemukan kontennya sedikit tipis, sehingga tidak menawarkan banyak cara orientasi yang mendetail.

Namun, Anda dapat menggunakan antarmuka ini dan benar-benar menjadikannya milik Anda sendiri tanpa banyak usaha, jadi ini meninggalkan banyak imajinasi.

10. Tooltip Tur Terpandu

Berikut ini satu lagi contoh tur terpandu, tetapi yang ini menggunakan kotak tooltip lengkap yang dipasang di halaman.

Jika Anda memeriksa cuplikannya, Anda akan melihat bahwa itu tidak dibangun ke dalam antarmuka tertentu. Melainkan itu hanya tooltip mengambang dengan saran dan langkah-langkah kemajuan untuk pengguna.

Menggabungkan UI ini dengan beberapa skrip pemosisian tooltip tetap akan memungkinkan Anda dengan mudah memindahkan benda ini di sekitar antarmuka Anda dengan tooltips yang mengarah ke semua fitur utama Anda. Template ini akan membutuhkan beberapa penyesuaian nyata untuk membuatnya berfungsi, tetapi untuk UI yang sederhana, itu indah.