Bug 20180 - [DIS][meta]Webplatform.org/WPD critical analysis — UX/style
Summary: [DIS][meta]Webplatform.org/WPD critical analysis — UX/style
Alias: None
Product: webplatform.org
Classification: Unclassified
Component: content (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Chris Mills
QA Contact: public-webplatform-bugs list
Depends on:
Reported: 2012-11-30 16:07 UTC by Chris Mills
Modified: 2013-01-14 13:50 UTC (History)
2 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Chris Mills 2012-11-30 16:07:37 UTC
This bug lists a site review, which has lead to a lot of comments on what needs to be improved in terms of content and styling, ot provide a better user experience across Webplatform.org

* homepage - Webplatform.org

Page design looks pretty decent.

A comment was made a while ago that initially the site purpose is a bit confusing/unintuitive, so maybe we could update the text on the homepage to improve this. See bug https://www.w3.org/Bugs/Public/show_bug.cgi?id=19359. A solution is suggested here - do we like it? Id so, can we implement it?

Main links leading off the homepage

* Q & A - http://talk.webplatform.org/forums/

This page is certainly ok for the moment; perhaps it could do with a short bit of intro text to say what its purpose is, and give an ideas as to what kinds of questions to ask

* blog - http://blog.webplatform.org/

The blog looks really nice, although it could do with a bit more content. Maybe we could give someone the responsibility to chase the  Webplatform stewards and other contributors for content suggestions each week?

* tutorials - http://docs.webplatform.org/wiki/tutorials

This is just an aggregation page leading to the different tutorial pages we have on the wiki. I reckon this link should be removed or changed, as the articles on those links aren't just tutorials, but concepts as well. It makes sense to separate reference material from other types of article, but not tutorials and concepts. They should stay together. So either:

	- Get rid of the tutorials link, and just have Docs pointing to all article types.
 	- Change the tutorials link to something like "Learn web design"
I would be in favour of the former, although it would make the links on the homepage lopsided - there would be only 5 rather than 6. Perhaps we could replace it with a link to "Cat pics"?

* More

This just leads to the same place as docs! Maybe we could get rid of this as well, and just have four links, two on each side, on the main page for the moment? That would mean it would be nice and symmetrical again, and we could do away with my idea of linking to cat pictures.

* Docs - http://docs.webplatform.org/wiki/Main_Page

Ok, this is the Wiki, and the main focus of this analysis. When you get to this page, the immediate feeling is "hmmm, where do I go to find stuff". You then get to the table and think "yuck, that's ugly".

In general, the whole site could do with a nicely styled dropdown navigation menu, to make getting to different content sections a bit more immediate, e.g. I want to get to CSS property references…

This page could also do with some nice icons/graphics, maybe an icon for each technology type, and then a graphic for "Contribute to webplatform docs", and one for "Stay in touch". Sebastien started some work on these, at https://www.w3.org/Bugs/Public/show_bug.cgi?id=19386, and it'd be great to see those moved along a bit further.

Note: "Concepts" on this page should be changed to something like "General web concepts", as all the other categories have concept articles in them too.

Note #2 - it feels to me like the Search box is a bit hidden, right up there at the top of the screen. It'd be nice to have it in a more prominent place, so that it is more discoverable and usable as a way to find things.

Note #3 - the beginner's course should be an option in this list in it's own right, and not shoehorned on to the page below those 

* Concepts - http://docs.webplatform.org/wiki/concepts
* HTML - http://docs.webplatform.org/wiki/html
* CSS - http://docs.webplatform.org/wiki/css
* JavaScript - http://docs.webplatform.org/wiki/javascript
* SVG - http://docs.webplatform.org/wiki/svg
I have lumped these five all in to the same category, as they all need to be dealt with in the same way - as it stands, they all all scrappy, disorganised, and inconsistent. We need to work out a consistent layout for these pages, with nice graphic, concise introduction, links to subsections, and supporting background information.
There should be another level of hierarchy for each of these pages - people should get headings such as "HTML tutorials", "HTML reference", "CSS properties", "JavaScript event reference", "Web theory", "accessibility", "designing for the web", etc. along with nice icons, and summaries of what each one is, and then they should click those to get to more landing pages for each.

Then a template needs to be worked out for the subpages too. A different template will be needed for references, and tutorials/concepts.

* Accessibility - http://docs.webplatform.org/wiki/concepts/accessibility
 This is really a subpage of what is currently "Concepts", but we felt that it is such an important subject that it is worth having a link to it from the home page too.


1. The topic indexes need to be sorted out, see the big list at the bottom of http://docs.webplatform.org/wiki/svg as an example. These look horrible. What we need to do is work out a way of auto generating these lists in a nice matter. It has been suggested before that we have a system whereby each page is tagged with information like heading, hierarchy level, etc, and from this, it can be worked out automatically what headings to place each page under, what other info to pull out and display, what to make the link text, etc.

This most desperately needs doing for the reference landing pages, for example http://docs.webplatform.org/wiki/css/selectors

2. There is a sortable template plugin available on the site for creating a nicer looking table of different articles, for example see http://docs.webplatform.org/wiki/css/properties. This is certainly better than the default generated list seen at the bottom of http://docs.webplatform.org/wiki/svg. But it is still not ideal, and we could do with more granular, structured lists of headings.
Comment 1 Jonathan Garbee 2012-11-30 16:17:57 UTC
I added some See also references to other bugs.  One or two were mentioned inline and the others would still be useful to help clear things up, such as adding an "About" page.
Comment 2 Chris Mills 2012-12-03 16:06:56 UTC
Bug about Q&A intro text is at https://www.w3.org/Bugs/Public/show_bug.cgi?id=20215
Comment 3 JuleeAtAdobe 2012-12-04 02:51:11 UTC
Reverting this bug's platform to All, as experience happens on all platforms.
Comment 4 Chris Mills 2012-12-05 14:24:31 UTC
Rough mockup for new Main Page available at http://docs.webplatform.org/wiki/TEST:main_page.
Comment 5 Chris Mills 2012-12-05 15:19:00 UTC
Rough Mockup for top level topic pages can be seen at http://docs.webplatform.org/wiki/TEST:html.

My plan is to make all these consistent over the different top level topics - HTML, CSS, JavaScript, etc.

Does this give enough information? Is it missing anything? Do we need more granularity on this page, or less?

I deliberately coloured the icon placeholder for HTML learning material blue rather than red, as I think this is a special case that should stand out a bit more.