$30 off During Our Annual Pro Sale. View Details »

Why #littlebigdetails Matter and What You Should Do About Them

Why #littlebigdetails Matter and What You Should Do About Them

The audience, structure and often the design of university websites are 90% the same (for the most part). Although your website is probably not the sole reason students enroll, it can be a detractor. The difference between a regular site and a rememberable one is the #littlebigdetails. A lot of time is spent on the “big details” of a website, like the centerpiece image, and things that everyone expects, frankly the easy decisions. The harder, but more memorable, are the little details that make a big difference in your user's experience. Learn why these details make such a large impact and how to take a step back to discover how to add a little joy to your user experience. #psuweb13

Nick DeNardis

June 07, 2013
Tweet

More Decks by Nick DeNardis

Other Decks in Design

Transcript

  1. @nickdenardis #psuweb13
    #littlebigdetails
    What and why they matter.

    View Slide

  2. @nickdenardis #psuweb13
    @nickdenardis

    View Slide

  3. @nickdenardis #psuweb13
    Associate Director of Web Communications
    Wayne State University
    wayne.edu
    Host of EDU Checkup
    educheckup.com
    Curator of EDU Snippits
    edusnippits.com
    Nick DeNardis

    View Slide

  4. @nickdenardis #psuweb13
    Same. Same. Same.
    Higher Education Websites

    View Slide

  5. @nickdenardis #psuweb13
    Name
    Search
    Girls under trees
    Navigation
    Promotion
    News Events

    View Slide

  6. @nickdenardis #psuweb13
    Name
    Search
    Girls under trees
    Navigation
    Promotion
    News Events

    View Slide

  7. @nickdenardis #psuweb13
    Name
    Search
    Girls under trees
    Navigation
    Promotion
    News Events
    Impact statement

    View Slide

  8. @nickdenardis #psuweb13
    Outliers

    View Slide

  9. @nickdenardis #psuweb13
    nd.edu

    View Slide

  10. @nickdenardis #psuweb13
    georgetown.edu

    View Slide

  11. @nickdenardis #psuweb13
    drew.edu

    View Slide

  12. @nickdenardis #psuweb13
    Programs
    Admissions
    Apply
    Financial Aid
    Class Schedule

    View Slide

  13. @nickdenardis #psuweb13
    You are your website
    Intrigue your visitors, don’t put them o.

    View Slide

  14. @nickdenardis #psuweb13
    Source: Noel-Levitz
    Impression of your website

    View Slide

  15. @nickdenardis #psuweb13
    Customizing your site is hard
    (especially in highered)

    View Slide

  16. @nickdenardis #psuweb13
    Highered suers from
    • Lack of ‘product’ champions
    • Limited time/budget
    • CMS’s...
    • Decentralization/Centralization struggle
    • RFP/Committee fatigue
    • Innovation paralysis

    View Slide

  17. @nickdenardis #psuweb13
    “Not all of us can do great
    things. But we can do small
    things with great love.”
    ~ Mother Teresa

    View Slide

  18. @nickdenardis #psuweb13
    Everything Matters

    View Slide

  19. @nickdenardis #psuweb13
    Details
    (medium sized ones)

    View Slide

  20. @nickdenardis #psuweb13
    Auto Correct

    View Slide

  21. @nickdenardis #psuweb13
    Nifty interfaces
    umd.edu

    View Slide

  22. @nickdenardis #psuweb13
    Little Details

    View Slide

  23. @nickdenardis #psuweb13
    earlham.edu

    View Slide

  24. @nickdenardis #psuweb13
    admission.universityofcalifornia.edu

    View Slide

  25. @nickdenardis #psuweb13
    twitter.com

    View Slide

  26. @nickdenardis #psuweb13

    View Slide

  27. @nickdenardis #psuweb13
    Little Big Details

    View Slide

  28. @nickdenardis #psuweb13
    So what are they?
    Not apparent
    Useful to the user
    Solves a problem
    “Hey, did you know..”?

    View Slide

  29. @nickdenardis #psuweb13
    Pure Utility

    View Slide

  30. @nickdenardis #psuweb13
    basecamp.com

    View Slide

  31. @nickdenardis #psuweb13

    View Slide

  32. @nickdenardis #psuweb13
    siu.edu

    View Slide

  33. @nickdenardis #psuweb13
    Justifying the time

    View Slide

  34. @nickdenardis #psuweb13
    GA Event Tracking
    _trackEvent(category, action, opt_label,
    opt_value, opt_noninteraction)
    _trackEvent(‘littlebigdetail’, ‘moved-
    click’, ‘Future Students’)

    View Slide

  35. @nickdenardis #psuweb13

    View Slide

  36. @nickdenardis #psuweb13
    Added Value

    View Slide

  37. @nickdenardis #psuweb13
    reddit.com

    View Slide

  38. @nickdenardis #psuweb13

    View Slide

  39. @nickdenardis #psuweb13

    View Slide

  40. @nickdenardis #psuweb13

    View Slide

  41. @nickdenardis #psuweb13
    oc.edu/admissions/undergraduate/

    View Slide

  42. @nickdenardis #psuweb13
    oc.edu/admissions/undergraduate/

    View Slide

  43. @nickdenardis #psuweb13
    vfs.com

    View Slide

  44. @nickdenardis #psuweb13
    givingto.msu.edu

    View Slide

  45. @nickdenardis #psuweb13
    Hidden Feature

    View Slide

  46. @nickdenardis #psuweb13
    snhu.edu
    http://j.mp/11JHfxW

    View Slide

  47. @nickdenardis #psuweb13
    soundcloud.com

    View Slide

  48. @nickdenardis #psuweb13
    lafayette.edu

    View Slide

  49. @nickdenardis #psuweb13
    Creating a #littlebigdetail

    View Slide

  50. @nickdenardis #psuweb13
    Rules
    Your website must work first
    No A/B test you can use
    Won’t get you an award
    Put a smile on someone’s face

    View Slide

  51. @nickdenardis #psuweb13
    Step 1:
    Eat your own dog food

    View Slide

  52. @nickdenardis #psuweb13

    View Slide

  53. @nickdenardis #psuweb13

    View Slide

  54. @nickdenardis #psuweb13
    Step 2:
    Watch users and find patterns

    View Slide

  55. @nickdenardis #psuweb13

    View Slide

  56. @nickdenardis #psuweb13

    View Slide

  57. @nickdenardis #psuweb13

    View Slide

  58. @nickdenardis #psuweb13
    Step 3:
    Solve the problem, track it

    View Slide

  59. @nickdenardis #psuweb13
    visited
    connect.wayne.edu?
    No
    Yes
    mailto:[email protected]
    https://connect.wayne.edu/zimbra/?
    view=compose&[email protected]

    View Slide

  60. @nickdenardis #psuweb13
    Step 4:
    Profit.

    View Slide

  61. @nickdenardis #psuweb13
    Resources
    • http://littlebigdetails.com/
    • http://uxporn.uxpin.com/
    • http://www.flickr.com/groups/microcopy/
    • http://edusnippits.com/
    • http://sixux.com/

    View Slide

  62. @nickdenardis #psuweb13
    Thank you
    speakerdeck.com/nickdenardis

    View Slide