Home page issues: Baseline, Report a bug, Search an issue

[karlcow]

On the same basis, spirit than #545 maybe there are tweaks we can do to improve the home page.
I'm asking questions for thinking more than changes and see if the questions seem not reasonable or if there's something we can push further.

• Baseline message
• Report a bug: Call to action
• Search issues: People need to find bugs

The danger when we do this, is that we might be tempted to add more things instead of removing or changing the current things.

[karlcow]

Some comments on the image.

[calexity]

Notes from talking with @karlcow

• Making "Report bug" more visible and clearly action
• Possibly rewriting the main tagline, possibly add read more to explain the web compat
• Or add a description about cross-browser compat
• Add Search CTA near Report a bug?

[calexity]

I can't think of a better header tagline @karlcow but I'm open to some

We could try something more generic, along the lines of where we started

• Let's make a better web
• A better web starts here
• Be a part of the open web
• The web should work (similar to The Web Just Works)

or more direct

• Report issues on the web
• Let's fix the web

For the other things we talked about:

• Making "Report bug" more visible and clearly action
• possibly add read more to explain the web compat/cross-browser compat
• Add Search CTA near Report a bug

Here are a couple ideas:
Option 1 adds search to the top nav and some description

Option 2 adds an additional call to action. I don't think these colors work, but we need a dominate color for the action we want people to take and a less dominate one for the secondary. @magsout might have some ideas.

[karlcow]

@calexity

latest bugs

quite cool, simpler and additional benefit, it should make the home page faster. The latency from Japan is killing the "benefit" of JS templating.
( @miketaylr we should do tests for this, at least for fun. )

tagline

heh. tough thing :p
Possible candidates:

• Let's make a better web
• A better web starts here
• Report issues on the web

These, -1

• "Be a part of the open web": The motto of Opera was/is "Open The Web", which was a good thing, but it's slightly different of the the open Web which is charged with a certain ethos.
• The web should work (similar to The Web Just Works): Yup too close from the MS one. That will make their own branding more confusing for people.
• Let's fix the web: Maybe not :) http://letsfixtheweb.com/

CTA.

In option 2 it seems indeed clearer than the option 1. The arrow is always confusing me. And we use in some places for navigation. So having indeed a better way to invite to report a bug is cool.

Search

top or beside the report an issue. I need to think a bit more about it.
What does it do when we tap the search button?

[miketaylr]

quite cool, simpler and additional benefit, it should make the home page faster. The latency from Japan is killing the "benefit" of JS templating.

The diagnose issues sections are loaded asynchronously (and independently of each other). So maybe perceived page load faster--but they don't actually slow any part of the home page down. It's close to the most static page we have. ^_^

But I like the idea of just focusing on new issues.

As for search, we could have an <input> in the header (for wide enough viewports anyways) that populates the q parameter of the issues page. So if you hit enter or click on the search button, you'll land at /issues with your results. If you're not logged in, we can send a flash message that says "Please login to continue search" (or similar text). Or maybe... <input disabled placeholder="Search (requires login)"> ❓

I'm not sure what it would mean for just a button. Maybe it just takes you to /issues and focuses the search box? Then again if you're not logged in, there won't be anything to focus.

For the CTA, can we just make "Report a bug ➡️" look like a button? It would be a more obvious action and then we can keep the rest as-is.

And for tagline, I'd really like it to stay as close to "reporting bugs" as possible over something feel good like open web. Not very helpful feedback I know.

[magsout]

Option 2 's layout is great. I like it.

Juste few quesion about design.

Why the separator inside the Header is dfferent than the SVG?

@calexity

Option 2 adds an additional call to action. I don't think these colors work, but we need a dominate color for the action we want people to take and a less dominate one for the secondary. @magsout might have some ideas.

You're right, though I do not think white is the best color. But we can do some testing.

The position and the idea of a baseline to explain what is webcompat also a good idea. For the text I leave for thought @karlcow , which is much better philosopher than me;)

About the last bug, see how it manages the status of toobar on small devices

Like @karlcow , Search inside Header is a link or it calls an action (like apple website ) ?

[miketaylr]

@magsout Let's iterate on this in a branch. Here's some things that need to happen:

• wire up the "Latest bugs" section. I'm assuming this is a static list of the latest N issues and not a filterable section. If not, I suppose someone will let me know. ^_^
• Add a search input to the header
• Figure out how to handle a "Search Bugs" CTA (especially for non-logged in users). I think it might be worth trying to display the search box by default on /issues and have it just be disabled for non-logged in users with some placeholder text like "Please login with GitHub to Search".
• modify the issues page search to react to searches from the homepage

...other stuff.

[miketaylr]

@calexity to clarify, the "Latest bugs section". Do you see that as a static list of the latest 5 bugs, no matter the category? Or is that intended to be a filterable section displaying the latest 5 bugs for each clicked category? I don't think the latter is much harder than the former (especially since we have most of that code written for /issues), but I'm just not sure what is intended from the mockup. Thx!

[calexity]

I'll try to answer these in order.

1) @karlcow @miketaylr Tagline - let's go with "Report issues on the web" until someone comes up with something better

2) @karlcow Search interation - when you tag on the search icon or the word, it should expand to the left with a while background and show a field (I can mock this up)

3) @miketaylr Re: your search suggestion, you're saying if someone tries to tap into the field on the home navigation, they would get this message "Please login to continue search"

4) @miketaylr CTA - we can add a fill to the existing text + arrow. I'll try that in the next pass. @magsout I agree about the color. I'm open to other ideas. Right now, we're only using yellow, black, grays and white aside from bug status colors. I want it to stand up.

5) @magsout what do you mean by "Why the separator inside the Header is different than the SVG?" ? Are you talking about the lightbulb wire?"

6) @miketaylr Latest bugs I was intending this to be the 5 latest bugs, not interactive and the statuses are just there as a key, but now that you mention it, I think we could call that section "New bugs" and remove the key. Then, it's self-explanatory.

I can rev this with these changes.

[miketaylr]

I was intending this to be the 5 latest bugs, not interactive

Sounds good--this simplifies things considerably, Thanks.

[calexity]

Here's a mock to address

1. Tagline - Report issues on the web
2. and 3) Search interaction
3. Simpler CTA
4. Removed key for latest bugs, just the newest ones appear.

Home

Search

Log in to search

[calexity]

PS I'm not sold on that button style for the CTA. I think maybe @magsout might have some better ideas. Perhaps it's the size.

[magsout]

5. @magsout what do you mean by "Why the separator inside the Header is different than the SVG?" ? Are you talking about the lightbulb wire?"

about this different color : (why ? )

[calexity]

I thought that's what you meant. I was thinking spatial the nav floats over
everything and the lightbulb travels below it but I'm open to keeping it
black throughout.

On Mon, Apr 6, 2015, 8:24 AM Guillaume Demesy notifications@github.com
wrote:

5. @magsout https://github.com/magsout what do you mean by "Why the
   separator inside the Header is different than the SVG?" ? Are you talking
   about the lightbulb wire?"

about this different color : (why ? )

[image: header]
https://cloud.githubusercontent.com/assets/1997108/7006471/b11641ee-dc81-11e4-900f-5916076f7029.png

—
Reply to this email directly or view it on GitHub
#571 (comment)
.

[magsout]

lgtm 👍

[miketaylr]

In the issues/571/1 branch I've made the Browse Issues -> Latest Bugs change. I think we can deploy a number of these changes incrementally, so I'll send a PR soon.

[miketaylr]

We discussed this in Paris. We're going to:

• Leave "Bug reporting for the internet" language, because it's 🆒
• Do some ad-hoc user testing with some Moz Paris employees today to see if they can figure out how to report a bug (if they can't we'll make it look like a big fat button)
• Add search to homepage header, rip off apple.com interaction style

[miketaylr]

I think we can close this now! New search bar on the homepage looks 🔥 hot 🔥.

[magsout]