The Future of Interaction Design

· 1 min read · Product, Design, Ui, Future

Check out this video that sheds some light on what we can expect from the future of interaction design.

Lots of discussion around the ‘internet of things’ and how user experiences will become less intrusive and more natural as this area matures.

I guess this dovetails with my analogy that we’re moving further and further away from abstract computer interfaces. To piggyback on Luke Wroblewski’s paradigm, we can see where we’re heading by acknowledging the big interface developments:

  • The Command Line Interface
  • The User Interface
  • The Natural Interface: interacting with the content (i.e. pinching your photos to zoom) or thing (i.e. switching the lamp on) itself.

I think that video might have been the nudge I needed to get myself along to the next Maker Night.

Notes from Mobile First

· 3 min read · Reading, Mobile, Ux

I read Luke Wroblewski’s Mobile First over the weekend. Here are my (unedited) notes:

Usage

  • Mobile opens up new opportunities & introduces new constraints
  • Forces you to focus products & interfaces
  • Desktop users = deep sea diving
  • Mobile users = snorkelling

Advantages of Native Mobile Experience:

  1. Better access to system resources
  2. Robust access to hardware capabilities
  3. Core features like access to address book / photos / camera / audio / notifications etc.
  4. In-app sales

Advantages of Mobile Web Experience:

  1. No updates to download
  2. Less expensive
  3. Can be used by all mobiles
  4. Improved share-ability. [Marco Arment wrote an interesting piece about this.]
  5. Easier to A/B test

Constraints

  • Reduced screen size
  • Means a reduction in interface debris, complimentary content, ads and unnecessary calls to action
  • Forces us to focus

Performance is V.Important

Google research shows an additional 200ms can disrupt engagement and effect bounce rates [more so, on mobile]

Some measures to take:

  • Use image sprites
  • Bundle together and minify CSS & JS
  • Limit the use of CSS grid systems
  • Use proper HTTP headers to ensure files are appropriately cached in the browser’s memory.
  • Where appropriate, take advantage of modern browser capabilities like:
  1. Canvas
  2. Appcache

Locations:

  • 84% home
  • 80% misc downtime
  • 74% waiting in a queue for something
  • 69% while shopping
  • 64% while at work
  • 62% while watching television
  • 47% during commute

More distributed spread of usage across the day. Does this create new opportunities for user engagement?

Capabilities

As well as introducing constraints, it’s important to maximise potential on mobile by pushing capabilities.

  • Most important features come through satisfying a customer’s vs. the use of a specific hardware tool
  • Can access GPS / accelerometer through web browser on iPhone
  • Audio interfaces?
  • Proximity?
  • can we build on new / mobile capabilities to better meet our customers’ needs?

Case in point: London underground

  • Desktop > browser > url > find maps page > download map > find nearest station
  • Mobile > open app > app finds nearest station

Organisation

  • Align with how people use their mobiles and why
  • Emphasise content over navigation
  • Options for exploring and pivoting
  • Pivoting: Navigation points at the end of the page. More contextual over global
  • Anchor to bottom of page = a smart navigation patter.
  • Controls at the bottom of the screen are easier to work with: But these contend with browser chrome.
  • Maintain clarity and focus; a là Yahoo!’s email compose screen

Most mobile usage reflects:

  1. Lookup / find (urgent info, local)
  2. Explore / play (bored, local)
  3. Check in/ status (repeat, micro-tasking)
  4. Edit / create (urgent change / micro tasking)

Actions

  • Go small by going big
  • Consider swipe interactions
  • Explore NUI’s (Natural user interfaces)
  • [Page 76] for conventional gestures to open options / delete / refresh screens
  • Hover is dead. Though can be used as a click action (no JS required)
  • Yahoo!’s swipe for email options

Inputs

  • Embrace mobile as an opportunity for our users to contribute whenever inspiration strikes
  • Keep labels on top and outside of form fields
  • Mobile optimised labels and placeholders
  • Select/options are tap inefficient. Consider input[type=“number”] for tap up and down figures etc.
  • Speed up task by making smart defaults on good assumptions
  • Reduce validation problems with input masks. Best practice shows the mask beforehand, and persists throughout input
  • Be brutal and trim trim trim trim trim
  • Hide away other elements on non-linear forms such as editing profile > pop open when needed
  • Where we wanted improved contributions, use in-context inputs for speed and little effort
  • New opportunities NFC inputs, audio interfaces, cameras for scanning, GPS etc (nearest hotel crosshair tab)
  • Make it obvious and easy for users!

The Fallacy of the Fall Over Count

· 1 min read · Thinking, Startups

The trick with learning to ski is to start off steady. Making pizza shapes with your skis helps to regulate a comfortable speed for gently coasting down the green slopes.

Of course, quickly you become better at this and you begin measuring progress against the amount of times you fall over.

Two times down the green run without falling over - you’re winning.

Quickly you realise this is a fallacy. You’re not making progress because you’re not pushing yourself.

Progress involves figuring-out parallel turns, perfecting your form, moving on to the blue slopes, falling over, making mistakes, looking stupid, getting in (and out) of sticky situations and pushing yourself.

Only then can you look back at the end of the week in amazement at how far you have come along.

I think we can adopt this method of thinking in business, art and life in general.

Since it’s clear what progress demands, I asked; am I pushing myself enough / challenging the status quo / making mistakes / bashing my elbows / trying something new / figuring things out?

If you’re interested in making a difference, try asking yourself the same.

Quote of the Day

· 1 min read

You can’t simplify something if you don’t understand what makes it complex.

twitter.com/lukew

Can Simon Manchipp Help my Start-Up?

· 4 min read · Design, Marketing, Social, Brands

Simon Manchipp presenting at Designival Liverpool

A few weeks back I was lucky enough to see Simon Manchipp speak at the Liverpool based design conference Designival. If you haven’t been to one before, I’d recommend you do.

The thing I found most engaging about Simon’s talk was his position on logos and branding. For personal reference, I made a few notes thinking about how the the themes could be applied to my new project, Beanbag.

My Notes & Thoughts:

1. Consistency is not stimulating.

2. Create conversation that joins things up.

My thoughts: Important. Instead of trying to push our message to customers, we should be creating campaigns that involve them in the conversation.

I’ve been planning on starting something along these lines for the Beanbag launch. Being a link organising and sharing website, we have some rough ideas for running a little competition / exercise. Still in its infancy but we could go for something like… using the hashtag #mybeanbag, tweet a link that:

  • says something about you
  • inspired you & why
  • made you laugh

With proper execution, this should:

Help spread our message Involve our customers Satisfy our customers’ needs for self-expression Be much more interesting, engaging and affordable than placing a full page ad in the Guardian.

3. What does the brand stand for?

My thoughts: Our brand should be opinionated.

We’re building Beanbag primarily for ourselves. We’ve tried other products but feel that speed, simplicity and passing-on has been overlooked.

This should be consistent within our marketing message. We didn’t like X, Y & Z > so we did this. Which side of the fence are you?

4. Brands are actions, not words.

My thoughts: We better do a good job of delivering on the above =)

And my Grandmother’s old saying springs to mind:

“Handsome is as handsome does.”

5. Logos are not conversational.

My thoughts: Valid. But they’re an important part of a brand’s DNA and their value should not be discounted as much as Simon suggested.

However I do agree with the notion that a compelling visual identity is not enough on its own.

In order of importance – for me – a brand’s composition goes a bit like:

Actions [our product or service] The visual identity [logo and design language] Our content and marketing messages

6. Consider adaptable logos.

My thoughts: Interesting concept. Effectively Simon suggested designing logos with:

Fixed assets: parts of the logo design that are consistent i.e. the shape Flexible assets: parts of the logo that are customisable i.e the colour A good example: Android man. Do what you want with him.

We’ve since considered allowing users to select their Beanbag colour during the sign up process. Along with that, we plan to allow users to select colours for their bundles (used to organise links within Beanbag). Blue for ‘Technology’, pink for ‘Shopping’, orange for ‘Music’, green for ‘Gardening’ etc etc.

7. The brand story needs to be beneficial to the customer.

8. Weird is remembered and creates monopolies.

Case in point; compare the meerkats. A wonderful and funny narrative that’s intelligently connected back to the core message – find cheaper car insurance.

As it happens, they send you a free meerkat (I have Vassily), when you order insurance through them. Each time my friends and family visit, they pick him up and we end up having a conversation about Compare the Market.com that they haven’t even paid for. MoneySuper what? Weird monopoly.

So how will this thinking help our startup?

Well, we can employ most of these ideas on a shoestring budget.

Better still, there’s clear evidence that even in a crowded marketplace – where attention is scarce and content is everywhere – original design and marketing is remarkable (worth making a remark about) and cuts through the noise.

So thanks to Simon and the team at Designival for an inspiring and thought-provoking few days. As and when I get the time I’ll be documenting how these ideas evolve and work out in practice across the coming months.

Brodown

· 1 min read · Animation, Video

Really enjoyed James Jarvis’s inspiring talk at Liverpool’s Designival Conference yesterday [more about this in an upcoming post]. Check out this short he made for MTV.

Typographic Refurb

· 2 min read · Design, Typography

I’m only halfway through Ellen Lupton’s Thinking With Type, and she’s already inspired me to make some subtle and not so subtle changes around here.

I think one of the biggest things I’ve taken from the book so far is confidence with type pairing. Previously, using a mixture of different sizes, weights and character spacing I’ve generally stuck to employing one typeface. This is sound methodology, but not having the confidence to mix typefaces quickly becomes a creative straightjacket.

This time I’ve contrasted Lato’s charming round strokes and classical proportions with Franchise – the solid, upright display type, used in the This Is That mark. Where mixing typefaces is concerned, I’ve learned that it’s important to look for contrast. Ellen wraps things up nicely:

“Combining typefaces is like making a salad. Start with a small number of elements representing colours, tastes, and textures. Strive for contrast rather than harmony, looking for emphatic differences rather than mushy transitions.

Give each ingredient a role to play; sweet tomatoes, crunch cucumbers, and the pungent shock of the occasional anchovy.”

Alongside the type refurb is a new, flexible grid as well as the addition of two new sections, the portfolio and about pages. I’m hoping now things are spruced up, I’ll be better motivated to write and publish my design process a bit more.

Judging on PC World's Generation Y Campaign

· 2 min read · Press, Startups

Photo of Tom Darlow on PC World’s judging panel

Just under a year ago I was invited on to the judging panel for PC World’s Generation Y campaign. The initiative focused on discovering and rewarding young business people and entrepreneurs in the technology space.

The applicants and their companies / projects / ideas were outstanding. A crystal clear reminder that even during tough economic times with the right attitude, a good idea and an internet connection – the limits are endless.

The winner – and rightly so – was 23 year old Arnold Du Toit of Drive Daddy; an energetic startup that manufactured the world’s first powered golf trolley that users can ride. Called the ‘Rolley’, the invention allows golfers to hop-on to their golf trolley and cruise silently around the golf course.

Arnold started his firm when he was 21 during his final year at University. The idea came about after his friend complained that a full round of 18 holes took too long. Arnold captured our imaginations with his entrepreneurial spirit in getting the Rolley to market by overcoming financial pressures and patent issues. We were also excited by the potential to rent fleets of Rolleys to golf courses and Arnold’s plans to diversify the technology into security, airports and factories.

If I had a hat I’d take it off for Arnold and Drive Daddy – an inspiring story of an audacious, can-do, Generation Y’er.