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.
Related
Might not be the BEST fit for Stack Overflow, but I trust you guys, and a lot of you are the best web devs around, so here goes:
I have a web app with several groups of phrases. For each group, you put 4 "answers" in order of most like you (it's a personality test).
I made a fancy svg and responsive, game-like system where there are 4 clouds that you click on in the order that you want. But it's html5/css3/svg effects with a lot of transformations and it only works on some browsers
I don't know any design "theory", but what I need to figure out is how to make an extremely simple, fully cross-browser and cross-device way to do the same TYPE of thing.
examples:
list each group of 4 answers with a dropdown box next to each one where you can select 1-4
drag and drop them to put them in order (jquery. but this won't work on touchscreens)
put and "up/down" arrow next to each one (like some windows dialogs)
use radio buttons?
YOUR SUGGESTION HERE
I hope the question is clear. I'm a web developer looking for a cross-device "ui widget" (or idea) for putting sets of 4 "answers" in order.
Any suggestions?
I have an idea regarding this. Hope this will be helpful.
Please do comment if you have any problem to understand my above image.
I have an application I'm developing that has some multi and single select lists that can contain a lot of items. In the interest of time I don't really want to write my own widget right now, but I'm having a lot of trouble finding what I want.
Here are the requirements:
1) It must be a select list under the covers; I'm using ASP.NET MVC3 so so make form submission and model binding easier I really need it to be an actual select list
2) It must be searchable
3) I really want selection and deselection to be a single click (rather than ctrl+click to select multiple items)
4) A select all and deselect all would be a plus
5) Bonus points if it uses jquery UI as a base, since I'm already using those libraries
6) it must NOT use theme roller for styling...it has to be easy to independently style
7) No side by side type controls where the selected items go on the right. disliked by the designer and myself.
The closest I have found is http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/, but number 6 ruins it for our use. Why don't we want to use theme roller you ask? Well I am no CSS guru and our designer hates it, so its out of my hands.
I have found quite a few things that have one or two criteria, but non that have them all.
Can someone save me from wasting days (at minimum) rolling my own widget?
I just finished a project where I needed one. I spent a long time trying to use this one:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
HOWEVER I really found it limiting and it caused weird things to happen to positioning of form elements in position:fixed divs as well as being tricker to show/hide and animate so I changed to this:
https://github.com/ehynds/jquery-ui-multiselect-widget
which was way better in my opinion also it was simpler to implement and didn't mess with anything else on the page so much.
Best
Alex
Pretty simple question.
Its just some advice based on personal opinion and best practice.
It's difficult to explain so I'll draw the best image I can.
Try to imagine that I have any old website and at the very top I have a navigation bar which is broken into 3 rows.
Top is application: Settings, Profile, Login/Out
Second is notification: Error, new message
Third is part navigation part functional.
So we have 3 rows supporting different functionality and obviously different color schemes. Each on is no more than about 5% of the total pages height.
I supposed the question I'm asking is whats the best way to do this.
First guess was to use tables to format the data and space them out:
This worked, but It looks sloppy.
{
border-collapse: collapse;
border-spacing: 0;
}
seems to fill in any gaps in the table but it doesn't look right
Second guess was to use frame sets:
Shot myself a dirty look for even thinking of it
Third guess was to keep everything css and Html
Which seems like the most sensible one next to tables but keeping content organized with the multiple buttons and such sounds like it could be trouble.
Lastly
was use a JQuery or javascript UI library. This presents It's own set of problems but could be the prettiest if done right.
So if it was you, how would you go about doing this simple task and why?
picture of view as requested. Part in question is top nav
http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=globalview.jpg
Don't use tables for this purpose.
Only use tables for tabular data (which this isn't).
Just use divs for the containers and lis for the menus.
EDIT
This is somewhat like I would do:
http://jsfiddle.net/uf2zU/1/
This uses elements what they are meant for.
And can be easily controlled using CSS.
EDIT 2
http://jsfiddle.net/uf2zU/4/
I would go about this using sets of HTML uls and CSS, because that's the most forward thinking, plus it uses HTML the way it should be. However, if you want to use tables, try border: none; and border-collapse: collapse;
I would go with the third guess for the presentation part, because that's the most flexible part, at least for me. If you split up all the sections correctly, then the task of managing the content will become quite easy, because you will be able to target the section and style anything with it.
In addition, I would go with the last option (i.e. vanilla JavaScript and jQuery), for client side functionality, because that's the Swiss Army Knife of DOM manipulation.
A horizontal nav bar just that -- a horizontal entity. Therefore, I wouldn't "stack" elements as rows, rather as columns. It's the difference between a huge header and something that's visually much easier to comprehend. Stretch your elements out, use icons, whatever. If you have the need to be really verbose, go with a giant menu
I personally use JQuery UI Tabs whenever possible because they're a well-established UI pattern, are easy to deploy, and automatically "Ajax Load" my pages. Sure, you get a few "gotchas" but they're nothing for a competent jQuery user to overcome.
In situations where I can't use UI Tabs, I will do a pure CSS bar across the top, "floating" via absolute positioning if that is what the client specs. Layout is no place for Tables (they are for tabular content elements) and you're right that frames have no place, period. This shouldn't be any more difficult than basic page layout, so it's a no-brainer to go this route.
For notification, there are other options that are more obvious and timely. Try the Notification Widget or StackOverflow style notifications All other small, basic info could be contained on your horizontal bar.
Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)
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.