We first enter the User Experience phase on a project once we're in the wireframe stage. Some people think that wireframes are a sketch of the project, providing a rough idea of its layout and how it will look. However, that isn't our definition. At CommonPlaces, a wireframe is a clickable, functioning prototype of the website.
Once we have that, we can move through the process of doing all those things which visitors to the site would have to perform: signing in, logging on, navigating through the site - whatever constitutes practical usage of the website. This is the beginning of addressing usability concerns. We test the primary functions of the site, making sure that all parts of the project make sense.
When to test
Obviously the User Interface is more on the design side at this stage, in which we judge the wireframes on what's visually appealing, and draw attention to the appropriate Calls to Action, for example. We'll provide Help text if necessary, guiding people through steps as needed. It is an iterative approach, of course, and we're not going to be perfect every time through. This is our Wagifall process, in which we've taken steps to get the project on its feet as quickly as possible, start getting user feedback, and then adjust accordingly.
We want the website to meet our expectations before the client gets their hands on it. Sometimes, a client is anxious to see the project before we're ready to get to this stage, to play with the toy before it's out of the box. While this is understandable, it's very counter-productive. This is why we have a detailed planning process. Previewing a site before it's actually ready to be seen will add cost and time to the project because code must be merged and deployed by the developer before it's in beta. Obsessing over bugs which haven't been fixed yet causes agitation and most importantly, nothing is gained.
Don't be too clever
Every once in a while, the temptation to add cool features will get the better of a developer, but it often happens to a client. We once had a request to add a unique, interactive infographic to a site. It was tricky, and took a long time to get right. It added significantly to the cost of the project because of the time the engineer spent on it. Cross-browser functionality, in which you have to make everything work in universal formats, requires a lot of testing and tweaking. In the end, though, it added nothing to the user's experience. We want to build spectacular sites, but we believe that form should follow function.
I've noticed that, with the advent of mobile, clients have a clearer idea of what is important. UI and UX issues are emphasized when you can see how little real estate you have to work with in reduced size. Priorities come into focus. What's really important? A cute trick that dances across the screen, or getting the message across to a first-time visitor? By having those parameters put before them, the unique features that they want to add become secondary.
Tell your story
A website with too much text and features on the homepage will lose your visitor. Scrolling is fine, but you should establish boundaries. You want to tell your story, but you want to do it in chapters. They found you '- great! Tell them who you are, what you do, and why you matter, and do it on a high level. Now encourage them to navigate to another page, so they can dig deeper in the areas that matter most to them.
The message is important, so don't clutter the page. White space, or negative space, allows the user to focus without distraction. Likewise, bold, darker designs can really pop; but they may not always suit the material or purpose of your site. This is what UX is all about '- finding what works, not merely what looks cool.
Don't forget the interior pages
Clients will often approach us with three examples of websites that they like. They like the scrolling effect, they like the colors, they like the way the menu is pinned to the top, they like the fonts. All of that tells us what type of design they want for their homepage. What I'd equally like to see is examples of functionality that they like.
Take the time to look at forms that visitors must fill out, and tell us why you prefer one over another. Look at various blog pages to assess their look and efficacy. Check out the Portfolio pages of your competition, and analyze them carefully. All of this information will provide us with the user experience that you want for your website.