Minimalism in e-Commerce pt 1
Minimalism has always had a great relationship with retail. Since the 60’s when minimalism started to take off, upwardly mobile consumers have embraced the design concept’s beauty, and closely associated it with products of high quality. Ever since, minimalism has been a design style that emphasized a high design aesthetic. It is closely aligned with the principles of simplicity from whence it springs. Using it in design and marketing makes products seem more designed and “simpler” as well.
Influences on Minimalism
In my research for this article, I came across minimalism of all types: design, art, film music, photography, architecture. All of the disciplines embraced the concept and had their own take. I would say the most known disciplines to embrace it are art and architecture. Drawing from Japanese concepts of balance, simplicity and geometry, Architects have been inspired by minimalism for over 90 years. The concept of minimalism removes everything unnecessary and only keeps the necessary. It seems a good fit for architects, who in an attempt to create harmonious space, want to create an environment that feels spacious and expansive. The expansive design in a physical space gives you a feeling of relaxation and calm, which is the goal of most spaces.
The other main concept architects brought to minimalism was the use of top notch materials. Architects brought in high quality woods and textures, and added them to open spaces. The effect is that you really notice the nicer materials. Also adding a minimal amount of furniture allowed architects and interior designers to invest budget into a smaller quantity of furnishings, but at the same time purchasing higher quality. These higher quality furnishings and materials had more impact because they were left on their own to create impact. If you have little to look at in a room, you focus even harder on what is there. If what is left is high quality, it evokes a feeling of quality. Plus the feeling of expansion.
Web designers have taken the concepts of architects and applied them to the web. Whitespace, high end materials (such as custom photography, and illustrations), minimal elements and simplicity are all concepts that translate well to web and UI design. Visual and web designers have embraced the concepts and applied them to the medium. The effects of minimalist are the same in web design and architecture. In essence minimalist design:
- helps users focus only on what is important by removing all distraction
- gives users a feeling of relaxation and space
- connects with an emotional desire
- uses space and geometry to instruct and guide uses
- maximizes impact by removing all extraneous elements
- engages users by making them think about how the interface works
- creates a sensation of value by aligning it with other high design
- but most of all… minimalism embraces simplicity.
Remove Everything Till It Breaks.
Minimalism embraces only what is necessary, and removes what is not. It is about using only the best elements, placing them in an expert fashion and removing all that is not necessary…. and it is not easy. It takes focus, prioritization and restraint. It takes balls. It is bold to remove everything but what is necessary, and not fear that the viewer or user will not get it because of a lack of information. It is precisely this boldness which catches people’s attention and draws them in.
Take a look at the ad below. You notice a speck in the center, and try to make it out. It is only after you read the copy on the right (which is the only other element that draws your attention), that you figure out that it is a car. This ad plays a great visual trick on the user, in which the artist has got them to think by making them look for something hidden, and then, drawing them in to question what it is. Only then do we give them the answer in the lower right.
This ad illustrates a perfect example of how minimalism works. It makes our prediction sense fail, and we pay attention. We expect the page to be filled with a lot of stuff that is easy to see and to read. Most of what we see is full and easily legible. When we see something missing, it engages us and makes us question why what we expected is not there. It draws us in and makes us demand an answer to what is the speck in the middle of the page.
When it comes to minimalist web design, we engage the user by putting few elements on the page. We further engage by using beautiful elements on the page, and expertly placing them to lead them in the direction we want them to go. We minimize options and give the user only the right choice at the right time. The following trends are techniques that web designers have used to create the same effects of spaciousness, beauty, and simplicity for maximum impact and engagement.
5 of 9 trends in minimalist web design:
1. Big luscious photography
With minimal elements on a page, a beautiful photograph sucks you in like a vacuum. Imagery provides an anchor for you to focus on and balanced with a minimal amount of distraction, are incredibly impactful. The below sites each uses photography in a unique way
Suit Supply– Unique Image Style
Suit Supply uses a unique image style to create engagement and draw users in. The designers of the site have done more than just create great photographs, they have created a compounded effect by unifying the style. They all have a specific look, as well as an action to them.
Lilybalou – Minimal impact navigation
This site maximizes the impact of the full screen images by using a thin minimal navigation system, and then placing it at the bottom, so the page feels more like a photo gallery than a website. They compound that with interesting front face shots of children to suck you in.
VanMoof – Full Screen Background images
Van Moof is a bicycle manufacturer based in New York. The company offers simple bicycles that demand top dollar. This site ups the ante by using free floating content and navigation, and full screen images. This allows the images to be even bigger (or smaller) and makes the images and the navigation look separated.
Manufacturer d’essai – Emulate a Magazine ad
Using a continuous scroll this site, this site uses large imagery to emulate a gigantic magazine spread, adding interactive elements on the page.
2. Minimal UI and navigation
Simplicity should not only apply to the amount if items on the page, but also ornamentation. The next samples are ones that remove all elements from the UI framework – all extra strokes, shadows, heavily contrasting colors, and nav bars, and removes them. These samples minimize the amount of options for navigation in order to make users go down a rabbit hole, and not distract them with extra elements. The UI is also transparent, and sometimes removed all together. The concept is to make the page look like art, and less like UI.
Apple – forked navigation
While Apple is a company that often exemplifies good design, and there is probably not an experienced web designer alive who hasn’t been told a million times to design it “simple like the Apple website,” one of the main concepts of the apple website may not be known. The Apple website has a very simple navigation system that forks users down a certain path, and does little to cross pollinate the path. The site, as of this writing, forks by product, and immerses you in the experience of each product. It removes distraction by strategically using the fork strategy. The forked strategy is further characterized by a limited amount of navigation options (anywhere from 4 to 8) on the top level main nav. The minimalist nav philosophy is that if you have less options you will not be overwhelmed with choice and will try one of the main options, as long as the “scent” of the information is clear. Apple does a great job using this approach and giving users the scent of information to keep them clicking.
Shoe Guru– free floating products and navigation
Shoe guru removes almost all UI elements, and free floats products. The nav bar is simply text without any ornamentation – shadows, strokes, button effects. The product display emulates a shoe wall that you would see in a shoe store, and shows only the price and name. This allows the products to really shine and be viewed without the design overpowering the product photos.
Shopbop – Type as navigation
Shopbop does a similar thing as Shoe Guru by using only type as navigation. The site further reduces all UI to simple boxes with black borders to simplify type and maximize the impact of the banners and product display.
RueLaLa – content as navigation.
Because of the limited amount of product in each nave category, RueLala.com uses a different strategy. They put all of the content available in one long page, and have users click direct to the category grid simply by clicking on a big beautiful product image. They use a grid approach, and while they do display a lot of content on the page that one may not technically call “minimalist” the approach here is to maximize engagement with a single page, which creates simplicity for the user, which is a key principle. Also, while not technically discouraging the user fro using the nav bar, the strategy is to use the nav bar more as a filter than proper navigation. This style of navigation has been popularized by the iPad and tablets, which in the interest of space, designers have been using hidden/collapsable navigation in order to create more space for content. As a result, they made large tap targets, that they designed for users to click on, and voila, the use of big images, minimal navigation, forced users to tap on the images, which in turn causes content strategists to create more intriguing targets to tap on.
3. Balanced Typography
The hallmark of minimalist design has always been type. When used properly, Type can create balance, asymmetry, clutter, space, density, and color. It has been the weapon of choice for minimalists for years because of its ability to convey messages when combined with images. And let’s face it beautiful typesetting is… well… beautiful. It’s engaging and exciting, but can stand all on it’s own to communicate messaging ideas. It can be used in and of itself to prioritize attention, and can be used all by itself. The below sites, use type, (expertly placed, expertly set) to create interest and lead the user to the most important items on the site.
Bored of South Sea – Typesetting to clarify calls to action
Bored of South Sea does a grew job of using dynamic to to draw attention to it’s calls to action. When used in conjunction with a minimal amount of type styles (as illustrated here), larger or contrasting type calls attention to itself to clarify calls to action in buttons and banners, and UI.
IWC – dynamic type for interest
Iwc has a bit of a different approach. Instead of a simplified approach, IWC uses several different sizes of type with the same uppercase setting to create a rhythm.,/p>
Fossil – simple typesetting for clarity
The Fossil site uses less type styles and contrast in order to draw attention to the main image section, and reduce attention from navigation. The effect is a very “cataloge-y” feeling website. It feels much more like a great catalogue than a typical e-commerce website.
4. Hiding everything
“If you can’t get rid of it… hide it.” —John Maeda
As Interactive designers in e-Commerce, we often are told that you cannot hide anything because of the hit to conversion rates. The thought is that if consumers can’t see it, they don’t know it exists right?…. hmmm…. not always.
As designers, we are constantly in search of the beautiful, the simple and the elegant, and nothing is beautiful, simple nor elegant about filling a page full of a bunch of crap. It is no longer design at that point. It is retrofitting. John Maeda in his book “Simplicity” has a long section on the topic of reduction. His thought is that simple design only contains the necessary, and removes the extraneous. If something cannot be removed, then the next course of action is to hide it. In designing products, this means covers and minimal controls. In interactive design, we must create intrguiging UI and delightful interactions in order to engage users and make them want to click. It is very difficult and a slippery slope. How do we create a visual design that draws attention to hidden things so users can find what they need, without going so obvious that the site becomes clunky. messy and disorganized. At the same time, conversion rate and usability cannot be sacrificed. The below sites do a great job of engaging the user, so he wants to click around and find the hidden UI elements, making it very fun along the way.
Nixon – Interactive elements using patterns for learnability
nixon.com is one of my favorite sites on this list. It makes you want to play with it, because on every interaction, something cool and new happens. Information is displayed on interaction, not upon load. Things like expanding menus, the banner images with hidden captions, and filters that expand, all create a great cohesive experience that encourages engagement, while serving users at the same time. It sacrifices little usability for the cool factor.
One of the concepts they use in order to create predictability is reuse of interactive design patterns. The 2 key ones are the expanding menus( which are used fortop level navigation, as well as the filter set), and the hover captions on the large images. This minimal set of patterns makes learning the site a breeze and improves usability.
Uniqlo– Universal scroll to reveal more
,p>Uniqlo uses a different technique of hiding that some might not call hiding – the universal scroll. I would argue the way in which they do it is a hiding technique… you just use your scroll wheel instead of your click to expose. The effect is the same – it feels like you are discovering more content as you scroll and it feels like you are uncovering content.
Makr.com – Hide labels
Makr.com does a greet job of keeping an ultra clean page by removing all type from the page until you hover over an image. The effect is an easy to read and elegant product page. They further enhance the page by adding an accordion display of the product upon click, which reveals more information as the user requires it.
5. Graceful Responsiveness
One of the fringe benefits of minimalism has been to make responsive design easier. The approach of minimal navigation, large images and minimal ornamentation makes responsive design easier, because there is simply less to scale. Large images scale nicely, there is less type and less ornaments that need to be retrofitted to the multiple screen size. If there’s less to scale, then it makes design, development and upkeep simpler and faster.
Indochino – Going larger gracefully
Indochino does something most designers don’t consider— going large gracefully. While everybody is rightly concerned with mobile devices, this site also accommodates big screens very nicely. Using large tiled images, this site fills the screen and creates a beautiful experience not only for small screens, but for big ones as well.
Tattly – minimal oranmentation to make responsiveness simpler
The Tattly site is truly simple: Just text, images and a few strokes. Their strategy of keeping things simple makes responsiveness easier because there is less stuff moving, shifting and scaling. This means easier coding, QA time and implementation time. If you put a site like this together the dev team will love you. Simple, elegant, AND easy to code.
Five Simple Steps – Simplified grid
Five simple steps combines minimalism with a basic grid structure to make responsiveness easier. They use a simple 2 column grid that expands and contracts and scales images. They have worked this into the design so that it feels right and scales nicely. They took advantage of the simplicity of the layout and the whitespace to make the grid flow smoothly and make the scaling to alternative devices headache free.
That’s it for this issue!
I will do numbers 6 -9 in the next few weeks. In the meantime, you can checkout the presentation slides on slideshare.net. Email me with any questions.