View
233
Download
0
Category
Preview:
Citation preview
Kesalahan Programmer• Desain ini memuaskan saya→ juga akan
memuaskan setiap orang
• Desain ini memuaskan rata-rata orang → jugaakan memuaskan setiap orang
Permasalahan IMK
• Interface yang buruk berpengaruh secarasignifikan terhadap anggapan penggunamengenai kualitas software
• Jika software memiliki desain interface yang buruk, maka pengguna akan langsungberanggapan software tidak berkualitas dandikerjakan tidak profesional→meski seluruhtujuan telah tercapai.
Pertanyaan• Mengapa kebanyakan
orang terbiasamenggunakan Windows dibandingkan OS lain?
• Mengapa kebanyakanorang terbiasamenggunakanMicrosoft Office?
Solusi
• Seorang perancang wajib:
– Memiliki jiwa seni yang memadai
– Mengerti selera pengguna secara umum
• Seorang perancang tampilan harus dapatmeyakinkan programmer bahwa yang dibayangkan dapat diimplementasikan denganI/O devices yang tersedia
Tipografi
• Kumpulan karakter yang tersusun dalam rangkaian teksdi halaman tertentu.
• Font– desain khusus dalam sebuah kumpulan karakter / set
karakter dengan 1 style
• Font Family– kumpulan beberapa jenis font yang memiliki kesamaan
desain
• Typeface– desain khusus dari sebuah karakter
• Style– variasi desain dalam sebuah typeface
Tipografi
• Serif → sudut di tiap ujung dari sebuahkarakter (font berekor)
– Serif → Times new roman
Sans-serif → Verdana
Typography Typography
Faktor Pemilihan Tipografi
• Character Angle
– Tiga tipe→ Roman, style standar vertikal, italic
– Pengaruhi standar formalitas desain
• Comic lebih mengesankan dari Arial atau Verdana
• Character Weight
– Ketebalan suatu font
– Ukuran ketebalan→ light, bold, heavy, dan black
Faktor Pemilihan Tipografi
• Character Width– Terpengaruh oleh faktor lebar dari tiap font yang
memiliki jenis regular, condensed, dan extended (lebih lebar)
Gill Sans
Gill Sans Condensed
Gill Sans Condensed Bold
Gill Sans Ultra Bold
Gill Sans Ultra Bold Condensed
Jenis Font
• Transitional Style Faces →mirip old styletetapi lengkungan serif di bagian bawah tidakterlalu panjang
• Contoh: Baskerville
Old Style
Jenis Font
• Modern Style → font dengan serif yang tumpul dan lurus (font yang memiliki kaki) →georgia
Modern
Jenis Font
• Sans-serif Faces→ font formal untukdokumen resmi (font yang tidak melelahkansaat baca dokumen)
g g g gArial
ImpactTahoma Verdana
Jenis Font
• Decorative → Font bebas yang banyakdigunakan hingga saat ini (kebebasanberekspresi)
Decorative
Penerapan Desain Tipografi
• GUNAKAN font yang sederhana dan mudahdibaca.
– Jenis sans-serif dan familiar bagi user → arial, verdana, times new roman
• JANGAN gunakan terlalu banyak jenis font family
– Biarkan 1 jenis font yang mendominasi
Penerapan Desain Tipografi
• JANGAN gunakan terlalu banyak style dalam 1 jenis font
– 1 jenis font arial cukup bold dan italic
• GUNAKAN style untuk tujuan yang tepat
– Italic → istilah asing dan menarik perhatianpengguna
– Bold →menarik perhatian dan menu
– Underline → link di desain web
Penerapan Desain Tipografi
• GUNAKAN case-style secara tepat
– Mixed case→ huruf besar di depan tiap kata
• Judul di sebuah tombol, kotak pesan, deskripsi menu
– Uppercase→ huruf besar semua
• Judul
– Hirarki font secara konsisten
• Ukuran huruf yang sesuai dengan hirarki dari desain
• Hirarki berbeda→ ubah warna, style, ukuran font
Tipografi
• Pemilihan font dan implementasi tipografidapat menimbulkan kesan yang berbedadalam tahapan desain
• Ikut berpengaruh terhadap tiap kultur danlingkup organisasi yang akan menggunakanaplikasi
Color Caring
• Unsur warna dalam sebuah desain mengambilporsi dalam sebuah interaksi aplikasi denganpenggunanya.
• Penamaan sebuah warna bergantung darifenomena pengalaman seseorang terhadapsensasi visual yang pernah dirasakan
– Seseorang dapat kesulitan menyebut jenis warnakarena tidak pernah melihat
Color Caring
• Dalam interaksi, penggunaan variasi warnadapat berfungsi sebagai :
– Pengelompokan
– Asosiasi informasi
– Highlight →membedakan informasi pentingdengan biasa
– Komponen layar
– Status informasi
Masalah dalam Color Caring
• Warna dengan intensitas yang sangat tinggi
– Warna absolut yang sangat terang dapatdigunakan sebagai pembeda
– Jangan terlalu banyak digunakan→ dapat terjadiefek christmas tree
Masalah dalam Color Caring
• Sensifitas mata terhadap warna– Tiap orang memiliki sensifitas yang berbeda terhadap
warna
– Semakin tua usia seseorang→ sensifitas terhadapwarna juga berkurang
– Perlu dipertimbangkan penggunaan warna yang terang bagi pengguna yang berusia lebih tua
– Warna dengan jangkauan spektrum rendah→mudahdikenali
– Warna dengan jangkauan spektrum tinggi→mudahmenarik perhatian
Masalah dalam Color Caring
• Buta warna
• Perbedaan budaya
– Beragam budaya dan beda persepsi tiap tempatdan lingkup organisasi tentang warna→ harusdiperhatikan.
– Contoh :
• Merah→ bahaya (Amerika)
kematian (Mesir)
kehidupan (India)
Tips Color Caring
• Sebelum pemberian warna, buat desain dalammode hitam putih→ pengelompokan elemendapat terlihat jelas sebelum proses pewarnaan
• Gunakan warna dengan efisien
– Efisien tidak berarti menggunakan warnaseminimal mungkin tetapi lebih mengarah kepenggunaan warna yang tepat sasaran
Tips Color Caring
• Untuk warna yang berfungsi sebagai pembedaantar kelompok→ gunakan paduan warnayang kontras
• Gunakan paduan warna yang harmonis→paduan warna yang baik bisa didapat dariskema warna yang memadukan warna tanpakontras yang menyakitkan
Teks dan Background
• Gunakan warna sekontras mungkin antarateks dan background– Warna teks formal → hitam atau warna warm
(spektrum tinggi)
• Gunakan warna terang untuk membedakanantara informasi yang penting
• Warna background– Warna dengan saturation rendah
– Warna cool (spektrum rendah)
Teks dan Background
• Hindari :
– Bergantung pada 1 warna tertentu secara ekslusif
– Terlalu banyak warna
– Terlalu banyak unsur saturation
– Warna terlalu terang untuk berumur tua
– Warna terlalu pudar sehingga di layar monitor kelihatan tidak jelas
– Penggunaan warna biru untuk teks serta objekkecil→ biru terkesan sempit
Teks dan Background
• Hindari :– Variasi warna di ruang sempit
– Untuk grafik atau foto hindari warna yang berkesan hitam-putih
– Warna yang tidak kontras antara teks danbackground
– Penggunaan warna yang tidak pada tempatnya• Pesan error diberi warna merah bukan hijau
– Variasi banyak warna dalam sebuah teks yang panjang
Icon
• Kadang dianggap remeh oleh desainer
• Penggunaan icon terlihat signifikan terutamapada saat menggunakan toolbar dan desainweb
• Icon digunakan untuk merepresentasikansebuah objek atau simbol dari sebuah halyang harus dilakukan oleh pengguna.
Jenis Icon
• Resemblance →mengandung gambar yang melambangkan arti tertentu
• Symbolic →mengandung gambar abstrak yang menunjukkan suatu arti
• Exemplar →memiliki gambar yang menggambarkancontoh karakter tertentu atau benda tertentu
• Arbitrary →memiliki gambar yang artinya sedikit jauhdari apa yang dimaksudkan, tetapi dengan pelatihandapat dipahami artinya
• Analogy →memiliki gambar yang secara fisikmenggambarkan perbuatan dari sesuatu yang disimbolkan
Perancangan Icon
• Karakteristik dalam merancang icon:– Syntactic → struktur fisik dari sebuah icon
• Sekumpulan icon yang sama bentuknya lebih mampuberkomunikasi dengan pengguna
– Semantic → arti dari sebuah simbol yang terdapatdalam icon• Arti dari icon Recycle Bin?
– Pragmatik→ hasil dan representasi dari sebuahicon terhadap suatu aplikasi• Perbandingan besar icon dengan layar
Pemilihan Icon
• Desainer kadang tidak lagi membuat icon tetapi lebih memilih untuk menggunakan set icon yang telah tersedia.
• Terdapat beberapa pertimbangan yang dapatdigunakan pada saat pemilihan icon yang sudah ada.
Pemilihan Icon
• Standarisasi
– Icon yang memiliki simbol standar.
– Undo→
• Menggunakan Simbol Benda
– Simbol benda lebih bermakna dibanding simbolyang berupa pekerjaan
– Cut
Pemilihan Icon
• Simbol tradisional
– Gunakan simbol yang telah banyak dipahamipengguna
• Simbol yang memperhitungkan budaya dansesuai norma yang ada
• Bentuk yang konkrit dan familiar
– Untuk cut → gunting kertas biasa jangan guntingpemotong tanaman
Pemilihan Icon
• Secara konsep dan visual berbeda dengan icon yang lain
– Print preview dan zoom??
• Mewakili tema dari aplikasi yang ditempati
– Sesuai dengan themes dari aplikasi
• Tipe yang konsisten (serumpun)
– Disket untuk save di Office
Images
• Tidak hanya sebagai pemanis pada suatuinterface → kadang menjadi komponen utamayang mewakili ide dan gagasan desainer
• Tetapi kadang juga dilematis→ gambar terlalumenyolok
Pemilihan Images
• Standarisasi
– format gambar yang telah umum
• Konsistensi
– ukuran, format, dan tema yang akan ditampilkan
• Komprehensif
– Mudah dimengerti oleh pengguna
– Ukuran jika ditempatkan pada resolusi yang berbeda
Pemilihan Images
• Deskriptif– Desain web → alternate text jika gambar gagal
ditampilkan
– Dekstop→ keterangan yang mendeskripsikan gambar
• Navigasi– Berikan petunjuk khusus untuk gambar navigasi→
mapping
• Minimalisasi– Penggunaan yang berlebihan (ukuran atau kuantitas) → lamban dan menyebalkan
Pemilihan Images
• Thumbnail– Thumbnail pada picture viewer
• Animasi– Jika perlu→ dekoratif
– Berlebihan→ waktu delay yang lama
• Extraneous– Gambar yang relevan dengan tujuan aplikasi
– Gambar makanan di aplikasi jenis word processing??
Screen Element
• Merupakan hal yang perlu diperhatikan baikaplikasi desktop maupun desain web.
• Menurut Galitz (2002), terdapat 10 macamprinsip screen element yang harusdiperhatikan dalam proses desain.
Screen Element
• Balance– Penyusunan komponen di layar seimbang antara kiri
kanan, dan atas bawah
• Symmetry– Paling sering dilanggar– Kesimetrisan sebuah desain memperhatikan tiap
elemen di setiap sisi bagian layar.
• Regularity– Penciptaan sebuah desain dengan ukuran yang normal
dan standarisasi penggunaan ukuran dan jarak antarkomponen
Screen Element
• Predictability– Penyusuan komponen yang sederhana dan familiar →
mudah ditebak oleh pemula
• Sequentiality– Penglihatan akan tertuju ke satu tempat yang dianggap
atraktif.• Kontrol yang lebih terang• Elemen terisolasi• Gambar dibanding teks• Warna yang menyolok• Kontrol yang lebih besar• Bentuk yang tidak standar
Screen Element
• Economy– style pada font
– Warna
– Pengaturan yang tidak berlebihan
• Unity– Tidak memberikan jarak yang berlebihan dalam
sebuah desain aplikasi
– Jika komponen tidak terlalu banyak biarkan besarform apa adanya
Screen Element
• Proportion
– Square → 1 : 1
– Square root of two → 1 : 1,414
– Golden rectangle → 1 : 1,618
– Square root of three → 1 : 1,732
– Double square → 1 : 2
Screen Element
• Simplicity– Keseragaman
• Proses alignment yang tidak terlalu banyak• Bentuk komponen yang familiar
• Groupings– Penggelompokan komponen berdasarkan fungsi dan
penataan visual yang efisien– Beberapa macam grouping :
• Simple grouping• Boxed grouping• Background grouping
Response Time
• Pengguna berharap aplikasi dapatmemberikan response time yang secepat-cepatnya
• Response time lambat ( > 14 detik)
– Pengguna melakukan aktivitas yang lain
PROJECT II
Buatlah aplikasi dengan model user interface (Menu dan
Filling in Form Dialogue) sesuai dengan Prinsip Desain
IMK dengan menu sesuai kebutuhan masing-masing studi
kasus dan menu standar yang harus ada ialah sebagai
berikut :
1. Input Data
2. Lihat Data
3. Cari Data
4. Edit Data
5. Hapus Data
6. Cetak Data
PROJECT II
PEMBAGIAN KELOMPOK DAN STUDI KASUS:Kelompok 1:
1761004 & 1761008 → Aplikasi Ekspedisi
Kelompok 2:
1761001 & 1761005 → Aplikasi Tour dan Travel
Kelompok 3:
1761002 & 1761013 → Aplikasi Perpustakaan
Kelompok 4:
1761003, 1761007, & 1761009 → Aplikasi Restaurant
Recommended