Design Phase intro & User Interface Design (Ch 8)

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

SDLC Phase: Design Core Process 4: Design system components Environment (Ch 6) Application components (Ch 7 & 13) User interfaces (Ch 8) Database (Ch 9) Software classes (Ch 12, 13, 14)

User Interface Design Chapter 8

Outline User Experience User Interface UI Design Reports Design Principles of UI Design From Analysis to UI Design Reports Design

User Experience (UX) User experience (UX) All aspects of a person’s interaction with a software application. Actions, Responses, Perceptions, & Feelings (before, during, & after) UX vs Usability (user-friendliness) Usability – can the user accomplish their task UX – was the experience enjoyable

User Interface = SYSTEM The inputs & outputs that directly involve a human user/actor User-Centered Design Focus on the users Ensure Usability Use Iterative development It should encompass the principles of HCI 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 User Interface = SYSTEM to the user

Principles of UI Design Human Interface Objects (HIO) - a GUI control – click, double click, hover, etc Principles Visibility Affordance Consistency Feedback – “Record has been saved” Discoverability - click on an object to bring up hidden features Closure – clear beginning, middle, end Reversal of Actions Readability Fonts: size & color Reduce Information Overload Navigation Usability Provide Shortcuts Error Handling – don’t allow the system to crash (nor allow “dirty data”) Simplicity Reduce Short-Term Memory Load – Cust ID: 187465

From Analysis to UI Design 12:20 Fri 1st: Know the User! 2nd: Use your Use Cases & Use Case Descriptions!

From Analysis to UI Design Group use cases into a Menu Hierarchy

From Analysis to 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

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

Report Design Report Types Report Features Detailed Summary Exception Executive Report Features Control break Drill down

Detailed Report

Summary Report Aggregate Functions CrossTab

Exception Report

Control Break

Drill Down Capability Reports Graph

Turnaround Document

…More User Interface Design Tips Chapter 8

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

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

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

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, Numeric UpDown, MonthlyCalendar, DateTime Picker Navigation Ribbon, Menu bar, Tool Strip, Button, etc. Support Controls Minimize, maximize, close, scroll bars, resize

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

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

Dashboards: School District http://idashboards.com/

Creating a Dashboard Corporate Strategic Planning Mission, Goals Critical Success Factors Key Performance Indicators (KPIs) KPI1 KPI2 KPI3