Your UI/UX Cheat Sheet

by Sarah Thuet | Last Updated: Jun 11, 2018

UI and UX–user interface and user experience. As marketers, we know the importance of these two concepts when it comes to providing a stellar mobile experience. A lot of the time, we’re tasked with coming up with UI/UX concepts and handing them over to the technical powers-that-be for execution and finalization. There’s a lot that goes into these two concepts, which is why I wanted to put together a quick-start guide to UI/UX principles to help get your entire team on-board with a mobile-first mindset for your next mobile project. But...let’s not get ahead of ourselves. I’ll be the first to admit that I sometimes get these two concepts a little jumbled. Let’s start by really getting these two terms straight–they are some of the most misused and confused concepts in tech today. User Experience Design is a human-first way of designing. It focuses on enhancing the user’s view of the product–in this case the mobile page–by improving usability, ease of use, and pleasure following an interaction with the page. Think of this as the user’s experience on the page. User Interface Design is the process that controls how the user and the system interact–specifically, transferring the brand’s information and messages and creating an attractive, guiding and responsive experience. Think of this as the physical elements or design of the page. Ultimately, both UI and UX are necessary for an ideal mobile site or application. And striking a balance isn’t always easy! Something that is aesthetically pleasing but impossible to use is knocking it out of the ballpark in the UI category, but failing miserably in UX. Fear not, I’ve compiled a short list of UI/UX basics to help you achieve a mobile experience your customers are sure to enjoy. Color Color can communicate a message without using any words; therefore, you must decide the personality you want the platform to take on. For example, neutrals present a more sleek, elegant and polished message while brighter colors present a much more upbeat and energetic message. When it comes to picking a color palette for a mobile experience, less is more: pick a palette and stick to it. Follow the 6:3:1 rule: the 60% + 30% + 10% principle is the best proportion to reach balance among colors–creating a neat, harmonious interface that brings pleasure to the users while guiding users' eye naturally from one point to the next. Lastly, color can serve as a differentiator. By making a specific button or portion of the screen a different color, it will bring the viewer’s attention naturally in that direction. Navigation Creating a mobile experience that is appealing to the eye is the first step, but that only goes so far. If a user cannot figure out how to get from one place to another or find what they are looking for on your page, then you’re going to lose them. To combat losing users because of poor navigation abilities, keep these mobile navigation best practices in mind:

Navigation bars are your best friend. Due to serial position effect, users are prone to remember the first thing and the last thing in a series–therefore, hamburger menus are being ditched and static bars on the top of bottom of the page are taking over. This type of navigation bar not only allows your user to return to the home page at any point, it also allows you to integrate search into something that is visible and accessible on every page.
Don’t overlook fonts and contrast. You users should never have to zoom to see what the page says–no matter what type of device they are viewing it on. In addition, the type of fonts and theme you create will differ based on the demographic you are trying to reach–not all margins, fonts, captioning, and style choices communicate the same message even if the text is identical.
Build the page for touch. Users are notoriously terrible at clicking exactly where they want on a page, and this frustration is echoed even louder when on mobile (smaller screen=more need for precision). Be sure to be spatially thoughtful when designing so that users are not frustrated when trying to click a button or scroll to the next page. In addition, think about incorporating a feedback component when users touch a part of the page (think: color change, blinking, font change etc.) so that they are aware of what they’re about to see.

Animation There was a time when animation was viewed as more of a visual luxury–but in today’s mobile world, animation is seen as a functional requirement from users. Animation can function in many different ways–but here are a few to get you started:

Up-to-date system status: Everyone hates waiting, that’s just a fact. Fifty-three percent of mobile users leave a page if it takes more than three seconds to load. To try and avoid user frustration, use animation to indicate to users that there is background work going and and their task will be completed soon. Take the Round app for example: while the content is loading, the screen fills with a creative and animated designs to keep the user not only updated on the status but also entertained.
Visual Feedback: When users are completing an action, they want to see results For example, if a user is paying for something, the “pay” button should respond along the way. By changing the color from blue to green or changing the text from pay to a simple check mark, the user knows the payment has gone through.

To users, UI and UX seem like they are just part of the package–but everything that happens on a web page is intentional and carefully planned. It’s important to take the time to create a highly user-friendly site–or risk losing users altogether.

Your UI/UX Cheat Sheet

See Lumavate in Action

Meet with one of our experts to see how easy it is to centralize your product data, manage digital assets, and create digital product experiences. Trust us…you’re going to be wowed.