/ Technical

UI & UX - Guidelines and thoughts

User Interface & User Experience are crucial parts of any new application that wants to hit the market. We strongly believe that the key factors that can put us in front of our competitors are quality design and quality user interactions.

In a world flooded with content and distractions, first impression is hugely important. Studies show that if the users don't find the experience intuitive and straight forward at first glance, they probably won't come back. A Google research found 26% of all installed apps are used no more than once. The main reason for this is poor UI.

It can be too late

The phrase “it’s never too late” doesn’t relate to making a good first impression. You are at risk to lose users if they don’t like the app’s UI at first glance. That’s why user interface is getting so important. It’s literally the first thing users see even before they start interacting with a product.

The importance of good UI

We want our users to feel good while using our app, we want to spread the good vibes. Quality design improves mood, increases trustability and facilitates the use. Multiple studies show that colors affect our mood. This way one color palette can make our users enthusiastic and agitated, while another one can make them feel calm, relaxed and content.

Great-looking and well polished designs gain users’ trust. It’s a matter of subconscious that tells that if a company pays attention to the appearance of its website or mobile app —> their products/services are good as well.

Not just UI

UI trends are intended not only to satisfy users’ aesthetic requirements, but provide them with the high level of usability. UI should be effective, not only beautiful, so the focus should also be on UX. Good UI should feel invisible, the user should be able to seamlessly use the functionalities in a natural manner, without being distracted by a cluttered UI. It should be simple and intuitive combined with a natural and "human like interaction", a personalized experience. Cognitive load should be reduced by progressive disclosure of information, which provides a comprehensive interface.

Once we've established the goals, I propose a set of aggregated guidelines for 2018/2019.

1. Always declutter

We should remove irrelevant information (noise) and prioritize relevant information (signal) by putting content first and elaborating clear visual language. Don't use buttons, icons or images just because "they look good". They don't. They just increase the confusion and cognitive load for the user.

By cluttering your interface, you overload users with too much information: every added button, image, icon makes the screen more complicated.

2. Celebrate success

When users correctly perform certain actions, celebrate with them, make them feel good about their achievement. This can be implemented by displaying "success" animations or even "success" screens/pages.

This is a great opportunity to create a positive emotional connection between users and your product. We should let our users know that they are doing great by acknowledging their progress and introducing success states.

3. Gamification

In order to attract early adopters and potential heavy users (who are very familiar with apps), an application must engage users' playful and competitive spirit, by adding bonuses, onboarding rewards, rankings, badges or other game theory psychological concepts.

4. Divide and... minimize cognitive load

Users shouldn't encounter friction and confusion when interacting with an app. The experience should be clear. The design should look minimalistic, so if it has a lot of elements on one screen/page, we should think about what's really essential.

If a task contains a lot of steps and actions required from the user’s side, it’s better to divide such task into a number of subtasks. One example is progressive campaign creation flow in GoHelpFund app. Instead of asking for all the needed information at once, in a screen filled with lots of input fields, we decided to split the onboarding and campaign creation flows into several smaller steps, which provides decluttering and progressive disclosure.

5. Personalization, individualization

The goal here is to connect with users and provide the information they need in a way that feels genuine. Everybody wants to feel special and we should strive to display relevant information for that particular user, using the data we already have about him (age, gender, location, preferences etc).

An example would be displaying trending campaigns based on the current geographical location of the user.

6. Humanization

When people use digital products, they expect to interact with them as they would normally do with each other. In other words, humanization of digital experiences should make users feel like they interact with a person, not a machine.

To bring positive emotions using the design, we can use happy colors for your interface, attractive faces on images, and try to make things look playful.

7. Minimalism vs nonconformism

Flat minimalism has taught us to recognize and appreciate visual hierarchy and clean UX. That would have been impossible if the vibrancy of certain elements stood out. However, sometimes you need things to stand out. People no longer hide their opinions and are more outspoken than ever. By adding vibrance to the functional mobile UIs, designers can reinvigorate the existing experiences and access new levels of rebellious empathy we have for vivid burning colors.

On the other hand, this year’s UI trends say no to bright colors and give preference to calm color pastel. This makes the application look refined and cool. Natural styles, shapes and curves are perceived by people quite simply and comfortably. Modern people, who value their own time, like functionality. Often this factor is even more important to them than the beauty and brightness of the design.

It depends of the business area that the app targets, but in the case of humanitarian fundraising app, a minimalistic approach is more soothing. That's why we decided to leave the extravagance for now and focus more on simplicity, convenience and functionality.

8. Consistency vs variability

If there is a considerable boost of stability in the components designed within one design system, what they might lack on a wider scale is variability. Reusing the same components in different combinations is good for scalability, speed, and functional aspects of mobile apps, but they don’t amuse.

A set of guidelines and principles can create consistent, quality, and delightful design of various directions. However, we have to keep in mind that we want to avoid the layout from becoming repetitive, we have to be consistent in our variability. We have to avoid boredom by engaging user with new UI & UX elements in a consistent way, without confusing him.

9. Typography

Font size and style can create a visual hierarchy without layering and cluttering the UIs with visual elements and similar captions. Big headlines and gigantic fonts in combination with smooth animation are in trend this year.

Special attention should be paid to the font. It should combine aesthetics and functionality. The good usage of fonts can look eye-catching even without any content at all.

10. Separation of concerns

We should try to prioritize one primary action per one screen. This will make the interface both easier to learn and easier to use.

We should use visual weight to prioritize important elements (such as contrasting color for primary action buttons). An example is the donate button from Campaign Details page, which definitely stands out.

11. Obvious navigation

We should try avoid hidden navigation such as gesture-driven because most users will have a hard time finding it. On the other hand, if we give hints of gestures through animations, the user might like and learn them.

In order to avoid confusing or disorienting the users, we should get rid of the hidden menus on individual pages. The user should clearly know their location inside the app at any point and how to get to the desired location.

12. Static & interactive elements

Designed elements should look like how they behave. A mobile UI needs to clearly communicate what elements are interactive and what elements are static.

This can be achieved either by using intuitive icons that indicate motion or by using descriptive animations.

13. Finger-friendly tap targets and the thumb zone

When you’re designing actionable elements in mobile interfaces, it’s vital to make targets big enough so that they’re easy for users to tap. Designing for thumbs isn’t only about making targets big enough, it’s also about considering the way we hold our devices.

14. Think about interruptions

Users are constantly distracted by other applications (especially social media) or by the real world, so we should make it easier for users to re-engage with an app when they return to it after the interruption.

Twitter is one good example of design for interruption. The app’s notification screen shows all recent notifications. As long as the user stays on this screen, the app doesn’t update the list automatically – it simply shows a status “X new notification” at the top of the list. This allows users not to lose their current position when they re-engage with the app after some period of time.

15. “Zero States” and error handling

Nothing in the app should be a dead end. When a screen is empty or an error occures, we should present an error message that is readable, helpful, concise, polite, and instructive. We should clearly mention what went wrong and possibly why and what’s the next step the user should take to fix the error. We should provide links to the next thing he can do, and also consider a “first-use” empty state as part of a cohesive onboarding experience.

For example, let's say the user has problem logging in. Instead of telling him that his credentials are wrong, we should tell him which one is wrong. If the username is wrong, if it's not the email that he logged in before, if it's the password that's mismatching. We should remind the users when they are typing in an old password. We should let them know they have changed it. Instead of telling them “wrong password” tell them “you have changed the password on ….” so that they can remember it.

16. Animations

We should use functional animations to improve interactions. Animation solves a lot of functional problems within interfaces while making them  feel alive and genuinely responsive. When an app is busy doing something, you should let a user know that the app isn’t frozen by surfacing system status. Visual signs of progress give users a sense of control over the app.

Animated micro-interactions, which provide context to every process the user is involved into, are the visual keys that trigger amusement.

Animation can’t exist for the sake of animation. For every action, we are naturally used to receiving a response that is proportionate to the force and intensity of our input. If the output exceeds the input, we subconsciously feel the imbalance, resulting in the lack of relevance and further compromised delight that the animation was supposed to bring.

Simply put, beware the over-animation of things that don’t have to be animated.

17. Visual feedback

In the physical world, objects respond to our interactions. People expect a similar level of responsiveness from the digital UI controls. Good visual feedback makes interaction comfortable for users. All interactive elements (such as buttons) should provide perfect visual feedback.

18. Grid vs complex layers

Grid based layouts use simple geometric shapes to provide a visual order for your content, and keep navigation simple.

Geometric layers are an evolution of simple grid design. They go beyond boxes and rectangles, and play with more complex shapes, such as polygons, triangles, circles, and more.

The edges of modern mobile devices are rounded. This trend is obvious. It imposes on the UI-design some restrictions that prevent the use of elements with sharp edges. Rounding edges and smooth lines are typical not only for mobile applications, but also for the web design industry as a whole. That’s why this trend will also be one of the best web design trends next year.

19. Custom illustrations

They allow websites to get a unique style which in turn bring a better experience to users, while keeping a playful and human atmosphere.

20. Gradients

They become more and more popular and they look awesome, especially combined with smooth transitions from one gradient to another during a certain action. A good example of their usage are found on Symmod and Spotify websites.

21. Video

This type of content gains traction and becomes even more important than photos or texts. Hubspot found that over 78% of people watch online videos every week, while 55% of people watch online videos every day.

The videos we use should be of the same tone as the website, so they could complement each other.

For example, in our platform the videos will be focused on showing kindness and generating empathy. They will be used when creating a campaign but also while updating the progress on how the money are spent and proving they help people in need.

22. The overlapping effect

A variety of elements can overlap each other. This can be fonts, colors, images, causing the interface to become more interesting and eye-catching. A sense of space is created that increases the comfort of using one or another application.

23. Amount and proportions

The design techniques to highlight the visual elements and create a beautiful hierarchy are: chose proportions carefully, use light shadows and use the correct angles. These tiny details can make a huge difference.

24. Multichannel experience

Mobile users usually browse an e-commerce website on mobile, then switch to desktop to purchase. That transition needs to feel invisible. The context change between web, desktop and mobile should feel frictionless and natural, without interruptions.

Netflix or Audible are good examples for keeping and displaying your progress throughout their services.

25. Don't make users wait!

The interstitial anxiety has increased a lot in the last years so it's important to optimize the project in a way depriving it of the high latency between actions. In other way, users will experience a brief anxiety that can confuse them.

For example, when the user performs certain actions like clicking or tapping a button or while waiting for a response, we can turn this anxiety into an advantage and concentrate its peculiarities to create beautiful transitions between elements or present relevant animations.

26. Personal details and privacy

Before asking your users to give up their personal details, ensure to provide them with the “why”. Why they need to sign up and what they get in return?

Identify what your user wants, communicate clearly the value you provide and how it aligns with what your customer is looking for. Be clear and concise in your messaging and let them know the value of signing up and how it helps them.

Your user may be looking for personalized data, or to be in the loop always, or to get mobile-only discounts for a purchase. Whatever it is, make it clear, make it pop out so that your customer understands the value exchange properly and not feel short-changed.

In the Go Help Fund app, we're clearly explaining that we need the users' location in order to create the campaign in that particular geographical area.

27. Measure!

Last but definitely not least, a good design should have metrics and analytics integrated. We should constantly iterate, measure and analyze everything.

Metrics are crucial when checking if a certain feature is successful and in figuring out where it needs improvement. We should define an activation metric and get serious about tracking the inputs to that metric.

Another great way of taking feedback and adjusting accordingly is by using A/B Testing, but that's for another blog article...

UI & UX - Guidelines and thoughts
Share this

Subscribe to GoHelpFund Blog