Zebra Striping: More Data for the Case

I recently conducted a study into the helpfulness (or lack thereof) of zebra striping—the shading of alternate rows in a table or form. The study measured performance as users completed a series of tasks and found no statistically significant improvement in accuracy—and very little statistically significant improvement in speed when zebra stripes were implemented.

Enders, Jessica. List Apart, A (2008). Articles>Web Design>Human Computer Interaction>User Interface

Premium Rate Culture: The New Business of Mobile Interactivity    

This article considers a neglected but crucial aspect of the new business of mobile interactivity: the premium rate data services industry. It provides an international anatomy of this industry model and the ways in which it has been used to capitalize upon the surprising success of short message service (SMS) to provide a basis for the development of consumer markets for mobile data services. It situates this analysis within a wider consideration of the role of premium rate culture in the social shaping of interactivity in convergent media. Specifically, it looks at how premium rate services are being constructed in relation to telecommunications, television and the internet. The article concludes that although premium rate culture has rejuvenated innovation in broadcast television, potentially it may constrain the interactive potential of the mobile internet.

Goggin, Gerard and Christina Spurgeon. New Media and Society (2007). Articles>Business Communication>Wireless Web>Interaction Design

jQuery-Based Popout Ad: Part 1

Today I’d like to start an article series of three parts, the result of which will be a popout-style, jQuery-based box like the one pictured above, which I think strikes a nice balance on the obtrusion-scale.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>Ajax

jQuery-Based Popout Ad: Part 2

We're going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We’ll be using jQuery for most of what we do, so you’ll need to include the jQuery library script at the top of your document for this to work (see the source of the example page to see how this is done).

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>Ajax

Generating Automatic Website Footnotes with jQuery

Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way. Today, I’m happy to announce that I’ve come up with a better solution to web footnotes using the jQuery JavaScript framework and a few tags and attributes that already exist in XHTML.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>Ajax

Show/Hide Content with CSS and JavaScript

Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>CSS

The Dilemma of Comments

Abuse has made me seriously consider – several times – disabling comments. I’m ambivalent about it. On the one hand it would make writing and publishing much easier. Write something, proofread it, publish.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Community Building>Interaction Design

Parse JSON with jQuery and JavaScript

While exploring the options for traversing JSON, I discovered that there is no official W3C documentation, or even a draft. As a subset of the ECMAScript language specification, it will probably remain under the governance of ECMA International. So unlike XPath, which is a commonly accepted language for traversing XML, JSON must rely on JavaScript’s object notation.

Reindel, Brian. d'bug (2008). Articles>Web Design>Interaction Design>Ajax

Creating Modular Interactive User Interfaces with JavaScript

Discover a technique that lets you move sections of a Web page using drag-and-drop functions. Different aspects of the interactivity are implemented separately and then composed into a unified whole, allowing for flexible customization that can make your Web users very happy.

Travis, Greg. IBM (2008). Articles>Web Design>Interaction Design>JavaScript

Web 2.0: A Very Short Introduction

A profound change is happening on the cutting-edge of web development: we are relinquishing control of information. No longer are sites working independently from each other; no longer is information sitting in isolation with no interaction between sites. Rather, the best web programmers are now creating sites that allow information to be reused anywhere.

Mercurytide (2005). Articles>Web Design>Interaction Design>Social Networking

Design Decisions vs. Audience Considerations

Deep down below the layers of interface, CSS, HTML, and XML—down where only the geekiest among us roam—everything comes down to this: it’s all zeroes and ones. On or off. The digital switch Though interaction and conversion becomes a bit more complicated at the point the interface meets the visitor, though there are a few more shades of gray, in the end it comes down to the same thing: yes or no.

Ragle-Davis, Robin. Digital Web Magazine (2008). Articles>Web Design>Interaction Design>Audience Analysis

jQuery for Designers

Learn how easy it is to apply web interaction using jQuery.

Sharp, Remy. jQuery for Designers. Resources>Web Design>Interaction Design>Ajax

Image Fade Revisited

This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here.

Sharp, Remy. jQuery for Designers (2008). Articles>Web Design>Interaction Design>Ajax

The Document Triangle

Every paper and digital document shares three basic dimensions: structure, information and presentation. Although these dimensions are always interwoven, some people in the digital world mostly focus on document structures (e.g. information architects), some on the information they contain (e.g. marketers and writers/editors) while others specialise in the (interactive) presentation aspects (e.g. visual designers and Flash developers). The mutual dependence and interaction of these dimensions is the next level of design and does not regularly get the proper attention. In order to better understand the relationship between these dimensions, we need to look at each of them seperately, and how they inter-relate.

Bogaards, Peter J. BogieLand (2003). Articles>Web Design>Interaction Design

Web 2.0: Mistaking the Forest for the Trees?

Think of Web 2.0 as more of a concept than a person, place or thing and you'll find firmer ground. Even better, spend some quality time with O'Reilly's lengthy essay. Finally, keep in mind that the lion's share of Web 2.0 discussion is from a technological perspective; it hasn't yet filtered down to the information architecture, interaction design and similar discussion lists.

Rogers, Dave. GotoMedia (2006). Articles>Web Design>User Experience>Interaction Design

Toward 2^W, Beyond Web 2.0  

From its inception as a global hypertext system, the Web has evolved into a universal platform for deploying loosely coupled distributed applications. As we move toward the next-generation Web platform, the bulk of user data and applications will reside in the network cloud. Ubiquitous access results from interaction delivered as Web pages augmented by JavaScript to create highly reactive user interfaces. This point in the evolution of the Web is often called Web 2.0. In predicting what comes after Web 2.0--what I call 2^W, a Web that encompasses all Web-addressable information--I go back to the architectural foundations of the Web, analyze the move to Web 2.0, and look forward to what might follow.

Raman, T.V. Communications of the ACM (2009). Articles>Web Design>Interaction Design

Siete Impresionantes Sistemas de Navegación en jQuery

Ayer os presentaba dos excelentes galerías de proyectos desarrollados en jQuery. Hoy, para no ser menos, vamos a seguir hablando de jQuery. Lo que ahora os presento es una recopilación de 7 sistemas de navegación que nos os dejarán indiferentes.

Costales, David. davidcostales.com (2009). (Spanish) Articles>Web Design>Interaction Design>JavaScript

Introduction to jQuery 

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Coyier, Chris. CSS Tricks (2008). Articles>Web Design>Interaction Design>Screen Captures

Intro to jQuery 2 

Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too!

Coyier, Chris. CSS Tricks (2008). Articles>Web Design>Interaction Design>Screencasts

jQuery Part 3 – Image Title Plugin 

This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable.

Coyier, Chris. CSS Tricks (2009). Articles>Web Design>Interaction Design>Screencasts

A Social Interaction Design Primer 

User experience matters in social media are more complicated than in non-social software. For example, the conventional user-centric view starts with user needs and goals. In social media these are not necessarily rational and objective. They can be much more psychological, and social, for example. Furthermore, the interactions that users have are not just with the software application -- they are with other users (through the software). The UI is not an interface to discrete actions and transactions (such as your online banking site); it is a social interface, and through it users feel like they are interacting with friends and audiences.

Chan, Adrian. Gravity7 (2008). Articles>Web Design>Interaction Design>Social Networking