A little bit of UI design

While I am keen to make it understood that UX design is not UI design, now and then, I am asked to help design a user interface. During the summer, I was pulled onto a project last minute: “Can you help us with this presenter interface?”. It turned out to be an interesting little exercise, and the end result seems to be pretty good.

IMG_3475

Start screen from the control panel

Over the last 18 months or so, there has been a massive redevelopment on the Wellcome Trust Genome Campus, where the EBI South Building has been constructed. As I write this, the final touches are being put to the building ahead of its opening in October – landscaping, furniture construction, migration planning, etc.

Screen shot 2013-09-24 at 11.56.35

The original proposal (start screen). Others were more baffling / overloaded

One of the features of all the meeting and training rooms is a touchscreen control panel – the presenter interface. When I got involved, there was already something that the contractor wanted to sell for this project. It didn’t look great but importantly, the people who will actually use this (predominantly training course instructors and external speakers) were far from enthusiastic. I was asked to help out.

Understand the user and their context-of-use

So what did I do? I spoke to the people who would use it most often. I sat with them and asked them to talk me through what they normally do in terms of handling the lighting, the sound volume, the projector source, and so on.I also spoke to a couple of the AV technicians about their needs (obviously, rather more extensive and specialised than the average user).

Screen shot 2013-09-24 at 11.58.21

Sketches from my notebook – thinking about what might work, given the users and the context

I showed them all the proposed interfaces, and I sketched alternatives based on our conversations. This was some very low-impact participatory design, but it allowed me to quickly refine my ideas and get feedback from the people who would really use this.

Go on… why not include Amazing Feature X?

I had a meeting with the contractor that went a bit like this:

Me: Thanks for your proposals. After discussing them with the people who will use this system, here are some alternatives (talk through annotated sketches).

Them: Interesting. What about Amazing Feature X?

Me: Well, people didn’t understand what it was and anyway, their actual needs are pretty clear from the interviews we had.

Them: OK, but Amazing Feature X is, y’know, amazing!¬†

Me: It’s unnecessary and confuses an interface that already has to fit on a small screen

Them: Fair point. Well, I think we’re agreed that we’ll consider your recommendations and that we’ll definitely include Amazing Feature X

Me: Erm…

After which, another colleague (who used to be a contractor, and knows the business well) stepped into the fray and sorted things out rather effectively.

Annotated sketches that I talked through with the contractors and their developer

First draft annotated sketches that I talked through with the contractors and their developer

Eventually, I was asked to produce larger, more detailed annotated sketches of each interface in different states. These covered the four main things that a presenter wants to control, according to the discussions I had: projector source, lights, sound (volume), and the blinds.

In the end, this means that we have a user interface that really takes into account the needs of the most frequent users, whilst offering access (by tapping in a “secret” location on the touch screen) to the advanced features required by AV specialists. I’m really looking forward to hearing / seeing how my colleagues get on with it.

Adjusting the lights in the room

Adjusting the sound volume

About these ads

3 thoughts on “A little bit of UI design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s