User Experience (UX) refers to a person's emotions and attitudes about using a particular product, system or service. It includes the practical, experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership. - Wikipedia
Essentially, user experience development is designing an interface with keeping user's perspective in mind. But, people often confuse UI with UX. UI is what makes the system look beautiful, and UX is what makes the system useful. In a typical system, UX drives the UI, and it is the science behind the visuals. It also keeps the user connected with the system.
Before we discuss how to improve UX, let's look at the process of developing the UX for a system. Usually, it has the following flow -
- Identify system objectives and user requirements - Before starting any development, a developer must understand critical goals and what the system aims to achieve. Along with that, clarity of end-user needs is also essential.
- Define system constraints - After identifying system objectives and requirements one must apply various parameters such as time, budget, team, accessibility and other factors that affect the system to define the scope of the system. We must keep in mind that, this is an iterative process so we may not achieve success in the first few tries. We must also make sure that these constraints are well documented.
- Build user flows - Now that we have defined and documented the scope, we need to decide how the end-user is going to interact with the system. A simple way to do that is to build user flows. These user-flows should consider as many use-cases as possible.The simplest way to define user-flows is by using flow diagrams.
- System interface and information design - By creating user flow diagrams, we have created different patterns for our end users regarding usability. In short, we have defined the intended behavior of our end-user. Now, it's time to bring structure to our system regarding looks. We should decide the placements of elements on the system interface in such a way it requires the least amount of effort to access it. This is ultimately going to help us validate our user flows. We can further cement our validation by creating multiple wireframes and mockups.
-
Build graphic or visual design - Creating graphical or visual design is a process where UI and UX development work together. This is the step where we will add different flavors to make it relishing. When I say flavor I mean, color palettes, themes, templates, images, typefaces, icons, typographical elements, interactive patterns and many more things. Each and every flavor is going to play a vital role in beautifying the system interface. This is where the system will start looking more alive.
Till now everything was pretty much pedantic, let's make it more exciting and dive into the meaty parts of improving user experience!
- Wireframe, mockups and design libraries/frameworks - We have already discussed the advantages of creating wireframes and mockups. We can use wireframe.cc, mockflows, moqup.com for creating wireframes. There are many design frameworks available in the market like Bootstrap. Using such a framework is going to provide significant support to create a template system. Choosing the right and customizable framework is the key.
- Right color combinations - Use eye-catching colors to enhance UX of your interfaces. Good designers use a few theories about colors patterns to make things look good. They usually a follow 60-30-10% color-ratio, which gives balance to the color scheme. Where 60% is the dominant color, 30% is the secondary color, and 10% is for accent color. Check this link, for further details. Color combinations should depend on for how long user is going to use the system. For example, if your user is going to use the system for all day long, then it’s a good thing to have light background and dark text. For visualizing and using right color combinations check out different websites like colors.adobe, coolors, colorcombos.
- Prioritize data - If you have a significant amount of data to be displayed on the system interface, then prioritize your system requests. You don't want lower priority data to be presented first. It might not affect the users with high-speed internet, but what about those with a slower connectivity? A simple example can be seen on social networking sites like Facebook. If you notice, Facebook always loads the posts/feeds first as it’s their primary information. Other data like Birthdays, Events and Ads are displayed after the posts are rendered.
- Build a guidance system and documentation - It’s good to have system-related information on the go. Create links for system documentation to explain more about various features. Add FAQs and have a feedback system. Add tooltips and guideline tours wherever needed. Adding social media links can benefit you in multiple ways. You might want to take different surveys from end users, by keeping them interactive, they’ll make end user feel being a part of the system.
- Discussions or team communication - Have conversations with your UX development team about design patterns, implementation strategies, use cases and user flow. Team discussions often bring new ideas to the table and may also spot a few use-cases missed during the planning.
So, whatever we have discussed right now are baby steps that may help you in the long run. And It’s worth to bring these vital elements to the system development process. It is going to save a lot of time, effort and possibly, even money. So now that we’ve discussed a few Dos, it’s time to look at a few Don’ts. These are the typical mistakes which to avoid while developing a system interface.
- Avoid dark background with light colored text. Imagine yourself, reading a book, with black pages and white text. That is going to be really scary for your eyes.
- Try to avoid page reloads.
- Also, avoid requesting too much information. Isn't that boring to fill out lengthy forms while we sign up? It irritates me when the system keeps asking me more birthday, addresses, etc. This might be valuable information, but you can take that later too.
- Earlier I mentioned about the importance of user feedback for your app, but we should also ensure that we don’t overuse reviews. For, e.g., asking input in first few days of his/her usage makes no sense. Define your medium for asking reviews, it can be in-app forms or email surveys. Google forms can be a good option. Often, asking reviews from regular users and power users we can get some valuable feedback.
- Avoid too many notifications and ads which are blocking the page content.
- Avoid grainy and low-quality images.
- Avoid too much scrolling unless necessary - If your page content is vast then instead of a scroll, add navigation buttons on the design or implement special navigation panel for that.
- Avoid displaying repetitive information on the same page. Use precise, short and simple text. Avoid negative statements from your content. Ex, Instead of ‘user is unavailable today,’ you can say ‘user is on leave today.’ Use the services of a copy-writer or online grammar checking tools, like Grammarly, to keep your content grammatically clean.
So these are the few things which we experienced while working on different products at work. We noticed that by adopting these points made a positive impact on the overall user experience of our products, But this is by no means an exhaustive list, and I’d be glad to know more opinions from the community.
What else do you think can a developer do to enhance a User Experience? Leave a comment!
Reference links and further readings -
- UX Smells - link
- Better Stakeholder Interviews - link
- Four Reasons Users Uninstall Apps - link
- Pattern Libraries - link
- How to teach yourself UX design link
- User onboarding tools - link
Special thanks to, Shaunak. For helping me write this blog.
Top comments (4)
Hi Chinmay, thank you a lot for your arcticle! I’m a musician turned developer with no particular gift for visual things, but I’ve been trying for some years now, and besides having made solid improvements I’m still unable to make a UI I can seriously consider deploying.
I’ve read your tips and they’re going to be very helpful, but if you don’t mind, I’m going to ask you, what about images, both fore and background? Or shapes? Is there some guideline to using them, for those ungifted such as myself?
What usually happens is that my designs tend to be safe and boring, without much clutter but really visually unappealing.
I’m going to try this 60 - 30 - 10 rule, it should help using these sites for picking up colors. Any special guidance on where should these three layers be? Such as 60 for the main content, 30 for headers and such, 10 for content which needs to stand out.
Last but not least, I tend to use a single sans-serif font through the design, with some different sizes, is there some safe rule to use a little more than that?
Sorry for asking so many questions, and thanks a lot for your arcticle, going to read it some more times with the app I’m making in front of me. It caught me in a very proper time as I’m about to design the landing page for the app and am approaching alpha deployment stage. Before probably hiring a pro designer, eventually, of course, rs, but I’d really like to keep costs to a minimum in the MVP fase and have an acceptable design for the first users to try on.
Hello Tomaz! Thanks a lot for reading out my blog. And wow, musician plus a developer. That's the rare combination of talent.
I have not emphasized images and backgrounds much, but here are some things I would like to suggest you.
Try to avoid grainy and low-quality images. Validate color combination of your Images and the application. They should match or completely contradict the overall color pattern. They should go with the flow unless you want them to stand out of the design. You might want to use images with dull background and bright text, for your landing page. Or add a hue-effect on the image to make it look rich.
Keeping color patterns in the ratio of 60-30-10% helps a lot. That gives your page a uniformity. Check out this blog, color patterns are well explained here.
In your application, you can divide color combinations into three layers, such as your App menu (30%), primary content (60%), and the information which should stand out (10%). According to your needs and the design, you can generate color themes online using different tools. The best way to learn to create stunning color schemes is to practice and play with colors.
There are no defined rules for using fonts on your page. You can use multiple fonts in combination or a particular font throughout the page.
For example, your brand title and brand-related information might have cursive fonts, and the other page content might be in a regular font. Check out genius.com. They have used different fonts for their brand icon and the page content. Personally, I use Google fonts. Check them out here.
If you want to learn more about design patterns and libraries, then I would recommend you to have a look at this blog post. This might help you design your application and a perfect landing page.
People like you and me, have to play with the design until the end-user feels satisfied. Once we know how to tweak the design patterns, then nothing like it.
These are really great suggestions Chinmay, thank you very much! I really lung for the day I’ll be able to find real pleasure designing things, knowing I might be happy with the result. But I care for it enough to keep pushing till I get there.
I think initiatives like your post are really important because the more developers are design-aware, the better... Design is intrinsically related to user experience and usability, and I’ve already seen my share of developers who are frustrated by the fact that users can’t use properly the features they’ve so carefully coded due to really bad developer-made design decisions.
That’s not to mention that code design itself is a important thing as well, and the importance to write code that looks good and is easy to understand visually.
I’ll thank you once again and when I finally get to finish this first phase of my app (it’s my first app actually!) I’ll come back here to share this part of the experience.
Designing a good UI/UX is an iterative process. It'll mature after every UAT phase.
I know you will develop a kickass application and amazing UX. I will be glad to hear your development experience. Happy coding!