Imagine you are a host of a party meeting awaited guests. You want to make the best impression possible and get many useful connections, so you thought out all the details and did your best to ensure everybody enjoyed the party. Apply the same situation to your website. Is your “home” ready to provide people a smooth and delightful experience? Have you taken care of your visitors the way they want to keep on collaborating with your business? Are you sure you did everything possible to help users take an expected action?
If you are wondering what is the relation between all said and the UX design, I would say - direct. The same as you decorate your house and make necessary arrangements to host a party, prepare your website or app to meet the customers through a well-thought and friendly user interface. Our skilled designers would prove that, besides creativity, a user-centered design should adhere to the fundamental UI/UX design rules to help a company achieve business goals.
This article gathered nine user interface design principles that will nudge your website guests to leave you their visit (read - credit) card details and push “purchase”.
So, let’s figure out what makes UI design good.
Principle 1: Meet users needs
In other words, the main principle you should build your design around sounds like “put the user first.” UI/UX design is customer-centered, meaning you need to consider whether your design satisfies customers’ needs and helps users achieve their goals. It’s crucial to walk in customers’ shoes and understand what they’re looking for when interacting with your website or app.
A UX designer and a design director of Mailprotector Jeremy Nigh said that the “U” in UX doesn’t mean “You” but “User”. Whatever excellent you think your design is, the actual customers may feel the opposite. Try looking impartially and reveal through UX research and UX audit what your customers really need.
As UX design’s primary purpose is to help users solve their problems, usability is one of the paramount user experience principles. Each design element, be it an icon, button, or image, should have a meaning and lead to a specific action you want users to take. Then it will be a good decision to run usability tests during the prototyping phase, long before your product goes live.
When designing, it’s also important to take into consideration the user’s context. It’s the location where a customer interacts with the design, the device, time, emotional state, and other people influencing the customer’s behavior.
Principle 2: Speak customers language
The statement above refers to both words and visuals we use in a product’s interface. Take for granted that nobody will spend extra time on guessing what an author (you) wanted to say with niche jargon or technical terms only your developers can get the point.
You should avoid (or at least reduce) ambiguity in UX-copywriting and graphic elements.
Here are some tips on how to make your design language readable and understandable:
- Define who your audience is - what they need, what they’re searching for, and what goals they want to achieve by interacting with your product
- Build your design template focusing on the typography, page layout, and infographics
- Choose communication style and tone of voice your audience would better accept
The system should speak a real-life language. Just imagine how often you answer “OK” when somebody asks you “Are you sure?” Not often, right? The most common reply would be “Yes”. Then, use it in your system messages’ copy.
Visual metaphors should also correspond to real-world experience. The concept of a recycle bin icon on Mac, for example, would be easily caught even by those who had never seen any PC before.
Principle 3: Organize content clearly
This principle is talking about information hierarchy that helps users easily navigate through the website or app design. When you come to a random website, more likely, you will see the navigation bar showing the main sections like About, Products, Prices, Contact Us, etc. These sections make up the primary hierarchy. If you hover over one of them, the sub-sections appear, announcing what you will find when diving deeper into the website.
The more logical you arrange your site map, the easier it will be for customers to navigate, and the smoother user experience they will eventually have.
What is also worth mentioning is the size of target buttons and typography. The bigger-sized buttons ensure efficient interaction reducing the risk of performing the wrong action. And well-thought typographic choices can significantly improve a website’s accessibility facilitating perception of written information.
Principle 4: Don’t overwhelm, be simple
To put it another way, every design element that doesn’t assist in users’ goal achievement should be a subject to elimination. The unnecessary information distracts customers from their primary purpose wasting cognitive and operational resources. The pioneer who adopted a less-is-more design approach was Apple. From 2007 when the iPhone was introduced till nowadays, Apple follows the principle of simplicity in their products and website’s design.
Another example of less-is-more philosophy in design is iA Writer, an app looking like a plain sheet without any distractive content or information. The simple UI allows writers to concentrate on the creative process, making it easier to get into the flow yet providing users with helpful tools to improve their writing.
Principle 5: Keep design consistent
When people start using a new product, they expect it to be similar to what they have already experienced before. This way, users may reduce the cognitive load they encounter trying to learn something new. Design consistency follows the idea of so-called transferable knowledge. Microsoft adheres to this concept making design consistent throughout all products. For example, using Microsoft Word will help quickly adopt Excel or PowerPoint, which have similar UI concepts.
Being comfortable for users, design consistency makes the design process easier for UX and UI designers as well. There is no need to continuously create new solutions when starting to work on a new product.
Consistency in UI embraces:
- Visual consistency - all elements should look the same within one product
- Functional consistency - all objects should work in the same way, preventing users from becoming confused with unexpected changes in item functionality.
- Expectations consistency - using hundreds of different websites, users form certain expectations as of how interface components should work or look. If you destroy their expectations with a super creative design solution, users will “thank” you with frustration and a high bounce rate.
Also, don’t try using new UI/UX terminology - stick to wordings most people are familiar with.
Principle 6: Give feedback to users’ actions
Is there anything on Earth more frustrating than pushing a button on a website and having no idea what is happening? The great UX design should always inform customers of their system status and action progress.
Say, you started downloading a file and naturally expect the website to show you some sort of progress bar or a countdown to understand how much time is left. In its essence, the design feedback is a dialogue between humans and machines. The design may respond by altering the target button’s color, shape, or any other visible changes. Or, for example, you can show how many minutes are left to complete the task. To illustrate what I’m talking about, look at the GIF below. Do you see the button’s color is changing? That’s how the system is interacting with users.
Relevant error messages are as important as feedback. Users will have a better experience if, together with explicit communication of an error, you will give them hints on how the problem can be solved. Stay polite, helpful, and upbeat.
You can also create preventive messages warning users about possible issues. For instance, Gmail uses pop-ups to notify customers about missing attachments.
A good design is sending comprehensive error messages, whereas a great design is trying to prevent errors.
Principle 7: Allow users to control the process
People like feeling confident that everything is under control. When we know that our mistakes can be easily fixed, this gives us more freedom to explore new options and inspire us to be courageous and creative. The top-of-mind option that gives control in our hands is Undo. This function is critically important for text and graphic editors, where the creative process implies multiple changes to achieve perfection.
Also, Undo is helpful when users perform an action by mistake and want to backpedal it. For instance, Gmail sends a notification message offering to undo just deleted email.
I’m sure the possibility to rewind the wrong action saved millions of lives (definitely, mine is on the list). Thanks to Apple’s notification asking if I was sure to permanently delete the items in the Trash, I rescued the files that cost me tons of time and nerves.
Principle 8: Make interaction a no-brainer
Whether your user is an advanced expert or a no-clue newbie, the interactions with your website or app should be comfortable for both. For those who start using your product, tutorials and explanations would be helpful. For customers who are already familiar with the functionality, you should offer shortcuts to shorten the path to the mostly-used actions.
Principle 9: Mind accessibility
In the modern world, where we celebrate our differences, accessibility has become a must for digital products. It’s a designer’s responsibility to ensure that people with various impairments, temporary or permanent, will have a hassle-free experience interacting with a website or application.
When designing a product, it’s crucial to build it for users with poor vision (who are blind or can’t distinguish the colors), who have motor, hearing, and cognitive impairments (like, for example, dyslexia).
We have a separate article on our blog dedicated to inclusive design examples, so if you find this topic interesting, take a look.
To complete the above principles list, I’m adding here some more UX design rules and UI principles our experienced designers follow in their projects.
Top UI/UX principles from Eleken designers
- It’s critical to build the right navigation in the interface and outline the navigation hierarchy
- If you can leverage visual objects like style and patterns - do it. It will keep the consistency and will relieve a headache of your developers
- Don’t put a dozen buttons on one screen. Limit yourself to one primary button, a couple of secondary ones, and hide the others
- UI design is all about managing customers’ attention. The good design doesn’t need onboarding - it will lead customers to an action we want them to take
- Be simple and follow the less-is-more approach. At the same time, don’t oversimplify and remember that there are things that should be complicated
- Mind accessibility (especially colors and fonts). We make design for everyone, not only for youngsters with the perfect sight.
By the way, you can learn more about accessibility in UX in our next article.
We hope the information in this article will help you create a great UI design for your digital products. And if you ever need a helping hand - let us know; we are here for you.
Top Stories
SaaS Pricing Strategy to Stop Guessing and Start Growing
SaaS startups are bad at pricing. On second thought, I take that back. They actually know how to determine prices for SaaS software. What they don’t know is how to figure out how much customers want to pay. And the difference between the two is quite profound when it comes to effective monetization.
We at Eleken have helped dozens of SaaS companies with UI/UX design and noticed one paradoxical pattern. Startups put acquisition and retention higher than the work on the monetization of their services. They put tons of effort into their home page. The price page they often set once at the beginning and then forget forever.
This is despite the fact that monetization has the most significant impact on the bottom line, leaving retention and acquisition far behind. According to the study published by Price Intelligently, a 1% improvement in pricing results in a 12.7% profit increase. Acquisition and retention affect the bottom line not nearly as much.
It looks like working on how to price your saas product is the most important thing you can do for success. But in fact, for an average SaaS startup, it takes only six(!) hours to decide on pricing. That is not per week or per month — six hours, overall, to set, test and sharpen everything.
The anatomy of SaaS pricing strategy
Pricing a product is much easier than pricing a service. Pricing innovative SaaS service is a hundred times harder than pricing any everyday stuff. No wonder that the SaaS pricing process often reminds of picking numbers out of the air. Guesswork doesn’t count as a SaaS product pricing strategy.
Whatever price you guess, it will fall somewhere between one that is too high to generate any demand and one that is too low to cover expenses. You’ll hardly know if your customers appreciate your service more and you are leaving money on the table. You’ll figure out that you were overpriced only after you scare away a bunch of potential customers.
SaaS companies need some tools to narrow down the pricing search. In this article, we’re providing three SaaS software pricing strategies for you to come to the rescue. Each of them has its place in business, but (spoiler alert) SaaS companies need to pay particular attention to the latter one.
Cost-plus pricing strategy
This strategy embodies what people basically mean by business — selling items for more than the cost of production. It is the most widespread strategy for manufacturing and retailing companies.
Cost-plus pricing's advantages are its simplicity and predictability. It requires no formulas, it doesn't need a deep understanding of your market or your customer. You spend $2 to brew some coffee and want a 50% markup that makes $1. Slap the numbers together and voila, you get $3 and put it on a price tag. You're guaranteed to make that $1 with every sale.
The cost-plus pricing model lacks the flexibility to fit SaaS companies. What if you need to intensify marketing or hire a new employee? The cost may change swiftly. Subscription prices can't be modified all the time to absorb every cost fluctuation, which means the margin will take a hit.
And by the way, why do many startups put so much emphasis on internal cost when determining price? Customers are not interested in your costs. Just like they don’t think about the price of components when buying a bottle of cola, they don’t care about how much you spend on development. Cost-plus pricing may be convenient for a company, but it has nothing to do with customers’ expectations.
If you sell software as a service, the value your products deliver is probably
much greater than the cost to produce them. Start looking beyond your product to stop missing out on money.
Competitor-based pricing strategy
When you enter a new market, you don't usually know how to price SaaS. You don't want your price to look ridiculous when compared to similar offers. You look left to find the lowest price, then you look right at the highest price and take a safe place somewhere in between. Your monetization is competitor-based.
The main advantage of the strategy is, again, simplicity. It takes half an hour to browse the competitors' websites and a bit of math in your head (or a spreadsheet for advanced users) to have the price ready. “So, my competitor’s price is $3, and I will charge the same because they probably did their homework and know that $3 is what the market used to sustain, right?”
Yes and no. On the one hand, it’s a good idea to bear in mind what your competitors charge. Businesses that compete in a highly aggressive space may depend on this strategy completely since a slight price difference defines the users’ choice. Consider you decided to open a coffee-to-go shop. You won’t attract many customers with the price twice as high as the coffee shop next door.
On the other hand, no one ever made a major breakthrough by copying someone else's (not necessarily correct) decisions. You’re probably offering a service that differs from others somehow and has more value than your competitors’ service. Otherwise, why would you stay in business? Putting a price tag based exclusively on matching your competitor, you’re losing an opportunity to stand out, to separate yourself from the others. You’re losing your chances for rapid growth.
Value-based pricing strategy
It's the process of systematically identifying the best opportunities to deliver your audience what matters most. The truth is that the journey has no endpoint. You can never have a good enough understanding of your prospects.
Therein lay the biggest downside of value pricing — its сomplexity. You don’t have all the needed information ready, as in the case of cost-plus. You also have no opportunity to gather all the data in 30 minutes of going through competitors’ sites, as we’ve done with the previous strategy.
Yet, the value-based option is highly recommended for SaaS.
This SaaS model pricing strategy gives you two significant advantages. Firstly, you can charge more than your competitors, given that the audience is ready to pay for the value you’ve prepared for them. While healthy SaaS businesses have a lifetime-value to a customer-acquisition-cost ratio (“LTV:CAC”) of at least 3:1, value-based pricing can kick that ratio far beyond, skyrocketing their growth rate and profitability.
Let's take an example of a social media marketing tool HootSuite. Its cheapest plan was $4.99/month in 2010. Since then, they've updated their pricing year after year to reach the price of $19/month for a starting package, it's almost four times costlier.
Secondly, you can raise prices as you develop new features and add more value to your services. Development costs may stay the same, but as customers appreciate your services more, they will be ready to pay more. Who really cares that Dropbox went from $9.99 to $11.99 per month if the shift was followed by four times more storage offered?
This strategy assumes that you’ve learned your audience and can split it into buying personas to offer every persona a feature mix of its dream. Let’s see how it works for a real-life B2B SaaS pricing strategy.
Slack is one of the most successful SaaS businesses in the world, that hits 12.5 million users, including ourselves. Slack uses freemium pricing to offer a basic set of features for free plus three more upgrade plans. The company splits its offer into packages to fit a wide range of customers: for small and medium, large and very large businesses. Slack knows what features each group cares most (and least) about and includes the list of killing features to each package.
- The Free plan exists to convert interested users. Here you pay $0 but get limited by up to 10 app integrations and only 10,000 last messages available.
- In the Standard plan, you pay $6.67 per person per month to get app integrations and message searches unlimited.
- In the Plus plan, you pay $12,50 per month per person to get enterprise-level services in terms of security, compliance, and administration on top.
- The Enterprise Grid is for companies too big to work in a single workspace. It allows the creation of multiple interconnected workspaces. Pricing for Enterprise Grid is open-ended to fit any company too big for a pay-per-person approach.
We at Eleken do something similar with pricing for our design services. We also have three pricing packages, but in our case, the criteria for differentiating is not the size, but the challenge customers come with.
The essence of the value-based strategy is the continuous work on your target persons' profiles. The results you get are useful not only for pricing but also for product, design, and marketing. A deep dive into the values of your audience will help your team stay focused and make consistent decisions. It will help you prioritize product updates. It will help you avoid feature creep.
To sum up
Your pricing is not a task you can cross off the list when done, it’s a process — a long hike to the top of the mountain. Don't be afraid to start from a “minimum valuable” pricing when you roll out your minimum valuable product. The price is part of your product, so you can develop it together with your service and your knowledge.
Few, if any, big shiny SaaS brands launched with perfect pricing. The best pricing strategies for SaaS are dynamic ones. Mailchimp, Slack, and Hootsuite have all modified their SaaS pricing as they've perfected their core product, with ups and downs, learning what their customers' value and trying to maximize those values in their products.
Adobe Buys Figma for $20B, and Pisses Off an Entire Profession
Figma CEO Dylan Field: “Figma to be acquired by Adobe.”
UX designers everywhere: “God damn it!”
A bit of background
A design software juggernaut with a bad reputation that runs a dozen apps nobody really likes buys the most beloved tool in the design community for an insane $20 billion.
Since 2016, Figma has boomed thanks to its collaborative innovation, free access for beginners and attention to user experience. Eleken UI/UX designers are huge fans of Figma — the app tops our list of best UI/UX tools. You can see how we praised the app here, here, and also here.
Now we all are a bit… concerned about the future of a platform we rely on every day.
We are concerned because Adobe is making a monopoly
Our experiences on the internet are now dominated by a steadily declining handful of giants like Google, Apple and Microsoft. Adobe is following their footsteps — now it controls four out of five UI design tools. The only competitor left is Stripe with a market share of about 10%.
Do you remember when was the last time monopoly spawned something good for end-users?
Adobe’s $20 billion deal for Figma is more than 50 times the startup’s revenue. That sounds crazy unless they are just trying to ruin the product that undermines the success of their cash cows called Photoshop and Illustrator.
Something similar Facebook did to Instagram ten years ago, paying way too much. But retroactively we can see it as a successful attempt to preserve Facebook's monopoly.
.jpeg)
We are concerned because previous Adobe takeovers ended badly
Dylan Field says Adobe doesn’t want to break anything.
But we know that this line belongs to the top 5 things they say about every single tech acquisition. It's never been true before, so why would it be now?
At the beginning of any corporate takeover, they promise you nothing will change. And then — voila — “you have to pay more, but you get a useless new feature in return.”
Maksym, Design Director at Eleken
You won’t have any illusions about Adobe’s acquisitions if you question the fate of products it merged before.
- Many years ago, Adobe bought Macromedia’s Fireworks, a cheap and powerful graphic editor that was hugely ahead of its time. Adobe cut off its resources, left major bugs and eventually closed the product.
- Adobe acquired portfolio service Behance, which worked as LinkedIn for designers. Now there are hardly any interactions on Behance.
- Adobe dropped $1.3 billion on the video collaboration app Frame.io. Since then, Frame.io has had constant problems with usability.
We want to believe Adobe’s promises, but deep down we know this merge is going to harm Figma. High chances are that the app will get progressively harder to use, buggier, and more expensive. The pricing concern deserves special attention.
.jpeg)
We are concerned due to Adobe’s monetization strategy
One of Figma’s advantages is freemium pricing. That's awesome — you have all you need to start with design freelancing for free till the point you make a decent living through it. Many successful designers I’m following on Twitter say they owe their careers to cracked Photoshop. Because you can’t afford to pay for Adobe subscriptions as a beginner.
Maksym, Design Director at Eleken
Sure, you can’t. Adobe charges over $30 per month. That is quite an investment for a person that only learns how to design. Figma makes professionals pay $12 per month, and for beginners, it’s completely free.
Dylan Field says that “currently they have no plan to alter Figma’s pricing”. Of course, not for the next 2 months, then things will change, right? Because Figma’s “making design accessible to all” motto is an antithesis to Adobe’s pricing strategy.
We are concerned due to Adobe’s Suite management strategy
Another thing Dylan Field says is that Figma plans to incorporate Adobe’s expertise in illustration, video, 3D, and other fields.
Sounds like they are going to promote Adobe products through Figma, integrating them into the app. That’s Adobe’s standard strategy, but does it make apps easier to learn and use? Definitely not.
But the worst thing is that acquisition feels like a betrayal
From the moment of its birth, Figma declared war on Adobe. Where the design giant was too pricey, Figma decided to be accessible to everyone. Where Adobe’s tools denied teamwork, Figma built its business around collaboration. Where Photoshop was sluggish, Figma worked in real time.
Figma started with a definite goal of taking on Adobe, and gained its significant market share thanks to massive user frustration with their previous experiences. It was a success story of David and Goliath, where we all rooted for an innovative and humane underdog.
And then, one fateful day, our underdog took the side of its ideological enemy. If you were tired of things, why not sell your claim to someone on your team? Instead, you passed it to the corporation you were competing against.
Legend has it that Dylan Field once bet a bunch of fellows he could make them cry with a short story 280 characters long. He won the bet.
Few moments later:
Your email has been submitted successfully. Check your email for first article we’ve sent you.
