better page titles and breadcrumb navigation

[nylira]

Page titles for index pages like Validator Profile, Delegate Profile, Proposal, Block etc. need to have a section title as well as a page title. (Related to #180 -- if we implement this proposal we don't need the back button anymore).

VALIDATOR PROFILE
Jordan Bibla

So users can tell what sort of page they're viewing.

We also want to implement a breadcrumb navigation at the bottom of the page, looking something like this

Validators > Jordan Bib... > Bonded Atoms
Proposals > Is this a rea... > 45 Comments

Historical discussion below:

[14:14]
Jordan Bibla was the icon different for every page? we also discussed having the back arrow there...

i don't remember pulling the icons, though i vaguely remember thinking that they didn't correspond to the sidebar (no icons in the sidebar) and they weren't particularly memorable (helpful)...

i read a blog post (looking for it now) about dropbox's redesign and how they removed so many icons from their app because they weren't actually as useful as they thought (nobody remembers what the icons represent) and because they add visual noise.

do you feel like the icons add a lot of value?

[14:17]
Peng Zhong Yeah, I agree with the icons not being too memorable -- we were using generic icons from materials. Icon or not though, we need some way of telling the user that they are on a Delegate's profile page, or a Validator's profile page -- at a glance. Options are like "Delegator: Jordan", or Jordan (Delegator), or [icon] Jordan, or Jordan (subtitle Delegator)

The purpose is the same as the Lock, Globe, or Magnifying Glass in web browser URL fields, an instant categorization for the user

Or we could implement some sort of breadcrumb, like Delegators > Jordan, and have the former element be clickable. That way we can ditch the Back button too.

[14:25]
Jordan Bibla you raise a good point.

i think i would have the page title (above the line) be the generic name of the page ("Validator Profile") ... and the h2 below the line would be the name of the validator ("Jordan"). this would be good information architecture in my mind.

breadcrumbs would be really nice too — but i think we'd have to remove the titles from above the line in place of the breadcrumbs (which i think would be cool — though i'd have to see it to be sure).

of all the options, what would your preference be?

[14:28]
Peng Zhong
I like your first option, validator profile (above in small text), jordan (below in large text)

The breadcrumb could be a bar on the bottom of the page, and we can limit the width of each segment of the breadcrumb

Using the breadcrumb as the page header results in issues where pages with long titles really mess with the breadcrumb layout.

I'll make an issue for this with our discussion 🙂

[14:30]
Jordan Bibla
awesome. sounds great!

[faboweb]

@jbibla still needed?

[jbibla]

nope.