1. Interface DesignPart 1: User Interface Chapter 7

2. Outline • Overview of Design • What is "Design"? • Design activities • Interface Design • UI defined • User-centered design • HCI • How to Start UI Design • Dialogs & Storyboard • Interaction methods • Design Guidelines • Forms • Webpages • Other interfaces

3. Where are we?

4. What is Design? • Analysis – Determining Requirements (WHAT) • Design - Determining the Solution (HOW) DESIGN "the Bridge" ANALYSIS IMPLEMENTATION "Requirements gathering" "Construction" • Involvement • Less user involvement • More technical specialists • Modeling the solution • The blueprint

5. SDLC Phase: Design • Core Process 4: Design system components • Environment (Ch 6) • User Interfaces (Ch 7) • System Interfaces (Ch 7 ) • Application architecture & software (Software- Ch 10 & 11) • Database (Ch 12) • System controls & Security (Ch 12)

6. User Interface UI = SYSTEM to the user • inputs & outputs that directly involve a human user/actor • User-Centered Design • Focus on the users • Ensure Usability • Use Iterative development • Human-Computer Interaction (HCI) • A field of study concerned with the efficiency and effectiveness of user interaction with computer systems, human-oriented input and output technology, and psychological aspects of user interfaces

7. How to Start UI Design • Start with Use Cases & use case descriptions! • May have been grouped by subsystem

8. How to Start UI Design • Group use cases into a Menu Hierarchy

9. How to Start UI Design • Determine your Navigation • Use MENUs to organize use case functionality • Design an overall menu hierarchy • subsets for different users • Different types of users might have different menus

10. Storyboarding • "Check out shopping cart" use case Can also use Visio 2010 – Wireframe Diagram

11. Interaction Methods Command Line Form Menu Natural Language Object-based “Give me a list of all orders in the Northwest region that have not been processed on time.”

12. UI Design Guidelines • First, know the… • User • Use Case(s) • Sequence • Guidelines • Visibility (of controls) • Affordance (of controls) • Consistency • Shortcuts • Feedback • Yield Closure • Error Handling • Reversal of Actions • Reduce Short-Term Memory Load • Reduce Information Overload Cust Id: 187465

13. UI Design Guidelines • For each Form • Application name • Form title/purpose • Layout • Consistency • Grouping • UI & Paper Form match 

14. UI Design Guidelines • Formatting • Fonts and colors • Tab order • Arrangement of controls • Perfect alignment & spacing  Layout Toolbar Alignment Spacing Order Make Same Size Center in Form Tab Order

15. UI Design Guidelines • Provide Navigation • Form Navigation • Record Navigation Help Facility Free of spelling & grammatical errors

16. UI Design: Windows Forms • Interface Layout and Formatting • Consistency, labels and headings • Controls • Data Entry • Text box, List box, Combo box, Radio buttons, Check boxes • Navigation • Ribbon, Menu bar, Tool Strip, Button, etc. • Support Controls • Minimize, maximize, close, scroll bars, resize

17. UI Design: Webpages • Design Considerations • Consistency – CSS • Multi-media • Performance Considerations • Users with Disabilities • Assistive technologies • Text-to-speech & voice-recognition utilities • adapts user interfaces to the special needs of persons with disabilities • Make it easy to find information • Page titles, Search facility • Site Map, Photos • Links, Bread crumb trails

18. UI Design: Other • Design Considerations • Screen size • Keyboards • Touch screens • Network capacity • App design guidelines • Toolkits Handheld Devices Kiosks