REDESIGN APLIKASI RADIO DEL FM
Pada artikel ini, saya akan menampilkan redesign interface aplikasi Del FM. Artikel ini merupakan tahap 3 dari penugasan mata kuliah HCI. Terdapat 3 tahap penugasan, dimana tahap lainnya dapat diakses pada:
- Tahap 1: Explorasi YouTube Music & Spotify
- Tahap 2: Evaluasi Interface Aplikasi Del FM
Daftar Isi:
Bab 1. Redesign
1.1 Tampilan Awal
1.2 Tampilan Live Streaming
1.3 Tampilan Menu
1.4 Tampilan Program
1.5 Tampilan Podcast
1.6 Tampilan News & Event
1.7 Tampilan Topic of The Day
1.8 Tampilan Del Squad Hunt (DSH)
1.9 Tampilan About
1.10Tampilan Setting & Favorites
Bab 2. UI Style Guide
2.1 Overview
2.2 Grid
2.3 Typography
2.4 Colour
2.5 Media Treatment
2.6 Branding
2.7 Navigation
2.8 Iconography
2.9 Style Guide Radio Del FM
Referensi
Bab 1. Redesign
1.1 Tampilan Awal
Tampilan awal/splash screen dari aplikasi radio Del FM menggunakan linear gradient dari warna #EE6F57 sebagai latar belakang. Pada tampilan ini terdapat logo aplikasi radio Del FM beserta copyright yang terletak di bagian bawah.
1.2 Tampilan Live Streaming
Sebelum redesign halaman news adalah yang pertama kali tampil ketika membuka aplikasi Del FM Radio. Setelah redesign, tampilan live streaming yang pertama ditampilkan. Hal ini dikarenakan aplikasi ini merupakan aplikasi radio, sehingga sebaiknya fitur utama radio yang pertama ditampilkan saat membuka aplikasi Del FM Radio.
Tampilan live streaming sebelumnya menggunakan warna biru sebagai latar belakang pemutar radio. Pada hasil redesign ini menggunakan gorga batak sebagai backgroundnya. Hal ini bertujuan untuk memberikan ciri khas bahwa Radio Del FM berasal dari wilayah Toba, Sumatera Utara.
Terdapat animasi kaset bulat yang berisi gambar dari program yang sedang berlangsung. Dimana animasi ini akan berputar jika radio dalam keadaan menyala. Selain itu animasi frekuensi juga akan berubah warna menjadi putih dan bergerak jika radio dalam keadaan menyala.
Pada tampilan ini terdapat beberapa button yaitu button play untuk memulai radio, pause untuk menghentikan radio, dan record untuk merekam siaran radio yang sedang ditayangkan.
1.3 Tampilan Menu
Pada tampilan submenu sebelumnya terdapat 8 submenu utama yaitu News, Live Streaming, DSH, Program, Event, Topic of The Day, Podcast, dan About. 4 submenu untuk social media yaitu Twitter, Instagram, Facebook dan Youtube. Serta 1 submenu other yaitu settings.
Pada tampilan baru juga terdapat 8 submenu utama namun diurutkan sesuai yang paling berhubungan dengan aplikasi radio. Hal ini bertujuan untuk memudahkan pengguna mengakses menu yang ingin dicari.
Kemudian untuk social media ditampilkan dalam bentuk icon agar terkesan lebih simple and minimalist. Selain itu menu setting tidak perlu lagi dicantumkan karena hampir pada setiap halaman sudah terdapat option menu yang jika diklik akan menampilkan tampilan seperti gambar 4 berikut:
Hal ini dapat memudahkan pengguna mengubah pengaturan dari aplikasi saat menggunakannya.
1.4 Tampilan Program
Pada tampilan utama program yaitu pada gambar 5 (kiri), terdapat 6 pilihan program yang tampilannya disusun secara symetry. Jika salah satu program di klik, misalnya Morning Show maka akan menampilkan nama program beserta deksripsinya seperti yang terdapat pada gambar 5 (kanan). Selain itu terdapat tanda panah untuk kembali ke menu awal pilihan program.
1.5 Tampilan Podcast
Pada tampilan podcast, terdapat pilihan podcast dan waktunya. Jika salah satu di klik, misalnya Kamus Inggris: Education, maka akan menampilkan seperti gambar 6 (kanan).
Pada bagian atas terdapat judul dan waktu podcast ini direkam. Kemudian foto, pemutar podcast, dan paling bawah merupakan deskripsi singkat dari podcast ini.
Tampilan pemutar podcast masih menggunakan konsep yang sama dengan live streaming, yaitu gorga batak. Terdapat icon play/pause, reply, download dan jumlah pendengar.
1.6 Tampilan News & Event
Pada tampilan news sebelum redesign, terdapat 3 pilihan news yaitu Latest News, Del FM Update dan Bonpaspedia. Sedangkan pada redesign news hanya terdapat 2 pilihan news yaitu Del FM Update dan Bonpaspedia. Hal ini dikarenakan berita yang ditampilkan pada Del FM Update dan Latest News sama.
Kedua tampilan ini juga sudah menerapkan unsur symetry dan menggunakan whitespace sehingga jarak antara berita terlihat sejajar dan tidak menyatu satu sama lain. Jika salah satu news atau event di klik, akan menampilkan seperti gambar 8 berikut:
Tampilannya tidak jauh berbeda dengan sebelum redesign, dimana terdapat gambar pada bagian atas, kemudian judul, tanggal publish dan isi berita/event.
Perbedaannya ada pada latar belakang tulisan yang menggunakan warna putih (#FFFFFF) dengan presentase 75% . Selain itu warna tulisan waktu artikel di publish diberikan warna yang berbeda agar tidak menyatu dengan isi artikel.
1.7 Tampilan Topic of The Day
Topic of The Day merupakan menu yang digunakan agar pengguna dapat saling berinteraksi. Seperti pada gambar 9 (kiri), hal pertama yang harus dilakukan adalah login.
Tedapat beberapa opsi untuk login yaitu sign in as guest atau login with email atau login with facebook. Pada tampilan sebelum redesign terdapat juga opsi login with, namun opsi itu tidak ditampilkan lagi pada redesign karena dapat membingungkan pengguna.
Selanjutnya, jika pengguna memilih login with email atau facebook, maka laman akan langsung dialihkan ke webpage email atau facebook sehingga pengguna hanya perlu memasukkan email kemudian dapat masuk ke fitur Topic of The Day. Sedangkan jika memilih login as guest, pengguna hanya perlu memasukkan nama lalu login.
Jika sudah login, maka akan menampilkan seperti pada gambar 9 (kanan). Dimana pengguna dapat saling berinteraksi pada laman ini. Jumlah pengguna yang sedang online juga dapat dilihat pada bagian bawah dari laman ini. Selain itu , di sudut kanan bawah terdapat icon profile, yang jika diklik akan menampilkan seperti pada gambar 10 berikut:
Pengguna dapat memilih statusnya yaitu online, busy dan offline dengan mengkliknya. Jika pengguna ingin keluar dari akunnya, pengguna dapat memilih log out. Selain itu, pengguna juga dapat menghidupkan atau menyalakan notifikasi melalui fitur sound.
1.8 Tampilan Del Squad Hunt (DSH)
Gambar 11 merupakan tampilan menu Del Squad Hunt. Tampilan ini tidak banyak berubah pada tahap redesign. Hanya warna latar belakang yang menggunakan linear gradient dari warna #EE6F57 serta warna putih (#FFFFFF) dengan presentase 76% . Selain itu warna tulisan *syarat dan ketentuan berlaku menggunakan warna yang berbeda agar terlihat mencolok.
1.9 Tampilan About
Pada tampilan about, terdapat About Del FM, Crew dan sosial media dari Del FM Radio. Bagian Crew menerapkan prinsip Gestalt yaitu continuity. Dimana profil kru tidak ditampilkan keseluruhan sehingga mendorong pengguna untuk “menggesernya” agar dapat melihat kru lainnya.
1.10 Tampilan Setting & Favorites
Pada tampilan Setting terdapat 2 kategori yaitu General dan Other. Selain itu menerapkan iconography dimana terdapat banyak varian icon.
Sedangkan pada tampilan favorites terdapat icon trash bin untuk melihat favorit yang telah dihapus dan add untuk menambah favorit.
Bab 2. UI Style Guide
2.1 Overview
Aplikasi Radio Del FM merupakan aplikasi streaming radio . Aplikasi ini juga menawarkan fitur podcast serta memberikan berita-berita terbaru. Aplikasi ini memiliki desain yang kurang efisien sehingga dilakukan perbaikan yang diharapkan dapat memudahkan & membuat pengguna nyaman dalam menggunakan aplikasi ini.
2.2 Grid
Pada desain ini menggunakan jenis grid multicoloumn yang terdiri dari 4 kolom. Brand & Copyright diletakkan di halaman awal aplikasi ini. Dapat dilihat pada gambar 14 berikut:
2.3 Typography
Typography merupakan teknik pemilihan huruf pada suatu design. Pada hasil redesign digunakan 1 jenis font yaitu Dosis dengan ketebalan semi bold.
2.4 Colour
Gambar 16 menunjukkan variasi warna yang digunakan pada aplikasi Radio Del FM. Biasanya sebuah aplikasi memiliki banyak varian warna yang bertujuan agar aplikasi terlihat lebih menyenangkan dan menarik bagi pengguna.
2.5 Media Treatment
Merupakan penyertaan media seperti gambar pendukung agar dapat memperjelas tujuan dari sebuah topik. Media treatment pada redesign ini, dapat dilihat seperti pada gambar 17 :
2.6 Branding
Setiap perusahaan memiliki brand tersendiri untuk aplikasi yang dibuat oleh perusahaan tersebut. Gambar 18 merupakan logo brand aplikasi Radio Del FM:
2.7 Navigation
Penggunaan navigation pada aplikasi ini diterapkan di bagian header setiap tampilan. Hal ini dapat dilihat seperti pada gambar 19. Selain itu aplikasi ini juga menggunakan fields yang dapat diisi oleh pengguna. Dapat dilihat pada gambar 20:
Tampilan fields dapat ditemukan pada menu DSH (Del Squad Hunter) dan Topic Of The Day.
2.8 Iconography
Icon yang digunakan pada aplikasi Radio Del FM dapat dilihat pada gambar 21. Penggunaan icon tersebut bertujuan agar bisa menggambarkan fungsi dari suatu fitur sehingga pengguna mudah memahami fungsi dari suatu fitur hanya dengan melihat iconnya saja.
2.9 Style Guide Radio Del FM
