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. upcoming SmashingConf New York, dedicated to smart front-end techniques and design 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.
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.
Designers are visually literate creatures. We use visuals to express our ideas, whether by building wireframes, sketching interfaces or pushing pixels. As a result, the majority of knowledge captured when we design a product is some form of “corporate memory”: a combination of assets and documentation. This creation of visual artifact is widely regarded as our most effective means of communicating thought through a product. However, creating a product takes more than just documentation, and much of it is communicated not visually, but verbally.
Due to the growing popularity of iterative product development, the spoken word has become an integral part of the design process. The shift in focus from documentation to collaboration has put greater emphasis on communication. Now more than ever, there is a need to articulate a design “voice” during the early stages of conversation about a product, and to maintain it throughout the process — although this is easier said than done.
This is not a normal Smashing Magazine post. I’m not going to teach you something new or inspire you with examples of great work. Instead, I want to encourage you to complete a Web design challenge. I believe this will help to address a weakness that exists in many of our design processes.
If you complete this challenge, it will make it easier for clients to sign off on your designs, and it will improve the quality of your work. So, what are we waiting for? Let’s get started.
Metrics can be a touchy subject in design. When I say things like, “Designers should embrace A/B testing” or “Metrics can improve design,” I often hear concerns. Many designers tell me they feel that metrics displace creativity or create a paint-by-numbers scenario. They don’t want their training and intuition to be overruled by what a chart says a link color should be.
These are valid concerns, if your company thinks it can replace design with metrics. But if you use them correctly, metrics can vastly improve design and make you an even better designer. First, when I talk about metrics, I’m talking about making use of a couple of very specific tools, i.e. user analytics as well as A/B or multivariate testing.
I was a competitive road cyclist for four years. My bikes were good, but my race results were much less impressive. Instead of medals and trophies, all I had to show for it were shaved legs and a farmer’s tan. Regardless, on the road to becoming a competitive athlete, I followed a rigorous training plan with concrete goals. These goals were specific, measurable, attainable, realistic and timely. With this training plan, I was able to quantitatively and qualitatively assess my progress and adjust my routine to match.
In the years since, I’ve hung up my racing jersey and replaced it with a designer’s hat. While wearing this hat, I (and many others) have been told to “create a good user experience.” We’ve heard this in creative briefs, project kick-off meetings and critiques. It may have been a bullet point in a PowerPoint presentation or uttered by someone trying to sell a client or company on the value of their services. But there’s a fundamental problem with stating that your goal is to “create a good user experience.”
Anyone designing Web-based properties today requires a basic understanding of interaction design principles. Even if your training is not formally in human-computer interaction, user experience design or human factors, knowing the fundamentals of these disciplines greatly enhances the chances of your design’s success. This is especially true for visual designers. Many visual designers are formally trained in art school and informally trained at interactive agencies.
While these institutions focus on designing communications, neither typically provides a strong interaction design foundation. Having a broader skill set not only makes your designs more successful but makes you more valuable and employable (i.e. you become the unicorn). While in no way exhaustive, to get you started, here are five key tactics to understand and implement in your next project.
The entire process of designing digital applications comes with many challenges and decisions. For the majority of projects, you will be designing in somewhat familiar territory. But what happens when you have to design something to be used by hundreds of children around the world? How do you accommodate your design for kids of different ages and backgrounds? What special challenges emerge, and how can they be overcome?
For a project of this scale, the design process we follow might require modifications. These modifications would be to accommodate the needs of younger age groups and would shape the entire length of the project, from user research, brainstorming, interface design and interaction design all the way to the final stages of usability testing and user support.
Endless layers in Photoshop. Overstuffed image folders. That jQuery plug-in that has 12 files associated with it. Hundreds or thousands of individual pieces go into making a website. No wonder we go off the deep end when we can’t find a closing div — er, section tag.
We work with a ridiculously large number of things, and how we organize them (or choose not to) is often left to personal preference. But our messy habits result in confusion for the designer or developer who inherits your work. Does it really need to be this way?