UX Redux: Taking a Look at Contact Form 7 by Jen Mylo

Notes from the talk given at the 2014 WordCamp conference in San Francisco by Jen Mylo. Official description:

One of the greatest things about WordPress is the ability to extend it with plugins, but sometimes plugin design clashes make for a less consistent dashboard experience. Join Jen Mylo, former UX Lead of WordPress, in reviewing a popular plugin’s user interface and making recommendations for improvement.

Contact Form 7My notes (this may not make a lot of sense without the screenshots of what she was showing):

  • Contact form 7 UI review
  • Navigation Menu Placement: content on top, utilities at the bottom. It was due to a plugin conflict
  • Default gear icon for the plugin. You should choose an icon that makes sense for the dash icon set
  • Help tab is needed in the top right
  • Title field: “untitled” is the title of the form. Make it like a field in the core
  • “Generate tag” used on the form builder. tag means something different users than developers. Call it “Create new field”. It might confuse people who already use it.
  • Messages start with pound sign, that means hashtag. Not necessary
  • In browsers today you don’t see scrollbars by default, text can get cut off. Introduce them to the idea
  • Put a save button at the bottom.
  • “Additional setting”. Had no instructions. Put an intro there.
  • Mail/notifications: Mail and Mail(2) with one checkbox. Combine them into.
  • RTL/language: Japanese UI issues. (Recent WP has a language chooser.) Tie “left-right” to language.
  • Give a preview option.
  • On submission: Refresh screen and it went empty. Error/confirmation messages should be shown where it is relevant. In WP on top
  • Skip the shortcodes, use drag and drop instead. (Gravity form and Jetpack does it). His users don’t care about ease of use.
  • Know your audience: people who like to fiddle with HTML
  • Visual and text tabs. Have both for navigation.
  • Add to Post Editor: add  a button to the post editor. Canonical place (one only) is a good idea usually.
  • QA
    • There was no time to do testing for accessibility. There are contrast issues and small font too.
    • Lots of things are customizable, but the defaults should be better.
    • Email should be sent to the person who filled the form. As a notification.
    • Second most popular plugin.

Leave Comment

Your email address will not be published. Required fields are marked *