User experience is a vital part of any product design. In this article, we’ll explore user experience as it relates to web design. Using Esri Calcite Web can make designing modern experiences simple and far more approachable.
What is User Experience?
“User Experience” is everything that goes into how a user feels during their experience with a product. It begins with the way the product is laid out, often referred to as the user interface, but goes far beyond this as well. How simple is it to learn to use a product? How efficiently does it communicate reliable, quality information to the user? How accurately is the product able to anticipate and meet the needs of the user? These are just some of the other factors that go into crafting a user experience.
Common Design Mistakes
There are a number of decisions made during the product design process that can seem like good ideas, but may not be as good as they appear. Read on to find common design mistakes, their descriptions, and how to fix them!
Too Many Choices
While giving a user options can make them feel empowered, having too many can cause the user to get stumped trying to decide what to do. The fear of making the wrong decision can cause the user to avoid making any decision at all. This is called the ‘Paradox of Choice’, and can be avoided by limiting the amount of choices your user needs in order to use your application.
Vague Calls to Action (CTAs)
While buttons with text like “Submit” or “Click Here” appear often in designs, they don’t help the user understand what’s going on. Additionally, it can be difficult for users to understand what to do if CTAs blend into their environment. Instead, highlight CTAs and phrase them in such a way to answer the question “I want to ____”. For example, a button at the end of a form saying “View Report” is more helpful than “Submit”.
Poor Color Selection
Used properly, color will attract a user’s focus and help them know what’s important. Having too many colors, however, can confuse users. Even with only a few colors, users can still get lost. For example, when the color of text or an image is too similar to the background, it is difficult for users to see what the focus is. Bright, flashy colors or those that are fully saturated can be just as bad. Ideally, a product will use two or three colors that compliment each other, and they will be arranged in such a way that focus elements will stand out from their backgrounds.
Complicated User Input
As more and more interactivity is incorporated into designs, it’s important to keep the user experience simple and intuitive. When a user is greeted with a lengthy, complicated form, they may lose interest in providing the information required to continue. Even worse, they may become confused and input incorrect information. To combat this, it is important to design forms to break input into small, related steps, make the labels for the fields readable, and size the fields appropriately for their input. Additionally, users should only encounter the fields they need; conditionals that aren’t relevant should be skipped and non-essential fields should be hidden.
Using Static Design
Perhaps one of the most important things to keep in mind when designing a webpage is the users will be using a variety of different devices to access it. Each of those devices may have uniquely sized screens, so using static units can cause elements on the webpage to display improperly. To combat this and provide a more versatile user experience, use relative units when sizing displays. This will allow the elements to adjust their width based on the size of the user’s viewport.
Calcite Web
In their own words, Esri Calcite Web is “a branded CSS & JavaScript framework, web style guide, and visual design system“. It takes a lot of best practices for web design and makes them easy to implement. This means developers using Calcite can build a better user experience with less work. Furthermore, Esri is continually maintaining and improving Calcite, so it only becomes more powerful with time. For more information on specific features, check out the sections below.
Icons and Colors
Icons are an essential part of modern web design. Calcite comes with two sets of icons – one for user interface, and the other for social networks. They can be implemented as scalable vector graphics (.svg) or as an icon font (similar to how Font Awesome works). By using these icon sets, developers spend less time hunting through external sources for icons, and the style of the icons will remain consistent throughout the webpage. Furthermore, Calcite allows its icons to use CSS classes to change their color.
Color is simple in Calcite. The tool offers a selection of thirty-five modern color options that can be used interchangeably. Web designers using Calcite can use these colors to create a consistent palette within their webpage.
The Grid System
The best explanation of the grid system in Calcite comes from the source itself: “The Calcite Grid System includes a full, responsive, and configurable grid with columns, a container, and a ‘Block Group’ grid. The main grid is different from standard CSS grid systems in two key ways:
- Column widths are defined by the viewport size rather than a percentage of their containers.
- Built-in smart defaults for responsive sizing puts less columns across the screen at smaller sizes, rather than smaller columns.
These two principles mean that a column becomes a standard unit of measurement, creating a constant and abstracted grid system that stand behind the content of a page rather than within it.”
Using the grid system in Calcite makes designing layouts for screens of varying sizes super easy. This helps save a considerable amount of time while still improving user experience.
UI Components
Calcite has a number of common components with styling and functionality ready to go, saving developers time and effort while still ensuring consistent design and user experience. Many of the components also have multiple styling options that can be implemented as simply as adding a class. Some of the components in Calcite Web include buttons, loading indicators, panels, cards, tables, and more.
Additionally, Calcite offers a number of interactive elements that facilitate sleek, professional interfaces while still maintaining modern minimalist web design. Dropdowns, modals, and accordians are just a few of the elements that Calcite allows web developers to implement interactive elements without having to manage the JavaScript themselves.
Patterns
The patterns in Calcite provide answers for some common design challenges. By using the patterns, developers can implement navigation options, pagination, user sign-ins, and more with minimal effort. These patterns also save developers time and effort by providing the tools necessary to implement an intuitive user interface that fits seamlessly with the rest of the webpage.
The importance of user experience in web design cannot be stated enough. Fortunately, Esri Calcite Web makes designing sleek, modern webpages much simpler. If you haven’t had a chance to check it out, it’s definitely something worth looking into.
