I'm creating an user account window for my instant messenger application. enter image description here

User have to:

  • enter name, password, server
  • press button "Connect".

Also user can:

  • close this form without connection
  • enter advanced options (f.e. port, encoding).

And this form will show:

  • connection result, errors
  • warnings, tips for user (f.e. if some field will be clear)

I can not imagine how to show all this here. For example: make "Cancel" button or "Back" arrow in top left corner. Or maybe make "X" button in top right?

Could you help me? Thanks in advance!

1 Answer 1


For your case would like to recommend you for the connection results, errors, warnings and all of these stuff inside a hidden message then appear like this:enter image description here

For the inputs try to put validation for username (minlength, maxlength, etc..) and password (minlength, maxlength, encrypted).

Connect button make it little bit active like either of these two images:

enter image description here

Forget to add, these are Bootstrap components.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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