41. Data sent back server Data + presentation + logic 1 2 Request (from user) Latency here “looks wrong”. A preloader is needed load time vs. subsequent naviation time
42. Data sent back server Data + presentation + logic 1 2 Anticipating user request Instant Response! pre-fetching data
43. At this point, download all remaining slides Naive model >Insight: Most users start at front of slideshows. >Insight: Users pause, then hit advance several times in rapid succession >Insight: Users that cross the 10 slide mark tend to finish a presentation >Insight: Bandwidth costs are under control Iteration 1 Iteration 3 1 2 3 … evolution of slide-loading predictive model
44. server Instant Response! *Individual results may vary. UI investments are subject to market risk. Read prospectus carefully before investing. assuming success when saving
45. server Instant Response! But change not visible to others for 15 minutes pinching pennies: successful caching
Hey everybody! My name is Jon Boutelle. I’m the CTO of Uzanto. Today I’m going to be talking a really simple idea. I’m going to be talking about how Flash and AJAX allow to do two things. 1) Reinvent mature web applications, and 2) Make dramatic improvements to existing web applications about Rich Client technologies like Flash and AJAX, and how to use them to create great web experiences. I want to avoid giving blanket recommendations about how things should be built. Design is really contextual: approaches that work for one application often aren’t suitable for other kinds of applications. What I will talk about is the experiences we’ve had, both positive and negative, developing rich internet applications, and how these experiences have shaped the way we think about design. I will also talk about lessons we have learned and about the mistakes we have made. Beyond principles: our experiences with RIA design and development How to think like an RIA designer
1) It’s what we used as inspiration, and it seemed to work. 2) Games seem to captivate people, they get addicted, they play them for hours. They must be doing something right.
When I think about how to use rich client technologies, one dimension that comes to mind is the difference between using it to reinvent a product category, and using it to optimize an existing product. One of the big opportunities that RCT give us is the chance to reinvent quote mature unquote product categories. For example, web based email was considered pretty much done when Google released gmail. This opportunity exists because for the longest time, web developers had a very limited idea of what was possible on the web. We were all caught in this request-wait-response model. Now we all know that you can make web applications really dynamic and rich, pretty much anything that’s been done up until now has the potential to be redone better. SCRAP BELOW THIS In a way, I think the two applications that we’ve built represent two different ways to use rich client technology. There’s two strategies for using RIA technologies that we’ve used. First is to use rich client technologies to reinvent an existing product category. GMail, Google maps. MindCanvas Reinvent existing product categories Google Maps, Gmail, Zimbra, MindCanvas Participant (Flash) and MindCanvas client (AJAX)
The other place where rich client technologies fit in is in making “regular” web applications more responsive, intuitive, and easier to use. If there’s a particular interaction that is very common or very important to your business, you can optimize that flow. The nice thing about using this approach is a lot of times there are simple improvements that can make an application MUCH easier to use. This means that a lot of times the ROI for making these kinds of improvements will be very high. A simple example of this would be a shopping cart that uses AJAX to update shipping prices when the zip code is entered. A more complex example would be making a social app more responsive by using AJAX in critical places. You can also . Tactical uses of rich web technologies Make dramatic usability improvements with huge ROI
What do I mean by RCT?
Uzanto started as a user experience consulting company, and over the years has kinda morphed into being a web products company. The first product we built is MindCanvas, which launched about a year and a half ago. MindCanvas is an online survey application specifically made for doing design research. I makes aggressive use of both Flash and AJAX. Embarassingly enough, major portions of the application had to be rewritten from scratch before we had something that we felt was good enough to release in the marketplace. Stuff that was written in AJAX had to be rewritten using Flash. Moreover, stuff that was built using Flash had to be rewritten using AJAX. So after that experience, we think we have a pretty good handle on the strengths and weaknesses of each technology, and specific ideas about when to use each one. The second product we built is Slideshare, which launched a few months ago. Slideshare is a website for sharing presentations: it’s been called “the youtube of powerpoint” by some people. Slideshare also uses both Flash and AJAX, usually on the same page. (Note, we have not had to switch technologies even once for Slideshare. Building of it has gone fast, and much more smoothely, and part of it is knowing and understanding ria’s) SCRAP BELOW THIS SlideShare: multimedia Flash and light AJAX Traditional web application with AJAX optimizations Use both technologies in same screen Flash as secret weapon for new media companies
MindCanvas was a product that we thought of while doing user research for our consulting practice. It’s a good example of this concept of reinventing an existing product category. Online surveys have been around for a while. But we found that for the kind of questions that we wanted to ask, nothing that was available worked really well. We could sort of duct tape a solution together using a combination of survey products. But it wasn’t at all optimal. It wasn’t just a question of supporting a particular type of question, either. The fact that the software had been written with the assumption that the web page would not be interactive fundamentally crippled it’s ability to replicate the kind of research exercises that we successfully do face-to-face when doing user research. What kind of user research methods do you guys use? An example will help explain what I mean by this
So here’s a screenshot from our favorite online survey vendor, SurveyMonkey. SurveyMonkey is is a lot, lot better than much of other survey software we’ve used. But its still very much a “plain” HTML experience. How many people here have used survey monkey? You answer a page of questions, click “OK”, and then the next page appears. If there’s form validation to be done, it happens through javascript popups. It’s just not compelling. Do demo of divide the dollar here.
NOTE TO SELF: OPEN UP MINDCANVAS DIVIDE THE DOLLAR HERE One advantage that we get from using RIAT for building survey software is that it is much easier to mimic real world techniques. TheMindCanvas exercise is pretty similar to a face-to-face divide the dollar exercise. That’s because the richer UI capabilities enable us to simulate the physical world, at least a little bit. We can pick things up in one place and put them down in another, things can get pushed around or displaced, there’s a sense of a third dimension. Design research is inherently visual: a lot of the time, we’re asking for users to interact directly with a proposed design for a web page. In order for them to give us real feedback, they need to be able to identify a particular area of the proposed visual and do something to it. <Show example of sticky here> SCRAP BELOW THIS Ultimately MindCanvas is a design paradigm. It’s a way of designing experiences that are game-like, quick, and gather information from the user in the process. At this point of time, we can think of another method that we want to implement. And basically, all it takes is to conceptualize it using the MindCanvas way.
How? To use RIAT to make online surveys better? Well if the problem is getting people engaged, and motivating them to do complex tasks, then games are a pretty good design inspiration. We specifically looked at casual games, especially games like bejewelled from popcap. These games are amazing in their ability to draw you in, shift your attention, get you hooked. So what is it these games do that is so great? Design inspiration: casual games (Popcap etc) Advantages - Immediate feedback (action / reaction loop) - Engaging graphics Feel the flow Popcap games
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
<USE OPEN SORT TO DEMO THESE> -The best games play a lot with attention control. Often it’s so subtle that users themselves aren’t aware of it. If you get stuck playing bejewelled, a jewel that is in a legal move will softly gleam. Your attention is drawn to it, but it happens so fast that users aren’t aware of what happened. They just know that they “found” the next legal move. (Show Intro to card sort + “shine” on counter)
Isn’t all this too much? Do we really want web pages to be making noises all the time, animating all over the place, deciding where on the screen we look? Do we want our electronic banking site to be whimsical? Probably not. “ Casual” one-time user Not mandatory, so has to be fun and engaging in order to motivate people to do it. Not serious (doesn’t involve a transaction of some kind) Immersive interfaces benefit from the” full screen” Frees you from expectations of a web app (back button, metaphor of navigating through pages, etc) THIS CONTRADICTS POPCAP “PIXEL DISCIPLINE” POINT. REMOVE THIS ONE OR THAT ONE
Plus-point: LIGHT and FAST-feeling Negatives: - no vector graphics Animation more primitive No sound Platform Issues
Survey design is a case like this: people spend HOURS working on making their surveys exactly right.
Obviously, if someone is spending hours doing something using a conventional web app, then there’s a lot of value in removing the click>wait time. The value isn’t just in the extra seconds that get saved, either. Those seconds of time spent waiting for the UI to refresh causes users to get distracted, to lose their sense of flow. So making the application more responsive means that people can work MUCH faster, since they aren’t continually getting distracted. And they can probably do better work, for the same reason. So for applications where someone is doing creative work on their own data, there’s a lot of value in optimizing the experience with RCT.
Spent 6 months making what we though would be a REALLY cool survey design interface in flash. After extensive user testing and multiple iterations, we had to abandon it. What went wrong?
Screen layout was really hard. We kept running out of space. Why? Because it “feels” unnatural to have a scroll bar on the border of a flash application. Metaphor is an “application”, not a page. Scroll bars only feel natural on individual “blocks” inside the application. 2) The “application” ness of the page made it awkward to support more than a certain number of tasks. Everything needed it’s own panel, which would swing out when needed, then swing back closed when you were done with it. Designing it so that everything fit was really hard. Often the panel transitions ended up looking really ghetto (less than 2 fps).
2) Despite our best efforts, we couldn’t get real direct manipulation working. The workflow we could actually engineer was always “select a question, it pops up in a panel, work on the question in that panel“. NOTE: this design pattern is pushed really heavily by Adobe in their demos. Similarly, the positioning of the questions in the survey required dragging a widget that represented the question, rather than the question itself.
Needed to use html rather than flash So can have long pages So can easily use navigation metaphor to strip out some, less frequently used tasks into separate “pages”. Needed better direct manipulation Edit in place Drag and drop to position Would this be possible using Javascript?
Yup! It was possible. 1) When the whole page scrolls, you can navigate using the down arrow. MUCH faster than directly using scroll bars. 2) The page can be arbitrarily long. Design freedom! After being trapped in that short rectangle that was the Flash layout, it was a huge relief to have an arbitrarily long page to work with.
AJAX apps: what should they do? Save in background “the right thing to do” User doesn’t lose work User has less clicking to do Save indicators Users aren’t used to this bar in web page Need to inform user of what’s happening With proper signaling, they seem to understand it fine
AJAX apps: what should they do? Save in background “the right thing to do” User doesn’t lose work User has less clicking to do Save indicators Users aren’t used to this bar in web page Need to inform user of what’s happening With proper signaling, they seem to understand it fine
“ Saving your work” in rich applications Desktop: need to explicitly save Vintage web: saves “by accident” due to web navigation (For example, if you add something to your shopping cart, or if you change your account address on a website, you can’t navigate away from that page without saving or abandoning your data. What do users expect in AJAX apps?
AJAX apps: what should they do? Save in background “the right thing to do” User doesn’t lose work User has less clicking to do Save indicators Users aren’t used to this bar in web page Need to inform user of what’s happening With proper signaling, they seem to understand it fine
AJAX apps: what should they do? Save in background “the right thing to do” User doesn’t lose work User has less clicking to do Save indicators Users aren’t used to this bar in web page Need to inform user of what’s happening With proper signaling, they seem to understand it fine
Copy / Paste & deliverables in PPT Supporting integration with offline work Recognize continued dominance of Office productivity suite for doing “real work”
AJAXifying core work areas has huge ROI Hours and hours of time saved Happy customers Well worth the preload cost and engineering effort
App could work without Rich Client tech But wouldn’t be as fast or as fun
Evoke familiar “page metaphor”: looks “web native” Get “head room” to design Mix-in all benefits from flash, while avoiding downsides Use Flash for Complex widgets Media Visualizations Use HTML as harness for page, text display Use AJAX for in-place editing
Pick a platform that lets you rev fast These things are very hard to get right the first time Notice the tasks that users do often, focus on RIAfying that
One thing we’ve noticed is that the page becomes a more fundamental part of the information architecture in RIAs. Since each page has the ability to do much more, it contains a larger amount of functionality. What you make doable within the page versus what you force a page refresh for becomes a statement of what content and functionality you think belongs together. Deciding where page borders are is a key IA decision now Recommendations: Don’t make users cross borders in the middle of a task (keep people in context) Don’t make users cross borders too frequently Do make users cross borders when you want to emphasize the border
Examples: save to favorites, more/related tab Advantages focus user attention on one location reduce user time spent waiting for page reloads Reduce options user has to pick from when scanning page Conclusions This is how most work is done: a default best practice
It’s NOT a contest. You need both, sometimes. You don’t want to use the wrong technology in the wrong place. Understanding the strengths and weaknesses of each one will help you build better apps.
Text Issues fuzzy rendering inability of user to copy/paste
