[UI] A better action box
|
FlamingFoo
Joined: 2005-03-09
Posts: 14 |
Posted: Wed, 2005-03-09 06:15
|
|
Here is a demo of a CSS-based action box that could replace existing dropdown. Original: http://www.absolve.com/main.php?g2_view=core:ShowItem&g2_itemId=6&g2_page=1 Benefits: no click required, user can see and click most important actions without having to scan all the junk inside dropdown. Anything can go inside now, for example submenus and action icons. |
|
Posts: 239
This appears to work in FireFox, and IE. So far FlamingFoo and I have discussed it quite a bit, and we want more ideas from everyone else.
Thanks!
Posts: 32509
kinda cool, but i'm not sure if the majority likes it more than the usual drop down list.
what about a poll?
Posts: 14
valiant: any reasons for that? Or you expect the ordinary disapproval of everything new?
Posts: 3236
To tell you the truth, I agree with valiant. The primary purpose of gallery is to display images, there is no reason to take up so much display space with infrequently used options. Such a miniscule number of users will ever want to add the photo to their basket, print it or download it that it just doesn't make sense to force them to see the options ALL the time.
I do however like the idea and think it could be applied else where. Perhaps if there was an "edit" or "admin" mode that could be invoked inside an album, this would be the ideal place for it. When you are going through an album and fixing rotation, adding captions or generally doing stuff that you want quick and easy access to many functions, this could be useful.
The color, shape and placement actually draws my attention away from the thumbnail itself, but this could easily be corrected. Maybe if the whole thing were smaller, with perhaps the SINGLE most used function always appearing and having the rest hidden?
Posts: 14
I have modified the colour of it to be less annoying and left a single entry in it. It would be even possible to limit the thing to a single line that says "Perform Actions..." and all the actual actions hidden in pop-up menu and its submenus.
Posts: 3236
I think the changes you made make it look really great! I would actually like to see a mock up of the matrix theme, which places these things under instead of to the side. Is there a way to make it expand ONLY when you have the mouse over the "more actions" instead of over the whole thing?
Posts: 32509
+1 for your modified take. less distracting and small = good and much better than a ugly drop down list. well, the drop down could be made a little more beautiful as well. but generally, i like the new modified version better than the drop down list. perhaps make it even less distracting, you could experiment with different shades and different colors
Posts: 14
valiant: refresh to see the "minimal distraction" variant in right column. How would you make it more beautiful?
Added: a different variant that uses a downward-looking triangle to indicate expansion (yes, the image is ugly, I know that).
http://24.80.14.84:5190/web/gallery/main2.htm
Posts: 3236
I vote very strongly that the current main2.htm right version take the place of ALL G2 drop down boxes. Please! Snap Snap!
Posts: 9
Yup I agree with FryFrogs last comment, that menu thingy lookz pretty damn snazzy...
John
Posts: 164
I can't get either of these two links to work for me:
http://24.80.14.84:5190/web/gallery/main.htm
http://24.80.14.84:5190/web/gallery/main2.htm
Posts: 32509
KAC, they work for me, don't forget to activate javascript.
FlamingFoo, main2.htm, but a mix of the two.
text "Item Actions" when not selected, but make it more "distracting", a needs to make a little distraction, i.e. signal that it is an active part of the page. i.e. make it blue text like a link or make the background a little yellow or something.
this is nearly perfect
the html form drop down list required javascript anyway, so this is no argument against the new solution. and it seems to work IE6, Firefox, and opera 7.11.
Posts: 14
Those are pure CSS rollovers. No JS is needed for Gecko or Opera. MSIE needs it to allow proper :hover support.
KAC: if you have a problem, give me problem report. Tell me how exactly it fails, your browser, platform, state of relevant settings, anything else that could be important... I am not a mind reader.
Posts: 3236
Hahaha, I was working with him to make it less distracting... Gallery is for browsing images, not being distracted by menus that are trying to get your attention. They look enough like drop down boxes to attract anyone that needs to use them and at the same time they won't attact the people that don't need to bother.
Posts: 164
Those links didn't work for me with IE at my office. I got the usual page you get when a webpage is not found. I openned the links fine with Firefox at home.
I think both methods are good. It's really a matter of what you are/get used to using. It would be nice if the admin could turn either on or off and chose between them. Just my thought.
It's amazing to see what you programer guys can do. Although I'm not a programmer, I love watching and following the progress. Good work!
Posts: 32509
as long as it's editable by css, it's great. IMO "Item actions" should be the default link color of the theme to signal that it is an active field, something to interact with.
Posts: 3236
KAC, I bet at work your company runs a transparent proxy on port 80 to block / cache internet browsing and blocks almost all other outbound ports. His example sites are running on something like port 5000, so your work firewall doesn't let you view it. I have the same issue at work
Posts: 1023
Just voted for "Original" - I feel the normal dropdown menues fit better into the overall presentation. The alternate style "jumps out " too much.
Posts: 14
valiint: I avoided using link colour, since this is not a link and it is not clickable. However, changing colour to link colour is a one-liner.
LFrank: Is there any specific component of it that feels too "imposing"? Borders, boldness of text?
Posts: 1023
FlamingFoo, I personally don't like the yellow background and the size not so much. The color for 'popping' out of the theme and for the size, I would prefer having it the same width as the column (as the dropdowns) are.
So, if it would have the same width as the whole column and a color more like a light grey it would - I assume - look more harmonic (at least to me).
Posts: 3236
LFrank, I think you need to re-visit or refresh both of the pages. He has modified them VERY considerably. I actually like that they do not take up the same amount of width as the drop down list. To me, the point of gallery is to show thumbnails... not distract people with so many things taking up space.
Posts: 164
Thanks, man. That explains it!
Posts: 1023
fryfrog, oh - it looks better ;)
Nevertheless, I would prefer the option below DSCN2083.jpg (only seeing the "Item Actions"). And if this text would be aligned to the bottom of the thumb-box, it would even start to love it ;)
Thanks
Lutz
Posts: 14
Text alignment is fine for me. I don't do anything special to it, and allow browser to render text as it normally would.
. Should be fine now.
And please pardon me for having those broken for some time. I am trying to improve them, and does not always end nicely
Keeping width that is sufficient to fit in all the entries, and no wider is kind of hard. I got it working "nicely" for Opera and FF/Moz at http://24.80.14.84:5190/web/gallery/main3.htm , but IE requires heavy hacks, and I do not feel like adding a load of crap to code just to kill hover width expansion. It is fine for me already, and I don't want to uglify the code to fix something that might as well be considered a feature ;).
Posts: 32509
looks very good in firefox.
alternatively one could try to get rid of the dark border of the html form drop down list. i guess that makes it uglier -> unfair comparison
Posts: 7994
I like this. Even if I didn't like it, I'll defend the right for somebody else to like it. This means that we need to make sure that our theme designers have the liberty to make changes like this.
We've discussed this quite a bit in IRC over the past day or so and I think that we have a tentative plan for how we can give this kind of power to the theme designers. It'll take a little while to evolve though. In the meantime, it would be nice to build up a library of widgets such as this one so that we can get a set of UI building blocks that's a little better than the standard HTML widget set.
Posts: 32509
What's the status on this and involved G2 architectural changes?
The action lists looked great