User interface vs. user experience when it comes to rich Internet applications

Summary: I've come across a number of things lately that have gotten me thinking about user interface versus user experience and how the distinction relates specifically to rich Internet applications. This isn't a new topic, and one Google search reveals a lot of history and commentary but as RIAs have gotten more attention, I think the difference between the two is even more important so we don't get caught up in arguments about richness.

I've come across a number of things lately that have gotten me thinking about user interface versus user experience and how the distinction relates specifically to rich Internet applications. This isn't a new topic, and one Google search reveals a lot of history and commentary but as RIAs have gotten more attention, I think the difference between the two is even more important so we don't get caught up in arguments about richness.

Rich doesn't have to mean heavy. RIAs can still provide a lightweight user interface while using animation, transitions, and effects in a way that enhances the user experience.The richness aspect of RIAs seems to be the most controversial to people (discounting the 'I' debate) because most see richness as a requirement under which developers/designers will stuff gratuitous and heavy user interfaces. They have a history to be wary of. Flash is littered with bad examples of adding animation and any interactive tool out there will have its fair share of the same. But richness is about a lot of things. It is about a more sophisticated user interface, but it's also about being able to handle more data, being able to provide a valuable user experience and being able to incorporate video and media where appropriate.

That's why the UX vs UI issue is so important. When I think about good RIAs I think about the ones that have blended the two together to create both a rich and usable application. Rich doesn't have to mean heavy. RIAs can still provide a lightweight user interface while using animation, transitions, and effects in a way that enhances the user experience. As the traditional commentary notes, user experience is about much more than what's on the screen. It's about how all the pieces fit together. One of the reasons RIAs are so compelling is because we now have the tools and the technology to put those pieces together in powerful ways. The end result absolutely should not be a bloated user interface (though of course, we'll see mistakes made). In the end it should be about creating usable interfaces that tie back to a better overall user experience.

Topic: Browser

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

24 comments
Log in or register to join the discussion
  • Still looking for one example

    ... of a "rich experience" that isn't fundamentally more about stroking the developers' egos than about reducing [b]my[/b] frustration level.

    Example: I'm in the process of shopping for a new car. The manufacturer sites are without exception 100% Flash, which means that instead of a page loading in fractions of a second they take several seconds to load. Once loaded, the transitions are slow and not reversible if I mis-navigate. When I finally find a page that contains information I want, I have to transcribe it manually because it doesn't support copy/paste.

    Net result is that what should have been a quick scan through four sites turns into a half-hour exercise in click, wait, click, wait, go back to main page, click, wait ... type, check, double-check, type, etc.

    However, those transition animations certainly make me want to buy that model. After all, who [u]wouldn't[/u] lust after a car that spins around on its vertical axis?
    Yagotta B. Kidding
    • Back to Ryan's Point...

      I think what you are pointing out in your comment further goes to support Ryan's
      thoughts. You are looking for a car, and you are being hit with very creative, and
      often "heavy" uses of Flash or other rich client technology. What you are getting is
      "good UI design". What you are not getting is a good user experience. I am
      assuming you are shopping for cars on manufacturer sites, and not surfing
      dealerships. The big brands want to make an emotional connection to you, and
      want you to experience their vehicles in a way that might entice you to head into a
      dealership. The flash player makes an exceptional platform to develop USER
      EXPERIENCES that allow YOU (the user) to find out what you need to know about
      making a purchase decision much more naturally than what standard HTML can
      deliver. The goal is to let you "kick the tires" as opposed to being driven down some
      page-based path of looking at photos of the car and reading specs.

      Here's my real point:

      1) There are a lot of "Flash Sites" out there
      2) There are comparatively few real "Rich Internet Applications" out there that are
      really designed with the "user" in mind.
      3) Out of those applications, there are many that have nice user interfaces, but
      again... comparatively few that deliver a really good user experience.

      Why? It's because when you really think about it, the industry is still learning the
      best way to make user experience good for the masses, knowing that people (like
      you) have pretty strong opinions about being bothered with fluff when you want to
      simply accomplish a basic task.

      Keep your mind open, and keep your eyes on new RIAs over the next year. You are
      going to see more and more firms start to nail the user experience, as they climb
      above just creating slick user interfaces.

      - dave
      technolog1st
      • RE: Back to Ryan's Point...

        Wow, I was preparing for a customer visit but you did a better job than I could have of explaining it! YBK, I'd give Buzzword a shot. As Dave notes, there are very few RIAs out there. And I hate those car sites as much as you do YBK. I think it's a bad use of Flash but it doesn't make RIAs bad.
        ryanstewart
      • Objective vs. Subjective

        [i]What you are getting is "good UI design". What you are not getting is a good user experience.[/i]

        No, I'm getting a craptastic "UI design." It's a bad design precisely because it's not engineered to allow me to meet my own needs and instead forces its own agenda on me.

        All in the name of providing me with an "experience."

        The problem with trying to force-feed someone an "experience" is that "experience" is subjective -- and the only way to have a uniform "experience" is to remove all individuality from us. [u]My[/u] idea of a great experience might be a fast run down an icy mountainside with an ambient temperature of -10 and blowing snow; your experience of the exact same input might well be a mixture of terror and miserable discomfort.

        A "good UI design" leaves room for the [u]user[/u] to define hir own objectives and pursue them. A "good experience" necessarily projects the designer's definition of "good experience" on the passive recipient.

        If you don't like weepies, you're [b]not[/b] going to enjoy "An Affair to Remember." No amount of playing around with the cinematography is going to solve that problem.
        Yagotta B. Kidding
        • Same as bad ads

          Everybody's seen TV ads that drove them nuts. If fact we've also seen TV shows that are horrible.

          Then again, there are enjoyable ads and enjoyable shows.

          The unfortunate part comes from the fact that, too often, the marketing types think of teh web like TV and throw in too much stuff.

          Oh! Just go buy a Corolla - cheap, roomy, gets you where you have to go. Why waste a bunch of money on a depreciating asset. You might ascertain that I'm not a car afficienado.
          j.m.galvin
    • Here's a good example

      Go to Adobe's site and then Creative suite. You're given the chance to actually use some of the new features online.

      That's a far cry over a site proclaiming "Newest Latest and Greatest", and then giving you a bunch of hype. Instead, Adobe says "Give it a try right now. You don't even have to download the trial."

      That's a good example of a preperly design RIA.
      j.m.galvin
    • Here is an example...

      http://discovery.com/cancer

      dave
      technolog1st
      • If you say so

        It's a picture gallery with a clunky indexing scheme (sliders instead of drop-down lists, for instance), very limited search, non-scalable text, no cut and paste, no descriptive text on the controls, useless help, no alt text, and no localization. If I wanted to spend more time on it I'm sure that there's more.

        Thank you for making my point.
        Yagotta B. Kidding
  • Examples

    The Windows copy dialog (pieces of paper cycling endlessly across the dialog box)
    is a good example of gratuitous animation. It tells me nothing at all (other than
    that my machine is still running).

    On the other hand, the Mac animation when you switch users with fast user
    switching, while huge (the entire screen does a cube rotate until the other user's
    desktop is visible) is a great example of animation that actually accomplishes a
    purpose. It makes it very clear that your account is still there, that you haven't
    been logged out, and that you can get back to it. It's just temporarily off to the
    side of the screen :-).
    KeeHinckley
    • I do not see the difference

      Flying papers .. rotating cubes.. what's the difference :) They both are useless and do not say anything. All animations are nice for maybe the first 30 minutes. Then they become boring and just waste time.
      paul2011
    • The difference is...

      The difference is that one is just a little movie to keep you amused will the task finishes, and the other is actual animation of the UI, reflecting the change you have made.

      The latter is far more powerful, but often not applicable.

      On Windows Vista, the flying files are gone, and replaced with a more informative dialog, and a progress bar.
      TheTruthisOutThere@...
      • RE: The difference is...

        Exactly! Informative, valuable movement is the key. One of things that kills me about the JavaScript "loading" graphics is that they're just animated GIFs. The most valuable animations should give you a sense of where you are, what's happening and how long that particular task is taking. OS X and Vista have been much better about this.
        ryanstewart
        • Microsoft Access

          Microsoft Access once (long time ago) implemented its progress bar during queries simply as an logarithm of elapsed time (i.e. it starts off quick, and gets slower). They had no way to properly estimate query execution time.

          Earlier this year, I was building an app that called a web service that was slow and inconsistent in its response thing, and the tester complained at lack of feeback, so we did the same a similar thing (but we just animated the progress bar is three progessively slow sections) without telling them.

          They were extremely impressed with its "accuracy". The UI was a blatant lie, but the UX was good!
          TheTruthisOutThere@...
        • Or better yet

          [i]The most valuable animations should give you a sense of where you are, what's happening and how long that particular task is taking.[/i]

          Or for that matter STFU and let you do something else without imposing their decision that you have nothing better to do than watch the progress of a file copy.

          It's not 1982.

          [i]OS X and Vista have been much better about this.[/i]

          Having used neither, my question is: can you shut them off altogether?
          Yagotta B. Kidding
          • Most of the time, it not there.

            Can't speak for OS X, but on Vista, you only get the progress bar if the file copy is going to take more than a second or two - I'm not sure exactly of the threshold - so normally its not there.

            [i]and let you do something else[/i]

            Windows been a preemptive multitasking OS for 15 years.

            [i]Having used neither, my question is: can you shut them off altogether[/i]

            This one not, others perhaps. Despite what you might think, they are generally not intrusive.
            TheTruthisOutThere@...
  • RE: User interface vs. user experience when it comes to rich Internet appli

    Ryan,
    Yes UX and UI often get conflated when they are not the same thing. The other day I was thinking about technology's annexation of the word rich.
    It worries me a bit http://theotherthomasotter.wordpress.com/2007/10/28/boxes-and-arrowsrichness/
    thomasotter
    • RE: RE: User interface vs. user experience when it comes to rich Internet a

      Nice! Thanks Thomas. I'm now subscribed to both your and Uday's blog. Thanks for the tip!
      ryanstewart
  • Can you have...

    Can you have a good UX if the UI is bad? How profound is the differnce between the two?

    If I bought a lottery ticket online, with the world's most unintuitive flakey UI, and then won millions, I think I would say my overal UX was good! Of course, I'm most likely not to win, so my UX would be poor (not because I'm a bad loser, but because buy the ticket was a pain).


    Something kind of related...

    I'm using Vista at the moment, and the only problem I have encountered is Flash crashing IE all the time, so I just uninstalled Flash.

    What a revelation! Not only is IE now completely stable, many pages load much, much faster, and I no longer have flickering ads in my peripheral vision pushing me to the edge of epilepsy.

    I would say, removing Flash has realy improved my UX. The UI is essentially unchanged, because (for example on ZDNet) the ads are still there, just not in Flash.
    TheTruthisOutThere@...
    • RE: Can you have...

      That's a great question. I think for the most part the two can be separated and you can have a good UX with a "bad" UI. But as you said, the UI is basically the same when you removed Flash. Obviously the Flash UI didn't add anything, so it was bad and gave you a bad user experience.

      This is a really interesting line of thought..hmm..
      ryanstewart
      • Guns don't kill people. People kill people.

        People too often complain about the tool, Flash, rather than the improper use of the tool.

        In the case of ad supported websites, the problem arises when one page can have numerous flash ads (some well done others not) all being called from different ad servers, having to pass through a whole chain before working on teh user's screen. That is an example of bad design on the part of the site - not the flash tool. Any slowdown (especially waiting for an ad server connection and download) ruins the UI - yet has nothing to do with fash itself.

        Before flash we were all treated to the idiocy of 400 frame animated gifs, which took forever to download and could work slowly without enough vram on the user's machine. It was worse back then because dial up was the prevalent method of internet access.

        Bad design, like too large flash file, will always be there, no matter what the technology. Bad site design - simultaneously allowing too many elements being called from too many remote servers will always be with us.

        Well designed, and utilized, flash can greatly improve UI. Unfortunately, users tend to blame the tool when it's improperly used.
        j.m.galvin