Web Pages That Just Do Too Much Stuff [closed]

Question

Concerning pages that build a web application:

Lately, I have found myself creating web pages that are simpler than the ones I used to. Before, I would try to jam as much functionality into a single page as I could to prevent from having lots of pages.

I am starting to realize that this was just making things way more complex, convoluted, and confusing than it had to be. Why not have more pages? I think the reason that I was doing this was because I didn't want the user to have to browse to other pages; just to have all the functionality they needed on a single page.

Well, these good intentions turned into an overly confusing interface for the user and very unmanageable source code. I am a new developer and I am trying to be very reflective of what I am doing so that I can improve. If it makes a difference, I am developing in ASP.net (though these are probably considerations for any platform).

My questions are:

• Am I overthinking these things?
• Has anyone else found themselves doing this?
• Where is the happy medium?

Answer 1

There is no expert who can give you a rule that works in all places at all times. I have been known in my industry for years for "easy" interfaces and we've won significant amounts of business for it (as well as 5 "Best in Class" awards). I have also had people within my company and outside of it tell me - for years - that they like my work but wish that I would "jazz it up" with more graphics and such. What always amazes me is how little connection people see between the two.

So...a few rules of thumb:

1. A page should do one main thing.
2. A page may well have multiple links related to the main thing
3. Menuing and link layout should be consistent across pages
4. Simpler is better than more complex
5. Pages should be visually appealing and inviting
6. Rule 4 is more important than rule 5.

For example, my product provides an interface that lets people define classes and events to be displayed in a calendar. I could have one page that lets you Review, Add, Update, Delete and Edit the classes. Indeed, in some simpler areas, I've used the gridview to let people manage everything in a grid. However, classes have too much information to do this and still follow the rules above.

So,

1. The main idea is: "Here is a list of classes for this location"
2. The links are "Add New" shown above and to the right of the grid, Change and Delete are links within each row. This is consistent across the app.
3. Menuing for the system as a whole is always across the right/top. Nothing else appears on the class/event page except for standard elements common to all pages (a logo, a header, a footer).
4. The grid is nicely styled but there are no spurious graphics (4,5,6)

---

A few last things about UIs and graphic design.

First, develop your own vision and be consistent across pages and apps.

Second, do not be afraid of simplicity.

Next, when soliciting advice from others keep in mind that you do not want their advice - you want their impressions: you want to understand the way they perceive the interface. Advice is sometimes good but, more often than not, actually harmful. In my experience, everyone thinks that they are a UI expert.

When you do your hallway (or formal) useability testing you should discount almost all advice to the effect that "you should make that stand out more." As you'll see, it will quickly become "and that," "and that," "and the other." If you follow this advice, you'll end up with a mess due to Brittingham's first rule of design: If everything is important than nothing is. (There you go: when explaining why you can't make someone stand out more, just tell them that "it violates Brittingham's first rule of design!")

Hope this helps!