So you can imagine how distressing it is for me to admit that Web Apps are better. I've written about the topic of Web UIs vs Rich Client UIs in the past, but didn't quite commit to Web Apps in general being better. This time, I'm gonna go into it a bit more.
There are two primary reasons that people started writing Web Apps in the first place:
- Easy access from anywhere
- No installation means no system administration
The funny thing about these two reasons is they arn't really completely correct anymore. You can use Web Services to create "smart" clients that can access central data but still run anywhere. And Click Once allows you to install an app on even low privilege computers easily.
As for installation, any non-trivial app is going to require all kinds of ActiveX plugins, addins, and whizbangs to allow people to do anything more complicated than type in text boxes (ie. upload/download files, etc). These things are arguably more of a nightmare to maintain than a Windows App since they have a way of working one minute and not the next.
Plus, of course, you have to deal with browser incompatibility.
But, all that said Web Applications are still better. Don't worry, I wont make you wait any longer to find out why:
It's because they're prettier and more usable.
That they are prettier is not a huge surprise. HTML/CSS makes it much easier to do cool layouts incorporating all sorts of graphics. Also, for some reason, its simply expected these days. If you made a Web App that looked like a Windows App, everyone would immediately think it was crap. For some reason, there is just a higher standard for appearance on the web.
You may at first question if being pretty really makes it better. But the first time you show a client an immensely complicated Windows App, with all sorts of exciting features (both from a business stand point and a technology standpoint) and then you show them a simple website, and they go "ooh! ahh!" over the website, you'll start to wonder, maybe there is something to this pretty stuff after all?
After the 5th time it happens, you'll stop wondering and starting being pissed off about it...
That they are more usable is a huge surprise. At least to me. Applications on the web are so clearly inhibited by the Web environment, you would think it would be impossible for them to be more usable. Unless you have the resources of Google at your disposal. And everything is still in "Beta."
First off, they are slow. Constantly contacting a remote server for every little thing... The Window keeps going white while the next page is fetched from the server. AJAX makes the experience significantly better, but is still slow. Fortunately, internet speeds got faster. And now, especially with Chrome, browsers are getting faster too. And best of all, users don't really seem to mind! As long as the net connection isn't so slow that every server trip takes 30 seconds, people seem perfectly happy to wait for the page to save. I think it's simply because they are used to it, and they expect it to be that way. Plus, developers know they are slow. So we write Web Apps with that in mind by rendering less at one time, and sending less to the server. Basically, we simplify things. And in the end, this often leads to a more usable application.
Next, they are inconsistent. There are lots of emerging standards, but there is no HTML tab control. No "navigation" control. No "grid" control. So everybody does there own thing. And everybody who ends up choosing a similar metaphor, like tabs, implements them their own way.
Interestingly, this doesn't seem to really matter. In fact, I would argue its a main part of why Web Apps are more usable. I've talked about consistency before and argued that consistency for its own sake is a bad thing. If you have a reason to do something different, then do it. As long as you are consistent within your own App, you're good. The web forces this mentality on your designs. Each time, you start from scratch. And so you end up designing something completely based around the specific requirements of that app. Not based on the old out dated UI metaphors that everyone else uses. And even when what you design looks like one of those old out dated metaphors, it has to be custom implemented, so it may not behave exactly the same way. Instead, it behaves in whatever way you've determined is best for your app. And as far as I can tell, this seems to be good enough.
Even the most computer illiterate people aren't so dense that they can't adapt to a slight difference. In fact, from what I've seen, the more illiterate they are, the less likely they are to notice it was different at all! Within reason, obviously.
The last thing is that web apps are harder to write. Well, at least, they used to be. I don't think this is true anymore either. The technology for creating Web Apps has evolved at a striking pace. Especially in the last few years. 5 years ago "classic" ASP was one of the most modern Web tools. Now you have Ruby on Rails and ASP.NET MVC. AJAX. JQuery. These are great tools. And they are making it possible to do very complicated things very easily.
Ridiculously easy, in some cases. I have seen things done on the web in no time which took forever to do in a Windows App. And, they were arguably done better. And I'm not talking about layout issues either, which have always been easier on the Web than, say, Windows Forms.
Speaking of Windows Forms... A lot of the reason why the Web has been able to catch up and even pass Windows Apps is due to Win32. Win32 sucks. Try to create a suggest field in Windows Forms using no 3rd party components, I dare you. You'll be at it for months, and it still wont be quite right. Meanwhile, your web developer friend will do it in an afternoon.
I think WPF fixes nearly all of this. It makes it so you can actually build controls and UIs, instead of hacking them together. It makes me think its possible that Windows Apps could catch up. If only the text wasn't blurry, and everything didn't go out of focus when you scrolled, and lines that were 1 pixel always displayed... (All of these are problems in WPF due to Microsoft's insistence that WPF be dpi independent. A noble goal. But a dumb one, if it means you can't do anything with text without all your users saying, "why is this blurry?")
From a very high level, these are some of the things that should have made Web Applications worse, but seem to have actually made them better. Honestly, I think its because the Web has built in constraints. You have to make round trips to the server, and render a new page every time. That's why the web lends itself so naturally to MVC. Windows Apps don't. You also have to recognize that you can't send too much data or performance will suffer. Its easier to ignore this on Windows Apps, until its too late. Also, you can't display popups, or modal dialogs, or keep tons of stuff in memory.
So all the downsides of the Web turned it to plus sides. Lucky. But perhaps we should look at some specifics of what makes Web Apps more usable.
Tabs vs. Scrolling
In Windows, you see that most applications pick a minimum size, and they try to make everything fit within that area. So if the minimum supported screen size is 1024x768, you'll see that all the data entry fields (text boxes, combo boxes, grids, etc) are all cramped into that space. If they don't fit, then tabs are added, so that you can switch between them.
On the web, you just scroll. Usually horizontal scrolling is avoided, but no one minds vertical scrolling. Turns out this really simplifies things. For example, what is going to be saved when you click the save button. Its obvious, everything on the page. What about with the tab control. Will it save everything in all the tabs, even though you can't see it? Do you have to save each tab individually? Is what you typed on the tab even going to be there after you switch to another tab and then come back? Everyone knows how tab controls work right? So none of this matters. But still, you can see there is much more potential for fear with the tabs than with the scrolling.
Menus vs. Navigation
In Windows, you get "File menus." "File", "Edit", "View", etc. This is how you navigate around to the things you need to work on. For some reason, the menu titles are always made fairly generic (like "Format" in Word). So all kinds of stuff that is related in function but unrelated in purpose get grouped together.
On the Web, you get Navigation. And it comes in all kinds of forms. Sometimes the navigation looks like tabs! Other times it looks like menus, though the names are always by purpose instead of by function... Other times its just a list of links down the left of the page. Or, sometimes the navigation is only available from the home page, and you return there whenever you finish something and need to start something else. All of these models make it easy to support many levels of navigation, which is essential on the Web, since you need smaller surfaces for performance.
Its interesting to look at the modern push in application development. Look at IE7, where'd the menu bar go? Look at Windows Media Player. Look at Google Chrome. Look at Word and Excel with the ribbon! Or look at the Zune software. These are all very "web" feeling to me. Even the ribbon, in some ways, feels more like the kind of toolbar you would find on a web site.
Wizards vs. Pages
In Windows there is a separation between Wizards and "Forms" or "Screens" or whatever you wanna call them. A Wizard always pops up and lets you step through something. A Screen is just there and lets you move around, enter data, save stuff, type stuff, whatever you might be doing.
On the Web, there is no such thing as a Wizard... When you need to step through stuff, you just have pages that step you through. You use the browser's back button to go back, or the web site provides a back button for you on the page. Sometimes the Next button says "Next", other times it says "Continue to step 2" and other times it says "Enter Account Info ->" Its simple because its really no different any other page from a user's standpoint.
Popups vs. Popups
In Windows Apps you've got popus all over the place.
"YOU JUST DID A SEARCH THAT RETURNED NO RESULTS"
"THERE IS A VALIDATION ERROR SOMEWHERE ON THIS PAGE, GOOD LUCK FINDING IT!"
"I HOPE YOU NOTICED THAT THERE IS SOMETHING IMPORTANT ON THIS PAGE THAT YOU SHOULD PAY ATTENTION TO, GOOD LUCK FINDING IT!"
Web apps tend to display popups for "Are you sure you want to delete this?" and that's about it (Other than Rickrolls...). Instead the web will display messages throughout the page when neccessary. This is clearly much friendlier.
Modal Dialogs vs. Modal Dialogs
You find lots of Modal stuff in Windows too. Which is really great, cause in Windows when a modal dialog is open, you can't resize, minimize, or move the window the dialog is displayed over. So not only can you not do two things at once in that application, you can't easily do two things at once in Windows either!
Modal Dialogs have started to appear on the web too. Typically they're a div that opens over the rest of the content, and the stuff in the back gets grayed out to focus your attention. Its a neat trick, when used rarely and for important stuff only. Since its harder to do than Modal Dialogs in Windows, I'm hoping it will stay rare, though I've already seen some good examples of misuse. Especially by some newer "feedback" sites that some web apps integrate with.
MDI vs. umm, nothing?
This is my favorite one. In Windows apps you often find lots of windows. MDI was the first way of handling this, where within your main application window you would get many other windows. But this sucked, so now adays you tend to see tabs instead of windows. This is better.
But the web doesn't do this. At all. You've got one window. If you want another one, you open another one. Now you have two. But they are not related to each other, they don't really know about each other. You're basically just running two instances of the application.
Because of this, Web applications focus much more on what I'll call flow. Moving you from one place to the next. That's why the back button is so important and generally useful. Yes, its harder to look at two things at once (but that's true in MDI and tabs too) and its harder to switch between two things too. But, oddly, this seems to be not such a big deal. And when you want to do it, just open two windows!
Grids vs. Flow Layout
In Windows Apps, especially heavily data oriented apps, you see LOTS of grids, and lists. They're everywhere, and they're horrifically ugly, and terrible to use. Apart from the fact that it is really nice to click on a column header and, bang!, change how the grid is sorted, grids don't add much value. There just there because the tooling makes it really hard to repeat stuff over and over without them.
On the web, you see lots of what I call Flow Layouts. They're grids, kind of. But, they're pretty. They're custom formatted. Titles are bold, some text is colored, some isn't. Font sizes change based on the importance of the text. Look at Amazon.com's search results for example. There are no column headers at all! To sort, you just choose some options from a dropdown at the top.
Now, I'm no usability expert. But I don't think you have to be to realize that the way Apps work on the web is just better than the way they work in "Rich Clients". And this is completely ridiculous. The Web can't even come close to matching the capability and flexibility of a rich client. And yet, the Web is still better. Hopefully WPF will help, since you can actually create Web-like displays with it that don't perform horrifically. But what really needs to happen is people need to realize that just because you're making a Windows Application doesn't mean you need tab controls and menu bars and properties forms and grids and modal dialogs. You can use a Back button in your Windows app, if you think it will help.
Of course, this is an incredibly difficult mold to break out of. All the tooling is against you. All your corporate "UI" standards are against you. Your own brain is against you. But I encourage you to at least try to incorporate some "web-ish" UIs into your next rich client project. Maybe you can get even get some "oohs and ahhs" of your own?
The last thing is that web apps are harder to write. Well, at least, they used to be. I don't think this is true anymore either. The technology for creating Web Apps has evolved at a striking pace. Especially in the last few years. 5 years ago "classic" ASP was one of the most modern Web tools. Now you have Ruby on Rails and ASP.NET MVC. AJAX. JQuery. These are great tools. And they are making it possible to do very complicated things very easily.
Ridiculously easy, in some cases. I have seen things done on the web in no time which took forever to do in a Windows App. And, they were arguably done better. And I'm not talking about layout issues either, which have always been easier on the Web than, say, Windows Forms.
Speaking of Windows Forms... A lot of the reason why the Web has been able to catch up and even pass Windows Apps is due to Win32. Win32 sucks. Try to create a suggest field in Windows Forms using no 3rd party components, I dare you. You'll be at it for months, and it still wont be quite right. Meanwhile, your web developer friend will do it in an afternoon.
I think WPF fixes nearly all of this. It makes it so you can actually build controls and UIs, instead of hacking them together. It makes me think its possible that Windows Apps could catch up. If only the text wasn't blurry, and everything didn't go out of focus when you scrolled, and lines that were 1 pixel always displayed... (All of these are problems in WPF due to Microsoft's insistence that WPF be dpi independent. A noble goal. But a dumb one, if it means you can't do anything with text without all your users saying, "why is this blurry?")
From a very high level, these are some of the things that should have made Web Applications worse, but seem to have actually made them better. Honestly, I think its because the Web has built in constraints. You have to make round trips to the server, and render a new page every time. That's why the web lends itself so naturally to MVC. Windows Apps don't. You also have to recognize that you can't send too much data or performance will suffer. Its easier to ignore this on Windows Apps, until its too late. Also, you can't display popups, or modal dialogs, or keep tons of stuff in memory.
So all the downsides of the Web turned it to plus sides. Lucky. But perhaps we should look at some specifics of what makes Web Apps more usable.
Tabs vs. Scrolling
In Windows, you see that most applications pick a minimum size, and they try to make everything fit within that area. So if the minimum supported screen size is 1024x768, you'll see that all the data entry fields (text boxes, combo boxes, grids, etc) are all cramped into that space. If they don't fit, then tabs are added, so that you can switch between them.
On the web, you just scroll. Usually horizontal scrolling is avoided, but no one minds vertical scrolling. Turns out this really simplifies things. For example, what is going to be saved when you click the save button. Its obvious, everything on the page. What about with the tab control. Will it save everything in all the tabs, even though you can't see it? Do you have to save each tab individually? Is what you typed on the tab even going to be there after you switch to another tab and then come back? Everyone knows how tab controls work right? So none of this matters. But still, you can see there is much more potential for fear with the tabs than with the scrolling.
Menus vs. Navigation
In Windows, you get "File menus." "File", "Edit", "View", etc. This is how you navigate around to the things you need to work on. For some reason, the menu titles are always made fairly generic (like "Format" in Word). So all kinds of stuff that is related in function but unrelated in purpose get grouped together.
On the Web, you get Navigation. And it comes in all kinds of forms. Sometimes the navigation looks like tabs! Other times it looks like menus, though the names are always by purpose instead of by function... Other times its just a list of links down the left of the page. Or, sometimes the navigation is only available from the home page, and you return there whenever you finish something and need to start something else. All of these models make it easy to support many levels of navigation, which is essential on the Web, since you need smaller surfaces for performance.
Its interesting to look at the modern push in application development. Look at IE7, where'd the menu bar go? Look at Windows Media Player. Look at Google Chrome. Look at Word and Excel with the ribbon! Or look at the Zune software. These are all very "web" feeling to me. Even the ribbon, in some ways, feels more like the kind of toolbar you would find on a web site.
Wizards vs. Pages
In Windows there is a separation between Wizards and "Forms" or "Screens" or whatever you wanna call them. A Wizard always pops up and lets you step through something. A Screen is just there and lets you move around, enter data, save stuff, type stuff, whatever you might be doing.
On the Web, there is no such thing as a Wizard... When you need to step through stuff, you just have pages that step you through. You use the browser's back button to go back, or the web site provides a back button for you on the page. Sometimes the Next button says "Next", other times it says "Continue to step 2" and other times it says "Enter Account Info ->" Its simple because its really no different any other page from a user's standpoint.
Popups vs. Popups
In Windows Apps you've got popus all over the place.
"YOU JUST DID A SEARCH THAT RETURNED NO RESULTS"
"THERE IS A VALIDATION ERROR SOMEWHERE ON THIS PAGE, GOOD LUCK FINDING IT!"
"I HOPE YOU NOTICED THAT THERE IS SOMETHING IMPORTANT ON THIS PAGE THAT YOU SHOULD PAY ATTENTION TO, GOOD LUCK FINDING IT!"
Web apps tend to display popups for "Are you sure you want to delete this?" and that's about it (Other than Rickrolls...). Instead the web will display messages throughout the page when neccessary. This is clearly much friendlier.
Modal Dialogs vs. Modal Dialogs
You find lots of Modal stuff in Windows too. Which is really great, cause in Windows when a modal dialog is open, you can't resize, minimize, or move the window the dialog is displayed over. So not only can you not do two things at once in that application, you can't easily do two things at once in Windows either!
Modal Dialogs have started to appear on the web too. Typically they're a div that opens over the rest of the content, and the stuff in the back gets grayed out to focus your attention. Its a neat trick, when used rarely and for important stuff only. Since its harder to do than Modal Dialogs in Windows, I'm hoping it will stay rare, though I've already seen some good examples of misuse. Especially by some newer "feedback" sites that some web apps integrate with.
MDI vs. umm, nothing?
This is my favorite one. In Windows apps you often find lots of windows. MDI was the first way of handling this, where within your main application window you would get many other windows. But this sucked, so now adays you tend to see tabs instead of windows. This is better.
But the web doesn't do this. At all. You've got one window. If you want another one, you open another one. Now you have two. But they are not related to each other, they don't really know about each other. You're basically just running two instances of the application.
Because of this, Web applications focus much more on what I'll call flow. Moving you from one place to the next. That's why the back button is so important and generally useful. Yes, its harder to look at two things at once (but that's true in MDI and tabs too) and its harder to switch between two things too. But, oddly, this seems to be not such a big deal. And when you want to do it, just open two windows!
Grids vs. Flow Layout
In Windows Apps, especially heavily data oriented apps, you see LOTS of grids, and lists. They're everywhere, and they're horrifically ugly, and terrible to use. Apart from the fact that it is really nice to click on a column header and, bang!, change how the grid is sorted, grids don't add much value. There just there because the tooling makes it really hard to repeat stuff over and over without them.
On the web, you see lots of what I call Flow Layouts. They're grids, kind of. But, they're pretty. They're custom formatted. Titles are bold, some text is colored, some isn't. Font sizes change based on the importance of the text. Look at Amazon.com's search results for example. There are no column headers at all! To sort, you just choose some options from a dropdown at the top.
Now, I'm no usability expert. But I don't think you have to be to realize that the way Apps work on the web is just better than the way they work in "Rich Clients". And this is completely ridiculous. The Web can't even come close to matching the capability and flexibility of a rich client. And yet, the Web is still better. Hopefully WPF will help, since you can actually create Web-like displays with it that don't perform horrifically. But what really needs to happen is people need to realize that just because you're making a Windows Application doesn't mean you need tab controls and menu bars and properties forms and grids and modal dialogs. You can use a Back button in your Windows app, if you think it will help.
Of course, this is an incredibly difficult mold to break out of. All the tooling is against you. All your corporate "UI" standards are against you. Your own brain is against you. But I encourage you to at least try to incorporate some "web-ish" UIs into your next rich client project. Maybe you can get even get some "oohs and ahhs" of your own?
Wow, long post. I guess you got over your lack of motivation. :-)
ReplyDeleteGranted I have very very little desktop development experience, one of my main pain points was always the intertwining of data models, business logic, and presentation logic. It didn't seem like this "should" be any worse in a desktop app, but it did seem like most tutorials or examples had it this way. Having the presentation be client side, away from your servers, seems to have pushed the separation of concerns issue much earlier. Granted, now a days people want more and more "rich" user interfaces resulting in numerous client side technologies (flash, silverlight, adobe air, javafx, zillions of crazy javascript libraries, etc) but the initial idea is the same.
interesting post.
Yeah. I probably should have made it two posts. Or just edited it down... But, since it broke down into little headings I figured it was passable.
ReplyDeleteI have to completely agree with you that web applications are much better.
ReplyDeleteAt the place where I work, we constantly try to fit overwhelming amounts of data into a tiny real estate, and end up with a screen that is not only ugly, but becomes very unworkable very quickly. There have been numerous times where using a "web-style" flow layout would have helped us fit more data in a more readable and usable format. However, as you pointed out, the corporate world seems forever stuck with the same mindset for UI design that we've had for the past 20 years. Hopefully new technology like WPF will force us to reevaluate the way we create UIs.
I would also have to agree with the deployment benefits of a web application. With the trying times our economy is facing, no business is going to needlessly update hardware. I think it would be a lot more beneficial to use a lightweight web application and offload most of the processing onto a server. Who knows... maybe after a while this could have an additional benefit of weaning corporations off the expensive, heavyweight, proprietary operating systems as well. ;)