A big problem with interface design is the focus on aesthetic. Remember that your website is first and foremost a tool for people to interact with your company. Aesthetic is only a factor in the overall consideration of the design process.
What’s most important is understanding your customers, your readers, your prospects. To have a successful design implemented you need to take a few steps back and get away from design all together. Here’s how to start:
1. Design Research (Personas / Mental Models)
Start by segmenting the different groups of people who use your site; or who your trying to target to use your site. Research what they are trying to get out of your site. What is it that they need? What is it that you need to tell them in order to convert them from a prospect to a client? These motives and outcomes need to be evaluated and documented so that you can design effectively.
- Mental Models: Aligning Design Strategy with Human Behavior
- Subject To Change: Creating Great Products & Services for an Uncertain World: Adaptive Path on Design
2. Paper Prototyping
The next step is to get ideas flushed out rapidly on paper. You may iterate through several ideas. The idea here is to quickly create concepts for different scenarios that your users will encounter to achieve the tasks you want them to do on your site. If you flush it out quickly on paper you can actually run various ideas past sample groups to get some immediate feedback. You can test to see if they were able to accomplish the tasks you set out for them to do. You can also find out if they need to be able to do something you didn’t necessarily anticipate. This is a very low fidelity form of user testing and a crucial step in a successful design process.
- Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces
- Sketching User Experiences
2b. HTML/Flash Prototypes
If your budget permits you can actually build out your newly sketched out website as a plain looking interface. The goal here not to create something that looks amazing. The goal is to build something that represents the paper design as quickly as possible. By doing this you can then actually send customers / users to the working prototype and see how they actually use it.
3. Art Direction / Mockups
Finally, once you have worked out all of the kinks with your design you can start focusing on making it pretty. Again, aesthetic is very important but it often comes to soon in the design process. People view this segment as the design process when in fact it is really the last step. Aesthetic is used to improve the user experience of the site. It comes in the form of art direction as well as animation and other interactive effects that can help communicate actions and provide feedback to the user. This step can be very time consuming and making changes to the overall UI when working in high fidelity becomes a more time consuming process. Thus it makes it harder for us to react to the necessary changes we need to make to our website in order for our design to be truly successful. This is why you must focus on aesthetic at a later stage in the design process.
Thomas Thornton Says:
4:00 pmMay 31Excellent overview! I’ll definitely be bookmarking this page for future reference.
Sully Says:
4:28 pmMay 31Nice article Jim. The more projects I do the more I appreciate the research and “on paper” phase of the design process. Very well articulated, and thanks for the book tips.
Jim Jeffers Says:
4:35 pmMay 31@Sully:
Definitely. This is the most important step. Crucial decision making comes here. The rest is more or less supporting evidence of these fundamental design decisions.
erik Says:
5:23 pmMay 31Look at that UX goodness…makes me feel warm inside.
Isaac Weinhausen Says:
11:39 pmMay 31Checkout http://www.usertesting.com/. It’s a great resource for testing your HTML/Flash Prototypes. The combination of low rates and super fast feedback makes it super-fly.
Jim Jeffers Says:
4:58 pmJun 01@Isaac Weinhausen:
Thanks Isaac! I forgot to check that out when you mentioned it to me earlier. This looks awesome!
delizade Says:
1:04 pmJun 16useful advices. these steps are harder than make aesthetic design. regards.
Fahad Says:
3:09 pmJun 30Jimmy Jeffers!
Textbox Says:
2:02 pmAug 12Great article. Although using a prototype seems like it would add a large expense into each project, we have found the process to be a must. 1 extra hour of upfront planning can save 10 hours on the backside.
Efraim Says:
4:43 amAug 21Excellent article!Hey, instead of using paper for prototypes, you might want to look into Magnetic Prototyping (http://www.MagneticPrototyping.com). It’s faster, looks more professional and great for the early stages of a project.Clients also love it in collaborative sessions. Anyways, that’s what I use. -E
Marion Says:
8:10 amAug 21This is great info – for someone who knows coding and ui design. What about the person with the idea for the web application? How do we find the right team to build the app?
steve Says:
8:34 amSep 23hi Jim,I read your other post on your commenting system so wanted to try it out here. too cool! I love that I can select a quote from your post and then reply to it. I love it! Oops, I already said that.
Anyway, step #1 on any website should be to determine what people (customers) need when they visit, and then make sure you are fulfilling that need. I hate websites that are all wow-stuff but don’t answer my questions or tell me what I need to know (or at least I can’t find the content even if it is there, somewhere…)Anyway, great post and awesome comment system!Steve
Janae Cluver Says:
2:51 amFeb 09I will admit this is the third time I have read your blog and Im diggin it! I added your site to my rss reader. Cant wait to see more posts!