Dumbonet: Word Two about UX/UI

We hope you enjoyed reading our previous two articles published by Dragoljuba Damjanovic and that you got interested in our little story. Now we want to talk about the frontend side of our application. When we mention the word ‘frontend’ usually the first association is something visible or touchable.

Wireframing

One of the first steps in creating a functional (and if possible beautiful 😁) user interface is wireframing. It is a way to design a website service at the structural level and it takes place early in the project lifecycle. There is a bunch of wireframing tools available on the Internet, but for our project, we decided to choose Pencil. Maybe it’s not intended for professional use, but neither are we experts in UI, so for our needs, its capabilities were more than enough. The best thing is that it’s completely free to download and easy to use. You can find it on this link.

Everything you need to do after downloading and installing it is just to set free your creativity and imagination. Ok, probably it would not be bad to involve your client’s requirements in the whole story too. 😁

Here is an example of the wireframe which we created for Inquiry using this tool.

Importance of AB Testing

Even if you are at the very beginning of creating your website or you already have a clickable user interface, AB testing is the best way to optimize your interface to be more intuitive and easier to use. Here come terms UX and UI which are commonly used together, and most people don’t know the real difference between them. Long story short, user experience design is, in theory, a non-digital practice, but used and defined by digital industries. It’s not about visuals. It is focused on the overall feel of the experience. On the other hand, the user interface design is strictly a digital term. It includes all the visual, interactive elements of a product interface such as buttons, icons, spacing, typography, color schemes, and responsive design.

To go back to testing from the title, we will make clear what is actually meant by that term. Some people call it split testing, and it stands for the next few steps you should do :

1. Find people available for your little experiment
2. Split them into two groups A and B
3. Show your interface to group A, and another version of interface to group B (here you can change just one specific thing such as button position, or background color)
4. Observe their reactions, and collect all that precious information you get from them

We have slightly adapted this type of testing to our needs and capabilities, and done multiple tests through several iterations. We’ve just invited our colleagues from other offices to come and try to use our interface (they had just basic knowledge what is our app about, what made this all process quite more interesting). There were various comments that we’ve got (and various facial expressions too 😂). For example, on the question: At which point you will click on this button? The answer was: Ohh I didn’t even notice it!

Answers like this should not discourage you, but it should be a warning alert which would signalize: Hey, move that damn button to some more noticeable place!

You have to admit that it is much better if this happens to you at the very beginning of development than in the final phase when you have all the functionalities done.

So, now you are probably asking yourself when is the best time to start with AB testing.

We think that the answer is pretty much obvious.

No matter if you have only wireframes for now, or you have developed most functionalities of your frontend app, the right time to start is just NOW. You can thank us later 😎.

Maybe we have moved a little bit away from our original theme, we started building a blockchain-based application, right? But this is a pretty important segment in the process of building any type of application that has that ‘visual part’. This is really a broad subject, we could probably write an entire publication about that and not just one article. For that reason, keep in mind that it deserves some attention for sure.

Now when we mastered an important aspect in building the frontend side of the application, we are ready for deep dive into the technical part of it. In the next article, we will talk about the Angular framework, and how to connect it with Keycloak. Have you already set it up? No? Then quickly go to this link first.