1. Design Phase intro & User Interface Design (Ch 8)

2. 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

3. 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)

4. User Interface Design
Chapter 8

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

6. 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

7. 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

8. 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:

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

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

11. 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

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

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

14. Detailed Report

15. Summary Report
Aggregate Functions
CrossTab

16. Exception Report

17. Control Break

18. Drill Down Capability
Reports
Graph

19. Turnaround Document

20. …More User Interface Design Tips
Chapter 8

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

22. 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

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

24. 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

25. 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

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

27. Dashboards: School District

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