Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17 C H A P T E R USER INTERFACE DESIGN

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Klasifikasi User Expert User – User yg telah terbiasa memakai komputer –Menggunakan sebagian besar waktunya untuk mengolah aplikasi programs. –Bekerja dengan komputer secara kontinyu (tidak terputus-putus). –Disebut juga dedicated user. Novice User – sangat sedikit berpengalaman memakai komputer – Menggunakan komputer sekali-sekali, dan sederhana – Jarang dan tidak terus-menerus – disebut juga casual user.

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Interface Problems According to Galitz, the following problems result in confusion, panic, frustration, boredom, misuse, abandonment, and other undesirable consequences. –Jargon istilah yang dilebih-lebihkan –Rancangan yang tidak jelas –Kurang cakap –Tidak menjawab permasalahan yg dihadapi user –Desain yg tidak konsisten dengan user requirement

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Aturan dasar desain User Interface Pahamilah user anda dan tugas-tugas mereka. Libatkan user sejak awal dalam mendesain interface Lakukan test sistem dengan keadaan sebenarnya di tempat user. Gunakan pendekatan rancangan yang iteratif.

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Human Engineering Guidelines User amat memperhatikan kegiatan yg akan berlanjut –Beritahu user apa yg diharapkan oleh sistem –Beritahu user bhw data yg di-enter correctly. –Beritahu user bhw data tidak correctly. –Jelaskan alasan terjadinya a delay in processing. –Beritahu user apa proses completed / not completed. Instruksi dan message berada/muncul pada display area yang sama. Messages and instructions cukup meskipun jangan terlalu panjang agar user memahami.

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Human Engineering Guidelines (continued) Gunakan atribut yg ditampilkan secara bersama. Spesifikasikan nilai yang akan ditampilkan. Antisipasi kemungkinan error. Users tidak akan melanjutkan proses sebelum error diperbaiki. Jika terjadi kerusakan seharusnya komputer langsung terkunci, menghindari kesalahan input, and segera menghubungi analyst atau technical support.

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Guidelines for dialogue Tone and Terminology Dialogue – the overall flow of screens and messages for an application Tone: –Sederhana, kalimat dengan gramatika yg benar. –Jangan terlalu banyak memakai istilah/simbol yg funny –Jangan terlalu dasar. Terminology –Jangan terlalu banyak jargon. –Kurangi penjelasan yg tidak perlu. –Gunakan istilah sehari-hari. –Konsistensi diantara layar. –Hati-2 memakai instruksi, gunakan kata kerja.

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition User Interface Technology Operating Systems and Web Browsers –GUI –Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE –Growing importance of platform independence Display Monitor –Regular PC monitors –Non-GUI terminals –Growing importance of devices such as handhelds Paging – Displaying a complete screen of characters at a time. Scrolling – Displaying information up or down a screen one line at a time. Keyboards and Pointers –Mouse –Pens

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Graphical User Interfaces Styles and Considerations Windows and frames Menu-driven interfaces –Pull-down and cascading menus –Tear-off and pop-up menus –Toolbar and iconic menus –Hypertext and hyperlink menus Instruction-driven interfaces –Language-based syntax –Mnemonic syntax –Natural language syntax Question-answer dialogue

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition A Classical Hierarchical Menu Dialogue

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Sample Dialogue Chart

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Pull-Down and Cascading Menus menu bar Pull-down menu Cascading menu Ellipses indicates dialogue box

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Pop-Up Menus

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Tool Bars

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Iconic Menus

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Consumer-Style Interface

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Hybrid Windows/Web Interface

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Pertanyaan latihan (chapter 17) 1.Apakah yang dimaksud dengan user interface ? 2.Apa perbedaan expert user dengan novice user ? 3.Sebutkan 5 hal yg menyebabkan kesulitan user dalam menggunakan user interface (Galitz) 4.Jelaskan 4 aturan dalam mendesain user interface 5.Sebutkan faktor-2 human yg perlu dipertimbangkan sebagai pedoman dalam desain user interface 6.Apa yg dimaksud dengan dialog ? Pertimbangan apa yg perlu dalam mendesainnya ? 7.Desain user interface harus platform independence ? Jelaskan

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Pertanyaan latihan (chapter 17) 8.Sebutkan dua cara pendekatan dalam mengatur pembagian area layar monitor 9.Apakah yang dimaksud dengan function-keys ? Kegunaannya ? 10.Jelaskan perbedaan berbagai gaya dalam desain user interface 11.Sebutkan apa sajakah konstruksi dasar dari Graphical User Interface (GUI) ? 12.Jelaskan macam-macam menu 13.Jelaskan tahap dalam desain user interface ? Apa harus berurutan ? 14.Sebutkan tools untuk mendesain user interface

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Instruction-Driven Interfaces Language-based syntax is built around a widely accepted command language that can be used to invoke actions –SQL Mnemonic syntax is built around commands defined for custom information systems. –Commands unique to that system and meaningful to user Natural language syntax allows users to enter questions and command in their native language

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Instruction-Driven Interface

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Special Considerations for User Interface Design Internal Controls – Authentication and Authorization –User ID and Password –Privileges assigned to roles –Web certificates Online Help –Growing use of HTML for help systems –Help authoring packages –Tool tips –Help wizards –Agents – reusable software object that can operate across different applications and networks.

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Authentication Log-in Screen and Error Screen

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Help Tool Tip, Help Agent, and Natural Language Processing

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Help Wizard

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Automated Tools for User Interface Design & Prototyping Microsoft Access CASE Tools Visual Basic Excel Visio Visual Basic Menu Construction

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition Additional User Interface Controls in Visual Basic

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition The User Interface Design Process 1.Chart the user interface dialogue. State Transition Diagram– a tool used to depict the sequence and variation of screens that can occur during a user session. 2.Prototype the dialogue and user interface. 3.Obtain user feedback. Exercising (or testing) the user interface 4.If necessary return to step 1 or 2

Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition SoundStage Partial State Transition Diagram