Komputer: BAB 13 MENDESAIN USER INTERFACE

BAB 13 MENDESAIN USER INTERFACE

Judul Buku: Systems Analysis and Design in a Changing World, Fourth Edition

Penerjemah: Komarudin Tasdik

Slide 2: Tujuan Pembelajaran

  • Mendeskripsikan perbedaan antara user interface dan system interface
  • Menjelaskan mengapa user interface merupakan sistem untuk user
  • Membahas pentingnya tiga prinsip desain berorientasi user
  • Mendeskripsikan perkembangan historis dari bidang interaksi manusia dan komputer (Human-Computer Interaction [HCI])

Slide 3: Tujuan Pembelajaran (lanjutan)

  • Mendeskripsikan tiga metaphor interaksi manusia dan computer
  • Membahas bagaiman  visibility dan affordance mempengaruhi usabilitas
  • Mengimplementasikan delapan aturan emas desain dialog ketika mendesain user interface
  • Mempertimbangkan struktur sistem menyeluruh sebagai hirarki menu

Slid 4: Tujuan Pembelajaran (lanjutan)

  • Menulis scenario interaksi user dan komputer sebagai dialog
  • Membuat storyboard untuk memperlihatkan susunan bentuk yang digunakan sebuah dialog
  • Menggunakan UML class diagram dan sequenc diagram untuk mendokumentasikan desain dialog
  • Mendesain bentuk window dan bentuk browser yang digunakan untuk mengimplementasikan sebuah dialog
  • Mendaftar prinsip-prinsip kunci yang digunakan dalam web design

Slide 5: Gambaran Umum

  • User interface menangani input dan output yang melibatkan user secara langsung
  • focus pada interaksi di antara user dan komputer yang disebut interaksi manusia dan komputer (HCI)
  • metaphor untuk mendeskripsikan user interface
  • ptunjuk perkembangan berbasis usabilitas dan web
  • pendekatan untuk mendokumentasikan desain dialog, mencakup UML diagram dari pendekatan OO

Slide 6: Identifikasi dan Klasifikasi Input dan Output

  • diidentifikasi oleh analis ketika menentukan skup sistem
  • model requirement yang dibuat selama analisis
  • tabel event mencakup trigger untuk tiap event eksternal
  • trigger merepresentasikan input
  • output ditampilkan sebagai terspon terhadap event

Slide 7: Pendekatan Tradisional dan OO untuk Input dan Output

  • Pendekatan tradisional untuk input dan output
    • Ditampilkan sebagai aliran data pada diagram konteks, fragment data flow diagram (DFD), dan DFD detail
  • Pendekatan OO untuk input dan output
    • Ditentukan oleh pesan yang masuk dan meninggalkan sistem
    • Didokumentasikan dalam system sequence diagram (SSD)
    • Actor menyediakan input untuk banyak use case
    • Use case menyediakan output untuk actor

Slide 8: User versus System Interface

  • System interface –I/O meminta interkasi manusia yang minimal
  • User interface
    • I/O membutuhkan interaksi manusia
    • User interface merupakan segala sesuatu di mana end user kontak langsung ketika menggunakan sistem
    • Untuk user, interface adalah sistem
  • Analis mendesain system interface terpisah dari user interface
  • Membutuhkan keahlian dan teknologi yang berbeda

Slide 9: Memahami User Interface

  • Aspek fisik dari user interface
    • Perangkat disentuh oleh user, manual, dokumentasi, dan bentuk
  • Aspek perseptual dari user interface
    • Segala sesuatu yang user lain lihat, dengar, atau sentuh seperti objek screen, menu, dan button
  • Aspek konseptual dari user interface
    • Yang user ketahui tentang sistem dan fungsi logis dari sistem

Slide 10: Aspek dari User Interface

Lihat gambarnya langsung ke slide asli

Slide 11: Desain Berorientasi User

  • Fokus awal pada user dan pekerjaannya dengan memfokuskan pada requirement
  • Usability—sistem mudah dipelajari dan digunakan
  • Perkembangan iteratif  menjaga fokus pada user
    • Secara kontinyu kembali ke user requirement dan mengevaluasi sistem setelah tiap iterasi
  • Interaksi manusia dan komputer (HCI)
    • Studi end user dan interaksi dengan komputer
  • Rekayasa faktor manusia (ergonomis)

Slide 12: Field yang Berkontribusi terhadap Studi HCI

Lihat slide 12

Slide 13: Metaphor untuk Interkasi Manusia dan Komputer

  • Metaphor manipulasi langsung
    • User berinteraksi dengan objek pada display screen
  • Metaphor dokumen
    • Komputer dilibatkan dengan browsing dan entering data dalam dokumen elektronik
    • WWW, hypertext, dan hypermedia
  • Dialog metaphor
    • Sangat mirip dengan percakapan

Slide 14: Desktop methapor berbasis manipulasi langsung yang ditampilkan pada display screen

Lihat langsung slidenya

Slide 15: Document Metaphor yang ditampilkan seperti hypermedia pada web brosers

Slide 16: Dialog Metaphor mengekspresikan konsep pesan

Lihat langsung slidenya

Slide 17: Petunjuk untuk mendesain user interface

  • Visibility
    • Semua control harus tampak
    • Menyediakan feedback segera untuk menunjukkan kontrol sedang merespon
  • Affordance
    • Tampilan kontrol arus mendukung fungsinya –tujuan ia digunakan
  • Para pengembang sistem harus menggunakan standar dan petunjuk desain interface yang dipublikasikan

Slide 18: Delapan aturan emas untuk desain interface yang interaktif

  1. Berjuang untuk konistensi
  2. Memungkinkan user yang sering untuk menggunakan shortcut
  3. Menawarkan feedback informative
  4. Mendesain dialog untk yield closure
  5. Menawarkan penanganan error yang sederhana
  6. Membolehkan reversal yang mudah dari aksi-aksi
  7. Mendukung bagian internal dari kontrol
  8. Mereduksi load memori jangka pendek

Slide 19: Mendokumentasikan dialog design

  • Dilakukan secara simultan dengan aktivitas-aktivitas sistem lai
  • Berbasiskan input dan output yang membutuhkan interaksi user
  • Digunakan untuk menentukan hirarki menu
    • Memungkinkan user untuk bernavigasi ke tiap dialog
    • Menyediakan struktur sistem yang menyeluruh
  • Storyboard, protype, dan UML diagram

Slide 20: Desain Hirarki Menu Menyeluruh

Lihat langsung slidenya

Slide 21: Dialog dan Storyboard

  • Banyak metode exist untuk mendokumentasikan dialog
    • Deskripsi yang ditulis mengikuti aliran aktivitas seperti dalam desripsi use case
    • Naratif
    • Sketsa screen
    • Storyboarding—menampilkan rentetan sketsa display screen selama sebuah dialog

Slide 22: Storboard untuk downtown videos rent videos dialog

Lihat langsung slidenya

Slide 23: Dokumentasi dialog dengan UML diagram

  • Pendekatan OO menyajikan UML diagram
  • Deskripsi use case
    • Daftar langkah-langkah yang diikuti sebagai interaksi sistem dan user
  • Activity diagram
    • Mendokumentasikan dialog di antara user dan komputer untuk use case
  • System Sequence Diagram (SSD)
    • Actor (user) mengirim pesan ke sistem
    • Sistem mengembaslikan informasi dalam bentuk pesan-pesan

Slide 24: sequence diagram untuk RMO melihat dialog ketersediaan barang

Lihat langsung slidenya

Slide 25: Class Diagram Showing Interface Classes Making up ProductQueryForm

Lihat langsung slidenya

Slide 26: Sequence Diagram Showing Specific Interface Objects

Lihat langsung slidenya

Slide 27: Petunjuk untuk mendesain bentuk window dan browser

  • Tiap dialog mungkin membutuhkan beberapa bentuk window
  • Bentuk standar banyak tersedia
    • Windows: Visual Basic, C++, C#, Java
    • Browser: HTML, VBScript, JavaScript, ASP, Java servlets
  • Implementasi
  • Mengidentifikasi tujuan bentuk dan yang berhubungan dengan field data
  • Membangun bentuk dengan prototyping tool

Slide 28: Isu Desain Bentuk

  • Layout bentuk dan memformat konsistensi
  • Headings, labels, logos
  • Font sizes, highlighting, colors
  • Order of data-entry fields and buttons
    • Kunci data dan entri data (menggunakan kontrol standar)
    • Text boxes, list boxes, combo boxes, dan lain-lain
      • Navigasi dan support control
      • Membantu support—tutorials, indexes, context-sensitive

Slide 29: Petunjuk untuk mendesain website

  • Gambar dari petunjuk dan aturan untuk mendesain bentuk window dan bentuk browser
  • Website menggunakan
  • Komunikasi korporat
  • Informasi dan layanan pelanggan
  • Penjualan, distribusi, dan pemasaran
    • Harus bekerja secara seamless dengan para pelanggan 24/7

Slide 30: Sepuluh tindakan baik dalam web design

  • Meletakkan nama organisasi dan logo pada setiap halaman dan link ke homepage
  • Menyediakan fungsi search (pencarian)
  • Menggunakan headline yang jelas dan judul halaman sehingga jelas apa yang dimuat suatu halaman
  • Halaman terstruktur untuk membantu para pembaca menscannya
  • Menggunakan hypertext untuk mengorganisir informasi ke dalam halaman-halaman terpisah

Slide 31: Sepuluh tindakan baik dalam web design (lanjutan)

  • Menggunakan foto produk (preferably thumbnails), tapi menghindari cluttered and bloated pages yang menyebabkan load lambat
  • Menggunakan reduksi relevance-enhanced image; zoom in pada detail yang dibutuhkan
  • Menggunakan judul link untuk menyajikan user dengan preview ke halaman mana link itu akan berfungsi
  • Memastikan halaman-halaman itu dapat diakse oleh para user dengan ketidakmampuannya
  • Melakukan hal yang sama seperti yang diinginkan setiap orang karena para user berharap fitur-fitur tertentu

Slide 32: Desain untuk RMO Phone-Order Dialog

  • Langkah-langkah dialog model
  1. Mencatat informasi pelanggan
  2. Membuat order baru
  3. Mencatat rincian transaksi
  4. Membuat konfirmasi order
  • Pendekatan tradisional—menggunakan structure chart
  • Pendekatan OO—mengekspansi SSD mencakup bentuk-bentuk

Slide 33: Bentuk-bentuk yang dibutuhkan untuk RMO

  • Menu Utama
  • Pelanggan
  • Pencarian barang
  • Rincian produk
  • Ringkasan order
  • Pilihan pengiriman dan pembayaran
  • Konfirmasi order

Slide 34: Design Concept for Sequential
Approach to Create New Order Dialog

Lihat langsung slidenya

Slide  35: Design Concept for Order-Centered
Approach to Create New Order Dialog

Lihat langsung

Slide 36: Prototype Main Menu Form for Order-Centered Approach to Dialog

Lihat langsung

Slide 37: Order Summary and Product
Detail Forms

Lihat langsung

Slide 38: Completed Order Summary and Shipping Payment Forms

Lihat langsung

Slide 39: Desain Dialog untuk Web site RMO

  • Dialog dasar di antara user dan pelanggan mirip dengan representasi phone-order
  • Web site akan menyediakan informasi lebih banyak untuk user, lebih fleksibel, dan lebih mudah digunakan
  • Lebih banyak gambar produk dibutukan
  • Kebutuhan-kebutuhan informasi berbeda untuk pelanggan dan para pekerja phone-order
  • Petunjuk untuk visibility dan affordance digunakan untuk menyampaikan image perusahaan yang positif

Slide 40: Home Page RMO

Lihat langsung

Slide 41: Product Detail Page from RMO Web Site

Lihat langsung

Slide 42: Shopping Cart Page from RMO Web Site

Lihat langsung

Slide 43: Rangkuman

  • User interface adalah segala sesuatu yang kontak langsung dengan user ketika ia sedang menggunakan sistem
  • Secara fisik, perseptual, dan konseptual
    • Untuk banyak user, user interface adalah sistem
    • Desain berorientasi user berarti
    • Fokus dulu pada user dan pekerjaannya
    • Mengevaluasi desain untuk memastikan usabilitas
    • Mengimplementasikan perkembangan iteratif

Slide 44: Rangkuman (lanjutan)

  • User interface dideskripsikan dengan metaphor (desktop, document, dialog)
  • Petunjuk dan standar desain interface berasal dari banyak sumber
  • Desain dialog mulai dengan use case dan menambah dialog untuk kontrol integritas, user preferences, bantuan
  • Pendekatan OO menyediakan UML model untuk mendokumentasikan dialog desain, mencakup sequence diagram, activity diagram, dan class diagram

Link Terkait

Kumpulan Artikel Sistem Informasi (Komputer)

Kumpulan Artikel e-Government (Komputer)

One response to “Komputer: BAB 13 MENDESAIN USER INTERFACE

  1. Pingback: Archive for Satzinger -riandragon89

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s