June 30, 2009
Website Usability: Notes From a Nielsen Norman Group Conference, 2009
I recently ponied up for a conference session given by Nielsen Norman Group, regarding website usability. Below are some of my notes. Most links point to articles from usability expert Jakob Nielsen’s Alertbox.
- About 75% of user visits to a website are to a page other than the site’s home page; users are frequently “deep linking” to a site through search engines. Thus, those pages need to provide orientation about where the users are.
- Links to PDFs annoy users; they wonder if the website is “cheap” because the site’s publisher didn’t create an HTML page.
- Search boxes should be at least 30 characters wide. Showing a Google custom search on your site will increase your site’s trustiness — users view a Google search form as a positive. The upper-right is the best location for a search box; else, upper-left.
- Don’t separate out content by the type of technology, e.g., putting all podcasts under a podcast link. Better to integrate the various forms of technology (plug-in?) with the relevant content.
- Writing for the Web: don’t use language telling users how good or useful something of yours is; users will determine whether what you’re offering is good or useful.
- A summary at the top of a page of content is often helpful to users.
- Users like sites that have a set of “learn more” links at the bottom of an article. Don’t have a dead-end at the bottom of page!
- Users fixate on how they expect the interface to behave. They’ll do the same thing over and over even though it gives them the same result. This illustrates how important it is to use standards and accepted methods in website design. These days (2009), users have high expectations of websites.
- All users appreciate when information has been distilled down to what’s most important and easy to digest. Websites should invest in professional writing, editing, information architecture, user testing, etc.
- Progressive disclosure: only disclose information at the rate at which users expect it. Don’t dump too much, or dribble out too little.
- Linked phrases should be very descriptive of what users will get (thus, “click here” is the worse possible linked phrase). Links should bear information.
- Many (the majority of) users still have problems with fly-out (or drop-down) menus. It’s better to lead users to landing pages where they can consider their options for that section, or use “mega drop-down menus.”
- Users don’t move the mouse around much. Don’t expect users to explore a page with their mouse looking for hidden links or info pop-ups. They focus on areas that give a strong information scent, which is strongest with linked text.
- Fine-tune content to match user's search behavior: optimize <title> tags to benefit users scanning SERPs (search engine results pages).
- Browser tabs are still a feature used mostly by advanced users; the majority of users don’t browse with tabs.
- If the user needs to understand the company’ infrastructure to understand the website, then there’s a problem with the site.
- Headings and headlines are extremely important for users scanning text (which is what they do: people scan the web, they don't necessarily read it).
- Graphical internal promotions for the site should match the site’s style.
- Users’ view of the web is through SEARCH, more than ever. They use search as their starting point more than anything else. They even often think of what they’ve accessed as “from Google:” They’ll say “I read it on Google” even when they really read it on a page linked to from Google.
- Clear, contrasty and large text is very compelling to users, and is OK to use along with a photo. If the text is on the photo, make it contrast enough — easy to read.
(FWIW — ask me sometime whether I thought this day-long session was worth the $800 I paid.)
Above: the always-beautiful Mt. Wilson Towercam view, June 30, 2009, southern California.
June 30, 2009 in Web Sites + Graphic Design | Permalink | Comments (0)
June 27, 2009
West Oakland Candlelight Vigil, Sunday June 28, 2009
Candlelight Vigil, Sunday, June 28th 7:00pm
June 27, 2009 in Current Affairs | Permalink | Comments (0)
May 21, 2009
Same Old Story // Just Feels Fresher Today
The Failures of Complex Society, 2009
Here we are in America's very own Golden State: beautiful California. Isn't she lovely, ladies and gentlemen? I knew you'd think so too. Such a fine place, free of buzzards and locusts, hurricanes and blizzards. Sunshine in the sky and gold in the riverbeds, wheat and steer on the plains as far as the eye can see. Where cheery oranges grow sweet in the orchards, where behind them handsome Mount Baldy is capped with snow. Come one, come all, we've got a bungalow for you right over here.
Fast forward through numerous mine shafts and waves of migration, dams and roads, farms and wars, baby booms and microchips, university campuses and cities: our present condition. We believe it to be a precarious time. Some of us, many of us, get a sense of insecurity deeper than we might have ever felt before.
The present failure in California: to live within our means, to draw upon the Bank of Nature with care. Maybe the taste of gold is too rich in our memory. Maybe that brief moment of abundance is too recent in our past — we've never known scarcity, not like this (especially not if you don't know your history).
Is this the point when we could not organize ourselves in such a way that we weren't self-destructing? Sustainable? We don't need no stinkin’ sustainable!
And yet, the days proceed as before, mostly. In some places better, in some places worse. If we eat and sleep in peace, then we seem to live well. But the evidence around us conflicts with our own comforts. Long term, short term. Local, global. 6.7 billion satisfied customers.
These days: we sort through our media-filled environments. iPhones, laptops, big screens, wifis, emails, web sites, TVs, magazines, flyers, cables, pr0n0s, idols, channels, billboards, radio, boombox, airport, subway, taxi, taxi, taxi? Taxi! Unplug and get me out of here!
Earlier this week, I'm having a pastry and coffee at Happy Donuts in South of Market, San Francisco. There's a big flat-screen TV mounted high in the middle of the shop, 10 feet off the ground. It's blasting out a Carrie Underwood - All American Girl Music Video. I wonder — why? Is the shop owner a Country Music Channel fan? Does she think her customers are fans? Are they? What do I know?
I'm munching my pastry and drinking my caffeine while this video plays and I find myself totally mesmerized by the glitzy imagery, the beautiful woman, and the catchy tune. They got me. But still I'm thinking: Jesus, we're fucked.
Same old story. Just feels fresher today.
May 21, 2009 in Modernism + Modernity | Permalink | Comments (0)
May 11, 2009
Mirant Potrero Power Plant: Power Generation in San Francisco
May 11, 2009 in Potrero Hill // San Francisco | Permalink | Comments (0)
April 13, 2009
Tires Discarded: The Trashing of Nature Rolls On
After the road trip, after the commute, after the errand and the distraction: tire recycling or simply tire discarding. California gets trashed again…
Tires tossed into a stream cut along Little Panoche Road in central California.
A pair of Goodyear tires sit in a grassy field near the vineyards of northern California.
A single old whitewall tire washes up on the beach in Half Moon Bay, California.
A slew of old tires sit on the desert floor at an illegal dump site in southern California’s Antelope Valley.
See also:
- Choking the seas with our plastic garbage
- How to STOP junk mail: get off mailing lists, save the environment, and get your life back!
- Desert dumping
- Californians sure do love their cars... don't they?
- Ritter Ranch in Palmdale: The Bulldozing of California Goes On
Technorati Tags: abandoned, automobiles, California, cars, dumping, Earth, environment, litter, pollution, tires, toxic, trash
April 13, 2009 in Ecology + Nature | Permalink | Comments (5)
March 31, 2009
Two Which Do You Aspire Two? Goldsworthy's Spire and Pereira’s Transamerica
Andy Goldsworthy’s Spire in the Presidio of San Francisco {read more about it here on Le Blog…} and William Pereira’s Transamerica Pyramid // San Francisco, California
Technorati Tags: AndyGoldsworthy, architecture, art, Presidio, public, SanFrancisco, Spire, Transamerica
March 31, 2009 in City // San Francisco | Permalink | Comments (1)
March 24, 2009
The God Diet: Churches as Relics in a 21st Century City
"God" is a myth that we use as an excuse for not doing good in this lifetime. God is dead. I look around the city of San Francisco and I’m reminded of this liberating reality. The church as an organization to relieve the suffering of the poor may still be useful to society, but the church as a great power is fading, fading to a deserved oblivion, while ecclesiastical buildings stand like relics of another era, vestiges of long-broken promises.
Technorati Tags: architecture, California, church, DoloresHeights, falsehoods, MissionDistrict, MissionDolores, myths, PotreroHill, religion, SanFrancisco, SouthOfMarket
March 24, 2009 in City // San Francisco | Permalink | Comments (0)
March 19, 2009
Things to Consider When Designing a Web Photo Gallery
A common challenge in website development is deciding how to display multiple photos of one object. This is commonly required for clients such as real estate brokers, retail stores, artists, architects — anytime the website owner needs to show several views of something. There are many parameters to consider when deciding which image gallery technique to use; here are a few:
- Do we want each image to be on a separate page, requiring the user to click through to each photo? Usually the answer is no, but there's a search engine optimization (SEO) angle to this which I discuss below.
- Do we want to show all the photos on the page at once, and have the user scroll down the page to see all? This isn't even a slide show, per se; more like a "dumb blog" where we simply rack the images down the page. [example]
- Do we want to have the photos occupy the same area on the page, and provide text links for the user to click to switch the photo? [example]
- If we do this, do we want the photos to rotate their display automatically, in a self-starting slideshow? If so, which controls do we provide the user — time per slide, pause/play, resume, back/forward, first/last? Can we enable the keyboard to control the slide show, e.g., space bar to play/pause, and arrow keys to go forward/back?
- Do we want to show thumbnails of all the photos in the collection? Where on the page do we show these? Do we offer paging of the thumbnails? Do we highlight the thumbnail currently being shown in full size? Are thumbnails always visible, or only visible after user interaction? The Flickr slideshow is another best-of-breed functions to be studied; see the embedded slideshow, below. Note: uses Flash.
- Do we want to link to a large version, either as a plain JPEG or as a regular HTML page? [example of plain JPEG link | example of image in a new window/HTML page]
- Do we want to use the “Lightbox” technique where the image is overlayed on the page with Javascript? [example]
- Do we use a Flash-based gallery like SlideshowPro? Note: Flash galleries won't work on an iPhone, and in my view this rules them out completely.
Once again, the slickest slideshow function I've seen yet is from Apple Computer. You'll see it in use (as of March 2009) on the products linked from the Apple Certified Refurbished page. Apple's gallery implementation is exceptionally slick in several ways:
- Works fine on iPhone (doesn't use Flash or any plug-in).
- It first shows a main image with thumbnails below. Mousing over the thumbnails swaps out the main image with a smooth cross-fade. (see screenshots, below)
- Clicking on a thumbnail or on the “Enlarge Images” link expands the size of the viewing area vertically, as well as hides the product info text at left. The image at this point is 326 x 326 pixels.
- Clicking on the large image executes an additional zoom within the viewing area, showing a 1200 x 1200 image. This masked view is drag-able.
- Clicking on the large image zooms it back out; or the user can click a thumbnail for a cross-fade to a different image.
- The “Close” link in the upper-right brings resets the page to its original state: smallest version of main image showing, product info text visible at left.
Below: the default state of the page. The main product “box” is 624 x 336 pixels.
Below: the page after clicking “Enlarge Images” or a thumbnail. The product box is now 470 pixels high, with 413 pixels given to the main image (including the thumbnail area). Note the “Close X” link in upper-right of the product box.
Below: the page after clicking to zoom in on the image. Note how the image extends behind and below the thumbnail row.
Some other things to consider:
Do we want to associate HTML text with each image individually? If so, where and how is it displayed? Is the text only shown if the user takes an action to request it, such as pointing or clicking?
By not having each image or set of images on their own page, we lose the opportunity to have additional “hooks” to search engines. Does the project require multiple unique pages of content for search engine leads, which would be sacrificed if most images were shown only on one page?
There are times when less-sophisticated image galleries provide a platform for better Search Engine Optimization (SEO). We can imagine such a situation: a real estate developer wants to show 60 photos, of 20 different buildings. If we put all the images on one page in a gallery, even with unique descriptive text for each, this page wouldn't rank very well in search for any of the buildings. By comparison, if we built a page for each building, showing the building's 3 photos, then each one of those pages would be a nice big “hook” for search queries. A “1-item-per-page” approach will give more unique and valuable hooks to searchers than putting a mass of items on one page, since each page will have the opportunity to rise to the top of search results for the particular building.
In the case of a client of mine, Urban Bay Properties, creating unique pages for residential buildings in San Francisco has given those pages high placement in Google searches for the buildings.
(Elsewhere on Le Blog: Why Apple's website gets so much traffic: because it's so damn good.)
Some other image gallery round-ups:
Technorati Tags: Apple, design, gallery, slideshow, webdesign, website, WebsiteDevelopment
March 19, 2009 in Macintosh OS X, Web Sites + Graphic Design | Permalink | Comments (1)
March 18, 2009
California Poppies are Blooming in the Garden
There's no surer sign of spring in California than the blossoming of the state flower, Eschscholzia californica, also known as the California Poppy. Here are a few blooming in my garden:
You might also enjoy my other posts:
- My Guerrilla Garden in San Francisco
- Pinnacles National Monument (California) Wildflowers
- Death Valley (California) Wildflowers
March 18, 2009 in Ecology + Nature | Permalink | Comments (0)
February 10, 2009
Andy Goldsworthy’s Spire in the Presidio of San Francisco
Here in San Francisco, the English artist Andy Goldsworthy has erected the first of his “spires,” a massive assemblage of culled cypress trees from the Presidio’s mature forest. Found just north of the Arguello Gate on a slope of land uphill from the Inspiration Point Overlook, the spire juts out of the earth as a bundle of thick tree trunks 8-across, but as it climbs to its 100 foot height, it tapers to just one ragged branch.
Above: one of the new seedlings planted as part of the Presidio’s reforestation.
Above: at the base of the spire is what appears to be some local rock — the same sort of green serpentine rock that we find all around San Francisco.
I was up early today chasing the moon as it set over the Pacific, but found myself distracted by the spire as I entered the Presidio. I stopped to take photos and spent the next hour or so circumscribing the site and marveling at the spectacle.
Read and see more:
- Two Which Do You Aspire Two? Goldsworthy's Spire and Pereira’s Transamerica
- Goldsworthy reaches high with Presidio ‘Spire’ (interview) — San Francisco Chronicle, Oct. 25, 2008
- Work Stands Out Before It Blends In — New York Times, Oct. 20, 2009
- Andy Goldsworthy's 'Spire' — PBS News Hour blog post
- "Spire” by Andy Goldworthy — The Presidio Trust
- Goldsworthy at the Presidio Exhibit — The Presidio Trust
- Phillips Garden has a collection of other Goldsworthy artwork.
Technorati Tags: AndyGoldsworthy, art, forest, Presidio, SanFrancisco, sculpture, Spire, trees
February 10, 2009 in Art + Burning Man, City // San Francisco | Permalink | Comments (0)
