UX Notes
GOING AGAINST THE RULES
User interface design often follows standard design patterns, but they're not always right for every project. Darren Shaw talks about the difficulties with maps and translation on a multilingual and mulitcultural project.
"We're looking to fix the interface and sort of make it a bit more flashy" is the kind of introduction I often receive when joining a new project. I'm not a graphic designer, nor any kind of qualified user interface expert. I'm not even really a proper front end developer, but over the years I've built up a reputation for working on web based user interfaces. The whole area tends to be considered as something of a black art, something that cannot be learned. While taste may be innate and there is little substitute for experience, there are tricks that can be used to create decent user interfaces. Be it in terms of usability or aesthetic appeal, using these patterns is how I’m able to cheat at designing user interfaces. The most interesting projects, however, are the ones where the patterns do not fit, where genuine innovation and ingenuity has to be used to create the interface. The sort of projects that Emerging Technology Services work on.
that spent two years working with them to get their application up and running. There were many technical and cultural challenges on the project, but it was the user interface that generated the biggest technical challenges, the most heated discussion and required the most effort from IBM and Meedan.
The meedan.net application needed to do two things, act as a matchmaker, bringing English and Arabic speaking people together and then translating between the two languages for them. We knew that just randomly bringing people together wouldn’t work, they need to have some context and basis to have a discussion in. We wanted to use world events to be this spark, be it internationally important news, or things with a much more local and personal significance to the people using the site. From the user interface side we needed a way to represent these events and allow our users to find them. Geography was such an important part Often it’s the patterns and experience of the whole idea of Meedan that dots from other websites that help to inform on a map seemed like an obvious place the design of new ones. Blogs, for to start. In fact Meedan’s original logo example, all tend to follow a similar was made up of map dots. interface design: a vertically scrolling list of date ordered posts; links to tags; If you were using the standard patterns links to other blogs; search bar. It’s a for an event site, or maybe a photo sensible design, almost a de-facto sharing site, dots on a map would be standard, which users are familiar with. your starting point. They represent the It’s not surprising that many sites follow data and people understand what they a similar theme. The same is true in other web application niches, be it photo sharing, news publications, help forums or social network sites. The majority of websites I’ve worked on are variations one of these existing classes, but occasionally you get to work on something completely different, where mean. So that’s what we did, the frontpa there is no existing pattern to fall back ge had a large Google based map, with on, that was the case with meedan.net. dots representing the events. Clicking through would take you to more detail Meedan are a US non profit about that event where discussion could organisation whose aim is to improve take place. The problem was the pattern. tolerance and understanding between People came to the the website and it the English and Arabic speaking parts of looked like an event site. The sort of the world. I was part of an ETS team place you might find where a band are
playing or where a conference is. Meedan was using events, but it wasn’t really what the site was about. In usability terms, the Google map didn’t offer the right affordances, it was not something users saw as a place to start a discussion. It wasn’t necessarily using a map that was the problem, it was that we were using the most commonly used map on the Internet.
Meedan decided that they wanted to look at using a 3D maps, largely as a way of differentiating from the thousands of other map based web sites. The "spiny globe problem” as it was affectionately known, became a contentious issue. While it looked great and would have attracted a lot of attention, it's actually less usable than a 2D map. You can't see all of the world at the same time on a globe, it's harder to make visual comparisons and how ever slick you make the controls, they can be fiddly to manipulate. The technical implications also meant that users accessing the site with older hardware or limited bandwidth (something particularly important when attracting people from some areas of the Middle East) would have had a reduced experience. Reluctantly we dropped the 3D map and compromised to a custom 2D map that would allow us to control the look and feel.
How do you mark “climate change”, or “middle east conflict” with a dot on a map? Where do you put it?
4
Emerging Technology News
Our early alpha testers highlightedanoth er problem with our use of maps in the interface. All the events they wanted to discuss tended to have a geographic location, but not one that could be represented by a simple dot. How, for example, do you mark “climate change”, or “middle east conflict” with a dot on a map? Where would you put