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 01 Why is NFC the next big thing? .......................................................... 3 02 Adjusting your website for tablet and smartphone viewing............... 7 03 How to do social media well ............................................................. 13 04 The utility of apps ............................................................................ 18
3 01 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.
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 Posted in TECHNOLOGY By Dave North data with a variety of uses, each application can have its own or multiple tags. On 1st June 2011. 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.
5 The first killer application for NFC is digital payments. Load all your debit and Why is NFC credit cards onto your phone; why not add your loyalty cards too? Paying at the the next big supermarket will become as simple as tapping your phone against a scanner thing? 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.
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 02 Adjusting your website for tablet & smartphone viewing
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. Posted in TECHNOLOGY By Matt French It’s an amazingly useful feature, and one that surely caters for any website or app On 31st May 2011. 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
9 device and the headlines shift to the top leaving a large viewing pane now at the Adjusting bottom. Notice that the size of the body text remains the same. your website for tablet & But without going to the effort of designing bespoke mobile or tablet versions of smartphone websites what can we do to make the experience for users more pleasant? viewing 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.
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 Be careful when using Flash On touchscreens, because you don’t have a mouse pointer, rollovers don’t Flash isn’t supported on some devices work so make sure that any rollover so try and make sure there is a effects are not essential for fallback option. basic navigation. Make links more clickable and make buttons easier to press. It can be tricky using the touchscreen so larger custom dropdowns, form fields and larger buttons are more advantageous.
11 Lose the third column Adjusting your website This is quite controversial as a third column containing contextual links is pretty for tablet & much a standard convention with most websites these days. But, by removing it, smartphone you get much more screen real estate available for the meaty content — the viewing 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.
13 03 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.
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: Posted in TRAVEL “If you talked to people the way By Laura Fletcher On 3rd June 2011. advertising talks to people they’d punch 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
15 Ocean. As an island talking to humans on its ‘inter-nets’ it has a very clear and How to do stylised tone of voice, and is prone to the odd, enchanting misunderstanding. social media well 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
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 How to do social media well 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!
19 I bank with First Direct and like many of their The utility of Apps customers I’m evangelical about them, their customer service is second to none in the banking sector. For instance, they answer the phone almost Posted in MOBILE immediately, are always cheerful and efficient. By Jon Waring On 3rd May 2011. 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.
20 The current First Direct website homepage (shown as of 28th April 2011):
21 Typographically Hierarchy The utility of Apps It’s very busy, not as considered as There’s a lot of information given the their printed material. same priority, I don’t feel like I’m being led through the page. Messaging Interaction design Is ‘sell first, help second’ with mortgages, ISAs and whatnot taking It has not been designed for touch up a great deal of space. interaction, using my iPad my clumsy fingers frequently hit the wrong link.
22 Here’s the 3 stage login: Pop up window 1 after clicking link from homepage
24 Now compare it to the simplicity of the iPhone App:
25 I use the First Direct iPhone app more than the actual website: it’s quicker, easier The utility and much more satisfying. In fairness, this is true of most website vs app of Apps 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.
27 Not perfect, not tested and certainly not conclusive but, as a first stab at The utility including some of the lessons learned from their excellent app, I’d argue it’s of Apps an improvement. Forgive me First Direct, I love you really and hopefully you’ll take this post in the spirit it’s intended: ‘Help first, sell second’. 3Sixty is a digital creative agency.
28 We create digital assets that 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 Thurling chris.thurling@3Sixty.co.uk +44 (0) 117 90 77 360 www.3Sixty.co.uk 1st Floor, Clifton Heights, Triangle West, Bristol BS8 1EJ