Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

New flash site - usability test anyone?

I

ICD2k3

macrumors newbie
Original poster
Apr 23, 2007
13
0
Hello,
I recently updated the design of my portfolio and was wondering if any of you could do a quick usability test for me. Just check out the site at: http://www.justinschrader.com and answer the question below when you come back to macrumors..




Don't read below until after viewing










How long did it take you to realize that the middle bar is draggable for resizing the portfolio content? Did you realize it at all?

Oh, and what do you think of the design? Thanks guys
 
Pretty good and clean design for showcasing of your work. I did not event realize it is possible to drag the middle bar until you point it out in your post.
 
Bravo!

This is an excellent example of why Flash is great.
The simplicity of the site design hides a wealth of very compelling content.
The site is interesting, easy and fun to use.
Have you submitted it to thefwa.com?

I cheated on the draggable content area, so I can't comment on that, except that I liked it.
 
I like the design and the resizable content is neat. But it bothers me that I keep having to drag it around to access the navigation. I guess if you leave it in the middle it works fine though.

I couldn't answer your question about how long did it take me to realize because that was the first sentence of your post that reached me eyes. ;)
 
Nice! :) I picked up on the dragable thing quickly.

Only a couple of very minor comments, but overall it's done very well:

The sub links when on the left are a bit too similar to the main links. This was probably just me, but it threw me off a bit, since I wasn't familiar with the main links yet.

This isn't that important, but I tried clicking on an active section bar thinking it would mimimize that section. This kind of ties into my above comment, because at first I didn't really see the difference. :eek:

Also check out SWFAddress, it works with SWFObject. It will allow you to tie all of your links into the back, next, and refresh buttons on the browser. It's a bit of work to setup the first time around, but from there all is cake. This way refreshing or hitting back won't reset the entire site. You can also send clients links that point directly to one piece of art with in your site. :)

<]=)
 
I'm personally *not* a fan of Flash sites but I think for what you're showcasing it does suit its purpose. I'm not keen on the navigation jumping around all over the place though. Some of the links disappear off the bottom of the screen, e.g. click on "Web" and choose one of the links, then "motion", "print", "contact" and "labs" disappear off the screen and there's no vertical scroll bar. I'm browsing in an average sized window on a 19" screen right now; I don't maximise my windows.
 
dcv said:
I'm personally *not* a fan of Flash sites but I think for what you're showcasing it does suit its purpose. I'm not keen on the navigation jumping around all over the place though. Some of the links disappear off the bottom of the screen, e.g. click on "Web" and choose one of the links, then "motion", "print", "contact" and "labs" disappear off the screen and there's no vertical scroll bar. I'm browsing in an average sized window on a 19" screen right now; I don't maximise my windows.
Click to expand...

I totally agree, the site is done well and it isn't abnoxious flash.

Nice work.
 
ICD2k3 said:
How long did it take you to realize that the middle bar is draggable for resizing the portfolio content? Did you realize it at all?
Click to expand...

Not until I came back to your post and read about it. Really nice flash site, though. One idea is that while it's great scaling the image small/large with the draggable bar, the text is kind of limp beside it. Could you perhaps scale the text larger when the image is scaled down?
 
the only qualm is that when you choose an item to view from a menu, for instance, web, it doesnt open the item at the top of the page, but instead at the same height of the item in the list.

i think the currently active link should be at the top of the list.

maybe animate it switching places?
 
I really like it. I never did realize the resize option.

I too couldn't see the bottom part including contact info, etc. because no scroll bar- I am on a 12" iBook

Just an idea- since your content "text" under each subcategory is so short you could put all the subcategories (save the models, pretend beauty, etc.) on the right hand side so the contact info, etc doesn't get pushed down so far and off the screen. It is similar to what you are already doing with the ones above the subcategory, but instead you place all the "web" subcategories on the right side and each one opens up and closed on that orange side. Did that make sense?

What you don't want is a prospective client/employer to have a difficult time getting contact info.

A couple of suggestions on your resume- you might want to state your objective as something like "To obtain a position or freelance work doing web, print, or video/motion design."

At the end of your resume you have the following:
"Legally registered myself as a business to be able to take on freelance projects (most sub-contracted through Blue Pixel Studios)."

You might rephrase that to read "Justin Schrader Designs- registered frelance designer

I don't think you need to say "legally" that is assumed.
I also don't know if you really need the bit about Blue Pixel Studios? It seems only to confuse things a bit--- are you part of blue pixel, are they just a business manager for your work, what?? Just a bit confusing.

The resume should not really be converstational as much as just stating facts about your credentials, etc.

Overall a great use of Flash...not too cluttered. I am really impressed by all your work both web based and print. I like the money coming out of the faucets on the conservation bit! Nice job!
 
I realized the dragging function, but I didn't feel overly compelled to use it. I didn't actually try it with an item loaded up until after I came back to this post.

I like it overall. The thing I found slightly confusing was that it wasn't really possible to get back to the "top level" view. So I realize that the other items (e.g. MOTION, CONTACT, etc, if on WEB at the time) are still available, but it's kind of working-memory taxing to know if those were the same things that had been on that previous page (which doesn't seem to be one to which I can return), or different things.
 
That's a very nice way to present your portfolio.
You are very creative with the flash but not in an obnoxious way.

I did get that the center line was draggable because of the popup arrows.

I'd make the "open project" button seem more clickable somehow. I didn't notice it at first and didn't realize that I could visit live projects. For example, I thought the Kate Hudson thing was a lot less substantial than it actually was at first.

I guess in general, I find it had to read the font used in the menus and explanations. Here's a partial screen shot, in case what I'm seeing isn't the font you intended...

Anyway, this is really great work.
 

Attachments

  • ss.PNG
    ss.PNG
    18.1 KB · Views: 801
Excellent site; great portfolio work and summaries.

I thought you meant universal access usability and was trying to navigate via keyboard ... which makes it only partially accessible. Some buttons lose accessibility as you dig through the site.

Resizing the window causes a lot of problems and may force the user to full screen if running a laptop or small screen. This renders the middle bar almost useless ... took me a few clicks to realize it was there; though, i found it pretty cool.

I usually despise full screen Flash sites, but this one works quite well. Nice work. I hope you find a creative dev. job(s) as you are definitely creative with all your work. Really makes me want to get into 3D. Loved those mixed video media examples. ****in' rad.

Oh, nice taste in music btw. :)
_

peace | neut
 
First, I'm not a big fan of 100% flash websites. (For example, when I view your website on Internet Explorer 64-bit, all I get is "You need to upgrade your Flash Player." If I wasn't 'testing' your site, I would have just given up.) Try it with DHTML, AJAX, or other non-plugin technologies. (When on Windows, I usually use IE 64-bit specifically to avoid obnoxious Flash ads.)

Second, no, I didn't figure out that you could drag it. Which leads to unusability. With some of your menu items, it causes some menu items (most notably the lower main ones,) to disappear below the bottom of the window.

The actual *DESIGN*, though, is nice. Just make it non-Flash, and I'll be happy. (Flash should be used for small areas of a site, not the whole darned site. And even where you use it, a non-Flash alternative should be available, unless the entire POINT of the section is to be Flash. Same is true for Java. If you can get away without using Java (true Java, not JavaScript,) do so.)
 
I actually really like the site quite a bit.

But I admit I missed the drag thing at first, I clicked it a few times and I was like "umm why does it keep jumping around" then finally I figured it out. I might reconsider the drag part, or add some text explaining it.

But over all I think the site is pretty sweet.

On a completely separate note, damn I wish I knew some motion design.
 
ehurtley said:
Try it with DHTML, AJAX, or other non-plugin technologies. (When on Windows, I usually use IE 64-bit specifically to avoid obnoxious Flash ads.))
Click to expand...

On Windows I use Firefox and ad block to avoid ads.

Just beacause people abuse vocal language doesn't mean we should all go around using sign language and refuse to communicate to people who choose to talk.

Artists love Flash and use it well to communicate. If an artists paints a painting and you're not willing to appreciate the concept unless it's communicated with the written word (just because you've seen way too many bad paintings) than you're missing out on a lot.

As you said ... you would have just given up, but i'm glad you took the time to view his site. Artists need a way to communicate and DHTML/AJAX are not typically in the arsenal of the artist. If he could pull it off though it would be quite impressive on his resume.
_

peace | neut
 
Wow, some of these responses have been really detailed. I'm planning on tweaking the site tonight and I'll post when I have changed a few things.

Thanks for the comments so far, I'm carefully reading through each one and will experiment with all the different suggestions in flash.

I want to keep it as simple as possible so I'm trying to find that sweet-spot between "ok everyone knows that the middle bar is draggable, but they're not overwhelmed by 'drag here!' text and arrows". In terms of the description text I'll be tweaking that as well after getting several replies that it is difficult to read.

I'll save this version and post here when I upload a tweaked version for comparison. If everyone is as helpful as they were with this critique it should be smooth-sailing. Thanks again.
 
ehurtley said:
Try it with DHTML, AJAX, or other non-plugin technologies.
Click to expand...

There are simply too many things that can not be done with those techs. AJAX is basically where Flash was with version 5, which is a massive step backwards. On top of that, it's a headache to get AJAX to play nicely on all "popular" browsers in comparison to Flash.

I don't like obnoxious Flash sites either, but I feel the same about any web tech that's been executed poorly by an inexperienced developer.

<]=)
 
Not *NEVER* use Flash..

Re-read my comment. I suggested that "if possible", use something that doesn't require a plugin. And, especially for the 'main' site, using a plugin to display the entire site is poor accessibility. (Flash is *NOT* accessible to those using screen readers or other assistive devices.)

I was merely saying that Flash-only sites are not something I like. And to use Flash sparingly, as needed. (For example, to do a very animation-heavy interactive site.) But even if you do lean on Flash, you should have the menu accessible without it. And in this case, he is demoing things that aren't directly Flash-requisite, so it would be better to not use Flash at all, or to have an option for those who don't have Flash.

(For example, Apple's web site uses QuickTime heavily. But if you view it on a computer without QuickTime, you still get the gist of the pages. The AppleTV page, the Leopard page, the Final Cut page. All have major QT elements, all are 100% viewable without QT.)
 
Did not notice the ability to drag it, but overall I like it a lot. I'm just begining to get into flash. It's a great program. Nice work!
 
ehurtley said:
said some stuff here
Click to expand...

I completely understand where you're coming from. If this was a corporate site it would be completely inappropriate as a main site. And ideally this would break gracefully (e.g. an html driven site would offer the same information). I don't think he's looking for universal access as I thought he was at first. Screen readers most likely are not his audience (as I highly doubt those who cannot see/hear would be pursuing motion video portfolios) and require lots of testing (and training to pull off correctly) which is completely unnecessary for a site of this nature and not very appropriate for an artist to take the time to learn (but I'm not discouraging it either … there are only so many hours in the day/month/year/life).

Utilizing HTML to handle those who don't have flash is completely appropriate and something he should look into if he's willing to expand his skill set (that is quite large already). If he wants to work in corporate than he should def. offer a workable alternative, but I highly doubt those looking to hire a motion designer of this caliber are looking for artists who utilize HTML appropriately, but I'm sure it would only help his resumé and potential clients/employer(s).
_

Kids these days ... damn they're getting good. I'm getting old. :(
 
Hey guys, based on your comments I just changed some things. http://www.justinschrader.com

1.) changed the font on the description text to verdana to make it more readable
2.) Changed the middle bar rollOver arrows using Mouse.hide(); to draw more attention that the middle bar can be dragged (if the user rolls over it unknowingly)
3.) added a tab on the lower right side of each portfolio item saying "drag to resize" with a moving arrow pointing towards the middle
4.) (my personal favorite) added minimize and maximize buttons to the lower right side of each screen shot. Minimize is especially helpful if a user wants to click on a menu item off screen so they don't have to resize by hand.
5.) fixed some bugs dealing with resizing the browser window itself.

Based on JackAxe's reply tomorrow I'm planning on coding it so if u click on a main section that's already open it will close it.

I think these small tweaks and features make it much better than the previous version (http://www.justinschrader.com/index_old.html). Though more criticism and comments are definitely welcome. And thanks for all the compliments

also ehurtly: I love ajax, but I haven't experimented with it. I'm hoping to be able to get into it more next year because I think it has a lot of potential.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back