Whether a company hires an agency or a dedicated in-house team to design their app’s UX, it’s important for them to know standard design terms so they can see how these concepts connect with their product. Here are a few essential UX design terms for a founder or other non-technical employees to know to bring a common understanding with their designers.
In the body of a UX interface, the wireframe is the skeleton. Underneath every well-designed web page or mobile app, there is usually a wireframe involved, Wireframes are blueprints of a design and only displays the website’s content like navigation bars, an upload page, or profile pages. The purpose of this is to figure out how to arrange these elements so that it makes sense to first-time users.
Wireframes can be made from simple, hand-drawn sketches to wireframing software like Balsamiq. Designers aren’t too focused on the visuals during this stage, so traditional wireframes don’t contain colors, animations, or any other stylistic elements in an app. Rather, designers are concerned about where elements go and how they interact.
2. UI / Visual Design
UI stands for User Interface, which is what humans use to interact with machines. In the old days of computing, the text/command line was the interface. In the context of mobile apps, the UI is the visual design in an app and all the elements users use to interact with it. When there is a “play” icon placed on top of a video, users know how to interact with it and they know where to press to start the video.
3. Clickable prototype
A clickable prototype brings UI designs to life by taking static screens and adding clickable areas that interact like a final product. Clickable prototypes are essential to building a well-designed UI UX, for a regular prototype has the visuals and content, but without the context of how the app goes from one screen to another, the design is misrepresented. Invision is the most popular tool for this for both Impekable and a lot of other freelance designers and agencies, where designers can prototype and map out their designs, plus make elements clickable to lead testers from one screen of the app to the next.
4. Responsive Design
Responsive design allows websites to be viewed in almost every resolution and respond to the window size of the browser so nothing gets cut off. The website is coded to adjust its layout differently when viewed on a mobile device.
5. MVP - Minimum Viable Product
This term should be familiar to you aspiring entrepreneurs, a minimum viable product or MVP is a product with only a few critical features to determine early on if there will be any demand for the what you’re building. If the product was never something people wanted, then it doesn’t matter how many features it has, it still won’t succeed. Companies can save time and money by making a product without any bells or whistles, and then continue from there if it has traction.
6. Front-end development
Compared to web, mobile front-end development is more focused on the design of the UI itself, incl. assets like buttons and menus. UI also involves using software development kits to access functions needed for the app, such as location or camera.
Onboarding’s purpose is to set up new users up for success in an app. This includes signing up for the app and flipping through tutorial screens about their main functions. There are many ways to do this, like SMS account verification, progressive onboarding that occurs as users use a certain function for the first time, and connecting the user’s account to their social media to find their friends.
When you start a new account for a mobile app, you wouldn’t be following or friending a lot of people right away. Your main stream will have little to no content if you’re a new user, but that doesn’t necessarily mean you’ll be displaying nothing but white space. It is important to provide users who are not familiar with your app with context. A page in a blank state can be a message or image indicating that there is no content to speak of, but they also take the time to mention what is supposed to be there to provide context so users don’t feel lost.
9. Style guide
A style guide is a document that contains the standards for visuals and documents used by a certain company. This includes logos, spacing, variations, color palettes, and fonts used. Almost every brand utilizes style guides because they’re essential to branding. Coca-Cola, for example, is easily recognized because they clearly defined their style guides and never deviate from them.
10. Information Architecture
Open an app, any app. How many screens do you have to go through to reach the settings page? How about your profile? Information Architecture in the context of mobile apps involves the process of deciding how to arrange the app’s functions in order to make it understandable for the average user.
It involves a lot of hierarchy that starts at the home screen and organizes the structure in terms of how to navigate from one screen to another. Creating a good Information Architecture for a mobile app means making it as easy as possible for a user to access the screen or feature they want without taking too many steps. At Impekable, we view creating information architecture like it was a blueprint for the architecture of a house, for they strive to answer the same question. What parts work best when in close proximity to each other? Failing to answer this question leads to sloppy design where the delete account button is too close to the back button and the toilet is a little too close to the kitchen.
Outro Now that you know these essential mobile app design terms, you have a better understanding of the process that goes into designing your app. It is not just simply making a few icons and screens. There is a lot of thought that goes into making the mobile apps you use every day because the goal of these apps IS to get you to use it every day. If you expect your app to achieve the same goals, then you should be expected to put in the same level of care.
What are some other UX design terms that you had to explain to a client? Please comment below.