5 Tips for Better UI and UX Design

Do you need a workshop focused on effective UI and UX design techniques?  Email us at info@uiuxtraining.com.

better UI and UX design


UI and UX Design Tip #1: Design with Real Data

In Designing with real data author and designer Zach Johnston outlines how his team at Dropbox uses Framer X to enhance UI and UX design. Framer X, explains Johnston, is looks like other design tools but is built on React. The advantage is that anyone with React knowledge can create components for a variety of function.

At UI UX Training, we don’t push specific tools. What’s intriguing in this case is how Johnston’s team leveraged Framer X to create better UI and UX designs. For example:UI and UX design real data

  • The Dropbox design systems team created a translator component that uses the Google Translate API to convert text into over 100 languages. Designers can instantly check text to see if they’ve left enough room for localization.
  • The team has also made good use of publically available data sets by pulling in realistic avatars, interactive Google maps, and playable YouTube videos.

As Johnston explains: “The goal of pulling real or realistic data into our designs is to bring us closer to the final product. By designing with real names, real photos, and real content, we gain empathy for the people who use our final product.”

This article provides practical tips for teams for finding and importing real data into their UI and UX designs.

UI and UX Design Tip #2: Create Better Filters

Search is ubiquitous and ubiquitously frustrating. How many times do users and customers ask “Why is it so hard to find what I’m looking for?” How to craft a kickass filtering UX offers solutions in the form of filtering best practices:

ui and ux design better filters

  • Allow multiple selections—Travel sites are a good example often allowing multiple selection while some e-commerce sites do not. The author issues a useful reminder: Allowing multiple selections also works better for slower connections. It is frustrating to have the intention of selecting two or more filters, only to see the page reload painstakingly slow with each selection. Think mobile. Think slow connection on a public network.
  • Use real world language: Certainly Google has made progress on this issue by accepting searches in the form of questions with plain language. To users’ frustration, however, plain-language queries don’t’ always work on specific sites and mobile apps. In such cases, make the case for real language: Think the way someone would ask a shop assistant for a dress, or how a group of friends chooses a vacation rental home.”
  • Be redundant when displaying applied filters—After search results appears, filters often appear either in their original position or in a separate “applied filters” section. This is problematic becauseWhen users want to deselect a filter, they will look for their original position first. Not finding the filter there makes for a disconcerting experience.” Instead, the author suggests On the other hand, keeping selected filters under a separate section gives users a quick way to check currently applied filters, and an easy way to unselect multiple filters at once. This technique is sensible and based on a basic principle of UI and UX design. Provide more than one path or mechanism for finding information and completing a task.

UI and UX Design Tip #3: Focus on Flows to Achieve the Wow Factor

Alex Kreger, CEO/Founder of UX Design Agency has written a thorough and compelling case study about a cutting edge mobile banking app. UX Case Study: Simplest and Most Beautiful Banking Design in The World, As We See It.

Kreger describes the main stages and deliverables from UX research to empathy maps, journey maps, I/A, scenarios, screen flows, to high fidelity wireframes for testing. It’s a solid and useful case study for anyone working in mobile UI and UX design.

What stands out, however, is the power of the certain design features such as the simple but aesthetically clever use of light:

“Light Bank could not be called Light Bank if it didn’t follow the natural course of daylight changing into night light. You could almost call it alive. Using geo-data and timing, Light Bank automatically makes the transition from a lighter to a darker background according to the time of the day. If a user prefers one particular background, he/she can choose to set it as default and use it all the time. See the reference to design systems near the end of the article.”

The endless accounts feature is equally impressive: “Our journey starts by entering Light Bank using a Face ID verification. Then, we see the balance of our primary account, and we can swipe to view the balance of other accounts.” From there, users see a list of credit cards and then a marketplace where they can apply for any financial product. In short, the user experiences a seamless flow from the primary account balance all the way to a variety of financial products and offers.

This case study demonstrates the power of task and screen flows based on thorough research. This may sound obvious. Yet a virtual stroll through a few mobile apps makes it abundantly clear that many are based on little more than guesswork and bells and whistles. Read this article closely; you’ll be glad you did.

UI and UX Design Tip #4: Small Changes Lead to Big Impact

As the previous Light Bank study demonstrates, appearance is important: “38% of visitors will disengage from your website fairly quickly if they do not like the layout or design of it,” explains Les Kollegian in How To Create Emotionally Rewarding UX Designs.

Pay attention to the impact of small changes in flow and page design, advises Kollegian who reports that simply changing a CTA button to yellow increased Moz’s conversions by 187%.

While conversion rates and A/B testing are not new, the underlying point merits emphasis. Pay attention to every aspect of design from color, to contrast, to white space, to micro-interactions. For example, it’s often wise to reserve one color for CTAs on your website and avoid using that color for anything else

UI and UX Design Tip #5: Deliver a Personalized Experience

In Design to Convert: 5 Ways to Improve eCommerce Conversion, author Rachel Bodony begins in a similar with a gentle reminder that white space is the antithesis of overcrowded web space.

The key to successful e-commerce conversion, however, is to deliver a personalized and curated experience. While standard promotional videos with real people using products are a good start, Bodony advises introducing stories to create emotional relevance. She cites fashion store Anthropologie’s featuring spring dresses in an emotional video campaign for Mother’s Day: “They chose various mothers with interesting stories and made an accompanying video titled ‘A Story of Her.’”

In short, emotion turns an average web site visit into an engaging and memorable experience.

Contact UI UX Training

Do you need a workshop focused on effective UI and UX design techniques?  Email us at info@uiuxtraining.com.