Handbooks Wireframe – v2
Based on feedback from the handbooks wireframe posted last week, here is a new one I worked up, which includes the following changes:
- More text and fewer images – This is probably closer to how a typical handbook page would look, which we would expect to have more written content and fewer illustrations than was shown in the first wireframe.
- “Checklist” in the overview section – This would allow readers to determine at a glance what will be covered on the handbook page.
- Added subheadings – To get a better sense of how subheadings would work in a handbook layout I added a few h3 headings. Lesser headings (h4-h6) are not represented but would follow suit. Note that subheadings are also displayed as a nested list in the TOC to show hierarchy.
- Content box for displaying code – Styling would be similar to the other alert boxes, with a background color and icon. Though not illustrated here, it would be ideal to use a syntax highlighter as well.
- “Next Steps” section at the bottom – This is a good place to link to related pages within the handbook, as well as other external resources.
Please click on the image to view full size, and leave your thoughts in the comments section.
Patrick Rauland 9:11 pm on February 10, 2013 Permalink |
I think you did a great job incorporating the feedback from the last round. I had a couple of thoughts while looking through the mockup.
1) I think the styling of the code boxes can greatly affect the UX of the whole handbook. A background color and an icon sound fine. I think there has to be syntax highlighting as well as line numbers (that’s don’t get copied when you select the text). I assume that the code won’t be italicized by default?
2) A follow up question is what if a tip or alert incorporates some code? Ex. Don’t forget to use the global variable $wpdb instead of using the local $wpdb by putting this code in the first line of method_x:
global $wpdb;
3) Looking through last week’s IRC log it looks like there was some discussion as to which theme we are using for the handbooks. Depending on how much liberty with theming options I think it would be great for UX if the On This Page box would scroll with the user. I think it would be quite useful on longer handbook pages.
Jerry Bates (JerrySarcastic) 6:32 pm on February 11, 2013 Permalink |
Thanks for the props, Patrick. Here’s my responses:
Rachel McCollin 10:36 am on February 11, 2013 Permalink |
This is looking great, thanks for incorporating the feedback.
I agree with Patrick that we need to ensure code is styled in a way that’s easy to read and to copy. I’m wondering if it would also be helpful to have some standards as to how we present the code – for example do we wrap PHP in tags? Also where a function needs to be attached to a hook to make it fire, would it be helpful to include that?
What do others think?
Jerry Bates (JerrySarcastic) 6:33 pm on February 11, 2013 Permalink |
I think that sounds great. As I am a stronger designer than a coder, I will defer to others on how to best implement this.
Siobhan 7:02 pm on February 11, 2013 Permalink |
It would be helpful to have @melchoyce’s thoughts into this.
Siobhan 2:37 pm on February 11, 2013 Permalink |
The “what you will learn” section at the top looks great.
ToC – this should only display two levels of headings. Otherwise it gets silly.
At the minute I think we have Syntax Highlighter Reloaded – I’m not convinced that it requires a content box for the code, but I don’t mind too much either way.
On the box at the bottom – there is far too much in there. If someone is using the handbook to learn then we’re forcing them to decide where to go next. There should only be one item in the “Next Step” box, which links to the next logical thing that the person should learn. Having a bunch of links in there isn’t necessary. There’ll be hyperlinks throughout the text so if someone want to navigate in a non-linear fashion they have that at their disposal.
I do like the list of external resources. We need to think carefully about this though. When we start linking to external resources then we are endorsing content which is outside of our control. There’s no guarantee that it will be kept up-to-date. And the author could change something to render it inaccurate etc. I’m not saying that we shouldn’t do it, but I do think it warrants a discussion. If we do go ahead with linking to external resources I’d prefer to see these in a sidebar widget to differentiate them from the main text.
Siobhan 2:50 pm on February 11, 2013 Permalink |
It’s also worth keeping in mind that the layout & formatting needs to work for different types of articles. Some of them will be straightforward articles. Others will be tutorials.
Jerry Bates (JerrySarcastic) 6:25 pm on February 11, 2013 Permalink |
Anything in the current wireframe a red flag? I think this is flexible enough for both uses, but I may not see what you see.
Siobhan 7:02 pm on February 11, 2013 Permalink |
No, not at the minute.
Jerry Bates (JerrySarcastic) 6:23 pm on February 11, 2013 Permalink |
The box you see here would most likely be a blockquote with an added class to control styling, so the *container* can hold as much or as little text as is needed. For pages where there is only one logical next step, that is probably all that needs to be displayed, but this will be an editorial decision.
I noticed that a lot of articles in the codex will have more than one “next step” depending on how the article is structured. Presumably some pages in the handbook would be similar, in that not every one will be “first read this, then next go here” but instead may have several jumping off points. I wanted to account for that in the wireframe.
In any event, this box is pretty multipurpose.
Siobhan 7:29 pm on February 11, 2013 Permalink |
Yes, you’re right. I’m putting together a tutorial in the core handbook and I’ve already encountered this. User can either install WordPress using Github or SVN.
Jerry Bates (JerrySarcastic) 8:01 pm on February 11, 2013 Permalink |
Oh, I should have added that I envisioned the “External Links” as linking to other handbooks, codex articles (like the function reference), and other *official* places of WordPress knowledge, and not links to “out-of-network” sites.
This would also be an editorial decision, but I wanted to try out the idea in wireframe form.
Kim Parsell 3:42 pm on February 11, 2013 Permalink |
I really like how this is coming together. Getting ready to start writing this morning, will be using this to help me get the current content organized.
@Patrick Rauland: The only problem I have with the “On This Page” box floating down the page is that it may inadvertently cover what someone is trying to read, with no way of getting it out of the way. Other than that, I like the idea.
Siobhan 5:10 pm on February 11, 2013 Permalink |
I think I agree with Kim on this one. However, I’d like to test them out to see what the experience is like for the user.
Kim Parsell 5:52 pm on February 11, 2013 Permalink |
Perhaps make it so that you can collapse the box to get it out of the way?
Jerry Bates (JerrySarcastic) 6:36 pm on February 11, 2013 Permalink |
I think testing would be good. I wonder how we handle this in a mobile-responsive design, should we go down that road.
For now, at least, the TOC I’m representing is using functionality that exists on a lot of the dotorg P2 blogs currently (thought totally unstyled) so all we have to do is add some simple CSS. That’s well within scope.
Patrick Rauland 5:26 pm on February 12, 2013 Permalink |
Any idea how you’d like to test it? Are you thinking something that someone whips up and shares with the rest of this group or testing on a larger scale?
Patrick Rauland 5:25 pm on February 12, 2013 Permalink |
Agreed, if we make the On This Page box float then we should make sure that it doesn’t cover anything up.
Mel Choyce 4:04 am on February 12, 2013 Permalink |
Looks great! A couple thoughts:
That aside, looking great!
Jerry Bates (JerrySarcastic) 6:37 pm on February 12, 2013 Permalink |
Thanks Mel. I agree the line length is a bit long overall, so that would be a good thing to trim down a bit. I also like the “Back to Top” links as a fallback; that sounds easy to implement.
About floating TOCs, I’d love your thoughts (everyone’s actually) on how to implement. Obviously we can’t float it in the text like I’ve shown. Two concerns: