Have you noticed? A few weeks ago, we finished a large round of improvements to the OpenOffice.org website and the Wiki design. And all of it involved UX in the re-design phase. If you are thinking something like "UX? I thought they want to improve the software?", then this post might enlighten you...The Starting Point
So why is our web presence important? Our main website could be one of the first things new users see if they want to download OpenOffice.org. Plus, each OpenOffice.org contributor who simply logs on - even in native language sub-domains - uses the same web interface. Hence, there are about 300,000 visits to the OpenOffice.org pages every day! One little tweak, and so many people can benefit...
The UX work started when Ivan Miskovic, who was the driving force behind the recent website refresh, presented some first changes at ux-discuss and website-dev. The proposal was an improvement, but several main issues remained – and he listened to our concerns. Soon it became clear that we would focus on three aspects of the website: the header, the expandable download area, and the news items.
The Main Criticism
The little box sitting in the header had been designed not to draw attention to itself, combining Search, a link to the NLC language selection page, and the Log In form, but it had been criticized for a long time. To sum it up (more info at ux-discuss):
- Tabbing by mouse-over only: The tab panes are changed by hovering with the mouse pointer – the change can not be made persistent. Moving the mouse when entering the user data for a log-in results in losing the input fields. Weird.
Changing tab descriptions: On tab changed it's description, in dependence on whether the user was logged in or not. And, the tab “Log Out” did also serve as an action button. In reality, tabs only group information staying passive.
Low contrast: The visual design was very subtle and caused problems for people with visual disabilities.
Text only: People who are unable to speak English most presumably had difficulties to switch the language via “Change Language” – “National Language Projects.” No icons - text only.
The expandable download area was also somehow tricky. In contrast to the other so-called “action statements”, it was the only one which exposed the download-button directly beneath instead of loading a new page. Unfortunately, there was no visual cue for the user clicking the action statements. Once opened, the download button could not be made to go away – a behavior many people might expect.
The Re-Design Phase
As some people might remember, there was a lot of talk from August to September last year on ux-discuss. Together with Ivan, the UX team discussed ideas, created mockups, criticized and so on. Fortunately we had a dedicated test environment at http://test.openoffice.org which made it possible to check the design against the technical constraints of the OpenOffice.org website platform. Ivan organized the communication with the website team, e.g. checking whether the web browsers are compatible with the new approach.
But how did we do the new header design? The biggest challenge in the header was the limited space; especially since the website is designed to work well on lower resolutions like 800 x 600 pixels (e.g., for netbook users). The design should be highly visible and accessible, and at the same time not be a distraction when working with the website. So we tried to get a compromise between “show everything” and “hide elements” (like the tab style in the old approach). Language projects and the search box are shown all the time, while the input controls for the log-in user data is only shown on request. The behavior itself is consistent between the new action item “Download”, e.g. clicking keeps the container open. Have a look...
Want some background information on the header design? Here's the scoop:
Fast Access: Although far more often used, the “Log In” action link is located right to “Register”. For western countries, the more often used elements are usually located on the left. We changed that to enable the user to just go to the upper right corner and click – the webbrowser window helps to guide the user. Finally, if the web browser automatically fills in the user data, the user just places the mouse in the upper right corner of the website, clicks, moves a bit down and clicks again. That's it.
Accessibility: Try to log in by pressing Shift+Alt+4 and then hitting Enter (when the password is automatically filled in by the browser). There are even more key bindings which can be found at OpenOffice.org Wiki.
Visual Clues: We added icons for each of the elements to ease navigation and to enable users to understand it's meaning – even if they don't understand English.
Hyperlink mouseover effect: To improve the contrast, there is no mouseover effect for the hyperlinks, because the text is already white. Thus, we rely on the functionality of the web browser to show the “hand” cursor. Initial ideas to change the background color of the header to further improve the contrast were not effective, since it wouldn't have worked for low screen resolutions.
Better browser compatibility: The new design works now well with the Microsoft Internet Explorer 6 which is still used by a lot of people. The former approach required a fall-back solution for those users.
General ease of use: We discussed many different use cases, e.g. forgotten passwords, how to register, how to present the “My Pages” if logged in, … I can only say, the devil is in the details ;-)
Besides the header design, we also improved the download action item and the news snippets. Some comparison of the whole start page? Here we go...
I said 'we', but who is meant there? Fortunately, we had plenty of support from other OpenOffice.org community members. Apart from the Website team and the User Experience team, Stella designed excellent new icons, Éric supported us for questions of accessibility, and Liz was a great help when discussing the needs of the local language projects.
Going Live
The day after going live, I met a well known German team member who indirectly gave me some feedback. Not knowing about the new design, she had asked her husband to log in – as usual. She told me that she couldn't believe that he completed the login so much faster than usual!
Besides such very positive responses, some problems occurred which still seem unforeseeable. For example, there were problems with the download page with Microsoft Internet Explorer 6 when the new header and some download code clashed. And, due to caching which is supposed to improve the behavior of the site under high load, sometimes the log-in status is just wrong (Issue 94328).
Besides that, we still haven't received any negative feedback concerning the new interaction design. And I hope this blog post won't change that... ;-) By the way, “changes” is a good keyword as there are things we might do different the next time.
Lessons Learned
A lessons learned section for what might appear to be such a small effort? You might skip reading it, but I thought it would be helpful to share our experience.
The test domain was extremely convenient when moving from the picture only mockups towards the final design. But not every problem could be solved in advance, so the community feedback was a great help! Just be prepared for getting less sleep than expected...
It makes sense to only implement changes which have been discussed in advance. There was a time when several changes did go live which solved particular problems, but didn't fit to the whole concept. Just make sure that you talk with each other constantly.
The effort to improve the website was much higher than you might expect. Why? This was mainly due to Ivan's praiseworthy desire to understand all the reasoning behind the changes. It turned out to be absolutely positive, as he was able to provide excellent counter-proposals if our proposals missed the requirements of the website infrastructure. Did I mention to the importance of talking with each other?
Next Steps
Ivan has already done some work to improve the consistency between the OpenOffice.org website and the Wiki, but there are still some things to be worked on. The Website Refresh 2008 Wiki page, which also summarizes all the changes presented here from a technical point of view, proposes work be done on the language selection page, the navigation structure and visualization, the “My Pages” tab, etc.
But now let's take a deep breath and simply enjoy the new header design.
Finally, a big thank you to all the people who supported us and provided valuable feedback!
Liz, Ivan & Christoph
