Home | Design & Usability
Archive for the ‘Design & Usability’ Category
Tuesday, July 20th, 2010
I attended ASCO last month to get a sense of how various companies are handling the new fair balance guidelines, to check out the Boehringer Ingelheim booth for which D2 Creative provided rich media, and to see how other pharma companies are using interactive media in the trade show setting.
With their hands tied by regulatory minutiae, pharma’s media is traditionally several steps behind other industries from a storytelling perspective. It is in the area of technology where pharma is much more free to flex its creative muscles.
A huge, international meeting like ASCO is exactly the type of showcase where one would expect to encounter the latest, greatest media wizardry. Granted, ASCO attendees are an unusually learned audience who are most interested in the science, but they interface with technology just like the rest of us. And when technology enters the fold, the importance of usability—and the user experience—cannot be ignored.
(more…)
Tags: ASCO, MOA, new fair balance guidelines, rich media, stereoscopic 3D, touch screen, usability, user engagement, user experience, user friendly design, user interface
Posted in Creative, Design & Usability, Technology | Comments Off
Thursday, July 8th, 2010
Perhaps the most undervalued page of your Web site is the “Contact Us” page.
Here’s a story from my friend, Jon Websurfer. Jon was assigned the task of finding a supplier to make customized edible treats to use as corporate gifts for his company. He typed some keywords into his search engine, including his location. Out of thousands of bakeries in the U.S., a lucky eight showed up on the first page of results (the rest of the results weren’t bakers). Jon clicked on the results for five or six of these and looked over their websites, taking a maximum of two minutes on each page (for some it was more like 10 seconds). He evaluated them for:
- Presentation (if the site looks good, chances are they’ll do good product presentation)
- Ease of navigation (if he’s frustrated with your site, he may be frustrated with your service as well)
- Best looking (and best variety of) product photos
- How well they explained their ordering procedure, packaging, delivery and lead time.
Hoping to patronize a local supplier, he was frustrated at how hard it was to find out their locations. (more…)
Tags: brand experience, communication, contact forms, contact page, customer response, customer service, usability, user engagement, user experience, user friendly design, user interface, website design
Posted in Design & Usability, Marketing | Comments Off
Thursday, May 13th, 2010
Listening to my local radio traffic report is a painful reminder of the importance of white space. “What’s white space?” you ask. In the design world we use the term white space to refer to the empty space around a graphic, text or other design element. Effectively it’s the space where your eyes take a breather and your brain has time to digest what it just encountered.
Back to the traffic report. I know the station is determined to make everything entertaining or cool, but they’ve gone too far. In addition to the woman reporting traffic you also hear MUSIC and CAR HORNS in the background. Car horns, in a traffic report, really? Guess what I do every single time I hear the traffic report? I look all over trying to figure who I just cut off. As a result I never hear the traffic report, and I can’t be the only one.
Your Web site is no different. If visitors are bombarded with text, images, calls to action and a host of other distractions, they aren’t getting your message. That’s because without white space, it’s difficult or even impossible to visually sort and prioritize what’s on the page.
Here’s an example of excellent use of white space in design from the 37signals site.
Take a look at your Web site. Are you asking too much of your visitors? Are there too many words, too many calls to action? Next time you are considering a redesign (maybe that should be now) think about what adding white space can do for you.
Tags: colors, design element, distractions, empty space, information overload, logo location, usability, user friendly design, user interface, web page design, website design, white space
Posted in Design & Usability | 2 Comments »
Thursday, May 13th, 2010
Touch screen kiosks are becoming more popular at trade shows. Here at D2 Creative we’ve done a few, using various types of display devices, and we’ve learned a thing or two.
Here are five rules for creating great touch screen presentations:
- KEEP IT SHORT.
Average length of time spent at a trade show display is shorter than you think. So focus your message and make sure you get it to the user within half that time.
- KEEP IT SIMPLE.
Create a road map of where you want the user to go, and help them get there by making the route as uncomplicated as possible. It’s easy to imagine that because you have assets, (testimonials, case studies, data), including them into your interactive piece will make it better. Au contraire, mon frere. Think of this as a poem where every word and every cadence supports the central idea.
- KEEP IT FUN.
It’s a touch screen, it should be engaging. Think outside the box when you create your user interface. Examples we’ve seen or done:
-When the screen is touched, water ripples across the screen
-Use a real word object (a key, a cell phone, a face) and interacting with it via a camera.
-Using technology that allows hand gestures to take the place of a mouse
- WAIT LOOP TELLS ALL.
Your wait loop will be running just like a screen saver whenever no one is using the display. It should not be an afterthought. The wait loop needs to arouse curiosity. It also needs to tell your story, in case people don’t have time to stop.
- DON’T FORGET THE TAKEAWAY.
Give people something to take home to remember their kiosk experience. It allows them to explore at their leisure, and spread the word.
Tags: communication, interactive, Technology, touch screen, touch screen kiosks, trade show display, trade show marketing, user engagement, user experience, user interface
Posted in Design & Usability, Marketing | 2 Comments »
Friday, December 4th, 2009
Most nights driving home from the office I listen to NPR. As a proponent of user contribution, peer to peer sharing and most things Web-social I am always pleased to hear the comments of listeners read (or played) over the air. Even if I disagree I enjoy hearing dissenting or opposing opinions. This is the new world publishers live in and clearly NPR gets it – right! Well, maybe not.
Here’s how it unfolds. Regardless of the particular program, each night after listener comments are aired the host typically says something to this effect:
“If you’ve got comments – we’d love to hear from you. Go to our Web site and click on the link that says comments at the bottom of the page.”
Wait a minute, did you catch that?
If comments are desired and appreciated why is it that in order to make them you have to scroll to the bottom of the page? In the Web design world we refer to anything below the viewable area on your browser as “below the fold”. It’s generally where we put the less important stuff. So users who want to comment are required to scroll through all kinds of content to find the link. This is a mixed signal for sure. Ultimately the motivated commenter will always find that link – they have a desire to contribute beyond the average listener. That doesn’t make NPR’s handling of this feature right.
Here’s my solution. If you REALLY want user feedback make it a design priority. To illustrate my solution I have tapped our expert interaction design team to produce these before and after images (actually I just did it myself with Photoshop). (more…)
Tags: interaction design, usability, user centric design, user experience, user friendly design, user generated content
Posted in Design & Usability | No Comments »
Thursday, October 29th, 2009
One of the great ironies of Web site design is that, despite our efforts to create an experience that keeps users on our pages, we constantly invite them to move away. This is largely because information architecture (how we organize sites) is linear in nature (like reading books). The result: users have to leave pages in order to view related content. Unfortunately users are often forced to back up and start over to navigate through our content.
In fact, according to Jakob Nielsen, the “back button” on Web browsers is the second most used navigation feature.
This navigation problem is painfully apparent in sites tied to a company’s financial success, like e-commerce sites. I’ve experienced this first-hand: prior to coming to D2 I spent most of nine years developing and managing e-commerce businesses. I know that most site managers struggle to get visitors to their sites. Why is it then that we make them jump through hoops to buy products from us? (more…)
Tags: checkout, e commerce businesses, e-commerce, information architecture, navigational problem, online shopping, shopping experience, usability, web designers, web users
Posted in Design & Usability | No Comments »
Wednesday, September 16th, 2009
We’ve all been there. We load a Web site in Internet Explorer 6 (IE6) and it looks terrible. Why? Because the developers for that site did not bother to support it. We are starting to see this happen more and more, since IE6 is an old browser (9 years old) and doesn’t support the latest code available to enhance the user’s Web experience. However, many organizations (and, therefore, their employees) are still working in IE6.
As you may know, HTML 5 (and CSS3 along with it) are on the horizon. With HTML 5 will come new ways of designing and developing that IE6 cannot handle. As innovators in the industry who at the same time want our applications to work on our clients’ chosen browsers, at D2 we are paying close attention to this situation.
I must say that as a developer, I am extremely happy to see the increasing evidence that IE6 may soon be in its death throes. Critics of IE6 have created sites such as www.iedeathmarch.org, www.deathtoie6.com and www.bringdownie6.com. However, much stronger evidence is shown by the fact that huge social sites like Facebook, Digg and YouTube are starting to warn their users about using IE6 to browse their sites. In due time, they will no longer support the outdated browser. (more…)
Tags: cascading style sheets, structured markup
Posted in Design & Usability | 2 Comments »
Thursday, August 27th, 2009
This is part 5 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed box shadows. In this post I’ll be discussing the @font-face-Attribute.
I can hear the angels rejoice because of this nifty and soon-to-be resourceful property. With the @font-face-Attribute, you can use any font you wish allowing you to step away from system fonts and relying on graphics, sIFR or Cufón to display the fonts you want to use. (more…)
Tags: cascading style sheets, css3, custom font, structured markup, system fonts, website design
Posted in Design & Usability | No Comments »
Wednesday, August 5th, 2009
This is part 4 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed multi-column layouts. In this post I’ll be discussing box shadows.
Have you ever wanted to add a drop shadow to a div and had to add background images just to get that nice effect? With box shadows, there is no need and it’s so easy to adjust. Below you will see an example of a div with a 2px drop shadow on it. (more…)
Tags: cascading style sheets, css3, drop shadow, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Monday, July 20th, 2009
This is part 3 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed border radius. In this post I’ll be talking about multi-column layouts.
Newspaper-style columns are easier to read than long lines of text. In CSS3, the browser interprets the properties and creates the columns, flowing the text from one column to the next.
In the case above, we use this code:
#columns {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
color: #fff;
}
Webkit targets Safari and moz targets Mozilla browsers.
There are three things we can define when using this style. The number of columns (column-count), the width of each column (column-width) and the gap between columns (column-gap). If you don’t declare a column-count, the browser will create as many columns as are needed to fit in the available width.
If you prefer to use a vertical separator, declare a column-rule. This is pretty much a border property.
div {
column-rule: 1px solid #00000;
}
Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+. If the browser doesn’t support this, it will render the text as normal text.
In my next post I will discuss the usage of box shadows and how to add a drop shadow to a div.
Tags: cascading style sheets, css3, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Friday, July 10th, 2009
I’m kind of a sucker for great packaging. If I don’t consciously mind myself while looking at things, I can end up buying something just because I like the way it was packaged.
Creativity is a cruel mistress delicate tension of form and function, the order depending on who you’re talking to. (more…)
Tags: campaign, concept, creativity, decoration, form, function, packaging, presentation
Posted in Creative, Design & Usability | No Comments »
Wednesday, July 8th, 2009
This is part 2 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed RGBA And Opacity. This time around we’ll be tackling rounded corners.
We all love rounded corners and in order to achieve that look, in the past we had to use images. CSS3 makes this much easier. To add rounded corners just put the following in your style. (more…)
Tags: cascading style sheets, css, css3, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Friday, June 19th, 2009
Buying stuff, whatever that stuff is, is a process that has changed and evolved significantly because of our bff, the internet. And let’s be honest, we all spend a lot of time on the web. If you’re like me, one of the more productive things to do online is buying something, because we can’t find it anywhere else or it’s cheaper or it’s easier.
Even if we like to see it in person and try it on or try it out, many times we may leave that store to go to our computers to see if we can get a better deal. Nothing wrong with that.
“What’s your biggest pet peeve about online shopping, Eric?” (more…)
Tags: checkout, e-commerce, retail, shopping, UI, user experience, user interface
Posted in Design & Usability, Marketing | 1 Comment »
Friday, June 19th, 2009
Cascading Style Sheets (CSS) were introduced to the Web world roughly 13 years ago. They have changed the way we program Web sites and have made our lives easier in many ways. Improvements are of course always being made and the latest of these is CSS3. If you want to make use of the features of this new version, keep in mind that not all browsers will support CSS3. As of now, Safari 4 is pretty safe and so is Firefox 3.5.
CSS3 has many new features. In this series I’m going to point out the ones that will really make a difference. (more…)
Tags: cascading style sheets, css, css3, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Thursday, May 21st, 2009
One time my old boss built a new edit room. This was at a time when you had to buy three tape machines and a separate audio mixer and video switcher. I asked him, “There’s so many great new switchers on the market, and you had the budget - why did you buy the same switcher?” He explained that with editors moving from room to room, it was much easier if they didn’t have to rethink the process every time they wanted to do an effect. This is a discussion I often have with software designers: functions that are familiar (close, save, next, previous, play, pause) need to be designed and placed in ways that will be familiar to users, even if there is a more elegant, “sensible” way. Intuitive…is a relative term. There are exceptions of course but exceptions should be made giving consideration to the goals of the program (not the programmer). We want to free the user’s mind to focus on the content, so the less mental effort spent on learning the user interface, the better.
Tags: usability, user experience
Posted in Design & Usability | No Comments »
