Interaksi Manusia dan Komputer

Understand the Principles

of Good Interface and
Screen Design

Ruth Madeline
221810589
Kelas 3SI2
Human Considerations in Technological
Interface and Screen Considerations in
Design Interface Design
• How to Discourage the User
• What Users Want • Graphical Systems
• What Users Do • Web Systems
• Interface Design Goals
• The Test for a Good Design
• Screen and Web Page Meaning and Purpose
• Organizing Elements Clearly and
Meaningfully
• Consistency

Outline
• Starting Point
• Ordering of Data and Content
• Navigation and Flow
• Visually Pleasing Composition
• Distinctiveness
• Focus and Emphasis
• Conveying Depth of Levels or a Three-
Dimensional
• Appearance
• Presenting Information Simply and
Meaningfully
• Application and Page Size
• Application Screen Elements
• Organization and Structure Guidelines
• Statistical Graphics
• Types of Statistical Graphics
• Flow Charts
Antarmuka yang baik

• Mencerminkan kemampuan,
kebutuhan, dan tugas penggunanya.
• Dikembangkan dalam batasan fisik
yang dipaksakan ditampilkan oleh
perangkat keras.
• Memanfaatkan kemampuan
perangkat lunak pengendalian secara
efektif.
• Mencapai tujuan bisnis dari sistem
yang dirancang.
 Pertimbangan Manusia dalam
Design Interface dan Layar Apa yang Pengguna
Lakukan
Cara Mencegah Timbul Masalah dari Pengguna
Semua gangguan dan putus asa harus Ketika berinteraksi dengan
dihilangkan dalam desain. komputer, pengguna:
• Mengidentifikasi tugas yang harus
dilakukan atau kebutuhan untuk
dipenuhi
• Memutuskan bagaimana tugas akan
diselesaikan atau kebutuhan terpenuhi
• Komputer Memanipulasi kontrol.
• Mengumpulkan data yang diperlukan
atau konten sementara menyaring data
Apa yang Pengguna Inginkan yang bermakna atau konten.
• Bentuk penilaian menghasilkan
Arah yang diinginkan adalah keputusan yang relevan dengan tugas
menuju kesederhanaan, atau kebutuhan.
kejelasan, dan dimengerti
 Interface Design Goals

1 Mengurangi pekerjaan visual.

2 Mengurangi pekerjaan intelektual.

3 Mengurangi kerja memori

4 Mengurangi kerja motor.

5 Mengurangi atau menghilangkan beban atau

instruksi dikenakan oleh teknologi
The Test for a
Apakah semua
Good Design elemen layar atau
halaman web
Interface terbaik
membuat semuanya
diidentifikasi oleh jelas pada layar.
isyarat lain selain
Sebuah tes sederhana untuk desain yang dengan membaca
kata-kata yang
baik membuat mereka
dapat didefinisikan?
 Screen and Web Page Meaning and Purpose

• Semua elemen antarmuka harus memiliki

makna untuk pengguna dan melayani
tujuan dalam melaksanakan tugas atau
memenuhi kebutuhan.
• Jika elemen tidak memiliki arti bagi
pengguna, maka disebut kebisingan
dalam antarmuka.
– Kebisingan adalah informasi tidak berguna.
Sinyal merupakan informasi yang berguna
– Kebisingan mengurangi kejelasan layar atau
halaman Web
– Tujuan dalam desain adalah untuk
meminimalkan kebisingan dan memaksimalkan
sinyal
S
Fokus perhatian
Menyediakan titik
pengguna pada
awal yang jelas di
bagian yang paling
sudut layar yang
penting dari sebuah
kiri atas.
layar atau halaman.
• Menampilkan Tekstual
Melihat dan menampilkan informasi tekstual, biasanya
mata satu langkah pertama ke tengah kiri atas layar, dan
kemudian dengan cepat bergerak melalui layar searah
jarum jam
• Menampilkan grafis dan Web
orang mengambil keuntungan dari detail visual seperti

Starting •
ruang putih atau komponen yang menonjol mencolok
dari komponen lainnya.
Orang cenderung melihat teks pertama, bukan gambar.

Point
Jenis lebih besar mendominasi tipe yang lebih kecil.
Mengubah informasi ditinjau sebelum informasi non-
berubah.
 Ordering of Data and Content
• Bagilah informasi ke unit yang logis, bermakna, dan masuk akal.
• Diatur oleh derajat keterkaitan antara data atau informasi.
• Memberikan pemesanan unit layar informasi dan unsur-unsur yang diprioritaskan sesuai dengan
harapan dan kebutuhan pengguna.
• Beberapa kemungkinan yang termasuk skema pemesanan
 Konvensional.
  Urutan digunakan.
  Frekuensi digunakan.
  Fungsi.
  Pentingnya.
  Umum ke spesifik.
• Bentuk kelompok-kelompok yang mencakup semua kemungkinan.
• Pastikan bahwa informasi yang harus dibandingkan adalah terlihat pada saat yang sama.
• Pastikan bahwa informasi hanya relatif terhadap tugas-tugas pengguna atau kebutuhan disajikan
pada layar.
 Ordering Web Pages
• Menetapkan tingkatan fungsi sangat penting.
• Tempatkan informasi penting di dekat bagian atas situs Web.
• Tempatkan item penting di bagian atas halaman.
• Mengatur informasi secara jelas.
• Menempatkan item penting secara konsisten.
• Memfasilitasi pemindaian.
• Buat Struktur untuk memudahkan dalam membandingkan.
 Navigation and Flow
Memberikan informasi pemesanan Pencarian, elemen atau kontrol
layar dan elemen-elemen yang yang paling penting dan paling
memiliki irama, mata membimbing sering digunakan simpan di
seseorang dalam layar. bagian kiri atas.
Mendorong urutan gerakan alami.
Meminimalkan pointer dan jarak
gerakan mata.

Melalui fokus dan penekanan, berurutan, Mempertahankan aliran, atas-ke-bawah

kiri-ke-kanan.
perhatian langsung ke item yang
1. Kritis.
2. Penting.
3. Sekunder. Membantu dalam navigasi melalui layar
4. Peripheral. oleh Pengelompokan unsur-unsur, atau
Menggunakan batasan.

Ketika kelompok informasi yang terkait

harus patah dan ditampilkan pada layar
terpisah, memberikan istirahat di titik
logis atau daerah di arus informasi.
Tab melalui jendela di urutan logis dari
informasi yang ditampilkan.
Perintah locate tombol di akhir urutan
pesanan tabbing.
 Visually Pleasing
Composition
????

– Balance
 Memberikan – Symmetry
komposisi visual – Regularity
atau estetika yang – Predictability
memiliki kualitas
– Sequentiality
berikut
– Economy
– Unity (Kesatuan)
– Proportion
– Simplicity
– Groupings
Visually Pleasing Composition (example)

13
Visually Pleasing Composition (example)

14
Visually Pleasing Composition (example)

15
Visually Pleasing Composition (example)

16
Visually Pleasing Composition (example)

17
 Kontrol layar individu, dan kelompok kontrol,
harus memiliki perseptual yang berbeda.

Distinctiveness
(Kekhususan) Layar control , Field and group borders, Buttons
• Sebaiknya tidak menyentuh perbatasan jendela.
• Sebaiknya tidak saling menyentuh satu sama lain

Label Tombol tidak harus menyentuh tombol

perbatasan.

Layar elemen berdekatan harus ditampilkan

dalam warna atau nuansa kontras yang cukup
satu sama lain
Focus and Emphasis (tekanan)
• Tekankan komponen secara visual
• Untuk memberikan penekanan, gunakan teknik seperti :
1. Kecerahan lebih tinggi.
2. Polaritas terbalik atau video terbalik.
3. Jenis Huruf yang Berbeda. Berkedip.
4. Aturan garis dan kotak atau bingkai di sekitarnya. Warna. Ukuran yang lebih besar.
5. Animasi.
6. Penentuan posisi.
7. Bentuknya khas atau tidak biasa.
8. Isolasi.

• Hilangkan penekanan pada elemen yang kurang penting.

• Minimalkan kekacauan layar.
• Dalam desain halaman web:
1. Menarik perhatian ke konten baru atau yang diubah.
2. Pastikan teks halaman tidak kewalahan oleh latar belakang halaman.
 Menyampaikan Tingkat Kedalaman atau
Tampilan Tiga-Dimensi

Gunakan highlighting, shading, dan teknik
lain untuk mencapai penampilan tiga-
dimensi.
Selalu berasumsi bahwa sumber
cahaya berada di sudut kiri atas
layar.
Tampilan command button di atas bidang
3 layar
2
Display screen-based controls on, atau
terukir atau diturunkan di bawah, the
4 screen plane.
1
Perspektif jangan berlebihan dan hindari
5 • Menggunakan perspektif untuk elemen
noniteraktif.
• Memberikan detail terlalu banyak.
Presenting Information Simply and Meaningfully

Legibility - Informasi terlihat dan dapat dibedakan.

Readability - Informasi dapat diidentifikasi, ditafsirkan, dan menarik.

Sajikan informasi dalam bentuk yang dapat digunakan - Terjemahan, transposisi, dan
referensi ke dokumentasi tidak diperlukan untuk menafsirkan dan memahami informasi.

Memanfaatkan fitur tampilan yang kontras - Untuk menarik dan menarik perhatian
ke elemen layar yang berbeda.

Typography
Buat garis visual - Tersirat dan eksplisit, untuk membimbing mata. Font Types and Families,
Font Size, Font Styles
and Weight, Font Case,
Defaults, Consistency,
Bersikaplah konsisten - Dalam tampilan dan penggunaan prosedural. Text Backgrounds
Application and
Page Size Sajikan jumlah informasi yang tepat untuk tugas
tersebut.
• Terlalu sedikit tidak efisien.
• Terlalu banyak itu membingungkan.

Sajikan semua informasi yang diperlukan untuk melakukan

tindakan atau membuat keputusan di satu layar, jika
• Scrolling dan Paging memungkinkan

• Jumlah Informasi untuk Orang tidak harus mengingat sesuatu dari satu layar ke layar
berikutnya.

Disajikan Batasi tingkat kepadatan layar atau jendela tidak lebih dari
sekitar 30 persen.
• Kertas & Pembacaan
Layar Sediakan fasilitas sederhana untuk
mencetak dokumen hard copy
Application Screen Elements
• Title • Headings
• Windows • Section Headings
• Judul pada semua jendela harus • Subsection or Row Headings
berada di atas • Field Group Headings
• Web Pages
• Special Symbols
• Semua halaman web harus memiliki
judul pada title bar browser dan pada • Instructions
isi halamannya sendiri.
• Completion Aids
• Judul pada title bar browser dan judul
• Required and Optional Data
pada halaman harus konsisten
• Judul harus : Deskriptif, Unik , • Lists
bermakna dan berbeda dari halaman
web lainnya • Keying Procedures
• Keystrokes
• Captions/Labels • Tabbing
• Data Fields • Manual Tab versus Auto Skip
• Control Caption — Data Field Differentiation • Keying Rules
• Control Caption — Data Field Justification
• Data Output
• Laporan
• Tabel
Application Screen Elements (example)
Application Screen Elements (example)
Application Screen Elements (example)
Application Screen Elements (example)
Application Screen Elements (example)
Application Screen Elements (example)
Organization and Structure
Guidelines
• Layar Entri Informasi dan Modifikasi
(Percakapan) – Grid
• Entri Teks dari Dokumen Sumber –
Layar Dokumen Sumber yang Khusus
• Layar tampilan / Read-only –
Organization
Penyajian Data
Pengaturan Data
Justification Data
Tampilan Data
Organization and Structure Guidelines
example
 Statistical Graphics
• Grafik statistik adalah data yang disajikan dalam format grafis.
• Grafik statistik harus memiliki kualitas sebagai berikut:
Tujuan dan penggunaan grafik harus jelas.
Jenis grafik harus dikenali.
Jenis grafik harus membantu pengguna memahami data yang lebih mudah.
Data harus diformat dan disajikan dengan benar.
Data harus diformat dan disajikan untuk audiens yang menggunakan.
Grafik harus menghindari distorsi dengan menceritakan kebenaran tentang data.
• Components of a Statistical Graphic : axes, scales, an area, a title and a legend or key,
• Data Presentation
• Axes
• Scales and Scaling
• Proportion
• Lines
• Labeling
 Types of Statistical Graphics
• Curve and Line Graphs : can be used to show
relationships between sets of data defined by two
continuous variables.
• Surface Charts :If the data being depicted by a curve or
line represents all the parts of a whole, consider
developing a surface or area chart,
• Scatterplots : can be used to show relationships among
individual data points in a two-dimensional array.
• Bar Charts : can be used to show a few differences
between separate entities or to show differences in a
variable at a few discrete intervals.
• Segmented or Stacked Bars : If both the total measure
of a value and its component portions are of interest,
consider using segmented or stacked bars.
• Pie Charts :can be used to show an apportionment of a
total into its component parts
Types of Statistical Graphics example
Types of Statistical Graphics example
 Technological Considerations in
Interface Design

Graphical
Systems

Desain layar harus Desain layar harus

kompatibel dengan kompatibel dengan
kemampuan sistem, kemampuan :
termasuk : • Platform sistem sedang
• System power. digunakan.
• Screen size. • Alat pengembangan dan
• Screen resolution.
•
implementasi yang digunakan.
Display colors.
• Fitur tampilan lainnya. • Panduan style platform yang
digunakan.
 Technological Considerations in
Kesesuaian:
Interface Design
- Desain untuk browser paling umum.
- Akun untuk perbedaan browser.
Sistem operasi:
Web - Desain untuk sistem operasi populer.
Systems Kecepatan koneksi:
- Desain untuk kecepatan koneksi yang paling umum digunakan.
Ukuran dan resolusi monitor:
- Desain dalam batas-batas area gambar-aman untuk semua browser.
- Desain untuk resolusi layar yang umum digunakan.
Font:
- Gunakan font yang dapat ditampilkan di berbagai browser.
Warna:
- Gunakan warna yang sukses di berbagai browser dan platform.
- Gunakan palet 216 warna.
Versi:
- Buat beberapa versi yang mendukung banyak browser.
Selalu sediakan versi text-only version.
Memanfaatkan sniffer browser.
 • Downloading
Berikan waktu pengunduhan halaman
yang cepat, tidak lebih dari 8 hingga 10
Pertimbangan Web Lainnya detik per halaman

• Currency:
Other Web jaga informasi situs web tetap terkini

Considerations • Page printing:

Sediakan fitur untuk mencetak bagian
halaman.

• Pemeliharaan:
Pastikan pemeliharaan situs web yang
mudah.
 The User Technology Profile Circa 2006
Profil Pengguna Teknologi Sekitar tahun 2006

Bailey (2001) mengemukakan bahwa ketika tidak mungkin mendesain untuk semua pengguna, karena
pertimbangan biaya, jadwal, atau personel, mendesain untuk karakteristik komputer di atas setidaknya
akan memenuhi kebutuhan sebagian besar pengguna.
EXAMPLE OF
SCREENS
Kontrol pada layar PRINT MERGE dibuat sangat buruk. Kotak teks File terletak cukup jauh dari kotak list file yang terkait.
Apa fungsi tombol Naik? Ini sebenarnya terkait dengan kotak Direktori. Ini tentu tidak jelas. Perhatikan urutan gerakan
mata yang diperlukan melalui layar ini, seperti yang diilustrasikan oleh garis yang ditarik di antara kontrol yang berurutan.
Ini sangat tidak efisien.
• Tulisan Orientation tidak sejajar tulisan lainnya
• Tidak efisien
Kotak centang dan radio button pada layar EKSPOR dikelompokkan dengan sangat buruk.
• Harusnya kotak centang dikelompokkan
• Kotak daftar/list tidak memiliki keterangan.
• Keseimbangan layar juga buruk, dengan area terbuka yang luas di bagian kanan atas layar.
Tampilan layer yang baik, kecuali untuk kotak centang tunggal di pojok kiri bawah. Tetapi layar ini memang memiliki dua
masalah.
• Pertama, tajuk, dalam kasus campuran dan dipusatkan di kotak grup, bersaing secara visual dengan informasi di dalam
kotak untuk mendapat perhatian user. Akan jauh lebih baik untuk membedakannya secara visual dari teks dan data.
• Kedua, kotak grup di sekitar lima kontrol teratas juga harus disertakan.
Penyelarasan kontrol yang sangat buruk pada layar entri /
modifikasi informasi dari sistem perbankan.
• Tidak ada grouping
• Tidak ada penjelasan/caption
Layar entri / modifikasi informasi yang dirancang dengan
benar. Ini berisi pengelompokan dengan kotak grup,
perataan kontrol, perataan kanan dari semua teks, Judul tiap
bagian yang dikapitalisasi.
THANK YOU