1

I want to visually show starting and ending of an if block in my UI.

Each if block starts with if and ends with end. The condition is written in red. I’ve figured out a few ways to show the start and end of an if block by highlighting if and end. Is there a better way to show this?

3

To improve your UI/UX and would strongly suggest you to put a legend somewhere near, so it is clear for your users and then it will not be so important how exactly you show start/finish of a block as long as you notify your users about the meaning of colors/blocks in your interface. That would solve the essence of your problem and the question how to show it becomes of secondary nature.

Furthermore, to improve UX in general I'd suggest following things

  • Finetune your color scheme so it looks less harsh and a bit more balanced. (Look at some text editor schemes online: http://devthemez.com/themes/sublime-text-2 or alike and pick one for your taste. I would also go for a green background color for the start of the block, and red color for the end of the block just to be consistent with typical color symbolism in our culture.)

  • Change text editor font to something more sans-serif like Arial or Helvetica. Or even Monospace. Currently it looks like you are using Times new roman and it is not the best choice for text editors.

  • Add spacing between text editor block and the save button :)

4

As I understand it layout is more important to comprehension than UI markers. In the Code Complete book by Steve McConnell there is empirical research as to what code block formats are robustly understandable, and which cause issues.

In short, as I remember it, nested blocks should be indented, and a block should be left aligned. Now if you have issues doing this because whitespace will affect the output, then you can visually show blocks as a graphical map.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.