UI/UX

Do’s and Don’ts of UI/UX Design

So, What are the Do’s and Don’ts of UI/UX Design?

Great User Interface/User experience (UI/UX) is like the user experience you get when going to a grocery store. You want a pleasant time without any hassle. You want to be able to navigate the store, get what you need right away, head to the checkout line without a wait, and get back home.

You don’t want to deal with a slow cashier, items not where they should be or out of stock, hostile employees, or a cramped parking lot. You want what you came for (groceries) and be on your way.

Stores understand this and have spent a considerable amount of time and money to help you browse the shop easier. They make sure things you want are in stock, to provide fast and friendly checkout lines.

It may seem a bit corny to think of UX design with going to your local supermarket, but the experiences are similar. Our customers are visitors to the sites we create, and the grocery stores are the content in which they came to the site for.

The Do’s

Consistent Experience

An e-commerce shop can be accessed from a variety of devices ranging from traditional desktop screens to smaller smartphones. However, it is necessary that the experience remains consistent throughout. A user graduating from desktop environment to a smartphone screen should be able to browse with the same intuitiveness.

Recognizable navigation

Adding to the above point, it is necessary that users understand the layout of the online marketplace, regardless of the device. This would allow them faster access to the required content/product/service.

Ensure all links and buttons function as they should

It’s pretty frustrating to look for an item at the store you want for dinner, but it’s out of stock in the grocery store. Users of your website or application feel the exact same way when they click on a broken link or on a visual element that looks like a button but isn’t clickable.

When visitors are searching for content, they expect every link to take them where it says it will and without a 404 error they weren’t expecting. Visual elements which look like they are links or buttons, but aren’t clickable can also frustrate users and may cause them to leave the website.

Navigation

  • Place navigation in the same places throughout a website/program
  • Place navigation where users expect to see it (top/left, next buttons bottom-right, etc)
  • Place relevant navigation close to its content
  • Group navigation by appropriate themes/topics/actions
  • Keep navigation simple and relevant to the user
  • Use descriptive links
  • Highlight important/relevant links over others on page (eg, submit buttons)

Always Put Your Code to the Test

As part of any testing process, designers make sure that their interactive layout will work across many browsers. Unfortunately, we do not test our layout components by using them as a normal user would. You’d be surprised how we use our own websites. Users vary in their behavior and viewing setups, so don’t be reluctant to use your layout in different ways and with different set ups.

By trying to break your JavaScript, you could come across bugs which you didn’t notice before, which will lead you to create a stable and more solid user experience. Coming across a component that appears to be broken or not functioning will often make users lose trust in the website as a whole.

The Don’ts

Don’t Leave Users in the Dark

Most if not all jQuery is fired through events from the user, whether it’s loading new content, posting forms or modifying the presentation of an item. Such occasions are fired through a click from the user.

While as designers and developers, would know that something is happening. Without a visual representation, the user is left guessing what is going on. If the user clicks an element and nothing occurs immediately, they could wonder whether the page is broken or they have done something wrong.

But by displaying a message or loading graphic for the user, they’re assured that something is occurring and that their action will be completed shortly.

Don’t add jQuery At the User’s Expense

Adding too many interactive components can make the user unable to decide what to do or how to find what they require.

When building your site, restrict the number of controls to those that will help the user achieve their goal. By restricting choice, you create a much more effective user experience.

Don’t make your visitors wait for your content to load

The attention spans and patience of Web users are small, so when they have to wait for your site to load, they will become frustrated and likely leave your website if it doesn’t load fast enough for them.

With your site, keep in mind the impacts of your design choices on the web site’s loading time. Large images, lots of jQuery and animations, and loading resources from third party sites hurt your site’s load time. Optimization and key design decisions that reduce website loading time will help keep your visitors on your website.

Don’t place irrelevant ads across your page

If you’re going to try and make money from your website/blog, do yourself a favor and lay off the excessive advertisements. In case your page loads and has 70% advertising and only 30% content, odds are high that people will leave and never come back. Making your ads the #1 priority is a bad idea. Try blending them in and making sure they don’t take away from the content.

Design success

UI designers face a hefty challenge. Not only are they charged with designing components which work well for the program (or platform), they must do so while not making things too complicated or abstract for the end user. Ubuntu has faced this challenge over the last year and Microsoft is about to see just what Canonical went through.