1 / 18

Interface Design Part 1: User Interface

Interface Design Part 1: User Interface. Chapter 7. 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

maxine-mckay
Download Presentation

Interface Design Part 1: User Interface

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related