Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 24 2012

13:30

Breaking Out of the UX Status Quo

As a UX Designer you’ve committed your career to helping people. You challenge the status quo everyday…but are you challenging it enough? How about with your deliverables? Your customers are people, too! Are your common deliverables – personas, sitemaps, user-flows and wireframes – really usable or are they just getting in the way?

It’s no secret to us: user experience designers speak their own language. From personas to user journeys, card sorts to wireframes, there’s a certain vernacular to our profession. It’s something that we learn over the years but that our clientele must overcome immediately.

Frustrated with the conventional deliverables used to communicate our work, I began to reconsider their presentation. What resulted is certainly not “conventional,” but – taken together – they are arguably more usable.

Personas are like resumés

Personas come in all shapes and sizes. Contrary to what they’re designed to do, however, rarely do they convey a good sense of the user. Most look like resumés: sterile and lacking in personality.

When was the last time you hired someone based on their resumé alone? Even with a resumé you still need to conduct an interview in order effectively gauge a prospect. Seeing someone and listening to their words reveals their personality – the key element missing from most personas.

So I started a searching for a better way. The first thing I did was move my deliverables online. This allowed me to link them together so that clients could click between them. For desktop projects I use Axure and for mobile and tablet I use Proto.io. Both of them are great tools as they create clickable, HTML-based output.

Next, I searched high and low for inspiration. This persona, created by User Insight, is definitely different. Therein, the user (Tina) does not consist of mere bullet points; she comes off as a real person. Jason Travis’s personas are infinitely more visual. Being picture-based, though, they lack any descriptive text whatsoever.

Inspired by these (plus adding my ideas and style) I tried to put together a new version of the traditional persona.

Barnabas's persona

You can view a demo here.

This approach paints a much more holistic picture of a person. Not only does it include their goals, it includes important, ancillary information such as their worldview, what they are looking for and their motivation. Further, the overheard conversation adds just the right amount of insight into his/her life. The “questions” section helps identify the areas the target user is unsure of and the “life pieces” section makes the persona human-like with feelings and desires.

Sitemaps are like spiderwebs

Sitemaps are (as most of you know) used to “map” the major components of a website to a rather sparse-looking diagram. Because they’re so sparse, they also tend leave a lot to the imagination. This gives rise to common retort: “What’s this page do, again?” “Can you change this page to that?” “How about we scrap that page”

You know the routine. Because clients come to us for the visual thinking they often can’t turn these sparse diagrams into anything “useful” on their own.

This got me thinking: why not just put the thinking alongside the map?

Barnabas's persona

You can view a demo here.

Even though it’s just a small difference, this approach pays off. It helps our clients understand the internal monologue that drives the narrative. Knowing the reasoning behind your decisions helps others understand (and agree) with your perspective.

User journeys are like electric panel diagrams

User journeys map the steps of a user, correlating goals (explained in Personas) with a site map to better illustrate how users will get things done. As a result, designers can make informed suggestions to the site’s information architecture.

The problem is that most user-flows are very dry. It is difficult to feel empathy with a user and their journey if all you see are boxes and arrows (similar to electric panel diagrams).

After scouring the internet looking for something better I found a couple of good approaches.

Jakub Linowski's user flow

Jakub Linowski’s Grand Narratives & Play Points diagram offers a compelling yet easy-to–understand presentation based on wireframes.

A user journey from the Bluepoint+ deliverable framework

Blueprint+ (Service Design Visual) is great because it includes the persona and a timeline.

Carlos Abler's user journey

Carlos Abler’s Multiuser WireFlows combines the two former ideas.

All of these are good but they all seemed to be missing something.

I’ve been always fan of recycling, so I thought there has to be a way to re-use the sitemap and display the user-flow on it. I also wanted to re-use my personas in order to create empathy for the user’s journey. This led me to the following presentation:

Barnabas Nagy's user flow

You can also view a demo here.

As you can see, I simply re-used my sitemap and added one of my persona with speech bubbles. In the speech bubbles I added the thoughts of the persona at every stage of their journey. This adds a human touch. The thoughts of the persona can explain to clients the reasons for the journey taken and the scenario puts these thoughts into context. It is simple but visually understandable way to show your user-flow.

Clients that already understand your sitemaps and personas will have no trouble seeing the two work together.

Prototypes/wireframes are like abandoned houses

Wireframes created in the absence of personas are broken. Yet we do this all the time. Why do we create personas if we don’t use them?

Looking for a better way, I saw a picture in the essay of Rósa Gudjónsdóttir:

A man working next to two cardboard cutouts of personas.

I was fascinated by the idea of having my personas around me. I started to print my personas and stick them to the wall in front of me. It helped, however, the screen and the wall are two different worlds, analog and digital. No good.

I eventually placed my personas in the margin of my prototype to serve as a constant reminder of who my users are:

A wireframe juxtaposed with persona avatars.

You can also view a demo here.

Not only does this help us to not design for ourselves, our clients and stakeholders are now constantly reminded who will use our design. The time and effort we put into establishing our personas is never lost.

Never stop learning

As I mentioned earlier, these ideas have helped me better convey my work to my clientele. They are not perfect, of course, nor were they intended to be. I am certain that it is possible to tweak them or in fact come up with even better presentations that work for you.

Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward. If you’ve tried your hand at something different, be sure to share your result in the comments below!


April 06 2012

11:00

Guide to User Flow – The “Foolishly Ignored” Backbone of Website Design

User Experience, Responsive Web Design and similar terms have made such a serious impact on the lives of web designers that they have almost forgotten the core of website design – User Flow. I hope that we, the web designers, remember that website design is not just about “how it looks” but also about “how it works”! It is easy to get sentimental with your passion – website design – which forces you to jump right into the website design phase without considering the end user expectations. Website designers concentrate so much on the information architecture of a website that they tend to forget the user flows that are the basis of all conversions benefiting the website. We can either give up on end user just for the look (and all other silly adjectives) of our website or start giving priority to User Flows in order to increase the returns from the website.

So, once you have made up your mind that you will break the shackles of information architecture, aesthetic looks, user experience, responsive design and other silly terms then you can start reading further. It is time to design user flows.

Know Your Goal!

Oh please! Can we have a new sub-heading?

Actually, I know that “Know Your Goal” thing is an obvious subheading to start with but it fits well in this scenario. See, you cannot start designing user flows unless you know what you are going to design for. This is when it becomes important for designers to sit with their client and understand the basic purpose of the overall design. Are they looking for sales or are they looking for a page which they can get the visitors to sign up for their email list?

See, web designers must understand that the questions mentioned below aren’t the reason why you are designing a website:

  • Do you like the new design?
  • How is the new layout?
  • What do you think of the latest UI improvements? Are they impressive?

Clients might target positive answers to these questions but sooner or later they will understand that their positive reactions are good for nothing. At the end of the day conversions matter for any website and if the new design isn’t bringing in conversions (in whatever beneficial format) then the newness of the website is worthless.

Henceforth, next time when you have a website design project, think of the user flow which is going to benefit the overall design. Two major pointers that will help you keep a check on actual user flow and how to design for them are:

  • The business purpose of the website – These will decide the respective action that you will want the website visitor to take in order to help the client achieve the business purpose.
  • The user’s objectives – This is more like for-the-user tactic where the user flow is all about the user. Here the purpose of designer is to understand what exactly will the user look for from the website, their desires and their needs? At the end of the day it is all about satisfying these desires of the end-user.

Your User Is Your Goal. Explore Them!

We are discussing the importance of User Flow for a website henceforth it has to be the user who will make or break the website. The job of the website designer is to understand the users and their requirements. One needs to start with a detailed study of every possible website requirement and the kind of final product that the client is expecting. Some of the example user objectives to get you started are:

  • Finding specific content.
  • Buying a product.
  • Buying a gift for someone (which is different from buying a product for yourself).

Now, the hidden business objectives for which clients would want to launch a website that covers such user based requirements will be:

  • Increase subscriber base.
  • Sell specific product.
  • Earn leads.
  • Get the product promoted on social networking sites with the help of user only.
  • Create a database of contact details.

A website designer who clearly understands the requirement of both parties (user and end client) will have a sure advantage over those designers who aren’t putting importance on user flow.

Define the Start and End of Your User Flow

User Flow is a state diagram of sorts which defines the path that the user will follow when it visits a particular website. We must understand the initial point from where the user starts and where their should end. It is these two points between which the website designer will have to carve his own space that will give the requisite comfort to the user.

Typical mediums via which a user can enter your website are:

  • Subscriber Emails – Users can come from a newsletter email that is sent to them.
  • Social Media – Users can use your links in the social media world to land on your website.
  • Paid Advertising – Google AdWords campaigns and other similar paid advertising methods are an important way to guide users to your website.
  • Organic Search Queries – Google Traffic (which results from organic search queries on Google) is an important source for website traffic.
  • Referral Links or Press Publications - Users can come to your website via various blogs ( and other similar sources) that are talking about you.

Important Questions to Consider

When designing User Flow it is important to understand that detailed analysis of the requirements is a must. In order to get a clear picture of what users will be looking for, web designers must conduct in-depth interviews of their customers. Look, anybody can collect information that is nothing but speculation, but that is not how a website user flow is designed. Making stuff up as you go will take you nowhere.

So, take a printout of the following questions and add a few more from of your own. Then start answering each of them in as much detail as possible:

  • What unique features of your website or product are most appealing to the end-user?
  • Which kind of user would want to use these features?
  • Why would they want to use these features?
  • Are there any other desires that these users have?
  • What sort of problems are they facing in fulfilling these desires?
  • What kind of questions do they have about your website or product?
  • What are their hesitations?
  • What kind of information will they want if they plan to take any action?
  • How can you touch the user emotionally so as to make them perform the desired action?

Present Crystal Clear Information

I have always preached about being “Crystal Clear”. No matter what we are up to, we must understand the importance of Crystal Clear Information. I agree that most of us are here to earn a fortune and we are all very much determined to do anything that will help us reach that goal, but this should not mean that we start deceiving the end user just for a few extra dollars.

The purpose of User Flow is to fill in the gaps that are left while designing a website. This is done by following a detailed User Flow which covers every small pointer that concerns the user. See, the goal of a website designer is to shape the thought process of the user in a manner that they are determined to perform the action for which the website was designed. It is about optimizing every step which the user will perform in order to sell your product. Below pointers will help you shape the thought process of the user:

  • Every step (or webpage) that the users visits must present a very clear picture of what the whole setup is about and how it will benefit the user if they perform the next action.
  • Give the user detailed information and give them the offer to grab extra benefits if they perform the desired action. Also, make sure that these benefits are worth the user’s time.
  • The information presented must be easy to digest and the user should not feel like they might just get tricked.
  • Minimize the amount of friction that users face while moving forward. Look, if you ask for extra information from the user then it might just act as a turn off and they might hop to another window. Get the picture? Don’t ask users to perform actions that are of no benefit to either side.
  • Present very clear approaches to next steps so that users aren’t confused of what needs to be done.

Further Reading

User Flow is a science in itself and it cannot be mastered after reading just a couple of guides. It is a time-consuming process and requires web designer’s diligence to reap positive results. Below, we present you with more guides that can help you approach User Flow in a smarter fashions:

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...