Help me design a navigation interface for my portfolio that people won't hate.

February 12, 2009 8:10 AM

Help me design a navigation interface for my portfolio that people won't hate.

I'm redesigning my graphic design portfolio and hoping to come up with a solid way of navigating through the examples of my work. I started to put some extra thought into this when I noticed that when a photographer's site or something similar is linked in the blue, often one of the main complaints is how bad the interface is. I want to avoid this and impress future employers and clients!

So, what things should I avoid? What are some good examples of a solid design? I'd like to hear from you what you think works and doesn't.

If it helps, I'm using Joomla as my CMS. If you have any plug-in recommendations for something that would work well, that would be helpful, but I'm not afraid to cobble together a custom solution either. I'll be displaying website design, print design, photography, logo work and fine art - so, multiple categories.

posted by bristolcat to computers & internet (33 comments total)

A few off the top of my head:
* Avoid needless animations/transitions
* Each page should have its own bookmarkable URL
* Keep an eye on page size. It shouldn't take 750k just to load an image in most cases.
posted by jragon at 8:19 AM on February 12 [1 favorite has favorites]

Avoid a Flash-only solution.

Avoid any kind of 'splash page' or 'intro'.

Avoid 'mystery meat' navigation, i.e. avoid using any navigational metaphors that are likely to confuse people.

Make sure that each item in your portfolio is individually linkable - not usually a problem unless you're using a lot of Flash or AJAXy bits.

Solid design is about usability as well as aesthetics. Use clear language and imagery, and make sure the visitor knows (a) where they are, and (b) how to get everywhere else from wherever they are.
posted by le morte de bea arthur at 8:20 AM on February 12

Navigation is utilitarian. People want to use your navigation, they don't want to notice your navigation. It should be so direct and intuitive as to be unworthy of attention.

That means no Flash. No stuff flying around. No cheesy page-flipping scrapbook. If you must have some kind of transparency overlay, it should be at the limits of human perception. You can put nifty, shiny, Flash-laden items in your portfolio, as individual items one can examine, but they should never be your portfolio.

I guess what I'm getting at is: bunch of links on the side, simple anchor text, perhaps a thumbnail image (jpg or gif, nothing else).

Group items accordingly. If two alternate taxonomies exist that you believe in your heart of hearts your audiences will use to at least the 10% level, either pick one and live with it, or you can put a different navigation menu on the other side. If three or more alternate taxonomies exist, you're looking at tags.

Your navigation scheme should work on an iPhone. It should work without Flash. It should work with Javascript turned off. You should be able to tell a friend, "Find photos of that one wedding shoot I did," and they can do it, quickly.
posted by adipocere at 8:21 AM on February 12 [1 favorite has favorites]

NO FUCKING SIDE SCROLLING!

The scroll wheel is ubiquitous now. It only goes up and down. Unless you have a long, thin panorama, there's no reason to side-scroll unless you're trying to cute.
posted by notsnot at 8:22 AM on February 12 [1 favorite has favorites]

Oh, and any website that comes with its own set of instructions, no matter how great the navigations experience, is a big no.

Whether the site absolutely needs to work on an iPhone or without javascript probably depends on who you think will view it, and whether in balance you feel you need to go the extra mile for atypical visitors.
posted by le morte de bea arthur at 8:23 AM on February 12

IANAL, but I believe federal law mandates anyone creating an online portfolio must use indexhibit.
posted by soma lkzx at 8:26 AM on February 12 [1 favorite has favorites]

A huge pet peeve of mine on art and design sites is teeny-tiny thumbnails of, say, an extreme closeup of a nose hair that link to a full-screen portrait of the owner of the nose hair. Make sure your thumbnails are representative of what they're linking to.

Honestly, for a simple single-user portfolio site, Joomla is kind of overkill, and has its own set of frustrations in setup and usability. Unless you're trying to market your ability to use and modify Joomla, you're probably better off writing a simple, barebones framework that will load quickly for everyone.
posted by tomatofruit at 8:32 AM on February 12

This is some great stuff! I hope it keeps coming.

One side question about the iPhone - I live in an area where the iPhone isn't available, but almost everyone I know has some kind of Blackberry or Treo. If I do a simple mobile version that would work on my Treo, would it look OK on an iPhone as well?
posted by bristolcat at 8:32 AM on February 12

One of the best sites and navigation was for a photographer's site and looked like this, centered on the page:




**********A photo here**********





1 | 2 | 3| 4 |5 | 6 | 7 | 8 | 9 | 10
Contact


Yes, it's very minimalist, but it really let the work shine and was dead simple to use in even 4.0 browsers. The contact page was especially well written, with a friendly style that indirectly said the photographer was easy going person who was easy to work with.
posted by Brandon Blatcher at 8:33 AM on February 12 [2 favorites has favorites]

I was successfully able to make a site that had a downscale version, triggered by CSS, that worked on Blackberries, iPhones, etc., without access to any of these devices, but I'm tremendously uptight about XHTML and CSS.

If you do not have access to an iPhone, I think you can go a long way by testing with Safari and Opera, with Opera set to the small screen size version.
posted by adipocere at 8:36 AM on February 12

Sounds like you're going to have an image intensive site. Make sure to use photoshop to lower the quality of the jpg to keep load times down. And use "save for web" for similar effect. And make sure to use alt text and captions liberally to help google find your site.

Make sure your navigation doesn't hop around. Sometimes, especially with relative positioning, navigation bits shift around a few pixels on each (similar) page when clicking through a portfolio.

I'm a big fan of redundancy in portfolios, too. You should have arrows to get around, but maybe the big picture should also link to the next image in the portfolio, and you should have thumbnails of the entire category on a single page. But lead with the big pictures and give viewers the option of choosing thumbnails after they've seen at least one big picture. Some art buyers/editors prefer looking at thumbnails to get an idea of somebody's work, so best to give the option but lead with your best foot forward (a large version in all its glory).

Also, always put your name, phone number, and email address on every page. People hiring you for work shouldn't have to click even once to get in touch with you.
posted by msbrauer at 9:21 AM on February 12 [1 favorite has favorites]

So, what's the real beef with Flash then? MeFites do seem to hate it; why?

I mean apart from any tendency it may have to lure the insensitive into building the obnoxious, which to my mind is a problem with the maker, not with the tool. There's plenty of ugly, awkward, superfluous, distracting, show-off-y stuff out there that can't be blamed on Flash, no?

Is this about not wanting to have to get Flash in the first place, or about its likelihood of being abused?

About not souring an audience that's hating on Flash because that's just part of what that audience is now, or about some technical issues that are bound to annoy the target audience that might not be a problem for a more general audience?

It's clear that when you're presenting to crowd of pro framers and picture-maker/users, using the frame well could be as important a part of the total message as the picture. So, not using Flash might be critical if you want to specifically impress folks that just hate it for whatever reason. IS that what's going on in some circles?

Overall, tho, I can't see how Flash could be responsible for bad design, but I could easily be missing something…

Is the wish for each image to have it's own page/URL simply so that you can easily link someone to just that image, skipping the gallery, other images?

The things I hate most in an image gallery are:

Slow-loading images; I'd much rather wait for a whole gallery to load than for each image to dawdle into view.

Multiple steps to do anything, such as get back, get on, or get out. Images that must be closed before choosing the next one.

New windows opening.

Final images under 300-400px.

Any hint that keeping me from grabbing the image is more important than letting me see it (which is where my own beef with Flash has come up).

Ugliness. Oppressive/repressive bareness.

When the frame is more attractive/interesting than the work.

If any of these can be directly caused by or aggravated by Flash being involved, then I get it. Otherwise, not.
posted by dpcoffin at 10:17 AM on February 12

Is this about not wanting to have to get Flash in the first place, or about its likelihood of being abused?

The latter. One ridiculous thing is that I almost never seen a Flash site with bookmarking capabilities (here's one way to do it). A portfolio is great, but if I can't link to your awesome pictures of New York's antiquated subway tunnels, I'm not going to show it to my friend who is really in to that sort of thing and would pass your info on to other people. Boom - there goes a whole line of exposure.
It really comes down to the fact that Flash (though it's moving away from this) is so animation based. Anyone can make a crazy 5 minute intro with shapes flying all over the place. Not everyone can add in a "skip to home" link on that intro. And not everyone realizes that, to quote the Apostle Paul, while "everything is permissible; not everything is beneficial". That five minute intro? That loud techo/glitch background music? Yeah. Not beneficial.
posted by niles at 10:43 AM on February 12

Take a gander at these three portfolio extensions for Joomla. One might be a good template to modify into the portfolio that works best for you.
ccPortfolio
Portfolio Design
JPortfolio
posted by prinado at 10:53 AM on February 12

I'm so glad I asked this question. I'm getting a much better idea of what is useful to people. I would never have guessed that individual URLs or bookmarking capability mattered that much, but when you think about it, it's actually something that is essential.

One further question, if anyone is still following this thread. I'm not really interested in using Flash or flash-y animations. I'd like it to be clean and simple. However, I do kind of like the lightbox-style animation that seems to come bundled with so many plugins. But now I'm seeing it everywhere. I'm wondering how people feel about it. Is it annoying? Hokey? Unoriginal? Or is it a new standard?
posted by bristolcat at 11:20 AM on February 12

Do a low-rent usability test. Sit your mom/s.o./kid down in front of it and ask them to perform a few specific tasks on it.

When we were hiring a web graphic designer last year, fully half the candidates shot themselves in the foot by being too clever with their portfolio. Most people here who do hiring know jack about web stuff, and so were confused by fancy design and clever menu/naming schemes.
posted by coolguymichael at 11:39 AM on February 12

I'm wondering how people feel about [lightbox]. Is it annoying? Hokey? Unoriginal? Or is it a new standard?

The argument against the lightbox effect (or anything that pops up and steals focus) is that it takes control from the user. What happens when the user wants to look at two of your pictures side-by-side? They'll click once, see your photo, then be robbed of the chance to control-click a second photo for a second window or tab.

Put another way, you're breaking the ability of a user to link directly to a large version of your photo. It's not a huge problem, but I'd leave it out.
posted by jragon at 11:50 AM on February 12

But now I'm seeing it everywhere.

Do you really want you portfolio to show that you're like everyone else?
posted by Brandon Blatcher at 11:50 AM on February 12

Ditto the previous suggestion for Indexhibit. Clean. Customizable. Clear navigation. Cheap (Donation based). The admin interface takes a bit of getting used to, but once you get it, it makes sense. Different options for displaying your work, many of which include separate URLs for each image.
posted by jcmilton at 11:53 AM on February 12

I don't buy the cruciality of individual bookmarks.

Granted, I'm not an art buyer, and maybe this IS a deal-breaker. But I find that very hard to believe. I'm a serious portfolio/gallery browser/sharer and in 6 years of heavy browsing I've never once even noticed whether an image has a bookmark, sent a bookmark for a single image, or received such a link.

Nor can I imagine NOT sending a link to a thumbnail page or home page if I found that I can't send my friend a link to a single image. If I want to share a single image, I just send the image itself. I tend to assume anybody I'd ever send an image to would like to see more, if there is more.
posted by dpcoffin at 12:31 PM on February 12

Nor can I imagine NOT sending a link to a thumbnail page or home page if I found that I can't send my friend a link to a single image. If I want to share a single image, I just send the image itself. I tend to assume anybody I'd ever send an image to would like to see more, if there is more.

I definitely agree with that. The type of portfolio I'm thinking of is one that requires several clicks just to get to a gallery. I can't find any examples of them at the moment, but I recall one portfolio where the entire site was a Flash page, and to get to an artist's work, you had to do something along the lines of going to the list of artists, find the artist you wanted, click on their name, click on portfolio, and then click on the subject matter you wanted to send. It's a bit much.
posted by niles at 2:35 PM on February 12

Granted, I'm not an art buyer, and maybe this IS a deal-breaker. But I find that very hard to believe.

If you can think of a reason why it's more preferable and more usable to hide URLs, we could discuss the tradeoffs of each approach. But I can't think of any.

It's a novice mistake to hide content behind clicks. Not everyone is bothered by it, but the question was about making a non-offensive interface and this usability 101.
posted by jragon at 9:38 AM on February 13

I've been speaking as a gallery/portfolio viewer, not a builder. I don't know what you mean by hiding URLs, other than the builder choosing some kind of gallery that doesn't provide unique URLs.

If an image I want to save/share is in a Flash Gallery, such as Simpleviewer, for instance, there's no URL for each image. My point is simply that I can't see any reason not to simply save/share the page that holds the whole gallery. If that's a problem for some reason, I'd simply take a screen shot.

But the question here is not about how to isolate images, right? It's about showing a collection of work. So what's the problem with, say, something like Simpleviewer? Looks pretty effective to me, and works very fast and easily by my standards for usability. I don't care that there's not a unique URL for each image, or that it's Flash; what am I missing?

Sorry, also: What's hiding content behind clicks? Anything other than putting all the images on a single page?

(Don't mean to hijack the thread; hope this is still relevant…)
posted by dpcoffin at 10:40 AM on February 13

don't care that there's not a unique URL for each image, or that it's Flash; what am I missing?

The fact that a lot of people do care about having a unique URL for each image. It's really that simple.
posted by Brandon Blatcher at 12:19 PM on February 13

To be a bit clearer, people like being able to link to things directly. It's like being able to handle each picture in physical scrapbook, it can foster a great connection between the viewer and the art/graphic whatever.

Remember, the original poster noted that people often complain about galleries that don't have direct links, so your opinion that links don't mater may not really be helpful, since by default you're not the target audience, see?
posted by Brandon Blatcher at 12:28 PM on February 13

Actually the OP just said that there are frequent complaints about navigation at MetaFilter; no mention of any specific complaints, let alone THIS specific complaint. Or any mention of a specific special-interest group that was mainly making the complaints.

Regardless, I guess I'm supposed to have to inferred that it's not really people, but only art buyers who complain about gallery navigation here on MetaFilter, and the main thing these buyers hate is not having unique image URLS, for that special scrap-book cozy-connected feeling all art-buyers love to have before they'll be willing to buy.

Cool; I guess I can forget this as an issue when I build my gallery for people to use.

Sorry, I seem to have also missed the BBlatcher's opinion only, please notice.
posted by dpcoffin at 1:13 PM on February 13

Actually the OP just said that there are frequent complaints about navigation at MetaFilter; no mention of any specific complaints, let alone THIS specific complaint.

Having seen several threads where this occurred, the complaints are pretty consistent.


Sorry, I seem to have also missed the BBlatcher's opinion only, please notice.

The OP is a graphic designer. I hire graphic designers, so consider (or don't) my opinion in that light.
posted by Brandon Blatcher at 2:29 PM on February 13

I welcome everyone's opinions. And actually, dpcoffin has some great points that I agree with.

But now I'm seeing it everywhere.

Do you really want you portfolio to show that you're like everyone else?

Well, that's why I asked what I asked.
posted by bristolcat at 3:20 PM on February 13

I'm glad to have your opinion, BB, and to know your background.

Didn't much enjoy the butt-out tone, see?

I may not be an art buyer, but, as stated, I'm seriously interested in on-line portfolio design. Need I say "professionally" interested? I hadn't thought so…

So, anyway, in the interest of clarifying what, for me at least, has so far been inadequately clear but remains of high interest:

I can perfectly see that if you're looking at graphic art, particularly specific images to buy, rather than, say, styles to hire the stylist to do more of, it'd be good to have a link straight to any given image, with a one-click Contact Me button sitting nearby.

This looks like the site of somebody who knows what his clients want, complete with a one-image-per-page option; I find it ugly, cluttered and irritatingly utilitarian, but perfectly useable, FWIW. BB?

But surely there are other needs and interests when portfolio-browsing, no? Especially when there are lots of different categories, including fine art, on display, perhaps?

I personally feel much more connection between the viewer and the art/graphic here, but also recall that bookmarked it originally for the site design rather than the work. I like the simple nav, but feel a bit overpowered by the tasty "frame" flavor. Whatever, perhaps it wouldn't be too hard to add a click-me-for-a-single-page-view function to each image in a gallery like this…? Would that really make a difference, like the difference between a hire and not, BB?

And this outfit at least gives the impression of being a success in the graphics world; is this an illusion, or despite its site's horizontal scrolling and lack of individual image URLs?

I'd really like to know.
posted by dpcoffin at 5:23 PM on February 13

Hey, look! The best of everything!
posted by dpcoffin at 7:44 PM on February 13 [1 favorite has favorites]

**facepalm**
posted by niles at 9:12 PM on February 13

Well, that's why I asked what I asked.

Understood, but that's why I said what I said. I work in art direction and production. When I see a lightbox portfolio, I think "Oh, another lightbox portfolio. They looked neat a while ago, now they're all over the place. Now here's another person who didn't actually create the effect, or modify it or do anything creative with it."

So yeah, use the lightbox if you want, but for good sakes, do something different with it and if you can't, drop it.

Would that really make a difference, like the difference between a hire and not, BB?

It could. The whole point when hiring someone is that the employee will make life easier for me. This isn't arrogance, obviously I do the same for my boss. Adding the ability to link to individual images indicates, to me, that the person is aware of the multi link possibilities of the web and how that can affect ranking on search sites. In short, they've thought about the medium, understand some basic fundamentals of it and taken advantage of them, possibly hinting at their ability to actually think and thus not require babysitting, which make a great employee.

But surely there are other needs and interests when portfolio-browsing, no? Especially when there are lots of different categories, including fine art, on display, perhaps?

Look, the OP asked about a bad interface design for a web portfolio and specifically said "I want to avoid this and impress future employers and clients!"

Your theoretical questions don't really pertain to the question, you know?
posted by Brandon Blatcher at 8:47 AM on February 14

A site that sells portfolio sites; the many examples and features offered seem worth a look.

A blogger with some detailed rants on how to (not) show art online.
posted by dpcoffin at 1:44 PM on February 14