clean up Profile/Account IA

[chadwhitacre]

Over on #3220 it has surfaced that our IA around profiles and accounts is confused. Currently we treat Account as a private subset of Profile, when it would be more user-centric to treat Profile as a public subset of Account (cf. #3220 (comment)). Any given user experiences Gratipay as a whole encompassing both public and private parts, so we should organize our IA with Account as the whole and Profile as a part thereof.

Current:

Profile
  Profile
  Members
  Receiving
  Giving
  History
  Widgets
  Account
  Events

Initially Proposed:

Account
  Dashboard
  Profile
    Basics
    Giving
    Receiving
    Members
  History
  Widgets
  Settings
  Events

Evolving Target:

Dashboard /
  Profile       /$username
  Members               /members
  Giving                /giving
  Receiving             /receiving
  Account → Settings
    Settings            /settings
    History             /history
    Widgets             /widgets
    Events              /events

Steps:

• Rename Account to Settings (rename Account to Settings #3254)
• Move Dashboard, History, Widgets, Settings, and Events up to second-level nav, which is currently unused under Account
• move Settings, History, Widgets, and Events under Account (aaaaaand account #3256)
• implement a proper dashboard at / (disentangled from Profile)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[chadwhitacre]

I believe this would also address the Dashboard issue lingering from ... #2938, was it?

[ESWAT]

@whit537 By "second-level nav" do you mean in the sidebar, or should a new .nav be created somewhere near the existing one to act as a parent?

[chadwhitacre]

@ESWAT I'm referring to the sidebar nav, yes. I think we'll want to revisit the presentation of that nav downstream of #3063, but that's out of scope here.

[Changaco]

The profile pages use the sidebar so if you put the Account nav there then when you click on Profile the nav disappears. That's bad UI design IMO. I think modifying the top nav is a better idea, using dropdowns where necessary.

[chadwhitacre]

Account renamed to Settings in #3254.

[chadwhitacre]

Here are some other IAs for comparison:

GitHub

News Feed /     
                /settings → Account
    Account settings    /admin
    Emails              /emails
    Notification center /notifications
    Billing             /billing
    SSH keys            /ssh
    Security            /security
    Applications        /applications
    Repositories        /repositories
    Organizations       /organizations
  $User         /$username
    $Repo               /$repo
      Issues                    /issues
      Pull Requests             /pulls
      etc.

Twitter

Home    /       
  Notifications /i/notifications
  Messages      (modal)
  Discover      /i/discover
                /settings → Account
    Account             /account
    Security and privacy /security
    Password            /password
    Cards and shipping  /payments
    Order history       /orders
    Mobile              /add_phone
    Email notifications /notifications
    Web notifications   /web_notifications
    Muted accounts      /muted_following
    Blocked accounts    /blocked
    Design              /design
    Apps                /applications
    Widgets             /widgets
  Following     /following
  Followers     /followers
  $User         /$username
    Following           /following
    Followers           /followers

Facebook

Wall    /
  Timeline      /$username
    About               /about = ?section=overview
      Overview          ?section=overview
      Work and Education ?section=education
      Places You've Lived ?section=living
      Contact and Basic Info ?section=contact-info
      Family and Relationships ?section=relationship
      Details About You ?section=bio
      Life Events       ?section=year-overviews
    Friends             /friends
    Photos              /photos
    etc.
  Settings      /settings = ?tab=account
    General     ?tab=account
    Security    ?tab=security
    Privacy     ?tab=privacy
    Timeline and Tagging ?tab=timeline
    Blocking    ?tab=blocking
    Notifications ?tab=notifications
    Mobile      ?tab=mobile
    Followers   ?tab=followers
    Apps        ?tab=applications
    Ads         ?tab=ads
    Payments    ?tab=payments
    Support Dashboard /support
    Videos      ?tab=videos

[chadwhitacre]

I note that in all three cases, /settings is at the root, not under /$username/settings.

[chadwhitacre]

The basic structure of all three of GitHub, Twitter, and Facebook, is:

Stream  /
  $User         /$username
  Settings      /settings

[Changaco]

IMO URLs are out of scope, they only matter to developers.

[chadwhitacre]

If we take that as a standard, then our target should be:

Dashboard /
  Profile       /$username
    Members             /members
    Giving              /giving
    Receiving           /receiving
  Settings      /settings
    History             /history
    Widgets             /widgets
    Events              /events

To switch to /settings we would need to implement sudo (#3238) so admins could still admin.

[chadwhitacre]

IMO URLs are out of scope, they only matter to developers.

To an extent. Readable, logical URLs are better than unreadable, illogical URLs.

[chadwhitacre]

I scrapped the second todo and added a third.

[chadwhitacre]

I updated the target IA to this:

Dashboard /
  Profile       /$username
    Members             /members
    Giving              /giving
    Receiving           /receiving
  Settings              /settings
    History                     /history
    Widgets                     /widgets
    Events                      /events

I don't want to block this on #3238, because that's too drastic a change to our current way of handling administration, and /$username/settings/history is a fine URL. I added a fourth todo.

[Changaco]

Why move History, Widgets and Events under Settings ? There are no Settings on these pages.

[chadwhitacre]

I find myself wanting to use the subnav as secondary nav and the sidebar as tertiary (it's hard to notice in the sidebar, but let's leave that aside for now). Here's a hackup:

[chadwhitacre]

To do this, we'd have to invert the nav on the About pages, which is the only place we're using the sidebar nav right now (right?). I've added that as a todo.

[chadwhitacre]

Why move History, Widgets and Events under Settings ? There are no Settings on these pages.

Then maybe we need a different name than Settings? How about:

Dashboard /
  Profile       /$username
  Members               /members
  Giving                /giving
  Receiving             /receiving
  Manage                /manage → Settings
    Settings                    /settings
    History                     /history
    Widgets                     /widgets
    Events                      /events

[chadwhitacre]

On GitHub, Twitter, and Facebook, Settings is a junk-drawer.

[chadwhitacre]

Or maybe just "More" or "Other"?

[chadwhitacre]

... or ...

[chadwhitacre]

I think Manage could work because everything under it would always be private, whereas the other options (Members, Receiving, Giving) could be public or private depending on user settings. In which case you'd only ever see the Manage option on your own profile. It wouldn't be displayed when viewing any other profile (except for admins, of course).

[chadwhitacre]

Or maybe we're back to Account?

[chadwhitacre]

[chadwhitacre]

Alright, I'm confused. :-)

[Changaco]

I don't like the nav of the About pages, but I don't think reversing it is the answer. I think we have one too many nav. We often don't know what to put in the sidebar, so I think we should use it for nav, maybe eve exclusively for that, and prune the subnav.

[chadwhitacre]

@Changaco Are you saying that we should have only two levels of hierarchy on the site, or that we should have nested nav in the sidebar?

[chadwhitacre]

I don't think we can get away with only two levels of hierarchy. For example, on the history page we have the years as a fourth level of hierarchy:

[chadwhitacre]

@Changaco Looks like I haven't actually said it yet: I see us moving toward getting rid of the sidebar.

[chadwhitacre]

We have two basic options for representing hierarchy in navigation:

• a nested tree on the left
• alternating top and side nav

[Changaco]

The history page's subnav is kind of an exception, originally I used a <select> but @rohitpaulk thought a nav was better. I merged it but eventually we may have to go back to a <select> because a year is still too much data for accounts like yours with lots of transactions, so we'll have to break it down further by month.

[chadwhitacre]

Tree

 Profile         whit537
 Members         =======
 Receiving      
 Giving          History
*Account*        -------
   Settings     
  *History*      content ...
    2015        
   *2014*
      December    
     *November*
      October
      etc.
    2013
    2012
 Widgets      
 Events

Alternating

 whit537
 -------
 Profile  Members  Receiving  Giving  *Account*

 Settings     History
*History*     -------
 Widgets      2015  *2014* 2013 2012
 Events
              December     content ...
             *November*
              October
              etc.

[Changaco]

There is a third option: instead of showing the whole nested tree you only show the current level, and a link at the top to go back up.

[chadwhitacre]

originally I used a <select>

A <select> can make sense as part of a filtering interface, and we may want to implement History this way, more along the lines of PayPal's Transactions interface:

However, our filtering interfaces are still going to be embedded within browsing interfaces.

There is a third option: instead of showing the whole nested tree you only show the current level, and a link at the top to go back up.

Sure, there are variants. My main point wrt navigation is that right now we have a hacked up variant of Alternating, and I think we should work within that for the purposes of this ticket. The main purpose of this ticket is to get the Profile/Account hierarchy right, within the existing navigation framework if possible. I think it's possible.

[Changaco]

Looks like I haven't actually said it yet: I see us moving toward getting rid of the sidebar.

Are you sure about that ? You added it a couple of months ago, I don't want to remove it now just to bring it back in a few months.

[chadwhitacre]

Are you sure about that ? We added it a couple of months ago, I don't want to remove it now just to bring it back in a few months.

If you're not comfortable changing the UI a lot over the next year, then we should start at the top with #3220 and do a more thorough job of designing our product from the top down, delaying implementation until we've thought through the whole thing top to bottom to top again. Since we're so starved for time and have gotten burned by over-large PRs, I guess I had figured on "thinking in code" and iterating towards the product we want. But maybe spending a couple weeks on design would be fruitful?

[chadwhitacre]

To do this, we'd have to invert the nav on the About pages

This is actually false if we're going for Alternating, because the About nav is already secondary on the side. The header nav at the very top is primary.

[Changaco]

I'm comfortable changing the UI, I just think that removing something to add it back later is a waste of time, so you should be sure that you really want to remove it.

Knowing the final result you're aiming for doesn't mean you have to get there with one giant PR, you can do it step by step. On the other hand if you're going step by step without knowing what you're aiming for, then you may end up wasting time with steps that revert previous steps.

[chadwhitacre]

Knowing the final result you're aiming for
On the other hand if you're going step by step without knowing what you're aiming for

This is the classic waterfall/agile dichotomy. As with other dichotomies, we have to pick a default and then tack on the other. I pick agile.

[chadwhitacre]

We talked on #3220 about splitting up Account further, so this is actually going end up more like this:

Dashboard /
  $User → Profile
    Profile     /$username
    Members             /members
    Giving              /giving
    Receiving           /receiving
    Account → Settings
      Settings          /settings
      Funding Instruments /funding-instruments
      Email             /email
      Notifications     /notifications
      Privacy           /privacy
      History           /history
      Widgets           /widgets
      Events            /events
      Close Account     /close

[Changaco]

Actually /funding-instruments is /exchanges, I have a branch almost complete for that.

[chadwhitacre]

Actually /funding-instruments is /exchanges, I have a branch almost complete for that.

Say more? I was thinking Funding Instruments is the credit card and bank account forms.

[Changaco]

Say more? I was thinking Funding Instruments is the credit card and bank account forms.

That's exactly what it is, "exchanges" is our internal name for money flows in and out of Gratipay, I think it should be called "Adding and Withdrawing Money" in the UI.

[chadwhitacre]

"exchanges" is our internal name for money flows in and out of Gratipay

Sure, but the money flows are different than the instruments by which the money flows. I guess I'll wait to see your PR. :)

[chadwhitacre]

I've moved the nav-related todos to #3258. I think we should land #3254 and #3256 and close this ticket.

[chadwhitacre]

(I started looking at inverting the About nav, but I decided that the quick way to do that wasn't worth it; we should rationalize our nav further before making changes to the About pages.)

[chadwhitacre]

Blocking this on #3258.