Many people involved in Web Development, and especially clients, mistakenly believe that the UI is synonymous with the web page itself, and consequently focus much of their attention on visual aesthetics, with practical matters left as an after thought. There’s no denying that visual appeal is an important aspect of any site design, but interface design is so much more than that.
UI design is an important specialization within the development spectrum. It is primarily focused on the interactivity aspects of a web page. How it looks is important. How it acts or reacts is normally much more important. It does you no good at all to dazzle users with an exciting and impressive look if you can’t back that up with a robust interface that does everything the user expects of it.
Let’s take a look at some of the major things you should be paying attention to when designing your user interface.
1. Plan your interactivity from the outset
The biggest website killer of all time is the designer who focuses all their energy on creating impressive visuals, tacking on a haphazard or almost non-existent interactivity to the system right at the end of the job. Actually that’s not strictly true, because when a designer doesn’t invest any energy at all into creating a great look and still does a poor job of providing interactivity.
Before you build that site, you should have a very clear idea of how it’s all going to fit together. You should have a good idea of what users are going to expect from your site and the kind of actions they are likely to take while visiting. You may also want—very rarely—to include a few things the user isn’t expecting, but these should always enhance the UX rather than detract from it.
Clippy the Paperclip is a good example. While many users eventually came to find Clippy annoying, his first appearance was so unexpected that he created a huge impression. This no doubt helped Microsoft enormously in its quest to dominate the office productivity software market. A very small and even kind of silly addition to a serious business application, yet it made a substantial impact, simply because it was unexpected and different.
Anticipating what the user might want to do is key, and if you can exceed their expectations by delivering a high quality interactive experience, then your site is likely to be very successful.
2. Remember to focus on the needs of the user
Too many sites are built from the point of view that they are built to present information about a business, and so their focus is on the needs of the business (to talk about themselves) and not enough on the needs of the user (to obtain useful information that will benefit them). The result is a lot of boring, bland, static websites that aren’t very helpful to users and probably weren’t worth creating in the first place.
Even as far back as 1984, the Ford Motor Company was giving away driving simulator games featuring their cars. From a marketing perspective, this was a stroke of genius. They were getting kids too young to drive already dreaming of someday owning a Ford Bronco. It was the ultimate brand loyalty gimmick. Now imagine how much different it would have been if they had simply issued some software presentation that just described how great their cars were. Good interactivity made all the difference when it came to capturing the audience’s attention.
In the modern day, if we were creating a website for a car manufacturer we would want to make sure that we did all of the following:
- Make it easy for users to find the model of car they are interested in
- Make the car model selectable so the user can go to a dedicated page about that model
- Provide all the details a user would want to know, and make it really simple to access those details
- Give users a 3D tour inside and outside the vehicle
- Provide professionally produced video footage showing the car in action
- Let users interact with a 3D model of the car, adding accessories, changing the paint color, etc.
It wouldn’t hurt, either, to invest in creating a game for them to play. We have the technology available, so why not exploit it?
3. Be creative, but don’t stray too far from standards
To some extent you may want to customize the interactive components on the site, and that is certainly a great idea. But you have to be careful not to take it too far. You want users to say:
“Hey, that’s a really cool close button!”
“Is that a close button? Or what?”
Over the years, certain standards for interface controls have evolved, and for a very good reason. These standards help users to more easily accomplish the tasks they are trying to accomplish. Remember it’s all supposed to be about the needs of the user, not about the needs of the business you’re creating for. You may sometimes need to remind clients about this. Inexperienced website clients start their briefing with “I want…” instead of “Our users will want…”.
4. Make sure your interactive UI components fit into the overall design
These days, web design needs to be responsive and able to handle being accessed from any kind of device capable of supporting a web browser. That sometimes means planning what you’re going to do if you have an interface component that won’t scale well or that wouldn’t look good in some kinds of devices. In some cases that may involve replicating similar functionality on a modified version of the component and setting it only to display on a particular range of resolutions, or it may mean hiding the component completely.
Remember, it’s not just about visuals. It’s not a good thing if your page is loading things that the user will never see on their device. Make sure your interface planning includes conditional decision-making steps.
It’s still OK to be awesome!
Just because you need to have a good handle on usability, interactivity, and practicality, it doesn’t mean you can’t still make a fantastic looking design. You should always be attempting to make your designs as visually appealing as you can, because they are a part of your portfolio. It’s just that you must ensure you’re not sacrificing the practical aspects in favor of the visuals.
header image courtesy of Webshocker