from web sites to web applications, part 1: web site or web app?

From Web sites to Web applications, Part 1: Website or Web app?Make good decisions by analyzing your Web presence

Skill Level: Introductory

Brett D. McLaughlin, Sr. ([email protected])Senior EditorO'Reilly Media, Inc.

01 Jun 2010

Are you building a Web site or a Web application? The line between Web sites, whichare largely informational, and Web apps, which are more interactive, has blurred.There are best practices for building good informational sites, and those practicesaren't the same for building a good application. In this article, learn the real, tangibledifferences between Web sites and Web apps, and then analyze your own sites.Explore the kind of sites you're managing, designing, and coding in a way that helpsyou improve their design and usability. Learn to make informed decisions thatsupport your Web goals.

Introduction

In our world of iPads, iPhones, Android, and application-centric devices, it's nowpassé to say, "I have a static Web site." If you don't have advanced search, at leastthree purchasing options, and two different pages with advanced Ajax interaction,you're viewed as "so 1998." Many developers are scrambling to meet managementrequests: Get some more interactivity going! Keep up with Amazon.com or Bing orIBM! Make the Web site... a Web application. But, if you make things up as you go,the result can be an unfocused, and sometimes less functional, Web presence.

Web sites are fundamentally different from Web applications. If you're building Webapplications, you need to know what distinguishes you from the Web site bourgeois.On the other hand, if you're used to building static, JavaScript-less pages, you'll

Web site or Web app? Trademarks© Copyright IBM Corporation 2010. All rights reserved. of 17

mailto:[email protected]

http://www.ibm.com/developerworks/ibm/trademarks/

http://www.ibm.com/legal/copytrade.shtml

probably be pressured to convert your site to a Web app.

In this article, learn how to make informed decisions that support your Web goals.Learn the difference between a Web site and a Web app and how the two conceptsare largely distinct and different. After you understand the major differences, you'llbe well prepared to decide—or at least influence—what your Web presence shouldbe.

Web sites aren't (necessarily) Web apps

You might encounter a situation where you've got an existing Web site and there'snot a good reason to convert to a Web app. Or, a situation where folks are spendinga lot of time on Web apps but are really just spinning their wheels. It might be betterto skip all that work and go with a fairly simple Web site. This section outlines thedifferences between Web sites and Web apps.

Web sites are primarily informational

The easiest definition of a purely static Web site is: informational. A classic exampleis Wikipedia, which is meant to be almost entirely informational. Wikipedia is notflashy, not exciting, and not littered with image pop-ups and full-scrolling maps. It'sjust raw information, presented in little more than a hyperlinked dictionary, as shownin Figure 1.

Figure 1. Wikipedia example

developerWorks® ibm.com/developerWorks




Information is often best communicated with simple static Web sites. If your goal isto disseminate information about a product, a service, or even about informationitself, a Web site is a good starting point. Of course, there's a great resistance toWeb sites. They're not flashy, and they're not lighting up the Twitter-verse. Mostpeople still go to Wikipedia as their first stop to explore a new topic, though, sothere's clearly real value in static sites.

Web sites can be dynamically driven

Most blogs are really Web sites. Even though blog sites are driven by programssuch as WordPress or Movable Type, the result is information-driven sites that arebasically flat, non-interactive pages. This points out an important distinction: A Web

ibm.com/developerWorks developerWorks®




site is not defined by how the site is generated; a Web site is defined by how theinformation and functions of the site are consumed by its users. Understanding thisdistinction can help you focus on your users' experience with your Web presence.

In the early stages, you should focus on the user experience. A user doesn't carewhether your site is back-ended by HTML and CSS, or ColdFusion, or PHP, or Perl.Users simply make an evaluation of the site based on what they see. To get ahandle on what sort of site you're building or looking at, take a step back fromprogramming. Just fire up a browser, navigate to your site, and make an evaluation.

Web apps are primarily interactional

If your site isn't primarily informational, it is most likely interactional. This simplymeans that the user is not a passive consumer, but an active participant. The user issearching, clicking buttons, filling out forms, making purchases, and generallykeeping his or her hands on the keyboard and the mouse.

Think of a computer game as the high-water mark for interaction. In a game, usersare completely active and interacting constantly. Whether they're shooting zombiesor navigating through a minefield, users are busy pushing buttons and makingdecisions that lead to more button pushes. Of course, most sites don't rise to thatlevel of interaction.

The majority of Web sites are, to some degree, hybrids. For example, look at thehome page for Amazon.com shown in Figure 2. Amazon.com is a hybrid, but still aninformation site.

Figure 2. Amazon.com





A lot of information is presented on the screen above. Books, authors, prices, andcategories are all forms of information. However, a user's primary goal on this pageis to interact. Users are going to navigate to a more specific category. Or, they maydrill into a specific book and then make a purchase. The user might search, or seewhat's in his or her cart. All of this is interaction.

Given that any Web site is going to present some information, the goal is todetermine the balance. Are you largely interacting, or are you largely reading? Areyou spending 30 seconds on a page, or 10 minutes? If you're largely interacting, andspending less time on pages, you're visiting an interactive site.

How informational and interactional sites differ

Thus far we've discussed a fairly simple, binary approach to evaluating sites. A siteis informational or it's interactional. Black or white.





Most interactional sites are actually hybrids. If there's no information, then there'snothing with which to actually interact. Imagine Amazon.com with nothing butbuttons—no books, no DVDs. It's nonsensical. You have to have some informationto which you respond. Thus, even interactional sites are really hybrids: acombination of information and interaction.

You might wonder why you need to focus on the distinction, or divide, betweeninteractional and informational. There is real value in thinking differently about a sitethat mainly wants to deliver information and a site that mostly wants to generateinteraction. That divide in thinking, in fact, will drive most of your major designdecisions. Even though you'll rarely build a site that is purely informational, or purelyinteractional, identifying your site as strongly leaning toward one or the other is key.

Information works best raw

If your site leans toward being informational, that also identifies your use case: Giveyour audience information. The question then becomes a matter of implementation.Given that users want information, how can that information best be delivered? Howcan you best convey data, usually expressed in large quantities, intended for readingonline?

At this point, folks working on e-books, enhanced editions, and the next generationof publishing begin to anxiously wave their raised hands. Information should berepresented for the next generation of media-savvy readers, right? We have newways to present information: floating annotations, clickable pop-ups with extrainformation, and embedded videos.

Yes, there's a place for enhanced information

I'm not saying you should avoid enhanced editions, or shouldn'tpush the envelope with a Web 2.0/3.0 approach to information. Theuse case served by this sort of experience is not the same as"getting information" quickly and efficiently. Most next-generationapproaches to information are creating immersive and evenentertainment applications. They're not trying to just transmitinformation, but to change an entire experience.An informational site is ultimately not trying to be experiential. Ifthat's your goal, then you're looking at an interactional site.

The problem with this sort of thinking is that it seems to suggest history is notweighty, and there is not some degree of inertia in users. People are used to readingbooks, reading dictionary entries, reading Wikipedia. And the way they read fromthese sources is by moving their eyes largely from the top of a page down, and inmany languages, from left to right. They read large quantities of text and, in general,read the text without interruption. In fact, they want to read that information largelywithout interruption.

Informational sites shouldn't try to be the flashiest, sexiest, most fully-featured sites





around. While there is a good case for using images to illustrate things, you shouldlook to existing popular sites for examples: dictionary.com, Wikipedia, and otherhighly-textual sites. You can certainly consider visual elements, try different fonts,and work toward easily accessible and well-understood navigation. You're servinginformation, and anything that detracts or distracts from that is going to ultimatelywork against your use case.

Interaction is interruptive

If you're trying to build interaction, what is different from delivering information? Ifinformation sites seek to minimize interruption, interactional sites seek to maximizeinterruption. Your site is constantly creating in its users a desire to click, or drag, orhighlight. You're creating an environment that is not one-way, but two-way. It's nolonger enough for users to passively read text or look at images; they have to dosomething to progress their experience.

They key to interaction, then, becomes forcing those interrupts. You need tointentionally create points of interaction. If there are paths by which your site can benavigated purely through hyperlinks, you've probably not done a good job ofinformation and interaction design. On the other hand, if users need to click a buttonand fill out a form and then whirl out a collapsed informational section, then you'revery likely in the right ballpark.

Another way to approach the issue of building interaction into your site is to build asequence map of your site. Take a screen shot of a particular page, and then figureout what you want the next page or view of your site to look like. Then take the next,and the next, and so on until you have four or five or ten screen shots of sequentialsteps to get your user from point A to point B.

Determine how the user moves from one screen to the next. Does he click a simplelink? Does he click a button? How much is he moving the mouse? How much actionis occurring on the screen? What is the user doing? This is a great way to figure outyour interrupts. How often must the user get involved to keep things going? Howmany interruptions do you provide if the user doesn't get involved?

Interactional case study: Audi.com

To see how a sequence map can be helpful, let's go through a case study. Look atthe sequence of screens from a high-end automobile manufacturer's Web site.Because it represents a very expensive purchase, the site must draw in and "wow"the user.

Figure 3 shows the opening screen when you visit the Audi.com Web site. The siteis slick, even before you interact with it.





Figure 3. The Audi.com opening screen

Users can immediately interact with the site. The next screen, in Figure 4, involvednothing more than a single mouse click. Clicking any of the color patches just belowthe vehicle immediately changes the color of the car. Without any menu searching,or any hunting around, the user can immediately interact with the page.

Figure 4. The Audi front image responds to user clicking





At this point Audi.com starts to do a lot with relatively old technology. Drop-down andmouse-over menus are nothing new, and anyone with DreamWeaver has beenusing them forever. But Audi is trying to be interactive. So, instead of forcing a dropdown, then a click, they're showing full-blown images, spec sheets, and theequivalent of a nested page.

Figure 5 looks more like an interior page than a front page. Audi.com takes menusfar beyond purely navigation. Mousing over menus brings up not just options to click,but full-blown images and option lists.

Figure 5. Mousing over menus brings full-blown images and option lists





This is a clever approach to interaction. Users aren't clicking a lot, but the site isgiving them a lot of feedback—and it's visual feedback. It feels like a lot is going on.Interaction doesn't always involve complicated Flash animations or a joystick.Sometimes a well-placed image, as on the Audi site, is just perfect.

Figure 6 reveals another key aspect of the interactivity: simplicity. This is atext-based menu, so nothing looks extraordinary. But the menu drops down cleanly,and the current option is highlighted. It's not revolutionary, but in light of everythingelse on the site, you're spending minimal time reading or figuring things out. Instead,you mouse over a menu, move to your option, and click it. There's no room forconfusion. All the time, you know you're getting what you want.

Figure 6. Navigation menus are simple and beg to be clicked





Figure 7 is an interior page. The well-oiled front page isn't paired with a weaker,less-immersive interior page. There are a lot more options, all clickable, and allaffect the central image. Each model's page has many images that respond andchange based on user input. Colors, wheel types, and interior patterns all causeinstant changes.

Figure 7. Visual interior pages involve more clicking than reading





Clearly, a lot of work, design, and programming went into the site. It's not the modelof interaction many sites will adopt. However, the sequence is the key: Users areforced to interact to progress throughout the site. Increased interaction yieldsincreased information and eventually response from the site.

Printing screen shots makes it very easy to see how users interact and what theirinteractions create in terms of their experience. Take the time to walk through thisexercise. It might seem silly to have printouts of screen shots all over your floor, butthat's better than your users getting bored with your site and leaving it.

Interaction doesn't just happen

With the interactional approach, a prime consideration is where the interaction is onthe screen. This is not just a discussion of "Does the widget go on the top-left? Oralong the right?" There are two basic approaches (one of which is simply not good):

• Interaction is not necessarily front-and-center physically, but is in the way





of the user's progress. He or she must interact to proceed.

• Interaction is sprinkled around information. The interaction is sensationalbut not required for site progression.

The first is the preferred approach. Interaction isn't something that can be bolted ontop of an existing site. The reason? Interaction doesn't fit around information. Rather,it's intrinsic to the information itself. Figures 5, 6, and 7 above show that theinteraction is tied into the information itself—the menu options. You can't have onewithout the other.

Blending interaction and information

Getting back to the idea of hybridization, even the most interactional site must atsome point present information. Consider video games, which aren't even sites atall: Here and there, the games are forced to resort to cut scenes or interludes wherethe player is passive while getting necessary information.

On the flip side, the most informational of sites at some point must allow you to clickor search. Imagine the entire information store of Wikipedia on a single page! Eventhen, though, the user must scroll; at its most basic, scrolling is interaction. All sitesare hybrids. Most sites aren't an extreme of one way or the other, with 90%information or interaction and only 10% the converse. Most sites are somewhere inthe 75/25 range. You're going to have to make decisions about information in yourinteractional site, and decisions about interaction in your informational site. And youwant those to be good decisions.

You may be fantastic at interaction, but you're still going to need to be good atinformation. You may be a wonderful information designer, but you'll have to buildinteraction, to some degree, at some point.

Hybrids are a lot harder

The crux of the problem is: No matter how good you are at interaction, you've alsogot to be pretty good at information design. If you're a world class informationdesigner, you've still got to learn how to build meaningful interaction. It's not easy todo well in both of these disciplines. Most people are good at one or the other, andtheir sites lean toward their strengths. The oddity and irony here is that sites that doone thing really well (interaction or information) often do the other thing poorly. Thegoal, of course, is to do both things well so you end up with a very strong site or app.

First and foremost, working on interaction to the exclusion of information design, orthe converse, is a bad idea. You'll likely be strong at one and weak at the other. Yourgoal should be to work very hard at one, then work at the other on an ad hoc,as-needed basis. If you buy into the 75/25 ratio of one type of content to anothertype of content on a single site, then you might want to work on the 75 part of that





ratio three times as much as the 25 part. That certainly is a baseline with which youcan begin.

The next step is to do the task repetitively. Design sites and build interactionconstantly. Designers who spend their free time tinkering with Web sites will, onaverage, be better designers than the designers who spend their free time learningthe guitar.

Finally, you need to push into the areas where you're weak. If you spend your daysworking on sites that are chock full of information, then find some areas where youcan interject a bit of extra interaction. Add JavaScript and jQuery to add collapsibleareas. Push the boundaries of your informational site so it looks more like a 60/40split between information and interaction. And the converse is also true: Find waysof increasing the information flowing through your interactional site. Build sidebarsand panes of text that are revealed at just the right time, but convey moreinformation than you'd usually provide. Improve your weaknesses.

Use your sites

You might roll your eyes at this point and decide you're being told something soobvious that the author can't know what he's talking about. Avoid eye rollage for afew more minutes.

Use your sites. A lot.

Sounds simple, doesn't it? But, just as many actors don't want to watch theirperformances, and many musicians won't listen to their own CDs, many Webdesigners spend next to no time on the sites they develop. They code, design,upload, and forget. They then have no idea how the sites are being consumed.They're working off of an imagined use case, with an invisible and non-existent user.That's not a good habit.

So use your site. If you hate it, your users may hate it. Don't dismiss your problemswith a hasty, "Well, I just know the system," or "None of the users are anything likeme." A better response is, "How can I improve this site for the users, whether they'relike me or not?" That extra bit of thought could dramatically change your view of yoursite.

Conclusion

The path toward great Web design doesn't consist of you quoting this article—or anyother—over and over as you build comps and code JavaScript. Instead, you shouldevaluate and internalize the principles outlined in this article, and then use them as aspringboard for making your own principles. Your sites and apps should be better





because you thought about this article, not just because you blindly put it intopractice.

In this article you learned principles to use to determine whether your Web presencecurrently functions more like a Web site or a Web app. Whether you decide yourpresence needs to be more informational, or more interactional, or if it's fine the wayit is, the important thing is to think about what you're doing. You're now makinginformed decisions that are conscious, rather than tiny uninformed subconsciousdecisions.

Now, go break some rules, or argue with the writers you read. That means you'refiguring out what works best for you. Your context isn't the same as mine, or anyoneelse's. You're going to need to "write your own article" with what works for you.That's a good thing. In the meantime, I hope this article kicks off some good thinking.Let me know in the comments at the bottom of this article what I'm right about andwhat I'm wrong about. I look forward to hearing from you and learning about yourcontext—and how your Web presence is evolving to match that context.





Resources

Learn

• Any discussion on Web usability has to start with Jakob Nielsen's Web site,which is full of articles and great resources.

• Usability is closely related to accessibility. A usable site is almost always highlyaccessible. Learn more about accessibility at the Web Accessibility Initiative(WAI).

• "User-Centered Design and Web Development" (July 1998) is old, but itexplores the important issues detailed in this article's introductory sections.

• User-centered design in Wikipedia has a lot of good references and links tofurther reading.

• Head First HTML with CSS & XHTML (Robson and Freeman, O'Reilly Media,Inc.) has a terrific introduction and concept-rich instruction in XHTML and CSS.

• Head First Web Design (Wattral and Siarto, O'Reilly Media, Inc.) is alearner-friendly book on Web design that goes in depth into usability, color,layout, navigation, and even intellectual property.

• The developerWorks Web development zone specializes in articles coveringvarious Web-based solutions.

• IBM technical events and webcasts: Stay current with developerWorks'technical events and webcasts.

• developerWorks on-demand demos: Watch demos ranging from productinstallation and setup for beginners, to advanced functionality for experienceddevelopers.

Get products and technologies

• Prototype: A best-of-breed JavaScript framework for working with your page,automating tedious JavaScript actions, and integrating screen effects.

• script.aculo.us: Another must-have, script.aculo.us is an effects library formoving, morphing, animating, and adding GUI wonderment to your Web page.This is ideal for adding on to a Prototype-driven site.

• MooTools: Lightweight and pretty slick, moo.fx adds to MooTools whatscript.aculo.us adds to Prototype. This is screen effects at its finest.

• Fundraiser Insight: Fundraiser Insight provides several Web-appropriatethermometers in case you're looking to add fundraising-style widgets to yoursite.

• PHP Fundthermo: This PHP image generator is geared toward fundraising, but



http://www.useit.com/

http://www.w3.org/WAI/

http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

http://en.wikipedia.org/wiki/User-centered_design

http://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X/newinstance-20

http://www.amazon.com/Head-First-Design-Ethan-Watrall/dp/0596520301/newinstance-20

http://www.ibm.com/developerworks/web/

http://www.ibm.com/developerworks/offers/techbriefings/?S_TACT=105AGX44&S_CMP=ART

http://www.ibm.com/developerworks/offers/lp/demos/

http://www.prototypejs.org/

http://script.aculo.us/

http://mootools.net/

http://www.fundraiserinsight.org/thermometer/

http://phpfundthermo.sourceforge.net/



can easily be tweaked to give you any sort of progress indication.

• Evaluate IBM products in the way that suits you best: Download a product trial,try a product online, use a product in a cloud environment, or spend a few hoursin the SOA Sandbox learning how to implement Service Oriented Architectureefficiently.

Discuss

• My developerWorks: Connect with other developerWorks users while exploringthe developer-driven blogs, forums, groups, and wikis.

About the author

Brett D. McLaughlin, Sr.Brett McLaughlin is a best-selling, award-winning author of non-fiction.His books on computer programming, home theater, and analysis anddesign have sold in excess of 100,000 copies. He has been writing,editing, and producing technical books for nearly a decade. Brett is ascomfortable in front of a word processor as he is behind a guitar,chasing his two sons around the house, or laughing at reruns ofArrested Development with his wife. His last book, Head First ObjectOriented Analysis and Design, won the 2007 Jolt Technical Bookaward. His classic Java and XML remains one of the definitive works onusing XML technologies in the Java language.



http://www.ibm.com/developerworks/downloads/

http://www.ibm.com/developerworks/downloads/soasandbox/index.html

https://www.ibm.com/developerworks/community/

http://www.headfirstlabs.com/books/hfooad/

http://www.headfirstlabs.com/books/hfooad/

http://www.oreilly.com/catalog/javaxml3/



from web sites to web applications, part 1: web site or web app?

Documents