SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman C H A P T E R 17 Irwin/Mc. Graw-Hill USER INTERFACE DESIGN Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman A Classical Hierarchical Menu Dialogue Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Sample Dialogue Chart Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Pull-Down and Cascading Menus menu bar Cascading menu Ellipses indicates dialogue box Pull-down menu Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Pop-Up Menus Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Tool Bars Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Iconic Menus Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Consumer-Style Interface Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Hybrid Windows/Web Interface Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Instruction-Driven Interface Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Authentication Log-in Screen and Error Screen Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Help Tool Tip, Help Agent, and Natural Language Processing Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Help Wizard Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Automated Tools for User Interface Design & Prototyping • • • Microsoft Access CASE Tools Visual Basic Excel Visio Visual Basic Menu Construction Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Additional User Interface Controls in Visual Basic Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman 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/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved

SYSTEMS ANALYSIS AND DESIGN METHODS 6 th Edition Whitten Bentley Dittman Sound. Stage Partial State Transition Diagram Irwin/Mc. Graw-Hill Copyright © 2004 The Mc. Graw-Hill Companies. All Rights reserved