Skip to content

Text only goes halfway across screen. Rationale?

Hyrum Graff··3 votes·4,432 views

https://i.imgur.com/94Llbq5.png

Text doesn't go past the red line => that's a lot of wasted space. On the other hand, it allows for comments at various indentations to be consistent.

Rioters: Is this a bug, or by design?
Players: Whether it's a bug or not, should text go all the way to the end of the box, or stop where it does?

28 Comments

Pendragon4 votes

Fixed line lengths are certainly intentional. The longer the line is the more difficult it's going to be to read and follow the paragraph. This is especially true the longer the post is.

We certainly want to improve the experience on all monitors over time whether very large or very small.

Hyrum Graff1 votes

Thanks for the response!

######(Also, haha, the EUW account swap :P)

Kitch261 votes

I would like to suggest that you alter the post preview box to show where the line break is to accommodate for this. Just in case people want know exactly what their post will look like. As of right now, the text still extends all the way across the page. Just a thought.

Autinique1 votes

But on normal sized monitor screens (about 20" or so) you could benefit from that lost space. I hope you do, I understand your point but on most of the monitors you could and should just use that space. Maybe not all of it, but it should at least be a bit more than it is now.

Pendragon3 votes

In what way would you benefit? For the most part making the information more dense is only going to reduce your scrolling by a little bit, but it's going to decrease the readability of the content by a lot. We could try to "find" stuff to put in another column on the right, but it seems like forced for a pretty small benefit.

I think as we add new features to the boards generally there will be things that could utilize that space that we'll consider, but I don't think we're going to seek them out probably. We'd rather wait until we can solve a real need with it.

Also there's a bit of complexity that comes from expanding to that space - because it means we have to build multiple layouts depending on the monitor size which we're already thinking about a bit for large monitors, but also mobile & tablet..

Hyrum Graff1 votes

As of now, when you hit the thread depth "limit" (quotes because you can now reply to comments at max depth), there's still empty space between the end of the text and the end of the text box, at least on my display. Would you consider allowing threads to indent further, to use that space? I understand that on a smaller screen (tablets), this may not be possible; is there an easy way to dynamically change the maximum displayed indents based on the size of the monitor?

Pendragon1 votes

Can you take a shot of what you mean?

Hyrum Graff1 votes

https://i.imgur.com/efanGMq.png

By my estimate, there's room for 3-4 more indents.

Autinique1 votes

But what good is more indents? Won't it get a little too far to the right compared to the rest? I'd rather see Riot implement a twitter like system, using something like @<summoner-name>#post-number/id to show who that person is referring to.

Hyrum Graff1 votes

Maybe that'll be needed once we reach max indents, but I personally don't like that system except as a last resort. While it works fine at an intellectual level, I need to think about and search for who a given person is replying to. It's not as intuitive as intents, to me.

Pendragon1 votes

Each post should have a 600px box to fill starting from the left edge of the post. That means that posts that are indented should already be floating further to the right than ones that aren't.

Hyrum Graff2 votes

I'm a little unsure of what you mean/what your point is - I think it's because I was unclear in my suggestion.

This picture should help a little:

https://i.imgur.com/CE57U8N.png

The text box, as you said, is 600px. Then after the text box, on a post that's reached the maximum indent, there's ~180px of blank space (green). Each indent adds ~15px of padding on each side (yellow), so there should be room for ~6 additional indents.

I was wondering if it would be possible to allow posts to be indented those 6 additional times. It would go a long way towards keeping lengthy discussions easy-to-follow.

Pendragon1 votes

Got it. Yeah I want more visible levels of nesting too!

Autinique2 votes

Riot is a huge company, and League of Legends has grown massively since its launch. I've been playing since early 2010 now and I've seen the growth of this game. Don't you dare whine about the layout being responsive: a website of such a large game should be a responsive website anyway. I'm sure the web developers of Riot are easily capable of making the text globally compatible. Meaning: it displays correctly on every device. Now I agree with your point, reducing the width makes things easier to read, and scrolling isn't an issue either, also having some space left for future (?) features is also good. But, as a small web developer myself, I can tell that expanding the width depending on the device isn't that hard to do. The thing is, we are looking at it from 2 different angles over here. We, as the users (or at least some of us it seems), feel that the empty space should be used since it's empty. But you look more at the design aspect, because the text like this is easier to read. One thing you might consider to implement back, which is something you have taken away, is the 'summoner portrait'. You know, that space that contains our name, avatar, title, forum badges and such. I mean, you can't just leave that space empty, as a website developer myself it definitely feels unprofessional to leave a lot of space unused.

tl;dr

  • Riot's aspect: smaller width = easier to read, there's also space left for future (?) features
  • *My aspect: * unused space should be used instead of left empty.

You have to be honest here, the preview and the comment parts of these pages do use the full width and if you ask me it reads perfectly fine. Btw tip: I don't like this dark brown color when writing a comment, I know it makes it distinct from already existing rioter comments, but it just feels so ugly amongst the rest. I feel that the brown should be lighter, and maybe a text-shadow would suffice.

Pendragon4 votes

We will likely add features in the future that makes better use of the space that's there. We're probably not going to actively seek to fill space though just for the sake of filling space. That's not a responsible approach to design.

http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space http://baymard.com/blog/line-length-readability

Autinique1 votes

I agree, Pendragon. Just placing stuff there to fill it up is an irrational thought and unprofessional. Making a decision for the majority of the board users I think keeping the text small is better because of easier readability. As long as you don't keep that space unused, because it's there... it's asking you to be used..

AnonTwo1 votes

Okay...buy what about the fact that the preview does not reflect the formatting in the actual box as is? If someone is trying to make a very carefully formatted thread, they expect that when they hit preview, they'll see exactly what they typed as it will appear on the forums. But as some have seen the preview actually wordwraps less tightly than the forums do.

This leads to the issue where your post can show up looking poor simply because it got word wrapped at places it wasn't supposed to.

This post should be a 3 line paragraph, and 2 lines after that. ^ As you can see from this, the preview did not accurately reflect what was posted.

Instead it ended up being a 4 line paragraph, with a 2 line sentence and a 1 line sentence after that. <---was one line

Pendragon3 votes

We have a fix upcoming that will make preview accurately reflect the real line length!

Kitsune Saleh1 votes

The longer the line is the more difficult it's going to be to read and follow the paragraph. This is especially true the longer the post is.

Pendragon, you come across to me as completely out of touch. How exactly do smaller margins make things easier to read? When you use Microsoft word do you make your margins really narrow? Having a 6-inch text window does NOT make things easier to read. People are used to reading things about the width they would be on a piece of paper.

Pendragon1 votes
  • The viewable area on a letter sized piece of paper with standard margins in Word is 6.5 inches
  • If you open up word using the default font and sizing you get approximately 100 characters per line.
  • Lines here are wrapping at about 90 characters and we're open to experimenting with length a little bit
  • Commonly accepted standards for line lengths are somewhere between 70 and 110 characters

Here are some resources

From the last link:

Reading Efficiency. Reading efficiency was computed by multiplying the reading speed by the percent correct on the comprehension questions. Results of a one-way within subjects ANOVA showed a marginally significant effect of line length, F(3, 57) = 2.68, p = .06, η² = .12. Significant differences were found between 35 cpl and 95 cpl with the 95 cpl being more efficient.

Lénekton Bot1 votes

Might be just a CSS styling rule from the older design. Probably they just set the flexible width maximum of text quite a lot lower that the whole posts width.

Hyrum Graff1 votes

I just went to take a look at the old design, and I suspect you're correct.

Having compared them side-by-side, the biggest difference is that the sidebar is much larger on the community beta than on Boards. There's also a little less space between the sidebar and the text. It's difficult to tell, but this font might or might not be a little narrower than the CB's font, as well.

And the space saved just* turns up as extra space to the right of the text, ala the OP.

*And gives them enough space to remove the thread depth limit.

edit: Pendragon having confirmed that this is by design, feel free to disregard my first sentence :P

Morvrannis1 votes

I would actually guess that this is intended. These days, most people's monitor resolution is quite high. If text is allowed to extend across the whole width of the monitor, it actually starts becoming quite difficult for the human eye to maintain track of what line they are on. It's much easier to handle short-width paragraphs. This is why you'll see this same type of trend across many, well-designed websites.

Now, Riot could shorten that width and put other links or whatever on the right-hand side (something they've done in these forums for example), but, my guess is that it doesn't fit some sort of internal style guide.

Hyrum Graff1 votes

Now, Riot could shorten that width and put other links or whatever on the right-hand side

pvp.net chat integration, is that what I'm hearing? ;)

edit: aaand you're right

Cryxx1 votes

Now, Riot could shorten that width and put other links or whatever on the right-hand side

pvp.net chat integration, is that what I'm hearing? ;)

edit: aaand you're right

Well, Adobe Air is no longer being supported by Adobe. Technically pvp.net is just a webpage displayed in an fancy IE page. I don't even allow IE to run on my comp because of how many loopholes it has to the OS. I have to do some odd things to get it to work with cookies since the no account can run the executable.

So in short, pvp.net should just be removed and the whole game launch chat etc should be integrated into their main website.

Then you can still be chat on one screen while you wait the 5-10 min for 1/2 of the league players to load. Since they created a game most toasters can run. I ran it fine on a 10+ year old cpu and 10+ year old gpu with 40fps, and it still loaded slow for me.(75-90s). That is still faster than at least 1 in 10 players usually 2-3 of them.

Quake Live plays from a browser. The tech is possible.

Kitch261 votes

I'm okay with it as long as people format posts in a sensible manner and don't just have a wall of text.

I think the empty space could be better used by placing image previews there. An image preview would essentially appear beside the text and would be centered on the link or paragraph

Elphrihaim1 votes

Having read all this, I can't think of any ONE spot to reply to that works for the discussion view.

So while I understand the logic behind making the posts indent both on the left and right, as well as having space that cannot be utilized on some posts below some nesting levels;

Can we please have the ability to have that NOT be the case? Every time I see it I think my browser is thinking it's in a windowed mode (because this setup is exactly what happens if I take my browser and full-screen it but the text hasn't had time to push).

Can we have an option to remove the right-side indents, in favor of further reducing the vertical space of the page? This is a very big issue for any thread that requires you to scroll down to the bottom, hit 'show more' and then continue scrolling to actually find the comment chain you were reading earlier.

Can we have pages instead of that Show More button, actually? With the Show More button, it's hard to find a thread that didn't happen to get upvotes when viewing by Hot or Best, and it's hard to find a thread that was buried by other threads (that were posted more recently than it though not by much) in Chronological view.

And... why does the post preview use the full width of the page?! If I want it to actually preview my content, it should, logically, display it as it will show when I post it-- which is not the case, my lines can run all the way to the right side of the blue box even though they won't once I post this ( http://imgur.com/ZXNSJwO)

re: hard to find: I was going to make this exact topic, but after opening Show More twice I found it. If I had had to go do something before I found it, I probably would have closed my browser, and would have had to wait for each opening of Show More before I'd be able to start searching again.

More from Boards Feedback

More by Hyrum Graff