Brain Pleasing, Eye Catching, Heart Flattering Visual Design

Hello there, today I wanted to talk about something that is related to User Interface. User Interface and/or visual design is an important part of your system. Why? Because the ones using your app are not developer. But are general people. 🙏

So, in my software engineering project, we are assigned to a cyptocurrency app, and yes, we must give them a good brief of something eye pleasing to see.

I’ll give you a good hindsight, pinch of salt for you to eat before we’re into more of these stuffs.

If I were to give this kind of data to the end users, they can’t associate this json response into what they’re looking for. For context, this is what we get when asking for the “API” the last one day price history of an ethereum token 💵.

But of course they won’t understand what are the meaning of the json data that is returned. So data flows through our program, and there should be a way to make everybody using our app understand and able to interpret the data.

But that just not it.

This is one of the old trading apps. Looks okay for me, but the one thing that maybe less seemingly okay is the amount of information in one screen someone can provide. Sometimes it can be too much and packed up in our eyes. It’s not said to be bad or unusable in someway, but the way visual design works is like tuning a parameter in machine learning. We always try to find the best way to represent something 📚.

Experience Success Ladder: On How To measure This Thing

Now, I wanna talk about on how to measure how good your visual design is.

First Rung: Functional

Well, lots of systems and products can get the job done, everything fine, running well, maybe a bit slow and can’t really determine the information quickly just by seeing in a quick peek, but yes functional still, but is it usable? Can people use the product on a daily basis? 🤔

Don’t make something that is overly complex for our users to see. Just like the example I’ve shown you, the first picture. Yes, it is functional. But it’s totally unusable.

This functional thing in your system doesn’t just impact a simple app like the crypto app my team is currently making. Citing from https://drawbackwards.com/blog/ux-design-success-ladder-for-meaningful-product-design, car airbags were developed to save people from car crashes, it basically will blow up an air baloon that will inflate from the front seat when the car had a crash or hard bumps from the front. Which will prevent someones head to knock over the car’s front window or the steer wheel, I mean just like hard surface of the car.

Well, but there is a fatal flow, airbags were designed for the average male driver with a certain height. When an airbag inflates, it will cushion most men’ chest and prevent more damage. But for women, it will chin first, which will led to deaths and injuries.

So why you shouldn’t only just stop in this step? Let’s think more about it.

• Company fails to deliver their product for users to satisfy their needs. 😢
• Employee can’t seem to comply their goals and objectives as well. Their time and resource will be wasted if they develop an app this early in the ladder. 👆
• Market will surely won’t stop improving their product, leading to less profit for our own. 💎
• Users will be discouraged to use your product!!! 😭

Second Rung: Usable

What are the example of a usable product? They are a bit slow, a bit unorganized, half baked, lack of UI and effort touch, yet, the information provided can still be interpreted. Product that I think in this level is like BCA and BNI mobile banking app. The UI is a bit old school, there are no loading cue, yet they make it like that so that it looks “secure” 🧷.

Usable products and experiences are sometimes:

• For internal use only, or those who are already experienced, its product market is not people in a large scope, but just for those who is familiar enough with the system,
• Some of the flows doesn’t utilize design pattern, best practices on how to build the components.
• Frustation may occurs on certain features, because it’s just hidden or just in a bad position.

Third Rung: Comfortable

The deals start here, in this level, an app is called comfortable when people just want to go back and use more of this product. The apps that are comfortable have their own loyal base of community that uses this app. ⏰

It can be commercialized so that more end users can access this product and use it on a daily basis. Of course, these kinds of apps shall reduce hassle for the user to achieve his/her goal. .🥅

In this software engineering project, we aimed to at least achieve this level on the success experience ladder. Not just usable, but user can use it comfortably. 🐇

Fourth Rung: Delightful

Not just it does the work well, in this level, the apps tend to deliver something new, an innovative that totally synergize with main needs, that will surely help the way people do things, in a more “fun, desirable” way.

For example: like easter eggs in game, or onboarding tips function on applications that gives us an interactive way to use an app.

These kinds of apps will have high revenue over the course if it has good promotion, people will just use this thing and prefer it rather than any other apps, because it has something that other products don’t, even though they achieved the same goal. For example, like Discord.

There are so many Apps similar to discord. Like: Slack, Facebook, etc. But Discord has some stuffs that others don’t. For example its global servers, it’s crazy big community, APIs for developers, customs stuffs, worth subscription.

Fifth Rung: Meaningful

These kinds of apps change the user’s life and create long-lasting success for the team who designed them. The apps will grow in revenue and can stand through economic downturns. Because it’s just making something revolutionary and change how people uses applications. For example: Google, Facebook, Instagram. Those applications are the first of their kind, they developed it so far that it’s just not delightful, but it turns into a strong stand point for every other apps to be like, them!

Another explanation of UI vs UX: which is really unnecessary because everyone knows about this.

It’s actually quite self explanatory, UX is the User Experience, which is some kind of a measurement on how good your product is. While User Interface is something that is in your screen or how your product looks. As simple as that.

User experience can be determined from several aspects, those are:

• The interface itself, the UI. It is intuitive enough? Does it suit the goal and can the user be comfortable with the app?
• Usability, usability relates more to the functionality of the app, for example. If your app works on android. Will it work on app? Does it use the same framework? For example, this is the screenshot of the our project’s from a tablet smartphone of mine. It may not be fully optimized, but it’s usable.

• Copywriting, is more like on the technical information whether it’s correct or not. Does the app give you like a good title cue of the current page, correct sentence structure, or pronouns.
• Interaction System, a good app is where the user should think they have full control of what they are doing, for example, they know what button to press next, what thing they can navigate to, they also know when the app is loading, etc.
• User needs, which should be fulfilled to achieve the best user experience. Users should have an efficient steps to achieve their goal.

PRD can be extended in a visual way. Here goes mockup.

Wireframe is like a really basic visual representation sketch. Wireframe can be an early model for your program, when designing a user interface for your application. It represents all the basic features that is made from our PRD.

This is the wireframe we designed for the register feature of our app. It helps us to explain it to each of us, so that not only the written requirements, we also get a quick overview on how the register screen looks like. Next, we can create a better quality mockup, just so the front end developer has a good reference on what to code, not just what he hears. But all of the stakeholders already know what the user interface is gonna be like before coding it through.

This will of course reduce unnecessary expense or cost while changing the looks of your product.

Here is the register screen we’ve designed after discussing with all the stake holders, including our developer team, product owner and the company partner, also our lecturer.

Here is the screen that we have coded. It’s far from perfect and in practice it should be similar to the mockup, but considering a thing or two, we can further change it after discussing with the stakeholders. Not a perfect practice though. One shouldn’t have change the design in the middle without notifying the others. But in a small project like this. It is understandable.

Usability Heuristics: The Rule of Thumb of UX/UI

There are 10 usability heuristics, like some kind of guide on how to make a good user interface.

#1 Visibility of System Status: GPS inside your system.

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time

A good design should indicate in which position the user currently is. There are a lot of cues that can be added to satistfy this one. Let’s take an example from our app.

The bottom tab navigator will show up blue when referring to a page. This will surely help the user rather than all grey type of navigator!

#2 Match Between System and The Real World

The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

This one thing relates so much, especially in our cryptocurrency product.

The terms mnemonics are like the phrase that are used to remember something. It is a replacement to remember private addresses. And yes, we should use this “mnemonics” terms over all of our app’s design.

#3 User control and freedom

Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.

Let’s take a look. In our app, one of the implementation is when users accidentally pressed next before noting their mnemonics.

And here goes the saver! You can go back, take a look, and continue to the next process.

#4 Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

In our apps, we shall stick to the standard, especially when it comes to cryptocurrency terms. When talking about tokens and coins, well simply put, a token represents what a person owns, while a coin denotes what they’re capable to own.

#5 Error prevention

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

Well yes, error catching will prevent your apps for crashing, showing the message for that error is the best, but sometimes, you must give the user a one step more prevention to eliminate error.

In the transaction screen, we tried to disable the send button before the form is filled, then after pressing the send button, a confirmation dialog should be there, and makes sure that this process is be done in a sober way by the user!

#6 Recognition rather than recall

Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

again, we put logo of the tokens in the send screen, and also like symbols and everything. Including the QR scanning feature!!!

#7 Flexibility and efficiency of use

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

About efficiency, all the coin cards in our app is pressable! Meaning you can press them and will be redirected to the coin details screen, and after you go back, you can back to the old screen where you are from.

#8 Aesthetic and minimalist design

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

Well, in the coin details screen, we tried to make it not as clunky as possible,

The prices only shows up when one drags the details of the charts.

#9 Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

A toast, shall do it, right? ;)

#10 Help and documentation

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

Well, a simple tips bar shall help people on how to do stuffs if you think it’s quite complicated for a total beginner to complete the tasks!

And that’s it. we shall wrap our conclusion that User Experience is different with User Interface, but great visual design and user interface shall help that user experience! Now go! Code some stuffs! Peace out!