Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTTPS://SHANTA.DRAGONTEACH.COM
IF YOU WANT TO REGISTER FOR DEMO TO USE FOR THIS
TALK, (A SANDBOX TO PLAY IN), GO TO MY SCH...
HOW TO ORGANIZE YOUR
CONTENT THROUGH
NAVIGATION AND
WAYFINDING
BY SHANTA R. NATHWANI
WORDCAMP OTTAWA – WORKSHOP
JULY 14, 2...
AGENDA
• INTRODUCTION
• PAGES & POSTS
• CATEGORIES & TAGS
• NAVIGATION & WAYFINDING
• Q & A’S
IN BETWEEN EACH TOPIC, WE’LL...
GUIDELINES
• YOU WILL NOT FINISH EVERYTHING TODAY. THIS IS AN ONGOING PROCESS AND TAKES TIME.
• WE ARE GOING TO WORK THROU...
SHANTA R. NATHWANI
QUALITY ASSURANCE MANAGER AT WEEVER APPS INC.
CO-ORGANIZER AT WORDCAMP HAMILTON
TWITTER: @SHANTADOTCA
W...
OUR CASE STUDY
ANDREA RENNICK
HTTPS://WWW.RIDGEMACHINEQUILTING.COM
TWITTER: @ANDREA_R
Shanta R. Nathwani - https://shanta....
HTTPS://TANTIENHIME.COM
GO TO THIS WEBSITE TO SEE MY DEMO AS I WORK.
Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
HTTPS://SHANTA.DRAGONTEACH.COM
IF YOU WANT TO REGISTER FOR DEMO OF THIS TALK, GO
HERE AND SELECT THE COURSE, “HOW TO ORGAN...
MAIN IDEA
POSTS VS. PAGES & CATEGORIES VS. TAGS. THERE IS SO MUCH CONFUSION ABOUT WHAT TYPES OF
THINGS SHOULD BE PUT ON A ...
WHAT IS WAYFINDING?
THE BASIC PROCESS OF WAYFINDING INVOLVES FOUR STAGES:
• ORIENTATION IS THE ATTEMPT TO DETERMINE ONE'S ...
QUESTION…
Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 11Photo by Greyson Joralemon on Unsplash
1. WRITE DOWN ALL THE
THINGS
IT WILL LOOK LIKE A MESS, BUT THAT’S OKAY
Shanta R. Nathwani - https://shanta.ca - @ShantaDot...
13
POST-IT NOTES
• USED TO PUT DOWN ALL THE PIECES OF
INFORMATION THAT YOU WANT TO PUT ON YOUR
WEBSITE
• LATER ON, YOU WIL...
NOW, YOUR TURN!
TAKE A FEW MINUTES NOW. START FILLING IN THOSE POST-ITS WITH YOUR IDEAS OF WHAT YOU
WANT ON YOUR OWN SITE....
3-5-7 PRINCIPLE
• 3 CLICKS TO WHERE YOU NEED TO BE
• FEW (VERY FEW) EXCEPTIONS
• NO MORE THAN 5-7 ITEMS IN A LIST.
• THIS ...
PAGES VS. POSTS
PAGES
• STATIC INFORMATION FOR THE MOST PART
• “ABOUT US” IS A GREAT EXAMPLE
• DOES NOT USE CATEGORIES
• C...
CATEGORIES VS. TAGS
CATEGORIES
• MAJOR CLASSIFICATIONS FOR INFORMATION
• “EVENTS” IS A GREAT EXAMPLE
• CAN HAVE SUB-CATEGO...
2. PUT CONTENT TO EITHER CATEGORIES OR PAGES
Pages Categories
Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 18
Abou...
EMBRACE THE POST-ITS
WE’LL START WITH OUR CASE STUDY AND THEN YOU CAN DO YOUR OWN. WE’LL DO THIS FOR THE
NEXT STEP AS WELL...
Pages Categories
3. CHANGE THE COLOUR OF ONE OF THE TWO SETS
Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 20
About...
4. STRUCTURE THE MENU USING THE POST IT NOTES
Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 21
THINGS TO KEEP IN MIND WHEN ORGANIZING THE
MENU
• KEEPING THE 3-5-7 RULE, START TO STRUCTURE YOUR MENUS ACCORDING TO THE T...
TO YOUR TERMINALS!
WE’LL GO THROUGH THE NEXT STEPS, ONE BY ONE, FIRST USING THE CASE STUDY,
THEN TO WORK ON YOUR OWN SITE....
HTTPS://SHANTA.DRAGONTEACH.COM
IF YOU WANT TO REGISTER FOR DEMO OF THIS TALK, GO
HERE AND SELECT THE COURSE, “HOW TO ORGAN...
5. CREATE YOUR CATEGORIES ON WORDPRESS
Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 25
6. CREATE THE MENU ON YOUR WEBSITE
Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 26
QUESTIONS?
PLEASE FEEL FREE TO SEND ME A MESSAGE!
HTTPS://SHANTA.CA/CONTACT
Shanta R. Nathwani - @shantaDotCa - https://sh...
RESOURCES
• INFORMATION ARCHITECTURE: BLUEPRINTS FOR THE WEB:
HTTP://WWW.AMAZON.COM/INFORMATION-ARCHITECTURE-BLUEPRINTS-CH...
Upcoming SlideShare
Loading in …5
×

Navigation and Wayfinding On Your Website - WordCamp Ottawa 2019

54 views

Published on

Posts vs. Pages & Categories vs. Tags. There is so much confusion about what types of things should be put on a page and what should be in a post. Static vs. Dynamic content is the best way to tackle this. When creating a website, you can edit a menu to include not only pages, but also categories that can create a more complete experience.

This Workshop guides you through the process to giving your visitors a better way to access your website other than through the word "Blog"

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Navigation and Wayfinding On Your Website - WordCamp Ottawa 2019

  1. 1. HTTPS://SHANTA.DRAGONTEACH.COM IF YOU WANT TO REGISTER FOR DEMO TO USE FOR THIS TALK, (A SANDBOX TO PLAY IN), GO TO MY SCHOOL AND SELECT THE COURSE, “HOW TO ORGANIZE YOUR CONTENT THROUGH NAVIGATION AND WAYFINDING” Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
  2. 2. HOW TO ORGANIZE YOUR CONTENT THROUGH NAVIGATION AND WAYFINDING BY SHANTA R. NATHWANI WORDCAMP OTTAWA – WORKSHOP JULY 14, 2019 2 PM
  3. 3. AGENDA • INTRODUCTION • PAGES & POSTS • CATEGORIES & TAGS • NAVIGATION & WAYFINDING • Q & A’S IN BETWEEN EACH TOPIC, WE’LL WORK TOGETHER, USING OUR CASE STUDY. Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 3
  4. 4. GUIDELINES • YOU WILL NOT FINISH EVERYTHING TODAY. THIS IS AN ONGOING PROCESS AND TAKES TIME. • WE ARE GOING TO WORK THROUGH THE CASE STUDY AS A GROUP, AND THEN YOU’LL HAVE TIME TO WORK ON EACH STEP FOR YOUR OWN PROJECT. • IF YOU’RE NOT SURE, ASK AROUND. WE ALL VISIT WEBSITES. YOU’LL PROBABLY FIND CONSENSUS FROM EVEN STRANGERS. • YOU WON’T NEED YOUR COMPUTER UNTIL STEP 5. • THIS WORKSHOP IS FLEXIBLE. THE STEPS ARE NOT. TRUST IN THE PROCESS. THERE IS LIGHT AT THE END OF THE TUNNEL. Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 4Photo by William Bout on Unsplash
  5. 5. SHANTA R. NATHWANI QUALITY ASSURANCE MANAGER AT WEEVER APPS INC. CO-ORGANIZER AT WORDCAMP HAMILTON TWITTER: @SHANTADOTCA WEBSITE: HTTPS://SHANTA.CA Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
  6. 6. OUR CASE STUDY ANDREA RENNICK HTTPS://WWW.RIDGEMACHINEQUILTING.COM TWITTER: @ANDREA_R Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 6
  7. 7. HTTPS://TANTIENHIME.COM GO TO THIS WEBSITE TO SEE MY DEMO AS I WORK. Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
  8. 8. HTTPS://SHANTA.DRAGONTEACH.COM IF YOU WANT TO REGISTER FOR DEMO OF THIS TALK, GO HERE AND SELECT THE COURSE, “HOW TO ORGANIZE YOUR CONTENT THROUGH NAVIGATION AND WAYFINDING” Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
  9. 9. MAIN IDEA POSTS VS. PAGES & CATEGORIES VS. TAGS. THERE IS SO MUCH CONFUSION ABOUT WHAT TYPES OF THINGS SHOULD BE PUT ON A PAGE AND WHAT SHOULD BE IN A POST. STATIC VS. DYNAMIC CONTENT IS THE BEST WAY TO TACKLE THIS. WHEN CREATING A WEBSITE, YOU CAN EDIT A MENU TO INCLUDE NOT ONLY PAGES, BUT ALSO CATEGORIES THAT CAN CREATE A MORE COMPLETE EXPERIENCE. Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 9Photo by Kelly Sikkema on Unsplash
  10. 10. WHAT IS WAYFINDING? THE BASIC PROCESS OF WAYFINDING INVOLVES FOUR STAGES: • ORIENTATION IS THE ATTEMPT TO DETERMINE ONE'S LOCATION, IN RELATION TO OBJECTS THAT MAY BE NEARBY AND THE DESIRED DESTINATION. • ROUTE DECISION IS THE SELECTION OF A COURSE OF DIRECTION TO THE DESTINATION. • ROUTE MONITORING IS CHECKING TO MAKE SURE THAT THE SELECTED ROUTE IS HEADING TOWARDS THE DESTINATION. • DESTINATION RECOGNITION IS WHEN THE DESTINATION IS RECOGNIZED.[1] Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 10Photo by Nathan Queloz on Unsplash
  11. 11. QUESTION… Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 11Photo by Greyson Joralemon on Unsplash
  12. 12. 1. WRITE DOWN ALL THE THINGS IT WILL LOOK LIKE A MESS, BUT THAT’S OKAY Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 12Photo by Kyle Glenn on Unsplash
  13. 13. 13 POST-IT NOTES • USED TO PUT DOWN ALL THE PIECES OF INFORMATION THAT YOU WANT TO PUT ON YOUR WEBSITE • LATER ON, YOU WILL WANT TO COLOUR CODE THEM INTO CATEGORIES AND PAGES • USING OUR CASE STUDY, WHAT ARE SOME OF THE TOPICS THAT WE MIGHT WANT TO SEE ON THIS WEBSITE? Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca
  14. 14. NOW, YOUR TURN! TAKE A FEW MINUTES NOW. START FILLING IN THOSE POST-ITS WITH YOUR IDEAS OF WHAT YOU WANT ON YOUR OWN SITE. YOU MAY NOT FINISH IT TODAY, BUT IT WILL GIVE YOU A START. Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 14Photo by Kelli Tungay on Unsplash
  15. 15. 3-5-7 PRINCIPLE • 3 CLICKS TO WHERE YOU NEED TO BE • FEW (VERY FEW) EXCEPTIONS • NO MORE THAN 5-7 ITEMS IN A LIST. • THIS INCLUDES MENUS AND LISTS Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 15
  16. 16. PAGES VS. POSTS PAGES • STATIC INFORMATION FOR THE MOST PART • “ABOUT US” IS A GREAT EXAMPLE • DOES NOT USE CATEGORIES • CAN HAVE SUB-PAGES POSTS • DYNAMIC INFORMATION • TIME SENSITIVE • USES CATEGORIES & TAGS • “UPCOMING EVENTS” OR “EVENTS ATTENDED” ARE GOOD EXAMPLES Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 16
  17. 17. CATEGORIES VS. TAGS CATEGORIES • MAJOR CLASSIFICATIONS FOR INFORMATION • “EVENTS” IS A GREAT EXAMPLE • CAN HAVE SUB-CATEGORIES (MUCH LIKE PAGES) • HIERARCHICAL TAGS • DESCRIBES THE CONTENT USING KEYWORDS • WORDPRESS RECOMMENDS 5-7 PER POST • NON-HIERARCHICAL Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 17
  18. 18. 2. PUT CONTENT TO EITHER CATEGORIES OR PAGES Pages Categories Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 18 About Us Events Services Recipes Contact Products Portfolio
  19. 19. EMBRACE THE POST-ITS WE’LL START WITH OUR CASE STUDY AND THEN YOU CAN DO YOUR OWN. WE’LL DO THIS FOR THE NEXT STEP AS WELL. Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 19Photo by Plush Design Studio on Unsplash
  20. 20. Pages Categories 3. CHANGE THE COLOUR OF ONE OF THE TWO SETS Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 20 About Us Events Services Recipes Contact Products Portfolio
  21. 21. 4. STRUCTURE THE MENU USING THE POST IT NOTES Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 21
  22. 22. THINGS TO KEEP IN MIND WHEN ORGANIZING THE MENU • KEEPING THE 3-5-7 RULE, START TO STRUCTURE YOUR MENUS ACCORDING TO THE TOPIC, NOT WHETHER OR NOT YOUR CONTENT IS A POST OR A PAGE. • THINK ABOUT WHAT’S IMPORTANT TO YOUR VISITORS. IF YOU’RE NOT SURE, ASK AROUND! • ABOUT US IS USUALLY KEPT TO THE LEFT, WHILE CONTACT US IS USUALLY ON THE RIGHT. Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 22
  23. 23. TO YOUR TERMINALS! WE’LL GO THROUGH THE NEXT STEPS, ONE BY ONE, FIRST USING THE CASE STUDY, THEN TO WORK ON YOUR OWN SITE. Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 23Photo by Cristi Goia on Unsplash
  24. 24. HTTPS://SHANTA.DRAGONTEACH.COM IF YOU WANT TO REGISTER FOR DEMO OF THIS TALK, GO HERE AND SELECT THE COURSE, “HOW TO ORGANIZE YOUR CONTENT THROUGH NAVIGATION AND WAYFINDING” Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
  25. 25. 5. CREATE YOUR CATEGORIES ON WORDPRESS Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 25
  26. 26. 6. CREATE THE MENU ON YOUR WEBSITE Shanta R. Nathwani - https://shanta.ca - @ShantaDotCa 26
  27. 27. QUESTIONS? PLEASE FEEL FREE TO SEND ME A MESSAGE! HTTPS://SHANTA.CA/CONTACT Shanta R. Nathwani - @shantaDotCa - https://shanta.ca
  28. 28. RESOURCES • INFORMATION ARCHITECTURE: BLUEPRINTS FOR THE WEB: HTTP://WWW.AMAZON.COM/INFORMATION-ARCHITECTURE-BLUEPRINTS-CHRISTINA- WODTKE/DP/0735712506 (UNTIL LAST YEAR, USED BY OUR COURSE) • DON’T MAKE ME THINK: HTTP://WWW.AMAZON.COM/DONT-MAKE-THINK-REVISITED- USABILITY/DP/0321965515 (ONE OF THE BOOKS THAT REPLACED IA) • EVIL BY DESIGN: HTTP://EVILBYDESIGN.INFO/BOOK/ (THE OTHER NEW BOOK) • WORDPRESS.TV: HTTP://SHANTA.CA/POSTS-VS-PAGES-AND-CATEGORIES-VS-TAGS-VIDEO-AT- WORDCAMP-MONTREAL-2015/ (MY EARLIER TALK, INCLUDING CREATING THE MENU) Shanta R. Nathwani - @ShantaDotCa - http://shanta.ca 28

×