Thursday, July 22, 2021
Designers love their buzzwords. There are no two ways about it. If you have ever attended a meeting with one of our APPOXIO designers, you'll probably have heard them spout a load of design jargon. You may have nodded your head in the meeting like you knew what they're talking about and then had to run to Google to find out what the terms meant. Today, we're going to try to bridge the gap between designer and client by explaining some of the most common UX/UI design terms the APPOXIO design team uses when speaking to our designs.
Let us guide you through a list of important UX/UI terms and help to simplify the technical jargon, and allow you to navigate through conversations and documentation with confidence. This is the first in a two-part series.
The path(s) that users may take to reach their goal when using a particular website. We use user journeys when designing interfaces to identify the different ways to enable users to achieve their goals as quickly and efficiently as possible.
A user journey illustrates the bigger picture. It expands beyond tasks and looks at how a particular customer interaction fits into a larger context. The user journey is one of the main focal points for the APPOXIO design team when starting work on a portal project. The design, hierarchy and composition of the pages are essential, but if we don't consider the steps that a user takes and their feelings, pain points, and moments of delight, we wouldn't be doing a thorough job. We make sure to get as much information from our clients on how their users and employees interact with their current solutions and then take that a step further by researching new and more efficient approaches to make the user journey seamless and easy.
When designers talk about white space, they mean negative space. In other words, the space between screen elements. White space is an excellent tool for balancing design elements and better organizing content to improve the visual communication experience.
White space is more important than you might think. It hurts our hearts when we hear clients refer to it as wasted space. We feel that white space is as vital as the space used for the content; both should balance equally, especially when working with functional products such as ServiceNow. Using white space makes the content in the design easily scannable, significantly improves legibility, and has a direct relationship with the accessibility of the portal. We use white space to make our portal designs more accessible by breaking up content, improving readability, and boosting user experience for people with and without disabilities.
These are all properties used to contain and group content while ensuring negative space. It is an essential element of design and is especially prominent in UI design to promote readability and scanability.
A container is an element designed to contain page elements to a reasonable maximum width based on a user's screen size. This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display.
Margins are the space between content and the left and right edges of the screen and determine the proximity to other elements.
The padding area is the space between its content and its border. Thus, the padding creates extra space within an element. In contrast, margin creates extra space around an element.
Sometimes it can be tempting to try and squeeze as much onto one page or into the one widget as possible; well, we're here to tell you you're wrong! No, we wouldn't do that, but we are major advocates for giving designs room to breathe and making them aesthetically pleasing and giving the users the space to take in the information presented to them in the design. Without space, designs run the risk of becoming a hot mess of conjoined elements.
Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual characteristics—e.g., menu icons—so users can understand the information instantly. By laying out elements logically and strategically, designers influence users' perceptions and guide them to desired actions.
Visual hierarchy plays a crucial role in planning our information architecture to help users navigate through your portal easier. This can drastically reduce the amount of effort needed to engage with the portal. Our designers aim to remove friction and enhance usability. We believe paying attention to visual hierarchy is a crucial way to achieve this. Portals contain many calls to action and functionality pieces; establishing a stable hierarchy to each page is essential when put in front of real users.
Designs act as blueprints to a product. They are rough versions of a screen design that allows the designer to rapidly explore different layouts and visual hierarchy options and gather feedback through testing. Typically, a wireframe does not include any decision-making around colour or typography, although wireframes can range from low to high-fidelity. The point of wireframes is that they should be fast and easy to produce. Thus, early feedback about designs can be gathered and implemented before style and branding are incorporated, and development begins.
Wireframes are foundational in the UX design process at APPOXIO. Wireframing is a cost-effective way to explore ideas and generate innovative concepts that address clients' goals. They act as a two-dimensional "blueprint" to illustrate the framework and interface elements of a design. At APPOXIO, we will create a completely custom wireframe for clients or, if the project requires, we will use the OOTB (out-of-the-box) ServiceNow portal widgets and work with that being our low fidelity wireframe we then expand on. We draw out wireframes to see what widgets and functionalities apply and determine a solid hierarchy on the page. We also use this as our first conversation with our developers to ensure we are on the right track from a technical perspective, considering integrations and upgrades.
Meet us back here next week, where we will share five more UX/UI terms with you.