Discussion - Week 1 Discussion - Week 2 Assignment

7. Layout

Flexibility is the key rule in web page layout and design. HTML was designed by engineers. It was never intended as a design tool. But designers are a fearless crowd. They invented ways to twist and turn HTML around that the engineers never foresaw. Regardless of the inventiveness of the designers, every web page can have dozens of ways that it can display, each influenced by the browser and operating system. Below is a screenshot of one cnn page as viewed on different computers.: "Different browsers, operating systems, screen sizes and user preferences mean a visitor to your site doesn't see what you see." foldspy

layout

What are these variations specifically?

  1. Different platforms use a different base gamma (the amount of displayed brightness.) PCs gamma base is typically higher than the base Macintosh value, so on a PC, the same tone will appear darker the tone.
  2. Tables are implemented differently in different browser releases. This is significant both for the display of text information and for the reassembling of 'sliced' images.
  3. People are using different screen sizes and viewing areas. In 1995, 640x480 resolution monitors were the standard on a 12 inch monitor at that resolution.
    In 2007, the majority of people had a screen display area of 1024x768 pixels or more. But there was a wide range of resolutions in use. You need to be aware of your audience. Those in small rural areas or in government work may have older equipment with lower resolution.

    Display Resolution

    The current trend is that more and more computers are using a screen size of 1024x768 pixels or more:

    Date Higher 1024x768 800x600 640x480 Unknown
    January 2008 38% 48% 8% 0% 6%
    January 2007 26% 54% 14% 0% 6%
    January 2006 17% 57% 20% 0% 6%
    January 2005 12% 53% 30% 0% 5%
    January 2004 10% 47% 37% 1% 5%
    January 2003 6% 40% 47%     2% 5%
    January 2002  6% 34% 52% 3% 5%
    January 2001  5% 29% 55% 6% 5%
    January 2000  4% 25% 56% 11% 4%

Statistics shown above are from w3.org


Color Depth

Web safe color

Web-safe color was a mid-90s response by web designers to color display irregularities. Lynda Weinmann published the set of colors and guidelines. Her name has become associated with the concept of web-safe color. Her advice:

" The only reason to use the browser-safe palette is if you have a concern that your Web design work will be viewed from a 256 color (8-bit) computer system. When I published the browser-safe color chart in my first book, Designing Web Graphics, waaaayyy back in 1996, the MAJORITY of computer users had 8-bit video cards. Today, the minority have them, so the justification for using the browser-safe palette has diminished greatly if you are developing your site for users who have current computer systems.

There may be resurgence in the need for the browser-safe palette when designing for alternative online publishing devices, such as cell phones and PDAs. Those systems are still in 1-bit (black and white) or 8-bit color. Right now, very few people are designing their web sites to work on those systems, so the need for the browser-safe color palette is definitely downgraded to a mere shadow of its former glory." Lynda Weinmann

Date 16,777,216 65,536 256
January 2008 90% 8% 2%
January 2007 86% 11% 2%
January 2006 81% 16% 3%
January 2005 72% 25% 3%
January 2004 65% 31% 4%
January 2003 51%  44% 5%
January 2002 43% 50% 7%
January 2001 37% 55% 8%
January 2000 34% 54% 12%

Statistics shown above are from w3.org

Above the Fold

Above the fold is a newspaper design concept. Newspapers traditionally are folded in half and displayed in stacks at the news dealer or in newsboxes. Important stories are placed above the fold to enhance sales of the current issue. Applying this design technique to the web is a viewpoint that usability guru Jakob Nielsen put forward in the 1990s and stick by today. Nielsen states: "Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling." and later states: "Users generally don't like to scroll... So, when you design, you should consider how much users can see if they scroll only a screenfull or two." Milissa Tarquini addresses this problem in her article, Blasting the Myth of the Fold. Since users have different resolutions on their web browsers (ranging from to ), we cannot know precisely where the fold is. "Here is perhaps the biggest problem of all. The design method of cutting-off images or text only works if you know where the fold is. There is a lot of information out there about how dispersed the location of fold line actually is."

Beyond the Web

All of the issues raised above assume that the site visitor is using a computer, a web browser and a standard screen to view the web site. We all know that that is no longer the case. The web is viewed on iphones, blackberries and miniature laptops, to name a few devices. The rules that used to apply to graphic design are no longer relevant. Many of the rules of web design are now obsolete as well.

Some of the recommendations of creating content that will display well on a handheld device seem positively draconian:

The main limitation of a handheld device is the small screen, which may also lack a mechanism for horizontal scrolling. Input is often with a stylus, not a mouse. Downloading to the device is likely to be both expensive and slow, the processors are slow, and the memory is limited. A lot of users may therefore choose to turn off in-line image loading. Now, what do these limitations imply for the designer?

  • Design one column layouts and avoid floats.
  • Optimize your HTML by using efficient, semantic markup and CSS.
  • Minimize the use of decorative images, avoid relying on images or plug-ins for navigation.
  • Write good alternative text for images.
  • Avoid dynamic effects that specifically require a mouse or keyboard for navigating.

from Pocket-Sized Design: Taking Your Website to the Small Screen

There are a few better options for solving the small screen riddle than simply designing highly restricted pages. The best approach is to use Cascading Style Sheets or css, which allowing the same content to be displayed differently, depending on the device.

Wireframe Schematics

Schematics are called wireframes because of the way they appear to be nothing more than structural lines that could hold later design items. Wireframes define what goes on the page and how those elements should be prioritized relative to each other.

Page Schematics are layout designs, but on a very non-graphical level. Wireframes are rough sketches that provide a general definition of page layout. They show user movement through page, but typically do not describe consequences of a user's action

Wire frames an be created in a wide variety of programs including Word, Excel, Powerpoint or Adobe PhotoShop. Visio is probably the most popular tool among Information Architects. Wireframes can also be created with specialized wireframing and site prototyping tools such as Balsamic or Axure.

New - April 15, 2009: There is a Firefox add-on called Pencil that is reportedly a nice tool that helps you creates GUI prototype and sketching.. The Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Top features:

Every site will have several wireframe types depending on content. There can be unique wireframes for the homepage, landing pages, article pages, search pages, etc.

Elements of usability are a key focus in creating the wireframes. These do not focus on the specifics of graphic design. They are typically passed on to the design team for that. Wireframes are a product of the information architecture and usability process.

Wireframes should include:

Wireframes may include:

Wireframes do not include specific graphic design elements such as:

Graphic Standards for wireframes:

Wireframe Examples

Pattern Language

Christopher Alexander proposed pattern language as a remedy to the some of the ills created by the modernist movement. Architects had forgotten how to design for people. Alexander traveled through Europe observing the natural comfort that was created in the traditional town and traditional house. Buildings reflected the social patterns of the people who lived in and around them. There were places to move quickly and places to stop and relax. The built structure reflected these human uses. As the social structure of the family, neighborhood or town changed, the buildings would adapt. Traditional design was interactive with the human community, instead of being proscribed by an external force. The architect/builder of traditional construction looked to the use for a definition of function. From this definition of function arose the form.

Software designers, with 'libraries' of objects first began to apply Alexander's ideas to technology design. By the late 1990s, pattern language concepts began to emerge in interface design, and then web design. Pattern language has incredible strengths in giving us insights into use, conventions and user expectations of the designed environment.

Unfortunately, the title 'pattern' has also given designers unrealistic expectations of what a pattern language should be and how it might be applied. Too often when we think of pattern, we think of craft patterns: an exact set of directions that will allow the user to create the exact object desired. We have dress patterns, woodworking patterns and painting patterns. These are a method for creating copies, not for understanding a problem and locating the organic solution to that problem. No European street cafe is identical to another. They are similar. They have patterns that they share, but each is a unique response to that community and that culture. By contrast, McDonalds (or Starbucks) are the same all over the world. Alexander's intention in creating pattern language was to begin a dialogue between people and builders/architects about creating a dynamic, livable environment.

Alexander's Pattern Language

"A pattern is a careful description of a perennial solution to a recurring problem within a building context, describing one of the configurations which brings life to a building.

A pattern language is a network of patterns that call upon one another. An individual house might, for example, call upon the patterns described under the names of half-hidden garden, light from two sides in every room, variation of ceiling height, bed alcove, etc. Patterns help us remember insights and knowledge about design and can be used in combination to create designs." Christopher Alexander

Alexander defined each pattern as being comprised of a series of related sections.

  1. An introductory paragraph linking a pattern to the patterns that preceded it.
  2. A summary of the problem in bold.
  3. The problem's details, background and manifestations.
  4. The solution, in bold.
  5. A diagram of the solution.
  6. A paragraph linking the smaller patterns which are needed to complete or embellish this pattern.

Example of a Pattern: a Street Cafe

88 - Street Cafe**

cafe  

. . neighborhoods are defined by Identifiable Neighborhood (14); their natural points of focus are given by Activity Nodes (30) and Small Public Squares (61). This pattern, and the ones which follow it, give the neighborhood and its points of focus, their identity.

The street cafe provides a unique setting, special to cities: a place where people can sit lazily, legitimately, be on view, and watch the world go by.

The most humane cities are always full of street cafes. Let us try to understand the experience which makes these places so attractive.

We know that people enjoy mixing in public, in parks, squares, along promenades and avenues, in street cafes. The preconditions seem to be: the setting gives you the right to be there, by custom; there are a few things to do that are part of the scene, almost ritual: reading the newspaper, strolling, nursing a beer, playing catch; and people feel safe enough to relax, nod at each other, perhaps even meet. A good cafe terrace meets these conditions. But it has in addition, special qualities of its own: a person may sit there for hours - in public! Strolling, a person must keep up a pace; loitering is only for a few minutes. You can sit still in a park, but there is not the volume of people passing, it is more a private, peaceful experience. And sitting at home on one's porch is again different: it is far more protected; and there is not the mix of people passing by. But on the cafe terrace, you can sit still, relax, and be very public. As an experience it has special possibilities; "perhaps the next person . . ."; it is a risky place.

It is this experience that the street cafe supports. And it is one of the attractions of cities, for only in cities do we have the concentration of people required to bring it off. But this experience need not be confined to the special, extraordinary parts of town. In European cities and towns, there is a street cafe in every neighborhood - they are as ordinary as gas stations are in the United States. And the existence of such places provides social glue for the community. They become like clubs - people tend to return to their favorite, the faces become familiar. When there is a successful cafe within walking distance of your home, in the neighborhood, so much the better. It helps enormously to increase the identity of a neighborhood. It is one of the few settings where a newcomer to the neighborhood can start learning the ropes and meeting the people who have been there many years.

The ingredients of a successful street cafe seem to be:

1. There is an established local clientele. That is, by name, location, and staff, the cafe is very much anchored in the neighborhood in which it is situated.

2. In addition to the terrace which is open to the street, the cafe contains several other spaces: with games, fire, soft chairs, newspapers. . . . This allows a variety of people to start using it, according to slightly different social styles.

3. The cafe serves simple food and drinks-some alcoholic drinks, but it is not a bar. It is a place where you are as likely to go in the morning, to start the day, as in the evening, for a nightcap. When these conditions are present, and the cafe takes hold, it offers something unique to the lives of the people who use it: it offers a setting for discussions of great spirit - talks, two-bit lectures, half-public, half-private, learning, exchange of thought.

cafeWhen we worked for the University of Oregon, we compared the importance of such discussion in cafes and cafe-like places, with the instruction students receive in the classroom. We interviewed 30 students to measure the extent that shops and cafes contributed to their intellectual and emotional growth at the University. We found that "talking with a small group of students in a coffee shop" and "discussion over a glass of beer" scored as high and higher than "examinations" and "laboratory study." Apparently the informal activities of shops and cafes contribute as much to the growth of students, as the more formal educational activities.

We believe this phenomenon is general. The quality that we tried to capture in these interviews, and which is present in a neighborhood cafe, is essential to all neighborhoods -not only student neighborhoods. It is part of their life-blood.

Therefore:

Encourage local cafes to spring up in each neighborhood. Make them intimate places, with several rooms, open to a busy path, where people can sit with coffee or a drink and watch the world go by. Build the front of the cafe so that a set of tables stretch out of the cafe, right into the street.

Build a wide, substantial opening between the terrace and the indoors - Opening to the Street (165); make the terrace double as A Place to Wait (150) for nearby bus stops and offices; both indoors and on the terrace use a great variety of different kinds of chairs and tables - Different Chairs (250); and give the terrace some low definition at the street edge if it is in danger of being interrupted by street action - Stair Seats (125), Sitting Wall (243), perhaps a Canvas Roof (244). For the shape of the building, the terrace, and the surroundings, begin with Building Complex (95) . . . .

Pattern Language in Web Design


In 1999, Jennifer Tidwell published Common Ground: A Pattern Language for Human-Computer Interface Design. This work later evolved into her book, Designing Interfaces Tidwell recommends the use of patterns for interface design:

"More specifically, it would help individuals build better interfaces by:

Common Ground (published 1999) focused on general interface design issues and begins (as per Alexander's instructions) with a problem to be solved. Designing Interfaces (published 2005) focuses on web technologies to a greater extent; there is no problem listed and the solutions are closer to cookie cutter patterns than Alexander's open-ended solutions. Compare her pattern in 1999 for a Map of Navigable Spaces to her 2005 pattern of Clear Entry Points. The second is a clear prescription of how to solve the issue, but it lacks the depth of broad thinking about the underlying problem.

Some other pattern Libraries to consider:

How to apply a Pattern

Alexander was explicit that his Patterns were not cookie cutter designs. Each pattern responded to a problem. The first step in design was in identifying and articulating the problem. From that a pattern could be selected as a potential solution. Each pattern had to be combined with other patterns and applied as dictated by the particular circumstances.

"6. Complete your thought about this pattern, before you go on to the next one. This means you must treat the pattern as an "entity"; and try to conceive of this entity, entire and whole, before you start creating any other patterns.

7. The sequence of the language will guarantee that you will not have to make enormous changes which cancel out your earlier decisions. Instead, the changes you make will get smaller and smaller, as you build in more and more patterns, like a series of progressive refinements, until you have a complete design.

8. Since you are building up your design, one pattern at a time, it is essential to keep your design as fluid as possible, while you go from pattern to pattern. As you use the patterns, one after another, you will find that you keep needing to adjust your design to accommodate new patterns. It is important that you do this in a loose, relaxed way, without getting the design more fixed than necessary, and without being afraid to make changes. The design can change as it needs to, so long as you maintain the essential relationships and characteristics which earlier patterns have prescribed. You will see that it is possible to keep these essentials constant, and still make minor changes in the design. S you include each new pattern, you readjust the total gestalt of your design to bring it into line with the pattern you are working on.

9. While you are imagining how to establish one pattern, consider the other patterns listed with it. Some are larger. Some are smaller. For the larger ones, try to see how they can one day be present in the areas you are now working on, and ask yourself how the pattern you are now building can contribute to the repair or formation of these larger patterns.

10. For the smaller ones, make sure your conception of the main pattern will allow you to make these smaller patterns within it later. It will probably be helpful if you try to decide roughly how you are going to build these smaller patterns in, when you come to them. "
a step-by-step procedure for building this sequence into a design by Christopher Alexander


Readings

Recommended Reading and Resources:

Discussion

Week 1:

1) What are your professional experiences in working with the grid? Do you use grid layouts at your current publication? Do you find it to be a godsend or absolute torture?

As you go through the week, look at the layout of objects around you; not just newspapers and magazines, but look at everything: calendars, posters, books, software, the controls on your washing machine, and obviously web pages, but try not to just look at the web.

2) Read an article at The Grid System. Summarize the single most significant thought (in your opinion) in one sentence; one Hemngway-sized sentence. Post a link to the article and your one sentence summary. Do not try to summarize the entire article. But what one gem of wisdom did you find? You may have to read a couple of articles before you find one that resonates with you.

You don't each have to do a different article, but try not to all do the same article either. Diversity is good. We learn more.

Week 2:

"'Complexity is one of the great problems in environmental design.' (Christopher Alexander) Adequate information about the existing environment and about the types of place that it is desirable to make cannot be kept inside one brain...

The central argument of the Pattern Language is that, in the face of complexity, humans have evolved archetypical designs which solve recurrent problems. These solutions are called patterns...

Much can also be learned about human nature from the study of observable behaviour patterns... It has, for example, been discovered that:

Questions:

Assignment:

There are 2 parts: the wireframe and the card sort

1 - Wireframes

The term wireframe refers to a rough or general outline of something. In the context of Information Architecture, wireframes are schematic (or diagrammatic) representation of representation of the navigation, interactivity and content of web page. Wireframes are rough drawings; tools for thinking and discussing.

Types of wireframes

As the design of the web site proceeds, the wireframes will go through several iterations, beginning with very rough boxy sketches and moving through increasingly defined sketches. The wire frame is never developed to the level of a graphic design, but rather is a communication tool that will be given to the graphics team.

Wireframes are created typically as a set, with different wireframes demonstrating the elements of the various major page groups. Most web design proposals would include the following wireframes:

Assignment: Wireframe (schematic page layout)

Due: in your deliverables submittal at the end of the semester.

You have done your analysis, now we are going to begin to propose how to turn this site around. What do you want to do about the home page? Is it almost perfect, or absolutely horrendous? Your assignment is to create a wireframe proposing changes to the homepage with will implement the goals and visions that you collected in the mission, goals and audience definition

Your final wireframe should be able to be printed out on 8.5 x 11 paper. If your pages scrolls, it may take more than one sheet.

Pick your software:

At this point in time, there is no single software package that is universally agreed upon as the perfect IA tool. For serious IA or usability work, most people use Visio or Omnigraffle. HTML Is less frequently used for wireframing because of the tendency of the client to assume that the look and intersection is literal. That is, what he sees in the wireframe bears a strong resemblance to the final web site. This can be confusing and/or frustrating. There is a growing list of emerging IA software tools, which include wireframing among their capabilities. AxureRP and Adobe Thermo are some of the IA specific software tools that are emerging.

A short list of software options below.

Visio is probably the most popular software package for information architects. If you think that you want to pursue IA further, it is well worth your time to learn the basics. However, it is not a particularly intuitive software package and has a bit of a learning curve. Omnigraffle is a similar tool for the Mac.

There are a number of templates available which will ease the creation of wireframes (hint: use the shift key when resizing objects). Henrik Olsen has provided a very clear tutorial: Visio - the interaction designer's nail gun and set of templates and shapes ('GUUUI Web Prototyping Tool'). This will take you through creating a wireframe in Visio.
The IA institute Tools collection offers several shape stencils and templates for Visio.

Powerpoint is a familiar interface to most of us which has the graphics tools to create the basic shapes that are needed in a wireframe. Frederic Cavazza has created a Powerpoint wireframe template with shapes that you can use to create your wireframe assignment. Paul Hibbits offers some alternative shapes that you can use in your wireframe.

cavazza cavazza

CavazzaWireframe.ppt

hibbits

Paul Hibbits' PPT widgets only - no templates

Adobe Illustrator, InDesign (or Photoshop) are good choices for highly defined wireframes. You can begin to specify grids and proportions. If your client is working with a content management software package (such as dual has defined layout limitations, Illustrator will allow you to easier create grid based proportional wireframes.
Note: In using these packages, you need to be aware of any potential boundaries between the IA team and the design team.
UX matters has a tutorial on wireframing in Illustrator or InDesign. Within that article is a link to their templates.
AiBurn has a tutorial on Wireframing using Illustrator by Sean Hodge
The IA institute Tools collection offers several shape stencils and templates for Adobe Illustrator.

Word or Excel: Both programs have drawing tools, though neither is really set up for creating a drawing of this scale. Still it can be done - and most everyone has access to Microsoft Office.

2 - Card Sorting Exercise & Content Map (Schematic)

Read the assigned reading: Information Design Using Card Sorting by Step two Designs. This is what you will need to do for this exercise:

  1. Write down each topic on a separate filing (index) card.
    • the topics are the titles of the sections that you already have on your site - plus any sections that you have realized are missing. Hopefully, as you have been working with the site, you have seen how regrouping the content or changing the navigation would make the site more accessible.
  2. Give the pile of cards to a number of users and ask them to group the cards into piles.
    • Who are these users? In this case, just try it on two of your friends or family members (adults or something close). In the real world, these would be current or potential users of you site, and you would want more than two.
  3. Collate the results, and make use of them when completing the information design.
    • Give them a half hour, stand back and don't say anything. You may need to be present to answer questions though. You may discover that some of your vocabulary doesn't work. Have some index cards and markers there so that the sorters can create their own cards.
    • When they are done, take a snapshot of the resulting sorts and transcribe the information into an excel spreadsheet. Here are photos from a card sort that we held for an in-person class last summer. You can see what your final sorts might look like.
  4. Take the resulting document and create a Content Map. You can do this by updating your site inventory from module 4 or by creating a new document. The Content Map does not need to be as detailed as the site inventory. The required categories would be
    1. Three levels deep
    2. Standard Page numbering
    3. Page (link)Name
    4. Topics or Keywords which are fully descriptive and useful
    5. (Optional: Notes on the page content - as needed)
    6. A snapshot of one card sorting session.