INTERAKSI MANUSIA DAN KOMPUTER

Astrid Lestari Tungadi, S.Kom., M.TI.

PRINSIP

DESAIN

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

Teori Desain1 1. Tipografi

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

• Old Style Faces→ serif yang melengkung di bagian bawah

• Contoh: Garamond

Old Style

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

Teori Desain1

2

1. Tipografi2. Color Caring

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

Teori Desain1

2

3

1. Tipografi2. Color Caring3. Icon

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

Teori Desain1

2

3

4

1. Tipografi2. Color Caring3. Icon4. Images

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??

Teori Desain1

2

3

4 5

1. Tipografi2. Color Caring3. Icon4. Images5. Screen Element

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

Balance vs Unbalance

Symmetry vs Asymmetry

Regularity vs Irregularity

Screen Element

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