EPIC: Ease of use

[matthewcm]

This epic focuses on implementing ease of use features for the crypto market single page application, including keyboard shortcuts, dark/light themes, filtering, pagination, live market summaries with WebSockets, accessibility improvements, and more.

Tasks

1. Implement keyboard shortcuts for navigation

• Identify key actions and navigation points in the app
• Design and implement keyboard shortcuts for these actions and navigation points
• Add a help section to the app to display available shortcuts

2. Create dark and light themes

• Design dark and light themes for the app
• Implement theme switching functionality
• Persist user's theme preference across sessions
• Respect system preferences and defaults

3. Implement filtering on data

• Add sort options to relevant data views #50
• Implement filtering functionality based on user inputs #51

4. Implement pagination for data-heavy views

• Identify data-heavy views that require pagination
• Implement pagination for these views to improve performance and user experience #49

5. Investigate WebSockets for live market summaries

• Research WebSocket integration with the app for live market data updates
• Design and implement WebSocket functionality for live market summaries

6. Improve accessibility with ARIA labels and screen reader captions

• Audit the app for accessibility improvements
• Add ARIA labels and screen reader captions where necessary #46

7. Provide adjustable font sizes

• Implement responsive market data on summary #47
• Ensure proper layout and design responsiveness with different font sizes

8. Implement graph labels for better data visualization

• Identify graphs and data visualizations in the app #48
• Design and implement clear and informative labels for these visualizations

Acceptance Criteria

• Keyboard shortcuts are implemented for key actions and navigation points in the app
• Dark and light themes are available and can be switched by the user
• Filtering functionality is implemented for relevant data views
• Pagination is implemented for data-heavy views
• WebSocket integration for live market summaries is investigated and implemented if feasible
• Accessibility improvements are made, including ARIA labels and screen reader captions
• Adjustable font sizes are available in the app
• Graph labels are added to data visualizations for better clarity

[matthewcm]

Some extra things / reminders for amazing UX.

Consistent design language: Establish a design system that defines the app's colors, typography, icons, and other visual elements. Use this design system consistently throughout the app to create a cohesive and polished appearance.

Intuitive navigation: Design clear and intuitive navigation patterns to help users easily find their way around the app. Use recognizable icons, labels, and navigation elements, and group related items together.

Clear hierarchy and layout: Organize content and UI elements in a clear and logical hierarchy, with proper spacing and alignment. Use visual cues like headings, subheadings, and separators to differentiate between sections and content types.

Accessibility: Ensure that the app is accessible to all users, including those with disabilities. Use ARIA labels, screen reader captions, and other accessibility best practices to make the app usable by people with diverse needs.

Responsiveness: Design the app to be responsive and adapt to different screen sizes and devices. Use CSS media queries, flexible layouts, and scalable graphics to ensure a consistent and optimized experience across various platforms.

Performance: Optimize the app's performance to provide a smooth and fast user experience. Minimize load times by compressing images, using efficient code, and implementing lazy loading where appropriate. Perhaps lazy loading on all summaries section depending on how I will be rendering this data.

User preferences: Allow users to customize the app to their preferences, such as adjustable font sizes, color schemes, and other settings that can enhance their experience. Toggles on the header? Some quick wins here.

Some References:

Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21/. These guidelines, developed by the World Wide Web Consortium (W3C), outline best practices for making web content accessible to people with disabilities.

Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders. This popular book provides practical advice on creating user-friendly websites and web applications.

[matthewcm]

Persisted Color settings in local storage.