The Web's visual language

Current interactions are far more complex than they used to be and will probably get even more tricky. However, the interaction language we use is finding it hard to cope.

This redesign I've been doing for Analytics SEO is coming on well but one thing about this and many previous designs has been nagging me.

When I first used the Web in 1994-5, interactions were simple. Links were (generally) blue and underlined and went to a new page. A button submitted a form. Form elements worked more-or-less as on the desktop.

But current interactions are far more complex. Take the live edit type interaction as seen in Basecamp. Here, an active element (most often text: in this screenshot, it's a date) shows an overlay when clicked on that allows the user to change the element. It's a very nice piece of interaction that helps do away with separate "edit" screens and server-side lags.

But this type of interaction differs from the classic click-on-a-link-and-open-new-page-in-this-window. It's all client-side so quick. From my experience researching non-technical users, some might miss this and instead opt to wait for the page to reload. Yes, this is possible - I've seen it in testing and it feels embarrassing for participants to wait only to be shown they got the interaction wrong even if it's not their fault.

But we do not communicate the different interactions to users. If I see a link, I have no way of telling whether a) this opens a new page in the current screen, b) this opens a new page in a new screen / tab, c) this opens an overlay, d) this sorts a table's column client-side, e) whatever else might be expected.

Most people seem to muddle through okay but, as I've found, some people just don't. This, I cannot help feeling, is a significant shortcoming of our field. We make these things. If otherwise intelligent people don't understand them, we have a degree of failure to our work.

Cognitive modelling

Introduction: This article is one I wrote some time ago about modelling cognition and never released. It's incomplete but might be useful to spur thought and conversation. I suspect that it's more about mental models - my concept of cognitive models were more functional and evidence-based.

What is this and is it useful to practical usability work?

Yes it is useful indeed. Most current work in usability (as in psychology) focuses upon things that apply to entire populations. We look for a site that will appeal to our target users.

But this doesn't take into account the fact that there are individual differences within our target populations. This is obvious for large populations: a site selling air flights will have almost anyone as its target. In this case, it's clear that people will differ not just in the characteristics that will affect their performance in booking a flight, but also in other characteristics.

However, even relatively homogenous populations, say a group of dermatologists using a tool in to diagnose skin diseases, will also differ.

But despite this, there are things in common, the main one being that they have a human mind.

This is useful for practical research because it means that usability professionals can concentrate on certain things about the mind that are stable across target populations to ensure usability.

The problem then is that understanding these things is extremely difficult. One way of capturing how a mind works is by using cognitive modelling.

There are many ways of doing this: some are simple and some are incredibly complex. Here I will discuss mental models and how usability researchers can understand them. I will use these because they are simple to understand and investigate with low-tech methods.

One of the seminal papers in the field was by my PhD supervisor, Professor Stephen Payne. He investigated the mental models that people had of cashpoint, or ATM machines. This work helped designers to understand how to make them simple to use for a wide section of the population.

His investigation method was simply the interview. He discussed ATM operation with users and found that they recruited analogies to explain the machine's operation. Quite often, people would even use several analogies even though they conflicted with others. I haven't read the data to this study, but let's take a hypothetical example.

Someone might view an ATM as a sort of one-armed bandit where they have to do some things and out pops money! Additionally, they may have thought of the ATM as a monster that "eats" cards if something is wrong.

For researchers, take careful note of the words that users provide when describing something. The key words for both of the above analogies would be something like "payout" (for the one-armed bandit) and "eat" for the monster. If you notice interesting terms like these being used, carefully try to question them closer. Be careful because if you make the subject feel stupid or self-conscious, they may clam up. Try to get across that you share the analogy but ask for further explanations.

Once you have the analogies, you can understand their mental models better. From these, you can work out some cognitive modelling by remembering that with experience, explanations of machines change from being parochial to something closer to the actual operation (in general: some people are fond of their analogies and don't like to change them).

Be good, always help

In some work for the Analytics SEO re-design, one of colleagues liked the idea of giving users some information from a drop down.

Okay, let's step back a bit. You know that on many sites in the top (and often right) there are links to various user account functions: things like the user name and avatar, link to my account, log / sign out, and so on. Well, DropBox put all of these into an overlay which is shown when the user clicks on their name. We had the same idea but there was a strong business requirement to make these links omnipresent. This meant no overlay because it didn't have any meaningful content.

However, my wireframe showed extra information: the user's full name and email address, how many sites they have, a link to the upgrade channel, and the links to account and sign out (figure 1). My colleague liked this and suggested that we offered more information about the user's account.

After some discussion, it was clear that our numbers make scaling hard. Some users will have (e.g.) a few thousand monitored keywords; others will have millions or tens of millions (I kid you not - we're enterprise software).

So the design had to clearly communicate the contents for a range of numbers - from single digits to 8 or even 9; and all contained within an overlay.

I also thought that each number could communicate a message to users so that they're warned if they're over their limits (and paying more than they expect) and also if they have unused capacity. Figure 2 shows the plan as it is right now. It needs to be validated against our business criteria (by business, tech and testing), and (ideally!) tested against users. We don't have a lot of resources, so it's guerilla testing for us!

The benefits of this design are:

• Users can get a quick overview of their plan and capacity - this information is otherwise hidden away somewhere in the 'settings'.
• Users are clearly warned if they're over their plan's limits (note: this isn't the only warning I have designed)
• Users can see if they need to upgrade or downgrade
• Users have a simple path to change their plan easily if needed
• Users can see what spare capacity they have before they incur further cost

Drawbacks:

• Users might not find it immediately (it's in an overlay) and not omnipresent
• It might encourage users to adopt a cheaper plan! Actually, this is okay with us. We'd rather have a happy customer paying a little amount for life rather than a big spend from someone who is unhappy

But from a quick eyeball, it seems to be quite nice and useful. Users are the true arbiters of that in UX so we have to wait and see... ;-)

I wonder if I'll be able to work any of this into the redesign of my main sites, Thought Into Design, and my own UX portfolio page.

Keyword Suggestions tool for SEO and market research

Part of my role at Analytics SEO is doing research. It sounds like an excuse to goof off and spend time messing around with natural language processing techniques, search engines and the like. And to be fair it is!

One of the first pieces of research I did was looking into the keyword suggestions offered by search engines. You know when you type something in and a drop-down appears below offering suggestions as to what your search phrase might be?

I wrote a little tool in Python to get these things from Google and Bing and we've recently released a tool for customers to get suggestions. I've had a bash with Google's Webmaster Tools API and found the suggestions there to be, well, shall we say a little odd and irrelevant to the websites I was looking for. In contrast, this new tool is awesome and offers some great keywords that could really spark a campaign.

The best bit is that our keyword suggestions can also be good for market research; and being a suggestion implies that a keyphrase is searched for.

In case you're curious, the main tool for developing this research was Python. The final version is hardened PHP because my code was research-quality only and not made for enterprise-quality use.

Pencil by Evolus - Review of a Wireframing Tool

Most UX designers I know are always questing for the next best wireframing tool. It's not like Balsamiq, Fireworks, Axure of whatever are bad; but UX designers, as a whole, spend an awful lot of time creating wireframes. Programmers: it's like the time you invest in learning a great editor or IDE. Yeah, the real work is done in our heads but creating an electronic representation is a core part of augmenting our work.

I tried Evolus' Pencil a while ago and liked it but saw that it had significant limitations at the time. I've had reason to revisit it recently as a part of my new job at Analytics SEO, and put it to work on a new project of redefining our core payment flow.

Pencil itself is open source and based around XUL, Mozilla's UI interface toolkit. This lies behind Firefox and other Mozilla products so it's been well tested in the wild. But unlike programming where open source tools have a strong position, this is not true in the UX world where proprietary software and standards are common. The major exceptions are probably Fireworks (which saves to PNG, an open standard) and anything saving PDFs. This has caused problems in real projects, like when half of my team had upgraded to 6.5 of Axure, the other half were on 6.0 and the client was on 5.5. Yes, there were ways around this, but the different standards for each version made extra for me.

Pencil can be used in one of two different ways: either a downloadable executable (the latest version is only for Windows and Mac OS X) or run it within Firefox. The latter way is how to run the latest version on Linux. This review comes from the standalone version on Windows and Mac OS X and the Firefox-based one on Linux.

Pencil begins with a nice open frame. It doesn't tell you a lot or lead you in too much. This can be good if a designer is willing to explore but might leave less adventurous / more pressed ones less impressed.

Pencil uses the concept of paper and web: the background is given in various paper sizes and common web page sizes including custom sizes which can be defined in pixels. Having both is useful and after all, why be coy about defining a canvas in pixels when we're doing web design?

The canvas on a page can have a definable grid but this grid will not sit on top of objects but always under. Some might find that limiting: it depends. Personally, I like it above if possible but it's not a killer.

Each piece of work can handle many pages. Each page can be differently sized. The file format is "Pencil Documents" and I'm unsure if it's an open standard. I would guess so because it's XML of some kind. Each page can be named and it's a reasonable way to document all of a workflow's wireframes with each page in a separate tab.

Pencil comes with a useful range of shapes including stuff like flowcharts and GUI widgets. You're all set to go on basic projects if you wish. Pencil, however, does have a community of people willing to contribute new shape libraries and some are quite useful. These include 'Sketchy GUI' (competition for Balsamiq) and some rather useful touchscreen images to communicate different forms of hand interaction.

Shapes can be defined by mouse or precisely including width, height, x-position, y-position and angle. Angle is useful, particularly with text - are you listening Axure? Only joking - I know that rotate text is available in 5.5 but it felt like a long wait to get here.

Everyday operation

I found it fairly easy to set up a base template for my company's interface. This would be used for minor changes, though we have a complete redesign of the IA under way right now which might well change things. This template can be used easily as the base for a load of other pages.

There were a couple of problems. I found that on the stand-alone Windows version at least, clicking on a Pencil file to open it showed a completely empty document. This was worrying because I'd spent hours creating it. Looking at it using a text editor showed there to be information alright. The solution was to open Pencil then go through the menu: File -> Open... and so on. The file opened fine.

One other oddity is that when you have several pages in a document, selecting all (either via the menu or control-A) selects all elements in all pages. This doesn't work in line with other systems. If you open a spreadsheet and enter data into several worksheets, using 'Select all' only selects everything on the current worksheet.

The grid works but I miss the fine control of Adobe's Illustrator. When I first used Pencil, I thought it was a minor point but it wasn't until it was missing that I realised how much I rely upon a well-formed grid to get layout pixel-perfect.

These are some issues that occurred to me when using Pencil for a large site re-design of Analytics SEO's main application. The results themselves, I'm quite pleased with: the process wasn't painless and a few issues were outstanding. They are not insurmountable and could be tackled.

A grouped object not showing the arrange option in the contextual menu

1. I could not find a way to arrange grouped objects. In order to change the arrangement, I had to ungroup, re-arrange the lot, then re-group. Curiously, if I select a grouped object and something else, I can then change the arrangement. My ideal would be to just allow arrangement like any other object. 
2. Direct opening often shows an empty document. This is worrying because I thought it had deleted hours of work when I went back to it. As it was, opening from within the program got everything back okay.
3. Select All selected all objects on all pages. Be mindful when you're deleting a page or even just moving all objects in one page - you might be moving a lot more. The normal operation for select all is just for one page (e.g., select all in a tabbed browser selects only the current tab's content, not all content in all tabs; Speadsheets only select the current worksheet not all content in all worksheets).
4. Treats the enter key  as finishing editing a widget which makes entering new rows into a table tricky. Balsamiq has a nice solution here of using the enter key to create a new line and uses a click outside to complete editing. I understand this is somewhat inconsistent when compared with how Balsamiq treats text input / text field where the enter key completes editing but at least I can enter new lines easily where possible.
5. Cursor keys finish editing rather than moving the cursor left to right sometimes. It's possible to re-position using the mouse which is less precise, slower and more difficult if the text is partly obscured by the editing widget. I'd like to use the cursor keys to navigate the content rather than having to position with the mouse.



Text partially covered by a formatting widget. Using arrow keys doesn't navigate the content either: it ends editing.

6. Editing widget partially covers text being edited. This was only in the Firefox-based version. I'm not sure if it's a XUL issue or not.
7. Objects sometimes refuse to re-size. Closing and reloading the file doesn't work either. My solution is to copy and delete the old one but this often requires re-arranging the object's order.
8. When resizing or replacing an object using the 'Location and size' control, tab moves between graphical objects rather than between fields. It also doesn't submit the value. Enter does submit but doesn't move fields. Ideally, this widget would be treated like a form: tab goes between the fields and submits changed values, enter just enters a value and closes the widget unless it's permanently displayed.
9. The position and size fields are very useful to have on-screen all the time: Some Adobe products let users display them permanently (e.g., Fireworks) and this would be a really useful feature.
10. Moving an object's arrangement seems to require using a context-sensitive sub-menu: no keyboard shortcut is apparent. This is very slow when an object needs to be moved lots. A quick keystroke to move up / down would be much quicker for changing arrangement.

Overall, I've enjoyed using Pencil and it shows real promise, particularly as a competitor to Adobe's Fireworks or Axure. Open Source has yet to come up with something as capable as Fireworks (and no, it's not just a weakened Photoshop - you can create states and export to clickable prototypes). This alone makes it very exciting for me. The outstanding issues, however, make me feel that it's not quite ready yet for prime-time wireframing though it could well be there soon.

User Experience with Open Source Tools

This must be my third week using open source tools for user experience and, to be honest, the experience has been okay. The tools are mostly extremely capable - the most impressive tools were for statistics (R and PSPP) and Pencil, a rapid wireframing program.

My work has lately been data analysis: I've been comparing a tool from my company against competitors. Coming from a background in psychology with a post-doc in education, the best way to investigate was, to me, to use Cronbach's Alpha, a test of reliability (or internal consistency if you prefer). In short, this takes a few different ways of measuring something and asks, "Are they measuring the same thing?" If they are, then the scores from our tool and those of our competitors should vary by the same amount at the same places, and indeed we found that they did.

If anyone's curious why a UX designer is doing statistical analysis, well, it is one of our core skills. We have to be numerate to understand data like analytics, experiments and the like. To me, it's probably a more important skill than drawing which is a contentious point. I would, however, prefer to design something that works well and looks poor rather than vice versa. It's fairly easy to make something look okay but the converse - well think, "lipstick on a pig".

Using PSPP (an open source version of SPSS) was quite fun, particularly as the GUI is working quite well. It was a fairly simple task to run up the test and check the results which showed that between us, it was the "industry standard" who were the odd ones out. My next bit of work is checking why they are the outlier which is a whole new article.

Other work included creating icons with Inkscape. These had to be crunched to 16x16 PNGs, and they turned out alright. I cannot imagine using Illustrator and doing any better and it felt like I was the biggest limitation of quality output which is the sign of a good tool.

The GIMP has problems. It's layer model differs enough from the Adobe Suite (I talk as if there is a consistent model amongst Adobe's tools) and I was dismayed to have to learn another way of doing things. My ideal is the Fireworks model which I get pretty well even though I've used Photoshop for many more years.

Pencil is a great wireframing tool. It can do the Balsamiq variety cartoony-type wireframes but can also handle higher fidelity ones. Appearing from version 1.3 upwards, the grid makes a big difference to layout and the results are as good as most things I've used. The interface feels less messy than Fireworks though there are fewer effects to polish things off. I know some designer will get hot under the collar and insist that wireframes are throw-away documents and the more scratchy and crappy-looking, the better; and this is so for most occasions. But there are times when higher-fidelity mock-ups are necessary.

I actually hold out hope for this tool and will consider making a donation to it in the hope that it continues. I wonder if I can convince my CEO to make a company donation... ;-)