User experience (UX) and user interface (UI) design date back to the very first inventions—when a prehistoric human first attached a rock to a stick, they made the stone easier to swing (and hopefully got a promotion in the process). As a coherent discipline, though, UI was codified in the 1970s at companies like Xerox and popularized in the 1990s with the wider adoption of the home computer.
Since then, UI design has continued to evolve and adapt to new technologies and devices. You can implement user interface design—often shortened to UI design—throughout your ecommerce website by following guidelines. Here’s how to get started.
What is UI design?
UI design is the process of creating the visual layout and appearance of the software, apps, websites, or any digital interface with which the user interacts. Examples of UI components include the arrangement of buttons on a page, the copy guiding you through the steps to create an account with username and password, and the icons that guide you through a shopping experience. UI design aims to create simple, aesthetically pleasing, and functional interfaces that aid users in accomplishing tasks.
Why is UI design important?
Good design does more than look nice—it can improve your bottom line. A widely cited study tracked the performance of popular design-driven companies over a decade and found that they outperformed the 500 largest companies listed on US stock exchanges by 219%. One of the most straightforward ways to emphasize design is through your website’s user interface.
UI design vs. UX design
UI designers typically work closely with user experience designers, and while UI and UX are closely interrelated, they’re separate disciplines. Where UI design focuses on the visual and interactive elements of the product, like layout, typography, colors, icons, and buttons, UX design is concerned with the overall user experience, including lofty concepts like the general purpose of the product and how the user feels about it. Both are crucial for a successful outcome: A solid UI design supports the underlying UX strategy.
Think of the telephone. At first, you had to tell a human operator who you’d like to talk to. Later came the rotary dial, eliminating the need for human operators but adding a time-consuming twirling mechanism. Eventually, the dial pad was introduced, with a button layout that has outlasted the traditional telephone and become standard for mobile phones. Speed dial, contact lists, and voice assistants have further streamlined this process.
This evolution tracks the user interface of the telephone: the buttons and means by which we interact with it. Its user experience, on the other hand, encompasses not just the device’s UI but the actions it performs, our understanding of its capabilities, how satisfied we are after using it, and so on. For example, your satisfaction with your experience of booking a ride on a ridesharing app is influenced not only by the app’s interface, but also by the ease of finding a driver, the estimated time of arrival, and the driver’s behavior during the ride.
7 important UI design principles
Over the last few decades, a few UI golden rules have emerged. Here are seven you should keep in mind:
- Make the user comfortable
- Let the user control the experience
- Make it intuitive
- Be accessible
- Let users know when things are working…
- …But plan for when they don’t work
- Embrace iteration
1. Make the user comfortable
The user, in this case, is your customer. To enhance their browsing experience, creating a welcoming environment on your website is essential. Here’s how to make navigation more intuitive and user-friendly:
- Less is more. No matter your taste in art, minimalism is the name of the game in UI design. Good user interface design dictates removing anything on a page that doesn’t serve your needs. Flashy fonts, unnecessary information, and overly wordy text are prime culprits.
- Keep the visual hierarchy clear. Fitt’s law states larger targets are easier and faster to click on than smaller, farther targets. In other words, ensure that important elements like Buy buttons are prominent and noticeable and that key photographs and information naturally draw the eye.
- Keep it simple. Great UI uses simple language, readable fonts, and a pared-down color scheme. Negative space (or white space) on the page is also desirable.
- Keep it consistent. UI design elements like buttons, microcopy, page layout, and color schemes should remain uniform throughout your site. Follow general design conventions, like putting a menu at the top of the page.
- Avoid jargon. Make your visitors feel comfortable on your site by using wording that’s not intimidating and is free of unnecessary technical terms.
In other words, your goal is a clean, attractive design with purposeful visual elements that give users the information they need when needed.
2. Let the user control the experience
UI design is also an opportunity to get to know your audience. With marketing research, or even demographic information available through social media accounts, you can delve into their needs and interests. Gain insights by empathizing with users and mapping out their motivations for visiting your site. What buttons and visual information do users want upfront? What might more experienced users want tucked away deeper? By prioritizing your audience, you’re letting their needs dictate the interface.
Another way to let the users control the experience is by allowing them to undo an action without negative consequences. This makes exploring the site feel more accessible and safer, knowing they can always backtrack and return later if they stumble into tedious data entry sequences. So-called breadcrumb trails that show users where they’ve been and where they’re going help them make a mental map of the site and find information more easily. (Consider the one above the headline for this post, where it says Home > Shopify Blog > UI Design Principles.)
3. Make it intuitive
Good user interfaces are intuitive, with everything exactly where the user expects it. Even the most “disruptive” brands don’t disrupt user expectations in their UI design. Instead, the goal should be a seamless user experience.
Familiar patterns, templates, font choices, and page layouts reduce your visitor’s cognitive load. It also means you don’t have to reinvent the wheel or explain every design decision. The little three-line menus at the top of every app work because we know what they do.
4. Be accessible
Color blindness impacts around 5% of the world’s adult male population and .5% of the female population. The World Health Organization reports that 253 million people have some form of blindness or vision impairment, 466 million have deafness and hearing loss, and another 200 million have intellectual disabilities.
Designing a good website means designing a good website for everyone. The WCAG Web Accessibility Initiative provides UI designers with detailed guidelines. One rule of thumb is not to rely on one element to do all of the communication. Two buttons labeled “Yes” and “No” could also have a checkmark and an X on them, respectively. Making them green and red can add another layer of communication, ensuring that colorblindness or reading skills don’t stop a user from being able to navigate the site.
The previous principle—“Make it intuitive”—helps here, too. Standard symbols and phrases keep everyone on solid ground. Iconographies like the shopping cart icon, the dollar sign, and checkmarks are widely recognized and enable users of all types to navigate easily.
5. Let users know when things are working…
Users like to know when things are working. Consider adding a light animation when a button is clicked to confirm the action, a thank you page to close the loop on a successful transaction or form completion, a progress bar if a function takes time to load, or a series of requirements that gradually turn green when attempting to create a password. All of these can give your visitors that familiar tingle of completion.
6. …But plan for when they don’t work
We’ve all been there: Rage clicking when a site or piece of software doesn’t work as intended. Good UI mitigates this by providing immediate and informative feedback.
Plan for when things don’t go as expected. Well-designed error messages and 404 pages are clear and helpful, redirecting the user to something else. Details like these show customers they’re in a functional, trustworthy shopping environment: They mean, “Don’t worry. We know, and we’re handling it.” (Think of the Twitter fail whale—the cheery beluga being lifted out of the waves by a flock of birds—that used to appear when the platform experienced a service outage. (The fail whale was retired in the summer of 2013 but remains a nostalgic symbol of Twitter’s early days when it struggled to handle high traffic volume.)
7. Embrace iteration
Think of the design process as an iterative loop with no real endpoint. It’s about repeating steps to improve. After deployment, take a moment to see how your design works before evaluating the data and making adjustments.
Embracing iteration could take many forms; maybe it’s listening to customer feedback, hiring users to test a website, or diving into analytics to see which pages have a high bounce rate or where conversion is lower than expected. Small changes to the design of a checkout page, for example, can fix a leaky sales funnel.
All users and all businesses are different, so a little trial and error are to be expected. With a little tinkering, good UI design can make your site more beautiful, user friendly, and profitable.
UI design principles FAQ
What are the main UI design principles?
Key UI design principles include:
- Make the user comfortable
- Let the user control the experience
- Make it obvious
- Be accessible
- Let users know when things are working…
- …But plan for when they don’t work
- Embrace iteration
What are phases of UI design?
The six phases of UI design are analysis (figure out the goals and expectations of the user and business), design (sketch, wireframe, and prototype an actual user flow through the website), development (turn the design into a usable web product), deployment (test for bugs and release), evaluation (measure the effectiveness of the UI design through user testing, feedback, and analytics), and iteration (use the results of the evaluation to fine-tune the design).
What makes a UI design good?
A good UI should effectively drive key performance indicators (KPIs), and be aesthetically pleasing, intuitive for users, and widely accessible.
