next »

[eclectocrat]

Just want some general feedback on this website.

Keep in mind it's supposed to be script heavy.

Thanks for taking a peek.

www.eclectocrat.com

[johnki]

My girlfriend and I took a look at it. We came to the consensus that it looks really cool, but it's not immediately apparent that you have to hover over the monster to actually navigate the site, and there's a chance that others might just believe that there's nothing there.

[Magnesium Ninja]

Agreed with Johnki, you might not realize that there's more to the site than just the image.

Liking the design though, very dynamic! One thing I noticed is that if you click on an opened box (eg. when you select Games and click on the box that opens) the background stops until you click outside the box again. Not sure if it's intentional or not.

[eclectocrat]

Thanks for the gander guys. I'll figure out a way to put more attention on the little green blob. Eventually I'd like to turn it into a game that you can pause by accessing the menu.

... One thing I noticed is that if you click on an opened box (eg. when you select Games and click on the box that opens) the background stops until you click outside the box again. Not sure if it's intentional or not.

I'm loading the specific sections in an iframe, and whenever the iframe is clicked the main window gets an onblur message. Not sure how to avoid that. Guess I should take a peek at the jQuery event data.

Thanks for the feedback!

[Monstr1337]

The overall design of the site is awesome! The art style and the colour schemes really mesh well. The only problem I have with it is the usability of the site. -- I didn't know the menu was on the character.  This might be a problem for other visitors, other than that it looks slick. Keep up the work.

Are you using CSS3 to pull the background images to the left using @animation?

 

[eclectocrat]

No CSS tricks, just jQuery and a custom timing loop. It's actually quite primitive for now.

[JobLeonard]

Just checked on my netbook. Runs smoothly (always a risk with script-heavy stuff), but it doesn't play nice with small screens - mostly because it doesn't show scroll bars.

Also, I kept clicking on the pop-up descriptions thinking it was a drop-down menu.

That said, love the look of it!

[Monstr1337]

No CSS tricks, just jQuery and a custom timing loop. It's actually quite primitive for now.

Oh neat :D , the only problem with jQuery is if someone disables javascript the site won't function. Using CSS3, it will still work, except in IE because IE is garbage

Keep me posted when you update the site :D

[mcc]

I did not have a problem noticing I was supposed to hover over the monster. It stands out and makes you want to poke at it and figure out what it's for. But, it bothered me that there was such a long delay between mousing over the monster and being able to click menu items. Think about websites you've seen with popover menus, they're always instant, you never see like a scrolldown animation. After scrolling over the monster but before you see the menu here you must:

- Wait for it to fade from yellow to blue
- THEN wait for a menu to animate down

There's an awkward thing where moused over / not moused over is a discrete set of states-- either you are or you aren't-- but the indication you get that you have started mousing over is the monster turns blue, which is a slow fade that doesn't obviously or immediately communicate you've gone into the mouse over state.  Meanwhile, awkwardly, the background scroll stops instantly/discretely but the blue fade is gradual.

If I want to browse through your various website sections, it takes something like three seconds go go from the "not in menu" state to the "in menu" state. I can't see the menu buttons when I'm not in the menu, so if I look at the "games" page, I quickly forget what the other options were. And I can't just mouse back over to glance and see (bc the 3 second delay).

Meanwhile, when I load the site, the monster loads immediately and everything else loads maybe a second or two later. During this time my natural inclination is to go: Oh! A thing! I will mouse over / click on it!. But you don't get the menu behavior if you mouse over at this stage (or at least i didn't, chrome on mac). This misleads the user about what they're supposed to do.

Also, it looks odd and unbalanced that the left third of the screen is taken up by the monster / menu, the middle third of the screen is taken up by the "window", and the right third of the screen is... blank.

i think the weird sponge monster as an interface element / discoverable thing is sort of neat, but many other elements of this are offputting or seem slapped together rather than professional. What I would suggest is:

- On mouse over the monster, the menu appears and starts scrolling down *immediately*, while the monster is turning blue, so there is feedback to the user "see, you did something"
- While the menu+turnblue animations are occurring, the scrolling background glides to a stop rather than immediately halting
- Once you have selected a menu item, the menu should *stay up* until the content "window" is closed-- and i think, the background should stay frozen, or at least should freeze when you are moused over the "window". The only reason for hiding the menu in the first place is so that you can admire the monster / background effect. However, if you have selected a menu item and have the window open, you are not admiring the background. You are reading the text. At this point there is nothing graphical for a menu to distract from, and in fact trying to read text against a scrolling background (while admittedly cool...) is quite hard and makes it difficult to concentrate on your material.
- Find something to do with the right third of the screen, maybe move the "window" further right so it is centered between the monster and the right edge of the screen.
- Add screenshots for your games. (Maybe this would be a good thing to do with the blank area on the right?) Right now you have this graphical, inviting interface for your website which entices the viewer to play with things and click on things-- there is nothing at all enticing me to actually click on the link to play your game! As a user of the site, once I have the games pane up I feel more intrigued to click on more of the flashy moving buttons on the left hand side and see what they do, than I feel drawn to click on and play the game. In fact, writing this post I realize I have forgotten the name of the game by now, meaning the page (although it did a good job of cementing the monster/forest graphics in my mind) did not really do anything to make the name of the game(s) stick in my mind.

This sort of graphical, "game-y" web UI is working with powerful but dangerous stuff-- if you do it right it communicates to readers / potential employers (it seems like this site doubles as a resume?) "I can create nonconventional but highly intuitive interfaces". If you do it wrong it communicates "I use technology to make messes". The page looks neat and I feel like you could easily get this in the first category but ATM it seems closer to the second.

EDIT: Other thing I noticed:
- Scroll over the monster - Ctrl-tab to next tab in browser - Shift-ctrl-tab back - Mouse has not moved and is still over monster - Menu is still up - Background is suddenly scrolling again?

[walrus]

Wow, I'm not going to top the feedback on mcc's post, but I'll happily add my own $0.02.

I liked it, and didn't have too much difficulty figuring out what to do (there's only one obvious place on screen.) But if you were worried about it, you could, every 5 or 10 seconds or so flash a note or even have the character say "Hey, click here for menu" (or some other words getting the point across.)

On roll-over, the available buttons are white text on grey backgrounds and then the info that you get for each one is also white text on the same grey background, leading me to believe that they are submenus, so I tried to click on them (which makes you move the cursor off of the main button so it goes away.) You might try making the description sections a different look so it's clear that they're descriptions, not more nav buttons.

Lastly, this is picky but it bugged me that the monster was not in the same resolution as the background. You could consider rezzing him up to match the pixel density of the background. He'll still be plenty pixelly (ie. you won't lose your retro pixel sprite street cred! ) but it might make the page feel more coherent as a whole. Think of it as the HD experience! 

anyhow, hope this helps!

[eclectocrat]

Thanks everybody, and thanks mcc for the very insightful criticism. I see what you mean, the next version will will be better because of your appraisal.

[Ronsho]

The monster was pretty obviously clickable to me, at least knowing going in that it was someone's website.  And I think if anyone is confused that would be the first thing they try anyway, since it's so foreground.  I liked not being told expressly what to do. 

I also like the fact that it's over to the left.  No need to center everything.

The issues I had were with clicking "games", I got two reviews but it took me a while to discern which game it was talking about, if it was one or two games.  If you had the two reviews, then below them a link to the game title specifically it would help.  Also, it's just one game, right?  but it says games...

Under research, the only way it seems to scroll through the text appears to be to click and drag/highlight.  No scroll bar, nothing happens using the scroll wheel.  This is using Safari.

Otherwise, love the design/layout.

[wanyo]

Couple things to add to the suggestions:

If you're worried about usability with the monster perhaps give him a speech bubble that says "roll over me" if left for a few seconds without being rolled over.

The monster looks like he's ravaging over the lands and I like that a lot, it could be fun for him to have a simple animation while the background is moving.

The style of the site changes a lot when you roll over the monster and click the tabs, I'm not sure if it was intended to be like that, but you could go for a more unified look if you took the sections/buttons and gave them a more pixel style like the backdrop.

Also as others have said the rollovers for the buttons make them seem like dropdown/pullout menus that you could solve with a simple style change for them.

Lastly perhaps look into making the red link color a little lighter, certain screens and users have a problem seeing bright red's on a black background.

I hope any of this helps, I'm loving the style so far and I may have to look at some of your ideas for some future designs! <3