lixlpixel all | all news.
Categories: all
Boxes and Arrows / all
- On A Scale of 1 to 5
Where would we be without rating and reputation systems these days? Take them away, and we wouldn’t know who to trust on eBay, what movies to pick on Netflix, or what books to buy on Amazon. Reputation systems (essentially a rating system for people) also help guide us through the labyrinth of individuals who make up our social web. Is he or she worthwhile to spend my time on? For pity’s sake, please don’t check out our reputation points before deciding whether to read this article.Rating and reputation systems have become standard tools in our design toolbox. But sometimes they are not well-understood. A recent post at the IxDA forum showed confusion about how and when to use rating systems. Much of the conversation was about whether to use stars or some other iconography. These can be important questions, but they miss the central point of ratings systems: to manage risk.So, when we think about rating and reputation systems, the first question to ask is not, “Am I using stars, bananas, or chili peppers?” but, “what risk is being managed?” What Is Risk?We desire certainty in our transactions. It’s just our nature. We want to know that the person we’re dealing with on eBay won’t cheat us. Or that Blues Brothers 2000 is a bad movie (1 star on Netflix). So risk, most simply (and broadly), arises when a transaction has a number of possible outcomes, some of which are undesirable, but the precise outcome cannot be determined in advance. Where Does Risk Come From?There are two main sources of risk that are important for rating and reputation systems: asymmetric information and uncertainty.Asymmetric information arises when one party to a transaction can not completely determine in advance the characteristics of the other party, and this information cannot credibly be communicated. The main question here is: can I, the buyer, trust you, the seller, to honestly complete the transaction we’re going to engage in? That means: will you take my money and run? Did you describe what you’re selling accurately? And so on.This unequal distribution of information between buyers and sellers is a characteristic of most transactions, even in transactions where fraud is not a concern. Online transactions make asymmetric information problems worse. No longer can we look the seller in the eye and make a judgment about their honesty. Nor can we physically inspect what we’re buying and get a feel of its quality. We need other ways to manage our risk generated by asymmetric information.The other source of risk is not knowing beforehand whether we’ll like the thing we’re buying. Here honesty and quality are not the issue, but rather our own personal tastes and the nature of the thing we’re buying. Movies, books, and wine are examples of experience goods, which we need to experience before we know their true value. For example, we’re partial to red wine from Italy, but that doesn’t mean we’ll like every bottle of Italian red wine we buy. Managing Risk with DesignAmong the ways to manage risk, two methods will be of interest to user experience designers: Signaling is where participants in a transaction communicate something meaningful about themselves. Reducing information costs involves reducing the time and effort it takes participants in a transaction to get meaningful information (such as: is this a good price? is this a quality good?).Reputation systems tend to enable signaling and are best utilized in evaluating people’s historical actions. In contrast, rating systems are a way of leveraging user feedback to reduce information costs and are best utilized in evaluating standard products or services. It is important to note that reputation systems are not the only way to signal (branding and media coverage are other means, among others), and rating systems are not the only means of reducing information costs (better search engines and product reviews also help, for example). But these two tools are becoming increasingly important, as they provide quick reference points that capture useful data.As we review various aspects of rating and reputation systems, the key questions to keep in mind are: Who is doing the rating? What, exactly, is being rated? If people are being rated, what behaviors are we trying to encourage or discourage? Who is doing the Rating?A random poll of several friends shows about half use the Amazon rating system when buying books and the other half ignore it. Why do they ignore it? Because they don’t know whether the people doing the rating are crackpots or if they have similar tastes to them.Amazon has tried to counteract some of these issues by using features such as “Real Name” and “helpfulness” ratings of the ratings themselves (see Figure 1).
Figure 1: Amazon uses real names and helpfulness to communicate honesty of the review.This is good, but requires time to read and evaluate the ratings and reviews. It also doesn’t answer the question, how much is this person like me?Better is Netflix’s system (Figure 2), which is explicit about finding people like you, be they acknowledged friends or matched by algorithm.
Figure 2: Netflix lets you know what people like you thought of a movie.Both these systems implicitly recognize that validation of the rating system itself is important. Ideally users should understand three things about the other people who are doing the rating: Are they honest and authentic? Are they like you in a way that is meaningful? Are they qualified to adequately rate the good or service in question?The last point is important. While less meaningful for rating systems of some experience goods (we’re all movie experts, after all), it is more important for things we understand less well. For example, while we might be able to say whether a doctor is friendly or not, we may be less able to fairly evaluate a doctor’s medical skills. What is being rated?Many rating systems are binary (thumbs up, thumbs down), or scaled (5 stars, 5 chili peppers, etc.), but this uni-dimensionality is inappropriate for complicated services or products which may have many characteristics.For example, Figure 3 depicts a rating system from the HP Activity Center and shows how not to do a rating system. Users select a project that interests them (e.g., how to make an Ireland Forever poster) and then complete it using materials they can purchase from HP (e.g., paper). A rating system is included, presumably to help you decide which project you should undertake in your valuable time.
Figure 3: The rating system on the HP Activity Center site: what not to do.A moment’s reflection raises the following question: what is being rated? The final outcome of the project? The clarity of the instructions? How fun this project is? We honestly don’t know. Someone thoughtlessly included this rating system.Good rating systems also don’t inappropriately “flatten” the information that they collect into a single number. Products and services can have many characteristics, and not being clear on what characteristics are being rated, or inappropriately lumping all aspects into a single rating, is misleading and makes the rating meaningless.RateMDs, a physician rating site, uses a smiley face to tell us about how good the doctor is (Figure 4).
Figure 4: RateMDs.com rating system for doctors.Simple? Yes. Appropriate? Perhaps not.Better is Vitals, a physician rating site that includes information about doctors’ years of experience, any disciplinary actions they might have, their education, and a patient rating system (Figure 5).
Figure 5: The multi-dimensional rating system on Vitals.com.While Vitals has an overall rating, more important are the components of the system. Each variable – ease of appointment, promptness, etc. – reflects a point of concern that helps to evaluate physicians.When rating experiences, what is being rated is relatively clear. Did you enjoy the experience of consuming this good or not? Rating physical goods and products can be more complicated. An ad hoc analysis of Amazon’s rating system (Figure 6) should help explain.
Figure 6: Amazon’s rating system is not always consistent.In this example the most helpful favorable and unfavorable reviews are highlighted. However, each review is addressing different variables. The favorable review talks about how easy it is to set up this router, while the unfavorable review talks about the lack of new features. These reviews are presented as comparable, but they are not. These raters were thinking about different characteristics of the router.The point here is that rating systems need to be appropriate for the goods or services that are being rated. A rating system for books cannot easily be applied to a rating system for routers, since the products are so entirely different in how we experience them. What aspects we rate need to be carefully selected, and based on the characteristics of the product or service being rated. What behaviors are we trying to encourage?Any rating of people is essentially a reputation system. Despite some people’s sensitivity to being rated, reputation systems are extremely valuable. Buyers need to know whom they can trust. Sellers need to be able to communicate – or signal based on their past actions – that they are trustworthy. This is particularly true online, where it’s common to do business with someone you don’t know.But designing a good reputation system is hard. eBay’s reputation system has had some problems, such as the practice of “defensive rating” (rate me well and I’ll rate you well; rate me bad and I’ll rate you worse). This defeats the purpose of a rating system, since it undermines the honesty of the people doing the rating, and eBay has had to address this flaw in their system. What started out as an open system now needs to permit anonymous ratings in order to save the reputation (as it were) of the reputation system.While designing a good reputation system is hard, it’s not impossible. There are five key things to keep in mind when designing a reputation system: 1. List the behaviors you want to encourage and those that you want to discourageIt’s obvious what eBay wants to encourage (see Figure 7). A look at a detailed ratings page shows they want sellers to describe products accurately, communicate well (and often), ship in a reasonable time, and not charge unreasonably for shipping. (Not incidentally, you could also view these dimensions as source of risk in a transaction.)
Figure 7: eBay encourages good behavior. 2. Be transparentOnce you know the behaviors you want to encourage, you then need to be transparent about it. Your users need to know how they are being rated and on what basis. Often a reputation is distilled into a single numbersay, reputation pointsbut it is impossible to look at a number and derive the formula that produced it. While Wikinvest (Figure 8) doesn’t show a formula (which would be ideal), they do indicate what actions you took to receive your point total.
Figure 8: Wikinvest’s reputation systemAny clarity that is added to a reputation system will make your users happy, and it will make them more likely to behave in the manner you desire. 3. Keep your reputation system flexibleAny scoring system is open to abuse, and chances are that any reputation system you design will be abused in imaginative ways that you can’t predict. Therefore it’s important to keep your system flexible. If people begin behaving in ways that enhance their reputation but don’t enhance the community, the reputation system needs to be adjusted.Changing the weighting of certain behaviors is one way to adjust your system. Adding ratings (or points) for new behaviors is another. The difficulty here will be in keeping everything fair. People don’t like a shifting playing field, so tweaks are better than wholesale changes. And changes should also be communicated clearly. 4. Avoid negative reputationsWhen possible, reputation systems should also be non-negative towards the individual. While negative reputations are important to protect people, negative reputations should not always be emphasized. This is specifically true in community sites where users generate much of the content, and not much is at stake (except perhaps your prestige).Looking at our example above (Figure 8), Wikinvest uses the term “Analyst” (a nice, non-offensive term … if you’re not in investment banking), to mean, “this person isn’t really contributing much.” 5. Reflect realitySystems sometimes fail on community sites when people belong to multiple communities and their complete reputations are not contained within any one of them. While there are exceptions, allowing reputations earned elsewhere to be imported can be a smart way to bring your system in line with reality and increase the value of information that it provides. ConclusionOur discussion of rating systems and reputation systems is certainly incomplete. We do hope that we’ve given a good description of risk in online transactions, and how understanding this can help user experience designers better manage risk via the design of more robust rating and reputation systems.In addition, we’d like to begin a repository of rating and reputation systems. If you find any that you’d like to share, feel free to submit them at http://101ratings.com/submit.php. In addition, you can also email any ideas or submissions to systems@usablemarkets.com.
- MindCanvas Review
MindCanvas describes itself as a remote research tool that uses Game-like Elicitation Methods (GEMs) to gather insights about customers thoughts and feelings. It was developed by Uzanto Consulting, a web product strategy firm. When I first learned about MindCanvas, I understood it to be an online card sorting tool. Happily, its much more than that.As a veteran IA consultant, I have used MindCanvas a handful of times during the course of different projects. I have also conducted card sorting exercises without the tool. I am thrilled to have a useful?and user-friendly?tool at my disposal. One of my main reasons for selecting MindCanvas was the reputation of one of its creators, Rashmi Sinha. She is well known and respected, and I felt assured that any tool designed by a fellow IA for IAs couldnt be all that bad. I was right.MindCanvas provides open and closed card sorting capabilities, as well as a host of other UT tools: Divide-the-Dollar, Clicky, Sticky, Concept Test, and FreeList. Clicky and Sticky allow users to react to a wireframe or prototype by answering questions about images and content, or applying stickies (Post-it?like notes) with attributes to a visual image. FreeList and Divide-the-Dollar allow you to elicit product ideas and prioritize them by having participants list and rank the features they find most useful. All of these methods offer easy-to-use interfaces to help your research participants along.Deciding which MindCanvas method to use is one of the more complicated parts of the tool. Its card sorting methods are good for validating a sites navigation or information hierarchy. You can also explore user needs and values and gather feedback on brand and positioning by using some of its more specialized UT methods. MindCanvas website and supporting help wiki provide information on selecting the appropriate testing method for your website or product.Using MindCanvasThe basic process for using MindCanvas is as follows: After payment, sign an agreement to obtain a login and password. Decide which method (i.e. Sticky, FreeList, etc.) addresses your research needs. Create potential research questions and tasks based on the MindCanvas method you have selected. (Ive used OpenSortand TreeSort). Upload questions to MindCanvas Workbench. Test the research study and make changes until you are satisfied with it. Send out the test site URL to your participants. Monitor the study (i.e. see how many people have completed all the tasks). When the study is concluded, send a report request to the MindCanvas team. Receive the reports in visual form and download raw data from the MindCanvas site. Embed reports into PowerPoint or Word document and review results with client.I usually take several days to review the reports before showing them to my consulting clients. Doing so allows me to more easily explain the results. (Heres a pointer to anyone using MindCanvas: To view the results properly make sure PowerPoint is in Slideshow mode).StrengthsMindCanvas has a couple shining strengths Id like to illuminate: An engaging, easy-to-use interface for your customers or end users. Its fairly self-explanatory and makes routine UT tasks fun. Stellar data visualization tools once your study is completed. User InterfaceMindCanvas interface is what sets it apart from other UT software Ive seen. Its creators took their inspiration from the world of digital gaming to develop an interface thats engaging for the person using it, while gathering important data for researchers. Its card sorting methods employ a floating hand to deal cards, which are then sorted by users. Another method gives users virtual gold coins to vote for their favorite product features. These exercises are enhanced by accompanying sound effects. Ive received numerous comments from users describing MindCanvas exercises as fun . They have also commented that while they dont understand how these exercises will help me build a better website or software interface, they still enjoyed the tasks and were pleased at the conclusion of the test.The other online research tools Ive reviewed offer more awkward interfaces. Sorting exercises take multiple steps or the online tasks are not intuitive and confuse research participants. Im not interested in making my users become experts at online card sorting or other UT methods. I simply want to extract what they know or understand about a particular website or service.According to Jess McMullin of nForm User Experience Consulting, MindCanvas is unmatched as a remote research tool in its ability to provide creative methods for gathering data [and] engaging participants&.. Data VisualizationAnother MindCanvas strength is its data output. Although you can obtain the raw data and analyze it yourself (assuming you have statistical software and know how to use it), the real benefit of MindCanvas is its easy-to-understand data visualizations, which showcase the results of your study. All my clients have received clear, easy-to-interpret answers to their research questions. The visualizations can be embedded into a PowerPoint slide or Word document, making them easily accessible. Your clients dont have to rely on your interpretation of the data; they can interpret the data themselves if they choose. Every client who has viewed MindCanvas data visualizations has been impressed and wondered why it wasnt used all along.WeaknessesIve used MindCanvas a handful of times and encountered some weaknesses: Study Size: If you have a large client with complex, statistically rigorous research needs, MindCanvas is not for you. It has a limit of 200 users per study. Two hundred is plenty for most of my research needs, but some of my clients want to go beyond that. Data Sorting: If you have complex user segmentation needs, MindCanvas has its limitations. It allows you to perform a single data sort to identify user sub-groups. For example, its easy to segment all male vs. female participants or all participants who are 21- to 50-years-old. If you need to segment 16- to 20-year-old females or men who only shop online (or any two parameters of your choice), youll need a different tool. There are ways around these limitations: You can create two separate research studies to deal with different users, or you can build more complex research questions to solicit the answers you need in order to sort the data required. However, these solutions have limitations of their own, so there is a trade-off. Pricing Structure: The current pricing structure is $499 per study, with each accompanying report $99. This is adequate for quick-and-dirty research to resolve obvious user issues, but the pricing structure doesnt scale well. For example, if you run a single study and want multiple reports for different audience segments, each $99 report adds up quickly. It can be difficult to budget up front before the research study is even developed, leaving the door open for cost increases. If a simple card sorting tool is all that you need, check out WebSort, which costs $499 for three months of unlimited use and automatically generates a dendogram. (Please note that MindCanvas offers much more than card sorting). Data Analysis Bottleneck: Some of the back-end data analysis is done by a human, who works on a schedule. All data reports are generated once a week. If you get your report order request to Uzanto by the Tuesday deadline, results will be available by Thursday. This might not work with your tight project schedule, in which case, youre out of luck.MindCanvass WorkbenchMindCanvas is currently offered in self-service mode. This means that you (or your researcher) need to become familiar with the finer points of MindCanvas Workbench for constructing studies. The upside is that some parts are made easy, like being able to copy another study in order to create your own (a handy feature), or creating as many preliminary studies as you like before distributing the real thing.
Figure 1: Manage ActivityThe downside is that some interface elements in the study creation console are a bit mysterious. For example, under Manage Study, its unclear if the data has been downloaded 164 times or if there are 164 participants who have completed the study. The difference between Manage Study and Track Activity is also hazy. Manage Study allows you to specify where to send users after they have completed the study and limit the number of participants or the length of the study, while Track Activity informs you how many people have completed the study. The Download Tracking CSV gives you access to a text file with a list of all participants URL information and their start and stop times.
Figure 2: Track ActivityThe Workbench allows access to MindCanvas powerful study creation module, but you can tell most of the design effort went into the end users interface, not the study designers. Luckily, there is a wiki available which answers a lot of questions and Uzanto consultants are very friendly and helpful with the occasional question.ConclusionThe IA community can finally say that we have a tool designed for us. For so long, weve had to take existing tools and try to use them in ways not intended by their designers, sometime with frustrating results and having to develop clever and complicated workarounds. These issues are no longer a problem. Its a tool for us, made by one of us. Its about time!
- Quick and Easy Flash Prototypes
To tackle the classic “how to prototype rich interactions” problem, I developed a process for translating static screen designs (from wireframes to visual comps) into interactive experiences using Flash. Requiring some fairly basic ActionScript knowledge, these prototypes proved to be a quick yet powerful way to bring interaction designs to life.When asked if I could find a quick and easy way to prototype a web application my project team had wireframed in Visio, I first turned to PDF prototyping. Using a PDF of the wireframes as the base, I overlaid clickable elements and some interactive data entry fields. Everything was wonderful—until the client asked us to add color to the wireframes. The Visio document was updated, a new PDF had to be made… and all that interactivity had to be reapplied. (It is tedious and time-consuming to replace page content in a PDF.)Not wanting to repeat this tedious process again and again, I turned to Flash. I was excited to find that Flash not only felt more streamlined and intuitive when creating basic click-throughs, but it also offered almost limitless potential for prototyping rich interactions. With some basic ActionScript (a scripting language used in Flash to define interactions) knowledge and a bit of resourcefulness, I was able to create functional combo box navigations, type-ahead mechanisms, and eventually a complex, drag-and-drop scheduling application similar to Google Calendar. And whenever the screen designs changed, all I had to do was import the new background images, while the interactivity layers stayed happily in place, requiring only minimal tweaking. Quick and easy yet powerful and flexibleThe idea of working with Flash may seem daunting, but the effort required to create a basic click-through is comparable to that required by other applications, while the flexibility and potential for extending the prototype is far greater. (After all, Flash was designed for creating interactive applications, not presentations [like PowerPoint], diagrams [like Visio] or portable documents [like Acrobat].) Considering the additional benefits it offers, Flash prototyping is well-worth adding to your interaction design toolkit: Flash prototyping allows you to add interactivity to screen designs and wireframes you’ve already created. You don’t have to recreate the layouts in another application. Flash allows screen images to be updated without losing your interactive layers, which is much more difficult in PDF prototyping, as I described above. Flash includes a robust library of customizable user interface components that can be dropped into your prototype and used as they are to add realism (e.g., a text field you can actually type in) or programmed using ActionScript to serve as fully-functional interface controls. You can export prototypes as stand-alone applications (suitable for running from a thumb-drive at an on-site usability test where the Flash plugin may be blocked) or as HTML pages with embedded Flash (in which the browser can be used to scroll up and down through tall prototypes). You don’t have to hire a professional Flash developer to achieve all of this. (I’m certainly not a Flash expert.) You can create simple, yet believable, prototypes with very little knowledge of ActionScript. All it takes is resourcefulness, creativity, and experimentation.A valuable tool and impressive deliverableFlash prototypes can be both a valuable tool for project teams and an impressive deliverable for clients. At the consultancy where I first employed Flash prototyping, these prototypes quickly became an invaluable part of the design, testing and buy-in process for many projects, and clients loved them. Here’s why:By experiencing the interactions we were proposing, we were able to quickly sense when something that seemed good on paper didn’t feel right in reality.By testing realistic prototypes, which users perceived to fully-functional, we were able to collect accurate user feedback about how novel interactions (such as a type-ahead search) felt and functioned in a real context.By providing clients with functional demos, we were able to see our concepts move towards reality as clients enthusiastically used them to rally organizational support for concepts. Having learned a lot through trial and error in creating these prototypes, I’d now like to share the process I developed through a step-by-step tutorial.How to use this tutorialIn this tutorial, you’ll be creating a practice prototype using static screen images from Facebook that I’ve annotated using Visio. You should be able to complete it in 1 hour or less. To see what you’ll be creating, you can try out the final prototype files:Download Flash Prototype for Mac (Andrzejewski_Prototype_Mac.app) Download Flash Prototype for Windows (Andrzejewski_Prototype_Windows.exe)You’ll also want to download the files needed to complete this tutorial:Download Source Files (Andrzejewski_SourceFiles.zip)If you don’t have Flash CS3 or higher, you can download a 30-day, fully-functional trial from:https://www.adobe.com/cfusion/tdrc/index.cfm?product=flashThe major steps of this tutorial are in bold. If you have some Flash experience, you may be able to complete the tutorial using the bold steps and the annotations on the screens. For those who are new to Flash, I’ve provided detailed sub-steps and definitions.Table of Tutorial Steps1. Create a new prototype template2. Import images3. Label layers4. Create new layer5. Create reusable button6. Create layer for interactive elements7. Create basic click-through8. Add a conditional button9. Create an invisible button10. Test your prototype11-17. Export your prototypePreparing screen designs for prototypingTo prepare for Flash prototyping, you’ll need to have images showing each possible screen and state in the scenarios you want to demonstrate. Often, you’ll have already created many of these screen designs in the wireframing phase of your project. The fidelity of these images may range from wireframes to visual design comps, depending on your prototyping needs. It doesn’t matter what software you use to create your images (e.g., Visio, Illustrator, Photoshop, etc.), as long as you can export them as raster images (e.g., GIF, PNG, JPG).While images have already been prepared for you in this tutorial, here are some helpful tips for creating and exporting screen designs for use in Flash:Creating the screensCreate neat layouts using grids and guides to keep items aligned from page to page to prevent inappropriate jumpiness (if only part of a page is supposed to be changing, such as when a menu appears, and the entire page shifts a little, it will detract from the prototype’s realism). Test page-to-page alignment by viewing images full-screen.Ensure that images are all the exact same size by using a common background image or canvas size for all screens. In Visio and other page layout applications, you must be sure to remove or hide anything that protrudes outside of this background before exporting. Placing annotations that don’t belong in the prototype and anything else that will exist outside of the content area (page titles, footers) on a separate layer allows them to hidden before exporting the images.Planning interactivityAdd a unique identifier to each screen or page that, unlike the page numbering (if you’re using a page layout program), will not change. You’ll be saving each screen as a file named after this identifier (e.g., “W05.png”). Using these identifiers, if your page ordering changes or you add or delete pages, you’ll still know which page corresponds with which exported image later.Mark up the screens with callouts explaining everything that should be interactive and what should happen when elements are interacted with. For a basic click-through, most of these callouts will point to an element and read, “Go to X” (where X is the target page identifier). Make sure these callouts don’t extend outside of the image area. These callouts will make the Flash work much easier, and the callout version of the prototype makes a useful “practice prototype” that can help future users learn how to navigate the prototype. You’ll re-export the images and create a version of the prototype without callouts later.Saving or exporting imagesSave or export each screen as an image that will fit on a screen without scaling (preferably a lossless file such as GIF or PNG) using the page identifier as the filename. If you’re using vector-based software (like Visio), make sure the resolution of the exported files is set so that the resulting images will fit on the screen without scaling or scrolling. If your screen dimensions are 1024×768 points, for example, and you want the resulting images to be 1024×768 pixels, you would need to set the export resolution to 72×72 pixels/in.Welcome to Flash
Note: If you don’t see some of these panels, use the Window menu to locate and turn them on.You’ll be introduced to each of these elements and to key principles of ActionScript as you work through this tutorial. In the Appendices at the end of this document, you’ll find a handy reference guide and summary of everything you’ll have learned about Flash and ActionScript.Setting up the Flash documentThe images needed to complete this tutorial from scratch can be found in the SourceImagesAnnotated folder of this zip file:Download Source Files (Andrzejewski_SourceFiles.zip)While setting up the Flash document may feel tedious, what’s exciting about Flash prototyping is that after you’ve set up a document once, you can save your work as a template for future prototypes so that you don’t have to start from scratch. All you’d have to do to start a new prototype is import a new set of images with the same filenames and add or remove keyframes as needed depending on the number of screens.If you’re already familiar with Flash basics and would like to skip to creating interactions, you can download an already-set-up template and begin working through the tutorial from the “Basic principles of interaction” section. Creating a new prototype template1. Create a new Flash document that uses ActionScript 2.0 and has a 1024px by 768px stage.1.1. Open Flash and create a new Flash File (ActionScript 2.0).ActionScript 2.0 vs. ActionScript 3.0 The latest version of ActionScript is ActionScript 3.0, a much more sophisticated but unfortunately a little harder to comprehend rendition of the language. Because AS 2.0 is a little more direct and intuitive (you can add scripts directly to buttons and objects), I recommend starting there. In fact, if you’re only using Flash for simple applications (like most prototypes will be), AS 2.0 is all you really need. If you eventually want to catch up with the AS 3.0 trend, understanding AS 2.0 first can help you make the conceptual leap to AS 3.0.When working in ActionScript 2.0, you’ll want to make sure that tutorials and scripts you find online and in books are compatible. Look for tutorials written for Flash MX 2004, Flash 8, or Flash CS3 using ActionScript 2.0.1.2. To define the size of the stage, in the Properties Panel, click the button next to "Size" that shows its current dimensions. Change the dimensions to the size, in pixels, of your exported screen designs—1024px by 768px in this tutorial. Press "OK.”The Stage is your visual workspace or canvas. This is where you’ll specify where objects appear. Objects in the grey area outside the stage will not be visible when the exported flash movie is viewed at the correct size.
2. Import the images to keyframes by using Import to Stage and selecting the first file in the sequence. Flash will automatically prompt you to import the rest of the files and place each image on its own keyframe.2.1. From the File menu, go to File > Import > Import to Stage. Browse to the folder where your images are located and select only the first image in the series—“W01.png.” Click "Import."
2.2. A dialog will appear asking if you want to import all of the images in the sequence. Click “Yes.” All of the images will be imported to your Library and automatically placed on separate keyframes in the timeline.
The Timeline is where you define when objects appear or disappear from the stage. The timeline contains frames and keyframes which can be on multiple, independent layers. The layers in Flash work in an identical fashion to layers in Photoshop.Frames are displayed as blocks. They are grey when they contain content and white when they are empty. Keyframes are frames marked with circles or dots. A keyframe is a frame where a change can occur without affecting the previous frames. Changes made on keyframes persist until the next keyframe unless “tweening” is used to fill in the blanks. You can also add commands (ActionScript) to keyframes, which will be executed when the player reaches that frame.2.3. Note that when you click to select one of the screen images, you’ll notice that the properties of this image are shown in the Properties Panel, including its X and Y position on the stage (measured from the upper-left corner by default). The X and Y positions should both be “0” by default. If you ever move one of the images out of place accidentally, you can use the Properties Panel to place it back in the upper-right corner by re-entering “0,0” as its position.The Properties Panel is context-sensitive—it shows/allows you to set properties for the last frame or instance that you selected. It is shown at the bottom of the Flash interface.3. Name the current layer, “Wireframes.” Label each keyframe using the image’s identifier. Insert four frames between every keyframe to make these labels visible.3.1. In the Layers area at the top of the workspace, double-click on the words, "Layer 1" and type "Wireframes." Press Enter to commit the change.
3.2. Click on the first keyframe to highlight it.3.3. Press F5 four times to insert four frames after this keyframe.3.4. With the first keyframe still selected, in the Properties Panel, change “” to the image’s identifier, “W01” (remember, ActionScript is case sensitive).Frame Labels can be assigned to keyframes so that they can be referred to using ActionScript. It is generally better to refer to frame labels in ActionScript than to frame numbers because frame numbers are subject to change as you add or remove frames.
3.5. Click on the second keyframe to highlight it. Insert four frames after it and label it “W02.” Repeat for the remaining keyframes, including the final one. This part may seem a little tedious, but you should not have to repeat it again unless you insert additional screens. You’ll be able to update these images without recreating the keyframes and labels in the future.The Properties Panel is where you can assign frame labels to frames and instance names to instances.
4. Create a new layer called, “Frame Actions.” Make sure the Flash movie does not automatically play by adding a “stop();” action to the first frame. 4.1. Right-click or Ctrl+click (Mac) on the first layer’s name and choose “Insert Layer.”
4.2. Rename the new layer, “Frame Actions.”4.3. Select the first keyframe in this new layer.4.4. Go to Window > Actions to turn on the Actions Panel.The Actions Panel is context-sensitive—it shows/allows you to add scripts to the last frame or instance that you selected. Look at the tab name near the bottom of the Actions Panel to verify what you are adding actions to.4.5. With the first keyframe selected, type the following in the Actions Panel:stop(); Notice that a small “a" appears in the middle of the keyframe to indicate that actions will be triggered when that frame plays.
ActionScript is case sensitive.Semicolons should be used at the end of every statement (generally every line).Frame Actions are attached to keyframes and are triggered when that frame is reached. Functions are built-in actions that you can call on using keywords. These commands are keywords followed by parentheses in which specific details can be added if necessary.Creating a reusable button5. Create a button symbol. Make the button invisible—an invisible button is clickable but does not display anything on the stage when the Flash file is compiled: It has a clickable area (a “Hit” state) but no visible states (Up, Over, and Down are all blank). This button should be a rectangle and the size of an average clickable area in your prototype. You’ll be able to resize instances of this button as needed. You will be using this button overlay to simulate most interactions.5.1. Go to “Insert > New Symbol…”Symbols are objects that can be used and reused. They are similar to Shapes in Visio and Stencils in Omnigraffle. Symbols include imported content, Movie Clips (objects that can have their own, independent timelines), Buttons (special movie clips with four frames in which four possible button states can be created), and Graphics (objects that may contain drawings and/or imported images).5.2. In the dialog that appears, name it "invisibleButton" and choose the type "Button."
5.3. Notice in the Edit Bar that you are now editing “invisibleButton.” This button’s “timeline” consists of four labeled frames. Each frame represents a unique button state. Typically, you would draw what the button looks like normally in the “Up” frame, you’d draw the rollover state in the “Over” frame, and you’d draw the pressed state in the “Down” frame. “Hit” is an invisible state used to designate the clickable area of a button. Since you want your button to be invisible, you will only be creating the “Hit” state. Right-click or Ctrl+click (Mac) on the frame labeled, “Hit” and choose “Insert Keyframe.”The Edit Bar (Navigation Area) indicates which timeline you are currently viewing. In this tutorial, you will generally be working on the main timeline, labeled “Scene 1” by default, but you will eventually be creating objects that have their own, independent timelines. These objects can be nested inside of each other. When you are inside an object’s timeline, a breadcrumb trail will indicate where you are in the grand scheme of things, e.g., Scene 1 > CarObject > WheelObject.
5.4. Using the Rectangle Tool and Fill Color picker if necessary, draw a solid-colored box on this keyframe. The color does not matter, as it will not be visible. It also doesn’t matter exactly what shape and size it is—you’ll be resizing each instance as needed. Just make it the size of a typical button in your prototype.The Tools Bar contains tools you can use to create and manipulate graphics and objects on the stage.
5.5. In the Edit Bar, click the Back Arrow or "Scene 1" to go back to the main movie.
5.6. Your "invisibleButton" symbol should appear in the Library Panel.Creating a layer for interactive elements6. Add another layer to your movie, called “Interaction,” for buttons and controls. In this layer, insert one keyframe per screen.6.1. Right-click or Ctrl+click (Mac) on the “Wireframes” layer’s name and choose “Insert Layer.”6.2. Rename the new layer, “Interaction.”6.3. Lock the “Wireframes” layer by clicking in the padlock icon column to prevent accidental changes.6.4. Right-click or Ctrl+click (MAC) on the frame above the keyframe labeled, “W02” and choose “Insert Keyframe.” Repeat, inserting a keyframe in this layer above every labeled keyframe.
Basic principles of interactivityI’ve provided a Flash file in which all the steps to this point have been completed so that you can experiment with the more interesting aspects of Flash prototyping. If you’d like to start the tutorial from this point, open the file called FlashPrototype_Template.fla from this zip file:Download Source Files (Andrzejewski_SourceFiles.zip)Creating a basic click-through7. Place invisible buttons over all the “go to X” elements in the images (the ones specified using green callouts). Add gotoAndStop(“frameLabel); actions to each button, telling Flash to go to the frame label specified in the annotations when that button is released.7.1. Click on the first keyframe of the Interaction layer.7.2. Drag an instance of the invisibleButton onto the stage and drop it over the “Edit” button in the screen design. It should appear to be a transparent, blue area. You can use the Free Transform Tool (which you can find in the Tools bar) to make it cover just the area that should be clickable.
Instances are unique occurrences of symbols in your Flash movie. You can drag as many instances of a symbol into your movie as you like. If you update the symbol, all of its instances will be updated as well, however, certain properties (such as scaling and positioning) can be customized on an instance-by-instance basis. Later you’ll learn how to name instances so you can refer to them specifically using ActionScript.7.3. Next you are going to make the button interactive. When you add an action to an object (vs. to a keyframe, as you did earlier), it must be contained within an “Event Handler” so that Flash knows when to execute the action. With the button selected, type this Event Handler in the Actions Panel: on(release) { }Event Handlers are used to specify behaviors that trigger actions. Actions contained within an event handler’s curly braces will be triggered only when the event preceding them occurs (e.g., when an button is pressed and when it’s released). 7.4. All of the actions that should happen when the button is clicked and then released should go within the two curly braces. You’re going to use the gotoAndStop(“frameLabel”) function to tell the prototype to go to the frame labeled “W02” when the button is clicked and released. on(release) { // When this event occurs… gotoAndStop(“W02”); // these actions should be triggered.}Curly braces can be used to group statements.Comments that don’t affect the code can be added by preceding comment text with two forward slashes.7.5. To ensure that the main timeline is controlled (vs. the timeline of the button the script is attached to), you can precede gotoAndStop with the name of the timeline you’re targeting. The main timeline is referred to as the “_root” in ActionScript. The final script should read: on(release) { _root.gotoAndStop(“W02”);}
Actions are context-sensitive. They act on whichever movie or timeline they are attached to. If actions are placed in the main timeline, they’ll act on the main movie. If they’re placed on a timeline within an object, they’ll only act on that object unless otherwise specified.To target specific timelines and objects, refer explicitly to the main movie as “_root” and other objects by their assigned “Instance Names.” If you’re unsure which object an action applies to, use explicit targets to ensure your actions will work as intended. You’ll learn more about Target Paths later.7.6. If you go to Control > Test Movie (Ctrl+Enter on PC, Apple+Enter on Mac), you should see that the button symbol is invisible, but that you can still click on it to go to frame “W02.” It gives you the impression that the “Edit” link is working—your pointer should change to a hand cursor, and clicking the link should take you to frame “W02.”7.7. On keyframes W02 through W04, wherever you see a green, “go to X” callout, add an invisible button with the appropriate script. The easiest way to do this is to copy and paste the button you’ve already created. This creates a new instance of the button while preserving the script you’ve added to it. All you have to do is change the destination frame label.7.8. Test your prototype (Ctrl+Enter on PC, Apple+Enter on Mac). You should be able to follow the trail of green callouts through the first five frames.That’s all there is to creating a basic click-through using Flash. The prototype at this point should be comparable to what you could create in Visio, PowerPoint or Acrobat.What makes Flash a worthwhile prototyping tool, however, is that it makes it easy to add realism and “smarts” to your prototypes. Flash’s “Components Library” offers a robust collection of customizable user interface components that can be dropped into your prototype and used as they are to add realism (e.g., a text field you can actually type in) or programmed using ActionScript to serve as fully-functional interface controls. Using one of these components and some simple ActionScript, you’ll next learn how to add basic logic to your prototype.Adding a conditional buttonThere are many applications for conditional buttons in prototypes, including demonstrating error handling.8. Add a CheckBox component named “termsBox” to frame “W05” of the “Interaction” layer.8.1. Select the keyframe in the “Interaction” layer above the frame labeled “W05.”8.2. Open the Components library (Window > Components).The Components Panel contains a special library of user interface objects, such as radio buttons and combo boxes, and have customizable properties. These properties can be edited in the Parameters tab of the Properties Panel and/or changed using ActionScript.8.3. In the “User Interface” folder, you’ll find the CheckBox component. Drag it onto the screen and place it over top of the check box in the image.
8.4. In the Properties tab, give the Instance Name, “termsBox” to this checkbox.
An Instance Name can be assigned by selecting an instance and entering a unique name in the Instance Name field in the Properties Panel. Since a symbol in your library can be used in your Flash movie multiple times, each occurrence needs to have a unique name if you want to address it using ActionScript.8.5. With the check box selected, in the Properties Panel, click the Parameters Tab. Select the “Label” field in the Parameters Tab and delete the label text.
The Parameters tab of the Properties Panel is where you can edit the special properties of components. Each property is listed on a separate line.9. Create an invisible button that determines whether the check box is selected or not and sends the prototype to the appropriate screen.9.1. Drag an invisible button over the "Upload Picture" button on frame “W05.”9.2. Select this button, and in the Actions Panel, add an event handler:on(release) { }9.3. Within this event handler, you’re going to add a conditional statement, an “if Statement,” to check whether “termsBox” is selected. The condition contained within the “if statement” will be tested when the event (on release) occurs. It is constructed as follows:on(release) { if(CONDITION) { // If this condition is met…// perform all actions contained within these curly braces.}else { // Otherwise…// do these actions.}}The If Statement describes a condition that must be met for certain action(s) to be performed. It can optionally be followed by an “else” statement specifies what to do otherwise. 9.4. The condition that you’re checking for is whether the “selected” property of “termsBox” is “true.” To refer to properties of objects, use the object’s target path, followed by the name of the property (for example, _root.termsBox.selected).Target Paths are like web URLs or file paths, only they use dots (.) instead of slashes to indicate hierarchy. Eventually you’ll be using ActionScript to address movies inside of other movies. An easy way to do so is using “absolute paths,” which indicate the location of an object relative to the main movie (the “root”) using objects’ instance names. (For example, to address an object with the instance name “spokes,” you might write: _root.car.wheels.spokes) You can also use “relative paths,” which you can learn more about in Flash’s documentation.Properties of an object are special keywords that Flash recognizes. You can evaluate or change properties of an object using ActionScript. Components, movie clips and other types of objects all have unique properties. You can look up a particular object type’s properties and their possible values in Flash’s documentation.9.5. To test whether something is equal to something else, you’ll use the “equals” operator, which consists of two equals signs. Your condition will read:on(release) {if(_root.termsBox.selected == true) { }else { }}Operators are used in If Statements to compare one value to another in the format, “if(x OPERATOR y).” The most common operators are: == equals> is greater than< is less than!= is not equal to<= is less than or equal to>= is greater than or equal to9.6. The complete script that will be placed on the button, which includes the actions that should happen when the condition is met or not met, is: on(release) {if(_root.termsBox.selected true) { _root.gotoAndStop("W07");}else { _root.gotoAndStop("W06");}}
9.7. Repeat steps 8 and 9 on the next keyframe, “W06,” only name the checkbox “termsBox2” and add this script to the button: on(release) {if(_root.termsBox2.selected == true) {_root.gotoAndStop("W07");}}
10. Test your prototype (Ctrl+Enter on PC, Apple+Enter on Mac). Try selecting the checkbox and clicking the button. Test it again and see what happens when it is not selected. You should be able to complete the entire first part of the prototype.10.1. If it doesn’t seem to work, you may want to: 10.2. Make sure your scripts were attached to the button, NOT to the checkbox or to the keyframe. 10.3. Check that your syntax is correct (don’t forget your {,}, and ;). 10.4. Ensure that your buttons point to the correct frame labels. Exporting your prototypeIf you made it this far, good job! You’ve learned some of the fundamentals of Flash and ActionScript and have created a simple, yet smart prototype. All that’s left is exporting the prototype as a stand-alone file that can be shared with clients and usability testers. To do this:11. Go to File > Publish Settings. Choose “Windows Projector” or “Macintosh Projector” (or both), enter a file name, and press “Publish” to create a standalone, self-executing file of your prototype. It will be created in whatever folder the Flash file is in.While the annotations make the prototype easy to test and navigate, it wouldn’t be very challenging for test participants! To make a version of the prototype that is not annotated:12. Remove or hide the annotations in the software you used to create the screens.13. Export or save each of the screens to a new folder using the same file names that you used before. Flash doesn’t care what folder an image comes from, if it has the same name, it considers it to be the same image.14. In Flash, use “Save As…” to create a new copy of the prototype.15. Go to “File > Import > Import to Library” and import all of the final images at once (use Ctrl+A or Apple+A to select all). Since the names of these images match the names of the images you imported previously, Flash will ask you whether you want to replace the existing items. Since this is exactly what you want, select “Replace existing items” and press “OK.”16. Click through each keyframe to make sure the prototype looks right (the buttons are aligned properly and the screens are updated).17. You can now publish another copy of the prototype without the annotations by going to “File > Publish Settings” and giving the files new names.Open Andrzejewski_Prototype_Mac.app or Andrzejewski_Prototype_Windows.exe to see the final prototype. You can also open FlashPrototype_Completed.fla from Andrzejewski_SourceFiles.zip to see what the final Flash file should look like.Resourcefulness, creativity, and experimentationUsing only the principles learned in this tutorial and a little resourcefulness, creativity, and experimentation, you can create quite robust prototypes. In fact, using just what you’ve already learned, you could conceivably simulate rich interactions ranging from fly-out menus to type-ahead search.Look for a follow-up article that will show you more examples of what’s possible.The wonderful thing about Flash is that Flash prototypes can be as simple or as complex as they need to be. Start building your click-through prototypes in Flash. Once you’ve built a few of those, try a scenario that involves a little logic. When a more complex situation arises (“Could you make this area turn yellow when you drag that icon over it?”), do some research on sites like ActionScript.org to see if you can find an easy way to show it or at least fake it.While you may not be able to take full advantage of Flash’s prototyping potential immediately, the benefits of using Flash, even when creating simple prototypes, make it a worthwhile addition to any interaction designer’s toolkit.Appendix A: The Flash Interface
Note: If you don’t see some of these panels, use the Window menu to locate and turn them on.The Stage is your visual workspace or canvas. This is where you’ll specify where objects appear. Objects in the grey area outside the stage will not be visible when the exported flash movie is viewed at the correct size.The Timeline is where you define when objects appear or disappear from the stage. The timeline contains frames and keyframes which can be on multiple, independent layers.Frames are displayed as blocks. They are grey when they contain content and white when they are empty. Keyframes are frames marked with circles or dots. A keyframe is a frame where a change can occur without affecting the previous frames. Changes made on keyframes persist until the next keyframe unless “tweening” is used to fill in the blanks. You can also add commands (ActionScript) to keyframes, which will be executed when the player reaches that frame.Frame Labels can be assigned to keyframes so that they can be referred to using ActionScript. It is generally better to refer to frame labels in ActionScript than to frame numbers because frame numbers are subject to change as you add or remove frames.The Edit Bar (Navigation Area) indicates which timeline you are currently viewing. In this tutorial, you will generally be working on the main timeline, labeled “Scene 1” by default, but you will eventually be creating objects that have their own, independent timelines. These objects can be nested inside of each other. When you are inside an object’s timeline, a breadcrumb trail will indicate where you are in the grand scheme of things, e.g., Scene 1 > CarObject > WheelObject.The Library contains symbols—the “actors” that appear on the stage. Symbols are objects that can be used and reused. They are similar to Shapes in Visio and Stencils in Omnigraffle. Symbols include imported content, Movie Clips (objects that can have their own, independent timelines), Buttons (special movie clips with four frames in which four possible button states can be created), and Graphics (objects that may contain drawings and/or imported images).Instances are unique occurrences of symbols in your Flash movie. You can drag as many instances of a symbol into your movie as you like. If you update the symbol, all of its instances will be updated as well, however, certain properties (such as scaling and positioning) can be customized on an instance-by-instance basis. Later you’ll learn how to name instances so you can refer to them specifically using ActionScript.The Components Panel contains a special library of user interface objects, such as radio buttons and combo boxes, that have customizable properties. These properties can be edited in the Parameters tab of the Properties Panel and/or changed using ActionScript.The Actions Panel is context-sensitive—it shows/allows you to add scripts to the last frame or instance that you selected. Look at the tab name near the bottom of the Actions Panel to verify what you are adding actions to.The Properties Panel is also context-sensitive—it shows/allows you to set properties for the last frame or instance that you selected. This is where you can assign frame labels to frames and instance names to instances. The Parameters Tab of this panel is where you can edit the special properties of components. Each property is listed on a separate line.The Tool Bar contains tools you can use to create and manipulate graphics and objects on the stage.Appendix B: ActionScript RecapYou don’t need a deep understanding of ActionScript to create convincing prototypes. Simply understanding the following principles, all of which you’ve already put into practice in this tutorial, can take you a long way.ActionScript 2.0 vs. ActionScript 3.0 The latest version of ActionScript is ActionScript 3.0, a much more sophisticated but unfortunately a little harder to comprehend rendition of the language. Because AS 2.0 is a little more direct and intuitive (you can add scripts directly to buttons and objects), I recommend starting there. In fact, if you’re only using Flash for simple applications (like most prototypes will be), AS 2.0 is all you really need. If you eventually want to catch up with the AS 3.0 trend, understanding AS 2.0 first can help you make the conceptual leap to AS 3.0.When working in ActionScript 2.0, you’ll want to make sure that tutorials and scripts you find online and in books are compatible. Look for tutorials written for Flash MX 2004, Flash 8, or Flash CS3 using ActionScript 2.0.ActionScript GrammarActionScript is case sensitive. Semicolons should be used at the end of every statement (generally every line). Curly braces can be used to group statements. Comments that don’t affect the code can be added by preceding comment text with two forward slashes.Making something happen using ActionScriptFirst, when do you want it to happen? When a particular frame is reached: Frame Actions are attached to keyframes and are triggered when that frame is reached. For example, you might select the last keyframe in a movie and add a “stop();” action so that the movie will not loop when it reaches the end. When a specific event occurs: When you add actions to objects on the stage, you must use one or more event handlers to specify exactly when they should be executed. Event Handlersare used to specify behaviors that trigger actions. Actions contained within an event handler’s curly braces will be triggered only when the event preceding them occurs (e.g., when an button is pressed and when it’s released). Useful event handlers include: on(press) { } on(release) { } on(rollOver) { } on(rollOut) { } The above, but only when a particular condition is met: Within Frame Actions and Event Handlers, you can add additional conditions that must be met for an action to be performed. Note that the condition will be evaluated only when the frame is reached or event occurs. The If Statement describes a condition that must be met for certain action(s) to be performed. Its form is: “if(CONDITION) {ACTIONS}”It can optionally be followed by an “else” statement specifies what to do otherwise. Operators are used in If Statements to create conditions by comparing one value to another in the format, “if(x [operator] y).” The most common operators are:
== equals > is greater than < is less than != is not equal to Multiple conditions can be combined using the operators: && and
|| or For example, if(x false && y false) means “if x is false AND y is false.” Next, which object or timeline are you commanding? Actions are context-sensitive. They act on whichever movie or timeline they are attached to. If actions are placed in the main timeline, they’ll act on the main movie. If they’re placed on a timeline within an object, they’ll only act on that object unless otherwise specified. To target specific timelines and objects, refer explicitly to the main movie as “_root” and other objects by their assigned “Instance Names.” An Instance Name can be assigned by selecting an instance and entering a unique name in the Instance Name field in the Properties Panel. Since a symbol in your library can be used in your Flash movie multiple times, each occurrence needs to have a unique name if you want to address it using ActionScript. If you’re unsure which object an action applies to, use explicit targets to ensure your actions will work as intended. When objects are nested inside each other (every object is technically nested inside the main movie, or the _root), address them using their complete “target paths.” Target Paths are like web URLs or file paths, only they use dots (.) instead of slashes to indicate hierarchy. Eventually you’ll be using ActionScript to address movies inside of other movies. An easy way to do so is using “absolute paths,” which indicate the location of an object relative to the main movie (the “root”) using objects’ instance names. (For example, to address an object with the instance name “spokes,” you might write: root.car.wheels.spokes) It doesn’t hurt to get in the habit of always referring to the main movie as “_root”—as this becomes important when using embedded movie clips.You can also use “relative paths,” which you can learn more about in Flash’s documentation. Finally, what do you want to happen? You can use Flash’s many built-in functions to perform all kinds of actions. Functions are built-in actions that you can call on using keywords. These commands are keywords followed by parentheses in which specific details can be added if necessary. Some useful functions for prototyping include: 
You can also change properties of an object using ActionScript. Properties of an object are special keywords that Flash recognizes. You can evaluate or change properties of an object using ActionScript. Components, movie clips and other types of objects all have unique properties. You can look up a particular object type’s properties and their possible values in Flash’s documentation. You can use the “equals” sign to change a property of an object. For example, to change the text of a text box called “welcomeMessage” you might write: welcomeMessage.text = "Hello!" Some useful properties include: 
Flash workshop at UX Week Alexa will be leading a workshop on Flash Prototyping (http://www.uxweek.com/workshops/prototyping-with-flash) at UX Week (August 12- 15, 2008) in San Francisco. This workshop offers the impetus, skills and inspiration you need to get started with Flash prototyping. Come and learn how to bring your wireframes to life! Use discount code FOAA for 15% off.
- Comics for Consumer Communication
The rising popularity of the comic as an internal communication device for designers has increased our ability to engage our stakeholders as we build interfaces. Yet, social service agencies looking to provide services to hard-to-reach groups like immigrants, cultural minorities, and the poor have taken pride in innovative outreach methods. In situations where traditional printed matter is a barrier, graphical methods can be used very effectively to communicate with audiences.
From guerilla theatre to testimonials, posters to graphic instructions, users have benefited from alternative communication methods, particularly in situations where education or cultural barriers make it difficult for people to access services important to their well-being and safety. In some cases, the comic book format has been used as a way to help people get access to critical legal help. This case study from my time as a Publication Manager at the Legal Services Society (LSS) of British Columbia (BC) could inspire the use of comics outside the development process.The SituationBC has over 253 First Nations tribes (known as Native Americans in the United States), which is about one-third of all First Nations in Canada. Seven of Canadas eleven unique native language families are located exclusively in BC. When BC joined Confederation (Canada) in 1871, the provincial policy of the day did not recognize aboriginal title to the land, so no treaties were signed with the First Nations unlike in other provinces.
Instead, the federal government made it a criminal offence for a First Nation to hire a lawyer to pursue land claims settlements, and removed a generation of children to residential schools, where many were abused and traumatized. As a result, many tribes were left in an ongoing state of economical and social upheaval, with rampant unemployment, social problems, and poverty.
The Legal Services Society (LSS) in BC is the provincial agency that provides legal aid to poor and marginalized residents of the province. Prior to the crippling budget cuts the government imposed in the late 1990s, LSS also provided public legal education material to people who didnt quite qualify for legal aid but certainly needed it. They may not have been quite poor enough, or they were poor enough, but legal aid didnt cover their particular problem.
LSS knew that solving some of the smaller problems up front would keep them from escalating into larger problems problems that would then qualify them for legal aid, but also would be devastating for their lives.
In 1995, the LSS asked its Publishing Program, where I was the manager, to collaborate with them on some self-help material for First Nations women. The Native Services Department wanted to help these women understand their rights in the area of family law, specifically around the issue of spousal violence. Based on the number of women who came to social service agencies for help, LSS recognized that there were a number of issues that were not well understood and, if caught early, could be addressed to prevent larger legal problems.
The agency decided that it was within its mandate to produce a publication for this population segment, and the two departments began the process of creating the publication that would eventually be called Getting Out: Escaping Family Violence.Why the Comics Format?LSS produced all publications collaboratively. In this case, the two departments explored different formats, and ultimately chose the comic form. Comics graphical format could draw low-literacy women to pick up information off a publication rack. LSS had previously done one other publication in comic book format, which had worked for that audience.
The issue of family violence was a sensitive one, and the LSS had to be sure that the audience would not consider the graphical format of the publication condescending. To take the pulse of those who would use the publication, we conducted several focus groups in places where women would gather for learning (e.g. literacy, friendship, and womens centers).
We used an approach that combined outreach, usability testing, literacy skills improvement, immigration intake, and legal education. Wed bring food and beverages, humbly ask questions, and be the learners instead of the teachers. Particularly with an all-womens group, it was important to do something based around food. Participants would often bring their children, and they would ask us questions and giggle over our perspectives.
For this publication, a comic book format seemed to be a natural. The literacy levels in First Nations communities have been cited as being significantly lower than the general population, particularly in rural areas. Conveying the nuances of family law to a low-literacy population segment was one challenge; another was understanding specific cultural references that could be missed or become localization barriers.
Considerations similar to those for producing publications in different languages apply to those being translated from majority culture English to minority culture English, or same-language localization, so to speak. There may not be a language difference, strictly speaking, but significant dialectic differences apply, graphics are very culturally-specific, and emphasis differs between cultures. In this instance, we had to localize our content to make it relevant to our First Nations audience and not concern ourselves about whether the publication resonated with other people sitting in a legal aid waiting room.Elements of DevelopmentThe commitment of the LSS to create effective material for our users extended to all aspects of the publication process.
AuthoringThe content creation was undertaken by seeking out a subject matter expert in the topic area, usually a lawyer or case worker in one of the field offices. The author gathered profiles, based on cases from offices around the province, and distilled the important legal information that went into the publication. For this publication, I hired a television screenwriter named Candis Callison :http://www.cwy-jcm.org/en/aboutus/board/callison who was from the Tahltan band of First Nations to provide an authentic voice for the comic book.
EditorialThe editorial process was done in-house. For this project, the process included editing the script to fit the comic book genre. I also worked with the artist to ensure that the number of panels would fit the booklet format, and the dialog would fit the panels. Once the substantial edit was done, in-house staff did the copy edit. Then the Native Services lawyer, also First Nations, reviewed the publication for legal accuracy.
ProductionAs positions opened in the department, I was able to hire more culturally and ethnically diverse employees so that, eventually, we were able to produce and proofread material for diverse cultures and languages. (We produced material for recent immigrants, as well, in Chinese, Farsi, Spanish, Punjabi, and Vietnamese.) The new staffed helped greatly during the back-translation, where a publication is translated back into English to ensure translation integrity. In this case, the back-translation was not for language, but to ensure that cultural references were effective.
Art, A Critical Element
An LSS employee was friends with a budding artist named Brian Jungen :http://en.wikipedia.org/wiki/Brian_Jungen who was of Dunne-za (a First Nations tribe) and Swiss background. His artwork provided authentic visuals for the initial book. His work now hangs in the Vancouver Art Gallery, amongst other places, and I like to think he looks back fondly on the project. How The Book Came AboutThe structure of the book took shape as the artist and I divided the script into chunks to fit the drawings, and then the drawings as necessary. As the Publishing Program manager, I took on the role of substantive editor for the writing and graphics. I also worked with the artist to figure out how to get exactly enough panels to fit the amount of print space allotted.
The structure of the book needed to be in multiples of four pagesminus both covers, the copyright page, and the title pagesand couldnt exceed 8 pages of actual panels, to control costs. The story had to stay coherent within these constraints and couldnt focus on the local color at the expense of delivering the legal message. All of that took quite a bit of balancing to keep the interest, use the right level of language, and keep the key legal phrases that would be important for someone to know. In the end, it worked.
Much like any other localized material, we had the material checked by a lawyer to ensure that no legal concepts were compromised during the translation, and then the material was tested with audiences to determine effectiveness. The Native Services Department fieldworker took copies of the storyboards out on a road trip to band offices and friendship centers.
We held our breath until word came back through the moccasin grapevine that the results were well received. This feedback loop was critical because it provided the opportunity to incorporate any changes that came up from the test. In the End&The publication story line opens with a guy in a plaid shirt (it has to be a plaid shirt) having an altercation with his wife. Then theyre at a pow-wow in a truck (it has to be a pick-up truck) where she warmly greets an old (male) friend. Then theyre at a party where hes being abusive to his wife. By the end of the publication, the wife has identified that his verbal and physical violence is not acceptable, gotten a restraining order by following a few simple steps, and taken some basic legal steps without incurring huge legal costs.
One of the dialog bubbles states ... If he tries to do any of these things, we will arrest him again for breach of bail, and then explains what the term breach of bail means. Another panel explains that, If you live in a rural community far from the cities, Crown counsel [a prosecuting attorney] travels from community to community. You may have a different lawyer at the trial.
The insider cultural perspectives made me feel a bit of a voyeur, but that very characteristic was what made it so effective. The 8.5 x 11 saddle-stitched booklet was immediately identifiable on the publication rack by its distinctive graphics. Also, the title, Getting Out, reflected the vernacular used by women in the community caught in situations of domestic violence so it was an instantly recognizable phrase.
The agency ran a modest print run of the publication, partly to contain printing costs in case of waste, and partly to gauge reaction to the publication. The booklets were distributed to legal aid offices, band offices, and other social service agencies where women were likely to go when they found themselves in marital distress. Offices and agencies were notified of its availability, and I mentioned it in passing during a radio interview.
The demand for the publication soon depleted the initial print run, and another was requested. The frontline workers liked the format, and handed it out to the women who didnt quite qualify for legal aid but who clearly wouldnt be able to afford a lawyer. Gathering post-production metrics was not a strong point at LSS, but by the measure of popular opinion, it was a winner, and the exercise was repeated with a companion publication entitled The Ministry Took My Kids, about parental rights when children are apprehended by social services.
- UX Design-Planning Not One-man Show
A lot of confusion and misunderstanding surrounds the term "user experience." The multitude of acitivities that can be labeled with these two words span a vast spectrum of people, skills and situations. If you ask for UX design (UXD), what exactly are you asking for? Similary, if someone tells you they are going to provide you with UXD for an application, website or intranet or extranet, what exactly are you going to get?Is it just one person who is responsible or is it a team of people who are in charge of UXD? In this story I´ll sketch my ideas of UXD based on my experiences and at the end of this story I will give you my answer.Let us start at the beginning UXD starts with experience experience of the users. And so I will talk about the users first. UXD-P – every person is an individualEvery person is an individual. Every person is in possession of different roles. For each individual there will be many roles and each person adopts a different role depending on the circumstances.
User RolesSometimes the individual person holds one role, but mainly he will hold quite a few roles like consumer, customer, user, client, investor, producer, creator, participant, partner, part of a community, member, and so on. UXD-P – network of expectations, experiences and knowledgeEvery user is multi-faceted – and is considerably more complex than they themselves can imagine – so it´s not very helpful just to talk to the user or ask him what he needs. We have to watch what people do; we have to listen to what people say and to recognize what decisions people make – and by observing we have to evaluate and understand why they do this and that. Why and what kind of visual elements will the user like, prefer and or understand? Why and what kind of mental model, navigation or function do they respond to?Jakob Nielsen said “To design an easy-to-use interface, pay attention to what users do, not only what they say. Self-reported claims are unreliable, as are user speculations about future behaviour.” (Jakob Nielsen Alertbox) and I agree – I think no statement can be objective. Perhaps the circumstances are not realistic or not reasonable for the person. Or maybe the person himself is not really in the “situation,” or he is being influenced by other factors (trying to please the tester for example). Or maybe he is trying to succeed with the test rather than trying and failing, which tells us so much more.When all three perspectives (do, say, make) are explored together, we are able to realize the experience spectrum of the “normal” user/customer we are working for.Jesse James Garrett said: “User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” (J.J.Garrett The Elements of User Experience) .
ExperiencesAreas of experiences: different areas which effect the quality of communication UXD-P – personal and individual When we talk about experiences, we take the individual into consideration, including the subjective occurrences felt by the person who has the “confrontation” with what we want them to use. Experiences are momentary and brief – sometimes they are part of a multi-layered process or they are on their own.Normally such know-how has been learned as a part of something or by itself and will be remembered in the same way – but that’s not always the case – and the person deals with the situation in a different way. If we look at their exeperience as a continuum, the user brings their experiences of the past to the interaction in the present and adds their hopes for the future. That future could be: to interact with their banking in a safe and secure way.
Flow of ExperienceFlow of experience: the individual user/customer is always in the present they act in the present. They are influenced by former experiences and current expectations.UXD-P is taking the users views, behavior, and interactions, to figure out the emotional relationship between them and the thing we have built. For the most part these "people" and their experiences are unknown. It requires an appreciation of the customer: their journey, their personal history and their experiences.It is the collective set of experiences, in the online-world, the offline-world, or even tiny little things (i.e. My coffee was cold this morning) that affects their experience of the products and the companies that represent them. It is about appreciating the individual user’s unmet needs, wants, capabilities and desires in a contextual way. It´s a box of experiences including the things the user saw, acted and felt. (BBC Two [12th February 2008, 9pm, BBC Two] had a program on rational thought. Highlights of the program include: Loss complex, Post-decision rationalization, Priming, Precognition. Watch highlights from the programme : http://www.bbc.co.uk/sn/tvradio/programmes/horizon/broadband/tx/decisions/highlights/ )Experiences and expectations meet in the present. Both are inseperably combined, and every action we take takes both parts into consideration. When a person uses an application, he tries to understand what happens. He will always try to reference this to his past experiences. The moment is also tightly coupled to his expectations of his personal outlook.At this point of “present” I think of the UX honeycomb of Peter Morville [1] …
Morvilles "honeycomb"honeycomb – Peter Morville (P.Morville Facets of the User Experience)In the present we have to deliver to the individual user and his specific task the best answers to following questions. Is the application useful for the individual user and his specific task? Is the application usable for the individual user and his specific task? Is the application desirable for the individual user and his specific task? Is the application valuable for the individual user and his specific task? Is the application accessible? Available to every individual user, regardless of disability? Is the target findable for the individual user and his specific task? Is the application credible for the individual user and his specific task?In the UXD-P the whole team has to take the users views of the GUI and the interactions to figure out the emotional relationship between the brand and potential customers. It requires a common appreciation of the customer journey and their personal history: not only with the product and similar products, but also with similar experiences. UXD-P – teamwork and cooperationThe first stage in discovering – to invent or design for the experience – is to take a new viewpoint about the people who buy and use the products and services we are designing. This is a birdseye view and from step to step we have to use the "mouseview," which is to say a detailed view from the users perspective, as we develop the application we have to switch between these views. Our main desire is to to respect, value, and understand the continuum of experience and expectations our users have .UXD-P can sometimes be a slippery term. With all the other often used terms that float around: interaction design, information architecture, human computer interaction, human factors engineering, usefulness, utility, usability and user interface design. People often end up asking, “What is the difference between all these fields and which one do I need?” If the UXD is aimed to describe the user’s satisfaction, joy or success with an application, product or website, however we specify it, there are a few key essentials which need to be tackled and I have to point out the UX honeycomb of Peter Morville [1] a second time. Each of these points, as enlightened above, makes up a considerable component of the user experience. Each is made effective due to the design offerings from each of the following elements:Usefulness is based upon utility and usability. This means the product is able to give exactly the right kind of service and what the user is expecting from it. And it´s the joy of reaching my aims and the joy of doing so easily. The information architecture is in charge of clarity of the information and features, lack of confusion, a short learning curve and the joy of finding. The designing of the interaction is essential for a successful and overall satisfying experience. So the interaction design has to answer the questions of workflow, logic, clarity, and simplicity of the information. Visual design is responsible for the clarity of the information and elements, simplicity of tools and features, pleasant or interesting appearance of the interface, the visual hierarchy, and the joy of look and feel. Accessibility is a common term used to describe how easy it is for people to use applications or other objects. It is not to be mixed up with usability which is used to describe how easily an application, tool or object can be used by any type of user. One meaning of accessibility specifically focuses on people with disabilities: physical, psychological, learning, among others. Even though accessibility is not an element of its own, it is important to notice that accessibility also plays a role on the whole user experience to increase the likelihood of a wide-ranging user experience. People tend to gravitate to something that is easier to use regardless of who it might have been designed for.The UXD innovation process is a nonlinear spiral of divergent and convergent activities that may repeat over time. Any design process begins with a vision. This applies particularly to the UX process. A vision, however, is not enough to start design. As I mentioned before, we always have different circumstances, users and roles. Therefore, it is critical to accurately understand the end users needs and requirements – his whole experience and expectations. The UX process relies on iterative user research to understand users and their needs. The most common failure point in UX processes is transferring the perspective of users to UI design. The key is to define interaction first, without designing it. First, all the research (the user, product and environment) have to be organized and summarized in a user research composition. These lead to user profiles, work activities, and requirements for the users. The user research composition feeds directly into use cases. The use cases show steps to accomplish task goals and the content needed to perform interactions. Completed use cases are validated with the intended user population. This is a checkpoint to see if the vision is being achieved and the value is clear to users and the project team. The next step is to design the user interface, generating directly from the interaction definition. A primary concern with design is to not get locked into a single solution too early. To keep the project on time, this step should be split into two parts: rough layout and exact and detailed design. The rough layout allows experimentation and rapid evaluation. Detailed design provides exacting design and behavior previews of the final application that specify what is to be coded. Iterative user evaluations at both stages are connected to be fast and effective in improving GUI, design feedback, rapid iterative evaluations, and usability evaluations.
Image_7 design workflow workcycle workspiral UXD-P Gathering the elementsThe diagram below presents the relationship of the elements above:
Elements of UXD-PLewins equationLewins Equation, B = f (P,E) ( B Behaviour; f Function; P Person; E Environment ), ...... is a psychological equation of behaviour developed by Kurt Lewin. It states that behaviour is a function of the person and his or her environment [2].There is a desired behaviour that we need to encourage, but we have no control over the person, so via interaction design, information architecture and interface design we control the environment and therefore generate the desired behavior. (see reference: books.google.com ). UXD-P – many steps to go but every step is worth itHow do we involve our team, customer and our user/consumer? We can start at different points, but I like to think about the circumstances first. Where do we come from? Where are we? Where will we go? And who is “we”? “We” means each person who is involved in the project. Iin the centre of each effort stands the user. To get the user with his personal experiences and expectations into the project, the design team and the customer needs a combining glue / tool / instrument. I believe these are the personas of the “target users/consumers” in the process of UXD-P. If there are no personas the second or third choice are scenarios or the workflows (based on a certain user/person).The management point of view for the most cases is also the view of our customer. It includes the users/consumers age, income, gender and other demographics. The perspective of UXD-P is to look at behaviour, goals and attitude.To get a realistic persona we have to identify first of all the target users. Out of my experiences this is not only the task of our client to define the users and consumers – we have to support him. During the identification and characterization we have to go beyond demographics and try to understand what drives individual users and consumers to do what they do and these as detailed in quantity and quality as necessary and possible like I mentioned above. The approach and the complexity of the characterization depend on the tasks, project and functionalities. Parallel to the very personal description we need a “picture” of the environment. For each persona we must define their business and/or their private concerns and aims. Do they want to research a product for purchase later? Are they concerned about not wasting time primarily? Do they just want to purchase something online as easy and quick as possible?Depending on these personas we can formulate, discuss and prove scenarios – from the very beginning of the project, during the project and as check or analysis at the end of the project. UXD-P – my blueprint of schedule – "todos" and deliverablesWe are always asking and being asked: what are the deliverables. Throughout my career as an IA, UX-planner and designer, as well as during my study of architecture and town planning, I have constantly asked myself following the questions: What kind of project is it? What are the key points? What should our steps and milestones be in the project? What should our/my deliverables be? How can we/I explain the main idea?I have realized that if I do not answer these questions previous to creating a deliverable, I waste more time and deadlines slip.The deliverables are not for us. The deliverables are a means of communication with several people: manager, decision maker, client, designer, front-end developers, back-end developers, etc. Sometimes I have the feeling we overlook this from time to time. After I think about the project I have to ask myself, where will my deliverables and other efforts fit within the process of design? The following diagram describes different lines of work that will lead us to some questions each line must accomplish. Depending on these questions and topics I will outline the basis, basics and deliverables for which each skill and ability which is necessary.
Image_6schedule of UXD-P ___ better view schedule 1238px x 1030px UXD-P – my conclusionI studied architecture and town planning. And just like town planning and architecture isn’t just for architects and art lovers, the internet isn’t just for computer users and developers. Similarly, just as the towns and the cities are for the inhabitants and architecture is for the users of a building, so products and applications are for the user, the customer, the member and not for the people who build them.In every kind of process we should act in a team but in the process of UXD-P it is absolutely essential that we have to think parallel, with the same focus . We have to act in a team, although every team member is a kind of lawyer: lawyer of budget, of the client, of utility, of usability, of look and feel, of brand and finally of the user himself. Because at the end of the project, our user/customer is the final judge.Good design is not only interface, or look and feel, or technology, or hardware, or how it works. It is every detail, like the structure, the labelling, the border of a button or a little icon. Finally, it is the sum of every element. I believe that a shared vision of a group of creators will have more potential than individual creativity. And that is the point where creativity meets expectation. The point of view on IA and design and the process to get to a well-designed product will be changed by UXD-P.The persons who use the application or other object that we invent are the real “architects” of the “architecture” – the real “inventor” of the design. The more we know about our users, the more likely we are to meet their needs.As the capabilities of interactive applications and the internet go forward and grow, more and more consumers use the applications and the various possibilities in new and different ways. We must think about all aspects of user experience.And I will ask you once again: Is it just one who is responsible or is it the team which is in charge of UXD-P?Personally, I believe it is the process of planning and designing for User Experiences (and so I think its the team which is in charge), but the overview has to have an experienced planner as a kind of captain. The most common cause of an ineffective website (one that doesnt deliver value to both the business and its intended constituents) is poor design. The products have to follow, to cover the functions and the experiences. The lack of clear organization, navigation and values of brand and mood mean that people will have an unintentional and maybe bad experience, rather than one that will meet the businesss relationship objectives for each individual. User experience design and planning is a fundamental component to the creation of successful digital products, applications and services.UXD-P is UXdesign and planning- - In my estimation there are distinctions between Design and Planning.Design is usually considered in the context of arts and other creative efforts. When I think of design in the UX process it focuses on the needs, wants, and limitations of the end user of the designed goods, but mainly on the visual parts and the mood. A designer has to consider the aesthetic-functional parts and many other aspects of an application or a process.The planning part provides the framework. The term "planning" describes the formal procedures used in such an endeavors, such as the creation of documents, diagrams etc. to discuss the important issues to be addressed, the objectives to be met, and the strategy to be followed. The planning part is responsible for organizing and structuring to support utility, findability and usability.I strongly believe that both parts design and planning have to work closely together. Every team member should have the ability to think cross-functionally and to anticipate consequences of activities in the whole context.I’ve often seen timelines like this &
and this doesn´t work for UXdesign and planning …I give a timeline the preference which looks like this:
... to develop a UXdesign and UXplanning.And in the center of this team and of this process should stand the leading person – the user!
[1] _ UX honeycomb of Peter Morvillesemanticstudios.com-publication [2] _ The Sage Handbook of Methods in Social Psychology _ by Carol Sansone, Carolyn C. Morf, A. T. Pantergoogle-books (The Sage Handbook of Methods in Social Psychology) amazon.com (The Sage Handbook of Methods in Social Psychology) 
- Leading Designers to New Frontiers
Adaptive Paths MX San Francisco :http://www.adaptivepath.com/events/2008/apr/: Managing Experience through Creative Leadership took place in San Francisco between April 20-22. The conference focused on helping managers and designers deal with the complexity, challenges, and opportunities that make every day so entertaining.
Jeff Parks and Chris Baum sat down with several of the conference speakers and organizers to further examine the issues that the sessions revealed.
You can also follow the Boxes and Arrows podcasts on:
iTunes 
Del.icio.us B&A MX podcast theme music created and provided by BumperTunes?Creating the Next iPod Cordell RatzlaffI had the pleasure of speaking with Cordell Ratzlaff about his presentation Creating the next iPod . Cordell is leading product design for Ciscos voice, video, and web collaboration products. We discuss the necessity of creating a great corporate culture in order to create great products. 
Download audio Interactions and Relationships Richard AndersonChris Baum, editor-in-chief for Boxes and Arrows sits down with editor-in-chief for Interactions Magazine, Richard Anderson at MX San Francisco to discuss the different techniques, and skill sets it takes to develop and publish to the IA and UX communities. Download audio New Interactions: Enlightened Trial and Error Björn HartmannBjörn Hartmann and I discuss his presentation entitled New Interactions: Enlightened Trial And Error. and how he is leading work in design tools for pervasive computing, sensor based interactions, and design by modifications. Björn is a PhD candidate in Human Computer Interaction at Stanford University and Editor-in-Chief of Ambidextrous magazine, Stanfords Journal of Design. Download audio Chocolate and User Experience Michael RecchiutiMichael Recchiuti talks about the experience of making chocolate and how different flavors inspire new creations for the business and his customers. Looking at different professions outside of the web world in which most UX practitioners work can inspire innovation and creativity. Download audio
Round Table Discussion with Adaptive Path and Boxes and Arrows Chris Baum, Brandon Schauer, Sarah Nelson, Henning Fischer, and Ryan FreitasWe start with a mash-up of these brief interviews followed by a round table discussion with editor-in-cheif at Boxes and Arrows Chris Baum, and four members of the Adaptive Path team including Brandon Schauer, Henning Fischer, Sarah Nelson, and Ryan Freitas about these comments and their own impressions of MX. Download audio Thanks to Adaptive Path :http://www.adaptivepath.com/ for sponsoring these podcasts.
- IA Summit 2008, Day 1
The IA Summit was held in Miami, FL from April 10-14. Boxes and Arrows captured many of the main conference sessions ( see schedule :http://iasummit.org/2008/sessioncal.html) starting on April 12.
Day 1, April 12 | Day 2, April 13 :http://boxesandarrows.com/view/ia-summit-2008-day-2 | Day 3, April 14 :http://boxesandarrows.com/view/ia-summit-2008-day-3
Podcasts will appear on this page as we produce them from the audio files so please check back regularly or subscribe to the iTunes feed below.
iTunes Del.icio.us IA Summit theme music created and provided by BumperTunes?
Journey to the Center of Design Jared SpoolTheres a growing sentiment that spending limited resources on user research takes away from essential design activities. Is it time for user- centered design to evolve into something else? Or is there something else happening in our world of experience design that makes UCD obsolete? Jared Spool gives and entertaining and enlightening key note address at the 2008 IA Summit.(published 05/01/08)(published 04/25/08) Download audio 
See the slidecast Tagging: Five Emerging Trends Gene SmithTagging has been the subject of much discussion over the last several years. But recent trends show that tagging is evolving quickly, and that todays conventional wisdom might not be accurate for long. nForms Gene Smith explores five counterintuitive tagging trends that provide a glimpse into the next generation of user-generated classification.(published 05/01/08) DownloadThe Business of Experience: The Experience Impact Framework Jess McMullinnForms Jess McMullin outlines three dimensions of The Experience Impact Framework including: the elements of business, the fundamentals of user experience practice and the kinds of impact we can have.(published 05/02/08) DownloadThe Long Wow Brandon SchauerBrandon Schauer lays out an experience centric approach to fostering and creating loyalty by systematically impressing your customers again and again.(published 05/05/08) DownloadContent Page Design Best Practices Luke WroblewskiLuke Wroblewski discusses a set of best practices for Web content page design that focuses on appropriate presentation of content, context, and calls to action. (published 05/05/08) DownloadBlind Ambition: How the Accessibility Movement Overlooks Sensory Experiences Claude SteinbergIn this presentation Claude Steinberg argues that youll have a better grasp of user experience when you can translate it into something even a blind person would recognize. (published 05/05/08) DownloadInspiration from the Edge: New Patterns for Interaction Design Stephen AndersonTo increase our own field of vision, Stephen Anderson takes a macro view of interface design, focusing on alternative UIs and emphasizing patterns that can be leveraged in a business context.(published 05/05/08) Download
How to be a User Experience Team of One Leah BuleyLeah teaches techniques that any individual can use to generate and refine ideas, outlining flexible, simple activities that can be used quickly, wherever theyre needed.(published 05/06/08) Download See the slidecastA management fable: The little UX that went a long way Dan WillisUX Management often feels like a mystic art. It can entail moving people and processes within an organization without the enchantment of an official mandate. This presentation by Dan Willis deconstructs an illustrated fable about an intrepid creature who introduces user goals to a development process that would have otherwise been dominated by royal business owners and technological black magic. (published 06/07/08) DownloadThanks to Jeff Parks, Jackie Wu, and Kit Seeborg of the B&A/V Podcast team for working their hearts out, as well as ASIS&T and the IA Summit organizers for their support.More big thanks to Mark Blevis :http://www.markblevis.com/ and Bob Goyetche :http://www.bobgoyetche.com/ for their assistance while at the Summit; taking phone calls and FTP files from Miami to Ottawa and back again, and lessons in Audacity for decreasing the bit rates, stereo sound, etc.
- IA Summit 2008, Day 2
The IA Summit was held in Miami, FL from April 10-14. Boxes and Arrows captured many of the main conference sessions ( see schedule :http://iasummit.org/2008/sessioncal.html) starting on April 12.
Day 1, April 12 :http://boxesandarrows.com/view/ia-summit-2008-day-1 | Day 2, April 13 | Day 3, April 14 :http://boxesandarrows.com/view/ia-summit-2008-day-3Podcasts will appear on this page as we produce them from the audio files so please check back regularly or subscribe to the iTunes feed below.iTunes Del.icio.us IA Summit theme music created and provided by BumperTunes?Search patterns Peter MorvillePeter describes a pattern language for search that explains user psychology and information seeking behavior, highlights emerging technologies and interaction models, illustrates repeatable solutions to common problems, and positions us all to design better search interfaces and applications. (published 04/25/08) Download audio See the slidecast The information Architect and the Fighter Pilot Matthew MilanMatthew argues that fighter pilot and military strategist John Boyd can teach us a great deal about how to understand, interpret and design for human decision making. (published 04/25/08) DownloadE-service: What we can learn from the customer-service gurus Eric ReissIn this passionate and entertaining presentation, Eric Reiss talks about the design and execution of a system of activities people, processes, and technology that ultimately build brand, revenues, and customer satisfaction. (published 04/25/08) DownloadPractical Prototyping Todd Zaki Warfel, Chris Conley, Anders Ramsay, and Jed Wood
The panel discuss various methods for prototyping with a focus on why we dont prototype in software as much as we should and why we should be doing it more. (published 04/25/08) DownloadThe Impact of Social Ethics on IA and Interactive Design Karl Johan Saeth and Ingrid TofteKarl Johan Saeth, and Ingrid Tofte illustrate four cases showing that interactive design in one way or another is always based on interpretation of ethical rules, expressed or latent. IA and design are bound by cultural imperatives and this, Karl and Ingrid argue, is a fact we cannot ignore. (published 04/28/08) DownloadWhat do Innovative Intranets Look Like? James RobertsonJames presentation provides highlights into the winning entries from the 2007 Intranet Innovation Awards and provides lessons learnt for organizations looking to drive innovation via their intranet. (published 04/28/08) DownloadPanel: Presence, identity, and attention in social web architecutre Christian Crumlish, Christina Wodtke, Andrew Hinton, and Gene SmithIn this discussion about presence, identity, and attention in social web architecture the panel talks about core IA related issues including: Structure of social sites, tagging and folksonomies, data models for people and their relationships, and navigating in a community site(published 04/28/08) DownloadUX in the Wind: Finding Experience on a Motorcycle Joe SokohlKeanes director of user experience, Joe Sokohl, brings together his passions for motorcycling and user experience design in this talk about the intersection of industrial and interaction design in motorcycling.(published 04/29/08)
