Break my new design portfolio
September 10, 2008 8:24 PM   Subscribe

Break my new design portfolio
I've just finished an interface for my design portfolio that uses and abuses isometric projection, and I think it's ready to test in the wild. Click away, try to break it.

After about two weeks wading through conditionals, I think I have my new portfolio interface running smoothly. Though I'm sure that the first MeFite who tries will find a way to break it. So give it a go and let me know if anything doesn't work. All suggestions or criticism that involves changing more than a few lines of code will be ignored, from fatigue. There's only filler content at the moment, so a lot of the text and most of the images won't change. (If you're a Flash programmer and interested in isometric stuff or anything else I'm doing here, I'd be happy to share some of my code. Mind that it won't be clean and ready for public consumption for a while, though I do plan on creating classes and prototypes for more general use.)
posted by nímwunnan (24 comments total)

For the life of me I could not figure out how to operate this contraption. Then I realized that I had to click on one of the boxes once to get it into the staging area, and then click only on the front panel of the box to make it display the portfolio group. Then, I realized you had to click on the unfolded panels to actually view portfolio items.

It looks neat, but there isn't anything intuitive about it. You could improve it by adding little floating arrows, but I think the whole thing suffers from mystery meat navigation disorder.
posted by cellphone at 5:20 AM on September 11, 2008

Thanks for the feedback cellphone. I take it that the tiny little "?" button in the upper righthand corner doesn't make itself known enough to be of any use? Would things be clearer if the users' guide that comes up when you click the "?" was already loaded when the thing launches?
posted by nímwunnan at 7:04 AM on September 11, 2008

On the "Mystery Meat" navigation, I think part of the problem is that the "Go To Launch" arrow is really dark and hard to see, especially if you don't notice the little highlight thingie that flashes around it once or twice. I didn't even know how to get this thing working to begin with - if it weren't possible to hit the menu items when they aren't visible, I would have never accidentally hit reset and got the interface going (and even then it was a while before I noticed the arrow). So, yeah, the help can be kind of hard to get to if you don't bring it up to begin with.

I had some major navigation issues. First off, perhaps its my monitor, but the heading text is so dark on the dark background that I can't even read it. When in auto mode, the suggest button only moves things forward, short of resetting there's no way to move cubes back that I could find. I managed to move all the cubes off the screen :).

In manual mode, you say, "Click and drag to make things." What does that do, besides let you play with blocks? And once you click and drag a block, you can no longer preview its contents. Occasionally, one of the blocks will stick to the cursor and not get off until I click on something else.

Also, the interface is not good for slower connections. When pictures in a cube are loading there is no indicator, really, so all that you are left doing is clicking on the cube and wondering why it wasn't doing anything. (I did this until I noticed the "connecting to" in the browser.)

Anyways, I am not a designer of any sort, just an end-user. I am assuming this is meant for developing into being able to put stuff in blocks and move the blocks around where you want them, which is a neat idea. I'd be interested to see what the final product looks like.
posted by cimbrog at 8:34 AM on September 11, 2008

In manual mode, you say, "Click and drag to make things." What does that do, besides let you play with blocks? And once you click and drag a block, you can no longer preview its contents.

Would it make more sense / be more fun if manual mode was just for playing with the blocks, and they didn't load or unload any images until you switched out of manual? I was thinking of adding a "more blocks" button that would make blocks just for playing with. Thanks again for the feedback -- as usual my visual cues are too low-contrast or too subtle. Those are generally the first adjustments I end up making.

I am assuming this is meant for developing into being able to put stuff in blocks and move the blocks around where you want them, which is a neat idea. I'd be interested to see what the final product looks like.

That's kind of worrying... I was hoping that this is fairly close to the finished product. The underlying theme is ambiguity and really basic illusion. Isometric projection is really simple and lacks perspective, but we interpret it as 3-d... mostly. I tried to make an environment with similarly ambiguous rules of operation, but I don't want it to be totally confusing. The manul option was to encourage playing around, but I'm thinking that it might be better if that option was *just* a toy.
posted by nímwunnan at 10:19 AM on September 11, 2008

Okay, I see. Yes, the ability to basically play around to no particular purpose really needs to be addressed so that it is understood that it is just play and not an unfinished feature. When I think of an interface, I look for the things you can do constructively towards some goal. Just being able to play around with blocks in a way that doesn't actually have an effect on the information confuses me. Auto mode worked very well for me, as it was more focused on function.
posted by cimbrog at 11:16 AM on September 11, 2008

wow. that was confusing.
posted by terrapin at 11:49 AM on September 11, 2008

Maybe you could have the instructions come up if the user waits for more than a minute on the main page... I agree it's quite confusing, mystery meat navigation tends to be discouraging to users.
posted by Meagan at 12:53 PM on September 11, 2008

Thanks everyone for the feedback. It's always hard to hold the line between confusing and ambiguous, and this has clearly fallen way over the line. My list of adjustments so far: more obvious prompts and instructions, higher-contrast titles, better division between manual and auto. Anything else?
posted by nímwunnan at 1:40 PM on September 11, 2008

Anything else?

Please, for the love of God, don't use Flash like this for displaying your portfolio. If I want to see your photos, I WANT TO SEE YOUR PHOTOS, not fuck around with some Flash interface that works in completely illogical manner.

Make a separate gallery for your flash stuff and then display all your Flash toys, but Jesus Christ, if I have to play 20 questions just to see your damn photos, I'm going to go to another site.
posted by Brandon Blatcher at 1:54 PM on September 11, 2008

Hey now, Brandon Blatcher, you're getting cranky with the wrong guy for the wrong reasons. I'm using MeFi projects for its intended purpose -- sharing one's work and welcoming criticism. This is a thread about making a Flash interface better. Your comment amounts to "I don't like Flash interfaces." What's more, I agree with you for the most part. That's why I usually try to keep things simpler. (And why this interface uses a directory structure and XML framework that can be ported to a simpler XHTML option in the future.) But this is for a design portfolio, and there's an expectation to show off a bit when you're selling yourself. You don't like complicated interfaces, and that's fine. I enjoy a bit of playing around when it suits the material, and so do a lot of other people. I'm looking for feedback so I can balance that amount of playing around with the material so that some of those people, who may be looking for Flash interfaces to display something in a potentially-complicated, interactive way, might think "this guy could build the kind of thing I'm looking for." If they're just looking for a flyer re-design, then I certainly don't want to discourage them before they get to my gallery of fyer designs. Which is why I posted this on MeFi Projects to get suggestions to make it just user-friendly enough. Which brings us back to the beginning.
posted by nímwunnan at 2:34 PM on September 11, 2008

My net is running WAY slow today. So I sat there clicking on the identical-but-for-color buttons on the left with nothing happening for quite a while. I am assuming that the boxes that finally appeared in the big hole popped up because you'd loaded your data file; put up a big 'loading' sign of some sort when you start that vanishes when you get the data.

Every time I now push one of those buttons, four to ten seemingly-random boxes push forwards. Out of the frame I thought would contain them. They're about to leave my screen. Now I see why you have a 'reset' button on the upper right. I would suggest (a) pulling previously-selected boxes back IN when pushing a button or (b) having EVERYTHING have a constant, slow pull back into the cavity.

If I click on one of those boxes, it flies down to the lower left. And then when I push the button that it corresponds to, it... drifts down and right with all the others.

Hitting 'reset' again, I notice that the colors of the boxes seem to be completely random, instead of related to the content in any way.

Oh, if I click on one of the boxes and it goes to the lower left and wait, it finally loads in something. Again: 'loading' iconography. Let me know I need to wait a moment.

When I click on one of the squares that's flown up, I get a loading bar waaaay down in the lower right. Why isn't it in the big white square I'm staring at? And why, when it loads, do I have nothing but a title like 'Untitled 1' without comments like 'Oil on canvas, 37x90", May 2007"? I'm guessing it's because the section titles of 'Title4' suggest that this is running on a dummy dataset instead of a real dataset.

What section am I in? I've forgotten and you're not telling me this anywhere. How do I get back to the front? Huh, I actually CAN get back to the front without hitting 'reset' by clicking on the cube.

I clicked into 'manual' mode and this is even more mystifying. I can drag cubes around. That's it. I'm not sure what 3-D axis I'm dragging them around on, if any - I seem to be dragging them around on the plane of the screen, totally breaking the 3-D illusion. The box on the lower left is gone. How do I open these cubes up and look at them?

And what happens when you want to present some art that is resolutely Not Square?

Also, I should note that I use a laptop, and typically keep my browser window sized to about half the screen's width. Your start/reset/mail/etc buttons were off the right edge of my window until I resized. Why do I need to hit a 'start' button anyway? Why isn't it loading in its data the instant it finishes loading the main swf?

If you must show off your Flash skills in your portfolio construction (which I, too, vote against - my own site is simple, with a few bits of gracefully-degrading JS; the art is very much front and center), make it obvious what to do, and make it fun to look at. Relate the look of the portfolio to the way your work looks; nothing else I see in here is in this bland, empty style. Put as much work into the site's framework as you do in a piece of art; make your Weird, Sideways Navigation fun to just fling around. When I was involved in an all-Flash monstrosity of a website for the Flash animation studio I was part of in the early nineties, a team of four people spent about a week on the whole damn thing - a giant robot, with a cut-away view full of intricate machinery, and animated monkeys you'd click on to enter the other sections. We put as much, if not more, effort into the site as we did into the webisodes we were making at the time. Just looking around the front page told you something about who we were and what we wanted to do; this site tells me that you are bland, have a dubious color sense at best, and are not interested in actually showing me anything. If I was looking for someone to do a whizzy fun Flash UI for me, I'd keep looking, because this is just impenetrable.
posted by egypturnash at 5:28 AM on September 12, 2008

Thanks for the in-depth crititque, egypturnash. For one, you found a way to break things that I had missed (moving the loaded block off stage with one of the suggestion buttons). From what I'm hearing -- especially some of the points you make -- this isn't complete as an interface even though the mechanics are mostly there. I'm trying to set up foils within the design that produce suprises in both how it looks and works, and right now it seems like the foils are just contradictions or inconsistencies. It should seem like a discovery, not confusion, when you can take the blocks out of the stage. The flat, pseudo-Bauhaus look should be foiled by the nature of the gallery images and the behavior of the interface. The suggestion buttons were really supposed to build groups of blocks in ridiculous shapes -- like ponies, but I left that for later. I guess what I'm saying is that I mean for this to have a dry humor to it, and what I'm hearing is that the jokes either aren't there or are too dry or muddled for anyone to get them.

My planned changes so far: much clearer instructions, prompts, and loading images, nix the random color assignment (it's from a matched set, but good combinations seem to be rare, and, unsurprisingly, the lack of color significance is confusing), a bit of fun in Auto mode, and a non-pointless manual mode (I'm thinking manual will just be a sandbox mode that lets you -- or encourages you -- to build things all over the screen that you can keep or delete when the gallery is functional). In fact, I think instead of the auto/manual division it will be a use/play division, which is really what I wanted in the first place.

I really appreciate the criticism -- I've been focusing on fine art most of this year, and work habits spill over into design regardless of how much respect I have for design conventions. I figured MeFi was good for a decent reality check.
posted by nímwunnan at 8:10 AM on September 12, 2008

1. I don't like mystery-meat navigation unless it's intended to be a puzzle. I don't get the impression that's supposed to be the case here. When you found yourself putting a "how to use this portfolio" link in, that should have made you sit up and realize the navigation scheme is, to be blunt, a design wank.

2. If I want to send a friend a link to a specific image, A) there's no unique URL that permits this, B) I sure as hell am not going to compose an e-mail along the lines of "first click on the arrow in the top-right, then click the 3rd box from the left in the second row, then wait till it docks, then click the 4th tile up from the bottom."

3. I had fun making all the blocks fly off the screen. Maybe you could make a game out of that.

4. Using the same frame to contain navigation and images strikes me as a bad idea.
posted by adamrice at 11:11 AM on September 12, 2008

I thought it was neat. A few too many clicks to do things (select box/open box can be combined), but it was very smooth animation and felt 'right.'
posted by cowbellemoo at 11:36 AM on September 12, 2008

adamrice --

1) Yeah, the instructions should be much more "how to have fun with this portfolio" than "what the hell is going on." It's supposed to be a bit of a puzzle and a, yeah, a bit of a wank, but not as much as it seems to be right now.

2) Looks like you missed the "html" link that shows up in the control box when you're in a gallery. But all those buttons don't seem to be noticeable enough.

3) yeah, thinking about it.

4). Meh.
posted by nímwunnan at 12:33 PM on September 12, 2008

parmanparman --

Whoops! You're confusing MeFi comments with YouTube comments. Usually on MeFi people read the post before commenting. So everyone else here knows that this is a discussion about the box, and the current contents are filler. Maybe if we were talking about the nature of Design instead of the nature of this specific design, we could talk about how the relationship between the box and its contents is at the heart of design, and how clients with their own content often look to designers to make a box to fit it. Even then, I have a feeling you'd interrupt us with armpit-farts.
posted by nímwunnan at 2:47 PM on September 12, 2008

on a side note, I'd forgotten that some of the filler is NSFW, so it's not there anymore
posted by nímwunnan at 3:09 PM on September 12, 2008

But this is for a design portfolio, and there's an expectation to show off a bit when you're selling yourself.

Speaking as an Art Director who hires designers, I want to see your work, not fiddle around with your Flash interface. You live and die by your portfolio, you show off by doing great work, not by making me "play around" to view your work.
posted by Brandon Blatcher at 6:09 PM on September 12, 2008

Very much agree with Brandon, what is the reason for the blocks? It's sort of fun for a moment but if that's the point loose the art and make a game. If you use a blocks metaphor, have meaning to each grouping, more blocks => more pictures. Expanded surfaces => detail of a gallery. Movement that directs the eye. Consistency of direction. Roll overs that mean something, highlight indicates potential selection and focus. I really like unique interfaces, the menu bar is so far from the only way to go, but different is so much harder.

Before re-coding, make paper cut outs of one or two actions, pick a random stranger have them try it and LISTEN. Re-jigger the idea and when OTHER random strangers 'get it' without getting nudged try coding that direction.

Keep at it, I think you have a long way to go, but it will be very worth the effort.
posted by sammyo at 8:06 PM on September 12, 2008

You don't really have enough 'normal' playing with the interface to set up 'surprises'. It's just a big mass of 'what?'. Think about how play mechanics are introduced in videogames: you have a couple of entire levels of strong, clear basic play, then you have a level that introduces a new toy and lets you play with it. Maybe you just fool with it over the course of a level, maybe you have one that's built entirely around this new toy. Think about how Super Mario Bros. doles out its ideas over the course of the game, with some surprises not happening until the last set of levels; think about how Portal very carefully introduces you to the very basics before letting loose with the hurt.

Is anyone going to spend enough time playing with this to get a sense of what's 'normal'? Is it compelling enough as an experience to want to do this? You're drawn to it, obviously, but how much of this is because of the intellectual challenge of digging into programming is new and fun?

I feel like some of your responses seem to be concealing "I spent two weeks on this and damn if I'll abandon it". Open yourself to the idea of throwing this one away and starting again; the next one will go faster, and if you decide you do like this isometric-perspective-box thing, you'll be more willing to make sweeping changes!
posted by egypturnash at 5:16 AM on September 13, 2008

Before re-coding, make paper cut outs of one or two actions, pick a random stranger have them try it and LISTEN. Re-jigger the idea and when OTHER random strangers 'get it' without getting nudged try coding that direction.

I like that idea.

I feel like some of your responses seem to be concealing "I spent two weeks on this and damn if I'll abandon it". Open yourself to the idea of throwing this one away and starting again; the next one will go faster, and if you decide you do like this isometric-perspective-box thing, you'll be more willing to make sweeping changes!

I'm not unwilling to change it, but for practical reasons I need to be able to work with the code I have without beginning an entirely new project. Which isn't to say that I can't use what I've got in a much better way. (I posted this about an hour after i got everything functional, so that bit about ignoring advice from fatigue doesn't really apply anymore.) All this feedback is really helping me get a sense of how some of my original intentions aren't getting through, and how some of them were pointless in the first place. A lot of what you guys are asking for is very close to my original vision for this, and the difference between that and how it's coming off is giving me a good picture of how it got derailed once I got into the thick of the code. I'm very much looking at this as a first draft now with big changes planned, and reminded that functional code isn't the equivalent of a good user interface. Thanks again, everyone.
posted by nímwunnan at 6:40 AM on September 13, 2008

So I agree with a lot of the points regarding the confusion. I like the general gist of it, though -- it's an attempt to make people spend time doing something actively creative in what is usually a passive medium. My suggestion would be to have a very specific purpose for the blocks, and a very specific place for them to go. As it stands, it's too chaotic to allow any reasoned decisions (that is, I can't use it and say "Oh, if I do this, this happens.. that's neat!"; it's more like "when I click here... wait, what just happened?").

One idea might be to exploit the already orthogonal 3-D space -- make each image access one "layer", and you have to bring out specific blocks to those layers. The first image would be one step out, the second 2 steps out, etc. Then, for instance, if you have print work and digital work, you can have those be different blocks that you drag out depending on what you want to see. In order for the user experience to be a good one, it has to be functionally creative, where people can infer what does what within 2 seconds.

Anyway, good luck! It sounds like you're very open to constructive feedback, which is typically more important than any technical skill.
posted by spiderskull at 12:20 PM on September 15, 2008

So the black arrow got some energy lines, and so I clicked it, and three more arrows momentarily appeared. At this point I realized that navigating your site was going to be a chore, and I closed the tab and came here to leave this comment. Please keep that in mind when you decide if this is a good approach.

the lessons being 1: I am not the only person who will do this, and 2: I find it less tedious to come here and type out this long comment than I believe I would trying to navigate your site.
posted by davejay at 1:32 AM on September 23, 2008

Here's what happened when I looked at the site:

1. I clicked all over the coloured areas and on the 'portfolio' text, but nothing happened.
2. I closed the tab.

Admittedly, I may be a complete idiot, but I think you either need to show the help text on the page from the very beginning, have the block animation start up immediately to give a bit of a clue that there's some clicking to be done, or make the interface load when you click on 'portfolio'/any part of the splash screen. (After finding out I needed to click the near-invisible arrow to launch the site in the comments here, and then reading the help, it was still very confusing, but at least I got to see some of your work.)

More generally, I absolutely agree with Brandon B. I get sent hundreds of press releases for art, architecture and design exhibitions or publications every week, and if I got an email pointing me towards a site like this, there's pretty much no way I'd end up writing about the work in question (if the apparently broken site had a really gobsmacking splash page, I might email requesting images, but probably not, as I'd be annoyed at having my time wasted). It's probably worth pointing out that I almost never get sent links to sites like this, because folk know that keeping things simple is the best way to promote their work.

In other words, if you want potential employers/critics/fans to look at your work, you have to show it to them! As it stands, this portfolio does the opposite, hiding your work away.
posted by jack_mo at 8:58 AM on October 6, 2008

« Older Photo-blogging South Korea...   |   Lollypop Publishing... Newer »

You are not currently logged in. Log in or create a new account to post comments.