Top Banner
Make your website work harder for you Creating task-focused home pages
45

Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Aug 20, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Make your website work harder for you

Creating task-focused home pages

Page 2: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Website usability – putting yourself in your visitor’s shoes and thinking about their needs

Page 3: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 4: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 5: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Specific tasks

Random browsing

My website activity (excluding social media!)

Page 6: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

My website activity

Look familiar?

Specific tasks • Check movie times. • Check bank balance and pay

bills. • Book kid’s activities. • Find recipes. • Pay parking fine. • Buy gifts for overseas

relatives. • Find gardening tips.

Random browsing • Read news on the

www.guardian.co.uk. • ‘Window’ shopping.

Page 7: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Tool vs brochure

Think of your website as a tool that enables visitors like me to complete tasks…not an online brochure.

Page 8: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Gerry McGovern

Page 9: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Gerry’s quote ‘From your customers’ perspective your website is all about tasks. They are there to do and they very much know what they want to do. This may sound obvious but for many people it is not obvious at all. In fact, many people resist the very idea that their website is all about customer tasks.’

Page 10: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

‘Some years ago I stood in front of an audience in Chicago extolling the virtues of top task management. A hand was raised in the audience. “I can see how managing tasks might work for some websites but it wouldn’t work for ours,” the lady said. “Because we don’t have tasks. We have information.” “What sort of website do you have?” I asked. “A health website.” “A health website? Okay. Let’s say my child has a rash,” I replied. “When I come to your website, am I looking for information or am I looking to get rid of the rash?”’

Page 11: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

‘Nobody cares about information for its own sake; except the creators of said information. The customer has a task they want to complete, a problem they want to solve. Information is only useful in the context of the task.’

Page 12: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

The ultimate task-focused home page!

Page 13: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 14: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Welcome to We provide the best search experience in the world. We have the best algorithms that ensure you get the best results first time, every time. We also provide other tools like Gmail, Drive, Calendar, Slide, Blogger, News and many more. Did you also know that we own YouTube? (scroll, scroll, scroll….)

What if it looked like this...

Page 15: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

But enough about us. Type in your search term below:

Go!

Page 16: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

How do we make our home pages more task-focused? •Key tasks – define 5-7.

•Design – rework to highlight key tasks. •Content – use active language and declutter.

Page 17: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Key tasks •Ask your visitors – face to face, survey.

•Queries – via email and phone.

•Website statistics – popular pages and search terms.

Page 18: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Key task examples •FIND contact details and/or location. •FIND out how to get involved/volunteer. •MAKE a donation. •LEARN more about the organisation’s work/projects/appeals.

•REGISTER for an event. •BECOME a member. •LOG in.

Page 19: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Design

Most important Quite important

Less important Scroll line

Page 20: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Visual hierarchy ‘the order in which the human eye perceives what it sees.’ (Wikipedia)

Think of the elements on your home page. •What stands out and why? •How do elements on the page relate to each other?

Page 21: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Design examples - how do they present key tasks?

•Feeding America feedingamerica.org

•Susan G. Komen, Breast cancer awareness komen.org

•Wellington City Council wellington.govt.nz

Page 22: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 23: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 24: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Key task research

Book Maya into term 2 swimming classes!

Interesting!

Page 25: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Content Use ACTIVE language •Use ACTIVE and ENGAGING language for headings, links and key messages.

Declutter •Be brave! Maximise key task content and minimise brochure content.

Page 26: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Content examples – language and clarity •Save the Children savethechildren.org.nz

•Child Aid child-aid.org

•Alliance for African Assistance alliance-for-africa.org

•Wellington City Mission wellingtoncitymission.org.nz

Page 27: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 28: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM
Page 29: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

More personal

Page 30: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

A trend!

Stylish and clean

Page 31: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Case studies – analyse by topics covered •Key tasks – define •Design – highlighting of tasks. •Content – active language and not too busy.

Page 32: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Plunket - plunket.org.nz Key tasks: •Appointment timeline •Immunisations •Courses •Car seat rental •PIN groups •Help and advice - phoneline and clinics •Locations

Page 33: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

A useful tool

Page 34: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

So just a little rearranging...

But sometimes it’s not that easy...

Page 35: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Zac and Bishop - great volunteers!

Page 36: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Scouts - www.scouts.org.nz

Key tasks: •How to join. •What’s involved – time. •How much does it cost. •What group level is suitable for my child. •Locations.

Page 37: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Simplify (7+/- 2) and focus on tasks (eg, How to join, What we do, Our groups) and turn horizontal.

Ideal for carousel

A busy three-column layout.

Page 38: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Makara peak - www.makarapeak.org.nz Key tasks: •Location. •Parking. •Volunteer/Community. •Donate. •Track maintenance. •Map of areas and levels/skill required.

Page 39: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Add utility nav eg, Login, Donate, Contact Focus on tasks (eg, Location and Tracks, Events, Get involved, Maintenance work) and turn horizontal Linear vs horizontal

Page 40: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Your turn! • Define your top 5-7 tasks. • Block out a new layout for your homepage

that highlights them.

Page 41: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Layout examples Logo

Task-focused navigation Utility tasks

Heading, key message and image

Task Task Task

Logo

Logo Logo Task-focused navigation

Task-focused navigation

Navigation

Heading, key message and image

Heading, key message and image

Heading, key message and image Task

Task

Task Task Task Task Task

Utility tasks

Utility tasks

Page 42: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Any volunteers for sharing?

Page 43: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Questions? Follow up?

Page 44: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Thank you :)

Page 45: Make your website work harder for you · •Content – use active language and declutter. Key tasks ... Make your website work harder for you Created Date: 10/30/2016 9:27:48 AM

Acknowledgements http://www.gerrymcgovern.com/ http://www.howto.gov/webcontent/manage /focus-on-top-tasks