We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish
useful books and run
friendly conferences — crafted for pros like yourself? E.g. new
Smashing Book 5 features smart responsive design techniques and patterns.
This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann.
Have you read Where the Wild Things Are? The storybook has fluidity of content and design figured out. It goes that one night, protagonist Max “wore his wolf suit and made mischief of one kind or another.” He hammers nails into walls, pesters a small dog. Author Maurice Sendak doesn’t explain these hijinks textually for the reader. The mischievous acts are illustrated on the right-hand pages. Readers make the narrative connections for themselves.
The words and pictures depend on each other for completeness. Web designers can employ the same complementary dependence of graphic and text in their own work. It encourages a sense of belonging and can create strong first impressions, which are often essential to effective Web design.
There are many ways to skin a redesign (I think that’s how the saying goes). On a philosophical level, I agree with those who advocate for realigning, not redesigning, but these are mere words when you’re staring a design problem in the face with no idea where to start. This article came out of my own questions about how to make the realignment philosophy practical and apply it to my day-to-day work — especially when what’s needed is more than a few tweaks to the website here and there.
I propose an approach to redesign through realignment, by using a framework adapted from Edward Tufte’s principles on the visual display of quantitative information. But first, a little context.
The country selector. It’s there when you create an account for a new Web service, check out of an e-commerce store or sign up for a conference. The normal design? A drop-down list with all of the available countries. However, when conducting a large session of user testing on check-out usability (which we wrote about here on Smashing Magazine back in April 2011), we consistently found usability issues with the massive country selector drop-downs.
Jakob Nielsen reported similar issues as far back as 2000 and 2007 when testing drop-downs with a large number of options, such as state and country lists. So, this past summer we set out to redesign the country selector. This article focuses on the four design iterations we went through before arriving at the solution (free jQuery plugin included).
If content sits at the top of the food chain, why do we spend so much time talking about the finer points of design? Every day we debate, experiment with and discuss topics that easily fall into the category of aesthetics, enhanced functionality and layout; in fact, relatively rarely do we talk about content. Nevertheless, even though we should concede that content is king in this realm, this doesn’t mean that design should be devalued.
It may seem logical that the user experience lives and dies by how the user relates on an emotional level to the content on a website. But this is not necessarily the case. From a design perspective, our job is to maximize the value of every visitor, whether they love the content or hate it. The role of a UX designer is not always to make everyone feel all warm and fuzzy inside.
It appears to be a reader’s market. More written content is freely available than ever before, accessible in just about every format you could imagine. If you want it on paper, you’ve got it. On screen? What size, friend? We can shrink, stretch and stitch it all together every which way because, really, we’re just talking about words here… Or are we?
As soon as I ask that question, several others quickly follow. Is content so flexible? Is content’s most basic unit the word? Or is it, perhaps, the message? In today’s reader’s market, what of the writers and the designers who make reading possible? And are we building tools that honor their work, too? These questions didn’t randomly pop into my head one day. Nor did a design problem get me thinking along these lines. It was while reading — for pleasure — that I noticed something was wrong.
Since the dawn of the Internet, the demand for good design has continued to skyrocket. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. The Internet is a great designer’s playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy.
Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic. Infographics are visual representations of information, or “data viz” as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers.
You might consider yourself knowledgeable, but you’ve probably never heard of this powerful communication and design technique that I’m about to share. I’m sure you’ve seen it in practice but never knew it was working on you — that’s how good it is. I’m here to shed light on this technique so that you can use it as a approach to your design or writing.
See what I did there? I introduced you to dissonance by using the technique itself. If used correctly, it can enhance your approach to design and copywriting in certain projects. Welcome to designing with dissonance!
In your pocket right now is the most powerful “remote control” (as Drew Diskin put it) that has ever existed. It is no ordinary remote control. It can harness everything that all of the previous mass media (television, radio, Internet, etc.) can do. People aren’t using them just for simple entertainment or for phone calls. They have become the hub of our personal lives.
It’s no longer just about the evolving power and capabilities of these devices. It’s about us and how we, too, are changing. The user’s expectation of a great experience is the new standard. It falls to us as UX professionals to apply our skills to make this happen on the vast array of devices out there. It’s not always easy, though. The mobile realm has some unique constraints and offers some interesting opportunities. While covering all of the nuances of mobile UX in one article would be impossible, we’ll cover some fundamentals and concepts that should move you in the right direction with your projects.
It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.
The most helpful errors to track are form-field errors and 404 pages. Form-field errors can be captured after the form’s validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (We’ll be using Google Analytics in this article, but you can apply these concepts to many visitor-tracking tools, such as Omniture and Performable.)
Texture is becoming integral to design. It’s gone beyond being a trend — it’s now a simple and effective way to add depth to a website. Wielding the power of texture is a great responsibility. It increases the effectiveness of websites and is a quality tool in the arsenal of designers. It can guide the user’s eye and emphasize the importance of key elements.
However, texture has long been synonymous with “dirty” or “grungy” design. Its overuse can be seen throughout the world of music group websites and has left a bad taste in the mouths of designers. Due to its frequent misuse, its benefits have long been overlooked. Texture can bring a website together, but should not be the main focus.