Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Developing Effective UI/UX Designs

DZone's Guide to

Developing Effective UI/UX Designs

In this article, a lead developer discusses the importance of UI/UX design and the role it plays in front-end web development.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

I wanted to get some expert advice, so I turned to our head of development, Tahir Malik, and asked him about UI/UX. Here’s how my conversation went.

Q. What’s going on in the development world – what can improve?

A. Over the years, I’ve worked with many developers in various capacities. The one thing I've found common in most of them is their lack of awareness when it comes to UI/UX. One can't really blame them though. With an ever-changing landscape of new technologies emerging ever so often, there is simply just too much to stay up-to-date on. The scenarios make it virtually impossible to be a hardcore developer with the psychological insight into user experience as well.

Q. So why do you think this hasn’t been addressed?

A. Larger organizations enjoy the benefit of having dedicated team members looking into customer patterns and behaviors according to which recommendations are provided to the developers for the design of an effective user interface. Smaller players that rely on fewer resources want their employees taking on multiple responsibilities, and thus lack a very detailed comprehension of customer interface utility requirements. Unfortunately, in the real world, most developers belong to the latter category.

Based on our conversation, I asked Tahir to lay down some basic concepts that developers can bring into practice to improve UI and UX. The following are his guidelines for UX/UI design:

Get out of your comfort zone

A lot of times when developers build user interfaces, they design them based on the backend implementation that will go into its development: their database structure, their code workflow, and their understanding of certain technologies. While this concept and manner of interface design is not inappropriate, focusing too much on backend implementation often results in a product that is easy to develop, but may not necessarily be very user-friendly.

Think backwards. Think what's best for the user, and then hone your skills to develop that workflow. This will not only improve UX but will also enhance your ability to understand user requirements.

Consistency is key

Be consistent. What I mean here is, keep the layout of your application consistent throughout. For instance, use the same style of tables, graphs, buttons, etc. throughout the site. Maintain a repository of all common UI elements used within the application at a central location that is accessible to all developers. This can be just plain HTML/CSS and JavaScript and should provide a visual layout of your site in a nutshell. Use the repository to borrow any component needed for a new or existing page instead of creating a new one from scratch. This will make your life as a developer a whole lot easier, and make your application far more consistent.

Size and color do matter

It is imperative that you use different font sizes and color codes to highlight various UI elements throughout your pages. Your interface shall allow the user to focus on what is most important for them.

Over communication is better

When designing layouts, it's good to be over-communicative. Always show information messages, warnings, and errors in detail. Using various UI elements to communicate clear messages, along with logically systematic steps, make it possible to do away with user frustration.

For instance, if you have a complex password policy, you should explicitly place an information message, next to the password field, and, possibly, show a visual indication of the missing elements in the password, if the one entered by the user is insufficient.

Keep it simple

Refrain from obstructing user interaction with your application with needless fancy elements. Use them only when absolutely necessary and when you want the user to focus on a specific action/area of your application. Keep the UI simple and let the users do what they are there for.

Don't reinvent the wheel

Your users are likely using several other applications such as Gmail, Facebook, and Twitter on a daily basis. Leverage existing UI patterns and language used by these platforms and adapt them to your application to make your users more comfortable. Experimentation is good and recommended, but doing too much of it may result in user rebuke.

Assumption: the mother of all mess ups

Not everyone knows your application like you do. It is better to handle and validate as many user inputs as possible, and never assume that your users will always interact with your application as you think they will. They are bound to make mistakes. Give them clear messages on incorrect input, and guide them through till they have provided with what you require.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
user interface design ,web dev ,web application development ,front end development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}