Information Design Watch

December 20, 2011, 10:22 am

HTML Sunrise

By Henry Woodbury

Paul Irish AND Divya Manian have teamed up to create a superb visual explanation that shows browser support for HTML5 and CSS3. Rolling over each spoke of the sunrise (to mix a metaphor) reveals the name of the component; clicking takes you to the W3C page that defines it.

While 2011 support for current common browsers is the most useful view, Irish and Manian have provided data for 2008, 2009, and 2010 as well. In the slideshow below I show a screenshot of each of the four views. It makes a nice animation.

HTML Readiness 2008
HTML Readiness 2009
HTML Readiness 2010
HTML Readiness 2011
  • HTML Readiness 2008
  • HTML Readiness 2009
  • HTML Readiness 2010
  • HTML Readiness 2011

The visual is created with HTML5 and CSS3, so it is best viewed with an current browser. Don’t even bother with MSIE 7.

(via the LinkedIn Web Standards Group)

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Diagrams, Information Design, Technology, Visual Explanation, Web Interface Design

November 2, 2011, 1:18 pm

The New and Improved Google Reader! Slightly Dingy and Now with Dark Patterns!

By Lisa Agustin

I use Facebook, but was not one of those people who grumbled about the latest changes. I accept that technology is about looking forward, convergence makes sense in many cases, and that improving the user experience means continually tweaking an information architecture and visual design to reach whatever your bigger goal may be (e.g., conversions).

But then Google released its redesign of Reader, and we went from this:

to this:


[Image credits: SheGeeks.net]

Google calls the design “cleaner, faster, and nicer to look at.”  But after reading their announcement more closely, it’s really more about creating a tighter integration with Google+ by turning off Reader’s friending, following, shared items and comments in favor of similar Google+ functionality. Which is okay, since I do see the point of consolidating Reader’s social aspect with Google+. But the redesign has actually made sharing harder, not easier. Former Google Reader Product Manager Brian Shih puts it this way:

Keep in mind that on top of requiring 3-4 times as many clicks, you also now must +1 a post publicly to share it, even if it’s shared to a private circle. That bears repeating. The next time you want to share some sexy halloween costumes with your private set of friends, you first must publicly +1 the post, which means it shows up on your profile, plus wherever the hell G+ decides to use +1 data. So much for building a network around privacy controls.

But then later, an update:

It turns out there is a way to share without +1′ing first. If you click on the top right “Share…” field on the OneGoogle bar [the bar at the very top of the pane], you can bypass the +1 button. It’s just completely undiscoverable.

Sounds like a dark pattern to me.

But let’s put Google+ aside, since sharing wasn’t why I used Reader in the first place. It was about the content. How quickly can I see what’s new and get to an individual story? From an information design perspective, I’d think making the design cleaner would mean maximizing space for original content. Rather it seems they did the opposite, with a thicker/more spacious header bar that pushes content further down the page.

From a visual design standpoint, greeted by a new absence of color, I wondered if they were trying to make it look like a traditional newspaper, removing colored elements as if they were distractions? While there is such a thing as too much color, the new Reader goes overboard in the other direction. With black, white, and grey being the dominant scheme, it’s hard to tell what the priority is in the UI. Google even eliminated the use of the bright blue link color that facilitates scanning.  Now nothing stands out–except for the bright red Subscribe button and the blue Search button.  Maybe it’s time to revisit the pluses of eye candy.

Kvetching aside, I suppose I will get used to the new direction (assuming I don’t switch feeds first).  I also guess I had better brace myself for the upcoming Gmail redesign.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: Information Architecture, Information Design, Social Media, Technology, User Experience, Web Interface Design

September 27, 2011, 3:29 pm

Theremins, Slot Machines, and Wheels of Destiny: Flexing the UI Design Muscle

By Lisa Agustin

When building a web site or application, the wireframes usually represent the first time functionality and content requirements take visual form. Creating wireframes is both exciting and daunting, much like approaching a blank canvas or piece of paper. Luckily, UX practitioners have a lot to draw from, including user research, best practices, and existing UI patterns.

And yet the typical approaches to rendering a user interface–dropdown lists, calendars for date picking, rollovers and accordions for menus–seem to be lacking in the creativity department. Is this really the best we can do from a design standpoint? How do we infuse our interfaces with innovative approaches that delight and surprise users while letting them get things done?  Mike Heydlauf suggests thinking outside the box by designing within a smaller one. In other words, consider constraints as a creativity aid.

The idea that constraints help creativity is not a new idea, but Heydlauf wants to up the ante by introducing artificial constraints  as a way to “design solutions to problems we might not even have.”  His reasoning:

The point is not to come up with an outstanding solution, but to flex creative muscles and fill our toolbox with ideas that might lead to an outstanding solution to a different problem somewhere down the line. In short, the value is in the journey, not the destination.

To demonstrate, Heydlauf proposes a common “problem” in UI (developing a control for selecting both date and time), introduces not one but two artificial constraints (data input via mouse, and input with only one click), then walks us through a range of possible design solutions (several of which he admits are “truly awful”). It’s a fascinating view into his thought process, especially when he considers “real world” objects as new UI models (hence the title of this post).

This article is a good reminder that innovative solutions are a result of taking the time to explore possibilities and not using the tried-and-true just because “that’s the way we’ve always done it.”  At the same time, though, I’d be interested in seeing this tactic applied in the context of a real project (or is it even possible?): How do we incorporate feedback to ensure our new approach makes sense to actual users? How do we fit exploration into a schedule that meets hard deadlines?

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Creativity, User Experience, Web Interface Design

September 23, 2011, 3:00 pm

Follow the Money

By Henry Woodbury

Even on mobile devices a web app can beat out a platform-specific app. That’s the case for The Financial Times (FT). FT spokesman Rob Grimshaw reports that their HTML 5 web app draws more readers for more page views than their now-discontinued Apple store app.

This is a nice success story for web developers, but there’s more going on than traffic:

…Apple takes a 30 percent cut of subscription revenue from users who sign up for apps in the store.

More problematic is that Apple wants to control subscriber data — valuable demographic information used by magazines and newspapers to sell advertising — from people who sign up for the app in the store.

For subscription-based publishers such as FT this is not a supportable position. One has to wonder if other successful subscription-based sites are equally dissatisfied.

Of course, what makes the FT story unique is that its web app replaced its Apple store app. For many organizations the platform app will never get built, not when a comprehensive web development effort can leverage some common UI and code to target both desktop and mobile users.

“App stores are actually quite strange environments,” Grimshaw said. “They are cut off from most of the Web ecosystem.”

Update: In regards to my last point before the last quote, Jason Grigsby’s Cloud Four critique of responsive web design is required reading. The mobile and desktop environments each deserve their own optimization.

(via a Tizra Facebook post)

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Business, Implementation, Technology, Web Interface Design

September 14, 2011, 3:23 pm

How a Bill Becomes a Column

By Henry Woodbury

There are a lot of bills in Congress. IBM Research Labs has created a new way to find them.

IBM Many Bills is a search engine that presents U.S. Congressional legislation in strongly visual format. Each bill is presented in a single vertical column with metadata at the top and sections in descending order. Sections are color coded to delineate their subject. You can show and hide sections of the bills you have found by subject (in a nice accountability feature, a rollover tells you how confident a subject assignment is), save specific bills, and view the actual text.

IBM Many Bills, Search for 'Canada', first 4 results

The color-coded sections allow you to view results in “minified” form, or as an extremely condensed “collection”, such as this group of American Housing Bills:

IBM Many Bills: American Housing Bills (42)

Many Bills is compelling on several levels. First is the hope that this kind of presentation can help make the legislative process more transparent to both experts and the general public. Second is the project as a model for content-specific search. By understanding the structure of the data, the Many Bills Team presents it in a way that facilitates findability and understanding. There is some risk that the team’s information architecture and design decisions could reinforce conventional thinking at the expense of the unexpected insight, but the source data is available to anyone who wants to try a different approach.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Charts and Graphs, Color, Information Architecture, User Experience, Web Interface Design

August 16, 2011, 1:32 pm

The Organizational Context for Web Development

By Henry Woodbury

Why is it, asks Jonathan Kahn, that the user experiences that web teams envision and that organizations truly want to adopt often fail to meet expectations?

Here’s the problem: organizations are the context for our work, and when it comes to the web, organizations are broken…

Although we’re comfortable with the idea that the web is critical to organizations, we often miss the corollary: the web has changed the way organizations operate, and in many cases it’s changed their business models, too. When executives can’t see that, it causes a crisis. Welcome to your daily web-making reality.

Now some of Kahn’s exhortations cause me to roll my eyes. I’ve worked in a number of information-related fields in my career and I’ve heard variations on “we are the change agents” and “executives don’t get it” all the way through. But Kahn is right to demand an organization-wide framework for web development and he is right to point out the need for governance and measurement as well as strategy and execution.

And when you see an organization really commit to a comprehensive web strategy with creative follow-through, the results are obvious.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Business, Technology, User Experience, Web Interface Design

August 10, 2011, 11:55 am

The Key to the Masthead

By Henry Woodbury

It may not work for every web site, but it does for Flip Flop Fly Ball. I’m talking about a site masthead with more iconography than a pre-renaissance painting.

Flip Flop Fly Ball Masthead

The key to the masthead is a nice example of information design in itself.

Key to Flip Flop Fly Ball Masthead

Click through to read the labels.

p.s. Flip Flop Fly Ball creator Craig Robinson has a book out. Good stuff. I’ve linked to him before.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Books and Articles, Charts and Graphs, Diagrams, Information Design, Sports, Visual Explanation, Web Interface Design

May 23, 2011, 2:02 pm

Small Uniform Multiples

By Henry Woodbury

The Baseball Hall of Fame’s Uniform Database offers an elegant showcase of the power of small multiples. Here is a simple example:

Brooklyn Dodgers Uniforms, 1935, 1936, 1937

The database output, by year or team, shows the remarkable variety in baseball uniform design, within the simple confines of cap, jersey, pants, and socks. The outline style shown above was created by Marc Okkonen for his book Baseball Uniforms of the 20th Century which concludes in 1994. Post-1994 slightly more naturalistic — and uglier — images are provided by Major League Baseball Properties.

Sadly, where this online exhibit succeeds as information design it fails as information architecture. The search engine is very clumsy. One cannot compare specific teams or specific years. For example, earlier this season the Boston Red Sox and Chicago Cubs played in throwback 1918 uniforms. There is no way to compare Red Sox / Cubs / 1918 / 2011. For larger searches, one cannot show more than three images in a row, or more than eighteen in a page. Please, BBHOF, publish an API.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Illustration, Information Architecture, Information Design, Sports, Visual Explanation, Web Interface Design

May 17, 2011, 8:48 pm

Name That Type

By Henry Woodbury

Not likely to be a game show anytime soon, but still fun for design geeks: It’s Type War! (Via commenter tmarthal on the Arial vs. Helvetica post.)

Type War Example

Nice UI as well.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Typography, Web Interface Design

April 26, 2011, 9:23 am

Launch! (Remodeling Dynamic Diagrams)

By Henry Woodbury

Late on Friday afternoon last week we relaunched DynamicDiagrams.com and this blog. The new site is more scalable than the old and incorporates more ways to present our work. Information Design Watch is incorporated into the main navigation of the site though it still resolves to its own dd.DynamicDiagrams.com subdomain. We like the new look too.

The relaunch has given us the opportunity to update our portfolio and present the popular dD Orrery on its own page. For the latter we’ve created free Mac and Windows screensavers you can download.

Let us know what you think.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Information Architecture, Information Design, User Experience, Visual Explanation, Web Interface Design

April 16, 2011, 4:30 pm

20 Things + 1

By Henry Woodbury

Cloud Computing by Christoph NiemannThe Google Chrome Team and illustrator Christoph Niemann have teamed up on a tour de force of information delivery: 20 Things I Learned About Browsers & the Web.

This online guide starts with “What is the Internet” and quickly jumps to topics near and dear to Google’s heart, like “How Modern Browsers Protect You from Malware and Phishing.” Yes, it’s self-promotional. But it’s also engagingly written, sprightly illustrated, and brilliantly executed.

Check out the interface. It’s not Flash. It’s HTML 5. That’s the plus one.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Books and Articles, Illustration, Information Design, Web Interface Design

March 9, 2011, 11:44 am

The Great Upheaval: Modern Art from the Guggenheim Collection, 1910-1918

By Lisa Agustin

The Guggenheim Museum recently launched an interactive timeline to accompany its new exhibition, The Great Upheaval: Modern Art from the Guggenheim Collection, 1910-1918. This colorful interactive map and timeline highlights the era’s artists, artist groups, exhibitions, performing arts, publications, artworks, historic events, and cultural movements.  Select one of these categories, then scroll across to choose a particular year.  Corresponding dots appear on the map above, and clicking on a dot displays a lightbox overlay with more information (see detail above).  Overall, the timeline works from linear, drill-down perspective: choose a cultural activity, year, and sample activity within that year.  Navigating the “Selected Artworks” category gives users the most detail (as expected), with an image of the artwork, and links to the artist’s biography and to an essay about the artwork, both housed in the pre-existing online collection on guggenheim.org– a nice way to leverage and highlight what’s already available.  Discovering these individual nuggets is a little like going on a treasure hunt.  The user seeks and finds individual gems scattered throughout.

At the same time, though, this interactive is weak in terms of  providing an integrated picture of the era overall.  Part of what makes studying an artistic era so exciting is the chance to discover connections: between artistic disciplines, or between the arts and historic events.  The timeline misses this opportunity by forcing users to choose only a single category (the checkbox-like bullet next to each category is misleading).  Additionally, once you’ve selected a dot on the map, dots of other colors at the bottom of the lightbox (see above) are indictors of simultaneous activities, but these are only visual cues and not links.  Investigating these further means selecting a different category for that year and clicking through individual dots to eventually make the connection yourself.  Allowing for multiple category selection and including crosslinks to other categories at the lightbox level are straightforward ways to make the pieces of the timeline more tightly integrated, showing that the whole is greater than the sum of its parts.

The Great Upheaval is on display through June 1, 2011.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Art, Information Architecture, Information Design, User Experience, Web Interface Design

February 10, 2011, 9:55 am

Cameron & Mittleman LLP Launches New Web Site

By Lisa Agustin

Dynamic Diagrams is pleased to announce that the web site for the law firm of Cameron & Mittleman LLP is now live.  The two main goals for this project were a refresh to the site’s design, and an easy way to maintain the web site in-house.   We provided the information architecture, visual design, and web development services, which included a move to the WordPress platform.  Content for launch includes the history of the firm, staff profiles, and practice area information.  The extensible solution will enable the organization to add features planned for the future, including a blog.  You can view the web site at http://www.cm-law.com/

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Information Architecture, Technology, User Experience, Web Interface Design

January 14, 2011, 2:17 pm

The 50 Pixel Hangover (Remodeling Dynamic Diagrams)

By Henry Woodbury

One significant target for our Remodeling Dynamic Diagrams project is the redesign of this blog. The interface designs are close to final now and have us thinking about how we will import current content. Unlike our primary web site we will not recreate content or images for Information Design Watch. Instead we will create a WordPress theme and apply it to the existing posts.

The issue is this. Our new blog design has a 640 pixel width content column. The current design has a 690 pixel width content column. Any image or object in our archives sized to the maximum setting of 690 pixels wide will not fit the new format.

We are approaching this issue in two different ways.

First, about month ago, we set 640 pixels as the maximum image size in the current theme. This means that recent images are already optimized to work within the new design.

Second, the new design features a wide content margin. Using a negative margin CSS technique, images up to 690 pixels can extend into this margin without obscuring sidebar links or breaking the column.

There is a third solution. We can manually edit each post with a 690 pixel width image and replace it. That one awaits a design intern.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Implementation, Technology, Web Interface Design

January 6, 2011, 10:43 am

Social Media for Designers

By Henry Woodbury

Combine social media with design and you might end up with a site like Dribbble (that’s with three b’s). Just make sure you also come up with an elegant user interface design and use an oddball basketball metaphor for the site vocabulary.

Excerpt from Dribbble home page, 6-Jan-2010

Like many successful social media sites, the underlying concept is simple. Where Twitter limits word count, Dribbble limits image size — to 300 x 400 pixels, max. Common social media elements like tags, comments, and fans enrich the experience. Fans and views drive a popularity index and an inexplicable “playoffs” page.

One of Dribbble’s innovations is the “rebound”, a graphical reply to another posted design. This is technically similar to sharing in Facebook or trackbacks in blogging, but Dribbble does a markedly superior job in presenting the cross-communication. Which is good, because cross-communication inspires better design.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Charts and Graphs, Design, Diagrams, Information Design, Social Media, Technology, Web Interface Design

December 3, 2010, 10:18 am

Meta Works (Remodeling Dynamic Diagrams)

By Henry Woodbury

In Tim’s last post on Remodeling Dynamic Diagrams he mentioned our decision to use web fonts. By maintaining font files on our server and referencing them via @font-face calls in our CSS files, we can bring to our web presence the Meta typeface we have long used in our diagrams, presentations, print collateral and Flash animations.

This demo page shows the Meta Web version we have purchased for the site redesign. Internally we have tested it on Internet Explorer 6, 7, and 8, and current versions of Firefox, Safari, and Google Chrome (such incremental browser testing is part of our process). It also works on the iPhone’s Safari browser.

If the fonts on the demo page don’t resemble the image below on your browser, let us know!

A sample of Meta

UPDATE (December 9, 2010): As Andy mentions in the comments, the lower-case y in Meta Web Medium renders with a flaw. This appears on all Windows-based browsers. We’ve reprocessed the fonts and uploaded a new demo.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: Dynamic Diagrams News, Implementation, Technology, Typography, Web Interface Design

July 29, 2010, 12:26 pm

Historic New England’s Collections Online

By Kirsten Robinson

The Portsmouth Herald has published an article about Historic New England’s new web site and online collections project, for which Dynamic Diagrams provided web strategy, information architecture and design services, as well as project management for the site’s development.

You can view the web site at www.historicnewengland.org or dive right into searching and browsing the online collections — full of photos, artifacts, and reference materials having to do with 400 years of New England History.

We’re currently in the final stage of the project, conducting usability tests on the new site.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Information Architecture, Scholarly Publishing, Usability, User Experience, Web Interface Design

May 27, 2010, 2:15 pm

Historic New England Web Site Goes Live

By Kirsten Robinson

Historic New England’s redesigned web site is now live at www.historicnewengland.org. Historic New England is a non-profit organization dedicated to preserving and presenting New England’s history. They own and operate 36 historic house museums, provide educational programming for adults and children, collect and conserve historic objects and archives, help preservation organizations and homeowners protect and maintain historic sites, and publish books and magazines about history and preservation.

Some highlights of the new site:

  • Improved navigation and fresh visual design replaced a site that had grown organically over ten years.
  • Greatly expanded content on historic properties, preservation, and more: site updates are completely under the control of Historic New England staff for the first time, through an easy-to-use content management system (CMS) called Plone.
  • Online collections access: users can now browse and search Historic New England’s extensive collections of museum objects, archival materials, and books. Online exhibitions are also easier to create.

Users can search and browse the collections and archives

  • Interactive events calendar allows users to browse events by date and location and then click through to the online shop for registration.
  • Search engine provides quick access to site content and collection highlights from any page, and there are also specialized searches for collections and events.
  • Galleries and slide shows are available throughout the site to better present Historic New England’s great photography. Here’s one about the animals at Spencer-Peirce-Little Farm.
  • Multimedia is also supported, as seen in the Berlin & Coos County oral history project.
  • Interactive map provides a visual overview of Historic New England’s 36 property locations.
Map to Historic New England's 36 properties

Interactive map to Historic New England's 36 properties

  • Integration with Historic New England’s online shop (developed by a third party) enables them to sell memberships, donations, event registrations, and merchandise. The shop integration will also enable single sign on between the site and the shop, allowing access to restricted content as well as member discounts on purchases.
  • News has categories and feeds to position news appropriately throughout the site, and allows user commenting.
  • Microsites enable visitors to rent properties for weddings and functions and to celebrate Historic New England’s centennial.
Home page for the Function Rentals microsite

Home page for the Function Rentals microsite

Dynamic Diagrams has been working with Historic New England since January 2009 to define web strategy, information architecture, user experience, and visual design for the site. We worked with our development partners to implement the site using the Plone CMS, to convert legacy content, and to integrate the site visually and functionally with Historic New England’s online shop. We collaborated with our partners and Historic New England’s collections team to define and develop the Collections Access portal. Finally, we and our partners trained Historic New England staff authors on Plone and writing for the web, so that they could develop new content for the site and maintain it going forward.

We are thrilled to see the site go live and congratulate Historic New England on a successful launch.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Information Architecture, User Experience, Web Interface Design

May 4, 2010, 10:17 am

Jobs Takes Flash to the Mat

By Henry Woodbury

Get your ringside seats for the Apple vs. Adobe fight, right here.

Apple CEO Steve Jobs tries the headscissors takedown:

Besides the fact that Flash is closed and proprietary, has major technical drawbacks, and doesn’t support touch based devices, there is an even more important reason we do not allow Flash on iPhones, iPods and iPads… We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform.

Adobe CEO Shantanu Narayen bounces back with a half nelson leg sweep (video here):

The technology problems that Mr. Jobs mentions in his essay are “really a smokescreen,” Mr. Narayen says. He says more than 100 applications that used Adobe’s software were accepted in the App Store. “When you resort to licensing language” to restrict this sort of development, he says, it has “nothing to do with technology.”

Meanwhile, Adobe plans to demo Flash for Google’s Android OS this month — and give Android phones to all of its employees.

By the way, here’s Rey Mysterio performing the headscissors move:

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Business, Sports, Technology, User Experience, Web Interface Design

March 19, 2010, 10:38 am

It’s Tournament Time

By Henry Woodbury

The Mens Division I NCAA Basketball Tournament bracket is one of the most iconic images in U.S. sports. Voila:

NCAA Mens Division I Basketball Tournament, 300 Pixels Wide NCAA Mens Division I Basketball Tournament, 150 Pixels Wide NCAA Mens Division I Basketball Tournament, 75 Pixels Wide

So what can an information designer do with this?

Cliff Kuang at Fast Company looked around the web to find out. His selection for “best designed bracket” goes to NBC Sports:

Why? Because it’s a bonafide [sic] infographic–basically a cheat-sheet that allows anyone with only a passing interest in college basketball to sound smart after about five minutes of studying.

The NBC Bracket is here. It’s interactive, but broken. Hey NBC! Fix that absolute positioning.

Update: It’s fixed now.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (3) | Filed under: Current Events, Diagrams, Information Design, Sports, Web Interface Design

March 17, 2010, 12:06 pm

Your Data is my Distraction

By Henry Woodbury

I recently ran across a still-fresh 2009 Nieman Journalism Lab post on “ambient visual data” — a good term for the practice of graphically incorporating metadata into a content-delivery interface. The most common idea seems to be adding subtle bar charts beneath or around links to illustrate various kinds of popularity.

To explain the importance of the concept, author Haley Sweetland Edwards turns to designer Eliazar Parra Cardenas, creator of Backbars, “a GreaseMonkey script to turn the headlines and comments of social link-sites into ambient bar charts (of votes/diggs/views/users…).” Cardenas explains:

“The whole point is to make textual information easier to absorb… [A well-designed site] should maximize the information that a user can understand — that you can just glance at, or take note of -– without actively thinking….

“We’ve already tried the obvious in print: putting as much text as possible in one glance (hence broadsheets), mixing in images, headlines, columns. I think the next step will be digital developments like backbars, favicons, sparklines, word coloring, spacings.”

Count me as extremely skeptical. The sites that Edwards and Cardenas hold up as examples seem both cluttered and shallow — a vote-stuffing contest for “news of the weird.”

I’m old school that way. What drives traffic are the editorial and authorial inputs that Cardenas overlooks in his list of the obvious. Not headlines, but well-written headlines. Not images, but compelling images. Not backbars, favicons, sparklines, word coloring, and spacings, but good ledes.

The New York Times isn’t making money online. But they aren’t lacking for traffic.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Charts and Graphs, Information Design, Technology, Usability, User Experience, Visual Explanation, Web Interface Design

February 16, 2010, 9:47 am

Old Search Engines Never Die…

By Henry Woodbury

Jacob Gube at design site Six Revisions uses the Way Back Machine to create a “then and now” piece on search engines. It’s worth a look, just for the screenshots. Chrome and content tell a story. For most of those still around, lots of chrome and lots of links have faded away, replaced by minimal chrome and minimal links.

HotBot and WebCrawler are still around. They look like Google.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Technology, Web Interface Design

February 15, 2010, 4:01 pm

Cressey Performance Web Site Relaunches

By Henry Woodbury

Our latest web site design is for Cressey Performance in nearby Hudson, Massachusetts. Cressey Performance is a weight-training gym with an international reputation for its work with competitive athletes, from youth sports to professionals. Directed by the highly-respected Eric Cressey, the facility is a go-to training destination for professional baseball players, including Kevin Youkilis of the Boston Red Sox, as well as other elite athletes such as 2010 USA Olympic Bobsledder Bree Schaaf.

The site is designed around a tight core of informational pages about the facility, while a new CP Blog provides an ongoing venue for current news, training videos, and links to the top stories at the separate blogs maintained by Eric Cressey and staff nutritionist Brian St. Pierre.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Sports, Web Interface Design

January 30, 2010, 9:23 pm

Real-Time Bus Location

By Henry Woodbury

LMA Shuttle Map

Using GPS and Google Maps, MASCO — the Medical Academic and Scientific Community Organization, Inc., of Boston, Massachusetts — offers this elegant real-time bus map for its shuttle service. The map shows buses in service, their location, and their direction of travel.

For folks waiting at the bus stop, the service is accessible via web-enabled phone at http://shuttles.masco.org/m.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Design, Maps, Technology, Visual Explanation, Web Interface Design

January 12, 2010, 11:13 am

Historic New England Centennial Site Now Live

By Kirsten Robinson

Historic New England has launched a Centennial microsite to celebrate their 100th year of preserving New England’s history and to highlight centennial projects that they are creating in conjunction with community partners throughout the New England states. Key site features include an events calendar, photo galleries and slide shows, and video oral histories.

Historic New England Centennial oral history page

Historic New England selected Dynamic Diagrams to create the user experience for the site (research, information architecture, visual design, and XHTML and CSS coding). We worked with our development partners to implement a Plone content management system (CMS) that provides Historic New England — for the first time — with complete control to create their own pages.

The Centennial site is also a preview of things to come. Watch this space for a future announcement of Historic New England’s redesigned and enhanced main web site.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Implementation, Information Architecture, User Experience, Web Interface Design

December 18, 2009, 11:11 am

What’s Above the Fold? Ask Google

By Lisa Agustin

google-browser-size

Fresh from Google Labs:  Google Browser Size, a nifty visualization tool for checking how much of a web page sits “above the fold,” i.e., what’s visible in Google without scrolling.  Just type in any URL to see how the site looks.  Color contours show different window sizes and the percentage of users that have this size or larger.  (Presumably these percentages are based on Google’s own statistics.)  For instance, in the example above, the “donate now” button falls within the 80% contour, meaning that 20% of users cannot see this button when they first visit the page.  If getting donations is a priority of the site, the web design team now knows they ought to position the button higher on the page.

The tool works as an overlay, allowing you to interact normally with the page you’re examining.  Thus you can easily review other pages on the site as well.  This is great for sites that are about to be redesigned, or ones that you’re just curious about.  I was also happy to discover that this tool also works for designs that are still in development–I was able to view a .png on a project site, which gave me instant feedback on what will be visible on page load.  Nice work, Google.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (1) | Filed under: Implementation, Web Interface Design

December 3, 2009, 11:28 am

What once was print…

By Matt DeMeis

…is now being done very effectively with new technology. Flyp media captures that cozy feeling of thumbing through a magazine and translates it to the internet in one of the best ways I have seen in a while. It’s news, in a more exciting format. Video, audio and elegantly designed layouts definitely give a nod to the print world, all while being more exciting than a piece of paper could ever be.

Flyp Media Home Page

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Design, User Experience, Web Interface Design

December 2, 2009, 3:31 pm

Highly Targeted Healthcare Marketing

By Matt DeMeis

These days health care is a slippery subject. This isn’t about politics or any of that. Today I came across (what I think to be) a brilliant way of marketing health care to an audience that usually forgoes coverage, Xtreme sports enthusiasts. Tonik Health Insurance has taken the daunting task of securing coverage for yourself and made it incredibly easy.

Tonik targets a finite demographic and gives them access to the information the need in a design they can relate to. In one or two clicks I was able to find all that I needed to know about purchasing a plan from them. Once you decide on a coverage level you simply fill out a form. For comparison I went to an undisclosed giant’s web site to try and find the same info (still pretending I was an Xtreme sports enthusiast of course). I gave up after some dead end digging and suggestions to download PDFs. It seemed more effort was put into the stock photography than the user experience. Ease of use is CRUCIAL for the audience Tonik is targeting. Their potential customer wants information fast. No digging. No downloading.

The design is great. Loud but very minimalist. It’s tailored for a younger, action sports lifestyle audience and it does that perfectly. Bold colors and lots of flash but these things don’t hide the information. Wonder what “$5000 deductible” means on the thrill-seeker plan? click the question mark next to the word. Easy.

Tonik Healthcare Screen

Now to be fair it must be noted that Tonik is a division of Blue Cross, an industry giant. They don’t serve every demographic, there is no “family thrill-seeker” package yet, but there is a lot to be learned by how smart and easy this site has made a somewhat complicated decision. Check it out at www.tonikhealth.com

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Branding, Information Design, Marketing, User Experience, Web Interface Design

September 30, 2009, 9:10 am

TDR Launches New Interface Design

By Henry Woodbury

Today TDR updated their site with a new banner, color palette, and home page layout.

The design and roll out resulted from close partnership between TDR, Dynamic Diagrams, and other consultants. The result is a fresh look and a home page layout that reflects the evolving use of the site.

Co-sponsored by UNICEF, UNDP, the World Bank, and WHO, TDR, “funds research in infectious diseases of poverty, and provides support and training to researchers and institutions in the countries where these diseases occur.”

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Scholarly Publishing, Web Interface Design

September 4, 2009, 1:12 pm

The Times Goes Google on Us

By Henry Woodbury

I just discovered the New York Times Developer Network.

This resource provides data from The Times to third party developers through content-related APIs:

Our APIs (application programming interfaces) allow you to programmatically access New York Times data for use in your own applications. Our goal is to facilitate a wide range of uses, from custom link lists to complex visualizations. Why just read the news when you can hack it?

Most or all of the APIs respond to a query by returning data in XML or JSON format. Some developers have built custom search engines and topic-specific mashups around this functionality. Others are more interested in the sheer excess of the data — and how it can be visualized.

Artist Jer Thorp is one of the latter. Thorp accesses the Times Article Search API to create visualizations that compare the frequency of key words over time. The image below, for example, compares ’sex’ and ’scandal’ from 1981 – 2008:

NYTimes: Sex & Scandal since 1981

When you zoom in, the visualization reveals branching segments called “org facets”. Thorp writes:

[These are] organizations which were associated with the stories that were found in the keyword search. This is one of the nicest things about the NYTimes API – you can ask for and process all kinds of interesting information past the standard “how many articles?” queries.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Charts and Graphs, Current Events, Information Design, Technology, Visual Explanation, Web Interface Design

September 2, 2009, 2:20 pm

What’s Wrong with this Chart?

By Henry Woodbury

Federal Spending FY 2009 YTD

The chart, of Federal Spending FY 2009 YTD, is from USAspending.gov, a web site mandated by law to provide the public free, searchable information about U.S. Federal expenditures.

Seth Grimes at Intelligent Enterprise figures out the problem and its cause:

USAspending.gov produces its charts dynamically using the Google Chart API…[but] passes values to Google that are out of range. Google truncates them, just as [its] documentation explains.

Here is Grimes’ corrected chart:

Federal Spending FY 2009 YTD, corrected

Unfortunately, data misrepresentation isn’t the only problem he finds.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (1) | Filed under: Charts and Graphs, Technology, Usability, Web Interface Design

August 27, 2009, 3:09 pm

Craigslist Makeover

By Matt DeMeis

Wired has a very interesting article up right now. Several well known designers were asked to give hypothetical makeovers to Craigslist. I use CL all the time and honestly, I have never really had a usability problem of any kind. It does what it is meant to do quite well and is a true example of a simple utilitarian web service. I don’t own an iPhone or Blackberry so mobile access hasn’t been an issue for me. That seems to be the biggest argument for some kind of partial redesign (if only for mobile clients). A lot of the designers agree “why fix what’s not broken” (myself included) but it’s still interesting to see the results. Some better than others. My take on the submitted designs…

Favorite: Simple Scott
Least Favorite: Studio8
Middle Ground: Khoi Vinh

Go check it out for yourself…

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Design, Usability, User Experience, Web Interface Design

August 19, 2009, 9:50 am

You Are…

By Matt DeMeis

MIT Phd student Aaron Zinman has created an interesting data driven visualization experiment called “Personas”. Simply enter your name and a Flash app scours the web for bits and pieces of information about you. As it does so, its progress is displayed in visual form (albeit at warp speed, so it’s more for “ooh ahh” factor than usefulness). You are then characterized as a colored strip of categories ranging from books, sports, management and aggression to education, legal and illegal (activities?). It’s an interesting experiment. I think it would be great to have a bit more control over the categories and info about the user. Just to help weed out the cruft. As is, it’s probably pretty inaccurate for someone with the name Bob Smith or Michael Jackson. I am curious what our resident Flash maven Piotr would add to it. Go try it out over at the MIT site.

http://personas.media.mit.edu/

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Charts and Graphs, Diagrams, Information Design, Visual Explanation, Web Interface Design

June 29, 2009, 2:08 pm

Sunny Days Over 3D Cities

By Henry Woodbury

The Chinese firm Edushi (“E-city”) has created 3D models of over 40 Chinese cities, including Hong Kong:

Edushi Hong Kong

Google Map-like pan, zoom, and search features make it easy to explore these candy landscapes, until one reaches the edge of the model and the world either fades or flattens — as in the screen capture of Guangzhou below.

edushi-guangzhou

Oddly, the Edushi artists generally point North 45 degrees off vertical (counterclockwise). This means that the 3D maps don’t align with common roadmap or satellite views.

(via PopSci.com)

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: 3D Modeling, Illustration, Maps, Visual Explanation, Web Interface Design

January 8, 2009, 2:56 pm

Rounded Corners and Other Hooks

By Henry Woodbury

The upcoming CSS3 Specification looks to codify some of today’s favorite interface design tricks, including rounded corners, drop shadows, alpha transparency, and custom fonts. Many of these features can be accessed already using the probable CSS3 style or a browser-targeted version of the same. For example, rounded corners has three test declarations:

-moz-border-radius (for Mozilla-based browsers such as Firefox)
-webkit-border-radius (for Webkit-based browsers such as Safari)
border-radius (the probable CSS style)

Here is a semi-transparent white box with rounded corners and a drop shadow. Two circles are overlayed to show transparency effects.

None of these effects show on the current version of MSIE 7 — so let that be your control. Some may not show on Firefox until the release of Firefox 3.1, but all work on Safari using the Webkit syntax.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (1) | Filed under: Implementation, Web Interface Design

December 15, 2008, 1:56 pm

Manipulating the Historical Web

By Lisa Agustin

Zoetrope web crawler

You may be familiar with the Internet Archive (a.k.a. the WayBackMachine), an Internet library of 85 billion web pages that lets you search for a specific web site (including ones that are now defunct) to see how it looked on a given date in the past.  But while these historical views are interesting, their usefulness is limited since they only provide single, unconnected snapshots frozen in time.  Enter the Zoetrope web crawler, a system created by Advanced Technologies Lab at Adobe Systems.  With Zoetrope, users will be able to manipulate earlier versions of the web and generate visualizations of web data over time.  “Time lenses” can be used in different regions of a page, to see specifically how data in that section has changed over a specific period of time.  These lenses can even be combined to see the interrelation of data sets, enabling the user to explore cause-and-effect hypotheses (see the Zoetrope demo for an example of this).  Intended for the “casual researcher,” it’s easy to see how data junkies could spend hours with this application. Zoetrope’s creators expect to release the application for free next summer.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Current Events, Technology, Web Interface Design

December 12, 2008, 12:17 pm

Creating Guideposts for the Visual Design Process

By Lisa Agustin

Droid SansA web site’s design is the marriage of the analytical and the aesthetic. The analytical side involves sifting through the front-end research (strategic documents, content inventories, user interviews, etc.), and translating these into a positive and engaging user experience.  Coming up with the architecture is a creative activity, but it has its roots in research activities that most clients understand and accept.

Developing the site’s visual design is usually the bigger challenge, since this is when subjective concerns like personal preference may come into play. Personal opinions about design may put the project at risk (read: endless review cycles) if these are not managed correctly.  With our projects, we frame design discussions in the context of project goals and best practices.  Conversations about the site’s desired look and feel are as specific as we can make them: Are there corporate brand guidelines?  Does the site have to complement other sites and collateral?  Are there sites you like/don’t like and why?  This approach has served us well. Still, there have been exceptions where we’ve created a visual design concept that clearly meets all the requirements, but the client is not satisfied with the result.  In the best scenarios, the feedback is specific and actionable. But then there are other design reviews where the response is a little more cryptic: “It’s not quite I was looking for,” or the dreaded “I know it when I’ll see it.”  What then?

I thought about this when I read how Droid, the font for the new G1 cellphone, came to be. Google wanted a font that was “friendly and approachable” with “common appeal.”  The iterations developed by font studio Ascender Corporation ranged from an early typeface that was considered too “bubbly” to the more “techno” computer-based font, which was also rejected.  Because the definition of an “approachable” font isn’t exactly clear-cut (at least to me), I suspect debates about the options used some kind of visual scale, a more complex version of the continuum graphic at the top of this post.  Seeing the range of options would be easier than just talking about them, and it would then be possible to pinpoint the desired result. We’ve developed such tools ourselves, adding information about what the advantages and tradeoffs may be in choosing one direction over another.

Another example of this design continuum is the perceptual map used to guide the design development of the Xbox 360 game console (scroll down for the perceptual map).  The project team arranged seven console designs on a grid that used “architectural/organic” vs. “mild/wild” axes, with the existing design as a reference.  This tool ensured that the conversation was about design language and not about design preference, while also giving non-designers a way to compare the different console designs. (For more on the Xbox 360 design process, see this earlier Information Design Watch post.)

I would love to see more examples of visual tools that can help guide the design process. Readers, have any of you successfully adapted or developed similar tools for guiding design-related discussions with clients?

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Prototyping, Typography, User Experience, Visual Explanation, Web Interface Design

November 20, 2008, 12:55 pm

Ugly is Timeless

By Henry Woodbury

Jason Fried at 37 Signals offers an appreciation of the Drudge Report:

A couple weeks ago on Twitter I said: “I still maintain the Drudge Report is one of the best designed sites on the web. Has been for years. A few people agreed, but most didn’t. Some thought it was a joke. I wasn’t kidding.”

Fried starts with the site’s “staying power:”

Its generic list of links, black and white monospaced font, and ALL CAPS headlines have survived every trend, every fad, every movement, every era, every design do or don’t. It doesn’t look old and it doesn’t look new — it looks Drudge.

Fried touches on design, branding, production, and content. What is the content of Drudge? Headlines and links. Why is that enough?

The more often you hit his site to go somewhere else the more often you’ll return to go somewhere else again. You visit the Drudge Report more because you leave the Drudge Report more.

Lots of food for thought.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Business, Current Events, Marketing, User Experience, Web Interface Design

October 9, 2008, 11:13 am

Dynamic Diagrams Project for the World Health Organization Goes Live

By Lisa Agustin

TDR Home

The World Health Organization’s Special Programme for Research and Training in Tropical Diseases (TDR) unveiled its new corporate web site this week.

Although the existing site had much to offer, users had difficulty finding the information they needed (namely grant opportunties and TDR research publications), and the client felt that TDR’s contributions were buried.  The redesigned site features a new information architecture that makes key content easier to find, while highlighting TDR’s accomplishments and new business strategy.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Information Architecture, Web Interface Design

August 7, 2008, 9:02 am

Do Web Designers and Site Visitors Agree on Web Site Effectiveness?

By Kirsten Robinson

Sathish Menon and Michael Douma at IDEA report on their survey to compare expectations about the online experience among web designers, non-profit organizations, and site visitors. Not surprisingly, they found a few discrepancies. For example, “Designers underestimate the thresholds for an effective site,” and “Designers are overly optimistic about visitors’ ability to maintain orientation.” Yet another argument for practicing user-centered design, including user research and usability testing.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Usability, User Experience, Web Interface Design

July 10, 2008, 9:52 am

Talking Call to Action

By Henry Woodbury

At The Girl Effect, a call for educating girls in the developing world is presented in a powerful animation that uses just typography and music to hold our attention.

Still from The Girl Effect movie

The animation leads into a microsite — essentially an executive briefing — that identifies key points and provides links to more detailed information in PDF format and at partner sites like The Center for Global Development.

There are a few stumbles — they almost lost me with “turn this sinking ship around” — but overall The Girl Effect is a great example of how to communicate a message and make it stick in the mind by paring down the details to a single narrative.

At first I thought the links I mention above were too difficult to find, but it occurred to me that they aren’t the point. The call to action is to share the story. And here we are.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Marketing, Visual Explanation, Web Interface Design

April 1, 2008, 3:23 pm

Standards vs. Compatibility

By Henry Woodbury

Joel Spolsky offers a look ahead at Microsoft Internet Explorer 8. What he foresees is a web developer flamewar.

Headed by developer Dean Hachamovitch, the MSIE 8 team has decided to move its default mode away from MSIE 7 compatibility and closer to web standards. Spolsky offers a long quote from Hachamovitch’s announcement of this decision, but it boils down to this:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can.

This means that some HTML pages coded to take advantage of some of MSIE 7′s quirks will break in MSIE 8.

This is a problem? It shouldn’t be.

Barring the introduction of any new quirks (say a new way to misinterpret the box model), there’s no reason any Web site HTML and CSS should break in MSIE 8. If a web site has been tested against MSIE 6, MSIE 7, Firefox, and Safari (as are all of our public-facing projects), and if its developers have used a robust HTML structure and the subset of mutually-supported CSS styles (rather than browser-sniffing to write specialty CSS), then the odds of that site rendering incorrectly in MSIE 8 should be very small.

JavaScript-driven functionality, however, is harder to predict. Here, I rely on the folks behind Prototype and jQuery to handle MSIE 8 so I won’t have to. We’ll see how that goes.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Technology, Web Interface Design

February 27, 2008, 1:06 pm

The Movie Money Landscape

By Henry Woodbury

The New York Times has a very nice interactive chart on The Ebb and Flow of Movies: Box Office Receipts 1986 – 2007, partially captured below:

The Ebb and Flow of Movies: Box Office Receipts 1986 - 2007

This visual explanation does many some things well. It uses both sides of the horizontal axis to double the amount of data displayed in a vertical slice of time. It avoids unnecessary gridlines and tick marks. It uses color to clarify the area plot for “total domestic gross” allowing easier comparison between movies with short and long runs (compare Shrek to Hannibal, for example). A “Find Movie” feature helps locate any release in the time frame and highlight it among its contemporaries.

All that is missing is a single view of the entire chart. Even a static thumbnail image would help illustrate seasonal and macro trends. Here’s a sample view of 1986 – 1990.

The Ebb and Flow of Movies: Box Office Receipts 1986 - 1990, Macro View

Update: Thanks to commenter “tomp” I’ve made a few edits. My original “double the amount of data” statement was off base. By using both sides of the horizontal axis, the chart may increase the number of peaks, but since the data is stacked (not overlapping as I originally assumed), this technique does not increase data density. The macro view would, in fact, be much easier to analyze if all the data was stacked in the same direction (upwards). I also replaced a reference to The Animal with Hannibal so that my point about total domestic gross would actually make sense.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (4) | Filed under: Business, Charts and Graphs, Information Design, Visual Explanation, Web Interface Design

January 2, 2008, 11:10 am

American Physical Society Launches Dynamic Diagrams Redesign of Physical Review Letters

By Lisa Agustin

The American Physical Society’s flagship journal, Physical Review Letters, has a new look and feel, thanks to a redesign by Dynamic Diagrams. Along with an updated masthead, the redesign features clearer navigation options, quick access to content from the current issue via a tabbed interface, and a snapshot of the latest news and most cited papers. As part of the PRL redesign, Dynamic Diagrams also designed a sub-site to commemorate the journal’s 50th anniversary, which includes an interactive timeline of notable papers and events since 1893. PRL’s new visual design is part of a larger effort to create a new visual design system that will be applied to eight additional journals and the APS Journals umbrella site. Redesigned versions of these sites will be launched in the coming months.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Dynamic Diagrams News, Scholarly Publishing, Web Interface Design

December 4, 2007, 7:23 pm

Online Chart Chooser for Excel and PowerPoint

By Mac McBurney

No time to kick tires and sing praises at the moment, just a quick tip o’ the hat to the folks at Juice Analytics. Nicely done.

Introducing Chart Chooser – Juice Analytics
Chart Chooser

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Design, Web Interface Design

November 27, 2007, 1:57 pm

Two hot concepts: iPhone and periodic table. What could possibly go wrong?

By Mac McBurney

Two dazzling and totally irrelevant visual metaphors in one thoroughly annoying interface.

I loved the novelty of being a kiosk/iPhone and the creative, behind-the-glass point of view. Then I tried to get something done. 3M is a kind of hometown hero for me. I know some good people there and I want to like the company, so part of me wants this crime against usability to be intentional, logical somehow. QWERTY keyboards were designed to discourage excessive speed. Could 3M have any conceivable reason to discourage excessive understanding? Anyone… Hello? Say it ain’t so, Joe!

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Business, Usability, User Experience, Web Interface Design

September 23, 2007, 1:39 pm

Two Intriguing Flash Games

By Henry Woodbury

Over the last few weeks we’ve been distracted by two unexpectedly similar games, Gravity Pods and, at the opposite end of the attitude spectrum, PBS Kids Cyperchase Inventor’s Workshop (free registration required).

See the connection?

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Web Interface Design

August 23, 2007, 2:04 pm

Mood Music

By Lisa Agustin

Musicovery treeI’ve been having some fun with Musicovery, an interactive radio with a basic premise: What are you in the mood for? Users can zero in on what they like (single or multiple genres across a narrow or broad timeframe), but they can also use the remote control-like interface to select their mood within a matrix ranging from “Dark” to “Positive” and “Calm” to “Energetic.” The result of these intersecting parameters is a customized playlist presented in a interconnected web, where each song can be played or purchased unobtrusively through eBay, iTunes or Amazon. The site is intuitive for the most part, but the resulting music web needs some minor presentation tweaks: songs sometimes show up on top of each other, requiring the user to pick a hidden song in order to see its name; and the vertically-oriented webs are sometimes larger than the browser window, requiring some dragging. It would also be nice to see a complete browseable catalog of all the albums (although admittedly this might take away some of the serendipity of hearing something new.)

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Web Interface Design

August 20, 2007, 11:04 am

People Scroll

By Henry Woodbury

In a Boxes and Arrows article titled Blasting the Myth of the Fold, Milissa Tarquini runs through research that shows that browser users really do scroll down long pages. Here’s just one of her examples:

In [a report available on ClickTale.com], the researchers used their proprietary tracking software to measure the activity of 120,000 pages. Their research gives data on the vertical height of the page and the point to which a user scrolls. In the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the bottom, despite the height of the screen. Even the longest of web pages were scrolled to the bottom.

My question is this: If people scroll, do we need “back to top” links?

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Usability, User Experience, Web Interface Design

July 20, 2007, 10:37 am

IA and RIAs

By Lisa Agustin

Rich Internet Applications (RIAs) enable a user experience that’s more responsive and sophisticated than traditional HTML. But does crafting the RIA experience differ that much from architecting a traditional web site? Yes and no, says Adam Polansky in the latest ASIS&t Bulletin. Polansky, an information architect for an online travel company, was tasked with producing a trip planning application that had originally taken shape as an exciting proof-of-concept Flash demo, but which had not been scrutinized in terms of scalability, usability, or actual user needs.

Before moving forward, Polansky took a few steps back by employing traditional IA exercises such as wireframing (adapted to a more interactive experience) and usability testing to validate the direction and identify the holes. Besides pointing out the similarities and differences between building web sites and RIAs, he offers a good shortlist of pitfalls to avoid, including the potential for increased revision cycles and building interaction at the expense of content. I would tend to agree with him on both fronts. In our practice, we’ve found that constructing process flows and annotated wireframes are key to keeping everyone on the same page about the intended user experience and the possible trade-offs between vision and feasibility. These activities ease (if not eliminate) any worry of creating interaction for its own sake.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Information Architecture, User Experience, Web Interface Design

June 19, 2007, 10:56 am

IA and the Agile Approach

By Lisa Agustin

Earlier this month, Fastcompany.com plugged the agile development approach that was used to redesign its home page. The approach in a nutshell, according to blogger Ed Sussman: “Vision, release, test, iterate. Repeat. Quickly.Speaking metaphorically, think of design and development as a washing machine, not a waterfall. The organization initially planned to release the new design as part of a larger effort that encompassed new features and functionality. But in the end, they decided against it:

What if we had waited to get it all just right before we released FC Expert Bloggers? We’d still be in the dugout. We’d have been guessing instead of seeing what the market actually thinks. In an effort to make our product perfect, we probably would have been forced to spend loads of money fixing problems that might not have mattered to our readers.

The agile approach is one that certainly has its benefits — it’s flexible and means users get to see the latest features sooner, without waiting for an annual update. But in order to be successful, an agile approach still has to start with stakeholder and user requirements that are validated through an information architecture, design, and development process. Only then can an organization be sure its site’s “killer widgets” are truly meeting the needs of its audience.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Information Architecture, User Experience, Web Interface Design

May 10, 2007, 9:09 pm

Hyperbolic Views: Mapping the Blogosphere

By Mac McBurney

map of the blogosphereDiscover Magazine discusses a series of maps of the blogosphere created by Matthew Hurst.

Discussion of the pros and cons will have to wait for another day. Until then, here are two more hyperbolic tree visualization examples:

Interactive Tree View of the LexisNexis Directory of Online Sources
National Science Digital Library

Tell us what you think.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Books and Articles, Information Design, Technology, Visual Explanation, Web Interface Design

February 8, 2007, 11:28 am

CSS Sandbox

By Henry Woodbury

Smashing Magazine has a list of 53 CSS Techniques You Couldn’t Live Without.

Despite some dead links and the parody-inviting title, it’s a good resource. Most of the designers to whom the article links offer well-designed code; many provide thoughtful explanations of why you would even bother with it.

One example is the list of tricks to generate rounded corners with CSS. I’ve run across some of these in the past and been unimpressed. A CSS technique that requires javascript or a dagwood sandwich of nested tags makes me suspicious. Yet if you continue on to Greg Johnson’s Spiffy Corners site, you find a reasonably efficient sandwich with thoughtful reference to alternate approaches:

There are solutions for rounded corners using pure CSS. There are solutions that create anti-aliased corners. There are solutions that don’t require JavaScript. But to my knowledge, there has yet to be a pure CSS solution for rounded corners that does not require images or JavaScript.

Herein lies the value of the list. Most of Smashing‘s life-saving techniques are good only for spot use, but spending a little time with the code and commentary can give a web designer a lot of insight into how different CSS attributes interact.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Web Interface Design

January 3, 2007, 4:23 pm

Paper Cuts and System Interfaces

By Chris Jackson

Visual and performance artist Peter Calleson explores multiple layers of meaning in his papercut works to explore the complexities between 2D and 3D presentation. I’m drawn to the beauty and cleverness of the works, but I’m most intrigued by how these works exist between two opposites or, as Callesen puts it, between “image and reality.”

Peter Callesen's _Angel_ 2006 Detail from Peter Callesen's _Angel_ 2006

I can’t look at Callesen’s papercut works and not think about the intersection between systems and interfaces, how what’s beneath the surface influences what’s above (and vice versa). If you look at one side only, you miss the complexity of the whole. And that’s one of the great challenges in system design.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Design, Information Design, Web Interface Design

December 27, 2006, 12:39 pm

Wide Right

By Henry Woodbury

In the web coding world, “liquid” layout refers to the technique of setting column widths on a web page as percentages. This allows the interface to expand to fit the size of a user’s browser. Information Design Watch uses liquid layout.

The goal is to use all of the window real-estate possible for content while letting users retain control over presentation width. The problem with this goal is two-fold: First, users don’t necessarily want to resize their browsers as they link from one site to another. Second, with the increasing use of PDAs and wide-screen monitors, a liquid layout may be shrunk or expanded far out of the 800 to 1200 pixel range common to PC video-card configurations.

In this A List Apart article, Marc Van Den Dobbelsteen proposes an alternate solution: different style sheets for differently-sized screens. A simple JavaScript function detects the browser’s window width and loads a style sheet that resets the content layout appropriately. For example, a suite of three style sheets could be designed to handle very small windows (400px or less), a broad middle range (400 to 1024px), and very wide windows (1024 or greater).

This makes a lot of sense for Web sites known to have a PDA (or wide-screen) user base. However, like other stylesheet-switching techniques, implementation is the easy part. The challenges come before and after implementation — before, in increased design costs; and after, in the long-term maintenance of multiple stylesheets.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Web Interface Design

December 14, 2006, 3:04 pm

Google Wins Patent for Search Results Interface Design

By Lisa Agustin

Those wishing to emulate the Google search results interface may need to think twice: this week the company won a patent for “the ornamental design for a graphical user interface.”

Interestingly, the patent is specifically a “design” patent, which means it covers only the invention’s appearance, rather than a “utility” patent, which covers the functions an invention performs. From an information design perspective, this notion of patenting a “look and feel” begs the question: when is imitating a design a form of flattery and when is it infringement? It depends, according to Phillip Mann, a Seattle-based patent attorney interviewed by CNET:

Google’s competitors need not worry about falling prey to costly lawsuits yet. That’s because it’s typically not easy for patent holders to win suits against alleged infringers of their designs, Mann said. Generally, the legal standard is that the accused infringer would have to employ a design that is “substantially the same” as the patent holder’s.

While it’s easy to guess why Google pursued protection of its design approach, obtaining a patent seems counter to the notion of what the Web is about– sharing and refining ideas, code, etc..  It will be interesting to see what effect (if any) this new protection has–not just on search engine interfaces, but on approaches to interface design in general.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Current Events, Design, Web Interface Design

December 14, 2006, 1:31 pm

Stock Chart Interface Design

By Henry Woodbury

The Yahoo and Google Finance pages both sport neat Flash-driven stock chart applications, worthy of comparison. Both show daily (or hourly) highs for a particular indexes, equities and mutual funds, allow you to specify a date range via a drag interface, and provide a variety of preset viewing options.

Google Chart, Dow Jones Industrial Average

One big difference between the two is the amount of historical data. Yahoo lets you track the Dow Jones Industrial Average back to the 1920s, offering the choice of a logarithmic or linear scale. On Google, while some individual stocks may take you back to the 1970s, the Dow Jones data starts in 2001.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: Visual Explanation, Web Interface Design

November 29, 2006, 10:54 am

Away With the Mouse Click!

By Henry Woodbury

Here’s an example of some very impressive interface design work, if you accept the premise:

http://www.dontclick.it/

You know, I never worried about clicking that much.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (2) | Filed under: Usability, Web Interface Design

April 14, 2006, 9:13 am

New York Times Redesign

By d/D

The New York Times has redesigned its Web site with a new look and better integration of multimedia content with articles. One of the more interesting additions is a JavaScript-driven widget for tabbed viewing of classifieds and “most popular” articles. More importantly, from an information architecture point of view, are subtle improvements to overall site navigation:

We have expanded the page to take advantage of the larger monitors now used by the vast majority of our readers. We’ve improved the navigation throughout the site so that no matter what page you land on, you can easily dig deeper into other sections or use our multimedia.

http://www.nytimes.com/2006/04/02/business/02ednote.html

There are few off-key notes. Articles in the “Most Popular: Blogged” list don’t have trackbacks to actual blogs. Times Select still requires pay-per-view for most opinion columns. But the Times’ biggest worry should be too many people agreeing with media critic Jack Schafer:

“Hello, New York Times? I’d like to cancel my subscription today….I’m canceling because the redesign of your Web site, which you unveiled yesterday, bests the print edition by such a margin I’ve decided to pocket the annual $621.40 I currently spend on home delivery.”

http://www.slate.com/id/2139278

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Architecture, Web Interface Design

February 10, 2006, 9:58 am

Home Page Primer

By d/D

On A List Apart, designer Derek Powazek offers some guidelines for home page design. Along with good, concrete suggestions on home page form and function, Powazek leads off with an information architecture gem — create the home page last:

“When I set out to design a website, I do it backwards. I start with the design of the smallest, deepest element: the story page or search results. Then I work backwards to design their containers: section pages, indexes. Then, lastly, I work on the home page. I do this because each container needs to adequately set expectations for what it contains. If the home page says one thing, but the internal pages say another, that’s going to lead to a user-experience failure.”

Determining the nature of the deepest element in a site is vital for creating scalable sites with consistent branding and navigation systems that help users find something once, then find it again.

http://www.alistapart.com/articles/homepagegoals

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Architecture, Web Interface Design

January 13, 2006, 10:21 am

Style and Design Still Out of Sync

By d/D

Recently revised, Jeffrey Zeldman’s classic essay on the difference between style and design still rings true:

“Many young web designers … mistake Style for Design, when the two things are not the same at all. Design communicates on every level. It tells you where you are, cues you to what you can do, and facilitates the doing. Style is tautological; it communicates stylishness.”

The consequence, Zeldman points out, is that experimental Web sites often have little application to the improvement of Web usability:

“[A]fter ten-plus years of commercial web development, [Internet users] still have a tough time finding what they’re looking for, and they still wonder why it’s so damned unpleasant to read text on the web — which is what most of them do when they’re online.”

http://www.adobe.com/motiondesign/MDC_Dialog_Box.html?u%5FsLang=en&u%5FnTextSize=14&u%5FsFontType=sans&u%5FsContent=Style%5FVersus%5FDesign (requires Flash Player 8)

If you can’t see the Flash version above, you can read a PDF here:

http://www.adobe.com/motiondesign/content/en/Dialog_Box/Style_Versus_Design/Style_Versus_Design.pdf

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Visual Explanation, Web Interface Design

January 13, 2006, 10:19 am

Is My News Hot or Not?

By d/D

Many CNET pages offer an option to see a list of their most popular stories in either a “headline” or “graphic” display. For example:

http://news.com.com/2001-11386_3-0.html?tag=ne.tab.hd (scroll down a page and look to the right)

For a mini-usability study, click between the “View As” radio buttons just below the “What’s Hot” headline and consider each format. Our take? The graphic display takes up an enormous amount of space for not much purpose. While it emphasizes the relative popularity of different stories, it is hard to quickly skim through the list. Maybe the second or third story is the one you would actually want to read.

In addition, since the stories are still placed according to convention — first at top-left, last at bottom-right — there seems little reason to use a box instead of a single column. But maybe your take is different.

Once you get to an article, CNET adds some additional options in the “What’s Hot” area that are interesting in comparison.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Web Interface Design

November 10, 2005, 10:47 am

Browser Compatibility Smack Down

By d/D

The Web Standards Project has put together a one-page rendering that tests browser support for a variety of HTML and CSS standards, PNG transparency and Data URLs.
Here’s the test:

http://webstandards.org/act/acid2/test.html

Here’s the explanation:

http://webstandards.org/act/acid2/guide.html

This focus on standards is admirable. While we code our designs with a less extensive, but very stable set of standards, there are a number of CSS standards that, if implemented on Internet Explorer (to be specific), would streamline almost any coding project.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Web Interface Design

October 19, 2005, 12:27 pm

Gap Tries to Solve the “Too Many Clicks” Problem

By d/D

Gap, Inc., has relaunched its Web sites (Gap.com, BananaRepublic.com, and OldNavy.com) with a completely new, internally-built e-commerce system. Making extensive use of dynamic HTML, the new system is intended to help customers choose shirts, pants, and other items of apparel in a direct, intuitive way:

“Toby Lenk, president of Gap Inc. Direct, the company’s corporate catalog and online division, said the mouse-overs and pop-up windows eliminated the need to bounce the shopper off her browsing path each time she needed information.

“‘A lot of this was borrowing metaphors from the store experience,’ Mr. Lenk said. ‘When a woman walks into one of our stores, she can process things really quickly. Like when she’s browsing the racks, she takes a quick look at what the sizes and colors are, picks up something and keeps going. We’re trying to let her stay with the fashion.’”

http://www.nytimes.com/2005/09/12/technology/12ecom.html (free registration required)

Frankly, Gap’s new system was neither smooth nor fast when we tried it out. The DHTML shortcuts occasionally failed to respond, and the interactivity lauded in the New York Times article turns the interface into a rollover minefield.

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Web Interface Design

September 19, 2005, 12:25 pm

Shop or Study: Yahoo Gives You the Choice

By d/D

The Mindset Yahoo search (beta) adds a simple way to filter search results. Once you run a search, an interactive “slider” allows you to focus results more on “shopping” or “researching”. This binary choice actually turns out to be quite effective at sorting typical results. It does raise the interesting question about whether other such pairs of opposites could be as useful in particular contexts.

http://mindset.research.yahoo.com/

For a completely different use of dynamic sliders, see Amazon.com’s Diamond Search. The fact that diamonds are graded by very specific qualities results in an excellent example of a faceted search:

http://www.amazon.com/gp/gsl/search/finder/002-0801571-1062420?productGroupID=loose%5fdiamonds

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Architecture, Web Interface Design

August 11, 2005, 12:38 pm

Measuring Google Maps

By d/D

One “remix” that didn’t make the BusinessWeek Online article mentioned here is a cool Google Maps Pedometer that allows you to overlay points on a Google Map and see the distance they mark. Developer Paul Degnan explains his inspiration for the idea:

“As a runner training for a marathon for the first time, I found myself wishing I had an easy way to know the exact distance a certain course is, without having to drag a GPS or pedometer around on my runs. Looking at Google Maps, and knowing there was a vibrant community of geeks hacking it, I knew there had to be a way. So here it is.”

http://www.sueandpaul.com/gmapPedometer/

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Maps, Web Interface Design

August 11, 2005, 12:36 pm

Web Site Remixes

By d/D

A number of major Internet vendors and search engines have made their data and services available to outside programmers. As a result, innovative developers have begun creating new Web applications by adding customized functionality to data derived from one, or more other Web sites. BusinessWeek Online presents a “slide show” of such sites as a (metaphorical) hip-hop soundtrack:

“…hip-hop culture’s mash-ups … combine two tunes to produce an entirely new song. Likewise, hackers are combining the data and features of two or more Web sites, creating entirely new, independent Web mash-ups…”

http://images.businessweek.com/ss/05/07/mashups/index_01.htm

Page through the slide show using the links in the top right corner of the page (they are not immediately obvious).

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Web Interface Design

July 11, 2005, 12:44 pm

Just Like Google, Right? Right.

By d/D

According to Jakob Nielsen, Internet users have developed pretty firm ideas about what “Search” is and how it works:

“In our experience, when users see a fat ‘Search’ button, they’re likely to frantically look for ‘the box where I type my words.’ The mental model is so strong that the label ‘Search’ equals keyword searching, not other types of search.”

What this means is that alternate search methodologies (parametric searches, for example) need to be presented within a strong supporting context, including, perhaps, the complete avoidance of the word “Search.”

http://www.useit.com/alertbox/20050509.html

An earlier article by Nielsen on search usability reinforces his current findings (and is worth reading in full for other guidelines):

“Users often move fast and furiously when they’re looking for search. As we’ve seen in recent studies, they typically scan the home page looking for ‘the little box where I can type’.”

http://www.useit.com/alertbox/20010513.html

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Architecture, Web Interface Design

May 11, 2005, 1:24 pm

Search Results in Groups and Folders

By d/D

Several new search engines are experimenting with ways to group search results into categories. Two competing approaches are Vivisimo’s Clusty, a site that sorts results into “Windows”-like folders, and Groxis, Inc.’s Grokker, a technology the turns results into a visual map. The Vivisimo crowd is not impressed:

“‘A lot of these fancier visualization systems look appealing,’ said Oren Etzioni, a University of Washington computer scientist, who is an adviser to the Web search engine company Vivisimo, ‘but they are pretty confusing. Even for expert users they don’t enhance productivity’”

For generic Web searches, Etzioni is probably right. However, for search analysis, Grokker may be quite useful. Its filters allow a map to be changed on the fly, by keyword, date, or even the ranking of results by the Yahoo! search engine feed that drives it (click “Show Tools at the bottom of a Grokker results page to see these options).

http://www.nytimes.com/2005/05/09/technology/09yahoo.html (free registration required)

http://www.grokker.com/

http://clusty.com/

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Visual Explanation, Web Interface Design

January 12, 2005, 2:15 pm

What Users Do Not Use

By d/D

Many usability studies show that Internet users are goal oriented. They move forward into a site by looking for whatever link seems pertinent and reverse course as necessary by ruthlessly using the “back” button. In an article on the GUUUI Web site, interaction designer Henrik Olsen compiles the evidence for this behavior and spells out what it means for Web site design:

“In [usability expert] Mark Hurst’s opinion designers put too much effort into content organisation and design of navigation systems. Organising a site into sections and subsections does not by itself create a good user experience. What matters is whether users can quickly and easily advance to the next step in the pursuit for their goal.”

http://www.guuui.com/issues/01_05.php

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Usability, User Experience, Web Interface Design

September 16, 2004, 3:29 pm

Skimming or Skipping? How People Read Online

By d/D

Poynter Institute has posted the results of “Eyetrack III,” a study on how people look at news online. While the study is “wide, not deep,” it contains many interesting points that could contribute to the analysis of any content-based Web site. For example:

“Photographs, contrary to what you might expect (and contrary to findings of 1990 Poynter eyetracking research on print newspapers), aren’t typically the entry point to a homepage. Text rules on the PC screen — both in order viewed and in overall time spent looking at it.”

http://www.poynterextra.org/eyetrack2004/main.htm

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Architecture, Usability, Web Interface Design

July 9, 2004, 4:42 am

Interaction Design for the Internet

By d/D

According to designer Philip van Allen, the Internet could and should be far more interactive. Users need new tools to act as producers of meaning, rather than a passive consumers of information. The goal is what van Allen calls “productive interaction”:

“In contrast to traditional media, productive interaction’s strength is facilitating and provoking the dialog. It enables juxtaposition, and supports the remixing of the actual content.

“Productive interaction gives the reader a pair of scissors and permission to cut up the book.”

Beyond an examination of data structures, increased collaboration between designers and software programmers, and the rethinking of authoring systems, van Allen calls for a broad commitment to experimentation:

“Interaction designers should devote part of their practice to breaking the common constraints; designing for very large displays, moving away from the ‘mouse crouch,’ incorporating tangible interfaces, and experimenting with new delivery systems.”

http://ojr.org/ojr/technology/1088538463.php

A detailed research paper and demo are available from van Allen’s Web site:

http://productiveinteraction.com/

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Technology, Web Interface Design

June 17, 2004, 3:54 pm

The View from Pew

By d/D

The Pew Internet and American Life Project has redesigned its Web site, making it easier to browse its survey results, charts and tables. A good starting point is the site’s “Reports” page which presents an interesting cross-section of research on Internet demographics, online activies, technology, and other topics.

http://www.pewinternet.org/reports.asp

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Implementation, Web Interface Design

June 17, 2004, 9:53 am

What is Web Credibility?

By d/D

Web site information architecture methodologies are generally focused on usability — on how users can best find the information they seek. A related issue of significant importance to businesses and content creators is how users determine the credibility of the information they find.

A landmark study in this field is Stanford Persuasive Technology Lab’s 2002 report for ConsumerWebWatch, How Do People Evaluate a Web Site’s Credibility? Results from a Large Study. This report points out many parallels between Web usability and Web credibility, with an unexpectedly strong plug for visual design:

“the average consumer paid far more attention to the superficial aspects of a site, such as visual cues, than to its content. For example, nearly half of all consumers (or 46.1%) in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes.”

What was the next most important factor? Information Design and Structure. The authors suggest:

“One might speculate that by providing a clear information structure, a Web design team demonstrates expertise to the users. Users may then assume this expertise extends to the quality of information on the site.”

http://www.consumerwebwatch.org/dynamic/web-credibility-reports-evaluate-abstract.cfm

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Information Architecture, User Experience, Web Interface Design

May 10, 2004, 3:55 pm

Web Accessibility Resources

By d/D

Two important sets of Web Accessibility guidelines are the U.S. Government’s Section 508 standards and the W3C’s Web Accessibility Initiative, whose priority-based “Checkpoints” are probably the most commonly used accessibility standard:

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web

http://www.w3.org/TR/WCAG10/full-checklist.html

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Web Interface Design

February 9, 2004, 9:33 am

Need Fake Latin?

By d/D

Dave Cantrell at the 4GuysFromRolla Web site has a program that generates “fake Latin” text:

http://www.4guysfromrolla.com/demos/latin.asp

Why use fake Latin, or “greeking,” as it often called? We occasionally use it in design samples to show how a page looks without distracting reviewers with sample content that is inherently incomplete or out of date.

Usability expert Jakob Nielsen describes a testing methodology that leverages such unreadable copy:

“When they can’t read the text, users have to rely on the inherent communicative aspects of the layout to perform the test task. If a layout performs well when users can’t understand any of the content, then there is hope that the template will survive substantial abuse from authors who fill it with content of varying quality.

http://www.useit.com/alertbox/980517.html

  • Facebook
  • Twitter
  • del.icio.us
  • StumbleUpon

Comments (0) | Filed under: Usability, Web Interface Design