Mobile User Interface
User Interface adalah tampilan grafis interaktif pada sebuah aplikasi atau website yang membantu pengguna untuk berinteraksi fitur-fitur, konten, dan juga fungsi-fungsi didalamnya.
Mobile User Interface seperti pada namanya adalah User Interface yang terdapat pada aplikasi-aplikasi mobile, biasanya pada smartphone atau tablet.
Perbedaan User Interface pada Aplikasi Mobile dan Komputer
Persyaratan dalam desain Mobile UI sangatlah berbeda dengan persyaratan desain UI untuk komputer desktop. Karena ukuran layarnya yang lebih kecil dan layarnya yang touch screen membuat perlunya pertimbangan khusus untuk memastikan kegunaan, keterbacaan, dan konsistensi UI. Dalam mobile interface, simbol dalam mobile interface harus berukuran lebih kecil dan tidak selalu ada cukup ruang untuk teks sehingga terkadang dapat menimbulkan kebingungan. Karena minimnya ruang untuk teks, pengguna harus bisa mengerti arti dari masing-masing icon yang ada pada mobile interface.
Pentingnya User Interface dalam Sebuah Aplikasi
User Interface merupakan komponen yang sangat penting dalam pembuatan aplikasi mobile. Umpamakan saja UI sebagai rumah dari sebuah aplikasi. Apabila UI pada suatu aplikasi dirancang dengan sangat indah dan nyaman digunakan, maka pengguna akan nyaman pada aplikasi tersebut dan tidak cepat-cepat meninggalkannya. Sebaliknya, bila desain UI pada suatu aplikasi kurang baik, maka pengguna akan meninggalkan aplikasi tersebut.
Desain Mobile User Interface
Dalam mendesain UI pada sebuah aplikasi, tentunya kita perlu memperhatikan beberapa hal yang membuat sebuah UI baik.
Berikut ini adalah beberapa karakteristik desain Mobile UI yang baik :
1. Kontras Warna Baik
Untuk mendesain UI yang baik sekaligus indah, tentu diperlukan adanya pemilihan warna yang baik. Agar tampilan tidak mengganggu pandangan pengguna dan terlihat indah, Perlu diperhatikan kontras warna yang pas dengan memperhatikan kombinasi warnyanya yang baik.
Misalnya apabila background aplikasi berwarna cerah, warna pada tulisan dan icon harus dibuat kontras dengan warna background yang cerah tersebut.
2. Informasi Terpapar Jelas, Ringkas, dan Terstruktur
Secara general, desain UI yang baik adalah saat tampilan terlihat minimalis dengan informasi yang tersampaikan dengan jelas. Penyusunan informasi juga harus disusun dengan terstruktur sehingga tidak menimbulkan kebingungan pengguna.
3. Layar Responsif dengan Ukuran UI yang Efisien
gar penggunaan aplikasi nyaman dan mudah, perlu diperhatikan bahwa UI aplikasi harus responsif. Selain itu area sentuh pada suatu selection harus memiliki ukuran yang pas sehingga lebih mudah untuk disentuh tanpa mengganggu area sentuh pilihan lain (menghindari fat fingering). Ukuran UI juga tidak boleh mendominasi ukuran layar, karena tujuan pembuatan UI aplikasi adalah untuk memaksimalkan kegunaan aplikasinya sehingga tidak perlu mengambil space yang tidak diperlukan.
4. Jumlah Control Harus Pas
Pada satu halaman pada aplikasi, jumlah control (button, text field, toggle button, dll) harus secukupnya saja. Apabila terlalu banyak, maka penggunaan aplikasi akan membingungkan karena tampilannya yang kurang ringkas dan berantakan. Karena ukuran layar smartphone relatif kecil, UI harus menyesuaikan ukurannya agar efisien sehingga terlihat lebih minimalis dan tidak membingungkan.
5. Menarik
Pastinya setiap orang saat melihat sesuatu awalnya akan melihat dari tampilan luarnya. Dengan desain UI indah dan menarik, maka pengguna otomatis akan memiliki kesan awal yang baik juga pada aplikasi tersebut.
6. Konsisten
Dalam membuat UI yang baik dan tidak membingungkan pengguna, perlu adanya konsistensi, agar pada saat ada pembaruan tampilan UI, pengguna masih bisa mengerti tentang letak-letak fitur dan cara penggunaan aplikasi itu sendiri.
Sangat sulit dan menantang bagi designer UI untuk membuat UI yang indah tetapi sekaligus memberikan experience penggunaan aplikasi yang baik. Bisa dibilang pendesainan UI yang baik adalah saat UI tersebut memiliki UX (User Experience) yang baik juga.
Permasalahan Dalam Desain User Interface
Penggunaan jargon atau singkatan-singkatan komputer yang berlebihan.
Desain yang tidak jelas.
Ketidakmampuan membedakan tindakan-tindakan alternatif yang harus dipilih pemakai.
Pendekatan problem-solving yang tidak konsisten.
Desain yang tidak konsisten.
Syarat Desain Interface
Layar harus diformat agar berbagai info, perintah, pesan muncul di area layar yang konsisten.
Pesan, perintah, informasi jangan terlalu panjang.
Jangan terlalu sering memakai atribut display yang mengganggu seperti blinking, highlight,dsb.
Nilai default dibuat jelas.
Antisipasi error yang mungkin dibuat user.
Jika ada error, user mestinya tidak boleh melanjutkan tanpa memperbaiki error tsb.
Jika user melakukan sesuatu yang membahayakan sistem, keyboard harus terkunci dan pesan untuk meminta bantuan teknisi harus dimunculkan.
Membuat User Input Dalam Aplikasi Mobile
1. Buat Project Baru
2. Tambahkan Activity Baru
3. Atur tampilan pada activity_main.xml
|
<![CDATA[
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="singpaulee.com.tutorialuserinput.MainActivity">
<!--Nama-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="16sp"
android:text="Nama"
android:layout_weight="1.5"/>
<EditText
android:id="@+id/edt_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Masukkan Nama"/>
</LinearLayout>
<!--Jenis Kelamin-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="16sp"
android:text="Jenis Kelamin"
android:layout_weight="1.5"/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Laki-Laki"/>
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Perempuan"/>
</RadioGroup>
</LinearLayout>
<!--Garis-->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
<!--Pesan Kopi-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pesan Kopi"
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"/>
<!--Tombol Jumlah Kopi-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:id="@+id/btn_kurang"
android:layout_width="40dp"
android:layout_height="40dp"
android:text=" - "
android:layout_marginRight="10dp"/>
<TextView
android:id="@+id/tv_jumlah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:text="0"
android:gravity="center"
android:textSize="20sp"/>
<Button
android:id="@+id/btn_tambah"
android:layout_width="40dp"
android:layout_height="40dp"
android:text=" + "
android:layout_marginLeft="10dp"/>
</LinearLayout>
<!--Harga Satuan-->
<LinearLayout
android:layout_marginTop="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:textSize="16sp"
android:text="Harga Satuan"/>
<TextView
android:id="@+id/tv_harga_satuan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="16sp"
android:text="15000"/>
</LinearLayout>
<!--harga Total-->
<LinearLayout
android:layout_marginTop="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:textSize="16sp"
android:text="Harga Total"/>
<TextView
android:id="@+id/tv_harga_total"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="16sp"
android:text="0"/>
</LinearLayout>
<!--Tombol Pesan-->
<Button
android:id="@+id/btn_pesan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pesan"
android:layout_marginTop="20dp"/>
</LinearLayout>
]]>
|
4. Atur MainActivity.java
4.1 Buat dan deklarasikan Objek Baru sesuai dengan view yang dibuat
4.2 Definisikan Objek (Sambungkan dengan id yang ada pada activity_main.xml)
4.3 Tambahkan beberapa variabel untuk menampung data dan atur beberapa view untuk awal ketika buka aplikasi
4.4 Buat handler untuk button (aksi reaksi ketika tombol diklik)
4.5 Buat beberapa fungsi
4.6 Panggil method-method tersebut pada tiab Handler Tombol.
4.7 Hasil Akhir Main.Activity.java
|
<![CDATA[
public class MainActivity extends AppCompatActivity {
//TODO 1
EditText mEdtNama;
RadioGroup mRadioGrup;
Button mBtnKurang;
Button mBtnTambah;
TextView mTvJumlah;
TextView mTvHargaSatuan;
TextView mTvHargaTotal;
Button mBtnPesan;
//TODO 3
int jumlahPesan;
int hargaTotal;
int hargaSatuan;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//TODO 2
mEdtNama = findViewById(R.id.edt_nama);
mRadioGrup = findViewById(R.id.radiogrup);
mBtnKurang = findViewById(R.id.btn_kurang);
mBtnTambah = findViewById(R.id.btn_tambah);
mBtnPesan = findViewById(R.id.btn_pesan);
mTvJumlah = findViewById(R.id.tv_jumlah);
mTvHargaSatuan = findViewById(R.id.tv_harga_satuan);
mTvHargaTotal = findViewById(R.id.tv_harga_total);
mBtnPesan = findViewById(R.id.btn_pesan);
//TODO 4
jumlahPesan = 0;
hargaTotal = 0;
hargaSatuan = 7000;
//TODO 5
mTvHargaSatuan.setText(""+hargaSatuan);
mTvHargaTotal.setText(""+hargaTotal);
mTvJumlah.setText(""+jumlahPesan);
mBtnPesan.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//do something
pesanSekarang();
}
});
mBtnKurang.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//do something
kurangJumlah();
}
});
mBtnTambah.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//do something
tambahJumlah();
}
});
}
//Method ini berfungsi menambah jumlah pesanan
private void tambahJumlah(){
jumlahPesan = jumlahPesan + 1; //tambah jumlah
hargaTotal = jumlahPesan * hargaSatuan;
mTvJumlah.setText(""+jumlahPesan); //tampilkan pada textview
mTvHargaTotal.setText(""+hargaTotal);
}
//Method ini berfungsi menambah jumlah pesanan
private void kurangJumlah(){
jumlahPesan = jumlahPesan - 1; //kurang jumlah
if (jumlahPesan>=0){
jumlahPesan = 0;
hargaTotal = jumlahPesan * hargaSatuan;
mTvJumlah.setText(""+jumlahPesan); //tampilkan pada textview
mTvHargaTotal.setText(""+hargaTotal);
}else {
Toast.makeText(this, "Jumlah tidak boleh minus", Toast.LENGTH_SHORT).show();
}
}
private void pesanSekarang(){
String nama; //variabel untuk menampung 'nama' yang diinput pengguna
String kelamin; //variabel yang digunakan untuk menampung 'kelamin' yang diinput pengguna
//mendapatkan 'nama' hasil inputan pengguna
nama = mEdtNama.getText().toString();
//mendapatkan 'kelamin' hasil pilihan pengguna
int radioDipilih = mRadioGrup.getCheckedRadioButtonId();
RadioButton radioButton = (RadioButton) findViewById(radioDipilih);
kelamin = radioButton.getText().toString();
//pindah activity
Intent intent = new Intent(MainActivity.this,HasilActivity.class);
//kirim data ke activity tujuan
intent.putExtra("nama",nama);
intent.putExtra("kelamin",kelamin);
intent.putExtra("hargaSatuan",hargaSatuan);
intent.putExtra("hargaTotal",hargaTotal);
intent.putExtra("jumlah",jumlahPesan);
//jalan!
startActivity(intent);
}
}
]]>
|
5. Atur Layout activity_hasil.xml
|
<![CDATA[
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="singpaulee.com.tutorialuserinput.HasilActivity">
<ImageView
android:id="@+id/iv_gender"
android:layout_width="150dp"
android:layout_height="180dp"
android:layout_gravity="center_horizontal"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1.5"
android:text="Nama"/>
<TextView
android:id="@+id/tv_nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1"
android:text="Nama Pemesan"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1.5"
android:text="Jumlah Pesan"/>
<TextView
android:id="@+id/tv_jumlah_pesan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1"
android:text="Jumlah Pesanan"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1.5"
android:text="Harga Satuan"/>
<TextView
android:id="@+id/tv_harga_satuan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1"
android:text="Harga Satuan"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1.5"
android:text="Total Harga"/>
<TextView
android:id="@+id/tv_total_harga"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_weight="1"
android:text="Total Harga"/>
</LinearLayout>
</LinearLayout>
]]>
|
6. Tambahkan gambar ke dalam aplikasi
Buka folder yang menyimpan asset yang sudah didownload -> Pilih asset yang akan dimasukkan (tidak harus satu persatu) -> Copy
Buka Project di android studio -> Pilih res -> pilih drawable -> klik kanan -> paste
7. Atur HasilActivity.java
7.1 Buat Objek baru
7.2 Sambungkan objek dengan id
7.3 Tangkap data yang dikirim dari activity sebelumnya
7.4 Tampilkan pada view
7.5 Hasil Akhir HasilActivity.java
|
<![CDATA[
public class HasilActivity extends AppCompatActivity {
ImageView mIvGender;
TextView mTvNama;
TextView mTvJumlah;
TextView mTvHargaSatuan;
TextView mtvTotaHarga;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hasil);
mIvGender = findViewById(R.id.iv_gender);
mTvNama = findViewById(R.id.tv_nama);
mTvJumlah = findViewById(R.id.tv_jumlah_pesan);
mTvHargaSatuan = findViewById(R.id.tv_harga_satuan);
mtvTotaHarga = findViewById(R.id.tv_total_harga);
String nama = getIntent().getStringExtra("nama");
String kelamin = getIntent().getStringExtra("kelamin");
int hargaSatuan = getIntent().getIntExtra("hargaSatuan", 0);
int hargaTotal = getIntent().getIntExtra("hargaTotal", 0);
int jumlah = getIntent().getIntExtra("jumlah", 0);
mTvNama.setText(""+nama);
mTvHargaSatuan.setText(""+hargaSatuan);
mtvTotaHarga.setText(""+hargaTotal);
mTvJumlah.setText(""+jumlah);
if (kelamin.equalsIgnoreCase("Laki-laki")){
mIvGender.setImageResource(R.drawable.man);
}else {
mIvGender.setImageResource(R.drawable.women);
}
}
}
]]>
|
