In this final session of my practical guideline for User Centered Design, we're going to look into the topic of visual hierarchy and appropriate sizing and weighting in the UI. This can be considered as a kind of fine-tuning for user centered design, when we move beyond the basic usability expectations and try to create an environment where a strong engagement can form between the users and the platform.


Please check some of the most common issues and their explanation below. Click on the numbers to load the related image.


Size matters, but it does in regards to the occupied surface and not the relative size of the element; hence, filled elements are more dominant than outlined elements, even when relatively smaller in size. The bigger the filled surface is, the more visibility the element has and the more attention it receives from the users’ limited cognitive resources. As a consequence, big color spots mean hot spots in the UI.

The key areas where visual hierarchy can be used to trigger the expected emotional response on the users' side are:

  1. Button hierarchy. The hierarchy of the action buttons comes from the platform’s business goals. Those interactions that are the most important from the platform’s success point of view (registration, upgrade, purchasing add-ons, and so forth) need to have the biggest visibility. They are followed in the hierarchy by the function buttons that represents the features offered by the platform (with that, convey the value of the platform). At the end of the list are the negative action buttons (cancel, back, and so on) on which we usually don’t want to draw too much attention (except when it comes to security purposes) hence, only need basic visibility.
  2. Error messages. In case of error messages, the larger the amount of alerting red color used, the scarier the message will appear and the more serious the issue will look. Using big red spot when it is not necessary will evoke frustration and uncertainty in the users. Hence, it compromises their confidence in exploring other interactions offered by the platform and decreases the chance of becoming a habitual user.
  3. Success messages. In terms of success messages, it is important to scale the message during experience design according to the complexity or importance of the action undertaken. Undersizing a the success message raises confusion, e.g., if an upgrade action is communicated with a nuanced green message, it shakes the user’s confidence as to whether the right actions were undertaken at all. Oversizing the message also can open up the possibility of misinterpretation when, e.g., correcting a typo receives a big success message, suggesting that this platform struggles to execute this function while it considered basic on other ones.


Thank you for your dedication in making all of the way through this UI Design Process mini-class.  During the six sessions, I’ve aimed to introduce a systematic approach to using the elements and principles of design in the creationof those ‘fast and easy’ interfaces that engage users.

I’ve made the sample UI downloadable below, and encourage readers to repeat the corrections using their own design decisions in order to practice systematic approach and develop their own design process.


Sample UI for the UI Design Process mini-class


UI Design Process Preview | The Elements and Principles of Design


All rights reserved © 2022 Julianna Sudi