dusk-network / dusk-network/explorer
explorer: Improve Accessibility of Latest Transactions Section / All Transactions CTA on Mobile
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 4
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Description:
On mobile, it is hard to access the Latest Transactions section / All Transactions CTA. The user has to scroll down quite a lot to find out about the existence of the Transactions, as shown in the video, which is not ideal.
https://github.com/dusk-network/explorer/assets/34094428/294f2927-e9fa-4fcf-a68e-b99e1298d82f
On desktop, Blocks and Transactions are displayed side-by-side, giving them equal prominence. However, on mobile, the Transactions are hidden, reducing their visibility and importance.
Steps to Reproduce:
- Open the app on a mobile device.
- Navigate to the home page.
- Scroll down to find the Transactions section.
Expected Behavior:
The Latest Transaction section and the CTA for All Transactions should be easily accessible without excessive scrolling.
Current Behavior:
Users need to scroll significantly to discover the Transactions section.
Possible Solutions:
- Display fewer blocks/transactions on the home page when on mobile. This is the easiest solution but not optimal as it doesn't address the core issue.
- Add buttons before the statistics pane for Transactions and Blocks on mobile. These buttons can scroll to the respective sections on the home page, making the CTA for All Blocks/Transactions more accessible. This will also ensure users are aware that Transactions exist as a separate entity.
- Add buttons before the statistics pane for Transactions and Blocks on mobile, but make them open the Transactions/Blocks page directly. This would require redesigning the mobile nav bar to ensure Blocks and Transactions are not hidden in the hamburger menu. The hamburger icon can be replaced with a search icon, and the current nav bar panel on mobile can be repurposed for search functionality only.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by opening the explorer home page on a mobile device and reproducing the scrolling problem described in the issue. Review how Blocks and Transactions are presented on mobile, then choose and implement an approach that makes the Latest Transactions section and All Transactions CTA easy to discover without excessive scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend, mobile-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100