Incorporate core UI/UX design patterns to improve view layout and design

[ducmle]

• [x] Study UI/UX patterns to choose most common patterns
• [ ] Design the patterns into the benchmark app
• [ ] Implement the patterns in the benchmark app
• [ ] Test the implementation

UI/UX patterns

URL: https://ui-patterns.com/ Focus on the following pattern categories. Pick at least 3 patterns per category.

1. Getting input: https://ui-patterns.com/patterns/getting-input/list
2. Navigation: https://ui-patterns.com/patterns/navigation/list
3. Dealing with data: https://ui-patterns.com/patterns/dealing-with-data/list

Getting input

Selected patterns:

1. Date range picker: need to support a range (lower, upper) of dates
2. Input feedback
3. Slider
4. Expandable input
5. Rating

Navigation

1. Navigation tabs
2. Navigation drawer
3. Dashboard
4. Searchable Accordion Menu = Accordion Menu + Auto Complete (see attached image): for navigation through view hierarchy of a module (a view and its descendant views)
5. Pagination
6. Carousel

Dealing with data

1. Copy box: applied to copy the value displayed on a view field
2. Auto complete + Search Filter: auto complete first then use filters on key attributes (when necessary) to narrow the search
3. Image zoom
4. Table filter: may need to summarise the values into ranges
5. Frequently Asked Questions (FAQs)

[LindaNguyen89]

test