1 / 35

UI Design – Part2

UI Design – Part2. Outline. Sorting vs. Filtering GUI Controls Designing UI for a Sprint – Customer Complaint System UI Design Considerations UI Design Standards – for this class Accessibility. Sorting vs Filtering. Sorting vs Filtering.

przybylski
Download Presentation

UI Design – Part2

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. UI Design – Part2

  2. Outline Sorting vs. Filtering GUI Controls Designing UI for a Sprint – Customer Complaint System UI Design Considerations UI Design Standards – for this class Accessibility

  3. Sorting vs Filtering

  4. Sorting vs Filtering Note: this is Excel – do not design your mobile app this way! • Useful for any list, table, electronic report, dashboard • Sorting - reorganizes • Filtering - reduces

  5. Multi-Field Sorting • Sort by Team (Asc) • Then By Position (Asc) • Then By Weight (Desc) • Then By Last Name (Asc) • Then By First Name (Asc) Primary Sort Field Secondary Sort Field Tertiary Sort Field Let the user choose this, don’t limit them! … quaternary, quinary, senary, septenary, octonary, nonary, and denary Provide flexibility!

  6. Multi-Field Sorting in Excel Primary Sort Field Secondary Sort Field Tertiary Sort Field Note: this is Excel – do not design your mobile app this way!

  7. Sorting vs Filtering – Review Online Examples Walmart.com Bestbuy.com American Airlines – aa.com Homes.com

  8. GUI Controls

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

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

  11. Customer Complaint SystemSprint 1 An Example: from Models to UI Design

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

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

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

  15. 3. Create a Mockup Wireframe Diagram Watch a Lucidchart Wireframe Demo - 2:36 min https://www.lucidchart.com/pages/examples/wireframe_software

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

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

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

  19. Customer Complaint SystemSprint 2 An Example: from Models to UI Design

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

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

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

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

  24. UI Design Considerations

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

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

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

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

  29. UI Design Standards For our project

  30. UI Design Standards Professional Design • Make it look professional! • All UIs must be designed on a device. • Include a Navigation bar/menu/slider • Every UI must include a Form Title • Pick a Color Scheme • Pick your Fonts & Font Sizes • Pick a Standard Layout • Consistent location of controls • Grouping of related information • Seek Perfection! • Perfect alignment of controls • Perfect spacing between controls • Tab order • No typos! GUI Controls • Labels • 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 • 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 denote important information. May include color coding.

  31. UI Design Standards: Sorting & Filtering SORTING - allow single & 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 allows the user to define more than one sort field, the order of the selected fields (primary, secondary, tertiary), and the sort order (ascending and descending). • Clear Sorts • Allow user to clear all sorts that have been applied and start over FILTERING - allow quick & multi-field sorting! • Quick Filter • Display a few frequently-used filters on the 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

  32. UI Design Standards: Tables & Date Fields Tables/Lists • Record Info – include: • Current Record • Total # Records • Total # of Records Shown (if filtering) • Scrolling • Include scroll bar, or scroll indicator (even if swiping) • Sorting – allow for single & multi • Filtering – allow for quick & advanced • Alignment • Field Names – centered • Data Values • Text – left • Numbers, Currency, & Dates – right • Equal # characters ALWAYS – center Date Fields • Use appropriate Date Contorl: • DateTimePicker • Monthly Calendar

  33. Useful UI Design Links Microsoft's Common UI Controls and Text Guidelines https://msdn.microsoft.com/en-us/library/windows/desktop/bb246433(v=vs.85).aspx Apple's Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

  34. Accessibility

  35. Accessibility • Colors • Colors used • Supplement color with icons • Alternative text – describing images, charts, table • Adding Subtitles to Videos

More Related