UX/UI Elements Ripped Apart

User Interface and User Experience visualized

To come back to tech topics in our blog posts, we will have the opportunity to hear firsthand what it is like to be a UX/UI designer at Walter Code, what the UX/UI standards are, and more interesting things.

Beginner intro to UI/UX

The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with. This includes screen layout, transitions, interface animations, and every single micro-interaction. Any sort of visual element, interaction, or animation must be designed.

This job falls to UI designers. They decide what the application is going to look like. They have to choose color schemes and button shapes — the width of lines and the fonts used for text. UI designers create the look and feel of an application’s user interface.

UI designers are graphic designers. They’re concerned with aesthetics. It’s up to them to ensure the application interface is attractive, visually stimulating, and themed appropriately to match the app's purpose and/or personality. At the same time, they need to make sure every single visual element feels united, both aesthetically, and in purpose.

User Interface (UI) Elements

When designing your interface, try to be consistent and predictable in your interface elements choices. Whether or not they are aware of it, users have become familiar with elements acting in a certain way, so choosing to adopt those elements when appropriate will help with task completion, efficiency, and satisfaction.

We’ve all dealt with the issues when someone is trying to talk about “that light blue button just below the thing with the sliding images” or when you need to open the design document to make people understand which component you are talking about.

The main reason we have these issues is the lack of proper names for the things we are trying to refer to. What starts with a small annoyance in daily discussions can turn into one of the biggest contributors to poor communication between product, design, and engineering teams.

Therefore, in the UI world, the practice is that within each team there are names for elements that all team members know, so there will be no confusion in their understanding.

User interface elements usually fall into one of the following four categories:

1. Input Controls

2. Navigation Components

3. Informational Components

4. Containers

Input controls allow users to input information into the system. If you need your users to tell you what country they are in, for example, you’ll use an input control to let them do so.

Navigational components help users move around a product or website. Common navigational components include tab bars on an iOS device and a hamburger menu on an Android.

Informational components share information with users.

Containers hold related content together.

The Most Used UI Elements

So, as we mentioned, UI design prioritizes the user’s visual experience. The goal of user interface design is to create a user interface that makes it easy, efficient, and enjoyable for users to interact with a product.

UX design covers the entire spectrum of the user experience, it encompasses all aspects of the end-users interaction with the company, its services, and its products.

Here are some of the most used UI elements:

Buttons

We can have multiple different types of buttons:

• Elevated buttons
• Filled buttons
• Filled tonal buttons
• Outlined buttons
• Text buttons
• Icon buttons
• Segmented buttons
• Floating action button (FAB)
• Extended FAB

When designing, it’s important to choose the right button and put it in the right place. The most common buttons we see in our everyday life are Filled, outlined, text, and icon buttons.

A product can show more than one button at a time in a layout. We have 3 types of rankings for the buttons: High emphasis, medium emphasis, and low emphasis.

When using multiple buttons, make sure that the arrangement of on-screen elements should clearly communicate that other buttons are less important than the high-emphasis button. Use a combination of button styles on the same screen to focus attention on a primary action, while offering alternatives. We can indicate the more important actions by placing them in a higher-emphasis button, such as a filled button next to a text button.

Choosing which button to use depends mostly on how much emphasis you need

Tabs

We use tabs to alternate between views within the same context, not to navigate to different areas. Often designers use tabs to navigate users to another step or screen, and that’s a bad approach. We use tabs to organize content into categories.

If users need to compare the info on different sections, we don’t use tabs. Having to switch back and forth puts a burden on users’ short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page.

An example of some different tabs

Alternating between views

Cards

A card is a container for a few short, related pieces of information. Cards are better suited when users browse for information than when they search. Card layouts are less scannable than lists. A standard vertical list view (in which each item occupies a new row in the layout, and may still contain mixed media such as an image, title, summary, and so forth) is more scannable than cards because the positioning of the individual elements is fixed in size and more predictable for the eye.

Thus, cards are not appropriate when users search for a specific item from a list or look for a particular piece of content. The more things are viewable without scrolling, the less demand is placed on users’ short-term memory.

Toggle switch

A toggle switch is a digital on/off switch. Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state. Sometimes deciding which user interface element to use — radio buttons, checkboxes, or toggles — can be tough. When you’re wondering which option will fit your use case, consider the number and type of options, and if there is any clear default value.

The basic toggle switch

Accordion

An accordion is a design element that expands in place to expose some hidden information. Unlike overlays, accordions push the page content down instead of being superposed on top of the page content. While the use of accordions on the desktop is debatable, on mobile, accordions are one of the most useful design elements, as they often solve the problem of displaying too much content in too little screen space.

Accordions keep the UI clean

Progress bar

Progress bars tell users how long an action is taking time. Progress bars should succeed in the following:

• Reduce user uncertainty (app reassures the user that it’s working).
• Offer a reason to wait and reduce users’ perception of time (the app gives the user something to look at while waiting. Thus, making users pay less attention to the wait itself).

You should always try to make the wait more pleasant if you can’t shorten the line. And wait-time is the right time for skeleton screens (a.k.a temporary information containers). Skeleton screens are another way to focus on progress instead of wait times.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. Such action creates the sense that things are happening immediately as information is incrementally displayed on the screen.

Two alternatives to progress bars

Radio button and checkbox

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others.

The biggest usability problems for checkboxes and radio buttons come from labels that are vague, misleading or describe options that are impossible for average users to understand.

Breadcrumbs

Every usability test shows that there is no single, general, and well-established way of exploring websites. Depending on the task at hand and the frequency of visits, users apply very different modes of navigation. One type of navigation is using breadcrumbs. Those are tiny little crumbles of pathways that illustrate where a user currently is in the hierarchy of the website. Breadcrumbs should display the current location in the site’s hierarchical structure, and not the session history.

Snackbar

Snackbars are designed to provide brief messages about app processes in software. They are critical for notifying users of actions they are required to take, or confirmation of an action they have just completed.

Snackbars automatically disappear after four to ten seconds, to allow users enough time to read the message, without blocking the information behind them for too long. Snackbars can optionally include a single action and can stay on-screen permanently until swiped off.

Examples:

• Message sent successfully
• Document ready for download

UI in Walter Code

Within our design team, user experience comes as the number one priority. We believe that by using already proven techniques, as well as existing rules in the design world, we can achieve satisfied and happy users, but we do not shy away from experimenting, and using our creativity when designing and solving UX problems.

Our UX/UI designer Zejneba Duvnjak introduced us to the stages a product goes through when creating a design in Walter Code, here is what we learned…

Project Scope

We start the design process with the project scope. It is the first stage that does not require a visual representation or design. There we define the deliverables that we need to deliver during the project, as well as which functionalities will be present on the project, and how to fit them into the design itself. For each of the stages in the design, we define which deliverables we deliver.

Research

The second stage of the process is research. Depending on the project, the research phase can vary in terms of the information we collect and have. If it is an existing project, in addition to user personas, case studies, site maps, user journey maps, and mood boards, we also use the analytics collected on the project, so that we can design the best possible interface with the most realistic data. A very important item in this phase is the competitive audit, it gives us a clear overview of the strengths and weaknesses of our competitors. We identify who our key competitors are, what kind of products they offer, and the approach they take when designing their products.

Design

When we have prepared all the necessary elements in the research phase and met the (potential) users of the product we are designing, we move on to the first step of the Design phase, which is ideation. This is where we combine research with ideas on how to solve design problems that users face. Through iteration, we go through potential solutions and choose the option that best fits the scope of the product. For every problem, there are several potential solutions. All of them provide a good user experience, but only some stand out for their features.

Stacking UI elements on the screen in order to get the best possible solution can often be tricky. Considering that we work on more complex and UX-demanding projects, we often have a lot of visual elements to display on one part of the screen.

That is why it is very important that the designers within the Walter Code design team skillfully master the knowledge and use of UI elements in the right place. In the whole process, it is important to recognize which moments within the platform itself are gain and which painful moments for users. If we approach pain situations correctly, we can change the entire user experience within the product. For these situations, there is a UX rule called the Peak-End rule.

The peak-end rule is a cognitive bias that changes the way individuals recall past events and memories. Based on the peak-end rule, individuals judge a past experience based on the emotional peaks felt throughout the experience and the end of the experience.

Within the design phase, we create sketches, wireframes (lo-fi, hi-fi), user flow, prototypes, and visual design.

Design deliverables

To create user flows, user personas, and in some cases lo-fi wireframes, we use Miro or FIGJAM. Depending on the project and terms of agreement with clients, we use Figma or Adobe XD when creating hi-fi wireframes and interactive prototypes. Design systems and interaction patterns are defined for developers, again using Figma or Adobe XD. The design process itself requires collaboration with all members of the team, including developers, engineers, project managers, and stakeholders. We communicate design ideas to developers so that any potential code issues can be identified when it’s easier to make design changes.

Testing

One very important item in the whole process is testing, and no, we are not talking about QA testing (although that is equally important). The Walter Code design team uses user testing to spot potential UX issues that product users encounter.

For testing, several methodologies and techniques can be used, and our favorite ones are:

· A/B testing — An A/B test — also called split testing — is a simple experiment where users are shown two variants of a design at random to find out which one performs better.

· 5-Second test — helps you gauge users’ first impressions of a design. In a five-second test, participants are shown an image of a landing page or screen for five seconds and then asked a follow-up question about what they saw.

· Usability testing — Usability testing refers to evaluating a product or service by testing it with representative users. Typically, during a test, participants will try to complete typical tasks while observers watch, listen, and take notes.

Development

At this stage, all design specifications and assets are delivered to the dev team. It is important that throughout the entire development process the designers support the developer while implementing the final design into a real product. Designers are also involved in UI testing before the actual release of the product.

How to make Great UIs (a short tip)

To deliver impressive GUIs, remember — users are humans, with needs such as comfort and low cognitive loads. Follow these guidelines:

• Make elements such as buttons and other common elements perform predictably (including responses such as pinch = zoom) so users can unconsciously use them everywhere. The form should follow a function.
• Maintain high discoverability. Clearly label icons and include well-indicated affordability.
• Keep interfaces simple and create an “invisible” feel. Every element must serve a purpose.
• Respect the user’s eye and attention regarding layout; focus on hierarchy and readability:
• Alignment — minimize your number of alignment lines (think justified text); typically choose edge (over center) alignment.
• Draw attention to key features using:

— Color, brightness, and contrast. Avoid including colors or buttons excessively.

— Text via font sizes, bold type/weighting, italics, capitals, and distance between letters. Users should pick up meanings just by scanning.

• Minimize the number of actions for performing tasks but focus on one chief function per page; guide users by indicating preferred actions. Ease complex tasks by using progressive disclosure.
• Put controls near objects users want to control.
• Keep users informed vis-a-vis system responses/actions with feedback.
• Consider defaults to reduce user burdens (e.g., pre-fill forms).
• Use reusable design patterns to guide behavior regarding navigation and search functions.
• Concentrate on maintaining brand consistency.

CONCLUSION

These are the stages a product goes through when creating a design. It is important to know how to incorporate the client’s branding into the UI elements, and to know how to convey the character of the brand to the design so that users can recognize the brand at first glance.

In addition to knowledge in the field of UX/UI design, it is important to master good communication skills and be creative. We draw a lot of inspiration for the design from our surroundings and real life. It is important that users can sympathize with the product we have designed, that through visual elements we show the connection with the outside world, and through functionality and a good user experience we show users how they need that product in their lives.