tales of the modern dev
TRANSCRIPT
TALES OF THE MODERN DEVELOPER
MATT BEE, TODAY I SHOULD
So here it is - a rough and ready ramble from a developer - you know - us with the “can’t do” attitude - well hopefully I’ll show that some of us have a real “can do” attitude - it might be behind the scenes in code or it might be passion about working with designers to get the best results - developers often care as much as you do about getting the best from everything we do.
STATE OF THE WEBWHAT THE HELL IS GOING ON?
Let’s start with a round up of what is going on with the internet.
Web technology is taking over, it’s everywhere - even our watches are super powerful internet connected devices, apps control our heating through the internet and our fridge can tell us the latest news.
STATE OF THE WEB
WEB TECHNOLOGIES ARE TAKING OVER
▸ The “Internet of Things” is growing
▸ Control your heating from the bus
▸ Fly a drone using your iPhone
▸ Term “IoT” was coined in 1989 - first device was created as a result of a bet!
Even though its become part of an iPhone/Andriod app world, web technology still handles a lot of the data transfer for modern apps. Using the web, you can check for train delays. Get a cab using Uber.The IoT term was coined when John Romkey was bet at a conference that he couldn’t connect a toaster to the internet - and he duly did for the following year!More Useful Uses include: a system available to let diabetes patients monitor their blood sugar levels from home and doctors analyse the data regularly and accurately. As fitbit does for your fitness, clever applications can improve people’s lives.
THE INTERNET IS STILL MOSTLY PROVIDING INFORMATION EXCHANGE
The main use of the internet is still the creation or consumption of information.Google is still the most visited website, along with Facebook, shopping sites (Amazon/eBay) and the BBC.Rightmove is the 20th top site in the UK! According to Alexa - http://www.alexa.com/topsites/countries/GB Of course much of the content on the regularly consumed internet content has been available for a long time before the internet…
Funny that the full Ceefax magazine boast of 100 pages is nothing compared to the hundreds of thousands of pages on the bbc.co.uk website today.But as the web is now global, let’s look at who uses the internet and how
STATE OF THE WEB
WHO USES THE WEB
▸ Asia largest consumer of internet
▸ And only 39% penetration
▸ Compared to 87% of USA penetration
▸ Only 704 million users in Europe
The internet is huge, almost immeasurable - but users can be measured. Although work we produce may only be touching a specific demographic, we need to realise that everything we do can reach users all over the world, and useful technologies do reach users worldwide.More than double the users that exist in Europe are already users in Asia.
STATE OF THE WEB
AVERAGE AGE OF INTERNET USERS
© Statista, 2015 - http://www.statista.com/statistics/272365/age-distribution-of-internet-users-worldwide/
The average age of internet users will continue to increase as the population ages, the 30 something users of today will still be using the internet until they become the 55+ demographic. And will expect the same standards they experience today.
But it’s not even just us humans that are using the internet!
STATE OF THE WEB
The game may be an iOS device, but the internet has made this spread of content possible. If someone had had to go out to a shop to load the game onto their device, I doubt that many cats would have had chance to play this brilliant game!
But back to humans. I saw this video through sharing on Twitter. So what about the social networks - who uses those?
STATE OF THE WEB
MOST POPULAR SOCIAL NETWORKS (WORLDWIDE)
▸ Facebook - 1490 million
▸ QQ - 832 million
▸ WhatsApp - 800 million
▸ Facebook Messenger 700 million
▸ QZone - 668 million
▸ WeChat - 549 million
▸ Twitter - 316 million
© Statista 2015http://www.statista.com/statistics/272014/global-social-networks-ranked-by-number-of-users/
Countdown of Social Networks - POP QUIZ!
QQ and QZone and WeChat - Chinese Social Networks
Despite our first world internet usage of cat videos and foody photos, the modern internet has amazing and vital uses.
THE INTERNET STILL HAS VITAL AND SIMPLE USES
This photo did the rounds as a criticism of refugees - but why, they have technology, would we make them shun it to fit our stereotype of someone fleeing persecution?There are 87 smartphones for every 100 people in Syria. They are used for vital communication.In many countries, smartphones and the internet are the only way to avoid state surveillance, citizens post warnings to each other, it’s the only way to only access to independent media, reporting truth to the rest of the world. I even heard of families crowd funding their escape train and air fares!Facebook are teaming up with the UN to provide internet access in refugee camps: http://mashable.com/2015/09/28/facebook-refugee-camp-internet Simple technology.
STATE OF THE WEB
Staying with migrants for a second - the New York Times ran this story in August.Naive criticised the need for a mobile, but when you are fleeing war but also trying to keep up with what is happening and in touch with family still in Syria (your homeland) why should we deny them that.If you were escaping escaping horrors we can not dream of, to whom is a smartphone and the internet more important - me to check Facebook or a refugee whose world has been torn apart?
STATE OF THE WEB
PARIS ATTACKS
▸ Facebook turned on Safety Check for the first time for a non-natural disaster
▸ The hashtag #PorteOuverte (open door) was used to help people find shelter
▸ A simple show of solidarity in Facebook profile pictures
▸ AirBNB allow free bookings by people who can offer shelter
▸ Telephone companies offer free internet calls to France
To get back to the internet and how it can do good, it reacted pretty well to the Paris attacks.
http://www.networkworld.com/article/3005537/security/how-the-internet-responded-to-the-paris-terror-attacks.html#slide9
STATE OF THE WEB
THE FUTURE OF THE INTERNET
▸ The internet is seen as a vital progression for the world to connect and learn from each other
▸ The internet can change people’s lives by providing information and technological advances to countries that need it most
▸ NetHope.org aims to use deliver technology where it can make a real difference
▸ internet.org aims to connect the world to the internet (by Facebook)
▸ I just want my wireless printer to work
Hopefully the internet will continue to flourish, with new innovations enhancing our lives all the time and massive improvements in entertainment, like Netflix revolutionising TV - we need to remember that the internet is basically pretty cheap and could improve others live a whole lot more than it could ever improve ours.
THE INTERNET WAS DESIGNED FOR INFORMATION EXCHANGE AND IT SHOULD STAY THAT WAY FOR A WHILE YET.
THE TAKE HOME
RESPONSIVE DESIGNSIZE DOESN’T MATTER
RESPONSIVE DESIGN
HOW MANY SCREEN SIZES ARE THERE?
It is truly unknown. Every week a new device is launched. The above graphic shows a light blue outline for every single Android device available (in 2012!)To generate the above software company rans testing on devices using their networks and apps - and counted 3997 distinct devices. 3997. And that’s just mobile devices.
https://opensignal.com/reports/fragmentation.php
MY JOB IS EASY
Matt Bee, 2015
RESPONSIVE DESIGN
Honestly. It is relatively easy. OK, maybe not “easy”.
But significantly easier than a designer who has to think in percentanges, ratios and work out how to make a client understand what they will actually see in the final product.
When it isn’t a well designed product, well, my job is anything but easy.
RESPONSIVE DESIGN
WHAT NEEDS CONSIDERING
▸ Content length
▸ Image Scaling
▸ Fonts
▸ Interactions
▸ Page Weight
▸ Network Speeds
Very generally there are lots of factors that need considering with responsive design.It isn’t just designing for different screen sizes but different environments, different use cases, different users.
RESPONSIVE DESIGN
CONTENT LENGTH
▸ Long text will wrap - designers know this, right?
▸ Design needs to incorporate that
▸ Content strategy should leave you with well crafted content that’s easy to digest on ANY device
▸ It is a different experience on mobile, but the experience should be different, not the copy
Designs often forget scaling - sliders often need full reworking and more thought on mobile
RESPONSIVE DESIGN
CONTENT LENGTH
This is from a design I worked on recently - the designer had created a lovely design for desktop, however left things to scale on mobile, but without realising that the date couldn’t scale down, it had to wrap, but no alternative work went into it and the fuzzy image was an issue - so we just lost the design element on mobile due to designer workload.
This shows that it can work both ways too - designer has left plenty of space but the developer has built a design to the letter, not allowing space for any different content other that “OFFERS” or “SALE”
RESPONSIVE DESIGN
IMAGE SCALING
▸ Sixty-two percent of the weight of the web is images
▸ That’s a big big chunk
▸ We need to optimise this better.
RESPONSIVE DESIGN
IMAGE SCALING
Image scaling should be artworked. At no point should any developer just be left to “make it single column and scale it all down”. We have so much power, especially on mobile that we can artwork images for different screen sizes, we really should put in some effort!
How about an example - why hide the beautiful imagery on mobile - just focus on elements of the image that convey a message. - Now I can see that that is the Brooklyn Bridge!
RESPONSIVE DESIGN
NETWORK SPEEDS
This is mobile coverage in the South West tip of England. It’s pretty good, right?
Wrong. The coverage is good but we’re making our websites inaccessible by making them large downloads for the most basic information.
RESPONSIVE DESIGN
NETWORK SPEEDS
This is 4G coverage - the population may be sparse, but then this is where people need mobile sites to work better, in the middle of nowhere.
Yes in London 4G coverage is excellent, but the whole idea of the internet is open access, accessibility and freedom to exchange information. If all our sites rely on fast broadband and 4G connections, we’re failing users. When 4G packages are more expensive and the bigger the website, the faster people’s data is used up, the more they will hate us, and using the internet becomes a bad experience.
WE DON’T GET TO CHOOSE HOW MANY TIMES THINGS ARE DOWNLOADED
A web page open and left to sleep will reload in many mobile browsers - poorly managed websites will completely download again, eating into people’s data allowance without them choosing to engage, or sometimes even realising.
RESPONSIVE DESIGN
DOES PAGE SPEED MATTER IF THE CONTENT IS PROVIDED?
▸ SPOT QUIZ!!
▸ Divide into 2 teams, and just get the information from the site provided.
Phones 4U comparison of 4G and 3G speeds - and many can’t get fast speeds. At big events speed is massively reduced, it’s not just normal usage conditions that should be considered.
But making improvements for phones and fast downloads, means improvements on desktop - Google rank faster sites better than equally ranked sites on content (among other factors).
RESPONSIVE DESIGN
PERFORMANCE GAINS
▸ Mozilla - 60 million more downloads
▸ Amazon - estimate 1 second increase would cost 1.6 billion per year
▸ Walmart - 1 second improvement upped conversion by 2%
▸ Google rankings - a big percentage of their algorithm accounts for speed (in relative terms)
Mozilla increased firefox downloads by 15.4% - 60 million downloads per year. Previously the whole chrome site downloaded before their header finished
RESPONSIVE DESIGN IS NOT JUST 3 DIFFERENT LAYOUT DESIGNS
USABILITYHOW IT WORKS
So we’ve already mentioned smartphones as a regular way to connect to the internet. And we now expect websites to be as easy to use on mobile as they are on our computers.That’s usability - how well something is designed for easy use or rapid learning.An example of usability is the iPhone - it’s popularity is partly down to how easy everyone picked it up. In theory it’s a bad design for a phone - there’s no instant “make call” button, you have to deep dive to get it!
USABILITY
USABILITY IN THE WEB
▸ Simple design is best
▸ Don’t make me think approach
▸ Follow convention
▸ It’s not just an internet thing
I won’t bore you with a lecture on usability - but I will run through some examples on usability in the web - and where we are going right, or maybe going wrong.
Simple design is often best. For example e-commerce sites have a pattern, so we can guess what users will expect. - So let’s wireframe a e-commerce home page.
WIREFRAMING
USABILITY
PRODUCTS
I can have worked out what button I need before I even get halfway down searching for a button on the Sky remote.
Sometimes more work feels easier if we are guided along a clear path. It’s like a cycle of patience we have. once we make a decision our patience/frustration levels are reset (to a degree!)
USABILITY
USABILITY ON THE WEB
▸ Not always good
▸ For example - what is this?
▸ OK, but what if this worked better?
http://exisweb.net/menu-eats-hamburger
Hamburger is a good example - using the word menu increased click on a test by 20%.
Why would that be? Theory might be that the user doesn’t need to think and when looking for things, anything subconsciously non-obvious is ignored and users move on quickly.
USABILITY
KEY IS TESTING
▸ Listen to users
▸ Not designers, developers, account managers or ANYONE else
▸ Just listen to your users
▸ Only then will the user experience be right.
There is only one person that knows how your product should work. Any they won’t tell you!
Partly because they don’t know themselves. They key is working with people’s previous learning, intuition and environments to work out the best way to use a product.
USABILITY
ASPECTS OF USER EXPERIENCE
Value Usability
Adoptability Desirability
http://www.uxmatters.com/mt/archives/2012/04/more-than-usability-the-four-elements-of-user-experience-part-i.php
Although saying that, there is a theory that usability is only part of the user experience, and I agree.If something is valuable to a user it’s worth investing in the learning of the ‘whatever’ and if you are introducing anything knew, it should fall into one of these categories.iPhone for an example. And consider how this relates to the apple TV remote!
THE ONLY PERSON THAT KNOWS BETTER THAN YOUR USERS ARE YOUR NON-USERS
Matt Bee
USABILITY
It’s something I like to try and think about in build - build for people that I don’t think will know the product at all, and think like they would. “What is this” Where do I start? etc etc
Then try it on someone you know.
USABILITY
TESTING IS EASY
▸ The key is watching users
▸ Usability testing is cheap
▸ You’ll learn more than you realised
▸ It will ALWAYS surprise you
▸ You’ll improve your product
USABILITY
A SIMPLE TEST
▸ http://www.creativewithak.com/
▸ You work with the agency
▸ You need to email the web designer, but have forgotten
▸ Find out what the name of the web developer is.
A simple test - your website should be so easy to use a drunk person can do it.In fact - that service exists: http://theuserisdrunk.com/Or consider that there is lovely old lady out there who is just like my mum. Oh, the same guy has set that up too: http://theuserismymom.com/ Testing on anyone is valid and useful - the more the better in my opinion
LISTEN TO USERS
ACCESSIBILITYUSERS ARE PEOPLE TOO
ACCESSIBILITY
WHAT IS A DISABILITY?
▸ Your go!
What are disabilities - please name some.Blindness - yes, but disability does not just mean lack of sight - but 2 million people live registered as partially sighted or blind - by 2050 the RNIB estimate that 4 million people will live with registered visual impairment.
DISABILITY IS NOT JUST A HEALTH PROBLEM. IT IS A COMPLEX PHENOMENON, REFLECTING THE INTERACTION BETWEEN FEATURES OF A PERSON’S BODY AND FEATURES OF THE SOCIETY IN WHICH HE OR SHE LIVES
World Health Organisation
ACCESSIBILITY
© Microsoft Inclusive Toolkit, 2015
ACCESSIBILITY
So no doubt we have all been excluded from using websites efficiently - how about a demo:Volunteer please (this may not work perfectly but hopefully it will prove a point!)
Experiment:Volunteer to hold the baby, now without dropping the wriggling baby (that’s one hand out of action). Now go to Google Maps and zoom out.
Difficult, isn’t it?What you could do is double tap, hold down the second tap and move your finger up and down! Google take time to invest in this accessibility feature and it’s things that we should all consider and try to implement - it will help users.
ACCESSIBILITY
IOS ACCESSIBILITY FEATURES
▸ Voiceover
▸ Dictation
▸ Zoom
▸ Invert Colours/Greyscale
▸ Switch control
The phone is popular with disabled users because of these features. Switch control is one to note because too often we hijack this interaction, and either remove functionality from our websites or change what a user expects to happen (Sliders! Carousels!). That’s unacceptable. It’s like me coming in and changing your doors to open inwards, when they opened outwards yesterday - you will not think about which way they work - just do it.
ACCESSIBILITY
WHO USES THESE FEATURES
Difficulty is that we can’t see stats, due to worries about privacy screen reader and accessibility tools usage are not reported - so we have to accept there are users out there and should accommodate as much as possible.
ACCESSIBILITY
HARSH TRUTH
▸ We deteriorate with age - more users needing help are coming
We are humans, and our bodies are not like a fine wine - they deteriorate with age. There isn’t any getting away from it, and as more young people grow old, they will still expect to be able to use the technology they’ve always used.More “disabled” users are coming.
ACCESSIBILITY
YOUR WEBSITE FAILS USERS
OK, so sorry about that - but it might matter to some users - and it might not be ideal for those not even registered as disabled - people don’t like wearing glasses - they might have forgotten them, it’s a whole host of reasons to do the best we can.
But then it can be a lot worse than missing out on a testimonial…
ACCESSIBILITY
ANIMATION IS COOL
▸ But is it needed?
▸ We have a responsibility to manage design for vulnerable users
So we know animation is cool. But is it cool for everyone?How about if we trigger people disabilities? Is that cool?
ACCESSIBILITY
WHAT IF I HAD EPILEPSY?
This is a site from Bloomberg.Some have said it is beautiful… but it could cause an epileptic seizure (according to guidelines from epilepsy.org.uk), it massively contravenes the advice from the W3C and Epilepsy Action organisation.
NHS estimate there are half a million epilepsy suffers in the UK. There are good designs that don’t contravene epilepsy advice - so that advice should be followed.
ACCESSIBILITY
WHAT SHOULD WE DO
▸ We should not auto play things
▸ Things shouldn’t flash more that 3 times in any 1 second
▸ Suppress flashing before any happens
▸ Option to disable flashing content
▸ If the user is unable to control the flickering, blinking and moving (this includes stopping these effects from starting), then these effects should not be used (sorry Razorfish…)
The previous site virtually violates all of these rules.
ACCESSIBILITY
WHY BOTHER, IF IT’S NOT TARGET AUDIENCE?
▸ Disability discrimination legislation
▸ In some countries, such as the UK, it is illegal to discriminate against people with long-term health conditions.
▸ If your website, video or other piece of online content breaks the W3C good practice guide (above), then you should consider if there is a valid reason for it to do so. If it is needed, change it.
https://www.epilepsy.org.uk/info/photosensitive-epilepsy/web-design
THERE ARE MORE DISABLED USERS THAN EVER, BECAUSE TECHNOLOGY ACCEPTS THEM, AS DESIGNERS WE NEED TO AS WELL
SUMMARYWRAPPING UP
SUMMARY
TAKE HOMES
▸ Content is key
▸ Responsive design is a complete approach to device and environment design
▸ Listen to your users (before, during and after!)
▸ Accessibility is a responsibility we have - that comes with huge other gains
EVEN THE BEST DESIGNERS PRODUCE SUCCESSFUL PRODUCTS ONLY IF THEIR DESIGNS SOLVE THE RIGHT PROBLEMS. A WONDERFUL INTERFACE TO THE WRONG FEATURES WILL FAIL.
SUMMARY
Jakob Nielson
Key is uncovering the problems, using research.
