Last week I upgraded to the latest version of Wordpress. I’m a huge Wordpress fan, I love what these guys do, and I was psyched to see what they’d done this time around.

Total time: 9 minutes. This was end to end, from downloading their software, to reading instructions, to the moment I was able to make my first post. And this included an extra 2 minutes where FileZilla imploded and I had to start over.

Summary: Thumbs up. Go get it. Most of the changes are for the positive, the UI is cleaner, my top gripes (text-editor and thumbnails) have been fixed, and there are some new minor features. Top complaints are UI fit and finish, there are some gotchas that should have been caught.

Kudos:

• Text editor is much improved: less buggy, fewer perf issues, and better media support. People spend 80% of their time in WP here so happy to see investments to core use here.
• Site wide search instead of just blog posts - obvious win.
• The UI visuals shows some style love - in many places, like the comments view, the style choices make it easier to scan long lists. Other nice touches include a flag next to the comments tab when there are new unmoderated comments.

  

• Many under the hood improvements that I don’t fully understand or expect to use but feel good about anyway.
• Automatic plugin updates. Nice, though this broke for a few plugins I had. Expect the kinks will be fixed by plugin authors from here on out.
• The install is just a few steps and takes minutes with no special skills required.

Complaints:

• Leap of faith upgrade. Doing hand copying of files is very 1980s. I read the instructions ten times to make sure I had it right, and even then I had the willies while waiting for both the files to be copied, and to see the new dashboard working. The intermediary UI didn’t calm my fears at all. Say what you will about Windows or Mac software, but great relief comes from pushing an “install” button, and watching one little progress bar while the software does all the work. Instead in WP there’s a useless page offering no clue how long it will take, and given my hand-copying of files, no way of knowing if I’d screwed something up. To be fair it did take about 20 seconds, but they were the most stressful I’d had all day.

  

• Admin redesign. This felt not quite finished. It’s definitely improved but has 1 step back for every three forward. It’s a space heavy design, with several levels of hierarchy floating in dreamy soft blues and whites. If it’s really a dashboard it should be more software app like than a webpage, but it feels more like the later. The core problem is 4 levels of UI, with varying left right dominance, creates a visual ping pong (left, right, left). Plus there are mismatches of prioritization: The Write a new post button, the most used button on the page, is off the right, while the text “Right now” gets prime real estate on the left.

  

• Tab confusion. The UI rules for tab are simple, peers share the same tabs so people know what is on the same level as what. But there are three orphaned tabs all the way on the right that turn out to be peers to the stuff on the left. No idea why they’d do this. Similar problems on the top with a dashboard tab all the way left, and three orphans on the right (Help/Logout/Forums)

  

• Settings confusion. Much of the UI in wordpress is config related, but is there really a need for three different hierarchies for Manage, Settings, and Plugins? Some of the UI in each can be compressed (e.g. Privacy has one option and doesn’t deserve it’s own page). Even after a week of use I find it hard to remember which top level category to go to for what.
• My everyday tasks are still hard to optimize . This is my top gripe. I’m a very basic, vanilla user. I post 2 or 3 times a week, text and link heavy, with images and thumbnails in most posts. That’s it. No media streaming, no dashboard customization, no multi-users or anything whiz bang at all. Yet I still find it clunky to add images, check links, preview and review, and worse, despite having done it 5000 times there’s no efficiency path. No shortcut keys or tricks to make my routine faster.

Nitpicks:

• The Comments listing should default to showing unmoderated comments. That’s the primary view people with moderation on need to see when going to the comments page.
• On the home dashboard page, first page people see, the word dashboard appears 3 times, all on the leftmost column. The second one is highlighted to indicate it’s active, so the third one isn’t necessary. If people don’t notice the red highlight means it’s active then change the highlight, don’t add another instance of the word.
• Moving the category field to the bottom of the post page is a huge pain. Most people use categories so they hit this set of checkboxes for every post. The current layout forces two scrolls: one to get down there, and a second to scroll the list of categories. This UI should be in the critical path of the UI design for the post page.
• The add media UI is overkill. First, clicking on that tiny little image button takes over the whole screen. Blam - I thought I’d broken something. It’s a jarring, horrible transition. Going modal is ok, but don’t hit me over the head. There are other issues with the flow in this UI: not sure what use cases it is designed for, but everything seems to require lots of steps (And what does Crunching mean? Downloading seems more accurate).

  .

Even with my complaints, I strongly recommend Wordpress. If you want to give it a spin, you can use their free, hosted, blogging service at wordpress.org. If you’re thinking of upgrading or switching check out this handy guide: How to update wordpress with minimal downtime.

Posted in Software/Web development, ui review, usability | 5 Comments »

#4 on the free review list is SimplyGoogle a utility page, exploding out many of the google options onto a single page. Since there aren’t that many user tasks here, there wasn’t much to work with. The core problem with the page is layout - it’s an endless series of command buttons running down the middle of the page.

The easy remedy is the ever handy radio button: as a rule of thumb, if you can get away with one command button instead of ten, you’re making an improvement. You get tons of real estate back, and it’s easier to scan the list of options.

Before:

After:

Posted in Design, ui review, usability | 4 Comments »

#3 on the free review list is a site for the writer Gina Black. It’s a simple site and does many of the basics well, but the home page makes some fundamental mistakes.

Issue Summary:

• Border pattern distracts from the page. Like ParkingFriend, this isn’t a poster and there’s no need to draw attention to the page. Patterns in the page gutter, unless they are sublte (e.g. grey on white), ask people’s eyes to look at them.
• The picture, and page header, is way too big. Any header item appears on every page, which means it should earn it’s keep. A big photo of Gina takes up almost half of the screen, forcing me to only get about half the page to see whatever it is I clicked on.
• Vertical text is hard to read. There’s a reason newspapers run text left to right - written language is designed for horizontal scanning, not vertical. You can get away with it now and then as it can create interesting visual patterns, but if the site is designed to promote a person I’d keep it simple.

Before, with issues flagged:

After

What else I’d do:

• Find a new picture. I just cropped the existing one to fit, but I’d find a picture that has a natural horizontal composition.

Posted in Design, ui review, usability | 2 Comments »

#5 on the free review list is a site that has a purpose that’s hard to top: Freeing slaves.

This site was tricky to work with. The visuals are strong, but way too strong. And the site is trying way too hard to grab attention that it defeats it’s own purpose. With a cause this good the site doesn’t need to do very much: just explain the situation and then tell the viewer what they should do.

Problems

• Visual overkill. Every element is asking for extra attention. It’s visual a deathmatch, and the viewer is the loser. Compare freetheslaves.net with similiarly themed site, Darfur wall. Will messages this powerful, the cause can speak for itself.
• Confused message. There are so many stories presented, but only one or two are needed. Too many choices. What am I supposed to read first? Second? What is the most important action this organization wants me to take?
• Too much navigation. There are at least 3 layers of navigation for what should be a simple experience.
• Kill the movie. First, if you need a special caption saying “Click here for volume” you’re acknowledging the movie UI is confusing. Get rid of it. We all know what slaves are, and any of the great photos you have are more powerful than video anyway. Also, the site is slow and video ain’t helpin’.

What to do?

It’s hard to work with finished pages, so I made a reverse-wireframe. It helps visualize the elmements and see how they match up with a grid. A clean design respects some kind of visual grid, meaning there are a minimal number of left edges: every left edge should line up with another left edge.

A proper wireframe for the same website, should look something like this. The exercise for the reader, or the designer, is to eliminate elements and make stronger decisions to fit this kind of design. This will force more decisions to be made (e.g. we only have room for 3 things, but had 5. Which 2 should go?) but that’s good.

The other major issue is unnecessary visual flares. These elements make the layout a battlefield, where they’re fighting for attention. By simplifying the design and respecting the wireframe, the layout is cleaner, easier to read, and simpler to understand.

Here’s one before and after example, showing how to clean the visuals.

By sliding the freedom awards into the right column, the element no longer screams “Look at me!”. Instead it’s in its respectful place in the right column. If the freedom awards are really so important, than fit them elsewhere in the grid, but don’t violate your own design by breaking the grid.

Is this more boring? Perhaps, but the goal of this site isn’t visual excitement is it? It’s (I assume) to present a serious problem and compel people to donate time or money to the cause. The design has to get out of the way. The above cleanup can be repeated in dozens of places on the homepage alone and will make a big difference.

If any folks at freetheslaves.net are reading and find this useful, I’m happy to do more work for you. Just let me know.

Posted in Design, ui review, usability | No Comments »

#2 on the free review list comes from Geneva Switzerland, at parking-friend.com, a site for valet parking at the airport and other places.

Summary:

• Designed like a poster. The visual elements are strong and dominate the page. This would great for a poster where you need to draw attention, but if someone is on the web page you already have their attention. The large P element on the left and the price star on the right overpower the rest of the design. The P alone consumes 100+ pixels of width, purely for cosmetics. If the site were high style (shoes, clothes, etc.) maybe you could argue for the style value, but this is a parking site - a utility experience.
• Choices are hidden and links unclear. The page works by showing/hiding one of three choices: airport, event or other. Airport is chosen by default, but to see the option options you have to click on the right question. With only 3 choices there’s no reason to hide UI: radio buttons work very well for handling this kind of decision making.
• Colors and sizes are too strong . Trebuchet is known to be a good web design font, but if you split sentences into two colors and default to 20pt text, it gets hard to read (See the Terms page). Whitespace is increasingly important with difficult fonts or large sizes, but the text heavy pages on this site have few paragraph or line breaks. The purple/orange theme is good and works well, but it doesn’t need to be followed through within sentences - two color phrases are hard to read.

The squint test: One visual design trick is to squint your eyes and see how the page balances. The two dominant elements stand out like this (see below). The problem is that neither one earns it’s prominence, and they demand this first order attention on every single page.

Simplified redesign:

Taking into account the above, this design simplifies the grid. The visual elements now fit the page, instead of demanding an unwarranted amount of pixels and attention. All text is one color, the hide/show UI is replaced by a simple radio button scheme. I also cleaned up the navbar, moving the language choices and log-in into a tighter layout.

Before and After:

A few things I missed:

• The price should be restated in the text, or before the book now button. Messages in graphics are often missed, as they’re offered parsed as secondary information, and the star on the right is the only place the fee is currently mentioned.
• Credibility should be emphasized. Why should people trust their cars to this company? The pitch for credibility should be stronger. There should be photos of the lot, of the service crew, statistics on how many satisfied customers there have been or how many years it’s been in operation, etc. on the front page (even if put behind a prominent “Why trust us” link).
• Radio button layout is dull. With more time I’d play with the text and radio button layout. Leading with a form is never sexy, but it gets straight to the primary task of this website: make a reservation. Looking at other parking websites shows similar form centric designs.

Posted in Design, ui review, usability | 4 Comments »

I got hit with a case of the lazies, and didn’t get to my promised free usability reviews until now. These will be high speed reviews: 10 minutes of analysis, and the rest of my time (30-45 minutes per site) spent explaining the issues and offering alternatives.

Drew Kime submitted this homemade forum software, used by iwethey.org, which is cool since my own forums are still locked in search of a forums package that doesn’t suck.

Summary:

• The core design is *ok*. The basic threaded forum UI is familiar to many, and most of the problems this site has are ignorable, not fatal. However there is a general lack of basic UI knowledge here, as layout and prioritization are mostly ignored, wasting everyone’s time.
• Basic layout issues. The top 10% of the screen is what people will see first, and on every page. But this design is a scramble: there are no easy columns for eyes to follow, important links wrap around lines, and the logo itself forces people’s eyes to do much too much work (never cover part of a letter with an image). Basic layout should always follow a grid: all left edges align, and any new columns align (See Before and After below).
• Lack of prioritization. There are nearly 25 links in the top area of the screen, and no attempt is made to prioritize them. What percentage of users will need the source code for the forum? I’d say less than 2%. How about a list of changes to the source? I’d say less than 1%. Then why have these two links as the first ones on *every* page? The most frequently used links should be the easiest and fastest to find. Move info about the software to the footer.

Posted in Design, ui review, usability | No Comments »

Feedshot.com

Summary: this isn’t a site as much as a dialog box for a service. Two buttons and four fields. Should be a piece of cake. But some layout issues and seperate of control creates a few stumbles. 6 of 10. (Would be a 7 but degree of difficultly here is low).

Core tasks:

• What is this for? There is a basic question of purpose here: what does this site do and why should I care? there is a link at the top that says “how is this different from pingomatic” but what if I don’t know what pingomatic is? The blog at the other end of that link says “FeedShot is a blog feed submission service, submitting your RSS or Atom feed to a large collection of search engines and news services with the click of a button.” A short version of this description should appear on the main page.
• The value proposition. Another mistake here is in approach. The value to me isn’t the technology: it’s traffic. The tagline shouldn’t be “56,000 submissions sent” but “56,000 feeds enhanced” or “56,000 feeds now with more traffic” or something that gets at the value, not the technology. The link should say “How feedspot advertises your blog for you. “

Basic layout:

• Layout needs cleaning up. A common mistake with form UI is to ignore how eyes work. We like scanning lines. The fewer lines you can group together, while keeping line length short, the better. So here’s a before and after:

  
  

• Confused control. The group boxes of the UI implies that functionality is seperate, which it isn’t. After filling out the form I have to click one of the submit buttons. It takes a few seconds to sort this out, since the two buttons, which do different things, are labeled the same. The decision buttons should be moved into the form, as shown here.
  
• Further cleanup. It’s possible to go further: Why have two buttons that say the same thing? You could put the meaning into the buttons themselves. The challenge is that black on grey doesn’t look so good for sentences: $3 for 25 may not be easy to read as a button, but If it were me I’d do some mock-ups and give it a try.

Posted in Design, ui review, usability | 6 Comments »