There is no one right way to design a website UI. There’s no cure-all template for you to plug in your brand and hit “submit.” Each site has its own goals, motives, strategies and artistic style. This isn’t an article outlining a definitive set of rules for designing the perfect website every time. This is an article that describes a few effective design patterns so you can choose and modify as needed.
The very nature of input controls is to allow your user to interact more deeply with the site. But there’s a paradox here: the users usually want more control, but every new control complicates the UI and clutters the screen. One of the best way to strike that perfect balance is to have controls on demand.
The idea is to save on screen space by hiding your controls instead of flat-out getting rid of them. It’s a win-win solution and the proof of its effectiveness is seen in how nearly all high-profile websites have adopted it. Controls can be hidden and revealed by hovering over the affected content (Pinterest), hidden in collapsed drop-down menus via tabs (Google Docs), or a hybrid of the two, as with the CollabFinder example above.
But input controls aren’t always proper controls. The text input field, for example, can be a valuable tool, but a lot of designers take that for granted; they use a generic text field and forget it’s even there. Customizing your text box will not only infuse some personality into your site, but also set you apart from other sites. This can be great to look into, especially if the default box colors don’t fit with your site’s colors.
If your site centers around a single input field, or if input is a necessary first step, setting an auto-focus on that input field would be a smart move. Auto-focus is when the cursor starts within the field automatically, most famously used by Google. As soon as you enter Google, you can simply begin typing your query without having to click anywhere.
As described in Web UI Patterns 2014, Google also incorporates default values and auto-complete, which significantly speeds up user actions and helps users explore additional topics and themes.
If you need a little help with the specifics on changing the text field box, this site will give you some help with the coding.
One of the essential elements to UI design is a fully functional navigation platform. It is completely necessary for every site — it doesn’t matter how great the rest of your site is if your users can’t find anything.
Because navigation is so important, there are some universal rules that can be applied to every site. Collis Ta’eed, co-founder of Envato, gives us the two cardinal rules of navigation:
- Users should always know their location on the site (orientation) — In order to make your users feel comfortable, they need to feel like they can confidently move around your site and streamline the site on their end. There are a few ways to achieve this, most commonly: highlighted menu items, breadcrumb trails and headings.
- The navigation system should not change (consistency) — In other words, don’t move your menu bar around. By keeping the same system for navigation, your user will be able to figure out how to find their way home, even if they do get lost.
Source: Web UI Best Practices
A main component in navigation is the content itself — after all, there’s no point designing a navigation system if no one cares what they find. As you’ll see above, Google Maps API, provides primary navigation with a simple horizontal menu, while the secondary navigation is given lower priority on the right side. (From a standard perspective, the most visible places to add a navigation menus are horizontally and vertically.) But you’ll notice the content occupies the most space. The primary navigation is muted with small fonts and light colors, allowing the content to speak for itself.
Navigation does not need to be showy or even attention-grabbing, as we can see from the site of the REI 1440 Project. Their minimal three-option menu is smaller than even the company logo. The entire navigation is based horizontally, allowing content to cycle from left to right as the user filters by time, activity, or location. But that doesn’t mean horizontal navigation trumps vertical every time…
Skullcandy’s Supreme Sound site, for example, utilizes the vertical navigation well with an unorthodox scrolling approach. The screen rotates as you follow the headphone cord down the page. This can only work because the navigation menu to the right stays firm, anchoring and orienting the user as they explore.
For more examples of horizontal and vertical navigation, take a look at this collection of navigation UI patterns.
Users rarely change the default settings, even if they have the option to. That means it’s on you to get it right the first time.
While this seems like a lot of responsibility, there is an upside. You can choose the default settings for the actions you want the user to follow. Take, for example, Living Social — the default audience for email deals are “everyone,” which encourages users to forward deals to more people.
While it’s tempting to take absolute control over your user’s settings, it’s important to the UX that you lend some freedom to your user. Creating a convoluted process to keep the user on default settings will only frustrate them and push them away.
Default settings are best used when you can make qualified guesses regarding user preferences. If you don’t know your target user well, plotting default settings may do more harm than good.
While default settings can make people uncomfortable with their level of control, a much gentler way to guide their actions is the power of suggestion. Guided actions allow you to encourage deeper involvement, interaction and even feedback — as long as the action you’re suggesting isn’t cumbersome.
Source: LinkedIn, via 99 Designs
LinkedIn is one of the best examples when it comes to using guided action. Upon opening a page, the user will usually see prompts to actions, for example, endorsing your connections’ skills. It’s human nature to enjoy helping friends, so prompting this guided action works because it’s something they want to do anyway, but may not have thought of it on their own. The benefit to LinkedIn is that it encourages deeper involvement with their site, furthering both the users’ investment and experience.
Guided action can be used on a more subtle level than LinkedIn. By visually emphasizing key functions, controls, and buttons, a designer can suggest and draw attention to prefered actions, much in the same way as a call-to-action is emphasized.
As you can see above, just look at how badly Spotify wants you to download them compared to, say, look at their features. Web UI Patterns 2014 has more examples of the surreptitious ways to use guided actions.
UI design elements like input controls, navigation, default settings, and guided actions are all components of a successful UI; however, it’s your choice on how you implement them. These elements are all versatile and can be used with flexibility. The decisions you make in what kind of UI design elements will affect your site’s personality as a whole, so take care in choosing which ones will appropriately represent you.
For practical advice on building web interfaces based on examples from top companies like AirBnB, Wufoo, Linkedin, and more, check out Web UI Best Practices.
Got any other advice about user interfaces? Share them in the comments.