Almost every “serious” product is using data in some way, big, not-so-big, or even smart data. So is it correct to single out some of them as “data products”? Of course, there is no right or wrong answer, but in the context of this article, such division makes sense. Here is how Simon O’Regan, data and design professional, defines them:
Data products are those whose primary objective is to use data to facilitate an end goal.
This definition marks the difference between products that use data and those that are data-focused. Do data design principles apply to the former as well? They are likely to do so, but there are also many nuances to it.
Simon O’Regan states that for data products UX, standard human-centered design principles do not apply. How is that possible? Well, it doesn’t mean that data products live by some completely opposite design rules.
Is human-centered design applicable to data products?
As a design agency, we support human-centered values, but also highly support the tailoring of design to the needs of a specific niche or target audience. There is a common conflict with human-centered design. Designers try hard to make products as easy to use as possible. Clients should be happy, right? But it’s not always the case. Take a look at this design:
There is so much going on: three graphs, numerous indicators, and just many, many numbers. Based on the principles of human-centered design, this dashboard would be considered cluttered and confusing. If it was a dashboard of a fitness tracker app, for instance, showing so much data would be a disaster for usability. Even if a fitness tracker uses lots of data, it wouldn’t show it all on the same screen.
This screen is an oil & gas drilling dashboard. It is used by professionals who need to see all these graphs and numbers to do their job. If a designer hides it behind a drop-down menu (a classic method of human-centered design), users would be annoyed and it would actually worsen user experience. That's why, as a wiseman once said:
There are products that just need complexity, and we have to understand that.
Ihor Bilyi, UI/UX designer at Eleken
At Eleken, we still think that human-centered design goes first, but it should not be used blindly. Both complex and simple designs need to respond to specific user's needs. Here are some examples of each data products’ group (we use the classification by Simon O’Regan).
Raw Data
This one is the most basic treatment of data: it is presented as it is, with almost no processing, prioritization, analysis, or special visualization. To work with this kind of product, a user is expected to have knowledge of working with data.
Raw data needs input from the user, it doesn’t present any ready solutions. Since our persona here has probably worked with massive amounts of data before, the interface can follow the best practices of “raw data” products instead of trying to be intuitively understandable for everybody.
In our practice, we’ve had a case of working with a raw data product. Reform by Slamdata is a “simple” but highly efficient software that processes data from different sources to transform it into different formats, and makes it ready to be processed at the next level: for example, by analysis software.
For this design, we placed many cards on one screen and added a preview of the table below. If it was software for users with different levels of user capacities, so having so much information on one screen might not be the best solution. However, with data products, it works perfectly. The design is still less cluttered than most of the professional software that people are used to.
Derived data
This type of data product presents data with some added information. An example can be a classic CRM software: a user can see data as they are, or sort them by additional parameters, produced by the software (hot/cold client, e.g.).
The task of the design here is to find the opportunities for the use of this derived data, and show it in a way that is more clear and visually appealing. It is likely that people who would be using this software are not professional data users and therefore need some more intuitive solutions.
This is a screen from our design for Enroly, a student engagement app. It has more functionality than just “derived data”, but the general principles are the same. We try to add some details to the table to improve user experience and make it more convenient than Excel.
Algorithms
At this stage, we can say that the product is even more algorithm-focused than data-focused. At each step further from raw data products, we shift from users’ data manipulation to automatic data processing. Following the same direction, design becomes more user-friendly (broadening the circle of potential users) and visually understandable.
Shazam is an example of an algorithm product where the data and processing are hidden: we give input and receive the result. Yet, algorithm products can look way more complex.
Let’s take a look at an example of an algorithm from Gamaya, an agricultural data analysis platform. Pictures from drones are processed to find the numberof planting gaps. In our design, we visualized gaps right on the map, separated territory into squares, and showed all the data about the selected square: percentage of gaps, sizes.
Gamaya is not solely an algorithm product. It has many functions, data sets, and options for usage. Its job is to collect data from open sources, process it, analyze it, and present it to the user in a way that helps optimize its business. And here we come to the next type.
Decision support
These products show data, analyze it, and present their analytics. Yet, the decision is to be taken by the user. We have worked with some products of this kind. In the design of decision support products, we focused mainly on the presentation of sets of data to the user, visualizing it in a way that is most comfortable to read, understand, and make those decisions.
Here is a dashboard of Tromzo, a code security app. It gathers data about all the vulnerabilities found in code and shows the situation in each repository, team, and project. We used a big font to make an accent on key numbers, such as new vulnerabilities, and percentage of repositories coverage. Green and red numbers show dynamics compared with the previous week, and the graph shows a general trend.
Like many other products, Tromzo collects data and offers a way to manage it, in this case, set workflows that fix vulnerabilities in code automatically. This is a common thing for many products: they work with data while presenting a solution to a specific problem.
Automated decision-making
These products require minimum input from the user. You can receive results without having to make any decisions. This is how all the recommendations work on YouTube Music, Netflix, and so on. Users have no impact on suggestions of films or music.
Automated drones also work on the basis of automatically processed data. The range of products can be very different, and so is their design. Compared to raw data products described above, this category would be much easier to use for people of different levels of tech capabilities.
Final thoughts
Looking back at our case studies, it seems that as soon as you start analyzing data elements of software, most products appear to be data products. That is why data products are not solely meant for the use of data scientists.
Design solutions presented in this article can be used in different products that use data, as well as in others. Whether we use human-centered principles or not, the most important is to adapt our UX design services for the needs of the product. Contact us to talk about the solution that fits your product best.
Top Stories
Principles of Pragmatic Design: Why Does Your UI/UX Need to Be Pragmatic?
UI/UX design is not about drawing pretty images and playing around with fonts just because why not. A good UI/UX design lets users interact with the product in a simple manner, while product owners can achieve their business goals without any issues. Pragmatic design is the approach that gained significant traction precisely because it keeps these goals in mind. But what exactly does pragmatic design mean?
We at Eleken pride ourselves on being a pragmatic UI/UX design agency. That's literally one of the first things you see on our website. And it's not just a fancy phrase, but rather an approach with its own philosophy and design principles. So let's talk about pragmatic design, its meaning and principles in more detail.
What is pragmatic design?
When it comes to UX/UI design, the pragmatic approach is a mindset that focuses on delivering practical solutions to users' needs, on the one hand, and business needs, on the other. A designer has a goal to create the most plain and straightforward solution which will serve everyone equally, without adding any unnecessary bells and whistles. A pragmatic designer ensures that the final product is efficient and intuitive, solves real business issues and fully meets user expectations.
Pragmatic web design, as well as UI/UX, places great emphasis on usability and functionality. Instead of chasing after fancy aesthetics or overcomplicated features, it prioritizes the core functionalities users truly need. Pragmatic approach recognizes that users come to a product or service with specific goals in mind, so it aims to support those goals in the most effective way possible.
By keeping the user at the forefront, pragmatic design minimizes the cognitive load on users and reduces friction in their interactions. It focuses on simplicity, clarity, and intuitiveness, allowing users to accomplish tasks with ease and without any confusion. A pragmatic UI/UX design considers the context of how the product or service will be used and to make sure that users can achieve their desired outcomes quickly and effortlessly.
The other side of pragmatic design solutions is that they align with business objectives. By streamlining the user experience, it enhances customer satisfaction and engagement, leading to increased conversions, loyalty, and, ultimately, business success. A pragmatic design approach acknowledges that an efficient, user-friendly interface has a direct impact on a company's bottom line, making it a worthwhile investment for any organization.
Let's not go too far for pragmatic design examples and take a look at our cases. When we worked on redesigning SEOcrawl, we did not rely on our experience and our partner's vision solely. Instead, we constantly asked SEOcrawl users for feedback each step of the way. As a result, after the UI/UX design overhaul, the product started growing twice as fast.
That's what pragmatic design is all about – making users' lives easier by hearing them out and ensuring they’ll have what they want in the simplest way possible.
But how exactly do we at Eleken do it?
Pragmatic design principles
Now that you get the gist let's talk in a bit more detail about the UI/UX design principles we adhere to.
Keep user pain points in mind
A pragmatic approach to design solves problems and helps users achieve their goals. So, before Eleken designers start working, we have to thoroughly understand the challenges and goals of our clients’ users. By empathizing with their needs, we can develop solutions that effectively address their pain points. Thanks to user research, gathering insights, and identifying user personas, we gain valuable knowledge that informs our design decisions. This principle ensures that the final product meets the specific requirements of its intended users and enables them to achieve their goals seamlessly.
For example, Ricochet360 had a months-long learning curve because the interface was too unstructured, and lacked clear visual hierarchy and clues to let users know when they entered the wrong data.
In such cases you need to design for simplicity. We hid all fields that were not vital into the "additional info," and made sure formatting, data type and required field were very clear for users at first glance. This new page looks quite simple, true. But it ensured the users no longer struggled with the task they used the product for, and that's what's important.
Test and iterate
Any pragmatic designer will pay attention to user testing and feedback. At Eleken, we strive to involve real users in the design process to collect feedback and insights. This approach helps us identify any usability issues early on and refine the design accordingly. By conducting usability tests, A/B testing, and other evaluation methods, we ensure that our designs are not only visually appealing but also intuitive, efficient, and delightful to use. Testing and iterating are crucial to creating a pragmatic UX/UI design that evolves and improves based on feedback from real people.
We've already talked about how we involved users in SEOcrawl redesign. But it's possible even when you're creating a product from scratch. For example, when we were designing an MVP for Prift, a multifunctional personal finances platform, we conducted A/B testing and went with the version the users preferred more (the second one).
Go for realism over idealism
Implementing pragmatic design means we keep our expectations and goals realistic and align with users' natural behaviors and expectations. So before embarking on a new project, we invest time in understanding how users typically interact with similar products or services. This deep exploration allows us to design solutions that feel familiar and intuitive to users, minimizing the learning curve and optimizing their experience. By avoiding overly complex or unfamiliar interactions, we create interfaces that users can navigate effortlessly, resulting in a more engaging and satisfying user experience.
Take a look at HabitSpace design. Gamification, emojis, and simple graphs ensure you know from the very first glance what this app is for and how to use it. Design is not fine art, and a pragmatic designer doesn't need to ensure their creation has a unique style or differentiates from its counterparts. They need to make sure their product is easy to use, that's all.
Be flexible
Trends change. Technologies change. User needs also change. So, in the ever-evolving digital landscape, pragmatic UX/UI design needs to be flexible and mindful of the product life cycle. By staying informed about the latest trends, keeping an eye on emerging technologies, and remaining open to incorporating new features or enhancements, we ensure that our designs remain relevant and valuable to users in the long term. But on the other hand, no design is completely future-proof. And it doesn't need to be. It just needs to have some space to grow.
This is especially important when your clients want to build an MVP product, and you create the design for it. We did that, for example, for Favorably and many other products. If everything works out well, the product will grow a long way both in terms of design and tech, and any design must recognize this.
Prioritize accessibility
Pragmatic UX/UI design puts a great stress on accessibility. We recognize the importance of creating inclusive experiences that cater to users with disabilities or unique accessibility needs. By incorporating features like proper color contrast, keyboard accessibility, screen reader compatibility, and other accessibility considerations, we aim to provide an inclusive and empowering experience for everyone.
Allowing the users to customize their primary working spaces, as we did, for example, with TextMagic, is one of the easiest ways to ensure that, for example, people with color blindness don't struggle with your product. It's a simple thing that goes a long way in ensuring customer satisfaction and loyalty.
Final thoughts
Design isn't the goal in itself. A product isn't a museum, and designers are not fine artists. Design, no matter how beautiful and pleasing, is not what users come for (except for when they are designers themselves and want to learn and/or steal adopt some ideas from you.) "Media is the message," and design is a way of communication. If you're a SaaS business owner, you should always go for a design that ensures a smooth user experience and for a designer who understands your business goals instead of the one who just wants to make things pop.
If you're looking for UI/UX design services to meet this criteria, contact us today and see how design can help you achieve your business goals.
Card UI Examples and Best Practices for Product Owners
Salesforce, Apple, Netflix, Pinterest, Twitter, Instagram, BBC. All these companies have one thing in common that you might have never noticed. They all use a card-based UI design.
Cards, cards, cards - cards are practically everywhere. Pay attention and you’ll start noticing that most of the apps and platforms these days use UI cards in one or another way.
But why are UI cards so popular and what apps and platforms will benefit most from this solution?
We at Eleken have delivered many interesting projects using UI card design and would like to share some examples and great practices with you in this article.
What is a UI card?
Cards are UI components, basically content containers. Usually, cards contain the image, title, description, call to action, and sometimes subheadings or icons. Cards are united by the same concept where each card represents one idea, item, or piece of content. Nielsen Norman Group defines a card as a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.
Card-based design is part of the modular design approach that relies on independent transformative elements. Cards in UI design refer to independent components that can be easily rearranged or customized. Nowadays it is one of the most common design layouts. And there are a few good reasons for that.
Advantages of card UI design
Thanks to the bright image element, small bits of information, easy-to-click CTAs and similar, UI cards grab users’ attention. They have better scrolling rates and bring more impact than lists.
- Highly responsive
Probably the main advantage of UI cards is that they are very adaptive. It’s the rectangular shape that makes them transformative. That is why UI cards look good on all screen sizes.
- Easy-to-understand
UI cards are rather minimalistic and understandable design elements. Small chunks of information they reveal are easy to consume.
- Intuitive and UX friendly
Most users are familiar with the card interface design and can easily navigate through it. Rectangular shape and simple clickable elements make the user experience very intuitive.
- Clickable
UI card is a perfect instrument to make clients interact with your product. Compact and well-designed cards with the right CTA make users want to click and share instantly.
- Attractive and modern-looking
Despite the fact that card-based design has been around for a decade now it is still an up-to-date design solution. Their key visual element makes it easy to make any product attractive using this layout.
Is card UI design always the best solution?
UI cards are great. Designers love them, developers love them, users love them. But is card UI design really a one-size-fits-all solution? Here’s where you need to decide. With skilled designers, cards really can make wonders for almost any web or mobile app. But there are also certain things to keep in mind:
- UI cards are less hierarchical than list layouts. They are better for browsing than for searching. So if you work with data or elements, where the order is important, it’s better to choose a more vertically structured list layout.
- Another important reason to reconsider building your website or application with UI cards is that they are used by many companies these days. Hence it’s not easy to stand out in the crowd. On the other hand, with the right visuals, card design never looks boring.
- Cards take more space, so for quick scanning of the titles the list is more effective. Same works for repetitive content. So if you need your user to go through a bigger amount of data or components where titles are more important than visuals then we recommend considering other layouts.
- Cards themselves are flexible components but only to a certain extent. In the end, it’s always the number of rectangular elements. So if you are looking for something more extravagant to express your product, it makes sense to consider other design approaches.
Best examples of card UI design
If you are considering using cards for your app or platform you could use some UI card design inspiration. We collected some examples of effectively implemented UI cards:
SaaS businesses can use UI cards as a good UI solution. Tendx, one of our recent projects, is a great example to prove this. It is a platform that connects global shippers and carriers. Eleken designers used a card-based layout for most components of this platform. UI cards represent tenders, the main element of the logistics platform.
Media - cards work great for showing brief summaries of articles, posts, and such. This is proven by such companies as Twitter, Instagram, BBC, and many others, who use UI cards for posts.
Entertainment platforms - users browse through and interact with UI cards with entertaining content. The best example here that we all know is Netflix. Pay attention to their pop-up effects.
E-commerce or delivery apps. In this case, UI cards make the process of browsing products or any similar items much easier and user-friendlier.
Task or activity managers. For this type of solution, you can display tasks or habits in a form of cards. Other elements in the app, like special offers or articles, can also be represented as UI cards.
Ed-tech products. Courses or teachers’ profiles can be reflected as cards. For instance, when working on the design of PublishXi, an online system for publishing educational content and creating learning programs, Eleken designers used UI cards to make the platform more interactive and simple to operate with.
Dashboard apps and platforms. Card ui design patterns are a great solution for products that have a lot of dashboards. The space between cards helps the user focus and not feel overwhelmed with the complexity of dashboard data.
Real estate platforms. Cards also can be a great solution for real estate platforms. Every item for purchase or rent can be reflected as a card. As a result, it simplifies the process of browsing the website.
Apps with profiles. Dating, healthcare, consulting, pet, or any other types of apps where the main element would be the profiles are the perfect match for UI cards. Pay attention to animated features our designers used to make UI card design more engaging.
Best UI card design practices
Now when you have seen some successful card-based apps and platforms, let’s find out how to make a card design that stands out:
- Images are extremely important for UI card design. They are the main grabbers of users’ attention. So keep a defined visual style, otherwise your design will look off-putting. Remember to use transparent-backgrounded images for your UI cards.
- Resolution is the key. We love cards for their responsiveness. So it’s very important not to mess it up with the wrong resolution of images. Use images for high DPI screens to avoid pixelation.
- Round the edges. Our designers recommend this trick to create more visually appealing cards and make users feel relaxed.
- Spacing is another way to shape the general look. It is recommended to leave enough space around the cards for the user’s convenience. On the other hand, no spacing at all can also look great, just like more spacious images.
- Play with the size. Adjustable size of UI cards is your opportunity to shape the general look of your digital product. You can align UI cards and let the user focus on the content, or, on the contrary, make some cards bigger than others to draw attention to them.
- Use animation. It is one of the ways to make your card UI design stand out. But be careful, too many animated elements will make your design look cluttered. One animated feature or a video instead of the main image will do.
- Use colors, shading, and effects. Without all that, cards might look boring. For example, flipping is a very natural move borrowed from playing cards. Use it wisely and remember that it looks better on smaller cards. Scrolling is a good idea for the set of cards. But avoid scrolling within one specific card, as the content might look very confusing.
- Use different card forms for different types of devices. Mobile UI card design is not the same as web card user interface. Square cards look better on mobile devices, while rectangular cards work best for web apps or sites. Take this into account when grouping cards into columns, as mobile screens require fewer columns.
- Less is more. Avoid cluttering your UI cards with too many buttons and content. Display only the most useful information and reveal more by drop-down or flipping.
Conclusion
UI cards are one of the most popular design elements, and it is no wonder. UI cards are highly adaptive and responsive, UX friendly, and easy to browse and share. Cards save your user’s attention and let them focus on the content, enjoying neat and understandable UI.
This layout can be used for almost any type of business. But it is not a universal solution. Consider list or grid layouts, if your users will work with data where order and search are important, since UI cards suit better for browsing content. But it’s worth noting that cards can be a complete solution for a whole web or mobile application in many cases, or it can reflect a specific part of it.
To build an effective UI card layout keep your UI cards simple, but never boring. Make sure that the entire card is clickable and use effects, animation, colors, shading and spacing to make your users want to interact with it.
A card-based UI is the perfect solution for many companies including SaaS businesses. Don’t hesitate to drop us a line to discuss whether UI cards can benefit your product. We are happy to hear your ideas and share our expertise.
Your email has been submitted successfully. Check your email for first article we’ve sent you.
