What are some ways to manage more data on single page without scrolling?

Question

Good Morning to all.

i have to manage say more than 10 column on single page, for Ex=

It is application say student want to give feedback for teacher and according to fields student have to answer.

Above is my work done but i think it is repetitive work i am showing to user. for example: see SR.No 1(by Mistake all are 1) but see first row, in that Comment,Management Response, Item(i.e. Task Assign to particular User), attachment are common columns for all row so i think can i combine all of them and put it at top right corner so that when user want to give answer that will be there and when question change it will get blank for that question.

Any ready design will also help me. please suggest me something that will solve my problem. thanks in advance.

Answer 1

1. Less is more

Trying to fit more stuff on a single page isn't the goal of providing a good UX. Figure out what the primary task at hand is and only show that. If additional details are needed in rare cases then hide those until the user requests them by clicking a show advanced options toggle button.

"Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."

-- Antoine de Saint-Exupery

2. The size of a page is fixed

You can only fit so much on a single page and when designing a web application we can't ever be sure what that size will be. You have the right idea about showing the most relevant information on a single page without scrolling but that isn't possible when users can input whatever they want.

3. Expand / collapse groups of data

If there is more content than will fit on a single page then you can group data together using an expand/collapse component which allows a user to work on one piece at a time.

4. If you have to scroll then scroll vertically

Even after using all the methods above there still comes a time when scrolling is unavoidable. Specifically in your case where users can input notes of varying lengths.

Wrapping the content in a reasonable width and then having it scroll vertically provides the best experience on most devices (touchscreen, mouse wheel, etc.)

Answer 2

Is the user required to enter every field for every question? If not, consider using progressive disclosure to make the initial cognitive load on the user a little lighter.

For instance, if the initial state of your screen was just a list of questions and text-entry boxes for comments, it would make the task very clear to the user. As the user decides to answer questions, you could show additional input options like compliance, attachments, etc.

Answer 3

Let us say that the data is shown in tabular form. Repeating columns data can be shown only once in a panel above the tabular data and distinct columns can be shown in tabular form. Number of columns shown in tabular form is limited by the horizontal space available on screen. Rather than making the user scroll horizontally, place the extra columns in the below panel, and this panel will be refreshed with corresponding data, every time record from the tabular data is selected by user.

Answer 4

Why not use horizontal columns? It looks less repetitive and wont take much space, and neither causes bad eye experience (as it looks more stacked and more organized).

Let's take an example of International Student Calculator by Brightside, as you see here, you enter, and it show to horizontal columns, one is for income and the other for the outcome, each column has its questions, my idea is to change your layout to something this similar, columns with teachers' names, and under it are questions the students are those questions, and once they finish all the columns a call to action button appears, as to "send" or "save" see the image below :

Now let's say you have too many columns, there is always a solution to arrange them instead of making the cluttered in each other, and for this we take Trello by Fogcreek as an example, Trello also uses columns to organise boards, but if you add too many boards it keeps adding the columns on the right, until they are not visible, it may seem bad but it is not, as the Fogcreek folks done hell of a good job on the interface, see the image below :

So what did they do to make the user notice that there are hidden columns on the right? simple!

They have not hidden the columns entirely, but instead, they have shown a little part of it to make the user notice that he has other columns that are not visible on his screen.

Also, they have made the Horizontal scroll bar always visible, so the user can tell that he has other columns that are not visible on the right, Another thing of Good User Experience is the the scroll bar itself, the color stands out from the background, which will cause the user to notice it, another thing is the size, the color alone will not help if the size is a regular scrollbar, so they made it larger and impossible to not see it.

The student going to your program must "always" know that he is going to comment and grade his teacher before reaching this page, as he will be expecting many forms to fill.

Along with the horizontal create fluidity in your page, it will be complex to make, but for the sake of the end user it will remove the repetitiveness and adds the factor of "fun" to your page;

An example of the fluidity would be making the design adaptative to the student's previous answers:

1.how much score you give X? X>7: 2. What is the most thing you like in this teacher's classes? X<4: 2.What bother's you most in the classes? Make the X>7 question a text field for comments, and for X<4 a drop down of most common things that students dont like in the class (material is hard, boring environment....)

Etc..... EDIT : Thank you for creating this prototype, I am sure it will help other community members and visitors that are facing your problem.

Another thing is that how to deal with long texts in the small area provided. The solution I am thinking of now is stripping the content at 300chars, and add a "more" button at the end of it, if the user clicks on it, it shows the the extra content in the same box or in a modal, don't forget to add "Less" button to hide the content and not allow it to ruin the UI. Another thing I would suggest is that along with the "More" button, is that you add how many words left, so the user can have an idea on how much more he is going to read, if you are going to use a modal, I suggest you to add a small icon indicating that the extra content will not be shown in the same area, and not freak out the user.