Page MenuHomePhabricator

Upgrading Wikistats 2.0 footer UI/design
Closed, ResolvedPublic8 Estimated Story Points

Description

Currently Wikistats 2.0 footer design seems outdated and it also contains lines/text which are redundant such as "Follow this link to report a bug" which can possibly be replaced with "Report a bug" hyperlink. Space in footer can also be optimised by adding/rearranging content. We can also consider improving the overall interface of the footer.

Screen Shot 2018-04-07 at 3.27.35 AM.png (250×2 px, 73 KB)

Event Timeline

I have prepared a rough mockup of a possible design of the new footer. Content, fonts, style etc are bound to change. Please share your feedback on this.

Screen Shot 2018-04-07 at 3.13.20 AM.png (426×2 px, 96 KB)

Good work :] Kudos!

I think the footer you designed has improvements, in my opinion:

  • It looks better, meaning, I think the reader would be more likely to have a look at the footer.
  • It's easier to find stuff in it, because it's more organized.
  • The clickable texts are brighter than the non-clickable ones. :]

Suggestions:

  • Reduce the brightness of the section titles (About us, Contributing, Community), to add more contrast, because, they won't be clickable, no?
  • Use a bit of the informal tone of the current footer (language-wise), I think that's OK and cool in a tool like this.

1 thing that I'd say is wrong is the "© copyright" mention. Wikistats and its data have a creative commons license, which I think can not be labeled as "copyright", rather the opposite. I would leave that out. Also, it is important in my opinion to mention that it's the content the one which is CC0. Maybe: "All content available under Creative Commons CC0 dedication."?

Hey @mforns, thanks a lot for your feedback.

Reduce the brightness of the section titles (About us, Contributing, Community), to add more contrast, because, they won't be clickable, no?

Completely agreed. The color/brightness (CSS, in general) needs some work done. The above mockup was just a rough one to get the things started. In the next mockup I'll pay attention to minute details such as color, weight, font, margins etc.

1 thing that I'd say is wrong is the "© copyright" mention. Wikistats and its data have a creative commons license, which I think can not be labeled as "copyright", rather the opposite. I would leave that out. Also, it is important in my opinion to mention that it's the content the one which is CC0. Maybe: "All content available under Creative Commons CC0 dedication."?

Noted, will make the change in the next mockup :-]

Cheers!

fdans moved this task from Next Up to In Progress on the Analytics-Kanban board.
fdans moved this task from Incoming to Mentoring on the Analytics board.

Here is the updated mock-up for the footer. Have paid more attention to CSS in this one. Improvements/corrections made :

  • Wikimedia logo is correctly aligned.
  • Corrected the copyright statement.
  • Improved the color of hyperlinks. These hyperlinks take a subtle brighter color on hover, which is not that odd but noticeable at the same time.
  • Improved the margins and paddings.

@mforns - I've kept the headings slightly heavy and brighter as much as it justifies the 'heading' term. Do let me know if we need to lower it brightness even more. And to answer your one of the above questions, the headings won't be a hyperlink/clickable.

@everyone - Please share your feedback on this. Let me know if it is good enough to start coding.

Screen Shot 2018-04-13 at 4.46.35 AM.png (426×1 px, 95 KB)

@sahil505
Looks good to me overall!
I think we can now dive into detail and start implementation.
I have a couple more specific comments:

  • In my prior comment about text brightness and contrast, I meant to reduce the brightness of the headings, so they became less bright than the actual text that can be clicked, like in the "designed by Aislinn Grigas" text. Now, this is pretty subjective, and I'm no designer, just to make it clear.
  • Where would "New feature" and "IRC" links point to?

Thaaanks

@mforns
Thanks for the feedback. I'll submit a patch for this after we merge the 'NaN' patch.

In my prior comment about text brightness and contrast, I meant to reduce the brightness of the headings

You have a completely valid point. It is definitely subjective as you said. Firstly, we can go through with the code with lower brightness. We can easily change that at any moment if reviewers/users find it confusing. Although, keeping the brightness equivalent to "Designed by Aislinn Grigas" will ensure uniformity in hyperlink color across the footer. Will work on it.

IRC link can point here. We have a pre-filled Phabricator template for Report a Bug, we can have a similar one if a new user/contributor wants to suggest a new feature that can add value to Wikistats 2.0. This point is definitely not very necessary is sort of redundant, if you have anything more relevant/important in mind please do that let me know. We can always replace "New feature" with that.

Thanks.

I'm not sure if we can change that copyright language, it was provided by legal and I'm sure there was a reason for how specific it is, "All data, charts, and other content is available under the Creative Commons CC0 dedication." I vote we leave it that way, lest we get in trouble with legal :)

@Milimetric : Thanks for the info. Will keep the language of the copyright same in the upcoming patch.

mforns triaged this task as Medium priority.May 8 2018, 2:20 PM
mforns set the point value for this task to 8.

Change 434971 had a related patch set uploaded (by Sahil505; owner: Sahil505):
[analytics/wikistats2@master] Upgraded footer UI/design

https://gerrit.wikimedia.org/r/434971

Change 434971 merged by jenkins-bot:
[analytics/wikistats2@master] Upgraded footer UI/design

https://gerrit.wikimedia.org/r/434971