in Search

Do you Twitter? Follow us @CodeBetter

Brendan Tompkins [MVP]

Blog First. Ask Questions Later.

An Object-Oriented UI for Web Applications

This is something I've wanted to post about for a while... Scott Galloway posted today about UI Frustration so I thought I'd chime in. I've always been interested in this concept of an OOUI (object-oriented user interface) in which you break the application down into “Objects” with a type, methods, properties and events... I've been using this successfully for a number of years, and I really can't find anything better for Web application UIs.

So how does this work? Start out with a big old tree/table-like view to hold your root and related objects. Tabs are used to show different views of the object tree. Main navigation is used to navigate to different object families. As with OO programming, your UI objects will have a type, methods, properties and events.

The “object" has a "type" represented by an Icon and hyperlink title
Clicking the object's title opens it's properties
The object's "methods" are accessed by clicking an icon to the right-hand side of the row's tree
- This comes naturally to users used to right-clicking on Windows objects
The object's sub objects are treed beneath it
When events are raised, the object's icon animates
Objects can be selected by clicking a check box to the right hand side of the object
Methods that don't act upon a specific object are represented as buttons above the tree, and can optionally act upon selected objects.

So what does this all look like?

So, as you read this, you may say to yourself “duh!,“ but it really does help to keep this structure in mind and adhere to it throughout your application.

-B

Published Jul 22 2004, 06:50 AM by Brendan Tompkins

Comments

Paul Wilson said:

I've worked at a couple of places that started with this UI paradigm and found out too late that users hated it -- or worse, totally failed to comprehend it and never used the software. Its great for developers and other logical thinkers, since its the way we are used to doing things, but evidence seems to prove that the vast majority of people just don't grasp hierarchical trees. I think this is backed up by MS also making more and more things in their UIs to hide the intrinsic trees behind more wizard-like screens. Remember that the browser has been so successful because it makes things simple -- links and back/forward buttons -- terrible UI for us logical folks, but vastly superior to the masses.

# July 22, 2004 4:26 AM

b0b said:

Most programmers should leave the UI to people that specialize in UI. That is why alot of programmers made web apps that look like ass, they make the design an after thought.

# July 22, 2004 4:31 AM

Brendan Tompkins said:

Paul,

You're right, about having to hit the masses. What I've ended up doing is having a wizard "view" for first timers, or for folks that like that better. But nothing beats a tree to see it "all at once" and in context. I've found that our users here understand this kind of UI almost automatically, and I'm sure that they're not the most advanced.

bOb - You are right, but most places don't want to pay a UI person and if they do, they end up getting a graphic artist who may not know anything more about UI than a developer... As developers we have to be our own UI engineers much of the time

# July 22, 2004 4:36 AM

Mark said:

I ran into this with a recent client of mine. Outside of the development team, they just did not "get" the TreeView control.

The TreeView was exactly what they had asked for. They even liked it when I showed them examples on other sites. But when they got to see it in action on their site, it turned out not to be what they really wanted at all.

They are going to implement it, but are looking for a redesign in phase 2.

--Mark

# July 22, 2004 6:08 AM

Brendan Tompkins said:

I think it all depends on the implementation. You can't just throw a tree out there and hope people explore it. In the UI I'm talking about, it's kindof a tree, but kindof a grid as well. I don't know if it's a huge difference, but the tree is not just plopped on to a left-hand pane somewhere, it's central to the application screen in question.

I find that people grasp it pretty quickly - we have about 500 users working with the screen you see above daily. Of course that's not a lot in the grand scheme of things, but it does lend some credibility to this approach.

# July 22, 2004 7:05 AM

Scott Galloway said:

Hmm...this is always where I fall down with UIs - I think coders have a lot to contribute to UI design but we're often too close to how the application is physically implemented to appreciate how a user will use the application.
I'm a recent convert to the Paper Prototyping stuff and I'm trying to get this adopted into my company's project planning / definition stage. This in comboination with methodologies like SCRUM I think lets us all deliver applications which our customers actually find 'friendly' - which is where a lot of applications have fallen over in the past.

# July 22, 2004 2:23 PM

Brendan Tompkins said:

I'm not sure if I do Paper Prototyping or not, but I do always sketch ui with pencil and paper first, especially at the beginning of a project. I'm going to look into it more. Thanks Scott.

# July 22, 2004 3:44 PM

Scott Galloway said:

Paper Prototyping is a very cool concept, it's suprising to many developers just how little clients can / want to understand data structures and hierarchies but give them a picture and it all becomes clear. Paper Prototyping is really just sketching things out and going over what the app does and how it does it with the client involved. There's a great book called 'Paper Prototyping' (surprise!) by Carolyn Snyder which goes in to great detail about the best ways to use this technique.

# July 22, 2004 10:07 PM

Darrell said:

Your "mapping" sounds a lot like Naked Objects.
http://www.nakedobjects.org/section11.html

That DataGrid setup also looks unsurprisingly familiar. :)

# July 23, 2004 3:36 AM

Brendan Tompkins said:

Interesting, never heard of Naked Objects before... Have to look into it.

"That DataGrid setup also looks unsurprisingly familiar. :) " - Like I said, I've been using it for years! ;) Even back in the good ol' days when we worked to together!

# July 23, 2004 3:42 AM

Name (required)

Your URL (optional)

Comments (required)

Remember Me?

Enter the numbers above:

Add

About Brendan Tompkins

Brendan has been programming with .NET since the first public beta and is owner and operator of Port Technology Services, a consultancy company providing .NET application development services to the Maritime industry. In July, 2007, he was awarded the Microsoft MVP award for ASP.NET. He's also a proud co-founder of failed .COM startup Intrinsigo, and has had a hand in the failure of numerous other businesses. He currently runs CodeBetter.Com and Devlicio.us, and lives in Norfolk, Virgina with his wife Tiara and son Ian.