Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques.

Further Reading on SmashingMag: Link

As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Portfolio Navigation Main Image

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach5 Link

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it6.

Dawid Wadach7
The apparent absence of navigation is the first noticeable thing on wadach.com8.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Dawid Wadach9
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

Dawid Wadach10
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion Link

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher11 Link

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

Harry Vorsteher12
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

Harry Vorsteher13
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Harry Vorsteher14
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion Link

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner15 Link

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

Justin Lerner16
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

Justin Lerner17
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines18, and it is recommended that they are adhered to.

Justin Lerner19
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion Link

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming20 Link

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

Shelton Fleming21
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them22). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

Shelton Fleming23
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Shelton Fleming24
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion Link

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang25 Link

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

Chris Wang26
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

Chris Wang27
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

Chris Wang28
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion Link

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell29 Link

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Jessica Caldwell30
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

Jessica Caldwell31
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Jessica Caldwell32
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion Link

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison33 Link

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

McCormack and Morrison34
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

McCormack and Morrison35
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

McCormack and Morrison36
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion Link

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka37 Link

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion Link

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts Link

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40

↑ Back to top Tweet itShare on Facebook

Justin is a user interface designer and user experience consultant by day and blogger by night. He writes in and administers his own usability and user experience blog, Usability Geek where he evangelize about the importance of making the web a usable place and, more importantly, how to do it. Ah, yes, he likes to Tweet too!

  1. 1

    Jim Silverman

    March 26, 2012 5:07 pm

    It seems like killing usability in an effort to be unique is an unfortunately a growing trend amongst today’s portfolios. While these designs are definitely beautiful, they are interfering with the user’s primary task: viewing the designer’s work. Gotta keep it simple!

    • 2

      Hi Jim,

      Thanks for your comment. I wouldn’t go as far as to say that it is a trend because, as can be seen in the above examples, some designers were creative and at the same time produced usable websites. However, it is very easy to focus solely on creating the amazing, at the expense of developing a site that has flaws in its usability.

      As with any project, one must think what the users’ goals are. After all, usability is all about enabling users achieve their goals within a particular environment – in this case, your site. So, if the goal is to showcase your work, then you should make it easy for your users to see your capabilities. If you make it hard (i.e. less usable), then this will inevitably backfire.


    • 3

      These “users” are usually people they’re looking to get work off – most often prospective employers. They’re not made to be viewed on a regular basis. I’d argue that you can sacrifice the usability on sites like these in order to show off your creative flair….which all these people have done.

      I was able to navigate to the work without any trouble and had many “ahh that’s cool. Let me rollover that again…mmm” moments.

      That’s the kind of first impression you want to give. Show off your usability skills in the folio…or cv.

      • 4

        I would agree to an extent, however, a lot of prospective clients do not have the instant experience in using unique websites and thus may get confused and put off if they can not use it. I try and go by the mantra of “can my mother and brother use it, if they can’t then it needs to be easier, if they can, great.”

        Obviously this can differ depending on your target market but to try and attract clients, it needs to be usable by pretty much all age ranges from 18 and above.

    • 5

      Renee Martin

      April 3, 2012 4:59 pm

      I agree, keep it simple. If the eye is overstimulated, it follows, the brain will be too. Hence, confusing the real message. KISS!

  2. 6

    Thanks for this write up. Just in the process of recreating my portfolio now so it’s nice to see some examples. It seems that I’m leaning toward a much more simplified approach, stripping out a lot of unique stuff as seen here.

    • 7

      Thanks for your comment Jared. We’re glad that we arrived just in time with this article :) One small word of caution – do not confuse minimalism with usability. Whilst having a minimalist site will avoid clutter (which is bad for usability), it does not necessarily mean that a minimalist site is usable.

  3. 8

    You should probably use target=”_blank” in your links to external sites so that people who want to view one of the sites they’re reading about don’t have to leave the article, they just go to the new tab and close it when they’re done.

    • 9

      …Scroll wheel / keyboard shortcut?

    • 10

      Hi Mike,

      First of all, thanks for your comment.

      Without going into the merits that this styling is part of the Smashing Magazine style rules, I would like to comment why I agree with the fact that links open in the same window. From a usability perspective, studies show that users know they reached a page via a link so they will intuitively hit the browser’s back button to go back where they were. If a link opens in a new tab, this is not possible so users will likely close that tab or, worse still, hit the close button for the browser. On the other hand, it is recommended that non-HTML documents such as PDFs open in a new tab because users are likely to close the document after reading.

      Hope this clarifies why we opted for this method.


      • 11


        Hitting the back button on the browser does not help if you’ve already viewed ten pages within the new URL.

        It seems the only thing that the “studies” indicate is that most users have developed bad usability habits.

        So it goes…


      • 12

        Not to mention your audience for this article is likely filled with more power users than not. Designers and programmers, the folks on this site, know and utilize a LOT browser functionality more than a standard every day joe.

  4. 13

    Firstly, great collection of websites. Some of them may not have impressed you but I like all of them from design point of view and few of them were mind blowing.

    I personally don’t like much of Flash websites. As far as navigation goes, one golden rule is that in-spite of how much outstanding design you are implementing, do not forget to have a old school menu somewhere so as to help normal viewers find things easily.

  5. 14

    Nice article. I have to say I hate a navigation which forces you to hover or click just to reveal what’s on the navigation area. This also includes poorly designed icons without any text.

    May I also add, that the Argentinian design agency won’t be getting any Finnish customers. “Moka” means “screw-up” in Finnish ;)

  6. 15

    Good article. I just don’t find these types of “critique” articles have full impact on the reader when the person writing it has a website that looks like its from the late 90’s.
    As designers/developers we love to look at usability as a crutch for not being able to make damn good looking stuff. Each of the sites you wrote about are damn good looking sites, and a user looking for a designer or developer isn’t gonna stop and say… oh that was confusing… F this guy, he obviously sucks. BUT! I only think this can happen on a portfolio site, the things you are writing about for sure couldn’t happen on a e-commerce site! lol
    The goal of a portfolio is to blow someones mind, anyway possible. Show your full capability as a designer/developer, which all of these sites do. It’s not to drop the bar for the stupidest person who can’t figure out where the sites menu is when theres a huge black box with the word MENU in it. :)

    • 16

      I don’t like this article either. However, “form follows function” so usability should be considered BEFORE mind-blowing design.

      so it goes…


  7. 17

    This reminds me of a quote I read just yesterday, which I think is somewhat relevant;

    “Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken.”

    However I do think, in regards to portfolio sites, there can be some leeway when it comes to usability principles, considering the purpose of the site (to display your skills) and the audience (potential employer). But, at the same time, I do think it’s a fine line, and I would’t be surprised if in some cases these sites “out-develop” themselves, shooting themselves in the foot as it were. Nothing is worse than a frustrated user, especially one who could potentially be your employer.

    In the end, I think user-centered design is key for enjoyable experiences. When it comes to a portfolio, designers all too often forget about the user and instead focus on themselves, their skills, their latest acquisition of shiny new css3 effects, all the while forgoing the poor user who has to navigate this alien contraption. But, at the same time, I’m conflicted. Is one’s portfolio an appropriate place to experiment with new technologies? Does it really serve the purpose of such a site? And if it’s not appropriate, then where? I don’t have the answers, but some food for thought nonetheless..

  8. 18

    There’s a great book called “Don’t Make Me Think”.
    All of these people need to read it.

    • 19

      Indeed, “Don’t Make Me Think: A Common Sense Approach to Web Usability” by Steve Krug is ideal to understand the basics of web usability as it presents them in a concise and humorous, easy to follow way.

    • 20

      Levi Szekeres

      April 3, 2012 8:43 pm

      Great Book! Read it!
      But where’s the challenge, if everyone is doing the same thing? You might as well go and read one of Marx’s books. It’s all ideal, but not always an option. My strong opinion is to treat your visitor as equal (I try to avoid the same old “the client is retarded” phrase) and keep a surprise handy. Make it “by the book” has a little amount of desperation in it. Strictly my point of view.

      Good to read a sharp insight. Great post and a great idea with the comment vote. I guess I’ll be coming back very often to check my points below ;)

  9. 21

    Thank you Justin! I think this topic is burning.

    Another problem with websites like “Moka” is that they don’t have the common page structure which simply allows you to link to a certain project, not only to a whole website :)

  10. 22

    I have to say, I almost stopped reading after your assessment of the first site. On most of these sites it was not even clear what they did. Unless these were a friends site, I would not even spend the time looking around. If the goal is to turn a user into a client, or perhaps a job, then most of these sites fail.

    From an artistic perspective, some of the sites are very pleasing to view, and are indeed creative. They are interesting in that they show what can be accomplished as technology improves.

    The “McCormick & Morrison” site which you thought they got most of the usability right, I thought was the worst of the bunch! Nothing on that site is obvious, and the first thing I want to know when I’m on a site is, is this what I’m looking for? I don’t want to have to search for it, as I might need to visit many sites to find what I want.

    Your headline got me to read this article, but I believe you missed the mark!

    • 23

      Justin Mifsud

      March 27, 2012 8:53 pm

      Hi Scott,

      Thanks for your feedback. I agree with your first two paragraphs as that is basically what I wrote in most of my article.

      Your critique in the 3rd paragraph is highly subjective but then again so was most of my article so thanks for raising these points. So I really can’t understand why you think I missed the mark … would you please be so kind to elaborate?


  11. 24

    I agree completely with Scott. You didn’t seem to measure all the sites on a uniform standard of usability but instead picked and chose only certain attributes. I think that they should have all been measured by the same standards so that there would be a consistent comparison as to why the sites failed. For example, all design companies or all freelance/individuals, not a mix of the two.

    Since it was mentioned by Scott I will go with the “McCormick & Morrison” site. I mainly had issue with the way the portfolio was organized. It provided rather large snapshots of the work but there was no way to look at the overall design. I had to track down the info button to even find out information about each project and would need to launch each site before I could get a better idea of the visual aesthetics of each project. I noticed a lot of sites had this issue with displaying their projects. Having thumbnails that show an abstraction of the work is fine but don’t make me have to click more than once to see the overall project and info. The first site you evaluated didn’t even allow me to click on the thumbnail. I tried the magnifying glass icon and it just refreshes the page with only the clicked on item displayed. No expanded view. Very frustrating.

    Another site that forced the user to click through more than necessary was the “Shelton Fleming” site. I agree with you that the splash page should be removed and maybe after it has it will be easier to navigate, however having to click twice before I got to any information was very annoying. I clicked on the “Ideas” side and instead of going straight to the site I am led to basically the same interface but with quotes. Most people will not have the patience to do repeated click-throughs.

    I am all for visually appealing sites but if I have to spend more than 3 seconds tracking down what I need to find out about what they do or their work, it fails and I have moved on. Most employers do not have tons of time to investigate sites, so like Scott I agree that the reviewed sites overall failed in terms of usability.

  12. 25

    Given these were ‘high concept’ design sites I thought that they would be suitable for viewing on mobile devices. My only criticism of your review (which I found very informative) was the lack of having a ‘responsive’ field on your checklist.


  13. 26

    fabrice liut

    March 29, 2012 1:14 pm

    Great article ! THX

  14. 27

    Julian James

    March 29, 2012 6:53 pm

    The site was (as a Wacom user) completely unusable for me. The navigation went crazy! Spinning round and round… dizzy bad not dizzy good.

  15. 28

    I agree with most of your assessments regarding these sites. The usability is very bad on all the sites. However, I can’t help wondering how I would feel reading this if one of those sites were mine.

    You could have just as easily focused on positive aspects of sites with good usability but instead you focused on the negative.

    I feel that these sites were easy targets. I believe you could have challenged yourself and your readers a little more with this article. For instance, go to the Apple site and pick out usability/design flaws.

    so it goes…


  16. 29

    Many of the designs featured here are really hard to navigate. Beautyful yes, experience at times… err… confusing.

  17. 30

    Robin Jennings

    April 3, 2012 7:36 am

    There’s some beautiful portfolios there. I’m not sure if i would be brave enough to use navigation like many of your examples, but they certainly push the boundaries.

  18. 31

    I’m still not clear on why Shelton Fleming’s home page isn’t considered a splash page. You have to click through it to get to the navigation.

  19. 32

    Charlie Cryder

    May 9, 2012 4:40 am

    I thought everyone of those websites were very overbearing. Like you stated during the first website evaluation, “don’t build a website just to show off your talent, build it with the user in mind.” Non of those website really had the user in mind. Though they were all very elegant and aesthetically pleasing they really frustrated the user and in some cases caused me to just exit out which is the last thing you want.

  20. 33

    I thought everyone of those websites were very overbearing. Like you stated during the first website evaluation, “don’t build a website just to show off your talent, build it with the user in mind.” Non of those website really had the user in mind. Though they were all very elegant and aesthetically pleasing they really frustrated the user and in some cases caused me to just exit out which is the last thing you want.

  21. 34

    Looking at this article and similar posts, one thing that always strikes me is how users find these websites in the first place?

    eg. How do they perform from an seo perspective.

    How were these sites discovered for this article for instance, all of the above can’t be ‘known’ designers and whilst the skills and functionality of such websites and website designers is fascinating, I’m always left wondering how they attract clients and business…

    Any thoughts?

  22. 35

    Pablo Verano

    April 18, 2013 3:06 pm

    Hey Justin,

    I just wanted to let you know that we’ve updated our website,
    We moved the old site to so you can update the link on your article and keep it coherent.

    Besides that, I would like to thank you for your comments on the site. It was very good feedback :)


↑ Back to top