Developing Effective UI/UX Designs
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.
Join the DZone community and get the full member experience.Join For Free
Learn how to add document editing and viewing to your web app on .Net (C#), Node.JS, Java, PHP, Ruby, etc.
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
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.
Opinions expressed by DZone contributors are their own.