Details in Design – How Much Difference Do They Really Make?

Posted in Tips, Usability, Web Design3 years ago • Written by 9 Comments

I recently read an article on SixRevisions called Details Make the Difference in Web Design by Jason Gross. I thought it was a great article for the most part, but that it left out a few things and didn’t touch on the importance of making sure a design detail is actually needed. So I thought I’d expand on it a bit. I’m looking for feedback here for sure. I’m also not claiming that I have this down personally, we all need to work on some area or another. Be sure to leave your thoughts below!

The Point of Design

One of the very important things to remember is the point of our designs. We may be designing for people who rarely look at websites or people that stare at them for 10 hours+ a day. These are details that aren’t visual, but most likely just as important, if not more so. Now, I’m a designer so I love things to look pretty, but I’m also into user experience. So even if I try to make something look incredible, it has no value if it’s not usable. That’s where we need to remember the user.

by Steve Keys

Remember the User

These people are the ones that are going to be using the site moreso than we will after it launches, unless it’s a product we use of course. For the most part, we need to take into account if they understand how things work on the web, what links look like, where to find the navigation, things of this nature. Now I realize these aren’t exactly “design” elements but they are details and they are very important. So if we’re talking about details, we have got to remember the user, what they’re looking for, how they will get there and lastly, will they appreciate the way it looks. Yes I know it’s hard to fathom that the actual “look” may very well come last, but for many users, they just want information and as long as they can find it, they couldn’t care less about the way it looks. Which perfectly leads me into my next point.

Pay Attention to your target audience

If you’re designing a website for an app that only runs on mac, then don’t worry about the IE users. Obviously make it look decent over there, but they will be few and far between. But if you’re working on a site that mostly businesses will use, better keep your design in IE standards, or close to it. What I mean by this is simply to pay close attention to who you know or think will be using the site the most. Make sure that your “details” make sense for that platform or even that browser and keep within the means of what your audience will understand. A website designed for middle-age business people will most likely not need the fancy jquery functions and subtle details in the design that don’t make a difference to them. And that doesn’t mean to make it ugly, but keep it simple for them, they aren’t designers who understand what HTML5, jQuery and CSS3 are. Again, not that I don’t think we shouldn’t push these technologies so that the web advances as it should, but be aware of your audience and don’t make them think too hard…it makes some people’s head hurt.

Details Details Details

Ah, now for the amazing details in design you’ve all been waiting for. I go back to Jason’s post once again and think about what he mentioned there. He said

The type of details we want to spend extra time on improves our work beyond the aesthetic levels.

And while I 100% agree with him that spending the extra time on details is necessary, I’m honestly not sure his examples proved that point all that well. Removing a line or changing the active state of a navigation element doesn’t necessarily reflect poorly on the overall user experience. From a design standpoint, yes it makes a difference, but I just don’t feel the addition of those things “improve our work beyond the aesthetic levels.” Take the following for example

by KillerBeeCreative

The image is the same but with a few minor details changed, just like Jason did in his. But I venture to say that its is still just as usable without the detail as it is with it. Aesthetically different and uglier, but not less usable. It’s also a difference in design style as one is more flat than the other. I think you’ll agree with me here that we could all use the site on the right just as easy as the one on the left.

Now take the below as the opposite example.

by KillerBeeCreative

The example on the left is the original but now I’ve changed the font on the one on the right to show how something as simple as a font change can downgrade the design. Not only does the original look better, it is literally easier to use simply because it’s easier to read. These are the types of details we need to pay attention to when designing. Make it look awesome of course, because that’s what we love to do, but make sure it’s usable over everything else. Take note that I purposely did not change anything except the font to further prove my point that I mentioned above. We all tend to think of “the details” as a line or shadow, but remember they can even be something as big as a font choice, colors, line height, positioning and many other aspects of a design.

The Big Question Here

So, the question that we’re trying to answer here is this. Does a design become less effective without the details? I can see where it might, for instance, for a web designer. If I have a portfolio that doesn’t display the details of my work or show that I pay attention to detail, my site becomes less effective because the potential client looking at it deems I’m not worthy of working with the level of detail they need.

On the other hand, I would say in some instances it doesn’t matter. The design is still usable. It still looks good, though not when compared with the better looking version. And it still functions the way it should, or at least we hope it does. So in this sense I would say it can be just as effective.

AND…Finally

Some of the simplest designs are the ones that catch our attention the most. Designs that get too “detailed” can cause over stimulation on where to look and what to focus on. Don’t fall prey to that. Pay attention to the details, but never overdo them. Make it a point to go back through your design and remove anything that doesn’t add “value” to the overall design. Overall, remember that you’re the professional, whether it’s doing work for yourself or a client and you need to make the call on what needs to be there and what does not. Stand up for awesome designs everywhere and make that commitment now.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

9 Written ArticlesWebsite

I'm a designer, husband, father, and Christ-follower for life. Usability is key, sandwiches are awesome, and there's just no beating a Starbucks white chocolate mocha. You are cordially invited to be a twitter stalker of mine and I hope you love the articles so much it makes you want to share them every 15 seconds for the rest of your life. That would be some serious sharing going on. Drop me a line on my site even if it's just to say "Hey!"

9 Comments Best Comments First
  • Paul M. Watson

    Monday, March 28th, 2011 15:33

    1

    Bit confused but are you saying that in the final example the serif font on the right is more readable than the sans-serif on the left? I find the curly font to be next to unreadable.

    0
    • Erich Sparks

      Monday, March 28th, 2011 21:58

      2

      The wording is a little weird but he’s saying that the simpler font not only looks better but functions better because it’s readable.

      0
    • Jared Latigo

      Monday, March 28th, 2011 22:31

      3

      Oh no, the one on the left is definitely the readable one. Guess I should have switched the sides on the image…i’ll make some edits to the copy. thanks for pointing that out.

      0
  • Jason Gross

    Wednesday, March 30th, 2011 20:24

    4

    Jared,

    I appreciate you taking the time to voice your full opinion about my recent post with a well thought out post of your own.

    You have certainly brought up some good points and examples where details, while visually appealing, do not play a huge role in the usability and value of a web site. This is certainly a situation where the door swings both ways. Relating to the example you posted with the navigation I agree that when isolating that portion of the web page the compare and contrast does not show us much improvement with the added details. However, if a similar element were placed on this page among other content I think we may still see those same details, when applied, help this element to stand out more to the visitors eyes.

    The purpose of my original post was not to make that argument that subtle changes like you see in the examples of both your post and mine would have an effect on a sites functionality. If designers find themselves with a site that does not work or is not usable they have bigger problems to worry about than design details. I do believe that there are situations where a few subtle details will increase a sites usability by calling more attention to important elements.

    Your post will certainly prove to be a thinking point for designers who are trying to decide how much time they should put into small visual improvements and how much of a difference they will really make. As you have pointed out, there are plenty of scenarios where it just won’t make all that much of a difference.

    0
  • Vincent Peerlinck

    Wednesday, March 30th, 2011 20:42

    5

    I think the type of detail in the first image indeed won’t affect the user experience a lot, but it does affect the amount of jobs you get :) when you have 5 good designers, the one with the biggest attention to detail will most likely have a little bit of an edge, it gives you the feeling he made just that little bit more effort, etc.

    0
  • Peter

    Thursday, March 31st, 2011 05:12

    6

    In your first example, to me, it isn’t about detail as they are two slightly different designs.
    I happen to like the clean style of the second but it probably doesn’t enhance usability at all.
    Paying attention to detail in those examples would be whether the drop shadows are implemented well/smoothly, etc.

    0
  • Seni Bana

    Saturday, July 23rd, 2011 00:27

    9

    I think the type of detail in the first image indeed won’t affect the user experience a lot, but it does affect the amount of jobs you get :) when you have 5 good designers, the one with the biggest attention to detail will most likely have a little bit of an edge, it gives you the feeling he made just that little bit more effort, etc….

    0
  • Lily Dart

    Tuesday, April 5th, 2011 16:32

    7

    Good addition to the original article. However, I’d argue that detail that doesn’t seem to have an immediate impact on usability can have a positive aspect on the branding or perception of the website by the user.

    I work with a lot of non-designers day to day, and although they often can’t pick out the exact issue they have with a design, they are very able to see the difference between a well thought through and neatly finished design with subtle details, and a design that doesn’t take these qualities into account. It’s the difference between looking professional, and looking cheap – take any quality/expensive brand versus a cheap one and you’ll see this to be true.

    I guess what I’m trying to say is that the experience of using a website isn’t always about the obvious usability issues, it spans from the impact you get from when you first load the page, right down to the buttons on the contact form.

    0
    • Chris

      Friday, April 15th, 2011 02:53

      8

      Really good point Lily.

      0
  • Seni Bana

    Saturday, July 23rd, 2011 00:27

    9

    I think the type of detail in the first image indeed won’t affect the user experience a lot, but it does affect the amount of jobs you get :) when you have 5 good designers, the one with the biggest attention to detail will most likely have a little bit of an edge, it gives you the feeling he made just that little bit more effort, etc….

    0
  • Lily Dart

    Tuesday, April 5th, 2011 16:32

    7

    Good addition to the original article. However, I’d argue that detail that doesn’t seem to have an immediate impact on usability can have a positive aspect on the branding or perception of the website by the user.

    I work with a lot of non-designers day to day, and although they often can’t pick out the exact issue they have with a design, they are very able to see the difference between a well thought through and neatly finished design with subtle details, and a design that doesn’t take these qualities into account. It’s the difference between looking professional, and looking cheap – take any quality/expensive brand versus a cheap one and you’ll see this to be true.

    I guess what I’m trying to say is that the experience of using a website isn’t always about the obvious usability issues, it spans from the impact you get from when you first load the page, right down to the buttons on the contact form.

    0
    • Chris

      Friday, April 15th, 2011 02:53

      8

      Really good point Lily.

      0
  • Peter

    Thursday, March 31st, 2011 05:12

    6

    In your first example, to me, it isn’t about detail as they are two slightly different designs.
    I happen to like the clean style of the second but it probably doesn’t enhance usability at all.
    Paying attention to detail in those examples would be whether the drop shadows are implemented well/smoothly, etc.

    0
  • Vincent Peerlinck

    Wednesday, March 30th, 2011 20:42

    5

    I think the type of detail in the first image indeed won’t affect the user experience a lot, but it does affect the amount of jobs you get :) when you have 5 good designers, the one with the biggest attention to detail will most likely have a little bit of an edge, it gives you the feeling he made just that little bit more effort, etc.

    0
  • Jason Gross

    Wednesday, March 30th, 2011 20:24

    4

    Jared,

    I appreciate you taking the time to voice your full opinion about my recent post with a well thought out post of your own.

    You have certainly brought up some good points and examples where details, while visually appealing, do not play a huge role in the usability and value of a web site. This is certainly a situation where the door swings both ways. Relating to the example you posted with the navigation I agree that when isolating that portion of the web page the compare and contrast does not show us much improvement with the added details. However, if a similar element were placed on this page among other content I think we may still see those same details, when applied, help this element to stand out more to the visitors eyes.

    The purpose of my original post was not to make that argument that subtle changes like you see in the examples of both your post and mine would have an effect on a sites functionality. If designers find themselves with a site that does not work or is not usable they have bigger problems to worry about than design details. I do believe that there are situations where a few subtle details will increase a sites usability by calling more attention to important elements.

    Your post will certainly prove to be a thinking point for designers who are trying to decide how much time they should put into small visual improvements and how much of a difference they will really make. As you have pointed out, there are plenty of scenarios where it just won’t make all that much of a difference.

    0
  • Paul M. Watson

    Monday, March 28th, 2011 15:33

    1

    Bit confused but are you saying that in the final example the serif font on the right is more readable than the sans-serif on the left? I find the curly font to be next to unreadable.

    0
    • Erich Sparks

      Monday, March 28th, 2011 21:58

      2

      The wording is a little weird but he’s saying that the simpler font not only looks better but functions better because it’s readable.

      0
    • Jared Latigo

      Monday, March 28th, 2011 22:31

      3

      Oh no, the one on the left is definitely the readable one. Guess I should have switched the sides on the image…i’ll make some edits to the copy. thanks for pointing that out.

      0

Comments are closed.

54.81.170.186 - unknown - unknown - US