Building Managing Web Sites Site Design and Architecture
Building & Managing Web Sites Site Design and Architecture 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 1
Web Site Design & Architecture Professional web sites are not just a bunch of pages!! 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 2
Essential Design Questions • • What do I want to say? Who do I want to say it to? Why should they care? How would they best hear my message? Where? – The Internet When? – Any time 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 3
Site Design/Architecture Topics • Navigational Systems • Content Organization Schemes • Site Structure 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 4
Types of Navigational Systems • Hierarchical navigation system ("bread crumbs") • Navigation bars (global or local) • Ad hoc navigation systems (in-line links) • Standard header/footer • Pull-Down menus • Table of Contents pages • Index pages • Site Index/Map pages • Guided Tour pages 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 5
Content Organization Schemes • Organization schemes allow you to identify the shared characteristics of your content to users. • Organization schemes are abstract, but will effect physical layout of site and pages. • Organization schemes identify & facilitate navigation through content for your users. • Different portions of web site will use different organization schemes (staff directory vs. topic page). • Organize content based on user needs, not the organizations structure or needs. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 6
Types of Organization Schemes • Exact Organization Schemes are easy to understand, develop and maintain. • Alphabetical (e. g. , phone books) • Chronological (e. g. , train schedule) • Geographical (e. g. , maps) • Hierarchical (e. g. , organization charts, laws or regulations) – Avoid organizing content based primarily on organization chart 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 7
Alphabetical Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 8
Chronological Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 9
Geographical Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 10
Hierarchical Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 11
Other Organization Schemes • These often ambiguous, harder to maintain • Add value to users because items grouped in intellectually meaningful ways • Topical – Most common organization scheme – Content expert creates a controlled list of topics to sort content into – Needs the most intellectual energy put into it 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 12
Other Organization Schemes • Task-oriented (organize content into processes or tasks users must commonly perform) • Audience-specific (create separate areas/pages for with material focused on an audience) • Metaphor (metaphor must be obvious to all users; can be constricting) • Hybrids (commonly done poorly; if use multiple schemes, present each separately on same page) 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 13
Task-Oriented Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 14
Metaphor-drive Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 15
Poor Hybrid Organization Scheme 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 16
Labeling Your Organization Scheme • Label links carefully - they show your organization scheme. • Some words have multiple meanings. • Avoid vague or cute labels – deliver on your label! • Icons/graphics are typically poor labels (If you have to label your icon, it is a poor icon to use). • Be careful with international issues. • Use HTML 4 “TITLE” attribute on labels to provide additional detail on link, but don’t substitute for a good label. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 17
Site Structure • Carefully consider your directory structure. – Avoid directory structures based on organization chart. – Topical/thematic is generally safer. – Don’t change your structure and break links! • Keep top level directory structures shallow and wide, avoid deep structures until necessary. – Ideally, users should get to content in no more than 3 -4 hyperlink jumps. – Deep structure often needed for large document stores. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 18
Site Structure (continued) • Use human-friendly directory (and file) names. – Some users parse URLs to infer site structure. – Users may type URLs, so make easy to enter. – Keep URLs short for publishing URLs, helping humans. • Most higher-level directories should have a default page. – Helps users who parse URLs. – Helps multiple authors identify directory’s entry point. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 19
Site Structure (continued) Virtual directories • A virtual directory is a directory that is not contained in the home directory but appears to client browsers as though it were. • A virtual directory has an alias, a name that client browsers use to access that directory. • Virtual directories allow separation of content from your server's directory structures. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 20
Virtual Directory Example 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 21
Site Structure (continued) Virtual Directories • For small/medium size sites, avoid relying on virtual directories unless necessary. • Useful for very large collections of pages (use to avoid child-webbing many documents). • Aliases can make it easier to move directories in your site. – Instead of changing the URL for the directory, you change the mapping between the alias and the physical location of the directory. Helps with multi-server scalability. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 22
Common Site Structures Newsletter/Magazine • Current issue should always have the same URL (e. g. , current. htm) so users can bookmark. • Archive older issues to subdirectories, typically based on year, volume, etc. • Provide a good index of issues, which typically should be the default page for the directory. • Make sure individual issues and/or articles provide user with context/navigation elements. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 23
Common Site Structures Long article/document • Structure driven by intended use • If encouraging purchase of paper document, break up document into many pieces • If discouraging paper, break up document for quick viewing and indexing, but offer downloadable versions (. doc, . pdf, etc. ) • “Previous” and “Next” links ok, but better interpage navigation labels give page/section titles 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 24
Common Site Structures Event/Conference • Generally put an event in its own directory to house current and future files. • The default entry page should be edited over time to reflect the history of the event. • Add meeting attendees, minutes, notes, etc. when they become available. • Don’t remove the content -- people may want it. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 25
Common Site Structures Knowledge Base • Organize content into directories based on topics, etc. • If deeper directory hierarchy necessary, directory names should become short. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 26
Common features of web sites • Home Page • Common navigation scheme • Site Map/Site Index • Search features • Legal issues/disclaimer page • User feedback pages • Discussion/chat pages • Front Door/Splash Screen Page • Exit Page – give ‘em something to remember 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 27
Other Thoughts • Web is so visual that everyone wants to jump right in and make sample screens. • Many design principles are intuitive, but understanding fundamentals makes a professional. • Aesthetics are deadly! Postpone their discussion until later in process. 10/24/2021 © 1999, Valtara Digital Design/Blitzkrieg Software 28
- Slides: 28