Information Architecture and Navigation Planning for Websites
1 like344 views
This document discusses the importance of planning a website's information architecture and navigation before development. It outlines key aspects of planning including creating a sitemap, wireframing, content organization, and defining the navigation structure. The goals of planning are to organize content in a user-centered way, map out the site structure, and allow for iterative design improvements to enhance usability before development begins. Proper planning upfront saves time and money by facilitating agreement on layout and functionality.
![Website Information Architecture (IA)
A website’s information architecture involves:
▪The identification of content and functionality for the site.
▪The underlying organization, structure and terminology that
define the relationships between a site’s content and its
functionality.
[ IA is not part of the on-screen user interface (UI) — IA influences UI.
The IA is detailed in spreadsheets and diagrams, not in wireframes.]](https://image.slidesharecdn.com/informationarchitectureandnavigationplanningforwebsites-mantran-180315075354/85/Information-Architecture-and-Navigation-Planning-for-Websites-4-320.jpg)
Information Architecture and Navigation Planning for Websites
- 1. Starting your website right Information Architecture and Navigation Planning
- 2. Plan, Plan, Plan – Start yourWebsite right “If I had 6 hours to cut down a tree, I would spend the first four sharpening my saw.” - Abraham Lincoln
- 3. What does planning the website involve? oInformationArchitecture(IA) for websites oWebsite Navigation oContent planning oSitemaps oWireframing
- 4. Website Information Architecture (IA) A website’s information architecture involves: ▪The identification of content and functionality for the site. ▪The underlying organization, structure and terminology that define the relationships between a site’s content and its functionality. [ IA is not part of the on-screen user interface (UI) — IA influences UI. The IA is detailed in spreadsheets and diagrams, not in wireframes.]
- 5. Objective ofWebsite IA • To organize the content and flow of a website • To come up with a structure and design that balances the users’ desires with the needs of the business. • To determine content and its hierarchy
- 6. Users Tasks, needs, how they seek information Context Business goals, culture, technology, resources & constraints Content Document & content types, content objects, volume, structure IA The 3 pillars ofWebsite IA
- 7. Content Organization forTarget Audiences • Assess and organize content • Gather a list of the necessary content • Define user - centered relationships with your content • Organize that content relative to your audience's needs
- 8. SITEMAPS and Labeling • A visual representation of a website’s structure • It helps to map out the site structure • Structure • Navigation • Page hierarchy • A sitemap is a useful website collaboration tool to allocate work
- 9. Importance of Sitemaps Pages & information your website should contain are identified Pages and functions are aligned to your user’s priorities All content is categorised appropriately Your website is easy to navigate Project stakeholders understand how a website and the information it contains will be structured The sign-off process on navigation menus, labels and site-wide terminology is not hampered or compromised by internal politics
- 10. Labeling • Taxonomy development – standardized naming convention leading to labeling • Consider keywords too while developing labels/ page names • Descriptive information development - “Related Link” lists • Other navigation components • Useful metadata Information to aid discovery
- 11. Website Navigation • A website’s navigation is a collection of user interface components. • The primary goal of navigation is to help users find information, and encourage them to take desirable actions.
- 12. Importance of good navigation • Enables browsing and information discovery with ease. • Navigation in a website creates an ideal flow of links that offers a logical path to the relevant sections of a website for the visiting users. • Better user experience.
- 13. Navigation components • Global navigation • Local navigation • Utility navigation • Breadcrumbs • Filters & facets • Related links • Footers, fat footers • Links - internal • Buttons • CTAs • Tabs
- 14. WIREFRAMING • A website wireframe, is a page schematic or screen blueprint. • It is a visual guide that represents the skeletal framework of a website. • Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.
- 15. Importance ofWireframing • Shows a visual representation of the page structure and flows • It separates different planning aspects of the website – Layout, functionality and creative or branding aspects of the website are not mixed up in one step. • It makes the design process iterative; improves usability • Saves time, effort and money since layout and functionality decisions can be made earlier on in the process, before the actual website design and development are done.
- 16. Information Architecture & Navigation Planning for Websites Service Deliverables: Sitemap options (including linkages with social media, group company sites) Sitemap labeling options Wireframes that help in verifying what should be included and where Make information easily accessible and workflows clear A sustainable sitemap that will be relevant & scalable for 3 to 4 years Plan website communication strategy Content Organization and labeling Search and navigation systems Create Sitemap Wireframe for major pages of the site
- 17. Plan the website right, so it delivers right • Just like you need a blueprint before you start building, you need plan and a clear understanding before you start a website • Different teams can work together – content, design, developers, SEO • There is a clear understanding of the outcome • Easier to plan content development • Helps design better
- 18. Thank you Mantran is located in Bangalore, India Email us: contact@mantran.in Content Marketing . SEO . Website redesign www.mantran.in