UsefulBeautifulDigitalOur thinkingSummer 2011

2

Here’s a collection of recent articles penned by some of the experts at 3Sixty. We hope you find them useful. For the most up-to-date thinking go to www.3Sixty.co.uk

Contents

Why is NFC the next big thing? ......................................................... 3

Adjusting your website for tablet and smartphone viewing .............. 7

How to do social media well ............................................................ 13

The utility of apps ........................................................................... 18

01

02

03

04

3

Why is NFC the next big thing?

When you mention Near Field Communication (NFC) the average person glazes over with technical indifference, but this technology really could make a huge difference to our

lives over the course of the next few years.

01

4

The (short) tech bit

NFC, simply put, is the ability for a chip to communicate, over very short

distances (up to 4cm), wirelessly with a receiver. This NFC chip could be in a

multitude of items: SIM cards, credit cards, stickers, key fobs, or your phone. An

NFC “tag” is an individual packet of data stored on the chip which can contain

data with a variety of uses, each application can have its own or multiple tags.

This data is stored securely meaning it can be used for personal data like credit

card information or PINs.

How can NFC be used?

The sky’s the limit. NFC’s use is already widespread in things like key fobs to

open doors, making the hardware readily available. However, the true

potential of this technology seems to be expanding with the mass adoption of

smartphones. The ability for apps on a device to read and write from NFC tags

provides a way for the online and offline worlds to connect.

Posted in TECHNOLOGY By Dave North On 1st June 2011.

5

The first killer application for NFC is digital payments. Load all your debit and

credit cards onto your phone; why not add your loyalty cards too? Paying at the

supermarket will become as simple as tapping your phone against a scanner

and away you go. Google’s implementation, Google Wallet, will provide targeted

adverts and even vouchers you can use over NFC.

NFC isn’t limited to digital payments though, and more intelligent loyalty

schemes, tap transfer of data or contacts, a digital key for your car or just “liking”

something by tapping it with your phone, are all applications that are likely to

spring up over the coming months.

There are obvious extensions for

existing social media apps: add a friend or

follow someone just by tapping your phones

together; check-in to your local coffee shop;

really, the applications are endless.

The ability for apps to interact with their

local environment means that hopefully we’re

going to see some really time savers appear,

many of which will try and guide customers

through the full buying process and beyond.

Why is NFC

the next big

thing?

6

Why aren’t we seeing this yet?

The limiting factor for much of NFC is the speed of rollout. Barclaycard has

already implemented the technology into its credit cards but the availability

of scanners for payment is still patchy. Particularly when you try to move this

technology to your mobile device you’ll find your choice is limited with only a

very small number of smartphones containing an NFC chip.

The support for this technology is already strong though; NFC payments are

tried and tested and have been used in Japan for years. The software aspect also

exists, with Android offering NFC from version 2.3. Apple are unlikely to miss

the boat here either with the anticipated iPhone 5 likely to have an NFC

chip included.

The buzz around this technology means the hardware will become more

commonplace and this will increase consumer adoption, and by incentivising use

NFC could be positioned as saving customers money.

The key thing for NFC is the ability to link your virtual world to the real world

and I’m sure the appetite for this from customers and businesses is going to

be huge.

7

Adjusting your website for tablet & smartphone viewing

02

8

It’s been quite a while since the first tablet or mobile device appeared with the new functionality of being able to rotate, flipping your view seamlessly from portrait to landscape mode.

It’s an amazingly useful feature, and one that surely caters for any website or app

design, but begs the question: how can we design to take full advantage of our

new flexible canvas?

I’ve heard that you are supposed to view the tablet in portrait mode so it feels

more like the proportions of a book or newspaper rather than a laptop, but this

doesn’t work for me. In my opinion it ’s personal preference how you choose to

orientate your tablet or mobile phone. I use two devices: an iPad and an iPhone.

With the iPad I find it more useful in landscape, but the iPhone (which feels like a

smaller version of the iPad), I prefer to hold in portrait mode.

The best way to take advantage of the flexible canvas is to build an app in which

you can reconfigure the layout depending on orientation. Take the BBC news app

for example. In landscape mode the news headlines appear on the left-hand side

leaving a large viewing pane to the right for the article you are reading. Tilt your

Posted in TECHNOLOGY By Matt French On 31st May 2011.

9

device and the headlines shift to the top leaving a large viewing pane now at the

bottom. Notice that the size of the body text remains the same.

But without going to the effort of designing bespoke mobile or tablet versions of

websites what can we do to make the experience for users more pleasant?

Text size

The most obvious thing to do is to enlarge the text size. Type can get pretty small

when viewed on a smartphone in portrait mode. Yes viewers can zoom in but I

think it’s more helpful to try and make the text bigger – to read at a glance. One

of the main problems I see is cramming text into narrow columns, meaning it

becomes virtually illegible.

Most websites are governed by a fixed width of about 960 pixels. If we enlarged

this width we’d be out of the safe viewable area for many computer monitors. I’ve

never been a fan of flexible or stretchy layouts because it goes against my

typographic principles – I like to constrain the text by a character limit (52-78

characters, including spaces) known as “the measure”, this enables readers to

skip from line to line more easily. Phones and tablets, however, tend to benefit

from a stretchy layout.

Adjusting

your website

for tablet &

smartphone

viewing

10

Also tablet and smartphone users know how to scroll — so try not to be tempted

to cram too much above the fold and let the page breathe.

Watch out for rollovers

On touchscreens, because you don’t

have a mouse pointer, rollovers don’t

work so make sure that any rollover

effects are not essential for

basic navigation.

Make links moreclickable and makebuttons easier to press.

It can be tricky using the touchscreen

so larger custom dropdowns, form

fields and larger buttons are

more advantageous.

Be careful whenusing Flash

Flash isn’t supported on some devices

so try and make sure there is a

fallback option.

11

Adjusting

your website

for tablet &

smartphone

viewing

Lose the third column

This is quite controversial as a third column containing contextual links is pretty

much a standard convention with most websites these days. But, by removing it,

you get much more screen real estate available for the meaty content — the

challenge is to include the contextual stuff elsewhere, either through clever

information architecture or by including it in the main body of the page.

The main navigation

One of the hardest things I find when using a mobile phone to search the internet

is using the main navigation of many websites. Apart from having a mobile

version of the website, probably the best thing to do is to restrict the main

navigation to about 5 items, make it a lot bigger and avoid flyouts.

Colour contrast

Make sure there is adequate colour contrast. This should be checked on all

websites anyway but be aware that with mobile phone and tablet devices many

people keep brightness and contrast low to save battery.

HI!

13

How to do social media well

‘Iceland wants to be your friend’ is an object lesson in how to do social media well. I love this campaign and the more I look at the detail, care and craftmanship that has gone into

it, the better I think it is.

03

14

So, before I say anything else, let me just give a big thumbs up to the clever folk at Takk Takk and the Icelandic Tourist Board. They have taken this quote from Hugh MacLeod to heart:

“If you talked to people the wayadvertising talks to people they’dpunch you in the face.”

And boy can these guys teach traditional advertising a thing or two about talking

to people!

For me there are five key elements in doing social media well and this campaign

(www.icelandwantstobeyourfriend.com) has achieved all of them.

Personality and Charm

The team behind this campaign has created a wonderful, whimsical and

charming character for the small island in the middle of the North Atlantic

Posted in TRAVELBy Laura Fletcher On 3rd June 2011.

15

Ocean. As an island talking to humans on its ‘inter-nets’ it has a very clear and

stylised tone of voice, and is prone to the odd, enchanting misunderstanding.

Originality

I don’t think I have seen any other country or tourist board ever be brave enough

to give their country a first person voice. The originality of this campaign is a big

part of its charm.

Commitment to interaction

Iceland takes the time to respond to the humans who get in touch, this forms the

vast majority of its activity – it doesn’t simply broadcast information about itself,

it has a proper conversation. The team behind this also clearly takes a great deal

of care over crafting Iceland’s replies. Takk Takk has managed to keep the tone

of voice remarkably consistent, which is harder than it sounds.

A widely dispersed campaign

There are loads of ways to get in touch with Iceland on the internet now. Iceland

wants to be your friend is the hub of the campaign but it has been widely

How to do

social media

well

16

dispersed across lots of social media platforms: Facebook, Tumblr, Twitter,

Vimeo, Foursquare to name but a few. They therefore have a broad reach with

what is a simple idea. They have also turned the recent volcano eruptions into

another opportunity to talk to people.

Surprise and delight

Takk Takk has hidden lots of clever details and surprises around the campaign.

If you want to see a good example of this just go to :

www.icelandwantstobeyourfriend.com

(Right click and view source – you will see what I mean!)

17

Patience and persistence The campaign has recently reached a tipping point, although it has been going

since 2009. The organisers haven’t given up or lost momentum but they’ve kept

on building on the core concept of developing Iceland’s personality and character,

and talking directly to people.

The key question is will this make people get in their “silver flying machines”and

visit the island? I can only speak for myself, but I am certainly a lot more aware

of the reasons I should visit (there are lots) and I am certainly keen to do so.

I am also a lot more forgiving of the volcanic eruptions, I know Iceland doesn’t

mean it and at least they are keeping us up-to-date!

How to do

social media

well

18

The utility of apps

04

19

I bank with First Direct and like many of their customers I’m evangelical about them, their customer service is second to none in the banking sector. For instance, they answer the phone almost immediately, are always cheerful and efficient.

The printed material is simple and well executed with the distinctive use of black

and white typography – maximum communication, minimum ornamentation.

But, today I’m making a mildly critical comparison between their website and

iPhone app to make the case for design simplicity.

Posted in MOBILEBy Jon Waring On 3rd May 2011.

The utility

of Apps

20

The current First

Direct website

homepage

(shown as of 28th

April 2011):

21

Typographically

It’s very busy, not as considered as

their printed material.

Messaging

Is ‘sell first, help second’ with

mortgages, ISAs and whatnot taking

up a great deal of space.

Hierarchy

There’s a lot of information given the

same priority, I don’t feel like I’m

being led through the page.

Interaction design

It has not been designed for touch

interaction, using my iPad my clumsy

fingers frequently hit the wrong link.

The utility

of Apps

22

Pop up window 1

after clicking link from homepage

Here’s the 3 stage login:

23

Page 2 Page 3

The utility

of Apps

24

Now compare it to the simplicity ofthe iPhone App:

25

The utility

of Apps

I use the First Direct iPhone app more than the actual website: it’s quicker, easier

and much more satisfying. In fairness, this is true of most website vs app

experiences – the iPhone screen size and operating system (iOS) dictates a

simplified user journey. My contention, however, is that apps are the inevitable

conclusion of a desire for simplicity and focused utility.

So, bearing this in mind, how could First Direct improve the homepage?

I thought I’d show you rather than write about it.

26

27

Not perfect, not tested and certainly not conclusive but, as a first stab at

including some of the lessons learned from their excellent app, I’d argue it’s

an improvement.

Forgive me First Direct, I love you really andhopefully you’ll take this post in the spirit it’sintended: ‘Help first, sell second’.

3Sixty is a digital creative agency.

The utility

of Apps

28

We create digital assetsthat provide a strong commercial return for our clients and a useful and beautiful experience for their customers.

29

Our services• Digital strategy and planning

• Website design & technical development

• Behavioural Economics

• Information architecture

• User experience research and design

• Mobile

• Touch screen design

• Social media

• Search - SEO, PPC

• Measurement and analytics

32

3Sixty is a digital creative agency.

Contact

Chris Thurlingchris.thurling@3Sixty.co.uk+44 (0) 117 90 77 360www.3Sixty.co.uk

1st Floor, Clifton Heights, Triangle West, Bristol BS8 1EJ