👨🏼‍💻 #Proposal-86: Navigation Implementation, Issues and Testing

in Steem Dev4 months ago

When I initially wrote about navigation 3 weeks ago, I expected a relatively quick implementation that involved duplicating the existing design from the Profile area into the Feeds area, as well as introducing a more intuitive link between the 2 different areas of the site.

As you already know, this led to some critical feedback that redirected me to a different path and a completely new implementation.

As expected, this also led to varying options and opinions upon how the design could be delivered, in particular with regards to mobile devices. This then led to some intensive research into Mobile Design Patterns and a preferred way forward - with visibility being the core concept in the deliverable.

Knowing that the Profile section has too many sub-sections to have every option visible (8), I asked you for your opinions on which sub-sections are most important to you.

So this post brings us to the output of that work, an initial progress report for its implementation, some issues encountered that need resolving as well as the opportunity for you to take part in testing the mobile version of the site.


Sub-section Priority

Sub-sectionAverageMedian
Posts1.31
Blog3.32
Notifications3.43
Replies3.64
Comments3.83.5
Communities6.16
Payout6.97
Settings77

Posts was by far the "go-to" sub-section within a users' profile with Communities/Subscriptions, Payouts and Settings the lowest ranked.

There wasn't much to separate Blog, Comments, Replies and Notifications.

There's an intuitive link between Blog, Posts, Comments and Replies that makes me believe that there should be a "grouping" of these elements - i.e. put them next to each other and not separate them by putting Notifications inbetween. There's also the consideration that the Avatar displays the "Notifications Badge" which smartphone users are familiar with as an indication that there's "unread messages" (or similar) that require attention - increasing the likelihood that "Notifications" will be noticed via this route. With this in mind, I've ordered the sub-sections as follows;

  1. Blog - User + Resteemed Generated Content
  2. Posts - User Generated Content
  3. Comments - User Generated Content
  4. Replies - Generated in reply to User Generated Content
  5. Notifications - Of User and Tagged Content
  6. Subscriptions - User Generated List
  7. Payout - Repetition of User Generated Content
  8. Settings - User

Mobile Implementation

This information allowed me to implement a "Visibility" driven, "Thumb-first" design for mobile devices.

The Primary Tabs are always visible and will not change as you navigate through the site (other than to highlight the section that you're in). If you're not logged in and select "My Profile", you'll be prompted to log in.

The implementation of this is consistent with sites like Twitter, as well as the majority of native iPhone apps.

Diverting slightly from the secondary tabs being at the top of the page, I experimented with them being closer to the Primary Tabs and was surprised by how intuitive the result felt.

Whilst it would be fun to rebrand Steemit, I used their existing colour pallette and chose appropriate colours for the design (I created a "Reference" CSS file to make this easier).

image.png

Night Mode:
My Profile:

As you'll see from the Profile implementation, there's room for 4 sub-sections and the "More..." option which is why I grouped the 4 visible options as mentioned earlier. The use of "More..." (rather than a Horizontal scroll that is often used) is consistent with the "Visibility" that I've prioritised. Selecting "More..." opens an additional menu with the remaining options.

As the user scrolls down the page, consistent with the hiding of the Header bar, the secondary navigation also hides until the user chooses to scroll up again or navigates to another page.

More...:
Secondary Navigation Hides:

The expected smooth transitions of menus changing, showing, hiding, etc. have also been implemented.


Testing

If you'd like to test out the new interface on your mobile device, please contact me on Discord - hopefully the you can find me via the revamped usernames but please reply if not (thegorilla). I'm limiting the testing which is why I'm not inviting everybody.


Desktop

Whilst I've been working to a mobile-first-thumb-friendly-visibility-driven design, I've also implemented a first phase of this for desktop users.

image.png

The implementation displays icons from screen widths of 760 pixels or greater and anything smaller picks up the mobile version (the 760px snapping point is easy to update).

Amongst all of the various challenges that I've met along the way and not spoken about, the desktop has presented even more.

I want the solution that I implement to change the layout purely within the CSS and not have a "show for desktop" / "show for mobile" in the components. This has worked well so far but whilst I wanted the Navigation component to sit within the "App.jsx" (the parent display file), the way that the rest of the page is compiled (specifically the User Profile Display) probably means that I'll need to implement the Navigation Component within Lower level components (i.e. within the Pages). Not impossible but certainly not as clean as I would have initially liked.

This is something I'll continue to look at in the coming days.

Footer-Top-blue.png

Please let me know what you think and also ping me on Discord if you'd like first sight of the Mobile Version.

Sort:  
 4 months ago 

Many thanks for the update.
It's really not easy to check the many variants against each other and choose the "best" one, but I think your approach is very good.

there's room for 4 sub-sections and the "More..." option

For understandable reasons, you have "downgraded" the notifications and referred to the avatar. Should it then remain so that clicking on the avatar opens a menu with which the profile submenus can still be accessed?
I find the "More..." menu practical.

Why don't you use the icons from the desktop version for the mobile version? As far as I know, it is recommended to avoid text and use icons for such menus. I would therefore use the icons from the desktop version for the mobile version and then leave out the text.

 4 months ago 

Should it then remain so that clicking on the avatar opens a menu with which the profile submenus can still be accessed?

I wondered the same thing myself and it feels intuitive to take the user directly to the Notifications section. The reason that I haven't done anything with it yet is the inclusion of "Switch to Night Mode" and "Logout" that also live here. So clicking the Avatar will still have the menu - unless there's a better place for Night Mode and Logout to move to. What do you think?

Why don't you use the icons from the desktop version for the mobile version?

The reason I opted for text over icons with the smaller screen links back to the idea of "don't make me think" and user expectations. If a user sees text - "Blog", "Posts", "Comments", "Replies", etc. they'll have a good idea of where that link will take them and what they'll see. Whilst saving space, an icon would need to be learned before that understanding is there. Ok for users who start their experience on a desktop but in countries where the mobile phone is their sole internet access point, I want to remove as many barriers to adoption as I possibly can...

Harking back to the much loved Twitter example, they use icons for their primary navigation and then text for the secondary - "Home", "Search", "Notifications" and "Messages" depicted by a house, magnifying glass, bell and envelope - which is all well established iconography. We have the idea of "Explore", "Profile" and "Wallet" which aren't as well established so to help new users, I think that it makes sense to keep the accompanying text.

 4 months ago (edited)

So clicking the Avatar will still have the menu

I think it should definitely remain that way. I'm not that familiar with these things, but I would like to see an alternative method. The logout button is also intuitive to find there.

One more thing: Although it is not yet in the current Condenser code and I don't know whether it will ever be integrated by those responsible (I feel the same way as you), please also keep the bookmarks in mind. Further progress has suffered a little due to my Hivemind troubleshooting, but the basic function is almost finished...
I think the bookmarks could be placed in the "More" menu and in the avatar menu.

the idea of "don't make me think"

Right. When I read about this "rule" the other day, I questioned it for this reason. I would see exceptions in the following cases:

  • the icon is very clearly recognisable,
  • the function behind it is immediately obvious or
  • it is a generally known icon (for example, the floppy disc for saving - although no one in the younger generation is likely to have ever seen a floppy disc in the wild, almost everyone knows the function of this icon).

In this respect, you could dispense with the text only if you use correspondingly effective icons. Otherwise, the text is rather helpful.

 4 months ago (edited)

I think the bookmarks could be placed in the "More" menu and in the avatar menu.

Thank you for reminding me - it had slipped my mind. I agree with your thoughts, aligning the functionality with the idea of "Subscriptions / Communities", it would make sense for Bookmarks to live alongside Subscriptions.

In this respect, you could dispense with the text only if you use correspondingly effective icons. Otherwise, the text is rather helpful.

I agree. If an icon is instantly recognisable, like your example, then the user doesn't have to think because it's known to them (so the rule still works 😉) - it also applies to text where (especially) in finance, jargon is used and the user will often ask "what does that mean??"

It's tricky to get the best balance of removing elements and ease of understanding. The good thing is that removing the text or icon is an extremely simple change that could be done in either the JSX or CSS file - the elements are in the HTML and CSS is currently used to show/hide them.

This post has been featured in the latest edition of Steem News...

 4 months ago 

Thank you as always 👍🏼

TEAM 1

Congratulations! This post has been upvoted through steemcurator04. We support quality posts, good comments anywhere, and any tags.
Curated by : @o1eh



 4 months ago 

Thank you as always

SmilesHappyGIF.gif

Coin Marketplace

STEEM 0.19
TRX 0.14
JST 0.029
BTC 65051.86
ETH 3163.86
USDT 1.00
SBD 2.54