Call Us 203.687.6053

Blog with a focus on DotNetNuke news, tips and tricks, DNN SEO, and insights and opinions about the DNN community at large.

DNN Nation Needs to Wash its Walls

Posted by Jeff on Saturday, October 27, 2007 to DotNetNuke, Web Design & Usability

DotNetNuke UsabilityI am not a programmer. In fact, I recently asked Tom to explain the difference between ASP and .NET. So, obviously I’m not here to offer any deep technical advice on DNN. I have, however, spent the last 2 years managing the content of a DNN site and have had a chance to fully experience DNN as an end-user.

As a relative outsider, I have some fresh observations that I hope will give you some new perspectives. Most DNN websites have a certain “look & feel” to them regardless of the skin. It is "techie" and functional, but unintuitive and ugly. It works fine for MySpace generation kids, but leaves many Baby Boomer newcomers confused. I believe this lack of basic usability considerations have crept into every facet of DNN - mostly because the platform has been built by a large, disconnected community of people who don’t mind (or even notice) jumping through tough technical hoops. I honestly believe most people in DNN’s “inner circle” don’t even see what I see. Here’s a little story that might help:

About a decade ago, I was living in an apartment complex in Indianapolis, Indiana. For several months, a downstairs neighbor and I kept passing each other on the stairs with friendly nods. Finally, we struck up a conversation. He invited me into his place for a beer as we continued to talk. He walked in and flipped on the lights … his apartment’s floor plan was identical to mine. The only real difference was the furniture.

As we kept talking, I noticed weird stains around the place. There was a big grease spot where his hand swept past the light-switch every day. There was a shoe sludge track leading from the front door to the kitchen. His kitchen trash can was overflowing, in fact, some old coffee grounds were spilling onto the floor. I was a little disgusted and made a quick exit back to my apartment.

I opened the door to my place, flipped on the light, and froze. There was a big grease smudge next to my light switch. Then I spun around and saw a discolored carpet path leading from me to the kitchen. A slice of pizza from three nights ago was perched precariously atop my overstuffed trash can! How the hell did I never see this?

Anything you live with every day tends to melt into the fabric of life. You stop noticing stuff like this because you are just too close to it. A website may be technically functional, but unless its design standards and ease of use are inline with its target audience, it won’t get used.

I have a real problem with the design styling of most DNN modules. Take a fresh look at the core Events module, for instance. It looks silly when compared to the calendar in Microsoft Outlook. A techie fails to notice that … he just sees the upcoming events and thinks, “cool!” A 60 year old man who has only been using the Internet for 4 years looks at that calendar and thinks, “yikes … that looks sketchy … I don’t know if this is a legitimate website … I’m not sure I want to type my credit card number into their online store.”

Here’s another DNN grease spot you may not have noticed. Why are there so many blue circles with white question marks littering the front and back end of DNN? They would lead many people to believe that some “help” information is available … but does anyone really need a help bubble next to the “password” field? What happens when your site visitor clicks on them? Try it. Usually, the next form fields scoot down the screen a bit and an empty half-box opens. What does that mean? To you and me, it means nobody bothered to put any text in the info box. A Baby Boomer, however, might just assume that he broke your website.

Another common DNN stain is the “minimize button” in the top right of a module title bar. When would a site visitor ever need to minimize a content module? What happens to the page layout when he does? Worse, do you really think a Baby Boomer knows how to get that “deleted” info back? Come on folks, it doesn’t require much effort to disable those!

I realize it takes a lot of technical expertise to create a great platform like DNN. All I’m asking is that you put down that copy of “ASP.NET 2.0 Unleashed” for one day. Instead, go to Sears and buy a pair of black socks. Put ‘em on and then slide into your favorite pair of white sneakers. Now, spend the day looking at the Internet through the eyes of a 65 year old. Don’t make the mistake of thinking he’s just a dumb guy who isn’t hip to the future. Realize that he’s had a lot more life experience in his 65 years than you have had in your 30 years on the planet. If something doesn’t work easily from his perspective, he’s not going to waste time on it. Life is too short. Look at your own websites and modules with a critical eye … see anything that needs cleaning?


Permalink Permalink      Comments 20 Comments      RSS feeds RSS feeds      Email updates Email updates

 

Comments

Comment By Tom Kraak on Saturday, October 27, 2007 at 11:40 PM

Jeff originally published this post last Wednesday and within hours it sparked a healthy discussion on the topic of usability and the relationship between (web) programmers and UI developers.

Late Thursday night however, we suffered a major server meltdown, which swallowed Jeff’s post, including all comments, in one sitting.

So I would like to reach out to Lance, Vitaly, Mitchel, Chris and all others to please re-post their comments. Thanks!

Tip: Google cached the first 4 comments ... just run a search on the exact blog post title.

Comment By Mitchel Sellers on Sunday, October 28, 2007 at 12:29 PM

Well it appears that the google cache has updated and I can't remember exactly what I said, but here it goes anyway.

I would agree that there is some merit to this comment regarding DotNetNuke, both on the core and third-party module side of things. I will say that personally I am a developer, you want something built, it will get built and it will function. The design aspect of it is the part that takes much more careful work on my side, that is why I typically try to reach out to others for graphic design work if needed.

I think a fair number of DNN projects, including some of the core are "one-man shows" that only get that developer input at times and we end up with "clunky" interfaces. I personally don't notice it all the time because it doesn't bother me but it does exist.

I will say however, that many people that do have a problem with it sit often too silent. DNN is an open source project as are quite a few third-party modules (At least all of mine are). People with the usability issues need to bring them to light for those of us developers that over time become oblivious to the slight hackish workarounds that exist in our products.

I know that I am greatly appreciative of any comments or requests for improvement for my modules and applications as I always strive to make the most usable software that I can and user feedback is the number 1 way to do this.

I guess my point of all of this is that it is true, I know that many people will take the blog article the wrong way and be upset by it. I know I was at first, but take a second and step back, it is really true..

Comment By Exiton on Sunday, October 28, 2007 at 12:45 PM

Jeff, what are you _really_ dissappointed at? Is it the platform itself, the core modules, or lack of skinning support in the modules?

Also, you example with minimize/maximize functionality is totally innapropriate, as one can easyly disable it with a couple of clicks.

Comment By Jeff Waters on Sunday, October 28, 2007 at 12:59 PM

Thanks Mitchel, I appreciate you seeing my comments in the constructive light they were intended.

One of the solutions that came up before the server blew up our original conversation was to have a Design Czar on the core team. Someone who may not be the best coder in the world, but who can eyeball everything from the perspective of regular "non-techy" people who may visit DNN constructed websites.

Comment By Vitaly Kozadayev on Sunday, October 28, 2007 at 1:03 PM

Sadly, I often find that programmers are not paying attention to designs at all. As a result, you can see a number of modules that are plain ugly.

While content is almost always more important than surface beauty, it's better to have a healthy balance of the two.

Comment By Vitaly Kozadayev on Sunday, October 28, 2007 at 1:12 PM

@Exiton,

The fact that minimize/maximize exists is not the issue. It is actually a cool functionality (that I am yet to use...) - the problem is that many site creators use it and use it inappropriately. Users get confused over such functionality.

I think Jeff's post partially aimed at this inappropriateness - not everything that is cool should be used.

Comment By Jeff Waters on Sunday, October 28, 2007 at 1:17 PM

Exiton,
I want to make it clear that I love working with DNN as a non-coder kind of person. As a platform, I found it much nicer than Joomla (which I previously played with) and certainly better than my days of using FrontPage... (I'm sure that one will get some giggles!)

My disappointment lies in 3 places:
* Design/Usability of Core Modules
* Design/Usability of 3rd Party Modules**
* Design/Usability standards of people currently building DNN websites

That last one is what I was trying to address with the minimize/maximize functionality. You are correct, it is VERY easy to disable those with a couple of clicks. But, I see many many DNN websites with this function enabled on ALL modules... obviously created by people who never noticed it or thought through its impact on non-techy visitors to the site. The site creator is focused on technical functionality, but has not stepped back to look at the bigger picture of usability.

Until usability and style is hardcoded in the DNA and expectations of everyone in the DNN community, I believe the platform will be marginalized by most new people considering it.

** I've purchased and tried a bunch of 3rd party modules from snowcovered. Most of them looked too horid (and had no obvious skinning functionality) for me to consider for my site... even though they had the functionality I wanted, I didn't believe non-techy site visitors would accept, understand, or use them. There are a few exceptions I can point to such as ActiveForums, the Ventrian modules, and the Reviews module from MediaAnt. They were all excellent and something that all module developers should strive for...

Comment By Lois Weinberg on Sunday, October 28, 2007 at 7:24 PM

There is much truth to what has been said. I have only been using DNN for a short time and I do love it, but as a developer I am aware that I often overlook small changes that could make a page much more user friendly. It is very helpful to have input from non-techie folks. But I will also say that it's not just the non-techie folks who notice things. I have been working with the store module lately (and guys, don't get upset by this, I do love the module) and one thing that drives me crazy when I'm testing a site is in the checkout page, the ordering of the fields asks for the customer's region (state/province) before it asks for the customer's country. When the user does get to the country dropdown and selects their country that action clears the region dropdown and the user has to backup or use the mouse to click on the region dropdown again! Now that may seem like a small thing, but if the user is a typist (uses all ten fingers to type) having to remove the hand from the keyboard to go back to the mouse or having to backtab to go back up to the Region is just plain annoying! I know that if it annoys me, it is going to annoy the users. It should be a simple matter to reorder the fields to ask for country first. By the way, the User profile page needs to do this also. At least that page, if the user types in the name of their region correctly, uses what the user typed in the region field when the country is selected. But if you just type in the state abbreviation, as I'm prone to do, then it is lost when the country is chosen.

Please don't take my comments the wrong way (and I will post them as enhancement requests), they are only meant to showcase the need for developers to think about usability in their designs. I love DNN and will continue to use it and get more involved in the DNN community.

Comment By Tom Kraak on Sunday, October 28, 2007 at 11:50 PM

Thanks for bringing this discussion back to life guys!

Lois brings up a prime example of what this discussion is all about ... not so much about looks, but more so about usability.

I've recently had the need to collect address info as part of the DNN registration process and noticed the very issue brought up by Lois ... the Region field appears before the Country field. And as Lois, I entered the Region (state) abbreviation only to have it wiped out by a postback after selecting the country.

Even a "pure" programmer must have noticed an issue as obvious as that, no?

Comment By Dan on Monday, October 29, 2007 at 12:06 AM

One thing that has amazed me about the entire DNN project is the disparity (in my opinion) between the sophistication of the 'core', and the relatively primitive face of some of the important modules.

There are obviously some very talented programmers and designers at the helm- why wouldn't they, for once, hold back a dev. cycle and pour resources into spiffing up some of the modules?

Comment By john on Monday, October 29, 2007 at 8:35 AM

I have no problem with DNN as a framework - you really cannot better it however the comments that all dnn sites basically look the same is fairly true - you can change the skin you can change the containers but to put it one way every dnn site follows the square - square page square content pane and square container. Boy it would be nice to have a round container and have the content fall within the circle etc

Ok you can do this with a bit of javascript and some graphics but to interface these unusual effects into DNN is not a simple matter for most.

Maybe the skin designers are thinking within the box a bit too much maybe we need some adventurous skin and container designers. It would be nice to google around and actually find a dnn site that does not look like a dnn site.

As to empty help boxes etc - with the latest DNN it is a fairly easy exercise to enter your own help text into the framework functions and even 3rd party modules.

The problem is not so much with the core team programmers but with the skin and container designers maybe a little more DHTML in the design of the skins. Maybe a bit more CSS based skins and an interface for the user to chop and change them.

The min/max buttons - agree but then I simply turn them off. The drag and drop - good concept but the last time I used it it did not appear to remember the changes for the user - so that next time he loaded the page it displayed it as he had set it up

The help icon appears to have a mouse over and a down click function - the mouse over is good but if you down click then you end up with both. There are a number of javascript functions that produce good mouse over help displays but you can set them to display where you want them to display and they do not change the page display as DNN does. - again you can add these simply by editing the ascx files but it would be nice to have something like this in the core in place of the current help display.

Most of these little GUI changes and improvements come from the users of DNN not so much from the core team or the programmers - maybe there needs to be a GUI team that looks at the output of the core team versions and suggests gui improvements

Just a thought

Comment By Lance on Monday, October 29, 2007 at 12:33 PM

Hi Jeff. I ranted a bit on the last post so will try to remain productive.

I see two distinct but interconnected issues: usability and code standardization. Both warrant full discussions and changes to the current methods.

The usability issues on DNN are not surprising and there is only one solution: user testing. I think every developer should read Jacob Nielsen et al at least once. When you get down to it however, the only way to improve the system is by testing. Anecdotal complaints from the community are a good place to start but unless you put eyes on the design and track results, you will be throwing darts in the dark.

Many design issues, I believe, come from a lack of web standards use and understanding. Standards are treated as nagging after thought by far too many developers. I think this is because they don't understand the purpose or power. Web standards are a DAL (designer access layer). They allow everyone to speak the same language with each object having intrinsic meaning. When a <td> equals tabular data vs. "position left" then style designers won't have to translate your particular way of marking up data. In fact, the less a developer does for style the better. Just focus on creating appropriate semantic markup and your job is done. True design freedom would to couple that idea with configurable templates by portal (see: www.ventrain.com).

The best place to start for both would be to book a seat at http://north08.webdirections.org/ or http://www.aneventapart.com/. It would be very sad if no one from the core was able to attend these.

A unique mix is needed for DNN due to the nature of the CMS. The web standards vocabulary needs to be expanded to address specific needs of the platform. It will be a challenge to expand these effectively while keeping within the spirit of web standards.

Both of these issues need leadership. They need to be formally adopted as DNN DNA. Only that level of commitment will really make the changes the platform needs. I'm ready to help but I need to know it will be more than lip service. Appointing a Design Czar with a focus usability and standards would be an excellent start.

Comment By Lance on Monday, October 29, 2007 at 1:08 PM

I'm biased but I think www.bearmountain.ca doesn't look like a DNN site.

I had to perform all sort of trickery to get the results and most are beyond the range of the common user. I got out of the boxy feeling by positioning the boxes with CSS.

This was before Module Wrapper started using divs. I think a design or two using that module will be striking.

Comment By Jeff Waters on Monday, October 29, 2007 at 1:27 PM

Hi Lance,
Yes, glad you mentioned that site again. This is a great example. The styling and usability you've achieved is excellent. Most importantly, I think a guy wearing black socks and white shoes is going to actively engage with this site and stick around awhile.

This is one of the few DNN sites I've seen that doesn't look like a DNN site. I can't imagine what you had to do to achieve it.

Comment By Jeff Cochran on Tuesday, October 30, 2007 at 11:08 AM

The "complaints" about DNN design and usability aren't necessarily a factor of the framework, coding or even using DNN. These same issues affect 99% or more of the sites on the internet. A major issue with DNN is that it is portrayed in many ways as a portal site, not a development tool. Perhaps fewer DNN sites have professional or talented designers, and the simplicity of getting a cheap or free skin might contribute to the poor design and usability. But having no sense of design and having no concept of usability isn't the fault of the software anymore than having a roof that leaks is the fault of the hammer and nails.

Comment By Josie on Thursday, November 01, 2007 at 6:05 PM

I have developers pushing DNN in my organization and it's failed every time we've implemented it for various projects. Our end users can't figure it out. The forums are complicated and they give up, many without asking for help. When I bring these concerns to our developers, they contact the module developers who proceed to blame our users. Now our developers just blame the users. The geeks who advocate and use this tool get this type of feedback. They just don't want to hear it. The DNN community needs to drop the narcissim if they want to improve the usability. But part of me thinks that they like DNN just because they can just work on the part they like (functionality) and leave out the part they don't want to be bothered with (user experience).

Comment By Jimmy Z on Wednesday, January 02, 2008 at 10:12 PM

I stumbled across this blog and had to laugh for a couple of reasons. First, let me say that from a technical perspective, I believe DNN is simply a work of genius. To think how many companies pay for content management systems when the same functionality is right under their noses is mind boggling. The parent company I work for spent $2mm on a cms system that has 80% of the functionality of DNN.

With that said, I am currently working on a portal deployment of DNN and we are struggling with some usability factors. This isn't a knock on DNN, but with evaluating 3rd party modules. A prime example is a discussion forum module that presents a user with 25 options at the main screen. Most likely, they want to see the categories, pick a particular category and read (and possibly respond) to a particular thread. Before they can do this, they have a "My Settings," "My Posts," "Post Engine," and a boat load of other options that they aren't sure they need to address before getting to the actual posts.

As for the minimize button on the right part of the module, I have seen specific instances where it is extremely functional to have modules load minimized. The trouble we are having is how to let the users know to click it to maximize. One would think this is simple, but when we used a "+/-" sign, people didn't understand what it meant. When we used "Maximize/Minimize," people were confused if the word "Maximize" meant that the module was maximized, or did it mean click it to maximize. Don't worry, we have 10 other options left...one has to work :)

The net is that I agree usability is often overlooked. However, usability is not (IMHO) as straight forward as one might think. Usability tests are great, but often times you can't get the critical mass necessary to get a true gauge prior to going live. The way I have always approached it is:
- gather as many diverse people to test
- plan to enhance the site quickly after launch based on real-world testing

This approach isn't feasible if you're talking about a commercial release of software, but for web sites, it has worked well thus far.

Kudos to this blog...it is always nice to hear about these types of issues from a "fresh pair of eyes."

BTW - the reason you didn't notice the smudges next to your light switch can be defined as sensory adaption.

Comment By Jeff on Thursday, February 14, 2008 at 12:42 PM

I couldn't agree more with this article. Our company is developing a custom DNN module so we work with DNN every day. I have also developed many DNN skins and containers. And every day I find myself cursing at DNN.

The CSS hierarchy is a mess and adds several kilobytes to the size of each page.

There are useless addons that serve little to no purpose (you already touched on two of them--the "?"s by each form field and minimize/maximize).

The only way to open a section in the admin config is to click the teeny tiny +/- icons instead of being able to click anywhere on the section title. The Save/Update/Cancel/Delete buttons littered throughout the admin area aren't buttons at all and are way to small to click on, and aren't prominent on the page whatsoever. The buttons during the installation wizard are a little better but still not anywhere close to ideal.

The Solpart actions menu (the little triangle menu on each container) is just atrocious. Thankfully the Solpart menu isn't the default menu system anymore at least. However the new menu, called "DNN Menu" has NO documentation anywhere on the dnn site. This is completely unacceptable to me. The current DNN version is 4.8.0 and the latest documentation is for 4.4.1.

Just in general there is no coherence between each of the core modules. They are all created by different developers and it shows.

While not traditionally a content management system, Wordpress has an amazingly wonderful interface. My personal website runs on Wordpress and every time I go back to work it is a painful transition back to DNN. I think DNN could learn a lot by looking at how Wordpress does things (starting with bigger buttons).

Comment By Hernan Chiosso on Tuesday, February 26, 2008 at 3:12 PM

I think one of the main obstacles in making DNN realizing its potential from a design & usability perspective, is some inconsistency in the styling of the core modules, the somewhat obscure CSS inheritance (most of which can be overcome through a bit of research and the Firefox DevToolbar, granted), and the fact that most modules are not XHTML compliant. If the modules used valid XHTML the whole application would be so much easier to style. As regards usability, I agree that there is no replacement for well thought research. But I think that is kind of the wiggle room for individual module developers and integrators to differentiate themselves. Better modules will make better sites and that will make happier customers, and that makes us happy! :)

Comment By Hamid on Wednesday, July 23, 2008 at 8:52 AM

I am a DNN developer. I have used it successfully to develop afew portal solutions and many smaller sites. Many times, while coding DNN modules, I have been disappointed and even put DNN aside and tried to develop from scratch or use another opensource software. I had a better experience with sharepoint. It is much easier to develop and the resulting site has a better look. DNN is getting less flexible. It is very slow and to make it useable for common users, you have to change a lot of code, and it does not take benefit from many dotnet 3.5 or even dotnet2 framework new components. I think it would be nice if there be a fork of DNN team, trying to develop a new DNN and thinking less about compatibility issues. They should consider many questions asked on the DNN forum which unless you change the core of DNN, there is not a straight forward solution to them. Most of the sites I have developed are not upgradeable because of the many patches of have applied to the core DNN source.

Add a comment
Add to Technorati Favorites

Email Updates

Enter your email address below and find our blog updates in your inbox.