Designing for UI
UI, UX, which one is which and why they seem to overlap sometimes in-concentrically depending on who you ask!
First things first: the challenge of defining which is which.
UI or User Interface design is more about the inter-actual experience a user has, while UX or User Experience is more about the relational experience a user has with the product. The one exits collaboratively with the other and as I will demonstrate below, they can and do have attributes that overlap. UI exists in every technological interaction we have, from a website or app to appliances such as tv’s and washing machines.
UI ensures that we can operate technology and UX aims to make us like that interaction. In some article relating to statistics I recently read, but cannot place, one statistic related to the very high percentage of people who never adjust the temperature setting on their fridge. That the fridge has this feature is related to UI, you can interact with it. That people never bother to adjust it, relates to UX in that its users never really feel inclined to use it (have an experience with it) although it has some impact with the possible return experiences its users has. By that I mean there could be some value to reducing it in winter when its already cold or turning it up when its hot since both have measurable effects like saving electricity or ensuring bacteria doesn’t grow on food. Personally I find that those two criteria wonderfully benefits my experience, in essence, can be dubbed a somewhat positive experience.
There is also a much much larger scale to this UI/UX business. One can get very philosophical about it and somehow arrive at a place where some ethical and existential notions surface, but that’s altogether a discussion for another day, but let’s keep it simple for now.
What is the impact of UI design in our everyday life’s, and how does it change the way we interact with the world around us?
I once read that good design is invisible, and in respects to UI I would say good design is invisible to the mind. Good UI ensures that technological interaction becomes as natural to us as walking, it comes with a bit of training and behavioral cloning, but there is an instinctual and natural process behind it. Some animals are born running, but mankind has a tendency to develop its responses more on nurture than nature. Likewise, we compile clusters of sound that we replicate forward to form words with that can convey what we aim to communicate, it may take a small while to learn to speak, but once we know how we can write books for people to get lost in, songs that emotionally bonds us, and at the very least create some sort of understanding. Just like we have evolved the sounds we make into multi-tiered systems that can leap across an array of behavioral traits varying from evolutionary survival such as relaying information needed to survive in the world, to creative compositions that expresses subjective meanings, we evolve UI’s that can keep us busy for hours or on the other hand save as much time as possible.
Here is a demonstration of UI in behavioral evolution.
These same kids have no trouble navigating the ins and outs of cellphones. If you’re a parent, you’ve probably heard about screen time. Screen-time is the measured time that children interact with devices. Sometimes before they can even talk they are already playing complicated games or browsing youtube. The fact that they are able to do so is directly linked to UI because they are interacting with the devices. How we feel about it (and obviously we feel “about” it enough to coin the term screen-time) that is a matter for UX.
Facebook has updated it’s UI a few times since it begun, and each time there were people complaining about it. The thing is, we are creatures of comfort, and technology has added greatly to the comfort in our lives, but there is a learning curve that comes with technology and at a certain point we tend to want to stick to what we know. When you’re young, you learn to use a fork, you use that fork the same way for the rest of your life. In tech though, the tools change, so you have to learn all the time. If you have a lot of time it may not bother you that much and you may receive some satisfaction from it, but if on the other hand, and this is the case for most people, you have a job to do and a personal life to manage, you crave a few constants in your life, and this is why products seem to follow a pattern true to previous models. Chair styles may change, but you always use them in the same way, the same goes for electronics such as a kettle, and yes even the web. It because of this simple process that UI exists and why it is such a big part of UX.To demonstrate the differences I will create a photo editing/sharing feature for a fictional app.
Getting started — 1. Sketching.
There are a couple of scenarios in which UI can be applied. You could have an idea for a product and start from scratch, it could be that you would want to update existing products, or perhaps you have seasonal campaigns or promotions or even a couple of portals. Any of these may be restricted to device or have must be compatible with multiple devices. For example if you have a website, its good to have a responsive products so that the user will always have a good experience regardless of which device they use, then you have to design multiple interfaces. If you’re just developing an app, you don’t need to factor desktop or tablet views (although mobile in itself has different screens to consider).
The starting point is usually compiling the requirements through sketching. Mapping the route that a user will take through your product to make it function. Sketches are usually a rough draft of the wire frame of the product. In the example to the right, the steps the user has to take have been listed and the primary pages have been sketched. It doesn’t contain all of the pages the user will see yet, this is just the conceptual phase in summary. Some designers like to sketch, while others prefer to work in applications. I like using draw.io because I’m familiar with it and anyone can access or edit with permission which is great for when a client/ company doesn’t have design tools.
2. Wire Frames.
To the left is an image of the wire-frame I created based on the sketch. You could have a look at it here if you are interested to see how it looks in the application. As you can see, I’ve color coded the 4 primary steps in the usage of the application. Within these steps there are more screens to see.
1. Get an image. The user can take an image with their device or they can upload one from a library. If the user decides to choose to take a photo they will see the photo screen, if they choose to select from the gallery, they will see another screen.
2. When the user has selected/ taken the image, they can choose to crop it. This step has two parts, they can crop on the step screen, or click on settings and select a predefined dimension.
3. In this step the user can modify the image by changing its color, adding stickers and or adding text. There are 3 additional screens the user may see, or he can click on next if he doesn’t want to use these filters.
4. This brings the user to the last step where they can choose to either save the picture or share it.
Creating wire-frames are very useful to show members working on a product the scope of what they will be working on. It’s very valuable for both the front and back end teams because it outlines the requirements. From this wire-frame the coders can start building the back-end and the designers can start working on the graphics, which is the next step in UI designing. This is known as the mock up phase.
3. Mock ups & 4. Prototyping.
During this phase the product starts to resemble a complete product. Mock ups are used to give a good sense of what the final product will look like. They are more detailed than the wire-frames but not quite as functional as the next part which is the prototype stage.
It’s not always necessary to create prototypes for example if you already have a working product and are only updating some features. It’s always advisable though to test the product in a live environment before publishing it. The reason for this is to avoid publishing embarrassing mistakes. If you have to present the product to investors for example it’s quite handy to give them a sense of what they are investing in.
The mock up is good for presentation purposes. It shows some or all of the screens, while prototypes are linked and can be interacted with which makes it good for testing. These two steps tend to go hand in hand and back and forward. Sometimes there is a need for a different graphic, sometimes a new functionality needs to be added in. It’s very usual for this phase to take up the most time. Once the prototype is finalized, rolling out the product goes very fast, or should at least.
Prototypes and mock ups may appear similar at a glance. What distinguishes them is really the interactive part.
I hope you’ve enjoyed reading this and have a better understanding the different parts of the UI design process.
