Sandstorm Blog

Finger as a navigating device on a tablet.

There's a distinct usability difference between navigating a web site on a desktop with a mouse and on a tablet or mobile device with your finger. A mouse is accurate to the pixel. Fingers are far less precise. They’re particularly less precise if you have big fat caveman fingers like mine.

This came to mind this morning as I inadvertently accepted a LinkedIn request on my iPad that I intended to ignore. It’s true, I don't willy nilly accept every LinkedIn request I get... but that's another rant. The options were just too close together and like I said, I've got caveman hands.

Physical Space, Not Pixels

This is just one example of why you need to consider real world physical space when designing for tablet and mobile. Bigger pointing devices, like fingers, need bigger targets. Between Apple, Microsoft, Nokia and MIT’s Touch Lab the recommended guidelines for touch targets are between 8 and 14mm with a minimum of 2mm of spacing between actions (source: Mobile First by Luke Wroblewski).

Recommended tablet design guidelines for usability.

 

 

Guidelines, Not Rules

LinkedIn followed the guidelines for some of their targets. However, guidelines are meant to lead you in the right direction, not force you into a rigid structure. How often the target is used and its position on the screen should also be considered for optimal usability. Context and common sense should lead your design if you want it to facilitate human behavior.

The touch targets below are the worst offenders. The options arrow (B) is far too small and placed too close to the accept button (A), making it too easy to accidentally accept a request when all you wanted to do was view the options. Accidentally tapping on a nav item is frustrating. Accidentally tapping on the wrong action item causes you to blog about it.

Tablet usability example of poor touch target spacing.

 

Thumbs, Not Cursors

Here's a good rule of thumb (pun intended) when designing targets for mobile. Just ask yourself, “Could I hit it with my thumb?”

 

This blog was posted by on April 1, 2013.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
Brill Street Chicago Top Gen Y Employer Sandstorm Design

We are so excited to announce that — for the 3rd year in a row! — our UX agency is one of Brill Street's Top Chicago Gen Y Employers for 2012.

Here at Sandstorm, a Gen Y employee has the opportunity to shine doing what they do best and to be proud of it whether it be interactive marketing strategy, UX design or Drupal web development!

Our Warrior Spirit drives us to create compelling online experiences and cutting edge work — all while having loads of fun!

Inspired by the idea of giving back, this year the team came together to create an interactive holiday card inviting users to choose a charity for Sandstorm to donate towards. We were encouraged to make the card fun and, most importantly, to make it our own.

Sandstormers have the platform to do great work, to learn and grow, and to become part of a forward-thinking UX agency. It's a great place to work for everyone: generations X,Y, and the eventual (hopefully awesomely futuristic) Z!

This blog was posted by on January 29.
John Lombard

About the Author

John Lombard

John is an intern at Sandstorm.

this file was posted under: 
Benefits of video from Sandstorm

The benefits of video marketing are stacking up. If you've put video creation on the back burner, consider these five benefits that can increase your web presence and up your conversions.

1. Make the complex...less complex

If a picture says a thousand words, imagine what a video has to say. If you're in the business of complex technology or seemingly “dry” services, video can add the pizazz you need to explain or engage potential clients. How can you convert a lead who doesn't understand your business? Video is your chance to do a little “show and tell”. For National Association of REALTORS® Global, Sandstorm created this custom motion graphic to explain to REALTORS® the opportunities available when selling to global real estate buyers. By use of visual representation, it becomes more meaningful; it's now more than just statistical information.

[TIP] Make sure your video is in the right format. Animation is great for explaining complex ideas and processes. Live video encourages a human connection and lets you showcase your company culture.

2. Easy to like, easy to share

Here’s a crazy stat: Each minute, over 700 YouTube videos are shared to Twitter. One could say the idea of sharing is embedded in all of us. And this idea of garnering views isn't just for B2C either, consider the B2B video made by Corning explaining the myriad uses for their glass technology. Right now, it has over 20 million views!

They've successfully taken content about glass manufacturing and made it shareable. What content do you have right now that's missing its opportunity to be shared?

[TIP] Don't take the “user” out of user experience. In order to get your video shared, make sure:

  • the content is relevant to your audience
  • it’s placed on the right page in your site
  • and uploaded throughout your social media channels.

3. There's always a link back home

After sharing your video, expect it to travel the web. Just be sure to equip it with plenty of links to drive viewers back to your site. Think of it as a traveling salesman who never runs out of business cards. When hosting on YouTube, add a link in the description and make sure your URL is at the end of the video. YouTube also lets you create floating links that direct viewers back to your YouTube channel or to subscribe. Consider using these to increase viewership of all your videos.

[TIP] Take advantage of YouTube Analytics to monitor and track video viewership.

4. Improves visibility in search engines

Search engines rank quality web sites higher. So what is considered "quality"? Video and other media content, low bounce rates and longer times on pages are all contributing factors. Living Direct Inc found that, "Consumers...spend 9% more time on a page when video is present." Having engaging video can improve your SEO by enriching the type of content on your site and ultimately keeping viewers on your site longer.

[TIP] Optimize your videos by incorporating keywords (title tag, description, etc). Also, consider adding subtitles (on YouTube) as they can help up your SEO.

5. Video is Memorable

Picture this scenario:

A prospective client (let's call him Mike—there are 3 Mikes working here!) is shopping around for services you offer. After looking at fifteen different companies, the information begins to blur together. Then, as Mike is explaining his favorite to the team, he finds himself explaining the services using what he learned in your video. You’ve not only planted yourself in Mike's memory, you've helped him make it easier to get the approval he needs to purchase. (Plus, sharing YouTube videos makes him look cool.)

It has been proven that viewers retain more information when visuals are implemented. Consider this as a tool to not only stand apart from competition, but also to be remembered at the end of the day. This video from Eloqua explains the future of revenue with voiceover and animation. It has all the right tools for success, and reaps the benefits accordingly:

[TIP] Empathy, story, and humor are three essential tools for creating memorable video, says Author Kevin Daum. Be sure to weave these elements into your video whenever appropriate.

Has you seen any of these benefits? Share your video in the comments!

This blog was posted by on January 24.
John Lombard

About the Author

John Lombard

John is an intern at Sandstorm.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
Bernard, Duke and Freddy mascots

A great novel has a cohesive plot, strong characters, and a reliable narrator. A great business model is no different. Your mission statement is the plot. Your employees are the characters that make the plot a reality. Then there’s the narrator, a voice that guides the reader through the material, someone reliable that relates to a specific audience segment...a mascot.

At this point, a lot of B2B companies may be saying to themselves, “Decent analogy, but how does any of this apply to me?  Mascots are a B2C tool, right?”  While it’s true that the most top-of-mind mascots are usually selling high-fructose corn syrup to children, B2B mascots are on the rise, especially in technology companies.

Those in the tech field are in a constant struggle between the creative and the professional. It makes sense to want to appear as a leader in your industry. But the need to be seen as professional by prospective clients can sometimes overshadow the need to effectively guide customers through the decision-making process. A brand mascot can be that guide.

The email marketing software provider MailChimp, is a perfect example of a B2B tech company overcoming the mascot struggle. Their mascot is a chimp named Freddy that delivers all the humanizing and brand awareness one could ask for, and in no way does he hurt the credibility of the company. Finding the balance between a silly character and an effective business tool can be tricky. MailChimp’s graphic designer wrote a very interesting blog post about how their mascot has evolved over time to become the narrator the company needed.

So what makes a mascot effective? Any good mascot does two things. It humanizes a company by creating a personal relationship with its customers, while also increasing brand awareness. In order to accomplish these tasks, the mascot must be an engaging, memorable character with an emotional design and a functional use.

This is Duke. He is the mascot for the software platform Java. According to their website, Duke was designed to represent a "software agent" that performed tasks for the user. He provides an interactive experience that goes well beyond what one would expect from a B2B business. As Duke’s popularity grew so did Java’s. He can now be found at every conference that Java attends, and since becoming “open-sourced” in 2006, anyone can design their own Duke. The current incarnation includes a jetpack and blue wings.

That personal touch and connectivity with a customer is what makes mascots a unique UX tool. In the world of B2B tech companies there isn’t a lot of levity. Giving your customer a real face to interact with (especially if that face is furry) can go a long way to improving their experience.

LogMyCalls.com (now Convirza) is a call tracking platform. They specialize in analyzing and tracking phone calls for businesses. But take one look at their website and you’ll soon find that those calls aren’t being analyzed and tracked by people or even by computers, but by a beaver named Bernard.  He adds a personal touch to the user’s experience. Sometimes all that a customer needs is a helping hand, or paw, or flipper.

Mascots like Bernard, Duke and Freddy provide brand recall that goes well beyond a logo or tagline. Because they are an active narrator of a brand, mascots can be continuously weaved into the brand’s story. As more and more B2B tech companies start effectively using new faces to relate to their customers, it begs the question...Who do you want to tell your story?


At Sandstorm Design, we create powerful brand experiences.... Learn more about Sandstorm Design's marketing services.

This blog was posted by on December 18.
Matt Chiaromonte

About the Author

Matt Chiaromonte

Matt is a copywriter and social media guru in Sandstorm’s Internship Program. With a background in marketing, journalism, and improv comedy, Matt brings equal parts knowledge and entertainment to our little corner of the Internet. When he isn’t generating social media content, Matt can be found enjoying pizza, podcasts, and many other things that begin with the letter “p”.

Drupal basics

So, you're going with Drupal, eh? Let me be the first to pat you on the back! You're joining the likes of The White House, National Association of Realtors, Forrester Research and Harvard, all of whom have websites built in Drupal. This open source content management system is a developer favorite because of its robust and flexible capabilities for managing large amounts of content.

As with all things, the first step you probably took was a Google search to learn the basics of Drupal. But that quick search may bring up some overwhelming results as a lot of the information out there is actually for the thousands and thousands of Drupal developers who have made this content management system what it is today.

But you're not a developer, and no one expects you to be! (That's what we're here for.) You're what we call a content administrator. And we've put together some of the Drupal basics you'll need, without all that developer mumbo jumbo.

CONTENT TYPES

There are three main types of content on a Drupal site - Basic Pages, Articles, and Webforms. Each type has its own set of fields and purposes:

  • Basic page - Just what it sounds like, a basic page. This content type will usually have fields like a main header, sub header and body content and is used for most of the pages on your site (like About Us, Products, or Services).
  • Articles - These can be used for blog entries or news items. They have fewer fields than a basic page and include special fields like author and date.
  • Webforms - This content type is for the forms on your site, like Contact Us.

MENUS

Every site needs some form of navigation. The menus let you take the different pieces of content on your website and organize them in an outline. The main menu, for example could be made up of a few basic pages like About Us, Products, and Services, and a webform for your Contact Us page.

BLOCKS

Blocks are smaller chunks of content that might show on a page but wouldn't be part of the content type. For example, you might have a callout on all the pages of your site. If this callout is a block, you can edit it once and the changes will show on every page.

CONTENT + MENUS + BLOCKS = YOUR WEBSITE!

When you take these different pieces and add them together, they make up your website! Look at the example Drupal website below and see if you can identify the different elements:

Drupal Basics: Example Drupal 7 Website

 

BASIC PAGE CONTENT

Although we call it a basic page, not everything on the page is part of the basic page content. Notice in the image below that the basic page content only takes up the center of the page...

Drupal Basics: Basic page content

 

MENUS

That's because the rest of the information on the page is either a menu or a block. There are three menus on this page—the main menu on the top left, the secondary menu below that and a utility menu in the upper right corner.

Drupal Basics: Menus

 

BLOCKS

Finally, the callout on the right is a block. It would be edited separately from the basic page content in the center, and the changes would be carried over to any other pages on the site that include the block.

Drupal Basics: Blocks

There you have it, now you understand content types, menus and blocks! The basics of Drupal are easy to grasp, and once you log in and start updating, you'll love the ease and flexibility of it. Of course, if you ever need more than content updates, our Drupal developers would love to work on your website!

This blog was posted by on March 16, 2012.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

When Adobe announced their decision to stop Flash development for mobile devices, we certainly weren't surprised. It's been a year since we've had any requests for Flash of any kind. But if you've been hearing that this is the end of Flash altogether, don't think that means it's time to toss it if you've got it.

If it ain't broke, don't fix it

When styling practices started moving away from tables-based layouts (way back when) there was a rush to convert anything and everything to tableless layouts with CSS. While many sites really did need to overcome some huge inefficiencies, others that were working perfectly fine in tables underwent redesigns just to be able to say they were now up-to-date. In reality, they could have waited until the need to change arose.

While mobile is growing and eventually we'll all want to have our sites accessible from any device, that doesn’t mean we all need it immediately.

Analytics

Check your analytics. If you don't have a very large mobile audience yet, and you're already using Flash effectively—then keep it! There's no reason to get rid of a perfectly wonderful experience built in Flash if your audience is accessing it just fine.

HTML5 for Mobile

If after checking your analytics you find that you do have a growing mobile audience, then HTML5 is the way to go. Along with Adobe's Flash statement, they also said they would be contributing to HTML5 for mobile. It’s universally compatible with mobile devices (iPhone, Android and beyond). The downside is that it isn’t completely functional in all desktop browsers yet.

Beyond the web site

Let's not forget, Flash isn't just for web sites. It's been used to create some amazing applications for use at tradeshows and conferences. And the great news is that these applications aren't affected by the mobile barrier, so Flash is still a great option for creating them.

 

At Sandstorm, we love the beautiful interactive work that has come from Flash. The Johnny Cash Project is one of our favorites. We even built an interactive conversation for a large insurance company. And while we'll always have a soft spot for Flash, we’re also extremely excited about the opportunities HTML5 creates. Regardless of the technology, we're just happy to be building powerful interactive experiences.

This blog was posted by on January 17.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

this file was posted under: 
This blog was posted by on October 5, 2011.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 

Not too long ago we explained why your logo is not your brand. However, sometimes there is a brand so strong the only thing missing is a logo. Consider human rights. It is a cause that touches every part of the world yet lacks a single symbol to represent it. Until now, of course. The human rights logo design competition has come to a close and the winning logo is beautiful. It brilliantly blends two universal symbols for humanity and peace: a hand and a dove. The new identity is reminiscent of the peace symbol, which does not belong to any company or organization, but rather stands as the symbol for all things peaceful. Only time will tell if the world adopts the human rights logo with the same enthusiasm. Learn more about the Human Rights Logo Design Competition and download the logo.

This blog was posted by on September 27.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

During Part 1 of this two-part interview series, Patrick McNeil talked with Sandstorm Design about design trends, industry standards and the future. This time around McNeil shares his thoughts on typography, social media integration and responsive web design. McNeil is a web developer with an eye for design, and the author of the Web Designer’s Idea Book series. His next book, The Designer’s Web Handbook, will be coming in the summer of 2012. Be sure to also look for his recently released Web Designer’s Idea App, which compiles his first two books into an iPad app.

SD: What are your thoughts on the advancement of typography on the web?

PM: I definitely think it’s exciting because it brings a lot of basic options and beauty to the web. Typography can really enhance or kill a design and so its nice that we have a growing range of options to implement cool type and even better control over how it looks in general...The more control designers have, the better off the end result is.

SD: On the same topic of control, what do you think of the social media APIs and widgets that designers might not have as much design control over?

PM: Yeah, like the standard Facebook box that just looks like total poo...You can add a Facebook “Like” button in any way you want. It can look any way you want. But if you want to put that flow of what people are saying, then you’re a little stuck because it’s just ugly. I think sometimes it’s about tradeoffs. And sometimes it’s about how far you go to program something to make it just look awesome.

SD: What is an issue the web design industry has yet to solve, that you would like to see web designers tackle?

PM: The biggest shift, even as a result of the whole responsive design movement, is just fully accepting that the web is not print. For how many years have we worked our butts off to make a web site render the exact same across all browsers? And responsive design blows this up because all of the sudden you’ve got tablets, you’re thinking about netbooks different, and you’ve got smartphones, and you’re even thinking about people seeing it on their TV. All of the sudden, by the basic definition of it, you’re required to not think that it’s going to look the same everywhere.

In that sense, it’s not print. You print a brochure or a business card—you can print 10,000 copies—it doesn’t matter what you do, where you go, its going to look the same. I think that’s probably the biggest thing I see people moving past in this time in the web, really forcing that issue.

So I’ll be glad if everybody else gets on board and just accepts that things look different in different interfaces or devices. We just have to embrace each of them for the opportunity that they create.

SD: Would you say that’s the web design industry’s biggest success recently?

PM: I think that combined with some of the advancements in typography. They have really been potent. Because when you think about displaying the same site in multiple ways and then you combine that with better techniques for controlling typography and less need for images, or even for sIFR where you’re replacing it with Flash. The more that happens in the browser it just means that you can cater those things to individual devices better…I think we’re seeing pretty powerful results.

-----------

We really enjoyed talking with Patrick McNeil, and are looking forward to the release of the Designer’s Web Handbook. At Sandstorm Design, we work as a team to create powerful brand experiences supported by user research and a strategic marketing approach. We'll help you stay ahead of the curve with custom web solutions that are one step ahead of your competition.

This blog was posted by on August 8, 2011.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

We recently logged onto Skype from our Chicago office for a conversation with web developer and web design lover, Patrick McNeil. He is the author of the Web Designer’s Idea Book series, and his latest book, The Designer’s Web Handbook, will be coming in the summer of 2012. He has also recently released the Web Designer's Idea App, which compiles his first two books into an iPad app. We talked design trends, industry standards and more. The following is the first part of our two-part edited conversation, so be sure to check back for the second half of the interview!

SD: You’ve been following design trends for a long time. Which ones do you believe have the strongest staying power?

PM: [The trends with the strongest staying power] are definitely ones that aren’t trends any more, they’re just normal ways of doing anything. I guess at some point in the history of the web putting the logo in the top left was a trend, and then it just sort of became the norm. One that you noticed popped out a couple years ago—I always called it the pitch—on a homepage you have this nice, clear, bold text that basically sums up what a site does. At some point people started doing that and now it’s just what you do so that people know what the heck they’re looking at… This new trend became a norm and now it’s a fundamental part of every site.

SD: Are there any trends that you don’t like, that bother you?

PM: [Laughs] Yeah, every trend kind of goes through that for me. For example in the whole web 2.0 craze everybody was putting badges on their sites—those little starry badges—and it was kind of like, God that’s annoying. At the time it's just part of what you’re doing but as you look back you’re just like, I’m so glad that’s over. The irony is now you can still use them; people just use them when it actually makes sense. Most annoying trends eventually fade away and then just resolve to what they should have been in the first place—which is very functional.

SD: Which sites have web designers been able to look to consistently for industry standards?

PM: I actually think there is an overwhelming amount of design work that’s not necessarily mainstream or the big name stuff, it's just normal designers doing their job everyday. And in a lot of ways that’s what fills my books. I don’t focus on the facebooks or the amazon.com type of stuff because we all see that. I much prefer to focus on small studios or lesser-known resources…That’s been most definitely the source for me over and over—the unknowns.

SD: If you could give web designers one ultimate challenge for the future, what would it be?

PM: Learn to code a little bit. [Laughs] A lot of people disagree with that. I don’t expect designers to be full-on developers and coders but I think that the people who are getting the most fanfare as awesome designers can also code. They just understand both sides of the coin and how to work with the medium the best, essentially.

--------

We love Patrick's books, and can't wait for the Designer's Web Handbook to be released. At Chicago-based Sandstorm Design, our entire team works closely to create powerful brand experiences supported by user research and a strategic marketing approach. Let us help you stay ahead of the curve with custom web solutions that are one step ahead of your competition.

This blog was posted by on July 25.
Karen Boehl

About the Author

Karen Boehl

Karen does a little bit of everything – webmaster, social media manager and search engine optimizer. She can most often be found on Twitter, in the Usability Lab, or happily buried in the Drupal admin menu.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 

Pages