Good Morning to all.

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

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.

  • Welcome to UX Stack Exchange. We will try and help you with your design but this question needs a little clarification. You are asking to show more stuff on a single page without scrolling which simply isn't possible. The page is only so big so maybe an accordion is what you need? -- codepen.io/run-time/full/MYPGJZ
    – DaveAlger
    Commented Mar 13, 2015 at 11:12
  • Most students would not leave feedback if presented that many inputs on a single page.
    – DaveAlger
    Commented Mar 13, 2015 at 11:58

4 Answers 4


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.)


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.

enter image description here


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. enter image description here

  • thanks for reply... but again scrolling problem will comes in to the picture i want to avoid that so that i have designed something is that i gave imge on top but still i think there will be something better to come. do something from your side if you can.
    – user43589
    Commented Mar 13, 2014 at 5:06

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 :

Finished Form Example

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 :

Trello columns example

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.

Mock up created by the OP, please delete if it is not allowed for public

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.

  • thanks for reply....but can you show me something graphically
    – user43589
    Commented Mar 13, 2014 at 5:04
  • I have edited the answer to include more informations, enjoy! oh and one more thing, if you like my writings please feedback as I am interested in doing weekly case studies on user experience.
    – SAFAD
    Commented Mar 13, 2014 at 12:46
  • Your edit was not accepted due to it being a comment, Although I have not understood what exactly you mean. If I am not mistaken, do you mean to tell me what to do when you have a long comment? I will edit my answer to include that :)
    – SAFAD
    Commented Mar 15, 2014 at 16:49
  • That is what I want to tell that if comments and management response comments goes on increasing then it will not look very good so what to do in this case. and in my app. there are more than 10 people who can give comment on that question so it will become long List and what design i have made will increase only those two column and so that it will not look too good.
    – user43589
    Commented Mar 18, 2014 at 3:35
  • as I said, Use the more and less buttons to show the other comments, you can limit the extra content shown via more button to 10 comments, and then when the user clicks more it shows 10 more... etc Combine this with modals, on that column you just show the user who commented, and make it clickable, on click show modal of his comments.. I will add extensive information on how to achieve this later..
    – SAFAD
    Commented Mar 18, 2014 at 14:00

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.