Web Style Guide 3rd Edition: Organizing Your Info

Information Organizing Your Information

  1. Inventory- Have? Need?
  2. Outline and Consistency- vocab, hierarchy
  3. Chunking- logical units
  4. Diagrams- draw it out before- site structure and rough page outline (know core nav. links)
  5. Analyze and Test- use real users... AND REVISE after suggestion

Content Inventories

-detailed listing of basic information about all the content on site.
-most useful in initial project planning and info architecture phases- planning and building of the site

Hierarchies and Taxonomies

-create categories for info and rank on importance of each piece.
-general = higher ranked
-specific chunks= lower on hierarchy -one you have a logical set of priorities and relations in your content outlines, you can build a hierarchy from most important or gen. concepts down to most specific/detailed topics.

Taxonomies and Controlled Vocab

-Taxonomy- the science of practice of classification
-using a specific, carefully designed set of descriptive terms
-challenge: developing a system for referring to things the same way: controlled vocabulary


Five Hat Tricks

-will be explained in greater detail further down
  1. Category
  2. Time
  3. Location
  4. Alphabetic
  5. Continuum


-fresh new look on how info is organized and the underlying paradigms that drive convos about content/site org.

Card Sorting and Whiteboard Sessions

-Common tech for both creating and evaluating content org. and web site structures
-index cards labeled with names of major and sec. content cat. Then. team members sort through cards and org. them in a way that seems intuitive and logical. users can suggest new/better names for cat.
-content outline from each part. recorded- usually in a spreadsheet and the ind. content schemes are compared for commonalities and areas of major disagreement.
-best= ind. sessions with representative current or potential users of your site. "wisdom of crowds"
-less formal sessions can just use Whiteboard Sessions - techniques sim. to card sorting. Use sticky notes labeled with names of major content elements- post them on whiteboard and sorted by group until there is agreement about what org. works best.

To Be Successful
  1. Name cat. clearly (no repeats)
  2. Complete inventory of all major cat. and subcat. of content
  3. Have instructions for sessions
  4. No coaching/ prompting
    doesn't this go against the above point? It says have instruction and that have no prompting?
  5. Refrain from discouraging ideas- allow free brainstorming.
    I do agree 100% with this. At every successful meeting I've been to discouraging others ideas is not allowed.
  6. Supplies- obviously! Especially if you're using spreadsheets, sticky notes, whiteboards, etc
  7. Dig. camera.
    These days most people have cams on their phones which work fine for this purpose.

Chunking Info

-Readers appreciate short chunks of info which can be located and scanned.
I would agree that this works the best.

Latch: Five Ultimate Hat Racks

L- ocation
A- lphabet
T- ime
C - ategory
H - ierarchy

Notes in Which I Consider These Concepts

On General Org. and Lynch
-I took notes on the readings because writing things down and organizing them helps me understand and learn the material.
-I used a level 4 heading for most of the sections in The Web Style Guide. I used a level 5 heading for the title of "Web Style Guide" to show that it was the beginning of that specific cat. of notes. On the actual website I noticed that they used Chunking for the different topics such as Content Inventories, Hierarchies and Taxonomies, and Taxonomies and Controlled Vocabularies. Web Style Guide used links selectively and only when it made sense to do so. They had lists to organize tips- especially things that make sense in steps. I thought that some of their "steps" could have been rearranged differently but that's for Lynch to decide. They used location with a place to Google Search on the right hand side. There is a navigation bar at the top of the page with different options such as forward or backward, book contents, chapter contents. Above those related directly to the page (which really does demonstrate a hierarchy of the closest nav. bar being most closely related to the info on the page) there is another nav. bar which shows a "Home" and "About Us" options.

On Latch
-I am getting the feeling that this is all a little redundant. I know that it is all important but I feel as if I'm just reading the five Hat Racks over and over again. I'm hoping I am doing this note taking right! I do notice there are differences in organization and page structure of Lynch, Latch, and Towers. Is the point that they are all conveying the same information with slightly different page organization? I think the Latch on makes the most sense because there is the acronym LATCH which makes it much easier to remember "the 5 hat racks" (Which isn't as easy to remember btw.) So maybe Wurman is showing something about how using acronyms can be very useful for organization.
-Although this doesn't really have anything to do with organization I enjoyed how they had quotes sporadically throughout the page.
-There was boldface for titles and each chunk had a space between it. There were no lists. I think it could have been better organized with lists under each letter of LATCH which could shower the top 5 uses of each letter.

Quick Note/Inquiry On Towers
-I believe I was supposed to find websites that qualify for the 5 hat racks and explain why I think they qualify- and not use the websites that we read from such as Lynch and Wurman. Correct?

5 Hat Racks- Towers

  1. https://www.bing.com/mapspreview?v=2&c=en-GB&ur=DE&rtp=pos.51.76171875_-1.26192677021027_Oxford%2c+Oxfordshire~pos.51.7907943725586_-1.49320197105408_Witney%2c+Oxfordshire&qpvt=how+to+get+to+witney
    • This is an example of location because it is a street map that gives directions from Oxford to Witney. The main site is Google Maps and I just typed in my current location and the location that I wanted to end up at. It shows common landmarks and streets along that way so I know where I am in relation to my destination/ current point in travel.

Second Pass:
This site is for people who want to find where something is located. It's great for people that are trying to navigate any area they might not be familiar with. The ideal user is someone that might be a little bit controlling. This is meant for people who aren't naturally direction oriented. They don't know how to get from point A to point B with their natural street smarts. They aren't going to go up to a random stranger on the street and ask where the nearest good pub is. This is meant for the person who wants to find the location ALL BY THEMSELVES even if they aren't sure exactly how. This is meant for people that are really into planning things out. They want to know how long it will take to get there. Given the organizational scheme, the ideal purpose for the user is find how long it will take to get to the final destination. They want to know if there will be any delays or traffic. The people left out of this group are people who would rather use old school maps. This is clearly meant more for people who would use this on a mobile device. The creators of this made it specific for people who are going to be planning out their travels on a computer or phone. They are left out because it's not meant for people who aren't ready to conform to the modern way of traveling. The point is to get to point A to point B in the quickest way possible.


  1. https://www.apple.com/uk/icloud/find-my-iphone.html
    • Find My Phone is a feature by Apple to find your phone if you lose it. I personally have never used it but from the Apple webpage I'm under the impression it will bring a map up which you can see your phone on. You can follow the map to find your phone. It's important to have a relative location so you can find your phone as quickly as possible.

Second Pass:

  1. Although I cannot include a link for this one it is a different way location can be seen. On phones, there is a "location" option where you can either keep your phone's location on or turn it off.

 (image: http://www.macobserver.com/imgs/tips/20110504iphone_locationservices1.png)
Second Pass:

  1. http://aideyouhuo.net/pdfreadbook-document/why-knot-how-to-tie-more-than-sixty-ingenious-useful-beautiful-lifesaving-and-secure-knots-ebook-philippe-petit.pdf
    • Tying knots. It has a description of what to do when and how to get to the next step.

Second Pass:

  1. https://www.ukphonebook.com/
    • This is found in phone books such as this website above. When you type in the required information it will bring up the names and numbers sorted accordingly. It can make sorting through information or people much easier
    • Personal note: I struggled with this one. I think there are a lot of "sorting" options on many sites and this is one that's starting to be less and less used with the invention of the search bar. For example; if you are looking for "red dresses" you would simply type that into the search bar. If you were looking for phone number you would type the person's name in. I think this sorting strategy works much better in the world of print where you can't type what you're looking for into a search bar. (Think Indexes, glossaries, etc.)

Second Pass:

  1. https://msdn.microsoft.com/en-us/library/gg309295(v=crm.5).aspx
    • Here is a glossary for Microsoft that sorts key terms alphabetically. This is a good example of something that doesn't use a search bar because all the terms are laid out in alphabetical order. I'm not sue if I agree with Microsoft's use of this glossary because I think other sorting methods would make more sense (such as a search bar). However, if someone knew that the term they were looking for began with an "A" but couldn't quite remember what it really was, this would be a good way to look it up.

Second Pass:

  1. http://city.oxfordbus.co.uk/timetables-fares/city2#timetable
    • Here is an example of the timetable which can be used for the Oxford Bus Schedule. Although it's not directly on the site it can be downloaded in PDF form which was quite handy in finding when buses leave without going to the station. It is laid out in a way that shows what time the buses leave and what location they go to which makes it much easier to navigate the city. Causation is used because it has what time and what bus stop/station.

Second Pass:

  1. http://www.fandango.com/cecbemidjitheatre_aaknw/theaterpage
    • It's arranged by days, times, and movies being played. It has to be this way so people understand when the movie that they want to see is playing so they can attend.

Second Pass:
  1. http://www.urbanoutfitters.com/uk/index.jsp
    • This can be seen in many clothing sites such as my example of Urban Outfitters. There are many different categories you can choose from such as Women's, Men's, or Home. If a girl was looking for a dress she would go to "Women's Clothes" and then go to "Dresses". She would expect the dresses to be there. If she wanted further sorting she could sort by "color", "size", etc. These would be the sub categories and the sub-sub categories.

Second Pass:
  1. http://www.timeout.com/london
    • Grouped by things to do in London such as "Tickets", "Offers", "Things to Do", "Restaurants", "Bars and Pubs". This is an example of where categories are absolutely essential but the site can still be confusing since there are so many categories that aren't related closely.

Second Pass:

  1. http://shop.lululemon.com/products/category/womens-outerwear?mnid=mn;USwomen;tops;outerwear
    • On the Lulu site on the far right hand side under the picture and the search bar there is a drop down menu called "Sort By". You can select "top seller", or "price" (low to high) or (high to low). This makes it easier to get the range of price or popularity you are looking for. If you wanted a jacket that had great reviews and everyone seemed to love you would click on top sellers. If you were looking for more of a bargain you would do "low to high" to find the cheapest possible option. Or in my case, you would first go to "clearance" and THEN sort "low to high".

Second Pass:
  1. http://london.craigslist.co.uk/search/apa
    • On Craigslist there are options to sort from the least amount of money to the most amount of money. It has a dollar (or pound in my case) sign which signifies if you would like to look at the highest priced things or lowest price things first. I think Craigslist fails aesthetically because the site design is too plain. Organizationally however, it may win because it's very basic and easy to type in the search preferences you may want.

Second Pass;

Most of the sites listed above use more than one type of the Five Hat Racks. The clothing websites I have listed may use "continuum" but they also use "categories". I think that the best organized websites use a large variety of "Hat Racks" to make them much more user friendly. Even if a website is beautifully laid out it will not be useful without careful planning and organization to make it user friendly.

Second Pass Conclusion: The first and most obvious element noticed is how the sites use the five hat racks for organization and purpose. People might not know what the "Five Hat Racks" are but they will probably be able to recognize the differences easily. After closer inspection, the sites start to emerge a kind of personality. You can tell that these sites are meant for a certain kind of user.

Imagination Conclusion: There are some sites that are set up so well and look great. There are others that I literally want to bang my head against a wall and question why someone created them and who they created them for. I have lots of ideas for the latter but really struggled with the ideas for site that are already quite successful.
Also, a lot of my ideas seem to infringe on privacy. (Location especially) When does that cross a line? I know that there are a lot of people that already feel as if they're being watched/ kept ties on too much. I think it's hard because some people are all for letter others know everything about them and others hate it.

There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki