In this lesson, we’ll take a closer look at the role of the User Interface (UI) in an app.
In the previous lesson, we defined User Interface (UI) as something that covers what the end-user of the application is going to see and be able to do. For us, as application developers, it means that we must develop this user interface using the tools available to us.
This involves many concepts for putting things on the screen. They include views, navigation, components, and the composition of components. Some of these concepts are more or less familiar to us as app users, but now we will look at them from an application development point of view.
Putting Things on the Screen
Let’s consider the screen you’re using now to watch this video, because this can be applied to any of the visual aspects of programs you use on your computer or mobile device. All you see is pixels on a screen. While we could develop apps by arranging each of the millions of individual pixels on the screen one-by-one, this would take a long time to do. We would prefer a faster and more convenient approach.
Development environments are typically equipped with a set of tools for creating a UI. This includes a way of defining a set of different views for different parts of the application, as well components to represent everything from text paragraphs to buttons.
A UI not only defines the elements that can be seen, it also defines some of the basic interactions in the app, for example, a clickable button or a dialog that appears on top of some other content.
Important – Consistency is Key for the UI
The UI is important, because while it should be easy to use and somewhat obvious, it also defines the experience for the end user. User Interface and User Experience design is a vast topic on its own, so we’ll only discuss it briefly. The most important takeaway here is to make the UI consistent.
Above all, what you want from your UI is for the user to intuitively grasp a pattern for how the application works and for that to be in line with user expectations. They should not have to search for different types of navigation or different buttons from view to view. Within a low-code/no-code environment, you will typically have a lot of pre-built components for the UI. This "out-of-the-box" service is an advantage for ensuring that your UI is consistent.
What does consistent mean? It means that when we use an app, as users, we expect it to behave like other apps we’ve used in the past. It also means that the app is familiar to the user as they move through different parts of it. This consistency reduces the cognitive load on the user, and contributes to a more comfortable experience with the app.
This idea of consistency can also extend to different lines of business. If you’re familiar with the kind of tools and apps used in your line of business, a good starting point is emulating the common practices and wording from those apps. By seeing something in your app that users are already familiar with for their line of business, the experience will be more intuitive for them, and they won’t need help to figure out what to do with it.
Views Are Based on Clear Functional Distinction
Views are just what they sound like, the various things you see in an app. Some LCNC platforms might also call them pages.
Let's return to our note-taking app example from earlier. The note-taking UI would be one view, which we could call the Note Taking view. The view listing all the notes we have taken so far is what we could call the Note Listing view.
This is how you want to arrange the views in your application. You should create main views based on clear functional distinction. Having clearly separated views will also help later, when you start implementing logic in your application, by separating the different areas of your app into manageable sections.
When designing and planning your app, it’s a good idea to take time to break down the individual views, or pages, and how they connect with each other.
Some tips for planning your views include:
- Write a list of all the main user activities, such as "User creates a support ticket".
- Think about how these activities map to views in your app.
- Try to ensure that actions related to one activity are grouped in the same view or views.
- The fewer views you have, the less workload there is in expanding and updating the application.
Navigation Helps the User Move Between Different Views
Navigation includes moving between views, links, and menus. Let’s expand the note-taking app example by considering the navigational implications of our design so far.
For moving between the two main views, we should introduce a menu. A menu is just links to the main pages of the app. A low-code/no-code platform should give you a tool for creating such a menu. The advantage of a standard menu is that it is a widely used UI element that a lot of users look for, which offers the advantage of consistency.
Now, let’s consider another navigating scenario in our app. If we're in the Note Taking view, but we want to cancel our action and return to the list view, choosing the Cancel button would do two things. It ends the editing of the note and takes us back to the list view.
It is important to note that this behavior of returning to the list view is not something an application development platform might be aware of. Instead, this is just a UI convention that we’ve come to expect as end-users. As developers, we’ll have to implement this behavior.
These are just some examples of implementing navigation in an application. As with views, planning ahead will help you to create a great navigation for your app.
Components (Elements or Artifacts) are Your Building Blocks
Every part of the UI in our app needs to be represented by something. This includes all the buttons, any text, images, icons, and so on. In application development, all of these individual elements are represented by components.
The term Components is used in many tools and platforms, but they are also known as elements or artifacts. They are the same thing, and these components are the building blocks of any UI. The components cover the most general functionality you need in your app, to give you flexibility in how you develop your UI.
When talking about components as the visual elements of an UI, it is important for us make a distinction between the UI element and how it is styled. If we think about a button component, then what the building block defines is that we have an outline with some text inside it, and that this element can be clicked.
The way the component actually looks, whether it is blue or red, and whether the shape is round or rectangular, belongs to "styles", an area we won’t be discussing in this unit. You will learn about that in the next unit. A button component will always have some default styles to help you set it up visually, but, for now, we'll only focus on what you need to start building.
Composable Components are Your Visual Development Toolbox
Let’s talk about components and composition. One of the main reasons that components are such a powerful concept in application development is how they can be composed. In other words, you can create components by using components.
There are no fixed limits to how big or small components can be. The smallest components are things like an individual icon or a divider line. The largest components might be something like a map component for geolocation or a video player. With many components, they will actually be made up of smaller components.
Let’s think of a checkbox item you might see any in app you use. We can, and often will, label this as a Checkbox component, but this is really a checkbox component and a text component for the label. If you make a list out of these checkbox items, you have a checkbox list component, which consists of all these individual components.
In an UI, components create these kinds of groups all the time. If you spend some time deconstructing some of the things you see in this way, it will become apparent how you can build quite complex things out of simple fundamentals.
This type of composition is what you’ll be able to do on most low-code/no-code platforms. Composition becomes particularly effective as you build more or bigger applications, where composing reusable components according to your specific needs will save a lot of time and effort in the long run.
The takeaway is that when building the UI of your application, you should, ideally, think about the current view or app, as well as the components you will be using to compose reusable pieces of UI as you go along.
- User interfaces of modern apps are made up of views and components.
- The user interface should be consistent so that it is familiar to the user and in line with their expectations.
- Use views to break up your app into logical sections, which helps you to make the app and your user to use the app.
- Map user activities so that related activities that user is likely to do at the same time are grouped in the same view.
- Navigation is not only about the menu navigation, but also about considering every transition between views and which actions trigger the changes.
- Components, also known as elements or artifacts, are the building blocks that enable visual development.
- Smaller components can be used to compose larger components, which you will also re-use to speed up the development of your views.
In the next lesson, we will cover how to turn business rules into the logic that drives the activity in your application.