Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question

2 Answers 2

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

share|improve this answer
    
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 Mar 13 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.

share|improve this answer
    
thanks for reply....but can you show me something graphically –  user43589 Mar 13 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 Mar 13 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 Mar 15 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 Mar 18 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 Mar 18 at 14:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.