Future Marathon Front Page Design Ideas

Tranquilite

2012-05-30 01:51:38 am

Amazing. You can't not be happy with this.

Alko

Edit history:

Alko: 2012-05-30 05:11:21 am

2012-05-30 05:09:59 am

Caution: This user contains Kana ^_^

How to save the layout in case of page refreshing: Cookie? It would just need to contain the top left pixels, width and height of every window present ^^

Also, a tiny drop-down menu could contain a few pre-picked designs, like the ones that got most approval here ^^ And one for palms.

Lag.Com @ Work

2012-05-30 05:15:56 am

Alko: no requests are made between server and client while moving/resizing the windows, so there's nowhere to send a cookie. I could add an ajax thing that saves a cookie, maybe, but it would increase server load, hmm...

also there IS a dropdown of designs jeez

KenDeep

Edit history:

KenDeep: 2012-05-30 05:32:30 am

2012-05-30 05:30:47 am

Running: RnF,Kof98, ALIEN HOMINID???

As I said in the chat, I love the idea. I just want to present a different idea that implements the sponsor banner, since I personally think that's still an important part.

Positioning may vary depending on the size of the banner.

Also: What about having a different stream ratio instead of 4:3?

Alko

Edit history:

Alko: 2012-05-30 05:33:32 am

2012-05-30 05:33:22 am

Caution: This user contains Kana ^_^

Cookies are client-sided iirc; so the client-sided movement of boxes can be client-sidedly java-scriptedly saved in a client-sided cookie, can it not?
If the whole building up of the page is client-sided, the server just needs to tell the client 'these windows exist, these are the four presets, this is default, check your cookie, how to build this'.

@dropdown menu: sry, didn't bother to look at the screen again ^^' My bad *goes standing in the corner for five minutes*

Or was I missing something?

Lag.Com @ Work

2012-05-30 06:57:57 am

Huh I didn't think cookies worked like that at all.

Done. Page now remembers your last layout and defaults to it if one exists.

Lag.Com

2012-05-31 10:26:00 am

sda loyalist

Okay, I had a go at adding a Current Game widget which has all the static content from the stream in it, i.e. game name, runner name and stream, estimated game time. When the system is finished, it would let someone enter these details elsewhere, which would then update on everyone's stream page.
I also made my own widget for parsing the ChipIn feed. This should get rid of all those 'my widget isn't updating' problems people have, as well as making it a lot easier to resize for people's purposes.

Obviously the design for both of these widgets is not finalised, I just wanted them to work for now.

sinister1

2012-05-31 11:27:54 am

sinister1

so pro u don't even know

Very well done Lag.com the streaming layouts are great. My only suggestion atm would be to flip flop the position of Aux stream and Chip In for the "Tall" layout because Chip In is the higher priority object and should take vertical priority. My other suggestions mainly relate to the other aspects of the page.

The use of vertical space does not promote usability. No viewer should have to scroll down to see the stream. The number one goal of our efforts is to raise money for the charity and that priority should be reflected in the page layout. Therefore the stream and chip-in should be the first things viewers see or at least be visible upon loading the page.

Possible solutions include (I do not really have time to make mock-ups ATM so use your imagination):

1) Putting everything (banner, yetee, faq) below the stream area.
2) Combining the above 3 into one page element that does not take up vertical space to the point that the stream/chip in are not visable upon page load.
3) Combining the Yetee and SGDQ banner into a shared space and placing the FAQ below the stream area.
4) Making the FAQ section into a hidden div that would display on click of a link titled "Frequently Asked Questions" or "FAQ" based on how we are using space. Or other variation of FAQ link to display information.
5) Probably the best would be using some combination of the above listed.

I have other stuff, but no time, so this is it for now.

Very well done Lag.com the streaming layouts are great. My only suggestion atm would be to flip flop the position of Aux stream and Chip In for the "Tall" layout because Chip In is the higher priority object and should take vertical priority. My other suggestions mainly relate to the other aspects of the page.

The use of vertical space does not promote usability. No viewer should have to scroll down to see the stream. The number one goal of our efforts is to raise money for the charity and that priority should be reflected in the page layout. Therefore the stream and chip-in should be the first things viewers see or at least be visible upon loading the page.

Possible solutions include (I do not really have time to make mock-ups ATM so use your imagination):

1) Putting everything (banner, yetee, faq) below the stream area.
2) Combining the above 3 into one page element that does not take up vertical space to the point that the stream/chip in are not visable upon page load.
3) Combining the Yetee and SGDQ banner into a shared space and placing the FAQ below the stream area.
4) Making the FAQ section into a hidden div that would display on click of a link titled "Frequently Asked Questions" or "FAQ" based on how we are using space. Or other variation of FAQ link to display information.
5) Probably the best would be using some combination of the above listed.

I have other stuff, but no time, so this is it for now.

Lag.Com

2012-05-31 12:12:17 pm

sda loyalist

You're absolutely right about the stream having priority. Perhaps a banner should briefly appear (fixed at the bottom at the screen?) while the stream is loading etc, then hide itself after a few seconds. Have it be on a pullout tab which can then be checked out later if they want it.

I work for a website design company now, maybe I should ask one of my designer buddies to do a proof. :p

Paraxade

2012-05-31 01:06:54 pm

My personal preference is to have the info like runner name, game name, estimate etc. on the stream, because I liked to fullscreen the stream a lot and it's great to have all the info right there onscreen instead of having to exit out constantly to see what was going on. That aside these new designs look amazing, much much better than what we've been using.

Alko

2012-05-31 03:05:45 pm

Caution: This user contains Kana ^_^

Quote from Paraxade:

My personal preference is to have the info like runner name, game name, estimate etc. on the stream, because I liked to fullscreen the stream a lot and it's great to have all the info right there onscreen instead of having to exit out constantly to see what was going on. That aside these new designs look amazing, much much better than what we've been using.

Assuming you take a second to look at the page before wildly clicking full-screen should that be too much of a problem?
Also, I don't know how others watch marathons, but I for my part am looking for games on the schedule, and thus know what's gonna happen. With slightly more frequent roll calls *sideways glance at commentary* you'ld find out who's running, too Wink

dballin

2012-05-31 05:34:11 pm

Balls jerky

You have no idea how excited I am to have the option to use 100% of the horizontal space on my monitor. Holy crap no more wasted space!

Lone_Kilted_Ninja

2012-05-31 09:08:59 pm

Anything you can do I can do halfass

I'd still vote keeping the game, room and basic info all on the screen, both for the monitoring reasons Paraxade brings up (say I'm sitting across the room with the stream on fullscreen so I can see it when I look up, but not actively paying attention to every moment- it's nice to be reminded of who's running what and for how long without having to stop what I'm doing, get up, exit fullscreen, check the info, and re-enter fullscreen) and for the ease of processing the video after (it takes long enough to just encode and post everything; we don't want to add manual steps of overlaying streams and metadata in a video suite just to have it all preserved for the archive).

Reconfigurable will be nice, and a revised donation widget that's as reliable as UA's tracker page would be a big plus.

The only other bit of info I was routinely wishing I had was the next 2 or 3 challenges/choices pending cutoff at a given time. In some games this was easy enough to tell, but in the big RPGs when my memory was fuzzy and I didn't know the route that would be run, alphabetical sorting on the schedule/tracker pages was most unhelpful.

I'd still vote keeping the game, room and basic info all on the screen, both for the monitoring reasons Paraxade brings up (say I'm sitting across the room with the stream on fullscreen so I can see it when I look up, but not actively paying attention to every moment- it's nice to be reminded of who's running what and for how long without having to stop what I'm doing, get up, exit fullscreen, check the info, and re-enter fullscreen) and for the ease of processing the video after (it takes long enough to just encode and post everything; we don't want to add manual steps of overlaying streams and metadata in a video suite just to have it all preserved for the archive).

Reconfigurable will be nice, and a revised donation widget that's as reliable as UA's tracker page would be a big plus.

The only other bit of info I was routinely wishing I had was the next 2 or 3 challenges/choices pending cutoff at a given time.  In some games this was easy enough to tell, but in the big RPGs when my memory was fuzzy and I didn't know the route that would be run, alphabetical sorting on the schedule/tracker pages was most unhelpful.

Lag.Com

2012-06-01 12:56:10 am

sda loyalist

Not convinced by the fullscreen argument - instead of going fullscreen you could just arrange the windows so that you get what you want anyway. However, LKN has a good point with the later downloadable videos having the info on them. I'll concentrate on making something which hooks into the donation tracker and schedule then.

sinister1

Edit history:

sinister1: 2012-06-01 09:04:42 am

2012-06-01 09:01:39 am

sinister1

so pro u don't even know

Quote from Paraxade:

My personal preference is to have the info like runner name, game name, estimate etc. on the stream, because I liked to fullscreen the stream a lot and it's great to have all the info right there onscreen instead of having to exit out constantly to see what was going on. That aside these new designs look amazing, much much better than what we've been using.

QFT

Also, Lag.com that would be awesome if one of your designer buddies was willing to do a proof.

EDIT: Also having a tabbed menu that would display the schedule/donation tracker/faq/anything else so ppl could easily click to see whichever they wanted without having to navigate away from the marathon page would be ideal.

ssskinner

2012-06-01 09:29:10 am

every game is a horror game

Putting in an agreement with everything sinister1 has said here especially on the counts of making sure it's super visible about donations and information needing to be on the stream. I think the font being used for the info is way huge though and more video could be taken up by game/runner cam. I know people will have a lot of excellent info in the next few months on how to make the stream more beautiful and what was used before definitely worked. Time to take it to the next level. Smiley

Wish I could be more help!

ShadowWraith

2012-06-01 09:33:22 am

.

I like it.

ummeiko

2012-06-01 03:55:50 pm

First off, I'm totally in love with the idea of not having to scroll up and down between chat and stream.

Now, in regards to the actual stream video, I agree that runner info is nice to have, but that there is also a lot of negative space. However, from a design standpoint, I'm not sure that's as easy as a fix when you have 2 videos (I'm assuming they're at 4:3 ratios each). With two different cams, to eliminate some more negative space, you'd have to have say, the game video really large (not a bad idea), but the runner cam really small (problems come up when you want to show prizes, or even introduce people - small runner cams work okay when you're focusing on one person, usually their face or in the case of handcam for Typing of the Dead, but not good when you want to shoot the whole room).

Unless you can make the actual stream in a nonstandard or widescreen format, getting rid of the negative space is going to be impossible with splitscreen videos. I'm not a graphic designer really, but I can mock something up for ways to at least make it pretty, and then we can work with what the stream is actually capable of. What are the dimensions of the stream window by default? 640x480?

First off, I'm totally in love with the idea of not having to scroll up and down between chat and stream.

Now, in regards to the actual stream video, I agree that runner info is nice to have, but that there is also a lot of negative space.  However, from a design standpoint, I'm not sure that's as easy as a fix when you have 2 videos (I'm assuming they're at 4:3 ratios each).  With two different cams, to eliminate some more negative space, you'd have to have say, the game video really large (not a bad idea), but the runner cam really small (problems come up when you want to show prizes, or even introduce people - small runner cams work okay when you're focusing on one person, usually their face or in the case of handcam for Typing of the Dead, but not good when you want to shoot the whole room).

Unless you can make the actual stream in a nonstandard or widescreen format, getting rid of the negative space is going to be impossible with splitscreen videos.  I'm not a graphic designer really, but I can mock something up for ways to at least make it pretty, and then we can work with what the stream is actually capable of.  What are the dimensions of the stream window by default?  640x480?

honorableJay

2012-06-03 05:11:19 pm

The Dork Knight himself.

I'm definitely liking the ability to move/resize windows. Combined with having 1680x1050 res and using F11 to go fullscreen in firefox I can get the perfect setup with a huge stream window and still have the chat window right next to it.

Attachment:

1680x1050.jpg

Corco

2012-06-04 11:03:07 am

I would really like to see a widget with the current prizes and grand prizes in it. Just something that says:
"donating $5 or more during [game name here] will enter you in to a drawing for [prize name here with a link to a photo/description]"
"donating $10 or more any time during the marathon will enter you in to a drawing for [grand prize name here with a link to photo/description]"

Then all you'd have to do is update the widget on site as the game is changed and that would refresh the widget on the client side.

Lag.Com

2012-06-04 11:53:59 am

sda loyalist

Corco: Yep, that is precisely the kind of thing I wanted to do. That's a nice precise idea though.

Yagamoth

Edit history:

Yagamoth: 2012-06-05 01:40:12 am

Yagamoth: 2012-06-05 01:40:11 am

2012-06-05 01:39:00 am

INTJ

Quote from Alko:

Quote from Paraxade:

My personal preference is to have the info like runner name, game name, estimate etc. on the stream, because I liked to fullscreen the stream a lot and it's great to have all the info right there onscreen instead of having to exit out constantly to see what was going on. That aside these new designs look amazing, much much better than what we've been using.

Assuming you take a second to look at the page before wildly clicking full-screen should that be too much of a problem?
Also, I don't know how others watch marathons, but I for my part am looking for games on the schedule, and thus know what's gonna happen. With slightly more frequent roll calls *sideways glance at commentary* you'ld find out who's running, too Wink

On the note of how others watch the stream: I had the stream on fullscreen for the most part (usually over the course of multiple runs/hours), sometimes doing other things on the second screen. This being said, I like the information being on the stream itself, since I like being able to turn off the second monitor and simply watch the run stream without any other influence, such as chat, bright sections or browser-borders.
As in: For me personally the stream was perfect as it was, but I'm not everyone Smiley

But, I like what's coming together here. Looks interesting Smiley

Also, on the Bonus Stream people were often playing two different games at the same time. At one point I've seen them arranging the layout, so the games were top left/top right, the webcam bottom middle and the Information left and right of the webcam. I wonder, whether that would be a good layout for races too

[quote="Alko"][quote="Paraxade"]My personal preference is to have the info like runner name, game name, estimate etc. on the stream, because I liked to fullscreen the stream a lot and it's great to have all the info right there onscreen instead of having to exit out constantly to see what was going on. That aside these new designs look amazing, much much better than what we've been using.[/quote]
Assuming you take a second to look at the page before wildly clicking full-screen should that be too much of a problem?
Also, I don't know how others watch marathons, but I for my part am looking for games on the schedule, and thus know what's gonna happen. With slightly more frequent roll calls *sideways glance at commentary* you'ld find out who's running, too ;) [/quote]

On the note of how others watch the stream: I had the stream on fullscreen for the most part (usually over the course of multiple runs/hours), sometimes doing other things on the second screen. This being said, I like the information being on the stream itself, since I like being able to turn off the second monitor and simply watch the run stream without any other influence, such as chat, bright sections or browser-borders.
As in: For me personally the stream was perfect as it was, but I'm not everyone :)

But, I like what's coming together here. Looks interesting :)

Also, on the Bonus Stream people were often playing two different games at the same time. At one point I've seen them arranging the layout, so the games were top left/top right, the webcam bottom middle and the Information left and right of the webcam. I wonder, whether that would be a good layout for races too

UraniumAnchor

2012-06-05 04:07:12 pm

Not a walrus

Quote from Yagamoth:

Also, on the Bonus Stream people were often playing two different games at the same time. At one point I've seen them arranging the layout, so the games were top left/top right, the webcam bottom middle and the Information left and right of the webcam. I wonder, whether that would be a good layout for races too

The reason they did that was because different games were playing. It doesn't make as much sense for races.

honorableJay

2012-06-06 08:31:45 pm

The Dork Knight himself.

I actually like that idea of treating races like there are two different games going on, makes it much quicker to tell which runners are on which screen. Yes I know I could easily just read the run info that was posted on the stream itself, but being able to put the runners underneath their stream window makes it easier/quicker to tell and not pull my attention away from the action as much.

UraniumAnchor

2012-06-06 10:49:25 pm

Not a walrus

Well, it's supposed to be right runner on camera = right display on stream, but that got reversed for the first couple of races before I realized it was backwards.