Web Application UI Guidelines?

Tom Davies asks: "Every GUI platform has a document which describes the conventions developers should use when building GUIs with that toolset. There are also lots of good resources for Web site usability (e.g. Jakob Nielsen's useit.com). But what about web -applications-? I am developing an intranet application which is aimed at people who use it every day, not those who stumble on a web site and need to be able to use it immediately. It can have a higher learning curve, but must deliver more 'client/server like' usability. Are there any sites/books which address how to make HTML GUIs for applications?"

Comments

You've found one!

[Anonymous Coward]

Are there any sites/books which address how to make HTML GUIs for applications?

Yes, you're at one. Most people here will tell you, just don't use the fucking BLINK tag and you'll be fine!

2nd Post! A few resources for you...

[Anonymous Coward]

Check here, though admittedly you have to wonder about the GUI skills of someone who makes you click "Next" 10 times to read their thoughts. It's a decent paper, though, and cites numerous references.

And here is a decent but damned expensive book on the topic. Fortunately, a couple of the P2P application developers are good at GUI design and have made it quite easy to locate this book in PDF eBook format...

Intranet Privacy

[tedDancin]

I've come across a recent top-list of intranets here in Australia, and had to dismiss it as a joke. Every intranet that I've ever built/worked on has had extremely strict confidentiality clauses etc etc attached with it. It's just the fact that companies don't want a smidgeon of their information out in the open (even to a rating company).

I think software engineering design guidelines would be more appropriate for a web application that anything Jakob Nielsen could come up with. As you know, web applications and websites are two totally different breeds of fish.

Simple answer: Don't

[Twylite]

Ask Google about ui design guidelines for web applications. IBM's Ease Of Use site comes up tops.

But, IMHO, you need to examine your choice of development platform (i.e. "web application") and your methodology. If you have already decided on your platform before determining UI requirements, you have issues.

Quite simply a web application can't deliver the same level of user interaction as a traditional C/S application. HTML (even with JavaScript) does not have a rich widget set for building UIs, which causes most intranet applications to have non-obvious even tedious solutions to common UI problems.

One of the few places where HTML excels is in displaying reports and non-interactive tables. By contrast, it is poorest at interactive tables and dynamic filtering.

Some examples: many applications with long lists have a facility to search-as-you-type, either focused on the list or in a text field adjacent to the list; applications with filter or present options based on another selection draw their data on demand in a C/S model, but in a web application must use submit-and-update or multidimensional JavaScript arrays and transfer ALL values to the client on the first request. Simple elements like menus and toolbars are difficult to get right and keep consistent in a web application.

Re:Simple answer: Don't

[elfkicker]

Agreed.

I've been playing around with Mozilla's XUL a bit which overcomes alot of these problems. It's got a fairly good widget set and I'm sure we'll see it improve quickly. I'm not sure I'd want to invest in a whole intranet worth of XUL, but it might be good for some smaller applications if you can get your users using Moz. I wonder if anyone's thought of doing an IE plugin for XUL apps... prolly not much demand for it, but I hope that changes.

Re:Simple answer: Don't

[HRbnjR]

I also agree with that. HTML was designed as a platform and device neutral method of document presentation, not as an applications development platform.

That said....If you really must:
http://www.w3.org/MarkUp/Forms/

Re:Simple answer: Don't

[jeffdill]

Tedious, yes.

Difficult, yes.

But once someone has figured it out and componentized it, you don't have to.

Take a look at the latest rich GUI web presentation layers, like Isomorphic SmartClient.

Re:Simple answer: Don't

[fuzzbrain]

I agree with the above post. If you have an intranet and a complicated application then you may as well provide your client machines with a downloadable application (this can be done through the intranet site using something like Java Webstart). That being said, if you really MUST provide a web-based applictation, I'd recommend taking a look at the Echo Web Application Framework. I haven't played with it much but it purports to allow one to produce HTML-Javascript applications using Swing style programming.

Re:Simple answer: Don't

[larien]

There's a group of developers here working on web apps, and one thing they're doing is using DHTML + XML to get table data transferred. This may solve the problem of dynamic content, but to be honest, they're doing it for bandwidth efficiency (as the main users will be on oil rigs over low-bandwidth connections).

If you really want dynamic content in a web, you can use Java applets.

Re:Simple answer: Don't

[Twylite]

But why do you want a web based application (with or without Java applets) to begin with? The Web provided a common platform, ease of delivery to remote clients (and by extension ease of maintenance), and an easy display language for simple presentations.

The value proposition of the Web is now significantly reduced in light of alternative technologies. Java, Tcl, Python, Perl and numerous others provide a common platform. Most either provide or easily permit a stub architecture for downloading the application from the server on the fly, negating the traditional remote maintenance problems of C/S software. Visual "builder" IDEs are commonplace.

These languages offer a powerful set of GUI widgets which beat DHTML on interactive use, and have proper RPC mechanisms (with several standards to choose from) rather than the submit-and-retrieve model that limits web applications.

Where a web application can use DHTML and XML to transfer a table, a Java application can address the remote table object as if it were local, or transfer the object to the client implicitly, at no development cost.

Re:Simple answer: Don't

[larien]

I guess the advantage in most cases is the ease of development based on how much is already handled in the HTTP protocol (and SSL for encryption). This allows a faster development cycle as you don't have to worry about creating widgets (just use form/table/input tags). The other advantage is that 99.9% of desktop workstations have a web browser installed, but not all will allow the remote installation of software (a good thing, IMHO) due to security settings.

I guess that currently, there's enough expertise in delivering web apps that it's a good proposition. Whether that paradigm will continue in the longer term or not is a different matter, and time will tell as to the long term usage of web apps.

Re:Simple answer: Don't

[yancey]

Traditional web applications are pretty clunky, but you should look into Mozilla as a potential application toolkit.

The Mozilla browser is arguably the most complex program created so far using Mozilla and it compares favorably to a native application when it comes to functionality.

Some people will argue that Mozilla doesn't perform well, but apps created with Mozilla are portable and could be used on Windows, Macintosh, or Unix systems (and several operating systems that you would never expect). The cool part is that your code would not have to change.. it's the same for every platform.

Your web development skills will come in handy, because XML, CSS, and JavaScript are what you use to create applications in Mozilla. There is no compiler required.. just text editors!

Check out the tutorial on the XULPlanet website.

http://www.xulplanet.com/

A new O'Reilly book that gives an overview of creating apps with Mozilla was created with the Open Publication License and is online as well as available from O'Reilly.

http://books.mozdev.org/

Other sites to visit...

http://www.oreillynet.com/mozilla/

http://www.mozdev.org/

web app presentation layers

[jeffdill]

Technologies for creating rich GUIs in unmodified web browsers are just starting to catch on. If you want to build a desktop-like UI for a web application, you might want to start with one of the emerging client-server web presentation layers like (blatant self promotion) Isomorphic SmartClient.

You want client/server?

[GeckoX]

Then write a client and server. Web browsers are NOT good substitutes for a client, there is no proper state or environment to do any proper work in on the client, and seeing as you have already specified that you need higher level client/server functionality, well then you answered your own question.

I am so sick of seeing browsers forced to do things they just don't, can't and shouldn't do. It's NOT the catch all wonder solution. Christ, writing a freaking VB client is at least as much a joke as writing a web page.

Do the write thing, don't follow the lemmings.

Re:You want client/server?

[Anonymous Coward]

dont be silly. the web is perfectly fine for client server apps. writing a VB app requires deployment, is not platform independant, is incredibly insecure and a pain for maintainence. a web app make a lot of sense especially when everyone has a web browser already deployed.

Re:You want client/server?

[Kefaa]

I have to agreee with "Unruly". The intent of the browser in most cases is it allows cross platform support without the need to build the infrastructure. If you have a standardized desktop, then you may have other options, however your application will be limited or limiting the future choice of platforms.

Mozilla, Perhaps?

[rubinson]

Ironically (in the Alanis Morissette sense of the term), Slashdot just posted a pretty positive review of Creating Applications with Mozilla. Perhaps that may be what you're looking for?

Comment removed

[account_deleted]

Comment removed based on user account deletion

Here's a good book on the subject.

[gabe]

Codenotes for Web-Based Ui

I've only read skimmed through it a bit while at the store, but everything I read it in was quite helpful and interesting.

Some stateful, something tasteful

[fooguy]

My suggestion, if you're hell bent on a web application, it to consider perhaps a Java Applet. At least with an applet you can use Swing and AWT widgets for designing your app, and Applets provide some modicum of security. You would also be able to maintain a stateful connection, meaning people could still run this with just a browser, but also have most of the benifits of a C/S paradigm.

As for design, my thought is that standard GUI design rules (for the most part) apply. Consistant look and feel across screens (so the "add record" button isn't in a different place on every screen), clean asthetics (color, fonts, separation), meaningful labels (book title capitalization), no Peoplesoft-esque nested scroll bars, logical grouping of similar items, etc. Without knowing what your designing it's hard to say for sure, but if you've ever designed a GUI that didn't make users have seizures or get motion sick, most of those same rules apply.

Web desktops?

[cr0sh]

Something that I remember seeing a while back, then it just up and died, with no fanfare - was web "desktops". Does anybody here remember the desktops that showed up in a browser, and used a combination of javascript, html, possibly css, and cgi to create a windowing desktop within the browser?

Today, such applications are much easier, and with Mozilla at least (XUL, etc), should become more common.

My question is, what happened to the early stuff? Some of it was amazing and fascinating, even if a bit crufty. I assume it died off because it just didn't catch on, or it really wasn't up to the task of better (read: full blown) applications. But the idea of having a remotely accessible desktop anywhere, web based, etc - seemed interesting (and yes, I know about VNC, as well as X)...

Re:Web desktops?

[UncleOlethros]

Well, Tarantella is still alive and kicking. And on my UnixWare server I have (and often use) the highly useful Webtop.

Re:Web desktops?

[JabberWokky]

Heh. I have a working (a handful of widgets) version of what I've dubbed Pt - a PHP 'port' of the Qt toolkit that uses signals and slots and classes to create web applications. I say 'port' because it's a totally incompatable language, so it's more of a 'inspired by' toolkit that uses the same names, widgets, classes and such rather than any sort of actual port. It builds a giant structure to maintain state. Here's a Hello World (compare to the Qt Hello World) that I pulled right from working source:

$a = new PApplication("happyhello", "Hello World");
$a->setCaption("Demo");

$hello = new PPushButton("Hello, World!");

$hello->resize(100,30);

$a->setMainWidget( &$hello );
$hello->show();

$bob = new PPushButton("Praise Bob!");
$bob->resize(400,100);
$bob->font="Italic 72px Times New Roman";

$praise = new PDialog();
$praise->setMainWidget( &$bob );

connect( &$hello, "clicked", &$praise, "exec");
connect( &$bob, "clicked", Pt, "about");

$a->register( &$praise ); // all widgets need to be // registered to the main PApplication object to // be stored to maintain state

$a->exec();

--
Evan

this one

[RedWolves2]

The Humane Interface: New Directions for Designing Interactive Systems

Common Sense, mostly

[heck]

There is not a single authoritative book that covers all browsers primarily because each browser has gone its own way in terms of standards (IE has JScript, ActiveX, etc.; Mozilla's options have been listed ad nauseum; Opera, Netscape, etc) I've generally followed the spirit outlined in Macintosh Human Interface Guidelines, Windows Interface Guidelines (both of the previous are very old), Designing for Web Usability, and my own common sense based on what I've seen that works.

I will state to all of those who say "well, do a true client/server" that saying that is short-sighted. Part of the design process has to look at it from the company point of view, in addition to "what is really sexy or easier for me to develop."

As an example, a typical company also has to think about support costs, as you now have to deal with "how are the client machines configured; what are they running"; "how do I deal with updates/changes"; "who is going to deal with installing the client everywhere?", etc. (and, yes, those same issues come up with "browsers", but browser compatibility and configuration issues are often more cut and dried) Basically, the tradeoff facing many companies is "cost of developing an application that takes a developer a tedious length of time to get the menus right and test with various browsers and systems" versus "cost of developing an application that will need support on the client side and that someone will need to test on various systems".

Additional factor for many companies is that people have become accustomed to the Web; so a well designed Web application should have a lower learning curve and a cheaper support curve - in general (and I'm generalizing wildly) Can I think of specific cases where I've done a client/server intranet app rather than a Web intranet app? Yup. Each case is different and must be judged on its own merits.

Non-Alanis Morissette ironic?

[WIAKywbfatw]

Is there such a thing?

Irony is a straight-forward, take-me-as-you-find-me word that has only one meaning.

You don't seem to have appreciated that fact.

Which, to be honest, is pretty ironic.

User Interface Guidelines

[N. Evil Genius]

When designing websites, especially for commercial purposes, it is most unwise to forget to check for handicap accessibility. Bobby [http://bobby.watchfire.com/bobby/html/en/index.js p] is a special HTML validator designed expressly for this purpose. It's also really good for testing compatibility with old or unusual browsers.