The Blurring of Industrial and User Interface Design

In today's world of design, we can no longer ignore the blurring lines of industrial design and user interface design. While the two disciplines have their own methodologies and processes, they now share a responsibility for creating a seamless experience -- between screens and hardware. This panel will discuss the convergence of these two disciplines and share various perspectives on how we can all work together.

View Panel

Why Green Data Center Design Matters

Yahoo! has been a leader in designing and building environmentally sustainable data centers, and has invested millions in creating the most energy efficient data centers possible. Yahoo! Scott Noteboom, head of global data center infrastructure at Yahoo!, will address the evolution of Yahoo! data centers and how the company is getting more for less through facilities with lower costs, higher performance and accelerated construction.

View Panel

Urban Technology on the Dark Side

Urban computing isn't just fun, games and mapping. There's a dark side to urban technology, with surveillance and subversion in operation and in opposition. It shouldn’t be a surprise: most technologies we use were originally developed in the military before making their way to the civilian side. But mostly, when we talk about urban computing, we tend to focus on its optimistic and entertaining uses. This panel confronts the relationship of cities to technology. Some things it will discuss: how soldiers literally cut holes in walls to through houses in urban wars; how the government creates geographically dark spaces on the map and launches secret satellites; and the role of DARPA (Defense Advanced Research Projects Agency) in giving rise to urban technologies we use today – to name a few. In balance, we’ll look at the ways that artists, activists, designers, architects and hackers reveal and challenge these shadowy-seeming technologies in their work.

View Panel

Customer Service for Web Apps: Bringing the Wow

Great design and development is not enough to create a great customer experience. Find out how small support teams can make a huge impact on thousands of customers through simple tools and techniques, learning from people who've done it personally. We'll cover support as a marketing tool, choosing support methods, setting expectations and how to deal with dickheads and many more topics from us and from you. Don't let crappy customer service sink your web app!

View Panel

Remote UX Research

The secret and unpublicized force behind her co-workers' recently completed book, Remote Research, this panel will tell you all the secrets the authors were too scared to put in the book. Then the authors can do their best to defend themselves, since they'll be on the panel, too. As the publishers of http://remoteusability.com, Cyd, Nate, and Brynn can tell you what the latest UX research tools are and how to use them. This can help designers and developers do better research. Remote user experience studies allow you to recruit subjects quickly, cheaply, and immediately, and give you the opportunity to observe users as they behave naturally in their own environment. The panel will cover recent examples from Habbo games, Intuit, and Sony and give people an idea how to design and conduct remote research studies, top to bottom, with little more than a laptop. Actually, nothing more.

View Panel

Conserve Code: Storyboard Experiences with Customers First

Changes to design, direction, UI can be costly if you are already in the development cycle. It is easier, faster, and cheaper to course correct on paper. Storyboarding your ideas allows you to rapidly think through the customer experience, pinpoint what’s really important to the customer, and scrap the ideas that won’t work. At Intuit, we use storyboards to rapidly test our ideas with customers multiple times before spending time developing code. This enables us to define concepts that will delight our customers, so they buy our products and tell their friends. Storyboard development and testing is a method anyone can do—it doesn’t take an artist or researcher to get great feedback from customers. In this hands-on workshop you will learn how to express your ideas in a story that will elicit valuable feedback from your customers. You will be able to iterate on ideas with lightning speed to uncover what works, what doesn’t, and unearth what will truly delight them (which is often not your first idea!). We will use frameworks to help you define what’s most important to your customer so you know you are focusing on the right things by the time you start to develop.

View Panel

Wink & Nudge: Cognitive Insights for Awesome CSS3 Transitions

As CSS3 gains more and more foothold across the Web, it's giving us animation superpowers in the browser. Will you use CSS3 transitions for good or for awesome? At their worst, animations and transitions can be gratuitous, distracting, and downright annoying. But they can also add meaning and delight – a nicely designed and timed movement can catch attention, give a sense of continuity, mimic something familiar from real life, or show users how slippery things in the ether relate to each other. In the real world, events are connected by transitions and animations, and our cognitive system has evolved to pick up meanings from them

View Panel

Lost in Translation: Designing Across Mobi, iOS4, Android

Yeah, there is an app for that…in the past few years we have seen the mobile landscape take shape and increasingly become part of our consumption habits. More clients are recognizing the potential of mobile platforms. Now clients are asking for it, “Give us a mobile web site, iphone app, and a android app.” Now what? Join us for some real-world lessons learned and good overall UX design recommendations.

View Panel

OpenStack – Unlocking the Cloud

The cloud computing market has exploded and reached hyper-fragmentation with dozens of IaaS vendors, yet the majority of offerings are proprietary, closed platforms. As a result, many technology companies and cloud consumers are rallying around an open source alternative, OpenStack, which has the potential to drive open cloud standards. This panel will explore the state of open cloud standards, relevant players, and benefit to end users, including the acceleration of cloud technologies and the ability to freely move workloads from private to public clouds, or among different service providers.

View Panel

3D Interfaces: A Primer on Stereoscopic Interaction Design

As 3D screens and content burgeon, what are the implications for interactive design? This talk will cover the basics of what the interaction designer needs to know about 3D to prepare for designing stereoscopic interfaces, including: controlling parallax; 3D encoding and presentation technologies; the challenges of mixed environments of 3rd-party 3D video and 3D interface; setting up a 3D design workflow; and the new creative opportunities presented by 3D displays.

View Panel

Open Source and Corporations

Not invented here syndrom is rampant in many companies but few consider open sourcing the technology. Be it form a convincing management to releasing the technology to ensuring that community contributions are maintained. The panel will consist of open source contributors from larger companies and discuss the problems they have doing it and the benefits that are received from the open sourcing.

View Panel

Rapid Experimentation In the Wild, On The Cheap

You want to make sure that your customer will think that your idea is awesome, so you need to get their views FAST. You don’t need to pay someone hundreds or thousands of dollars to do research for you. Heck, you don’t have any cash to spare. Besides, customer focus groups and surveys are dead. (And frankly we didn’t think they ever worked). You don’t need to have a fancy lab or even a fancy working prototype to test. All you need is a little bit of time, a place with the kind of people you think will want to use your idea, and a little bit of guts. You’ve gotta be in the customer’s natural habitat with prototypes to get the intel you need to refine that money-making idea. We’ll show you how. Learn how to design and execute rapid experiments with customers.Stuff we’ll cover includes: Figuring out what you need to find out, putting in the minimum effort to get great feedback on your ideas, how to approach a customer, what to ask, what to listen for, and what to do about it.

View Panel

Streamlining the Redesign of Yahoo! Mail and Messenger

Ever wonder what it takes to redesign products that are already being used by millions of people around the globe everyday? This panel will give you a glimpse into product cycle using the latest technologies and the challenges for multiple platforms that a project of this scale encountered.

View Panel

Today's internet is full of highly interactive software, and prototyping interfaces has never been more important. Designers can't lay down pixels in Photoshop or Fireworks and expect the intended experience to transfer to their users. For example, an AJAX request can take anywhere from a few milliseconds to several seconds to return to the browser. Animations take time to complete. Hover effects add context that you can't always convey through a static image properly. The easiest way to see how these interactive elements will function is to prototype them.

In this article I'm going to cover how to plan your prototype, setup the HTML file and make a revision to the design after the first round of testing. As a demonstration, I'm going to design a new feature for the article page on Wired.com. Let's assume that the research phase of my project found that readers of Wired were curious to see what the next article was going to be and how long ago it was published before they decided to read it. I'm going to prototype this interaction before I pitch the idea to management.

Step 1: Isolate Static Elements

The first step I take in starting a new prototype is to figure out what elements are going to remain static and save them as an image directly from the design mockup. This allows you to stick the PNG in the page body's background and avoid the time it takes to write and test real HTML/CSS.

body {
        background: url(background.png) top left no-repeat;
}

Step 2: Create HTML for the Interactive Elements

Next, create, style and position any HTML elements you need the user to interact with via jQuery. I tend to use inline CSS to keep the number of files to a minimum. This technique only requires an index.html file and any additional images you've created. For quick prototypes, it is easiest to absolutely position your dynamic elements. For clarity, only the left link and box is shown.

#leftlink {
        position: absolute;
        left: 93px;
        top: 313px;
        color: #007CA5;
        text-decoration: none;
}

.box {
        background: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        z-index: 5;
        -moz-box-shadow: #888 2px 2px 8px;
        -webkit-box-shadow: #888 2px 2px 8px;
        box-shadow: #888 2px 2px 8px;
        display: none;
}

< a href="javascript:void(0)" id="leftlink">PREVIOUS POST</a>

Step 3: Add in jQuery

Once you've got all of your elements in the HTML file, it's time to add some interaction. I'm a huge fan of the jQuery library, but you can use any other library or just vanilla Javascript if you want. As an aside, I'm intentionally being a bad person by including Google's copy of jQuery directly, but this allows me to keep a text snippet of my "base" prototype that doesn't require any extraneous files to start from.

In this example I'm going to have a summary box appear when the user hovers over the previous or next article links. Most of this effect will be done by toggling the HTML element to be visible and changing some CSS when the link is hovered over.

$(document).ready(function() {
                        
        $("#rightlink").hover(function(){
                $("#rightmore").show();
                $(this).html("NEXT POST ››");
        }, function(){
                $("#rightmore").hide();
                $(this).text("NEXT POST");
        });

});

Step 4: Iterate the Design

Now that you've got a working prototype, you can test this out with real users very effectively. You don't have to explain your thought process, just as "Show me how you would travel to the next post". Suppose that after this testing you realize that your users still aren't sure where that link is going to take them. Perhaps adding an animation that reveals the preview box from the direction of the next article. We are implicitly using the convention that the left side is older content and the right side is new content, just as pages are laid out in a book

$("#rightlink").hover(function(){
        $("#rightmore").show().animate({
                left: '460px',
                opacity: 1
        }, 100);
        $(this).html("NEXT POST ››");
}, function(){
        $("#rightmore").animate({
                left: '770px',
                opacity: 0
        }, 100);
        $(this).text("NEXT POST");
});

Conclusions

It turns out that the second iteration of the effect is way too intense for my taste, but that shows you the value of prototyping. As a designer, it is difficult to predict how that interaction might feel to the user while remaining within Photoshop or Fireworks. Once you've made a few simple prototypes you can graduate to simulating or making real AJAX requests, you can enhance them by simulating loading indicators, ajax requests, or other elements to make the page pretend to be alive.

If you found this tutorial helpful, please leave a comment. If you run into any problems or would like specific advice on how to set up your prototype, please feel free to contact me.

I built this plugin to easily find out how buttons, error messages and instructional text will display in different languages without leaving Fireworks. This is important for any application that is supported in many languages, such as the Rackspace Web Apps platform. For example, a "Submit" button that is hard-coded at 80px wide will break when translated into Spanish because the word itself will be over 80px wide.

This plugin will automatically translate the current selection (or selections) via the Google Translate API. It is important to note that these results are not "translation" but "transliteration", which won't represent the original word exactly. I believe that the results, while far from perfect, are close enough to give a good approximation of the localized design.

This plugin is built off of the wonderful FWXHR library by John Dunning, which allows Fireworks Javascript commands to make XMLHttpRequest calls. This ingenious library uses a Flash movie to funnel requests to the internet at large, functionality that is blocked in the native JavaScript (presumably for security reasons). The request hits a PHP file located on my (or your) server that connects to the Google Translate API through Jose da Silva's PHP library.

Error handling is done minimally by myself and pretty extensively by John's XHR library. The current version won't handle selections of non-text objects. This is mosly do to the lack of API documentation on Adobe's part.

Pleaes let me know how you are using this plugin and any comments or feature requests you may have. Since it's Javascript you should be able to modify it at will. If you come up with anything cool, please share!

Background

To test my Industrial Design thesis on Campus Emergency Notification Devices, I wanted to put a prototype in front of some real users. After running a few walk-through tests, I realized that I needed a way to record and analyze these tests. I contacted the Center for Human Computer Interaction at Virginia Tech to inquire about their eye tracking equipment. I was given access to an ASL Mobile Eye tracking device. The Mobile Eye allows the user to wear a recording device that allows them full range of movement instead of being tied down to a computer. This was perfect for my use since I needed users to be able to walk around a room and evaluate my prototype.

Software

   

Click here to download:

My_Experiences_with_an_ASL_Mob.zip (290 KB)

The Mobile Eye hardware comes with proprietary software that allows for calibration and video capture. I found this software to be capable, but pretty outdated. As an interaction designer, I found a lot of flaws but was still able to get everything setup. The first step for calibration is to align the user's eye in the center of the eye camera. This is relatively simple to do but is very important in maintaining accuracy later during capture. The second step is to adjust the sensitivity settings in the software to get a good reading of the three infrared beams that reflect off the surface of the eye. These beams are used to located the user's pupil (yellow circle). The last step is to instruct the users to look at several different points in front of them and indicate to the software where they are looking. This gaze calibration is done with 6-9 points in order to get a good, accurate reading.

Once all of this calibration is complete, the software will show a real-time view of what the user is looking at. This can be recorded straight from the computer or used to playback footage that was captured walking around.

Example

I'm keeping my thesis confidential to pursue potential patent applications but I wanted to show some actual footage shot by myself when I was getting familiar with the equipment. I decided to record myself and a few friends playing Xbox because gaming offers a lot of constant eye movement and scanning. Xbox also offers a relatively narrow "cone of focus" that will stay within the bounds of the eye tracking glasses and keep the capture highly accurate.

After capturing about 10 minutes of gameplay, I started to see results that backed up a lot of assumptions I had about different styles of gameplay. In each of the videos, you can see that the player will do a modest amount of scanning, but mostly keeps their gun pointed in the direction they are looking. This is to minimize the reaction time of having to swing the gun over to a target that is identified. By moving the gun with the eye, this reaction time is greatly increased. In the second video, you can also see how much the mini-map is utilized when it's available.

Limitations

Throughout my testing I found a lot of limitations that I'd like to share with anyone that is considering using this model eye tracker. During the testing of my prototype, I had a lot of issues with calibration once the subject was untethered from the computer. I think that in the process of walking around the subject's eye shifted and the alignment in the eye camera suffered. This caused issues with accuracy where ever the subject looked.

The cone of focus I talked about earlier also caused problems that were specific to the way I setup my tests. The Mobile Eye is accurate when the subject is looking forward and doing light scanning. It can't track the pupil when the subject looks out of the corner of their eye. This happened frequently during my tests because the normal location for network clocks and other notification devices is located near the ceiling at the top of the wall. My subjects ended up scanning for my prototype out of the top of their eye which was either on the fringe of where the Mobile Eye could track or completely outside of its range.

These two issues made me rethink how my tests were setup and how to brief the user before each test. More re-iteration on just how sensitive the eye tracking equipment was needed to make sure the subject didn't scratch their eye or adjust the glasses. I also instructed the subjects to try to keep their gaze inside of the range of what the hardware could capture. I was hesitant to instruct users to do this for fear that it would influence the results, but I had to be able to capture the data.

This is a short list of some of the more interesting books I've been reading in the past few weeks.

Project Brief:

This is the second iteration of my entry for the Mozilla Winter Design Challenge. My concept revolves around the idea that a user's daily browsing represents only a few key tasks or objectives. Shouldn't the browser provide you with a way to easily group all of the tabs and windows related to your objective so you can stop a web search and continue it later? My concept automatically groups these tabs together and offers several options to restore all or parts of your session.

Improvement over Version 1:

Based on some of the other ideas floating around on the forums, I have designed the ability to sync your sessions between devices. You can now start a session on your phone and continue it on your desktop, or vice versa. I think that this concept accurately reflects the usage pattern of consumers and will fit directly in line with the Weave project.

To support my "mobile home tab" idea, I created another version of the concept tailored to work within Fennec. You can view a web mockup, open the page within one of the desktop betas of Fennec, or directly on a supported device.

Screenshots

Links:

View the concept prototype
View the mobile concept prototype mockup
View the mobile concept in Fennec

My entry for Mozilla's Winter Design Challenge revolves around the idea that a user's daily browsing represents only a few key tasks or objectives.  Even for these few tasks, you might open hundreds of webpages in your browsing session. For example, if you are looking to purchase an iPhone, you may start with Apple.com to check out the marketing material they have prepared. To get a more balanced view, you look to CNET or Engadget  to find a third party product review. Perhaps Engadget tips you off to some of the network issues that AT&T has in the US, and you do a quick Google search to confirm it.  Note that even in this quick session you've already spawned at least 4 tabs or windows.

Now imagine that you are interruped during your search before you've made your decision about the iPhone. Shouldn't the browser provide you with a way to easily group all of the tabs and windows related to your search so you can continue it later? My concept automatically groups these tabs together and offers several options to restore all or parts of your session.

You can view the interactive demo (draft 1) (use Firefox for best results) or a screenshot. I welcome any feedback here or at the challenge discussion forums.

Design Goals:

1. Recognize sites in your session by title, url, or screenshot

2. Identify which sites you spent the most time on

3. Restore an individual tab or all of the opened tabs

View other browser information such as SSL certs and the identity you logged in with

Production Details

This prototype was designed in Adobe Fireworks and reproduced pixel for pixel in HTML and CSS3. CSS Spriting has been used in the format switching buttons, but could be applied more aggressively in a second version of the concept. Most of the interaction is achieved by adding and removing classes to elements in the DOM with a few jQuery fade effects thrown in. It is designed for Firefox only and no cross-browser testing was completed.

This past weekend I've been playing with an interesting live test on Google.com. My account has been activated for what I'm calling "Minimal Google." When the page is loaded, all you see is the search field, and the text "©2009 - Privacy" until you move the mouse. Mouse movement triggers the rest of the interface to fade in via Javascript.

   

Click here to download:

Encountering_a_Google_Live_Tes.zip (85 KB)

This interaction is striking because I never end up moving the mouse for 80% of the queries I do. All I do is hit Apple + T to open a new tab, and start typing since I'll be focused on the search field when Google loads. After I'm done typing, I hit enter to execute the search without ever touching the mouse. I'm assuming they are willing to try this test out because power users won't move the mouse and if you do need to click a link, the first step is move the mouse, which will trigger the fade-in.

Obviously this is not fool proof because many older internet users will hunt around the screen to find their target link with their eyes before even moving the mouse. In the age that Google is diversifying into other product areas, this test clearly proves that they are still willing to push the boundaries to let you know that Google, at its core, still does search.

Why I think Fluid/SSBs are cool:

I've been experimenting with the Fluid site specific browser tools for a few months on and off, but haven't really documented any of my work because it hasn't amounted to much. Fluid and its similar offering, Prism from Mozilla Labs, are in their infancy and have stagnated there for years. I think this is a shame because the ability for web pages and web applications to support badge icons, Growl notifications, drag and drop functionality and much more could truly revolutionize web browsing.

The Future:

I'm interested to see what direction Google's Chrome OS will take in the battle to blur the line between the web and the desktop. I think that the web is in need of an open source, widely adopted way to interact with the desktop via Javascript, and I can't think of any other company that is going to be able to pull this off better than Google. I think Mozilla has an opportunity to do this with Firefox, but that won't guarantee that it will be integrated into WebKit or Internet Explorer. Google is the media's darling child and has huge market clout, which I believe could force the other major players to play along or be passed.

What I hope (but don't expect) Google doesn't do is push for this functionality only through their Gears plugin. Javascript and AJAX have modernized the web in a non-proprietary way, and I would like to see that continue. Imagine a "Web 3.0" with more third-party lock-in than our current Adobe Flash-based hell hole. I'm not looking forward to it.

My work with Fluid:

I've added two very simple features to my Rackspace Email site specific browser. The first is the obvious support for badge icons, just like the traditional OS X Mail application. The second is popup notification support for incoming messages. These are two features that are supported on both Windows and Mac desktop applications and are, in my opinion, essential to the user's experience of using a web application in a site specific browser. Below is a screenshot of both of these features. Please note that this is a personal project and is no way endorsed or supported by Rackspace Hosting, Inc.

Like every other college student, I'm a huge college football fan (especially the Hokies) and I downloaded the ESPN ScoreCenter to keep up with stats and rankings. While using the application for just a few days, I found many design practices that were so interesting I'm going to devote a blog post to them.

First up: iPhone-ness

ESPN did a great job of following the iPhone 'card-swipe' paradigm. By nature, sports data is already grouped into logical sets like sport, conference, rank, and week. This data flows into the card system very well and really shows how easy it can be to view a huge swath of data in such a small device.

Hidden Scrolling Sections

Since you obviously need to be able to show more than five games on the screen, somehow this app needed to scroll its content. I'm on the fence regarding ESPN's implementation. The designers have made the inner content section containing the game data to scroll vertically, but there is no visual indication that this is possible. This implementation effectively creates two frames around the content, one for the black void that the 'card' sits in and the other is frame of the card (red area) that holds the scrolling section. Based on my calculations, this causes the area for viewing data to be only 51% of the total application real estate.

Modal Popups

When you navigate to a particular game, a modal box pops up with the game's score, stats and other information. What use is a modal box that takes up almost all of the screen? This modal box also contains the hidden scrolling section. I don't know of any other application that has implemented a modal box on the iPhone in this way.

Settings Screen

Two years ago I would have never believed that I'd be blogging about the settings screen in an application. ESPN's designers did a great job making this a beautiful, minimalist screen that easily allows you to pick your teams and get back to using the app. For some reason the thick handles for changing the order of the sections irks me, but I'm willing to put up with it. Overall, I'm extremely impressed with ESPN ScoreCenter and look forward to using this app during the rest of the football season.