|
Return to Class Session #2 | |
| "Clean this mess up, right now! You're so disorganized! Your Websites a mess. I didn't raise you to publish a pigsty, did I?". | |
| Momma Battazato | |
| Organization/Site Map Planning/Storyboarding |
Visualize - This is a very key element in planning your Website. Take all your information, focuses and parameters, review them and VISUALIZE your site. Imagine it loading up. You're the user. It's impressively laid out, pleasing to look at and loads fast. Three clicks and you have what you came for. Hard to do? Well, the next best thing is to look at everybody else's sites, whether they sell similar products or not, and mimic. You like the look of something? View it's code. Don't take their graphics unless it's labeled as public domain or clip art. Often you can e-mail the webmaster or owner for the site (nicely cited at the bottom, usually) and ask permission to use graphics. In any case, you're searching for inspiration. Another useful exercise is to "deconstruct" a site you admire. Storyboard the existing site. Again, view its code but look for tables and frames that hold the page together. In other words, map the pages. (See Mapping Out Your Page below.) For
practice, try the links below or a site of your choice. Web Architect (Information Architecture) - An Information Architect (IA) constructs or organizes information into a usable structure. For Web Design, the Web Architect (WA) begins by consulting with the client to understand the users of the site and their needs, the client's needs, any design parameters and to define the scope of the site; all this in order to meet the clients objective effectively and efficiently. Tasks include developing the visual interface of the site pages, mapping the site, planning the navigation, ensuring the site's usability for the customer, assuring that the site meets the client's objectives. You and/or your webdesigner will be Web Architects, attempting to make a presentable arrangement of the following: |
| Arrange Structure & Content | Meet Goals |
|
|
|
2 - Your business' goals and operating needs; include technology, order retrieval, statistical tracking, etc. |
|
3 - Hosting and making technology work |
|
|
|
|
|
|
Usually a Web Architect will then work with , HTML coders, and Programers for interactivity, database engineers and other technical specialists and graphic artists to produce the website. The IA or Web Architect heads the team and may play one of these specific roles as well. You would need
to provide the following web assets to the WA: Webassets
The WA will produce the following deliverables: |
| Website Planning | Options |
| 1. Organizational Website Chart of Your Site - plan the hierarchical structure and main pages as content containers; aka site storyboard sample 1 | sample 2 | 1a.
Include Text Outlines - lists or outlines of content for each
page 1b. Use Word-Art, Visio, Inspiration, Illustrator, Dreamweaver "Site">Site Map |
| 2. Interactive Prototypes - a skeletal, working model of the plan before it is actually built. May become the site skeleton of pages without content with filenames & page titles and . Clarifies confusion and tests basic structure and navigation | 2a. Add text links for navigation and possibly add lists or outlines of content on each page as in 1a above |
| 3. Page Thumbnails/Sketches - Layout the page content and roughly sketch it for each page or key page type; organize with tables and structure sample 1 | Thumbnails are often laid out in a storyboard fashion - rough, sketch quality designs for a page, brainstormed quickly and as many as possible |
| 4. Content
Maps - detailed layout in sketch form of each pages contents and relationships
to other pages aka Comp or comprehensive Lake Tahoe Rental Works content map sample 1 Lake Tahoe Rental Works old http://www.laketahoerentalworks.com Lake Tahoe Rental Works new http://www.cabrillo.cc.ca.us/~dambrosini/oldsite/index.htm |
4a.
Page Schematics - another stage of detail; a line drawing or placeholders
to show a page designer the information (text), links, content, promotional
space and navigation and priority of each page; often a digital prototype |
| 5. Produce the site - usually a team process; revise | myrasite/ambrosini_finalx.swf |
| 6. Testing & Evaluation - test with 5 users; fix and retest with five new users | This is the 5x5 model for testing |
| 7. Publish site - choose web host, publish and maintain |
adapted from Shel Kimen, 6/22/99 - All About IA
Now, let's look at the tools you can master to help you organize and design your site. Heterogeneous or Homogeneous Challenge - In starting to Organize, begin by identifying and classifying the general Web content (not the specific elements). A Library card catalog is homogeneous, that is something composed of similar or like elements, shared characteristics. It organizes and provides access to books but not the chapters and not collections of books. It is a structured system with each book having a record with the same fields; author, title, and subject. Website examples might be S.E.N., PayPal. Heterogeneity refers to a collection of objects or an object made up of dissimilar, unrelated parts. Picture a Flea Market or Garage sale environment. Websites examples might be eBay, Amazon, MSN. Most Websites tend to be heterogeneous collections: the collection of documents are available in "granularity", that is, available by selected pieces, parts, collections, and elements. Also, they typically allow access via multiple formats. It is a melting pot of video, audio, multimedia, software files, images, archives, news, etc., all sharing space. You can see that planning the site's organization is a critical starting point. It is well done when done first, usually a mess when done last. |
| Organization Schemes |
| Organization Schemes - You may use several per site. Choose one style for the Index or Site Map page. Sometimes use multiple organizations of the same material, but only if there is a very good reason. |
Exact
Organizations- The easy one. Well defined and mutually
exclusive sections. Think of the White Pages phone book. You're
looking for a known item. The three types of Exact schemes are:
|
Ambiguous
Organizations - categories that defy clear definition. Useful
when we don't already know what we are looking for. Through subjective,
associations, things are organized in intellectually meaningful ways and
are discovered by the user through associative searching and a little
luck. Types of ambiguous organizations are:
|
| Organization Structures |
You will need to create an Organizational Structure for the site and for the content (or layout) of each page. We have referred to the individual content arrangement on a page as "Layout" and will continue to make that distinction. We will now look at planning for look at both:
1. Organizational Structure For You Site refers to the organization of pages and their relationships to each other for the website. Although I may be considered aesthetically challenged by designers and artists for suggesting so, the foundation of most good structures is hierarchical. Hierarchies are simple and familiar. They tend to be mutually exclusive subdivisions with parent-child relations and thus somewhat linear. This is a blasphemous idea to those that love the circular and endless path possibilities of links. Your Web design parameters and specific business functions (remember our lists?) will sort this out for you and suggest the best structure for your site. An organizational structure is usually shown as a hierarchical, parent/child relationship called a decision tree, flowchart, storyboard, or page hierarchy. (often it is called a storyboard, particularly if you lay it out in movable pieces, in software or erasable sketches that allow you to adjust the relationship as you work on it.) Software that will help you make an organizational chart or similar flow charts is readily avaialble: popular software includes Visio, Illustrator, Excel and Word (Insert>diagram>Organization Chart.) Remember, the organizational structure suggests the navigation but isn't the navigation for the site. It is a structure that shows how content will be grouped into pages and the relationship between those pages. The starting Point is the Home Page. The Home Page is your main page that starts navigation and makes the main functions of the site available to the user in a hieracrchy. An issue regarding the content of a home page (or any page for thatt matter) is "above the fold" or "below the fold" content. Above the fold is the content you see when the page loads without any scrolling down. Many visitors never scroll down, especially when surfing the web or conducting Internet.Web searches. To get people to scroll down you might:
Sometimes websites start with a Splash Page as an entry portal. Reasons for starting with a Slapsh Page include:
|
|
Typical parent-child hierarchy |
 |
| To compare the two extremes, designers have invented a term, hyperarchy, to represent the more freeform or circular navigation that may work for your site, if it suits the user's needs that is. Remember, we are designing for the audience as users, not for our convenience. |
| Linear versus circular navigation and organization. |
 |
| Don't forget that the organizational structure is not just a matter of structuring the relationships between pages and the content on those pages. For the customer it a a matter of navigation, searching time and clicks to arrive at their destination. The structure should suggest navigation but does not determine the navigation. |
 |
Don't forget that your navigational links can completely bypass the hierarchical structure, but make sure they make sense. It is not necessary to be able to jump from every page to every other page. Navigation is a matter of the designer building ways to get from place to place and back that the user can learn quickly. Some of the tools the designer uses are:
The designer tries to decrease the users dependency upon the browser for navigation because it becomes unreliable as the user explores more deeply into the website. A rule of thumb is three clicks max froom anywhere to anywhere else on the same site. My dictum is "thank God for bookmarks." |
|
Bypassing the hierarchy for less clicks and sensible navigation. |
 |
| Sometimes "nodal" pages serve to give you shortcuts for navigating across major subdivisions with fewer clicks.a nodal page is an index or summary page that bridges you from one section to another. |
| This circular node would house a menu bar for the 5 major pages and the children of the 4th major branch, thus reducing the clicks to 2. It is included in the main menu. |
 |
Storyboard Your Ideas - As your Website starts to take shape, you'll be moving from:
A great way to do this is with index cards or Post-it Notes. You can makes notes on them, give them titles and file names, note elements and content (in pencil, of course) and rearrange them until it all works. |
|
Don't forget the tape, Post-it notes fall off. |
 |
 |
A Search Engine, Webstandards.com, which is owned by Ultimate Search, Inc., yielded the following review of navigation standards, rendered in Flash animation. It makes a nice review of the hierarchy relationships in planning your site's navigation. Navigation Lesson using a Flash plugin. Navigation, Site Map, Site Index or Both - A well designed site will have a Site Map, Site Index or both to give the user a quick view of the whole site. This is an overview of the planned navigation for the site. It is often accompanied by a site search engine. (http://www.tamarackrentals.com/mainpages/sitemap.html) I hope you are seeing the necessity for carefully naming things like pages, links and being consistent with them. |
|
The "Home Sweet Home Page" puts it all together as a design concept, organizational scheme, organizational structure and navigational plan minimizing clicks. |
 |
Eamples: 2. Planning Page Layout for Your Site - You should decide upon one or two types of page structures and repeat them, if the content works that way, by creating page templates. However, each page may have such unique content that much of it will change, with perhaps just certain parts of the page structure being repeated: left or top frame, using tables for alignment and placeholders, columns for text. Let's look more closely at some of the Page Layout design principles we learned and how to use them for page organization. Tables Are Essential - Tables give us alignment, a placeholder, proximity for related elements, allow us to repeat or create a pleasing pattern for balance and unity and establish contrast between elements, foreground and background. Whether you use an authoring tool or HTML coding, both are page layout tools. The one absolutely, positively required skill is to master tables and learn to splits cells. |
|
Notice all the things the table does for the page layout and unity of the whole page. A basic table structure can be extended to most of the site's pages. |
 |
| Alignment - simply refers to making items on a page line up with each other. The rule is: Choose one (alignment). If you choose left alignment for text, don't center the headline. It usually looks amateurish. (okay, okay we all do it sometimes. It's a hard habit to break.) Thou shalt not mix alignments. |
|
Alignment rules! |
 |
 |
 |
| Proximity - is the relationship that page elements form when close together (and without chaperone). Items can be left orphaned, be related or just appear torn between two (or more) relationships. |
| Proximity is forever. |
 |
 |
| Repetition - occurs throughout the entire site and serves to unify the site and form a "family" of obviously related pages. Elements that can be used repetitively include buttons, color schemes, layout, graphics, typography and navigation tools. |
| Repetition, repetition, repetition.... |
 |
 |
| Contrast - draws your eye into and repels your eye away from a page. Contrasting elements can guide you around the page and help create an information hierarchy. It aids skimming. Contrast must be strong to be effective. If two elements are not the same (type, color, rules, graphics, texture, spatial arrangement, etc., then make them very different...don't make them almost the same. Create a focal point on the page from which the rest of the information and elements flow. |
| Contrast for fun and fortune |
 |
 |
 |
| Mapping is the container for your vision on a Web page. | |
 |
 |
