UX/UI Elements Ripped Apart

User Interface and User Experience visualized

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.

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.

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.

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
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.

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.

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).
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.

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.

  • 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.

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.

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.

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:
  • 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.

--

--

Breaking boundaries between industry and technology. waltercode.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store