Redesign the Homepage
Open, NormalPublic

Description

The homepage is unarguably one of the most viewed and important pages on ShoutWiki - it's the first page many people visit at ShoutWiki and a quick glance can make the decision whether someone creates a wiki here.

The homepage has too much text, it's dull, and it doesn't act as a good landing to ShoutWiki.

The homepage needs to be less text based - Hub isn't Wikipedia, it doesn't have lots of encyclopaedic content for people to go and read, it's got help pages and a rather dull wiki directory. It should be a launchpad to other parts of the site, things users want, and not a half complete Wikipedia article on ShoutWiki.

So I'm no authority on design, but here are my thoughts and an idea or two.

The last Wikia homepage I saw had lots of different wikis advertised (randomly) on the homepage which anyone could "Remix". That was good because it advertised all the wikis Wikia had, but it also sucked because there were a lot of them, often there wouldn't be a lot of variety and wikis would often be missing logos and other things. Also, I doubt their implementation looked as good as their mockups where they selected the wikis and the layout.

I like the idea of the wikis; I think every wiki got a chance on that, which I like in some fairness sense, but it leads to a few issues. Maybe a bit of that on the right.

I'm thinking a few buttons, perhaps above that on the right, create a wiki, two other things? The left we'd fill with ... stats? I'm thinking like the Wikipedia user creation does, but maybe different stats in a bolder and bigger font. I'm sure I've seen what I'm going for done similarly somewhere, however, I can not think of where at the moment so cannot dredge up examples. I'm fine with including some of the content we've got on the main page currently, but certainly in a shortened version.

As always, my design ideas are just pure suggestions to help get the ball rolling as I couldn't design my way out of a paper bag.

For reference, even if some of it might be a bit redundant:

<VanishedUser2138> A good starting place for what to put on the mainpage is considering what you would actually want to get to from there. Since there are a lot of target users - potential wiki creators, existing users, us - maybe figure out what all of them would want/be interested in?
<Lcawte> I mean, the idea I think is potential users/creators more than existing (although our analytics could really do with someone working on them like three days a week) users. I tend to hit it a lot as I've typed ShoutWiki.com a lot when trying to get to the site to check if it's up etc.
<Lcawte> And with new users, I'd say the two things we probably want to them to do / they want to do is find information on a topic (and hopefully then stick around and contribute whether through feedback or edits) and wiki creators... who the potential editors could also be if there's already a wiki. Finding a wiki on a certain topic might not be the easiest thing to do on a slimmed down page.
<Lcawte> If there's something I want as a staff member, I could potentially just wipe the page with CSS/JS and throw whatever I want at the top / over the top.

I'm not a designer at all, but I have some ideas:

  1. Use flat design;
  2. List popular and big wiki;
  3. Make giant blue button that creates a wiki;
  4. Little amount of text, more pictures;
  5. What is the logo of Shoutwiki? Butterfly? Maybe change it?
  6. How much languages are supported? 10? It's not very much, don't you think so? If I remember correctly, Wikia supports more languages;
  7. More help pages;
  8. Make giant blue button that user can contact support Team with;
  9. Link to Phabricator somewhere;
  10. Make giant blue button that links to forum.

What do you think?

2 - We should certainly be promoting some of our wikis on the home page - how we're going to do that I don't think has been decided yet. I'm not a big fan of just listing them, though.

3/8/10 - I wouldn't say "giant" buttons, but buttons of some size bigger than small is an idea I had. Colour would depend on whatever scheme we go with.

4 - As for lots of pictures, I'm not sure I'd agree necessarily. It would depend on the pictures - I think a lot of mismatched colours would look ugly, and images add to overhead if they're of any particular quality or size. The company homepage should be relatively quick to load. As I've said, though, I agree with reducing the amount of text.

5 - I'm not sure how that's relevant to this really, although if you'd care to discuss with @isarra, by all means, go ahead.

6 - ShoutWiki supports all the languages MediaWiki has in core, which I believe is a few hundred [citation needed] - however we've got a small number of features that are not open source which relies on translation at mwmsg.shoutwiki.com, and that depends on our community translating them. If you were to count the number we can provide the translations for ourselves, at this time that would be three, maybe four - English, Finnish, French and maybe German.

Wikia's list would be slightly bigger, but not a whole lot more comprehensive. Even upstream at MediaWiki, that all relies on volunteers making translations at TranslateWiki.net, which you could also contribute at. The vast majority of our code is open source and translated there (although you might not notice it, as it isn't always unique to us because most of our code works out of the box and is used on other wikis!)

Obviously, we'd like the Hub main page to be available in as many languages as possible, and it's something I think we should try to accommodate in the design, but it will primarily be up to the community to decide how many languages it is available in.

7 - Not on the home page. If there's a help page you want for a certain feature or piece of functionality, drop us a separate support ticket with a request for it, and we'll try to sort that out.

9 - Maybe, I'd love to hear your rationale for that as I'm not sure on my opinion on that.

  1. What about this tiles like in Windows 8 & 10?
  2. I know only one way to get to Phabricator: write URL in the address bar. Link can make it easier.
CJC added a subscriber: CJC.Jul 8 2016, 6:27 PM
  1. Literally just listing them provides no incentive to go to them. That is where at least a logo might make it more eyecatching. Maybe displaying a bit from an article? Not sure how that would work though.
  1. While a link to Phabricator somewhere may be helpful, I don't know if the place for it is the homepage.
  1. Sidebar would be great.

I like what Wikia does, but Lewis has a point: They likely were in the right mindset, but as we know with Wikia, there's a difference between theory and execution. I have a really simple idea for SW:

An extension could create a special page on each wiki. There would be forms to fill out. Those forms get sent to the DB, and then the SW main page would display one at random each day. The twist? If you want others, a button would let you get another at random. Also, this would differentiate from Wikia because there would be no missing images; to be able to be selected to begin with, all forms on the special page would need to have been filled out.

If you do consider this and want to pull through, I'd be happy to help.

To add to my previous comment, JUST the wiki logo. That is the only image displayed. And, I'm curious about using Microsoft's "Modern" - I'd leave that to the community.

The only thing the dxtension would do is get text from forms submitted to its own table in the database - wherever a "central" database that could be accessed by all wikis for submissions seems to be a good place for it.

There would be three forms: Featured user (decided by admins etc.), Featured article, and recent projects or wiki news. Then, the entries submitted are grouped together in a row or whatever and given IDs (SQL, haven't messed with it in awhile) and pulled in using their own special magic words: {{FEATUREDUSER}}, {{FEATUREDARTICLE}}, and {{WIKINEWS}}, and {{FEATUREDLOGO}}.

Let me take a moment to re-iterate that these are specific to the wiki you're featuring. So, to be specific, a way to do it, cleaner, maybe a text limit on each of three forms since nobody want long text. And, since those are magic words that are unformatted, it should not clash with however the community decides to redesign the Main Page at Hub.

CJC - I agree with your response to #2 - we want to show what the community is doing, and not even just the bigger ones; we probably should stand up for the little guys as well, as my attourney of an uncle would have said.

And as for the issue with relevance, we may be able to "tag" wikis and get Piwik to figure out which wikis may seem relevant - kind of like advertising, but in a much sexier way: Instead of products, communities. Putting folks on the map.

Issarra: Do you just work on design? Is the extension idea out of scope and possibly under someone else? If so, I'd be happy to open a new report. However, these two need to work hand-in-hand: Extension and page.

You could also do fancy things with contentmodels.

But yes, you can potentially include anything onto the mainpage so long as it properly caches (which you need anyway), so that shouldn't be an issue.

SamanthaNguyen added a subscriber: SamanthaNguyen.EditedJun 22 2017, 1:16 AM
  • After reading through this task, it looks like no one mentioned whether or not we want a wiki-editable main page or a splash page (like Brickimedia's old splash page). Splash page gives more freedom but obviously more, long-term maintenance work. What do others think we should have? I think we can try out both, since it won't hurt to try either.
  • Colors: We can create our color palette by using some the colors that the Aurora skin has, with modifications as needed - consistency is important. (Although, I'll be honest here, I don't particularly like the black as the primary color since it's such a strong color and thus distracts away from the most important thing, which is content. This is something for another discussion though).
  • Languages: Although i18n is a nice-to-have, at least in my view this is sorta low-priority compared to the rest.
  • Pictures: From what I've seen, there seems to be quite a bit of wikis that don't have their own logo, so doing this would be sort of a problem.
  • {{FEATUREDUSER}}, {{FEATUREDARTICLE}}, and {{WIKINEWS}}, and {{FEATUREDLOGO}} by @mgagemorgan: While that idea as a concept is cool, this entirely depends on us picking something out of a list to decide what should be featured (or we can use the API to pick something randomly, although I imagine that could potentially be an expensive query? Personally, I don't know much about performance + SQL).
    • As for wiki News: Is it the same type of news we have on our page? That shouldn't be that much of a problem. What's something that users are interested in? (If we're referring to cross-wiki news, well, that's obviously a lot more work, and requires a team of good, dedicated writers who are able to keep up with the communities on this platform, which there's a lot of; something we currently don't have).
  • Piwik stuff: I'm not familiar with the API, but if it's of interest, then here's a link: https://developer.piwik.org/api-reference/reporting-api
  • Sidebar idea: Maybe, that sounds interesting. This would be the place for secondary information - stuff that's not as important as other info. Now, what do we consider secondary information?
  • Tiles idea by @Bouncepaw: So this is possible with pure CSS actually, using the flex box model. Although, it's somewhat complicated (but of course, still possible). Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/ on how it works. Another thing to point out though is it's compatibility across browsers: It's completely unsupported for IE9 and only partial support for IE10 and IE11 + luckily it's supported in Edge though. Check http://caniuse.com/#feat=flexbox for the full details. This doesn't match MediaWiki's browser compatibility matrix, which is what we generally try to be consistent with. So realistically speaking, we'd probably have to use JS and possibly pick an existing library.