UIEtips: Atomic Design

Jared Spool

January 14th, 2014

It’s quite common for designers to develop design systems and libraries of patterns. A designer can save a considerable amount of time if they develop a reliable design system. One that goes beyond colors, fonts, grid etc but rather focuses more on how the various elements and parts become a whole. In today’s UIEtips, we feature a post from Brad Frost where he explains a methodology for creating design systems. It’s called Atomic Design. It’s a term rising in popularity.

We’re fortunate that Brad is giving a daylong workshop at this year’s UXIM conference in Denver, April 7-9. He’ll show you how your design team can establish a practical foundation to make flexible, adaptive UIs. Learn more about Brad’s workshop, Using Atomic Design to Create Responsive Interfaces.

Here’s an excerpt from the article:

The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

Read the article Atomic Design.

Does your company build interfaces using atomic design patterns? Tell us about it below.

Websockets and Why Designers Should Learn To Code

Jared Spool

January 9th, 2014

HTML5 has an awesome feature that’s now gaining attention from designers: Websockets. It’s a way to create a persistent communication channel between the client and a server, without using page refreshes or the asynchronous mechanics behind AJAX. Think much faster communications, because it’s not establishing a new connection for each round trip.

Look at this cool Racer demo from Google, showing race cars racing across multiple devices, with no noticeable lag when the cars jump from one device to the next. Imagine moving messaging, data, or anything else at that speed.

Real time updated stock prices, auction bids, or other fast-changing data. The limit is your imagination.

Here’s the deal though: because it’s new, each browser implementation is somewhat idiosyncratic. The Racer demo works in Chrome, but may not work elsewhere. Making websockets work can be finicky. It won’t always be that way — the browsers will eventually fall into line. But for now, it’s a difficult thing to get it all to work.

Here we are with a great, powerful tool. If we want to take advantage of it, we need to dive in and start playing. We need to see what it can do and what it can’t. We need to learn it like an artist learns their paintbrush, paint, and canvas.

Websockets are just one reason why smart designers are taking the plunge and learning to code. With some simple coding skills, these designers can start playing with websockets and see what they are all about. They can work up simple demos and prototypes to test out ideas. They can get their coworkers excited about exploring these new technologies too.

Learning enough code to play around with websockets isn’t about learning production-quality coding skills. It’s tinkering in the garage, not building a new car for Toyota. That’s all that’s necessary here. Enough code to learn what the tools can do and speak intelligently to our peers in development.

Designers don’t need to learn to code. But those that do now can start playing with things like websockets.

Still not convinced? Take everything above and swap in “media queries” for “websockets.” That’s where responsive design started 3 years ago. Remember, it was designers like Ethan Marcotte and John Allsopp that got everyone excited about what responsive design was all about. And that started by playing with CSS tools like media queries.

Designers don’t need to learn to code. However, designers that learn to code will be the ones leading us to better user experiences.

UIEtips: Taxonomy-driven Content Publishing

Jared Spool

January 7th, 2014

The term for disorganized content throwing off your user experience is called content sprawl. To help you solve this problem, we’re publishing an excerpt from an article by Stephanie Lemieux and Michele Ann Jenkins of Dovecot Studio Inc. In it, they suggest taxonomies are perfect allies in the mission to tame the content chaos.

If flexibility in content publishing is a key goal for your team, then it’s time to try taxonomy-driven design. On January 9, Stephanie will show you how when she presents our next virtual seminar,
Managing Content Sprawl.

Here’s an excerpt from the article:

If you’re using a taxonomy to tag your content, you can really begin to leverage its structure to not only keep your site fresh and reduce manual content management, but also to simplify the way users navigate your content.

Taxonomy-driven content publishing (also referred to as search-driven display) allows you to dynamically retrieve and display content on a page based on specific taxonomy or other structured fields enabled within your content. A content display block (or entire page) is programmed to perform a search on one or more taxonomy tags or other fields selected in the configuration. This content is dynamically loaded when the page is accessed, eliminating the need for a content manager to manually assign the content to a particular page.

Read the article Taxonomy-driven Content Publishing

How does your organization use taxonomy to manage content sprawl? Tell us about it below.

Jason Grigsby – Responsive Web Design with Mobile in Mind

Sean Carmichael

January 7th, 2014


[ Transcript Available ]

Jason Grigsby

Jason is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Jason’s and 5 other workshops, visit uxim.co.

With the mobile web, specifically m dot sites increasingly becoming a thing of the past, responsive web design has become common practice. The ability for your site to display across screen sizes and devices, reduces development time and allows for one design to work anywhere. However, this shouldn’t signal a shift away from mobile-first thinking.

Jason Grigsby, of Cloud Four, believes that there are considerations that responsive design alone doesn’t address. The total experience of your site is more than just what it looks like. Simply using media queries to optimize your site’s design for different page widths is not a viable solution. Page weights, image sizes, and network speeds all need to be factored into the equation.

In Jason’s mind, performance is a key differentiator. He says that you can have a beautiful design or the perfect user experience, but if your performance is bad, people won’t use it. Sites that look good and work well on the desktop may feel slow and bloated on a mobile device. Starting with performance in mind and considering mobile-first avoids these problems early in the process.

Recorded: December, 2013
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

Coding Prototypes, Even if You’ve Never Tried

Jared Spool

January 6th, 2014

An hour of prototyping can save days of meetings and misunderstandings. Collaborate with developers earlier to refine interactions; your team — and users — will thank you for it. Let Nate Schutta take the scare out of using JavaScript and jQuery to build mobile prototypes, using HTML and CSS in a text editor, and debugging what you’ve built. Come and see for yourself that you don’t need JavaScript expertise to build a simple application.

Nate’s workshop, Coding Prototypes Even If You’ve Never Tried, will cover:

  • Demystifying JavaScript
  • Digging into jQuery Mobile
  • Using jQuery Mobile
  • Building a mobile app
  • Fitting the parts together
  • Showing your vision to developers
  • Stepping beyond basic CSS and HTML

Nate is one of those people who makes everyone feel comfortable. His expertise in prototyping comes from working with cross-functional teams. As a senior software engineer, Nate focuses on making usable applications — the ideal end-result of any project.

He’ll teach you how to:

  • Use browser tools and a text editor, comfortably
  • Debug what’s screwed up
  • Address often-overlooked pieces like error messages
  • Use the not-so-mysterious dollar sign ($) with ease
  • Understand and navigate a document library
  • Simulate a mobile interface right on your laptop

Nate Schutta will help you build out the pages for a prototype, use tools like lists, create a detail page, decide how to handle transitions, and experiment with different themes. After his workshop at UXIM14 on April 9 in Denver, CO you’ll have everything you need to get your mobile prototype up and running.

See you at UXIM14!

Nate Schutta – Coding Mobile Prototypes

Sean Carmichael

January 6th, 2014


[ Transcript Available ]

Nate Schutta

Nate is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Nate’s and the other 5 workshops, visit uxim.co.

The “designer who can code” has been dubbed the elusive unicorn of the UX realm. But more important than being equally good at both skill sets is being able to communicate with the other side. If designers understand even a little bit about code it breaks down silos within the team. Greater communication leads to shared understanding. This collaborative environment allows for faster iteration and better design.

Nate Schutta believes that prototyping in code helps solidify this communication. Being able to visualize and demonstrate your ideas not only provides for greater understanding, but a faster workflow. Even though this code won’t make it into the final product, it gets a representation of the final design in front of users and stakeholders.

Prototyping in code isn’t as daunting as it may sound. Nate believes that making the transition from using HTML and CSS to exhibiting functionality in JavaScript and jQuery isn’t all that difficult. Even if you’re throwing something quick and dirty together in less-than-production-ready code, the important thing is to get that feedback early and iterate on the design.

Recorded: December, 2013
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

UIEtips: Design is the Rendering of Intent

Jared Spool

December 30th, 2013

In this week’s TIPS, I’ll begin explaining design as “the rendering of intent.” Simply put, this is when the designer imagines an outcome and puts forth activities to make that outcome real.

Here’s an excerpt from the article:

What if the team had approached the design with a different intention? What if they had intended that users would get through the sign-up process without ever seeing an error message?

Designer extraordinaire, Robert Fabricant once said, “Behavior is the medium of design.” When we encounter a user’s behavior that isn’t what we’ve intended, we change the design until we see what we want.

An implication of this definition for design is how it changes our notion of who is a designer.

Read the article Design is the Rendering of Intent.

How do you assure your design process is a way to come to a single intention? Tell us about it below.

Aaron Gustafson – Designing Across Devices with Progressive Enhancement

Sean Carmichael

December 30th, 2013


[ Transcript Available ]

Aaron Gustafson

Responsive web design seems to come up in every other discussion or article about UX these days. And rightfully so as it’s an elegant way to make sure your design adapts to the multitude of devices on the market. But with the Internet of Things looming, it’s becoming more than just the visuals of your site that are of major concern. How your content displays on a car dashboard, “can a watch handle this page weight?”, or “is this refrigerator JavaScript enabled?” are not unrealistic issues moving forward.

Aaron Gustafson believes that progressive enhancement can go a long way to addressing these questions. In his virtual seminar, Designing Across Devices with Progressive Enhancement, Aaron discusses strategies for layering the experience. By thinking of the interface as a continuum, it can not only adapt to devices, but can become more robust with browser capabilities.

The audience had a lot of questions for Aaron during the live seminar and he joins Adam Churchill to address some of those in this podcast.

  • How can you approach pages where JavaScript is required to complete a task?
  • How do you prioritize design considerations?
  • Are semantic ID classes useful?
  • Are there performance issues with lazy-loading?
  • When can we stop supporting older browsers?

Recorded: December, 2013
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

UIEtips: Explore These 7 Great Podcasts from 2013

Jared Spool

December 23rd, 2013

This past year we featured some fantastic podcasts from a variety of UX luminaries. It was difficult to cull the list but we managed to do just that. Here for your listening pleasure are our favorite podcasts from 2013.

Designing Microinteractions

Dan Saffer photoDo you think about the ringer on your phone and the ability to turn it off? Dan Saffer uses this example to kick off his book Microinteractions. Silencing the ringer on your phone is a common feature. If that feature is clunky or hard to find, it interferes with needing to silence it quickly, in a crowded movie theater for example. These tiny interactions that surround the main functionality are integral to rounding out the entire experience.

Listen to the podcast

Lean UX: Escaping Product Requirement Hell

Jeff Gothelf photoAssumptions tend to be the downfall of many research projects. Jeff Gothelf suggests starting with an attitude that you’re testing a hypothesis which leads to a more open discussion. The main thing is, hypotheses, just like design, can change. Being flexible and iterative in your design process encourages an environment of collaboration.

Listen to the podcast

When Responsive Design Meets the Real World

Jason Grigsby photoResponsive web design allows the notion of “one web” to be a reality. Designers are increasingly able to sell to their organization the idea of delivering content to multiple platforms. Putting it into practice is another story. Jason Grigsby, co-founder of Cloud Four, says that it is easier to sell the idea of responsive web design than to do it well.

Listen to the podcast

Prototyping for Mobile Designs

Kelly Goto photoBuilding a prototype is a great way to test your design early on with users. Whether you choose to go for a high-fidelity representation, or go lo-fi with paper, you can learn a lot about the usability of your site. Often, teams are concerned with which technique or tool to use because of the litany that are available. Kelly Goto, founder of Gotomedia, suggests that the importance of the tool lies more with when you use it than why.

Listen to the podcast

Using Scenarios to Design Intuitive Experiences

Kim Goodwin photoScenarios can represent the ideal picture of a user’s experience with a product or service because you can see how and when they’ll interact. However, a scenario is often missing the details of what’s going on at this moment in time and that can be a sticking point. This is where the value of the journey map emerges. Kim Goodwin has years of experience teaching teams how to create and work with personas and scenarios.

Listen to the podcast

Adapting Your Content for Mobile

Karen McGrane photoContent touches all aspects of a design. Having presentation independent content allows for it to adapt to different screens and devices. Karen McGrane suggests that having the specifics of how the content will be structured in place first, allows for the freedom and flexibility to make the right design choices. Karen says that thinking about content first, over how it will appear, helps ensure you’re communicating the right message.

Listen to the podcast

Accessibility as a Design Tool

Derek Featherstone photoAccessibility is important, but somewhere along the way it got an undeserved reputation for being ugly, costly, and driven only by technical-compliance requirements. Making it an integral part of your design early creates something that is beautiful, inexpensive, and user experience-driven. Derek Featherstone of Simply Accessible believes that implementing accessibility into your designs will flat out make for better design.

Listen to the podcast


Share Your Thoughts with Us

What were your favorite podcasts in 2013? Tell us about it below.

Managing Content Sprawl

Adam Churchill

December 20th, 2013

Information architecture is more than just navigation or structure. Instead, it’s how your users find you, understand you, and continue interacting with your company over time.

If flexibility in content publishing is a key goal for your team, then it’s time to try taxonomy-driven design.  On January 9, in her virtual seminar, Managing Content Sprawl, Stephanie Lemieux will show you how.

Join us for this seminar if you:

  • Want to create dynamic content that works across devices, contexts, layouts, and user networks
  • Realize that you don’t have to be bound by physical structures—especially in SharePoint
  • Are ready to make your content more meaningful, helpful, and flexible

Save your team’s spot, and kick off the year with one of our most popular presenters. Or, register your team for all 9 virtual seminars in the first half of 2014.