Archiv der Kategorie ‘Interface Design‘


Realitus wins Interactive Media Awards for 2010

In July 2010 Realitus were awarded the an IMA award for the design of The Watch Hut e commerce website. The Interactive Media Award (IMA) is the most prestigious of international awards for web design. The reason is that the IMA does not focus on coding issues, but addresses user focused criteria that impact on how effective a website from the customer’s perspective.

The website was designed substantially throughout November and December 2009 and then technical issues and development flaws ironed out with Netsposure, the site’s developers. The site launched in June 2010 and the award was made only six weeks later in July 2010.

David Yates, of Realitus, the designer of The Watch Hut website said:

My starting point was a rather frightening set of challenges. I first realised how much detail there is in some watches, how many technical features, stylistic considerations, sizes, colours, materials etc. not to mention price bands, and brands. You then have to multiply that by six thousand watches to arrive at the enormity of the task. And the question facing you is ‘create an interface so that people can navigate through all of that and choose the right watch within three clicks’. I realised that a selection and purchasing interface for The Watch Hut was going to have to incorporate some new and very radical ways of doing things.

So, when I redesigned I had to find a way to provide, in a single simple view, all you need to locate, explore and examine any of 6000 watches, from Tag to Swatch and everything in between.

The design initially focused on the the product page. This is like no other purchasing interface on the web. It is a purchasing dashboard containing all the information you could ever need from: 3D video; large images, specs, ordering information, advanced navigation and filtering – everything in a single view.It tells you by the second how long you have to order the watch for next day delivery, it shows packaging options and technical specs and it does it in a clear and neat interface.

award winning web design

The Product Page - an advanced 'purchasing dashboard'

But the key to the design is in how simple it is to use it all. Moving from a home page the site dynamically generates landing pages collecting together all watches defined in any way the user wants. You can start by looking for any single attribute from the brand to the colour to the price – whatever you want and the site then presents you with all those watches in a single landing page. But it also gives you a really cleaver set of tools to allow you to hone your selection. It is possible to start with a view of six thousand watches and with two or three clicks on a filtering panel on the screen, eliminate all the watches that do not fit your view or your preference, leaving you with a personalised selection of watches all fitting your own choices from style to function to affordability.

Advanced yet simple filtering get you from 6000 watches to one in a few clicks

The judges at The IMA have endorsed this approach with a massively impressive set of scores. From a maximum score of 500 the site scored 468 points, scoring:

  • Design: 92
  • Content: 97
  • Feature Functionality: 98
  • Usability: 96
  • Standards Compliance & Cross-Browser Compatibility: 85

There were 57 entries submitted under the ‘E-Commerce’ category in the 2010 award year from around the world and the award has been made to only four sites, with the Watch Hut being the only UK site honoured.

The award is published online though the IMA website at Interactive Media Awards Winner 2010 – Outstanding Achievement for The Watch Hut

‘The Social Media Question’ – PowerPoint Presentation for download

The Realitus Social Media Question presentation was created in conjunction with a test site ( as a broad overview of the Social Media phenomenon and illustrates the way connectivity, user generated content and viral dynamics operate through social media. You are free to use it with the proviso that it must be credited on any reproduction of the content, verbally in presentation and as a printed credit otherwise.

Download Link (Warning this file is about 62 Mb)

NB: About is a live presentation (and occasional test environment) which we have used as a live site during client presentations. The site itself is largely filled with placeholder content or RSS imported content and has been set up so as to not appear through search engines. In this way any imported content will be viewed as duplicate content anywhere on the web.

The Benefits of Social Media

The benefits of running Social Media are initially ‘soft’ benefits. Accumulated, these benefits build to reinforce you, your company and your ideas as good, strong and worth heeding. Benefits of social media would therefore include:

  • People purchase from a trusted source
  • If you ‘know’ an expert you take their advice. You trust their decisions and you act accordingly.
  • Free Advertising
  • Customers that evangelise your product.
  • Repeated and permanent mentions of your web site and product on the web
  • Free Gigantic Focus Groups
  • Discussing of the pros and cons of your products in
    OnLine Mainstream Press
    Review Sites
  • Detailed Customer Behavior Info:
    Conversion rates from specific campaigns
    Community response to specific campaigns
    Sites where conversations about your product occur
    Sites where traffic to your site originates
    Purchasing behavior in your store
    Products affiliates will group your products with
  • Relevant Ideas:
    New product ideas
    New campaign ideas
    Product improvement ideas
    Packaging ideas
    Partnership ideas
    Sales Channel ideas
    Ideas generation (the more people the more ideas)
  • Credibility:
    Recognition of company and staff as experts
    Recognition of company and staff as people (trustworthy)
  • Naturally Occurring and Unexpected Sales Channels:
    Sales can now flow from anywhere, based on the networks of your new evangelists. (e.g. one of your products is for e.g. a disabled person. One of your followers thinks it is really good. They may well be part of all the disabled groups and users on the social media networks. By leaving a good comment about you on your faceBook page, all their connections see it also. Suddenly you have lots of free exposure to exactly the right people voiced by exactly the right person)


More business
Targetted visitors
More market information
Better search engine placement against a range of search terms
Brand development online
Credibity of brand and personalisation of the organisation
Elevate Westland above competitors and ‘claim the online gradening space’
Establish Westland as ‘The’ online gardening people

The main benefit is in and around the brand. It establishes your company as the easiest and best resource for expertise. If you are first onlne and you get it right, it creates barriers to competitors. It sets a standard and owns the relationship as contacts are established and become direct marketing contacts.

A Ghost in the Archives: Context and Metaphor

Dark Hollow Haunted Forest

Dark Hollow Haunted Forest

A friend of mine and I have this annual Halloween tradition of going to a haunted house or walk every October, a tradition predicated on our feelings of fear. My friend said she has spent so much of her life protecting herself from the path of terror and experiencing that immediate feeling of fear. What better way to acknowledge your fears than to go to a cheesy haunted house? I must admit in the two times I have accompanied her to the haunted activity I lost my mind both times over a noisy, revved up chainsaw. Scary clowns, dead children, and insane asylums are fine. Chainsaws send me over the edge.

This year marks the third of a ritual of visiting a haunted evening in the Seattle area. I think I have found the perfect place to go: Dark Hollow Haunted Forest. This is one of the first sites I picked from a list of haunted activities in the Seattle area, but as I dug deeper into the site I found the most terrific idea spurring ideas about archives and special collections.

Underneath the main entry page there is a link to The Legend, which takes the user to the personal desk of Professor Helsbane. The sound of quiet thunder and gently falling rain can be heard in the background, giving way to a crackling recording of a vocal harmony from the 1920s. At the bottom of the image with softened edges blurring into darkness are the instructions: “Click on items on Professor Helsbane’s desk to reveal secrets.”

Hovering my cursor over the desk I click on the woman’s portrait tucked behind the open book and leaning up against an antique typewriter. The window pops up with the woman’s portrait and handwritten in elegant script across the bottom: “My beloved Abigail, RPP.” Subsequent clicks around the online image reveal: a group of men in period attire posing for a portrait in a studio, Mason Lodge 1875; a document still clamped in the typewriter written to the Washington State Paranormal Society; a photograph of a person wearing a tribal mask with a description scrawled across the bottom corresponding to this same artifact propped upright in front of a small collection of books; various clippings, photographs, maps, notes, and other ephemera from the desk of Professor Helsbane. Frozen in time the entire desk has been preserved as though Helsbane stepped out for a moment.

What does this mean to me as an archives and library information professional? It means more than you can imagine. This popular site is attempting to capture the life of an individual through historical fragments, albeit to bring about a sense of creepiness and fear. Historical materials are brought together, a context is recreated, and through user mediated hypermedia we discover a sense of the life that surfaced these seeminlgy disparate materials.

Imagine if an archives/special collections did just what they are doing here with their online representation of collections. No one can precisely recreate a historical moment; however, a metaphorical recreation of the historical context of a collection could raise awareness of the digital surrogates of unique, personal items. A contextual virtual environment could be a highly visual, interactive gateway to either a personal, family, or organizational collection. Different formats of materials could be explored, where the user may not immediately realize the depth and scope of a collection. The range of materials would become more immediate and manipulable in a virtual environment and showcase the range of digital surrogates and services available to the user. I’m guessing that this would involve a lot of work to put something like this together and I understand most users of archives and special collections materials are comfortable with their inventories, finding aids, and administrative data, but users are changing and archives and special collections units need to make every effort possible to bring them in from the gently falling rain.

I believe this Dark Hollow Haunted Forest website raises some innovative ideas about bridging the gap between users and archival information, and creates an environment reuniting the materials with their context (if only metaphorically).

Go to Source

Interaction standards for SaaS: why copycats are great

Copycat Great for SaaS usability

Copycat Great for SaaS usability

So software is moving online. This brings one disadvantage and that is that you can make the interaction works as you want it to be.

This is actually great and not a problem when we are talking about a normal website, but creates trouble when we are talking about applications.

If everybody is creating different user interfaces the users will have to learn time and time again how it works. For example software for Windows or Mac always uses the same standards and ways of working because it is easier to do so using the development tools Microsoft and Apple give you.

Now comes in the copycat´s role. Happily there are a lot of user interface designers that are consciously not inventing the wheel again or maybe they just have a lack of creativity: they use what our big brothers do and what people are used to.

So hereby I would like to salute the copycats and praise their contribution to usability. Long live the copycat!

Go to Source

Multitouch for Windows: kneejerk reaction?

Windows 7 Multitouch

Windows 7 Multitouch; very comfortable as you see. Especially with a heavy watch.

Microsoft announced that in Windows 7 it will have multitouch capabilities and that that would be the way forward and the next big thing. So Apple launched multitouch for the iPhone, great idea and big success.

Multitouch, great for your phone (trying to click with a pen on an HTC Windows Mobile drives me nuts) or for a touch screen kiosk or a tablet PC.

But how do they imagine you sitting in fron of your computer? In the very comfortable pose of having your arms raised manipulating things on the screen? Don´t think so. Let´s keep ergonomics in proportion and focus first on a comfortable pose to work and then on how the interaction ergonomics will work.

> See a video on how comfortable it is

Go to Source

Usability – Talking about Consistency

One great tool you can leverage to improve the usability of your system is consistency.

  • Consistency with yourself (internal)
    • Consistent Language- For example, if a user is trying to complete an order through a website, the website should pick “Buy”, “Purchase”, or “Complete Order,” not a mixture of different words. This is similar in a cell phone website when referring to a mobile phone, is it a mobile phone, mobile, cell phone, cell, or just phone?
    • Consistent Layout – The navigation in websites should be consistent, such as Home Page link, or the search bar should be in one place as the user flows through the website. Another example is the tabbed pane widget:

    If a tab is selected that is not on the front row, the tabs reorganize themselves to bring the tab to the front row.

While the tabs bring the active tab to the front, the orientation changes drastically which can result in disorientation for the user.

  • Consistency with Representation - In different players on the internet, after pausing the player, a pause symbol will appear on the screen to show the state that the video is paused…while in other video players a play button will appear to show the action that will happen by selecting this button. An Switching tabs, hard to find
  • Consistency with the environment (external) - Keep in mind the platform your application is developed for. Follow the standards for that platform, such as having a “File” menu with an “Exit” option on the windows platform.
  • Consistency with previous experience – Make sure your consistent with the users experience whether in applications or in real life. If the user presses a button with a right facing arrow, make sure the button indicates a “play” action to mimic the playing that occurs in real life. An example of a violation of being consistent with the experience is using words such as “Okay” to mean canceling an action and “Cancel ” meaning to continue on with the action as seen here.

If a user already has some familiarity to your system because of consistency, your interface is easier to learn!

Go to Source

Sumo SaaS: Photoshop Express but then fast

Photoshop Express but fast

Sumo: Photoshop Express but fast

OK, so it is possible. Photoshop Express but fast. Loads like a beauty, quick interaction and loads of features.

And no, it has nothing to do with the heavyweight Japanese wrestlers. One thing it has in common is that it is another example of how to put heavyweight desktop software as a Flash SaaS application.

Not sure if they do it just as a hobby as there is no advertisement but they must have put some work into Sumo.

Check it out yourself at

Go to Source

User interface design and XAML

User Interface Design and XAML

Microsoft Blend: Nice try, but Adobe, could you please make Photoshop compatible?

To increase efficiency between interface design and development XAML could be a great format. Digging into it I came across the only tool I could find to create XAML: Microsoft Blend.

Let´s be honest, interface graphic designers use photoshop and maybe fireworks. No chance you get them to learn another program where you have to nearly code the animations and that doesn´t work with tablets. Although it is a good try from Microsoft I still have to meet the first designer using it.

It is a bit like your little brother’s first attempt to cooking. You will eat it, but won’t think twice of buying his burnt cake in the supermarket.

So what is missing? A good interface between Photoshop and XAML.

Adobe? What are you waiting for?

Go to Source

Interface Design| chapter 9

Now, it’s chapter 9. Whew! :P

Design the interface first before doing the coding. Well, I actually practice this. I just like seeing the interface and imagine that it is already working. :D Designing the interface first, according to this chapter is easier (I agree) compared to coding. The changes can be easily made while still designing the UI than pouring all your time debugging codes. It is important that we can already picture the outcome, so being able to see the design first will make it easier to do the rest of app. :D

Ignore the extremities: the navigation/tabs, footer, colors, sidebar, logo, etc.. Oh, how many times has it been said that we need to focus first on the main thing. (yeah the main event! :P ) Build the most important thing first and every little detail will follow. Make sure that the main feature of the app is running before adding the “accessories” of the app.

There are 3 things that we should keep in mind when it comes to UI designing:

1.Regular - this is what users see.

2. Blank –   what we see before we can do a thing with the                        app.

3. error    – obviously, the error page. ;)

What is a blank slate? This made me do some googling stuff. Anyway I guess (since I haven’t found any reliable definition and I’ll just trust my comprehension *cross fingers* :D ) blank slate is the the first thing that will come to our minds the first time we’ll see the app. It’s blank slate because… We’re blank (literally) because we don’t know what to expect. It says that this part of the UI design is usually neglected by the developers which in the view of the book (and mine as well) shouldn’t be the case. There should be a guide for first-timers. ;) There should also be a sample on how the app will look like. In short, it should be user-friendly.

Go to Source