8/27/2010

IMK di Kurikulum 2008

Pengantar IMK

- APK -

8/27/2010 Fakultas Informatika IT Telkom 2

Tujuan Perkuliahan Kontrak Belajar

Setelah mengikuti mata kuliah ini mahasiswa dapat: • Jadwal:

1. Memahami pentingnya User Interface (UI) serta karakteristik UI – 3 SKS: 3 jam kuliah, 1 jam responsi (4 x 50 menit per minggu)

yang tepat untuk setiap aplikasi – 14 minggu (28 pertemuan)

– Toleransi keterlambatan??
2. Mengerti dan menerapkan proses desain UI untuk menghasilkan UI
• Penilaian:
yang berkualitas
– UTS 30%
3. Mengetahui tren-tren desain UI yang terkini – UAS 35%
– Tugas
T besar
b 20%
– Tugas, kuis 10%
– Kehadiran 5% (>=80%)
– Batas nilai akhir fleksibel (sesuai distribusi nilai tiap kelas)
• Tidak ada kuis/ tugas/ tugas besar susulan/ perbaikan/
tambahan
• Jika ditemukan indikasi plagiarism dalam tugas, nilai akhir
MK ini adalah E

Fakultas Informatika IT Telkom 3 Fakultas Informatika IT Telkom 4

Silabus Referensi

• Perkenalan, kontrak belajar, dan pengantar IMK 1. Galitz, Wilbert O. 2007. The Essential Guide to UI Design. Third
• Karakteristik antarmuka grafis dan web Edition.
• Proses desain UI: 2. Welie, martijn van. 2001. Task-based UI Design. SIKS Disertation
1. Memahami pengguna/ klien
Series No. 2001-6.
2. Memahami fungsi bisnis
3. Memahami prinsip2 desain antarmuka dan layar yang baik 3. Ballard, Barbara. 2007. Designing the Mobile User Experience. Little
4. Membuat menu sistem dan skema navigasi
5. Memilih tipe windows dan perangkat interaksi yang tepat Springs Design, Inc., USA.
6. Memilih kontrol layar yang tepat
4. Fox, Brent. 2005. Game Interface Design. Thompson Course
7. Menulis teks dan pesan dengan jelas
8. Memberikan umpan balik, panduan dan bantuan yang efektif Technology.
9. Internasionalisasi dan aksesibilitas
10.Membuat grafik, ikon, gambar, dan warna yang berarti 5. Kalbach, James. 2007. Designing Web Navigation. O'Reilly.
11.Organisasi dan layout windows serta halaman
12.Test, test dan retest
6. Cohen, Michael H., et al. 2004. Voice UI Design. Addison Wesley.
• Desain UI berbasis task 7. Coninx, Karin., et al. 2006. Task Models and Diagrams for UI
• Desain UI web dan perangkat bergerak Design. Springer.
• Desain antarmuka game

Fakultas Informatika IT Telkom 5 8/27/2010 Fakultas Informatika IT Telkom 6

1
 8/27/2010

HCI/ IMK HCI/ IMK ..

• Human-computer interaction is the study, planning, and • Perancang IMK harus memperhatikan beberapa faktor:
– apa keinginan dan harapan orang,
design of how people and computers work together so – apa batasan dan kemampuan fisiknya,

that a person’s needs are satisfied in the most effective way – bagaimana sistem penerimaan dan pemrosesan informasi mereka
bekerja, dan
(Galitz, 2007)
– apa yang dianggap menarik dan menyenangkan
• Human-computer interaction is a discipline concerned with the

design, evaluation and implementation of interactive • Perancang juga harus memperhatikan karakteristik
k kt i tik dan

computing systems for human use and with the study of batasan teknis dari perangkat keras dan perangkat
major phenomena surrounding them (Hewett et al, 1996) lunak komputer

8/27/2010 Fakultas Informatika IT Telkom 7 8/27/2010 Fakultas Informatika IT Telkom 8

IMK User Interface

• Manusia: • Komputer: • Antarmuka/ user interface (UI) merupakan bagian dari komputer
– fleksibel & mampu – tidak fleksibel / tidak
beradaptasi, mampu beradaptasi, dan perangkat lunaknya yang dapat dilihat, didengar,
– dapat belajar bagaimana – input harus dalam format
bekerja di lingkungan yang yang jelas & output harus disentuh, dan diajak bicara, baik secara langsung maupun
baru didefinisikan sebelumnya, dengan proses pemahaman tertentu.
– tidak dapat belajar,
– dapat didesain ulang • UI yang baik adalah UI yang tidak disadari, dan UI yang
memungkinkan pengguna fokus pada informasi dan task tanpa perlu
Interaksi mengetahui mekanisme untuk menampilkan informasi dan
melakukan task tersebut.
• Komponen utamanya:
Interaksi – Input
– Output
Manusia Komputer

Fakultas Informatika IT Telkom 9 Fakultas Informatika IT Telkom 10

Pentingnya Desain UI yang Baik Pentingnya Desain UI yang Baik ..

• Banyak sistem dengan fungsionalitas yang baik tapi tidak efisien, 1984 Apple Computer Inc membuat Macintosh;

membingungkan, dan tidak berguna karena desain UI yang brosurnya fokus pada UI.
ƒ Of the 235 milion people in America, only a fraction can use a
buruk
computer.. Introducing Macintosh for the rest of us.
• Antarmuka yang baik merupakan jendela untuk melihat kemampuan
ƒ Wouldn’t it make more sense to teach computers about people,
sistem serta jembatan bagi kemampuan perangkat lunak
instead of teaching people about computers?
• Desain yang buruk akan membingungkan, tidak efisien, ƒ Macintosh. Designed on the principle that a computer is a lot

bahkan menyebabkan frustasi more useful if it is easy to use.

ƒ The real genius is that you don’t have to be a genius to use a
Macintosh.

Fakultas Informatika IT Telkom 11 Fakultas Informatika IT Telkom 12

2
 8/27/2010

Pentingnya Desain UI yang Baik .. Sejarah IMK

Hasil penelitian: • Kebutuhan manusia akan komunikasi: written

language

• Pengguna bekerja 20% lebih produktif dengan layar yang spoken

language

sederhana movements and

gestures

• Pengguna layar yang dimodifikasi menyelesaikan transaksi 25%

• Kemampuan komputer untuk mendukung kebutuhan komunikasi
lebih cepat dan error berkurang 25% dari sebelumnya manusia tergantung pada kemudahan yang dirasakan manusia

• Window yang didesain dengan efektif menghemat $20,000 dalam menggunakannya

• Perkembangan IMK
dalam 1 tahun – Pengenalan GUI (Graphical User Interface)

• Fungsi searching yang diperbaiki dapat meningkatkan success – Perkembangan WWW (World Wide Web)
– Sejarah Desain Layar
rate hingga 15% dan waktu pencarian 50% lebih cepat

Fakultas Informatika IT Telkom 13 8/27/2010 Fakultas Informatika IT Telkom 14

Pengenalan GUI Pengenalan GUI ..

• 1970: penelitian di Xerox’s • 1974: Xerox mempatenkan mouse seperti yang dikenal sekarang.
Palo Alto Research Center • 1981: Star (Xerox) Æ double click, overlapping windows, 1024x768
memperkenalkan mouse, monochrome
pointing dan selecting, dan • 1983: Macintosh (Apple) dengan revolusi konsep antarmuka
GUI sebagai metode – Menggunakan desktop metaphor:
• Files seperti kertas
utama komunikasi
• Directories
Di t i seperti
ti folders
f ld
manusia-komputer.
– Drag and drop

Fakultas Informatika IT Telkom 15 Fakultas Informatika IT Telkom 16

Pengenalan GUI .. Pengenalan GUI ..

• 1985: Windows 1.0 (Microsoft) dan Amiga 100 (Commodore) • 1988: NeXTStep (NeXT), mensimulasikan layar 3-dimensi
• 1987: Macintosh II (Apple)Æ Macintosh berwarna; sedangkan X • 1989: beberapa GUI berbasis UNIX dirilis: Open Look (AT&T dan
Window semakin dikenal Sun), Motif for the Open Software Foundation (DEC dan HP)

8/27/2010 Fakultas Informatika IT Telkom 17 8/27/2010 Fakultas Informatika IT Telkom 18

3
 8/27/2010

Pengenalan GUI .. Kemunculan WWW

• Selama 1990-2000an: berbagai produk dan upgrade Microsoft dan • 1960-an J.C.R. Licklider (MIT) mengusulkan jaringan komputer
Apple global dan pindah ke DARPA (Defense Advanced Projects Research
Agency). Tahun 1969, ARPANET (Advanced Research Projects
Agency Network) mulai online menghubungkan 4 universitas.
• 1974 Bolt, Beranek, dan Newman merilis Telenet, versi komersil
pertama dari ARPANET
• Akhir 1970-an hingga 1980-an, dicetuskan TCP/IP sebagai bahasa
umum bagi komputer Internet
• 1982 dicetuskan istilah Internet

8/27/2010 Fakultas Informatika IT Telkom 19 Fakultas Informatika IT Telkom 20

Kemunculan WWW .. Kemunculan WWW ..

• 1991: Gopher, antarmuka friendly pertama, dibangun di University • 1994 Netspace
of Minnesota Navigator browser
• 1992 Delphi pertama kali menyediakan akses Internet online secara dirilis. W3C (WWW
komersil Consortium) dibentuk
untuk melakukan
• 1993 Mosaic diperkenalkan sebagai hypertext browser berbasis
standarisasi Web.
grafik pertama, yang dibuat oleh NCSA (National Center for
• 1995 Internet
Supercomputing Applications) di University of Illinois.
Explorer dan Opera
dirilis. Pada tahun ini
pula AOL,
CompuServe,
Prodigy, Yahoo dan
Lycos dicetuskan.
• 2003 Apple merilis
Safari versi 1.0
• 2004 Mozilla Firefox
diperkenalkan

Fakultas Informatika IT Telkom 21 Fakultas Informatika IT Telkom 22

Sejarah Desain Layar Sejarah Desain Layar ..

• Tampilan tahun 1970an • Tampilan tahun 1980an • Tampilan tahun 2000-an

• Tampilan tahun 1990an

Fakultas Informatika IT Telkom 23 Fakultas Informatika IT Telkom 24

4
 8/27/2010

Fakultas Informatika IT Telkom 25