I'm working on a project that returns paged results with volumes potentially in the hundreds of pages. I've been playing around with more usable ways to perform paging than the standard fisrt/last/next/previous links and jump-to text box. One alternative I had was to have a scrolling list of pages. I'd display 5 to 7 links at a time, centered around the current page, but add onhover actions to buttons on either side to scroll through the numbered list. This allows users to jump way ahead in the page count if they like without the combersome "Jump to" textbox. Does anyone have any better ideas?
If not, I'm trying to decide on a way to implement the above functionality, but I'm not sure how to display only a section of a div (with the div being the full list of links.) Any ideas?
You might find Endless Pageless an interesting read.
Depending on the data you can categorize it different ways and display an index. Pages is one way. Calendar is another, etc..
basically Master/Detail view.
Another option is to use a slider control that displays the current page (and/or record range) numbers in a caption bubble.
You could use a dropdown list containing page numbers.
Related
I have a requirement to split the screen into half and display the duplicate data on the other side of the screen. Initially this was achieved through a popup.
Hence user can compare the data without switching the screen. I want to avoid the use of iFrames for this. Could anyone guide me on how to get started with this. My application is pure Angular.
Thanks
Pretty much most of what you're looking for is in this tutorial:
AngularJS, Master-Detail page
It shows how to split the screen into two, and display a clickable list of items on the left, and an item's details on the right. But for your request, it sounds like you'd want the same on both sides..?
I'm looking to present a user with a list of items, allow the user to select the ones he wants, and order the ones he selected. I'm currently managing it with two list boxes - one of the available items and one of the chosen items - four buttons (left and right to move between the boxes and up and down to reposition items), and jquery.
Both the code and the current result look ugly.
I remember seeing a plugin (perhaps jquery) that could do this but I can't seem to locate it.
Does anyone have any suggestions?
You could try sexyselect -
http://www.sexyselect.net
Sexyselect was actually not capable of doing what I wanted, at least not in any easy way. I discovered asmselect http://code.google.com/p/jquery-asmselect/ which does exactly what I want very easily.
Currently for "group" management you can click the name of the group in a list of available groups and it will take you to a page with two side by side multi-select list boxes. Between the two list boxes are Add and Remove buttons. You select all the "users" from the left list and click 'Add' and they will appear in the right list, and vice versa. This works fairly well for a small amount of data.
The problem lies when you start having thousands of users. Not only is it difficult and time consuming to search through (despite having a 'filter' at the top that will narrow results based on a string), but you will eventually reach a point where your computer's power and the number of list items apex and the whole browser starts to lag horrendously.
Is there a better interface idea for managing this? Or are there any well known tricks to make it perform better and/or be easier to use when there are many 'items' in the lists?
Implement an Ajax function that hooks on keydown and checks the characters the user has typed into the search/filter box so far (server-side). When the search results drop below 50, push those to the browser for display.
Alternatively, you can use a jQuery UI Autocomplete plugin, and set the minimum number of characters to 3 to trigger the search. This will limit the number of list items that are pushed to the browser.
I would get away from using the native list box in your browser and implement a solution in HTML/CSS using lists or tables (depending on your needs). Then you can use JavaScript and AJAX to pull only the subset of data you need. Watch the user's actions and pull the next 50 records before they actually get to them. That will give the illusion of all of the records being loaded at runtime.
The iPhone does this kind of thing to preserve memory for it's TableViews. I would take that idea and apply it to your case.
I'd say you hit the nail on the head with the word 'filter'. I'm not the hugest fan of parallel multi-selects like what you are describing, but that is almost beside the point, whatever UX element you use, you are going to run into a problem given thousands of items. Thus, filtering. Filtering with a search string is a fine solution, but I suspect searching by name is not the fastest way to get to the users that the admin here wants. What else do you know about the users? How are they grouped.
For example, if these users were students at a highschool, we would know some meta-data about them: What grade are they in? How old are they? What stream of studies are they in? What is their GPA? ... providing filtering on these pieces of metadata is one way of limiting the number of students available at a time. If you have too many to start with, and it is causing performance problems, consider just limiting them, have a button to load more, and only show 100 at a time.
Update: the last point here is essentially what Jesse is proposing below.
I'm working with a product that has a web-based interface. The functionality is huge and is divided into modules. Access to each module is via a drop down menu available on all pages. Each menu item has at least 2 levels of drill downs (vertically)
Problem: Too many top level menu items
Solution 1: Group Elements (Logically) so that the top menu fits.
Solution 2: Reorganize Menu items using the mega-menu technique (à la republic.co.uk)
Solution 3: A menu that's smart enough to know how many elements to show and adds a '>>' sign at the left end. On hover/click/flick of the '>>' sign, the menu scrolls horizontally to reveal the remaining elements, also placing a '<<' sign at the right end.
Solution 4: (better than solution 3...) ?
Solution 1 and 2 will need a lot of soft skills, time and energy... I've love to have solution 3 or 4 .. Any ideas?
I think you first need to find out which solution is better for the user, before solving the technical details. You can do that by organizing usability testing. It can be a pretty lightweight process if you use the techniques as described by Steve Krug in Rocket Surgery Made Easy. (Or his previous book, don't make me think).
If you need another solution: why not have a single ajaxy autocomplete search box that contains all the possible module access menu items? That way the user doesn't need to scroll through a lot of lists and you keep the visual clutter to a minimum.
For example, see the MySQL website. It's only going to be used to rotate through about 3-5 "ads" to noteworthy areas of the site. I'd like to have some kind of link control to backtrack to the other content (again, like the MySQL site). Google gives me a bunch of very easy to implement stuff for the rotation itself, it's the link control that is difficult.
I found the cycle plug-in for jQuery to be very versatile. It can rotate elements in several ways and can add a next / prev control menu.