I'm writing a web app for accountants managing employee salaries in organizations.
The accountants request is while editing an employee salary form parameters to preview it's
Paycheck report.
The only solution I have is to open the paycheck report in a separate browser window or tab.
But the drawback is that for every employee then it will open a new browser window which is heavy in terms of user experience and OS memory.
Is there a better UX solution here?
Is there some js plugin that can help?
Add a comment
|
3 Answers
There is no reason to open it somewhere else. Your window is an endless canvas, open it there. This also probably solves the users' problem much better: they want the information on paycheck to be present while editing salary, but having to switch to a new window, commit the needed information to working memory and come back to the original editing window is terribly expensive in cognitive terms. Showing the needed information side-by-side is a much better solution.
The right hand space would be a standard placement for such a preview. Make your editing form narrow(-ish). Then put the paycheck report to the right. See the Windows Explorer preview feature for MS Office and PDF files as an example of what I mean. There is no Excel instance running in the screenshot, it is Windows Explorer which renders a preview.
Modern programming languages will support this well, so it is easy to achieve programmatically. For example, ASP MVC has partial views which can be rendered in different divs.
If you haven't been doing responsive design, this is an additional reason to start now. Your horizontal space will become much narrower for both the entry form and the paycheck display. The mobile size will possibly need a way to slide from the one view to the other, because you can't possibly fit both on a phone display. On the other hand, if your accountants have to change salary data on a phone, the company has a problem which has to be addressed outside of your application.
Agreed with Rumi - use your current window.
As far as I see it there are two basic solutions you could use: live preview or preview on request.
Live preview
With this, you have a permanent preview pane in your window, preferably above the fold or at least in the same area as the edit pane. Whenever the user makes a change in the fom you live-update the preview to reflect this. Pros are that it's always there and the user can just look over at it; cons that it takes up screen space and may squash your edit form too much.
Preview on request
This option has you include a Preview button in your form, that when clicked will bring up a preview of the report. This can be done in several ways:
- Bring up a modal dialog box containing the preview
- Use a lightbox effect and overlay the preview
- Open a separate window
As you say, I wouldn't recommed opening a new window. But the other two idea have equal weight and either would work: it is appropriate to open a modal dialog as the user has requested something, and lightboxes are similar. Either way, you would need to recalculate the report as you haven't already got it.
Pimcore CMS has an example how to solve this. Instead of opening the preview of a page into a new browser tab or window, it has it's own tab (it's build on ExtJs) where the page is loaded into an iFrame (see the image). I doubt users use this very often though, in edit mode the page is already shown as a "real page" but with inputs and drag and drop stuff. I recommend doing it this way so users don't have to switch back and forth, but use the preview button only when they are unsure what it will look like.
