The availability and ease of implementing new technologies means that some websites are getting too fancy. The fanciness can interfere with the user's experience.
It's common for team members to suggest fancy features they see on other sites. But how do you evaluate them? By taking a hard look at the fancy and finding out if it's right for you.
3. FEATURE EXPLOSION
“I saw this [insert feature] on [insert website] and I think we
should use it on our site for [insert problem].”
4. WE GET IDEAS FROM OTHERS
When approaching web/product changes, we get cues from
implementations on other sites and applications.
5. HOW DO WE TALK ABOUT THIS?
Use well-documented UX paradigms to find solutions best
solve the problem and align with the strategy.
6. CONSIDER THE OVERALL STRATEGY
Objectives – Big Organizational Goal
Goals – Specific Measures
Strategy – Organizational and Digital
7. CONSIDER PROJECT KNOWLEDGE
• Define the problem & its effects
• Define the technological boundaries
• Define the budget limitations
• Understand the data
27. STRATEGY & PROJECT KNOWLEDGE
• Strategy focuses the
discussion on the big picture
• Core Project Knowledge
focuses the discussion on the
current project with its guard
rails
28. UX PARADIGMS – HELPFUL QUESTIONS
• Is there enough information for users to
complete their task?
•
•
•
32. WELL-REASONED DECISION
“That [insert feature] on [insert website] will work great for
us because we can solve [problem] which will help us
[strategy]. We know that users [paradigm] so it should work
well.”
33. RESOURCES
• The Hipper Element -
http://thehipperelement.com/
• UX Greatness –
http://commadot.com/ux-greatness-
part-1-of-3/
• 52 Weeks of UX –
http://52weeksofux.com/
• Don’t Make Me Think – Steve Krug
• UX Myths - http://uxmyths.com/
• UI Patterns - http://ui-patterns.com/
• UX Apprentice -
http://www.uxapprentice.com/
• UX Axioms -
http://www.uxaxioms.com/
• Principles of Interaction Design -
http://asktog.com/atc/principles-of-
interaction-design/
• Communicating Design – Dan
M. Brown
• Undercover User Experience
Design – Cennydd Bowles &
James Box
• Smashing Magazine –
uxdesign.smashingmagazine.com/
Hi, I’m KristiI’m a User Experience Architect & Strategist at Clockwork Active Media in Minneapolis. We are an interactive agency and work on a variety of projects.
As a UX person, I have a lot of face time with clients and am often presented with the following scenario:
How many of you have confronted this? (hopefully people raise their hands)This is for anyone in any role on a project.Devs, content people, PM, etc. Think of a situation where you’ve heard this from a co-worker, partner or client. In this scenario, we’re going to talk about a website, but it could apply to any interactive project. Most of the time, these suggestions are pretty fancy and that’s why they stuck out to the person who is asking. ----- Meeting Notes (4/11/14 15:44) -----
Trendy designs and experiences can be easy to implement.At the same time, our online interactions are becoming more complex.Technology can get in the way of helping users reach their goals and our projects can become too fancy.
Clients and partners often lead with a solution-first approach. Do your homework
How is the project positioned within the company’s strategic vision?What are the business goals for the project?What is the business’ digital strategy?How is the product positioned within the marketplace?
What is the core problem that needs to be solved?How does this issue currently affect users? What are the factors about the experience that cannot change?What are the technological or budget limitations?What does the current data set say about this problem? (E.g. Analytics, customer service data, anecdotes, etc.)
There are many theories, best practices and common sense ideas that can help you evaluate the effectiveness of a solution.
To help us think through some paradigms that you can apply to these situations, we’ll walk through some examples where I feel the implementation got too fancy. The reliance on fancy is actually impacting the user’s ability to use the site.
Your attention is all over the place. Lots of calls to action, with little visual differentiation between them. The ads overpower the actual content on the page.
LoS:Provide just enough information so the user can understand and have the ability to complete the goal.What is CNN’s intended goal? If it’s to click on the ads, they did a great job. But if it’s to get you to useful content, it’s too complex with too many calls to action. To make it simple:Communicate one core idea with each page/interfaceBe consistent – Don’t throw in unnecessary surprisesBe clear – Just enough detail, have one core idea to set expectationsUsers>Problem:My reaction to CNN is totally personal. I’m sure there are plenty of people who like the layout. That doesn’t actually make it bad and it’s the same with other features or aspects of your website. User Experience is personal. Avoid letting personal biases color decision-making.
Rather than a whole site –good to look at one small feature that could have an impact. Each image in the carousel links to a video. There are also indicators to click between slides. There are also arrows and a pause button. Too many points of navigation and it’s unclear what each really does. Clicking on the play icon plays the video in the carousel.
Law of Experience:Expect others to use their prior knowledge to inform their current experienceMy experience of other content rotators made the Mayo Clinic rotator extremely confusing. E.g., pagination in google search resultsClarity Above All:Users won’t take intended actions unless they are clear. If the intended action of the May rotator is to play the video, then they need to simplify the options for the user to make sure the intended action is clear. Users will ignore or be hesitant to use something they don’t understand.
Fitt’s LawThe time to acquire a target is a function of the distance and size of the target.The play button in the rotator is not as visible or attention-grabbing as the navigation items on the bottom right, even though the button is bigger. The quicker you can reach it, the more likely you will.But: Bigger is not always better. This equation is a curve, not a straight line. While a small object will benefit from a 20% increase, a larger object will not receive the same benefit. E.g., Giant submit buttons on forms might not perform better than something slightly smaller. Learnability vs. UsabilityAs a frequent user, you’d know where your favorites are. As an infrequent user, you might not. Usability can take precedence when the product is single-useLearnability can take precedence when the product is repeatedly used
Seeing this trend everywhere- even the NY TimesSlate implementation causes a lot of issues with scrolling on the right vs. the main content area.
Expose and Challenge AssumptionsAsk a lot of questions to solidify understanding.What is the best way to get users to scroll through content in these differing views?Pay Attention to PatternsUsers look for patterns to help them move quickly through an interface.Screenshot: Pattern of a shopping cart from a design patterns website.Image: http://ui-patterns.com/patterns/ShoppingCartInvest in the FutureSolve today’s problem with tomorrow’s solution.Ensure solutions are flexible and strategic.This mobile-first approach clearly designs for the future; but is it too much? E.g., Slate’s scrolling is problematic on a desktop view, while on mobile it works much better.
Gawker Implementation:The two icons at the top left do the same thing- social sharing.No actual menu to help navigate.On some pages, there are clearly more headlines on the left, but no way to scroll through them to read. The top banner sometimes obscures part of the left navigation.
Words Aren’t the EnemyClear and judicious labeling can make all the differenceRemoving labels and relying solely on iconography can be problematic, especially in other cultures.Slate example uses a menu without a label, while the Time example adds the word Menu to it. Recent usability studies that state the word Menu is much more usable when using one of these nav systemsImage: Gravity Forms plugin in WordpressMatch the Tool to the ProblemMake sure that the intended solution is inline with the original issue.
In this example, we see that time uses the Menu label and has consistent and clear menu options.As you go through the site, sub-navigation items are listed horizontally rather than in the left menu.No scrolling issues.
The data doesn’t lie (usually)We don’t know the analytics behind the Time site, but they probably faced issues with users navigating and browsing across multiple sections. These news sites should be designed with a browse mentatilty in mind, and browsing versus task is something you can see pretty clearly in your data. Make sure to look at any and all data you might have about a problem: web analytics, customer service records, contact us requests, anecdotes. Data, data, data. It is your friend. Screenshot: Visitor Flow in Google Analytics helps you understand clearly how people navigate through the site. Look for any loops where users are clearly clicking back to the homepage or other sections. Image: Visitor Flow in GAHiding Complexity Only increases ItIn the previous examples, a lot of the complexity of the site was hidden within the navigation menus. The Time example exposes some complexity on the page while simplifying the overall sidebar implementation. It is possible to get too simple. If features are hidden away
Anthropologie is a clothing retailer that has implemented an innovative gallery style on their site.Images are different sizes. After clicking into a product detail page and going back to the gallery, the images are in a different order. This means you lose your place as you’re trying to browse through a number of different products.
ConsistencyAnthropologie’s gallery is inconsistent when it comes to the interactions. It’s not quite clear what will happen when you go back to browse.Consistent UI allows users to feel comfortable and anticipate what is next.E.g., If a site has multiple vehicles for search, search options and results should be consistent across all search types. Always Allow UndoAnthropologie allows users to switch to a “normal” gallery view if they dislike the default view.Users are more comfortable taking risks when the know their choices are not permanent. about making them. Screenshot: View/Edit/Delete design pattern. Always allow a user to undo or change the decision they made so they don’t have to be scared to make them.
Details Always MatterIf the Design is Good, the Details Don’t MatterThe details always matter. It’s the discrete interactions that frustrate users. Steve Krug: “We don’t make optimal choices. We satisfice.” – We choose the first reasonable optionUsers Don’t Always Know What They WantIt’s difficult for most people to articulate what they really want. Your users are no different. You are a guide to the best experience, not the dictator..
So, our scenario is how to understand when a fancy implementation might work for your site.
The idea is to think through all aspects of the solution – starting with the big picture and working to a more narrow focus.
Instead of trying to remember each individual paradigm, think about the questions you could ask to arrive at the same decision or thought process. These are the questions listed earlier in the presentation under each paradigm.
Hopefully at the end of this process, you can get to a statement like this.
