DigiKev » Interface

BumpTop, an Ephemeral Space?

Kevin Rapley — Thu, 05 Nov 2009 17:48:44 +0000

Whilst searching the new features available in Windows 7 I happened across BumpTop, showcased at the IBM sponsored TED conference. It works in a Windows 7 environment so I downloaded the free version to see whether it a gimmick or a more transient way to organise workspaces. What attracted me to BumpTop was not the 3D environment, but the way items on the desktop are given emphasis and hierarchy through making them small or large. They may also be grouped into piles too just like stacking sheets of paper on a desk. This doesn’t mean you then have to destroy piles of items to retrieve files; piles can be fanned out, flipped through like a book or displayed individually within a container whilst choosing a file. As well as being able to delete items to the trash can, in BumpTop files can be screwed up into balls and thrown about the space. Whether I will use this feature much is to be seen. It may provide a secondary way to store those small notepad files that I may need to keep but not too certain about yet.

The 3D environment of the desktop, shaping it into a room, not only looks great and feels like a tangible space to place items, it also provides a lot more space too with the ability to ‘hang’ stuff on the walls. Items may also be hung on walls outside of the regular camera shot, making them viewable only once the wall is in focus.
This type of interface that takes inspiration from the real environment around us really appeals to me. The designer of BumpTop feels the same; he wanted a desktop which behaved like his real desktop at home. I know where I place items on my desk at both work and home and they are easily located. The ability to be able to pile items into stacks, resize them to give more or less emphasis and hang them on the wall as a picture or in shelves is brilliant. Files are no longer made equal and confined to a regimented grid layout. Personally I think this makes items more personal which will in turn make them easier to find later. If this sounds too loose to you, BumpTop settings can be adjusted so that files are placed in a regimented fashion.

BumpTop also provides the ability to zoom in on areas of the desktop. Let’s say I am working on a certain client for the day. I have grouped a number of documents I require into a pile and written some sticky notes of items I need to consider. I create a new photo frame which pulls in an RSS feed of a tag of my choice from Flickr for inspiration. I move all of these items into the corner of the space and zoom in just on this area. I have all my other items still on the desktop but currently my focus is just on the items that I require for today’s task. Now that is progress. But hang on a minute you yell, sticky notes? Photo frames? What the ‘eck are they? Intrinsic to the BumpTop environment is the ability to create sticky notes which is quite simply a notepad file which displays its text on a scalable, editable icon. Photo frames are very neat. They may be set up to display image files from any folder on your computer or via RSS from a photo sharing website such as Flickr or Picasa. Photo gallery cycles through images every few moments, rescaling to accommodate size and perspective from landscape to portrait and vice-versa.

Here I am discussing all these neat features I like and I haven’t described the most fun one yet, which gives the desktop its name. You can literally throw items across the space, bumping them off one another and the four walls. Larger items are given more weight and can smash smaller files around the place while a small file cannot move an item grossly bigger than itself. Again, all these settings can be adjusted so that files don’t cause too much damage when dragged around the desktop by limiting the ‘bump-ability’.

I have been reading a number of articles of late about next gen interfaces and how some are looking to mimic the world around us more closely. BumpTop goes a long way in achieving this. I have read about some interface designers attempting to bring age into items. For instance, steel boxes becoming tarnished and eventually rusty over time. BumpTop allows you to ‘dog-ear’ corners of files to mark them as to be addressed later. However, adding age to items would’ve been a nice to have.

Having played with BumpTop for a few days now and getting to grips with the features and how it can be used in my day-to-day workflow I really feel it is a worthwhile asset. At only $30 it is not to be sniffed at either. I am sure the functionality on a touch screen with gestural interface technology to arrange the desktop is awesome, but even with a traditional point-and-click mouse it’s a lot of fun and will assist me in keeping organised.

Sorry my content pages are lame…

Kevin Rapley — Thu, 18 Jun 2009 08:55:10 +0000

I listened to a boxes and arrows podcast episode yesterday entitled ‘Content Page Design Best Practices’ which is a recording from a conference talk hosted by Luke Wroblewski. It was a real eye-opener. Over the coming weeks I am going to be optimising my content pages so that they are more efficient in the context of the broader web as a whole. My content pages aren’t usually accessed through the home page, most of you search for something and my website shows up in your results on that search term and then you land on one of many content pages.

Here is the podcast episode for you to listen to

Download ‘Content Page Design Best Practices’ episode

I have implemented one of the recommendations by Luke immediately. I was actually pretty shocked at what I am about to tell you. I was listening to the episode and Luke described how so many websites give so little screen real estate to the bread and butter of the page. The content. He mentioned how some websites expect the readers landing on content pages to engage with the content and have trust in it, yet they only give the content 25% of the screen real estate – or less!

When I heard this I was thinking to myself, ‘Yeah that’s not me, I put a lot of emphasis on my content. It’s a large block with a small sidebar of sign posts to my RSS feed and my social media goodness around the web. I’m alright Jack.’ So, I take a screen grab of DigiKev working on the basis that the majority of my visitors are using 1024×768 pixel screen ratio and bring it in to Photoshop to do some measurements on how much percentage I actually give my content in relation to the rest of the page.

The figures were in, there in black and white I saw the following:

1024×768 = 593609 pixels
of which 162870 pixels are given to the main content block.

162870 / 593609 * 100 = 27%

Uh-oh, I thought. 27% is not very good. The problem was that on my content pages I was providing a breadcrumb which was eating too far into the vertical screen real estate. I had plenty of margin around this though so there was lots of room for maneuvre. I have a rather large masthead which contains my branding, art work and menu structure. I like the impact of this and I feel it gives a good impression about who I am and the skillset I own.

After editing the page to shift the content and breadcrumb up I recalculated the percentage of page given to content:

195200 pixels dedicated to the main content block

195200 / 593609 * 100 = 32%

So I reclaimed an extra 5% of content relevant to the page, still not great. It could go further and it shall. I plan to either replace or reposition the side sign posting to be replaced with more relevant content to the subject of the page. This will reclaim a large proportion of the page to content:

297290 pixels dedicated to the main content block

297290 / 593609 * 100 = 50%

This will be a vast improvement by reclaiming 32% of the screen real estate to content. Content is key, we really need to make certain that we make content the hero of the page. It is of course what people visit our sites to consume. Try the sums yourself, give your content a healthcheck. What percentage are you dedicating to content?

Iterative process and the need for play making in design

Kevin Rapley — Mon, 08 Jun 2009 21:57:55 +0000

Traci Lepore has just written her article Putting Together a Production: A Rehearsal Strategy for Design for UX Matters. Intelligently, in a captivating and easy to follow manner she likens design iterations and the need for an iterative process to her own personal accounts of being an actress. She has to learn the lines while getting over her own shyness and discomforts in order to work through the initial stages of what is required of her. Soon the shyness disappears and the acting refined over several iterations. The iterations are play making, trying out new ideas and discarding those that fail. This creative space for trial and error is essential to the refinement of the final play. This cycle, as she depicts through flow diagrams, is a helical process rather than linear. The steps in taking on board what is required, learning the script and refinement of acting are completed over several iterations, it is then up to the director and audience to judge.

Too often project scope constrains a linear process on web design. Qualitative and quantitive market research results are outputted to persona creation. Persona creation in turn output to user journeys and flows. User journeys and flows develop site maps and wireframes. Wireframes become prototypes and design scamps. Before we know it, the website is coded and pushed live. Let us just break this linear approach. Let us iterate the design processes and not be scared to revisit a step and feed new ideas and information back into the production. What needn’t be in the design at all? Iteration will refine and develop an idea into a solid concept.

I have been getting excited about comic prototyping recently and how it has the ability to reflect the feelings and aspirations of the end user to the client. Rather than emphasis on the interface and placing it centre of attention based on analysis, comic prototyping is end user centric. This, in my opinion opens up new design avenues. And, because the fact that what is being created is a comic, an understanding of the values, aspirations and feelings from using the interface rather than the product itself, it encourages the notion of play making. The comic prototype will never feature in the final product, the end user will never see it. There is nothing precious around the prototype and it feeds into the further iterations around the design process. I believe this is a good place to start to get the iterative process working but we must try and continue this throughout the lifecycle of the design too. But when should we stop? Until the product is at a stage where it is suitable for production? Or time and budget restraints are exhausted?

Advertising gestural interface

Kevin Rapley — Mon, 08 Jun 2009 13:19:27 +0000

Birmingham based agency Clusta have coupled together with CBS Outdoor (outdoor billboard advertising company) to produce a truly unique interface. It engages iPhone users with advertising LCD screens, allowing them to control and change the advertisement on screen via gestural interactions through WiFi or 3G connectivity on their phone.

According to Brand Republic:
By swiping in either direction on the iPhone’s touchscreen, users can make the object in the digital poster spin to the left or right, and users can also make the display change colour.

Also by using the “pinch” and “stretch” finger gestures on the iPhone, consumers will be able to zoom in or out of the object displayed on the screen.

I know that it is a shame that this is currently limited to iPhone owners but according to Clusta this technology can be developed to work across all smart phones. It will be interesting to hear over the coming weeks what the take-up and interest is like in this type of advertising in London where it is to be put to trial. At the moment I feel being able to zoom in on a product, spinning it around and changing the colour would be very useful if say you were looking at an advert for a new trainer where you can get a total 3D perspective and change colour options. But, unless the technology becomes more intelligent to give the user a more engaging experience this could just become a gimmick.

What are your thoughts? Do you think this idea will take off?