This Design is Still In Progress
These designs are still a work in progress, and are actively being worked on. While discussion and comments are welcome, please treat this material as such.
What problem are we solving?
Allow users to break up long lists of items into separate pages. They should be able to decide if they want paging and how many per page.
Currently in Sakai:
Sakai has page navigation called "List Navigator UI Component" in the Sakai style guide. The default for how many items to show on a page varies. How many makes sense depends on context, how many total items, what type of items, etc. The idea here is to make this navigator remember the users last setting (across sessions). That way they set if for what makes sense given the current situation and it is persistent. As things change for them they simply change the setting to meet current needs and again it's persistent until they need to change it again. Currently this is a "one size fits all" default and many users have to change it every time they visit a particular page.
Who are we designing for?
Persona goes here.
What needs are we meeting?
Functional Requirements - Use Cases
- Allow users to change the number of items shown per page
- Allow users to jump to the first, last, and the "middle" pages easily
- Allow users to jump to an item or a certain set of records (e.g. students with a last name starting with "G")
- Allow users to sort the list
- Allow users to filter and view a sub-set of the list
- Minimize screen real estate taken up
- Be aware of the length of list and do not display widget when there is only one page
- Show users how many items there are and where they are in the list (i.e. viewing 11 - 20 of 2,356)
References / Competitive Analysis
Note: See attachment: Paging-Design-Examples.pdf
Note: Many of the below are for search navigation so should be used strictly as a reference for more robust web application pages where users need to actually do something with the items in a list (other than just choose one).
Item Navigation (long list of items users may need to do something with)
- Sakai's "List Navigator UI Component" in style guide & Item Pagination design pattern in the Sakai Design Pattern Library
- "Item Pagination" - Yahoo design pattern, http://developer.yahoo.com/ypatterns/pattern.php?pattern=itempagination#
- gmail paging
- netflix.com - no paging is just a long scrolling list
- In this case we are probably giving the user the wrong thing when we think of giving them a list that big. If they are looking for something
in a huge list, things like a user or site or email, probably the first step should be to offer them a way to search or filter the list to help
them narrow things down and find what they need, without having to wait for whole thing to load up. I suppose there might be some cases where
they do want a whole long list, maybe to print the enrollment list for their course, but then paging can make that more difficult as well. - Peter Knoop
- "Search Pagination" - Yahoo design pattern, http://developer.yahoo.com/ypatterns/pattern.php?pattern=searchpagination
- "Paging" - UC Berkeley Web Patterns Library, http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/pattern.php?id=18
- amazon.com, http://www.amazon.com/s/ref=nb_ss_b/105-2487600-6556431?url=search-alias%3Dstripbooks&field-keywords=interaction+design&x=0&y=0
- http://humanized.com/reader/ (start scrolling down and you will see more data added to the page via AJAX) - This ajax paging scheme works great if you have a ranked ordering of items that the user wants to see (i.e. a blog with most current on top). But this may not be the best approach to a Gradebook that has hundreds of students and you want to get to the students with last name of "P"... then you would want to jump to a particular page and not scroll down (or click next) through a bunch of irrelevant pages. - Ryan Lowe
- Please see attached PDF for other paging examples
Informal User Survey
Since I (Erin) don't have easy access to Sakai users, I surveyed my friends to get some perspective on paging other than my own. This may be a skewed view from a more tech-savvy set of users who aren't familiar with Sakai at all (but are with web in general and paging specifically). With that said, here are my findings.
In summary, many users finds it bothersome to click through multiple pages to view a list of items. Users will often set the number of items per page to the maximum to see more items at once. In a list where newer items gets added to the top of the list (email inbox, announcement pages, etc.) users tend to care less about the number if items displayed per page, because they are typically only concerned with the new items, which are all shown in one page. In a list such as the search results, where users are looking for particular items, more items per page is preferred. In an alphabetically ordered list (roster, address book, etc.), allow filtering (narrowing down the list as user types in more characters), unless paging by alphabet can be provided (problematic when the user re-sorts with a different column).
• [Referring to their email inbox] "I think by default it was 25 or something.... and I think that's too little."
• "I don't like having to scroll thru multiple pages ever...I like seeing everything at once"
• "I set it to whatever's the maximum."
• "I leave it at the default."
• "Have u used the Google Reader? RSS. I like that. Loads more dynamically as you scroll down."
• "I put eBay to the max of 200. It is by default 50 and I hated it. GMail I do not care about the size of 50 because I do not get more then 50 emails a day and they are sorted by most recent first. On eBay there are more then 50 new listings each day."
• "I personally prefer long list on one page to multiple pages."
Discussions and Open-ended Questions
- User would like to see how many students (or announcements, assignments, etc.) there are, rather than how many pages of those items there are
- Symbols such as |<, <, >, >| are frequently used in paging. But are they sufficient, or do they need to be accompanied by wordings such as "Previous" and "Next"? If so, what do we call |< and >|?
Depending on the context, |< could be called either "First" or "Newest", >| could be called either "Last" or "Oldest". Are there any other cases?
- Should each list remember what the user set as the preferred page size (number of items per page)? Or should there be a global setting for this that would affect all of the tables?