Understanding a User Experience - Through User Interface Patterns

[Damon Sanchez]

In a previous conversation thread we talked about driving user adoption through the creation of User Personas and how to identify what type of personas might be needed.  The idea that the larger the group of people/users contained in a particular User Persona Group causes it to be more of a Macro User Persona, while the more specific a User Persona gets to an actual individual we have a Micro User Persona. 

One of the goals of the UX practitioner is to know when to use a Macro Group or Micro Persona and when to land someplace in between.

Micro and Macro User Personas Range

Let's say for example that we are rolling out a new O365 SharePoint site for Human Resources and we've done some User Research Studies and we've found.

• 90% of the user base thinks the search box of Google is really easy to use
• 80% of the user base thinks the search box in O365 OneDrive is easy to use
• 60% of the user base is under the age of 45
• 70% of the user base are in Sales and are mobile
• 60% of the user base are using the intranet for under 10min a day.

The Stakeholder Interviews unearthed some interesting feelings:

• The first stakeholder expresses that "People can't find anything... we need the searching and finding to work better" 
• The second stakeholder expresses that "I just want the interface to be simple and easy to use"
• The third stakeholder expressed that "Our old/current site is really hard to update content"

Once we have the right calibration of understanding it opens up our ability to see a User's Needs.

If we take the combination of what we know from the example survey data above and stakeholder interviews can we can pick and choose what User Interface Patterns will produce the best results.

First let's take a step back, and talk about User Interface Patterns.... So, what the heck is a User Interface Pattern and why do we need them?

The best explanation of what a UI Pattern is and most relevant for this thread is a bundle of form elements that perform a specific action and fulfill a need.  Look in the top right corner of this page... see the Search Box, heart, bell, mail and profile pic? 

That's a UI Pattern, and it has been put in the top right-hand corner of the Tech Community site to fulfill the needs of Searching, Sharing, and Profile information.  If you can imagine the UI Pattern on the Tech Community site has the Top Right Search UI Pattern.  If we look are the Search UI Pattern of O365 it is in the top left hand of the site.  

These two visual examples are to help show how even though Search is being addressed inside the User Interface of these sites that they are different UI Patterns and have an overall effect on the User's Experience.  A top right Search Pattern is for experiences in which users are on a site longer, the top left is for speed and efficiency in which a user only has limited time.

In the case of the example data we collected from the User Research and Stakeholder Interviews we need the Search Box UI Pattern to act like and be positioned on the page like Google's search box or O365 because this is what the data expresses.

When we look at that process of gathering User Personas or User Definition Data and harnessing that information to plan out a User Interface by choosing the correct User Interface Patterns to fulfill needs, User Adoption really starts to make sense because we can see the friction of interaction contained in UI.

Here are other popular User Interface Patterns to think about when solving the Problems in UI

 Popular User Interface patterns

Would love to hear from others in the community on User Adoption, User Interface Patterns and Personas.

[#2]

I'm not a UX designer. But I found your explanation helpful. I need to use the results from interviews to develop Personas, not just to select tech and deliver training. I should also be using results to guide what web parts should be added to a team site. It might be more important to one team to show recent file activity before conversation in an embedded Yammer group. To use your example, another team might want search displayed first. Thanks for reminding me that developing Personas are a powerful tool in choosing the elements on a page.

[#3]

@Darrell Websteryou're right, User Personas are a very powerful tool for choosing the correct UI Patterns inside an User Interface.  UI Patterns are really interesting because they also help to break down the amount of Cognitive Processing involved in an Interface.  The higher the cognitive processing the more involved an Interface becomes.  Thanks for the LIKE. :) 

[#4]

Hi @Damon Sanchez,

Thanks for sharing your UX experience with us!

Have you seen instances where such type of UX Stakeholder Interviews were conducted to define work scenarios across multiple tools (not only a Sharepoint site, but across Office 365 tools) ?

For example, can conduct such type of interview help define "How to best run a meeting" for different personas using multiple tools (OneNote for meeting notes, Outlook to schedule the meeting, Skype for Business to run the meeting ...)

If it is the case, do you have advices on what are the best questions to ask when conducting those interviews ?

Thanks a lot !

[#5]

@Pierrick Barreau  Yes, absolutely there are very successful ways to conduct stakeholder interviews that will help to ascertain the User Centered Information you need.

A User Journey Map is a wonderful tool for helping to visualize this conversation with Stakeholders or expressing the interactions of User Personas. 

In the case of O365, because Microsoft has woven the tools together already, the strategic UX idea would be to focus less on the technology and implementation more so on the Business Objectives and the User's Needs.

Here are some really quick example questions.  Notice the questions are more abstract with the intent that we ask behavioral questions to unearth functionality, but also in doing so ask how the user feels.

• Currently how do you find documents?
  • are you happy with this?
  • how would you like to see it changed?
    
    
• If you have a problem, who do you contact?
  • if you don't know a person's information, how do you get it?
    
    
• Currently If you're in a meeting, how do you take notes?
  • are you happy with this?
  • how would you like to see it changed?

Depending on how closely the Micro or Marco Personas overlap the more assumptions can be made that the User Journey Map created around those Personas will or will not fit across an organization.

Once these objectives and needs are clearly defined the technology can easily in most cases be inserted into the Journey where it serves a purpose.

[#6]

Thanks for the perspective @Damon Sanchez !

The User Journey Map seems indeed to be an interesting tool for user interviews in order to capture their existing experience with the collaborative tools and then brainstorm how we could improve that experience making it more compelling (emotion) or more efficient (rationnal).

Any interesting reading you'd recommend to get more sense of the methodology to draft a User Journey Map live with an end-user ?

The example questions are a good start in any case !

Thanks for the share.

[#7]

The User Journey Map reminds me of Value Stream Mapping or Spaghetti Maps we did as part of process improvement studies (Six Sigma or Lean Sigma) in healthcare technology. We also held stakeholder interviews, presented use cases and created personas. These were key for driving adoption within healthcare. As you can imagine, personas (roles) use technology differently across healthcare and stakeholders have varying opinions about how technology impacts their workflow (even thoughtflow - as we learned to map it out). Thus, it was to our advantage to interview, time, document, study as many departments, use cases, stakeholders, roles and personas prior to making our recommendations on process improvement within technology.

Perhaps you will find this wiki article helpful. I would also encourage you to search on terms related to Six Sigma Thought Process Map or Spaghetti Diagram.