Think bigger

Recently our creative director Paul and I were wondering what our team thought about advances in user interface designs (UI). And, what are the UI shifts that are likely to impact interaction the most in the next 24 months?

This is a big challenge. But we don’t get out of bed each day to turn a handle so-to-speak.

We formed a short list as follows:

1. Gestures (touch)
2. Drag and Drop
3. Rich media layering
4. Canvas layering / interactive scrolling
5. Data visualisation through 3d

Obviously this isn’t new stuff – but we were thinking about what’s conventional (plenty of the stuff above would confuse less technical users) – so what will become commonplace in the next 2 years and easily understood by the masses?.. Or should I say digital converts as opposed to us digital natives?

The reason we asked these questions is we’re trying to come up with some ground breaking ideas for our clients and we’d really like to see us turn a conventional data / interaction on its head and change the game.

I just saw a quote that said

“ the conventional view serves to protect us from the painful job of thinking…” Cute eh!

So consider a simple user interaction on a tablet device where the user is transitioning from a paper based forms environment:

For example, why point and click/tap a box when you could brush over it as if you were holding a pencil in a tick motion????

So what will will be common place in the near future – maybe as popular as the mouse – who one reporter in the 80’s commented on “there is no evidence that the public want to interact with their computers using such a device… ? EH!

Imminent conventions:

Our in-house emerging tech specialist James has given us the following food for thought about what will become convention soon:

Microsoft Kinnect type interactions

No mouse or keyboard required – voice and body gesture based interface, no physical connection to screen or mouse required (can be done with webcam + mic, kinnect hardware not required)

User Customisable UI elements

(Sometimes) iOS apps let you customise the tab bar at the bottom of apps, they presents you with a list of possible tabs and the users drags the ones they want or use the most onto the tab bar. Perhaps this will spill over to the web, like when you setup a custom Google home page. So you could turn navigation items off you don’t care about, add a top level navigation item to a sub/sub/sub-page that the user uses frequently.

More drag and drop of things

Drag and drop between different applications / environments – I can drag files from my desktop to the web browser based cloud storage (box.net website) in Google’s Chrome browser, or drop a video into YouTube and it uploads, no need to search. Perhaps in the future you can drag more stuff, perhaps drag an image or news article from one tab and drop it onto a Facebook contact to share it with them.

Less clicking

From my personal experience, some people are crap at clicking on things, and often don’t understand what can be clicked on and why

Adaptive UI

The first time I go to a website its often immediately overwhelming – the amount of links and sections, how the site is structured and I often don’t know how to get where I need to, so those big “Click here to login” style buttons are great for first time users. Skip forward in time, I am now familiar with the site, I know exactly where I need to go, and what I need to, so I would like heaps and heaps of links so I can get to where I need to go quickly. Could we build a UI that is initially very simple and layers in addition functionality as the users proves competence (either over time, or by logging in, or by any other bizarre metric we can come up with)?

Express logins

If I am logged into Facebook, a lot of websites recognise that, and let me make comments on a post using my pre-populated Facebook profile stuff. So perhaps more personal recognition in UI. i.e. “your friend Sam Smith was looking at this page 5 mins ago, and is online now, chat to him about it”.

Google Labs

Anything listed in labs.google.com

Right Click

I think ‘right-click’ is making a comeback – ref box.net functionality

Zooming

Perhaps zooming, used as a UI mechanic to help keep context … if you think of a Google map, zoomed in to see all of Tasmania, if this represents an entire website, using Google maps to pan to Hobart and zoom in, you will now see more data about Hobart, but because the transition wasn’t a click and page reload zoomed into Hobart, you gain a sense of scale and position (context).

Device interactions

More device-to-device interactions, doesn’t really relate to UI, like when we sit in our board room looking at the projector, allowing someone to drag a file from their iPad to the screen, somehow. Firefox now has this feature where you can save open tabs to the cloud… their example is if you are looking at flight time information on your PC at home but need to leave in a rush because your taxi arrives, once in the cab you can whip out your phone and open Firefox, it’s on the same page as your home pc, so you can keep checking your flight. So perhaps move to my iPhone type UI elements.

HUD

Augmented reality will be big, dunno how that effects UI

Hidden UI elements

Ubunutu 11 (Linux) has gotten rid of scroll bars, these guys are sometimes ahead of the curve on these kinds of things. Now (from memory) if you move your mouse to where a scrollbar should be, a mini scroll bar appears outside the window, it’s kind of odd but isn’t confusing at all and saves some pixels which is important on tablets, it’s also very touch friendly.

Infographics

Infographics are big, perhaps we could do more dynamic infographics for overview information in complex environments

Data visualisation

Stream graphs started making an impact last year, a great method of visualising complicated data.

Here are some good data visualisation references

http://flowingdata.com/

http://www.visualcomplexity.com

http://chartporn.org/

Search Engine Optimisation.  (Yawn!)  Sssss Eeeeee Ohhhhhhh!

We’ve not said much on this and that’s not because it doesn’t matter.  I guess rather than hyping it up and pimping buzz words we just see it as integral and part of what ‘just gets done’.  So while I consider this a really dry subject I do think I should say a bit about it as we’ve been asked some tricky questions lately about strategically engineering SEO into projects from the ground up in large mass market projects.

Keeping SEO Simple

Here be the basics of what ye do at FM (pirate voice required):

25/75 rule re onsite/offsite effort

In our experience thus far (working with our exclusive outsourced UK partner) onsite optimisation is purported to deliver 25% of our objectives and offsite i.e. backlink profile building is 75%. 

• One is not mutually exclusive of the other insomuch as relevance of external links needs to align to internal and onsite copy etc. 
• And, any noob who thinks they can get huge results from simply making onsite changes has a long way to go… on a hard road.

Wholistic strategy for competive segments

In a super important site in a massively competitive segment (sorry for overuse of adjectives) we involve our partner on a consulting basis through build/planning/copywriting.

Post build reviews for general work

Generally speaking though we build to best practice and then get our partner to come in at the end and do a site review as soon as it’s gone live.  This is so they can strategize and report against a real (live) asset.

Stage 1 in SEO

So a first stage SEO for a project is like this:

• A review based around key word metrics and typically a key word theme that clearly has value and is currently drawing traffic on the engines.  Plenty of people struggle with this. 

“oh my god – I can only optimise for one main thing….  but I’m about A,B,C,D and what if people want XYZ!!!!”

• Baseline report on current positioning is produced
• Directions to make alterations (inclusive of sample CSS) to page titles, some page structure, certainly page footers, custom written copy for front page or key target landing pages…. All based around targeted key word densities and relationships around the key word theme.

We implement all these changes and at the same time we get our partner to start on backlink profile work.  This involves placing links on sites, writing themed articles about the key word targets and integrating links in those on external sites. 

Our partner helps us to do our reporting and show movement against historical positions and competitors etc.

Stage 2 in SEO

A second stage to any of this kind of SEO work is:

1. Building themed social pages and staffing them with copywriters to work as funnels to the sites.  Some call these micro-blogs and so on.
2. Pushing a fixed number of themed links, editorial links and review links each month to keep building profile
3. And of course, subject to site progress/changes re-enter stage 1.

Soon after publishing my previous article (http://blog.futuremedium.com.au/2011/01/28/a-journey-with-resizing-and-cropping-images-in-java/) I came across an article from an engineer on the Java 2D team – from the horse’s mouth so to speak: http://today.java.net/pub/a/today/2007/04/03/perils-of-image-getscaledinstance.html

In this article he contrasts various methods of resizing images and I’ve come to the conclusion that my original method still stands although I haven’t fully investigated the suggestion of using different methods depending on the extend of the rescaling required.

What I have done however is replace my original resize method with the following:

private BufferedImage doResize(int newWidth, int newHeight, double scaleX, double scaleY, BufferedImage source) {
 GraphicsConfiguration gc = getDefaultConfiguration();
 BufferedImage result = gc.createCompatibleImage(newWidth, newHeight, source.getColorModel().getTransparency());
 Graphics2D g2d = null;
 try {
   g2d = result.createGraphics();
   g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                        RenderingHints.VALUE_INTERPOLATION_BICUBIC);
   g2d.scale(scaleX, scaleY);
   g2d.drawImage(source, 0, 0, null);
 } finally {
   if (g2d != null) { g2d.dispose(); }
 }
 return result;
}

This removes the references to the AffineTransform, but note the continued use of setting the RenderingHint to ensure the quality doesn’t suck.

I’m assuming that internally this updated technique uses the same algorithms, as I did a test resizing 200 images and the time was virtually identical, and the resulting quality was 100% identical as far as I could see.

And that is about enough of that …