interactiondesign

A few years back, the executives at the electronics retailer Best Buy made a hard decision. They decided to become less attractive to a large group of their customers.

These customers were frequent purchasers, so you’d think they’d be someone Best Buy would want to court. However, these customers were driving up Best Buy’s costs and making it hard to serve others.

These customers would do crazy things, like buy a product on sale, use it for a few days, then return it, only to buy it back when the store put it out on a half-price open box sale. They’d get the credit for their original purchase at full price, but then buy the product again at half price.

Finally, the executives at Best Buy had determined these customers were hurting their ability to deliver quality service to the customers who wouldn’t play these games. That’s when they made the decision to stop serving a piece of their customer base.

In the first part of our series on moving beyond conversion rates, we looked at why ratios like conversion rates make bad metrics. Today, we look at a base assumption behind measuring the conversion rate of a web site: that every site visitor is desirable as a customer.

Not All Visitors Make Great Customers

Why wouldn’t we want to sell to everyone? Everyone drinks Coca Cola. Everyone loves McDonald’s. Why wouldn’t everyone want our product or service?

The problem is different customers come with different costs. Successful businesses focus on the most profitable customers and, at some point, draw a line on the customers they don’t want to serve.

Costs for customers happen in different ways. An unhappy customer may call support and want the support representative to help them make things right. That’s great if it’s something the product is supposed to do, but if it’s something the product was never intended for (and can’t do well), then that customer will never be happy and the support call is just added expense.

Unhappy customers tell others when they’re not happy. (Search my Twitter stream for mentions of United Airlines and you’ll see how this works.) It’s not hard to find reviews of mobile apps or Amazon products where the complaints are about things the product was never intended to do. These negative reviews scare away other customers.

For any product or service, there’s a group that shouldn’t be a customer or patron. It’s as important for the marketing and sales efforts to disqualify these customers as it is to entice the ones who will love the product or service, buy more without hesitation, and get all their friends to try it.

This is another place where optimizing a design for a conversion rate gets us into big trouble. Conversion rate says that every visitor should be converted into a purchaser.

However, if the marketing and sales components of our designs are doing well, we should intentionally see some visitors leave without a purchase. If we use a raw metric, that would make our conversion rate go down. Normally, we see a decreasing conversion rate as a bad thing, but in this case it’s really good. How do we account for that by charting the metric over time?

If we could filter the visitor denominator in our conversion rate metric to only focus on those who are the ideal, high-margin customers we’re seeking, then we’d have a lot more useful data. But, without a way to filter them out, the metric becomes filled with noise and substantially reduces its value.

In the next installment, we’ll look at how the visitors to our site aren’t as homogeneous as we’d like to believe, thereby reducing the helpfulness of a single conversion rate to designers.

---

Moving Beyond Conversion Rates:

Part 1: Avoid Ratios for Metrics Part 2: Not All Visitors Make Great Customers (this)

Smart UX managers deliver better experiences and better revenue. That's their job.

At the heart of this year's MX Conference was a talk by Hotwire Group's head of mobile, Melissa Matross. Her story starts with her hatred of display ads and how they took away from the quality of the Hotwire experience as a "necessary evil."

Knowing her frustration with the ads, her boss challenged Melissa saying, "If you want to get rid of the ads, find a way to replace the revenue." This was the opening that Melissa says changed her career.

Before her story's done, you hear how she found revenue, dramatically improved the experience and Hotwire's brand impression, and ignited her career:

Melissa Matross | Better Revenue through UX: Bringing Down the Banners the Hotwire Way

UX managers are in a rare position where they can see both the business needs and user needs, and can find where they align to produce revenues from positive relationships, not from goading, entrapment, or annoyances.

The missing piece for UX managers is often the open mind to see the bigger business picture and the desire to dig through the data to prove out the case they know to be true. As Melissa says in her talk, "understanding the data changed my career."

When you’re new to something, all the pain is out in the open. You stub your toes until they’re black and blue on things the veterans have all learned to avoid. This is both a curse and a gift.

A curse because it’s hard to make progress when you’re constantly getting snagged. Frustration is high and defeat feels scarily near. You might well give up entirely before you know the dance of the natives.

But a gift, too, because you have the clarity to make things drastically better. You won’t miss the non-sense the veterans have long since accepted as the norm. Once you’ve acclimated to the temperature of the pot, you’ll get boiled alongside all the other frogs. But until then, you’re in a magical position to make great strides. To propose radical solutions, deliberately ignorant ideas that just might be brilliant.

This is the time to do the impossible, because you don’t know enough to know what can’t be done yet.

By Paul Bryan Published: May 21, 2012 Spoon boy: Do not try and bend the spoon. That’s impossible. Instead, only try to realize the truth. Neo: What truth? Spoon boy: There is no spoon. Neo: There is no spoon? Spoon boy: Then you’ll see, that it is not the spoon that bends; it is only yourself. “Just because there is a UX Strategy group on LinkedIn…, that doesn’t make UX strategy real in the same way that other disciplines and roles—for example, information architecture—are real.” The Twitter feedback on my last column, “What Does a UX Strategist Do?” was overwhelmingly positive, but there were a few skeptics, too.

By Tal Bloom Published: May 21, 2012 “Only users themselves can intimately appreciate their own needs, and user experience is the only field that considers the user’s perspective at every stage of a project.” I often reflect on how privileged I am to be in the field of user experience, because we always have the trump card: the user. Let me explain. As UX professionals, we generally have an abundant breadth of experience across different industries and businesses. Our clients, on the other hand, have great depth of knowledge in their own domain. However, only users themselves can intimately appreciate their own needs, and user experience is the only field that considers the user’s perspective at every stage of a project. Why is this such an awesome novelty? The Triangulation Principle There is a social science research approach called triangulation, which is “the combination of multiple perspectives in the study of the same phenomenon.” [1] Social science borrowed the triangulation metaphor from navigation systems that, given basic principles of geometry, use multiple reference points to locate an object’s exact position. [2]

By Laura Keller Published: May 21, 2012 “The service design challenges when the human body is the object of service are significant. … In healthcare and, specifically, for hospitals, the body is the service focus.” The focus of many services is some primary object: your car in for maintenance at a garage, your clothes at a dry cleaners, your home being cleaned by a maid service. But for some services, the object of focus is you: your hair being cut at a salon or barber shop, your back being adjusted by your chiropractor. Your whole body can even be the focus of a service—for example, transportation, restaurant, or hotel services. The service design challenges when the human body is the object of service are significant. One particular challenge is the diversity of customers’ contexts and mindsets. The service goal for an airline is getting you to your destination. But as a designer, you cannot assume that the reason someone is traveling is for a vacation at Disney World, a boring business meeting, or a funeral for a close friend. In healthcare and, specifically, for hospitals, the body is the service focus. Although the service goal of a hospital visit is improved health, the reasons for needing healthcare are diverse—ranging from getting treatment for a case of flu to an operation to correct a heart defect to palliative cancer support—each with an infinite number of accompanying patient and caregiver contexts and mindsets.

By Tomer Sharon Published: May 21, 2012 “The number one reason organizations do user research is because they want to learn about what their customers want and make the changes necessary to satisfy their customers’ needs.” For a UX professional, one of the hardest things to measure is how much stakeholders and clients have bought into UX research. There is no clear, quantifiable answer to this question. Nevertheless, there are several signs that indicate stakeholder engagement, uptake, and buy-in. This article identifies some of these signs. Think about the reasons people and organizations decide to conduct UX research. Why are they doing it? Why are they making the effort? The number one reason organizations do user research is because they want to learn about what their customers want and make the changes necessary to satisfy their customers’ needs. When stakeholders act on the findings of UX research, you can clearly point to the positive effect that the research is having on the organization, its products, and its customers. All you need to do is pay attention and be aware.

By Janet M. Six Published: May 21, 2012 Send your questions to Ask UXmatters and get answers from some of the top professionals in UX. In this edition of Ask UXmatters, our experts tell you how to choose a UX conference that’s right for you, as well as about their favorite UX conferences. Every month in Ask UXmatters, our UX experts answer readers’ questions about a broad range of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your questions to: ask.uxmatters@uxmatters.com.

Lagom till våren och alla trädgårdsfantaster har Plantagen.se gått live. Det blev det lite ovanligare CMS-valet Expression Engine för den ledande. kedjan.

Det är en release med feta menyer, webfonts, snabbrullande carusel med kontroller, en sortimentsök som bygger på olika typer av ”spakar” och en chatrobot (!).

Speed matters online. Study after study has shown that even 100 millisecond delays in load times negatively impact user experience and conversions. So it's no wonder that e-commerce experiences are particularly susceptible to performance as these recent bits of data illustrate.

• The average Internet connection speed around the world was 2.3 Mbps by the end of 2011. That’s down about 14% from the previous quarter. (source)
• If a page load takes more than two seconds, 40% are likely to abandon that site. (source)
• The average impact of a one-second delay means a 7% reduction in conversions. For the $100,000 per day ecommerce site, a one-second delay means $2.5 million in lost revenues in a year. (source)
• Sales at Amazon increase by 1% for every 100 milliseconds it shaves off download times. (source)
• When Shopzilla decreased load time by 4 sec, they saw a 25% increase in page views, and conversion rates went up 7-12%. (source)
• Google Checkout’s mean payment processing time was .26 seconds in a recent study. This makes it the fastest payment gateway online. (source)
• Paypal, the most popular payment gateway, had a mean transaction time of 1.46 seconds. (source)

It’s good to make your website or application as beautiful as possible, but not at the expense of usefulness.

“Did you ever come across a product that looked beautiful but was awful to use? Or stumbled over something that was not nice to look at but did exactly what you wanted?” These questions are asked by Javier Bargas-Avila, a senior user experience researcher at YouTube.

In May 2012 YouTube published results of a study where they had “created four versions of an online clothing shop varying in beauty (high vs. low) and usability (high vs. low). Participants had to find and buy a number of items in one of those shops. To understand how the factors of beauty and usability influence final users happiness, we measured how much they liked the shop before and after interaction.”

“The results showed that the beauty of the interface did not affect how users perceived the usability of the shops,” Bargas-Avila continued. “Participants (or Users) were capable of distinguishing if a product was usable or not, no matter how nice it looked. However, the experiment showed that the usability of the shops influenced how users rated the products’ beauty. Participants using shops with bad usability rated the shops as less beautiful after using them. We showed that poor usability lead to frustration, which put the users in a bad mood and made them rate the product as less beautiful than before interacting with the shop.”

Ease of use is a tsunami tearing across the world. In our own studies we see again and again that if the customer can’t quickly and easily complete their task their impression of the website or application falls off a cliff. “So, John, you didn’t quite manage to book your flight to Dublin on our site, but could you please tell us how well you enjoyed our content? And did you like our new look and feel?”

“What people want most from their smartphones, tablets, home theater and home appliances is simplicity,” according to the Ketchum global study of 6,000 consumers published in May 2012.

“The most surprising finding in the study is the overwhelming desire for simplification,” said Esty Pujadas, partner and director of Ketchum’s Global Technology Practice. “It seems counter-intuitive when technology is always about being bigger or better or faster, but the data show that what people really want is to understand how all of these devices can get them to their desired experience easily. Manufacturers need to use less so-called jargon monoxide and communicate more about the human experience, not just about the object.”

Organization and professional ego often work against simplicity. Over the years I have heard very many senior managers say that they want their website to have the wow factor. Unfortunately, at a management level vanity sometimes trumps sanity. Designers are often beautiful people. They dress well and they want their websites and applications to be seen to be well-dressed.

Beauty is highly desirable but simplicity and usefulness are the overwhelming fashion of our age. Just because it’s beautiful does not mean it’s useful.

Global Study of 6,000 Consumers: 76% Left Wanting More from Personal Technology When It Comes to Simplifying Their Life

Is beautiful usable? What is the influence of beauty and usability on reactions to a product?

Commencement speeches are wasted on the young — everyone should watch them.

I love his bit about his life goals as a “mountain,” and his mission to do only work that would bring him closer to the mountain. Of course, we should all be so lucky to work only when jobs are adventurous and stop when they become work, but there are some wonderful nuggets of artistic wisdom throughout Gaiman’s speech.

The process of getting a great user experience job that you love isn’t as hard as you would think — you just have to tell your story.

The Jobvite UX Resume and Portfolio Bootcamp on June 19, 2012 in Burlingame, California covers all aspects of getting that UX job you love:

• Using social media to connect with great companies
• Presenting a great resume
• Crafting a portfolio that tells your story
• What to expect during an in person interview

Also covered are questions to ask and what to look for, so you can find the right culture for your skills and career.

As a bonus, we’ll be having a networking happy hour with recruiters from Jobvite customers who are hiring great user experience talent!

Speakers

Lynn Teo Chief Experience Officer, McCann Erickson

Patrick Neeman Director of User Experience, Jobvite

Dylan Campbell Partner, Highlander Solutions

More to come! If you’re interested in speaking or are a recruiter, send me an email.

Agenda

1:00 pm – 1:30 pm	Registration
1:30 pm – 2:00 pm	Welcome and Opening Remarks
2:00 pm – 2:45 pm	Resume Revamp: How to Stand Out from the Pack
2:45 pm – 3:30 pm	Work by Design: How to Find the Job You Love
3:30 pm – 3:45 pm	Break
3:45 pm – 4:30 pm	Portfolios Matter: Building the Portfolio to Win the Job
4:30 pm – 5:15 pm	Networking Works: Using Facebook, Twitter and LinkedIn for Jobs
5:15 pm – 7:00 pm	Happy Hour and Career Fair

Think you know how to use a paper towel? Think again. 

Low on motivation? Do something about it! 

 

Recently, I posted a tweet about conversion rates.

Conversion rate’s big crime is it focuses purely on pressing the purchase button, independent of the quality of the experience.

— Jared M. Spool (@jmspool) May 13, 2012

Immediately, I received several responses, all of them showing the common misunderstandings that people have about conversion rates.

The conversion rate has become a standard metric for many online businesses. I’ve seen clients watch it every day, looking at the variations they see and asking questions about why it changes (or doesn’t).

Unfortunately, conversion rate is probably one of the most dangerous and mis-used metrics available to site designers to measure how good their site is. They apply it as if it is telling them something and, worse, when they optimize for it, they can create a site that looks like crap and produces undesirable customers.

This is the first post in a series on using conversion rates, hopefully to clear up the common misunderstandings and help designers find better ways to measure their site’s success. In this episode, we’ll look at the basic nature of what a conversion rate is and why it’s such a crappy metric.

Avoid Ratios For Metrics

Conversion rate is a ratio. It’s the number of people who purchase (or sign up or whatever your “call to action” button does) divided by the number of visitors to the site or page. If you have a 15,000 people buy products out of the 1,000,000 people who visited your site, you’ll have a conversion rate of 1.5%.

Ratios are a problem because either the numerator (people who buy) or the denominator (people who visit) can change. Let’s say you still have 15,000 purchasers, but because of a “successful” marketing push, you end up bringing 2,000,000 visitors to the site. Now, you made the same amount of money from those 15,000 purchasers. But your conversion rate dropped to 0.75%.

Because it’s a ratio, you don’t have control over which side changes. The theory is that it should be uniform, but as we’ll see in other posts in this series, that rarely happens.

This means conversion rates often fluctuate for no discernible reason. It can be 1.5% one day, 0.75% the next, and 3.0% the next. This would just be a normal variation based on what’s happening with the visitors being attracted to the site. And this normal variation makes it hard to tell when something is broken or out of whack.

For any e-commerce site, I have the perfect advice on how to raise their conversion rate significantly. All they have to do is stop marketing. Once they stop marketing, the number of visitors will drop to only those who are already loyal customers.

Because those visitors are loyal, they are probably only coming to buy something. The ratio of purchasers to visitors will skyrocket. Sales will likely drop, but conversion will go sky-high.

Sounds great, right? That’s the other problem with the conversion rate ratio: it’s not at all related to the other business operations.

I have a little game I like to play with executives. I’ll put to doors on the screen. I’ll tell the execs that they can choose one door. Behind the first door is an increased conversion rate, but no increase in sales (in fact, a likely decrease). Behind the second door is a decreased conversion rate, but an increase in sales. Which would they like?

Every executive I’ve ever talked to has asked for the increased sales. My next question is then: Why focus on conversion rate then? That’s when I get that deer-in-headlights look, followed by a reduced focus on the conversion rate metric.

In the next installment, we’ll look at why not every visitor is someone you want as a customer.

 24 Weeks of Windows Phone Design Index

   Tweet

This blog post might not make justice to the depth and expertise that the discipline of Information Architecture deserves (although the definition of Information Architecture is still in flux) but I will make sure to add the right links to other websites that can take you much deeper into Information Architecture.

Demystifying IA

As deep as Information Architecture is however, it really is just a portion of a larger scope of activity called User Experience. Information Architecture is a means to an end. Information is not the user. The user is the user - a human. I’ve seen many websites or apps that sometimes seem to be primarily designed to please information itself - as if information or content was THE user. Take the typical approach of defining the ‘navigation menu’ for a content driven website. It is typical to see the navigation menu reflect the information structure available in the site, for example:

We’ve designed menus like these for years, but this is a completely anti-user view of the world. The website or app in this case is designed based on content types instead of designing it based on user needs. A user (in this case a ‘developer ‘) arrives to the website with a technical question about ‘how to set up data binding in a data grid control for a line of business application’. When the user gets to this site they know they have a need but the site is talking to them as if they knew where to search for their answer - should they go to Case Studies and hope to find how another development company solved a similar problem? Should they go to Tutorials and see if there’s an article that addresses this question? Should they go to Code Reference hoping some information is provided there? How about the Forums?

A different approach is to make the navigation menu based on a different metaphor that addresses users’ needs. If you start simplifying the sample menu I mentioned above you will perhaps find that the best result is just to substitute all those options for one single search box where users can write their need/question.

                  

While I might sound too extreme here, well, that’s actually what Google did - instead of having nested menus with tons of topics or categories like AOL or Compuserve did back in the day - Google said, let’s just give the user one simple input textbox so users type what they are looking for and voila! one of the cleanest UIs that turned into one of the most profitable and efficient user interface metaphors in the last decade. Still today the Google search page is considered a digital icon - just like the Fallingwater house from the Architect Frank Lloyd Wright in architecture or the Starry Night from Van Gogh in painting.

If you ask me, the Google.com site is a great example of how the Metro Principles would manifest on the web. There’s a lot of conversation going on right now about applying the Metro Principles to phone and tablets but a lot of people are also asking, how would Metro manifest in a website - look at Google.com. Fierce reduction of elements. Content, not Chrome (no pun intended J). Google.com has slowly been getting more elements (look at the top) but it still is quite clean.

The Google example is pretty radical (though real) and shows how Information Architecture doesn’t mean only information structure. The term Information Architecture tends to make it feel like users are not part of it (since the word ‘user’ is not included in ‘information architecture’) but users are actually the center of it. Some of today’s best and most recognized Information Architects like the folks at iA get this and while they love to give shape to information, all their projects have user as the center - Try the IA Writer app for iPad.

On October 15^th, 2008 Glenn Murphy, an Software Engineer in Google wrote a blog post titled Content, Not Chrome. It’s interesting to see how the browser ended up being named ‘Chrome’ though

In conclusion, IA is not only about “structuring content” but about crafting the axis, the foundation, the structure of your entire digital experience. Saying IA is critical for a digital experience is an understatement. Literally think of IA like the soul or spirit - the essence of the experience. And just like every spirit (that I know of… :)) it needs of a body to manifest in. This body is the app.  So there you go: IA is the spirit. The app is the body. They are so interconnected, so tightly integrated that you can’t think of them separately. They form THE experience.

IA is all about bringing order to chaos, to align the misaligned, to sequence the random, to parse the mix, to understand the complex.

What is Information Architecture?

The Information Architecture Institute defines Information Architecture as “the art and science of organizing and labeling websites, intranets, online communities and software to support usability“. The Guardian recently made this post about the definition of Information Architecture. Also, here is a really good video produced by Buuteeq on What is Information Architecture? to show their non-techie customers the value of Information Architecture. It’s a good video to understand IA in simple words.

The way I describe the activity of Information Architecture is bringing order to chaos, to align the misaligned, to sequence the random, to parse the mix, to understand the complex.

The goal of the Information Architecture (IA) stage is to define three things:

-  Information

-  User Tasks

-  Relations between Information & Tasks

That’s what the user has in a digital experience: 1) information and 2) the potential of doing something with this information - whether it’s consuming information to help take decisions and/or for generating new information.

Most of us will start creating a Windows Phone app for either A) a client B) an idea of our own (startup idea). In both cases when the project begins we will be exposed to shapeless and scary ‘blobs’ of information like names, dates, prices, images, temperature ranges, zip codes, phone numbers, avatar images, scores, in-app purchases, stocks, locations… in the Information Architecture stage you take that shapeless blob and deliver structured information. Doing it in single try is impossible. It needs many passes. If I think I’ve nailed it on the first pass I’m wrong - Only Zeus himself could do it in a single pass J But in all seriousness, force the IA to go through many passes whether you do it or you have others take a stab at it and provide feedback.

Tools to Define Information Architecture

We have three very useful tools that help us define our IA:

1.       IA Document

2.       Application Flow chart(s)

3.       Low Fidelity Prototypes

Something very important to consider here is that at this point we are not designing the user interface or the app itself. We are still working at the ‘essence’ or ‘spirit’ level J - so no need for us to over invest time in visual design, user interface or animation details. Right now we simply want to straighten out our blob of information, bring order to chaos.

IA Document

The IA document I usually create is quite simple although you could add as much detail as possible. The truth is in many cases this document grows to become the actual specs of the app. But in our case we will keep this document nice and short. Here is an example that shows how we have brought our now more orderly blob of information into a document that shows the main and primary hubs as well as the spokes.

Download the sample IA Document in Word format. 

 

App Flow Charts

Remember the good old flow charts for software engineering (or any other process)? That’s what app flow charts are, it’s just that the visual nomenclature we use is focused on user flow, experience and interaction design. I take the IA Document, with its early stab at the main and primary hubs and secondary hubs and spokes and transform it into a App Flow chart. Initially I add little visual information to each screen. Just enough to see the different modules connecting to other modules.

Then little by little I start adding more details to those screens for example I start adding some UI controls - only the critical ones that allow me to start telling user stories. Later I start turning some of these screens into abstract Pivots, Panoramas or Pages.

And so, little by little App Flow charts become more detailed going from simple task flows to screens that show an idea of content views and even navigation. I wouldn’t call high end fidelity App Flow charts wireframes but many people would. Low fidelity wireframes certainly.

Low Fidelity Prototypes

Once the IA Document and the App Flow chart are more solid, it is always a good idea to start working on paper prototypes. These can be helpful due to their low cost ($ and time-wise). A paper prototype is a paper version of your app - how fun is that! J You can put together one of these bad boys by simply sketching out the different screens of your app, or for a more refined paper prototype you can use wireframes of your app. Just like with an IA Document or an App Flow chart, Paper Prototypes also evolve little by little and go from low fidelity to higher fidelity. Notice I say “higher” and not “high” fidelity because I personally don’t think it’s worth producing a super refined, polished, high fidelity paper prototype. The idea of a paper prototype is *precisely* to keep it rough, quick and dirty. The good thing about a paper prototype is that it is something that you can actually place in front of an actual test user.  The IA Document and the App Flow chart are too abstract for mortals to go through J You and I sure… but for our dear user testers, a paper prototype is something they can actually use.

Please refer to the Paper Prototype section of the #3 Ideation and Concept post of this series for more information on how to create Paper Prototypes.

Now, it might seem, when I tell you that after the IA Document, comes the App Flow chart and afterwards comes the Paper Prototype, that I’m implying there are days or weeks or months in between these different stages/steps, but no J In fact we are probably talking about minutes or hours between IA Document to App Flow to Paper Prototype. That’s the whole point of this process - to make it quick and dirty.

At the end you will have a solid IA document with structured information, a solid set of App Flow chart(s) and even some low fidelity Prototypes.

Architecting Information (for a Windows Phone App)

As I mentioned before, I won’t make justice to the practice of Information Architecture in this post but the method I use to define the IA for a Windows Phone app is the following:

1. We capture the needs of the project. We work with our client and write down the different needs, requests, data types, questions, wishes, and even ponies and unicorns in post it notes.

Important

Write user tasks or needs in post it notes of the same color. Write information/data or content on post it notes on another color.

2. We host a creative analysis session with at least one person from engineering and one person from our creative team and we go through the post it notes, we explore, we best guess, we inquire, we question and we debate to define and understand what the client really needs (which might be different from what they think they need).

3. We add our own flavor. Based on this analysis we add our own post it notes with needs, questions and also ponies and unicorns.

4. Create logical groups of related items. Group things in a way that makes sense. Pair things up, group them, relate them and highlight cross over connections.

5. Define hierarchies and give order by capturing the general structure of the blob we are dealing with in an IA document.

6. Create an App Flow chart. Once the IA Document is at least a bit readable - transform it into an App Flow Chart. Notice our natural approach here will be to create a tree like structure but this is precisely where you can break the mold - you could approach your app structure in different ways, radial, layered, multidimensional, hub & spoke or others… however, talking about Windows Phone apps in particular, where the app structure is based on the Hub & Spoke model, it is best to from the beginning of this exercise define a Hub & Spoke structure to your information. A Hub & Spoke model would define a 1) Main Hub 2) Sub-Hubs or Spokes of top level 3) Spokes of secondary levels. Eventually these different hubs or spokes will end up manifesting as Panoramas, Pivots or Pages in Windows Phone but in this stage we are not yet looking into this. Notice I mentioned “eventually” J No need to get too concerned about Panoramas, Pivots or Pages during the first few passes.

Microsoft will not reject your app if you decide not to adopt or follow the Hub & Spoke navigation model - so feel free to explore other models if they make sense to your app. That said, the Hub & Spoke navigation model is arguably the best one and the one that will become the most familiar with users so it is better to use it.

7. We identify relations (or dependencies) between different branches in the structure and we capture them in the IA document or the App Flow Chart.

8. Put the IA Document and/or App Flow chart to the test by telling user stories against them. Look for showstoppers - gaps or excess tasks and/or content/information and/or relations between tasks and content that are blocking you from being able to tell a user story. Based on these run-throughs, refine your Document and/or Chart and test it again with the same and/or more user stories. Do this a few times until your structure reacts firmly to all the user stories you are trying to address with your app.

9. Create a Paper Prototype. After a few passes, it is good to transport the IA Document and/or App Flow Chart to a Paper Prototype. And from there you have 3 things to iterate on, IA Document, App Flow Chart and Paper Prototype. Test the Paper Prototype with user stories and refine it until it can stand the test of all the user stories you want to address in your app. The Paper Prototype is useful because it takes your IA to the next level and it starts feeling more real (even if just in paper). You might be able to capture other pieces of data with a Paper Prototype vs just using an App Flow Chart. Also note that a Paper Prototype is something you can actually put in the hands of a test user whereas the IA Document and the App Flow Chart might be too abstract for a non-techie user or simply someone outside of your team…

The process of defining the Information Architecture for your app is not a one shot or one pass type of activity. It requires of many passes and many tests to your IA Document, App Flow Chart and Paper Prototype. Also, a reminder that at this point we are not fully designing our UI so you do not need (and I would probably not recommend) to invest a lot of time making the screens look beautiful - that comes later. Right now we are just trying to bring order to chaos.

Conclusion

At the end you will have a solid IA Document and App Flow chart(s). Not sure I’d say Paper Prototypes are something that you end up with - I personally see those more for iteration and to refine your specs. Things you will throw away at the end. Everything that you learned with the Paper Prototype(s) will be reflected in the IA Document and the App Flow chart(s) anyway plus the Paper Prototypes can easily get really messy J

So with IA Document and App Flow chart(s) you are ready to go to the next step which is to really start nailing down your Pivots, Panoramas and Pages with more detail.

More Resources on Information Architecture

The Guardian - What is Information Architecture?

Information Architecture Wikipedia

Usability First - Information Architecture

Web Monkey - Information Architecture Tutorial

What is Information Architecture?

Complete Beginners Guide to Information Architecture

Information Architecture - A List Apart

Information Architecture 101- Techniques and Best Practices

Design Your Windows Phone Apps to Sell

Understanding Information Architecture Differently

Next Post | #7 Layout and Composition in Windows Phone. In the next post we will review a couple different techniques to compose and layout Windows Phone UIs. The first one is using the Windows Phone design grid and the second one is using lists.

In the early battle between Facebook vs. MySpace, Facebook dominated by offering a simple user interface to connect with friends. Backed by explosive success, Facebook has maintained a “we know best” attitude about design through continuous iterations. With the rise of Google+, Facebook has been pressured to address usability concerns expressed by its cynical, albeit deeply ingrained, user base.

We put Facebook to the test with a panel of five remote web testers in early August, 2011, and listened to them voice their frustrations aloud as they navigated the site performing several assigned tasks. Although Facebook has taken steps to address some of the usability concerns we exposed, issues still remain.

All testers came from UserTesting’s on-demand panel, had over 100 friends, spent over 30 minutes on Facebook every day, and were Americans between the ages of 20 and 40.

Photo privacy controls

Nine months ago, managing the privacy settings of a Facebook photo album was a nightmare. Users had two options:

The first was to click “Edit Photos” within the album. Our tests revealed this was far from intuitive. Users stated they were instead searching for a “lock icon” or an identifier next to the album. What’s more, the “Profile Pictures” album – the default album comprised of photos of a user – didn’t even have an “Edit Photos” option.

The second way to manage album privacy was to go to Privacy Settings → Customize Settings → Edit Album settings. The Privacy Settings page allowed users to set access for all “your photos, statuses, and posts;” however zero testers used default settings. The Edit Album link was buried in between larger buttons and other controls that were in bold font, which users struggled to find.

Privacy settings were not located in the right context when users needed to access them. One tester said it best: “The privacy settings can get really complicated… even if I’ve done one before, it’s been awhile, maybe I’ve forgotten or the way it’s done is changed.”

When Google+ launched, by contrast, it let users easily share each photo or post with whichever “circle” of choice.

Whether or not the release of Google+ was the catalyst or a coincidence, Facebook redesigned these pages in late August – just 3 weeks after our usability study. Users can now manage album privacy directly from their profile and change album privacy settings directly on their albums page. Further, users can set each status update or album its own privacy setting, inline with each post.

“Smart” friend lists

Google+’s circles were a direct response to Facebook privacy control woes, particularly managing friend lists. “Friend lists” are how you can organize your friends on Facebook. You can grant or limit access to friend lists you create to view albums, status updates, and availability in chat. Like circles, only you can see the labels of friend lists you create.

We asked users to enable only four of their best friends to see them online without instruction. To do this, they would have had to create a friend list, put these friends in the list, and then limit their availability in chat.

Easier to find

To create a friend list, users could formerly go to go to the Home page, click Friends in the left navigation column, then click Manage Friend List. If users accessed Friends from their profile, they must go to “Edit Friends.” One user did not assume the “Edit Friends” button would lead to a page to create and manage friend lists.

Friend lists are now easier to access on the left navigation bar under Friends.

…In the proper context

After completing the task users were still unsure about their success in creating a friend list. This was because the newly created list did not appear in the drop-down menu when selecting Custom privacy controls.

This has not changed. Furthermore – in chat – when users click “Limit Availability,” they can only see names of friend lists they have created, but are still unable to see who is in these lists or update them from here.

In September, Facebook created “smart lists” to automatically group close friends, family, coworkers, and schoolmates. For many users, these ‘smart lists’ are arbitrary, as sharing decisions are most often based on relationship comfort level –– not organizational ties.

Facebook chat

Coincidentally, our August study ran right after Facebook chat launched. We found that users were confused that friends appeared in their chat bar who were not online. One frustrated tester complained he could not feel certain that he could see all his online friends in the chat sidebar, since Facebook includes offline friends in the mix. When he realized he could not chat with friends who appeared in his chat list, he assumed that chat was broken.

Likewise, one woman was completely confused when she saw her daughter appear in the chat list, realizing this was impossible since she was standing there right next to her.

Users felt that some online friends were “missing” because they could not scroll up or down the list to make sure. Days after the launch, Facebook added a scrollbar. However, offline friends still appear in the list.

After the test, we asked users what features they wanted in chat (UserTesting provides customers four, written, follow-up questions after the video test). Five out of five users wanted the ability to be invisible in chat. The common reason was they did not want to be messaged by certain people at certain times. Interestingly, no one was interested in being “away” – one user commented that Facebook status updates have taken the place of “away messages” (of the AOL era) as an indication of our current state in life.

As there are likely millions of people who have Gmail open in one tab and Facebook in the other, Facebook could take note. (Facebook Chat is more comparable to Gchat than Google Hangouts, which has higher functionality for group chats.)

Where search meets social

Facebook identifies as a social discovery engine, not a search engine. However, as Facebook nears the one billion user mark, it’s become increasingly harder to find the right person, page, or app you’re looking for.

Users were asked to search for friends by current city and for statuses that contained the term “vacation.” Two users expected when they type something in search and press enter, they would go to the search results page. However, Facebook takes users to the first result that comes up. That would be like googling something and automatically being redirected to the first result.

As an example, when one user typed in “vacation” into the Search bar and pressing ENTER, he automatically arrived at the “Pet Society Vacation” app page.

We observed two users try to click the magnifying glass option in vain trying to perform an advanced search.

Little has changed with search since our original Facebook user study. To perform an advanced search, users must type in a term in the search bar, mouse down to “See more results,” then go to the left menu column to add more filters.

Our suggestion? When users hover over the search magnifying glass, offer a drop-down menu to do an advanced search. This aligns well with what we observed. Further, when you press “Enter” in Search, take users to a search results page. If the first result that shows up in the results preview is what the user wants, the user could click on it – or press the down arrow, then enter – on their keyboard.

Conclusion

To give Facebook credit, they have proven to know us better than we do ourselves. When Newsfeed launched in 2007, over one million people joined a Group protesting its existence, which ironically most discovered because of Newsfeed. Now it’s a staple of our existence. The Timeline was met with similar hesitation, yet users have begun to embrace it.

Move fast and break things is a great motto, but it just seems like when features of a very successful company lack usability – the general sentiment of the people is, “They don’t care about us.” Users in our original study expressed that Facebook made some things difficult on purpose as if they were being tricked for some ulterior motive. Facebook has since taken conciliatory steps to address the issues exposed in usability tests, but their reputation as a top-down all-knowing power prevails. If Facebook wants to win the battle with Google+, they should humble their design decisions down to the needs of the user.

MetaMatrix är klara med en EPiServer medlemswebb-release för FTF – Facket för försäkring och finans, hälsar VD Petter Schaffer.

Fokus var förbättrade möjligheter till interaktion för medlemmar och förtroendevalda.

Lokala fackklubbar ges möjligheten att utveckla egna sidor på den nya sajten. Det finns även en integration med förbundets medlemssystem, MySoft.

I en tid när både java- och .NET-CMS tycks erbjuda exakt samma funktionalitet, produktuppdateringar enligt roadmaps och tillhörande, trendbaserade plugins krävs något extra för att sticka ut.

Kanske är musklerna från Adobe som moderbolag inte fel då.

Adobes produktområde i fokus för i år sägs vara Digital Marketing. Och där är ”limmet” mellan produkterna ofta Days gamla CQ5 CMS-produkt.

I 2012-uppdateringen kallad CQ5.5 har så klart Adobes mest namnkunniga produkt, PhotoShop CS6, starkt kopplats in till CMS:et. Det ger en stark DAM-del av CMS:et och ett integrerat alterativ till de begränsade (tänk crop och storleksanpassning) inbyggda bildredigerarna i andra CMS. I CQ5.5 med inköpt tillhörande Adobe Bridge finns möjligheten att med ett högerklick i CMS öppna upp bilder i Photoshop, förändra dem, spara ned och omgående få in förändringarna uppladdade i CQ5.5.

Det är en funktion som blir svårare för SiteCore, Drupal och EPiServer att kopiera.

På Digital Summit i London avslöjades även att Adobde framöver kommer släppa uppdateringar som låter Photoshoppare skapa och i CMS spara ned personaliserade banners med grafiska element förändrade baserat på:

• Geografisk position (bakgrundsbild på Stockholm t ex) samt övrig tillgänglig demografisk data
• Personuppgifter lagrade via t ex nyhetsbrev (hälsa via namn direkt i bild)
• Andra CRM-uppgifter ihopkopplade med personuppgifterna

Och just det personaliserade är Adobes absoluta CMS-fokus. Bolaget har ju inte direkt gett sig in i den klassiska CMS-branschen. Liksom de flesta andra är det ”CXM” trenden Adobe vill prata om. Eller WEM, Web Experience Management, som de envisas med att kalla det.

Facebook och Twitter API har kopplats in i WEM genom ytterligare en i maj släppt ”produkt”, CQ 5,5 Social Communities. Redaktörer kan via en massa ifyllda fält i en dialogruta förändra vilket sportintresse från Facebook, som ”cykling”, som ska redovisa vilken bannerkampanj på egna sajten.

Det finns även en massa andra roller och personaliseringstyper, för att få överblick över alla dessa (samt även kompabilitetsfrågor som browser och surfenhet) har Adobe skapat en personasöverblick kallad Client Context. Den lägger sig som ett transparent lager i högerkant och vid klick redovisar olika typers upplevelse av sajten vid olika tillfällen. En god idé.

Adobes muskler kan bli ett problem för andra CMS-tillverkare. Ett annat förvärv som lett till ”killer-app” mobilwebb-demonstrationer är PhoneGap. Integrerat med CQ5.5 erbjuds nu imponerande integrationer av kamerafunktionalitet, utan att kod behöver skrivas.

test före och test efter