11 Parallels Between Architecture and Interface Design

I had a fascinating discussion with my sister-in-law, a real-life professional Architect, about the parallels between her work and the type of interface design we do at Juice. In both cases, design requires looking at the problem from many perspectives, blending art and science, creativity and time-tested principles. Sure, she had to go to graduate school for three years and is part of a rigorous apprenticeship system. But when you consider the ways we approach and solve problems, there are a number of common threads:

1. Start with the context. For Architects, a project begins with a site analysis to evaluate the available space, direction of the sun and wind, characteristics of surrounding buildings, street patterns and other environmental factors that need to co-exist with the building. The parallel in interface design is considering the context of users: What is their typical workflow? What other data and reporting are they working with? What decisions will be made from viewing the data? What is their skill level?

2. Decipher client needs The ultimate job of the architect and interface designer is to translate vague but strongly-held desires of the client into a practical reality. There are straightforward functional requirements: “I need a house with three bedrooms upstairs.” And there are more subtle demands: “The application needs to be simple enough for anyone to use.”

3. Evolved toward reality. It wasn’t hard to find parallels in the ways that we approach the process of designing. Like interface design, the architectural design process evolves from the most abstract (blocks of wood) to more realistic representations (drawings and models). The more realistic the format, the more time intensive and the more clearly the concept and details can be communicated. At Juice, we are particularly fond of prototyping analytical applications because it gives our clients an opportunity to engage with the interface and data directly.

4. Build a narrative. Like any piece of art, a building needs a core story that characterizes its essential qualities. In our interface designs, we call these design principles. These are the basic truths that we want to permeate the application. Here’s an example of design principles for a reporting application design:

   a) You’re one click away from what you need; b) Allow lightweight, temporary ways of paying attention to something; c) Alerts are so important that they are always visible

5. Connected whole. I shared with my sister-in-law a description of how many dashboard vendors are essentially selling functional pieces without offering guidance on how they fit together. She remarked: “if you designed a building that way, you’d end up entering into the bathroom.” I’ve seen dashboards that feel about like that. Architecture has had many decades to recognize the primacy of the cohesive whole. Interface design, particularly when it comes to the presentation of data, hasn’t come nearly so far.

6. Multiple relationships. Designing a building requires thinking about the problem from many different perspectives, and ensuring that the answers work together. Architects need to consider how functional spaces relate to each, how the spaces flow together, and how the spaces relate to the site. Interface design requires thinking about how the presentation of information links together, how users navigate between this information, and how the results fit into the broader user workflow.

7. Multiple scales. Architectural and interface design requires viewing the problem at multiple scales. There is the high-level view of how a building fits into its site locations all the way down to the design of specific rooms and spaces. Each of these scales needs to be in harmony.

8. Facilitate flow. A good design supports intuitive pathways within the structure. The design accounts for the most common use cases and makes solving these use cases obvious. In our work, we always want users to have a sense of where they are and where they can go.

9. Iconic elements. My sister-in-law described iconic elements as the center-point of the building design and narrative. They encapsulates the personality and essence of the design. I hadn’t previously thought of interface design in this respect, but I will in the future. In our work, there is frequently a single element, whether it is a data visualization or navigational structure, that is the core of the application.

10. Visual vocabulary. The “vocabulary” of the building represents the materials (e.g. wood, metal, glass) and other visual elements that compose the common aesthetic for the design. The analogy for us is the UI style guide where we define the color palette, typography, and other treatments that make up the look-and-feel of the interface. An effective UI style needs to align with the narrative and design principles described above.

11. Upholding and breaking rules. There are many conventions and expectations that shape the design of a building or an interface. These rules exist for many valid reasons, and we agreed that it is important to acknowledge and respect them. However, my sister-in-law noted that her professors would often challenge students to “break the rules to make them stronger.” There are times to challenge convention, in particular with your iconic elements, to push the design beyond the ordinary and formulaic.

At the beginning of our discussion, I was surprised to learn that a few of my sister-in-law’s Architecture classmates had gone on to do interface design. Given the similarities in the thought process, it may not have been a big transition.

Read More

Subscribe to the comments for this post

Thrown to the Ad-Wolves… or, Learn from My AdWords Mistakes

Here at top-secret Juice headquarters, some major new products are in the works, and we want to promote them with Google’s revenue powerhouse (also known as Google AdWords). Thus, after three weeks of self-imposed AdWords boot camp, I have emerged with a few scrapes and burns, along with some tips that I wish I had been armed with since the beginning.

The natural place to start learning about Google AdWords is the official Help Center, an expansive and neatly categorized resource. But what happens if your inhuman schedule or dwindling coffee supplies don’t allow you the luxury of navigating through the help center hierarchy or sifting through its search results? While you might be able to maintain a semblance of a campaign without answering those lingering questions, you run a high risk of letting potential viewers slip away, never seeing your ad, and wasting money on high CPCs (cost-per-click).

You are hereby invited to learn from my mistakes. I am forgoing the usual basic topics in favor of questions whose answers are more time-consuming and tedious to find. It took me a few weeks to get comfortable with AdWords and figure out these answers myself, but it will only take you a few minutes!

Read on to learn the answers to:

1. How creative should I be with my ad text?
2. How do I find out what keywords my competitors are using?
3. Why has Google’s heartless algorithm condemned my keyword as inactive?
4. How do I get bolded words in my ad?
5. What is dynamic keyword insertion, and how do I use it?
6. What is the difference between a campaign and an ad group?
7. What is the difference between keywords and placements?

1. How creative should I be with my ad text?

When I was but an AdWords newbie, I held the misconception that creative ads were all that I needed to pull in clicks. Pop psychologists might credit my right brain, starved for attention in the left brain’s home turf (programming! algorithms! programming these algorithms!), for seizing upon the opportunity to design some artistic and imaginative ad copy:

The “Viva la Revolucion” ad was my baby. But it turned out to have a face only a mother could love, as evidenced by the zero people who clicked on it. To the stunned disappointment of my right brain, Google AdWords is just as algorithm-fueled as any of Google’s other products. In fact, Google AdWords runs much like the ubiquitous search engine does, treating your keywords, ads, and landing page similar to the way it treats the 1 trillion pages it crawls while looking for content.

2. How do I find out what keywords my competitors are using?

Google won’t tell you—it’s in their privacy policy. But services such as KeywordSpy will. KeywordSpy not only gives you lists of your competitors’ (and your potential) keywords, but provides data for each keyword about other metrics, including as ROI, price per click, and number of competitors.

3. Why has Google’s heartless algorithm condemned my keyword as inactive?

Sometimes, Google will refuse to show ads for certain keywords unless you pay an absurdly large CPC. The large CPC is meant to discourage you from following any of these bad habits:

• You dumped a lot of unrelated (or weakly related) keywords into one gigantic ad group.

Try making many smaller ad groups, each with its own tightly-connected set of keywords. Ideally, every keyword in a given ad group is a synonym for all the other keywords in the ad group. This also helps tremendously with writing ads that use dynamic keyword insertion (see question #5), since forcing ads to accommodate keywords covering a wide range of topics and/or parts of speech makes the ads vague and unspecific. To find keywords that deserve synonym status, use Google Sets. It’s like a thesaurus on steroids.

• Your keyword, ads, and landing page aren’t “relevant” enough to each other.

All members of the Holy Trinity of content (keywords, ads, and landing page) need to draw from the same words to be considered related. Try making sure that they line up.

• The cost per click you set for that keyword falls below the minimum.

This is the nicer way of saying that you have to spend more money.

4. How do I get bolded words in my ad?

You can’t designate specific words to be bolded (or formatted in any way, for that matter). You can, however, make sure to include keywords (words the user types in that you have selected for your ads) in your ad title and/or body. Just as it bolds keywords in search results, Google bolds keywords in ads. Your keywords do not have to be exact matches with the words in your ad. In the example below, a search for the keyword phrase “report automation” produces an ad that not only bolds “report” and “automation,” but also their variants “reports” and “automating.”

5. What is dynamic keyword insertion, and how do I use it?

This technique (sometimes known as “wildcards”) is how eBay and Target can pull off “Buy _____ now” for every conceivable adjective-noun combination. It allows you to make the same ad apply to multiple keywords. The format is:

The word immediately following the colon (no spaces) indicates the word you want to be shown when the keyword is too long to fit in the ad. Since I chose that word to be “executive dashboards,” the ad prompted by a too-long keyword would look like this:

Here is the same ad with other keywords swapped in, thanks to dynamic keyword insertion:

You can tweak the capitalization of the keyword with Google’s guidance, in the form of this handy table and more.

6. What is the difference between a campaign and an ad group?

A campaign is made up of one or more ad groups. Each campaign has one budget (i.e., $10/day) that is shared between all of its ad groups. Each ad group can be customized with different ad variations, keywords, placements, days and times the ad is shown, etc. Therefore, most modifying and experimenting happens on the ad group level.

7. What is the difference between keywords and placements?

Keywords produce what people usually think of when they think of Google AdWords. When a user performs a Google search for a keyword you have selected, your ad appears on the side (or top, if your budget is very generous) of the results page. Placements occur in the “content network,” which is made of individual sites that get paid to show Google ads. If you sign up for a lot of placements, you’ll get a lot of clicks—but only because of the sheer volume of people seeing your ad. In some ways, placements are less targeted than keywords because people who clicked on your ad in the content network aren’t actively searching, as they are when they find your ad through natural searches. There are two types of placements:

1. Placements You Select

Google’s Placement Tool allows you to browse a gigantic list of sites organized by topic. Any of these sites could have your ad on it. The Placement Tool will also suggest sites and break down your potential audience by demographic.

2. Placements Google Selects

Google will select sites in the content network based on information from your current campaign. These sites may make up the bulk of your impressions and clicks on the content network and in general (in other words, clicks from the Google’s selected placements may outnumber both clicks from your selected placements and clicks from organic searches).

This list is by no means a comprehensive examination of AdWords, but at least now you can consider yourself three weeks wiser and three weeks closer to writing one that is.

Read More

Subscribe to the comments for this post

Analyticstime!

If you struggle to legitimize analytics within your organization, you can’t touch this video for a powerful explanation of the impact of analytics:

MC Hammer at the AlwaysOn/STVP Summit at Stanford, “Music Artists Go Entrepreneurial.” Around minute 24:00.

Read More

Subscribe to the comments for this post

Review: 5 Options for Embedding Charts in a Web Page

A few weeks ago, I received an e-mail from the folks at Widgenie asking for a blog review of their newly launched service. Widgenie targets non-technical people looking for an easy way to create and publish charts or data visualizations on the web. As I began looking it over, I wondered whether this problem had been solved elsewhere. It has. I’ve summarized my experiences with five services that can help you go from data table to web chart with ease.

I evaluated the services across three criteria:

1. Data upload: simple process, options for file types, control after loading data, ease of updating data.
2. Chart options: different chart types, control of labels, axes, ordering data, and formatting.
3. Chart design: effective data presentation, absence of chart junk.

A few things I didn’t worry about, but might be worth considering:

• Managing charts that you have created
• Animation or interactivity of charts (usually this is more distracting than useful)
• Easy registration process
• Performance across all the chart types

I gave each service a score of 1 (poor) to 3 (great) for each criteria. Top performers are highlighted in green.

Unlike some of the other solutions, Google Spreadsheet with charts/gadgets isn’t primarily about creating data visualizations. Nevertheless, in a few simple steps, you can upload data, create a good looking chart, and publish for the web.

One key advantage to Google Spreadsheets is that you can easily change and manipulate the data online. The chart output is clean and practical. The chart options are basic, but when you select gadgets rather than charts, you have a lot more visualization options. I was disappointed that it didn’t offer many options for formatting, which is frustrating in an application that is beginning to feel like Excel.

Widgenie is exclusively targeted at the problem of embedding web charts. Overall, I found Widgenie easy to use. The process for loading data and creating “widgets” was straightforward and obvious, if a bit linear (e.g. once you create a widget, you can’t go back to change the chart type). Widgenie offers an above-average number of publishing options, including embedding your charts in iGoogle, Blogger, and Facebook.

Unfortunately, Widgenie offers a lot more sizzle than steak. Its bold marketing statements include:

“the all-powerful data visualizer”

“Take your data and transform it into visual information that can be shared with anyone, anywhere. Your wish is our command!”

“We combine all the power of an enterprise-level business intelligence platform and provide it in a convenient Web 2.0 widget.”

A few of the issues I ran into:

• Relentless use of “animated” 3D charts—where animated means it moves as it is drawn on the screen, not that it shows changes over time in movie format (now that could be powerful).
• The tag cloud visualization, the lone advanced widget option, colors the text rather than sizing it. That isn’t the way tag clouds typically work.
• Finally, as you can see from the image below, I wasn’t able to present my data in order of months (though I loaded it that way). When the data is labeled as text, it automatically gets sorted alphabetically. Changing it to date/time made things even worse.

Editors note: We can’t even embed the widgenie widget in the page because a coding problem with the widget caused all the links on this page to turn red. This problem only occurs with certain browsers.

Swivel isn’t directly aimed at the embedding charts market, but still does a competent job of delivering this capability when you select the “post to blog” option. Swivel offers a beautiful data upload process, but failed in its attempted to auto-define the chart type. Like Widgenie, Swivel struggled with ordering my data the way I wanted it, and somehow lost the order of my original data load.

The charts are generally clean and easy to read, but they’ve made a strange commitment to vertical grid background which doesn’t work for a column chart.

Many Eyes is brought to us by the big-time data visualization thinkers at IBM. They know the right way to present data and it shows.

Unlike the other services, the only way to get data into Many Eyes is by pasting into a text box. When it comes to visualizing the data, however, Many Eyes offers a myriad of options. Using it to create a simple column chart feels like taking a Ferrari to the grocery store. It is worth checking out the word tree, treemap, network diagram, and proper tag cloud.

Like Swivel, Many Eyes was designed as an online community for the visualization of public data sets, yet it pulls of web chart publishing with ease. The one negative is the “click to interact” feature on the chart.

Zoho Sheet is an online spreadsheet like Google Spreadsheets.
I was ready to fall for this one. Like Google Spreadsheet, I simply dropped in my data and selected the create chart button. You’d swear you were in Excel as it walks through the steps to selecting and customizing a chart. But then this came out…

Fortunately, a Zoho’r explained in the comments how to change from this default view.

Read More

Subscribe to the comments for this post

Godin Dumps on Bar Charts; Data Visualization Record Falls to 1 and 1

Seth Godin, well-known marketing guru, took a strong and misguided stand against bar charts¹ in a recent blog post entitled “The three laws of great graphs”

Godin suggests that bar charts (and presumably other chart types like scatterplots, bubble charts, bullet charts, treemaps, etc.) give too much latitude for data confusion and ambiguity when used in presentations. In Godin’s view, a chart should make a single, clear point and leave no room for alternative conclusions.

…..

Read More

Subscribe to the comments for this post

Why Analytical Applications Fail

Many analytical applications fail for a simple reason: they assume users know precisely what they need before they’ve begun the analysis. There are cases where this assumption holds and the user has a specific end-point in mind. But more often, users depend on the tool to track down an answer with only a vague idea of where to start. The exploratory analysis that follows can feel like swimming upstream when the application isn’t designed to facilitate the journey.

The source of this mismatch is partly rooted in the technical perspective of database developers. The simplest path to providing data access is to let users fill out a form to define a SQL query. It is a linear mindset that isn’t well suited to ambiguous problems.

…..

Read More

Subscribe to the comments for this post

Real-World Tufte Graphics in 11 Lines of Code

Check out our followup post that describes how we created a downloadable Windows application or an excel spreadsheet you can use to create these graphics.

One of the troubles with Tufte is the frustrating infeasability of his approach to design for real people in business. One of his recommendations is to use Adobe Illustrator.

Adobe Illustrator is a big serious program that can do almost anything on the visual field (other than Photoshop an image). Most of my sparkline work was done in Illustrator. Fortunately all graphic designers and graphic design students have the program and know how to use it, so find a colleague who knows about graphic design.

…..

Read More

Subscribe to the comments for this post

Tufte-Style Comparison Chart Generator

Last week, we shared a rendition of a Tufte graphic using just a few lines of Nodebox code. As our commenters pointed out, Python is great, but it may not be every business analyst’s carnal desire to learn a programming language just to generate some nifty graphs. I spent some time to push Chris’s Nodebox rendition into a PIL-based Windows tool that can generate the same sort of comparison graph from an Excel file on the fly.

The result is The Comparison Chart Generator 1.0. The installation instructions are relatively simple. Unzip the zip file, and run comparisionchartgenerator.exe.

….
Read More

Subscribe to the comments for this post

10 Minute Reviews: Open Flash Chart

We frequently get requests to review and write about analytics-related solutions. I’ve put off most of these requests because it sounded like a lot of work. Then I had an 4-hour-work-week-style epiphany: most new users only give a new product or service a few minutes before they make up their mind. Why can’t I make the same snap judgement and call it an expert opinion?

First up is Open Flash Charts, pointed out to us by Matt Bear. This is an open source project started by John Glazebrook to provide flash charts that can be embedded in web pages. I love John’s explanation for taking on this project:

“Once upon a time I had to deal with a company who sell flash charting components, their component had a bug that I needed fixing, so I emailed them about it asking when it’d be fixed. (Remember that I had paid real money for this software.) They were so incompetent, rude and obnoxious that after three or four weeks of emails I thought to myself “I could learn Flash and Actionscript and write my own charting component, release it as Open Source, host it on sourceforge and build up a community of helpful coders faster than they can fix a single bug.” And that is what I did. And that is why it is free. I guess the moral of the lesson is: don’t piss off your customers.”

….

Read More

Subscribe to the comments for this post

A Dashboard Alerts Checklist

There is a tendency with reporting, and dashboards in particular, to cram as much information on the page as possible. It is a problem that Avinash describes with typical candor:

“This one of the core reasons why most dashboards are ‘crappy’, i.e. they are data pukes that provide little in terms of context and even less in terms of actionable value.”

….
Read More

Subscribe to the comments for this post