Information Design Principles For Web 2.0 Design: Simple & Social

Sponsored Links

Designing for the web today requires leveraging sound and well-tested information-design principles while increasing the amount of interaction and "social" components offered to your readers.

Don't Make Me Think book cover remixed by Robin Good - Book photo credit: Steve Krug - Amazon

The Web wave 2.0 has seemingly brought significant design innovation in the form of rounded corners, pastel colors, 3D embossed shiny buttons, floor reflections and large text captions and many a designer have rapidly adopted and made theirs this new simpler, more visually impactful and highly legible 2.0 style.

But what separates cute 2.0 cosmetics from true design innovation, is the ability of information architects and web designers to skillfully orchestrate the multiple forms of interaction and engagement that Web 2.0 services and technologies have come to offer: Multi-dimensional navigation, social bookmarking, community search, readers recommendations and comments, user generated content and contributions, video and chat components, grassroots news... you name it.

It is in this direction that information designers could look next: moving beyond the basic visual organization of content elements and into the realm of social simplicity where the elements information reading, contributing and exchanging are coreographed in ways to make them mutually supprtive and synergistic.

Intro by Robin Good

Information Design for the New Web

by Ellyssa Kroski

Information design for the Web has changed.

People are changing the way that they consume online information, as well as their expectations about its delivery. The social nature of the Web brings with it an expectation of interaction with information and modern Web design is reflecting that.

There are now alternate forms of navigation including the ability to browse by user, tag clouds, tabbed navigation etc. Advances in technology along with these shifts in user expectations are affecting the way that information is laid out on a web page.

Today's websites are aiming for intuitive and usable interfaces which are continuously evolving in response to user needs. Website designers are approaching information design differently and designing simple, interactive websites which incorporate advancements in Web interface design, current Web philosophies, and user needs.

Information design for the New Web is simple, it is social, and it embraces alternate forms of navigation.

Simplicity

Simplicity of Web Applications

In his Paradox of Choice, Barry Schwarz talks about the tyranny of small decisions and about how the proliferation of choices in our society necessitate that we invest significant time, anxiety, doubt and dread to trivial matters.

He asks why it takes an entire day to shop for a pair of jeans nowadays?

And he makes the point that this choice overload can not only cause frustration, but turn us from choosers who make careful decisions into pickers who must just grab onto this or that as a whirlwind of choices speeds past us. Every one of us has experienced this feeling with both the Web and with other computer applications, as well as in everyday life.

The design of today's Web applications is being led by a principle of simplicity.

Application authors are creating software that has less features and a lower learning curve for end users. The functionality which is included is that which is necessary, nothing more. Social networking websites include functionality such as user profiles which are essential - they do not include weather and stock quotes as well.

The days of applications which are overly laden with features is passing. Today's software programs are empowering to users because they don't need a manual to use them, they are simple and intuitive. There is no software to install, and with many the commitment of user registration is not necessary to test drive the functionality. It is a DIY service model which outfits people with the tools that they need to succeed and nothing else.

This less is more philosophy can be seen in today's productivity tools such as Google Docs and Spreadsheets (formerly Writely), and 37 Signals' Writeboards in addition to a slew of other Web applications. New vertical search engines such as Healia search only one sector of the Web, becoming semantically superior within that niche area, while applications such as social bookmarking, photo sharing, and video sharing tools strive for excellence in providing focused services to end-users. These new websites are guided by a singularity of purpose and simplicity in functionality.

Simplicity of Design

This new trend of simplicity of web application functionality is mirrored in the design and style of today's webpages. While we used to try and cram in as much information as possible onto our webpages, and preferably "above the fold", today's website designers are endeavoring to eliminate the unnecessary while presenting a clean and simple interface for visitors. They are attempting to engage the attention of Web users by drawing their eye to what is important, rather than trying to provide them with everything under the sun.

Many of the New Web design changes have been influenced by the stylistic tendencies of Apple and the Mac OSX interface. A modern lexicon of design has developed for the Web which has established itself as design with a purpose, not just design for its own sake.

• Centered Design - Since we aren't so concerned about crowding the page with all but the kitchen sink, we are able to present our information in a clean and self-assured centered orientation. This design choice is a practical one as well because it is much more compatible with various screen sizes and resolutions.





• Rounded Edges - The current trend is to round out corners, even on fonts - not presenting anything sharp or severe. It is reflective of the informal attitude and casual tone of today's Web.





• San Serif and Lower Case Fonts - In harmony with the casual tone of the New Web, and the tendency to round corners, there are a lot of san serif fonts found on today's new websites. Similarly, lower case fonts are utilized, especially in the logo to convey a comfortable, casual rapport with the user.





• Large Fonts - These are often used by New Web sites to point out key concepts to users, or to boldly convey a simple, clear message about the website's main purpose or "elevator pitch".





• Simple Persistent Navigation - The navigation on New Web pages is distinct and obvious, it is set apart from the busy-ness of the content and body of the page. Oftentimes it is found running across the top of the page. It is persistent meaning that it appears on each page throughout the website.





• Bold Logos - New Web applications are bold and confident and so are the company logos which represent their brands.





• Strong Colors - These are used by today's websites to emphasize important concepts as well as for creating distinction between areas of a page.





• Complementary Colors - Modern websites tend not to be monochromatic, but rich in color. Many new webpages are utilizing complementary colors such as blues and oranges, and yellows and purples to enrich their design.





• Subtle 3D - You won't find garish 3D effects or optical illusions on today's new websites, but instead a subtle use of drop shadows, gradients, and mirrored surfaces that add a realistic edge to the interface.





• Reflective Surfaces - This trend of creating the effect of a reflective, or mirrored surface may be found on many new websites, oftentimes surrounding a logo.





• Simple Icons - Because of the genuine nature of New Web applications, there is very little if any stock photography to be found. In the place of these marketing images with happy business people shaking hands, are original icons representing actions which can be taken by the user.





• Whitespace - Website designers are keeping a simple and Zen-like layout by increasing line heights and adding lots of whitespace to pages. Instead of crowding the page with information overload, New Web designers are focusing on the essentials, and producing clean and fresh pages.





• Starbursts - These exciting, exploding shapes are very in vogue on today's websites. They can be found all over the Web, and are most often utilized to promote and highlight a free service.

Advances in User Interfaces

In addition to design styles, there have been several recent advances in user interface design which have made the Web a simpler place to be.

AJAX - is an evolution in Web interface design which allows information to be processed without reloading the page. This advancement has brought with it several new capabilities in webpage design.

Large Tabs - Since toggling between tabs is now possible without completely reloading the entire page, Web designers are making good use of them.

Drag & Drop - The drag and drop functionality which AJAX makes possible enables designers to create rich, interactive experiences for website visitors. Many of today's personal start page applications utilize this functionality, allowing users to drag desired widgets and gadgets into their customized space.

AutoComplete - Filling out forms has never been so easy since the AJAX AutoComplete feature with which website authors can specify suggestions to appear as the visitor types a response.

Maps - Just a few years ago it was ridiculous to think that you could combine any set of information with a map of the world and allow your website visitors to zoom into street level and even get a satellite photo of the area. But mapping capabilities are becoming a commonplace and integral part of the user experience today. And they are something that users are coming to expect.

WYSIWYG- It is no longer necessary to know HTML code to create content online. Blogs, wikis, content management systems, and other web-based applications are providing "What You See Is What You Get" editors which imitate a Word-like interface for content authoring.

Previews - Webpage visitors no longer need to make the commitment of clicking through to another website before knowing exactly what they'll see there. Through applications such as Snap, it is possible to provide users with webpage previews for all the links on a page.

Social

There are at least two trends emerging in the design of today's websites, and increasingly there is crossover between the two.

The Socialization of Media and Applications

There has emerged on the Web a trend towards socializing things which are not inherently social such as books, photos, videos, and text such as news articles, papers, and posts. This inclination extends to Web applications such as collaborative project management programs including as Basecamp, document sharing applications such as Google-Docs & Spreadsheets, and many others. With these changes comes an added expectation among users who now assume that they will be able to interact with the information that they discover on the Web. These new trends and expectations require that today's website interfaces include a baseline of social functionality

Commenting - Website visitors are no longer passive readers, but active ones who want to join the conversation and add in their two cents.

Rating & Reviewing - Rating items and authoring reviews are capabilities which are quickly becoming requisites for websites with products and media.

Send to a Friend - Savvy website designers let their members do their marketing for them by providing them with the tools to send articles, videos, photos, and products to their friends.

Share - Today's Web user is a collaborative one who expects Web applications, documents, calendars and other content creation tools to be shareable with a team.

Subscribe - When website visitors discover a column, article, blog post, video, or person they are interested in, they expect to be able to subscribe to the source on the spot.

Save - Multitasking Web users expect to be able to bookmark articles to read later, favorite entertaining videos, and save other Web content to their own bookmarking service with a click.

Websites can no longer be islands - visitors want bridges elsewhere. It's not enough to provide enticing, quality content and provide no connection to the global community that is now the Web.

What are Others Saying? - When readers find an interesting news item on a website, they want to know what others are saying about the topic. This is possible through services such as SphereIt and others.

Sharing Discoveries - When visitors unearth choice news stories, top ten lists, or controversial blog postings, they want to be able to share their discoveries with the world, and be credited for them on social news websites such as digg.

Creating New - There are thousands of mashups on the Web today because tech-savvy users want to remix unique websites through their APIs or RSSfeeds.

The design of these basic social tools needs to be simple, easily accessible, and exposed. It's not enough that users know that they can go to del.icio.us to bookmark an article or blog post, readers are expecting a link right there at the base of the entry. It shouldn't be necessary for users to click through to view the comments following an article. To be effective, tools need to be close at hand.

Social for Social's Sake

In addition to websites which socialize media and applications, there are websites which are social for social's sake. These websites are all about connecting people and building community. They are the social networking websites such as the MySpace, Gather, Facebook, and Ning networks. The primary component on these sites is the user profile around which both the navigation and activity revolves. This type of website interface also requires a baseline of social functionality.

User Profiles - The main ingredient in any social networking website is the user profile which can be tailored to match a user's personality.

Friends Lists - What's the point of joining a social community if you can't make friends? The friends list enables people to create their own network of social connections and display them to the world.

Comments - These remarks are left for users by users. They are the casual "chatter", the friendly "writing on the wall", and the "shout outs" that are left on a person's profile page.

Communication - An integral part of any social network is a means with which to communicate with other members be it an internal messaging system, email, IM, or live talk.

Subscribe - Just as with social media websites, members of social networking communities expect to find the tools which will let them subscribe to members who they find interesting.

Groups - These sub-communities within a social ecosystem enable members to associate with a focused group of people who share a similar interest, profession, or defining characteristic.

Tools for Personal Expression - Popular social networking websites provide their members with tools to create content such as personal journals and blogs, as well as the ability to upload media and other items like photos, slideshows, videos, and widgets of all types.

Not unlike social media websites, the design of these community tools must be easy for members to use, close at hand, and obvious.

Alternate Navigation

Today's website designers are embracing alternate pathways to information. It used to be that visitors landed on a website and navigated around it by how the creator thought that they should see the world. Now websites are offering alternate and organic ways to navigate content which they hope will be more effective. Many of these new ways to navigate involve providing visitors with tools for discovery while others present a visual representation of what is important, offering multi-tasking, time-starved visitors an instant digest of information.

By User - It's not enough just to find information any longer, people want to explore each other and find like minded individuals. This type of navigation is natural on social networking websites where the primary purpose is to connect with other members.

The Tag Cloud - This is a complementary taxonomy to the controlled vocabulary created by website designers, one which is organic to the user community. There are no instructions required with this intuitive tool which is obviously clickable and oftentimes san serif.

The Top - Including such lists as the most popular, most searched, most recent, top commented, top voted, and top emailed, this feature provides a scannable summary of what's important in a community at any given time. There is still room here for editors to list their own featured items alongside these community lists.

The Zeitgeist - This is a container for all of the top and most lists as well as the tag clouds, providing a glimpse into the culture and personality of a particular website community.

Related Information - Not all pathways to information need to lead to content within the same website. Navigating now involves weaving in and out and around websites and data sources to provide visitors with relevant content. SphereIt as well as custom tools can provide this functionality.

Heat Maps - Websites such as CrazyEgg and Summize are using heat maps as visual tools to help users navigate and digest information.

Relationship Maps - Digg Labs is experimenting with innovative, interactive, visual representations of information with its Swarm, Stack, and BigSpy applications.

Time Tools - On today's websites, visitors may even travel back in time and navigate information temporally.

Maps - Overlaying information on a map, especially with the availability of Google and Yahoo! maps is a commonplace capability of new websites as a form of navigating information. It is particularly crucial for e-commerce sites with brick-and-mortar locations.

Widgets - Gadgets are another way users are navigating information. They are aggregating custom data in one place, and navigating it from there. Websites are no longer simply text displays, but are applications containing other applications.

Mashups - Web users are creating their own ways of navigating information by remixing content from different services to create new applications.

Principles of Information Design for the New Web

• Keep it Simple - Include only necessary functionality and provide a clean efficient design.
• Make it Social - Meet users expectations by enabling connections through social tools.
• Offer Alternate Navigation - Reflect the Zeitgeist of the website community and embrace alternate pathways to information including utilizing visual tools.

New Web Philosophies

• Evolve - Today's Website creators aren't afraid to try new things. There is no right answer and everything doesn't need to be figured out at the outset.
• Be Nimble - Respond to advances in technology and changes in market needs. Be willing to abandon bad ideas
• Be Open - Issue and API and design badges and widgets for your users - or they will design them for you.

References

• 37 Signals. Getting Real, 37 Signals LLC, 2006.
• Hunt, Ben. "Current Web Style". Web Design from Scratch.
• Hunt, Ben. "Web 2.0 Design Style Guide". Web Design from Scratch.
• Krug, Steve. Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders, 2005.
• Nicol, Jonathan. The visual design of Web 2.0. Pixel Acres.
• Schwartz, Barry. The Paradox of Choice: Why More is Less, HarperCollins Publishers, 2005.

Original article by Ellyssa Kroski first published on April 2nd, 2007 as "Information Design for the New Web" on InfoTangle.

About the author

Ellyssa Kroski is a Reference Librarian for Columbia University as well as an independent Information Consultant. She has been working with Information and Internet technologies for over 10 years and offers services in technology training, content development, writing, speaking, and strategic assessment of Web technologies and libraries.

She teaches professional development seminars at a library consortium in New York City, and is a member of an international library honor society, and holds an MLIS from Long Island University. She has been published in the field of library science and she speaks at events and national conferences. She is currently writing a book for Neal-Schuman Publishers about Web 2.0 technology and libraries.

InfoTangle is a place where she can publish her writings about her interests; emerging technologies, Web 2.0, information, and libraries.

Ellyssa Kroski -
Reference: InfoTangle [ Read more ]