The document discusses the importance of effective website navigation and menu design, comparing it to providing directions on a road trip. It emphasizes planning and understanding the audience's needs to create intuitive menu structures that enhance user experience. Various menu types and design considerations are outlined, along with tools and techniques for building menus using WordPress.

1. Mary White

2. Navigation
Going From Point A to Point B
or further

3.  Menu are so important to a website:
 Why are they that important?
If you are on a road without directions how do you Feel? upset, frustrated, lost….
 What do you expect when you visit a website?
If you are on a website and get the answer to your initial inquiry and are very happy with that information. Do you want to find more information on the
same subject or related information?
Overview

4.  Where to go
 Types of Menus
 Plan
 Goals
 Hierarchy
 Viewing
 Audience
 Finding
 Twenty Seventeen Tools
 WordPress Menu Items
 Questions
Menus … What can you say

5.  Directions should be easy
 Intuitive
 Keep It Simple
Where to Go

6.  Horizontal
 Vertical
 Bottom Horizontal
 Vertical popup or floating in menus
 Image Menus
 Icon Menus
 Hamburger menus
 Non Menu
What is Trending In 2017

7. Horizontal

8. Vertical

9. Horizontal Sticky

10. Bottom Horizontal

11. Image

12. Icon

13. Hamburger

14. Hamburger

15. Hamburger

16. Non menu

17.  Pop Up Menus as you scroll or after a time frame
 Menus on right and left sides
 Menus after you scroll
 Mega Menus
Which menus are style fads and which ones will last
Just because you can does not mean you should
Artistic menu will not work for a Law firm as a Law firm menu will not work for a children's website
So Many New Menus

18.  Before you build
 Goals
 Hierarchy
 Viewing
 Audience
 Finding
 User Design
 User Interface
Planning

19. Before you Build

20.  Content directions
 E-commerce
 Get subscriptions
 Learning tool
 DIY
 Artistic
Goals

21.  Drive people around your content with a well constructed
menu or Navigation
Setup content categories that mean something to the users
User design and User interface is very important step to constructing a functional website
Site mapping information based on inquiries of the people that will be review the website
 Design Consideration
 Too Shallow
 Too Deep
 Too Confusing
Hierarchy

22.  Navigation or Menu that lays out every option without setting
up any hierarchy
Too many choices can leave people overwhelmed
Hierarchy Too Shallow

23.  Drive down too many level
May loose people when force them to click to keep getting information
Hierarchy Too Deep

24.  Navigation or Menus that have not thought out direction or
purpose
This gives people the feeling you are not really the authority on the subject… you haphazardly placed information on your website.
Too Confusing Hierarchy

25.  Type of information being viewed and Why
 Business information
 Selling Products
 eLearning
 Artistic Experience
Viewing

26.  Why are they coming to your website?
 Who is your website audience/demographic?
 What Age?
 Gender?
 Income?
 Education?
 Tech Savvy?
 Geographic?
Audience

27.  How do they find your Website?
Finding

28. Create User Design with a
Site Map/Categories

29. User Interface

30.  Using Admin Dashboard to get to Menu option
 Using the Customizer to create menus
 The new options with the customizer
 Add new page options
Twenty Seventeen Tools

31.  Using Admin Dashboard to get to Menu option
To use this option you need to have your pages or post define first
Admin Dashboard

32. Admin Dashboard
 Create New Menu

33.  Add Items to a Menu
Admin Dashboard

34.  Using the Customizer to create menus
 The new options with the customizer
 Add new page options
Customizer menu options

35. Creating a Menu
Customizer menu options

36. Menu Created
Customizer menu options

37. Adding Pages
Customizer menu options

38. Creating a new page
Customizer menu options

39. Four Pages
Customizer menu options

40. Saving Menu
Customizer menu options

41.  Pages
 Post
 Custom Urls
 Categories and Tags
 Images
WordPress Menu Items

42.  Mega Menu:
 PlugIn
https://wordpress.org/plugins/megamenu/
 Alphabetical menus
Optional Menus

43.  Creating Menu is more then just saying It will be a the following home,
about, and contact. Yes you can create a menu that way but you really
should think and plan your menu.
 Just like the road trip you want to take you want directions to make
your life easier as will your audience as they visit your website.
 The more planning you do prior to your build the better off the
directions will be.
Summary

44.  Get your Content established will be a great help in determining what
you can offer to your audience in a menu.
 Getting User input on the Design prior to your build will help with the
final user interface
 If you create a menu item with no content you lost your authority on
that subject.
 Good Building
Next Steps

45.  Any Time for Questions
 This presentation is on SlideShare
Questions

46.  I have taught WordPress, HTML and CSS Website Design
and Adobe Products in the Continuing Education
Department at Johnson County Community College for the
Last Three years
 I own small Business MW for Designs for 9 years
 Feel Free to Contact me at:
MaryW@mwfordesigns.com
Twitter #mw4designs
About Mary