Entries Tagged 'usability' ↓

At DrupalCon, Leisa and her team introduced their efforts to redesign drupal.org page. They want to make it a community driven process where all the existing and potential users can give input at all the design stages.

The latest step in this effort is her invitation to the community to send in wireframes and sketches of our ideas.

Here is my effort, done fast and rough, as these things by definition should be done. I went to re-sketch Drupal module page for Zemanta Drupal module as this is something I’m involved with professionally and it bothers quite a lot.

First the wireframe:

Drupal Wireframe for projects

There are two basic ideas behind this wireframe:

• make it more visual by adding image gallery and screenshot as  integral part of the page
• downplay the fact that it’s a developer thing and make it easier for end-users.

Going from top left downwards:

• the title is made prominent, with author name next to it, but much more discrete
• folksonomies bellow the title, with possibility that it’s driven by the trusted community and not just authors themselves. Uses like tag Works7x, or similar could then emerge
• The description text is then presented around the image gallery

The design behind this part should be tight in order to fit all the catchy information within one screen, without scrolling and help “sell” the author the modules itself.

Below this description area, there is a new section - Download, which is a quick call to action, find the module that works with your Drupal installation and download it now. Release notes and release dates are there to provide extra information of any special requirements and to see how fresh is the release.

The third section is support/developer part. In current release one can’t easily see latest issues without going to a separate page.

This design does following things:

• Visually separates support and developer sections in order to not confuse end users with developer things (patches, etc.)
• Provide a short list of latest support issues, together with a link to a full support forum sub-page (the same as it’s done now)
• The developer tab works the same, it just visually changes the <div> and presents the developer information
• This section possibly needs some sort of legend on top of the table

It’s also important to note the things I removed:

• No more authentication stuff on this page. There is no “create new issue” link here, as we want to drive people to full support page in case the last few answers don’t help; auth is done from there
• The documentation and homepage are downlplayed; they can be mentioned at the end of description if required from the author

Other ideas:

• It should be possible to disable support forum and dev forum on the page and drive to alternative location: either author forum or places like getsatisfacition. Drupal could then just read some sort of standard RSS feed of this information.
• Reasoning behind previous points is: some companies (like my company) have a number of different modules and they don’t want to scatter their support resources around the web. Alternative reason is that for some popular modules advertising on their forums/support pages is actually substantial sources of income and drupal.org could help drive the traffic towards original developers
• Being able to group modules into arbitrary groups could be a neat feature. It would work in a way that one could create a group of “e-commerce necesseties modules”, and then list all the modules one should download in order to have the optimal/initial set of modules for such task.

Trying a latest software update is something that every true Apple user does in the morning after the big Apple announcement. So this time it was iTunes 8 with it’s genius button that automatically makes great connected playlist.

For some reason I was sleepy enough to actually fail at their Genius/iTunes store login form. Whoever designed this probably didn’t realize that the radio buttons seem to indicate that they have text areas next to them and that they are not visually separated enough.

My solution for the problem showed in a screen shot below would be to move the radio buttons on top of the form, or at least make it more visually separated. Without this change, it’s really easy to just assume that the form wants you apple ID, but the second text box is there to enter you AOL ID, if you have one.

The error message is also pretty obscure, just one red arrow next to big AOL logo. Whoever design this, released it much too soon.

Getting a CrackBerry was my latest step in showing total devotion to my employers big ideas about changing they way people blog. Since we use Google Apps for part of our intranet solution I thought it would be nice to integrate this gadget with their servers. Sadly this made my already bad initial experience with the whole BlackBerry platform just worse. Even though they made a number of steps to confuse their users, I’m just going to concentrate on just their web page on Mobile offerings for Google Apps.

The basic idea of the page is to communicate that their suite offers a wide variety of mobile options of accessing the content. Yet It does this as it was designed as each section was its own page in some mobile providers glossy section.

No hyperlinks

They make hyperlinks to their mobile addresses part of normal text, making it really hard to notice and read. It also makes it impossible for someone to open the page up in their mobile browser and actually click on the links.

Lots of diffrent hyperlinks

The links they want to promote (in between links for non-blackberry users) are:

• http://m.google.com/a
• http://www.blackberry .com/GoogleTalk
• http://m.google.com/sync

Even though m.google.com tries to keep it simpe the blackberry address in the middle destroys the message from Google to go to m.google.com with some sort of appendix for the addresses.

Failure to actually include crucial information

One such example is at the bottom where they promote their docs service, yet fail to include address for mobile access. My understanding after playing around a while is that I have to (or at least am able to) download an extra app to have great experience, yet they do not tell me that.

It also seems that their idea of mobile is BlackBerry and then everything else. While I appreciate their thought that they support everything with BlackBerry badge, a developer in me has its doubts. There are also some other very powerful smart-phones and it would be nice to address that issue a bit more clearly. They also do not make clear if they target at everything mobile or just the smart-phones.

Not speaking users language

The last section casually mentions “or other phones supporting WebKit browser”. My iPhone has Safari inside, that you very much as other mobile phones had a “Browser”, “Mobile Internet Explorer” and such. It is a bit a stretch to expect users to know what rendering engine their mobile device uses.
The same section goes on to mention “xls” format which is probably known to users but naming it Excel spreadsheet (with .xls ending) would make it more clear for the wide variety of users who actually don’t see the endings of their files in Windows.

Not providing simple mobile accessible URL and total failure of consistency

While Google actually offers mobile search at http://m.google.com, the page there actually doesn’t tell you anything about their mobile offerings. In order to get that you have to Google around to find http://mobile.google.com which promotes a downloader for “all” Google products in one go. Which is a nice idea for the fact that the installer actually doesn’t offer GTalk client.
But all of this is besides the point as this information is not on the page which actually forces users to go back at browsing the inter-webs to stumble on this information somewhere.

What could they do to improve the page?

• Provide a clear, nice URL on top with all the links or even better - make their installer at that page actually able to install all of their offerings.
• Separate the BlackBerry page from other mobile offerings. It seems sensible to have different pitches for Blackberry, iPhone and other mobile users.
• Make the URL’s stand out and normal hyperlinks so it is not that hard to notice them.
• Make some line breaks so the text on the page is actually readable.

Conclusion

The page itself feels like it was written in some marketing department, without any actual purpose to be helpful for any existing users that located it through search in hopes that it will tell them how to actually mobile stuff. This is also the message of this blog post:

People will find your marketing materials while searching for help on the topic. Design it in a way that it will at least point them into right direction for real help, if not actually help them in using it.

Source: ShutterstockRecently my Sennheiser headphones died after a decade of everyday abuse. I wanted to buy something similar in about 100 Eur class. Sadly the two biggest Slovenian stores failed to help me locate a perfect new pair in a number of ways.

I started with EnaA and entered into their search general term “headphones” (slovenian: slušalke), since I was not really attached to any brand. This is part of output I got:

The built in search provides suggestions towards categories inside the store but fails to give you better context in which sections of store these categories are. If you are wondering, the first “Bluetooth headphones” points to “Audio/Video section” and the second to “Car accessories section”. Observant reader will also notice failure at standardization with first category using comman to separate microphones from headphones while last category uses ampersand sign (that is actually not used normally in Slovenian language).

They also sadly sell mostly cheap computer headphones so at that point I turned towards their competition Mimovrste. Same query this time returned following result:

In this case categorization was done nicely as “Headphones” in “Audio/Video” > “Audio” (section). Here as user I could see how hierarchy works. One could argue that turning this left to have the more general on left would be better since we are more used to such notation from everyday lives and also applications like Windows Explorer which opens folder from more general towards more precise.

I had another wish for the headphones, to have detachable cable since in my experience the cable fails every few months. After inspecting into more details one promising headphone I noticed something interesting:

The connector type is defined as “6.3mm stereo jack, with adapter included”. Here my question was adapter for what?

While this might seem like nitpicking it is actually quite important since some Sennheiser headphones (like HD 555 model) come with connector that will not fit into your iPod and you need a converter (which might be what is implicitly mentioned in that sentence). What would be helpful in this cases would be small link at the end of the row like “(confused?)” that would take you to a sub page with a few pictures of different connectors like the one in the iPod and such, explain the names so you would then feel confortable with your choice of headphones. This is online store after all where you can not turn the box around and see how it looks. (The argument about “Googling” is irrelevant here since you do not want your potential customers to wander away).

Since I was already noticing slips of the stores I decide to see if they could help me out with my little annoyance, that is the fact that I do not know how to spell “Sennheiser” or at least for me the usual spelling is “Senheisser” or just “Senheiser” with double letters. Since this is a big brand I would image they would know how to correct my spelling mistake:

There are two interesting facts to note. While it might be acceptable for EnaA not to suggest correct spelling, since they actually do not carry the brand - they found one match in one of their partner stores that had the actual product name misspelled! (Trying the luck with misspeling other brands also did not produce suggestions)

Mimovrste did a bit better with a large category list at the bottom, but also failed to correct my spelling. As a naive consumer that wants to buy a certain brad with hard to spell name, it should not be acceptable that I either have to guess the correct spelling or enter it into Google to get it to suggest me right spelling (even though this might produce also produce a list of more specialized online stores at the same time).

Lessons learned

Providing good search is not easy and should be treated as a separate usability review. In this case clear categorization and failure to suggest proper spelling produced breakage on my part while browsing which made me switch online store in hope that other one makes the process easier.

What interests me a bit more is that I actually failed to buy one pair of headphones since the description was not understandable to me and there was no clearly visible way how to get help on the connector part. This could be seen as part of the guidelines as “Speak users language” and “Provide help”.

The Eclipse project, providing a powerful IDE editor, has a smart download page that detects what kind of platform you are on related to that suggests you download page. The only problem is that in the process they fail to clearly communicate download links.

Screenshot with important areas highlighted is as such:

What happened here is they while they know that you probably want Linux Intel 64-bit they hide it under icon on left (red squares are mine). They also kindly provide Linux download on right, which actually takes you to 32-bit version.

In order for Eclipse project to make the download page nicer they should:

• provide clear-text download links below the description text in following form:
  • Download Linux x86-64 (150Mb) (tar.gz)
  • Other Linux versions
• the “other linux versions” page should tell you how to know which version you should download
• remove the download link from the icon, it does not help to have arbitrary piece of graphic be a download link
• optionally provide a big link somewhere with “confused? Get explanation here” for people who are not comfortable on linux yet.

If you want to look at this problem through traditional usability review perspective you could say it has problems with affordances (strange graphic for download link) and not presenting clearly knowledge in the world (you have to mouseover the link to see what you’ll get to download) together with clearly opposing download links.