All posts tagged “Practices”

Free Ebook: Interaction Design Best Practices (Words, Visuals, Space)

Words are themselves interactions. Visuals are equally important to the copy, since the experience suffers if the words and appearance do not complement one another. Finally, space creates the context for interactions with the right look, feel, and relationship between all elements.

Interaction Design Best Practices: Words, Visuals, Space includes visual case studies, expert advice, and real-life interaction design examples from some of today’s top companies. You’ll learn how to design for the human brain, how to match perception to reality, how to treat white space as a design tool, and much more.

While interaction design can be highly theoretical, this book is written with action in mind. Every chapter includes tips based on real-life experiences.

Free Ebook: Interaction Design Best Practices

The 7 chapters of the e-book features:

  • Best practices from 30+ companies including Apple, AirBnB, Google, Facebook, Etsy, Virgin America, Dribbble, Hootsuite, and Behance.
  • Practical explanations of how to apply white space, size/distance, microcopy, visual design, and many other IxD disciplines.
  • Advice from experts like Dan Saffer, Jared Spool, Stephen P. Anderson, Rachel Nabors, and others.
  • Plenty of visual examples to illustrate every piece of advice.

To learn how prototyping can help perfect interaction design, check out the companion ebook The Ultimate Guide to Prototyping.

Check out the free ebooks, and feel free to share if you find them helpful (the 2nd book is unlocked when enough shares are reached).

Download Interaction Design Best Practices

The post Free Ebook: Interaction Design Best Practices (Words, Visuals, Space) appeared first on Speckyboy Web Design Magazine.

Speckyboy Web Design Magazine

Making and Breaking UX Best Practices

Imagine a website with a beautiful, enticing, full-screen image, where a transparent button leads to pages of well constructed, adaptive content. The navigation functions perfectly across devices, switching from a horizontal to a mobile menu at just the right times. Unfortunately a large portion of the potential audience lives in Africa, and won’t have the bandwidth to use it. Does that mean our best practices failed us? No—it means that an experience is made up of more than the sum of its parts.

A good user experience, like a measurable ROI, doesn’t typically happen by accident. It is the result of careful planning, analysis, investment, and continuous improvement.”
Jeff Horvath

Best practices in User Experience provide the framework for a repeatable process, a way for us to deliver the value of user experience in a reasonable amount of time, without making the mistakes of those who followed in our past. They allow teams to execute with a fair amount of certainty that they are doing the right thing, in the right order.

But while following best practices sets the foundation for implementing good UX, we must avoid letting the best practice substitute for doing the work. When skill, time or budget are limited, it’s easy to want a shortcut to positive UX. What’s more important than the tool, technique or best practice is what the user experience practitioner brings to the table: empathy for the users of the system, and the knowledge that best practices, patterns, and templates are valuable guidelines—not rules.

It’s easy, for example, to sell a client on the benefits of flat design; flat design promotes simplicity and through it’s crispness and clarity can handle more complexity. It reduces the problems of skeuomorphism and easily handles responsive web techniques. But it would be a poor decision to anchor the project to flat design without first learning about the project’s objectives and the prospective audience.

Specifically let’s explore how interaction design patterns, style guides, visual design trends, and design templates can influence the user experience, and with all of these tools in place, how we can to create products that fulfill each individual requirement for an excellent experience, but don’t on their own solve the user’s needs.

Interaction Design Patterns

Interaction design patterns can be thought of as the summative learnings of what has worked well in the past. These patterns illustrate the best practices of the interactive experience. One example of a popular design pattern is the hamburger icon. It was created by Norm Cox for the Xerox Star, which was one of the first graphical user interfaces. The hamburger icon went into hibernation for several years, but gained popularity with the emergence of the smartphone and the need to conserve screen space. Now the icon is used to represent a menu on many responsive, mobile web and smartphone applications.

There are obvious benefits to using an established design pattern. Patterns distill the collective wisdom and testing of past products, while providing a common language for teams. Design patterns reduce product development time and cost, and provide a consistent user experience. Having access to interaction design patterns makes the process of designing an interface easier.

However, we can’t always take design patterns at face value. To quote entrepreneur and design specialist Jeffrey Zeldman, “design considerations beat design patterns. Test and decide, don’t just copy things like the hamburger icon.” It’s often worth a little extra research to find out if there is science to validate the design, and if not, if there is an opportunity to conduct a usability study of the pattern.

In the case of the hamburger icons specifically, James Foster, a developer at ExisWeb conducted a study of the hamburger icon with 240,000 users. He found that only .6% of iOS users and .25% of Android users actually clicked the icon—meaning perhaps it’s not as easily understood as its design pattern status makes it seen. We can never take for granted that a generic design pattern will be understood by our specific users.

Style Guides

Visual style guides, or corporate brand standards, aid in design choices and steer brand consistency. Web designer Peter Hornsoby’s article, Principles Over Standards, discusses some problems style guides and design standards can cause for a user experience, specifically when using a style guide as a substitute for design research. Design standards often represent the solution to a problem that occurred in the past, as opposed to a solution to the current problem an organization is facing, and over time design standards become increasingly outdated.

The Human Interface Guidelines (HIG), for example, provide a style guide for developing web and mobile applications for Apple’s iOS. The HIG is very comprehensive and provides analogies understood by the Apple ecosystem of users. But the HIG doesn’t incorporate research into any one specific audience. The net result of the is that many of the first and second generation iOS apps were usable, but fairly generic-feeling. To avoid this trap, we can view our style guides as a starting point and not a solution.

I worked on a project once for a very complex responsive website. The visual design was created by an agency and most of the development work done offshore. The style guide articulated design standards for several breakpoints— 1200px, 1024px, 768px. and 320px—in great detail. When the first iteration returned from the offshore development team, we found that the site looked perfect at the specified breakpoints, but didn’t work at all for other screen sizes. The problem caused extensive rework early in the project. Both the agency and developers had done their job, but the website proved unusable to users on devices with display sizes not outlined in the style guide. We worked with the agency and development team to instead focus on the intent of the design, and translate that intention into a usable, fluid, responsive website.

One easy way to recognize when to deviate from the style guide is when the visual branding conflicts with an interaction design pattern. Take the US Airways app as an example. Most style guides will state that the company logo should appear in the upper left or right corner of secondary screens. However, the US Airways logo includes a flag, which looks very much like the hamburger icon when mimized and displayed in a corner: a clear usability concern. The US Airways iOS application attempts to solve this problem by removing their logo on secondary screens, contrary to most style guides, but appropriate for their needs.

The US Airways mobile website.

On the US Airways Mobile Website, the logo looks a lot like the hamburger menu icon.

Visual Design Trends

Visual design trends, such as flat design, full-bleed hero images, cards and typography as design can influence the visual design choices we make. But trends, like patterns and process, are not hard and fast rules, and they are not a substitution for understanding the needs of the user.

Let’s explore this topic further through the flat design trend. Microsoft made the trend famous with their release of Windows 8. They advocated a minimalist approach to UI design, with no added effects, a good use of color, and a focus on typography and having a clean layout. The concepts are great from an experience and usability perspective, so much so that flat design is practically synonymous with Web 3.0.

That said, flat design isn’t the right choice for every situation. For example, flat links and buttons may look clean, but Jakob Nielsen conducted a study on Windows 8, and found that when the links in a design is flat, users often didn’t realize they are clickable.

Where can you click? Everything looks flat, and in fact ‘Change PC settings’ looks more like the label for the icon group than a clickable command. As a result, many users in our testing didn’t click this command when they were trying to access one of the features it hides.”

Donald Norman explains this by referring to visual affordance, or how the size, shape and texture of an object impacts how the user perceives and understands it. With this in mind, it’s perfectly fine—even necessary—to break a from the accepted design trend if the trend poorly impacts the user experience. In this example, the designer might choose to add a slight gradient or shadow to a button, even if it means diverging from the flat design standards, to make the button appear more actionable.

The Windows 8 screen.

Design trends should inform, but not steer the user experience.

Visual Design Templates

Themeable content management systems (CMS) and a global industry of visual designers provide easy access to sites such as ThemeForrest and TemplateMonster for downloading free or paid design templates. The templates often incorporate common interaction design patterns and follow industry trends. While a template is a great way to save time and money, there is no substitute for conducting proper user experience activities and creating a custom design. What’s more, saving money in the short-term may actually cost more in the long-term when the design isn’t connecting to the users.

When considering the use of a pre-made visual design template, some of the oft-cited cons include the likelihood of other companies using the same template, the limitations to customization, and the chance of baking-in bad SEO through a poorly crafted template. Of all these concerns, the biggest is that templates don’t take into account the unique needs of a specific audience.

We’ve already seen the necessity of considering user needs. In an extreme situation, consider the hypothetical website with the potential audience in Africa. A template may make beautiful use of imagery, and account for mobile needs, but it’s unlikely to accommodate for low-bandwidth phones—which is a fairly simple fix on a custom-made site! Long-term usability will always trump the “convenience” of a template.

Using Best Practices Responsibly

Best practices, patterns, and templates provide the benefit of delivering a repeatable process in a fast and flexible manner. As companies incorporate user needs into their projects, the push will continue to find better, faster, and cheaper ways to incorporate good UX. Yet delivering a fast, cheap and positive experience means knowing not only how to apply the best practices of user experience, but also when to break the rules.

Here are a few recommendations for UX professionals to use best practices responsibly.

  • Read and learn about the current visual design trends. AIGA, DigitalArts, Smashing Magazine and Dribbble are great places to start. Pay attention to what’s driving the trend—is it just the next thing, or are there user experience lessons being distilled through the trend? Understanding design trends allows for faster assessment during the creative process, and can help steer products away from becoming the next “one of many”.
  • Take time to understand the platform specific interaction guidelines. I recommend starting with the The Human Interface Guidelines. They provide the baseline of knowledge around iOS development, and a deep understanding of the HIG allows for easier conversations with developers when it becomes necessary to break the standard.
  • Continually balance the advantages of a best practice, pattern or template with the value of a higher-touch solution. When considering the time or cost savings, also weigh the impact to users or longer-term impact to business value by not creating bespoke solutions.
  • Finally, think about the concept of engagement. One way of thinking about engagement is through the idea of flow. UX researcher Dana Chisnell explains flow as the ability to increase engagement and add depth to an experience through responsiveness, affordance and feedback, clear information architecture, matching challenges with skills and providing minimal distractions. She has a great article, Beyond Task Completion: Flow in Design, that is worth reading to learn more about the concepts.

Ultimately, creating a positive experience is not about having best practices. It’s about putting those practices into the right hands.

The UX Booth

Free e-book: Web UI Best Practices

Great web UI design must strike a perfect balance between captivating aesthetics and effortless interactivity. Like an invisible hand, a web interface should guide users through the experience at the speed of thought.

Web UI Best Practices by UXPin explains techniques spanning visual design, interface design, and UX design. Visual examples of UI design are also shown from 33 companies including LivingSocial, Spotify, Skype, Apple, Skullcandy, and more.


The 109-page guide includes:

  • Advice from experts such as Luke Wroblewski, Jared Spool, Jakob Nielsen, Marcin Treder, and many others.
  • In-depth discussion and practical tips for UI elements such as color, contrast, spacing, navigation, typography, input controls, and more.
  • Explanation of preliminary steps such as creating user personas, prioritizing requirements, and creating visual hierarchies.

So check it out, and feel free to share if you find it helpful.

Download Web UI Best Practices →

For over 63 UI Patterns explained in a simple problem/solution format, you should check out Web UI Design Patterns 2014.

The post Free e-book: Web UI Best Practices appeared first on Speckyboy Web Design Magazine.

Speckyboy Web Design Magazine

The Ultimate Guide to Parallax Scrolling: Best Practices, Examples and Tutorials

The idea of parallax design is simply an awareness of movement. More specifically, the word ‘parallax’ is used to describe the perception of distance between objects while moving along a line of…

Click through to read the rest of the story on the Vandelay Design Blog.

Vandelay Design

Five Key Practices To Keep Your Creative Job Engaging and Avoid Burnout

In a way, each one of us is creative, and many of us are fortunate enough to be able to have creative careers as well. We are writers, designers, programmers, and creative tactical workers, and we…

Click through to read the rest of the story on the Vandelay Design Blog.

Vandelay Design

Five Key Practices To Keep Your Creative Job Engaging

In a way, each one of us is creative, and many of us are fortunate enough to be able to have creative careers as well. We are writers, designers, programmers, and creative tactical workers, and we…

Click through to read the rest of the story on the Vandelay Design Blog.

Vandelay Design

5 Best Practices for Single-Page UX Design

You’re reading 5 Best Practices for Single-Page UX Design, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

5 UX Best Practices for Single Page Websites

Everybody loves single-page websites. There is definitely some chemistry with this design trend. It has been around for quite a while, but it’s still on the rise and too many websites opt for it. A long time ago, having a single-page website was not something you would be proud of. Those were purely informative, “business […]

Advertise here with BSA


Social Media Best Practices

Want to promote your business successfully? Learn the basic social media strategies.

The worst CSS practices – and how to avoid them

Read more about The worst CSS practices – and how to avoid them at

I love reading articles and snippets to find the latest and greatest in CSS, but the reality is that many of us are on growing teams, dealing with the (sometimes) harsh fact that not all of our developers are frontend developers. If there’s a way to get our CSS better in the long run, it’s not by doing the bleeding edge of things (and then providing fallback after fallback), it’s, instead, focusing on levelling up our current resources, displacing the worst that we see, today.

Creative Bloq

Best Practices: Leading Brands and Promotional Websites

You’re reading Best Practices: Leading Brands and Promotional Websites, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Leading Brands and their Promotional Websites - Best Practice

Though it seems that such powerful, famed and instantly-recognizable brands as McDonalds, BMW or Samsung don’t need extra publicity since the names speak for themselves, they do face competition. They are fighting for the same potential customers as you are (and many others as well) with millions of dollars invested in advertising campaigns. For some […]

Advertise here with BSA