Kevin Dench

kevindenchdesign.com

Designing for Web

Written by , posted on 20 Sep, 2015

No image to display, so this is shown.

Introduction

I graduated from college with a Bachelor’s in Graphic Design and minors in Advertising and Web Design. Throughout the course of my college career, I really enjoyed the tangible experience of print design. There were just so many components to it. For example, the look and feel of the paper, the way the ink looked printed when printed, when you nailed the Pantone value the colors really popped too. These things and (many more, frankly) contributed to a semi-interactive experience.

Then I discovered web design and it was a very natural transition for me. I realized there was a whole other league of interaction, which made things tricky and exciting all at the same time. The reason why it was tricky is because I was used to being very creative with my designs, which is a good thing for a Graphic Designer. However, if you’re a Web Designer there are certain conventions users are used to seeing.

Designing for Web

A convention is a set of generally accepted standards, norms, social norms, or criteria, often taking the form of a custom. Certain types of rules or customs may become law and regulatory legislation may be introduced to formalize or enforce the convention (for example, laws that define on which side of the road vehicles must be driven). In a social context, a convention may retain the character of an “unwritten law” of custom (for example, the manner in which people greet each other, such as by shaking each other’s hands).

Convention – Wikipedia

This means in web if you’re going to approach your website minimally, make sure you give your visitors enough clues that they can pick up on it immediately. One of the (arguably) most important things for interaction design is learn-ability. Have you ever downloaded an app to try it out and end up feeling frustrated annoyed and even a little angry? Most of the time this is because the developers didn’t think through key components of human-computer interaction. One of those components being learn-ability.

Remember your Audience

If you are designer and developer of your website or a website done for a client, you need to take the time to research your audience. If your audience is young go to all the hot websites all the “kids go to these days” and find out what makes them tick:

There are lots more questions you can ask, but I won’t go over them. The main point is you need to research what your target audience likes, and go a step further and actually understand it. You don’t have to enjoy what they like, but understanding what makes it like-able is key.

Remember the Web Designers

If you’re the designer and your client has someone different to do the developing you need to think like a developer. It doesn’t hurt to research the possibilities of the modern web, and design within those constraints. Remember that things like movement may seem easy enough, but when you’re dealing with different browsers and support for that, things can get a little dicey. In an ideal situation you will have some kind of direct line to the development team and will be able to ask about different possibilities.

There is a distinct possibility that you don’t understand any of the mumbo jumbo that developers say, so how can you help them out with your designs? In my opinion it’s a little better to over-design something and have to pull it back later than under-design something and have to completely re-think how to solve the problem. So if all else fails follow conventions and norms of the web and plan to reign it in later after some feedback.

Pen to Paper

After all the above considerations and research has been completed it would be a good idea to start designing something, right? Yeah, I thought so too. The biggest mistake new designers often make is jumping right to the computer, but all the best problems are solved with good old fashioned This is an image of a pen and paper prototype for the CU Library Re-Design in my Portfolio.pen and paper. This is especially true when you’re designing for the web.

In the image to the left you can see what I am talking about. This is an important and vital first step to visualizing your design. The prototype seen here is one of my sketches for the University of Colorado Library Re-Design and as you can see it came a long way.

For example, when I first sketched it out, I was able to see that I didn’t like the magnifying glass to the right of the word “Go” that just seemed un-intuitive to me. So I changed it around a little bit. Another thing I realized is I didn’t have to have social media front and center on the top of the page. I could put it in the footer.

Although it’s true you can be your worst critic, there’s no critic like a complete stranger or honest friend. That leads me to my next point.

Usability Testing

When designing for web or any other medium, really, there should be a certain level of feedback.

Designing Scenarios

So the first thing you need to do is create scenarios you want to test. For example if the website has a sign up feature your scenario could be, “Please show me how you would obtain a subscription or account to this site.” You want to be very careful to not include hints. Notice I didn’t say “Please show me how you would sign up,” because if we have a button that says sign up, they’re just going to guess, but most of the time, the task they want to accomplish is a concept or idea.

Visualize the Site

When sketching your ideas for a website you should create “panels” or pages that your users can navigate through. Going back to my sketched example, I created a panel where if the user tapped the search bar I would tell them to write in their search (yes, right on my paper). Most of the time, their next action was to hit the “go” button. Then, I would then remove that paper from them, and place another one in front of them with the search results. I had to be prepared if they were the fringe user that when given the scenario to “Find a book and check it out,” that would first look in a seemingly unrelated tab like “find” or “about.” This is also an important idea, put a lot of thought into labels and how things are phrased.

Surveys

Vital to the success of your project is designing surveys for the people you’re testing to take after they’re done. Keep it short, but informative; informative for you, so ask good questions. Most people are much more comfortable writing down criticisms, or what they consider criticism, than saying it directly to someone. If you don’t have a survey you might get a lot of responses like “it was good,” or “I can’t think of anything to improve.” You might still get that with a survey, but at least you know it’s not because they didn’t have an opportunity to write down what they were really thinking.

Data Analysis

After usability testing and a stack of survey responses from the participants, I find it helpful to quantify the results. The designer in me does this through visualization, like graphs, but do whatever is most comfortable and helpful for you to digest all your data.

Once you have the data in a digestible format it’s time to start making tweaks. Take the data and identify the weak places in your design, and strengthen them. For example, if a scenario revealed that “click now!” seemed to have a negative connotation to your user, then a great approach would be to come up with 3-4 alternatives and pound the pavement again. Find out which of those alternatives people prefer, and give them an opportunity to suggestion their own option, if they want.

All these surveys and interviews seem like a lot of work, and they are! Don’t kid yourself. That’s why a lot of companies don’t have the dough to spend on Usability Experts, because it takes a lot of time, money and resources. However, if you’re able to do usability testing it can pay off big time. Let’s think on that for a brief moment. If you do things quickly and rush development, you end up with bug and usability fixes after launch anyway. It’s all about taking the time necessary to do something right, that doesn’t mean you won’t still end up with problems after launch, but you’ll have a lot more data to back up the design than simply aesthetic.

The analysis of usability has always been one of my favorite parts about designing for web. There is just something so honest about the feedback you receive. When you’re doing a test watch their body language and take notes. Do they wrinkle their forehead at anything, or scratch their head? Do they hesitate at all? Where? These are all very important things to watch, because if their feedback is a little lean, you have some notes that can point you in a better direction. Especially if most of your users hesitated at the same point in the scenario, but didn’t mention it in their feedback.

Revise and Repeat

Designing for web can be a little bit of a challenge, but I think it’s a lot of fun. This refining process really helps you get the purest, simplest design. It’s a lot better than trying to sit at your sketchbook wondering what will connect with your users. You could even ask them for some of their favorite websites that they find easy to learn, and get them to gush about it a little. Does your design have the same qualities? If not, you can collect feedback from all sorts of places and revise your design, then of course, sketch up some more panels and do it all over again.

Conclusion

It’s great to have good instincts about what your users want or need, but getting out and actually discovering that for yourself is pretty valuable. It will inform your design and make for a much more positive designing and building experience. Having a strong design that you can justify every step of the way is going to be a lot more effective than making decisions purely based on design principles. Now don’t misunderstand, design principles are important, but its much better to have a smart, intuitive design than an attractive, minimal one that has poor learn-ability and usability.

What are some of your favorite parts of the usability process? Did I leave anything out you would want to mention? Leave your responses in the comments, and I’ll take a look.


This was posted under these Design, Tutorial categories, under these , , , , tags.