Web Development Intensive

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)

• by borough

target demographic: (optional)

• young active
• affluent

Your assignment in class today is to create a set of wireframe diagrams (between 2 and 3 diagrams, no more) that show how the information on a restaurant’s website should be arranged.

Your client, the restaurant owner, and you have agreed that the site must have the following types of information:

• menu
• address / maps / address
• contact info / contact us
• opening hours
• photos
• party spaces
• events
• services (catering, etc)
• about us / chef bio
• reviews
• reservations
• sister restaurants
• external links (parking, neighborhood, etc)

Working off of the concepts outlined in this post about information architectural navigation elements, as well as using these samples of professional wireframes as a set of references,  you should make sure that all the information on this restaurant site is easy to find and the site itself is interesting and easy to navigate.

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”

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

Your homework for this week is to complete the wireframe diagram assignment we began in class.

Next week, we will begin to convert these diagrams into real web pages written in XHTML, so it is important that you complete your diagrams to your satisfaction, and then go through the following XHTML tutorials prior to next class:

W3Schools.com HTML tutorial

W3Schools.com XHTML tutorial

And please familiarize yourself with the class syllabus.

You should also read at least once through the following information, which we will cover many times over.  It is critical in the understanding of the web and web development:

Basic computer usage concepts

Typical web development cycle

Typical workflow for web development

Loading a web page sends multiple requests to the server

If you are a Mac user, you will want to take a look at the recommended equivalent software for Mac development.

Your assignment today is to convert a set of Requirements for a Musician’s Web Site into wireframe diagrams that indicate what information will be displayed on each page of the site, and how it will be organized.

Here are the requirements we came up with for the Musician’s Site.  These outline the content that the client wants to see on the site.  How you organize and represent these pieces of content is up to you.  Please convert these into wireframe diagrams using PowerPoint.

• Bio
• Discography
• Tour Dates
• Photos
• Sound Files
• Video Clips
• Blog
• Merchandise
• Contact Info
• Press
• External Links (to other bands, etc)

You will have to group and organize these requirements however you see fit, based on the concepts we have discussed today of information architecture and navigation.  This post gives a broad guide of the navigation elements you may want to consider when tackling this assignment.

Click here to see a similar assignment I gave to the summer class I taught.  And here are a set of wireframe diagrams I created that show one possible solution to the assignment.  Each diagram is meant to show how the information and requirements for the site would be translated and broken down into actual content on a set of web pages.

Your job in this assignment is to make wireframe diagrams for each page of a Travel Diary website.  Every bit of information that will appear on every page, and its approximate position and size on the page should be represented in these diagrams.

The client and you have worked out the following requirements for the website:

Requirements for Travel Diary Website

• About me page
• Map of places you’ve been
• List of places you’ve been
• Photos and video for each place
• Comment board for each individual photo or video
• Daily diary of experiences in each place
• Comment board for each diary entry
• List of recommendations for each place broken down by category
• Ad space for a resort in each place
• Link to currency converter for each place
• Link to weather for each place

• Receive email each time someone leaves a comment

So far today, we have taken a look at some of the basic elements of information architecture, and we have gone through the basic list of XHTML tags that are necessary for creating any website.

Here is a link to a more detailed overview of some concepts in Information Architecture.

And here is a link to a high-level description of the basic syntax of all XHTML documents.

And here is a thorough overview of the most important XHTML tags we will be using.

As a reference, you should review the XHTML section of the w3schools.com website at some point. This is a great resource.

The fundamental concepts of e-commerce are easy enough to grasp, and these days most e-commerce sites follow normative standards and conventions. There are three basic components: the storefront, the shopping cart, and the checkout.

In this post, I’ll discuss each of these components.  How these components are implemented in code depends, like many advanced topics, on what framework you’re working with, what language, and the style of development you or your team have.

The Storefront

When someone is shopping on the web, they want to browse products on a site to see what’s available. Usually, products use categorization to make it easy for users to find the sort of products they’re looking for.   If you remember from way back when, we discussed the elements of navigation that an information architect should be aware of.  It might be good to review those now that you’re finalizing plans for your final projects.

A shoe store typically has top-level categories such as Men’s and Women’s. A shoe store might also have one or more levels of sub-categories of each top-level category. For example, the Men’s category might have sub-categories such as Boots, Sandals, Dress Shoes, Sneakers etc.

It is not uncommon for a particular product to fall into more than one category. For example, a casual hiking boot may fall under both Hiking and Casual.

Now for a small tangent on the topic of categorization: A modern twist on the idea of categorization is tagging, mentioned in that earlier blog post about navigation. Many sites, especially “Web 2.0” sites, now offer tags in addition to, or as a replacement for, categories. Tags are just keywords that are associated with a particular product. Often, but not always, tags are user-generated, meaning that users of a site can add whatever keyword they want to a particular product. If users can collaboratively add tags to a product or asset, then the site offers what is known as a folksonomy.

Managing the storefront of an e-commerce site is a matter of organizing products, and managing inventory. How you organize the storefront, and how you categorize your products, are important concepts to work out in the information architecture phase of an e-commerce project, since the methods of navigation and categorization that you choose will affect every aspect of the site architecture.

In terms of development, a storefront would have separate database tables for categories, products, and the association of products to categories.  All the data about categories and products would then be read from the database.  Storefronts must also begin a “session“, which automatically assigns a session id to the user and stores it in a cookie.  This is important so that the server can track each user and make sure that one user’s shopping cart is not confused with another user’s shopping cart, even if the user’s are not registered with the site.

A typical categories table might have fields for id, title, parent_category_id, and created. A products table would typically have fields for id, title, description, num_available, price, thumbnail_image_path, large_image_path, and created. An association table could have fields for id, product_id, category_id, created, thereby allowing for a many to many relationship between products and categories by thereby having a separate row for each category a particular product belongs to.

The Shopping Cart

Shopping carts are an essential part of any e-commerce site. They take the metaphor of the physical shopping basket, and transpose it into online media. At its most fundamental, a shopping cart is tool for maintaining state and remembering which products a user has selected for purchase so that they can buy them all together as a batch without having to re-enter their billing and shipping info for each one individually.

As you can probably imagine, most shopping carts are simply tables in a database that have fields for user_id, product_id, and quantity (as well as the id and created fields, of course). That way, the database table simply has a row for every product in the user’s cart. To get the contents of the cart, you make a query on the table for all rows that match a given user_id.

It may be that you want to allow non-registered users to also add items to a shopping cart.  In this case, you wouldn’t be able to store their user_id in a database since they do not have a user_id.  There are two ways to get around this problem: either you store the items in their cart as data in a cookie (stored on their client machines) instead of in the database, or you can add a temporary shopping cart table to the database that associates items with a user’s session_id rather than their user_id.  Remember that session_ids are automatically assigned by PHP’s Sessions functionality, and do not require users to register.  The temporary shopping cart table might be called, “temp_cart”.  It might have fields for id, session_id, product_id, quantity, and created.

Payment Processing

The checkout and payment processing parts of an e-commerce site are the most complicated. You need to securely process a transaction on a user’s credit card. This entire process should take place on a secure server where all communication between the client and server is encrypted.

In order to process credit cards online, you need to have what is known as a merchant account with a bank. To charge cards over the phone, in a store, or online, merchants need these special accounts with a bank.  If you do not have a merchant account with a bank, you will need to use a payment processing service like PayPal, which does not require you to have your own merchant account setup.  PayPal uses its own merchant account to process your payment (and of course they charge an extra fee for this.)  This is why PayPal is so popular with small merchants.

Assuming you have a merchant account (or are using a payment service that does), the first step in processing payment online is to send the data of what items are in a user’s shopping cart to a script that then calculates the total fee owed, as well as an taxes and surcharges. Once the user enters his/her credit card, billing, and shipping info, you perform a transaction on their credit card by first authorizing it with the issuing credit card company.

If the credit card authorization passes, you must process the order with the credit card company by charging their card, remove the items from the user’s shopping cart, and make sure your site’s product inventory (the num_available field in the products table) is up-to-date now that you have sold off a few items. Once everything is finished, you show a confirmation screen to the user with an order receipt. Often, the site will automatically send an email to the user (assuming they entered an email address) with the order receipt in it.

One rule of thumb to follow if you are running your own store is never store sensitive information like credit card numbers in your database. Unless you have a budget to hire a good security expert, your site can be (and very well may be) hacked, and you do not want to be liable for the damages that would result from someone getting a hold on your clients’ credit card numbers.

Due to the complication of doing all these steps yourself, most online merchants opt to use a third-party payment processing service that provides security and handles all the dirty work of charging a card for them. I recommend you do the same.

Conclusion

The components of an e-commerce site are really just a new combination of the techniques and technologies you are already familiar with.  However, given the amount of work it takes to get all the interaction between the parts working correctly, it can be very time consuming to set up.  Also, given how important it is that you do not make mistakes or errors in any of the steps, the risk associated with developing a homemade shopping cart is pretty high.

For these reasons, I recommend you use a 3rd party library or content management system (CMS) to do as much of this work for you as possible.  A popular 3rd party library or CMS should be well-tested, secure, easy for you to integrate with your site, and easy for the user to navigate. So when you are evaluating 3rd party tools, bear each of these issues in mind.  Also determine whether the software handles all of the storefront, shopping cart, and payment processing, or only some of those parts.

As an example of a popular e-commerce CMS is Zen Cart.  There are a variety of e-commerce “solutions”, including:

• PayPal Shopping Cart (handles just the shopping cart component).  See also this code example of integrating a simple web site with PayPal Shopping Cart.
• PayPal Payment Processing (handles just the payment processing part)
• Google Checkout (Google’s attempt to nudge into PayPal’s market domination)
• Authorize.net Payment Processing (handles just the payment processing part – requires you have a merchant account with a bank)
• X-Cart (open source.  handles the storefront and shopping cart; is built to integrate with the popular payment processing services)
• Zen Cart (handles the storefront and shopping cart; is built to integrate with the popular payment processing services)
• Magento (handles storefront, shopping cart, and payment processing integration)
• WordPress e-Commerce (a WordPress plugin that adds storefront, shopping cart, and integration with payment processing services)

These are just the one’s I have heard of recently.  You will find that there are dozens of PHP-based e-commerce solutions available with just a simple search.

Today in class, we developed a list of requirements for an actor’s home page.  Here are the requirements:

REQUIREMENTS FOR ACTORS HOME PAGE

PHOTO GALLERY
*several photos

WORK HISTORY
*genres (stage, screen, tv, etc)
*filmography

ABOUT ACTOR
*biography
*stats: height, weight, age, talents
*associations
*qualifications

PRESS & AWARDS
*press clippings
*awards

FOR THE FANS
*blog
*fanmail subscription form

CONTACT STUFF
*agent contact info
*contact form

AFFILIATE LINKS
link to purchase DVDs
And here is the PowerPoint file for the actor’s home page wireframe we created based on those requirements: Actor’s Home Page Information Architecture

…and here is a flat image file version:

Actor's Home Page Wireframe