Establishing the Blueprint

Creating an app or website requires research, planning, and development to ensure that the finished product is optimized for its intended audience and purpose. In order to do this, both the UX (User Experience) and the UI (User Interface) need to be thought through to create a cohesive user experience. Last time in our “Top 10 UI Design Terms Explained by UI Designers”, we discussed the top ten UI terms that you should take into consideration when designing the visuals of your application. In this blog, we will be taking you through some key UX terms that will help you establish the backbone and foundation of your application, ensuring that the proper logic is set in stone, and setting your app up for success.

1. Affordance

When designing an interface, you have to take into consideration the platform or device you intend to use it on. Depending on the type of device the application is used for, different tools or limitations may be available. An affordance is something that a device or platform offers specifically considering its design. For example, an affordance of a mobile phone is its quick and convenient access, as well as its ability to take photos. If you wanted to create a photo app that could take and edit pictures on-the-go, you would want to create it for a mobile device rather than as a web app. Although a laptop might have camera functionality, the intended use of a laptop is typically for sitting and completing tasks, compared to a phone where it is designed to simulate a computer experience through a small portable device you can carry in your pocket. Keeping in mind the limitations and advantages of certain devices and platforms in creating your interface is important to make sure you are designing for that specific platform.

2. UX Flow

A UX flow is a diagram that maps out all of the different information and interactions that would occur in an application. It helps visualize how these points of interaction connect, alongside all of the different outcomes possibilities. This usually happens prior to deciding on the visuals, or UI, of the interface to establish a solid foundation for the app. Once the UX flows have been created, they can be converted to wireframes or hi-fidelity mockups to bring the blueprint to life.

Example from Career Foundry

3. User Persona

A user persona is a hypothetical character created that is inspired by your desired audience type to bring into context the value of the app to that specific user. It is a way to showcase the ideal user of your app and how it could be useful to them. Creating a user persona allows you to have more control over how you market your app to ensure that the context of the app's usage doesn’t get lost.

Example from Adobe

4. Pain Point

A pain point is an interaction or function that causes users problems when interacting with an interface, therefore, conflicting with the smooth UX of the application. This is something that would be addressed prior and during UX flow creation to smooth out any possible friction that could happen within the interface.

5. End User

The end-user is the intended audience for the application. They are the individuals who will actually be using the interface and who you should keep in mind when ironing out pain-points and affordances in your UX flows and overall design.

6. UX Research

UX research is all the information you gather about your users and intended application design to create a better user experience. This can include conducting interviews with users to find pain points they have with certain application experiences, testing a prototype of your app on an end-user, or searching the web for more information regarding the topic of your app. All this information can be funneled into creating your UX flows and influence smart design decisions.

7. Wireframes

Once a well thought out UX flow has been established, and before diving into hi-fidelity designs of the interface, it would be helpful to lay out the information in a non-descriptive way to get a sense for the visual layout of the application. Wireframes are a way to arrange content in such a way that does not require the use of real content. They typically include squares to denote image placeholders and lines to denote text content. They are a way to get a feel for how the content layout and flow of information translate from the UX flows without getting into detail with what the actual content would be.

Example from Cacoo

8. Breadcrumb

A type of navigation structure, breadcrumbs are used to show users where they are in an interface alongside the steps that took them to that specific location. They offer a quick visual and easy access to other portions of the application, without having to retrace steps through the use of a back button.

Example from Hubspot

9. Mobile Responsive

When designing an application and evaluating affordances of certain platform types, it may be valuable to consider whether a mobile responsive application is useful as the final product. As common practice, most websites are designed to be mobile responsive, which means that when the website was designed and developed it was done so in a way where the format and interaction was optimized for both a web and mobile audience. If a website wasn’t designed to be mobile responsive, then if a user were to view it on their mobile web browser the website would look disorganized, missized, and overall unusable. Since a website view is larger than a mobile phone screen, when the website scales down it will cause a malfunction if it is not designed to be mobile responsive. Designing a mobile responsive web application is also a cost effective way to create a mobile experience without having to build a downloadable mobile application.

10. Accessibility

A key part in designing an optimized user experience is ensuring that it is accessible to varying abilities of users. Especially if the end-user in mind is one with limited ability–such as vision or audio impairments–it is important that you keep in mind related design principles to accommodate these individuals. When designing an accessible interface, it is important to carefully consider colors, type and type sizing, and the type of content used to ensure that the app is able to maintain it’s core functionality even with reduced abilities.

Now that you have a core set of tools to get you started on your app journey, you can create amazing, cohesive, and smart applications for an overall enhanced user experience. If you are ready to get started on your app journey and want an experienced team of designers to help, drop us a line here to get in touch!