Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia

Presentasi berjudul: "Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia"— Transcript presentasi:

1

2 Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia fathiah@uui.ac.id
DESAIN Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia 2016

3 CopyRight © Anisya - All Rights Reserved
SUB TOPIK Tujuan dari Desain Cara pendekatan Prinsip desain Ide dalam membuat desain CopyRight © Anisya - All Rights Reserved

4 PENDAHULUAN Salah satu kriteria penting dari sebuah antarmuka 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 di hadapannya. Dokumentasi rancangan dpt dikerjakan dlm beberapa cara : - Membuat sketsa pada kertas - Menggunakan peranti prototipe GUI, - Menuliskan tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yan lain, - menggunakan CASE (Computer Aided Software Engineering)

5 Tujuan dari Pembelajaran :
Dapat mengerti dan menjelaskan prinsip desain Dapat mengerti pentingnya ide dan mengetahui cara mendapatkan ide dalam proses pembuatan design Dapat mengerti dan mampu menjelaskan tantangan dalam membuat design yang baik dan memiliki nilai saing yang baik. Dapat menyebutkan beberapa contoh disain dalam kehidupan sehari-hari. Dapat menyebutkan dan mampu menerangkan konsep disain grafik (Filosofi Desain, Prinsip Desain Grafik, Pembuatan User Interface, Teknik Koding, Tipografi, fonts, Warna, Desain Icon) CopyRight © Anisya - All Rights Reserved

6 Komponen Antarmuka Antarmuka pengguna memiliki 4 komponen yaitu :
model pengguna, model konseptual yg diinginkan pengguna dlm memanipulasi informasi dan proses yang diaplikasikan pada informasi tersebut. Bahasa perintah (command language), peranti pemanipulasian model, idealnya dgn menggunakan bahasa alami.

7 Komponen Antarmuka Umpan balik, untuk memberi keyakinan bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah tersebut termasuk kemampuan sebuah program yang membantu pengguna untuk mengoperasian program itu sendiri. Tampilan informasi, digunakan untuk menunjukkan stastus informasi atau program ketika pengguna melakukan suatu tindakan.

8 CopyRight © Anisya - All Rights Reserved
Bagi perancang antarmuka, hal yang sangat penting untuk ia perhatikan adalah bahwa ia sebaiknya (atau seharusnya) mendokumentasikan semua pekerjaan yang ia lakukan. Dengan dokumentasi yang baik, ia dapat mengubah rancangannya ketika ia berubah pikiran atau menemukan bahwa rancangannya tidak mudah diimplementasikan. Perubahan yang terjadi bisa karena usulan pengguna yang berubah atau karena alasan lain. CopyRight © Anisya - All Rights Reserved

9 Dokumentasi rancangan dapat dikerjakan atau dilakukan dengan beberapa cara :
Membuat sketsa pada kertas Menggunakan peranti purwarupa GUI Menuliskan keterangan yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain. Menggunakan peranti bantu yang disebut CAE. Cara kedua dan cara keempat ini jarang untuk digunakan karena mahal, jadi cara ini digunakan untuk pembuatan antarmuka grafis untuk suatu pekerjaan dengan skala besar.

10 Cara pendekatan Program aplikasi pada dasarnya dapat dikelompokkan dalam 2 kategori besar yakni program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula (special purpose software) dan program aplikasi yang akan digunakan oleh pengguna umum (general purpose software / public software) Anisya, S. Kom., M. Kom

11 Pada kelompok pertama, yakni pada program aplikasi untuk keperluan khusus, misalnya program aplikasi untuk keperluan khusus, misalnya program aplikasi untuk inventori gudang, pengelolaan data akademis mahasiswa, pelayanan reservasi hotel, dan program-program aplikasi yang serupa, kelompok calon pengguna yang akan memanfaatkan program aplikasi tersebut dapat dengan mudah diperkirakan, baik dalam hal keahlian pengguna maupun ragam antarmuka yg akan digunakan. Dalam kelp ini ada satu pendekatan yakni dengan pendekatan perancangan berpusat-ke-pengguna (user-centered design approach). Anisya, S. Kom., M. Kom

12 perancangan berpusat-ke-pengguna (user-centered design approach)
perancangan berpusat-ke-pengguna (user-centered design approach). Berbeda dengan user design approach. UCDA ini melibatkan pengguna, tetapi bukan dalam hal si pengguna memikirkan bagaimana implementasinya nanti, tetapi pengguna diajak aktif untuk berpendapat ketika perancang antar muka sedang menggambar “wajah” antarmuka yang mereka inginkan. Jadi disini si pengguna dan perancang antarmuka duduk bersama-sama untuk merancang wajah antarmuka yang diinginkan pengguna. Pengguna menyampaikan keinginannya sementara perancang menggambar keinginan pengguna tersebut sambil menjelaskan keuntungan dan kerugian wajah antarmuka yang diinginkan oleh pengguna. Dengan cara ini si pengguna sudah mendapat gambaran nyata mengenai antarmuka yang nanti akan mereka gunakan. Anisya, S. Kom., M. Kom

13 Pada pendekatan user design approach, pengguna sendirilah yang merancang wajah antarmuka yang diinginkan. Di satu sisi, cara ini akan mempercepat proses pengimplemntasian modul antarmuka. Tetapi di sisi yang lain, hal ini justru sangat memberatkan pemrogram karena apa yang diinginkan pengguna belum tentu dapat diimplementasikan dengan mudah atau bahkan tidak dapat dikerjakan dengan menggunakan peranti yang ada. Anisya, S. Kom., M. Kom

14 Untuk public software, perlu menganggap bahwa program aplikasi tersebut akan digunakan oleh pengguna dengan berbagai tingkat kepandaian dan karakteristik yang sangat beragam. Disatu sisi keadaan ini dapat dikatakan “memaksa”, memaksa pengguna untuk menerima hasil rancangan, namun hal ini akan berdampak pada tidak banyaknya pengguna thdp aplikasi ini. Satu kunci penting dalam pembuatan model antarmuka untuk program-program aplikasi pada kelompok ini adalah customization. Dengan customization, pengguna dapat menggunakan program aplikasi dengan wajah antarmuka yang sesuai dengan selera masing-masing pengguna. Anisya, S. Kom., M. Kom

15 Prinsip Desain Model pengguna Bahasa perintah (command language)
Umpan balik Penampil informasi Anisya, S. Kom., M. Kom

16 Model Pengguna Model mental pengguna merupakan model konseptual yang dimiliki oleh pengguna ketika ia menggunakan sebuah sistem atau program aplikasi. Model ini memungkinkan seorang pengguna untuk mengembangkan pemahaman mendasar tentang bagian yang dikerjakan oleh program. Dengan pertolongan model itu pengguna dapat mengantisipasi pengaruh suatu tindakan yang ia lakukan dan dapat memilih strategi yang cocok untuk mengoperasikan prog tersebut. Model pengguna dapat berupa suatu simulasi tentang keadaan yang sebenarnya dalam dunia nyata, sehingga ia tidak perlu mengembangkannya sendiri dari awal. Anisya, S. Kom., M. Kom

17 Command Language Setelah pengguna mengetahui dan memahami model yang ia inginkan, dia memerlukan peranti untuk memanipulasi model itu. Idealnya komputer kita mempunyai bahasa perintah yang alami, sehingga model pengguna dengan cepat dapat dioperasionalkan. Anisya, S. Kom., M. Kom

18 Umpan Balik Maksudnya diartikan sebagai kemampuan sebuah program yang membantu pengguna untuk mengoperasikan program itu sendiri. Umpan balik dapat berbentuk pesan penjelasan, pesan penerimaan perintah, indikasi adanya objek terpilih, dan penampilan karakter yang diketikkan lewat papan ketik. Beberapa umpan balik ini ditujukan untuk yang belum berpengalaman. Umpan balik dpt digunakan untuk memberi keyakinan bahwa program telah menerima perintah pengguna dan dpat memahami perintah tersebut. Anisya, S. Kom., M. Kom

19 Tampilan Informasi Komponen ini digunakan untuk menunjukkan status informasi atau program ketika pengguna melakukan suatu tindakan. Perancang harus menampilkan informasi seefektif mungkin sehingga mudah dipahami. Anisya, S. Kom., M. Kom

20 Merencanakan Suatu Proyek Aplikasi
Jika tidak direncanakan, maka : Banyak kode sedikit fitur Banyak bug Banyak waktu akan dihabiskan Kehilangan fitur Untuk memperoleh hasil yang baik, maka : Perencanaan Ide Pengumpulan kebutuhan Pengujian Evaluasi Penambahan fitur Anisya, S. Kom., M. Kom

21 Kebutuhan pasar. Ide juga bisa didapat dengan melihat kebutuhan pasar.
Sekarang kita akan melihat bagaimana merencanakan suatu proyek. Untuk keperluan ini dibutuhkan suatu ide,. Ada beberapa tipe ide guna memulai suatu proyek : Memperbaiki atau membuat sesuatu lebih baik, meniru atau memperbaiki sesuatu yg telah dibuat. Dengan berbekal ide ini maka pembuatan proyek akan memerlukan lebih sedikit langkah dan lebih sedikit waktu. Ide baru dimana pemrogram akan membuat sesuatu yang benar-benar baru. Untuk menggunakan ide ini tentu diperlukan waktu dan langkah yang tidak mudah. Kebutuhan pasar. Ide juga bisa didapat dengan melihat kebutuhan pasar. Anisya, S. Kom., M. Kom

22 Setelah semua ide terchecklist, sebaiknya seorang pemrogram tidak langsung mewujudkannya, tetapi ada beberapa hal yang harus diperhatikan : Sudah berapa banyak persiapan check list yang telah dibuat?? Berapa biaya yang dibutuhkan Berapa luas penggunaannya. Berapa lama proses pembuatannya. Apakah ide ini lebih baik dari yang sudah ada Anisya, S. Kom., M. Kom

23 Jika sudah diputuskan untuk membuat suatu proyek aplikasi, tugas berikutnya adalah membuat rincian persyaratan proyek yg mmberikan deskripsi rincian hasil akhir : Anisya, S. Kom., M. Kom

24 Jika persyaratan sudah dipetakan secara detail, baik fungsi input maupun outputnya, maka perlu ditinjau kembali apakah masih perlu diubah dan diperbaiki. Bila ternyata sudah baik, maka tiba saatnya kita memilih bahasa pemrograman yang tepat untuk membuat aplikasi tersebut. Bahasa pemrograman yg digunakan sangat menetukan hasil yang akan diperoleh. Anisya, S. Kom., M. Kom

25 Pengujian terhadap suatu aplikasi yang telah dibuat dilakukan untuk menemukan berbagai kesalahan yang mungkin terjadi sewaktu aplikasi tersebut dijalankan.kesalahan2 itu harus dibuatkan dokumentasinya. Anisya, S. Kom., M. Kom

26 Apa beda preview testing dan beta testing??
Anisya, S. Kom., M. Kom

27 Alpha testing : Tujuannya untuk identifikasi dan menghilangkan sebanyak mungkin masalah sebelum akhirnya sampai ke user, dilakukan setelah software jadi oleh orang-orang yang tidak terlibat dalam pengembangan dan memang ahli dibidangnya. Terdapat formulir resmi evaluasi. Beta testing : evaluasi sepenuhnya oleh pengguna. Pengguna dipilih 3 orang yang dibagi menjadi : potensial, average, dan slow learner. Mereka diberitahukan prosedur evaluasi, diamati proses penggunaannya, diwawancarai lalu dinilai dan dilakukan revisi

28 Mengapa desain menjadi sulit ?

29 Proses Desain 1. Meningkatnya kompleksitas
Sejumlah control mempunyai penambahan aksi yang menarik Umpan balik lebih rumit dan sulit dipisahkan Errors terus meningkat serius/mahal 2. Tekanan Pemasaran waktu adalah uang Menambahkan kemampuan (kompleksitas) sekarang mudah dan murah Menambahkan kontrol / umpan balik adalah mahal Desain biasanya memerlukan beberapa iterasi (perulangan) sebelum sukses

30 Proses Desain Banyak orang sering mempertimbangkan biaya dan tampilan desain pada faktormanusia Style (Corak) Desain yang jelek kemungkinan tidak akan tampak Kreatifitas penuh dengan tantangan Tidak hanya membuat satu salinan Inginkan kreatifitas, tapi ingin yang praktis

31 Ide Dalam Membuat Desain
Bagaimana kita bisa mempunyai ide untuk membuat dan mengembangkan desain interface baru ?

32 Ide Dalam Membuat Desain
Ide berasal dari Imajinasi Analogi Observasi dari praktek saat ini Observasi dari sistem saat ini Mengutip dari bidang lain Animasi Teater Information displays Arsitektur ...

33 Prinsip Desain Gunakan dialog yang sederhana dan natural.
Cocokkan tugas pengguna pada satu cara yang natural Hindari jargon(istilah khusus), techno-speak Tampilkan info yg user perlukan secara tepat

34 Contoh :

35 Prinsip Desain (cont…)
2. Berusaha untuk konsisten urutan, aksi, perintah, layout, daftar kata-kata penting Buat lebih banyak prediksi Help Cancel OK Apply Cancel Done

36 Prinsip Desain (cont…)
3. Sediakan umpan balik yang informatif Secara terus-menerus memberitahukan pengguna tentang yang terjadi Paling penting yang sering dikunjungi, aksi yang nyata 4. Minimalkan beban ingatan user Pengenalan lebih baik dibandingkan mengingat Deskripsikan format input yg diperlukan, meliputi contoh dan default Date _ _ - _ _ _ - _ _ (DD-Mmm-YY, e.g., 02-Aug-93)

37 Prinsip Desain (cont…)
5. Mengijinkan perubahan aksi yang mudah Undo! Kurangi kebimbangan, anjurkan percobaan Sediakan tanda Exit dengan jelas jangan membuat user merasa terperangkap Contoh : tombol Cancel pada dialog Interrupt/resume pada operasi yg panjang (modeless) Quit – bisa keluar setiap waktu Reset/defaults – restore pada suatu sheet

38 Prinsip Desain (cont…)
7. Sediakan shortcuts Memungkinkan user untuk menjalankan operasi yg sering dipakai dengan cepat Keyboard & Mouse Navigasi diantara windows/forms 8. Mendukung fokus internal dari kontrol Enter next command vs. Ready for next command

39 Prinsip Desain (cont…)
9. Menangani kesalahan dengan lancar dan secara positif dgn memberi petunjuk tentang kesalahan yg dilakukan user dan langkah perbaikannya 10. Sediakan help dan dokumentasi

40 Desain grafik dalah seni dalam berkomunikasi menggunakan tulisan, ruang, dan gambar. Bidang ini merupakan bagian dari komunikasi visual. Ilmu desain grafis mencakup seni visual, tipografi, tata letak, dan desain interaksi Desain Grafik adalah kombinasi kompleks antara kata-kata, gambar, angka, grafik, foto dan ilustrasi yang membutuhkan pemikiran khusus dari seorang individu yang bisa menggabungkan elemen-elemen tsb, sehingga dapat menghasilkan/ menginformasikan pesan yang seefektif mungkin dalam bidang seni desain

41

42 Metaphor metafor dalam konteks antarmuka  dan perencangan interaksi berarti metafor visual, yaitu gambar yang digunakan untuk menyajikan sebuah maksud atau atribut tertentu dari sebuah benda. Penyajian dapat dilakukan dalam bentuk lain, seperti menggunakan simbol Presentasi dan unsur visual untuk beberapa item yang relevan. contoh; Desktop metaphor

43

44 Contoh :

45

46 Contoh :

47 Contoh:

48 Konsistensi Pada layout, warna, gambar, ikon,teks, …
Di dalam screen, antar screens Platform mungkin mempunyai petunjuk Follow it!

49 Contoh :

50 Alignment -Western world Start from top left - Grids
Garis horizontal dan vertical untuk membantu letak komponen window Align hal-hal yg terkait Group item secara logika

51 Contoh :

52 Alignment (cont…) Left, center, atau right
Pilih salah satu, gunakan untuk setiap tempat. Here is some new text Here is some new text Here is some new text

53 Proximity Item tampak tertutup untuk hal-hal yg berkaitan
Jarak tidak menyiratkan suatu hubungan Time Time:

54 Contoh : Name Addr1 Addr2 City State Phone Fax Name Addr1 Addr2 City

55 Kontras Dapat digunakan untuk membedakan kontrol yg aktif atau tidak
Dapat digunakan untuk mengatur item yg paling penting dengan highlight(menyorotnya)

56 Contoh : Important element

57 Lebih lanjut tentang Desain Grafik

58 Agenda Tipografi Warna Ikon

59 Tipografi Karakter dan simbol harus nyata dan dapat dibedakan
- Hindari penggunaan semua huruf besar HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST How much fun is it to read all this text when it’s all in capitals and you never get a rest

60 Tipografi (cont..) Readability(keadaaan yg dapat dibaca)
Bagaimana agar mudah membaca teks yg banyak Legibility (Sifat mudah dibaca) Bagaimana agar mudah untuk mengenali teks pendek yg muncul secara tiba-tiba Jenis huruf=font Serif font – readability - Times, Bookman Sans serif font - legibility - Tahoma, Arial

61 Tipografi (cont..) Petunjuk
- Gunakan serif utk teks yg panjang; sans serif utk teks utama - Gunakan 1-2 font (3 maks) - Jangan gunakan bold, italic, kapital utk teks yg panjang - gunakan ukuran maks 1-3 point - hati-hati penggunaan teks untuk latar belakang dengan warna

62 Contoh :

63 Contoh : Mana yang lebih kamu sukai? Arts Festival
CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND DECATUR Crafts and Games Arts Festival Of Atlanta and Decatur SEPTEMBER 19-24 September 19-24 Come and Enjoy! COME AND ENJOY

64 Warna Kita melihat dunia melalui refleksi model warna
cahaya menerangi suatu permukaan dan dicerminkan pada mata kita printer Pada monitor, susunan khas RGB - nilai setiap red, green, blue - R: 170 G:43 B: 211

65 Warna (cont…) Gunakan utk satu tujuan, bukan hanya menambah beberapa warna pada tampilan.

66 Warna (cont…) Tampilkan image berwarna pada background hitam
Pilih foreground dgn warna terang (white, bold green,…) Hindari coklat dan hijau sebagai warna background. Pastikan warna fg kontras dgn warna bg Gunakan warna utk menarik perhatian, komunikasi organisasi, utk menandai status, utk menentukan hubungan Hindari penggunaan warna utk tugas yg tdk berhubungan

67 Latihan Visual Berapa banyak objek yg kecil? Berapa banyak persegi?
Berapa banyak objek warna biru?

68 Berapa banyak….

69 Temukan … Left: temukan tulisan warna merah Right: Temukan ‘A’

70 Temukan … B X V P E U U F W S O A C B C Z E L L K H M I S J R R G N T
D Q Q X F O D I V W W K N S X Y Y Z V W K D M Z S R J

71 Petunjuk utk warna Warna berguna utk mendukung pencarian
Selalu konsisten dgn asosiasi pekerjaan dan budaya Yellow happy, hati-hati, suka cita Brown warm, fall, ko, daratan Green subur, pastoral, iri/cemburu Purple (ungu) meriah, canggih. Red hot, warning, love Pink female, menarik Orange musim, hangat, Halloween

72 Petunjuk utk warna Designer sering memilih suatu pallete utk 4 atau 5 warna Professional Monochromatic Southwestern

73 Desain Ikon Mewakili objek atau aksi yg lazim dan dapat dikenali
Membuat ikon lebih menonjol dari background Pastikan ikon yg terpilih tampak terlihat jelas dari ikon yg tidak terpilih Buat setiap ikon yg berbeda Hindari rincian yg berlebihan

74 Desain Ikon

75 Referensi Santosa, Insap Interaksi Manusia dan Komputer, Teori & Praktek, Andi Yogyakarta Surbakti, Irfan; Santosa, Insap; Interaksi Manusia Dan Komputer, Edisi Jurusan Teknik Informatika-ITS, 2006