dusk-network / dusk-network/explorer

explorer: Improve Accessibility of Latest Transactions Section / All Transactions CTA on Mobile

Open
#17 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

need:feedback need:specs
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:
  1. Open the app on a mobile device.
  2. Navigate to the home page.
  3. 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:
  1. 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.
  2. 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.
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.