Design interface adalah proses perancangan interaksi antara pengguna dan sistem komputer untuk membuat pengguna dapat menggunakan program secara sederhana dan efisien. Hal penting yang perlu diperhatikan adalah tampilan, penyimpanan data, dan penanganan kesalahan.

1. Design
InterfaceDesign
Interface

2. Design
Interface
 Design interface adalah proses perancangan
design interaksi antara komputer dan pengguna.
Tujuan dari design interface adalah agar
pengguna dapat menggunakan suatu program
atau sistem secara sederhana dan se efisien
mungkin.

3. Design
Interface
 Hal yang perlu diperhatikan dalam design interface
 1. Salah satu kriteria penting dari sebuah antar muka adalah tampilan yang
menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik
untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik
pada suatu tampilan yang ada dihadapan matanya.
Contoh gambar 1.
Dengan tampilan yang
simple dan menarik. Dapat
membuat seluruh
pengguna tertarik untuk
mencoba program tersebut.

4. Design
Interface
2.Hal yang perlu diperhatikan oleh perancang antarmuka adalah penyimpadan data
semua pekerjaan yang ia lakukan. Dengan penyimpanan yang baik, ia dapat
mengubah rancangannya apabila menurutnya rancangan tidak mudah untuk
diimplementasikan atau rancangan tersebut mengalami perubahan disesuaikan
dengan usulan dari pengguna.
Contoh gambar 2.
Rancangan pada suatu
program dapat diubah
kapanpun selama data
disimpan dengan baik.

5. Design
Interface
Program aplikasi, pada dasarnya dapat
dikelompokkan ke dalam dua kategori besar,
yakni :
◦ program aplikasi untuk keperluan khusus dengan
pengguna yang khusus pula (special purpose
software)
◦ program aplikasi yang akan digunakan oleh banyak
pengguna (general purpose software) atau public
software.
1.1. CARA PENDEKATANCARA PENDEKATAN

6. Design
Interface
 Cara pendekatan untuk program aplikasi keperluan khusus
dengan pengguna yang khusus pula cara pendekatan yang
dilakukan diistilahkan dengan User centered design
approach
 User centered design approach adalah perancangan
antarmuka yang melibatkan penguna. Perancang dan pengguna
bersama sama merancang antarmuka yang diinginkan
pengguna, sehingga dengan cara ini pengguna memiliki
autentikasi tertentu dalam penggunaan program tersebut.
 Contoh dalam User centered design approach adalah
progam yang memiliki sistem login.
a. Special Purpose Softwarea. Special Purpose Software

7. Design
Interface
Contoh dari special purpose program
Program aplikasi kasir.
Pelayanan Reservasi hotel.

8. Design
Interface
 Program aplikasi yang akan digunakan oleh banyak pengguna
dengan berbagai tingkat kepandaian dan karakteristik yang
sangat beragam, perlu memiliki salah satu kunci penting dalam
pembuatan modul antarmuka dengan melakukan customizazion,
sehingga pengguna dapat menggunakan program aplikasi
dengan wajah antarmukanya yang sesuai dengan selera
masing-masing pengguna.
 Cara pendekatan untuk program aplikasi ini mengunakan User
design approach, dimana pengguna sendirilah yang
merancang wajah antarmuka yang diinginkan.
b.b. General purpose software/ PublicGeneral purpose software/ Public
softwaresoftware

9. Design
InterfaceContoh dari general purpose software adalah:
 Microsoft word karena program tersebut dapat membuat penggunanya untuk
merancang sendiri seperti ukuran kertas, jenis tulisan dll, dalam dokumen yang kita
buat.
 Winamp program media player ini menyediakan berbagai macam skin, visualization atau fitur
lain untuk mengubah tampilan program itu sendiri.

10. Design
Interface
Antarmuka pengguna secara alamiah terbagi
menjadi empat komponen:
1.Model pengguna
2.Bahasa perintah
3.Umpan balik
4.Penampilan informasi
2.2. PRINSIP DAN PETUNJUKPRINSIP DAN PETUNJUK
PERANCANGANPERANCANGAN

11. Design
Interface
1. Model pengguna merupakan model konseptual
yang diinginkan oleh pengguna dalam memanipulasi
informasi dan proses yang dia aplikasikan pada
informasi tersebut. Model pengguna dapat berupa
suatu simulasi tentang keadaan yang sebenarnya
dalam dunia nyata, sehingga ia tidak perlu
mengembangkan sendiri dari awal.
2. Setelah pengguna mengetahui dan memahami
model yang diinginkan, dia memerlukan peranti
bahasa perintah (Command language) untuk
memanipulasi model itu.

12. Design
Interface
Contoh model pengguna pada design
interface.
Dalam Visual basic 6.0,
User dapat membuat
konsep dari program
yang diinginkan oleh
pengguna tanpa harus
mengembangkan
sendiri dari awal.

13. Design
Interface
 Komponen yang ketiga umpan balik. Umpan balik disini
diartikan sebagai kemampuan sebuah program yang
membantu pengguna untuk mengoperasikan program itu
sendiri. Umpan balik dapat digunakan untuk memberi
keyakinan bahwa program telah menerima perintah
pengguna dan dapat memahami maksud perintah
tersebut.
 Komponen keempat adalah tampilan informasi.
Komponen ini digunakan untuk menunjukan status
informasi suatu program ketika pengguna melakukan
suatu tindakan.

14. Design
Interface
Contoh dari umpan balik dan tampilan informasi :
Aplikasi Winrar memiliki
tampilan informasi ketika
user meng extract suatu file.
Lalu ketika proses extract
memiliki kendala (seperti file
yang sama di dalam suatu
folder) akan muncul tampilan
Umpan balik untuk
membantu user dalam
mengatasi kendala tersebut.

15. Design
Interface
 Pemilihan Ragam Dialog
Adalah Kemampuan untuk memahami berbagai sistem interaksi antara user
dan sistem komputer.
Ragam dialog yang dipilih dapat berupa sebuah ragam dialog tunggal, atau
sekumpulan ragam dialog yang satu sama lain saling mendukung
 Perancangan Struktur Dialog
Tahap kedua adalah melakukan analisis tugas dan menentukan model
pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai
a.a. Urutan PerancanganUrutan Perancangan

16. Design
Interface
 Secara umum ragam dialog dikelompokkan
menjadi beberapa kategori seperti:
 command line
 programming language
 Menu
 form filling
 Ikon
 interaksi grafis.

17. Design
Interface
 Contoh dari beberapa ragam dialog :
 CLI (Command Line Interface)
CLI adalah tipe ragam
dialog dimana
pengguna berinteraksi
dengan sistem operasi
melalui text-terminal.
Pengguna menjalankan
perintah dan program di
sistem operasi tersebut
dengan cara
mengetikkan baris-baris
tertentu.

18. Design
Interface
 Bahasa pemograman (Programming language)
Bahasa pemrograman adalah instruksi standar
untuk memerintah komputer. Bahasa ini
memungkinkan seorang programmer dapat
menentukan secara persis data mana yang
akan diolah oleh komputer, bagaimana data ini
akan disimpan/diteruskan, dan jenis langkah
apa secara persis yang akan diambil dalam
berbagai situasi.

19. Design
Interface
 Perancangan Format Pesan.
Dalam tahap ini tata letak tampilan dan keterangan tekstual
harus secara terinci untuk menjaga keefisiensian sistem.
 Perancangan Penanganan Kesalahan
Untuk menghindari adanya kondisi kesalahan yang timbul,
maka adanya kondisi yang disebut abnormal termination, yaitu
eksekusi program berhenti karena terjadi kesalahan. Bentuk-
bentuk penanganan kesalahan yang dapat dilakukan antara
lain :
◦ Validasi pemasukan data.
◦ Proteksi pengguna.
◦ Pemulihan dari kesalahan.
◦ Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang
terjadi pada waktu itu.

20. Design
Interface
 Contoh dalam penanganan kesalahan :
Di dalam aplikasi
pemograman borland c++,
jika user mengalami
kesalahan dalam
memasukan bahasa
program. Aplikasi tersebut
akan langsung
menghentikan eksekusi
dari program yang dibuat
dan akan menampilkan
pesan error untuk
Penanganan kesalahan.

21. Design
Interface
 Perancangan Struktur Data
Setelah semua aspek antarmuka dipertimbangkan,
Anda harus menentukan struktur data yang dapat
digunakan untuk menyajikan dan mendukung
fungsionalitas komponen-komponen antarmuka yang
diperlukan.
Struktur data ini harus dipetakan langsung kedalam
model pengguna yang telah dibuat. Hal ini perlu
ditekankan agar keinginan pengguna dan model
sistem yang telah dirancang saling mempunyai
kecocokan satu sama lain.

22. Design
Interface
 Pada perancangan tampilan untuk antarmuka
berbasis teks, ada enam faktor yang harus
dipertimbangkan agar diperoleh tata letak
tampilan yang berkualitas tinggi, yaitu:
◦ Urutan penyajian
◦ Kelonggaran (Spaciousness)
◦ Pengelompokkan
◦ Relevansi
◦ Kesederhanan
b.b. Perancangan Tampilan Berbasis TeksPerancangan Tampilan Berbasis Teks

23. Design
Interface

24. Design
Interface
 Dengan antarmuka berbasis grafis berbagai kemudahan
dalam hal pengontrolan format tampilan dapat dikerjakan
dengan lebih mudah dan fleksibilitas tampilan dapat
semakin dirasakan oleh perancang tampilan maupun
penggunanya. Disisi lain, kita harus memperhatikan
beberapa kendala dalam penerapan antarmuka berbasis
grafis ini, antara lain: waktu tanggap, kecepatan tampilan,
lebar tampilan, dan tipe tampilan
c.c. Perancangan Tampilan BerbasisPerancangan Tampilan Berbasis
GrafisGrafis

25. Design
Interface
 Pengguna tidak harus mengingat perintah-perintah yang
sering kali cukup panjang, tetapi cukup dikerjakan
dengan melihat dan kemudian menunjuk kesuatu
gambar yang mewakili suatu aktifitas (Ikon).
 Penggunaan barang property atau option untuk
mengatur kenampakan (wajah) desktop.
 Kemampuan WYSIYG.
 Perintah-perintah yang berlaku umum, seperti MOVE,
DELETE, atau COPY, dan lain-lain
Contoh beberapa kemampuan padaContoh beberapa kemampuan pada MicrosoftMicrosoft
windows:windows:

26. Design
Interface
1. Ilusi pada obyek-obyek yang dapat
dimanipulasi
Perancangan antarmuka berbasis grafis yang
efektif harus melibatkan tiga komponen:
 Kumpulan obyek.
 Penampilan obyek-obyek.
 Mekanisme yang konsisten
Faktor yang perlu diperhatikan pada perancanganFaktor yang perlu diperhatikan pada perancangan
antarmuka berbasis grafis, antara lain:antarmuka berbasis grafis, antara lain:

27. Design
Interface
2. Urutan Visual dan fokus pengguna
Antarmuka grafis dapat digunakan untuk menarik
perhatian pengguna antara lain dengan
membuat sesuatu obyek berkedip,
menggunakan warna tertentu untuk obyek-
obyek tertentu, serta menyajikan suatu animasi
yang akan lebih menarik perhatian pengguna

28. Design
Interface
3. Struktur Internal
Pada pengolahan kata kita sering menulis beberapa kata
yang berbeda dengan kata-kata yang lain, misalnya ada
sekelompok kata yang ditebalkan, dimiringkan, atau
diberi garis bawah.
Pada antarmuka berbasis grafis, khususnya pada obyek-
obyek yang dapat dimanipulasi, perancang juga harus
memberikan struktur internal (reveral structure), dalam
bentuk yang berbeda dengan yang digunakan pada
dokumen tekstual, untuk memberitahu si pengguna
sejauh mana pengguna dapat mengubah atau
memanipulasi obyek tersebut

29. Design
Interface
4. Kosakata grafis yang konsisten dan
sesuai
Pada program aplikasi yang berbeda penggunaan
simbol biasanya disesuaikan dengan kreatifitas
perancangnya, Contoh, simbol  banyak
digunakan untuk menyatakan aktifitas
penyimpanan data

30. Design
Interface
5. Kesesuaian dengan pengguna
Karakteristik dari layar tampilan yang digunakanakan
mempunyai pengaruh yang besar terhadap
keindahan ”wajah” antarmuka yang akan
ditampilkan.
Dengan semakin canggihnya teknologi layar tampilan
pada saat ini, kreatifitas perancang tampilanlah yang
saat ini lebih dituntut untuk memenuhi permintaan
penggunaan aspek kenyamanan dan keramahan
antarmuka.

31. Design
Interface
 Secara umum, pengguna menginginkan bahwa program
aplikasinya dapat memberikan waktu tanggap yang sependek-
pendeknya. Tetapi waktu tanggap yang baik memang tidak dapat
ditentukan, karena ada beberapa aspek yang mempengaruhi,
antara lain:
◦ Ragam interaksi yang diinginkan
◦ Kefasihan pengguna dalam menjalankan program aplikasi
tersebut.
 Waktu tanggap yang berbeda-beda dapat mempengaruhi
konsentrasi pengguna yang pada gilirannya akan mempengaruhi
kinerja pengguna.
d. Waktu Tanggapd. Waktu Tanggap

32. Design
Interface
 Dalam dunia Komputer, kesalahan yang kecil
dapat berakibat fatal. Sehingga, harus dicari suatu
upaya agar kesalahan-kesalahan yang dilakukan
oleh pengguna dapat dihindari atau ditangani
dengan cara-cara tertentu agar tidak
mengakibatkan terhentinya eksekusi sebuah
program aplikasi yang sedang dioperasikan.
e. Penanganan Kesalahane. Penanganan Kesalahan

33. Design
Interface
 Kesalahan pada saat implementasi program, yakni
kesalahan sintaksis yang secara langsung akan dideteksi
oleh kompiler (compile-time error), terjadi pada saat
program sedang dikompilasi. Sebelum kesalahan itu
dibetulkan, program tidak akan dapat dioperasikan.
 Kesalahan logika ketika program sedang dijalankan (run-
time error atau fatal error), terjadi pada saat program
dijalankan. Kesalahan ini akan mengakibatkan terhentinya
program secara abnormal.
Kesalahan dibagi dua, yakni :Kesalahan dibagi dua, yakni :

34. Design
Interface
 Piranti bantu yang akan dijelaskan hanya
berbentuk lembaran kertas yang tidak perlu
disiapkan secara khusus, tetapi dapat
menggunakan sembarang kertas kosong.
 Untuk mempermudah penamaan, maka lembaran
kertas yang dimaksud diberi nama dengan lembar
kerja tampilan (LKT).
3. Piranti Bantu Sederhana3. Piranti Bantu Sederhana

35. Design
Interface
LKT pada umumnya terdiri atas empat bagian, yaitu:
Nomor lembar kerja.
Bagian Tampilan : berisi sketsa tampilan yang akan
muncul dilayar.
Bagian Navigator : bagian ini antara lain menjelaskan
kapan tampilan ini akan muncul dan kapan tampilan itu
berubah menjadi tampilan lain. Perubahan tampilan
biasanya disebabkan oleh adanya suatu event. Event
tersebut antara lain dapat berupa penekanan tombol
mouse atau papan ketik.
Bagian Keterangan : berisi penjelasan singkat tentang
atribut tampilan yang akan dipakai.

36. Design
Interface
Contoh Perancangan tampilan menggunakan LKT

37. Design
Interface
Semantik Model merupakan model relasi antara objek dasar
tidak dinyatakan dengan simbol tetapi menggunakan kata-
kata.
Digunakan untuk mempermudah bagi pemrogram pada saat
ia menuliskan program untuk disesuaikan dengan navigasi
pada setiap lembar kerja. Pada jaring semantik tampilan
terdiri atas dua komponen :
Nomor tampilan (biasa diberi notasi dengan lingkaran)
Transisi yang menyebabkan perpindahan perpindahan ke
tampilan yang lain (biasa diberi notasi dengan anak panah)
4. Jaring Semantik Tampilan4. Jaring Semantik Tampilan

38. Design
Interface