IA changes for devhub front page

RESOLVED FIXED

Status

Marketplace
Developer Pages
RESOLVED FIXED
5 years ago
3 years ago

People

(Reporter: wenzel, Assigned: ednapiranha)

Tracking

Points:
---

Details

(Whiteboard: u=dev c=devhub p=1 s=2013.2)

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
In bug 832531, Tony proposes an iteration on the devhub IA.

Tony, please give some guidance on the specific changes to happen to the front page.
Created attachment 712012 [details]
homepage tweaks

This png shows the changes I'm proposing for the homepage, based on the new new IA and the results of the usability test we ran last month. This should also solve Bug 820224. 

Major changes: 

* Header reverts to the Marketplace style header that Bram suggested, and it includes text links for: Submit an App, Reference (a link to https://developer.mozilla.org/en-US/docs/apps per Bug 838831), Partners (a link to the partners page that was just finished). The header also drops the white sub menu with icons. 

* Confusing CTAs removed from the main "Design > Build > Publish" feature. The wording of the buttons was confusing to all of the users we tested with, especially the button for the publish section which they routinely confused as an entry point to the submit an app workflow. A listing of the top level content under each section replaces the buttons to 1) make the IA more transparent to users and 2) allow quick access to topics of interest, instead of forcing users through the pages we've designated as "landing pages."

* "Join the Community" and "Submit your App" features redesigned. The existing "submit your app" with the marketplace logo was missed by all but one of our participants in the usability study. The section has been made larger and given a heading to call more attention to it. The "join the community" section is much the same, just moved to the other side (in line with the 2nd column for the content lower on the page) and the CTA link is changed from an email address to our new Partners page. 

Everything else remains the same.
The PSD with layers is here: https://www.dropbox.com/s/mup06cukav828h4/homepageTweaks.psd
(Reporter)

Comment 3

5 years ago
Thanks! Jen: This is ready to go. I realize the small links underneath the section won't go anywhere until those pages exist, but anyway...
Assignee: asantos → jfong
(Reporter)

Updated

5 years ago
Duplicate of this bug: 839572
(Reporter)

Updated

5 years ago
Duplicate of this bug: 835574
(Assignee)

Comment 6

5 years ago
updating points to trigger scrumbugs (doesn't seem to be pulling this in)
Whiteboard: u=dev c=devhub p=2 s=2013.2 → u=dev c=devhub p=1 s=2013.2
(Assignee)

Comment 7

5 years ago
Tony, just to be clear you want these navigation changes on the header in core Dev Hub pages - so if a user leaves and lands on the Submit an App page (which isn't really part of our pages), the header goes back to a different version https://marketplace.firefox.com/developers/submit/app/manifest

When a user logs in, they will get a dropdown of other options for their account currently in the header (under the settings icon) and we won't have that with the new proposal, unless we use text with the dropdown (e.g. Settings or My Profile). But this might look weird if we leave to Submit an App and the icon reappears.

Thoughts?
Hey Tony, this looks good. I'm also curious about Jen's questions above. I'd be helpful if you could provide additional mocks for the following:

1. header for authenticated users on https://marketplace.firefox.com/developers/
2. header for anonymous users at https://marketplace.firefox.com/developers/submit/app
http://cl.ly/image/2Y233A121K0G/o
3. header for authenticated users at https://marketplace.firefox.com/developers/submit/app
http://cl.ly/image/0r3j1R0Q2G3h/o

Many thanks for improving the IA!
Prior to implementing this change set we need the following addressed:

- Dev Hub top nav should not be obtuse in appearance when compared to the developer dashboard/console.

- How does a user navigate through the three sections when they are already on one? Do we keep the sub nav with the three section links? Assuming we offer nav to get from section to section while in the content of any one of the three, where does the user land when they travel from one to another?

- Partner in its current form is basically not a pitch to partners, it is a redundant, albeit more lengthy pitch to developers to submit apps - why is a pitch page, secondary to the landing page (which hopefully is compelling to developers already), given global nav space?

- What happens when the user is logged in? Without specifying how the logged-in state affects the look/layout of the top nav, this is not complete.
(Reporter)

Updated

5 years ago
Flags: needinfo?(asantos)
Tony, I just mocked up what it'd look like to add the text below the icons for authenticated users: http://cl.ly/image/2q3w1x2Z1E3r/o

Let me know your thoughts!
Re: "obtuse in appearance" I think this is less obtuse than what is currently there, two icons that have no tool tips and no text labels and a weird sub-nav that takes you to what, to outsiders, appear to be random pages in "design", "build" and "publish" 

Re: "navigate through the three sections" this is handled in bug 839664 with the changes to the side navigation on all the devhub content pages by introducing a multi-level accordion component. 

Re: partner page, what was the point of even building it if we're not going to link to it? If calling it "Partners" in the top isn't appropriate, where is?

Re: header state for core devhub pages (not the submission flow) on logged in. In my mind the "sign in" link changes to the icon with the drop-down menu. That's how it works right now, and since I think any departure from that icon should be consistent across the marketplace, and that kind of change requires talking to the consumer facing side of the marketplace team, I don't think we should change it right now. 

Re: header in the submit an app flow, ideally the header in the submission flow includes all the links that the rest of devhub has, minus the "submit an app" link ('cos you're already there). If this is something we can't coordinate before MWC, it's not the end of the world in my opinion. Most of the users we tested with last month weren't paying a lot of attention to the header unless they couldn't find something in the body. As far as the submission flow specific controls being in a sub-menu at the top vs a menu on the side, this isn't a mental model shattering change, since the user is transitioning from a more passive activity (reading docs) to a more active activity (filling out forms) and my guess (because we haven't tested this) is that it won't slow them down, as long as that navigation is consistent throughout the submission flow. 

I think that's all the questions raised, if I missed one let me know :)
Flags: needinfo?(asantos)
(Reporter)

Comment 12

5 years ago
Okay this is ready to go for this iteration.

Jen:
- on the top nav, do not put the "Partners" link. The link on the front page suffices.
- the mockup is not meant to be pixel-perfect, take it with a grain of salt. The small list of links under each section was meant to be 11pt font, but make sure it should looks good in terms of sizing and margin and text flow. If it's not readable, suggest a fix.
- The list of small links under each section is supposed to be the same as the first-level items in bug 832531 ("quick start", "intro to open web apps", etc etc).
(Assignee)

Comment 13

5 years ago
So I'm thinking of a few changes to the mock - let me know what you think:

1. The links in the triptych should just be one per line, not side by side. The font is too small in the mock and making it larger would restrict the width even more and have problems with l10n layouts.

2. If we do #1, then we should centre the links to match with the upper text or else it will look imbalanced.

Also, those links (Quick Start, etc), I don't think they are ready yet so should I put some placeholder links for the time being?

Thoughts?
Jen: 
That sounds fine to me, I know what happens in code doesn't always line up with Photoshop, so enlarge as you think it's needed and we can take a look at it. The descriptive text in each section (above the link lists) should be left aligned, so the links should be as well. Centered text is harder to read because of the inconsistent spacing on both sides (technical term is ragged edge, left aligned text is only ragged on the right side, center aligned text is ragged on both sides).  

Fred, Dan and I discussed some changes to the number of links in the build section this afternoon, so I think placeholders are fine until we have that pinned down.
(In reply to Jen Fong-Adwent [:ednapiranha] from comment #13)
> So I'm thinking of a few changes to the mock - let me know what you think:
> 
> 1. The links in the triptych should just be one per line, not side by side.
> The font is too small in the mock and making it larger would restrict the
> width even more and have problems with l10n layouts.
> 
> 2. If we do #1, then we should centre the links to match with the upper text
> or else it will look imbalanced.
> 
> Also, those links (Quick Start, etc), I don't think they are ready yet so
> should I put some placeholder links for the time being?
> 
> Thoughts?

*** Here's the plan, per our discussion ***

- The global nav will be, from left to right: API Reference | App Dashboard | Support | Sign-in/GEAR ICON
- The three sections in the triptych will have links to the sub-section landers for each of the main sections - these are forthcoming, but should not exceed 4 per section. We will list them 1 per line and we can do various stylistic mods to them to make them visually appealing.
- The social proof section on the front page of Dev Hub to the Partner page
- The newsletter will be adjusted to include a link to the dev preview phone page

I can mock these changes to you can get a sense of what they would look like if that would help, just let me know.
(Assignee)

Comment 16

5 years ago
Yeah, can you mock up the last two? And which is the link to the App Dashboard? Just the marketplace landing page?
(Assignee)

Comment 17

5 years ago
Daniel, what should the copy be for the submit app in the partner logo section? Seems like 'Submit it to the Marketplace' is a bit long?
(Reporter)

Updated

5 years ago
Flags: needinfo?(dbuchner)
(Assignee)

Comment 18

5 years ago
Daniel, I'm just going to link to the text 'Check out the developer phone preview' in the newsletter. We can file a new bug to change the copy after if you want.
(Assignee)

Comment 19

5 years ago
merged in https://github.com/mozilla/zamboni/commit/a62647e4e3559436cc151cbd9429de30a3a79a87
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
(Reporter)

Updated

5 years ago
Duplicate of this bug: 835574
(Reporter)

Comment 21

3 years ago
Clearing out old needinfos
Flags: needinfo?(dbuchner)
You need to log in before you can comment on or make changes to this bug.