Dublin, Ireland
+353 87 41 86 742

Focusing on the Screen

It turns out that lots of RSS feeds contain graphical images. I checked Sky News, The Guardian, Time magazine, WSJ etc. There is so much additional graphical content out there in these RSS feeds which is not being used. The problem is providing this information in a usable format on a Nokia phone, and Nokia have buckets of phones, all with different screen sizes. Supporting all is a lot of work, but that is when a press release changed the direction of my effort yet again.

The Press Release
The It was getting on for mid June, and I now had my basic concept locked – I was to focus on a new, and more entertaining way to display news, based on sources or RSS “feeds”. Making a graphical user experience of the content meant I could re use the graphics engine I had created for TextQuick2. Put simply, doing fades, transitions, animations, loading images, and scaling on Symbian is not easy. The standard Symbian (S60) UI frame works pretty much lock you down into using a small subset of controls. The problem is that most applications tend to use the same set of controls, making them all looks the same. Venus was a break from this allowing me to do more graphical interfaces, but it is a lot of work. To really get going on the project it would be great to have a fixed screen size.

In June, Nokia announced release dates for the new Nokia N8 devices. The press release said that this is to be Nokia’s next flagship device, and this device is to have a set screen size of 340x640, with no flip out keep pad and full onscreen controls. Checking out the early videos on you tube I had the perfect target device for my application. Now, all I have to do is make an application which does all that I want… but I didn’t know exactly what I wanted, nor if the graphics engine would be up to the task.

Screen scribbles – first designs
With the screen size locked down I could do go headlong into creating my application. It is very tempting to start coding straight away, after all for many people that is the fun bit. But doing this is like a builder laying bricks without any idea of what the finished house is going to look like. In fact you’d think that the first thing I’d do would be to start sketching, but it wasn’t.

The experience then the image
I started off by thinking about the experience I wanted someone to have using my application. What did I want them to feel while using the application? What would they want to get out of the application? I came up with a list of the top types of experiences or feeling I wanted to provide:

Accessible
I would like the application to be accessible to the average user. This means avoiding complicated screens with multiple menu options, having to log in or create an account. It means no typing in of long URLs (feed addresses – “http://www,,,,”)

Informed
I’d the the application to make the person using it feel informed. They should have all the information they are interested in presented to them all on one screen (if possible). The user should be able to take a quick look at the application and within a minute or so have got all the top headlines or news stories that they are interested in.

Grounded
I wanted the application the ensure that the person using it felt grounded. – “Grounded?”  - I hear you say… let me explain, I’ll start with a counter example, something I imagine most of us have experienced in the past. Imagine using a program on the PC, or on a mobile and a screen appears, just flashes in front of you. It asks you to give some information, then another screen appears, and then another. After a few of these you have simply no idea where you are or how you got there. I wanted to try to avoid this and to ensure that if something was presented to the user then they would know where it came from, and why it was there.

Cartoons… erm I mean scribbles
It was only when I had these concepts or experiences down that I started to scribble. I spent a lot of time working on the basic designs. I knew I wanted to keep an image and a caption together. The caption would be the title of the news story. With just a rough approximation of the screen size I sketched out some user flows, showing what screens or stages the user would see in the application. Starting from something rough and slowly building it up.

Rough doddles on paper:

image

 

More structured doodles:

image

 

With a rough idea of the application structure I then started on how the main screen, the guts of the application should look. I initially focused on having all the stories from a source displayed in the main screen, and a selection bar at the bottom allowing you to switch between sources. Using an example headline just used as way to work out rough sizes I produced the following early designs.

image

However I ended up dismissing these. Why? – Well I wanted to user to be informed quickly. Having the stories sources separate means that the user has to click to swap between them. They are unable to glance at the screen and get an overview of all the available stories. This led me on to the next sketches. I started working on trying to get multiple story sources on the screen at the some time. Working on two concepts. The first was to have all the stories from all the sources together in one screen. At first I thought this was a great idea, after all this is how Google Reader works. But I realised then that I would also need to have markers on each of the stories saying were it was from. I though about the following event. Assume that there is a big news story, say Ireland and England both get through to the world cup final (unlikely I know). But let’s just assume that this happens. Well, then Sky News will be full of stories about the big match, as would the BBC, ITV, and some of the Irish news stations like RTE. For someone with multiple news sources they are going to see the same stories repeated multiple times on the screen. Imagining starting my application and seeing 20 stories all at the stop of the page all about the same news event. That would be a pretty boring experience, and it doesn’t sound very accessible, in addition I would use up extra screen space to mark each of the stories with where it was from (BBC, Sky, RTE.. etc). That didn’t sound like a great use of my limited screen space. There had to be a better way.

Folders (almost news folders)
I started sketching out how to get many news sources on the screen. The following looked good – a folder based structure with with each folder containing stories from one source. You could slide left and right through the stories within the fo
lder, and then up and down between the folders. That way you could at a glance get an overview of all the news headlines. This sounded the most accessible, and interesting approach yet!

image

But how would the user do all the important tasks of adding or removing a new source? That was the next challenge!

No Comments Yet.

Leave a Reply