webstack

(Note: Unfortunately, e-mail and RSS don’t support advanced layouts and features. If the graphics in this article look strange, you may want to read the article in your web browser.) When users apply filters to product lists, almost all sites confirm the choices where the filter was originally chosen — for example, by adding a tick mark to a filter option checkbox on a desktop site. However, during both desktop and mobile large-scale UX testing, the lack of an overview of applied filters caused issues such as slowing down the process of tailoring the product list and in some cases causing disorientation. In fact, 32% of sites in our benchmark of 60 top e-commerce sites don’t display an overview, a slight decrease from 40% in our 2015 benchmark. This article discusses the 3 issues that occured during large-scale UX testing with not having “Applied Filters Overviews”, outlines 3 solutions for desktop and 2 for mobile, and discusses 2 implementation considerations. Observed desktop a..

If you’re going to design for mobile, then it’s likely you’re going to need to consider the way that the device is used and the specifics of the device itself. There are some general principles that can help designers for mobile get started but don’t forget that these don’t replace the need for user research. They are guidelines not hard and fast rules. There are many things to consider when designing for mobile and while many are standard UX considerations; there are going to be mobile specific design considerations too. Are you going to integrate your mobile offering with your current offering? Will you use responsive design or adaptive design if you do? A lot of this will boil down to c...

What type of designer are you? Do you have a set of principles, checklists, or methods that guide your designs? Or do you prefer to start from scratch and analyze afterwards with a checklist? If you feel more comfortable looking forward, looking backwards– or if you’re a perfectionist who likes to do both – then this article will be useful to you.“Be yourself; everyone else is already taken''. Oscar Wilde [Tweet this] Do you like to have constraints on your design work?Most of us tend to think that constraints impede creativity. However, this is not necessarily the case given that our human tendency is to work around constraints and find creative ways to satisfy them. What about the excepti...

(Note: Unfortunately, e-mail and RSS don’t support advanced layouts and features. If the graphics in this article look strange, you may want to read the article in your web browser.) “It keeps coming back up to the very start. I would prefer if it went back to where I last left it.” When users are evaluating products, they often move back and forth between the product list, where they can see a few key elements of product information, and multiple product details pages. If users click into a product page having found the item interesting on a product list, then backtrack to the product list when they are done, they’ll be taken to one of two places in the product list: On most sites users are returned to the same place in the product list as they were originally — that is, the position of the list item they clicked on. However, on 13% of sites in our desktop and mobile benchmarks (amongst the world’s largest sites) users are returned to the top of the product list rather than to t..

When thinking about user research, many people primarily think of classic usability testing. While usability testing to ensure that your design is easy to use is certainly an important part of user research, there are many other types of user research that are essential to working in a user-centered process. First, we’ll dive into what user research actually is; then, we’ll create an overview of how you can use user research in your design process by listing the three most common reasons for doing user research—namely, to create designs that are truly relevant, to create designs that are easy and pleasurable to use, and to understand the return on investment of your user experience (UX) desi...

(Note: Unfortunately, e-mail and RSS don’t support advanced layouts and features. If the graphics in this article look strange, you may want to read the article in your web browser.) Inspirational images, common on homepages, category pages, and even headers on product listing pages, can be great at lifting the aesthetic appeal of an e-commerce site design. Indeed, our research shows that bespoke imagery is one of the biggest factors in positively influencing the user’s initial perception of the site, with 88% of our benchmark sites using inspirational imagery across the site. However, users seeking the specific products depicted — or to replicate the entire depicted look — can become frustrated when they are able to clearly see the product they want but are unable to easily navigate to them. “Users become frustrated when they can clearly see a product but are unable to navigate to it.” As sites realize this key opportunity for upsells, our benchmark sites shows a growing number o..

(Note: Unfortunately, e-mail and RSS don’t support advanced layouts and features. If the graphics in this article look strange, you may want to read the article in your web browser.) At Baymard, we’ve just released another major expansion to our 2020 Mobile UX research catalog, with the two main highlights being: a new 2020 mobile UX benchmark with 9,000+ new mobile best- and worst-practice examples. 117 new mobile UX guidelines based on extensive mobile usability testing. This article provides you with a short summary of our latest UX research initiatives. 1) UX Benchmark with 9,000+ new mobile examples released During 2020 we’ve UX performance benchmarked the mobile websites from 57 of the largest brands across our 250+ mobile UX guidelines, leading to a new “2020 Mobile E-Commerce UX benchmark”. This provides you with 9,000+ worst- and best-practice mobile UX examples, and 12,300+ mobile UX performance scores from 2020: You can view the Mobile E-Commerce UX performance an..

You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property. See the Pen Animated Pac-Man by Maks Akymenko (@maximakymenko) on CodePe..

In this oldie but goodie, Hampus Sethfors digs into why disabled buttons are troubling for usability reasons and he details one example where this was pretty annoying for him. The same has happened to me recently where I clicked a button that looked like a secondary button and... nothing happened. ..

You know the single-value syntax: .thing { display: block; }. The value "block" being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level elem..