OpenUI
@openui
I decided to explore a UX lift for /nounspace (@nounspacetom) in my own time. I like the product a lot but I think the visual hierarchy can be improved a little. Goal was to have a less busy visual hierarchy that also keeps full focus on the feed as that is the key feature of the product. To achieve the goal I consolidated the navbar to the top - breaking it into three sections. Search, icon based navigation and then personal user info/actions like notifications and messages. This gives a bit more context to each icon or action in terms of its placement. For example, the message and notification icon is closer to the profile icon. While the cast or plus icon is at the centre of the navigation items which is a popular UX trend, for example, with Zora. Continued...
5 replies
3 recasts
13 reactions
OpenUI
@openui
Onto the page now, I have placed the profile metadata on the left and the feed section on the right side (taking up majority of the screen). The rounded edges and the full bleed view of the feed section keeps the focus totally on the feed while still having the context of the profile info if needed. At the same time the page reads top to bottom and left to right. The navigation at the top directs the user onto the page and then once on the page the user reads left to right, meaning he has access to the profile info right away and then instantly is attracted by the feed. As the page also reads top to bottom, the user instantly has access to the feed and the navigation controls (tabs) associated with the feed which in the earlier design weren’t as focused due to the stacking of the profile metadata, tabs and the feed.
1 reply
0 recast
3 reactions
OpenUI
@openui
This layout also clears up space for more profile metadata info and actions since that space can now be vertically scrolled. As seen in the example, there is now space for links. This space can also be used for buy buttons or token info as seen on other Nounspace Pages.
1 reply
0 recast
3 reactions