2

There are two UX patterns that I have noticed in many applications when it comes to filling in details.

  1. Creating a new entity or editing an existing one through the sliding panel Clicking on New would bring out the sliding panel

  2. Opening a new page to enter the details. This is seen mainly in places where there is a need for tabs or there are too many entries to provide. enter image description here

What are the scenarios where one would be preferable over the other? Is it recommended to use the new page pattern if there are more than a certain number of fields to be entered into the sliding panel?

  • 2
    Why not just add a new row and let the user enter details directly in the table? This would make it easier for the user to visualize the final data and make the process more streamlined – Shreyas Tripathy Nov 28 '18 at 5:33
  • @ShreyasTripathy While not every new entry needs a full page (both a sidebar as in the example, and a popup box in the middle of the page are common), it is extremely common that the table of data has some combination of: Truncated fields to make all the columns fit, missing fields due to lack of space, fields displayed in a summary/abbreviated format that doesn't lend itself to proper editing. So just adding a new row is not a solution most of the time, unfortunately. – manassehkatz-Moving 2 Codidact Nov 28 '18 at 5:39
  • Okay. In that case the answer would vary based on how detailed or complicated the data is. An entry that requires the user to enter about 5 fields can be shown in a pop-up. But if there are more fields than that, it's better to take the user to a different screen. Personally, I would avoid the 1 because that generally is used to represent filters and searches on table or list-based screens – Shreyas Tripathy Nov 28 '18 at 5:49
0

As always, it depends. But in this case I wouldn't be surprised if many applications build one or the other based on technical considerations.

Technical considerations:

A sliding mechanism like you propose only works if you have enough screen size in width. If most of your users use smaller screens the mechanism would not work that well because it simply doesn't fit. This would mean that for smaller screens you'd probably need an alternative to the sliding panel. Most of the time in the form of opening the sliding panel on a new page to keep the focus on data entry. This adds to development time, for a mechanism which is only of use on wide-screen displays.

The second proposal is fairly straightforward, and doesn't require much javascript to get to work (basic html) which makes it very easy to build for most developers, plus, it works on any screen.

UX Considerations

From a UX perspective I would take several things into considerations:

  • Also screen sizes. You want to cater to the screens your users use. Sliding panels are applicable on wider screens
  • Number of elements. If a new entity requires a large amount of information to be created, possibly not fitting the length of the screen, opening a new page would be favorable to overcome cramping too much into a small space
  • Focus. Will it harm the user to open a new page? A separate page brings focus to the task at hand, while a sliding panel will make a page cluttered.
  • Speed. a sliding panel should speed up adding a new item. If this is required, it would provide a case for sliding panels.

Overall try and figure out whether it will help the user, or whether it is just a cool feature. A sliding panel sounds awesome, and will look good in pictures. But if it goes against the points mentioned above I would advise against.

My own opinion

The space you want to use for adding an item is IMO more often used for detailed information of an object you select in the table, rather than adding a new item. This follows the reading pattern of most western countries,where people are used to start on the (top)left, and changing their gaze to the (bottom) right. Left most important info, right least important or last in succession.

  • Email clients have folders left, list of email in middle, and opened mail on right. (creating new email often in a new window)
  • Finder/Windows directories: left are the folders, middle the files, right detailed information.
  • Stackexchange features secondary lists and items on the right.
  • etc.

Important/primary tasks are often done in the center of your screen, leaning to the left. Not on the far right.

Bonus You are missing the option of a lightbox/modal/overlay for quick addition of a new entitiy. This is quick, and much easier to apply on multiple screens. On mobile a modal would simply be shown as a full page.

Hope this helps you a bit.

GW

| improve this answer | |
  • Thank you for the answer. It is really helpful. Would you recommend using both the patterns in the same application based on the context? So for certain entities with less than say 5 fields we use the sliding panel (waste of real estate to use a new page) and for other entities with more fields using the new page pattern. What would be more important? Consistency or context-specific control? – Dossoh Dec 3 '18 at 2:52
  • I would try and go for a solution which works for every situation. Consistency is king. Only deviate if there's no other solution. – GWv Dec 3 '18 at 8:03

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.