I have a Windows application that I need to migrate to web. This application has many forms that follow the same pattern: (1) a grid on the left with columns and rows than can be selected, and (2) buttons on the right to perform actions. Here is an example:

enter image description here

While this is a very common design layout in windows applications, I noticed that it isn't quite as common on the web.

For the web version, I considered adding the action buttons inside each line. However, I discarded it because (1) the screen gets quickly polluted with lots of buttons, and (2) some buttons are dangerous and inlining them makes it more likely that the user clicks them by mistake.

Other forms have more columns or more buttons, they all more or less follow the same layout as a Windows app.

What would be the best UX design to migrate these forms to Web? Would it still be a grid with selectable rows and action buttons on the side?

  • 2
    Do you have any mock-ups of what you have thought of? Jun 6 '19 at 5:14
  • Who will use this, why would they use this and how should they use this? Jun 6 '19 at 14:44
  • Post examples of what you have now. Jun 7 '19 at 15:53

On web, it's common to distribute links according to their purpose.

  • Consider this page on desktop. Main content in the center. General question destinations on the left. Site-associated destinations at the upper right (profile, inbox, etc). When editing posts, actions are in a toolbar at the top (bold, italics, etc). Some buttons are at the bottom (post).

  • Consider a webmail application. The layout is similar. Main content also in the center. Folders on the left. Site-associated or management along the top. Email actions (move, delete, mark) in a toolbar above the content. When editing email, formatting actions usually at the top. Send and save buttons at the bottom.

For the specific sample form you've shown, the buttons look like they would work in a toolbar style at the top.

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.