It's Too Fancy! Back to Basics User Experience


Published on

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.

Published in: Design, Technology
1 Comment
  • great post was just searching for a post like that thanx for sharing :)

    Toronto Airport Taxi
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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: 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.
  • It's Too Fancy! Back to Basics User Experience

    1. Kristi McKinney Clockwork Active Media IT’S TOO FANCY! Back to Basics User Experience MinneWebCon | April 14th 2014
    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
    8. WHICH PARADIGMS? GOOD QUESTION! There is no definitive list of UX Paradigms.
    10. CNN: Busy News
    11. CNN Business News Useful Paradigms • The Law of Simplicity – • Users > Problem –
    12. Mayo Clinic: Sneaky Rotator
    13. Mayo Clinic: Sneaky Rotator Useful Paradigms • The Law of Experience – • Clarity Above All –
    14. Mayo Clinic: Sneaky Rotator Useful Paradigms • Fitts’ Law – • Learnability vs. Usability –
    15. Slate, Gawker Media & Time: Mobile for Desktop
    16. Slate: Mobile for Desktop Useful Paradigms • Expose and Challenge Assumptions – • Pay Attention to Patterns – • Invest in the Future –
    17. Gawker Media Group: Mobile for Desktop
    18. Gawker Media Group: Mobile for Desktop Useful Paradigms • Words Aren’t the Enemy – • Match the Tool to the Problem –
    19. Time Magazine: Mobile for Desktop
    20. Time Magazine: Mobile for Desktop Useful Paradigms • The Data Doesn’t Lie (usually) – • Hiding Complexity Increases It –
    21. Anthropologie: Changing Galleries
    22. Anthropologie: Changing Galleries Useful Paradigms • Consistency – • Always Allow Undo –
    23. • Details Always Matter – • Users Don’t Know What They Want – Anthropologie Useful Paradigms
    24. IN REVIEW
    25. FOCUS ON USERS “I saw this [insert feature] on [insert website] and I think we should use it on our site for [insert problem].”
    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 - • UX Greatness – part-1-of-3/ • 52 Weeks of UX – • Don’t Make Me Think – Steve Krug • UX Myths - • UI Patterns - • UX Apprentice - • UX Axioms - • Principles of Interaction Design - interaction-design/ • Communicating Design – Dan M. Brown • Undercover User Experience Design – Cennydd Bowles & James Box • Smashing Magazine –
    34. Thank You. Follow me @kitalooclef MinneWebCon | April 14th 2014