some of our recent thinking
DESCRIPTION
A selection of some of the most useful articles from the 3Sixty blog.TRANSCRIPT
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 [email protected]+44 (0) 117 90 77 360www.3Sixty.co.uk
1st Floor, Clifton Heights, Triangle West, Bristol BS8 1EJ