Twentyone Degrees has been developing a blogging tool called Symphony (Previously named TypeWorks). Symphony is near it’s final release candidate and they’ve put up live demo to allow people to play with the product. The interface looked nice so I decided to try it out.
The interface is certainly clean. It uses and elegant, glossy-gel look, and you can tell there was a lot of visual design put into this product. This is something you don’t see a lot of in other blogging tools. But what about user experience design? Here’s what Twentyone Degrees has to say:
“Symphony is a web publishing application committed to offering an intuitive and thoughtful environment to maximize your publishing productivity. We have spent a great deal of effort to make sure Symphony does not compromise usability for flexibility. Symphony prides itself for being a well-engineered work of art with character to boot. Expect Symphony to feel like you’re on a first-class flight from Brisbane to Chicago.”
Multiple actions to Multiple Items
So let’s take a look at a motif I’ve seen used a few times before. You can find it here, but you’ll need to login first with ‘demo’ and ‘demo’ to get to the page.
Each list item in the table has a checkbox next to it. The idea is to select each item then choose an action to apply to all the items at once. So let’s look at a user scenario. You want to delete an old post that never made much sense and was growing a bit moldy. Ok, one click on the check box, one click to select the action list, one click to choose ‘delete’ and one click to ‘apply’. That’s FOUR clicks to do one action. Ask yourself, how often have you needed to delete 5 or more posts at once? Probably very rarely, if at all.
The Solution: When building applications, it’s very tempting to think that just because you can let a user do something that you should. I’m sure that the developers felt this was a good solution to allowing user to delete multiple entries, but the real question is at what price? How much intuitiveness and simplicity are you sacrificing to add this feature? Instead, If there was a link in the far right column to delete each post, a single click could handle the users’ task. In addition, the task would be clear at first glance, and the overall time to delete 5 posts would only be slightly higher for the few that would ever need to do so.
Take a look at it for yourself, and think about these points:
- The action drop-down is at the bottom. When the list grows, you’ll never even see it’s there.
- The actions are hidden. With a drop-down list, you can’t see what your options are without clicking on the box first.
- There’s no label for the checkbox, you have no way of knowing what the checkbox does, there’s no description, no header to the column, nothing.
- It’s rare that I would want to do any of those actions to a lot posts at once. I’m being made to jump through a lot of extra clicks for something that would only be useful to few people.
- What does ‘&hellip‘ mean in the drop-down? What happened to the old trusty ‘select an action’?
Guessing at Functionality
When you’re developing an application you spend a tremendous amount of time thinking about, and programming features and functions. You might spend time in a war room with some colleagues hashing out all the features the application might have, and cool ways to solve difficult problems. The point is you’ve spent a lot of time with these features and what you call them, you know them backwards and forwards. It’s easy to forget the user has no idea what the features are or what the name means.
What does the short name do? Where is it used? What’s the best method to shorten the name? Abbreviated? Remove spaces? Even after saving the category, there’s no indication where that field is used. The description field is also devoid of any explanation, I can probably guess, but guessing is only fun in charades.
The Solution: When asking users to input data, make sure it’s clear what the data is for. If there’s no context for how the data is used, users may not be sure what they should enter. By providing a description of the feature on the same screen, users can make an informed decision as to what they should enter. It gives them a context to decide how they want the name shortened, depending on how it is used. It’s also helpful to show examples of ways to shorten a name, such as using underscores.
Screens are not about functions
Symphony has a tagging system to allow you to place dynamic items in your templates that later get processed by Symphony. These items are things that would normally require code, but instead can be done with a slightly friendlier HTML-like tag. For instance, in the example below you can see what the tag looks like to add an image from Symphonies’ list of files.
So what’s the name of the image you uploaded yesterday? Can’t remember? Oh, well you’ll need to run off to an entirely different section of Symphony to go look it up. How often do you think you would want to add images, or assets to a template? Probably pretty often, and it would be nice to have a list provided to select from saving you the trip.
The Solution: Think of screens in terms of the task, rather than dividing them up into programming functions. In this scenario, the task is to enter a post. Users should be able to write the post, upload all the necessary images or assets, and insert them into the text with ease. If they want to re-use a pre-existing image or asset, let them look it up and insert it all in the same screen. This keeps people focused on what their doing, and improves their efficiency in accomplishing the task.
Design takes many forms
Symphony is still in beta, and many of these issues could be on the to-do list. But I think it illustrates a great point. There is a clear distinction between good visual design and good interaction design. The overall user experience contains both, and to have a solid application you need both. You can create a quality brand, and give elements ample white space and page weight, but if they’re the wrong elements on the wrong pages, then you still have a frustrating experience. Make sure everyone on the team thinks of things in terms of the user. Most importantly make sure you and others are using the application daily and looking for these areas of frustration.
Published on April 17, 2005
Resides in User Experience
Comments feed | TrackBack URI
3 Responses to “A Symphony of User Experience”
1
Mark Boulton on April 18th, 2005
That’s a great write up Ryan and you make some relly valid points. I’ve had a look at Symphony as well and would echo some of your comments. Some of the UI really is overkill.
The admin interface looks nice, but without really thinking through the user experience, in terms of flow, this application could suffer. Like you say, it’s all in the details.
2
Tim Uruski on April 19th, 2005
Excellent analysis of Symphony. I really like that you offered up solutions to the problems you highlighted, giving the developers (if they read it) the information they need to better their product.
3
ryan on April 26th, 2005
Thanks, I really decided to write about it because I found a lot of the ways in which they displayed features or data was the way I used to do applications. Got a lot of data? Throw it in a table as a one-size-fits all solution.
I’ll probably be releasing a project of mine as beta soon, so I’m sure they can pick on me back