DigiKev

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.

Step into Agile UX

Kevin Rapley — Fri, 30 Oct 2009 09:05:23 +0000

At work there are a couple of projects being run in an Agile project development process. This appears to be geared towards assisting the developers in achieving the best results. I say appears to be as I am new to Agile and its processes. I haven’t had the opportunity yet to experience an Agile team first hand but have caught snippets from our UX design meetings. I have also been reading about Agile and SCRUM on Wikipedia and some members of my team have sent across useful documents and blog posts of how UX fits into an Agile environment.

I was surprised to learn that at present there are few, if any, books written on the subject of UX in an Agile environment. But this is to be solved pretty soon. Anders Ramsay is currently writing (or has written and is now in an editing stage) a book on this very subject which will be released soon. Louise Ventris, our UX Team Lead has also recommended that I grab a copy of ‘Inmates Are Running The Asylum’ by Alan Cooper. I hear this is a very good read, even if not strictly about Agile.

What would we do without Twitter? How did we get such informed and brilliant leads before? I asked the Twitterati whether they knew of any books or must read blog posts or resources on UX in an Agile environment. Miles Rochford, my mentor at the IxDA put me in touch with Johanna Kollman who he described as his Agile UX guru. Johanna told me about Anders Ramsay and also the Ning group Agile Experience Design Organisation. Nick let me know about a Yahoo! Group called Agile Usability. Ian Fenn also mentioned Anders Ramsay was writing a book and Jeff Patton is releasing one on the subject next year.

Thanks to everyone who supplied me with resources, I now have lots to study and some upcoming books to look out for. My Agile UX bookmarks are tagged with ‘agileux’ in Delicious.

Beef up your gutters and put your columns on a diet

Kevin Rapley — Thu, 29 Oct 2009 08:11:31 +0000

Thumbing through the UK version of WIRED magazine the other day made me realise that online there is very little experimentation or use of quirky or edgy layouts like we see in print. What I mean by this is most layouts online tend to be safe. They express a certain conservative nature with uniformed gutter sizes and content columns of same or similar width. They don’t evoke any emotion. Reading WIRED provokes emotion; each article has its own identity and style related to the content. One column may be far slimmer than the next with a gutter between them that you could drive a tank through.

Guilty M’ Lord. I employ such conservativeness in my online designs too. Scouring other websites for inspiration only, without input from other disciplines or stimulus from the world around us can be an awful trap to fall into. Too many designers appear to be doing so and it is now the occasion to call time on this practice. Web design is such a young discipline, don’t play it safe – do as great graphic designers have done before us. Experiment. Create harmony, create conflict, and whatever you do be creative.

I plan to experiment more with typography and layout. Firstly I will be digging out my old graphic design books, possibly buying some more and replicating some of the layout techniques in HTML and CSS. Web designers will be aware that technical restraints can give us limitations that print designers do not face (they have their own set of restraints). It will be a task of experimenting with what can be achieved in layout with HTML and CSS, exploring that edge first. And then reigning it in to what can be achieved with considerations of browser deficiencies, optimal screen resolution for audience majority and how layout sits within the heuristic factors an interface should abide by.

There is no reason why good layout cannot be used commercially, in a content managed system or otherwise. So why have so many, me included, been playing it safe for so long? I am going to push the boat out today and design an 80px gutter. Strike me down.

A UX perspective on Dubai

Kevin Rapley — Mon, 26 Oct 2009 08:06:17 +0000

I have returned from a week’s vacation in Dubai visiting my sister-in-law and brother-in-law with my wife. It was a mind blowing experience seeing such a young, yet highly developed city rising out of the deserts of the United Arab Emirates. Dubai has adopted a ‘no-holds-barred’ approach to architecture where seemingly structures and buildings rise out of the sea on reclaimed land. What I found fascinating and completely different to any other city I have visited is how Dubai groups and labels alike businesses, institutions and amenities. For instance, if I were to be visiting the offices of a local or international newspaper then I would be heading for Media City where I could find them all in the same locale. We drove past Internet City which housed side-by-side no less than Microsoft, Hewlett Packard Invent, Cisco, Oracle, 3M et al. I also spotted Festival City as well as a number of other areas either named City or Village.

Taking a UX viewpoint, this makes a lot of sense. Both local inhabitants and visitors of Dubai can orientate themselves quickly and easily in relation to these landmarks. If they are looking for something specific which is housed by one of these area taxonomies, they not only experience the brand of choice but also related brands as well as those in direct competition. You can imagine how this grouping would work on a website. Choosing a top level navigation item labelled Internet Businesses would allow you to arrive at a page which offers the entire Internet based companies within the area. An aside column could present businesses which are related to the Internet based companies such as electronic device manufacturers. If I were to select a Microsoft specific page the aside column could then reflect both competitive businesses and related industries. The experience and user journeys available are far improved when you can see exactly which companies are housed within the area and how they relate to one another.

I can see how complimentary businesses can offer an overall better experience to customers and businesses alike. But, it would be interesting to explore and know how those companies in direct competition work together living in such proximity. Does it create a sense of community where knowledge share is ubiquitous? Or, does it make them work harder to establish themselves as the thought leaders in a big game of cat and mouse?

Web typography discussion

Kevin Rapley — Sat, 17 Oct 2009 11:40:12 +0000

I had a good conversation with Michael Wood yesterday whilst I was writing up a document on why I felt our design team, going forwards, should be using Cufón instead of sIFR for text replacement. Michael pointed me in the direction of a couple of sites that were inspirational to him and put forwards the argument that he has read too many times the cussing from web designers complaining about the lack of typefaces available that are considered web safe. Safe fonts are those that are regular system font installations for either PC or Mac. Those same web designers that complain could in fact vastly improve the typography of their sites by learning typographic skills. When looking at their personal website and sites that are in their portfolio it is clear to see that they haven’t mastered the art of type setting for the web.

Rather than calling web safe font’s ugly typography and search alternative typefaces and methods to deploy them, designers should first develop type sensitivity. Is their a vertical rhythm to the typography on the website? Are you using a typographer’s scale? Is there a clear hierarchy of H1, H2, H3, P tags? Does the leading (line-height) require increasing or decreasing? Is the kerning (letter-spacing) normal or would it look better with more or less pixels between each character? How about the amount of words per line – comfortably for reading online we should use between 11-14 words per line for passages of type. Have you uncluttered the guttering yet? A larger gutter between grid columns can improve readability and the elegance of typography.

Using the fine adjustment techniques above, the clarity and beauty of the web safe typefaces we have available to us becomes clear. Even the use of emboldening and emphasising key typographic areas can vastly improve an otherwise uninspiring type set for a web page.

This won’t of course stop me from hunting down new typefaces and ways to deploy them online. Each typeface tells a different story and assists the branding. However, this is food for thought and all the necessary type setting techniques should be used in conjunction with the chosen typeface. Simply replacing system font text for a sassy typeface just because you didn’t like the look of the system font is plain lazy and without skill.

Another point Michael made which I shall leave you with is that some of the best typography uses just one typeface. Take a look at this example Michael showed me for the Seed Conference. This site makes excellent use of uppercase, emboldening, italics and all of the techniques I mentioned previously with just one font, Times New Roman. The hierarachy is well defined. I would argue that Times New Roman isn’t a web safe font. It is a system font, but designed for ease in reading of printed documents. Legibility of this typeface at small sizes on screen is poor.

Commuting without breaking your back

Kevin Rapley — Thu, 15 Oct 2009 07:11:02 +0000

Today is Thursday and I have been commuting to Sheffield from Birmingham since Monday. I thought this week was going to be really tough. A bedding in period. Surprisingly I have got into a good routine of preparing everything I need the night before, going to bed early and feeling (relatively) fresh when I rise in the morning. The train journey has been painless so far (touch wood) with no delays or cancellations. You’ll probably have noticed that in the free time I have been able to write a blog post Tuesday, Wednesday and today. I have felt fresh at work and been very able to read TechnoPhobia’s extensive and well documented methods of working and breakdown on clients. I have even completed some billable work, get me!

That’s the update out of the way. Now the reason for this post is to describe how I carry all my stuff to work that I wish to take with me without breaking my back. I have a long commute and I like to stay digitally connected to the world and be able to do things like writing posts. I haven’t joined the netbook revolution yet and carry around with me my Sony Vaio NR32 with its 15.4” screen. I have to bring its battery pack too. I am on a train so every now and then I drop connection as we travel through somewhere remote or a tunnel. I have magazines and books with me to read during these times. I also enjoy eating so having some food to munch on when I get hungry helps too. Being a web designer at a digital agency usually means I am carrying around various notepads, sketchbooks and a variety of pens. This all starts adding up to a fair amount of weight.

For a long time I was travelling with all this stuff in a laptop bag ala messenger bag style-ee. This was crippling. I forget the amount of times I pulled my back out of shape the day after a heavy load. With the new job I thought it was about time for a new bag to carry all my shit. I opted for a Karrimor Kodiak 35 litre capacity.

The Kodiak is a proper weekend pack with plenty of room. The reason I chose this pack was that the description told me that the top opening was wide allowing access to the main compartment which would easily store an A4 folder, making it ideal for commuters and students. Yes, I bought it online. It certainly accommodates my laptop plus a lot more. I can easily carry magazines, folders and A4 pads without an issue. The other compartments allow me to store the laptop battery, cables, a flask and food. There is also a hydration compartment which accepts my 2 litre Camelbak reservoir and feeds the drinking tube out through a small port on the side and then slips under a couple of retaining straps on one of the arm straps. Lovely. If it decides to piss it down, which it normally does in the UK from time-to-time, stowed away in the base of the pack is a waterproof cover.

There is no doubting it is a large pack but it doesn’t feel like a chore to carry around like the laptop bag did. Anything that keeps my back from tying itself in knots and allows me the luxury of carrying a lot of kit too and from work is a godsend. You never know, I may bring my running kit to work too and see just how bad these hills are around Sheffield. I saw Aubrey coming back from a lunch time run this week and learned we have a shower available in the building – so what the heck, why not?

Just pulled into Derby station, guess what? It’s raining…

Working Smarter: Standardise your code

Kevin Rapley — Wed, 14 Oct 2009 06:53:40 +0000

In my previous post about keeping a code snippets library I eluded to the fact that within this file structure I had created a number of HTML skeletons which give me a basis for beginning a new project. It removes the medial task of creating a container

and the usual suspects of a header region

, content area

and

. I tab indent my code for easy scanning too so shaving off the few minutes laying these out correctly along with other items that may get missed within your such as common . I took my skeletons a bit further by adding in unordered list items for the menu area, aside and footer. These may not all be used but it is quicker to delete than it is to type.

Beginning in this way means I’ll use the same taxonomy for the naming convention of classes and ID’s across multiple projects.

I also work in the same manner for my global CSS document. I keep this stylesheet semantically written and looking very tidy, grouped by the regions within the HTML markup, so, for instance ‘Header’, ‘Content’, ‘Footer’. Within a commented area at the top of the document I detail this structure and other useful document meta data such as the colours used in the design, when I wrote the document and when amendments have been made. Rather than going into too much detail on this I will instead direct you toward Jina Bolton’s extensive post on creating sexy stylesheets.

So how does this help? If you’re working alone then it means that you’ll be standardising your working convention which will help when you return to projects in the future for amendments and updates. You’ll instantly be familiar with the code and its structure. Employ this in an agency environment or within a team of designers and you can pick up each others projects safe in the knowledge that it will be familiar too.

I have been working in this way now for around 2-3 years and I wouldn’t go back. Of course there will be the odd project that breaks convention and has to be structured in a different way in order to make it behave – in these instances try to keep to the usual formatting style as closely as possible and comment your code well for the abnormalities.

Working Smarter: Keep a code snippets library

Kevin Rapley — Tue, 13 Oct 2009 06:45:43 +0000

I have fallen short on this until recently. I had a number of production websites I had worked on with different techniques and interface design patterns which I knew where certain code was and could access to copy and paste bits out for editing. This is not the most efficient way to work as code still has to be found within the websites file structure and usually it has been highly customised for a particular job. It is better to store code snippets within a dedicated directory. I have been building mine over the past five or six weeks. As well as code snippets, I have taken it a little further and added a design patterns folder which contains anything from a simple menu to a JavaScript library driven carousel or image gallery glider. Each design pattern has its own folder and within it all the necessary documents to make up a working example: HTML, CSS, JavaScript, image assets.

I have also taken the opportunity to delve deeper into the –webkit and –moz proprietary CSS extensions code, as well as all the exciting CSS3 transforms animations that I hope will be in the final CSS3 standard. As well as this I have documented all of the available browser filters on hand to enable web designers to hack their way through browser discrepancies. Most are valid CSS, some are not but I have added a strong warning to use conditional statements and check your code before deciding upon this approach.

Within this code snippets directory are various examples of HTML skeletons too which can act as a base for beginning a project. In my toolkit so far is a XHTML Strict, XHTML Strict with ARIA, HTML5 and Wap doctypes.
Notice how I referred to it as my toolkit in the previous paragraph. Web designers should keep their tools clean and neatly in a toolbox. Having a dedicated directory available to you with working examples will speed up your development processes. I will be sharing my own code snippets library shortly in a code repository of some description (watch this space). I will continue to update this as I refine my code and add new patterns and processes.

I am a TechnoPhobe

Kevin Rapley — Sun, 11 Oct 2009 16:22:56 +0000

It has been a while since my last post and for good reason. I have moved on from HRO’C as my wife, Gayle, and I are looking to move to Lincoln. Why Lincoln? We got married there in April because we love the city and the surrounding area. My parents and aunt and uncle live in Lincoln too. We are looking to put down roots in Lincoln and start the next chapter of out life together and start a family.

To aid this move we have had to find work in or around Lincoln. I have been given the fantastic opportunity of a Web / UX Designer position at NMA Top 100 agency, TechnoPhobia. Now, they are not based in Lincoln, nor are they in the same county … or region. They are based in Sheffield. We haven’t moved to Lincoln yet so from Monday I will be commuting from Birmingham. Luckily the train journey is not much longer in time than it will be from Lincoln. Also TechnoPhobia are a 2 minute walk from the station.

Commuting by train will be good – I am so pleased I am not driving, that’d be another story. I am looking forward to using the train journey as my time to read, tie up loose ends with work, blog, listen to music and catch up on podcasts. You never know, I may use it for the odd kip on the way home too! I have gotten some sound advice from colleagues who have commuted for years and I have to get myself into the mindset of the journey being my time to myself. One of the worries I had was putting my time of arrival in the hands of whichever train company I will be travelling with. I have been told that I shouldn’t stress about this. It is ultimately out of my hands and what will be will be. I think this is a very pragmatic view to take, I can’t control delays and malfunctions so there is no point twisting your mind over it or allowing it to change your mood. I am however going to be catching the early of 2 trains that get me into Sheffield on time. How much of a safety parachute the second train will be if the first is missed or goes wrong is to be witnessed.

I would welcome comments on your own commuting experiences and how you pass the time or make it your own. What problems have you faced and how did you overcome them? Post in the comments below or send me a tweet @kevin_rapley. I will share any insights on this blog of how the commute is for me and what I do with my time.

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?