Matamu.Net – User Interface (UI) atau tampilan antar muka pada sebuah situs menentukan seberapa nyaman seseorang akan menghabiskan waktu mereka selama berada di dalam situs tersebut. Semakin ringan dan simple desain yang ditawarkan, maka semakin lama pula seseorang akan berada disana.
Begitu pun sebaliknya, semakin ribet dan berat tampilan sebuah situs, maka semakin cepat seorang pengunjung meninggalkan sebuah situs. UI yang baik akan menghasilkan pengalaman pengguna yang nyaman dan betah di dalam sebuah situs, hal ini selanjutnya disebut User Experience atau UE.
Baik UI dan UE, keduanya merupakan sebuah sistem yang berada bagian depan dari sebuah website atau program karena perintah-perintah yang diberikan hanya sebatas HTML atau PHP dasar untuk tampilan. Perintah-perintah ini kemudian digolongkan sebagai Font-End Website.
Daftar Isi
A. Maanfaat Tampilan
Tampial User Interface adalah media yang digunakan oleh developer untuk menghubungakan manusia (user) dengan sebuah mesin atau sebuah Website.
Seorang user tentu saja tidak perlu membaca semua isi dan kontent dari situs, karena hanya butuh konten-kontetn tertentu yang mereka butuhkan, tugas dari websaite developer adalah menyediakan informasi yang dibutuhkan oleh user atau paling tidakmemudahkan user menemukan informasi yang mereka sedang butuhkan.
Sistem yang bertanggung jawab atas kemudahan user mencari informasi dalam sebuah situs atau Website selanjutnya disebut Sistem Navigasi. Ada banyak jenis sistem navigasi UI namun pada umumnya dan berdasarkan hasil risert interkasi manusia dan Website, desain yang paling umum hanya terbagi atas 5 komponen.
Adapaun 5 komponen tersebut adalah :
1. Navigasi Bar
Navigasi Bar atau Nav Bar ada sistem navigasi yang kebanyakan diletakkan diatas tampilan, karena kecedenrungan seseorang untuk memetakan kelompok-kelompok atau label-label dalam situs pada bagian atas.
Hal ini disebabkan oleh aspek psikologis dan kebiasan manusia untuk meletakkan label pada bagian atas rak. Kebiasaan juga berpengaruh pada perkembangan tampilan dan UI secara umum.
Sebut saja pada situs ini, Navigasi Bar ditelatakan pada bagian atas, dan untuk memudahkan pengguna, Navigasi ini dibuat Stikky atau mengkuti gerakan dari pembaca.
2. Body Text
Body Text adalah Divisi yang berfungsi untuk menampilakn isi dari artikel yang akan disajikan kepada User. Perkembangan desain website menunjukkan letak Body Text yang paling nyaman adalah di pojok kiri untuk PC Device dan untuk Tampilan Mobile berada pada bagian tengah.
Kebanyakan Websites mengembangkan ukuran Body Text pada ukuran lebar sekitar 800 px, 1000 px dan 1200 px, dari ketiga ukuran tersebut 1000 Px yang paling banyak ditemukan. Namun pada perkembangannya, Desainer Website harus mempertimbangkan lebar layar PC yang semakin hari semakin kecil dan detail seperti ukuran FULL HD.
3. Side Bar
Side bar atau bilah menu pada sisi Body Text adalah menu navigasi yang banyak digunakna untuk berbagai keperluan, namuan pada umunya keperluan tersebut berkaitan dengan isi artikel atau kemungkin artikel yang paling banyak dikunjungi di website tersebut.
Hal ini tentu saja agar pembaca bisa dengan mudah melihat infomrasi tersebut mengingat posisi kebiasaan membaca seseorang mulai dari kiri ke kanan, sehingga tempat yang paling bagus menyimpan informasi menarik diletakkan di sisi kanan.
Pada awalnya banyak website yang menggunakna desain 2 side bar, baik disisi kiri sebelum Boditext dan di sisi kanan, namun karena nilai UE yang rendah, Side pada sisi kiri sudah mulai ditinggalkan.
Posisi side bar di sisi kanan yang sangat menarik membuat banyak penyedia produk untuk memasang iklan mereka di side bar karena posisinya yang sangat mudah diamati oleh user selama berada di dalam situs.
4. Search Box
Search Box adalah alat bantu untuk user menemukan informasi yang mungkin saja tidak bisa ditunjukkan oleh Landing Page dari sebuah situs karena keterbatasa ruang. Misalnya user mencari informasi tentang sesuatu yang sudah lama terbit di situs tersebut sehingga postingan atau artikel tersebut tenggelam.
Peletakan search box sebenarnya bisa dimana saja, namun sebagaimana pengalaman yang dibentuk oleh pengguna internet, posisi di pojok kanan atas sepertinya tempat yang mudah untuk ditemukan, kecuali Facebook dan Instagram yang meletakkan elemen tersebut tepat diatas Body Text di area Nav Bar, yah tentu saja pertimbangan karena mereka tidak memiliki label.
5. Footer
Footer adalah bilah atau divisi yang diletakkan di bagian paling bawah dari sebuah situs. Biasanya akan ditemukan pada bagian kahir artikel ketika user sudah menggeser scorl mereka sampai bawah dengan kata lain artikel yang ditampilkan website sudah dibaca habis oleh user.
Jika artikel dibaca habis, bisa ditarik kesimpulan User memang benar-benar membutuhkan artikel tersebut sehingga ada kemungkinan user akan mencari tahu lebih detail mengenai kebanaran atau kevalidan artikel yang disajikan.
Hal ini membuat Footer lebih banyak di isi informasi yang tidak dibutuhkan oleh pembaca awam, tapi dibutuhkan oleh pembaca yang serius. Adapun unformasi tersebut bisa jadi berupa:
- Tentang Situs
- Disclaimer (Sangkalan)
- Privacy Polish (Kebijakan Situs)
- Kontak yang bisa dihubungi
B. Templet Blogger
Blogger merupakan salah satu situs yang menyediakan Content Manajemen System (CMS) non Open Source yang artinya Blogger tidak akan memberikan sistem mereka ke orang secara bebas, namun Blogger memberikan akses gratis baik dari segi pengelolalahan Inteface melalui HTML Editor dan juga Hosting yang ditanggung Google.
Blogger sendiri sudha menyediakan templet bawaan mereka baik yang statis maupun yang telah menggunakan sistem kerja AMP (Accelerated Mobile Pages), namun bagi kalian yang bisa mengedit HTML atau malah memiliki templete dari pihak ketiga, maka Blogger memberikan izin untuk mengganti templetmu.
Buat kamu yang malas membuat templete tapi tidak mau menggunakan Templet dari Blogger, Hal yang harus kamu lakukan adalah mencari penyedia jasa templete Blogger yang sudah terpercaya seperti Sugeng, Arlina Desain, Sora Templete dan sejenisnya.
C. Cara Mengganti Tampilan Templet Blogger
1. Mencari Templete yang Compotible
Cara mengganti tempelet Blogger terbilang cukup mudah yakni kamu hanya perlu untuk mencari Templete Blogger yang ada di nternet yang tersedia gratis, namun untuk kenyamanan biasanya templet berbayar akan memberikan pelayanan yang lebih premium dan nyaman.
File Templete bloger yang kamu perlukan memiliki extensi XML, jadi jika file yang kamu dapatkan masih dalam bentuk RAR dan sejeinisnya silahkan unzip terlebih dahulu.
2. Mengganti Templete Blogger
Adpaun langkah yang dibutuhkan untuk mengganti templet bloger sebagai berikut :
- Masuk ke Dashboard blogger, lalu masuk ke menu Tema dengan logo Cat Roll, kemudian pilih Cadangkan / Pulihkan.
- Tunggu samapi dialog Box muncul lalu pilih menu Choose File sampai akhirnya masuk ke window box kamu.
- Cari File Templete berxtensi XML yang telah kamu donwload lalu klik dua kali.
- Setelah, itu pilih Upload dan tunggu beberapa saat sampai tampilan Blog kamu berubah.
3. Mengedit dan Meperbaiki Melalui Menu HTML Editor.
Templete yang diberikan oleh penyedia jasa templet tentu saja masih harus dilakukan perbaikan, mungkin saja dari segi warna, atau tampilan yang lain seperti Gadget yang muncul, informasi Navigasi bar, Menu Infomasi di Footer.
Hal yang kamu harus lakukan adalah mengganti informasi tersebut menggunakan Editor HTML atau melihat petunjuk yang biasanya disertakan oleh para penyedia jasa pembuatan templet Blogger. Sebagai contoh HTML yang muncul dapat ditunjukkan pada gamabr berikut ini :
Hanya sjaa setiap pembuat Templete tentu saja memiliki cara mereka masing-asing dalam mebaut templete jadi ada kemungkinan HTML yang muncul sedikit berbda.
Assalamualaikum
Saya Sarmita dari kelas Reguler B mau bertanya pak bagaimana tata cara mendownload templete berxtensi XML pak ??
Terimah kasih ��
mangapa Semakin ringan dan simple desain yang ditawarkan, maka semakin lama pula seseorang akan berada disana! alasannya?
Apakah kita juga harus memperhatikan kesesuaian template yang digunkan dan materi yang cantumkan?
Makasih min atas infonyaa….
😊
Bagaimana caranya agar body text navigasi bar lainnya sama dengan body text beranda?
Sangat bermanfaat. Tapi Saya masih bingung dalam mengubah tampilan menu nya
Apakah kita harus memperbaharui blog kita setiap minggunya?
Mengapa desainer website harus mempertimbangkan lebar layar PC pada body text di tampilan blognya?
Assalamu'alaikum,
Saya ingin bertanya, apakah kita bisa membuat tamplete kita sendiri? Dan bagaimana kah caranya?
assalamualaikum, apakah yang ditulis pada saat ingin memperbaiki html pada kolom html?
Karena pengembang Web Site mengembangakan situs yang akan diakses oleh banyak orang yang pada umumnya awam pengetahui UI dan UE, oleh karena desainer website lebih mendahulukan kemudahan user dengan perangkat PC Umum sebagai acuan
Selamat siang min…
Saya mau tanya, model templete pada suatu situs juga mempengaruhi kecepatan dalam membuka situs itu ya min??
Komentar ini telah dihapus oleh pengarang.
apakah hanya ini saja yang menjadi penyebab lama atau tidaknya pengunjung berada di sebuah situs?
"semakin ribet dan berat tampilan sebuah situs, maka semakin cepat seorang pengunjung meninggalkan sebuah situs?"
Assalamualaikum wr.wb, apa langkah selanjutnya yang dapat dilakukan setelah Edit HTML?
assalamialaikum
bagaimana cara menyesuaikan template?
Bisakah blog baru menghasilkan uang secara instan dan cepat?
Makasih
apakah templet bloger harus di sesuikan dengan isi yg kita cantumkan?
Apakah search box bsa tdk dicantumkan pada sebuah blog baru?
Apakah template dapat di edit dan di perbaiki tanpa melalui Html Editor?
Komentar ini telah dihapus oleh pengarang.
Selain tampilan dan konten, apakah ada cara lain menarik user untuk mengunjungi blog kita?
Apakah tema tampilan blogger harus disesuaikan dengan materi yang dimuat?
Apakah desain template seperti navigasi bar hanya bisa diatur melalui HTML editor?
Assalamualaikum ..
Sy masih kurang mengerti dengan sistem kerja AMP (Accelerated Mobile Pages) itu seperti bagaimana?
Apakah untuk mengubah desain template seperti navigasi bar harus melalui HTML editor?
Bismillah,
saya mau tanya, jika file yang kita dapatkan masih dalam bentuk RAR dan sejenisnya, kenapa harus di unzip terlebih dahulu ?
mengapa pada setiap template, memiliki susunan HTML yg berbeda-beda?
bagaimana caranya agar body text pada navigasi bar yang kita buat sama dengan halaman beranda?
Apakah template blogger di seauaikan dengan isi?
Bismillah,
saya mau tanya, jika file yang kita dapatkan masih dalam bentuk RAR dan sejenisnya, kenapa harus di unzip terlebih dahulu ?
Assalamualaikum, bagaimana kita bisa yakin bahwa Template yg kita pilih kemudin kita gunakan akan disukai ataupun disenangi oleh orang yang masuk ke situs kita? Selain itu, apakah hanya dengan desain yang simpel dan ringan maka orang-orang akan semakin lama berada di situs kita?
Terima kasih.
Saya ingin bertanya , mengapa saat saya mengganti template tidak dapat terpublikasikan , dan apakah ada efek yang dihasilkan dari sering mengganti template blog ?
Tampilan dna Kontent tidak menarik pengunjung datang, tapi mempertahankan pengunjung yang sudah masuk ke dalam situs kita. Untuk meningkatkan user dilakukan banyak cara sesuai dengan jenis situs kita
Ada banyak aspek, namun pada umumnya User akan keluar dari situs ketika menunngu waktu Loading situs lebih dari 5 detik, jadi tugas kita sebagai Webmaster membuat loading sitsu cepat dan tampilan lebih menarik
Bisa, cara bukan File XML anda, lalu Unduh, silahkan edit di luar HTML Editor menggunan Notepad dan sejenisnya
Komentar ini telah dihapus oleh administrator blog.
apakah kelompok-kelompok pada navigasi bar dapat diubah atau dtambah?
Mnurut saya iya, selain mmbuat tampilan terbaharui, itu salah satu cara/trik agar blog terlihat menarik dan mmbuat user tertarik membaca blog kita. Jadi kesannya selalu ada yang baru dan tidak membosankan. Terimakasih 😊
Assalamualaikum , Berapakah panjang ideal untuk setiap postingan blog ?
Tidak ada batasan minimum dan maximum dari sebuah Artikel di Blog, namun hal yang harus diperhatikan adalah kejelasan isi artikel. Artikel yang baik sebaiknya membeirkan informasi penuh dan bisa dipertanggung jawabkan.
Informasi yang sangat bermanfaat. Tetapi saya belum terlalu mengerti bagaimana mengubah tampilan menu pada bagian navigasi bar🙏 mungkin bisa diperjelas lagi cara untuk mengubah navigasi barnya
Bismillah,
Apakah saya harus mempelajari seluk beluk dari HTML, CSS, dan JavaScript agar saya dapat membuat temple sendiri tanpa menggunakan jasa temple?
Assalamualaikum, saya mau bertanya apakah dengan mengubah desain template dapat menarik user?
Asalamualaikum
apakah bisa dilihat, jika blog kita sering di kunjungi orang??
Assalamualaikum, saya mau bertanya apakah dengan mengubah desain template dapat menarik user?
Sangat bermanfaat, namun bagaimana cara membuat navigasi bar dan membuat template blog yang menarik pengunjung?
Menurut saya, ketika kita mempunyai file dalam bentuk RAR dan sejenisnya, bila diperlukan kita harus mengunzip(mengesktrak file arsip) agar kembali ke ukuran semula, seperti fungsi unzip itu sndiri. Skian trima kasih☺
Bismillah,
Apakah dalam artikel berpengaruh dengan ukuran body text untuk menarik user?
Bismillah, apa kelebihan lain templete yang berbayar dibandingkan templete yg gratis?
Mengapa perintah" yang di berikan pada UI & UE hanya sebatas HTML atau PHP dasar untuk tampilan
Assalamualaiku, maaf apabila kita ingin memilih template apakah harus sesuai dengan isi blogernya? dan apakah jika kita menggunakan bloger yang menarik bisa membuat perhatian lebih pada setiap orang yang membacanya?
Assalamu alaikum.
Bagaimana memperbanyak kunjungan ke blog kita? apakah hanya dengan memperbagus template saja?
terimakasih atas penjelasannya pak, saya sudah mencoba mendownload jenis templete yang telah bapak sarankan, tapi setelah saya ingin mengupload filenya, katanya "tidak dapat menyimpan tema Anda karena tidak diformat dengan baik. Pastikan semua elemen XML ditutup dengan benar". mungkin ini berhubungan dengan penjelasan bapak diatas tentang jika file yang saya dapatkan masih dalam bentuk RAR dan sejeinisnya silahkan unzip terlebih dahulu….
nah, bagaimana cara meng-unzip file tersebut pak???
sekian terimakasih…..
Terima kasih atas infonya. Semoga atas informasi ini saya bisa membuat tampilan user interface dengan mudah.
Assalamualaikum, saya telah mencoba cara mengubah templete blog sesuai petunjuk pada artikel ini yaitu bagian C poin ke-2 Cara mengganti templete blog.. Saya sudah lakukan cara itu, dan bagian 4.tunggu beberapa saat sampai tampilan blog berubah.. Tetapi tampilan blog saya tidak ada perubahan. Mengapa seperti itu?
assalamualaikum…
mengapa file yang masih dalam bentuk RAR perlu di unzip terlebih dahulu?
Bismillah, terimakasih atas informasinya, sangat bermanfaat. Saya ingin meminta saran sekaligus bertanya, bagaimanakah sebaiknya ttampilan pada blog termasuk style hurufnya? perlukah bermacam-macam untuk menambah daya tarik pembaca atau cukup beberapa saja?
Perkenalkan saya qasthalani pada model template sama sekali tidak mempengaruhi kecepatan dalam
Membuka situs karena yang mempengaruhi kecepatan dalam membuka situs adalah Template atau Theme berat
Salah satu penyebab laman lambat merespon tak lain karena terlalu banyak script pada sumber html template atau theme satu laman. Bukan hanya itu, penggunaan wudget iklan serta aksesoris lain yang terlampau banyak juga membuat loading suatu laman lambat.
Terima kasih
Semoga jawaban ini dapat diterima
Assalamualaikum, saya ingin bertanya namun sebelum itu saya ingin menceritakan permasalahan yang saya dapat saat mengelola blog. Jadi saya pernah membuat sebuah postingan di blog, saya sudah mengatur tampilannya termasuk background colour(tidak pakai) pada tulisan artikel yang saya buat. Namun saat dipublikasikan tampilannya berbeda dan tidak sesuai dengan yang sudah saya atur(berantakan). Tulisan tersebut jadi punya background colour padahal saya tidak menggunakan itu. Nah, Pertanyaan saya mengapa hal tersebut bisa terjadi?dan bagaimana solusinya untuk pemula?
terimakasih…
Bismillah,
Apa yang menyebabkan rendahnya nilai UE pada blog yang menggunakan desain 2 side bar?
Assalamualaikum, apakah ada efek/dampak tertentu dari mengganti templete dengan menggunakan html maupun tdk? Sekian dan terima kasih
bismillah
apakah ada kekurangan atau masalah ketika kita mengganti templet blogger karna di atas cuman membahas manfaatnya ?terima kasih pak🙏
Apa perbendaan antara UI (user Interface) dengan UE (User Experience) jelaskan!
Dalam mempertimbangkan ukuran layar yang semakin kecil dan detai seperti ukuran full HD , sebaiknya body text ukuran berapakah yang digunakan oleh blogger ?
Semoga dapat diperbanyak konten edukasi seperti ini
Bismillah, Selain kenyamanan,apa keunggulan template berbayar dibandingkan template gratis?
bismillah, apakah dalam mengganti template berbayar maupun gratis sering ditemukan kendala? kalo ada , kendala apa saja yang sering ditemui ? dan bagaimana solusinya? . terima kasih sebelumnya pak
Adakah muncul pengaruh buruk bagi blog, seperti error atau masalah lainnya jika terlalu sering menggonta-ganti template blog?
Komentar ini telah dihapus oleh pengarang.
Apakah ada batasan waktu penerapan template pada sebuah blog?
Assalamu'alaikum min, saya mau nanya bagaimana sebenarnya pengaturan blog jika terdapat beberapa akun email dalam suatu komputer. Sebelumnya saya juga sudah komentar atas nama Ufairah Barizah tapi ternyata itu bukan blog yang saya kelola, melainkan salah satu blog yang sempat saya jadikan percobaan. Belum pernah saya komentar dan benar" muncul sebagai akun yang saya kelola dengan alamat
islamentirity.blogspot.com
Yang muncul justru akun gmail atau salah satu blog tadi🙏. Mohon penjelasannya.Terimakasih sebelumnya🙏