1. UI Design – Part2

2. Dashboards

3. Dashboards: School District

4. Creating a Dashboard Critical Success Factors
Key Performance Indicators (KPIs)
KPI1
KPI2
KPI3

5. Dashboards: TXU's MyEnergy

6. GUI Controls

7. Visual Studio Controls
Menus &Toolbars
MenuStrip
ToolStrip
StatusStrip
Containers
GroupBox
Panel
TabControl
Data Entry/Selection
TextBox
CheckBox
RadioButton
ComboBox
ListBox
MonthlyCalendar
DateTimePicker
NumericUpDown
Tabular Data
DataGridView
BindingNavigator
Other
Label
Button
PictureBox

8. Form to Form Navigation
Dates
Tables/Lists
DataGridView
Panel
DateTimePicker
MonthlyCalendar
Record Navigation
BindingNavigator = record navigation bar
TabControl
Other
NumericUpDown

9. Customer Complaint System Sprint 1
An Example: from Models to UI Design

10. 1. Need to know the Functionality
Use Case Diagram

11. 2. Need to know the Use Case Details
Use Case Description
Activity Diagram
Actor looks up a customer, and the system displays the customer’s profile info as well as their recent service history. Actor enters complaint details and selects the related service in which the issue occurred. The system stores the complaint details, and sets the complaint status to open.

12. 3. Need to know the Data
Domain Class Diagram

13. 3. Create a Mockup
Wireframe Diagram

14. Customer Complaint Form
Customer Complaint System
Complaint Information
12345
Complaint No:
Shirt
Item Type:
Tear
Category:
Shirt has a visible 3 inch tear on the back. Customer states that it occurred here.
Description:
Expectation:
Clean
Fix
Refund
Status:
Open
Active
Resolved
Denied
283
Service No:
Sanchez
Last Name:
First Name:
Nancy
Address:
One Bear Place
City:
Waco
State: TX
Zip:
76798
Customer Profile
Start Date:
06/01/2000
Phone:
#Complaints: 2
12.5 yrs
Date
Ord# DC TR LD
Price
Service History
11/05/18
321 5
$13.99
10/18/18
121 3 1
$32.99
10/02/18
101 12 7
$42.99
09/27/18 93
$19.99
09/18/18 71 9
$21.23
11/01/18
$24.87
New…
Customer Complaint Form

15. Customer Complaint Form
Customer Complaint System
Complaint Information
12345
Complaint No:
Shirt
Item Type:
Tear
Category:
Shirt has a visible 3 inch tear on the back. Customer states that it occurred here.
Description:
Expectation:
Clean
Fix
Refund
Status:
Open
Active
Resolved
Denied
283
Sanchez
Last Name:
First Name:
Nancy
Address:
One Bear Place
City:
Waco
State: TX
Zip:
76798
Customer Profile
Start Date:
06/01/2000
Phone:
New…
#Complaints: 2
12.5 yrs
Date
Ord# DC TR LD
Price
Service History
11/05/18
321 5
$13.99
10/18/18
121 3 1
$32.99
10/02/18
101 12 7
$42.99
09/27/18 93
$19.99
09/18/18 71 9
$21.23
11/01/18
$24.87
Service No:

16. Customer Complaint Form
Customer Complaint System
Complaint Information
12345
Complaint No:
Shirt
Item Type:
Tear
Category:
Shirt has a visible 3 inch tear on the back. Customer states that it occurred here.
Description:
Expectation:
Clean
Fix
Refund
Status:
Open
Active
Resolved
Denied
283
Sanchez
Last Name:
First Name:
Nancy
Address:
One Bear Place
City:
Waco
State: TX
Zip:
76798
Customer Profile
Start Date:
06/01/2000
Phone:
New…
#Complaints: 2
12.5 yrs
Date
Ord# DC TR LD
Price
Service History
11/05/18
321 5
$13.99
10/18/18
121 3 1
$32.99
10/02/18
101 12 7
$42.99
09/27/18 93
$19.99
09/18/18 71 9
$21.23
11/01/18
$24.87
Customer Complaint Form
Service No:

17. Customer Complaint System Sprint 2
An Example: from Models to UI Design

18. Sprint 2: New Use Cases & Data
Use Case Description
Sprint 2: New Use Cases & Data
Actor looks up a customer and then a specific existing complaint. The system should display customer details, complaint details, and a log of previous resolution comments. The user then adds a note regarding the complaint. The system should create the resolution record along with a date timestamp and the note and associate this with the employee that entered the info. The resolution log should be updated to show this new note.

19. Customer Complaint Form
Customer Complaint System
Complaint Information
12345
Complaint No:
Shirt
Item Type:
Tear
Category:
Shirt has a visible 3 inch tear on the back. Customer states that it occurred here.
Description:
Expectation:
Clean
Fix
Refund
Status:
Open
Active
Resolved
Denied
283
Sanchez
Last Name:
First Name:
Nancy
Address:
One Bear Place
City:
Waco
State: TX
Zip:
76798
Customer Profile
Start Date:
06/01/2000
Phone:
New…
#Complaints: 2
12.5 yrs
Date
Ord# DC TR LD
Price
Service History
11/05/18
321 5
$13.99
10/18/18
121 3 1
$32.99
10/02/18
101 12 7
$42.99
09/27/18 93
$19.99
09/18/18 71 9
$21.23
11/01/18
$24.87
Customer Complaint Form
Service No:
BEFORE:

20. Customer Complaint Form
Customer Complaint System
Complaint Information
12345
Complaint No:
Shirt
Item Type:
Tear
Category:
Shirt has a visible 3 inch tear on the back. Customer states that it occurred here.
Description:
Expectation:
Clean
Fix
Refund
Status:
Open
Active
Resolved
Denied
283
Date
Emp
Notes
Resolution Log
11/05/18
John A.
Left cust msg
11/04/18
Sue B.
Offered cust refund
11/03/18
Cust called. Wants…
Add Note…
Sanchez
Last Name:
First Name:
Nancy
Address:
One Bear Place
City:
Waco
State: TX
Zip:
76798
Customer Profile
Start Date:
06/01/2000
Phone:
New…
#Complaints: 2
12.5 yrs
Ord# DC TR LD
Price
Service History
321 5
$13.99
10/18/18
121 3 1
$32.99
10/02/18
101 12 7
$42.99
09/27/18 93
$19.99
09/18/18 71 9
$21.23
11/01/18
$24.87
Customer Complaint Form
Service No:
Date:
AFTER:

21. Customer Complaint Form
Customer Complaint System
Complaint Information
12345
Complaint No:
Shirt
Item Type:
Tear
Category:
Shirt has a visible 3 inch tear on the back. Customer states that it occurred here.
Description:
Expectation:
Clean
Fix
Refund
Status:
Open
Active
Resolved
Denied
283
Date
Emp
Notes
Resolution Log
11/05/18
John A.
Left cust msg
11/04/18
Sue B.
Offered cust refund
11/03/18
Cust called. Wants…
Add Note…
Sanchez
Last Name:
First Name:
Nancy
Address:
One Bear Place
City:
Waco
State: TX
Zip:
76798
Customer Profile
Start Date:
06/01/2000
Phone:
New…
#Complaints: 2
12.5 yrs
Ord# DC TR LD
Price
Service History
321 5
$13.99
10/18/18
121 3 1
$32.99
10/02/18
101 12 7
$42.99
09/27/18 93
$19.99
09/18/18 71 9
$21.23
11/01/18
$24.87
Customer Complaint Form
Service No:
Date:
Customer Complaint System
11/06/2018
Employee:
Sue B.
Note:
Left another message for customer.
Enter Note:
Add Resolution Note
Save Note

22. Design Considerations

23. UI Design Considerations: Webpages
Consistency – CSS
Multi-media
Performance Considerations
Make it easy to find information
Page titles, Search facility
Site Map, Photos
Links, Bread crumb trails

24. UI Design Considerations: Screen Size, Keyboards, etc
Smart Phones
Screen size
Keyboards
Touch screens
Network capacity
App design guidelines
Toolkits
Kiosks

25. UI Design Considerations: Users with Disabilities
Americans with Disabilities Act (ADA)
HTML
Assistive technologies
Text-to-speech & voice-recognition utilities
adapts user interfaces to the special needs of persons with disabilities

26. Improve it!
Lose It! (2010)
Lose It! (2014)
Lose It! (2017)

27. UI Design Standards
For our project

28. UI Design Standards Professional Design Theme For each Form Perfection
Color Scheme
Fonts – types & sizes
Layout
Consistency location of controls
Grouping of related information
UI Form & Paper Form design must match
For each Form
Include the Application name
Include the Form title’s or purpose
Perfection
Perfect alignment of controls
Perfect spacing between controls
Tab order
No typos!
Labeling data
Right align the label next to the data.
Textboxes
Limit the use of textboxes for data entry.
Use textboxes only on interfaces with enter/update capability.
For interfaces that are read-only, use either labels for the data or textboxes that are set to be read-only.
Buttons
In VS, use standard buttons but add images for clarity.
On Mobile apps, an icon functioning as a button might be more appropriate.
Flags
Use small icons to highlight information. May include color coding.

29. UI Design Standards: Sorting & Filtering
Must allow for both single field and multi-field sorts!
Single-field Sort
This option applies only one sort field at a time with ascending and descending options.
Multi-Field Sort
This option applies many sort fields at once: primary, secondary, tertiary with ascending and descending options per field.
Clear Sorts
Allow user to clear all sorts that have been applied and start over
Must allow for quick & multi-field sorting!
Quick Filter
Display a few frequently-used filters on main screen.
Advanced/Multi-field Filters
Add more filters on pop-up screen or in a left/right panel.
Always allow users to add more than one filter.
Make it easy – use combo boxes, buttons, sliders.
Clear Filters
Allow user to clear all filters that have been applied and start over

30. UI Design Standards: Dates & Tables
For all Tables/Lists
Must always have a scroll bar, or scroll indicator (even if swiping)
Always show “Total # Records” and Total # of Records Shown” (if filtering)
Sorting: must include single field and multi-field sorting
Filtering: must include multi-filtering
Alignment of data in a table/list:
Field Names – centered
Data
Text – left
Numbers, Currency, & Dates – right
Equal # characters ALWAYS – center
For all Date Fields
You must use a DateTimePicker or a Monthly Calendar.

31. Useful UI Design Links
Microsoft's Common UI Controls and Text Guidelines
Apple's Human Interface Guidelines
Watch a Lucidchart Wireframe Demo - 2:36 min