Design and Layout Mock-ups...

[godix]

Welcome to simplicity at it's finest:
http://dl.dropbox.com/u/15771457/ReDesi ... Basic.html

I like it. What is on it makes sense and should be on it. The junk that few care about, or at least wouldn't care to see constantly, is not on it. It doesn't require looking over tons of text to find the useful stuff. The menus seem to be laid out clearly than the current menus and includes the relevant and important things. Although the others have a point, the orange does look bad, but color is a cosmetic change. For the layout, I would be quite happy with this.

I think announcements and news should be higher up on the page so users will see them.

Yeah, I'm thinking right above the tabs.

I don't have a strong opinion on the positioning of these really, but on an intellectual level I do disagree. I think the FP should be presented in order of most used to least. I very strongly suspect searching/watching videos is the primary things people want to do. Next most often would be QCs, ops, alerts, etc. Then last would probably be announcements which are changed, at most, once a month or so. Plus the news is usually things like the logo contest which, honestly, is no big deal if a user doesn't notice it. This is just a gut feeling though, if someone has some real stats on what the most commonly used elements of the FP really are then that should dictate the order.

That being said, as long as previews are kept above the fold and without scrolling needed to see it all then I'm happy. Beyond that, I won't argue the point.

[BasharOfTheAges]

Data of the most used elements would be, unfortunately, skewed to the current reality of the layout. By establishing the mindset of "making these changes is going to cause drastic usage shifts" then we have to realize we're also implicitly saying that current trends are driven primarily by the current layout and are therefore not as relevant to the process as you'd think.

To put it another way - if you buy into the theory that the users are so simpleminded that they can't get past our current layout and need to change it (which i assume we all do because we have these threads and everything) then our current usage patterns are flawed data that should be tossed aside as a byproduct of our current flawed design.

[Corran]

Some quick bug notes in primary demo:

• In Chrome the stats do not line up with the banner in header causing the header to be about twice as tall as it is supposed to be.
• In IE8, if you mouse out of an expanded menu directly onto the flash player, the menu does not always close.
  

  Code: Select all

  <li><font color=#00ccff><center>_______________________<center></li>
  <li><center>EDITOR GUIDES<center></li></font>
  

• Please use CSS for presentation. For this I would suggest using a <span>
• Also the start font tag may need to go in front of the first list element. I think it is causing a bug in IE8 where the item occasionally stays highlighted blue.
• You should change the font color of these list items on hover also, otherwise they become a solid block of blue when you mouse over them.
• In IE8, the Community/Events and Help menus are not seperated by a white line like the others and Help is not aligned with the other menu items.
• The text on the checkered background, especially the blue text above the video player in the basic version is difficult to read.
• It is possible to select a blank item from the search drop down list.

I'll try to go into detail on the design ideas in general this weekend.

[Panky]

Am I the only one that thinks that the 2 info tables (banners and video ones up there), while they are pretty well positioned, most of the times are useless to be on the frontpage? Yes, if you were to put them on a separate page with all the info of the org, that would be good and some interesting info, but IMO they don't need to be stealing places in the frontpage.

I like where your design is going to. But I think there is still a big amount of tabs to where to go to do things that could pretty well be done in a same page. But it's not really css dependent but script dependent, and to put them all together can take some time.

Also, I really liked your full preview window with the info. It's a good way to put all the info in a little chunk of space and not make it bothersome. Annnnd, I think the only thing that needs fixing for this design is changing the title and creator when changing of video. Although it isn't that necessary for now and can be a bit of a pain.

[Phantasmagoriat]

I think announcements and news should be higher up on the page so users will see them.

Yeah, I'm thinking right above the tabs.

I don't have a strong opinion on the positioning of these really, but on an intellectual level I do disagree.

Yeah, I'm re-thinking that. Stars/QC's are used more frequently than Announcements, so putting Announcements below seems to make sense. In terms of gaining visibility, they can be integrated with Alerts: "Hey! did you notice the new announcement below? lolzorz"

Data of the most used elements would be, unfortunately, skewed to the current reality of the layout. By establishing the mindset of "making these changes is going to cause drastic usage shifts" then we have to realize we're also implicitly saying that current trends are driven primarily by the current layout and are therefore not as relevant to the process as you'd think.

To put it another way - if you buy into the theory that the users are so simpleminded that they can't get past our current layout and need to change it (which i assume we all do because we have these threads and everything) then our current usage patterns are flawed data that should be tossed aside as a byproduct of our current flawed design.

You're thinking too hard Bashar. Do you, or do you not want a new layout? :3

Some quick bug notes in primary demo:

• In Chrome the stats do not line up with the banner in header causing the header to be about twice as tall as it is supposed to be.

Okay, I added a 15px margin-top to the stats, but the logo has always been taller than the banner, so the height doesn't really change. Then again I kind of like having a thick margin around the banner.

[*]In IE8, if you mouse out of an expanded menu directly onto the flash player, the menu does not always close.

Code: Select all

<li><font color=#00ccff><center>_______________________<center></li>
<li><center>EDITOR GUIDES<center></li></font>

[*]Please use CSS for presentation. For this I would suggest using a <span>
[*]Also the start font tag may need to go in front of the first list element. I think it is causing a bug in IE8 where the item occasionally stays highlighted blue.
[*]You should change the font color of these list items on hover also, otherwise they become a solid block of blue when you mouse over them.
[*]In IE8, the Community/Events and Help menus are not seperated by a white line like the others and Help is not aligned with the other menu items.
[*]The text on the checkered background, especially the blue text above the video player in the basic version is difficult to read.
[*]It is possible to select a blank item from the search drop down list.[/list]

I'll try to go into detail on the design ideas in general this weekend.

I'm a novice at html/css Thanks for the input and I'll keep these in mind, but most of the people affected are IE users Plus the real site coders are using their own flash content so these problems will probably be addressed. Some things should be easy to fix though.

Am I the only one that thinks that the 2 info tables (banners and video ones up there), while they are pretty well positioned, most of the times are useless to be on the frontpage? Yes, if you were to put them on a separate page with all the info of the org, that would be good and some interesting info, but IMO they don't need to be stealing places in the frontpage.

I think I'm going to scrap them in the next version. The org could use a separate Site Statistics page anyway IMO

I like where your design is going to. But I think there is still a big amount of tabs to where to go to do things that could pretty well be done in a same page. But it's not really css dependent but script dependent, and to put them all together can take some time.

I know what you mean, if you have any suggestions, I'm all ears

Also, I really liked your full preview window with the info. It's a good way to put all the info in a little chunk of space and not make it bothersome.

I knew someone would like the full preview window!

Annnnd, I think the only thing that needs fixing for this design is changing the title and creator when changing of video. Although it isn't that necessary for now and can be a bit of a pain.

Oh yeah, I don't really know how to change elements in the html using the content in the flash window. I'm too new to html/css/flash but I'm sure the real site coders will have a way to display that information properly. If I had to take a wild guess, the links to the Video/Editor Profiles would be integrated into the flash window.

[Knowname]

See with tabbed pages I can only have one tab open at a time (unless the page is cut off into multiple tabs, like a seperate one for each section... similar to linux desktops), I'd rather have expandable menus as we have now

Why would you need more than one tab open at a time. Having all that expanded would take up too much space IMO.

agreed about the multiple tabs thing, it would just get too unwieldy, just leave it as is. or perhaps a hybrid of the two.

See the thing I see is the way I see it (and the way things are set up now), I mostly use the journal system so I have the 'my account' menu open, every so often I search for amvs and I vainly like to look at my previous ops given from time to time. I'm just saying if all the menus were seperated in tabs that dominate the entire screen than how could I go from one section to the next in just one click? Not only that, but what if I don't remember that the 'ops given' link is in the fans section, and I go looking for it in community or something else. This just adds to my downtime, I'm just saying tabs would just be HORRIBLE and make me spend 3x as much time going from section to section in this stupid place.

So what would we do? put multiple tabs on the page? #1 I don't think I'd like the way it would look BUT MORE IMPORTANTLY #2 (and this is a current 'problem', what if there's some new epic interview that I might be interested BUT I never look there any more because it hasn't changed for 5 years! What's gonna tell me to open up all of the tabs/ menus to check these things that RARELY change?

Maybe a new notice? IMHO this section SHOULDN'T be collapsible :/ I don't really like it though, it can get too messy, it's just text on a page, it can get crowded (wall of text) and it's non-interactive. What I'm trying to get at is NEW UPDATED sections should be highlighted in a notification type deal, BUT the 'notice' section alltogether needs to change. Those aren't 'notices' their announcements! Notices are interactive messages that tell you what changed since your last visit they dont just sit there like stoic text on the page, this doesn't suite my purpose! If changed this announcement section SHOULD be collabsible, but the NOTICE section should not. Maybe it should be more at the bottom of the page though, like the other interactive sections (your ops, qc's, alerts, new vid and so on)

Phan: I'm not liking the color scheme to be honest, the orange color really is coming off very ugly and intrusive. I was talking to NME and he suggested maybe using green as the primary color in the design. I agree with this.

Yeah, I also find the orange to be rather agitating.

the aesthetics is just an afterthought I'm playing with. The color scheme can be changed easily in the css at any time. I just used Orange and Blue because it's similar to the current site. I think the org would look good with some pastels/lights because those are the types of colors common in anime. I think that's why we have the current pinkish-orange in the header. But if you have ideas, maybe discuss them in the Design thread (what do you think of the textures/gradients/roundcorners?), or maybe someone should create a new thread for Aesthetics... IDK...

I'm glad to see people are starting to provide input. This is exactly what we need.

Ileia just wants everything to be pink... and Joey's just insecure

[BasharOfTheAges]

@phan: I do, i was just responding to godix's comment about data on current usage. Major rehauls of UI are pretty much a start from scratch kinda thing - we don't really need usage data if we're admitting it was so bad to begin with that we'd need an overhaul. Poisoned well and all that.

If I didn't want an overhaul, i'd be pointing out that the small subset of people on the site (the ones here that DO participate in the forums) represent a selection bias in their feedback (in that they're not the 99% majority of they site we're claiming this re-do is for).

In actuality i'm sick and i've taken over 2 times the recommend dose of nyquil without falling asleep, so my mind is currently fixated on pointing out complicated logical messes that have no real answer.

[Phantasmagoriat]

than how could I go from one section to the next in just one click?

Use tabs in your browser: Hold ctrl, then click the link you want to open in the new tab. If you want to open in a new window use shift+click. To navigate forward between tabs, use ctrl+tab. To navigate backwards use ctrl+shift+tab.

Not only that, but what if I don't remember that the 'ops given' link is in the fans section, and I go looking for it in community or something else. This just adds to my downtime, I'm just saying tabs would just be HORRIBLE and make me spend 3x as much time going from section to section in this stupid place.

I think you are underestimating yourself

what if there's some new epic interview that I might be interested BUT I never look there any more because it hasn't changed for 5 years! What's gonna tell me to open up all of the tabs/ menus to check these things that RARELY change?

That's what the Alert and Announcement tabs are for. They change color and have attention-grabbing stars whenever there is new content.

Those aren't 'notices' their announcements! Notices are interactive messages that tell you what changed since your last visit they dont just sit there like stoic text on the page, this doesn't suite my purpose! If changed this announcement section SHOULD be collabsible, but the NOTICE section should not. Maybe it should be more at the bottom of the page though, like the other interactive sections (your ops, qc's, alerts, new vid and so on)

There are big differences between Announcements, Notices, and Alerts.
Announcements are things everyone needs to know at a particular time - ex.)Updated guides, Logo contest
Notices are like announcements, but are applicable all the time - ex.)Please Donate, Check your spam filter
Alerts are things that pertain specifically to you - ex.)Subscriptions, PMs, Forum Posts

Visibility-wise, I think Alerts > Announcements > Notices
Announcements are perhaps more important than Alerts, but you can have Alerts that tell you to check any new Announcements and Notices. If we do this, I would be alright with putting them both at the bottom of the page, so that the 'meat' of the site is most visible. People don't need to be bogged down by having announcements/notices constantly in their face. They just need to read them once. Having an Alert inform you of new announcements would achieve that. You might be on to something regarding making Notices non-collapsible

Ileia just wants everything to be pink... and Joey's just insecure

Actually, Orange is associated with a lot of attention-grabbing things like Construction and Caution signs, so I see where they are coming from. While we do need to grab people's attention, it needs to have more of a positive spin instead of giving people heart attacks. That being said, the current site uses a lot of orange, so I'm kind-of used to seeing it.


@bashar: Yeah, I see what you mean. I think the org would be best to just borrow ideas from other successful sites. Oh, and good luck with your insomnia :]

[Knowname]

Use tabs in your browser: Hold ctrl, then click the link you want to open in the new tab. If you want to open in a new window use shift+click. To navigate forward between tabs, use ctrl+tab. To navigate backwards use ctrl+shift+tab.

I think you are underestimating yourself

I don't even use hot keys (other than ctrl-c ctrl-v ) what makes you think the casual viewer would? not to disagree with you, but just for argument's sake I just think tabs are a bad idea.

[dreamawake]

I still think that orange needs to go. It seriously like, assaults your eyes. Green ftw.