1

I want to redesign the guideline (rulebook) page of my sport association. The problem is that its a legal document which contains a lot of text (around 41.000 words) with a lot of (sub)headlines and chapters, currently just plain html. Not very neat.

Its based on a PDF and because its a legal document I cannot rearrange the chapters or separate it.

Im now looking for a solution to make it a little bit more usable / readable. I understand that I will not get an AWESOME user experience with so much text...

Does anyone of you have tips how to handle a lot of text on a page or can show me examples where its handles very well?

First approach:

Today I noticed a bootstrap site does this really nice on this page: http://getbootstrap.com/getting-started/

I like their sidebar solution, the problem is just, when switching to a mobile screen resolution, the design just adds the sidebar to the bottom, which makes its completely useless.

Community
  • 1
Robert
  • 185
  • 7
  • 1
    So it's one single page with 41k words? If that's how it has to stay then you're not really going to be able to provide a great user-experience just with adding some subnav items to it. Sounds like you need to architect the whole thing and create a full searchable, filterable site. – JonW Jun 16 '14 at 12:17
  • Yeah, I mean, its a rulebook that was a PDF / printed and is now online in plain html and <h1> and <h2>'s. – Robert Jun 16 '14 at 12:32
  • 2
    A PDF is just a portable document. A website is something totally different - just because the original content came from a PDF that doesn't mean you need to replicate the whole format online. Audit it, split it into useful sections, mark it up with metadata to make it searchable and the build an actual site around that content. Just adding a menu onto a wall of text isn't going to give you a good user experience; mobile or desktop. Unless you expect every visitor to want to read all 40k words in one sitting. – JonW Jun 16 '14 at 12:38
  • Thanks for the feedback! I know what a PDF is and I don't wanted to sound silly. I know its different, and i know i cannot just transfer the content. BUT what i don't know is how to do it. Or with which approach. The document is a rulebook. A legal document. I cannot change the sections rearrange them etc. But I'm also not looking for a AWESOME user experience, I just want to make it more and easier readable (my thought was with chapters visible all the time... etc - see first post). I think my problems is very near to trying to make nicer / easier readable ToS or other legal documents... – Robert Jun 16 '14 at 12:59
  • That's fair enough, and is the reason I left my comments as comments and not as an answer (because I am not actually giving you a direct answer to the question you posted). We all find ourselves with systems we need to work on that aren't optimally designed in the first place, I was just commenting as a potentially different view for how to handle it. – JonW Jun 16 '14 at 13:04
  • Ok, thank you very much! I think i wasn't specific enough in my question text, I changed it... – Robert Jun 16 '14 at 13:13
  • What do you mean by "legal document" is this a contract of some sort or contractually binding? Why do you feel that breaking it into sections for more appropriate presentation voids this legal nature? – cdkMoose Jun 16 '14 at 15:42
  • You might also want to tap into the creative folks at Graphic Design StackExchange to get some ideas. – Michael Lai Jun 16 '14 at 23:27
  • 1
    Similar topic: http://ux.stackexchange.com/questions/19864/how-to-design-usable-web-site-terms-conditions/ – greenforest Sep 24 '14 at 13:55

3 Answers3

1

It is always great to see people working on UX not just for visual but also textual content. Given the limitations, here are a couple of things you can consider:

  • Create distinct heading sizes and variations that represent the hierarchy or level of detail of the contents (especially if there are no alternate navigation available)
  • Break up long paragraphs by spacing and indentation (it is already really long, so I doubt it will make too much difference to the user how much longer it is)
  • Introduce some useful visual elements (charts/diagrams/infographics) that can help reduce the amount of text or make information more easy to absorb/remember
  • Adjust the style of the font to make it more legible and readable for the general paragraph text

It would be nice to see some BEFORE/AFTER screen shot comparisons and see how you go. Just want to also point out that regardless of the suggestions that you take on board, addressing the presentation of the content requires a good understanding of the information (what it is used for) and the users (how they use it).

Michael Lai
  • 27,124
  • 17
  • 89
  • 186
  • ok, that are some greats tips, thank you very much! I will try to do a first version in the next days and then post some before/after screenshots to get some feedback! :) – Robert Jun 17 '14 at 13:22
1

I would consider creating a set of FAQ questions that link to the specific legal section. This will make the mass of legal information accessible, as the FAQ can use common language to describe a situation and act as a 'translator' for locating the legal jargon equivalent.

You may need create a semantic link between the common language and specific legal jargon - eg. 'What if a ball is passed backwards?' -> 'See section 3.2.5 Traversing of ball in opposing direction of play' Where the link is the section heading.

Technical Considerations

  • Split the doc by at least top level sections into separate html pages. For mobile this will decrease the download and formatting time required to show the page
  • Consider the frequency of updates. If this is something that can be set and forget then a manual method of formatting can work. You may consider a model to produce both the PDF and web pages from a single source if updating is frequent

One trend of late has been to try and iconify or otherwise provide a brief, simply phrased version of a vast legal tomb. Again it is in the interest of engagement and providing a lower barrier to entry. Have a look at: http://tosdr.org/ and https://about.pinterest.com/en/terms-service as examples.

Thurstan
  • 498
  • 3
  • 5
  • In addition to the above I would also explore the introduction of a jargon buster; words or jargon could be links to a dedicated glossary where users could filter items by alphabets. While this might change the scope of your project it will make the content more engaging, improve learnability and allow users to explore content more efficiently. Regarding navigation, have you considered anchor and back to top links? – Okavango Jun 17 '14 at 06:19
  • +1 for pointing out technical consideration that affect the user experience. And also for suggestions to support the presentation of content at different levels to cater for different groups of users – Michael Lai Jun 17 '14 at 06:24
  • thank you very much, these are some great thoughts! I will consider them in my first version. – Robert Jun 17 '14 at 13:43
0

I like the bootstrap sidebar solution you linked to, but agree that the mobile execution is poor. Instead try the following for mobile:

  • push the sidebar content to the top of the page instead of to the bottom - so it's the first thing the user sees
  • expand all nested navigation so the user can see subtitles without the need to tap to expand. Alternatively, if there a lot of nested categories making the navigation overly long, add a '+' icon to the primary categories to indicate which have nested categories beneath them.
  • add a 'Back to top' link to the bottom of each content section so the user can move quickly between the navigation and content
  • consider incorporating a smooth scroll transition to make it clear to the user that they have moved down (or up) a long single page, rather than moved to a new page
trbaldwin
  • 143
  • 5