chrispederick.com
Does Web Developer Have Too Many Features?
- Web Developer
- 32 Comments
- 2 years ago on October 22, 2005
I have read a few posts online recently that started to make wonder if the Web Developer extension has too many features and that this feature overload is reducing the usability of the extension.
What Started Me Wondering
First, Garrett Dimon posted Be Careful What You Wish For in which he says:
Knee jerk feature addition involves little to no deeper understanding and can be very harmful to the success of an application.
Then Jason Fried posted Forget Feature Requests and suggested this method for dealing with feature requests:
So, ask for requests, read the requests, listen to your customers, and then forgot what they said. Let them remind you over and over and over again. That’s how you find the real gaps in your product.
I found both of these posts interesting, but what really made me tie them back to the Web Developer extension was Roger Johansson’s post about Evaluating Web Sites For Accessibility With Firefox where he writes:
I regularly use the Web Developer Toolbar for evaluating accessibility, but I never realised some of the commands Patrick mentions existed. Outline Custom Elements, Linearize Page, and View Form Information are all very useful commands that I’ll be using a lot now that I’ve been made aware of them.
My Process
Feature requests for the Web Developer extension come in via either email or the forums and as long as I feel the request makes sense then it is added to the to-do list. I typically then work on the features that I consider to be the most useful or are getting the most requests, as well as any that can be implemented easily.
This is fairly unstructured and means I do not necessarily have a clear vision of what I am going to be including in the next release. Over time this has contributed to the menus becoming more cluttered and harder to navigate.
Extension Improvements
In version 0.8 of the extension the menus were tidied and I have repeated this exercise for the next release. In addition to adding menu separators, I have also replaced the alphabetical sorting of features with something hopefully more intuitive. Now the features under each category are grouped by behavior in the following order:
- Disable functionality
- View functionality
- Edit functionality
The new CSS menu can be seen here, for example. As soon as I made this change I found the menus easier to navigate, although it will take a little time to get used to some of the new feature locations.
I think the biggest improvement that could be made would be to write some better documentation, but this is always a lower priority than development.
Thoughts?
As much as anything this post is about soliciting feedback from users of the Web Developer extension.
Do you find the extension confusing and unintuitive? If you do, is this because of the menu layout or has the extension just become bloated with unnecessary features? Do you think some features should be removed from the extension and, if so, which ones? What other solutions would you suggest to make the extension more intuitive to use?
32 Comments
Delete Superfluous Words - I’ve started to do this a little bit, although not quite to the level you suggest. I’ll consider this.
More Sub-menus - I’ve done exactly this as part of the menu reorganization.
Tools vs Validate - The tools menu is completely customizable by the user and can include options other than validators. For example, in the next release this allows opening the current page in another browser.
I’m not sure I completely drink the “simple is better” kool-aid.
It works for 37s, but for a monkey-wrench tool like Web-dev, you’ve got the right attitude: Add the important features, make sure they’re easy find. (As opposed to not adding something at all, purportedly to maintain “simplicity”.)
After all, your users with Web dev are used to powerful tools.
There is no doubt that some of the features seem to have no purpose at all.
There is a function to disable images then another that says “hide images” and right under that “Make images invisible”.. What the…? There is certainly some feature overload but as bloated as it is, I would think that there are a few differences but are all 3 really needed?
I’ve been a developer since ‘97 and can’t think of a use for many of the features. I guess ultimately feature overload is better then not enough features. What I would like is perhaps the ability to go in and hide and arrange menu items that I know I’ll never need. I did notice that your screen shot of the menu is different then mine. I don’t have have lines seperating different sections of the menu so perhaps there is a newer version that is already better organized.
Results of a 15-second experiment:
- Disable images shows the page as it would be if the image file was blocked or could not be found.
- Make images invisible replaces all images with a transparent image, so you can adjust spacing, floating, etc. without the image’s content in your way.
- Hide images takes them out of the flow completely, allowing text, etc. to reflow as though the images were never there.
Perhaps the terminology could be explained, but the differences are easy to see.
As for the menu separators, that was the subject of the entire “extension improvements” section. There’s text up there too.
But I agree that the ability to customize the menus would be fabulous.
I think you should go for the important ones first. My philosophy is ship, and ship frequently. People like updates and they want them often.
I’ve kept it to myself that I’ve been itching to see the editHTML and editJavaScript features mainly because I know you have a lot on your plate (or you’re lazy - which I’ll buy - I’m lazy too).
With that said, it becomes cumbersome to sit around and wait for ‘The Big Release’ with ‘All the promises’. Look what happened to Microsoft with IE7 (and I really didn’t want to pick on Microsoft because they’re doing such a great job now with their new release of IE7). So by all means, take your time, and my advice is to put out an update before folks forget there’s still a project going on with the web dev toolbar.
I’ve been using the extension a lot over the last few weeks and I’ve found that I’m flitting between different menus a lot. There seems to be a subset of functions that I’ve been using more than others, but they’re spread across the menu system. My top 5 are:
CSS->View style information
Information->Display topographic information
Information->Display ID and Class details
Outline->Block level elements
Outline->Custom Elements
My frequently used set is going to be different to everyone elses, and might even vary depending on what aspect of development I’m tackling. It would be nice to be able to set up a custom menu or toolbar with my frequently used commands so that they’re all in one place. Being able to edit the hotkeys for a command might also help, I do find those 3-key combos troubling.
Outline->custom elements is particularly tricky as you have to go all the way back in to the dialogue to turn it back on. A way to toggle this display on and off more easily would be useful, but non-essential.
One other thing that I’m not sure if it is already mentioned is that there’s sometimes a function that makes sense in two (or even more?) menus. Just open the “image” menu. All those outline things should be available as well in the outline menu. Same for “View Image Information” (should be in “Information”, too).
It wouldn’t be that much more entries if you’d put e.g. all image outline entries in a submenu. Sometimes I’m really searching the menus wondering where some function was - since tehy make sense in both menus. (And you could save a LOT of those image entries if you’d make those more “globally” by adding them to the “custom element outline” dialog. I mean without this and that attribute, with the attribute empty…. those are all newer CSS selectors, I’m not sure whether you select via CSS or JS, but it would be nice to be able to e.g. outline all divs with class XYZ. At least on newer pages where almost every element is a DIV it’ll help you understanding the page’s layout much faster than having about 20 boxes in the page… you know)
thanks, xeen
Some follow ups…
Mike - I agree that simple is not always better, but when someone as talented as Roger Johansson is not finding the extension totally usable then it raises a red flag.
dustin - None of the feedback here will impact the release of the next version. This is about improving the extension going forward. I wish I could commit to releasing frequently, but working on the extension for free in my personal time does not always make this possible.
Jonathon - The keyboard shortcuts set up by the extension are all configurable in the options and I am planning on adding more keyboard shortcuts in the future. However, I agree about the clunkiness of the ‘Outline Custom Elements…’ feature.
xeen - I am not sure putting some features under multiple menus will help the situation and I am hoping that the menu reorganization will make some of those features easier to find. Outlining all divs with a class of xyz can be done through the ‘Outline Custom Elements…’ feature by entering ‘div.xyz’.
I couldn’t agree more with some of the points the others made here.
First off, I like the restructuring of the menus. While you’re at it you could also de-crowd the Miscellaneous menu by grouping the elements logically. The first points would fit into a “private data” submenu as it is called in Firefox 1.5
Next, you should really improve your release cycle, even or because of your lack of time. The current “done” list is quite a lot already and people have to get used to lots of changes.
Maybe you could concentrate on developing 3-4 features, complete the development and release.
Other than that I am liking WebDev very much. Thanks for your efforts.
Bazzi - good idea with the “private data” submenu.
Let me touch on the release cycle as this keeps coming up. I totally agree that this latest release has been too long coming and includes more functionality than it should, but this was due to unforeseen circumstances this summer that delayed my intended release date by a few months.
I am doing final testing of a release candidate and hope to do a public beta release in the next week or so. This will then form the 1.0 release after any major bugs have been fixed.
Hopefully then I can return to the more regular releases that I was doing previously. However, I cannot guarantee this while the extension is not my priority and my full-time job and personal life can take over at any moment.
I just can’t live without this extension anymore.
I’m here to thank you for it!
I don’t think it’s unintuitive or so full of features in a way a human being can’t handle.
With exception of “display topographic info” I’m using all features day after day (oh, now I’m curious about it, I never clicked this thing before. hihihi). This extension is useful and great, it turns my work easier and faster.
Chris, thank you very very much. :-)
Now I’m brainwashing all my friends telling them to use it. lol
PS: I’m using the 0.9.4 version and I miss some separators on the css menu. But I can survive without it, I wouldn’t notice it if you didn’t touch on the subject here. lol
At my Mac OS X, I can not see the ‘options’ menu and the three buttons in the right side (standards comp. mode/javascript errors/disable) because I (have to) use 800x600 horrible resolution (ancient ibook). Can I change it to display all this features menus in a small size there? Ok, now you can laugh at my stupid question.
Oh, and thanks again. It’s really helpful and nice.
[]’s
The toolbar can be changed to display icons only in the options so that it will fit on the screen.
Some excellent suggestions here. One thing I don’t like, however, is the idea of dropping features. It’s a developer’s tool and should be feature rich by nature. Rearranging the menus and dropping redundant words will already do a lot for usability. Those “Outline Images…” things, for example, really need to be merged into one tool.
I’d go for full customizability of the menus. Give me one window where I can toggle each of the features via checkbox and I’m a happy guy. That way, you don’t give up any functionality and the user can turn off whatever he doesn’t use. You could even add a little button that will let me toggle between my menu layout and the standard layout, allowing me quick access to those features I only use once in a while.
In fact, Google Desktop Search does something I find rather interesting. It doesn’t have any options dialogs. Instead, it opens an options page in the browser. This will give you a lot more possibilities to make customizing the toolbar easier: more space, more intuitive help, more visual seperation.
You only use five of the features of the whole toolbar? Create your own quickmenu via dragging and dropping. With an options menu in xhtml, you could give the toolbar a stronger branding, and more style, all with the vast space of the browser’s viewport.
The issue with using an HTML page for options is that the page runs in the browser sandbox which means it does not have the privileges to change settings in the browser for security reasons.
I am looking into ways to reduce the security for pages internal to Web Developer as I was hoping to use something similar for an ‘Edit Cookies’ feature, but I have not got this working yet.
No. I don’t think the toolbar has too many features. It is good to have the power to do many things in a consilidated toolbar, rather than various other extensions. While some of the features are used a lot more regularly than others (such as view CSS, outline…, etc); most if not all of the features come in handy at one time or another. I agree with some of the comments here though about a reorganizing of the menu bar to make some elements easier to find and you have already taken a step in the right direction. Excellent job on the toolbar. Keep up the good work. Thanks.
I’d like to also vote for comment #14’s idea to have the ability to toggle features I don’t use OFF. I primarily use the developer bar for the javascript error alert and emptying the cache. Maybe someone finds the ability to make images invisible useful, but if I don’t, it’d be great to be able to not have it cluttering up my menu.
Great work, btw!
It’s a great program (extension ?), and I’d hate to see any features dropped even though I don’t use them myself today. Who knows about tomorrow.
Are the comments about the menus for the beta version ? I’m on 0.9.4 and I don’t see any changes.
I’d like to be able to outline images without having to put them in as a custome item (perhaps I can but haven’t found it yet ?) (Outlining an image will show you the padding etc.)
The menu changes are only in the beta version and the beta also contains an ‘Outline All Images’ feature.
Thanks, Chris. I’d better go and download the beta, then.
This is a terrific job you’ve done and the improvements already made in the beta solves almost all of the issues that came up here. I really disagree with the ones saying you have to remove things… If they don’t use is because they are not curious enough to discover the true usefulness of each and every last single one feature in this extension.
Just like Fabiana said on #12 above, I can´t live without this tool and often try to “push” some more colleagues into using It.
One little nuisance I see thought, is that items that are toggled on such as Information/Display something keeps set when you do a page/frame reload. But the information goes away… so you have to toggle it off and then on again… it would be nice if you could reset the toggles automatically when a reload is done if keeping the status is not viable.
Anyway, thanks immensely!
The features should be reset properly when the page refreshes and if they are not then it is a bug. Which features are you seeing this happen for?
Hi Chris,
Since you said it should be a bug, I took some time to observe the problem and I found that maybe its not a bug really. The features are really resetting, but only when I do a full browser refresh. When I do just a frame refresh, the problem arises.
Then, I observed that using “Display Element Information”, when just a frame is reset, the information remains for elements in other frames. So, I believe now that the feature isn’t being toggled off because it’s active on the other frames.
It is was bothering me because I usually just issue a frame refresh while testing my apps.
You are right - because the feature is still active in other frames the menu shows that it is currently on. This isn’t really a bug, but it should work better when the context menu features only work on the selected frame which is a feature already on the to-do list.
I love this extension, although I admit I’m overwhelmed by it. I’m not a developer per se. That might be part of the problem.
However, there are enough useful features for “power users” that make it worthwhile.
Honestly though, I disable the toolbar and do everything by context-menu. I’m glad you offer that option. Do you have any idea how many toolbar extensions there are out there? :-)
Definatly not.
The Web Developer toolbar is a swiss army knife and if I want the extra features that arent used often, I still dont want to go out my way.
The only thing I don’t like about the WDT is I wish it was quicker to disable stylesheets (if i cant remember the hotkey).
Absolutely not. I have used pretty much every feature on the toolbar at some point (some more than others granted) and I’d be lost without it having got so used to using it day-in, day-out. It’s the best Firefox extension by a long, long way.
One thing I would add as an improvement is for the CSS editor? Brilliant tool, I love editing CSS in real-time but it would be great if you could make the editor wider than the 400px max? It makes it a bit hard to edit the CSS in such a small window. Perhaps even add a simple text search so you can search for class names in style sheets?
Chris - well done and thank you for this brilliant tool.
Agreeing with Jason, and others… I like all the features of WD TB, and wouldn’t want any of them removed… in fact, I’d like to subtley suggest a few more ;-)
Misc > Zoom > “Original Size” or “Clear Zoom Effects”
This is for the times when I ask myself… did I zoom in 3 times, or 4 times?…
Forms > “Display Hidden Fields as Text Fields” or similar.
I wrote a bookmarklet, that does this for me, but it is the one feature I really miss in your toolbar.
Finally, In Netscape 4.x days, I had my browser set, to open the JS Console, when an error occured on a page. It was anoying as **** when I visited other sites on the net, but for my own testing, it was invaluable. I would love this ability in the WD TB if it were available… (ps it should re-focus, if open, on error)
Cheers,
Steve
Jason - I’m hoping to improve the sidebars in a future release to make them more usable. Search functionality for ‘Edit CSS’ is already on the to-do list.
Steve C - ‘Display Form Details’ already displays the hidden fields as text fields and allow them to be edited. And the JavaScript Console can already be configured to open automatically on warnings or errors in the options.
Do not find the extension confusing and unintuitive in the slightest, and definitely do not think that features should be removed. The ability to customize the display (to hide sections) may be a nice addition, but I do not think that the toolbar is flawed without this feature.
Agree with Lanny about deleting the superfluous “disable” and “outline” words.
And thankyou for a truly *wonderful* tool.
For starters, I absolutely *love* this extension. It has saved me countless hours.
Going along with what Jonathan said, I think it’d be great if we were able to construct a custom menu of the items we wanted. For example, the most often used item for me is clear cache, but there is no keyboard shortcut and it has been moved into a submenu with the 1.0 release. Instead of me hacking the xul, it’d be great if I could just make my own menu.
Also, I’ll vote for adding broader support for keyboard shortcuts in general, but leaving most of them as nothing by default. The current UI would probably not work with all the options, you might need something more like in IDEs (list of commands above, pick one, edit shortcut below). In fact, shortcuts-for-anything is much better than just being able to throw together my own menu.
As a developer, this extension is invaluable to easily identify so many elements of the page that otherwise I’d have to “code” for in the source. Turning on various elements as needed and using “Persist styles” across page reviews and refresh is very nice.
While some say it might be “bloated,” I say “no way.” Each time a new version is released, I find new things that help identify inconsistencies between various browsers that I must code for. While IE is our highest percentage user, I ALWAYS check in Firefox as well and use WDT extensively to “weed out the weird stuff.” I don’t expect every FF user to have this installed and say “wow — cool”, as it is mostly for the developer (and aptly named as such — it’s not your grandma’s extension). Don’t remove anything, but going forward you are on the right track with keeping things “organized” in the menus.
Lanny Heidbreder
2 years ago
October 22, 2005
I only ever use a few of the extension’s features, but I can see good uses for most of them.
In any case, I think we should get the reorganized menus before we judge features, because stuff that feels like clutter now may not feel that way once it’s tidied up. :)
A couple more suggestions for the menu tidying:
Delete superfluous words. Every instance of “Outline” can be deleted from the Outline menu, for instance. Ditto for “Disable” in Disable.
More submenus. For instance, under Images, perhaps have one entry “Outline Images With” that spawns a submenu containing “Adjusted Dimensions,” “Empty Alt Attribute,” “No Alt Attribute,” “No Dimensions,” and “No Title Attribute” entries.
Finally, one specific thing —— move “View Speed Report” to the Information menu, change the Tools menu’s name to “Validate,” and delete all instances of the word “Validate” from it. :)
-LH