The transport map above is a representation of Medicare Part D [http://medicare.gov/part-d/index.html], as it rendered on May 21st 2013. It is my first draft*, a simple, rather crude attempt to organize key pages of a website** using a visual notation that has a very concrete yet familiar context; one that I have never used for the purpose of communicating the essence of user experience to stakeholders. I feel that this and other experience diagrams can be very helpful as facilitators of experience architecture.
The map above should be familiar, as it brings to mind similar maps of transportation systems worldwide. In one glance stakeholders can get a good and accurate sense of key 'lines' (8 in this map) and 'stations' (39 here) and these translate nicely to web pages. One can also assess the complexity and size of this section of the website, the navigability paths from one station to another, transfer options and so on. It is the user journey represented in a format that immediately transcends the high fences of boxes and arrow I typically use.
I argue that UX needs to experiment with new formats of visualization in addition to the artifacts we typically produce. Boxes & arrows diagrams and their permutations were never meant to capture and transmit the user experience. When decently executed, they are effective in communicating organization, flows, decision points and other aspects of the site's structure. But how can we invoke emotions, which is what experience is all about? Here I feel that by super-imposing familiar models of representation, such as subway maps and others I will explore later, the audience - most importantly our clients, are provided with an opportunity to think 'out of the box', to see their property in fresh yet very familiar ways.
In discussing the issue of UX diagramming with colleagues and clients, a sentiment of dissatisfaction and urgency is common: Increasingly we are involved in Mobile-First, a design strategy that requires device-agnostic, device-appropriate development of multiple experiences - simultaneously. It is becoming darn hard to create diagrams for complex sites, especially those that are highly contextual, personalized and localized to the user, in addition to supporting high variability of exceptions to business rules.
Everyone on a project, from executive sponsors through business stakeholders and on, talks about the importance of the user experience - user experience being the driver for many transformational enterprise projects - So we need means to capture and talk about the user experience directly - since in early phases of conceptualization, diagrams are extremely important because they serve as the foundation guiding work on wireframes and prototypes.
Back to the map above: We all understand what it means to negotiate public transport - We have a specific goal - getting from where we are to where we want to be - it is a very goal oriented type of activity, for most of us, at least. For example, I remember staring at the NYC subway map trying to figure it out...something about the brown or green line perhaps. As sense of urgency (a need to be somewhere on time), of realizing this will need some time to figure out - time that I did not have or want to spend. And a sense of being somewhat helpless, finally realizing that asking a passer-by is probably the best bet. This, and other life experiences are triggered by looking at the map above. It is possible to overlay the personal, physical experience, with the that of the website. Which is why I hope using a transport map can work for user experience.
Consider the audience of the Medicare website, and specifically Part D, a section that outlines the specifics of drug coverage: Eligible people (anyone with Medicare), their families, care givers, health care professionals and others. Imagine sending users to a trip in this transport system, then, look at a screen capture from the actual site, below:
A=We are in Drug Coverage (Part D) - but the tab does not provide any visual indication.
B=In the left-rail we selected the section 'How to get drug coverage'
C=And we are reading the section 'How to change your Medicare drug plan' - the left-rail has this part highlighted in Yellow, and there is a nice title on top of the text.
D=This is the kicker: The breadcrumbs do not correspond to the path we selected (A>B>C). It is an alternate, system generated path (the 1st breadcrumb is 'Home', the 2nd is 'Signup/change plan' - both not part of our ABC path), that conflicts with the user-driven path. It is an intersection of two rail systems and it is confusing.
In the next iteration of this experience map will try to represent 'D' on the experience map. I can already tell you that we will experience how the magnitude of the entire Medicare site impacts this specific Part D section, and what it can do to the user experience, having to navigate a much larger set of content.
* = To create this model I used the trial version of ConceptDraw Pro, which is easy to use and is relatively inexpensive.
** = I use the terms website or sites to also include applications and all forms of software user interfaces.
Finally, we (UX practitioners) had everything going for us: After years of having to toil with static drawing tools such as Visio, or agonize over tools intended for developers, rapid prototyping tools such as Axure made it possible for a non-developer to dream-up and demonstrate compelling interfaces. During a brief period of bliss, between 2007-2010 or so, while things were far from perfect, everyone was happy: Stakeholders, developers, users and of course - us, UX people.
But clouds of trouble gathered with the rapid proliferation of mobile devices, starting with the iPhone, iPad and the now numerous offerings from others. For our clients, making sure their websites and software works well on all devices quickly changes from 'nice to have' to 'absolutely must have'. From providing some level of competitive advantage, ensuring your software is device-agonistic has become a financial deep-hole, with marginal advantage when offered, to punishing consequences if not.
On the surface, this situation would suggest a gold mine to anyone in the UX profession, since the implications are that there is tons or work we need to help with. And indeed, one might argue that the opposite situation would be worse, and I agree. However, as device-agnostic design becomes a core demand from clients, a non-trivial mission is being viewed by the people who pay for it, as trivial. In other words - They want to pay less, to get more, and as usual - faster. It makes sense, from the client's perspective, because, when you look at a good simple design, it looks so simple, so easy to do...just like competitive ice-skating, perhaps. Only those who went through a design project can appreciate the complexities.
- Do our stakeholders understand what we are getting ourselves into?
- Do we understand?
This convention is offered for review, discussion and adoption by others in the UX community in the belief that there is no need to reinvent the wheel for each new project and that we could all benefit from some standardization. Comments and suggestions are most welcome.
- UI Framework (all shared UX widgets, patterns etc.)
- Medical Staff Portal (doctors, nurses, etc.)
- Patients Portal (Charts, lab results, prescriptions, etc.)
- Pharmacy Portal (Prescription Tacking, etc.)
- UI Framework = FW
- Medical Staff Portal = MD
- Patients Portal = PP
- Pharmacy Portal = RX
- Domain nomenclature (Pharmacy could be PR, but RX makes more sense)
- Avoiding confusion in the future (Patient portal could be PT, for example, but may be confused with a sub section under MD for Physical Therapy (widely known as PT)
- Naming conventions of other partners in the project that may have started their work before the UX team. Often, the business process team is in place early on. The goal is to gain alignment and reuse confusion.
- FW = 900 to 999
- MD = 100 to 199
- PP = 200 to 299
- RX = 300 to 399
Continue to create the corresponding nodes on the Maters panel - Here we can take advantage of folders to structure the wireframes without creating extraneous pages. Note that we add "M-" to all masters to help distinguish between masters and pages.
Names should be meaningful and self-explanatory to provide maximal clarity to all stakeholders. Keep in mind that you need to communicate with others, so avoid shortcuts, ambiguous names. From our example:
The RX team has a wireframe page with a list of drugs and a detail page of each drug, which is presented when the user clicks a row in the list.
The 2 pages should be named:
- RX-301 Drug List
- RX-302 Drug Detail
4.1 Workstream Masters
These are masters of limited use - only on pages related to a particular workstream. For example, the MD workstream has several pages related to Board certification of doctors and nurses. These are relevant only to the MD portal, and the ID of masters used there will communicate this fact:
For example: M-FW-900.1 etc. Note that the 3-digit prefix for masters does not advance. Rather, it is an indicator of the workstream and not associated with a particular page of the workstream because masters can be used on multiple pages. M-MD-100.1, for the first master for the MD workstream, etc.
Unfortunately, Axure does not allow page notes for dynamic panels and their states. AAs a result, the ability to reference with accuracy any element of a dynamic panel is important, and can be done on the master level, which can be cumbersome, but allows documenting those elements.
M-PT-305-BTN.1 Button Name, or more complex....
To be continued in part 2.
I'm often asked by colleagues and clients about my experience with rapid UX prototyping tools in general, and Axure specifically. I always preface by saying that I’ve been using Axure as a primary wireframing tool for the past 3+ years, and, although I occasionally evaluate new prototyping tools, such as ProtoShare or Sketchflow , I don’t have the hard-core experience that comes from daily work with a tool.
Download the PDF.
Comments are most welcome.
The June 7th issue of the New York Times Book Review, print edition, had the following Amazon ad on page 21: An arrow pointing at the bestsellers list and the text:
"in the time it takes to skim the bestseller list, you can wirelessly download an entire book." A couple of inches Below that text was an image of the Kindle accompanied by the text:
"Choose from 275,000 of the most popular books, magazines and newspapers. Free wireless delivery in less than 60 seconds."
In the print edition of the Times the bestsellers list is spread across 3 pages:
|Page||Bestseller Category||List Category||# of Books|
|20||Paperback Best Sellers||Trade Fiction||20|
|20||Paperback Best Sellers||Mass Market Fiction||20|
|21||Paperback Best Sellers||Nonfiction||20|
|21||Advice, How-To and Miscellaneous||Hardcover||10|
|21||Advice, How-To and Miscellaneous||Paperback||10|
|# Pages||# Bestseller Category||# List Category||# of Books|
The Amazon ad suggests that the act of downloading a single book is equivalent to the act of browsing a list of books (perhaps to determine which book to purchase). But it is really a comparison between (a) A pre-decision activity of browsing the list of books, and (b) A post-decision activity, since the download is done after one chose, purchased and clicked the 'Download' button - it is the device that does the work.
Let's consider Amazon value preposition which is divided into 2 phases:
- Choose from 275,000 of the most popular
- Free wireless delivery in less than 60 seconds.
In phase 1, the ad touts a clear quantitative advantage for Amazon: A choice of 275,000 bestseller books compared to the meager 110 books of the NYT. In fact, the ad is positioned on page 21 which only lists 20 books, compared to page 20 which lists 40 books and page 18 which lists 30 books - the quantitive advantage is visually enhanced.
In the print edition, one only has to choose between books. Indeed, making the choice even in this short list is confusing. What's odd about the NYT bestsellers list is its classification confusion in both the Bestseller category and the list category: Format (paperback, hardcover) is intermixed with genre (advise, fiction, nonfiction), and sales channel (mass market, trade).
This list is clearly not organized with the user (the reader) in mind. It is hard to imagine a reader pondering which a mass market fiction book to get for her Summer holiday. But at least the choice is among books. The Amazon ad offers, in addition to the large quantity of books, also a range of publication types - books and magazines and newspapers -- clearly a scope beyond that of the print list, but also a completely different type of choice and context of choice.
Finally, the interface of the NYT list in print requires the reader to read. Each item includes:
- List price and
- A short blurb.
Now, the user interface for browsing the same NYT bestsellers list on Amazon's Kindle section does not require one to read. Rather, one may be compelled to make the choice by the covers, ignoring the wise proverb 'Don't judge a book by its cover'.
Here, each item includes:
- Cover photo (title and author quite visible)
- List price
- Kindle price
and here is the interface of all the bestseller books (54) in fiction category:
So, how many books could you download by the time you finish browsing the NYT bestsellers list on the Kindle website?
Magritte's painting "Ceci n'est pas une pipe" ("This is not a pipe") continues to be the source of delicious musings on art and semiotics almost a century after Magritte created the series of paintings called The Treachery of Images . The point here is that the prototype is not the application, and keeping this in mind can guide the user interaction team in developing a prototype that is rich and effective, yet not so involved as to introduce complexities to the project. We are witnessing a dramatic change in the landscape of prototyping tools available to practitioners, and with the tools, business acceptance of and demand for increased visualization of the proof of concepts before development begins. Ideally, the prototyping process should be continuous and evolutionary, meaning that it is possible to increment the prototype file increasingly adding depth and specifications. So it is a matter of developing a prototyping process that is effective and appropriate to the point of project. Typically, low fidelity works well at the very early days of the design process: The purpose of these quick sketches is mostly to provide the designer with an initial handle of the concept, quickly experiment with approaches. To be continued here. * As a side note, a search for 'this is not a pipe' yields a result set that demonstrates some of the issues Walter Benjamin brought up in 'The Work of Art in the Age of Its Technological Reproducibility'. Which image is the pipe of 'This Is Not A Pipe'?
Magritte's painting "Ceci n'est pas une pipe" ("This is not a pipe") continues to be the source of delicious musings on art and semiotics almost a century after Magritte created the series of paintings called The Treachery of Images .
The point here is that the prototype is not the application, and keeping this in mind can guide the user interaction team in developing a prototype that is rich and effective, yet not so involved as to introduce complexities to the project.
We are witnessing a dramatic change in the landscape of prototyping tools available to practitioners, and with the tools, business acceptance of and demand for increased visualization of the proof of concepts before development begins.
Ideally, the prototyping process should be continuous and evolutionary, meaning that it is possible to increment the prototype file increasingly adding depth and specifications. So it is a matter of developing a prototyping process that is effective and appropriate to the point of project. Typically, low fidelity works well at the very early days of the design process:
The purpose of these quick sketches is mostly to provide the designer with an initial handle of the concept, quickly experiment with approaches.
To be continued here.
* As a side note, a search for 'this is not a pipe' yields a result set that demonstrates some of the issues Walter Benjamin brought up in 'The Work of Art in the Age of Its Technological Reproducibility'. Which image is the pipe of 'This Is Not A Pipe'?
- Team members should understand how to work with shared projects. All should be comfortable with the various options under the 'Share' menu and the difference between options such as 'Get all changes..." and "Get Changes...", for example.
- New team members should have an on-boarding deep dive session with a team member to cover the structure of the sites. In large, intense projects new members are often thrown in to the cold waters of a shared project file to sink or swim because the team is at the height of some crunch. disoriented and under pressure to get up to speed asap, the incoming member can be easily lost in the intricacies and work-arounds.
- All team member should participate in a weekly status meeting that covers the structure of the sitemap, variables (since those are global and limited) and other important changes. Use web sharing to view the file, make sure that members understands the composition structure of their colleagues.
- Despite looming deadlines...it is important to be careful and pay attention before checking in and out. A few seconds of concentration can save hours of lost work.
- Team members should avoid unsafe check outs -- checking out pages that are already checked out by another team member - this is critical.
- Before you begin work on a page, make sure to 'Get ALL changes from shared directory' - this will insure you have the latest copy.
- Update your file frequently by getting all changes.
- When done editing a page or master you checked out, check it in so that it will be available for other team members.
- Check out only what's needed for your design work, check in as soon as done and check out the next chunk you are going to work on: Avoid hogging files you are not working on but still checked out.
- If possible, structure the sitemap and masters in sections such that team members can work on chunks of the file in parallel. Agree on unique page and master IDs and a naming convention to help team members access the right files and communicate.
- Make sure to back up the shared file.
A recent editorial in the NYT informed me about the federal government's new resource - Data.gov. As noted in the editorial, the site is still new and does not provide yet any direct data visualization and manipulation widgets, although sometimes there are links to other sites where such widgets are available. Still, this “one-stop shop for free access to data generated across all federal agencies.” as Peter Orszag describes it, promises information architects and user experience designers an unparalleled opportunity to experiment and develop new paradigms of data visualizations. For the most part, access to very large sets of data is not readily available, or so easily found.
Below is the search result for the term 'flu.
I was really shocked when I first tested the the results after posting my first post and my knee-jerk reaction was to stop showing the ads. The reason, as you may guess was that the ads were suitable more to, shell we say, interactions of the physical nature than to a site than to one dedicated user experience and interaction with software, an activity that typically does not involve body fluids,
I've reactivated a couple of days later and here is the result:As you can see, it is not likely to be of interest to my target audience. But perhaps I'm wrong, a topic for another entry. I am hoping to update this post over time, and am really curious about what is going to transpire.
Update on May 28th
Already on the 26th there was a noticeable change in the quality of the ads Google generated and displayed on the site: There were all contextual to the blog's content. The illustration below is a comparison of ads One of the lessons of this experiment is the importance of conditioning a site to be as productive as possible from a search engine perspective.
I am not sure how many user experience practitioners are versed in the craft of website optimization and web analytics. In my experience, work on a commercial B to C project typically involves heightened awareness to analysis. It does appear that not enough information architects and user experience designers are considering analytics during the design process. Rather, analytics professionals handle optimization as a technical aspect of the site, and after the site has been redesigned and launched.
Avinash Kaushik's blog Occam's Razor provides important insights, many of which are really relevant from an interaction design perspective. Since the demands (or daemons?) for monetizing anything web are becoming a norm, it is important to consider the information architecture in a way the will be effective, providing value 'under the hood' avoiding transformation of the site or application into a 'Times Square'. Best practice approaches can be adopted from analytics and further developed for the purposes of improved user experience.
Both browse path involve 2 clicks, so no efficiency is gained in terms of physical effort.
Everyone knows that you need to use simple words when talking to little kids, so 'big' words like classification, clustering, facets and hierarchy (a distasteful term which even some grownups find difficult to spell) are out. So let's start with a tree. Imagine a tree. What's a tree really? You could say that a tree is like a 'parent', and it has 'children': A trunk that splits into several big branches that in turn split into smaller twigs that split into even smaller twigs where leaves sprout and fruit grow. If the child is really curious, you can talk about the parts of the tree that only moles could see if moles could see: The taproot which is the main root that grows vertically into the ground
So. is taxonomy like a tree? wait, wait... because there is another way to describe a tree: The bole is the part of the tree between the ground and the first branch, the crown which is the part of the tree from the first branch to the top, and the top which is the highest part of the tree.
And...a tree is a plant and there are all kinds of trees and here are just a few: Redwood, Ash, Fir, Spruce, Sequoia. There are banana trees, apple trees, orange trees and how exactly is a Sequoia related to and Avocado tree? And even more: A collection of trees can form a forest, grove, garden, or park which by themselves are not just collections of trees but wider concepts. So of course, the development of a taxonomy involves research, and among other things, one can find that for many domains, especially in life sciences, law, government and many others, it is possible to start the process with an existing taxonomy, see for example the taxonomywarehouse.
It is clear that the scope of concepts in the world is endless due to the Human instinct to stereotype and classify, first explored by Aristotle, or at least - this is our first written record of an arrangement to classes, subclasses and so on, as means to understand our world. But if so, lets keep in mind that children must have an inherent understanding of classification, and by extenuation, of taxonomy. It is only a matter of vocabulary then.
Taxonomy is a communication device, a tricky one because it is important to make sure that the person that communicates the taxonomy and the audience for the taxonomy understand each other. So the first thing is to understand - who will be using your taxonomy and how.
As a communication device, taxonomy's principal use is in navigation systems and facilitating good search results. But because a taxonomy maps to a known mental model shared by the user and the system, it is important that the appropriate taxonomy will be exposed to the user in navigation systems, drop-lists, and other actionable interface objects. Such a system allows the user to self-identify: I'm a kid, I'm a teacher or I'm a parent/guardian, and the system renders relevant taxonomies based on appropriate synonym mapping. The multidimensionality of relations within a taxonomic plane is supported by explicit content tagging as well as folksonomy - a taxonomy set by users, to provides the necessary flexibility.
Usability studies utilize both qualitative and quantitative methods for capturing user response to the user interface that is being tested. We can measure mouse-clicks, time on task, task completion rates and other valuable data. We can also collect verbal feedback related to ease of use, visual design, layout and other subjective responses. The processing of collected verbal data is expensive because recordings have to be transcribed, tagged and often edited for readability. This is a labor intensive process and if the testing is done with users who talk different languages, translation is also required. Moreover, even when interviews are carefully scripted and prompts are consistent, response are often difficult to reconcile: Participant's answers can be inconsistent, vague, and generally difficult to analyze and interpret.
Verbal feedback is also used to capture participants' response to streaming content and to gage level of engagement with that content. Typically the tester pauses the media and prompts the participant for her or his opinion. The benefit of this method is that the feedback is contextually related to the content which had just been displayed and is fresh in the mind of the respondent. The disadvantage is the labor intensive post session processing and interpretation of the information gathered. Alternatively, a user can be given a questioner at the end of the streaming content. The benefit of a questioner is that it is easier to process and measure the responses, but the drawback is that the participant is not likely to recall in deep detail their response to content or their sense of engagement with content that was displayed minutes ago.
This paper describes a method I developed to capture in real-time participants' response to streaming content as well as their engagement levels throughout the presentation. The key benefits of this method are:
- Capture in real-time users' response to streaming content such as web seminars, tutorials and demos, where the user interface itself plays a smaller role in the interaction
- Significantly lower the time labor costs associated with processing the feedback, which may help budgeting for larger samples.
- Capture response to streaming content by setting your own test pages or from any website or application.
- Wish to hide the tested content from the associated company's identity by isolating it from the rest of the company's site and the site's URL.
- When you are testing several draft variations of the content, don't want to bother site admins with helping you post the stuff and need to run it locally off your machine.
The image is divided into 2 sections:
- Left side - Response to content. A rating scale from 1 to 7, with 1 being "I don't care -- trivial content" to 7 being "Really important -- Tell me more!"
- Right side - Engagement level. A rating scale from 1 to 7, with 1 being "I'm bored" to 7 being "I'm fully engaged"
- For the screen to be aesthetically pleasing and professionally looking, I adjust the width of the image so that it is the same as the width of the embedded content I'm testing.
- The buttons on the bar should be clear and easy to see, and easy to click on.
- The labels should be clear and easy to read
- This is a static image - no need to create mouse-over states.
- Keep to the minimum the number of shades and colors used for the buttons: The participant needs to focus on the media, not the buttons, so minimize visual overload.
- Differentiate between the low and high scores. I have a gradual shift from White (1) to Yellow (7)
- Make sure you have good speakers so that the participant can hear clearly the narration.
The second approach makes it possible to capture user's response to any streaming content, on any site. This scenario works when:
- You want to test content that is on a production site but you don't have the media file locally
- You want to capture response to a section of a competitors site
- You want to capture response to streaming content but are also conducting a traditional usability test for the site (navigation, workflow, tasks and so on)
- For some reason you can not use self-created test pages.
How it Works:
Since a measurement bar graphic cannot be used, I suggest a low tech solution - drafting tape. The simplest method: Apply a strip of drafting tape directly to the monitor, above the clip you want to test. With a sharpie, write 'Content' in the top-center, the number 1 on the left, 2 in the middle and 3 on the right. Apply a second strip on the bottom of the clip, write 'Engagement' and the 3 numbers.
The strips help guide the user to well defined area of the screen where you want them to click. The strip is semi-transparent, so the user can see the mouse pointer then they click, and since they click in areas that are not part of the content object, the streaming is not interrupted by the clicks. When you view the recorded session later, the drafting tape strips will obviously not be there, but since you know their meaning - the clusters of clicks on top and bottom of the clip, and to the left, middle and right - will help you collect the relevant data as effectively as if there was a graphic there. Once this section of the study is done, you can peel the tape off the screen an move on to another topic.
While the example above works best for a 3 rating system, you can setup a more granular system used the left and right sides of the box. However, keep in mind that you want to keep it simple, and that adding too much tape around the clip may mask too much of the screen. Also think about the accuracy when logging the
What you need:
- A 1" 3M™ Scotch® 230 Drafting Tape - this tape sticks to the screen but is easy to peel off. You can get it in any office supply store.
- Ultra or extra fine tip Sharpies - I use a Blue for the content strip , Black for engagement strip and red for the numbers. (Avoid using Red and Green for labels because they carry an inherent association for bad (Red) and Good (Green), which may confuse the user.
- Small scissors (to cut the tape nicely)
- Lens cleaner solution to wipe the screen after peeling off the tape
- Don't be sloppy: Cut the strips with scissors. If you have to tear the tape, fold about 1/2" on each side to give the strip edges and straight edge.
- Apply the tape as horizontally as you can (Leveler is not needed...)
- Demonstrate to the user how you want them to act during the recording and make sure they are comfortable with the mouse going 'under' the tape while they click it.
3. What's next?
Once you capture and tag the sessions, it is possible to translate data to valuable information. There are many interesting ways to slice and dice the data, well beyond the scope of this document. However, as you can see in the graphs below, aggregation of session data make a compelling story about response to content and level of engagement to existing or proposed streaming media. makes helps present to stakeholders important analysis and help develop strategies
* Can be used with Morae 2 and 3.
- Websites that collect or share information about you
- Internet service providers or employers that track the pages you visit
- Malicious software that tracks your keystrokes in exchange for free smileys
- Surveillance by secret agents
- People standing behind you