What are the key elements for clarity and simplicity of a web application GUI?

Question

We work on a web application. We have spend more than two month to simplify every process and workflow. Now, we would like to make the User Interface looking more simplier and clear, working only almost on CSS.

I'm an experienced front-end developer, but I know that simplicity is not an easy stuff to achieve and that when you have simple working features in the back-end it's a different step to make it look simple and clear to the fron-end part and, in our case, to a very specific kind of users.

I mean stuff like round borders for containers and input fields, it seems to be used everywhere today. But I'm afraid to add things, not remove stuff.

The problem is that we got already a lot of stuff and functionalities, now we have to choose what to remove, purify, etc.

Do you have basic rules that gives the user a perception of GUI's simplicity and clarity?

Answer 1

Start with a blank canvas. By definition, it's clean, simple and minimal.

Unfortunately, you can be minimal only against a set of expectations. An elegant solution is the mininmal solution of its problem.

So state every single need: make sure everything on the screen has a right to be there and it has no simpler replacement for that given kind of problem, given its circumunstances.

State why it has to be on that screen; why it can't be on another screen; why you can't eliminate that screen.

Don't remove: re-add elements one-by-one, after defining how they're useful, how do they support the overall aim of the system, or rather, the overall goals of the system's users. Justify these goals with real people in real-life scenarios. Don't dream things up.

Why should a button be round? Is there any other way people would recognize it's a button? Test it on real people. Not frontend developers, but people who have no experience within the project and are not particularly interested in computers themselves. The people who use it only as a necessity - and this is regardless of age group - should be your choice.

Once you have a clear rationale on every single item, every single screen, and that rationale is ultimately connected what the interface is used for, then you might have a minimalistic design.

Also, read this speech. Don't care that it's about furniture. It isn't.

Answer 2

Get acquainted with UCD (User Centered Design).
UCD is reported to allow the teams sold to it to deploy the minimal system thas compliant with the user's needs.
As I see it, there are two levels to be aware of.

First level is the functional design, related to how it works, what to do next at very stage of the interaction with the system's UI.
The best way to reflect this design is by writing textual "use cases". The UCs are the best known device for capturing the functional requirements.
Not any UC will do, there is a better way to write UCs as simple but beefy documents.
Having written the relevant UCs, you are enabled to visualize your system's interaction without having implemented it. Additionally, the programmers will will have an excellent definition so they will be able to do it faster and leaner. The testers will know in advance what to test. Ans most important, the users will have a neat idea of what the system will do.

Second is to set stuff in screens, following the UCs MSS - main success scenario and attempt to leave out any other data that's seldom needed, moving it to additional sub-screns. The purpose is that the user who's doing the normal thing only sees the normal data.
"Following he MSS" means providing a means to do what the MSS says.
Like, for (a contrived) example: in a login form show id and password, only the data items that the huge majority of the times will be needed, and devise a means to allow a lost user to bring up the password recovery and registration items that will be seldom used.
For each data item displayed in any screen, make a note about how it was rendered, and render it the same way all along all the screens of the application.

All in all, you need to be very clear about what you want achieve do in order to make is simple.