An overview on the state of the internet, what to consider in terms of Accessibility and Usability in design and development.

1. 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.

2. STATE OF THE WEB
WHAT THE HELL IS GOING ON?
Let’s start with a round up of what is going on with the internet.

3. 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.

4. 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.

5. 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…

6. 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

7. 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.

8. 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!

9. 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?

10. 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 2015
http://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.

11. 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.

12. 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?

13. 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

14. 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.

15. THE INTERNET WAS DESIGNED FOR
INFORMATION EXCHANGE AND IT
SHOULD STAY THAT WAY FOR A
WHILE YET.
THE TAKE HOME

16. RESPONSIVE DESIGN
SIZE DOESN’T MATTER

17. 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

18. 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.

19. 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.

20. 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

21. 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.

22. 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”

23. 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.

24. 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!

25. 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.

26. 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.

27. 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.

28. 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.

29. 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.

30. 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).

31. 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

32. RESPONSIVE DESIGN IS
NOT JUST 3 DIFFERENT
LAYOUT DESIGNS

33. USABILITY
HOW 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!

34. 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.

35. WIREFRAMING

36. 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!)

37. 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.

38. 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.

39. 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!

40. 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.

41. 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

42. 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.

43. 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

44. LISTEN TO USERS

45. ACCESSIBILITY
USERS ARE PEOPLE TOO

46. 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.

47. 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

48. © 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!)

49. 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.

50. 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.

51. 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.

52. 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.

53. 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…

54. 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?

55. 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.

56. 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.

57. 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

58. THERE ARE MORE DISABLED USERS
THAN EVER, BECAUSE TECHNOLOGY
ACCEPTS THEM, AS DESIGNERS WE
NEED TO AS WELL

59. SUMMARY
WRAPPING UP

60. 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

61. 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.

62. THANK YOU
MATT@TODAYISHOULD.COM