Mobile UX improvements #49

New Issue

noah · 2024-09-24T04:22:30Z

noah commented

2024-09-24 04:22:30 +00:00

Some changes to the nonshy web layout to make it more friendly on mobile.

Current layout

On mobile:

The top bar shows the nonshy logo and buttons to the main features:
1. Chat (blue when people online + count of online chatters badge)
2. Forums
3. Gallery
4. Friends (yellow + badge on request)
5. Messages (yellow + badge on unread)
6. Sometimes: a yellow bell + badge icon on unread notifications
7. Sometimes: a green, red or both badge for admin notifications
The hamburger menu drops down the complete desktop top-nav of options.
- Several useful shortcuts are hidden under this menu: People, My Profile, My Dashboard (when the notifications button isn't present)
The top nav + hamburger menu scrolls away when the page scrolls down.

Screenshot:

Improvements

Mobile breakpoint

Top bar
- Fixed to the top of the screen as you scroll - but have it fade to invisible on scroll down, and reappear on any scroll upwards.
- nonshy logo on the left (maybe abbreviate to "ns" on mobile)
- Hamburger menu to the right (opens full desktop topnav bar like current)
Add a fixed bottom nav bar
- For quick nav buttons:
  1. Home (dashboard page)
  2. Chat
  3. Forums
  4. Gallery
  5. Friends
  6. Messages
  7. My Profile (circle face avatar)

Other niceties:

Back to top button that appears on scroll (mobile only?)

Some changes to the nonshy web layout to make it more friendly on mobile. # Current layout On mobile: * The top bar shows the nonshy logo and buttons to the main features: 1. Chat (blue when people online + count of online chatters badge) 2. Forums 3. Gallery 4. Friends (yellow + badge on request) 5. Messages (yellow + badge on unread) 6. **Sometimes:** a yellow bell + badge icon on unread notifications 7. **Sometimes:** a green, red or both badge for admin notifications * The hamburger menu drops down the complete desktop top-nav of options. * Several useful shortcuts are hidden under this menu: People, My Profile, My Dashboard (when the notifications button isn't present) * The top nav + hamburger menu scrolls away when the page scrolls down. Screenshot: <img src="/attachments/e4b36293-81be-4778-91c3-d72c525e4fc1" width="240"> # Improvements ## Mobile breakpoint * Top bar * Fixed to the top of the screen as you scroll - but have it fade to invisible on scroll down, and reappear on any scroll upwards. * nonshy logo on the left (maybe abbreviate to "ns" on mobile) * Hamburger menu to the right (opens full desktop topnav bar like current) * Add a fixed bottom nav bar * For quick nav buttons: 1. Home (dashboard page) 2. Chat 3. Forums 4. Gallery 5. Friends 6. Messages 7. My Profile (circle face avatar) Other niceties: * Back to top button that appears on scroll (mobile only?)

Screen Shot 2024-09-23 at 21.07.34.png

449 KiB

noah added the

enhancement

label 2024-09-24 04:22:30 +00:00

Sign in to join this conversation.