The UI Design Process

I’m no designer. I don’t aspire to be one, nor do I claim to be one that; however, I am interested in the topic and enjoy seeing the work that others do as well as following blogs, articles, books, etc. on the topic.

Though user interface design is a bit of a different field, it hits much closer to home for me than other types of design. After all, a user interface is basically the face of the code that we’re writing.

And if we’re not careful, then we’re going to continue perpetuating the stereotype that developers do not care about design.

I’ve spoken previously about sharing case studies on WordPress projects, and though I don’t have a full project to share right now, I thought it might be fun to look at some I’ve been working on and the evolution of a particular user interface that evolved from a first pass, to discussion, then from mockup, to implementation.

A UI Design Process For Project Volunteers

I’m currently working on a plugin for someone part of which allows them to select volunteers and and assign them to projects.

At a high-level, one feature of the plugin does the following:

  • Introduces a new “Volunteer” user role
  • Allows the user to assign and remove volunteers from the application to specific Projects

Naturally, I have to account for the cases when volunteers are already assigned to Projects so they aren’t made available, and I try to limit the user’s options based on the status of the selected volunteers

The First Pass

A UI Design Process - The First Pass

The First Pass at Assigning Volunteers

The first pass of the user interface included a multi select element that allowed users to hold “Command” or “Control” and select each person that they wanted to assign to each project.

It’s functional for a first pass, but there’s a lot of room for user error. In fact, here’s a bit of the feedback generated from the first pass:

I think the current version could lead to accidental volunteer removal. Click on a name in the volunteer area and all other names are now deselected, and if you hit save everyhting is lost. Imagine that happening with a list of 100 volunteers and 30 people helping. That would be bad news.

Good points, right?

The Mockup

So I came up with a second pass using Paper that looked like this:

The UI Design Process - The Mockup

A mockup of the second iteration of the UI.

After receiving the feedback, I sketched out the above mockup then passed it back for review.

Ultimately, the UI would work like this:

  • All of the volunteers in the application would be available on the left
  • You can select one-to-many and assign them to the Project
  • You can also remove Volunteers from the Project in the same way

After getting the sign off, I implemented the following UI:

The UI Design Process - The Final Version

The implementation of the mockup.

The UI In Action

Finally, the implementation of the user interface can be seen in the following video:

http://youtu.be/Jw5pkmDAaHs

Overall, it’s simple enough, but this goes to show why having small feedback loops and roping clients into testing various iterations on individual milestones matter.

It helps to create a product that not only works more inline with their vision, but also exposes things that you – as the developer – may not notice simply because you think like a developer, not a user.

Category:
Projects
Tags:

Join the conversation! 17 Comments

  1. Lovely, looks totally natural within the WordPress UI. Love the fact that the ‘Add Volunteers’ button disappears when there aren’t any more to add, the quality of a developer shows in these small details.

    • Thanks Jean – one of the things that I appreciate other systems doing is making sure that if a user doesn’t have the ability to do something, then it’s either disabled or it isn’t exposed.

      That’s what I was aiming for using the “Add” and “Remove” buttons.

      Also, one thing that I think plugins (and themes, for that matter) should do is try to integrate themselves into the WordPress UI as much as possible, so I try to leverage whatever classnames already exist so that the elements I add look just like they would were they part of the WordPress UI.

  2. I’ve always found that kind of two-sided add/remove UI to be clunky and have been using Chosen for quite a bit of multi-select replacement (both meta and taxonomies) instead: http://harvesthq.github.com/chosen/. There’s also Select2, which has more features, although the licensing there is not as compatible: http://ivaynberg.github.com/select2/

    • From an ‘adhering to WordPress UI standards’ perspectives would using chosen to ‘upgrade’ the WordPress admin UI dropdowns etc. be a bad thing, or no?

    • I’ve used both Chosen and Select2 in other projects and generally am a big fan of them.

      The thing about using Chosen for a multiselect box is that I don’t see it as much of a significant improvement over the original element (at least, not as much as some of the other options).

      The number of clicks required to select a single option are the same
      If you wish to select multiple elements, you still have to hold ‘Control’ or ‘Command’
      It’s not as easy to remove mass number of elements (think of having to remove 25 volunteers

      Generally speaking, it’s more of a stylistic improvement than a functionality improvement, and it’s not that that’s bad (I mean, I actually dig it), but it’s that it doesn’t add much in the way of efficiency.

      • I’ve never had to hold down a key to select multiple items with Chosen – I tend to use it in a pseudo-autocomplete fashion, where I start typing what I’m looking for to filter it down quickly. As far as removing mass numbers, I suppose it’s not the same as selecting a bunch at once to remove, although clicking the X’s isn’t so difficult. That’s more a question of what you’re generally doing, though. When switching to a helper like Chosen I’m adding many at once from a long list I don’t want to scroll through (so having type-to-filter is helpful), with removal being a more selective, less frequent task, so that particular interaction is more appropriate.

  3. The second design drastically improves the first, but it’s not without its own downfalls. Using this design would be fine if you had about 10 volunteers, but more then that would take a long time to sort. Perhaps you could be able to select multiple volunteers from one list, and transfer them over to the other list through your buttons, or drag-and-drop?

    • Sure – the second design isn’t without its shortcomings, namely in that you’d really have to scroll through once there are hundreds of Volunteers in the system; however, sorting isn’t much of a problem.

      The plugin retrieves all users by their name in ascending order.

      They’re also able to select as many volunteers as they want, but rather than using drag-and-drop, they just click on the ‘Add’ or ‘Remove’ buttons.

      And though I like drag-and-drop for certain things, I don’t think that it’d necessarily work well in this scenario because if a user was to mis-click, then they will have completely de-selected all of the Volunteers that they’ve selected.

  4. I think it looks great. Much, much better than the standard multiple select.

    UI wise, how about something like this: http://codepen.io/farvig/pen/Jvflu, so you have instant feedback on moved items – yes, the styling was done a bit to fast.
    In this way, the user could scroll down the list and add/remove as wished and on ‘Update’ we update the database.

    I’m not nearly good enough with WordPress to know if this can be done. I have tried and failed miserably :-)

    • I love instant feedback. In the case that you see in the post, the best that you get is seeing the option selected which clearly leaves some room for improvement.

      What you’ve suggested is highly similar to what Helen shared above.

      Being able to prove a more attractive way is definitely an upgrade, but the problem with the CodePen example is that mass-removing people is a bit of a challenge. Of course, I suppose you could just have it work both ways.

      Good food for thought, for sure.

      Anyway, this can definitely be done with WordPress :). Most anything can if you’re familiar enough with the API and comfortable enough with JavaScript.

      • Ah yes, sorry – I didn’t check out Helens links. Both looks good.

        I definitely fall short when it comes to the API, but I give it a shot and hope to get my head around – if anything good comes out of it, I’ll remember to share it, in case it can helt anyone.

        • No need to apologize – I just like to try to make sure that every one’s aware of what everyone else is saying. Makes for better discussion :).

          Anyway, keep working on learning the API. You’ll get the hang of it eventually – once you do, things just start “clicking.” :).

  5. I actually got it to work :-)
    http://pastebin.com/WHGNx9Su

    Of course there is a problem in the lack of styling opportunities for select and options elements, but I can live with that.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.