CSS for humans

Presented at CSSConf Australia 2015.

Transcript

1. CSS for humans CSSConf Australia 26 March 2015
2. “For good”
3. How?
4. Why!
5. Let’s go back…
7. <p><font style="font-size: 16px; line-height: 24px;">Hi future Matt, this code is rubbish mate</font><p>
8. <p><font style="font-size: 16px; line-height: 24px;">Hi future Matt, this code is rubbish mate</font><p>
9. <p><font style="font-size: 16px; line-height: 24px;">Hi future Matt, this code is rubbish mate</font><p>
10. <p><font style="font-size: 16px; line-height: 24px;">Hi future Matt, this code is rubbish mate</font><p>
11. We were really excited about CSS! "Separating content from presentation" We could make the web beautiful It gave control to users We could design for context
12. A lot has happened since then…
13. In 2015 Getting something done on the web isn’t a choice, it's often the only way you can.
18. 60% of customers who filled out an online form also had to print something
20. If you don’t have a choice…
21. Would you recommend this service? 0 1 2 3 4 5 6 7 8 9 10
22. Did you get it done? ¯\_(ツ)_/¯ ¯\_(ツ)_/¯ Nah Yeah
23. “Customer Satisfaction” is irrelevant
24. Redesigning Business Victoria
25. Overwhelming positive feedback: “It doesn’t look like a government website!”
26. Occasional negative feedback: “It doesn’t look like a government website!”
27. So how did we get there?
28. Customer feedback Overwhelming. The website is jumbled - there’s too much information. Went straight to helpline, wasn’t sure where to look Too much information, wasn't sure where to look and what to look for. Too much info - was easier to call. Too much information, couldn’t see obvious link to public holidays. Too much info - a bit complex. Very busy, too cluttered and the links send you around in circles. Confusing.
33. “What we design shouldn’t draw attention to itself, it should allow people to accomplish their tasks with a minimum of fuss and in the most efficient manner possible. At its best, it will be invisible.”
34. We spoke with real business people.
35. Manufacturing START-UP OPERATIONAL HAPPY WHERE AT OPERATIONAL SEEKING GROWTH/CHANGE Clueless dreamers Transitioners Entrepreneurial Migrants Flexible lifestyle Solo tradies Professional services studios Exporters Married tradies Solo professional services Retail Hospitality COGNITIVE CONTEXT Education, business knowledge Low High EMOTIONAL CONTEXT NEED* *Mapped to Bienalto user segments PHYSICAL CONTEXT stationary/ on the go Excited, optimistic, unsure, confused, overwhelmed, undecided “What do I do?” Content, confident, no desire for change, time poor “How do I do?” Bored, ambitious, focused, time poor, seeking change “How do I solve?” stationary/ on the go space dependent space dependent stationary/ on the go stationary/ on the go stationary/ on the go on the go stationary/ on the go on the go stationary stationary on the go
36. We made it easy.
37. Far fewer decisions to make
39. We co-designed with the government.
41. We made it accessible for all.
42. Choosing a business name Starting a business infographic Protecting your name Search Registering a business name BusinessVictoria Research and apply for a new business name in Australia. Australian businesses are required to register their business name. is available isn’t already registered as a company isn’t already a registered trade mark Make sure your business name... Not what you’re looking for?
44. No more confusion.
45. Choosing a business name Starting a business infographic Protecting your name Cancelling a business name How I began my business – Gardenworld Nursery What I wish I knew: Three entrepeneurs tell all Taking time to be an overnight success Search Registering a business name BusinessVictoria Research and apply for a new business name in Australia. Australian businesses are required to register their business name. Before you start an individual and the business name is your name (first name and surname) a registered company and the business name is the company’s name a partnership and the business name consists of all of the partners’ names. You do not need to register your business name if you are: Related Case Studies Tip When using your personal name for your business, you must use your exact name . For example, if your name is Jane Smith and you want to call your business 'Jane Smith & Co', this would need to be registered. Read some helpful tips on choosing a business name. ! is available isn’t already registered as a company isn’t already a registered trade mark is available as a website Make sure your business name... Not what you’re looking for? Err, I think I’m in the 
 wrong spot... Whatever, government Internet machine. What about real people? What can I do on this page? Why is it important? Page title What do I need to do A tip Before you start
46. We made it fast.
47. We’re now 72% faster
50. So what can you do?
51. User Experience This is your job too
52. A typical web team Be a “UX Developer”
53. Accessibility “Assisted digital” is about everyone using a web service
54. Affordance Get angry about stuff Don’t let #badUX happen
55. Performance Set a budget Measure what matters If we all saved 1s on the next site we launch… The people paying for your work care about this
56. Testing Support all the things
57. Every hour you spend making the web faster, more accessible and easier to use, turns into days of time saved by real people.
58. studiothick.com @StudioThick Thank You @sawks thick.ly/cssforhumans