Posted: February 21st, 2010 | Author: amos | Filed under: assignments, information architecture | Tags: class 1 | No Comments »
Your assignment today is to create the information architecture wireframes of a New York cultural magazine’s website. Your imaginary client and you have agreed upon the following list of requirements for the website.
Each of these requirements does not necessarily have to be on its own page or section of the site. You should try to organize and group these bits of information in such a way that they are intuitive. Then start to create wireframes that show how a user would navigate from the home page to find each of these pieces of content. Refer to these ideas about web site navigation and try to use as many of these navigation concepts as is appropriate for your site.
Refer to these professional samples of wireframe diagrams as your reference point for how detailed to make them. Also, look around at similar websites to get ideas from how they structured their own sites.
You can also view other students’ blogs from the Saturday class to see how their wireframes look by viewing their blogs in Google Reader. Their wireframe assignment was to create wireframes for a restaurant website.
When you have finished the assignment, please save each wireframe as an image file (either JPG, PNG, or GIF file type), and post them to your blog on blogger.com. The title of your blog post should be “Class 1 – Assignment – Restaurant Wireframes”
New York Cultural Magazine Requirements
Content to include
- Local events
- local businesses (bars, restaurants, movies, hairdresers)
- park listing
- politics
- news
- weather
- sports
- classifieds
- search
- logo
- editorial, opinions
- ads
how do you want to organize the content: (optional)
target demographic: (optional)
Posted: February 20th, 2010 | Author: amos | Filed under: css | Tags: class 3, firefox | No Comments »
Firefox
There are two default CSS style sheets that Firefox uses to display web pages. Type these into the address bar of the browser to view them:
resource://gre/res/html.css
resource://gre/res/forms.css
Safari and Chrome
Apple’s Safari and Google’s Chrome browsers are built using an open-source layout engine known as Webkit.
Here is a link to the official WebKit source code for the default CSS style sheets of Safari and Chrome.
Internet Explorer
At this point in you will not be surprised to know that Microsoft Internet Explorer does not provide you access to it’s default CSS style sheet files. Yet another reason not to use this browser.
Overriding the browsers’ default CSS style sheets
You’ll see in Firefox’s default CSS files that, by default, Firefox attaches an 8px margin on the <body> tag
body {
display: block;
margin: 8px;
}
If you don’t want an 8px margin on the <body>, then you can override that CSS setting by creating your own CSS for the <body> tag, for example:
body {
margin: 0px;
}
The same principle applies to the other major browsers.
The unofficial chart of all browser default style sheets
Here is a nice chart showing the browsers’ default CSS rules
Posted: February 13th, 2010 | Author: amos | Filed under: course info | Tags: class 1, development cycle | No Comments »
This is a class in web development. For most people, web development is the singular phenomenon of creating websites. However, those in the business of doing such things generally break the development cycle down into several phases. Often, each phase is handled by a professional who is specialized in a specific task, and who is not involved in the other phases.
Job specialization
In ad agencies, interactive design firms, and other corporations with available resources, there are a variety of people involved in a typical web development project. At a minimum, these are: the client, project manager, information architect, graphic designer, front-end developer, back-end developer, quality assurance tester. In large operations, there may be multiple people in each role. However, at smaller companies, a single person may handle several of these roles. And, of course, some talented people perform all of these roles single-handedly.
The typical phases of the web development cycle
Regardless of whether you are a one-person team, or a dozen, it’s often helpful to explicitly think of your web projects in terms of a multi-step development cycle.
Here is an outline of a typical web development cycle broken down into 6 phases:
Concept
- come up with an idea for a web site
- often based on a business or personal need
Requirements
- decide what features, functionality, and other components are necessary on your site
- often, in a corporate setting, these requirements are gathered by talking with clients, managers, and any other core stakeholders.
- this phase should result in a written Requirements document that lists all the necessary features of the project
- it’s very important to be thorough in this step, so that everyone involved in the project has a clearly documented idea of what it is, as well as what it is not… this helps avoid problems and disagreements later on
- however, it is the step that is most often skipped by inexperienced managers and developers
Information Architecture
- group and prioritize information that will be displayed on the site
- decide what the most important information on the site is, and what is least important
- sketch and diagram outlines of what each page will look like, and where each bit of information will go
- professional Information Architects typically use Visio or Omnigraffle to create these diagram, however napkin sketches are just as good
- determine which page will link to which other page, and how the user will get to the information they are looking for
- this phase typically results in the production of information architecture “wireframes” and a “site map“
- click here to see an example of a wireframe
Graphic Design
- convert the information architecture wireframes into “design comps” for each page
- design comps are carefully designed images which show the visual look of each page on the completed site
- typically, designers use Adobe Photoshop to produce these images
- the designer delivers a set of finished “design comps” that ultimately show exactly what the site will look like
- click here to see an example of a design comp
Development
- convert the graphic design comps into actual functioning code
- this phase is the focus of this class
- web developers typically use a mixture of client-side and server-side technologies to produce web sites
- at the end of this phase, you should have a fully functioning site ready for testing
Quality Assurance Testing
- test the site to make sure it works
- fix any problems
- repeat until the site is perfect
Posted: February 13th, 2010 | Author: amos | Filed under: information architecture | Tags: class 1, navigation, threading | 1 Comment »
In our first class, we analyzed several websites in terms of their information architecture: how information was organized and grouped in their user interfaces. Although many of you are accustomed to the normative standards of how to navigate websites, it’s helpful to sometimes explicitly enumerate the different ways that you, as information architect (and soon to be web developer), can lead the user to explore various parts of your site.
To that effect, here are a few of the most common architectural concepts and elements at your disposal:
Hierarchical Classification - this is a general term that refers to the hierarchical categorization of information on a site. Most sites with a lot of content categorize information in this way, allowing users to navigate through the information by drilling-down into categories and subcategories until the desired content is found. With this system, any category can have only one parent category. For example, take a look at this sitemap from http://heels.com, which shows a clear hierarchy of shoe categories. “Ankle Boots” is clearly a subcategory of “Women’s Shoe Styles”, which is presumably a subcategory of “Shoes”.
Sitemap on Heels.com
Message boards and comment boards often have a hierarchical relationship between posts known as message threading. Threads are most often displayed visually using a tree structure, which clearly shows the hierarchical structure of the message board using indents to indicate the relationship of any message to its parent. For example:
example of a threaded message board
Faceted Classification – unlike in a Hierarchical Classification, a Faceted Classification allows information to be organized, and thereby navigated, along multiple dimensions. For example, on a blog, users may be able to browse posts by author, by date, or by category – these would all be different facets of the same information. As another example, it may be that users buying flowers online want to browse by a variety of classifications, such as by “Occasion”, “Color”, or “Price”. With Faceted Classification, any flower may be listed under any or all of these classifications. These categories are not related to each other in a clear hierarchy – they are all independent axes along which flowers can be browsed. Most sites that use Faceted Classification combine it with some sort of Hierarchical Classification. For example, see the Faceted Navigation links at the top of the http://teleflora.com site homepage:
Faceted navigation on Teleflora.com
Folksonomy – similar to Faceted Classification is the concept of a Folksonomy (or Tagsonomy). Tags are arbitrary keywords that users of many social networking sites attach as labels onto any piece of content. Folksonomies, in their purest state, are entirely user-generated, meaning that there is no top-down control or limit to the number or variety of tags that can be used. As a result, tags are often inconsistently applied, misspelled, redundant, and generally of little practical use for large sets of data unless there is some sort of control over the vocabulary to make it more consistent. For example, Flickr.com, a photo sharing service, allows users to tag any photo with any keyword. Users can search for all photos with a particular tag:
Tags on a photo on Flickr.com
Global Navigation – these are links that are available on all pages of a site that point to the top level categories of a hierarchical navigation structure. They are often displayed in the interface as Tabs at the top of the page, or as a series of links on the left navigation section of the page. For example, see the links at the very top of all pages on http://netflix.com
Global navigation on Netflix.com
Secondary Navigation (or Local Navigation) – these are generally links to a subcategory of a hierarchical navigation structure. They usually appear horizontally at the top, underneath the Global Navigation, as a drop-down menu that appears when a user mouses over a Global Navigation item, or vertically on the left side of the page. For example, see the second row of tabs at the top under the Global Navigation in the New York Times World section – these links are specific to the World section:
NYTimes.com World Secondary Navigation
NYU.edu‘s Home page displays the secondary navigation as a horizontal drop-down list:
Secondary Navigation as a Horizontal Drop-Down Menu on NYU.edu
The Google Reader Settings page has secondary navigation as a set of tabs. Notice also the link to return one step up back up the hierarchy, “Back to Google Reader”:
Secondary Navigation as Tabs on Google Reader Settings Page
Nth-Level Navigation – in the New York Times World section example above, you can actually see a third level of navigation as a third row of tabs underneath the second tier. Users have come to expect categories and subcategories of content, but due to the limited amount of space and navigation tools available in a web browser, sites have difficulty displaying three or more levels of classification. The Mac Finder offers an interesting solution to the problem of displaying many levels of hierarchy, although this is not common on the web:
The Mac's Solution to Displaying Multiple Levels of Hierarchy
Breadcrumbs – breadcrumbs are links that are used to show your position in a hierarchy of information, and allow users to navigate linearly back up the hierarchy. They usually appear horizontally, towards the top of a page. For example, in the following top navigation from ESPN.com, you can see a breadcrumb underneath two rows of navigation (Global and Local, in a two-tiered tab interface). The breadcrumb, which reads “ESPN > Fantasy & Games > Basketball”, indicates that we are viewing the “Basketball” page within the “Fantasy & Games” section of the “ESPN” site. Each section of the breadcrumb is a link to a different level in the hierarchy of information on the site.
Breadcrumbs on the ESPN.com Sports site
Another example combining all of the aforementioned navigation elements in one interface is the NYU SCPS site. For example, on the “Academic Programs” page, you can see Global Navigation, Secondary Navigation, and Breadcrumbs:
Navigation structures on the NYU SCPS site
Home Button – almost all sites have a button on all pages that takes the user directly to the Home page, no matter where they are currently in the hierarchy of content on the site. Very often, the Site Logo, which is almost always found at the top left of the page, also doubles as a link to the Home page.
Search -you may not immediately think of Search as being a navigation element, but it most certainly is. Search functionality allows users to jump directly to content that may be buried deeply in the information hierarchy of a site. Search is most commonly positioned as a text input box somewhere on the top of the page, as in the Amazon.com example below, although it does appear sometimes in the left navigation area, as is the case on Wikipedia.
Amazon.com search box
Wikipedia.com search box
Advanced Search – sites offering advanced search sometimes use it as a tool for browsing through a Faceted Classification system. Using Facets is a relatively obvious way for users to narrow search results. For example, the Phillips Academy Andover E-Store allows users to select both a Category and a Manufacturer as dimensions for their search, in addition to keyword matching and other text-based search. The site will return only those results that match both the Category Manufacturer Facets:
Advanced search with facets
URLs – yes, you can think of the URL of your pages as being navigation elements. Short, cleanly formatted URLs are easy to remember, and often show clearly how the content on the current page fits into the hierarchy of the content of a site, making it easy for users to understand where they are on your site. For example, compare the following URLs:
An example of a URL that is totally useless in navigation
An example of a URL with obvious hierarchical structure
An example of a URL that is mostly useless
Text Hyperlinks – navigation using text hyperlinks allow for arbitrary navigation from one part of your site to another. While it’s a good practice to use Global Navigation, Secondary Navigation, URL formatting, and the various other elements we’ve mentioned, sometimes the type of navigation an information architect needs to achieve doesn’t fit into any of these other navigational categories. For example, Wikipedia’s entry on Hyperlinks uses hyperlinks in the text to allow users to navigate to related topics:
Arbitrary hyperlinks in Wikipedia's page about hyperlinks
Contetual Navigation – contextual navigation includes simple text hyperlinks, but it may also manifest itself more obviously as links from one piece of content to other “Related items”, “Recommended items”, “Most Popular items in <category name>” or “See also” links. Sometimes these links point to siblings in the information hierarchy, meaning pieces of content at the same hierarchical level as the current content. For example, a news site’s article about Finance may point to another news article about Finance. In this example, an article on NYTimes.com about Facebook has on the same page several different contextual navigation sections to sibling articles in the Technology classification:
A "Most Popular" contextual navigation section with sibling articles
A "Related Articles" contextual navigation section with sibling articles
A "See More" contextual navigation link to view more sibling articles
But often, the nature of the relationships is more editorially-controlled, or controlled by complex algorithms, and less determined so easily by simple hierarchical relationships. For these cases, the Contextual Navigation offers a chance to lead the user to more remote pieces of content on the site or to other categories besides the one they are currently viewing. For example, see Amazon.com’s personalized recommendations, which depend mostly upon user purchasing behavior, point to books of a variety of topics:
Amazon.com personalized recommendations
Sitemap – when a site has a large hierarchical navigational structure, a Sitemap can often display visually how pages on the site are grouped, and where the various content is located within a site. Sitemaps usually link to the pages displayed, as in Apple.com’s Sitemap:
Apple.com sitemap
Site Indexes – similar to Sitemaps and Search, Site Indexes provide yet another way for users to jump directly to content that may otherwise be buried deep in the hierarchy of the site. They offer an alphabetical list of links to the content available on the site. While Sitemaps work well with hierarchical data, Site Indexes are usually more useful than Sitemaps for sites that do not have a clear hierarchical classification structure, as exemplified by the UN.org Site Index:
UN.org site index
Loading ...