SlideShare a Scribd company logo
1 of 34
Download to read offline
Kristi McKinney
Clockwork Active Media
IT’S TOO FANCY!
Back to Basics User
Experience
MinneWebCon | April 14th 2014
THE SCENARIO
FEATURE EXPLOSION
“I saw this [insert feature] on [insert website] and I think we
should use it on our site for [insert problem].”
WE GET IDEAS FROM OTHERS
When approaching web/product changes, we get cues from
implementations on other sites and applications.
HOW DO WE TALK ABOUT THIS?
Use well-documented UX paradigms to find solutions best
solve the problem and align with the strategy.
CONSIDER THE OVERALL STRATEGY
Objectives – Big Organizational Goal
Goals – Specific Measures
Strategy – Organizational and Digital
CONSIDER PROJECT KNOWLEDGE
• Define the problem & its effects
• Define the technological boundaries
• Define the budget limitations
• Understand the data
WHICH PARADIGMS?
GOOD QUESTION!
There is no definitive list of UX Paradigms.
APPLYING PARADIGMS
CNN: Busy News
CNN Business News
Useful Paradigms
• The Law of Simplicity
–
• Users > Problem
–
Mayo Clinic: Sneaky Rotator
Mayo Clinic: Sneaky Rotator
Useful Paradigms
• The Law of Experience
–
• Clarity Above All
–
Mayo Clinic: Sneaky Rotator
Useful Paradigms
• Fitts’ Law
–
• Learnability vs. Usability
–
Slate, Gawker Media & Time: Mobile for Desktop
Slate: Mobile for Desktop
Useful Paradigms
• Expose and Challenge
Assumptions
–
• Pay Attention to Patterns
–
• Invest in the Future
–
Gawker Media Group: Mobile for Desktop
Gawker Media Group: Mobile for Desktop
Useful Paradigms
• Words Aren’t the Enemy
–
• Match the Tool to the
Problem
–
Time Magazine: Mobile for Desktop
Time Magazine: Mobile for Desktop
Useful Paradigms
• The Data Doesn’t
Lie (usually)
–
• Hiding Complexity
Increases It
–
Anthropologie: Changing Galleries
Anthropologie: Changing Galleries
Useful Paradigms
• Consistency
–
• Always Allow Undo
–
• Details Always Matter
–
• Users Don’t Know What
They Want
–
Anthropologie
Useful Paradigms
IN REVIEW
FOCUS ON USERS
“I saw this [insert
feature] on [insert
website] and I think
we should use it on
our site for [insert
problem].”
RECIPE FOR SUCCESSFUL SOLUTIONS
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
UX PARADIGMS – HELPFUL QUESTIONS
• Is there enough information for users to
complete their task?
•
•
•
UX PARADIGMS – HELPFUL QUESTIONS
•
•
•
•
•
UX PARADIGMS – HELPFUL QUESTIONS
•
•
•
•
UX PARADIGMS – HELPFUL QUESTIONS
•
•
•
•
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.”
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/
Thank You.
Follow me @kitalooclef
MinneWebCon | April 14th 2014

More Related Content

Recently uploaded

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Recently uploaded (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

It's Too Fancy! Back to Basics User Experience

Editor's Notes

  1. 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.
  2. As a UX person, I have a lot of face time with clients and am often presented with the following scenario:
  3. 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) -----
  4. 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.
  5. Clients and partners often lead with a solution-first approach. Do your homework
  6. 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?
  7. 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.)
  8. There are many theories, best practices and common sense ideas that can help you evaluate the effectiveness of a solution.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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
  15. Seeing this trend everywhere- even the NY TimesSlate implementation causes a lot of issues with scrolling on the right vs. the main content area.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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
  21. 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.
  22. 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.
  23. 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..
  24. So, our scenario is how to understand when a fancy implementation might work for your site.
  25. The idea is to think through all aspects of the solution – starting with the big picture and working to a more narrow focus.
  26. 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.
  27. Hopefully at the end of this process, you can get to a statement like this.